/* ===== CSS VARIABLES ===== */
:root {
  --orange: #F78934;
  --orange-light: #FFD280;
  --orange-pale: #FDEFE4;
  --blue: #0F75B7;
  --blue-light:#9AD1FB;
  --blue-dark: #1A5FA0;
  --blue-light: #EBF4FF;
  --gray-bg: #F7F7F7;
  --dark: #1A1A2E;
  --text: #253550;
  --text-light: #666666;
  --white: #FFFFFF;
  --beige:#faf8f5;
  --green:#1ABAB4;
  --green-pale:#faf7f2;
  --green-light:#C2EEE8;
  --yellow: #FEED99;
  --orange-grad: linear-gradient(135deg, #FFA763 0%, #FF6F00 100%);
  --orange-grad-rtl: linear-gradient(to right, rgba(226, 145, 82, 1) 0%, rgba(255, 213, 180, 1) 100%);
  --blue-grad: linear-gradient(to right, rgba(97, 171, 227, 1) 0%, rgba(154, 209, 251, 1) 100%);
}
.orange{
    color: var(--orange);
}
.blue{
  background-color: var(--blue)!important;
  color: var(--yellow);
  font-weight: 700;
  font-size: 24px;
}
.small{
    font-size: 24px;
}
.reverse{
  display: flex;
  flex-flow: row-reverse;
}

.inner{
  width:1400px;
  margin: 0 auto;
}


body{
  background: var(--green-pale);
}
  /* ===== SECTION COMMONS ===== */
 
    .section-ttl-wrap {
      text-align: center;
      margin-bottom: 48px;
    }
 
    .section-ttl {
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      letter-spacing: 0.04em;
    }
 
    .section-ttl--ja {
      font-size: 36px;
      margin-top: 4px;
      font-weight: 700;
    }
 /* ===== HERO ===== */
    .hero {
      height: auto;
      position: relative;
    }

   .hero picture img {
    width: 100%;
    height: auto;
    display: block;
  }

    .hero-inner {
      z-index: 1;
    }

    /* ===== PROBLEMS ===== */
    .problems {
      height: auto;
      position: relative;
      overflow: hidden;
      z-index: 0;
    }
    .problems::before {
      content: '';
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateX(-50%);
      width: 1920px;
      height: 900px;
      background: #D9F2EF;
      border-radius: 50%;
      z-index: -1;
    }
    .problems .inner{
      padding: 3% 0;
    }
    .problems .section-ttl { 
        color: var(--dark); 
        position: relative;
        display: inline-block;
    }

  .problems .section-ttl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -60px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url("../img/icon_h_l.png") no-repeat center / contain;
}

.problems .section-ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: url("../img/icon_h_r.png") no-repeat center / contain;
}
 
    .problems-grid {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 24px;
      margin: 0 auto;
    }
 
    .problem-card {
      background: var(--white);
      height: auto;
      width: 380px;
      border-radius: 12px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      border: 1.5px solid transparent;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
 
    .problem-num {
      width: 100%;
      display: flex;
    }
 
    .problem-num span{
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      font-weight: 700;
      color: var(--white);
      background:var(--orange);
      width:64px;
      height: 64px;
      border-radius: 99px;
    }
    .problem-icon {
      width: 56px; height: 56px;
      background: var(--orange-pale);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 26px;
    }
 
    .problem-text {
      font-size: 24px;
      font-weight: 700;
      line-height: 1.6;
      color: var(--dark);
      text-align: center;
    }
 
    .problem-text-small {
      font-size: 12px;
      color: var(--text-light);
      line-height: 1.7;
    }
 
    /* second row of problem cards */
    .problems-grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      max-width: 760px;
      margin: 24px auto 0;
    }

    /* ===== ABOUT ===== */
    .about {
      padding: 80px 0;
    }

    .about .inner{
        width: 1400px;
        background-color: var(--white);
        background: white;
        border-radius: 24px;
        padding: 56px;
    }
    .flow-images{
      display: flex;
      align-items:center;
      justify-content:center;
    }
    .about-label p{
      text-align: center;
      font-size: 36px;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--text);
    }
    .about-text{
      text-decoration: underline;
      text-decoration-color: var(--blue-light);
      text-decoration-thickness: 4px;
      text-underline-offset: 10px;
    }
    .about .inner p {
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      color: var(--dark);
      line-height: 1.6;
      margin: 0 auto;
      padding: 2% 0!important;
    }
    /* ===== FLOW STEPS ===== */
    .steps-grid {
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      margin-top: 48px;
    }
 
    .step-card {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .step-card p{
      text-align: left!important;
    }

    .step-descreption{
      width:500px;
    }

    .step-num {
      font-size: 40px!important;
      font-weight: 500;
      color: var(--green-light)!important;
      text-align: left;
    }
 
    .step-title {
      font-size: 32px!important;
      font-weight: 700;
      color: var(--green)!important;
      text-align: left;
    }
 
    .step-desc {
      font-size: 18px!important;
      font-weight: 400!important;
      color: var(--text)!important;
      text-align: left;
    }
 
    /* ===== service ===== */
    .service{
      background:var(--green-light);
      .inner{
        padding:80px 0;
      }
    }
    .service h2{
      font-size: 36px;
      background:var(--green);
      color: var(--white);
      border-radius: 99px;
      width: 420px;
      padding: 16px 32px;
      margin:0 auto;
    }
    .service .section-ttl-wrap{
      background: linear-gradient(to bottom, transparent 49%, var(--green) 49%, var(--green) 51%, transparent 51%);
    }
    .service-grid{
      display: flex;
      justify-content: center;
      gap:20px;
    }
    .service .step-card{
      flex-direction: column;
      background-color: var(--white);
      border-radius:32px;
      width: 448px;
      height: 512px;
      padding: 24px;
      gap:20px;
    }
    .service .step-title{
      color: var(--orange)!important;
    }
    .service .step-desc{
      text-align: center;
    }
    .service span{
      font-weight: bold;
    }
    /* ===== flow ===== */
    .flow{
      background:var(--green);
    }
    .flow h2{
      font-size: 56px;
      color: var(--green-light);
    }
    .flow .section-ttl--ja{
      color: var(--white);
    }
    .flow-item{
      background:var(--white);
    }
    /* ===== FLOW ===== */
.flow {
  padding: 80px 0;
}

.flow-list {
  display: flex;
  flex-direction: column;
  width: 1400px;
  gap: 0;
  margin: 0 auto;
}

.flow-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: 16px;
  padding: 32px 24px;
}

