/*================================
  common
=================================*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}
@media screen and (min-width: 768px) and (max-width: 1400px){
  html{
    font-size: calc((10 * (100vw / 1400)));
  }
}
.main-area .main-inner{
  margin: 0;
  width: 100%;
}
/* end common */
/*================================
  breadlist
=================================*/
#breadcrumb .cateList{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: initial;
}
.archiveArea {
  margin-top: calc(130 *(100vw / 750)) !important;
}
#breadcrumb .cateList a{
  width: auto;
}
@media screen and (min-width: 768px) {
  #breadcrumb{
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
  }
  #breadcrumb .cateList{
    text-overflow: clip;
    white-space: normal;
    overflow: visible;
  }
  .archiveArea {
    margin-top: 115px !important;
  }
}

/*================================
  variables
=================================*/
:root{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --zindex-over: 10;
  --zindex-cursor: 100;
  --zindex-top: 200;
  --pointer-none: none;
  --txtColor: #000;
  --txtGreenColor: #797e5c;
  --txtBlueColor: #546881;
  --lineGreenColor:#d3d6c7;
  --lineBlueColor:#9eadc0;
  --txtBlueColor: #546881;
  --greenBgColor: #eeefe9;
  --blueBgColor: #f6f8fa;
  --blueAreaColor: #e4e9ef;
}
#CE231208christel img,
#CE231208christel picture,
#CE231208christel video,
#CE231208christel a{
  display: inline-block;
  width: 100%;
  height: auto;
}
#CE231208christel .imgWrap{
  background: #fff;
  position: relative;
}
#CE231208christel .noBgCont.imgWrap{
  background: none;
}
#CE231208christel .isolation{
  isolation: auto;
}
#CE231208christel .isolation .imgWrap{
  mix-blend-mode: multiply;
}
#CE231208christel .flexArea{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}
#CE231208christel .gridWrap,
#CE231208christel .gridWrap_pc{
  display: grid;
  margin: 0 auto;
}
/*--------------------------------
  defolt for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  #CE231208christel .pcOnly{
    display: none!important;
  }
  #CE231208christel .flexAreaSp{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #CE231208christel .gridWrap_pc{
    display: block;
  }
}
/*--------------------------------
  defolt for desktop
--------------------------------*/
@media only screen and (min-width: 768px){
  #CE231208christel .spOnly {
    display: none!important;
  }
  #CE231208christel .pcOnly {
    display: block;
  }
  #CE231208christel .flexAreaPc{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
  }
  #CE231208christel .gridWrap_pc{
    max-width: 140rem;
  }
}
/* end variables */

/*================================
  font
=================================*/
/*====== font-ja-sans（YuGothic) ======*/
#CE231208christel .font-ja-sans{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "Yu Gothic", "Open Sans", "メイリオ", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}
/*====== font-ja-sans（NotoSerifJP) ======*/
#CE231208christel .font-ja-serif{
  font-family: 'DotGothic16', sans-serif;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-family: 'Noto Serif JP', serif;
}
/*====== font-en-serif（Crimson) ======*/
#CE231208christel .font-en-serif{
  font-family: "Crimson Text", serif;
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "palt";
}
/*====== font-en-serif（Gautreaux) ======*/
#CE231208christel .font-en-serif2{
  font-family: "gautreaux", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/*================================
  size
=================================*/
#CE231208christel .firstviewArea__txt{
  font-size: calc(24 *(100vw / 750));
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  line-height: 2.2;
  text-align: center;
}
#CE231208christel .captionTxt{
  font-size: calc(24 *(100vw / 750));
  line-height: 2.2;
  letter-spacing: 0.05em;
  text-align: justify;
  position: relative;
}
#CE231208christel .messageBox-ttl-ja{
  font-size: calc(32 *(100vw / 750));
  letter-spacing: 0;
}
#CE231208christel .messageBox-ttl-en{
  font-size: calc(52 *(100vw / 750));
  letter-spacing: 0;
}
#CE231208christel .creditTxt{
  font-size: calc(24 *(100vw / 750));
  line-height: 1;
  letter-spacing: 0.025em;
}
#CE231208christel .creditTxt a{
  line-height: 1.1;
  border-bottom: 1px solid #a9a9a9;
  display: inline-block;
}
#CE231208christel .staffTxt li{
  font-family: "Crimson Text", serif;
  font-weight: normal;
  font-style: normal;
  font-feature-settings: "palt";
  font-size: calc(24 *(100vw / 750));
  letter-spacing: 0.025em;
  line-height: 1.91;
  text-align: center;
}
/*--------------------------------
  size for desktop
--------------------------------*/
@media only screen and (min-width: 768px){
  #CE231208christel .firstviewArea__txt {
    font-size: 1.3rem;
  }
  #CE231208christel .captionTxt{
    font-size: 1.3rem;
    letter-spacing: 0.025em;
  }
  #CE231208christel .creditTxt{
    font-size: 1.3rem;
  }
  #CE231208christel .creditTxt a{
    line-height: 1.15;
  }
  #CE231208christel .messageBox-ttl-ja{
    font-size: 1.6rem;
    letter-spacing: 0.028em;
  }
  #CE231208christel .messageBox-ttl-en{
    font-size: 2.6rem;
    letter-spacing: 0.0455em;
    margin-left: -0.5rem;
  }
  #CE231208christel .staffTxt li{
    font-size: 1.3rem;
    line-height: 1.8461538462;
  }
}
/* end size */

