@charset "UTF-8";

/* basic style setting in utility.css */

/* 変数 */
:root {
  --red_color : #cc5551; 
  --green_color : #78826e; 
}


/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* レイアウト */
.inner {width: min(1180px, 100%); margin: auto; padding: 0 20px}

a.round_btn {color: white; display: inline-block; padding: 15px 60px; background: var(--green_color); border-radius: 30px; max-width: 300px; font-size: 1.8rem; font-weight: 500}
a.round_btn:hover {background: var(--red_color)}

.appeal {display: flex; justify-content: center; align-items: center;}
.appeal::before,
.appeal::after {content: ''; width: 2px; height: 20px; background-color: var(--red_color);}
.appeal::before {margin-right: 8px; transform: rotate(-20deg)}
.appeal::after {margin-left: 6px;transform: rotate(20deg)}

.balloon {text-align: center; font-size: 1.5rem; text-align: center; background: url('../img/deco_balloon.svg') ;background-position: bottom center; background-repeat: no-repeat; padding-bottom: 20px}

.check {margin-bottom: 40px}
.check li {position: relative; padding-left: 30px; font-size: 1.6rem; border-bottom: 1px solid silver; padding-bottom: 16px; margin-bottom: 16px; letter-spacing: 0}
.check li::before{content: url('../img/list_check.svg'); position: absolute; top: 0; left: 0;}
.check li:last-of-type::after {content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 15px; height: 20px; background: url('../img/check_arrow.svg') no-repeat center / contain;}


/* header
----------------------------------------------- */
header {
  position: fixed; top: 0; right: 0; width: 290px; height: auto;
  .inner {display: inline-block; width: 100%; height: auto; padding: 66px 0px 0px 30px;}
  h1 {width: 210px; height: auto; margin-bottom: 30px; line-height: 1}
  li {margin-bottom: 10px}
  li a {display: block; width: 100%; padding: 10px 0px 10px 12px; background: white; line-height: 1; text-transform: uppercase; font-weight: 500; font-size: 1.6rem} 
  li a:hover {opacity: .8}
}

