@charset "UTF-8";
/* CSS Document */

#cep{ padding-top: 0; font-family: YakuHanJP_Noto, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}
#cep header{ display: none;}


/*************************************************************************************************************************
* first view
*************************************************************************************************************************/
.cep-fv{ height: 100%; padding: 120px 0; position: relative;}
.cep-fv::before{ content: ""; background: #fff; width: 70px; height: 70px; position: absolute; top: 0; right: 0; z-index: 5;}
.cep-fv::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background-image: url("../img/fv_bg_sp_top.png"), url("../img/fv_bg_sp_btm.png");
  background-repeat: no-repeat;
  background-position: center top, center bottom;
  background-size: 775px 120px;
}
.cep-fv__catch{ width: 69.867%; max-width: 334px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}


@media print, screen and (min-width: 768px){
  .cep-fv{ min-height: 600px;}
  .cep-fv::after{ background-size: 1085px 168px;}
  .cep-fv__catch{ background: url("../img/fv_catch_pc.svg") no-repeat 0 0/contain; width: 582px; max-width: none; height: 314px;}
  .cep-fv__catch img{ display: none;}
}


@media print, screen and (min-width: 940px){
  .cep-fv{ background: url("../img/fv_bg_pc.jpg") no-repeat center/1100px 761px; height: calc(100% - 71px);}
  .cep-fv::before{ width: 82px; height: 82px; left: 0;}
  .cep-fv::after{ display: none;}
  .cep-fv__catch{ width: 600px; height: 384px; margin: -15px 0 0;
    background-image: url("../img/fv_catch_pc.svg"), url("../img/fv_catch_bg.png");
    background-repeat: no-repeat;
    background-position: 104px 90px, center;
    background-size: 389px 210px, contain;
  }
}



