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

  Date: 2021-09-01
  CSS Document ： felissimo chocolate museum /fcm/
  
  ミュージアムについて（コンセプト）style
  
=============================================================*/
/*------------------------------------

タイトル部分

------------------------------------*/
.ttl_fcm {
 background-image: url('../images/ttl_concept_bg.jpg');
}
.ttl_fcm .c-ttl-main_fcm {
 text-shadow: #9d7b65 0px 0px 28px;
}
.ttl_fcm .c-ttl-sub_fcm {
 text-shadow: #9d7b65 0px 0px 10px;
}
/* SP */
@media (max-width: 919px) {
 .ttl_fcm {
  background-position: 74%;
 }
}
.indent_fcm {
display: inline-block;
padding-left: 1em;
text-indent: -1em;
}
/*------------------------------------

concept

------------------------------------*/
.main_fcm {
 background-image: url('../images/bg_brown_top.png');
 background-repeat: no-repeat;
 background-position: top 320px left;
 background-size: 30%;
 padding: 100px 0;
}
/* キャッチ */
.catch_fcm {
 display: block;
 font-family: 'Hiragino Mincho W4 JIS2004';
 font-size: 300%;
 font-style: normal;
 color: #2e1b0e;
 line-height: 1.4;
 position: relative;
 z-index: 1;
}
/* テキスト部分 */
.concept-box_fcm {}
.concept-box_fcm p {
 margin: 3em 0;
}
/* PC */
@media (min-width: 920px) {
 .catch_fcm {
  float: left;
  width: 50%;
 }
 /* イメージ部分 */
 .concept-image-box_fcm {
  width: 70%;
  margin-top: -13%;
  margin-right: -20%;
  float: right;
 }
 /* テキスト部分 */
 .concept-box_fcm {
  width: 45%;
  float: left;
 }
}
/* SP */
@media (max-width: 919px) {
 .category-box_fcm {}
 .main_fcm {
  background-repeat: no-repeat;
  background-position: top 10vw left;
  background-size: 80%;
  padding: 100px 0;
  font-size: 125%;
 }
 .catch_fcm {
  font-size: 220%;
 }
}
/* イメージ詳細 */
.concept-image-box_fcm {
 position: relative;
 z-index: 0;
}
/* コンセプト画像 */
.concept-image-box_fcm span {
 display: block;
}
.concept-image-box_fcm span img {
 width: 100%;
}
.concept-image-01_fcm {
 width: 65.8%;
 position: relative;
 z-index: 3;
}
.concept-image-02_fcm {
 position: relative;
 width: 47.5%;
 float: right;
 z-index: 2;
 margin-top: -10%;
 margin-bottom: -3%;
 margin-right: 9%;
}
.concept-image-03_fcm {
 position: relative;
 width: 47.5%;
 z-index: 1;
 margin-top: 0%;
 margin-left: 6%;
}
/* PC */
@media (min-width: 920px) {}
/* SP */
@media (max-width: 919px) {
 .concept-image-box_fcm {
  margin-top: 2em;
  width: 110%;
 }
 .concept-image-01_fcm {
  margin-top: 0em;
 }
}
/*------------------------------------

ロゴの説明

------------------------------------*/
.logo-box_fcm {
 padding: 100px 0 50px;
}
.logo-box-text-ttl_fcm {
 text-align: center;
 line-height: 1.4;
 font-family: 'Barlow', sans-serif;
 font-size: 160%;
 font-weight: 300;
 font-style: italic;
 padding-bottom: 1em;
 margin-bottom: 1em;
 border-bottom: 1px solid #808080;
}
.logo-box-image_fcm img {
 width: 100%;
}
/* PC */
@media (min-width: 920px) {
 .logo-box_fcm {
  display: flex;
  justify-content: center;
  align-items: center;
 }
 /* ロゴ画像 */
 .logo-box-image_fcm {
  width: 28%;
  margin: 0 5%;
 }
 /* ロゴテキスト */
 .logo-box-text_fcm {
  width: 40%;
 }
}
/* SP */
@media (max-width: 919px) {
 .logo-box_fcm {
  margin: 20px auto 0px;
 }
 .logo-box-image_fcm {
  width: 60%;
  margin: 0 auto;
 }
 /* ロゴテキスト */
 .logo-box-text_fcm {
  margin-top: 4em;
 }
 .logo-box-text-ttl_fcm {
  font-size: 150%;
 }
}
/*------------------------------------

MUSEUM GUIDE：ミュージアムガイド

------------------------------------*/
#museum-guide_fcm {
 /* margin: 10em auto 8em; */
 padding-top: 9em;
}
/* テキスト部分 */
.box_fcm {}
.box_fcm p {
 margin: 1em 0 0;
}
/* PC */
@media (min-width: 920px) {
 /* イメージ部分 */
 .image-box_fcm {
  width: 70%;
  margin-top: -9%;
  margin-right: -26%;
  float: right;
 }
 /* テキスト部分 */
 .box_fcm {
  width: 47%;
  float: left;
 }
}
/* イメージ詳細 */
.image-box_fcm {
 position: relative;
 z-index: 0;
}
/* コンセプト画像 */
.image-box_fcm span {
 display: block;
}
.image-box_fcm span img {
 width: 100%;
}
.image-01_fcm {
 width: 58.5%;
 position: relative;
 z-index: 3;
}
/* PC */
@media (min-width: 920px) {}
/* SP */
@media (max-width: 919px) {
 #museum-guide_fcm {
  /* margin: 7em auto 6em; */
  padding-top: 7em;
 }
 #museum-guide_fcm .c-ttl-main_fcm {
  font-size: 330%;
 }
 .image-box_fcm {
  margin: 2em 0;
 }
 .image-01_fcm {
  width: 100%;
  margin-top: 0em;
 }
}
/*------------------------------------

museum holic：ミュージアムホリック

------------------------------------*/
#museum-shop_fcm {
    padding-top: 8em;
}
.image-static-box_fcm {
 display: flex;
 clear: both;
 justify-content: center;
}
.image-static-box_fcm span {
 margin: 4em 1em 0;
}
.image-02_fcm {}
.image-03_fcm {}
/* SP */
@media (max-width: 919px) {
 #museum-shop_fcm .c-ttl-main_fcm {
  font-size: 330%;
 }
 .image-static-box_fcm {
  justify-content: space-between;
 }
 .image-static-box_fcm span {
  width: 47%;
  margin: 2em 0 0;
 }
 .image-static-box_fcm img {
  width: 100%;
 }
}
/*------------------------------------

コンセプトページ .animation

------------------------------------*/
/* タイトル */
.catch-main_fcm {
 display: block;
 overflow: hidden;
 width: 1px;
 white-space: nowrap;
 animation: width-0-100 1.8s forwards;
 animation-delay: 2.0s;
}
/* 横から表示 */
@keyframes width-0-100 {
 0% {
  width: 0;
 }
 100% {
  width: 100%;
 }
}
/* コンセプト */
.concept-box_fcm {
 animation: fade_btm 1.0s forwards;
 animation-delay: 1.0s;
 opacity: 0;
}
.concept-image-box_fcm span {
 transition: all 1.2s;
 opacity: 0;
}
.concept-image-box_fcm.action_fcm .concept-image-01_fcm {
 animation: fade_btm 1.0s forwards;
 animation-delay: 1.0s;
}
.concept-image-box_fcm.action_fcm .concept-image-02_fcm {
 animation: fade_btm 1.0s forwards;
 animation-delay: 1.3s;
}
.concept-image-box_fcm.action_fcm .concept-image-03_fcm {
 animation: fade_btm 1.0s forwards;
 animation-delay: 1.5s;
}