@charset "UTF-8";

/*
  ページ別CSS
*/



/***********************************************************
#1 オーバーライド：c-contents
***********************************************************/
#c-contents {
  padding-top: 0;
}




/***********************************************************
#1 オーバーライド：c-main
***********************************************************/
#c-main {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}




/***********************************************************
#1 オーバーライド：base-class
***********************************************************/
/* 別ウィンドウ */
a[target="_blank"] {
  background-image: none;
  padding: 0;
}




/***********************************************************
#1 ページ内共通
***********************************************************/
/* セクション見出し */
#c-main .sectionheader h2 {
  font-size: 180%;
  font-weight: bold;
  line-height: 100%;
  margin: 0 0 0.1em 0;
  border: none;
  text-align: center;
}
#c-main .sectionheader p {
  font-size: 85%;
  line-height: 100%;
  font-family: 'Segoe UI',Arial,'Helvetica Neue',Roboto,'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic ProN',sans-serif;
  text-align: center;
}




/***********************************************************
#1 メインイメージラッパー
***********************************************************/
.wrap-mainimage {
  position: relative;
}




/***********************************************************
#1 スライダー
***********************************************************/
.box-slider {
  position: relative;
}

/* ロゴ */
.box-slider .logo {
  position: absolute;
  max-width: 30%;
  z-index: 10;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/*//////////////////
#4 レスポンシブ（タブレット用）
//////////////////*/
@media screen and (max-width: 768px) {
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  .box-slider .logo {
    max-width: none;
  }
}




/***********************************************************
#1 重要なお知らせ
***********************************************************/
#c-main .box-important {
  background: #1c1b1b;
  margin: 0 auto;
  padding: 2em 1em;
}
#c-main .box-important-inner {
  width: 50%;
  display: table;
}

/* 見出し */
#c-main .box-important .theader {
  width: 25%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
#c-main .box-important .theader h2 {
  display: inline-block;
  *display: inline;
  *zoom: 1;

  color: #ada5a5;
  margin: 0;
  border: none;
  font-size: 100%;
  text-align: center;
}

/* 記事 */
#c-main .box-important .tdata {
  width: 75%;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  padding-left: 1em;
}
#c-main .box-important .tdata ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 120%;
}
#c-main .box-important .tdata ul li {
  margin: 0.8em 0 0.8em 0;
  padding: 0;
}
#c-main .box-important .tdata ul li a:link,
#c-main .box-important .tdata ul li a:visited {
  color: #fff;
  text-decoration: none;
  font-weight: bold;

  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  transition-property: opacity;
  transition-duration: 0.5s;
}
#c-main .box-important .tdata ul li a:hover,
#c-main .box-important .tdata ul li a:active {
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
  -khtml-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;

  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.3s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.3s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.3s;
  transition-property: opacity;
  transition-duration: 0.3s;
}


/*//////////////////
#4 レスポンシブ（<=1300）
//////////////////*/
@media screen and (max-width: 1300px) {
  /* 見出し */
  #c-main .box-important .theader {
    width: auto;
    display: block;
    text-align: left;
    margin-bottom: 1em;
  }

  /* 記事 */
  #c-main .box-important .tdata {
    width: auto;
    display: block;
    padding-left: 0;
  }
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-important-inner {
    width: 100%;
    display: table;
  }
}




/***********************************************************
#1 幸楽苑とは
***********************************************************/
#c-main .box-about {
  margin: 0 auto 9em;
  padding: 0 0 9em;
  text-align: center;
  background: #000;
}

/* ヘッダー */
#c-main .box-about-header {
  height: 640px;
  background: url(../images/about_bg.jpg) no-repeat center center;
  background-size: cover;
}

/* インナー */
#c-main .box-about-inner {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}

/* 写真 */
#c-main .box-about-photo {
  width: 50%;
  float: right;
  text-align: center;
  margin-top: -3em;
}
#c-main .box-about-photo p {
  margin: 0;
}

/* コピー */
#c-main .box-about-copy {
  width: 50%;
  padding-top: 6em;
}
#c-main .box-about-copy-inner {
  margin: 0 auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: left;
}

/* 見出し */
#c-main .box-about .sectionheader {
  margin-left: 2em;
}
#c-main .box-about .sectionheader h2 {
  text-align: left;
}

/* 本文 */
#c-main .box-about-copy p  {
  margin-left: 2em;
}

/* リンク */
#c-main .box-about a.link-btn {
  color: #fff;
  background-color: #b91a05;
  padding: 2em 1em;
  border: none;
}
#c-main .box-about a.link-btn:before {
  display: none;
}
#c-main .box-about a.link-btn:hover,
#c-main .box-about a.link-btn:active {
  background-color: #ff2407;
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-about {
    margin-bottom: 4em;
    padding-bottom: 4em;
  }

  /* ヘッダー */
  #c-main .box-about-header {
    height: 320px;
  }

  /* 写真 */
  #c-main .box-about-photo {
    width: 40%;
    margin-top: 13em;
    margin-left: -5%;
  }

  /* コピー */
  #c-main .box-about-copy {
    width: 65%;
    padding-top: 2em;
  }

  /* 見出し */
  #c-main .box-about .sectionheader {
    margin-left: 1em;
  }

  /* 本文 */
  #c-main .box-about-copy p  {
    margin-left: 1em;
  }
}