/*================================
  page common
=================================*/
#CE231208christel{
  padding-bottom: calc(140 *(100vw / 750));
}
/*===== captionBox =====*/
#CE231208christel .captionBox,
#CE231208christel .captionBox-txt,
#CE231208christel .messageBox{
  position: relative;
}
#CE231208christel .captionBox{
  width: fit-content;
  height: fit-content;
}
/* captionBox-ttl */
#CE231208christel .captionBox-ttl{
  position: absolute;
  pointer-events: var(--pointer-none);
}
#CE231208christel .captionBox-ttl img{
  position: relative;
}
#CE231208christel .captionBox-ttl img::before{
  content: "";
  display: block;
  background: #fff;
  width: calc(40 *(100vw / 750));
  height: 100%;
  top: 0;
  left: calc(-20 *(100vw / 750));
  z-index: var(--zindex-behind);
  pointer-events: var(--pointer-none);
}
/* captionBox-kigo */
#CE231208christel .captionBox::before,
#CE231208christel .captionBox::after{
  content: "";
  display: block;
  width: calc(40 *(100vw / 750));
  height: calc(30 *(100vw / 750));
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/captionBox-kigo.svg);
  position: absolute;
  pointer-events: var(--pointer-none);
}
#CE231208christel .captionBox-blue::before,
#CE231208christel .captionBox-blue::after{
  background-image: url(../img/captionBox-kigo-blue.svg);
}
#CE231208christel .captionBox::before{
  top: calc(-11 *(100vw / 750));
  left: calc(-15 *(100vw / 750));
}
#CE231208christel .captionBox::after{
  bottom: calc(-11 *(100vw / 750));
  right: calc(-15 *(100vw / 750));
  transform: rotate(180deg);
}
#CE231208christel .messageBox::before{
  content: "";
  display: block;
  position: absolute;
}
/* captionBox-line */
#CE231208christel .captionBox-txt::before,
#CE231208christel .captionBox-txt::after{
  content: "";
  display: block;
  height: calc(2 *(100vw / 750));
  background-color: var(--lineGreenColor);
  position: absolute;
  pointer-events: var(--pointer-none);
}
#CE231208christel .captionBox-txt-blue::before,
#CE231208christel .captionBox-txt-blue::after{
  background-color: var(--lineBlueColor);
}
#CE231208christel .captionBox-txt::before{
  width: calc(313 *(100vw / 750));
  top: 0;
  left: 0;
}
#CE231208christel .captionBox-txt::after{
  width: calc(585 *(100vw / 750));
  bottom: 0;
}
/*===== messageBox =====*/
#CE231208christel .frontImg{
  position: relative;
  z-index: var(--zindex-front);
}
#CE231208christel .messageBox::before{
  content: "";
  display: block;
  background-color: var(--greenBgColor);
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: var(--pointer-none);
}
#CE231208christel .messageBox-blue::before{
  background-color: var(--blueBgColor);
}
#CE231208christel .messageBox-ttl{
  color: var(--txtGreenColor);
  margin-bottom: calc(21 *(100vw / 750));
  position: relative;
  white-space: nowrap;
}
#CE231208christel .messageBox-ttl-blue{
  color: var(--txtBlueColor);
}
/*--------------------------------
  page common for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  /*===== creditWrap =====*/
  #CE231208christel .creditWrap-pcC{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #CE231208christel  .creditWrap-spL{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
  }
  #CE231208christel  .creditWrap-spR{
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
  }
  #CE231208christel  .creditWrap-spC .creditTxt{
    margin: 0 calc(6*(100vw /750));
  }
  #CE231208christel  .creditWrap-spL .creditTxt{
    margin-right: calc(27*(100vw /750));
  }
  #CE231208christel  .creditWrap-spR .creditTxt{
    margin-left: calc(27*(100vw /750));
  }
}
/*--------------------------------
  page common for desktop
--------------------------------*/
@media only screen and (min-width: 768px){
  #CE231208christel{
    padding-bottom: 15rem;
  }
  /*===== captionBox =====*/
  #CE231208christel .captionBox-ttl img::before{
    width: 3rem;
    left: -3rem;
  }
  /* captionBox-kigo */
  #CE231208christel .captionBox::before,
  #CE231208christel .captionBox::after{
    width: 2rem;
    height: 1.5rem;
  }
  #CE231208christel .captionBox::before{
    top: -0.5rem;
    left: 3rem;
  }
  #CE231208christel .captionBox::after{
    bottom: -0.5rem;
    right: 3.3rem;
  }
  /* captionBox-line */
  #CE231208christel .captionBox-txt::before,
  #CE231208christel .captionBox-txt::after{
    height: 1px;
  }
  /*===== messageBox =====*/
  #CE231208christel .messageBox-ttl{
    margin-bottom: 2rem;
  }
  /*===== creditWrap =====*/
  #CE231208christel .creditWrap-pcC{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #CE231208christel .creditWrap-pcL{
    display: flex;
    justify-content: left;
    flex-wrap: wrap;
  }
  #CE231208christel .creditWrap-pcR{
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
  }
  #CE231208christel .creditWrap-pcC .creditTxt{
    margin: 0 0.4rem;
  }
  #CE231208christel .creditWrap-pcL .creditTxt{
    margin-right: 1.5rem;
  }
  #CE231208christel .creditWrap-pcR .creditTxt{
    margin-left: 1.5rem;
  }
}


