@charset "UTF-8";
/* Scss Document */
/* A Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0; }

ul[role="list"], ol[role="list"] {
  list-style: none; }

html:focus-within {
  scroll-behavior: smooth; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img, picture {
  max-width: 100%;
  display: block; }

input, button, textarea, select {
  font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important; } }
img {
  max-width: 100%;
  height: auto;
  backface-visibility: hidden; }

ul, li {
  list-style: none;
  padding: 0;
  margin: 0; }

a {
  outline: none;
  text-decoration: none; }

/*--------------------------
メディアクエリ設定
---------------------------*/
/*マップ型変数で定義*/
/*@mixinでメディアクエリを呼び出す。変数mq、初期値sm*/
/*フォントサイズレスポンシブ*/
/*@mixin fs-vw($font-size, $base-width: 414) {
  font-size: $font-size / $base-width * 100vw;
}*/
/*20pxのテキストを画面幅に合わせて変更する場合*/
/*.sample {
  @include fs-vw(20);
}*/
/*--------------------------------------------------
全体設定
---------------------------------------------------*/
html, body {
  overflow-x: hidden;
  /*追加*/
  scroll-behavior: smooth;
  scroll-padding-top: 60px; }
  @media screen and (min-width: 768px) {
    html, body {
      scroll-padding-top: 144px; } }

body {
  font-size: 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  color: #333333;
  overflow-x: hidden; }

/*--------------------------------------------------
ヘルパークラス
---------------------------------------------------*/
@media screen and (max-width: 767px) {
  .hp_sp_br {
    display: block; } }
@media screen and (min-width: 768px) {
  .hp_sp_br {
    display: none; } }

@media screen and (max-width: 767px) {
  .hp_pc_br {
    display: none; } }
@media screen and (min-width: 768px) {
  .hp_pc_br {
    display: block; } }

.hp_ta-c {
  text-align: center !important; }

.hp_ta-r {
  text-align: right !important; }

.hp_txt_small {
  font-size: 0.8em; }

.hp_txt_large {
  font-size: 1.5em; }

.hp_img_tac {
  display: block;
  margin: 0 auto; }

.hp_mt20 {
  margin-top: 20px; }