/*************************************************************************************************************************
* intro
*************************************************************************************************************************/
.cep-intro{ background: url(../../common/img/bg_stripe.png) repeat 0 0/50px 50px rgba(235,235,221,1); padding: 50px 30px;}
.cep-intro__ttl{ font-size: 0; line-height: 0;}
.cep-intro__ttl img:first-child{ display: block; width: 270px; margin: 0 0 12px;}
.cep-intro__ttl img:last-child{ display: block; width: auto; height: 14px;}
.cep-intro__catch{ margin: 20px 0 0; font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: .1em;}
.cep-intro__txt{ margin: 50px 0 0; position: relative; font-size: 14px; line-height: 2.2;}
.cep-intro__txt::before{ content: ""; background: #9a0000; width: 45px; height: 2px; position: absolute; top: -26px; left: 0;}


@media print, screen and (min-width: 768px){
  .cep-intro__ttl img:first-child{ margin-left: auto; margin-right: auto;}
  .cep-intro__ttl img:last-child{ margin-left: auto; margin-right: auto;}
  .cep-intro__catch{ text-align: center;}
  .cep-intro__txt{ text-align: center;}
  .cep-intro__txt::before{ left: 50%; transform: translateX(-50%);}
}


@media print, screen and (min-width: 940px){
  .cep-intro{ margin: 40px 0 0; padding: 85px 0;}
  .cep-intro__ttl img:first-child{ width: 342px;}
  .cep-intro__catch{ font-size: 24px;}
  .cep-intro__txt{ text-align: center;}
}



/*************************************************************************************************************************
* case
*************************************************************************************************************************/
.cep-case{ padding: 0 0 50px;}
.cep-case__wrap{ padding: 60px 30px 100px;}
.cep-case__wrap:nth-child(even){ background: #f2f2f2;}
.cep-case__ttl{ width: 95.238%; max-width: 300px; margin: 0 auto; position: relative; z-index: 2;}

.cep-case__profile{ display: flex; justify-content: space-between; align-items: center; margin: -30px 0 0;}
.cep-case__ph{ margin: 0 0 0 -3px;}
.cep-case01__ph{ width: 120px;}
.cep-case02__ph{ width: 128px;}
.cep-case03__ph{ width: 121px;}
.cep-case04__ph{ width: 120px;}
.cep-case__name{ width: calc(100% - 135px);}
.cep-case__name dt{ font-weight: 500; font-size: 18px; line-height: 1;}
.cep-case__name dt span{ margin: 0 0 0 3px; font-size: 13px;}
.cep-case__name dd{ margin: 10px 0 0; font-size: 13px; line-height: 1.54;}
.cep-case__catch{ margin: 22px 0 0; font-weight: 700; font-size: 17px; line-height: 1.76; color: #9a0000;}
.cep-case__txt{ margin: 20px 0 0; font-size: 14px; line-height: 1.86;}

.cep-case__gallery{ margin: 15px 0 0;}
.cep-case__box01{ width: calc(100% + 60px); transform: translateX(-30px);}
.cep-case__balloon{ position: relative; z-index: 2;}
.cep-case01__balloon{ width: 60.8%; margin: 0 0 -22% 24.5%;}
.cep-case02__balloon{ width: 65%; margin: 0 0 -18% 11.2%;}
.cep-case03__balloon{ width: 64.8%; margin: 0 0 -26% 8%;}
.cep-case04__balloon{ width: 61.1%; margin: 0 0 -7% 8%;}
.cep-case__box02{ margin: -40% 0 0; position: relative; z-index: 2;}
.cep-case__prog{ text-align: right; transform: translateX(25px);}
.cep-case__prog img{ width: 300px;}
.cep-case__inner{ margin: -30px 0 10px;}
.cep-case01__inner{ display: flex; align-items: flex-end;}
.cep-case02__inner{ height: 125px; overflow: hidden;}
.cep-case__inner img{ width: 150px; margin: 0 20px 0 0;}
.cep-case__inner p{ width: calc(100% - 170px);}
.cep-case__cap{ margin: 7px 0 0; font-size: 13px; line-height: 1.54;}
.cep-case04__box03{ margin-top: -10px;}


@media print, screen and (max-width: 340px){
  .cep-case__inner{ margin-top: -10px;}
}


@media print, screen and (max-width: 370px){
  .cep-case__profile{ display: block; margin-top: -15px;}
  .cep-case__ph{ margin: 0 auto 15px;}
  .cep-case__name{ width: auto; text-align: center;}
  .cep-case__name dd br:first-child,
  .cep-case__catch br{ display: none;}
}


@media print, screen and (min-width: 460px) and (max-width: 684px){
  .cep-case__inner{ margin-top: -70px;}
  .cep-case02__inner{ height: 40vw; overflow: hidden;}
  .cep-case__inner img{ width: calc(100% - 200px);}
}


@media print, screen and (min-width: 685px){
  .cep-case{ padding-bottom: 100px;}
  .cep-case__wrap{ display: flex; flex-direction: row-reverse; justify-content: center; overflow: hidden;}
  .cep-case__wrap:nth-child(even){ flex-direction: row;}
  .cep-case__detail{ width: calc(100% - 340px); max-width: 400px;}
  .cep-case__gallery{ width: 310px; margin: -45px 30px 0 0;}
  .cep-case__wrap:nth-child(even) .cep-case__gallery{ transform: translateX(30px); margin: -45px 0 0 30px;}
  .cep-case__box01{ width: calc(100% + 30px);}
  .cep-case__prog{ transform: translateX(15px);}
}


@media print, screen and (min-width: 940px){
  .cep-case{ padding-bottom: 220px;}
}


@media print, screen and (min-width: 1000px){
  .cep-case__wrap{ background: #f2f2f2; padding: 0; margin: 200px 0 0; overflow: visible;}
  .cep-case__wrap:first-child{ margin-top: 160px;}
  .cep-case__detail{ width: 400px; max-width: none; position: relative; z-index: 2;}
  .cep-case01__detail{ margin: -90px 0 -45px;}
  .cep-case02__detail{ margin: -64px 0 -70px;}
  .cep-case03__detail{ margin: -100px 0 -20px;}
  .cep-case04__detail{ margin: -106px 0 -60px;}
  .cep-case__ttl{ width: 400px; max-width: none; margin: 0;}
  .cep-case01__ph{ width: 122px;}
  .cep-case02__ph{ width: 131px;}
  .cep-case03__ph{ width: 134px;}
  .cep-case04__ph{ width: 128px;}
  .cep-case__name br:first-child{ display: none;}
  .cep-case__catch{ font-size: 21px; line-height: 1.69;}
  
  .cep-case__gallery{ width: 440px; position: relative; z-index: 2;}
  .cep-case01__gallery{ margin: -83px 60px -45px 0;}
  .cep-case02__gallery{ margin: -90px 0 -70px 60px!important;}
  .cep-case03__gallery{ margin: -117px 60px -20px 0;}
  .cep-case04__gallery{ margin: -140px 0 -60px 60px!important;}
  .cep-case__wrap:nth-child(even) .cep-case__gallery{ transform: none;}
  .cep-case__box01{ width: 100%; transform: none;}
  .cep-case01__balloon{ width: 229px; margin: 0 0 -94px 114px;}
  .cep-case02__balloon{ width: 244px; margin: 0 0 -97px 68px;}
  .cep-case03__balloon{ width: 249px; margin: 0 0 -110px -35px;}
  .cep-case04__balloon{ width: 229px; margin: 0 0 -55px -60px;}
  .cep-case__box02{  margin-top: -100px;}
  .cep-case04__box02{  margin-top: -180px;}
  .cep-case__wrap:nth-child(odd) .cep-case__prog{ text-align: left; transform: translateX(-25px);}
  .cep-case__wrap:nth-child(even) .cep-case__prog{ transform: translateX(25px);}
  .cep-case__inner{ display: block;}
  .cep-case01__inner{ width: 160px; margin: -240px 0 25px 300px;}
  .cep-case02__inner{ width: 190px; height: 220px; margin: -250px 0 20px -20px;}
  .cep-case03__inner{ width: 190px; margin: -206px 0 30px 270px;}
  .cep-case__inner img,
  .cep-case__inner p{ width: 100%;}
  .cep-case__box03{ width: 350px;}
  .cep-case01__box03{ margin: 0 0 0 90px;}
  .cep-case02__box03{}
  .cep-case03__box03{ margin: 0 0 0 110px;}
  .cep-case04__box03{ margin-top: -10px;}
}



/*************************************************************************************************************************
* button
*************************************************************************************************************************/
.cep-btn{ display: flex; justify-content: center; align-items: center; background: #fff;  width: calc(100% - 60px); height: 50px; border: 1px solid #9a0000; font-weight: 700; font-size: 13px; color: #9a0000; text-align: center; transition: .3s;}
.cep-btn:hover{ background: #9a0000; color: #fff;}
.cep-btn::before{ content: ""; width: 6px; height: 7px; position: absolute; top: 50%; right: 20px; border-top: 1px solid #9a0000; border-right: 1px solid #9a0000; transform: translateY(-50%) rotate(45deg); transition: .3s;}
.cep-btn:hover::before{ border-top-color: #fff; border-right-color: #fff;}

.cep-btn01,
.cep-btn02{ position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);}
.cep-btn03{  margin: 40px auto 0; position: relative;}


@media print, screen and (min-width: 380px){
  .cep-btn03 br{ display: none;}
}


@media print, screen and (min-width: 685px){
  .cep-btn01,
  .cep-btn02{ width: 260px; margin: 30px 0 0; position: relative; bottom: auto; left:  auto; transform: none;}
  .cep-btn01{ margin-left: calc(100% - 260px);}
  .cep-btn03{ width: 360px; margin-top: 180px;}
}