@charset "utf-8";

/* 共通
---------------------------------------------------------------------------*/
/* メイン画像
---------------------------------------------------------------------------*/
.mainimg{ height: 260px; background-image: url(../image/spa/bg-mainvis.png); }
.mainimg02{ height: 380px; background: url(../image/spa/bg-mainvis02.png) no-repeat center top; padding-bottom: 40px; color: #FFFFFF; background-color: #000000; }
.mainimg02 .headline{ font-size: 40px; margin-bottom: 40px; }
@media screen and (max-width: 480px){
  .mainimg{ height: 120px; }
  .mainimg02 .headline{ font-size: 24px; }
}


/* 01
---------------------------------------------------------------------------*/
.cnts01{ margin-bottom: 100px; }
.mainfig{ background-color: #000000; text-align: center; }
.block-spainfo{ max-width: 940px; margin: 30px auto; }
.block-spainfo .txt{ width: 420px; }
.block-spainfo .figs{ width: 470px; }
.block-spainfo .figs > div{ width: 226px; text-align: center; }
.block-spainfo .txt .headline{ font-size: 20px; line-height: 120%; font-weight: 700; color: #505a60; margin-bottom: 20px; }
.block-spainfo .txt .lead-cnts{ color: #505a60; }
.block-spainfo .figs .lead{ font-size: 20px; margin-top: 10px; font-weight: 700; color: #737b80; }
.lst-figs{ max-width: 1070px; margin: 30px auto 40px; }
.lst-figs > li{ width: 530px; }
.block-spa-detail{ width: 920px; margin: 30px auto; color: #505a60; }
.block-spa-detail .headline{ font-size: 20px; line-height: 120%; font-weight: 700; }
.block-spa-detail .bdr{ font-size: 16px; line-height: 150%; margin-top: 10px; border-bottom: 1px solid #505a60; padding-bottom: 10px; }
.block-spa-detail .lead{ font-size: 16px; line-height: 150%; margin-top: 10px;  }

@media screen and (max-width: 480px){
  .cnts01{ margin-bottom: 40px; }
  .block-spainfo.flex.f-between.f-middle{
    width: 100%;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .block-spainfo .txt,
  .block-spainfo .figs,
  .block-spa-detail,
  .lst-figs{ width: 100%; }
  .block-spainfo .txt,
  .lst-figs{ margin-bottom: 20px; }
  .block-spa-detail,
  .block-spainfo .txt{ padding-left: 10px; padding-right: 10px; }
  .block-spainfo .figs > div,
  .lst-figs > li{ width: 50%; }
}

/* 03
---------------------------------------------------------------------------*/
.cnts03{ margin-top: 100px; }
.cnts03 .bg{ background: url(../image/spa/bg-cnts03.png) no-repeat center top; height: 500px; }
.cnts03 .bg p{ font-size: 40px; line-height: 130%; color: #FFFFFF; }
.cnts03 .cnts-wrap{ margin: 40px auto; }
.cnts03 .btns{ width: 634px; margin: 60px auto 100px auto; }
.cnts03 .btns a{ display: block; border-radius: 5px; border: 1px solid #949494; color: #737b80; text-align: center; width: 310px; padding: 10px; font-size: 19px; font-weight: bold; }

@media screen and (max-width: 480px){
  .cnts03{ margin-top: 40px; }
  .cnts03 .bg{ height: 200px; background-size: cover; }
  .cnts03 .bg p{ font-size: 24px; padding-left: 10px; padding-right: 10px; }
  .cnts03 .btns,
  .cnts03 .btns a{ width: 100%; }
  .cnts03 .btns > li{ width: 48%; }
  .cnts03 .btns{ padding-left: 10px; padding-right: 10px; }
  .cnts03 .btns a{ font-size: 16px; }
  .cnts03 .btns{ margin-top: 30px; margin-bottom: 40px; }
}

/* 04
---------------------------------------------------------------------------*/
.cnts04{ margin-top: 100px; }
.cnts04 .bg{ background-color: #505a60; }
.cnts04 .bg .cnts-wrap{ background: url(../image/spa/fig-cnts04.png) no-repeat 400px top; height: 440px; }
.cnts04 .bg .cnts-wrap > div{ width: 280px; margin-left: 70px; color: #FFFFFF; }
.cnts04 .bg .cnts-wrap > div .headline{ font-size: 20px; line-height: 140%; font-weight: 700; margin-bottom: 20px; }
.cnts04 .bg2{ background: url(../image/spa/bg-cnts04.png) no-repeat center top; padding: 80px 0; }
.cnts04 .bg2 .cnts-wrap{ background-color: rgba(255,255,255,0.85); padding: 30px; color: #505a60; }
.cnts04 .bg2 .headline{ font-size: 25px; line-height: 140%; font-weight: 700; margin-bottom: 20px; padding-top: 20px; }
.cnts04 .bg2 li{ padding: 20px 0; font-size: 16px; border-bottom: 1px solid #505a60; font-size: 16px; line-height: 160%; }

@media screen and (max-width: 480px){
  .cnts04{ margin-top: 40px; }
  .cnts04 .bg .cnts-wrap{ height: auto; background-image: none;  }
  .cnts04 .bg .cnts-wrap > div{ width: 100%; margin-left: 0; padding: 20px 0; }
  .cnts04 .bg2{ padding: 40px 10px; background-size: cover; }

}