.hp_txt_caution {
  color: #E00429; }

.hp_txt_exBold {
  font-weight: 900; }

.hp_txt_underLine {
  background: linear-gradient(transparent 75%, #FFE564 75%); }

.hp_txt_slant {
  position: relative;
  /*複数行*/ }
  .hp_txt_slant::before {
    display: block;
    content: "";
    width: 1em;
    height: 2px;
    border-radius: 12px;
    background: #000000;
    position: absolute;
    top: 50%;
    left: -1.2em;
    -webkit-transform: translateY(-50%) rotate(70deg);
    transform: translateY(-50%) rotate(70deg); }
  .hp_txt_slant::after {
    display: block;
    content: "";
    width: 1em;
    height: 2px;
    border-radius: 12px;
    background: #000000;
    position: absolute;
    top: 50%;
    right: -1.2em;
    -webkit-transform: translateY(-50%) rotate(-70deg);
    transform: translateY(-50%) rotate(-70deg); }
  .hp_txt_slant.hp_txt_slant__w::before {
    background: #fff; }
  .hp_txt_slant.hp_txt_slant__w::after {
    background: #fff; }
  .hp_txt_slant.hp_txt_slant__multi {
    position: relative;
    font-weight: bold; }
    .hp_txt_slant.hp_txt_slant__multi::before {
      display: block;
      content: "";
      width: 2em;
      height: 2px;
      border-radius: 12px;
      background: #000000;
      position: absolute;
      top: 50%;
      left: -4.2em;
      -webkit-transform: translateY(-50%) rotate(70deg);
      transform: translateY(-50%) rotate(70deg); }
    .hp_txt_slant.hp_txt_slant__multi::after {
      display: block;
      content: "";
      width: 2em;
      height: 2px;
      border-radius: 12px;
      background: #000000;
      position: absolute;
      top: 50%;
      right: -3.2em;
      -webkit-transform: translateY(-50%) rotate(-70deg);
      transform: translateY(-50%) rotate(-70deg); }

.hp_pos_rel {
  position: relative; }

/*文字の下アンダーライン*/
.hp_underline_y {
  border-bottom: solid 2px #F6CE25; }

/*--------------------------------------------------
btn
---------------------------------------------------*/
.btn {
  display: block;
  width: 100%;
  border-radius: 4px;
  padding: 1em;
  text-align: center;
  transition: .3s all;
  background: #F97171;
  /*	&:focus {
  		transition: .3s all;
  		transform: translateY(4px);
  		box-shadow: none;
  		&::after {
  			display: none;
  		}
  	}
  	&:hover {
  		transition: .3s all;
  		transform: translateY(4px);
  		box-shadow: none;
  		&::after {
  			display: none;
  		}
  	}*/ }
  .btn > .inner {
    display: flex;
    justify-content: center;
    align-items: center; }
  .btn .txt {
    width: 100%;
    color: #fff;
    font-size: 1.125em;
    font-weight: bold; }
  .btn .icon {
    width: 24px;
    margin-left: auto; }
  .btn.btn__submit {
    font-size: 1.313em;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(90deg, #ffcd14 0%, #ff5639 100%);
    border-style: none;
    box-shadow: 0px 5px 12px -1px rgba(0, 0, 0, 0.2);
    cursor: pointer; }
    .btn.btn__submit::after {
      display: none; }
    .btn.btn__submit.js-disabled {
      background: #fff;
      color: #333;
      pointer-events: none;
      border: solid 1px #333;
      cursor: default;
      box-shadow: none; }
  .btn.btn__back {
    background: #fff;
    border: solid 1px #878C9A;
    cursor: pointer;
    box-shadow: 0px 4px 0px 3px #878C9A; }
    .btn.btn__back > .txt {
      color: #878C9A; }
    .btn.btn__back::after {
      display: none; }

/*--------------------------------------------------
header
---------------------------------------------------*/
.header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99999;
  background: transparent;
  -webkit-transition: .3s all;
  transition: .3s all; }
  .header + #confirm, .header + #thanks {
    position: static; }
  .header.js-active {
    background: #368df6;
    background: linear-gradient(150deg, #368df6 0%, #68b2fa 50%, #99ecff 100%);
    -webkit-transition: .3s all;
    transition: .3s all; }
  .header.header__single {
    background: #368df6;
    background: linear-gradient(150deg, #368df6 0%, #68b2fa 50%, #99ecff 100%); }
    @media screen and (min-width: 768px) {
      .header.header__single .logoBox {
        width: 270px; } }
  .header > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.5em 0.8em;
    gap: 16px;
    row-gap: 40px;
    position: relative;
    z-index: 9999; }
    @media screen and (min-width: 768px) {
      .header > .inner {
        padding: 0.5em 1em;
        flex-wrap: nowrap;
        gap: 16px; } }
  .header .logoBox {
    width: 70%;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }
    @media screen and (min-width: 768px) {
      .header .logoBox {
        width: 250px; } }
    .header .logoBox .logoTxt {
      color: #fff;
      font-size: 1.313em; }
      @media screen and (min-width: 768px) {
        .header .logoBox .logoTxt {
          font-size: 1.6em; } }
  .header .navBox {
    display: none;
    width: 100%;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-left: auto; }
    @media screen and (min-width: 768px) {
      .header .navBox {
        display: block;
        width: 100%;
        max-width: 520px; } }
    .header .navBox.js-active {
      display: block; }
    .header .navBox .navList {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      gap: 24px; }
      @media screen and (min-width: 768px) {
        .header .navBox .navList {
          justify-content: flex-end;
          flex-direction: row;
          gap: 40px; } }
      .header .navBox .navList > li {
        text-align: center;
        width: 100%; }
        @media screen and (min-width: 768px) {
          .header .navBox .navList > li {
            width: auto; } }
        .header .navBox .navList > li > a {
          display: block;
          width: 100%;
          padding: 0.5em;
          font-size: 0.875em;
          color: #fff; }
          @media screen and (min-width: 768px) {
            .header .navBox .navList > li > a {
              flex-direction: row;
              display: inline;
              width: auto;
              padding: 0; } }
  .header .btnBox {
    display: none;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }
    @media screen and (min-width: 768px) {
      .header .btnBox {
        display: block;
        width: 100%;
        max-width: 210px; } }
  .header .navBtn {
    display: block;
    width: 40px;
    height: 20px;
    position: relative;
    cursor: pointer;
    z-index: 999; }
    @media screen and (min-width: 768px) {
      .header .navBtn {
        display: none; } }
    .header .navBtn.js-active .navBtnLine {
      transition: .3s all;
      top: 50%;
      bottom: auto;
      -webkit-transform: rotate(-45deg) translateY(-50%);
      transform: rotate(-45deg) translateY(-50%); }
      .header .navBtn.js-active .navBtnLine:nth-child(2) {
        display: none; }
      .header .navBtn.js-active .navBtnLine:nth-child(3) {
        top: 50%;
        bottom: auto;
        -webkit-transform: rotate(45deg) translateY(-50%);
        transform: rotate(45deg) translateY(-50%); }
    .header .navBtn .navBtnLine {
      width: 100%;
      height: 2px;
      background: #fff;
      position: absolute;
      top: 0;
      right: 0;
      margin: auto; }
      .header .navBtn .navBtnLine:nth-child(2) {
        top: 50%; }
        @media screen and (min-width: 768px) {
          .header .navBtn .navBtnLine:nth-child(2) {
            width: 70%; } }
      .header .navBtn .navBtnLine:nth-child(3) {
        top: auto;
        bottom: 0; }
        @media screen and (min-width: 768px) {
          .header .navBtn .navBtnLine:nth-child(3) {
            width: 50%; } }

.gnaviBg {
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100; }

.gnaviBg {
  display: none;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100; }

/*--------------------------------------------------
footer
---------------------------------------------------*/
.footer {
  background: #F3F3F3; }
  .footer .upperBox {
    padding: 2em 1em; }
  .footer .logoBox {
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      .footer .logoBox {
        max-width: 260px;
        width: 100%; } }
    .footer .logoBox .logo {
      color: #368DF6;
      font-size: 2em;
      letter-spacing: 0.01em;
      text-align: center;
      font-weight: bold; }
  .footer .linkBox {
    width: 100%;
    margin: 2em auto; }
    .footer .linkBox > .linkList > li {
      text-align: center; }
      .footer .linkBox > .linkList > li > a {
        color: #3A3E49;
        font-weight: bold;
        font-size: 0.875em; }
  .footer .addressBox {
    text-align: center; }
    .footer .addressBox .txt {
      font-weight: bold;
      font-size: 0.875em; }
  .footer .copyrightBox {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.8em;
    background: #3A3E49; }
    .footer .copyrightBox > small {
      font-size: 0.8em;
      color: #fff; }

/*--------------------------------------------------
PC右固定
---------------------------------------------------*/
.fixedBox {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 999;
  background: #fff; }
  @media screen and (min-width: 768px) {
    .fixedBox {
      display: none; } }

.fixedBtn {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 1px 14px -4px rgba(0, 0, 0, 0.4);
  gap: 0;
  padding: 0.5em 0; }
  @media screen and (min-width: 768px) {
    .fixedBtn {
      display: none; } }
  .fixedBtn .imgBox {
    width: 60%; }

/*--------------------------------------------------
SP固定フッター
---------------------------------------------------*/
.floatContacts {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 5;
  display: flex;
  justify-content: space-between; }
  @media screen and (min-width: 768px) {
    .floatContacts {
      display: none; } }
  .floatContacts .btnBox {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center; }
  .floatContacts .telBox {
    width: 100%; }
    .floatContacts .telBox > a {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row-reverse;
      background: #f2f7fa;
      padding: .5em 0; }
    .floatContacts .telBox .txtBox {
      text-align: center; }
      .floatContacts .telBox .txtBox .spTxt {
        display: block;
        color: #008ed8;
        font-size: min(3.5vw, 18px);
        line-height: 1; }
      .floatContacts .telBox .txtBox .numTxt {
        display: block;
        color: #008ed8;
        font-weight: 700;
        font-family: 'Roboto';
        font-size: min(4vmax, 48px);
        line-height: 1;
        margin: 0.2em auto; }
      .floatContacts .telBox .txtBox .timeTxt {
        display: block;
        font-size: min(3vw, 16px);
        line-height: 1;
        color: #101112; }
    .floatContacts .telBox .iconBox {
      width: 24%; }
      .floatContacts .telBox .iconBox > img {
        margin: 0 auto; }
  .floatContacts .lineBox {
    width: 100%;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    max-width: 65px;
    background: #00B900;
    padding: 1em;
    font-size: min(3vw, 32px); }
  .floatContacts .mailBox {
    width: 100%;
    display: flex;
    align-items: center;
    align-self: stretch;
    justify-content: center;
    max-width: 65px;
    background: #008ED8;
    padding: 1em;
    font-size: min(3vw, 32px); }

input::placeholder,
textarea::placeholder {
  color: #ccc; }

input {
  width: 100%;
  font-size: 1.125em;
  padding: 0.3em 0.5em; }
  input[type="radio"] {
    width: auto; }
  input[type="checkbox"] {
    width: auto;
    -webkit-transform: scale(1.5);
    transform: scale(1.5); }

textarea {
  width: 100%;
  font-size: 1.125em;
  padding: 0.5em; }

select {
  width: 100%;
  font-size: 1.125em;
  padding: 0.5em; }

.agreeBox {
  margin: 2em auto; }
  .agreeBox > .inner {
    text-align: center; }
  .agreeBox .txtBox > a {
    text-decoration: underline !important; }

.submitBox {
  margin: 2em auto;
  width: 90%; }
  @media screen and (min-width: 768px) {
    .submitBox {
      max-width: 320px;
      width: 100%; } }

/*--------------------------------------------------
確認画面
---------------------------------------------------*/
#confirm {
  background: #F7F6EE; }
  #confirm .formBox {
    background: #fff;
    padding: 2em;
    border-radius: 12px; }
  #confirm > .inner {
    width: 100%;
    margin: 2em auto; }
    @media screen and (min-width: 768px) {
      #confirm > .inner {
        max-width: 800px; } }
  #confirm .ttlBox {
    padding: 0.2em 0.5em;
    text-align: center; }
    #confirm .ttlBox .ttl {
      font-weight: bold;
      font-size: 1.2em;
      letter-spacing: 0.05em; }
      @media screen and (min-width: 768px) {
        #confirm .ttlBox .ttl {
          font-size: 1.5em; } }
  #confirm .leadBox {
    text-align: center;
    margin: 40px auto 24px; }
    #confirm .leadBox .txt {
      line-height: 1.8; }
  #confirm .submitBox {
    width: 100%; }
    @media screen and (min-width: 768px) {
      #confirm .submitBox {
        max-width: 380px; } }
    #confirm .submitBox > .inner {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center;
      gap: 24px; }
    #confirm .submitBox .btnBox {
      width: 100%; }
      #confirm .submitBox .btnBox.btnBox__back {
        width: 60%; }

/*--------------------------------------------------
完了画面
---------------------------------------------------*/
#thanks > .inner {
  width: 100%;
  margin: 2em auto;
  padding: 2em 1em; }
  @media screen and (min-width: 768px) {
    #thanks > .inner {
      max-width: 800px; } }
#thanks .ttlBox {
  padding: 0.2em 0.5em;
  text-align: center; }
  #thanks .ttlBox .ttl {
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.2em; }
    @media screen and (min-width: 768px) {
      #thanks .ttlBox .ttl {
        font-size: 1.5em; } }
