@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:500,700&display=swap&subset=japanese);

/* =============================================
 全体設定
============================================= */

html {
  line-height: 1.5;
  background-color: #d8d8d8
}
html * {
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
}
body {
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  background-color: #F9F9F9;
  color: #2A2A2A;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  max-width: 600px;
  width: 100%;
}
html, body {
  min-height: 100vh;
}
.header_text {
  vertical-align: middle;
  display: inline-block;
  font-size: 16px;
  color: #fff;
}
@media (max-width: 480px) {
  .header_text {
    font-size: 12px;
  }
}
ul {
  list-style: none
}
a img {
  border: none
}
a {
  color: #49BFAC;
  text-decoration: inherit
}
*,
::after,
::before {
  box-sizing: border-box
}
button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}
.error-text{
  color:#A90808;
  font-size:14px;
  line-height:1.4;
  margin: 6px 0 0;
}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);
  overflow:hidden;white-space:nowrap;
}

/* =============================================
 トップページ
============================================= */

#sec1 {
  width: 100%;
}
.topTextBox{
  width: 100%;
}
.topTextBox img{
  display: block;
  width: 100%;
  height: auto;
}
/* =============================================
  トップページ＞gleasinの特徴
 ============================================= */
.features h2 {
  font-size: 26px;
  font-weight: 300;
  width: 90%;
  margin: 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features h2 img {
  width: 130px;
}
.features ul {
  background: linear-gradient(
    -210deg,
    #3DACC8 0%,
    #49BFAC 80%
  );
  padding: 10px;
  border-radius: 28px;
  margin: 0 20px 40px;
}
@media (max-width: 480px) {
  .features ul {
    margin: 0 20px 30px;
  }
}
.features-item{
  display: flex;
  background-color: #FFF;
  margin: 0 10px 10px;
  padding: 10px 10px 10px 15px;
}
/* ✅ スマホだけ：サブ文だけを「チェックの下」から開始 */
@media (max-width: 480px) {
  .features-img {
    width: 20px !important;
    padding-top: 6px !important;
  }
  /* 横並びは維持（見出しをチェック横に残す） */
  .features-item{
    display: flex;
    align-items: flex-start;
  }

  /* テキスト側を“2段”にする */
  .features-text{
    display: flex;
    flex-wrap: wrap;   /* ←これがポイント */
    padding-left: 12px !important; /* PCの 20px を少し詰めるなら */
  }

  /* 見出しは1行目（チェック横） */
  .features-text-main{
    font-size: 20px !important;
    width: auto;
  }

  /* サブ文だけ2行目へ（チェックの下からスタート） */
  .features-text-sub{
    font-size: 16px;
    width: 100%;
    margin-top: 10px;
    padding-left: 0 !important;
  }
  .features-text-sub br {
    display: none;
  }
  .features h2 img {
    width: 90px;
  }
}
.features-text{  
  font-size: 20px;
  padding-left: 20px;
}
.features-text-main {
  font-size: 24px;
}
.features-text span{  
  background: linear-gradient(
    180deg,
    #FFB26D 30%,
    #ED8C37 50%,
    #DA6600 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.features-text-sub {
  padding-left: 20px;
}
.features-img{
  width: 40px;
  padding-top: 8px;
}
.features-item-first {
  margin-top: 10px;
  margin-bottom: 20px;
}
.features-item-second {
  margin-bottom: 20px;
}

/* =============================================
  トップページ＞こんな方にオススメです
 ============================================= */
 .worries {
  font-size: 1.5rem;
  font-weight: bold;
  padding-bottom: 0;
  margin-bottom: 0;
 }
 .worries h2 {
  width: 90%;
  margin: 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .worries h2 span {
  color: #e47911;
}
@media (max-width: 480px) {
  .worries h2 {
    margin: 0px auto 30px;
  }
}
.worries-img-first {
  width: 100%;
}
.worries-img-second {
  width: 50%;
  display: block;
  margin: 0 auto;
  vertical-align: bottom;
}
.worries-text {
  text-align: center;
  line-height: 1.4;
  margin-top: 40px;
}
.worries-text img {
  display: inline-block;
  vertical-align: text-bottom;
  height: 1.3em;
}
.worries-text br {
  display: block;
  margin-top: 8px;
  content: "";
}
.worries-text span{
  background: linear-gradient(
    180deg,
    #FFB26D 30%,
    #ED8C37 50%,
    #DA6600 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (max-width: 480px) {
  .worries-text{
    margin-top: 10px;
    font-size: 16px;
  }
}

/* =============================================
  トップページ＞設問１
 ============================================= */

.conditions{
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  background-color: #F2FFFE;
}
.conditions dl{
  display: inline-block;
  width: min(420px, 100%);
  text-align: left;
}
.conditions h2 span {
 color: #FA8D2C;
 font-size: 48px;
}
.formHead {
  display: flex;
  justify-content: center;
}
#sec1 dd {
  display: flex;
  justify-content: center;
}
.formHead img {
  width: auto;
  height: 30px;
}
.formHead div {
  font-size: 24px;
  border-bottom: solid 1px #077871;
  padding-left: 5px;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight:lighter;
  cursor: pointer;
  margin-bottom: 10px;
}
.checkbox input[type="checkbox"] {
  display: none;
}
.checkbox .box {
  width:15px;
  height: 15px;
  background: #ddd;
  border: 2px solid #c5c5c5;
  display: inline-block;
  position: relative;
  transition: 0.2s ease;
}
.checkbox input[type="checkbox"]:checked + .box {
  background: #3DACC8;
  border-color: #3DACC8;
}
.checkbox input[type="checkbox"]:checked + .box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 0px;
  width: 6px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .formHead div {
    font-size: 16px;
  }
  .checkbox {
    font-size: 16px;
  }
}
header{
  position: relative;
  background: #000;
  z-index: 50;
}
header .logo{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  width: min(600px, 100%);
  height: 50px;

  margin: 0;
  background: #000;
  z-index: 1000;

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
}
header .logo img {
  margin-top: 4px;
}
main{
  padding-top: 50px;
}
footer {
  background-color: #000;
  margin-top: auto;
  z-index: 100;
}
footer .wrapper {
  padding: 5px 0;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1
}
footer .wrapper p {
  color: #fff;
}
footer>.wrapper>ul {
  color: #fff;
  padding: 0;
}
footer>.wrapper>ul>li>a {
  color: #fff;
}
.logo>a>img {
  width: 110px;
}
@media (max-width: 480px) {
  .logo>a>img {
    width: 90px;
  }
}
/* 下部固定CTAの高さ分だけ、ページ下部が隠れないようにする（必要なら） */
:root{
  --banner-h: 120px;
  --banner-gap: 0px;
}
.banner_wrapper {
  background-color:#056169;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}
/* 画面下に固定表示する状態 */
.banner_wrapper.is-fixed{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;

  width: 100%;
  max-width: 600px;
}
/* 「ここで止まる」状態（absoluteで指定位置に固定） */
.banner_wrapper.is-stopped{
  position: absolute;
  left: 0;
  bottom: auto;  /* fixedのbottomを無効化 */
}
/* bannerが止まっている時だけ、conditions内の上部に余白を作る */
.conditions.has-stopped-banner h2{
  margin-top: calc(var(--banner-h) + var(--banner-gap) + 60px);
}
@media (max-width: 480px) {
  .conditions.has-stopped-banner h2{
    margin-top: calc(var(--banner-h) + var(--banner-gap) + 0px);
  }
  h2 {
    font-size: 16px !important;
  }
  .conditions h2 span {
    font-size: 36px;
  }
}
.banner {
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  padding-top: 5px;
}
.banner>a>img {
  width: 70%;
  padding: 10px 0px 5px 0px;
}

/* =============================================
 2ページ目（お問い合わせページ）
============================================= */

#sec2>.wrapper,
#sec3>.wrapper,
#sec4>.wrapper {
  margin-top: 40px;
}
#sec2 .formHead,
#sec3 .formHead,
#sec4 .formHead{
  justify-content: center;
}

#sec2 .formHead div,
#sec3 .formHead div,
#sec4 .formHead div {
  text-align: center;
}
h2 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
#sec2, #sec3, #sec4 {
  position: relative;
  isolation: isolate;
  padding: 0px 20px;
}
.formList {
  padding: 0;
}
.item {
  padding: 15px 0 0 0;
}
.prevBtn {
  font-size: 14px;
  color: #737373;
  margin-top: 30px;
  margin-left: 25px;
}
.dli-chevron-round-left {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  position: relative;
  width: 1em;
  height: 1em;
  transform: translateX(25%) rotate(-135deg);
  margin-right: 5px;
}
.dli-chevron-round-left::before {
  top: 0;
    left: 0;
    right: 0;
    height: 0.1em;
}
.dli-chevron-round-left::after {
  top: 0;
    right: 0;
    bottom: 0;
    width: 0.1em;
}
.dli-chevron-round-left::before, .dli-chevron-round-left::after {
  content: '';
    position: absolute;
    background: #737373;
    border-radius: 0.1em;
}
.input {
  text-align: left; 
  padding: 8px;
  height: 50px;
  border-radius: 10px;  
  border: 2px solid #BDBDBD;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: border-color .3s ease-in-out;
  background-color: #fff;
}
.input:hover,
.input:focus {
  outline: none;
  border-color:#3DACC8;
}
input::placeholder {
  text-align: left;
  color: #BDBDBD;
  font-size: 0.75rem;
}
.cta-btn {
  height: 60px;
  background: linear-gradient(
    90deg,
    #3DACC8 0%,
    #49BFAC 100%
  );
  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 24px;
  border-radius: 5px;
  border: 0;
}
@media (max-width: 480px) {
  .cta-btn {
    height: 50px;
    font-size: 20px;
  }
  .formButtons .cta-btn {
    max-width: 200px !important;
  }
}
.input-first,
.input-second {
  display: flex;
  flex-direction: column;
  margin-top:30px;
}
.input-second {
  margin-top: 20px;
}
.formButtons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  padding-bottom: 30px;
}
.formButtons .cta-btn {
  width: 100%;
  max-width: 260px;
}
.formButtons .btnBack {
  align-self: flex-start;
  margin-left: 0;
}
#sec2 .formButtons,
#sec3 .formButtons,
#sec4 .formButtons {
  margin-top: 30px;
}
.input-text {
  font-size: 16px;
}
@media (max-width: 480px) {
  dl.wrapper dd .input-first label, dl.wrapper dd .input-second label, dl.wrapper dd .input-first input, dl.wrapper dd .input-second input{
    width: 260px !important;
  }
  .input-text {
    font-size: 12px;
  }
}
/* ddは中央の箱 */
dl.wrapper dd {
  max-width: 600px;
  margin: 0 auto;
}

