detail-key@charset "UTF-8";
/* CSS Document */

:root {
    --ink: #171320;
    --gold: #b99a57;
    --gold-deep: #8f7440;
    --ivory: #fffaf2;
    --shadow: rgba(28, 18, 35, .46);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    min-height: 100%;
  }

  body {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    background: #eaded7;
    color: var(--ink);
  }

a:link{text-decoration: none; color:#754F06;}
a:hover{text-decoration: none; color:#EE3AA2;}
a:visited{text-decoration: none; color:#754F06;}

  .svp-hero {
    position: relative;
    width: 100%;
    min-height: 110vh;
    min-height: 110svh;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: stretch;
    justify-content: center;
  }

  .svp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-image: url("../img/header_design_back1980.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transform: scale(1.002);
  }

  /* 文字の可読性を少しだけ高めるための薄いレイヤー */
  .svp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      linear-gradient(90deg,
        rgba(255,250,242,.42) 0%,
        rgba(255,250,242,.20) 24%,
        rgba(255,255,255,0) 48%,
        rgba(255,255,255,0) 100%
      );
  }

  .hero-inner {
    width: min(100%, 1920px);
    min-height: 105vh;
    min-height: 105svh;
    position: relative;
    padding: clamp(28px, 4vw, 72px);
  }

  .vertical-copy {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 92vw;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: clamp(18px, 2.2vw, 34px);
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-weight: 700;
    letter-spacing: .08em;
    text-shadow:
      0 1px 0 rgba(255,255,255,.75),
      0 2px 16px rgba(255,255,255,.45);
  }

  .vertical-copy p {
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.35;
    color: #171317;
  }

  .vertical-copy .lead {
    font-size: clamp(28px, 2.8vw, 40px);
    padding: .18em .12em;
    background: rgba(20,16,22,.92);
    color: white;
  }

  .vertical-copy .main {
    font-size: clamp(28px, 4vw, 48px);
  }

  .vertical-copy .question {
    font-size: clamp(27px, 3.3vw, 44px);
    /*margin-top: clamp(54px, 8vh, 100px);*/
  }

  .program-block {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(30px, 4vh, 58px);
    width: min(760px, 72vw);
    text-align: center;
  }
  .concept {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: clamp(19px, 1.55vw, 31px);
    font-weight: 700;
    line-height: 1.7;
    color: #332b20;
    text-shadow:
      0 1px 0 rgba(255,255,255,.95),
      0 0 18px rgba(255,248,231,.95);
    margin-bottom: 20px;
  }

  .concept strong {
    color: var(--gold-deep);
    font-weight: 800;
  }
 .program-name {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: clamp(31px, 3.15vw, 61px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #17131d;
    text-shadow:
      0 1px 0 rgba(255,255,255,.95),
      0 0 16px rgba(255,255,255,.75);
  }

  .program-name span {
    display: block;
  }

  .program-jp {
    margin-top: 9px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(12px, .9vw, 17px);
    font-weight: 700;
    letter-spacing: .04em;
  }

  .term {
    margin-top: 14px;
    display: inline-block;
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: clamp(29px, 2.5vw, 49px);
    font-weight: 800;
    letter-spacing: .08em;
    color: #2a2028;
  }

 .dates{
    margin-top: 14px;
    display: inline-block;
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: clamp(29px, 2.5vw, 49px);
    font-weight: 800;
    letter-spacing: 0;
    color: #2a2028;

  }

/*
  @media (min-width: 901px) {
    .vertical-copy {
      top: 5%;
    }

    .vertical-copy .question {
      margin-top: clamp(26px, 4vh, 58px);
    }

    .program-block {
      bottom: clamp(22px, 3vh, 44px);
    }

    .concept {
      margin-bottom: 12px;
    }

    .term {
      margin-top: 8px;
    }
  }

  .concept {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: clamp(19px, 1.55vw, 31px);
    font-weight: 700;
    line-height: 1.7;
    color: #332b20;
    text-shadow:
      0 1px 0 rgba(255,255,255,.95),
      0 0 18px rgba(255,248,231,.95);
    margin-bottom: 20px;
  }

  .concept strong {
    color: var(--gold-deep);
    font-weight: 800;
  }

  .program-name {
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: clamp(31px, 3.15vw, 61px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.02em;
    color: #17131d;
    text-shadow:
      0 1px 0 rgba(255,255,255,.95),
      0 0 16px rgba(255,255,255,.75);
  }

  .program-name span {
    display: block;
  }

  .program-jp {
    margin-top: 9px;
    font-family: "Noto Sans JP", sans-serif;
    font-size: clamp(12px, .9vw, 17px);
    font-weight: 700;
    letter-spacing: .04em;
  }

  .term {
    margin-top: 14px;
    display: inline-block;
    font-family: "Shippori Mincho", "Yu Mincho", serif;
    font-size: clamp(29px, 2.5vw, 49px);
    font-weight: 800;
    letter-spacing: .08em;
    color: #2a2028;
  }


  @media (max-width: 900px) {
    .svp-hero::before {

      background-size: cover;
      background-position: 50% 50%;
    }

    .svp-hero::after {
      background:
        linear-gradient(180deg,
          rgba(255,250,245,.34) 0%,
          rgba(255,255,255,0) 24%,
          rgba(255,255,255,0) 62%,
          rgba(255,248,240,.54) 100%
        );
    }

    .hero-inner {
      padding: 24px 18px 30px;
    }

    .vertical-copy {
      top: 4.5%;
      gap: 12px;
    }

    .vertical-copy .lead {
      font-size: clamp(18px, 5.5vw, 28px);
    }

    .vertical-copy .main {
      font-size: clamp(27px, 8vw, 42px);
    }

    .vertical-copy .question {
      font-size: clamp(22px, 6.8vw, 34px);
      margin-top: 14vh;
    }

    .program-block {
      bottom: max(28px, env(safe-area-inset-bottom));
      width: min(92vw, 560px);
      text-align: center;
      padding: 18px 16px 10px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,250,245,0), rgba(255,250,245,.35));
      backdrop-filter: blur(1px);
    }

    .concept {
      font-size: clamp(16px, 4.5vw, 22px);
      line-height: 1.65;
      margin-bottom: 12px;
    }

    .program-name {
      font-size: clamp(31px, 9vw, 48px);
    }

    .program-jp {
      font-size: 11px;
    }

    .term {
      font-size: clamp(29px, 8vw, 42px);
      margin-top: 8px;
    }
  }


	@media (min-width: 901px) {
 
 .vertical-copy {
      top: 0%;
      gap: 0px;
    }
 .vertical-copy .lead {
    font-size: 42px;
  }

  .vertical-copy .main {
    font-size: 58px;
  }

  .vertical-copy .question {
    font-size: 48px;
	margin-top: 4vh;
  }
.program-block {
      bottom: 20px;
    }

}
*/


  @media (max-width: 768px) {
   .svp-hero {
      min-height: 115lvh;
    }
	.hero-inner {
      min-height:1000px;
    }
    .vertical-copy {
      top: 3%;
    }

    .vertical-copy .question {
      margin-top: 4vh;
    }

    .program-block {
      bottom: max(18px, env(safe-area-inset-bottom));
	  padding: 0px;
    }
	 .concept {
      margin-top: 20px;
	  margin-bottom: 12px;
    }

    .term {
      margin-top: 8px;
    }
	
	.dates {
      margin-top: 5px;
    }

  }






:root{
  --ink:#4b3c3d;
  --ink-soft:#7b6d6d;
  --rose:#d7a7aa;
  --rose-deep:#b97f84;
  --blush:#f4dfdf;
  --pink-wash:#fbf2f2;
  --beige:#f3eadc;
  --paper:#fffaf5;
  --white:#ffffff;
  --gold:#c6a56a;
  --gold-deep:#9f7c43;
  --gold-soft:#e8d6b3;
  --line:rgba(176,139,86,.28);
  --shadow:0 18px 50px rgba(91,67,64,.10);
  --serif:"Shippori Mincho",serif;
  --sans:"Noto Sans JP",sans-serif;
  --garamond:"EB Garamond",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-weight:300;line-height:1.95;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.container{width:min(1120px,calc(100% - 48px));margin-inline:auto}
.serif{font-family:var(--serif)}
.en{font-family:var(--garamond)}
.desktop-only{display:block}
.mobile-only{display:none}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:120;background:rgba(255,250,245,.84);backdrop-filter:blur(12px);border-bottom:1px solid rgba(198,165,106,.18);transition:.3s ease}
.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1180px,calc(100% - 40px));margin:auto}
.brand{font-family:var(--garamond);font-size:18px;letter-spacing:.08em;color:var(--gold-deep)}
.brand small{font-family:var(--sans);font-size:10px;letter-spacing:.12em;color:var(--ink-soft);display:block;margin-top:-4px}
.nav{display:flex;align-items:center;gap:22px;font-size:12px;letter-spacing:.05em;color:#6d5d5d}
.nav a{transition:.25s}
.nav a:hover{color:var(--rose-deep)}
.header-cta{padding:11px 19px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#d8bc84);color:#fff;font-size:12px;font-weight:500;box-shadow:0 8px 24px rgba(159,124,67,.18)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--line);background:rgba(255,255,255,.75);border-radius:50%;align-items:center;justify-content:center;color:var(--ink)}



/* Common */
section{position:relative;padding:116px 0}
.section-soft{background:linear-gradient(180deg,#fffaf5,#fbf1ef)}
.section-beige{background:linear-gradient(180deg,#f5ecdf,#fffaf5)}
.section-pink{background:linear-gradient(180deg,#f8e8e8,#fffaf5)}
.section-dark{background:linear-gradient(150deg,#5e4a4b,#3f3235);color:#fff}
.eyebrow{display:flex;align-items:center;gap:13px;font-family:var(--garamond);font-style:italic;letter-spacing:.16em;font-size:13px;color:var(--gold-deep);margin-bottom:18px}
.eyebrow:before{content:"";width:34px;height:1px;background:var(--gold)}
.section-dark .eyebrow{color:var(--gold-soft)}
h2{font-family:var(--serif);font-size:clamp(30px,4.2vw,48px);font-weight:500;line-height:1.58;letter-spacing:.025em}
.section-title-center{text-align:center}
.section-title-center .eyebrow{justify-content:center}
.section-title-center .eyebrow:before{display:none}
.lead{font-size:20px;color:var(--ink-soft);max-width:760px;margin-top:24px;line-height:2.05}
.section-title-center .lead{margin:26px auto 0}
.gold{color:var(--gold-deep)}
.rose{color:var(--rose-deep)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);margin:46px 0}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:260px;padding:18px 32px;border-radius:999px;background:linear-gradient(135deg,#c49c5c,#dfc18a);color:white;font-size:14px;font-weight:500;letter-spacing:.05em;box-shadow:0 12px 30px rgba(159,124,67,.2);transition:.3s ease}
.cta-btn:link{transform:translateY(-2px);box-shadow:0 16px 36px rgba(159,124,67,.28); color: #70480B}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(159,124,67,.28); color: #FFFFFF;}
.cta-outline{background:transparent;color:var(--gold-deep);border:1px solid rgba(159,124,67,.45);box-shadow:none}


/* First CTA */
.first{padding:130px 0;background:radial-gradient(circle at 50% 10%,rgba(236,198,200,.22),transparent 32%),linear-gradient(160deg,#c27689,#c1baa3);color:#fff;text-align:center;font-size: 20px;}
.first h2{font-size:clamp(32px,5vw,50px)}
.first p{max-width:760px;margin:28px auto 0;color:rgba(255,255,255,.78);font-size:20px;line-height:2.1}
.first .cta-btn{margin-top:42px}
.first-note{margin-top:16px;font-size:11px;color:rgba(255,255,255,.55)}
/*footer{background:#342a2d;color:rgba(255,255,255,.58);padding:26px 0;font-size:10.5px}*/
.first-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}


.green-page{
  display:grid; place-items:center; padding:50px 18px;
}
.green-card{
  padding:20px 0px; text-align:center;
  background-image: linear-gradient(#71de71, #379439); border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(91,61,68,.18);
  transition: .3s;
  color: #ffffff;
}
.green-card:a{
	color:#ffffff;
}
.green-card:hover {
    opacity: .9;
	color:#0c3c01;
}
.green-card:visited{text-decoration: none; color:#ffffff;}

.green-card h1{
  font-family:"Yu Mincho",serif; font-size:clamp(28px,4vw,44px);
  margin-bottom:18px;
  color: aqua;
}




/* Problem */
.problem-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.problem-note{position:sticky;top:112px;padding:10px;background:rgba(255,255,255,.63);border:1px solid rgba(198,165,106,.23);box-shadow:var(--shadow)}
.problem-note p{font-family:var(--serif);font-size:20px;line-height:1.95}
.problem-list{display:flex;flex-direction:column;gap:0}
.problem-item{padding:24px 0;border-bottom:1px solid var(--line);font-size:20px;color:#675657;display:flex;gap:16px}
.problem-item:before{content:"✦";color:var(--gold);font-size:12px;margin-top:3px}
.problem-box{background: #ffffff; padding: 20px;}

/* Insight */
.insight-box{margin-top:54px;padding:54px;border:1px solid rgba(198,165,106,.28);background:rgba(255,255,255,.72);box-shadow:var(--shadow);position:relative;overflow:hidden}
.insight-box:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(226,184,190,.22),transparent 68%);right:-60px;top:-50px}
.insight-box h3{font-family:var(--serif);font-size:26px;font-weight:500; color: deeppink; line-height:1.8;margin-bottom:20px}
.insight-box p{color:var(--ink-soft);font-size:20px}

/* About */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:start}
.about-art{position:sticky;top:50px;padding:10px;background:rgba(255,255,255,.63);border:1px solid rgba(198,165,106,.23);box-shadow:var(--shadow)}
/*.about-art{aspect-ratio:4/5;border-radius:999px 999px 36px 36px;background:linear-gradient(145deg,#f5dede 0%,#ead9c1 48%,#d8bac2 100%);position:relative;overflow:hidden;box-shadow:var(--shadow)}
.about-art:before,.about-art:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.65);border-radius:50%}
.about-art:before{width:58%;aspect-ratio:1;left:12%;top:22%}
.about-art:after{width:58%;aspect-ratio:1;right:12%;top:22%}*/
.vesica-label{position:absolute;inset:auto 0 14% 0;text-align:center;font-family:var(--garamond);font-size:18px;letter-spacing:.16em;color:#7e6263}
.about-copy p{color:var(--ink-soft);font-size:20px;margin-top:18px}
.about-quote{margin-top:28px;padding:22px 24px;border-left:2px solid var(--gold);font-family:var(--serif);font-size:19px;line-height:1.9;color:#5d494a;background:rgba(255,255,255,.45)}

/* 8 Steps */
.steps-grid{margin-top:66px;display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.step-card{padding:34px 32px 32px;background-image: linear-gradient(135deg, #ffffff, #fff4ed);border:1px solid rgba(198,165,106,.22);box-shadow:0 12px 34px rgba(93,65,66,.06);position:relative;min-height:290px;transition:.3s ease}
.step-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(93,65,66,.1)}
.step-no{font-family:var(--garamond);font-style:italic;font-size:42px;color:rgba(198,165,106,.48);line-height:1;margin-bottom:20px; border-bottom:1px solid #eccfc3;}
.step-card .title{font-family:var(--serif);font-size:21px;line-height:1.65;font-weight:500;color: black;}
.step-card p{font-size:20px;color:var(--ink-soft);line-height:1.95}

.process-section{
  padding:90px 24px 110px;
  background:
    radial-gradient(circle at 10% 0%, rgba(237,205,202,.28), transparent 30%),
    linear-gradient(180deg,#fffaf8 0%,#f8eeec 100%);
}
.process-wrap{
  width:min(1180px,100%);
  margin:0 auto;
}
.process-heading{
  text-align:center;
  margin-bottom:58px;
}
.process-heading .en{
  display:block;
  color:#c4a56f;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:15px;
  letter-spacing:.16em;
  margin-bottom:10px;
}
.process-heading h2{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(30px,4vw,48px);
  font-weight:500;
  line-height:1.55;
  color:#44383a;
}
.process-heading h2 strong{
  color:#b89355;
  font-weight:600;
}
.process-heading p{
  margin-top:16px;
  color:#8a7a78;
  font-size:15px;
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px 32px;
  margin: 50px 0 00;
}
.process-card{
  position:relative;
  min-height:270px;
  background:rgba(255,253,249,.94);
  border:1px solid rgba(190,156,110,.22);
  box-shadow:0 12px 34px rgba(108,74,76,.06);
  overflow:hidden;
  padding:40px 36px 34px;
}
.process-copy{
  position:relative;
  z-index:2;
  width:78%;
}
.process-title-row{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.process-num{
  flex:0 0 auto;
  color:#dcc79d;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:42px;
  line-height:1;
}
.process-title-row h3{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:21px;
  line-height:1.55;
  font-weight:600;
  color:#403638;
}
.process-line{
  width:100%;
  height:1px;
  margin:16px 0 20px;
  background:linear-gradient(90deg,rgba(191,153,92,.55),rgba(191,153,92,.10));
  font-size: 18px;
}
.process-copy p{
  color:#817675;
  font-size:20px;
  line-height:2;
}
.process-illust{
  position:absolute;
  right:-4px;
  top:-8px;
  width:165px;
  max-height:180px;
  object-fit:contain;
  object-position:right top;
  z-index:1;
  pointer-events:none;
}
.process-card:nth-child(even) .process-illust{
  width:175px;
}
@media(max-width:900px){
  .process-grid{grid-template-columns:1fr}
  .process-card{min-height:250px}
  .process-copy{width:76%}
  .process-copy p{font-size: 18px;}
}
@media(max-width:768px){
  .process-section{padding:64px 14px 80px}
  .process-heading{margin-bottom:38px}

  .process-card{
    position:relative;
    padding:26px 18px 24px;
    min-height:auto;
  }

  .process-copy{
    width:100%;
    padding-top:0;
  }

  .process-title-row{
    gap:10px;
  }

  .process-num{
    font-size:35px;
  }

  .process-title-row h3{
    font-size:18px;
    line-height:1.6;
  }

  .process-line{
    margin:14px 0 18px;
	font-size: 18px;
  }

  /* 本文の右側にイラスト用スペースを確保 */
  .process-copy p{
    font-size:18px;
    line-height:1.9;
    padding-right:126px;
    min-height:132px;
  }

  /* イラストはタイトルではなく本文の横へ */
  .process-illust{
    position:absolute;
    top:96px;
    right:14px;
    width:110px !important;
    max-height:126px;
    object-fit:contain;
    object-position:center top;
  }
	
.first{font-size: 18px;}

}


/* Before After */
/*.ba-list{margin-top:60px;display:grid;gap:16px}
.ba-row{display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;gap:20px;padding:24px 26px;background:rgba(255,255,255,.68);border:1px solid rgba(198,165,106,.2)}
.ba-before,.ba-after{font-size:20px;line-height:1.85}
.ba-before{color:#8a7375}
.ba-after{color:#5c4849;font-weight:400}
.ba-arrow{text-align:center;color:var(--gold-deep);font-family:var(--garamond);font-style:italic;font-size:24px}*/

/* =========================
   Befor → After
========================= */
.ba-section{padding:80px 20px}
.ba-wrap{width:min(100%,980px);margin:0 auto}
.ba-heading{text-align:center;margin-bottom:42px}
.ba-heading .eyebrow{margin:0 0 10px;font-family:Georgia,"Times New Roman",serif;font-size:14px;letter-spacing:.16em;color:#b28d58}
.ba-heading h2{margin:0;font-family:"Shippori Mincho","Yu Mincho",serif;font-size:clamp(26px,4vw,42px);line-height:1.55;font-weight:700;color:#3e3437}
.ba-card{display:grid;grid-template-columns:1fr 72px 1fr;align-items:stretch;gap:18px; margin: 0 0 20px;}
.ba-panel{background:rgba(255,255,255,.82);border:1px solid rgba(185,151,111,.22);border-radius:24px;padding:20px 20px;text-align:center;box-shadow:0 14px 40px rgba(93,70,71,.07)}
.ba-image{width:min(100%,150px);margin:0 auto 22px}
.ba-image img{display:block;width:100%;height:auto}
.ba-label{display:inline-flex;align-items:center;justify-content:center;min-width:92px;padding:7px 16px;margin-bottom:16px;border-radius:999px;font-family:Georgia,"Times New Roman",serif;font-size:13px;letter-spacing:.12em}
.before .ba-label{background:#dceeed;color:#557873}
.after .ba-label{background:#f2d9f2;color:#9a5f94}
.ba-text{margin:0;font-family:"Shippori Mincho","Yu Mincho",serif;font-size:20px;line-height:1.8;font-weight:700}
.ba-arrow{display:flex;align-items:center;justify-content:center;font-family:Georgia,"Times New Roman",serif;font-size:42px;color:#b28d58}

@media (max-width:768px){
  .ba-section{padding:58px 16px}
  .ba-heading{margin-bottom:30px}
  .ba-card{grid-template-columns:1fr;gap:18px}
  .ba-panel{padding:24px 18px 26px;border-radius:20px}
  .ba-image{width:min(72vw,150px);margin-bottom:18px}
  .ba-arrow{height:38px;font-size:36px;transform:rotate(90deg)}
  .ba-text{font-size:20px}
}

/* =========================
   VOICE / YOUTUBE
========================= */

.voice-section{
  padding:100px 24px;
  background:
    linear-gradient(
      180deg,
      #fffaf8 0%,
      #f8efec 100%
    );
}

.voice-section__heading{
  max-width:760px;
  margin:0 auto 56px;
  text-align:center;
}

.voice-section__en{
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:.18em;
  color:#b99562;
  margin-bottom:10px;
}

.voice-section__heading h2{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:500;
  color:#473a3c;
  margin-bottom:16px;
}

.voice-section__heading > p:last-child{
  font-size:20px;
  line-height:1.9;
  color:#897877;
}


.voice-grid{
  width:min(1100px,100%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:48px;
}


.voice-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  background:#fffdf9;
  border:1px solid rgba(188,153,104,.24);
  box-shadow:0 14px 40px rgba(100,65,70,.08);
  overflow:hidden;
}


/* YouTube */
.video-shell{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  overflow:hidden;
}

.video-shell iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}


/* テキスト */
.voice-body{
  padding:10px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.voice-label{
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:14px;
  letter-spacing:.16em;
  color:#b99562;
  margin-bottom:10px;
}

.voice-body h3{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:23px;
  line-height:1.7;
  font-weight:600;
  color:#46393b;
  margin-bottom:20px;
}

.voice-text{
  font-size:16px;
  line-height:2;
  color:#3A2705;
}

.voice-text .befor{
  color:#0670C4;
  font-weight: bold;
}
.voice-text .turning{
  color:#2a8814;
  font-weight: bold;
}

.voice-text .after{
  color:#E529A1;
  font-weight: bold;
}

.voice-name{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(188,153,104,.22);
  font-size:13px;
  color:#a08b83;
}


/* スマホ */
@media(max-width:768px){

  .voice-section{
    padding:72px 16px;
  }

  .voice-grid{
    gap:32px;
  }

  .voice-card{
    grid-template-columns:1fr;
  }

  .voice-body{
    padding:28px 22px 32px;
  }

  .voice-body h3{
    font-size:20px;
  }

}




/* Voices 
.voice-intro{max-width:720px;margin:24px auto 0;color:var(--ink-soft);font-size:20px;text-align:center}
.voice-grid{margin-top:58px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.voice-card{background:#fff;border:1px solid rgba(198,165,106,.22);box-shadow:var(--shadow);overflow:hidden}
.video-shell{aspect-ratio:16/9;background:linear-gradient(135deg,#dcc2c5,#d8c7ae);display:grid;place-items:center;position:relative;cursor:pointer}
.video-shell:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(80,55,62,.02),rgba(80,55,62,.18))}
.play{position:relative;z-index:1;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:var(--rose-deep);box-shadow:0 10px 26px rgba(75,53,57,.18);font-size:20px;padding-left:4px}
.video-tag{position:absolute;left:16px;bottom:12px;z-index:2;background:rgba(255,250,245,.88);padding:6px 10px;font-size:10px;letter-spacing:.08em;color:#7d6667}
.voice-body{padding:24px}
.voice-body h3{font-family:var(--serif);font-size:18px;line-height:1.75;font-weight:500}
.voice-body p{font-size:13px;color:var(--ink-soft);margin-top:10px}
.voice-name{font-size:11px;letter-spacing:.05em;color:var(--gold-deep);margin-top:16px}
.video-help{margin-top:20px;text-align:center;font-size:12px;color:#927b7c}*/

/* Proof */
.proof{text-align:center}
.proof-number{font-family:var(--garamond);font-size:clamp(72px,12vw,130px);font-style:italic;line-height:.9;color:var(--gold-soft)}
.proof-number span{font-family:var(--serif);font-size:.28em;font-style:normal;color:#fff;margin-left:8px}
.proof p{max-width:760px;margin:28px auto 0;color:rgba(255,255,255,.78);font-size:20px}

/* Selection change */
.change-box{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(198,165,106,.28);background:#fff;box-shadow:var(--shadow)}
.change-col{padding:42px}
.change-col:first-child{background:#f8efeb}
.change-kicker{font-family:var(--garamond);font-style:italic;letter-spacing:.1em;color:var(--gold-deep);font-size:20px}
.change-col h3{font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.7;margin-top:12px}
.change-col p{font-size:20px;color:var(--ink-soft);margin-top:16px}

/* Checklist */
.check-grid{margin-top:50px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.check-item{background:rgba(255,255,255,.74);padding:18px 20px;border:1px solid rgba(198,165,106,.2);display:flex;gap:14px;font-size:20px;line-height:1.5}
.check-item:before{content:"✓";width:23px;height:23px;border-radius:50%;display:grid;place-items:center;flex:0 0 23px;background:#edd7d8;color:#a46f75;font-weight:600;font-size:12px}
.check-item2{padding:18px 20px;display:flex;gap:14px;font-size:20px;line-height:1.5;}
.check-item2:before{content:"✓";width:23px;height:23px;border-radius:50%;display:grid;place-items:center;flex:0 0 23px;background:#d7eced;color:#3f88aa;font-weight:600;font-size:12px}
.notfor{margin-top:70px;padding:38px;background:rgba(255,255,255,.58);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.notfor h3{font-family:var(--serif);font-size:22px;font-weight:500;margin-bottom:16px}
.notfor p{font-size:14px;color:var(--ink-soft)}

/* Curriculum */
.curriculum{margin-top:62px;position:relative}
.curriculum:before{content:"";position:absolute;left:36px;top:22px;bottom:22px;width:1px;background:linear-gradient(var(--gold-soft),rgba(198,165,106,.08))}
.curriculum_lead{font-size:20px; margin: 50px 0;}
.curr-item{display:grid;grid-template-columns:74px 1fr;gap:28px;padding:0 0 46px}
.curr-item:last-child{padding-bottom:0}
.curr-no{position:relative;z-index:1;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1px solid var(--gold-soft);font-family:var(--garamond);font-style:italic;font-size:25px;color:var(--gold-deep)}
.curr-body{padding-top:7px}
.curr-body .tag{font-size:10px;letter-spacing:.12em;color:var(--rose-deep);text-transform:uppercase}
.curr-body h3{font-family:var(--serif);font-size:23px;line-height:1.7;font-weight:500;margin-top:6px}
.curr-body p{font-size:20px;color:var(--ink-soft);margin-top:12px;max-width:850px}
.curr-body ul{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:7px 18px;list-style:none}
.curr-body li{font-size:18px;color:#7a6868;position:relative;padding-left:16px}
.curr-body li:before{content:"•";position:absolute;left:0;color:var(--gold)}
.flex-note{margin-top:44px;padding:28px 30px;border:1px solid rgba(198,165,106,.24);background:#fffdf9;font-size:18px;color:var(--ink-soft)}
.flex-note strong{font-family:var(--serif);font-weight:500;color:var(--ink);display:block;margin-bottom:7px;font-size:20px}

.green-pagegreen-page {
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 18px;
}

.lesson-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* スマホ */
@media (max-width: 768px) {
  .lesson-image {
    width: calc(100% - 24px);
    margin: 24px auto;
    border-radius: 12px;
  }

  .lesson-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/*--------------------
アーカイブ視聴ボックス
----------------------*/
.archive-box {
  width: min(1100px, 100%);
  margin: 60px auto;
  padding: 40px 48px 46px;
  background: #fff;
  border: 1px solid rgba(190, 160, 110, .25);
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(80, 55, 55, .08);
}

/* タイトル：一番上・中央 */
.archive-title {
  width: 100%;
  margin: 0 0 36px;
  text-align: center;
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  font-size: clamp(26px, 2.8vw, 35px);
  font-weight: 700;
  line-height: 1.6;
  color: #F05AD5;
}

/* タイトルの下：左文章 / 右画像 */
.archive-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}

/* 左側の文章 */
.archive-text {
  text-align: left;
}

.archive-text p {
  margin: 0;
  font-size: 20px;
  line-height: 2;
  color: #776d6b;
}

/* 右側の画像 */
.archive-image {
  width: 100%;
  text-align: right;
}

.archive-image img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-left: auto;
}

/* スマホ */
@media (max-width: 768px) {

  .archive-box {
    width: calc(100% );
    margin: 40px auto;
    padding: 28px 20px 30px;
  }

  .archive-title {
    margin-bottom: 24px;
    font-size: 23px;
    line-height: 1.55;
    text-align: center;
  }

  .archive-row {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* スマホでは画像を上 */
  .archive-image {
    order: 1;
    width: 100%;
    text-align: center;
  }

  .archive-image img {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
  }

  /* 文章を下 */
  .archive-text {
    order: 2;
    width: 100%;
    text-align: left;
  }

  .archive-text p {
    font-size: 18px;
    line-height: 1.9;
  }

}

/* Message */
.message-wrap{display:grid;grid-template-columns:.75fr 1.25fr;gap:64px;align-items:start}
.message-profile{position:sticky;top:110px;padding:34px;background:linear-gradient(155deg,#f0d8d9,#eadcc6);min-height:390px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow);background: url("../img/saarahat.png") center no-repeat ; background-size: contain;}
.message-profile .name{font-family:var(--serif);font-size:28px}
.message-profile .sub{font-family:var(--garamond);font-style:italic;letter-spacing:.1em;margin-top:5px;color:#826b69}
.message-copy h2{font-size:36px}
.message-copy p{font-size:20px;color:var(--ink-soft);margin-top:20px}
.message-sign{margin-top:28px;font-family:var(--serif);font-size:20px;text-align:right;color:var(--gold-deep)}

/* Detail */
.detail-box{margin-top:54px;background:#fff;border:1px solid rgba(198,165,106,.26);box-shadow:var(--shadow);overflow:hidden}
.detail-row{display:grid;grid-template-columns:180px 1fr;border-bottom:1px solid rgba(198,165,106,.17)}
.detail-row:last-child{border-bottom:0}
.detail-key{padding:20px 24px;background:#fbf3ed;font-size:16px;color:#8b7274;letter-spacing:.04em; font-weight: bold; line-height:1.8;}
.detail-val{padding:20px 26px;font-size:20px}
.detail-note{margin-top:16px;font-size:12px;color:#8f7a7c}

/* FAQ */
.faq-list{margin-top:50px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;padding:23px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;color:var(--ink);cursor:pointer}
.faq-q span:first-child{font-family:var(--serif);font-size:18px;line-height:1.7}
.qmark{font-family:var(--garamond);font-style:italic;color:var(--gold-deep);margin-right:14px}
.plus{font-size:22px;color:var(--gold);transition:.3s}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a-inner{padding:0 32px 24px;font-size:18px;color:var(--ink-soft)}

/* Final CTA */
.final{padding:130px 0;background:radial-gradient(circle at 50% 10%,rgba(236,198,200,.22),transparent 32%),linear-gradient(160deg,#5d484a,#3c3033);color:#fff;text-align:center}
.final h2{font-size:clamp(32px,5vw,50px)}
.final p{max-width:760px;margin:28px auto 0;color:rgba(255,255,255,.78);font-size:20px;line-height:2.1}
.final .cta-btn{margin-top:42px}
.final-note{margin-top:16px;font-size:11px;color:rgba(255,255,255,.55)}
footer{background:#342a2d;color:rgba(255,255,255,.58);padding:26px 0;font-size:10.5px}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center}

/* Reveal */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in-view{opacity:1;transform:none}

@media(max-width:960px){
  .nav{display:none}
  .header-cta{display:none}
  .menu-btn{display:flex}
  .mobile-nav{position:fixed;top:72px;left:0;right:0;z-index:115;background:rgba(255,250,245,.98);border-bottom:1px solid var(--line);padding:20px 24px;display:none}
  .mobile-nav.open{display:grid;gap:12px}
  .mobile-nav a{font-size:13px;padding:8px 0;border-bottom:1px solid rgba(198,165,106,.12)}
  .hero-inner{min-height:680px}
  .hero-copy-image{width:min(610px,72vw);transform:translateX(-14%)}
  section{padding:92px 0}
  .problem-wrap,.about-grid,.message-wrap{grid-template-columns:1fr;gap:42px}
  .problem-note,.message-profile{position:relative;top:auto}
  .steps-grid{grid-template-columns:1fr}
  .voice-grid{grid-template-columns:1fr 1fr}
  .change-box{grid-template-columns:1fr}
}
@media(max-width:640px){
  .desktop-only{display:none}
  .mobile-only{display:block}
  .container{width:min(100% - 30px,1120px)}
  .header-inner{width:calc(100% - 26px);height:62px}
  .site-header{height:62px}
  .brand{font-size:15px}
  .hero{padding-top:62px;min-height:auto}
  .hero-bg{background-position:center center}
  .hero-inner{height:auto;min-height:calc(100svh - 62px);padding:26px 0 42px;align-items:center}
  .hero-copy-image{width:min(92vw,520px);transform:none;max-height:82svh}
  .hero-scroll{display:none}
  section{padding:76px 0}
  h2{font-size:30px;line-height:1.62}
  .lead{font-size:18px}
  .problem-note{padding:10px}
  .problem-note p{font-size:19px}
  .problem-item{font-size:16px;padding:19px 0}
  .insight-box{padding:30px 24px}
  .insight-box p{color:var(--ink-soft);font-size:16px}
  .about-art{top:0;margin:0px; position: relative;}
  .steps-grid{gap:14px;margin-top:45px}
  .step-card{padding:28px 24px;min-height:auto}
  .ba-row{grid-template-columns:1fr;padding:20px;gap:10px}
  .ba-arrow{transform:rotate(90deg)}
  .voice-grid{grid-template-columns:1fr}
  .change-col{padding:30px 24px}
  .check-grid{grid-template-columns:1fr}
  .curriculum:before{left:27px}
  .curr-item{grid-template-columns:56px 1fr;gap:16px;padding-bottom:36px}
  .curr-no{width:56px;height:56px;font-size:20px}
  .curr-body h3{font-size:22px}
  .curr-body ul{grid-template-columns:1fr}
  .message-profile{min-height:300px;}
  .detail-row{grid-template-columns:1fr}
  .detail-key{padding:12px 18px}
  .detail-val{padding:16px 18px}
  .final{padding:94px 0}
  .cta-btn{width:100%;min-width:0}
  .footer-inner{flex-direction:column;text-align:center}
}


/* ICON */
.relieved.icon {
  color: #000;
  position: absolute;
  margin-left: 2px;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 1px currentColor;
}

.relieved.icon:before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border-top: solid 1px transparent;
  border-left: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  border-right: solid 1px transparent;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.relieved.icon:after {
  content: '';
  position: absolute;
  right: 3px;
  top: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border-top: solid 1px transparent;
  border-left: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  border-right: solid 1px transparent;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.relieved.icon i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border-top: solid 1px transparent;
  border-bottom: solid 1px currentColor;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
}


One gateway for evey AI model
HTML
<div class="relieved icon"><i></i></div>
CSS
.relieved.icon {
  color: #000;
  position: absolute;
  margin-left: 0px;
  margin-top: 2px;
  margin-right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: solid 1px currentColor;
}
.relieved.icon:before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border-top: solid 1px transparent;
  border-left: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  border-right: solid 1px transparent;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.relieved.icon:after {
  content: '';
  position: absolute;
  right: 3px;
  top: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  border-top: solid 1px transparent;
  border-left: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  border-right: solid 1px transparent;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.relieved.icon i {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border-top: solid 1px transparent;
  border-bottom: solid 1px currentColor;
  border-left: solid 1px transparent;
  border-right: solid 1px transparent;
}






/* ========================================
   APPLICATION MODAL
======================================== */


.demo-page{
  display:grid; place-items:center; padding:50px 18px;
}
.demo-card{
  padding:20px 0px; text-align:center;
  background-image: linear-gradient(#DED471, #948737); border:1px solid var(--line);
  box-shadow:0 24px 70px rgba(91,61,68,.18);
  transition: .3s;
}
.demo-card:hover {
    opacity: .9;
	color:#F3E686;
}
.demo-card h1{
  font-family:"Yu Mincho",serif; font-size:clamp(28px,4vw,44px);
  margin-bottom:18px;
  color: aqua;
}
.demo-card p{color:var(--muted);font-size:14px;margin-bottom:28px}
.apply-line{
  border:0; cursor:pointer; padding:18px 0px; color:#fff;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  font-family:"Yu Mincho",serif; font-size:20px; font-weight: bold;
  color: #FFFFFF;
  width:min(760px,100%);
}
.apply-trigger{
  border:0; cursor:pointer; padding:18px 0px; color:#fff;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  font-family:"Yu Mincho",serif; font-size:20px; font-weight: bold;
  color: #FFFFFF;
  width:min(760px,100%);
}
.apply-modal{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:16px;
}
.apply-modal.is-open{display:flex}
.apply-modal__overlay{
  position:absolute; inset:0; background:rgba(45,32,35,.72);
}
.apply-modal__content{
  position:relative; z-index:2; width:min(720px,100%); max-height:92vh;
  overflow:auto; padding:52px 34px 36px;
  background:linear-gradient(145deg,#fffaf5,#f9efea);
  border:1px solid rgba(190,153,109,.38);
  box-shadow:0 30px 90px rgba(50,30,40,.36);
}
.apply-modal__close{
  position:absolute; top:12px; right:16px; border:0; background:none;
  color:#846f70; font-size:30px; cursor:pointer;
}
.apply-modal h2{
  text-align:center; font-family:"Yu Mincho",serif;
  font-size:clamp(25px,4vw,34px); line-height:1.55; margin-bottom:16px;
}
.apply-modal__lead{
  text-align:center; color:var(--muted); font-size:14px; margin-bottom:26px;
}
.apply-checklist{display:flex;flex-direction:column;gap:10px}
.apply-check{
  display:flex; gap:12px; align-items:flex-start; padding:15px 16px;
  background:rgba(255,255,255,.75); border:1px solid var(--line);
  cursor:pointer; text-align:left;
}
.apply-check input{
  width:20px; height:20px; margin-top:3px; accent-color:var(--gold);
  flex:0 0 20px;
}
.apply-check span{font-size:14px}
.apply-status{
  margin:22px 0 14px; text-align:center; font-size:12px; color:#832D00;
}
.apply-status.is-ready{color:#8e7440;font-weight:700}
.apply-submit{
  display:flex; justify-content:center; align-items:center; gap:10px;
  width:100%; padding:18px 20px; color:#fff; text-decoration:none;
  background:linear-gradient(90deg,var(--gold),var(--gold2));
  font-family:"Yu Mincho",serif; font-size:17px;
}
.apply-submit.is-disabled{
  pointer-events:none; background:#d8ceca; color:#aaa09d;
}
.apply-submit:link{
  background:#C4A94B; color:#935114; cursor: pointer;
}
.apply-submit:hover{
  background:#FFE100; color:#935114;cursor: pointer;
}
@media(max-width:640px){
  .apply-modal__content{padding:48px 18px 28px}
  .apply-modal__lead{text-align:left;font-size:16px}
  .apply-check span{font-size:13px}
}