@charset "UTF-8";
/* =========================================================
   PASCO Top (design_C / typeC)  —  1ページ・レスポンシブ版
   Breakpoint: SP = max-width:767px / PC = 768px以上
   （既存サイト common.css と同じ基準）
   PCデザイン幅 1440px / SPデザイン幅 375px
   ========================================================= */

:root{
  --blue:        rgb(0,66,149);
  --blue-line:   rgb(51,104,170);
  --blue-light:  rgb(236,246,255);
  --blue-round:  rgb(100,181,235);
  --red:         rgb(211,31,82);
  --red-light:   rgb(255,237,242);
  --text:        rgb(51,51,51);
  --line:        rgb(220,220,220);
  --maxw:        1440px;
  --gutter:      clamp(20px, 8.33vw, 120px);   /* 1440時 120px */
  --ff-base: 'Yu Gothic Medium', YuGothic, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --ff-serif:'Noto Serif JP', serif;
  --ff-en:   'Poppins', sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  position:relative;
  margin:0;
  font-family:var(--ff-base);
  color:#000;
  background:#fff;
  -webkit-font-smoothing:antialiased;
  line-height:1.3;
  overflow-x:hidden;
}
img{ max-width:100%; vertical-align:top; }
a{ color:inherit; text-decoration:none; }
a:hover{ color:inherit; }
h1,h2,p{ margin:0; }
[hidden]{ display:none !important; }

/* 表示切替（既存サイト踏襲） ----------------------------- */
.sp-only{ display:none !important; }
@media (max-width:767px){
  .pc-only{ display:none !important; }
  .sp-only{ display:flex !important; }
  .pc-br{ display:none; }
  .pc-br1366{ display:none; }
  .pc-br1114{ display:none; }
}
@media (min-width:1366px){
  .pc-br1366{ display:none; }
}
@media (min-width:1114px){
  .pc-br1114{ display:none; }
}

/* 共通コンテナ ------------------------------------------- */
.cwrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 共通パーツ：英字ラベル＋線 / 明朝見出し ---------------- */
.clabel{
  display:flex; align-items:center; gap:15px;
  font-family:var(--ff-en); font-weight:500; font-size:16px;
  letter-spacing:.1em; line-height:1.3; color:var(--blue);
}
.clabel::after{ content:""; display:block; width:40px; height:1px; background:var(--blue); }
.ch2{
  margin-top:20px;
  font-family:var(--ff-serif); font-weight:700; font-size:36px;
  line-height:1.3; letter-spacing:.1em; color:#000;
}

/* 共通パーツ：右向き矢印の白丸 --------------------------- */
.carrow{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; background:#fff; color:var(--blue);
}
.carrow svg{ width:8px; height:4px; transform:rotate(-90deg); }

/* 共通パーツ：一覧を見る -------------------------------- */
.cmore{
  position:relative; flex:none;
  display:flex; align-items:center; justify-content:center;
  width:180px; height:38px; border-radius:4px;
  background:#fff; border:1px solid var(--blue);
  font-size:14px; font-weight:700; color:var(--blue);
  transition:background .2s;
}
.cmore:hover{ color:var(--blue); background:var(--blue-light); }
.cmore svg{ position:absolute; right:11px; top:50%; width:8px; height:4px; margin-top:-2px; transform:rotate(-90deg); }

/* =========================================================
   ヒーロー背景（上下反転＋下端フェード）
   ========================================================= */
.chero-bg{
  position:absolute; left:0; top:0; z-index:0;
  width:100%; height:clamp(1000px, 125vw, 1800px);
  overflow:hidden; pointer-events:none;
}
.chero-bg::before{
  content:""; position:absolute; inset:0;
  background:var(--bg) center / cover no-repeat;
  transform:rotate(180deg);
  opacity:.2;   /* 不透明度20% */
}
.chero-bg::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:300px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
}

.cmain, .cfooter{ position:relative; z-index:10; }