#thanks .imgBox {
  width: 90%;
  margin: 2em auto; }
  #thanks .imgBox > img {
    display: block;
    margin: 0 auto; }
#thanks .leadBox {
  margin: 2em auto; }
  #thanks .leadBox .txt {
    line-height: 1.8; }
  #thanks .leadBox.leadBox__caution {
    border: solid 1px #E00429;
    border-radius: 12px;
    padding: 1.5em; }
#thanks .topBtnBox {
  margin: 2em auto;
  width: 80%; }
  @media screen and (min-width: 768px) {
    #thanks .topBtnBox {
      width: 100%;
      max-width: 300px; } }

/*--------------------------------------------------
フォーム大枠
---------------------------------------------------*/
.container.mainContainer {
  width: 100%;
  margin: 0 auto; }
  @media screen and (min-width: 768px) {
    .container.mainContainer {
      max-width: 960px;
      min-width: 700px; } }

.fv-wrap {
  width: 100%; }

/*.main-pt-btm-bg {
	display: block;
	width: 100%;
	height: 306px;
	background: #ddd;
}*/
#mainform {
  display: block;
  width: 100%;
  /*height: 100%;*/
  background: #FFFDC4;
  padding: 1em;
  position: relative;
  /*	> .inner {
  		padding: 1.5em 0em 3em 0em;
  		@include mq(pc){
  			padding: 1.5em 3em 3em 3em;
  		}
  	}*/ }
  #mainform::before {
    display: block;
    content: "";
    width: 30%;
    height: 100%;
    background-image: url("../images/bg-stripe-fv.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; }
  #mainform > .ttlBox .ttl {
    text-align: center; }
    #mainform > .ttlBox .ttl .txt {
      display: inline-block;
      text-align: center;
      font-weight: bold;
      font-size: 1.313em;
      letter-spacing: 0.1em;
      padding-top: 2em;
      position: relative; }
      #mainform > .ttlBox .ttl .txt::after {
        display: block;
        content: "";
        width: 30%;
        height: 140%;
        background: url("../images/img-woman-soudan@2x.webp");
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        bottom: -74px;
        right: -62px;
        z-index: 1; }
        @media screen and (min-width: 768px) {
          #mainform > .ttlBox .ttl .txt::after {
            width: 20%;
            height: 140%;
            bottom: -24px;
            right: -90px; } }