/*--------------------------------
  layout for mobile
--------------------------------*/
#CE231208christel .contWrap{
  margin: 0 auto;
  position: relative;
}
/*================ MV ================*/
#CE231208christel .firstviewArea__img{
  margin: 0 auto;
  margin-bottom: calc(127 *(100vw / 750));
}
/*================ look01 ================*/
#CE231208christel .look01{
  margin-bottom: calc(220 *(100vw / 750));
}
#CE231208christel .look01__img01{
  width: 100%;
  margin: 0 auto calc(60 *(100vw / 750));
}
#CE231208christel .look01__img02{
  width: calc(690 *(100vw / 750));
  margin: 0 0 calc(172 *(100vw / 750)) auto;
}
#CE231208christel .look01__img03{
  width: calc(580 *(100vw / 750));
  margin: 0 auto;
}
#CE231208christel .look01__captionBox{
  padding: 0 calc(45*(100vw / 750));
  margin: 0 auto calc(90 *(100vw / 750));
}
#CE231208christel .look01__captionBox-ttl{
  width: calc(260 *(100vw / 750));
  height: calc(160 *(100vw / 750));
  top: calc(-123 *(100vw / 750));
  right: calc(-28 *(100vw / 750));
}
#CE231208christel .look01__captionBox-txt{
  width: calc(542 *(100vw / 750));
  padding: calc(46 *(100vw / 750)) 0 calc(57 *(100vw / 750));
}
#CE231208christel .look01__captionBox-txt::before{
  left: 0;
}
#CE231208christel .look01__captionBox-txt::after{
  left: calc(-46 *(100vw / 750));
}
#CE231208christel .look01__messageBox{
  padding: calc(86 *(100vw / 750)) calc(83*(100vw / 750)) calc(66 *(100vw / 750)) calc(86*(100vw / 750));
  margin-bottom: calc(60 *(100vw / 750));
}
#CE231208christel .look01__messageBox::before{
  width: 100%;
  height: calc(978 *(100vw / 750));
  height: calc(818 *(100vw / 750));
}
#CE231208christel .look01__credit{
  width: calc(580 *(100vw / 750));
  margin: 0 auto;
}
/*================ look02 ================*/
#CE231208christel .look02{
  margin-bottom: calc(200 *(100vw / 750));
}
#CE231208christel .look02__img04{
  width: 100%;
  margin: 0 auto calc(60 *(100vw / 750));
}
#CE231208christel .look02__img05{
  width: calc(620 *(100vw / 750));
  margin: 0 0 calc(168 *(100vw / 750));
}
#CE231208christel .look02__img06{
  width: calc(670 *(100vw / 750));
  margin: 0 0 0 auto;
}
#CE231208christel .look02__captionBox{
  padding: 0 calc(70*(100vw / 750));
  margin: 0 auto calc(90 *(100vw / 750));
}
#CE231208christel .look02__captionBox-ttl{
  width: calc(300 *(100vw / 750));
  height: calc(160 *(100vw / 750));
  top: calc(-118 *(100vw / 750));
  right: calc(-56 *(100vw / 750));
}
#CE231208christel .look02__captionBox-txt{
  width: calc(490 *(100vw / 750));
  padding: calc(48 *(100vw / 750)) 0 calc(58 *(100vw / 750));
}
#CE231208christel .look02__captionBox-txt::before{
  left: calc(-26 *(100vw / 750));
}
#CE231208christel .look02__captionBox-txt::after{
  left: calc(-68 *(100vw / 750));
}
#CE231208christel .look02__messageBox{
  padding: calc(85 *(100vw / 750)) calc(128*(100vw / 750)) calc(70 *(100vw / 750)) calc(80*(100vw / 750));
  margin-bottom: calc(62 *(100vw / 750));
}
#CE231208christel .look02__messageBox::before{
  width: calc(700 *(100vw / 750));
  height: calc(552 *(100vw / 750));
}
#CE231208christel .look02__credit{
  width: calc(590 *(100vw / 750));
  margin: 0 auto;
}
/*================ look03 ================*/
#CE231208christel .look03{
  margin-bottom: calc(220 *(100vw / 750));
}
#CE231208christel .look03__img07{
  width: calc(675 *(100vw / 750));
  margin: 0 0 calc(60 *(100vw / 750));
}
#CE231208christel .look03__img08{
  width: calc(690 *(100vw / 750));
  margin: 0 0 calc(220 *(100vw / 750)) auto;
}
#CE231208christel .look03__img09{
  width: calc(630 *(100vw / 750));
}
#CE231208christel .look03__captionBox{
  padding: 0 calc(60*(100vw / 750));
  margin: 0 auto calc(90 *(100vw / 750));
}
#CE231208christel .look03__captionBox-ttl{
  width: calc(300 *(100vw / 750));
  height: calc(200 *(100vw / 750));
  top: calc(-170 *(100vw / 750));
  right: calc(-10 *(100vw / 750));
}
#CE231208christel .look03__captionBox-txt{
  width: calc(511 *(100vw / 750));
  padding: calc(46 *(100vw / 750)) 0 calc(57 *(100vw / 750));
}
#CE231208christel .look03__captionBox-txt::before{
  left: calc(-14 *(100vw / 750));
  width: calc(402 *(100vw / 750));
}
#CE231208christel .look03__captionBox-txt::after{
  left: calc(-60 *(100vw / 750));
}
#CE231208christel .look03__messageBox{
  padding: calc(86 *(100vw / 750)) calc(120*(100vw / 750)) calc(72 *(100vw / 750)) calc(80*(100vw / 750));
  margin: 0 0 calc(60*(100vw / 750)) calc(50*(100vw / 750));
}
#CE231208christel .look03__messageBox::before{
  width: 100%;
  height: calc(915 *(100vw / 750));
  left: auto;
  right: 0;
}
#CE231208christel .look03__credit{
  width: calc(492 *(100vw / 750));
  margin: 0 auto;
}
/*================ look04 ================*/
#CE231208christel .look04{
  margin-bottom: calc(220 *(100vw / 750));
}
#CE231208christel .look04__img10{
  width: calc(530 *(100vw / 750));
  margin: 0 auto calc(60 *(100vw / 750));
}
#CE231208christel .look04__img11{
  width: 100%;
  margin: 0 0 calc(168 *(100vw / 750));
}
#CE231208christel .look04__img12{
  width: calc(645 *(100vw / 750));
  margin: 0 0 0 auto;
}
#CE231208christel .look04__captionBox{
  padding: 0 calc(45*(100vw / 750));
  margin: 0 auto calc(90 *(100vw / 750));
}
#CE231208christel .look04__captionBox-ttl{
  width: calc(300 *(100vw / 750));
  height: calc(200 *(100vw / 750));
  top: calc(-128 *(100vw / 750));
  right: calc(-40 *(100vw / 750));
}
#CE231208christel .look04__captionBox-txt{
  width: calc(540 *(100vw / 750));
  padding: calc(48 *(100vw / 750)) 0 calc(58 *(100vw / 750));
}
#CE231208christel .look04__captionBox-txt::before{
  width: calc(285 *(100vw / 750));
  left: 0;
}
#CE231208christel .look04__captionBox-txt::after{
  left: calc(-45 *(100vw / 750));
}
#CE231208christel .look04__messageBox{
  padding: calc(84 *(100vw / 750)) calc(124*(100vw / 750)) calc(70 *(100vw / 750)) calc(106*(100vw / 750));
  margin-bottom: calc(62 *(100vw / 750));
}
#CE231208christel .look04__messageBox::before{
  width: calc(717 *(100vw / 750));
  height: calc(522 *(100vw / 750));
}
#CE231208christel .look04__credit{
  width: calc(540 *(100vw / 750));
  margin: 0 auto;
}
/*================ blueArea ================*/
#CE231208christel .blueArea{
  background-color: var(--blueAreaColor);
  padding: calc(60 *(100vw / 750)) 0;
  margin-bottom: calc(150 *(100vw / 750));
  position: relative;
}
#CE231208christel .blueArea__contWrap::before{
  content: "";
  display: block;
  width: calc(80.5 *(100vw / 750));
  height: calc(527 *(100vw / 750));
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/blueArea-ttl.svg);
  position: absolute;
  top: calc(2 *(100vw / 750));
  left: calc(15 *(100vw / 750));
  pointer-events: var(--pointer-none);
}
/*================ look01-blue ================*/
#CE231208christel .look01-blue{
  margin-bottom: calc(220 *(100vw / 750));
}
#CE231208christel .look01-blue__img13{
  width: calc(630 *(100vw / 750));
  margin: 0 0 calc(60 *(100vw / 750)) auto;
}
#CE231208christel .look01-blue__img14{
  width: 100%;
  margin: 0 0 calc(170 *(100vw / 750));
}
#CE231208christel .look01-blue__img15{
  width: calc(645 *(100vw / 750));
  margin: 0 0 0 auto;
}
#CE231208christel .look01-blue__captionBox{
  padding: 0 calc(45*(100vw / 750));
  margin: 0 auto calc(88 *(100vw / 750));
}
#CE231208christel .look01-blue__captionBox-ttl{
  width: calc(260 *(100vw / 750));
  height: calc(160 *(100vw / 750));
  top: calc(-122 *(100vw / 750));
  right: calc(-28 *(100vw / 750));
}
#CE231208christel .look01-blue__captionBox-txt{
  width: calc(540 *(100vw / 750));
  padding: calc(48 *(100vw / 750)) 0 calc(58 *(100vw / 750));
}
#CE231208christel .look01-blue__captionBox-txt::before{
  left: 0;
}
#CE231208christel .look01-blue__captionBox-txt::after{
  left: calc(-45 *(100vw / 750));
}
#CE231208christel .look01-blue__messageBox{
  padding: calc(85 *(100vw / 750)) calc(104*(100vw / 750)) calc(74 *(100vw / 750)) calc(105*(100vw / 750));
  margin-bottom: calc(60 *(100vw / 750));
}
#CE231208christel .look01-blue__messageBox::before{
  width: calc(717 *(100vw / 750));
  height: calc(876 *(100vw / 750));
}
#CE231208christel .look01-blue__credit{
  width: calc(540 *(100vw / 750));
  margin: 0 auto;
}
/*================ look02-blue ================*/
#CE231208christel .look02-blue{
  margin-bottom: calc(220 *(100vw / 750));
}
#CE231208christel .look02-blue__img16{
  width: 100%;
  margin: 0 0 calc(60 *(100vw / 750)) auto;
}
#CE231208christel .look02-blue__img17{
  width: calc(680 *(100vw / 750));
  margin: 0 0 calc(174*(100vw / 750)) auto;
}
#CE231208christel .look02-blue__img18{
  width: calc(580 *(100vw / 750));
  margin: 0 auto;
}
#CE231208christel .look02-blue__captionBox{
  padding: 0 calc(45*(100vw / 750));
  margin: 0 auto calc(88 *(100vw / 750));
}
#CE231208christel .look02-blue__captionBox-ttl{
  width: calc(300 *(100vw / 750));
  height: calc(160 *(100vw / 750));
  top: calc(-122 *(100vw / 750));
  right: calc(-56 *(100vw / 750));
}
#CE231208christel .look02-blue__captionBox-txt{
  width: calc(540 *(100vw / 750));
  padding: calc(48 *(100vw / 750)) 0 calc(58 *(100vw / 750));
}
#CE231208christel .look02-blue__captionBox-txt::before{
  left: 0;
}
#CE231208christel .look02-blue__captionBox-txt::after{
  left: calc(-45 *(100vw / 750));
}
#CE231208christel .look02-blue__messageBox{
  padding: calc(85 *(100vw / 750)) calc(84*(100vw / 750)) calc(64 *(100vw / 750)) calc(85*(100vw / 750));
  margin-bottom: calc(60 *(100vw / 750));
}
#CE231208christel .look02-blue__messageBox::before{
  width: 100%;
  height: calc(762 *(100vw / 750));
}
#CE231208christel .look02-blue__credit{
  width: calc(584 *(100vw / 750));
  margin: 0 auto;
}
/*================ look03-blue ================*/
#CE231208christel .look03-blue{
  margin-bottom: calc(220 *(100vw / 750));
}
#CE231208christel .look03-blue__img19{
  width: 100%;
  margin: 0 0 calc(60 *(100vw / 750)) auto;
}
#CE231208christel .look03-blue__img20{
  width: calc(690 *(100vw / 750));
  margin: 0 0 calc(226*(100vw / 750)) auto;
}
#CE231208christel .look03-blue__img21{
  width: calc(660 *(100vw / 750));
}
#CE231208christel .look03-blue__captionBox{
  padding: 0 calc(45*(100vw / 750));
  margin: 0 auto calc(88 *(100vw / 750));
}
#CE231208christel .look03-blue__captionBox-ttl{
  width: calc(300 *(100vw / 750));
  height: calc(200 *(100vw / 750));
  top: calc(-168 *(100vw / 750));
  right: calc(-10 *(100vw / 750));
}
#CE231208christel .look03-blue__captionBox-txt{
  width: calc(540 *(100vw / 750));
  padding: calc(48 *(100vw / 750)) 0 calc(58 *(100vw / 750));
}
#CE231208christel .look03-blue__captionBox-txt::before{
  width: calc(402 *(100vw / 750));
  left: 0;
}
#CE231208christel .look03-blue__captionBox-txt::after{
  width: calc(585 *(100vw / 750));
  left: calc(-45 *(100vw / 750));
}
#CE231208christel .look03-blue__messageBox{
  padding: calc(86 *(100vw / 750)) calc(83*(100vw / 750)) calc(72 *(100vw / 750)) calc(140*(100vw / 750));
  margin-bottom: calc(60 *(100vw / 750));
}
#CE231208christel .look03-blue__messageBox::before{
  width: calc(690 *(100vw / 750));
  height: calc(937 *(100vw / 750));
  left: auto;
  right: 0;
}
#CE231208christel .look03-blue__credit{
  width: calc(470 *(100vw / 750));
  margin: 0 auto;
}
/*================ look04-blue ================*/
#CE231208christel .look04-blue__img22{
  width: 100%;
  margin: 0 0 calc(168 *(100vw / 750)) auto;
}
#CE231208christel .look04-blue__img23{
  width: calc(630 *(100vw / 750));
  margin: 0 auto calc(60*(100vw / 750));
}
#CE231208christel .look04-blue__captionBox{
  padding: 0 calc(45*(100vw / 750));
  margin: 0 auto calc(88 *(100vw / 750));
}
#CE231208christel .look04-blue__captionBox-ttl{
  width: calc(300 *(100vw / 750));
  height: calc(200 *(100vw / 750));
  top: calc(-120 *(100vw / 750));
  right: calc(-40 *(100vw / 750));
}
#CE231208christel .look04-blue__captionBox-txt{
  width: calc(540 *(100vw / 750));
  padding: calc(48 *(100vw / 750)) 0 calc(58 *(100vw / 750));
}
#CE231208christel .look04-blue__captionBox-txt::before{
  width: calc(285 *(100vw / 750));
  left: 0;
}
#CE231208christel .look04-blue__captionBox-txt::after{
  width: calc(585 *(100vw / 750));
  left: calc(-45 *(100vw / 750));
}
#CE231208christel .look04-blue__credit{
  width: calc(380 *(100vw / 750));
  margin: 0 0 0 calc(200*(100vw / 750));
}