/* 入力ブロックは中央に置く */
dl.wrapper dd .input-first,
dl.wrapper dd .input-second {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ブロック自体は中央 */
  margin-bottom: 20px;
}

/* ★ ラベルと入力欄を “同じ幅” にする */
dl.wrapper dd .input-first label,
dl.wrapper dd .input-second label,
dl.wrapper dd .input-first input,
dl.wrapper dd .input-second input {
  width: 100%;
  max-width: 320px;      /* ← 入力欄の見た目の幅に合わせて調整 */
}

/* ラベルの文字を左寄せ */
dl.wrapper dd label {
  text-align: left;
  margin-bottom: 6px;
}
.form-error{
  margin: 10px 0 0;
  text-align: center;
}

/* =============================================
 3ページ目（名前入力ページ）
============================================= */
.privacy {
  font-size: 14px;
  text-align: center;
}
@media (max-width: 480px) {
  .privacy {
    font-size: 10px;
  }
}

/* =============================================
 ５ページ目（Thanksページ）
============================================= */
.thanks-header {
  background: linear-gradient(
    -210deg,
    #3DACC8 0%,
    #49BFAC 80%
  );
  color: #fff;
  padding: 40px 20px 70px;
  position: relative;
  margin: 0 auto;
  max-width: 600px;
  font-weight: bold;
}
.thanks-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 40px;
  background: #fff;
  clip-path: polygon(
    0% 60%,
    50% 0%,
    100% 60%,
    100% 100%,
    0% 100%
  );
}
#sec5 .thanks-header{
  justify-content: center;
  width: 100%;
  margin: 0 auto 20px;
}
.cta-text {
  margin: 20px auto 30px;
  width: 80%;
  font-size: 16px;
}
@media (max-width: 480px) {
  .cta-text {
    font-size: 12px;
  }
}
/* ラウンドロビン（ミーティング）URL設定 */
.meetings-iframe-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.meetings-iframe-container iframe {
  width: 90% !important;
  height: clamp(900px, 120vh, 1400px) !important;
  border: 0 !important;
  display: block;
  margin: 0 auto;
}