/*--------------------------------------------------
fv
---------------------------------------------------*/
#fv {
  width: 100%;
  min-height: 420px;
  /*	background: url("../images/fv-bg-pc.webp");*/
  background: #368df6;
  background: linear-gradient(150deg, #368df6 0%, #68b2fa 50%, #99ecff 100%);
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 768px) {
    #fv {
      height: 580px; } }
  #fv::before {
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: url("../images/pt-bg-l.webp");
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: -50px;
    z-index: -1;
    transform: scaleX(0.8);
    transform-origin: left;
    pointer-events: none; }
    @media screen and (min-width: 768px) {
      #fv::before {
        left: 0; } }
  #fv::after {
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: url("../images/pt-bg-r.webp");
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    transform: scaleX(0.8);
    transform-origin: right;
    pointer-events: none; }
  #fv > .inner {
    padding: 0 1em;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #fv > .inner {
        max-width: 1200px;
        width: 100%; } }
  #fv .ttlBox {
    background: #FFCD14;
    padding: 0.2em 0.5em;
    text-align: center; }
    #fv .ttlBox .ttl {
      color: #FF5639;
      font-weight: bold;
      font-size: 1.2em;
      letter-spacing: 0.05em; }
      @media screen and (min-width: 768px) {
        #fv .ttlBox .ttl {
          font-size: 2em; } }
  #fv .fvBox {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: auto;
    z-index: 1; }
    @media screen and (min-width: 768px) {
      #fv .fvBox {
        width: 100%;
        max-width: 700px; } }
  #fv .medalBox {
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media screen and (min-width: 768px) {
      #fv .medalBox {
        width: 80%;
        margin: 1em 0; } }
    #fv .medalBox > .imgBox {
      width: 100%; }
      #fv .medalBox > .imgBox:nth-of-type(2) {
        width: 60%; }
  #fv .leadBox {
    width: 100%; }
    #fv .leadBox .fvSubttl {
      font-size: 10vw;
      color: #fff;
      font-weight: bold;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      position: relative; }
      @media screen and (min-width: 768px) {
        #fv .leadBox .fvSubttl {
          font-size: 4em; } }
      #fv .leadBox .fvSubttl > span {
        display: block;
        position: relative; }
        #fv .leadBox .fvSubttl > span:nth-of-type(1) {
          font-size: 1.6em;
          transform: rotate(-20deg);
          top: -10px; }
        #fv .leadBox .fvSubttl > span:nth-of-type(2) {
          font-size: 1.3em;
          transform: rotate(10deg); }
        #fv .leadBox .fvSubttl > span:nth-of-type(3) {
          font-size: 0.9em;
          transform: rotate(0deg);
          top: -11px;
          left: -5px; }
        #fv .leadBox .fvSubttl > span:nth-of-type(4) {
          font-size: 0.9em;
          transform: rotate(-10deg);
          left: -10px; }
        #fv .leadBox .fvSubttl > span:nth-of-type(5) {
          font-size: 0.9em;
          transform: rotate(0deg);
          top: -10px;
          left: -10px; }
        #fv .leadBox .fvSubttl > span:nth-of-type(6) {
          font-size: 1.3em;
          transform: rotate(30deg);
          left: -30px;
          top: -5px; }
    #fv .leadBox .fvTtl {
      font-size: 1.5em; }
      @media screen and (min-width: 768px) {
        #fv .leadBox .fvTtl {
          font-size: 2em; } }
      #fv .leadBox .fvTtl > .txt {
        display: block;
        font-weight: bold;
        color: #fff;
        opacity: 0; }
        #fv .leadBox .fvTtl > .txt.js-active {
          animation: txtSlideIn 1s ease-out forwards; }
        #fv .leadBox .fvTtl > .txt.hp_txt_large {
          font-size: 1.2em;
          animation-delay: 0.2s; }
          @media screen and (min-width: 768px) {
            #fv .leadBox .fvTtl > .txt.hp_txt_large {
              font-size: 2em; } }
    #fv .leadBox + .imgBox {
      width: 32%;
      position: absolute;
      top: 60px;
      right: -20px; }
      @media screen and (min-width: 768px) {
        #fv .leadBox + .imgBox {
          width: 30%;
          position: static; } }
      #fv .leadBox + .imgBox > .inner {
        position: relative; }
        #fv .leadBox + .imgBox > .inner .hontai {
          width: 100%;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          right: 0;
          margin: auto;
          z-index: 2; }
        #fv .leadBox + .imgBox > .inner .blend {
          width: 100%;
          position: absolute;
          z-index: 1;
          top: 50%;
          transform: translateY(-50%);
          right: -14px; }
          #fv .leadBox + .imgBox > .inner .blend > img {
            mix-blend-mode: overlay; }

.anm-scaleToggle {
  display: block;
  animation-name: anm-scaleToggle;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }

@keyframes anm-scaleToggle {
  0% {
    transform: scale(0.9); }
  50% {
    transform: scale(1); }
  100% {
    transform: scale(0.9); } }
@keyframes txtSlideIn {
  0% {
    opacity: 0;
    transform: translateY(102%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
/*--------------------------------------------------
about
---------------------------------------------------*/
#about > .inner {
  margin: 0 auto;
  padding: 3em 1em; }
  @media screen and (min-width: 768px) {
    #about > .inner {
      max-width: 960px;
      width: 100%;
      padding: 4em 1em; } }
  #about > .inner > .ttlBox {
    text-align: center; }
    #about > .inner > .ttlBox .ttl {
      display: block;
      font-size: 1.313em;
      letter-spacing: 0.1em; }
      @media screen and (min-width: 768px) {
        #about > .inner > .ttlBox .ttl {
          font-size: 2em; } }
#about .imgBox {
  margin: 24px auto; }
