/* ==========================================================

Project : Pairia
Production date : 2026/07/15 ~ 2026/07/29
Author : grams design office / iwasaki
Version : 1.0.0


【Index】
01. root
02. base
03. common
04. header
05. footer(pageUp)
06. hero
07. intro、worries、about、notSearch、features、counselors、workFlow、faq
08. application
09. banner
10. bg
11. lower
12. form
13. animation


【Naming rule】
.block
.block__element
.block--modifier
.block__element--modifier

（Example）
.header
.header__nav
.header__logo
.header__logo--white

========================================================== */


@charset "utf-8";


/* ---------------------------------------------------------------------------------------------------------------- */
/* 01. root
/* ---------------------------------------------------------------------------------------------------------------- */

:root {
  --color-navy: #004D88;
  --color-primaryBlue: #136FB8;
  --color-blue: #567AB0;
  --color-lightBlue: #99B2D9;
  --color-paleLightBlue: #D4DCE3;
  --color-pink: #F85885;
  --color-yellow: #EFF97C;
  --color-cream: #FEFDF4;
  --color-white: #FFF;
  --color-gray: #E1E1E1;
  --color-black: #1E1E1E;

  --color-gradient-main: linear-gradient(270deg, #F85885 0%, #C25D91 5.29%, #90629C 14.42%, #6267A6 22.6%, #486AAC 29.33%, #296DB3 39.42%, #136FB8 54.81%, #106AB1 63.94%, #0D64A9 75%, #075998 87.5%, #004D88 100%);
  --color-gradient-mainReverse: linear-gradient(270deg, #F85885 0%, #DC5B8B 37.5%, #A16198 74.04%, #90629C 87.5%, #5463A2 95.19%, #0D64A9 100%);
  --color-gradient-blue: linear-gradient(180deg, #567AB0 0%, #004D88 100%);
  --color-gradient-gold: linear-gradient(193deg, #FFFBE4 16.89%, #998850 67.69%);
  --color-gradient-blue-diagonal: linear-gradient(147deg, rgba(255, 255, 255, 0.00) 26.66%, rgba(149, 149, 149, 0.44) 67.43%), var(--1, #567AB0);
  --color-gradient-pink-diagonal: linear-gradient(147deg, rgba(255, 255, 255, 0.00) 26.66%, rgba(223, 120, 120, 0.44) 67.43%), #F8A89F;

  --boxShadow-gradientMain: 0 -8px 20px -10px linear-gradient(270deg, #F85885 0%, #C25D91 5.29%, #90629C 14.42%, #6267A6 22.6%, #486AAC 29.33%, #296DB3 39.42%, #136FB8 54.81%, #106AB1 63.94%, #0D64A9 75%, #075998 87.5%, #004D88 100%);
  --boxShadow-black: 0 1px 8px 0 rgba(28, 52, 94, 0.30);
  --boxShadow-pink: 0 -2px 15px 0 rgba(248, 88, 133, 0.30);
  --boxShadow-pinkTop: 0 -8px 20px -10px rgba(248, 88, 133, 0.50);

  --font-jp-gothic: "Noto sans JP" , sans-serif;
  --font-jp-serif: "Noto Serif JP";
  --font-en: Poppins;
  --font-en-cursive: Allison;

  --transition-all: all .3s ease-in-out;
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 02. base
/* ---------------------------------------------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow: auto;
  overflow-x: hidden;
  scroll-margin-top: 0px;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--font-jp-gothic);
  letter-spacing: 0.01em;
  line-height: 1.8;
  background-color: var(--color-lightBlue);
}

main{
  overflow-x: hidden;
  opacity: 0;
  animation: content .8s .4s forwards;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  user-select: none; /* 選択禁止 */
  -webkit-user-drag: none; /* Webkitブラウザ（ChromeやSafari）向け */
  -webkit-user-select: none;
  -moz-user-select: none; /* Firefox向け */
  -ms-user-select: none; /* IE向け */
  pointer-events: none; /* 右クリックや長押し禁止 */
}

/* -------- モバイルファーストのコンテンツ -------- */
.mobileFirst{
  position: relative;
  overflow-x: hidden;
  inset: 0 auto 0 50%;
  width: 470px;
  height: auto;
  background-color: var(--color-cream);
  filter: drop-shadow(0 0 10px rgba(28, 52, 94, 0.30));
  transform: translateX(-50%);
  z-index: 5000;
}

/* -------- SP -------- */
@media print,screen and (max-width: 768px){
  main{
    opacity: 1;
    animation: none;
  }

  .mobileFirst{
    inset: 0;
    width: 100%;
    filter: none;
    transform: none;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 03. common
/* ---------------------------------------------------------------------------------------------------------------- */

/* -------- title -------- */
/* トップページタイトル */
.ttl__h2{
  position: relative;
  left: 3rem;
}

.ttl__h2::before{
  content: "";
  position: absolute;
  left: -3rem;
  top: 0.4rem;
  width: 2.2rem;
  height: 3rem;
  background-image: url("../img/common/logo_blue.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.ttl__h2 p{
  color: var(--color-navy);
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.03438rem;
  opacity: 0.5;
}

.ttl__h2 h2{
  color: var(--color-navy);
  font-family: var(--font-jp-gothic);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.2275rem;
  font-feature-settings: 'halt' on;
}

/* 下層ページタイトル */
.ttl__h1--lower{
  position: relative;
  left: 3rem;
}

.ttl__h1--lower::before{
  content: "";
  position: absolute;
  left: -3rem;
  top: 0.4rem;
  width: 2.2rem;
  height: 3rem;
  background-image: url("../img/common/logo_blue.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.ttl__h1--lower p{
  color: var(--color-navy);
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.03438rem;
  opacity: 0.5;
}

.ttl__h1--lower h1{
  color: var(--color-navy);
  font-family: var(--font-jp-gothic);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.2275rem;
  font-feature-settings: 'halt' on;
}

.ttl__h2--lower{
  padding: 0.4rem 1.25rem 0.5rem;
  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.14rem;
  border-radius: 0.3125rem;
  background: var(--color-blue);
}

.ttl__h3--lower{
  position: relative;
  margin-left: 1.2rem;
  color: var(--color-navy);
  font-family: var(--font-jp-gothic);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25rem;
  letter-spacing: 0.13rem;
}

.ttl__h3--lower::before{
  content: "";
  position: absolute;
  top: 0.34rem;
  left: -1.2rem;
  width: 0.625rem;
  height: 0.6875rem;
  border-radius: 100%;
  background-color: var(--color-navy);
}

/* お申し込みボタンのタイトル */
.ttl__application{
  position: relative;
}

.ttl__application .en{
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.03438rem;
  opacity: 0.5;
}

.ttl__application h2{
  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.2275rem;
  font-feature-settings: 'halt' on;
}

.ttl__application .txt{
  margin-top: 0.87rem;
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.11375rem;
}

/* -------- text -------- */
.txt__main{
  color: var(--color-black);
  text-align: justify;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.13125rem;
}

.txt__main--center{
  color: var(--color-black);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75rem;
  letter-spacing: 0.13125rem;
}

/* 英語 */
.txt__en--navy{
  color: var(--color-navy);
  font-family: var(--font-en);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 0.625rem;
  letter-spacing: 0.02rem;
}

/* カードスタイル（名前） */
.txt__name{
  color: var(--color-navy);
  font-family: var(--font-en);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08rem;
}
.txt__name span{
  display: inline-block;
  margin: 0 0 0 0.3rem;
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.8rem;
  letter-spacing: 0.04rem;
}

.txt__pink{
  color: var(--color-pink);
  font-weight: 700;
}

.txt__numbering{
  display: flex;
  color: var(--color-black);
  text-align: start;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.13125rem;
}

.txt__numbering span{
  display: inline-block;
  margin: 0.3rem 0.8rem 0 0;
  color: var(--color-blue);
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.075rem;
}

/* 下線テキスト */
.txt_underline--black,
.txt_underline--white,
.txt_underline--pink{
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 2.7rem;
  letter-spacing: 0.23438rem;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 4%;
  text-underline-offset: 15%;
  text-underline-position: from-font;
}

.txt_underline--black{
  color: var(--color-black);
}

.txt_underline--white{
  color: var(--color-white);
}

.txt_underline--pink{
  color: var(--color-pink);
}

/* 強調テキスト */
.txt__emphasis{
  position: relative;
  display: inline!important;
  color: var(--color-navy);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25rem;
  letter-spacing: 0.12188rem;
}

.txt__emphasis::before{
  content: "";
  position: absolute;
  top: 0.65rem;
  margin-left: -1.3rem;
  width: 1.2rem;
  height: 2px;
  background-color: var(--color-navy);
  transform: rotate(70deg);
}

.txt__emphasis::after{
  content: "";
  position: absolute;
  top: 0.65rem;
  margin-right: -1.3rem;
  width: 1.2rem;
  height: 2px;
  background-color: var(--color-navy);
  transform: rotate(-70deg);
}

/* -------- btn -------- */
/* お申し込みボタン 小 */
.btn__application--s{
  display: inline-block;
}

.btn__application--s a{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.38rem 1.5rem;

  font-family: var(--font-jp-gothic);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.02438rem;
  text-align: center;
  color: var(--color-white);
  border-radius: 0.3125rem;
  background: var(--color-gradient-main);
  box-shadow: var(--boxShadow-black);
  z-index: 0;
}

.btn__application--s a::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gradient-mainReverse);
  opacity: 0;
  transition: var(--transition-all);
  z-index: -1;
}

.btn__application--s a > *{
  position: relative;
  z-index: 1;
}

.btn__application--s a:hover::before,
.btn__application--s a:focus::before{
  opacity: 1;
}

/* お申し込みボタン 大 */
.btn__application--l{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-items: start;
  gap: 1rem;
  min-height: 0;
}

.btn__application--l a{
  position: relative;
  display: inline-block;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.5rem;
  padding: 1.87rem 4rem;

  font-family: var(--font-jp-gothic);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.02438rem;
  text-align: start;
  color: var(--color-white);
  border-radius: 1.5rem;
  background: var(--color-gradient-main);
  box-shadow: var(--boxShadow-black);
  z-index: 0;
}

.btn__application--l a::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gradient-mainReverse);
  opacity: 0;
  transition: var(--transition-all);
  z-index: -1;
}

.btn__application--l a::after{
  content: url("../img/common/arrows_white_l.svg");
  position: absolute;
  right: 0.9rem;
  bottom: 1.5rem;
  width: 1.1rem;
  height: 0.8rem;
}

.btn__application--l a > *{
  position: relative;
  z-index: 1;
}

.btn__application--l a:hover::before,
.btn__application--l a:focus::before{
  opacity: 1;
}

.btn__application--l img{
  width: 2.5rem;
  height: auto;
}

/* -------- SP -------- */
@media print,screen and (max-width: 768px){
  .btn__application--l a{
    justify-content: center;
  }
}

@media print,screen and (max-width: 450px){
  .btn__application--l a{
    justify-content: flex-start;
    gap: 1.2rem;
    padding: 1.875rem 2rem;
  }

  .ttl__application h2{
    font-size: 1.5rem;
    line-height: 1.8rem;
    letter-spacing: 0.18rem;
  }

  .ttl__application .txt{
    margin-top: 0.6rem;
    font-size: 0.75rem;
    line-height: 1.2rem;
    letter-spacing: 0.1rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 04. header
/* ---------------------------------------------------------------------------------------------------------------- */

.header{
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 100;
}

/* -------- header SP -------- */
.header__wrap{
  display: none;
}

.header__logo--sp{
  width: 5.93rem;
  height: auto;
}

.header__logo--sp a{
  opacity: 1;
  transition: var(--transition-all);
}

.header__logo--sp a:hover,
.header__logo--sp a:focus{
  opacity: 0.5;
}


/* -------- header PC(PC時の左側メニュー群) -------- */
.header__wrap--pcLeft{
  position: relative;
  left: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: space-between;
  gap: 1rem;
  width: calc((100% - 470px) / 2);
  height: 100vh;
  margin: 0 auto 0 0;
  padding: 6rem 0 6rem 10rem;
  pointer-events: all;
  z-index: 0;
}

.header__inner{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  align-content: space-between;
  gap: 6.5rem;
}

.header__upperInner{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  justify-items: flex-start;
  gap: 2.5rem;
}

.header_head{
  margin-bottom: 2.54rem;
  z-index: 10;
}

.header__logoBox{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
  gap: 1rem;
  opacity: 1;
  transition: var(--transition-all);
}

.header__logoBox:hover,
.header__logoBox:focus{
  opacity: 0.5;
}

.header__logo{
  width: 16.41vh;
}

.header__logoTtl{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding-bottom: 0.8rem;

  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375rem;
  letter-spacing: 0.13125rem;
}

.header__logoTtl div img{
  width: 12vh;
  height: auto;
}

.header__body{
  margin-bottom: 2rem;
}

.header__ul--m li{
  position: relative;
  display: block;
  font-family: var(--font-jp-gothic);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.13rem;
}

.header__ul--s li{
  position: relative;
  display: block;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.11375rem;
}

.header__nav{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  gap: 2.2rem;
}

.header__nav ul{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  gap: 0.9rem;
  text-align: start;
  margin-left: 1.2rem;
}

.header__nav ul li a{
  display: block;
  color: var(--color-white);
  transition: var(--transition-all);
}

.header__nav ul li a:hover,
.header__nav ul li a:focus{
  color: var(--color-pink);
}

.header__nav ul li::before{
  content: url(../img/common/circle_white.svg);
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  inset: -0.02rem 0 0 -1.2rem;
}

.header__foot{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: flex-start;
  gap: 0.4rem;
  text-align: center;
}

.header__snsLink{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.2rem;
}

.header__snsLink li a {
  opacity: 1;
  transition: var(--transition-all);
}

.header__snsLink li a:hover,
.header__snsLink li a:focus{
  opacity: 0.5;
}

.header__snsLink li a img{
  width: 1.93rem;
  height: 1.93rem;
  aspect-ratio: 1/1;
}

.header__copyright{
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5625rem;
  letter-spacing: 0.03438rem;
}

/* -------- PC（縦幅） -------- */
@media print,screen and (max-height: 1000px){
  .header__nav .header__ul--m{
    display: none;
  }
}

@media print,screen and (max-height: 700px){
  .header__body{
    margin-bottom: 0.5rem;
  }

  .header__snsLink{
    display: none;
  }
}

/* -------- SP -------- */
@media print,screen and (max-width: 1920px){
  .header__wrap--pcLeft{
    padding: 2.5rem 0 2.5rem 6rem;
  }
}

@media print,screen and (max-width: 1600px){
  .header__nav .header__ul--m{
    display: none;
  }
}

@media print,screen and (max-width: 1440px){
  .header__wrap--pcLeft{
    padding: 2.5rem 0 2.5rem 3.5rem;
  }
}

@media print,screen and (max-width: 1100px){
  .header{
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    pointer-events: all;
    z-index: 10000;
  }

  .header__wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0;
    width: 470px;
    height: auto;
    pointer-events: all;
  }

  .header__wrap--pcLeft{
    display: none;
  }
}

@media print,screen and (max-width: 768px){
  .header__wrap{
    width: 100%;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 05. pageUp / footer
/* ---------------------------------------------------------------------------------------------------------------- */

/* page up */
.pageUp{
  position: relative;
  width: 100%;
  height: auto;
  text-align: center;
}

.pageUp a{
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  padding-top: 1rem;
  padding-left: -0.5rem;
  padding-bottom: 1rem;
  font-family: var(--font-en);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6rem;
  letter-spacing: 0.05rem;
  color: var(--color-white);
  background: var(--color-blue);
  transition: var(--transition-all);
}

.pageUp a::after{
  content: url("../img/common/arrows_white.svg");
  position: absolute;
  width: 0.625rem;
  height: 0.4375rem;
  margin: 0 0 0.1rem 0.4rem;
}

.pageUp a:hover,
.pageUp a:focus{
  background-color: var(--color-pink);
}

/* footer */
.footer{
  position: relative;
  width: 100%;
  height: auto;
}

.footer__wrap{
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 5rem 1.42rem 4.8rem;
  text-align: center;
  background-image: url(../img/top/hero_bg.webp);
  background-position: 50% 35%;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.footer__inner{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-content: space-between;
  gap: 6.5rem;
}

.footer__upperInner{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  justify-items: center;
  gap: 2.5rem;
}

.footer_head{
  margin-bottom: 2.54rem;
  z-index: 10;
}

.footer__logoBox{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  opacity: 1;
  transition: var(--transition-all);
}

.footer__logoBox:hover,
.footer__logoBox:focus{
  opacity: 0.5;
}

.footer__logo{
  width: 5.3rem;
}

.footer__logoTtl{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding-bottom: 0.8rem;

  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375rem;
  letter-spacing: 0.13125rem;
  text-align: start;
}

.footer__logoTtl div img{
  width: 7.7rem;
  height: auto;
}

.footer__nav ul{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  gap: 0.9rem;
  text-align: start;
  margin-right: -1rem;
}

.footer__nav ul li{
  position: relative;
  display: block;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.11375rem;
}

.footer__nav ul li a{
  display: block;
  color: var(--color-white);
  transition: var(--transition-all);
}

.footer__nav ul li a:hover,
.footer__nav ul li a:focus{
  color: var(--color-pink);
}

.footer__nav ul li::before{
  content: url(../img/common/circle_white.svg);
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  inset: -0.02rem 0 0 -1.2rem;
}


.footer__foot{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

.footer__snsLink{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.2rem;
}

.footer__snsLink li a {
  opacity: 1;
  transition: var(--transition-all);
}

.footer__snsLink li a:hover,
.footer__snsLink li a:focus{
  opacity: 0.5;
}

.footer__snsLink li a img{
  width: 1.93rem;
  height: 1.93rem;
  aspect-ratio: 1/1;
}

.footer__copyright{
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5625rem;
  letter-spacing: 0.03438rem;
}

/* -------- SP -------- */
@media print,screen and (max-width: 1300px){
  .footer__wrap{
    padding: 5rem 1.42rem 9rem;
    background-position: 50% 35%;
  }
}

@media print,screen and (max-width: 450px){
  .footer__wrap{
    padding: 5rem 1.42rem 9rem;
    background-position: 50% 50%;
    background-size: 100% auto;
  }

  .footer__inner{
    gap: 5rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 06. hero
/* (トップページのメインビジュアル)
/* ---------------------------------------------------------------------------------------------------------------- */

.hero{
  position: relative;
}

.hero__wrap{
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
}

.hero__copyInner{
  position: absolute;
  top: 15vh;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  justify-items: center;
  align-items: center;
  transform: translateX(-50%);
  z-index: 10;
}

.hero__copy{
  font-family: var(--font-jp-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2.3rem;
  letter-spacing: 0.23em;
  font-feature-settings: 'vert' on;
  color: var(--color-white);
  writing-mode: vertical-rl;
}

.hero__copyLogo{
  width: 3.93rem;
  height: auto;
}

.hero__ttlInner{
  position: absolute;
  left: 50%;
  bottom: 6vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  justify-items: center;
  align-items: center;
  transform: translateX(-50%);
  z-index: 10;
}

.hero__ttl{
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.375rem;
  letter-spacing: 0.13125rem;
  text-align: center;
  color: var(--color-white);
}

.hero__ttlLogo{
  width: 4.2rem;
  height: auto;
}

.hero__visualInner{
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: end;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

.hero__man{
  left: 0;
  width: 31.05vh;
  opacity: 0;
  transform: translateX(-60px);
  animation: heroMan 1.5s cubic-bezier(.22,1,.36,1) .4s forwards;
}

@keyframes heroMan{

  from{
    opacity: 0;
    transform: translateX(-60px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

.hero__woman{
  right: 0;
  width: 17vh;
  opacity: 0;
  transform: translateX(60px);
  animation: heroWoman 2s cubic-bezier(.22,1,.36,1) .65s forwards;
}

@keyframes heroWoman{

  from{
    opacity: 0;
    transform: translateX(60px);
  }
  to{
    opacity: 1;
    transform: translateX(0);
  }
}

.hero__man,
.hero__woman{
  opacity: 0;
}

.hero__man img,
.hero__woman img {
  display: block;
}

.hero__bg{
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: 0;
}

/* -------- PC（縦幅） -------- */
@media print,screen and (max-height: 600px){
  .hero__copyInner{
    top: 5vh;
  }
}

/* PC幅の場合の縦幅 */
@media print, screen and (min-width: 381px) and (max-height: 650px){
  .hero__ttl{
    display: none;
  }
}

/* SP幅の場合の縦幅 */
@media print, screen and (max-width: 380px) and (max-height: 550px){
  .hero__ttl{
    display: none;
  }
}

/* -------- SP -------- */
@media print,screen and (max-width: 1300px){
  .hero__wrap{
    height: calc(100vh - 6.25rem);
  }

  .hero__bg{
    height: calc(100vh - 6.25rem);
  }

  .hero__copyInner{
    top: 10vh;
    gap: 0.8rem;
  }
}

@media print,screen and (max-width: 768px){
  .hero__copyInner{
    top: 13vh;
    gap: 0.6rem;
  }

  .hero__copyLogo{
    width: 3.5rem;
  }

  .hero__copy{
    font-size: 1.5rem;
  }

  .hero__ttlInner{
    bottom: 4vh;
  }
}

@media print,screen and (max-width: 450px){
  .hero__copyInner{
    top: 15vh;
  }

  .hero__ttlInner{
    bottom: 4vh;
    gap: 0.7rem;
  }

  .hero__ttl{
    font-size: 0.75rem;
    line-height: 1.2rem;
    letter-spacing: 0.13rem;
  }
}

@media print,screen and (max-width: 380px){
  .hero__copyInner{
    top: 12vh;
    gap: 0.5rem;
  }

  .hero__copy{
    font-size: 1.3rem;
    line-height: 2rem;
    letter-spacing: 0.2em;
  }

  .hero__copyLogo{
    width: 3.3rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. intro
/* (Pairiaは横浜発の恋活相談所です。・・・)
/* ---------------------------------------------------------------------------------------------------------------- */

.intro{
  position: relative;
}

.intro__wrap{
  width: 100%;
  height: auto;
  padding: 7.5rem 1.42rem 0;
}

.intro__txt{
  font-family: var(--font-jp-gothic);
  font-size: 1rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: 0.15rem;
  text-align: center;
  color: var(--color-navy);
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. worries
/* (こんなお悩みはありませんか？)
/* ---------------------------------------------------------------------------------------------------------------- */

.worries{
  position: relative;
  width: 100%;
  height: auto;
}

.worries__wrap{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 2.0rem;
  margin: 8.6rem 1.25rem 0;
}

.worries__inner{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 3.3rem;
}

.worries__imgBox{
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.worries__imgBox:nth-child(even){
  flex-direction: row-reverse;
}

.worries__imgBox:nth-child(even) .worries__speechBubble img{
  transform: scaleX(-1);
}

.worries__illust{
  width: 12.5rem;
  height: 12.5rem;
}

.worries img{
  object-fit: contain;
}

.worries__speechBubble{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.11188rem;
  height: 13rem;
}

.worries__speechBubble figcaption{
  position: relative;
  top: -0.45rem;
  color: var(--color-navy);
  text-align: start;
  font-family: var(--font-jp-gothic);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45rem;
  letter-spacing: 0.08rem;
  writing-mode: vertical-rl;
  z-index: 1;
}

.worries__speechBubble img{
  position: absolute;
  inset: 0;
  z-index: -1;
}

.worries__imgBox:nth-child(3) .worries__speechBubble{
  width: 6.11188rem;
  height: 13rem;
}

/* -------- SP -------- */
@media print,screen and (max-width: 1100px){
  .worries__inner{
    gap: 2rem;
  }

  .worries__illust{
    width: 12rem;
    height: 12rem;
  }
}

@media print,screen and (max-width: 450px){
  .worries__wrap{
    gap: 1.9rem;
  }

  .worries__inner{
    gap: 1.8rem;
  }

  .worries__imgBox{
    gap: 1rem;
  }

  .worries__illust{
    width: 11rem;
    height: 11rem;
  }

  .worries__speechBubble{
    height: 11.5rem;
  }

  .worries__speechBubble figcaption{
    top: -0.45rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
    letter-spacing: 0.07rem;
  }

  .worries__imgBox:nth-child(3) .worries__speechBubble{
    width: 5rem;
    height: 13.5rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. about
/* (Pairiaはそんな方のための恋活相談所です・・・)
/* ---------------------------------------------------------------------------------------------------------------- */

.about{
  position: relative;
  width: 100%;
  height: auto;
}

.about__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 2.5rem;
  margin: 6.3rem 2.5rem 0;
  z-index: 1;
}

.about__wrap hgroup::before{
  content: url("../img/common/dotted-line.svg");
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.about__inner{
  position: relative;
}

.about__bg{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12.5625rem;
  height: 17.4375rem;
  opacity: 0.1;
  transform: translate(-50%, -50%);
  z-index: -1;
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. notSearch
/* (検索しないという選択。・・・)
/* ---------------------------------------------------------------------------------------------------------------- */

.notSearch{
  position: relative;
  width: 100%;
  height: auto;
  z-index: 100;
}

.notSearch__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 2.5rem;
  margin: 8.4rem 0;
  padding: 0.5rem 1.25rem 1.3rem;
  background: var(--color-navy);
}

.notSearch::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 4.5rem;
  transform: translate(-50%, -65%);
  width: 150%;
  height: 220px;
  background: var(--color-navy);
  border-radius: 50%;
  border: 0.6rem solid var(--color-lightBlue);
}

.notSearch::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4.5rem;
  transform: translate(-50%, 65%);
  width: 150%;
  height: 220px;
  background: var(--color-navy);
  border-radius: 50%;
  border: 0.6rem solid var(--color-lightBlue);
  z-index: -1;
}

.notSearch__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.7rem;
}

.notSearch__copy{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: 0.04375rem;
}

.notSearch__figure{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 3.6rem;
}

.notSearch__figure figure div{
  width: 7.5rem;
  height: auto;
  aspect-ratio: 1/1;
  margin-bottom: 0.5rem;
}

.notSearch__figure figure{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

.notSearch__figure figure figcaption{
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: 0.04375rem;
}

.notSearch__figure figure figcaption span{
  display: inline-block;
  margin-bottom: 0.8rem;
  color: var(--color-yellow);
  text-align: center;
  font-feature-settings: 'halt' on;
  font-family: var(--font-jp-gothic);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.2275rem;
}

/* -------- table -------- */
.notSearch__comparison{
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 1.3rem;
  margin: 1.5rem 1.25rem 0;
}

.notSearch__comparison h3{
  color: var(--color-white);
  text-align: center;
  font-feature-settings: 'halt' on;
  font-family: var(--font-jp-gothic);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.195rem;
}

.notSearch__table{
  position: relative;
  width: 100%;
  height: auto;
  padding: 0.7rem;
  border-radius: 1.5625rem;
  background: var(--color-white);
}

.notSearch__table table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.notSearch__table table caption{
  display: none;
}

.notSearch__table table .hidden{
  opacity: 0;
}

.notSearch__table th,
.notSearch__table td{
  width: calc(((100% - 2.5rem) - 1.4rem) / 4);
  height: 4.5rem;
  text-align: center;
  vertical-align: middle;
}

.notSearch__table thead th{
  color: #757575;
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0.04375rem;
  border-bottom: 2px dotted var(--color-blue);
}

.notSearch__table thead th:nth-child(2){
  background: rgba(19, 111, 184, 0.15);
}

.notSearch__table thead .logo img{
  width: 4.1875rem;
  height: 1.3125rem;
}

.notSearch__table tbody th{
  color: var(--color-navy);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.035rem;
}

.notSearch__table tbody tr:not(:last-child){
  border-bottom: 2px dotted var(--color-navy);
}

.notSearch__table th:not(:last-child),
.notSearch__table td:not(:last-child){
  border-right: 2px solid var(--color-navy);
}

.notSearch__table td{
  color: #757575;
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 1.5625rem;
  font-weight: 700;
  line-height: 1.25rem;
  letter-spacing: 0.20313rem;
}

.notSearch__table tbody td:nth-child(2){
  color: var(--color-navy);
  background: rgba(19, 111, 184, 0.15);
}

/* -------- SP -------- */
@media print,screen and (max-width: 576px){
  .notSearch__comparison{
    margin: 1.5rem 0 0;
  }
}

@media print,screen and (max-width: 450px){
  .notSearch__figure figure figcaption span{
    margin-bottom: 0.8rem;
    font-size: 1.6rem;
    line-height: 1.5rem;
    letter-spacing: 0.1rem;
  }

  .notSearch__table tbody th{
    font-size: 0.75rem;
    line-height: 1.2rem;
    letter-spacing: 0.03rem;
  }

  .notSearch__table thead th{
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.03rem;
  }

  .notSearch__table thead .logo img{
    width: 3.8rem;
    height: 1.2rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. features
/* (Pairiaの特徴)
/* ---------------------------------------------------------------------------------------------------------------- */

.features{
  position: relative;
  width: 100%;
  height: auto;
}

.features::before{
  content: "";
  position: absolute;
  top: -130px;
  width: 100%;
  height: 15rem;
  background: var(--color-paleLightBlue);
  z-index: -2;
}

.features__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 1.8rem;
  padding: 0 0 5rem;
  background: var(--color-paleLightBlue);
}

.features__wrap hgroup{
  margin: 0 2.5rem;
}

.features__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.features__inner .features__card:nth-child(odd){
  margin-right: 2.5rem;
  border-radius: 0 1.5625rem 1.5625rem 0;
  background: var(--color-gradient-blue-diagonal);
}

.features__inner .features__card:nth-child(even){
  margin-left: 2.5rem;
  border-radius: 1.5625rem 0 0 1.5625rem;
  background: var(--color-gradient-pink-diagonal);
}

.features__card{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  gap: 1.8rem;
  padding: 4.2rem 2.5rem 3.5rem;
  background-blend-mode: multiply, normal;
}

.features__card p{
  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5625rem;
}

.features__card p .span--s{
  color: var(--color-yellow);
  font-family: var(--font-jp-gothic);
  font-size: 1rem;
  font-weight: 600;
  line-height: 2rem;
}

.features__card p .span--l{
  color: var(--color-yellow);
  font-family: var(--font-jp-gothic);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2rem;
  letter-spacing: 0.18rem;
}

.features__copy{
  display: block;
  color: var(--color-white);
  font-feature-settings: 'halt' on;
  font-family: var(--font-jp-gothic);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 2.3rem;
  letter-spacing: 0.2275rem;
}

.features__copy span{
  display: block;
  margin-bottom: 1.2rem;
  color: var(--color-white);
  font-family: var(--font-en-cursive);
  font-size: 5.3125rem;
  font-weight: 400;
  line-height: 0;
  letter-spacing: 0.79688rem;
}

.features__img{
  position: absolute;
  top: -4.5rem;
  right: -2rem;
  width: 12rem;
  height: auto;
  border-radius: 100%;
  aspect-ratio: 1/1;
}

/* -------- SP -------- */
@media print,screen and (max-width: 450px){
  .features__inner .features__card:nth-child(odd){
    margin-right: 1.25rem;
  }

  .features__inner .features__card:nth-child(even){
    margin-left: 1.25rem;
  }

  .features__card p .span--l{
    font-size: 1.6rem;
    letter-spacing: 0.15rem;
  }

  .features__img{
    top: -4rem;
    right: -2rem;
    width: 11rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. counselors
/* (カウンセラー紹介)
/* ---------------------------------------------------------------------------------------------------------------- */

.counselors{
  position: relative;
  width: 100%;
  height: auto;
}

.counselors__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 1.8rem;
  padding: 2.5rem 2.5rem 5rem;
  background: var(--color-paleLightBlue);
}

.counselors hgroup{
  width: 100%;
}

.counselors__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* card counselors */
.card__counselors{
  position: relative;
  width: 100%;
  height: auto;
}

.card__counselors .inner{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  padding: 1.88rem;
  border-radius: 1.5625rem;
  background: var(--color-white);
  box-shadow: 0 4px 8px 0 rgba(28, 52, 94, 0.15);
}

.card__counselors .head{
  display: grid;
  grid-template-columns: 30% 1fr;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--color-navy) 2px dashed;
}

.card__counselors .body{
  display: grid;
  grid-template-columns: 1fr;
}

.card__counselors .icon{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
}

.card__counselors .icon svg{
  width: 250px;
  height: auto;
}

.card__counselors .profile{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-bottom: 1.3rem;
  margin-bottom: 1.5rem;
  border-bottom: var(--color-navy) 2px dashed;
}

.card__counselors .profile ul{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
}

.card__counselors .profile ul li span{
  position: relative;
  display: inline-block;
  margin-left: 0.9rem;
  font-weight: 700;
  color: var(--color-navy);
}

.card__counselors .profile ul li span::before{
  content: "";
  position: absolute;
  top: 0.68rem;
  left: -0.9rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background-color: var(--color-navy);
}

.card__counselors .head .name strong{
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.13125rem;
}

.card__counselors .comment{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

/* svgの色変更（男性・女性） */
.man{
  filter: brightness(0) saturate(100%) invert(42%) sepia(70%) saturate(322%) hue-rotate(176deg) brightness(95%) contrast(91%);
}

.woman{
  opacity: 0.8;
  filter: brightness(0) saturate(100%) invert(49%) sepia(65%) saturate(1320%) hue-rotate(309deg) brightness(96%) contrast(103%);
}


/* -------- SP -------- */
@media print,screen and (max-width: 380px){
  .counselors hgroup h2{
    font-size: 1.55rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. workFlow
/* (ご利用の流れ)
/* ---------------------------------------------------------------------------------------------------------------- */

.workFlow{
  position: relative;
  width: 100%;
  height: auto;
}

.workFlow__wrap{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 5rem;
  padding: 5rem 2.5rem;
}

.workFlow__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
}

.workFlow__card,
.workFlow__card--white{
  position: relative;
  gap: 0.6rem;
  padding: 1.88rem;
  border-radius: 1.5625rem;
  background: var(--color-white);
  box-shadow: 0 4px 8px 0 rgba(28, 52, 94, 0.15);
}

.workFlow__card::before{
  content: url("../img/common/dotted-line.svg");
  position: absolute;
  top: -3.5rem;
  left: 50%;
  z-index: 10;
}

.workFlow__card--white::before{
  content: url("../img/common/dotted-line-white.svg");
  position: absolute;
  top: -3.5rem;
  left: 50%;
  z-index: 10;
}

.workFlow__card:first-child::before{
  content: none;
}

.workFlow__card small{
  position: absolute;
  top: -1.5rem;
  color: var(--color-blue);
  text-align: center;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2.25rem;
  text-transform: uppercase;
}

.workFlow__card--white small{
  position: absolute;
  top: -1.5rem;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 2.25rem;
  text-transform: uppercase;
}

.workFlow__card h3,
.workFlow__card--white h3{
  margin-bottom: 0.6rem;
  color: var(--color-pink);
  font-family: var(--font-jp-gothic);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.16875rem;
}

.workFlow__img--right01{
  position: absolute;
  top: -3.5rem;
  right: 0;
  width: 6.6875rem;
  height: auto;
}

.workFlow__img--right02{
  position: absolute;
  top: -5rem;
  right: 0;
  width: 4.8rem;
  height: auto;
}

.workFlow__img--left{
  position: absolute;
  bottom: -5.5rem;
  left: 0;
  width: 5.2rem;
  height: auto;
}

.bg-right::after{
  content: "";
  position: absolute;
  inset: -12rem 0 0 -1.25rem;
  width: calc(100% + 3.75rem);
  height: 27.3125rem;
  border-radius: 13.65625rem 0 0 13.65625rem;
  background: var(--color-gradient-blue);
  z-index: -1;
}

.bg-left::after{
  content: "";
  position: absolute;
  inset: -11rem 0 0 -3.75rem;
  width: calc(100% + 3.75rem);
  height: 27.3125rem;
  border-radius: 0 13.65625rem 13.65625rem 0;
  background: var(--color-gradient-blue);
  z-index: -1;
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 07. faq
/* (よくあるご質問)
/* ---------------------------------------------------------------------------------------------------------------- */

.faq{
  position: relative;
  width: 100%;
  height: auto;
}

.faq__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  width: 100%;
  height: auto;
  padding: 5rem 2.5rem;
  background-color: var(--color-gray);
}

.faq__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.faq__card{
  transition: var(--transition-all);
}

.faq__card summary{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.25rem;

  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0.0875rem;

  border-radius: 0.3rem;
  background: var(--color-primaryBlue);
  transition: var(--transition-all);
}

.faq__card summary .span01{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
}

.faq__card summary .question{
  display: inline;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1875rem;
  letter-spacing: 0.1875rem;
}

.faq__card summary .close{
  display: inline;
  margin-top: 0.35rem;
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-en);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.875rem;
  letter-spacing: 0.2625rem;
  transform: rotate(45.506deg);
  transition: var(--transition-all);
}

.faq__content{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease,opacity .25s ease;
}

.faq__content > *{
  overflow: hidden;
  min-height: 0;
}

.faq__card[open] .faq__content{
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq__card p{
  display: flex;
  gap: 0.6rem;
  padding: 1.56rem 1.25rem;
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: 0.04375rem;
  text-align: justify;

  border-radius: 0.3rem;
  background: var(--color-white);
}

.faq__card p span{
  display: inline;
  color: var(--color-pink);
  text-align: center;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.1875rem;
  letter-spacing: 0.1875rem;
}

/* hover */
.faq__card:hover summary,
.faq__card:focus summary{
  font-weight: 600;
  background: var(--color-blue);
}

/* open */
.faq__card[open] summary{
  font-weight: 600;
  border-radius: 0.3rem 0.3rem 0 0;
  background: var(--color-blue);
}

.faq__card[open] .close{
  transform: rotate(0deg);
}

.faq__card[open] p{
  border-radius: 0 0 0.3rem 0.3rem;
}

/* -------- SP -------- */
@media print,screen and (max-width: 450px){
  .faq__card summary{
    gap: 0.5rem;
    padding: 0.8rem 0.8rem;

    font-size: 0.875rem;
    line-height: 1.125rem;
    letter-spacing: 0.0875rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 08. application
/* (お申し込み・SNSリンクボタン)
/* ---------------------------------------------------------------------------------------------------------------- */

.application{
  position: relative;
  width: 100%;
  height: auto;
}

.application__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 4.5rem;
  margin: 5rem 2.5rem;
}

.application__sns .txt__blue{
  color: var(--color-navy);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.11375rem;
}

/* line */
.application__lineBox{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-bottom: 2.1rem;
  margin-bottom: 1.8rem;
  border-bottom: var(--color-navy) 2px dashed;
}

.application__line{
  position: relative;
  z-index: 100;
}

.application__line a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  padding: 1.1rem 2.6rem 1rem;
  border-radius: 6.6875rem;
  border: 2px solid #06C755;
  background: var(--color-white);
  box-shadow: var(--boxShadow-gradientMain);
  transition: var(--transition-all);
  z-index: 100;
}

.application__line a::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--color-gradient-main);
  opacity: 0.6;
  filter: blur(6px);
  pointer-events: none;
  transition: var(--transition-all);
  z-index: -1;
}

.application__line a:hover,
.application__line a:focus{
  background-color: #dcf8e7;
}

.application__line a .icon{
  display: flex;
  align-items: center;
  width: 2.8rem;
  height: auto;
  aspect-ratio: 1/1;
}
.application__line a .logo{
  width: 5.625rem;
  height: 1.8125rem;
}

.application__line a .txt{
  color: #06C755;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5625rem;
  letter-spacing: 0.0875rem;
  padding-top: 0.3rem;
}

/* insta X */
.application__instaX{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

.btn__insta,
.btn__x{
  position: relative;
  width: 100%;
  height: auto;
  z-index: 100;
}

.btn__insta{
  margin-top: 0.5rem;
}

.btn__insta a,
.btn__x a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.5rem;
  border-radius: 6.6875rem;
  box-shadow: var(--boxShadow-gradientMain);
  transition: var(--transition-all);
  z-index: 100;
}

.btn__insta a{
  background: var(--color-pink);
}

.btn__insta a:hover,
.btn__insta a:focus{
  background: #fba0ba;
}

.btn__x a{
  background: var(--color-navy);
}

.btn__x a:hover,
.btn__x a:focus{
  background: #80c2f4;
}

.btn__insta a::after,
.btn__x a::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-gradient-main);
  opacity: 0.7;
  filter: blur(6px);
  pointer-events: none;
  z-index: -1;
}

.btn__insta a .leftBox,
.btn__x a .leftBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: auto;
  padding-left: 2rem;
}

.btn__insta a .icon,
.btn__x a .icon{
  display: flex;
  align-items: center;
  width: 1.5625rem;
  height: auto;
  aspect-ratio: 1/1;
}

.btn__insta a .txt,
.btn__x a .txt{
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5625rem;
  letter-spacing: 0.04375rem;
}

.btn__insta a .arrows,
.btn__x a .arrows{
  display: flex;
  align-items: center;
  width: 0.5625rem;
  height: 0.875rem;
  transition: var(--transition-all);
}

/* -------- SP -------- */
@media print,screen and (max-width: 768px){
  .btn__insta a .leftBox,
  .btn__x a .leftBox{
    justify-content: center;
  }
}

@media print,screen and (max-width: 450px){
  .application__wrap{
    gap: 3rem;
    margin: 5rem 2.5rem;
  }

  .application__line a{
    gap: 1rem;
    padding: 1.1rem 1.1rem 1rem 1.5rem;
  }

  .application__line a .icon{
    width: 2rem;
  }
  .application__line a .logo{
    width: 4.8rem;
    height: 1.55rem;
  }
  .application__line a .txt{
    padding-top: 0.3rem;
  }

  .btn__insta a .leftBox,
  .btn__x a .leftBox{
    justify-content: flex-start;
    gap: 0.8rem;
    padding-left: 0;
  }

  .btn__insta a .txt,
  .btn__x a .txt{
    font-size: 0.8rem;
    letter-spacing: 0.03rem;
  }
}

@media print,screen and (max-width: 380px){
  .btn__insta a,
  .btn__x a{
    gap: 0.2rem;
    padding: 0.8rem 1rem;
  }
}


/* -------- お申し込みボタン群 PC右サイド -------- */
.application--pcRight{
  position: fixed;
  top: 0;
  right: 0;
  width: calc((100% - 470px) / 2);
  height: 100vh;
  z-index: 0;
}

.application--pcRight__wrap{
  position: relative;
  top: -3rem;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 4.5rem;
  width: 100%;
  height: 100%;
  margin: 0 0 0 auto;
  padding: 2.5rem 10rem;
  z-index: 0;
}

.application--pcRight__wrap .txt__emphasis{
  color: var(--color-white)!important;
}

.application--pcRight__wrap .txt__emphasis::before,
.application--pcRight__wrap .txt__emphasis::after{
  background-color: var(--color-white)!important;
}

.application--pcRight__sns .txt__white{
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.11375rem;
}

.application--pcRight__lineBox{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-bottom: 2.1rem;
  margin-bottom: 1.8rem;
  border: none;
}

.application--pcRight__line{
  position: relative;
  z-index: 100;
}

.application--pcRight__line a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.3rem;
  padding: 1.1rem 2.6rem 1rem;
  border-radius: 6.6875rem;
  border: 2px solid #06C755;
  background: var(--color-white);
  box-shadow: var(--boxShadow-gradientMain);
  transition: var(--transition-all);
  z-index: 100;
}

.application--pcRight__line a::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--color-gradient-main);
  opacity: 0.6;
  filter: blur(6px);
  pointer-events: none;
  transition: var(--transition-all);
  z-index: -1;
}

.application--pcRight__line a:hover,
.application--pcRight__line a:focus{
  background-color: #dcf8e7;
}

.application--pcRight__line a .icon{
  display: flex;
  align-items: center;
  width: 2.8rem;
  height: auto;
  aspect-ratio: 1/1;
}
.application--pcRight__line a .logo{
  width: 5.625rem;
  height: 1.8125rem;
}
.application--pcRight__line a .txt{
  color: #06C755;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5625rem;
  letter-spacing: 0.0875rem;
  padding-top: 0.3rem;
}

.application--pcRight__instaX{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

/* -------- PC（縦幅） -------- */
@media print,screen and (max-height: 800px){
  .application--pcRight .btn__application--l{
    display: none;
  }
}

/* -------- SP -------- */
@media print,screen and (max-width: 1920px){
  .application--pcRight__wrap{
    gap: 2rem;
    padding: 2.5rem 6rem;
  }

  .application--pcRight__lineBox{
    gap: 1.25rem;
    padding-bottom: 2.1rem;
    margin-bottom: 0;
  }
}

@media print,screen and (max-width: 1600px){
  .application--pcRight__wrap{
    padding: 2.5rem;
  }
}

@media print,screen and (max-width: 1440px){
  .application--pcRight__wrap{
    padding: 1.5rem;
  }
}

@media print,screen and (max-width: 1300px){
  .application--pcRight{
    display: none;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 09. banner
/* ---------------------------------------------------------------------------------------------------------------- */

.banner{
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: auto;
  z-index: 1;
}

.banner__wrap{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc((100% - 470px) / 2);
  height: 6.25rem;
  padding: 1rem 2.5rem;
  background: linear-gradient(90deg, #567AB0 0%, #004D88 100%);
  box-shadow: var(--boxShadow-pinkTop);
  transition: var(--transition-all);
}

.banner__wrap::before{
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0) 60%,
    transparent 100%
  );
  pointer-events: none;
  will-change: left;
  z-index: 1;
}

.banner__wrap:hover::before,
.banner__wrap:focus::before{
  animation: shine 1.4s ease forwards;
}

.banner__wrap::after{
  content: url("../img/common/arrows_banner.svg");
  position: absolute;
  right: 0;
  bottom: -0.5rem;
}

@keyframes shine{
  0%   {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}

.banner__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 12vw);
}

.banner__txtBox{
  position: relative;
  width: 100%;
  height: auto;
}

.banner__txt{
  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.09rem;
}

.banner__txt .spanL{
  display: inline-block;
  width: 100%;
  max-width: calc(100% - 3.8rem);
  margin: 0.5rem 0 0.4rem;
  padding: 0.3rem 2.5rem 0.4rem 0.5rem;
  border-radius: 0.3125rem;
  background-color: var(--color-white);
}

.banner__txt .spanL strong{
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.1rem;
  background: var(--color-gradient-main);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.banner__txt .spanM{
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
}

.banner__btnBox{
  position: absolute;
  top: 0.8rem;
  right: 7.5vw;
}

.banner__btn{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.75rem;
  height: 4.75rem;
  padding: 0 0 0.09rem 0.09rem;

  color: #FFF;
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  letter-spacing: 0.1rem;

  border-radius: 100%;
  border: 2px solid transparent;
  background: linear-gradient(var(--color-pink), var(--color-pink)) padding-box,var(--color-gradient-gold) border-box;
  box-shadow: 0 10px 11px var(--sds-size-blur-100) var(--Miscellaneous-Bar-border, rgba(255, 255, 255, 0.15)) inset;
}

/* -------- SP -------- */
@media print,screen and (max-width: 1920px){
  .banner__inner{
    width: calc(100% - 8vw);
  }

  .banner__btnBox{
    right: 6.5vw;
  }
}

@media print,screen and (max-width: 1600px){
  .banner__inner{
    width: 100%;
  }

  .banner__btnBox{
    right: 2.5rem;
  }
}

@media print,screen and (max-width: 1300px){
  .banner{
    justify-content: center;
    z-index: 10000;
  }

  .banner__wrap{
    width: 470px;
  }
}

@media print,screen and (max-width: 768px){
  .banner{
    opacity: 0;
    animation: content .8s .4s forwards;
  }

  .banner__wrap{
    width: 100%;
  }

  .banner__inner{
    width: calc(100% - 26vw);
  }

  .banner__txt .spanL{
    padding: 0.3rem 4.75rem 0.4rem 0.5rem;
  }

  .banner__btnBox{
    right: 26vw;
  }
}

@media print,screen and (max-width: 576px){
  .banner__inner{
    width: 100%;
  }

  .banner__txt .spanL{
    padding: 0.3rem 2.5rem 0.4rem 0.5rem;
  }

  .banner__btnBox{
    right: 2.5rem;
  }
}

@media print,screen and (max-width: 450px){
  .banner__wrap{
    padding: 1rem 1.8rem;
  }

  .banner__inner{
    width: 100%;
  }

  .banner__txt .spanL{
    padding: 0.3rem 1rem 0.4rem 0.5rem;
  }

  .banner__btnBox{
    right: 1.8rem;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 10. bg
/* (PC時の背景)
/* ---------------------------------------------------------------------------------------------------------------- */

.bg--pc{
  position: fixed;
  overflow: hidden;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.bg--pc::before{
  content: "";
  position: relative;
  position: absolute;
  inset: 0;
  background: url("../img/common/bg_pc.webp") no-repeat top center;
  background-size: 100% auto;
}

/* -------- SP -------- */
@media print,screen and (max-width: 1440px){
  .bg--pc::before{
    background-size: 100% auto;
  }
}

@media print,screen and (max-width: 768px){
  .bg--pc{
    display: none;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 11. lower
/* (下層ページ)
/* ---------------------------------------------------------------------------------------------------------------- */

.lower{
  position: relative;
  width: 100%;
  height: auto;
}

.lower__wrap{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 3.5rem;
  margin: 5rem 2.5rem 0;
}

.lower__head{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}

.lower__body{
  display: grid;
  grid-template-columns: 1fr;
  gap: 4.5rem;
}

/* -------- 記事 -------- */
.lower__article{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.lower__articleWrap{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.lower__articleInner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* -------- 表スタイル -------- */
.lower__table{
  position: relative;
  width: 100%;
  height: auto;
  text-align: start;
}

.lower__table caption{
  margin-bottom: 1rem;
  text-align: start;
}

.lower__table tr{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.6rem;
  border-bottom: var(--color-navy) 1.5px dashed;
}

.lower__table tr:first-child{
  border-top: var(--color-navy) 3px solid;
}
.lower__table tr:last-child{
  border-bottom: var(--color-navy) 3px solid;
}

.lower__table tr th{
  width: 5.8rem;
  color: var(--color-navy);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.035rem;
}

.lower__table tr td{
  width: calc(100% - 5.8rem);
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.125rem;
  letter-spacing: 0.04375rem;
}

/* -------- SP -------- */
@media print,screen and (max-width: 1100px){
  .lower__wrap{
    margin: 6rem 2.5rem 0;
  }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 12. form
/* (お申し込みフォーム)
/* ---------------------------------------------------------------------------------------------------------------- */

.form{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  width: 100%;
  height: auto;
}

.form__item{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: flex-start;
  gap: 0.4rem;
}

.form__head{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  height: auto;
}

.form__body{
  width: 100%;
  height: auto;
}

.form__head .form__label{
  position: relative;
  margin-left: 1rem;
  color: var(--color-navy);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.11375rem;
}

.form__head .form__label::before{
  content: "";
  position: absolute;
  top: 0.45rem;
  left: -1rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--color-navy);
  border-radius: 100%;
}

.form__body .form__label,
.form__body .form__label{
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.11375rem;
}

.form__required{
  margin-top: 0.08rem;
  padding: 0.2rem 0.6rem 0.25rem;
  color: var(--color-white);
  font-family: var(--font-jp-gothic);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 0.625rem;
  letter-spacing: 0.03125rem;
  background-color: var(--color-pink);
  border-radius: 6.25rem;
}

.form__input,
.form__textarea{
  width: 100%;
  height: auto;
  padding: 0.6rem 0.94rem;
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: 0.04375rem;
  border-radius: 0.3125rem;
  background-color: var(--color-white);
  border: var(--color-lightBlue) solid 1.5px;
}

.form__input::placeholder,
.form__textarea::placeholder{
  color: rgba(117, 147, 191, 0.30);
}

.form__textarea{
  height: 10rem;
}

/* ラジオボタン */
.form__radioGroup--flex{
  display: flex;
  gap: 0.94rem;
}

.form__radioGroup--block{
  display: grid;
  gap: 0.2rem;
}

.form__radio{
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.08rem;
}

.form__radio input{
  position: relative;
  top: 0.1rem;
  left: -0.1rem;
}

.form__radio input[type="radio"] {
  accent-color: var(--color-pink);
}

/* セレクトボックス */
.form__selectWrap{
  position: relative;
}

.form__selectWrap::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid var(--color-navy);
  border-bottom: 1.5px solid var(--color-navy);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.form__select{
  width: 100%;
  height: auto;
  padding: 0.6rem 0.94rem;
  color: var(--color-black);
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: 0.04375rem;
  border-radius: 0.3125rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--color-white);
  border: var(--color-lightBlue) solid 1.5px;
}

/* 下部 */
.form__footer{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  gap: 1.5rem;
}

.form__privacyNote{
  color: var(--color-blue);
  text-align: justify;
  font-family: var(--font-jp-gothic);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25rem;
  letter-spacing: 0.0375rem;
}

.form__agreement{
  text-align: center;
}

.form__agreement span{
  color: var(--color-navy);
  text-align: center;
  font-family: var(--font-jp-gothic);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5625rem;
  letter-spacing: 0.04375rem;
}

.form__agreement input{
  position: relative;
  top: 0.1rem;
  left: -0.2rem;
}

/* 確認画面へボタン */
.form__submit{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1;
  gap: 1.7rem;
  margin: 1.5rem auto 2.5rem;
  text-align: center;
}

.form__submitBtn{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.65rem 3.5rem;
  width: 50%;

  font-family: var(--font-jp-gothic);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.02438rem;
  text-align: center;
  white-space: nowrap;
  color: var(--color-white);
  border-radius: 0.3125rem;
  background: var(--color-gradient-main);
  box-shadow: var(--boxShadow-black);
  z-index: 0;
}

.form__submitBtn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-gradient-mainReverse);
  opacity: 0;
  transition: var(--transition-all);
  z-index: -1;
}

.form__submitBtn > *{
  position: relative;
  z-index: 1;
}

.form__submitBtn:hover::before,
.form__submitBtn:focus::before{
  opacity: 1;
}

.form__submitBtn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

/* 戻るボタン */
.form__backBtn{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.65rem 3.5rem;
  width: 50%;
  font-family: var(--font-jp-gothic);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.02438rem;
  text-align: center;
  white-space: nowrap;
  color: var(--color-white);
  border-radius: 0.3125rem;
  background-color: #757575;
  box-shadow: var(--boxShadow-black);
  transition: var(--transition-all);
  z-index: 0;
}

.form__backBtn:hover,
.form__backBtn:focus{
  background-color: var(--color-black);
}

/* TOPへ戻るボタン */
.form__backTopBtn{
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.65rem 3.5rem;
  width: 100%;
  font-family: var(--font-jp-gothic);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25rem;
  letter-spacing: 0.02438rem;
  text-align: center;
  white-space: nowrap;
  color: var(--color-white);
  border-radius: 0.3125rem;
  background-color: var(--color-navy);
  box-shadow: var(--boxShadow-black);
  transition: var(--transition-all);
  z-index: 0;
}

.form__backTopBtn:hover,
.form__backTopBtn:focus{
  background-color: var(--color-pink);
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* 13. animation
/* ---------------------------------------------------------------------------------------------------------------- */

/* -------- ページ遷移アニメーション -------- */
.page-transition{
  position: fixed;
  inset: 0;
  background: var(--color-cream);
  animation: cover 1.2s forwards;
  pointer-events: none;
  z-index: 99999;
}

@keyframes cover{
  to{
    opacity:0;
    visibility:hidden;
  }
}

@keyframes content{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:none;
  }
}


/* -------- スクロールフェードアップアニメーション -------- */
.js-fadeUp{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s ease, transform .8s ease;
}

.js-fadeUp.is-show{
  opacity: 1;
  transform: translateY(0);
}