/***********************************************************
#1 お品書き
***********************************************************/
#c-main .box-menu {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto 9em;
  padding: 0 1em;
}

/* 見出し */
#c-main .box-menu .sectionheader {
  margin-bottom: 3em;
}

/* メニュー */
#c-main .box-menu ul {
  list-style-type: none;
  margin: 0 0 2em;
  padding: 0;
  content-visibility: auto;
}
#c-main .box-menu ul li {
  list-style-type: none;
  margin: 0 0 1em 0;
  padding: 0;
  float: left;
  width: 30%;
  margin-right: 3.3%;
  background: #FFD740;
}
#c-main .box-menu ul li:nth-child(3n) {
  margin-right: 0;
}
#c-main .box-menu ul li a {
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  background: url(../images/menu_li_bg.jpg) no-repeat center center;
  background-size: cover;
  position: relative;
  color: #fff;
  font-size: 200%;

  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  transition-property: opacity;
  transition-duration: 0.5s;
}
#c-main .box-menu ul li a:hover,
#c-main .box-menu ul li a:active {
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
  -khtml-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;

  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.3s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.3s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.3s;
  transition-property: opacity;
  transition-duration: 0.3s;
}
#c-main .box-menu ul li a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-menu {
    margin-bottom: 4em;
  }

  /* メニュー */
  #c-main .box-menu ul li {
    width: 47%;
    margin-right: 6%;
    background: #FFD740;
  }
  #c-main .box-menu ul li:nth-child(3n) {
    margin-right: 6%;
  }
  #c-main .box-menu ul li:nth-child(2n) {
    margin-right: 0;
  }
  #c-main .box-menu ul li a {
    font-size: 130%;
  }
}




/***********************************************************
#1 バナー
***********************************************************/
#c-main .box-bnr {
  background: #000;
  padding: 4.5em 1em;
  margin-bottom: 9em;
}

/* バナー */
#c-main .box-bnr ul {
  display: flex;
  flex-wrap: wrap;       /* 画面が狭くなったら折り返す */
  gap: 16px;             /* バナー同士の隙間（上下左右） */
  list-style: none;      /* liの「•」を消す */
  padding: 0;
  margin: 0 auto;        /* 4つ並びきった後、さらに画面が広くなったら全体を中央寄せにする */
  width: 100%;
  justify-content: center;

  /* 最大幅の計算：(バナー4つ分 531px * 4) + (隙間3つ分 16px * 3) */
  max-width: calc((531px * 4) + (16px * 3));
}
#c-main .box-bnr ul li {
  width: calc((100% - 16px * 3) / 4); 
  min-width: 200px;      /* 画面が極端に狭くなった時の1つの最小幅（数字は自由に変更可） */
  flex-grow: 1;          /* バナーが4個未満のとき、隙間を埋めるように広げる設定（左寄せにしたい場合は不要） */

  max-width: 531px;      /* 1つのバナーは最大531pxまでしか大きくならない */
  min-width: 200px;      /* 画面が狭くなったときの1つの最小幅（折り返しの基準） */
}
#c-main .box-bnr ul li a {
  display: block;
  width: 100%;
  height: 100%;
}
#c-main .box-bnr ul li a img {
  width: 100%;
  height: auto;          /* 縦横比を維持 */
  vertical-align: bottom;/* 画像の下にできる謎の隙間を消す */
  object-fit: cover;     /* 万が一画像のサイズが違っても綺麗に収める */
}

/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-bnr {
    width: auto !important;
    max-width: none;
    padding: 2.5em 5%;
    margin-bottom: 4em;
  }

  /* バナー */
  #c-main .box-bnr ul {
    display: block;
  }
  #c-main .box-bnr ul li {
    width: 100%;
    margin-bottom: 1.5em;
  }
  #c-main .box-bnr ul li:last-child {
    margin-bottom: 0;
  }
}




/***********************************************************
#1 ブログ
***********************************************************/
#c-main .box-blogs {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto 9em;
  padding: 0 1em;
}

/* 見出し */
#c-main .box-blogs-header {
  width: 30%;
  float: left;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#c-main .box-blogs .sectionheader {
}
#c-main .box-blogs .sectionheader h2 {
  text-align: left;
  margin: 0;
  line-height: 1.5em;
}
#c-main .box-blogs .sectionheader p {
  text-align: left;
  margin: 0 0 0 1em;
}

/* 本文 */
#c-main .box-blogs-body {
  width: 70%;
  margin-left: 30%;
}

/* フィード */
#c-main .box-blogs .feeds ul {
  list-style-type: none;
  margin: 0 0 3em;
  padding: 0;
  line-height: 150%;
}
#c-main .box-blogs .feeds ul li {
  margin: 0 0 1.5em 0;
  padding: 0 0 1.5em 0;
  border-bottom: solid 1px #fff;
}