#about .aboutList {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #about .aboutList {
      flex-direction: row; } }
  #about .aboutList > li {
    width: 100%;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }
    #about .aboutList > li .ttlBox {
      text-align: center; }
      #about .aboutList > li .ttlBox > .ttl {
        display: block;
        font-size: 1.1em; }
        @media screen and (min-width: 768px) {
          #about .aboutList > li .ttlBox > .ttl {
            font-size: 1.125em; } }
#about .leadBox {
  text-align: left;
  line-height: 1.8;
  margin: 1.5em auto; }
#about .industryBox {
  margin: 5em auto 2em; }
  #about .industryBox > .inner {
    background: #E9E0D6;
    padding: 2em 1em;
    border-radius: 12px; }
    @media screen and (min-width: 768px) {
      #about .industryBox > .inner {
        padding: 2em 3em; } }
    #about .industryBox > .inner > .ttlBox .ttl {
      display: block;
      font-size: 1.313em;
      text-align: center; }
      @media screen and (min-width: 768px) {
        #about .industryBox > .inner > .ttlBox .ttl {
          font-size: 1.8em; } }
  #about .industryBox .listBox {
    margin: 2em auto 0;
    width: 100%; }
    @media screen and (min-width: 768px) {
      #about .industryBox .listBox {
        max-width: 520px; } }
  #about .industryBox .industryList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 12px; }
    #about .industryBox .industryList > li {
      width: auto;
      background: #fff;
      padding: 0.3em 2em;
      border-radius: 44px; }
    #about .industryBox .industryList + span {
      display: block;
      margin: 0.5em;
      text-align: right; }

/*--------------------------------------------------
お悩み
---------------------------------------------------*/
#trouble {
  background: #F6F6F6;
  padding: 4em 4vw 0;
  /*あとで確認*/
  position: relative;
  z-index: 2; }
  @media screen and (min-width: 768px) {
    #trouble {
      padding: 4em 3em 0; } }
  #trouble::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    border-top: 13vw solid #f6f6f6;
    border-bottom: 0;
    position: absolute;
    bottom: -47px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1; }
    @media screen and (min-width: 768px) {
      #trouble::after {
        bottom: -76px;
        border-top: 6vw solid #f6f6f6; } }
  #trouble .inner {
    width: 100%;
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      #trouble .inner {
        max-width: 950px; } }
    #trouble .inner > .ttlBox {
      text-align: center; }
      #trouble .inner > .ttlBox .subTtl {
        font-size: 1.125em;
        letter-spacing: 0.1em; }
      #trouble .inner > .ttlBox .ttl {
        font-size: 2em;
        letter-spacing: 0.1em; }
  #trouble .troubleBox {
    margin: 3em auto; }
    @media screen and (min-width: 768px) {
      #trouble .troubleBox {
        margin: 3em auto 0; } }
  #trouble .troubleList {
    display: grid;
    grid-template-columns: repeat(1, minmax(200px, 1fr));
    grid-gap: 20px; }
    @media screen and (min-width: 768px) {
      #trouble .troubleList {
        grid-template-columns: repeat(2, minmax(455px, 1fr));
        grid-gap: 40px; } }
    #trouble .troubleList > li {
      width: 80%;
      text-align: center;
      padding: 2em;
      font-weight: bold;
      border-radius: 12px;
      position: relative;
      z-index: 1; }
      @media screen and (min-width: 768px) {
        #trouble .troubleList > li {
          width: 90%;
          margin: 0 auto; } }
      #trouble .troubleList > li::after {
        display: block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-top: 16px solid #92C2FD;
        border-bottom: 0;
        position: absolute;
        bottom: -12px;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 2; }
      #trouble .troubleList > li:nth-of-type(2n) {
        margin-left: auto; }
      #trouble .troubleList > li:nth-of-type(1) {
        background: #92C2FD; }
      #trouble .troubleList > li:nth-of-type(2) {
        background: #92EDF4; }
        #trouble .troubleList > li:nth-of-type(2)::after {
          border-top: 16px solid #92EDF4; }
      #trouble .troubleList > li:nth-of-type(3) {
        background: #99ECFF; }
        #trouble .troubleList > li:nth-of-type(3)::after {
          border-top: 16px solid #99ECFF; }
      #trouble .troubleList > li:nth-of-type(4) {
        background: #68B2FA; }
        #trouble .troubleList > li:nth-of-type(4)::after {
          border-top: 16px solid #68B2FA; }
  #trouble .imgBox {
    width: 60%;
    margin: 2em auto; }
    @media screen and (min-width: 768px) {
      #trouble .imgBox {
        max-width: 380px; } }

/*--------------------------------------------------
解決できます！
---------------------------------------------------*/
#point > .inner {
  width: 100%;
  margin: 0 auto;
  padding: 4em 0; }
  @media screen and (min-width: 768px) {
    #point > .inner {
      max-width: 950px; } }
  #point > .inner > .ttlBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column-reverse;
    margin: 0 auto;
    gap: 24px;
    text-align: center; }
    @media screen and (min-width: 768px) {
      #point > .inner > .ttlBox {
        max-width: 760px;
        flex-direction: row;
        text-align: left; } }
    #point > .inner > .ttlBox > .ttl {
      width: 100%;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      font-size: 1.9em; }
      @media screen and (min-width: 768px) {
        #point > .inner > .ttlBox > .ttl {
          font-size: 2.5em; } }
      #point > .inner > .ttlBox > .ttl > span {
        display: block;
        line-height: 1.4; }
        @media screen and (min-width: 768px) {
          #point > .inner > .ttlBox > .ttl > span {
            line-height: 1.7; } }
      #point > .inner > .ttlBox > .ttl > .hp_txt_small {
        font-size: 0.7em; }
    #point > .inner > .ttlBox .imgBox {
      width: 70%;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto; }
#point .pointBox {
  margin: 3em auto;
  padding: 0 3vw; }
  @media screen and (min-width: 768px) {
    #point .pointBox {
      padding: 0; } }
