@charset "UTF-8";
/*=============================================================

  Date: 2026-10-06
  CSS Document ： felissimo chocolate museum
  
  ヘッダー・フッター
  
=============================================================*/
/*------------------------------------

header

------------------------------------*/
#header_fcm {
 font-size: 75%;
 position: fixed;
 z-index: 10;
 top: 0;
 left: 0;
 width: 100%;
 min-height: 56px;
 border-bottom: 1px solid #e5e5e5;
 background: #fff;
}
#header_fcm .inner_fcm {
 position: relative;
 height: 100%;
 /* display: block; */
 /* background: #ccc; */
 /* display: flex; */
 /* justify-content: center; */
 /* align-items: center; */
}
/* header logo */
#header_fcm .logo_fcm {
 width: 25%;
 position: absolute;
 z-index: 3;
 top: 1em;
 left: 3%;
 box-sizing: border-box;
 /*transition: all 0.3s;*/
}
#header_fcm .logo_fcm a {
 position: relative;
 width: 100%;
 display: block;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
#header_fcm .logo_fcm img {
 background: #fff;
 width: 80%;
}
#header_fcm .logo_fcm img.icon-anniversary_fcm {
	width: 16%;
}



/*===== PC =====*/
@media (min-width: 920px) {
 #header_fcm {
  min-width: 920px;
 }
}
/*===== SP =====*/
@media (max-width: 919px) {
 #header_fcm .logo_fcm {
  width: 63%;
  max-width: 320px;
  padding: .8vw 0 0;
  left: 3%;
 }
 #header_fcm .logo_fcm img.logo-beside_fcm {
  margin-top: 0vw;
 }
 #header_fcm .logo_fcm img.logo-normal_fcm {
  width: 40%;
 }
 #header_fcm .logo_fcm.beside_fcm {}
 #header_fcm .inner_fcm {
  width: 100%;
 }
}
@media (max-width: 375px) {
 #header_fcm .logo_fcm img.logo-beside_fcm {
  margin-top: 1.5vw;
 }
}

/*------------------------------------

グローバルナビ

------------------------------------*/
.gnav_fcm {
 padding: 1.5em 0 0.5em;
 width: 100%;
 display: block;
 font-family: 'Hiragino Kaku Gothic W4 JIS2004', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';

}
.gnav-menu_fcm ul li {
 display: block;
 padding: .8em 0.8% .5em;
 min-width: 3em;
}
/* PC */
@media (min-width: 920px) {
 .gnav-btn_fcm {
  display: none;
 }
 .gnav-menu_fcm {
  position: relative;
  right: auto;
  min-height: 50px;
 }
 .gnav-menu_fcm ul {
  display: block;
  text-align: right;
  width: 100%;
 }
 .gnav-menu_fcm ul li {
  display: inline-block;
  position: relative;
 }
 .gnav-menu_fcm ul li > a::after {
  display: block;
  width: 0;
  height: 2px;
  content: '';
  transition: all .3s;
  background: #000;
 }
 .gnav-menu_fcm ul li div a::after {
  display: block;
  width: 0;
  height: 1px;
  content: '';
  transition: all .4s;
  background: #d2d2d2;
 }
 .gnav-menu_fcm ul li > a.active::after, .gnav-menu_fcm ul li a:hover::after {
  width: 100%;
 }
 .gnav-sub_fcm {
  display: none;
  height: auto;
  font-size: 90%;
  position: absolute;
  padding-top: 10px;
  top: 3.4em;
  left: 0%;
  text-align: left;
  width: max-content;
  min-width: 100%;
 }
 .gnav-sub-inner_fcm {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.2em 1.5em;
  background: #f2f2f2;
 }
 .gnav-sub-inner_fcm span {
  position: absolute;
  top: 0px;
  left: calc(50% - 10px);
  margin: auto;
  vertical-align: middle;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #f2f2f2;
 }
 .gnav-sub_fcm a {
  display: block;
 }
 .gnav-menu_fcm ul li:nth-child(1) .gnav-sub_fcm {left: -18%;}
 .gnav-menu_fcm ul li:nth-child(2) .gnav-sub_fcm {left: -1%;}
 .gnav-menu_fcm ul li:nth-child(3) .gnav-sub_fcm {left: -36%;}
 .gnav-menu_fcm ul li:nth-child(4) .gnav-sub_fcm {left: -77%;}
 .gnav-menu_fcm ul li:nth-child(5) .gnav-sub_fcm {left: -0%;}
 .gnav-menu_fcm ul li:nth-child(6) .gnav-sub_fcm {left: -12%;}
}
/* SP */
@media (max-width: 919px) {
 /* SP用 ハンバーガーメニュー */
 .gnav_fcm .gnav-btn_fcm {
  position: relative;
  z-index: 4;
  float: right;
  box-sizing: border-box;
  width: 30px;
  height: 24px;
  margin: 8px 5% 19px 0;
  cursor: pointer;
  transition: all 400ms;
 }
 .gnav_fcm .gnav-btn_fcm span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  transition: all 400ms;
  border-radius: 10px;
  background: #bda881;
 }
 .gnav_fcm .gnav-btn_fcm span:nth-child(1) {
  top: 0;
 }
 .gnav_fcm .gnav-btn_fcm span:nth-child(2) {
  top: 10px;
 }
 .gnav_fcm .gnav-btn_fcm span:nth-child(3) {
  top: 20px;
 }
 .gnav_fcm .gnav-btn_fcm.open span:nth-child(1) {
  top: 6px;
  transform: rotate(-45deg);
  background: #bda881;
 }
 .gnav_fcm .gnav-btn_fcm.open span:nth-child(2), .gnav_fcm .gnav-btn_fcm.open span:nth-child(3) {
  top: 6px;
  transform: rotate(45deg);
  background: #bda881;
 }
 .gnav-menu_fcm {
  position: absolute;
  z-index: 2;
  top: 0;
  right: -100vw;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  transition: .3s;
  background: #fff;
 }
 .gnav-menu_fcm.open {
  z-index: 3;
  right: 0;
  width: 100vw;
 }
 .gnav-menu_fcm ul li a {
  padding-bottom: 0.5em;
  text-decoration: none;
  display: block;
  line-height: 1.4;
 }
 .gnav-menu_fcm ul {
  display: flex;
  flex-direction: column;
  width: 100%;
 }
 .gnav_fcm {
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  font-size: 150%;
 }
 .gnav_fcm.open {
  z-index: 3;
 }
 .gnav-menu_fcm {
  padding-top: 1vh;
  width: 100vw;
  padding: 3em 0 4vh;
  border-bottom: 1px solid #e5e5e5;
 }
 .gnav-menu_fcm ul {
  width: 85%;
  margin: 0 auto 0;
  flex-direction: inherit;
  flex-wrap: wrap;
  justify-content: space-between;
 }
 .gnav-menu_fcm ul li{
  display:
  block;
  width: 47%;
  box-sizing: border-box;
 }