/* =========================================================
   ヘッダー
   ========================================================= */
.cheader{ position:relative; z-index:30; }
.cheader__inner{
  position:relative;
  max-width:var(--maxw); margin-inline:auto;
  height:100px; padding:10px clamp(20px, 2.78vw, 40px) 0;
  display:flex; align-items:flex-start; justify-content:space-between;
}
.cheader__logo{ display:block; margin-top:20px; }
.cheader__logo img{ display:block; width:clamp(140px, 12.85vw, 185px); height:auto; aspect-ratio:185 / 50; }

.cheader__right{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
.cheader__util{ display:flex; align-items:center; height:40px; }

/* 言語切替 */
.clang{ display:flex; align-items:center; }
.clang__item{
  width:32px; height:22px; border-radius:2px;
  font-size:14px; font-weight:500; line-height:22px; text-align:center; color:var(--text);
}
.clang__item--active{ background:var(--blue); color:#fff; font-weight:700; }
.clang__item--active:hover{ color:#fff; }
.clang__sep{ width:1px; height:22px; margin:0 8px; background:rgb(200,200,200); }

/* 検索 */
.csearch{
  position:relative; width:220px; height:40px; margin-left:20px;
  border-radius:20px; background:rgb(240,240,240);
}
.csearch__input{
  width:100%; height:100%; padding:0 44px 0 20px;
  border:0; border-radius:20px; background:transparent; outline:none;
  font-family:inherit; font-size:14px; font-weight:500; color:var(--text);
}
.csearch__input::placeholder{ color:rgb(170,170,170); }
.csearch__input:focus-visible{ box-shadow:0 0 0 2px var(--blue); }
.csearch__icon{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  display:flex; padding:4px; border:0; background:none; cursor:pointer;
}
.csearch__icon svg{ width:18px; height:18px; }

/* グローバルナビ */
.cnav{
  display:flex; align-items:center; gap:clamp(14px, 2.08vw, 30px);
  font-size:14px; font-weight:700; line-height:1.3; color:var(--text);
}
.cnav__link{ display:flex; align-items:center; gap:5px; white-space:nowrap; transition:color .2s; }
.cnav__link:hover, .cnav__link.is-active{ color:var(--blue); }
.cnav__caret{ width:8px; height:4px; color:var(--blue); transition:transform .2s; }
.cnav__link.is-active .cnav__caret{ transform:rotate(180deg); }

/* プルダウン */
.cdd{
  position:absolute; top:100px; right:clamp(20px, 2.78vw, 40px);
  width:565px; max-width:calc(100vw - 40px);
  padding:30px; border-radius:4px; background:var(--blue);
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 15px; align-content:start;
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s;
}
.cdd.is-open{ opacity:1; visibility:visible; }
.cdd a{
  padding:10px; border-bottom:1px solid var(--blue-line);
  font-size:14px; font-weight:500; line-height:1.3; color:#fff;
  transition:background .15s;
}
.cdd a:hover{ color:#fff; background:var(--blue-line); }

/* ハンバーガー（SP） */
.cburger{
  flex:none; width:40px; height:40px; padding:0; border:0; border-radius:2px;
  background:var(--blue); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:3px;
}
.cburger span{ display:block; width:12px; height:1px; background:#fff; }
.cburger--close{ display:flex; }
.cburger--close svg{ width:10px; height:10px; }

/* =========================================================
   ヒーロー：キャッチ＋PICKUP
   ========================================================= */
.chero{ max-width:var(--maxw); margin-inline:auto; }
.chero__copy{
  margin-top:40px; padding-left:clamp(40px, 11.32vw, 163px); padding-right:40px;
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:30px;
  font-family:var(--ff-serif); font-weight:700; line-height:1.3; letter-spacing:.1em; color:#000;
}
.chero__main{ font-size:clamp(32px, 3.47vw, 50px); }
.chero__sub{ font-size:clamp(22px, 2.22vw, 32px); }

/* PICKUP（PC：横アコーディオン 505 / 163） */
.cpick{
  margin-top:40px; padding:0 40px;
  height:clamp(380px, 35.07vw, 505px);
  display:flex; gap:8px;
  container-type:inline-size;   /* 横書きテキスト幅の計算（cqw）に使用 */
}
.cpick__item{
  position:relative; display:block; overflow:hidden;
  flex:163 1 0; min-width:0; height:100%;
  border-radius:4px; background:var(--bg) center / cover no-repeat;
  transition:flex-grow .8s cubic-bezier(.4,0,.2,1);
}
.cpick__item.is-open{ flex-grow:505; }
/* 閉：左端グラデ＋縦書き / 開：下端グラデ＋横書き＋矢印 */
.cpick__item::before, .cpick__item::after{
  content:""; position:absolute; left:0; pointer-events:none; transition:opacity .5s;
}
.cpick__item::before{
  top:0; width:56px; height:100%;
  background:linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
}
.cpick__item::after{
  bottom:0; width:100%; height:90px; opacity:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
}
.cpick__v{
  position:absolute; left:15px; bottom:20px; z-index:1;
  writing-mode:vertical-rl; text-orientation:upright;
  font-size:20px; font-weight:700; line-height:1; letter-spacing:1px; color:#fff; white-space:nowrap;
  transition:opacity .5s;
}
/* 横書き：幅を「開ききった時のパネル幅 − 左右余白(20+76)」に固定し、
   広がる途中でも改行位置が変わらないようにする（はみ出し分はパネルの overflow で隠れる）
   開いたパネル幅 = (並びの幅 − 隙間8px×5) × 505 / 1320 */
.cpick__h{
  position:absolute; left:20px; bottom:20px; z-index:1;
  width:calc((100cqw - 40px) * 505 / 1320 - 96px);
  font-size:clamp(18px, 1.67vw, 24px); font-weight:700; line-height:1.3; color:#fff;
  opacity:0; transition:opacity .5s;
}
.cpick__item .carrow{ position:absolute; right:20px; bottom:15px; z-index:1; opacity:0; transition:opacity .5s; }
/* 開く時：縦書きは短くフェードアウト（0.15s） → 広がり始めてすぐ横書きをフェードイン
   閉じる時：横書きは即非表示（幅が縮む途中で2行に折り返して見えるのを防ぐ）
   ※transition は「変化後の状態」の指定が使われるため、状態ごとに時間を分けている */
.cpick__item:not(.is-open)::after,
.cpick__item:not(.is-open) .cpick__h,
.cpick__item:not(.is-open) .carrow{ transition-duration:0s; }
.cpick__item.is-open::before, .cpick__item.is-open .cpick__v{ opacity:0; transition-duration:.15s; }
.cpick__item.is-open::after,
.cpick__item.is-open .cpick__h,
.cpick__item.is-open .carrow{ opacity:1; transition:opacity .6s ease .1s; }
.cpick__item:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* =========================================================
   緊急撮影バナー
   ========================================================= */
.cnotice-wrap{ max-width:var(--maxw); margin:50px auto 0; padding-inline:var(--gutter); }
.cnotice{
  display:grid; grid-template-columns:80px 1fr; column-gap:30px; align-items:start;
  min-height:140px; padding:29px 39px;
  border-radius:4px; background:var(--red-light); border:1px solid var(--red); color:var(--red);
  transition:background .2s;
}
.cnotice:hover{ color:var(--red); background:rgb(255,226,234); }
/* アイコン画像は赤い丸込みの1枚（80×80）。枠のサイズに合わせて表示 */
.cnotice__icon{ display:block; width:80px; height:80px; }
.cnotice__icon img{ display:block; width:100%; height:100%; }
.cnotice__body{ padding-top:5px; display:flex; flex-direction:column; gap:15px; }
.cnotice__title{ font-size:24px; font-weight:700; line-height:1.3; }
.cnotice__desc{ font-size:16px; font-weight:500; line-height:1.3; }

/* =========================================================
   ニュース・リリース
   ========================================================= */
.cnews{ margin-top:100px; }
.cnews__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.cnews__list{ margin-top:50px; font-size:16px; font-weight:500; color:var(--text); }
.cnews__item{
  display:flex; gap:40px; padding:21px 0 20px;
  border-bottom:1px solid var(--line);
}
.cnews__item:first-child{ padding-top:0; }
a.cnews__item:hover .cnews__text{ color:var(--blue); }
.cnews__date{ flex:none; width:100px; padding-top:4px; line-height:1.3; }
.cnews__text{ max-width:1060px; line-height:1.8; transition:color .2s; }
.cnews__badge{
  display:inline-block; width:42px; height:16px; margin-left:10px;
  border:1px solid rgb(255,0,0); border-radius:8px;
  font-family:var(--ff-en); font-size:12px; line-height:15px; text-align:center; color:rgb(255,0,9);
  vertical-align:middle; position:relative; top:-1px;
}

/* =========================================================
   展示会・セミナー
   ========================================================= */
.cexh{ margin-top:100px; }
.cexh__grid{ margin-top:50px; display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.cexh__banner{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:596 / 169; border-radius:4px;
  font-size:20px; font-weight:700; line-height:1.3; color:#fff;
}
/* 画像レイヤー：露出マイナス相当（暗く）。文字には影響させない（typeA準拠） */
.cexh__banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--bg) center / cover no-repeat;
  filter:brightness(0.6);   /* 露出（数値を下げるほど暗く） */
  transition:transform .35s ease;
}
.cexh__banner:hover{ color:#fff; }
.cexh__banner:hover::before{ transform:scale(1.1); }

/* =========================================================
   オウンドメディア（地球の学校）
   ========================================================= */
.cmedia{ margin-top:100px; }
/* claude design準拠：高さ619 / 上余白50 / 画像510×469 / 画像〜本文120（1440時） */
.cmedia__inner{
  max-width:var(--maxw); margin-inline:auto;
  min-height:619px; padding:50px var(--gutter) 0;
  border-radius:60px 60px 0 0; background:var(--blue-light);
  display:flex; gap:clamp(40px, calc((100vw - 1280px) / 2 + 40px), 120px);
}
/* <picture>内の<source>がflex項目になり余分なgapが入るのを防ぐため、picture自体をflex項目にする */
.cmedia__inner > picture{ display:block; flex:none; align-self:flex-start; }
/* 1440で510。1280まで縮めてキャッチ（36px・1行）が収まる幅を確保 */
.cmedia__img{ display:block; width:clamp(430px, calc(510px - (1440px - 100vw) / 2), 510px); height:auto; aspect-ratio:510 / 469; object-fit:contain; }
.cmedia__body{ padding-top:50px; padding-bottom:50px; min-width:0; }
.cmedia__logo{ display:block; margin-top:40px; width:326px; height:auto; aspect-ratio:326 / 50; }
.cmedia__catch{ margin-top:40px; font-size:36px; font-weight:700; line-height:1.3; color:#000; }
.cmedia__desc{ margin-top:30px; font-size:16px; font-weight:700; line-height:2; color:#000; }
.cmedia__btn{
  position:relative; margin-top:30px;
  display:flex; align-items:center; justify-content:center;
  width:260px; height:50px; border-radius:25px; background:var(--blue-round);
  font-size:16px; font-weight:700; line-height:1.3; color:#fff;
  transition:background .2s;
}
.cmedia__btn:hover{ color:#fff; background:rgb(80,163,220); }
.cmedia__btn svg{ position:absolute; right:20px; top:50%; width:12px; height:12px; margin-top:-6px; fill:#fff; }

/* =========================================================
   フッター
   ========================================================= */
.cfooter{
  padding:50px 20px 20px; background:var(--blue); color:#fff;
  display:flex; flex-direction:column; align-items:center;
}
.cfooter__logo{ display:block; width:145px; height:20px; }
.cfooter__nav{
  margin-top:30px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:15px 20px;
  font-size:12px; font-weight:700; line-height:1.3;
}
.cfooter__nav a{ display:flex; align-items:center; gap:5px; }
.cfooter__nav a:hover{ color:#fff; text-decoration:underline; }
.cfooter__nav svg{ width:8px; height:4px; transform:rotate(-90deg); }
.cfooter__copy{ margin-top:50px; font-size:12px; font-weight:500; line-height:1.3; }

/* =========================================================
   SP メニュー
   ========================================================= */
.cspmenu{
  position:fixed; inset:0; z-index:100;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--blue);
}
.cspmenu__bar{
  position:sticky; top:0; z-index:1;
  height:60px; padding:0 10px; background:#fff;
  display:flex; align-items:center; justify-content:space-between;
}
.cspmenu__logo{ display:block; width:110px; height:30px; }
.cspmenu__body{ padding:20px 20px 60px; color:#fff; }

.cspmenu__search{ position:relative; height:50px; border-radius:4px; background:#fff; }
.cspmenu__input{
  width:100%; height:100%; padding:0 48px 0 15px;
  border:0; border-radius:4px; background:transparent; outline:none;
  font-family:inherit; font-size:16px; font-weight:500; color:var(--text);
}
.cspmenu__input::placeholder{ color:rgb(170,170,170); }
.cspmenu__icon{
  position:absolute; right:11px; top:50%; transform:translateY(-50%);
  display:flex; padding:4px; border:0; background:none; cursor:pointer;
}
.cspmenu__icon svg{ width:18px; height:18px; }

.cspmenu__head{ display:block; margin-top:24px; font-size:16px; font-weight:700; line-height:1.3; }
.cspmenu__list{ margin-left:20px; font-size:14px; font-weight:500; }
.cspmenu__list a{ display:block; padding:11px 0 4px; border-bottom:1px solid var(--blue-line); line-height:1.3; }

.cspmenu__btns{ margin-top:46px; display:grid; grid-template-columns:repeat(2, 1fr); gap:5px; }
.cspmenu__btns a{
  height:41px; border-radius:4px; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:var(--blue);
}
.cspmenu__media{
  margin-top:10px; height:70px; border-radius:4px; background:rgb(210,234,250);
  display:flex; align-items:center; justify-content:center;
}
.cspmenu__media img{ display:block; width:200px; height:30px; }
.cspmenu__en{
  margin-top:10px; height:28px; border:1px solid #fff; border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500;
}

/* =========================================================
   中間幅（768〜1199px）の微調整
   ========================================================= */
@media (min-width:768px) and (max-width:1199px){
  .cpick__v{ font-size:16px; left:10px; }
  .cnotice{ grid-template-columns:64px 1fr; column-gap:20px; padding:24px 28px; min-height:0; }
  .cnotice__icon{ width:64px; height:64px; }
  .cnotice__title{ font-size:20px; }
  .cnotice__desc{ font-size:15px; }
}
/* オウンドメディア：横並びだと本文が収まらない幅は縦積み（サイズはPCデザインのまま） */
@media (min-width:768px) and (max-width:1279px){
  .cmedia__inner{ display:block; min-height:0; padding:50px 60px 0; }
  .cmedia__img{ margin:0 auto; width:510px; }
  .cmedia__body{ width:fit-content; max-width:100%; margin-inline:auto; padding-top:40px; }
}

/* =========================================================
   SP（〜767px）
   ========================================================= */
@media (max-width:767px){
  .clabel{ gap:10px; font-size:14px; }
  .ch2{ margin-top:10px; font-size:20px; }
  .cmore{ margin:30px auto 0; }

  /* 背景 */
  .chero-bg{ top:60px; height:469px; }
  .chero-bg::after{ height:78px; }

  /* ヘッダー */
  .cheader{ background:#fff; }
  .cheader__inner{ height:60px; padding:0 10px; align-items:center; }
  .cheader__logo{ margin-top:0; }
  .cheader__logo img{ width:110px; }

  /* キャッチ */
  .chero__copy{
    margin-top:0; padding:30px 20px 0;
    flex-direction:column; align-items:center; text-align:center;
  }
  .chero__main{ font-size:24px; }
  .chero__sub{ margin-top:10px; font-size:18px; }

  /* PICKUP（SP：縦アコーディオン 189 / 38） */
  .cpick{
    margin:30px 20px 0; padding:0; height:auto;
    flex-direction:column; gap:5px;
  }
  .cpick__item{ flex:none; height:38px; transition:height .7s cubic-bezier(.4,0,.2,1); }
  .cpick__item.is-open{ height:189px; }
  .cpick__item::before{
    width:100%;
    background:linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%);
  }
  .cpick__item::after{ height:50px; }
  .cpick__v{ display:none; }
  .cpick__h{ left:10px; right:50px; width:auto; bottom:10px; font-size:14px; opacity:1; }
  .cpick__item .carrow{ right:10px; bottom:4px; width:30px; height:30px; }

  /* 緊急撮影 */
  .cnotice-wrap{ margin-top:40px; padding-inline:20px; }
  .cnotice{
    grid-template-columns:45px 1fr; column-gap:10px;
    min-height:134px; padding:19px 9px;
  }
  .cnotice__icon{ width:45px; height:45px; }
  .cnotice__body{ display:contents; }
  .cnotice__title{ padding-top:0; font-size:16px; }
  .cnotice__desc{ grid-column:1 / -1; margin-top:15px; font-size:13px; }

  /* ニュース */
  .cnews{ margin-top:40px; padding-inline:20px; flex-direction:column; }
  .cnews.cwrap{ display:flex; }
  .cnews__list{ margin-top:30px; font-size:13px; }
  .cnews__item{ display:block; padding:16px 0 10px; }
  .cnews__item:first-child{ padding-top:0; }
  .cnews__date{ display:block; width:auto; padding-top:0; }
  .cnews__text{ display:block; margin-top:10px; }
  .cnews__badge{ width:38px; height:14px; margin-left:4px; font-size:10px; line-height:12px; top:0; }

  /* 展示会・セミナー */
  .cexh{ margin-top:60px; padding-inline:20px; }
  .cexh__grid{ margin-top:30px; gap:5px; }
  .cexh__banner{ aspect-ratio:auto; height:93px; font-size:14px; }

  /* オウンドメディア */
  .cmedia{ margin-top:60px; }
  /* claude design準拠：高さ660 / 上余白30 / 画像235×216 */
  .cmedia__inner{
    display:block; min-height:660px; padding:30px 20px 0;
    border-radius:30px 60px 0 0;
  }
  .cmedia__img{ margin:0 auto; width:235px; }
  .cmedia__body{ width:auto; padding:0 0 30px; }
  .cmedia__body .clabel{ margin-top:30px; gap:10px; font-size:16px; }
  .cmedia__logo{ margin-top:20px; width:196px; }
  .cmedia__catch{ margin-top:20px; font-size:20px; }
  .cmedia__desc{ margin-top:15px; font-size:14px; }
  .cmedia__btn{ margin:30px auto 0; }

  /* フッター */
  .cfooter{ padding:40px 20px; }
  .cfooter__copy{ margin-top:40px; font-size:10px; }
}

/* =========================================================
   SP 特例：375px未満（360px端末など）でキャッチが改行しないよう1px下げる
   ========================================================= */
@media (max-width:374px){
  .chero__main{ font-size:23px; }
}