#point .pointList > li:nth-of-type(n+2) {
  margin-top: 2em; }
#point .pointList > li > .inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column; }
  @media screen and (min-width: 768px) {
    #point .pointList > li > .inner {
      flex-direction: row; } }
  #point .pointList > li > .inner.inner__rev {
    flex-direction: column; }
    @media screen and (min-width: 768px) {
      #point .pointList > li > .inner.inner__rev {
        flex-direction: row-reverse; } }
    #point .pointList > li > .inner.inner__rev .txtBox {
      border-radius: 12px 12px 0 0; }
      @media screen and (min-width: 768px) {
        #point .pointList > li > .inner.inner__rev .txtBox {
          border-radius: 0 12px 12px 0; } }
    #point .pointList > li > .inner.inner__rev .imgBox {
      border-radius: 0 0 12px 12px; }
      @media screen and (min-width: 768px) {
        #point .pointList > li > .inner.inner__rev .imgBox {
          border-radius: 12px 0 0 12px; } }
#point .pointList > li .txtBox {
  width: 100%;
  background: #EFF5FF;
  padding: 8vw;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  align-self: stretch; }
  @media screen and (min-width: 768px) {
    #point .pointList > li .txtBox {
      padding: 3em;
      border-radius: 12px 0 0 12px; } }
#point .pointList > li .ttlBox {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  gap: 24px; }
  #point .pointList > li .ttlBox .numBox {
    width: 72px; }
  #point .pointList > li .ttlBox .ttl {
    width: 100%;
    font-size: 1.5em; }
#point .pointList > li .imgBox {
  width: 100%;
  /*max-height: 180px;*/
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  border-radius: 0 0 12px 12px;
  overflow: hidden; }
  @media screen and (min-width: 768px) {
    #point .pointList > li .imgBox {
      max-height: unset;
      border-radius: 0 12px 12px 0; } }
  #point .pointList > li .imgBox > img {
    object-fit: cover; }
#point .pointList > li .leadBox {
  margin: 2em 0 0; }
  #point .pointList > li .leadBox > .txt {
    line-height: 1.8; }

/*--------------------------------------------------
flow
---------------------------------------------------*/
#flow > .inner {
  width: 100%;
  margin: 0 auto;
  padding: 4em 4vw; }
  @media screen and (min-width: 768px) {
    #flow > .inner {
      max-width: 950px; } }
  #flow > .inner > .ttlBox {
    text-align: center; }
    #flow > .inner > .ttlBox .ttl {
      font-size: 2em;
      letter-spacing: 0.1em; }
#flow .flowBox {
  margin: 3em auto; }
#flow .flowList {
  display: grid;
  grid-template-columns: repeat(1, minmax(300px, 1fr));
  grid-gap: 16px; }
  @media screen and (min-width: 768px) {
    #flow .flowList {
      grid-gap: 40px;
      grid-template-columns: repeat(2, minmax(440px, 1fr)); } }
  #flow .flowList > li:nth-of-type(2n) {
    margin-top: 3em; }
  #flow .flowList > li .imgBox {
    position: relative;
    z-index: 1; }
    #flow .flowList > li .imgBox > img {
      width: 80%;
      display: block;
      margin-left: auto; }
    #flow .flowList > li .imgBox.imgBox__rev > img {
      margin-right: auto;
      margin-left: 0; }
  #flow .flowList > li .numBox {
    width: 122px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2; }
    #flow .flowList > li .numBox.numBox__rev {
      left: auto;
      right: 0; }
  #flow .flowList > li .txtBox {
    width: 88%;
    background: #F6F6F6;
    border-radius: 12px;
    padding: 1.2em;
    margin-top: 1em; }
    @media screen and (min-width: 768px) {
      #flow .flowList > li .txtBox {
        min-width: 410px;
        min-height: 200px; } }
    #flow .flowList > li .txtBox.txtBox__rev {
      margin-left: auto; }
    #flow .flowList > li .txtBox .ttl {
      font-size: 1.313em; }
  #flow .flowList > li .leadBox {
    margin: 1em 0; }

/*--------------------------------------------------
お悩み
---------------------------------------------------*/
#faq {
  background: #F6F6F6;
  padding: 4em 3em 0;
  position: relative;
  z-index: 2; }
  #faq > .inner {
    width: 100%;
    margin: 0 auto;
    padding: 4em 0; }
    @media screen and (min-width: 768px) {
      #faq > .inner {
        max-width: 950px; } }
    #faq > .inner > .ttlBox {
      text-align: center; }
      #faq > .inner > .ttlBox .ttl {
        font-size: 2em;
        letter-spacing: 0.1em; }
  #faq .faqBox {
    margin: 3em auto; }
  #faq .faqList > li:nth-of-type(n+2) {
    margin-top: 1em; }
  #faq .faqList > li .ttlBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    background: #92EDF4;
    padding: 0.8em 1em;
    border-radius: 12px 12px 0 0;
    gap: 16px; }
    @media screen and (min-width: 768px) {
      #faq .faqList > li .ttlBox {
        padding: 0.8em 2em;
        gap: 24px; } }
    #faq .faqList > li .ttlBox > .ttl {
      font-weight: bold;
      font-size: 1.125em; }
    #faq .faqList > li .ttlBox > .imgBox {
      width: 40px;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto; }
  #faq .faqList > li .contBox {
    background: #fff;
    padding: 1.5em 2em;
    border-radius: 0 0 12px 12px; }
    #faq .faqList > li .contBox .txt {
      line-height: 1.8; }