.gnav-menu_fcm ul li > a {
  font-weight: bold;
  display: block;
  margin: 1em 0 0.5em -.95em;
  padding-left: .7em;
  border-left: 3px solid #444444;
  line-height: 1;
 }
  .gnav-sub_fcm {
  display: block;
 }
 .gnav-sub-inner_fcm {
 }
 .gnav-sub-inner_fcm span {
 }
 .gnav-sub_fcm a {
 }
 
}


/*------------------------------------

Footer_fcm

------------------------------------*/
#footer_fcm {
 font-size: 90%;
 padding: 3em 0;
 color: #fff;
 background-color: #28160d;
 background-image: url('../images/common/bg_footer.jpg');
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
	
 font-family: 'Hiragino Kaku Gothic W4 JIS2004', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';
}
#footer_fcm .flex_fcm {
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-around;
}
/* Footer logo */
.footer-logo_fcm {
 width: 14%;
 padding-right: 7%;
 text-align: center;
 /* border-right: 1px solid #bda881; */
}
#footer_fcm .logo_fcm {
 z-index: 1;
 box-sizing: border-box;
 width: 100%;
}
#footer_fcm .logo_fcm img {
 width: 100%;
}
/* Footer link list */
#footer_fcm a {
 display: block;
 color: #fff;
}
#footer_fcm .footer-nav_fcm ul li {
 line-height: 1;
 margin: 0 0em 2em 3em;
}
#footer_fcm .footer-nav_fcm ul li a {
 margin-bottom: 1em;
}
/* footer リスト 見出し */
#footer_fcm .footer-nav-head_fcm:not(:first-child) {
 margin: 3.0em 0px 0;
}
#footer_fcm .footer-nav-head_fcm a {
 font-weight: bold;
 display: block;
 margin: 0 0 0 -.95em;
 padding-left: .7em;
 border-left: 4px solid #fff;
}
/* footer 予約ボタン */
#footer_fcm .footer-nav_fcm .footer-nav-reserve_fcm {
 width: 200px;
 margin-top: 3em;
}
/* コピーライト */
.copyright_fcm {
 font-family: 'Barlow', sans-serif;
 font-weight: 300;
 font-style: italic;
 text-align: right;
}
/* PC */
@media (min-width: 920px) {
 #footer_fcm .footer-nav_fcm ul {
  display: flex;
  flex-flow: nowrap;
  justify-content: space-around;
  margin-top: 0em;
 }
 #footer_fcm .footer-nav_fcm a:hover {
  opacity: 0.6;
 }
}
/* SP */
@media (max-width: 919px) {
 .footer-logo_fcm {
  width: 35%;
  padding-right: 5%;
 }
 #footer_fcm .footer-nav_fcm .footer-nav-reserve_fcm {
  width: 100%;
  margin-top: 3em;
 }
 #footer_fcm .footer-nav_fcm ul li {
 margin: 0 0em 2em 0em;
}
}
/*------------------------------------

SNS

------------------------------------*/
#sns_fcm {
 display: block;
 margin: 1.5em 0;
 text-align: center;
}
#sns_fcm ul {
 display: flex;
 justify-content: center;
 width: 100%;
 gap: 10%;
}
#sns_fcm li {
 display: block;
 /* height: 45px; */
 /* margin: 0 15px; */
}
#sns_fcm li a {
 width: 100%;
 display: block;
}
#sns_fcm li img {
 width: auto;
 height: 100%;
 height: 2em;
}
/* SP */
@media (max-width: 919px) {}
/*------------------------------------

追尾 予約ボタン

------------------------------------*/
/* 丸ボタン */
/* .reserve-btn_fcm {
 position: fixed;
 z-index: 2;
 right: 30px;
 bottom: 30px;
 display: block;
 height: auto;
 text-align: center;
} */
.reserve-btn_fcm.new-reserve {
 position: fixed;
 z-index: 2;
 right: 0;
 bottom: 50px;
 display: block;
 height: auto;
 text-align: center;
}
.reserve-btn_fcm a {
 position: relative;
 display: inline-block;
 width: 130px;
}
.reserve-btn_fcm a img {
	 position: relative;
}
.reserve-btn_fcm a::before {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 100%;
 height: 100%;
 content: '';
 transition: all .3s;
 border-radius: 50%;
 background: #3c1e00;
}
.reserve-btn_fcm a.set-ticket {
	margin-top: 16px;
	width: 175px;
	display: block;
}
.reserve-btn_fcm a.set-ticket::before {
 position: absolute;
 top: 0;
 left: auto;
 right: 0;
 display: block;
 width: 105%;
 height: 100%;
 content: '';
 transition: all .3s;
 border-radius: 3em 0 0 3em;
}