#main {
  position: absolute; overflow: hidden; top: 0; right: 290px; width: 390px; height: auto; background: #FFF; z-index: 100;

  #lead {
    margin-bottom: 40px;
    .beginning {background: url('../img/lead_bg.jpg'); background-size: cover; background-position: 50% 50%; min-height: 395px; margin-bottom: 20px; position: relative}
    .beginning hgroup {text-align: center; position: absolute; bottom: 10px; left: 0; width: 100%; color: white}
    .beginning .lead {margin-bottom: 6px}
    .beginning .place {margin-bottom: 2px; font-size: 1.8rem; font-weight: 500}
    .beginning h2 {font-weight: 700; font-size: 3.6rem; line-height: 1.1; letter-spacing: .06em}
    .inner {padding: 0 20px}
    p {text-align: center;}
    p strong {color: var(--red_color)}
    dt {text-align: center; margin-bottom: 20px}
    dd {text-align: center; margin-bottom: 20px}
    .appeal {color: var(--red_color); font-weight: 700; margin-bottom: 10px;}
    dl:nth-of-type(2) {margin-bottom: 46px}
    dl:nth-of-type(2) dd:nth-of-type(1) {margin-bottom: 10px}
    dl:nth-of-type(2) dd:nth-of-type(2) {font-size: 1rem; color: var(--green_color)}
    h3 {text-align: center; max-width: 300px; margin: auto auto 20px; border-top: 1px solid silver; border-bottom: 1px solid silver; font-weight: 400; font-size: 1.6rem; padding: 6px}
    ul {max-width: 300px; margin: auto}
    ul li {letter-spacing: .08em;}
  }

  #problem {
    margin-bottom: 60px;
    .figure {margin-bottom: 50px}
    .mayoi {text-align: center; margin-bottom: ４0px; font-size: 1.6rem; font-weight: 500}
    .detail {
      position: relative; padding: 36px; background:
        /* 左上 */
        linear-gradient(var(--green_color), var(--green_color)) left top / 85px 1px no-repeat,
        linear-gradient(var(--green_color), var(--green_color)) left top / 1px 55px no-repeat,
        /* 右上 */
        linear-gradient(var(--green_color), var(--green_color)) right top / 85px 1px no-repeat,
        linear-gradient(var(--green_color), var(--green_color)) right top / 1px 55px no-repeat,
        /* 左下 */
        linear-gradient(var(--green_color), var(--green_color)) left bottom / 85px 1px no-repeat,
        linear-gradient(var(--green_color), var(--green_color)) left bottom / 1px 55px no-repeat,
        /* 右下 */
        linear-gradient(var(--green_color), var(--green_color)) right bottom / 85px 1px no-repeat,
        linear-gradient(var(--green_color), var(--green_color)) right bottom / 1px 55px no-repeat;
      }
    .detail h3 {font-weight: 700; text-align: center; line-height: 1.4; background: rgba(120, 130, 110, 0.2); padding: 20px 10px; color: var(--green_color); font-size: 2.2rem; margin-bottom: 24px}
    .detail p {text-align: center; font-size: 1.4rem; line-height: 1.6; margin-bottom: 20px}
    .detail li {letter-spacing: 0}
    }

    #present {
      background: rgba(226, 184, 166, 0.2); padding: 60px 0; margin-bottom: 60px;
      .inner {padding: 0 30px}
      .wrap {border: 1px solid var(--red_color); padding: 30px; background: white}
      .wrap h3 {color: white; font-size: 1.3rem; background: var(--red_color); padding: 10px 20px; text-align: center; text-wrap: inherit; margin-bottom: 20px}
      .wrap p {max-width: 120px; margin: auto; margin-bottom: 10px}
      .wrap dl {color: var(--red_color); font-weight: 700; text-align: center}
      .wrap dt {font-size: 2.1rem; margin-bottom: 0}
      .wrap dd {font-size: 4.2rem; line-height: 1}
      .wrap dd span {font-size: 2rem}
      .wrap dd.note {font-size: 1rem; color: #505050; font-weight: 400; margin-top: 18px; letter-spacing:.08em}
      .plus {text-align: center; margin-top: -10px; margin-bottom: 0}
      .wrap:nth-of-type(2) {margin-top: -10px; margin-bottom: 30px}
      .incentive {text-align: center; color: var(--red_color); font-size: 4rem; font-weight: 700; line-height: 1.4; letter-spacing: .14em; margin-bottom: 1lh}
      .incentive strong {font-size: 6rem; background: linear-gradient(transparent 80%, #fff100 80%); line-height: 1}
      .incentive span {font-size: 3.2rem}
      dt {font-size: 1.6rem; text-align: center; font-weight: 700; margin-bottom: 20px}
      .appeal::before,
      .appeal::after {content: ''; width: 1px; height: 40px; background-color: #505050;}
      .appeal::before {margin-right: 30px; transform: rotate(-20deg)}
      .appeal::after {margin-left: 30px;transform: rotate(20deg)}
      dd {text-align: center}
      dd .round_btn {background: var(--red_color)}
      a.round_btn:hover {opacity: .8}
    }

    #recommendation {
      margin-bottom: 40px;
      ul {margin-bottom: 40px}
      li {font-size: 1.6rem; border-bottom: 1px solid silver; padding-bottom: 16px; margin-bottom: 16px; letter-spacing: 0; text-align: center; font-weight: 500; position: relative}
      li:last-of-type::after {content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 15px; height: 20px; background: url('../img/check_arrow.svg') no-repeat center / contain;}
      p:nth-of-type(2) {text-align: center; font-weight: 500; font-size: 1.6rem; margin-bottom: 1lh}
      p:nth-of-type(3) {text-align: center; }
    }

    #flow {
      margin-bottom: 40px;
      .inner {padding: 0 40px}
      .figure {margin-bottom: 50px}
      dl:nth-of-type(1) dt {text-align: center; margin-bottom: 30px; font-size: 1.6rem; font-weight: 500}
      ul {margin-bottom: 40px; padding: 0 20px; position: relative}
      ul li {display: flex; flex-wrap: nowrap; gap:0 20px; align-items: center; margin-bottom: 20px; font-size: 1.4rem; font-weight: 500; line-height: 1.4; text-align: left; position: relative}
      ul li span:first-of-type {background: var(--green_color); color: white; padding: 8px 16px;}
      ul li a {color: var(--red_color)}
      ul li:not(:last-of-type) ::before {content: ""; height: 26px; border-left: 1px solid var(--green_color); position: absolute; bottom: -22px; left: 36px;}
      p {text-align: center; margin-bottom: 26px; font-size: 1.5rem; font-weight: 500;}
      dl:nth-of-type(2) dt {font-size: 1.6rem; text-align: center; font-weight: 700; margin-bottom: 20px}
      .appeal::before,
      .appeal::after {content: ''; width: 1px; height: 40px; background-color: #505050;}
      .appeal::before {margin-right: 30px; transform: rotate(-20deg)}
      .appeal::after {margin-left: 30px;transform: rotate(20deg)}
      dd {text-align: center}
    }

    #form {
      .figure {margin-bottom: 20px}
      h2 {text-align: center; color: var(--red_color); font-size: 2rem; font-weight: 700; margin-bottom: 30px}
      p {text-align: center}
    }
} /* main */

