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

  Date: 2021-09-01
  CSS Document ： felissimo chocolate museum /collection/
  
  コレクションstyle
  
=============================================================*/
/*------------------------------------

タイトル部分

------------------------------------*/
.ttl_fcm {
 background-image: url('../images/ttl_collection_bg.jpg');
}
/* SP */
@media (max-width: 919px) {
.ttl_fcm .c-ttl-main_fcm {
font-size: 400%;
}
}
/*------------------------------------

concept

------------------------------------*/
.main_fcm {
 background-image: url('../images/bg_brown_top.png');
 background-repeat: no-repeat;
 background-position: top 190px left;
 background-size: 30%;
 padding: 100px 0;
}
/* キャッチ */
.catch_fcm {
 display: block;
 font-family: 'Hiragino Mincho W4 JIS2004';
 font-size: 220%;
 font-style: normal;
 color: #2e1b0e;
 line-height: 1.4;
 position: relative;
 z-index: 1;
}

/* Thank you */
.txt-thankyou_fcm {
width: 4.5em;
margin-bottom: 0.5em;
}

/* テキスト部分 */
.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-right: -25%;
  float: right;
 }
 /* テキスト部分 */
 .concept-box_fcm {
  width: 55%;
  float: left;
  margin-bottom: 3em;
 }
}
/* SP */
@media (max-width: 919px) {
 .category-box_fcm {
 }
 .main_fcm {
  background-repeat: no-repeat;
  background-position: top 10vw left;
  background-size: 80%;
  padding: 30px 0;
  font-size: 125%;
 }
 .catch_fcm {
 font-size: 200%;
 }
  .concept-box_fcm {
 }
}
/* ご寄贈バナー */
.bnr-link_fcm{clear: both;margin: 0em auto 2em;text-align: center;display: block;}
.bnr-link_fcm a{
    display: inline-block;
    margin: 0 auto;
}
.bnr-link_fcm a img{}
/* SP */
@media (max-width: 919px) {
.bnr-link_fcm{margin: 3em auto 2em;}
.bnr-link_fcm a img{
width: 100%;
}
}

/* イメージ詳細 */
.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: 54%;
 position: relative;
 z-index: 3;
}
.concept-image-02_fcm {
 position: relative;
 width: 45%;
 z-index: 2;
 margin-top: 6%;
 margin-left: 20%;
}
.concept-image-03_fcm {
 position: relative;
 width: 45%;
 z-index: 2;
 margin-top: 6%;
 margin-left: 5%;
}
/* PC */
@media (min-width: 920px) {
}
/* SP */
@media (max-width: 919px) {
 .concept-image-box_fcm {
  margin-top: -2em;
 }
 .concept-image-01_fcm {
  margin-top: 5em;
  width: 70%;
 }
 .concept-image-02_fcm {
  width: 60%;
  margin-top: -3em;
  margin-bottom: 5%;
  margin-left: 30%;
 }
 .concept-image-03_fcm {
  display: none !important;
 }
}

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

コンセプトページ .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;
}