.flow-item__left {
  display: flex;
  align-items: center;
  width: 567px;
  gap:20px;
  flex-shrink: 0;
  min-width: 160px;
}

.flow-step {
  font-size: 24px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.1em;
  margin: 0;
}

.flow-num {
  font-size: 64px;
  font-weight: 500;
  color: var(--orange);
  line-height: 1;
  margin: 0;
}

.flow-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
  margin: 8px 0 0;
}

.flow-item__right {
  flex: 1;
  border-left: 1px solid var(--orange);
  padding-left: 40px;
  width: 757px;
}

.flow-desc {
  font-size: 18px;
  color: var(--text);
  line-height: 1.85;
  margin: 0;
}

.flow-arrow {
  text-align: center;
  color: var(--orange);
  font-size: 56px;
  padding: 8px 0;
}

 /* ===== PLAN ===== */
.plan {
  padding: 80px 0;
}

.plan-content {
  background: var(--white);
  border-radius: 24px;
  padding: 56px;
  width: 1400px;
}

.plan .section-ttl-wrap {
  text-align: center;
  margin-bottom: 40px;
}

.plan .section-ttl {
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 20px;
}

.plan .section-ttl-wrap p {
  font-size: 18px;
  color: var(--text);
  line-height: 1.8;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.plan-val {
  display: inline-block;
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  color: var(--white);
  background: var(--green);
  border-radius: 99px;
  padding: 6px 20px;
  margin: 0;
}

.plan-label {
  font-size: 56px;
  text-align: center;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  background: linear-gradient(transparent 60%, rgba(255, 239, 218, 1) 60%);
}

.plan-card .number-desc1 {
  font-size: 13px;
  color: var(--text);
  line-height: 1.85;
  background: var(--gray-bg);
  border-radius: 8px;
  padding: 16px;
  margin: 0;
  height: 346px;
  font-size: 18px;
}

.plan-card ul {
  font-size: 18px;
  color: var(--text);
  line-height: 1.85;
  background: var(--gray-bg);
  border-radius: 8px;
  padding: 16px 16px 16px 32px;
  margin: 0;
  height: 346px;
}

.plan-card ul li {
  margin: 4px 0;
  list-style: disc!important;
}

/* ===== FAQ ===== */
.faq {
  padding: 80px 0;
}
 
.faq .section-ttl-wrap {
  text-align: left;
  margin-bottom: 0;
}
 
.faq .section-ttl-wrap h2::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  margin-right:1%;
}
 
.faq .section-ttl {
  font-size: 28px;
  color: var(--dark);
}
 
.faq .section-ttl--ja {
  margin-top: 6px;
  margin-left: 30px;
  color: var(--green);
  font-size: 12px;
}
 
.faq-list {
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 40px auto 0;
}
 
.faq-item {
  background: transparent;
  border-radius: 0;
  overflow: visible;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 32px 0;
}
 
.faq-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
 
.faq-q {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 20px;
  position: relative;
}
 
.faq-q::after {
  content: '—';
  position: absolute;
  right: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-light);
}
 
.faq-q-icon {
  font-family: 'Prompt', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  display: inline;
}
 
.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.85;
}
 