.reserve-btn_fcm a.set-ticket.atoa::before {
    background: #0d6fb8;
}
.reserve-btn_fcm a.set-ticket.porttower::before {
    background: #e43737;
}

@media (min-width: 920px) {
 .reserve-btn_fcm a:hover {
  opacity: 1;
 }
 .reserve-btn_fcm a:hover::before {
  transform: scale(1.05, 1.05);
 }
}
@media (max-width: 919px) {
 /*SP*/
 .reserve-btn_fcm {
  right: 2vw;
  bottom: 2.5vw;
  width: 23%;
  height: 23vw;
 }
	.reserve-btn_fcm.new-reserve {
 bottom: 5vw;
 width: 23vw;
 right: 2.5vw;
}
	.reserve-btn_fcm a {
	width: 100%;
	}
	.reserve-btn_fcm a.set-ticket {
	width: 64%;
	margin-left: -28%;
}
	.reserve-btn_fcm a.set-ticket {
		width: 138%;
		margin-top: 2.8vw;
	}
}
/*------------------------------------

ページトップボタン

------------------------------------*/
/* .pagetop-btn_fcm {
width: 180px;
} */
/*------------------------------------

フェリシモ共通 Footer

------------------------------------*/
#Footer_fca ul {
 border-top: none;
}



/*------------------------------------

60周年記念ロゴ追加

------------------------------------*/
.contents60th {
     width: 170px;
     max-width: 1200px;
     margin: 2em auto 0;
 }
 .contents60th img {
     width: 100%;
	 text-align: center;
 }
 .text-center {
     text-align: center;
 }
 .flexbox {
     display: flex;
 }
 .box1 {
     width: 100%;
     margin: auto;
 }
 @media screen and (max-width: 767px) {
     .contents60th {
         width: 40%;
     }
     .flexbox {
         display: block;
     }
     .flexbox .box1 {
         width: 100%;
         margin: 0 auto;
		 text-align: center;
     }
 }