@charset "UTF-8";
/* =============================================================
   HANA WEB OC — Layout Clone (骨組みのみ / Skeleton only)
   出典レイアウト: https://hana-st004.com/fashion/
   テキスト・画像はすべてダミー。配置ルールのみを再現。
   Breakpoints: SP = max-width:768px / PC = min-width:769px
                + 669 / 869 / 991 / 1341 / 1441 の補助BP
   ============================================================= */

/* ---------- 0. Tokens ---------- */
:root{
  /* --- テーマ: fashion（このページのテーマ） --- */
  --c-primary:      var(--c-main, #4fc3ac);   /* メインカラー */
  --c-primary-dark: #47b9a2;   /* ハンバーガー / ドロワー */
  --c-tint:         #eaf8f6;   /* 淡色面 */
  /* --- 共通 --- */
  --c-base:   #66adea;         /* デフォルトテーマ（未指定・現状未使用） */
  --c-cta:    var(--c-accent, #ff7f00);   /* 申込ボタン（試着バーではアクセント色に連動） */
  --c-cream:  #fdfde2;         /* アクションブロック地色 */
  --c-text:   #333;
  --c-white:  #fff;
  --c-line:   #ddd;

  /* --- 変則レイアウトの要 --- */
  --kv-mt: 45px;               /* KV画像の上マージン(SP) */
  --kv-inset: 20px;            /* KV画像の左インセット(SP) */
  --kv-radius: 15px;           /* KV画像 左上/左下のみ角丸(SP) */
  --circle: 60px;              /* SCROLLサークル径(SP) */

  --ank-bar: 35px;             /* ankカードの「下ボーダー＝バー」厚(SP) */
  --ank-bar-offset: -34px;     /* ankバーのbottom値(SP) ※-35ではなく-34 */

  --act-icon-out: 32px;        /* アクションBLKアイコンのはみ出し量(SP) */

  --font-jp: var(--font-body, "游ゴシック", YuGothic, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif);
  --font-en: var(--font-head, "Albert Sans", sans-serif);
  --font-display: var(--font-head, "Prompt", sans-serif);
}
@media screen and (min-width:769px){
  :root{
    --kv-mt: 90px;
    --kv-inset: 6.9444444444%;  /* width:93.0555555556% の裏返し */
    --kv-radius: 30px;
    --circle: 120px;
    --ank-bar: 48px;
    --ank-bar-offset: -48px;
    --act-icon-out: 43px;
  }
}
@media screen and (min-width:1341px){
  :root{ --kv-inset: 100px; }
}

/* ---------- 1. Reset ---------- */
html{ box-sizing:border-box }
*,*::before,*::after{ box-sizing:inherit }
body{
  margin:0; color:var(--c-text); font-family:var(--font-jp);
  line-height:1.5; -webkit-font-smoothing:antialiased; font-kerning:normal;
}
h1,h2,h3,p,dl,dd,figure{ margin:0 }
ul{ margin:0; padding:0; list-style:none }
img{ max-width:100%; height:auto; vertical-align:middle }
a{ color:var(--c-text); text-decoration:underline; transition:.3s }
a:hover{ opacity:.8; text-decoration:none }
i,em{ font-style:normal }
body.open{ position:fixed; width:100%; overflow:hidden }

/* ---------- 2. Container（幅バリエーション） ----------
   基準1340pxに対し、セクション毎に別の最大幅を割り当てる。
   同じ見出しレベルでも「読ませたい行長」でカラム幅が変わる = 非均一グリッド。 */
.container{ max-width:1340px; width:100%; margin-inline:auto; padding:0 20px }
.container.u-w1140{ max-width:1240px }  /* 実コンテンツ1140px */
.container.u-w1040{ max-width:1140px }
.container.u-w1000{ max-width:1100px }  /* 実コンテンツ1000px */
.container.u-w900 { max-width:1000px }
.container.u-w770 { max-width:870px  }  /* 実コンテンツ770px  ← FAQだけ極端に狭い */
.container.u-w750 { max-width:850px  }
@media screen and (min-width:769px){ .container{ padding:0 50px } }

/* .pc / .sp は「隠す」ルールのみ。display を与えないので、
   div も br も本来の display を保つ（＝.tag.sp が block のまま中央寄せできる）。 */
@media screen and (max-width:768px){ .pc{ display:none !important } }
@media screen and (min-width:769px){ .sp{ display:none !important } }

/* ---------- 3. Section rhythm ----------
   .com-section        : 上下非対称 padding（下が上より 10px / 20px 厚い）
   .com-section_inner+ : 連続する内側セクションの間隔 */
.com-section{ padding:50px 0 60px }
.com-section_inner + .com-section_inner{ padding-top:50px }
@media screen and (min-width:769px){
  .com-section{ padding:100px 0 120px }
  .com-section_inner + .com-section_inner{ padding-top:100px }
}
/* 空の .com-section = 意図的な「間（ま）」。中身ゼロで 110px(SP)/220px(PC) の余白帯になる */
.com-section.is-void{ padding:50px 0 60px }
@media screen and (min-width:769px){ .com-section.is-void{ padding:100px 0 120px } }

/* ---------- 4. Layout shells ---------- */
.l-main{
  /* 元サイトは 31px タイルのグリッド画像。ここではCSSで等価再現 */
  background-image:
    linear-gradient(to right, rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size:31px 31px;
  background-position:top center;
}

/* Header: 画面右上に固定。左下だけ角丸（非対称） */
.l-header{ position:fixed; top:0; right:0; z-index:10 }
.btn-menu{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:var(--c-primary-dark); width:50px; height:50px;
  border:0; border-radius:0 0 0 8px; cursor:pointer; padding:0;
}
.btn-menu .icon{ display:flex; width:28px; height:25px; margin:0 auto; position:relative }
.btn-menu .icon .line{
  position:absolute; inset:0; margin:auto; width:100%; height:2px;
  background:var(--c-white); transition:.5s ease;
}
.btn-menu .icon .line:nth-child(1){ transform:translateY(-6px) }
.btn-menu .icon .line:nth-child(3){ transform:translateY(6px) }
.btn-menu::after{
  content:"MENU"; font-family:var(--font-en); font-weight:600;
  font-size:.625rem; color:var(--c-white); transition:.5s ease;
}
.open .btn-menu .icon .line:nth-child(1){ transform:translateY(0) rotate(45deg) }
.open .btn-menu .icon .line:nth-child(2){ width:0 }
.open .btn-menu .icon .line:nth-child(3){ transform:translateY(0) rotate(-45deg) }
.open .btn-menu::after{ content:"CLOSE" }
@media screen and (min-width:769px){
  .btn-menu{ width:110px; height:107px; border-radius:0 0 0 15px }
  .btn-menu .icon{ width:40px; height:33px }
  .btn-menu .icon .line:nth-child(1){ transform:translateY(-8px) }
  .btn-menu .icon .line:nth-child(3){ transform:translateY(8px) }
  .btn-menu::after{ font-size:.875rem }
}

/* Drawer: 右から 492px 幅で全高スライドイン */
.global-navigation{
  position:fixed; top:0; right:-492px; max-width:492px; width:100%; height:100dvh;
  background:var(--c-primary-dark); z-index:9; opacity:0; transition:.5s ease;
  box-shadow:-10px 0 10px -15px #000; padding:40px 20px 0;
}
.open .global-navigation{ right:0; opacity:1 }
.global-navigation .nav{ width:fit-content; margin:0; height:100%; overflow:auto }
.global-navigation .nav ul{ padding:20px 0 100px }
.global-navigation .nav li + li{ margin-top:30px }
.global-navigation .nav a{ text-decoration:none; display:block }
.global-navigation .nav a span{ display:block; color:var(--c-white) }
.global-navigation .nav a .jp{ font-size:1.4375rem; font-weight:bold }
.global-navigation .nav a .en{ font-size:.75rem; font-family:var(--font-en); font-weight:600; letter-spacing:.05em }
@media screen and (min-width:769px){
  .global-navigation{ padding-top:80px }
  .global-navigation .nav{ margin:auto }       /* PCのみ上下左右センタリング */
  .global-navigation .nav li + li{ margin-top:40px }
  .global-navigation .nav a .jp{ font-size:1.625rem }
}

/* ---------- 5. mod-site_brand（ロゴピル） ----------
   DOM順は logo → name。区切り線は ::before だが order:2 で「間」に割り込ませる。 */
.mod-site_brand{
  display:flex; align-items:center; width:fit-content;
  border-radius:23px; padding:8px 24px; background:var(--c-primary); color:var(--c-white);
}
.mod-site_brand::before{
  order:2; content:""; display:block; width:1px; min-width:1px; height:16px;
  background:var(--c-white); margin:0 10px;
}
.mod-site_brand .logo{ order:1; width:50px; aspect-ratio:4.1215; line-height:0 }
.mod-site_brand .logo svg{ width:100%; height:auto }
.mod-site_brand .name{ order:3; font-size:.875rem; line-height:1; font-weight:bold }
@media screen and (min-width:769px){
  .mod-site_brand::before{ height:26px; margin:0 12px }
  .mod-site_brand .logo{ width:82.43px }
  .mod-site_brand .name{ font-size:1.5rem }
}

/* ---------- 6. Main Visual ---------- */
.mod-main_visual{ padding:50px 0 40px }
@media screen and (min-width:769px){ .mod-main_visual{ padding:100px 0 80px } }

@media screen and (max-width:768px){
  .mod-main_visual .mod-site_brand{ margin-inline:auto }  /* SPのみ中央寄せ */
}

.com-site_name{
  font-family:var(--font-display); font-weight:600;
  font-size:10.6666666667vw; line-height:1.25; letter-spacing:.005em;
  color:var(--c-primary); text-align:center; margin-top:20px;
}
.mod-main_visual .lead{ font-size:.9375rem; line-height:1.75; margin-top:25px; font-weight:bold }
@media screen and (min-width:769px){
  .com-site_name{ text-align:left; margin-top:40px; font-size:8.75vw; line-height:.8412698413 }
  .mod-main_visual .lead{ font-size:1.0625rem; margin-top:45px }
}
@media screen and (min-width:1441px){ .com-site_name{ font-size:7.875rem } }

/* --- KV画像: コンテナを無視して右端まで抜ける（左だけインセット） --- */
.mod-main_visual .img_wrap{ overflow-x:clip }
/* 中身が絶対配置のみ＝高さ0。画像のmargin-topが素通り(margin collapse)するため、
   このcontainerの上辺は結果的に「画像の上辺」と一致する。サークルの基準点になる。 */
.mod-main_visual .img_wrap > .container{ position:relative; z-index:1 }

.mod-main_visual .img{
  margin-top:var(--kv-mt);
  margin-left:auto;                       /* ← 右端に張り付く */
  width:calc(100% - var(--kv-inset));
  border-radius:var(--kv-radius) 0 0 var(--kv-radius);  /* 左角のみ丸い */
  overflow:hidden;
}
@media screen and (min-width:769px){
  .mod-main_visual .img{ width:93.0555555556% }
}
@media screen and (min-width:1341px){
  .mod-main_visual .img{ width:calc(100% - 100px) }
}
.mod-main_visual .img > div{
  padding-top:80%;                        /* SPは縦長 4:5 */
  background:var(--c-tint) center / cover no-repeat;
}
@media screen and (min-width:769px){
  .mod-main_visual .img > div{
    padding-top:44.776119403%;             /* PCは横長 約2.23:1 */
    background-position:center left;       /* PCは左寄せトリミング */
  }
}

/* --- SCROLLサークル: 円の「中心」が画像の上辺にちょうど乗って重なる --- */
.mod-main_visual .scroll{
  position:absolute; right:20px;                  /* containerの右端から20px内側 */
  top:calc(-1 * var(--circle) / 2);               /* = 半径ぶん上へ＝中心が画像上辺 */
  width:var(--circle); height:var(--circle); display:block;
}
.mod-main_visual .scroll .circle{
  position:absolute; inset:0; width:100%; height:100%;
  animation:rotate 5s linear infinite;
}
.mod-main_visual .scroll .circle svg{ width:100%; height:auto }
.mod-main_visual .scroll .circle text{ font-family:var(--font-en); font-size:9px; font-weight:600; fill:var(--c-primary); letter-spacing:1px }
.mod-main_visual .scroll .arrow{
  position:absolute; inset:0; margin:auto;
  width:20px; aspect-ratio:.9496336996;
}
@media screen and (min-width:769px){ .mod-main_visual .scroll .arrow{ width:31.11px } }
.mod-main_visual .scroll .arrow svg{ width:100%; height:auto }
@keyframes rotate{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }

/* ---------- 7. mod-ank_content（3枚アンカーカード） ----------
   「下ボーダー」を厚く取り、その中に .more を絶対配置＝バーに見せる手口。 */
.mod-ank_content{ padding-top:40px }
.mod-ank_content li{
  width:100%; background:var(--c-tint);
  border:solid var(--c-primary);
  border-width:2px 2px var(--ank-bar) 2px;   /* ← 下だけ 35px / 48px */
  border-radius:10px;
}
.mod-ank_content li + li{ margin-top:20px }
.mod-ank_content li a{
  position:relative; display:flex; align-items:center; height:100%;
  text-decoration:none; padding:20px 20px 15px;             /* 上20 / 下15 の非対称 */
}
.mod-ank_content li a .tit{ order:2; font-size:1.125rem; font-weight:bold }
.mod-ank_content li a .icon{ order:1; flex:none; width:100%; max-width:60px; aspect-ratio:1.1664899258; margin-right:20px }
.mod-ank_content li a .icon.u-oc{ max-width:55px; aspect-ratio:1.0722710701 }
.mod-ank_content li a .icon > span{ display:block; width:100%; height:100%; background:center / contain no-repeat }
.mod-ank_content li a .icon img,
.mod-ank_content li a .icon svg{ width:100%; height:auto }
.mod-ank_content li a .more{
  position:absolute; bottom:var(--ank-bar-offset); left:0; width:100%;
  font-size:.9375rem; line-height:1.5555555556; font-weight:bold;
  padding:5px 35px 5px 15px;                 /* 右35 / 左15 ← 矢印ぶんだけ右を空ける */
  text-align:left; color:var(--c-white);
}
.mod-ank_content li a .more::after{
  content:""; position:absolute; top:0; bottom:0; right:20px; margin:auto;
  display:block; width:15px; height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2l7 6-7 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media screen and (min-width:769px){
  .mod-ank_content{ display:flex; justify-content:space-between; padding-top:80px }
  .mod-ank_content li{ width:31.2096774194%; transition:.5s ease }  /* 3×31.21% + 2×3.19%隙間 */
  .mod-ank_content li + li{ margin-top:0 }
  .mod-ank_content li:hover{ background:var(--c-white) }
  /* flexを解除 → DOM順(tit → icon)がそのまま縦積みになる = SPと上下逆転 */
  .mod-ank_content li a{ display:block; text-align:center; padding:40px 20px 35px }
  .mod-ank_content li a .tit{ font-size:1.375rem; margin-bottom:30px }
  .mod-ank_content li a .icon{ max-width:110px; margin-inline:auto }
  .mod-ank_content li a .icon.u-oc{ max-width:100px }
  .mod-ank_content li a .more{ font-size:1.125rem; padding:10px 35px 10px 20px }
}

/* ---------- 8. mod-heading（セクション帯） ---------- */
.mod-heading{
  padding:40px 20px; background:var(--c-primary);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 14px, transparent 14px 28px);
  background-size:auto 250%; background-position:top center;
}
.mod-heading .icon{
  max-width:122.49px; width:20%; aspect-ratio:1.1665714286;
  margin:0 auto 20px; background:center / contain no-repeat;
  background-image:var(--icon-woc);
}
.mod-heading .icon.u-wc{ background-image:var(--icon-wc) }
.mod-heading .icon.u-oc{ max-width:112.59px; width:18.6666666667%; aspect-ratio:1.0722857143; background-image:var(--icon-oc) }
.mod-heading .title{ text-align:center; color:var(--c-white) }
.mod-heading .title .jp{ font-size:2rem; font-weight:bold; line-height:1.2 }
.mod-heading .title .en{ font-size:1.125rem; font-family:var(--font-en); font-weight:700; letter-spacing:.05em; margin-top:8px }
@media screen and (min-width:769px){
  /* SP: アイコン上／文字下・中央揃え → PC: アイコン左／文字右・左揃え（90度転換） */
  .mod-heading{ padding:90px 20px; display:flex; justify-content:center; background-size:110% auto }
  .mod-heading .icon{ margin:0 60px 0 0 }
  .mod-heading .title{ text-align:left }
  .mod-heading .title .jp{ font-size:3.5rem }
  .mod-heading .title .en{ font-size:1.25rem; margin-top:0 }
}

/* ---------- 9. mod-heading02（セクション見出し） ---------- */
.mod-heading02{ text-align:center; margin-bottom:30px }
.mod-heading02 .jp{ font-size:1.875rem; font-weight:bold }
.mod-heading02 .en{
  font-size:.875rem; margin-top:5px; font-family:var(--font-en);
  font-weight:600; letter-spacing:.05em; color:var(--c-primary);
}
@media screen and (min-width:769px){
  .mod-heading02{ margin-bottom:60px }
  .mod-heading02 .jp{ font-size:3.125rem }
  .mod-heading02 .en{ font-size:1rem; margin-top:10px }
}

/* ---------- 10. mod-flow_list ----------
   SP: 横並び1行（丸左／テキスト右）  PC: 4カラム縦積み（丸上／テキスト下） */
.mod-flow_list{ counter-reset:flow }
.mod-flow_list li{
  counter-increment:flow; display:flex; align-items:center; justify-content:space-between;
}
.mod-flow_list li + li{ margin-top:20px }
.mod-flow_list li .img{
  width:80px; aspect-ratio:1; border-radius:100px; background:var(--c-tint);
  position:relative; z-index:0;
}
.mod-flow_list li .img::before{
  content:counter(flow, decimal-leading-zero);
  position:absolute; top:-7px; left:0; z-index:2;    /* ← 円の上辺から7px飛び出す */
  font-size:1.25rem; font-family:var(--font-en); font-weight:600; color:var(--c-primary);
}
.mod-flow_list li .img > div{
  position:absolute; inset:0; margin:auto; z-index:1;
  width:59%; aspect-ratio:1.18; background:center / contain no-repeat;
}
.mod-flow_list li .text{
  width:calc(100% - 100px);   /* 80px + 20px の余りしか取らない＝右に遊びが残る */
  font-size:1rem; font-weight:bold;
  margin-top:13px;            /* align-items:center なのに13px下げる＝わざとの縦ズレ */
}
@media screen and (min-width:769px){
  .mod-flow_list{
    display:flex; justify-content:center; flex-wrap:wrap;
    margin:-1.1403508772%;                        /* コンテナより13px外へはみ出す */
  }
  .mod-flow_list li{ display:block; width:22.7272727273%; margin:1.114922813% }
  .mod-flow_list li + li{ margin-top:1.114922813% }
  .mod-flow_list li .img{ width:100%; max-width:200px; margin:auto }
  .mod-flow_list li .img::before{ top:0; left:0; font-size:2.5rem }  /* PCでは円内に収まる */
  .mod-flow_list li .text{ width:100%; text-align:center; margin-top:13px }
}

/* ---------- 11. mod-feature ----------
   PC: テキスト左(51.06% / 内側padding 80px) ＋ 画像右(48.94% / padding 0)
   → 左右で内側余白が非対称。画像はカード右端まで抜ける。 */
.mod-feature{
  counter-reset:feature; background:var(--c-tint);
  padding:40px 20px 50px; border-radius:10px;
}
.mod-feature .item{
  counter-increment:feature; max-width:960px; margin-inline:auto;
  background:var(--c-white); border-top:3px solid var(--c-primary);
  padding:25px 0 30px; border-radius:0 0 10px 10px;   /* 上角は直角、下角のみ丸い */
}
.mod-feature .item + .item{ margin-top:30px }
.mod-feature .item .tag{
  padding:7px 15px; width:fit-content; margin-inline:auto;
  font-family:var(--font-en); font-weight:600; font-size:1rem;
  color:var(--c-white); background:var(--c-primary); border-radius:24px;
}
.mod-feature .item .tag::after{ content:" " counter(feature, decimal-leading-zero) }
.mod-feature .item .img{ width:100% }
.mod-feature .item .img img{ width:100%; display:block }
.mod-feature .item .img .ph{ width:100%; aspect-ratio:1.5; background:var(--c-tint) center / cover no-repeat }
.mod-feature .item .detail{ width:100%; padding:0 15px }
.mod-feature .item .detail .tit{ font-size:1.25rem; font-weight:bold }
.mod-feature .item .detail .txt{ margin-top:10px; line-height:1.75; font-size:.875rem }
@media screen and (min-width:769px){
  .mod-feature{ padding:80px 20px 100px; border-radius:20px }
  .mod-feature .item{ display:flex }
  .mod-feature .item .tag{ font-size:1.1875rem; margin:0 0 30px }   /* PCは左寄せ */
  .mod-feature .item .img{ order:2; width:48.9361702128% }
  .mod-feature .item .detail{ order:1; width:51.0638297872%; padding:50px 0 60px 80px }
  .mod-feature .item .detail .tit{ font-size:2.125rem }
  .mod-feature .item .detail .txt{ margin-top:28px; font-size:1rem }
}

/* ---------- 12. mod-faq（アコーディオン） ---------- */
.mod-faq{ background:var(--c-tint); padding:18px; border-radius:10px }
.mod-faq + .mod-faq{ margin-top:20px }
.mod-faq dt,.mod-faq dd{ display:flex; justify-content:space-between; align-items:baseline }
.mod-faq dt::before,.mod-faq dd::before{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-weight:600; font-size:1.25rem;
  width:30px; height:30px; min-width:30px; border-radius:25px; border:1px solid var(--c-primary);
}
.mod-faq dt span,.mod-faq dd span{ width:calc(100% - 40px) }  /* 30px+10pxの遊び */
.mod-faq dt{ position:relative; font-size:1.0625rem; padding-right:25px; cursor:pointer }
.mod-faq dt::before{ content:"Q"; background:var(--c-primary); color:var(--c-white) }
.mod-faq dd{ font-size:1rem; line-height:1.75; padding-top:20px; padding-bottom:15px }
.mod-faq dd::before{ content:"A"; background:var(--c-white); color:var(--c-primary) }
.mod-faq dt i{ position:absolute; top:8px; right:0; width:15px; height:15px }
.mod-faq dt i::before,.mod-faq dt i::after{
  content:""; position:absolute; inset:0; margin:auto; display:block;
  width:15px; height:2px; background:var(--c-primary); transition:.5s ease;
}
.mod-faq dt i::before{ transform:rotate(180deg) }
.mod-faq dt i::after { transform:rotate(270deg) }
.mod-faq dt.current i::before,.mod-faq dt.current i::after{ transform:rotate(0) }
.mod-faq dd.js-acd_content{ display:none }   /* 初期状態は閉じる（JSがinline styleで開閉） */
@media screen and (min-width:769px){
  .mod-faq{ padding:22px }
  .mod-faq dt::before,.mod-faq dd::before{ font-size:1.3125rem; width:36px; height:36px; min-width:36px }
  .mod-faq dt span,.mod-faq dd span{ width:calc(100% - 54px) }  /* 36px+18pxの遊び */
  .mod-faq dt{ font-size:1.25rem; padding-right:20px }
  .mod-faq dt i,.mod-faq dt i::before,.mod-faq dt i::after{ width:20px }
  .mod-faq dt i{ height:20px }
  .mod-faq dd{ font-size:1rem; padding-top:27px; padding-bottom:23px }
}

/* ---------- 13. mod-action_block ----------
   上padding 65/86px に対し下padding 30/50px ＝ 約2倍の頭上余白。
   ::before アイコンが枠線の外へ半分はみ出す。 */
.mod-action_block{
  width:100%; border:2px solid var(--c-primary); border-radius:15px;
  background:var(--c-cream); padding:65px 20px 30px; text-align:center;
}
.mod-action_block ~ .mod-action_block{ margin-top:80px }
.mod-action_block .jp{ font-size:1.75rem; font-weight:bold; line-height:1.2 }
.mod-action_block .en{
  margin-top:5px; font-size:.9375rem; font-family:var(--font-en); font-weight:600; color:var(--c-primary);
}
.mod-action_block .more{
  max-width:260px; display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; font-weight:bold; font-size:.875rem;
  padding:9px 9px 9px 30px;              /* 左30 / 右9 ＝ 矢印円のぶん右を詰める */
  border-radius:32px; background:var(--c-cta); color:var(--c-white);
  margin:30px auto 0;
}
.mod-action_block .more i{ width:30px; aspect-ratio:1; line-height:0 }
.mod-action_block .more i svg{ width:100%; height:auto }
.mod-action_block.u-woc,.mod-action_block.u-wc{ position:relative; z-index:0 }
.mod-action_block.u-woc::before,.mod-action_block.u-wc::before{
  content:""; display:block; position:absolute;
  top:calc(-1 * var(--act-icon-out)); left:0; right:0; margin-inline:auto;
  max-width:85px; aspect-ratio:1.1665882353;
  background:center / contain no-repeat;
}
.mod-action_block.u-woc::before{ background-image:var(--icon-woc) }
.mod-action_block.u-wc::before { background-image:var(--icon-wc)  }
/* 単独設置時は、はみ出したアイコンぶんだけ自分を下げる */
.mod-action_block.u-woc:only-child,.mod-action_block.u-wc:only-child{ width:100%; margin-top:var(--act-icon-out) }
@media screen and (min-width:769px){
  .mod-action_block{ width:48.3870967742%; padding:86px 20px 50px }  /* 2カラム時：隙間3.23% */
  .mod-action_block ~ .mod-action_block{ margin-top:0 }
  .mod-action_block .jp{ font-size:2.7777777778vw }
  .mod-action_block .en{ font-size:1rem }
  .mod-action_block .more{ max-width:286px; font-size:1.125rem; margin-top:40px }
  .mod-action_block .more i{ width:40px }
  .mod-action_block.u-woc::before,.mod-action_block.u-wc::before{ max-width:99.16px }
}
@media screen and (min-width:1441px){ .mod-action_block .jp{ font-size:2.5rem } }

/* ---------- 14. mod-action_links（2枚並べる帯） ---------- */
.mod-action_links{
  padding:80px 0 40px;      /* 上が下の2倍 */
  background:var(--c-tint);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 16px, transparent 16px 32px);
  background-size:110% auto; background-position:top center;
}
@media screen and (min-width:769px){
  .mod-action_links{ padding:120px 0 80px; background-size:cover }
  .mod-action_links .col2{ display:flex; justify-content:space-between }
}

/* ---------- 15. mod-label_img（全幅の帯写真） ----------
   縦トリミングは中央ではなく「下から15%」基準。SPは高さ2倍近い。 */
.mod-label_img > div{
  padding-top:40%;
  background:var(--c-tint) center bottom 15% / cover no-repeat;
}
@media screen and (min-width:769px){ .mod-label_img > div{ padding-top:20.8333333333% } }

/* ---------- 16. mod-links_card（学科カード） ----------
   ネガティブマージン式ガター。SPは左右にもmarginが付き、
   コンテナ内側でさらに15px内側へ落ちる（＝二重インセット）。 */
.mod-links_card{ display:flex; flex-wrap:wrap; justify-content:center; margin:-4.4776119403% 0 }
.mod-links_card li{ width:100%; margin:4.4776119403% }
.mod-links_card li .card .name{
  padding:14px 10px; font-size:1.125rem; color:var(--c-white); background:var(--c-primary);
  font-weight:bold; text-align:center; border-radius:10px 10px 0 0;
}
.mod-links_card li .card .img{
  display:block; overflow:hidden; border-radius:0 0 10px 10px; aspect-ratio:1.5;
}
.mod-links_card li .card .img > div{ width:100%; height:100%; background:var(--c-tint) center / cover no-repeat }
.mod-links_card li .more{
  display:flex; align-items:center; justify-content:space-between; text-decoration:none;
  font-weight:bold; font-size:.875rem;
  padding:10px 10px 10px 30px;    /* 左30 / 右10 */
  border-radius:32px; background:var(--c-tint); margin-top:15px;
}
.mod-links_card li .more i{ width:30px; aspect-ratio:1; line-height:0 }
.mod-links_card li .more i svg{ width:100%; height:auto }
.mod-links_card li .more i svg rect{ fill:var(--c-primary) }
@media screen and (min-width:669px){
  .mod-links_card{ margin:-2.6007802341% }
  .mod-links_card li{ width:44.9934980494%; margin:2.4721878863% }   /* 2カラム */
  .mod-links_card li .card .name{ padding:18px 10px; font-size:1.375rem }
  .mod-links_card li .more{ font-size:1.125rem; padding:10px 10px 10px 40px; margin-top:25px }
  .mod-links_card li .more i{ width:44px }
}
@media screen and (min-width:869px){
  .mod-links_card{ margin:-1.6129032258% }
  .mod-links_card li{ width:30.1953125%; margin:1.5625% }            /* 3カラム */
}

/* ---------- 17. mod-oc_list（来校型OCカード / 記事0件時は空） ---------- */
.mod-oc_list{ display:flex; flex-wrap:wrap; margin:0 }
.mod-oc_list li{ width:100%; margin:0 0 30px }
.mod-oc_list li .img{ position:relative; display:block; aspect-ratio:1.5; overflow:hidden; border-radius:10px }
.mod-oc_list li .img::before{ content:""; position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.05) }
.mod-oc_list li .img > div{ width:100%; height:100%; background:var(--c-tint) center / cover no-repeat }
.mod-oc_list li .title{ margin:10px 0 5px; font-size:1rem; font-weight:bold }
.mod-oc_list li .deta-time{ display:flex; flex-wrap:wrap; align-items:baseline; margin-bottom:10px }
.mod-oc_list li .deta-time .day{ font-size:1.75rem; font-weight:bold }
.mod-oc_list li .deta-time .day small{ font-size:1rem; font-weight:bold; margin-left:3px; margin-right:10px }
.mod-oc_list li .deta-time .times{ font-size:1rem; font-weight:bold }
.mod-oc_list li .tags{ display:flex; flex-wrap:wrap; margin:-2px; font-size:.6875rem; font-weight:bold; line-height:1 }
.mod-oc_list li .tags span{ margin:2px; padding:4px 15px; border:1px solid var(--c-primary); border-radius:16px; background:var(--c-tint) }
.mod-oc_list li .target{ font-size:.8125rem; margin-top:12px }
@media screen and (min-width:669px){
  .mod-oc_list{ margin:-2.6007802341% }
  .mod-oc_list li{ width:44.9934980494%; margin:2.4721878863% }
  .mod-oc_list li .title{ font-size:1.125rem }
  .mod-oc_list li .deta-time .day{ font-size:2.125rem }
}
@media screen and (min-width:869px){
  .mod-oc_list{ margin:-1.6129032258% }
  .mod-oc_list li{ width:30.1953125%; margin:1.5625% }
}

/* ---------- 18. Footer ---------- */
.l-footer{ background:var(--c-primary); padding:40px 0 50px }
.l-footer .site-brand{ font-size:.8125rem }
.l-footer .site-brand .logo{ width:123.64px; display:block; margin-inline:auto }
.l-footer .site-brand .logo svg{ width:100%; height:auto }
.l-footer .site-brand .address{
  text-align:center; margin-top:40px; color:var(--c-white);
  line-height:1.6153846154; letter-spacing:.025em;
}
.l-footer .site-brand .address a{ color:var(--c-white) }
.l-footer .nav{ display:none }
.l-footer .copy{ display:block; text-align:center; color:var(--c-white); font-size:.75rem; margin-top:30px }
@media screen and (min-width:769px){
  .l-footer{ padding:80px 0 }
  .l-footer .col2{ display:flex; justify-content:space-between }
  .l-footer .site-brand .logo{ margin-left:0 }
  .l-footer .site-brand .address{ text-align:left }
  .l-footer .nav{ display:block }
  .l-footer .nav ul{ display:flex; margin:0 -15px }
  .l-footer .nav li{ margin:0 15px }
  .l-footer .nav a{ font-size:1.614530777vw; font-weight:bold; text-decoration:none; color:var(--c-white) }
  /* コピーライトを1行ぶん引き上げて、左カラムの最終行と高さを揃える */
  .l-footer .copy{ text-align:right; margin-top:-1em }
}
@media screen and (min-width:991px){ .l-footer .nav a{ font-size:1rem } }

/* ---------- 19. Motion ---------- */
.m-fade  { opacity:0; transition:1s }
.m-fade.in{ opacity:1 }
.m-fadein{ transform:translateY(10px); opacity:0; transition:1s }
.m-fadein.in{ opacity:1; transform:translateY(0) }
.m-img_scale{ overflow:hidden }
.m-img_scale > div{ transition:1s; transform:scale(1.2) }
.m-img_scale.in > div{ transform:scale(1) }
a.m-img_scale:hover > div{ transform:scale(1.2) }
.m-link01 i{ transition:.5s cubic-bezier(.68,-.55,.27,1.55) }
.m-link01:hover i{ transform:scale(1.2) }
@media (prefers-reduced-motion:reduce){
  .m-fade,.m-fadein,.m-img_scale > div,.m-link01 i{ transition:none }
  .m-fadein{ transform:none }
  .mod-main_visual .scroll .circle{ animation:none }
}

/* ---------- 20. ダミーアイコン（本番では実SVGに差し替え） ---------- */
:root{
  --icon-woc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 100'%3E%3Crect x='5' y='5' width='107' height='76' rx='9' fill='%23fff' stroke='%234fc3ac' stroke-width='6'/%3E%3Crect x='45' y='85' width='27' height='10' rx='5' fill='%234fc3ac'/%3E%3Cpath d='M58 26l24 12-24 12-24-12z' fill='%23ffd84d'/%3E%3Cpath d='M46 44v10c0 4 24 4 24 0V44' fill='none' stroke='%234fc3ac' stroke-width='5'/%3E%3C/svg%3E");
  --icon-wc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 117 100'%3E%3Crect x='5' y='5' width='107' height='76' rx='9' fill='%23fff' stroke='%234fc3ac' stroke-width='6'/%3E%3Crect x='45' y='85' width='27' height='10' rx='5' fill='%234fc3ac'/%3E%3Ccircle cx='44' cy='40' r='11' fill='%23ffd84d'/%3E%3Ccircle cx='74' cy='40' r='11' fill='%234fc3ac' opacity='.55'/%3E%3C/svg%3E");
  --icon-oc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 107 100'%3E%3Cpath d='M12 42L53 14l42 28v46a6 6 0 0 1-6 6H18a6 6 0 0 1-6-6z' fill='%23fff' stroke='%234fc3ac' stroke-width='6' stroke-linejoin='round'/%3E%3Crect x='42' y='58' width='23' height='36' fill='%23ffd84d'/%3E%3C/svg%3E");
  --icon-flow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 100'%3E%3Crect x='6' y='6' width='106' height='88' rx='10' fill='none' stroke='%234fc3ac' stroke-width='7'/%3E%3Cpath d='M30 56l20-20 18 18 20-22' fill='none' stroke='%23ffd84d' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mod-flow_list li .img > div{ background-image:var(--icon-flow) }