/* 共通 */
#c-main .box-blogs .feeds ul li div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 日付 */
#c-main .box-blogs .feeds ul li div.date {
  float: left;
  color: #ada5a5;
  font-size: 90%;
  margin-right: 0.5em;
  line-height: 100%;
}

/* サイト */
#c-main .box-blogs .feeds ul li div.site {
  float: left;
  color: #ada5a5;
  font-size: 90%;
  padding-left: 0.5em;
  border-left: solid 1px #ada5a5;
  line-height: 100%;
}

/* タイトル */
#c-main .box-blogs .feeds ul li div.title {
  width: 100%;
}
#c-main .box-blogs .feeds ul li div.title a {
  display: block;
}

/* ボタン */
#c-main .box-blogs .btn {
}
#c-main .box-blogs .btn ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#c-main .box-blogs .btn ul li {
  margin: 0 0 15px 15px;
  padding: 0;
  float: left;
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-blogs {
    margin-bottom: 4em;
  }
}




/***********************************************************
#1 店舗・アクセス
***********************************************************/
#c-main .box-store {
  margin-bottom: 9em;
  background: url(../images/store_bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 9em 0 7em;
  color: #fff;
  text-align: center;
}

/* 見出し */
#c-main .box-store .sectionheader {
  margin-bottom: 2em;
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-store {
    margin-bottom: 4em;
  }
}




/***********************************************************
#1 ご予約、お問い合わせ
***********************************************************/
#c-main .box-contact {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto 9em;
  padding: 0 1em;
}

/* 見出し */
#c-main .box-contact-header {
  width: 30%;
  float: left;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#c-main .box-contact .sectionheader {
}
#c-main .box-contact .sectionheader h2 {
  text-align: left;
  margin: 0;
  line-height: 1.5em;
}
#c-main .box-contact .sectionheader p {
  text-align: left;
  margin: 0 0 0 1em;
}

/* 本文 */
#c-main .box-contact-body {
  width: 70%;
  margin-left: 30%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

/* 電話で */
#c-main .box-contact .contact-tel {
  text-align: left;
}
#c-main .box-contact .contact-tel .caption {
  font-size: 110%;
  margin: 0 0 0.5em;
}
#c-main .box-contact .contact-tel .tel {
  font-size: 150%;
  margin: 0 0 0.5em;
}
#c-main .box-contact .contact-tel .tel a {
  font-size: 160%;
}
#c-main .box-contact .contact-tel .time {
  font-size: 90%;
}

/* Webで */
#c-main .box-contact .contact-tel {
}

/* ボタン */
#c-main .box-contact .btn {
}
#c-main .box-contact .btn ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#c-main .box-contact .btn ul li {
  margin: 0 0 15px 15px;
  padding: 0;
  float: left;
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-contact {
    margin-bottom: 4em;
  }

  /* 見出し */
  #c-main .box-contact .sectionheader h2 {
    line-height: 1.2em;
  }
  #c-main .box-contact .sectionheader p {
    margin: 0 0 0 0.5em;
  }

  /* 電話で */
  #c-main .box-contact .contact-tel .caption {
    font-size: 100%;
  }
  #c-main .box-contact .contact-tel .tel {
    font-size: 130%;
  }
  #c-main .box-contact .contact-tel .tel a {
    font-size: 150%;
  }
  #c-main .box-contact .contact-tel .time {
    font-size: 90%;
  }
}




/***********************************************************
#1 SNS
***********************************************************/
#c-main .box-sns {
  padding: 4em 0;
  background: #000;
  text-align: center;
}

/* 見出し */
#c-main .box-sns h2 {
  font-size: 120%;
}

/* リンク */
#c-main .box-sns ul li a {
  color: #fff;
  display: block;
  text-decoration: none;

  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.5s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.5s;
  transition-property: opacity;
  transition-duration: 0.5s;
}
#c-main .box-sns ul li a:hover,
#c-main .box-sns ul li a:active {
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)";
  -khtml-opacity: 0.6;
  -moz-opacity: 0.6;
  opacity: 0.6;

  -webkit-transition-property: opacity;
  -webkit-transition-duration: 0.3s;
  -moz-transition-property: opacity;
  -moz-transition-duration: 0.3s;
  -o-transition-property: opacity;
  -o-transition-duration: 0.3s;
  transition-property: opacity;
  transition-duration: 0.3s;
}

/* SNSアイコン */
#c-main .box-sns ul {
  list-style-type: none;
  margin: 0;
  text-wrap: nowrap;
}
#c-main .box-sns ul li {
  list-style-type: none;
  display: inline-block;
  padding: 0 2em;
}
#c-main .box-sns ul li img {
  height: 40px;
}


/*//////////////////
#4 レスポンシブ（タブレット用）
//////////////////*/
@media screen and (max-width: 768px) {
}


/*//////////////////
#4 レスポンシブ（スマートフォン用）
//////////////////*/
@media screen and (max-width: 640px) {
  #c-main .box-sns ul li {
    padding: 0 1em;
  }
  #c-main .box-sns ul li img {
    height: 30px;
  }
}