/*--------------------------------------------------
フッター直前のcv
---------------------------------------------------*/
#cv {
  background: #FFFDC4;
  padding: 2em 2vw; }
  @media screen and (min-width: 768px) {
    #cv {
      padding: 4em 3em; } }
  #cv > .inner {
    margin: 0 auto;
    padding: 3em 1em; }
    @media screen and (min-width: 768px) {
      #cv > .inner {
        max-width: 840px;
        width: 100%;
        margin: 40px auto;
        padding: 0; } }
    #cv > .inner > .ttlBox {
      text-align: center; }
      #cv > .inner > .ttlBox .ttl {
        font-weight: bold;
        font-size: 1.5em;
        letter-spacing: 0.05em; }
        @media screen and (min-width: 768px) {
          #cv > .inner > .ttlBox .ttl {
            font-size: 2em; } }
    #cv > .inner > .leadBox {
      margin: 1em auto;
      text-align: center; }
      #cv > .inner > .leadBox > .txt {
        font-weight: bold;
        letter-spacing: 0.1em; }
  #cv .cvBox {
    background: #fff;
    border-radius: 12px;
    padding: 2em 3vw 0; }
    @media screen and (min-width: 768px) {
      #cv .cvBox {
        padding: 2em 6em 0; } }
    #cv .cvBox > .inner {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      position: relative;
      z-index: 1; }
    #cv .cvBox .contBox {
      width: 100%; }
      #cv .cvBox .contBox .ttl {
        width: 90%;
        font-size: 1.5em;
        text-align: left;
        line-height: 1.8;
        letter-spacing: 0.05em;
        font-weight: bold;
        margin: 0em auto 1em; }
        @media screen and (min-width: 768px) {
          #cv .cvBox .contBox .ttl {
            width: 73%;
            max-width: 310px; } }
      #cv .cvBox .contBox .subTtl {
        text-align: left;
        font-size: 1.313em;
        font-weight: bold;
        padding-left: 6vw; }
        @media screen and (min-width: 768px) {
          #cv .cvBox .contBox .subTtl {
            text-align: center;
            padding: 0; } }
    #cv .cvBox .imgBox {
      width: 40%;
      align-self: flex-end;
      position: absolute;
      right: 0;
      bottom: 60px;
      z-index: -1; }
      @media screen and (min-width: 768px) {
        #cv .cvBox .imgBox {
          width: 50%;
          position: static; } }
  #cv .btnBox {
    width: 100%;
    margin: 1em auto; }
    @media screen and (min-width: 768px) {
      #cv .btnBox {
        max-width: 300px;
        padding: 0; } }

/*--------------------------------------------------
仕組み
---------------------------------------------------*/
.shapeTop {
  position: absolute;
  top: -46px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg); }
  @media screen and (min-width: 768px) {
    .shapeTop {
      top: -70px; } }
  .shapeTop svg {
    position: relative;
    display: block;
    width: calc(145% + 1.3px);
    height: 46px; }
    @media screen and (min-width: 768px) {
      .shapeTop svg {
        height: 75px; } }
  .shapeTop .shapeFill {
    fill: #F7F6EE; }
    .shapeTop .shapeFill.shapeFill__w {
      fill: #fff; }

#shikumi {
  background: #F7F6EE;
  position: relative;
  padding: 80px 0; }
  #shikumi > .inner {
    margin: 0 auto;
    padding: 0 1em; }
    @media screen and (min-width: 768px) {
      #shikumi > .inner {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto; } }
  #shikumi .ttlBox {
    text-align: center; }
    #shikumi .ttlBox .ttl {
      font-weight: bold;
      font-size: 1.5em; }
      @media screen and (min-width: 768px) {
        #shikumi .ttlBox .ttl {
          font-size: 2em; } }
  #shikumi .leadBox {
    text-align: center;
    margin: 40px auto 24px; }
    #shikumi .leadBox .txt {
      line-height: 1.8; }

/*--------------------------------------------------
brand
---------------------------------------------------*/
#brand {
  position: relative; }
  #brand > .shapeTop {
    top: -45px; }
    @media screen and (min-width: 768px) {
      #brand > .shapeTop {
        top: -74px; } }
  #brand > .inner {
    margin: 0 auto;
    padding: 80px 1em 40px; }
    @media screen and (min-width: 768px) {
      #brand > .inner {
        max-width: 1000px;
        width: 100%; } }
    #brand > .inner > .ttlBox {
      text-align: center; }
      #brand > .inner > .ttlBox .ttl {
        font-weight: bold;
        font-size: 1.5em; }
        @media screen and (min-width: 768px) {
          #brand > .inner > .ttlBox .ttl {
            font-size: 2em; } }
  #brand .brandBox {
    margin: 32px auto; }
  #brand .brandList {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-direction: column; }
    @media screen and (min-width: 768px) {
      #brand .brandList {
        flex-direction: row; } }
    #brand .brandList > li {
      width: 100%;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto; }
      #brand .brandList > li:nth-of-type(n+2) {
        margin-top: 3em; }
        @media screen and (min-width: 768px) {
          #brand .brandList > li:nth-of-type(n+2) {
            margin-top: 0; } }
      #brand .brandList > li > .ttlBox {
        text-align: center;
        margin: 16px auto; }
        #brand .brandList > li > .ttlBox .ttl {
          font-weight: bold; }
      @media screen and (min-width: 768px) {
        #brand .brandList > li .txtBox {
          min-height: 380px; } }
      #brand .brandList > li .txtBox .txt {
        font-size: 0.875em;
        line-height: 1.8; }
      #brand .brandList > li .supBox {
        border: solid 1px #231815;
        padding: 0.5em;
        text-align: center;
        margin: 12px auto; }
        #brand .brandList > li .supBox .txt {
          font-size: 0.875em; }

/*--------------------------------------------------
case
---------------------------------------------------*/
#case > .inner {
  margin: 0 auto;
  padding: 80px 0; }
  @media screen and (min-width: 768px) {
    #case > .inner {
      max-width: 980px;
      width: 100%; } }
  #case > .inner > .ttlBox {
    text-align: center; }
    #case > .inner > .ttlBox .ttl {
      font-weight: bold;
      font-size: 2em; }
#case .caseBox {
  margin: 40px auto; }