.faq-a-icon {
  font-family: 'Prompt', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  display: inline;
}
/* ===== lead ===== */
.lead{
  margin:80px auto;
  width:100%;
  max-width:1200px;
  display:grid;
  grid-template-rows:1fr 1fr;
  box-sizing:border-box;
  p{
    padding:1em;
    margin:0;
    border-style:solid;
    border-color:#ff9c1A;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  p:first-of-type{
    font-size:36px;
    background-color:#FF9C1A;
    color:#fff;
    font-weight:bold;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    border-width:4px 4px 0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  p:last-of-type{
    border-width:0 4px 4px;
    border-bottom-left-radius:25px;
    border-bottom-right-radius:25px;
    background-color:#fff;
    bold{
      font-weight:bold;
    }
  }
}

@media(width>=768px){
#RESIZE{
  /* 元のデザイン幅 */
  width: 1920px; 
  /* 左上を基準に縮小 */
  transform-origin: top left;
  /* JSから渡される変数を使ってスケール（初期値は1） */
  transform: scale(var(--scale, 1));
}

/* 画面幅が1920px未満の時は、縮小される分はみ出る余白をカット */
body {
  overflow-x: hidden;
  margin: 0;
}
}

/*---PC only---*/
@media (mix-width: 768px) {
  /*--common--*/
  .pc-only {

  }
  .sp-only {
    display: none;
  }
}
/*---SP---*/
@media (max-width: 767px) {
  /*--common--*/
  .pc-only {
    display: none;
  }
  .sp-only {

  }
  section{
    width: 100%;
  }
  .inner{
    width: auto;
  }
  /*--hero--*/
  .hero picture,
  .hero picture img {
    width: 100%;
    height: auto;
    display: block;
  }
  /*--probrems--*/
  .problems .inner{
    padding: 16px;
  }
  .problems .section-ttl{
    font-size: 20px;
    white-space:nowrap;
  }
  .problems .section-ttl::before{
    width: 30px;
    height: 30px;
    left: -30px;
  }
  .problems .section-ttl::after{
    width: 30px;
    height: 30px;
    right: -30px;
  }
  .problems-grid{
    img{
      width:100%;
    }
  }
  /*--about--*/
  .about .inner{
    width: auto;
    padding: 16px;
  }
  .about-label{
    left: 25%;
  }
  .steps-grid{
    flex-direction: column;
    align-items: center;
  }
  .step-card{
    width:100%;
    height: auto;
    position:relative;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;

    &:nth-of-type(even) {
      flex-direction: column;
    }
    .step-img{
      /* opacity:0.3; */
      margin: 20px auto!important;
    }
    .step-title{
      font-size:24px!important;
    }
    .step-descreption{
      /* position:absolute; */
      margin:auto!important;
      width:100%;
      top:0;
      left:0;
      right:0;
      z-index:2;
    }
  }
  .flow-images{
    flex-wrap:wrap;
    margin:30px auto;
    img:first-of-type{
      width:100%;
    }
    img:last-of-type{
      width:40%;
      margin-top:10px;
      margin-left:auto;
      margin-right:auto;
    }
  }
  .service{
    h2{
      width:90%;
      box-sizing:border-box;
      font-size:24px;
    }
  }
  .service-grid{
    flex-direction:column;
    .step-card{
      margin:auto;
      width:90%;
      height:auto;
      box-sizing:border-box;
    }
  }
  .flow-list{
    width:100%;
  }
  .flow-item{
    flex-direction:column;
    width:90%;
    margin:auto;
    box-sizing:border-box;
    div{
      width:100%;
      &.flow-item__left{
        .flow-num{
          width:auto;
          p:not([class]){
            margin:0;
          }
        }
        h3{
          width:100%;
        }
      }
    }
  }
  .plan-content{
    width:100%;
    box-sizing:border-box;
    padding:0;
    .plan-grid{
      width:100%;
      grid-template-columns:1fr;
    }
  }
  .plan-label{
    font-size:40px;
  }
  /*--why--*/
  .why .inner{
    padding: 16px;
  }
  .why-heading{
    font-size: 24px;
  }
  .why-grid{
    width: auto;
    padding: 16px;
  }
  .why-list li{
    font-size: 16px;
  }
  /*--nedessary--*/
  .necessary .inner{
    padding: 16px;
  }
  .necessary .section-ttl{
    font-size: 20px;
  }
  .necessary-flow{
    gap:20px;
  }
  .necessary-flow p{
    font-size: 16px;
  }
  /*--merit--*/
  .merit .inner{
    padding: 16px;
  }
  .cases-grid{
    width: auto;
    flex-direction: column;
  }
  .case-card{
    width: auto;
  }
  .case-body{
    width: auto;
  }
  /*--case--*/
  .case{
    height: auto;
  }
  .case .inner{
    padding: 16px;
  }
  .numbers-grid{
    flex-direction: column;
  }
  .number-card{
    width: auto;
    padding: 16px;
  }
  .number-val{
    font-size: 24px;
  }
  /*--faq--*/
  .faq .inner{
    padding: 16px;
  }
  .lead{
    p:first-of-type{
      font-size:24px;
    }
    p:last-of-type{
      text-align:left;
    }
  }
  .section-ttl--ja{
    font-size:28px;
  }
  .about-label{
    font-size:28px!important;
  }
  .about-text{
    font-size:28px!important;
  }
  .plan{
    padding-bottom:0;
  }
  .faq{
    padding-top:0;
  }
}