#hero {
  position: fixed; overflow: hidden; top: 0; left: 0; width: calc(100% - (290px + 390px)); height: 100dvh;
  .inner {padding: 54px 8dvw 0px;}
  .figure {margin-bottom: 20px}
  .lead {margin-bottom: 10px; font-size: 2rem}
  .place {margin-bottom: 0; font-size: 2.2rem; color: var(--green_color); margin-left: -8px; font-weight: 500}
  h1 {color: var(--green_color); margin-bottom: 20px; line-height: 1.24; font-size: 5rem; letter-spacing: .12em}
  li {margin-bottom: 6px; font-size: 1.4rem}
  li:nth-of-type(1) {margin-bottom: 15px}
  li:nth-of-type(3) {margin-left: -8px}
}


/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/




/*---------------------------------------------------------------------
 メディアクエリー Foundation 6 に準拠
---------------------------------------------------------------------*/
 /* スマホ「縦・横」対応 */
@media screen and (min-width: 320px) and (max-width: 639px) {
.no_br_sp br {display: none !important}
br.sp_non {display: none}

#main {right: 0; width: 100%;}
}

 /* スマホ・タブレット「縦・横」共通対応 */
@media screen and (min-width: 320px) and (max-width: 1023px){
.no_br br {display: none !important}
}


 /* スマホ「縦」向き対応 */
@media screen and (min-width: 320px) and (orientation:portrait) {
/* Styles */
}


 /* スマホ以降（320px 以下）iPhone SE */
@media screen and (max-width: 320px) {
/* Styles */
}


 /* スマホ以降（320px 以降） */
@media screen and (min-width: 321px) {
/* Styles */
}


 /* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
#hero .inner {padding: 54px 10% 0px;}
}


 /* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
br.tb_non {display: none}
}

 /* タブレット以下（1023px 以下） */
@media screen and (max-width: 1023px) {
/* Styles */
}


 /* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
br.pc_non {display: none} 
#hero .inner {padding: 54px 4dvw 0px;}
#hero h1 {font-size: 3rem}
}

 /* 1025px以降 iPad 横 iPad 12.9 縦 以降 */
@media screen and (min-width: 1025px) {
/* Styles */
}


/* PCモニター（1080px以降） */
@media only screen and (min-width : 1060px) {
/* Styles */
}

/* PCモニター（1080px以降） */
@media only screen and (min-width : 1080px) {
/* Styles */
}


/* PCモニター（1160px以降） */
@media screen and (min-width: 1160px) {
/* Styles */
}



/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
#hero .inner {padding: 54px 8dvw 0px;}
#hero h1 {font-size: 4rem}
}


/* PCモニター大（1480px以降） */
@media only screen and (min-width : 1480px) {
#hero h1 {font-size: 5rem}
}

/* 高さが800px以下の場合 */
@media only screen and (max-height : 840px) {
#hero .figure {margin-bottom: 10px}
#hero .lead {font-size: 1.4rem; margin-bottom: 4px}
#hero .place {font-size: 1.6rem;}
#hero h1 {font-size: 3rem; margin-bottom: 10px}
#hero li img {max-width: 200px}
}


/*---------------------------------------------------------------------
 Edge hack
---------------------------------------------------------------------*/
@supports (-ms-ime-align: auto) {
/* Styles */
}


/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */ 
a[href]:after {content: "" !important;}
abbr[title]:after {content: "" !important;}
.show-for-small-only {display: none !important}
.pagetop.show {display: none !important}
body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important}  /* Chrome印刷で日本語が表示されない対応 */
}