#case .caseList > li {
  padding: 40px 30px;
  width: 100%;
  position: relative;
  background: #fff;
  margin-bottom: 24px; }
  @media screen and (min-width: 768px) {
    #case .caseList > li {
      margin-bottom: 40px; } }
  #case .caseList > li > .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-direction: column; }
    @media screen and (min-width: 768px) {
      #case .caseList > li > .inner {
        gap: 64px;
        flex-direction: row; } }
    @media screen and (min-width: 768px) {
      #case .caseList > li > .inner.inner__rev {
        flex-direction: row-reverse; } }
  #case .caseList > li .txtWrapper {
    width: 100%;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }
  #case .caseList > li .ttlBox .ttl {
    display: block;
    font-size: 1.3em;
    margin: 1em 0; }
    @media screen and (min-width: 768px) {
      #case .caseList > li .ttlBox .ttl {
        font-size: 1.8em;
        margin: 24px 0 32px; } }
  #case .caseList > li .imgBox {
    width: 90%;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto; }
    @media screen and (min-width: 768px) {
      #case .caseList > li .imgBox {
        width: auto; } }
    #case .caseList > li .imgBox > img {
      width: 100%; }
  #case .caseList > li .txtBox .txt {
    font-size: 0.875em;
    line-height: 1.8; }

/*--------------------------------------------------
FAQ
---------------------------------------------------*/
#faq {
  background: #F7F6EE;
  position: relative;
  padding: 80px 0; }
  #faq > .inner {
    margin: 0 auto;
    padding: 0 1em; }
    @media screen and (min-width: 768px) {
      #faq > .inner {
        max-width: 1000px;
        width: 100%;
        margin: 0 auto; } }
    #faq > .inner > .ttlBox {
      text-align: center; }
      #faq > .inner > .ttlBox .ttl {
        font-weight: bold;
        font-size: 2em; }
  #faq .faqBox {
    margin: 2em auto; }
  #faq .faqList > li {
    background: #fff;
    border-radius: 20px; }
    #faq .faqList > li:nth-of-type(n+2) {
      margin-top: 1em; }
    #faq .faqList > li > .ttlBox > .inner {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 16px;
      padding: 1.5em 1.5em 1em; }
    #faq .faqList > li > .ttlBox .iconBox {
      color: #FF5639;
      font-size: 1.5em;
      font-weight: bold; }
    #faq .faqList > li > .ttlBox .txtBox {
      font-size: 1.1em;
      font-weight: bold; }
      @media screen and (min-width: 768px) {
        #faq .faqList > li > .ttlBox .txtBox {
          font-size: 1.313em; } }
    #faq .faqList > li .leadBox > .inner {
      width: 95%;
      margin-left: auto;
      display: flex;
      gap: 16px;
      padding: 1em 1em 2em; }
    #faq .faqList > li .leadBox .iconBox {
      font-size: 2.5em;
      font-weight: bold; }
    #faq .faqList > li .leadBox .txtBox .txt {
      font-size: 0.875em;
      line-height: 1.8; }

/*--------------------------------------------------
お問合わせ
---------------------------------------------------*/
#contact, #confirm {
  position: relative; }
  #contact > .inner, #confirm > .inner {
    margin: 0 auto;
    padding: 80px 16px 40px; }
    @media screen and (min-width: 768px) {
      #contact > .inner, #confirm > .inner {
        max-width: 800px;
        width: 100%;
        margin: 0 auto; } }
    #contact > .inner > .ttlBox, #confirm > .inner > .ttlBox {
      text-align: center; }
  #contact .leadBox, #confirm .leadBox {
    margin: 32px auto;
    text-align: center; }
  #contact .formBox, #confirm .formBox {
    margin: 2.5em auto; }
  #contact .contBox, #confirm .contBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 24px;
    padding: 1.313em 0;
    border-top: solid 1px #BFBFBF; }
    @media screen and (min-width: 768px) {
      #contact .contBox, #confirm .contBox {
        flex-direction: row; } }
    #contact .contBox:last-child, #confirm .contBox:last-child {
      border-bottom: solid 1px #BFBFBF; }
    #contact .contBox > .ttl, #confirm .contBox > .ttl {
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      width: 100%; }
      @media screen and (min-width: 768px) {
        #contact .contBox > .ttl, #confirm .contBox > .ttl {
          width: 50%; } }
    #contact .contBox > .cont, #confirm .contBox > .cont {
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      width: 100%; }
    #contact .contBox > .contList, #confirm .contBox > .contList {
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      width: 100%; }
    #contact .contBox .contList > .cont:nth-of-type(n+2), #confirm .contBox .contList > .cont:nth-of-type(n+2) {
      margin-top: 0.5em; }
  #contact .label.label__caution, #confirm .label.label__caution {
    background: #333333;
    color: #fff;
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.8em;
    padding: 0.2em 0.8em;
    border-radius: 4px; }

/*--------------------------------------------------
注釈
---------------------------------------------------*/
.ly_caution {
  margin-top: 1em; }
  @media screen and (min-width: 768px) {
    .ly_caution {
      width: 100%;
      max-width: 900px;
      margin: 2em auto; } }
  @media screen and (max-width: 767px) {
    .ly_caution {
      width: 96%;
      margin: 2em auto; } }

.bl_caution_ttl {
  font-size: clamp(14px, 1vw, 14px);
  border-top: solid 1px #333;
  border-bottom: solid 1px #333;
  padding: 0.5em 0;
  position: relative; }
  .bl_caution_ttl::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 8px 0 8px;
    border-color: #000333 transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: 1em;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); }

.bl_caution_cont {
  margin-top: 1em; }

.bl_cautionListItem {
  font-size: clamp(10px, 1vw, 12px); }

/*--------------------------------------------------
お問合せフォーム本体
---------------------------------------------------*/
/*--------------------------------------------------
footer
---------------------------------------------------*/
.globalFooter .copyrights {
  text-align: center; }

.bl_footer {
  background: #E8E8E8;
  padding: 2em;
  text-align: center; }
  .bl_footer small {
    font-size: clamp(12px, 1vw, 12px); }

/*--------------------------------------------------
comparisonエリア
---------------------------------------------------*/
/**/

/*# sourceMappingURL=style-lp.css.map */