/*================ staffWrap ================*/
#CE231208christel .staffWrap{
  margin-bottom: calc(70 *(100vw / 750));
}

/*================ allBtn ================*/
#CE231208christel .allBtn{
  font-size: calc(22 *(100vw / 750));
  line-height: 1.5;
  text-align: center;
  border: 1px solid #333333;
  width: calc(660 *(100vw / 750));
  padding: calc(30 *(100vw / 750)) 0 calc(25 *(100vw / 750)) 0;
  margin: 0 auto;
}

/*--------------------------------
  layout for desktop
--------------------------------*/
@media screen and (min-width: 768px){
  #CE231208christel .contWrap{
    width: 140rem;
  }
  /*================ MV ================*/
  #CE231208christel .firstviewArea__img{
    width: 110rem;
    margin-bottom: 11.3rem;
  }
  /*================ look01 ================*/
  #CE231208christel .look01{
    margin-bottom: 16rem;
  }
  #CE231208christel .look01__inner{
    grid-template-columns: 20rem 11rem 44rem 50rem;
    grid-template-rows: 14rem 32.5rem 31.5rem 14rem;
  }
  #CE231208christel .look01__img01{
    width: 51rem;
    margin-bottom: 0;
    grid-column: 2/3;
    grid-row: 1/3;
  }
  #CE231208christel .look01__img02{
    width: auto;
    margin: 0;
    grid-column: 4/5;
    grid-row: 2/5;
  }
  #CE231208christel .look01__captionBox{
    padding: 0 8.2rem;
    margin: 0;
    grid-column: 2/4;
    grid-row: 3/4;
  }
  #CE231208christel .look01__captionBox-ttl{
    width: 13rem;
    height: 8rem;
    top: -5.5rem;
    right: 0.6rem;
  }
  #CE231208christel .look01__captionBox-txt{
    width: 32rem;
    padding: 3.2rem 0 3.5rem;
  }
  #CE231208christel .look01__captionBox-txt::before{
    width: 23.7rem;
    left: 0;
  }
  #CE231208christel .look01__captionBox-txt::after{
    width: 37.2rem;
    left: -5.3rem;
  }
  #CE231208christel .look01__flex{
    justify-content: start;
    align-items: flex-start;
    grid-column: 3/5;
    grid-row: 4/7;
  }
  #CE231208christel .look01__img03{
    width: 36rem;
    margin: 0;
  }
  #CE231208christel .look01__messageBox{
    width: 33rem;
    padding: 5.2rem 7rem 4.2rem 7rem;
    margin: 23.5rem 0 0;
  }
  #CE231208christel .look01__messageBox::before{
    width: 100%;
    height: 100%;
  }
  #CE231208christel .look01__credit{
    width: auto;
    margin: 0 0 0 auto;
    grid-column: 4/5;
    grid-row: 5/6;
  }
  /*================ look02 ================*/
  #CE231208christel .look02{
    margin-bottom: 20.4rem;
  }
  #CE231208christel .look02__inner{
    grid-template-columns: 16rem 16rem 38rem 5.8rem 6.2rem;
    grid-template-rows: 21.6rem 46.4rem 31rem 6.5rem;
  }
  #CE231208christel .look02__img04{
    width: 54rem;
    margin-bottom: 0;
    grid-column: 2/4;
    grid-row: 2/5;
  }
  #CE231208christel .look02__img05{
    width: 38rem;
    margin: 0;
    grid-column: 6/7;
    grid-row: 1/3;
  }
  #CE231208christel .look02__captionBox{
    padding: 0 8.2rem;
    margin: 0;
    grid-column: 5/7;
    grid-row: 3/4;
  }
  #CE231208christel .look02__captionBox-ttl{
    width: 15rem;
    height: 8rem;
    top: -4rem;
    right: -1.8rem;
  }
  #CE231208christel .look02__captionBox-txt{
    width: 30rem;
    padding: 3.2rem 0 3.5rem;
  }
  #CE231208christel .look02__captionBox-txt::before{
    width: 23.7rem;
    left: 0;
  }
  #CE231208christel .look02__captionBox-txt::after{
    width: 37.2rem;
    left: -5.3rem;
  }
  #CE231208christel .look02__flex{
    justify-content: start;
    align-items: flex-start;
    flex-direction: row-reverse;
    grid-column: 3/7;
    grid-row: 4/6;
  }
  #CE231208christel .look02__img06{
    width: 37rem;
    margin: 0;
  }
  #CE231208christel .look02__messageBox{
    width: 30rem;
    padding: 5rem 7rem 4.2rem 7rem;
    margin: 24rem 0 0;
  }
  #CE231208christel .look02__messageBox::before{
    width: 100%;
    height: 100%;
  }
  #CE231208christel .look02__credit{
    width: auto;
    margin: 0;
    grid-column: 2/4;
    grid-row: 5/6;
  }
  /*================ look03 ================*/
  #CE231208christel .look03{
    margin-bottom: 16rem;
  }
  #CE231208christel .look03__inner{
    grid-template-columns: 24rem 13.6rem 39.4rem 46rem;
    grid-template-rows: 24.6rem 52.5rem 19.4rem 9.6rem;
  }
  #CE231208christel .look03__img07{
    width: 45rem;
    margin-bottom: 0;
    grid-column: 2/3;
    grid-row: 1/3;
  }
  #CE231208christel .look03__img08{
    width: 46rem;
    margin: 0;
    grid-column: 4/5;
    grid-row: 2/5;
  }
  #CE231208christel .look03__captionBox{
    padding: 0 8rem;
    margin: 0 0 0 -9rem;
    grid-column: 2/4;
    grid-row: 3/4;
  }
  #CE231208christel .look03__captionBox-ttl{
    width: 15rem;
    height: 10rem;
    top: -4.7rem;
    right: -1.8rem;
  }
  #CE231208christel .look03__captionBox-txt{
    width: 34rem;
    padding: 3.2rem 0 3.5rem;
  }
  #CE231208christel .look03__captionBox-txt::before{
    width: 25.8rem;
    left: 0;
  }
  #CE231208christel .look03__captionBox-txt::after{
    width: 39rem;
    left: -5rem;
  }
  #CE231208christel .look03__flex{
    justify-content: start;
    align-items: flex-start;
    grid-column: 3/5;
    grid-row: 5/7;
  }
  #CE231208christel .look03__img09{
    width: 34rem;
    margin: 0;
  }
  #CE231208christel .look03__messageBox{
    width: 27rem;
    padding: 5rem 7rem 4.4rem 7rem;
    margin: 12.8rem 0 0;
  }
  #CE231208christel .look03__messageBox::before{
    width: 100%;
    height: 100%;
  }
  #CE231208christel .look03__credit{
    width: auto;
    margin: 0 0 0 auto;
    grid-column: 4/5;
    grid-row: 4/5;
  }
  /*================ look04 ================*/
  #CE231208christel .look04{
    margin-bottom: 20rem;
  }
  #CE231208christel .look04__inner{
    grid-template-columns: 16rem 29.8rem 22.2rem;
    grid-template-rows: 28.6rem 36.5rem 30.2rem 14.2rem;
  }
  #CE231208christel .look04__img10{
    width: 35rem;
    margin: 0;
    transform: translateX(-3.7rem);
    z-index: var(--zindex-front);
    grid-column: 4/5;
    grid-row: 1/3;
  }
  #CE231208christel .look04__img11{
    width: 52rem;
    margin: 0;
    grid-column: 2/4;
    grid-row: 2/5;
  }
  #CE231208christel .look04__captionBox{
    padding: 0 8.2rem 0 5.2rem;
    margin: 0 0 0 7.2rem;
    grid-column: 4/5;
    grid-row: 3/4;
  }
  #CE231208christel .look04__captionBox-ttl{
    width: 15.2rem;
    height: 10.2rem;
    top: -4.7rem;
    right: -1.5rem;
  }
  #CE231208christel .look04__captionBox-txt{
    width: 38rem;
    padding: 3.2rem 0 3.5rem;
  }
  #CE231208christel .look04__captionBox-txt::before{
    width: 26.6rem;
    left: 3rem;
  }
  #CE231208christel .look04__captionBox-txt::after{
    width: 40.2rem;
    left: -2.3rem;
  }
  #CE231208christel .look04__flex{
    justify-content: start;
    align-items: flex-start;
    flex-direction: row-reverse;
    grid-column: 3/5;
    grid-row: 4/6;
  }
  #CE231208christel .look04__img12{
    width: 35rem;
    margin: 0;
  }
  #CE231208christel .look04__messageBox{
    width: 28rem;
    padding: 5rem 7rem 4.2rem 7rem;
    margin: 19rem 0 0 0;
  }
  #CE231208christel .look04__messageBox::before{
    width: 100%;
    height: 100%;
  }
  #CE231208christel .look04__credit{
    width: 13rem;
    margin: 0;
    grid-column: 2/3;
    grid-row: 5/6;
  }
  #CE231208christel .look04__credit .creditTxt{
    margin-bottom: 1.4rem;
  }
  /*================ blueArea ================*/
  #CE231208christel .blueArea{
    padding: 10rem 0 10.5rem;
    margin-bottom: 14.4rem;
  }
  #CE231208christel .blueArea__contWrap::before{
    width: 7.5rem;
    height: 46.3rem;
    top: -4rem;
    left: 7.8rem;
  }
  /*================ look01-blue ================*/
  #CE231208christel .look01-blue{
    margin-bottom: 16rem;
  }
  #CE231208christel .look01-blue__inner{
    grid-template-columns: 20.5rem 10rem 42.5rem;
    grid-template-rows: 27.5rem 49.7rem 23.8rem 7rem;
  }
  #CE231208christel .look01-blue__img13{
    width: 43rem;
    margin: 0 0 0 4.5rem;
    grid-column: 4/5;
    grid-row: 1/3;
  }
  #CE231208christel .look01-blue__img14{
    width: 47rem;
    margin: 0;
    grid-column: 2/4;
    grid-row: 2/4;
  }
  #CE231208christel .look01-blue__captionBox{
    padding: 0 8.2rem;
    margin: 0;
    grid-column: 4/5;
    grid-row: 3/4;
  }
  #CE231208christel .look01-blue__captionBox-ttl{
    width: 13rem;
    height: 8rem;
    top: -5.6rem;
    right: 0.4rem;
  }
  #CE231208christel .look01-blue__captionBox-txt{
    width: 32rem;
    padding: 3.2rem 0 3.5rem;
  }
  #CE231208christel .look01-blue__captionBox-txt::before{
    width: 23.7rem;
    left: 0;
  }
  #CE231208christel .look01-blue__captionBox-txt::after{
    width: 37.2rem;
    left: -5.3rem;
  }
  #CE231208christel .look01-blue__flex{
    justify-content: start;
    align-items: flex-start;
    flex-direction: row-reverse;
    grid-column: 3/5;
    grid-row: 5/6;
  }
  #CE231208christel .look01-blue__img15{
    width: 39rem;
    margin: 0;
  }
  #CE231208christel .look01-blue__messageBox{
    width: 30rem;
    padding: 5.2rem 5rem 4.2rem 5rem;
    margin: 18rem 0 0;
  }
  #CE231208christel .look01-blue__messageBox::before{
    width: 100%;
    height: 100%;
  }
  #CE231208christel .look01-blue__credit{
    width: 11rem;
    margin: 0;
    grid-column: 2/4;
    grid-row: 4/5;
  }
  #CE231208christel .look01-blue__credit .creditTxt{
    margin-bottom: 1.4rem;
  }
  /*================ look02-blue ================*/
  #CE231208christel .look02-blue{
    margin-bottom: 16rem;
  }
  #CE231208christel .look02-blue__inner{
    grid-template-columns: 16rem 11rem 40.2rem 14.8rem 42rem;
    grid-template-rows: 11rem 28rem 34rem 32rem;
  }
  #CE231208christel .look02-blue__img16{
    width: 46rem;
    margin: 0;
    grid-column: 2/4;
    grid-row: 1/4;
  }
  #CE231208christel .look02-blue__img17{
    width: 42rem;
    margin: 0;
    grid-column: 5/6;
    grid-row: 3/6;
  }
  #CE231208christel .look02-blue__captionBox{
    padding: 0 8.2rem;
    margin: 0;
    grid-column: 4/6;
    grid-row: 2/3;
  }
  #CE231208christel .look02-blue__captionBox-ttl{
    width: 15rem;
    height: 8rem;
    top: -3.9rem;
    right: -1.6rem;
  }
  #CE231208christel .look02-blue__captionBox-txt{
    width: 39rem;
    padding: 3.2rem 0 3.5rem;
  }
  #CE231208christel .look02-blue__captionBox-txt::before{
    width: 30.7rem;
    left: 0;
  }
  #CE231208christel .look02-blue__captionBox-txt::after{
    width: 44rem;
    left: -5.3rem;
  }
  #CE231208christel .look02-blue__flex{
    justify-content: start;
    align-items: flex-start;
    grid-column: 3/6;
    grid-row: 4/6;
  }
  #CE231208christel .look02-blue__img18{
    width: 43rem;
    margin: 0;
  }
  #CE231208christel .look02-blue__messageBox{
    width: 30.9rem;
    padding: 5.2rem 5rem 4.2rem 5rem;
    margin: 39.1rem 0 0;
  }
  #CE231208christel .look02-blue__messageBox::before{
    width: 100%;
    height: 100%;
  }
  #CE231208christel .look02-blue__credit{
    width: 11rem;
    margin: 0 0 0 auto;
    grid-column: 5/6;
    grid-row: 5/6;
  }
  #CE231208christel .look02-blue__credit .creditTxt{
    margin-bottom: 1.4rem;
  }
  /*================ look03-blue ================*/
  #CE231208christel .look03-blue{
    margin-bottom: 15.8rem;
  }
  #CE231208christel .look03-blue__inner{
    grid-template-columns: 18.8rem 12.3rem 52rem 43rem;
    grid-template-rows: 46.7rem 33.9rem 25.6rem 7.9rem;
  }
  #CE231208christel .look03-blue__img19{
    width: 46rem;
    margin: 0 0 0 1rem;
    grid-column: 3/4;
    grid-row: 1/3;
  }
  #CE231208christel .look03-blue__img20{
    width: 43rem;
    margin: 0;
    grid-column: 4/5;
    grid-row: 2/5;
  }
  #CE231208christel .look03-blue__captionBox{
    padding: 0 8.3rem 0 7.7rem;
    margin: 0;
    grid-column: 2/4;
    grid-row: 3/4;
  }
  #CE231208christel .look03-blue__captionBox-ttl{
    width: 15rem;
    height: 8rem;
    top: -4.8rem;
    right: -1.5rem;
  }
  #CE231208christel .look03-blue__captionBox-txt{
    width: 37rem;
    padding: 3.2rem 0 3.3rem;
  }
  #CE231208christel .look03-blue__captionBox-txt::before{
    width: 30.7rem;
    left: 0;
  }
  #CE231208christel .look03-blue__captionBox-txt::after{
    width: 44rem;
    left: -5.3rem;
  }
  #CE231208christel .look03-blue__flex{
    justify-content: start;
    align-items: flex-start;
    grid-column: 3/5;
    grid-row: 4/6;
  }
  #CE231208christel .look03-blue__img21{
    width: 42rem;
    margin: 0;
  }
  #CE231208christel .look03-blue__messageBox{
    width: 30rem;
    padding: 5rem 5rem 4.2rem 5rem;
    margin: 18.8rem 0 0;
  }
  #CE231208christel .look03-blue__messageBox::before{
    width: 100%;
    height: 100%;
  }
  #CE231208christel .look03-blue__credit{
    width: 11rem;
    margin: 0 0 0 auto;
    grid-column: 4/5;
    grid-row: 5/6;
  }
  #CE231208christel .look03-blue__credit .creditTxt{
    margin-bottom: 1.4rem;
  }
  /*================ look04-blue ================*/
  #CE231208christel .look04-blue__inner{
    grid-template-columns: 19.9rem 42rem 8rem 49rem auto;
    grid-template-rows: 37.3rem 45rem 21rem;
  }
  #CE231208christel .look04-blue__img22{
    width: 49rem;
    margin: 0;
    grid-column: 4/5;
    grid-row: 1/3;
  }
  #CE231208christel .look04-blue__img23{
    width: 42rem;
    margin: 0;
    grid-column: 2/3;
    grid-row: 2/4;
  }
  #CE231208christel .look04-blue__captionBox{
    padding: 0 8.3rem 0 5rem;
    margin: 0 0 0 1.5rem;
    grid-column: 4/6;
    grid-row: 3/4;
  }
  #CE231208christel .look04-blue__captionBox-ttl{
    width: 15rem;
    height: 10rem;
    top: -4.8rem;
    right: -1.4rem;
  }
  #CE231208christel .look04-blue__captionBox-txt{
    width: 38rem;
    padding: 3.2rem 0 3.3rem;
  }
  #CE231208christel .look04-blue__captionBox-txt::before{
    width: 26.6rem;
    left: 3rem;
  }
  #CE231208christel .look04-blue__captionBox-txt::after{
    width: 40.2rem;
    left: -2.2rem;
  }
  #CE231208christel .look04-blue__credit{
    width: auto;
    margin: 0;
    grid-column: 2/3;
    grid-row: 4/5;
  }
  #CE231208christel .look04-blue__credit .creditTxt{
    margin-bottom: 1.4rem;
  }
  

  /*================ staffWrap ================*/
  #CE231208christel .staffWrap{
    margin-bottom: 5.6rem;
  }
  /*================ allBtn ================*/
  #CE231208christel .allBtn{
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    width: 100rem;
    padding: 1.3rem 0 1.5rem 0;
  }
}






/*================================
  fadeIn
=================================*/
#CE231208christel .js-fadeIn{
  opacity: 0;
  transition: 1.2s;
}
#CE231208christel .js-scrollIn{
  opacity: 1;
}
/*--------------------------------
  fadeIn for desktop
--------------------------------*/
@media only screen and (min-width: 768px){
  #CE231208christel .js-fadeLate{
    transition-delay: 0.5s;
  }
}