/* ============================================================
   chiizman コーポレートサイト 共通スタイル
   見本サイト（Liberte）の実測値に合わせています。
   本文20px / コンテナは左右40px余白 / 文字色 #333 / 常に白背景
   ============================================================ */
:root{
  --ink:#333333;
  --paper:#FFFFFF;
  --paper2:#FAFAFA;
  --line:#E2E2E2;
  --accent:#D9A400;              /* ロゴのチーズ色 */
  --ph:#EFEFEF;                  /* 写真が入るまでの下地 */
  --dark:#2B2B2B;
  --serif:"Times New Roman",Times,"Hiragino Mincho ProN","Yu Mincho",serif;
  --gothic:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:light only;       /* 端末が暗い設定でも常に白 */
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:20px;line-height:1.6;letter-spacing:.04em;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.inner{padding:0 40px}
@media (max-width:768px){ body{font-size:16px} .inner{padding:0 20px} }

/* ---- ヘッダー ---- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;padding:0 40px;height:90px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header.on-hero{background:transparent;border-bottom:none}
.header__logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.header__logo img{height:44px;width:auto}
.header__logo b{font-family:var(--gothic);font-weight:500;font-size:16px;letter-spacing:.18em}
.gnav{margin-left:auto;display:flex;align-items:center;gap:40px}
.gnav a{font-family:var(--gothic);font-size:15px;letter-spacing:.06em;text-decoration:none;
  color:var(--ink);transition:color .2s}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--accent)}
.navbtn{display:none;margin-left:auto;background:none;border:1px solid var(--ink);
  font-family:var(--gothic);font-size:13px;letter-spacing:.1em;padding:10px 16px;cursor:pointer;color:var(--ink)}
@media (max-width:900px){
  .header{height:70px;padding:0 20px}
  .header__logo img{height:36px}
  .gnav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:0 20px 16px}
  .gnav.open{display:flex}
  .gnav a{padding:16px 0;border-top:1px solid var(--line);font-size:16px}
  .navbtn{display:block}
}

/* ---- メインビジュアル（見本と同じ 100vh の全面ビジュアル） ---- */
.mv{position:relative;height:100vh;min-height:560px;display:flex;align-items:center;
  background:var(--ph) center/cover no-repeat;overflow:hidden}
.mv::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28)}
.mv__inner{position:relative;z-index:2;width:100%}
.mv__hero{margin:0;font-family:var(--gothic);font-weight:700;color:#fff;
  font-size:72px;line-height:1.4;letter-spacing:.1em}
.mv__hero span{display:block}
.mv__note{position:absolute;left:40px;bottom:40px;z-index:2;font-family:var(--gothic);
  font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.8)}
@media (max-width:1100px){ .mv__hero{font-size:52px} }
@media (max-width:768px){ .mv{height:82vh}.mv__hero{font-size:26px;line-height:1.6;letter-spacing:.06em} }
@media (max-width:400px){ .mv__hero{font-size:23px;letter-spacing:.04em} }


/* ---- 明るいヒーロー（白背景の写真に黒文字を載せる形） ---- */
/* ヘッダーは position:fixed なので、その高さ（PC 90px / スマホ 70px）を足しています */
.mv--light{height:auto;min-height:0;display:block;background:#fff;
  padding:calc(90px + clamp(28px,4vw,54px)) 0 0;overflow:hidden}
.mv--light::after{display:none}
.mv--light .mv__inner{position:relative;z-index:2}
.mv--light .mv__hero{color:var(--ink);text-align:center;letter-spacing:.08em}
.mv__art{display:block;width:100%;max-width:1100px;height:auto;margin:clamp(18px,3vw,34px) auto 0}
@media (max-width:768px){
  .mv--light{padding-top:calc(70px + 26px)}
  .mv--light .mv__hero{font-size:23px;line-height:1.7;letter-spacing:.04em}
  .mv__art{margin-top:14px}
}

/* ---- セクション見出し（英語60px＋日本語の小見出し） ---- */
.sec-ttl{margin:0 0 40px;display:flex;flex-direction:column-reverse;align-items:flex-start}
.sec-ttl b{font-family:var(--serif);font-weight:700;font-size:60px;line-height:1.15;letter-spacing:normal}
.sec-ttl small{font-family:var(--gothic);font-size:14px;letter-spacing:.16em;color:var(--accent);
  margin-bottom:10px;display:block}
@media (max-width:768px){ .sec-ttl b{font-size:36px} .sec-ttl small{font-size:12px} }

/* ---- 共通セクション ---- */
.sec{padding:120px 0}
.sec.gray{background:var(--paper2)}
@media (max-width:768px){ .sec{padding:64px 0} }
.lede{margin:0 0 64px;max-width:44em}
.lede p{margin:0 0 1.4em}
.lede p:last-child{margin-bottom:0}

/* ---- 画像とテキストが左右交互に並ぶリスト ---- */
.altlist{display:flex;flex-direction:column;gap:60px}
.altlist li{display:flex;align-items:center;gap:56px}
.altlist li:nth-child(even){flex-direction:row-reverse}
.altlist figure{margin:0;flex:0 0 47%;aspect-ratio:3/2;background:var(--ph);overflow:hidden}
.altlist figure img{width:100%;height:100%;object-fit:cover;display:block}
.altlist .txt{flex:1}
.altlist .en{margin:0 0 6px;font-family:var(--gothic);font-size:13px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.altlist h3{margin:0 0 14px;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.4;letter-spacing:.04em}
.altlist p{margin:0}
@media (max-width:900px){
  .altlist li,.altlist li:nth-child(even){flex-direction:column;gap:22px;align-items:stretch}
  .altlist figure{flex:none;width:100%}
}

/* ---- 事業内容カルーセル（横スクロール・ライブラリ不使用） ---- */
.carousel-wrap{position:relative}
.car-btn{position:absolute;top:38%;transform:translateY(-50%);z-index:3;
  width:56px;height:56px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);cursor:pointer;padding:0;
  transition:background .2s,border-color .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.car-btn:hover:not(:disabled){background:#fff;border-color:#B9B9B9}
.car-btn:disabled{opacity:.28;cursor:default}
.car-btn::before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;
  border-top:2px solid var(--ink);border-right:2px solid var(--ink)}
.car-btn.prev{left:14px}
.car-btn.prev::before{transform:translate(-40%,-50%) rotate(-135deg)}
.car-btn.next{right:14px}
.car-btn.next::before{transform:translate(-60%,-50%) rotate(45deg)}
@media (max-width:768px){ .car-btn{width:44px;height:44px} .car-btn.prev{left:6px} .car-btn.next{right:6px}
  .car-btn::before{width:9px;height:9px} }
.carousel{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0 40px 28px;scrollbar-width:thin}
.carousel::-webkit-scrollbar{height:6px}
.carousel::-webkit-scrollbar-thumb{background:#CFCFCF;border-radius:3px}
.slide{flex:0 0 553px;max-width:86vw;scroll-snap-align:center;
  display:flex;flex-direction:column;gap:20px}
.slide figure{margin:0;aspect-ratio:553/330;background:var(--ph);overflow:hidden}
.slide figure img{width:100%;height:100%;object-fit:cover;display:block}
.slide h3{margin:0;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.4}
.slide .en{margin:0;font-family:var(--gothic);font-size:13px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.slide p{margin:0;font-size:17px;line-height:1.75}
@media (max-width:768px){ .carousel{padding:0 20px 24px;gap:20px} }

/* ---- 下層ページの見出し ---- */
.pagehead{padding:190px 0 70px;background:var(--paper2);border-bottom:1px solid var(--line)}
@media (max-width:900px){ .pagehead{padding:130px 0 50px} }
.pagehead p{margin:22px 0 0;max-width:44em}

/* ---- 表 ---- */
.tbl-scroll{overflow-x:auto}
table.info{width:100%;border-collapse:collapse}
table.info th,table.info td{text-align:left;padding:24px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.info th{width:260px;padding-right:30px;font-weight:400;font-family:var(--gothic);font-size:16px;color:#8A8A8A}
@media (max-width:768px){
  table.info th,table.info td{display:block;padding:0}
  table.info th{width:auto;padding-top:22px}
  table.info td{padding:6px 0 22px;border-bottom:1px solid var(--line)}
  table.info th{border:none}
}



/* ---- オフィスの写真 ---- */
.officefig{margin:0}
.officeimg{width:100%;height:auto;display:block;border:1px solid var(--line)}
.officefig figcaption{margin-top:22px;font-size:18px;color:var(--ink);font-family:var(--serif);letter-spacing:.04em}
@media (max-width:768px){ .officefig figcaption{font-size:16px;margin-top:16px} }

/* ---- 取引先企業一覧（見本と同じ 2列の箇条書き） ---- */
.supply-ttl{font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.4;
  letter-spacing:.04em;margin:0 0 26px}
.supply-list{display:flex;flex-wrap:wrap;list-style:disc;padding-left:1.4em;margin:0}
.supply-list li{display:list-item;width:calc(50% - 1.4em);font-size:18px;line-height:2}
@media (max-width:768px){
  .supply-ttl{font-size:20px}
  .supply-list li{width:100%;font-size:16px}
}


/* ---- お問い合わせページのメール表示 ---- */
.contact-lbl{font-family:var(--gothic);font-size:13px;letter-spacing:.16em;color:#8A8A8A;margin:0 0 10px}
.contact-mail{margin:0 0 12px;line-height:1.35}
.contact-mail a{font-family:var(--gothic);font-weight:500;text-decoration:none;
  font-size:clamp(19px,2.6vw,27px);letter-spacing:.01em;word-break:break-all;
  border-bottom:2px solid var(--accent);padding-bottom:4px}
.contact-mail a:hover{color:var(--accent)}
.contact-note{margin:14px 0 0;font-size:15px;color:#6A6A6A}

/* ---- ボタン ---- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--gothic);font-size:16px;
  padding:20px 48px;text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:opacity .2s}
.btn:hover{opacity:.82}
.btn.ghost{background:transparent;color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:16px;margin-top:48px}

/* ---- 規約などの本文 ---- */
.doc{max-width:46em}
.doc h2{font-family:var(--serif);font-weight:700;font-size:24px;margin:48px 0 14px;line-height:1.4}
.doc h2:first-child{margin-top:0}
.doc p{margin:0 0 1.3em}
.doc ol,.doc ul{margin:0 0 1.4em;padding-left:1.5em;list-style:decimal}
.doc ul{list-style:disc}
.doc li{margin-bottom:.5em}
.doc .memo{background:#FBF3D8;border-left:4px solid var(--accent);padding:22px 26px;margin:0 0 40px;font-size:17px}

/* ---- 問い合わせ ---- */
.contactgrid{display:flex;gap:64px;flex-wrap:wrap}
.contactgrid > *{flex:1 1 340px}
.formslot{border:1px dashed #CFCFCF;min-height:520px;display:grid;place-items:center;padding:30px;
  text-align:center;color:#9A9A9A;font-family:var(--gothic);font-size:15px;background:var(--paper2)}
.contactgrid iframe{width:100%;border:0;display:block}


/* ---- 言語切り替え（ヘッダー右） ---- */
.langsw{display:flex;align-items:center;gap:2px;margin-left:26px;flex:none}
.langsw button{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--gothic);font-size:12.5px;letter-spacing:.03em;white-space:nowrap;
  background:none;border:0;color:#8E8E8E;padding:7px 10px;cursor:pointer;border-radius:2px;
  transition:color .2s, background .2s}
.langsw svg{width:18px;height:12.6px;flex:none;display:block;border-radius:1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.14);opacity:.62;transition:opacity .2s}
.langsw button:hover svg, .langsw button.on svg{opacity:1}
.langsw button:hover{color:var(--ink)}
.langsw button.on{color:var(--ink);font-weight:500;background:#F0F0F0}

/* Google翻訳の部品は画面から隠す（操作は上のボタンから行います） */
.gt-box{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
/* Googleが差し込む上部の帯を消す */
iframe.skiptranslate,.goog-te-banner-frame{display:none!important}
body{top:0!important;position:static!important}
.goog-tooltip,.goog-tooltip *,.goog-text-highlight{display:none!important;background:none!important;box-shadow:none!important}

@media (max-width:900px){
  .langsw{margin-left:auto;margin-right:4px;gap:0}
  .langsw button{padding:7px 6px;font-size:11.5px}
  .navbtn{margin-left:0;padding:9px 12px;font-size:12px}
}
@media (max-width:560px){
  /* 幅が足りないので、ロゴ横の文字は隠します（絵のロゴだけ残す） */
  .header__logo b{display:none}
  .header{padding:0 14px}
  .langsw button{padding:7px 5px;font-size:11px;gap:4px}
}
@media (max-width:460px){
  /* さらに狭いときは旗だけにする（文字は読み上げ用に残す） */
  .langsw button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .langsw button{padding:8px 6px}
  .langsw svg{width:21px;height:14.7px}
}

/* ---- フッター ---- */
.footer{background:var(--dark);color:#EDEDED;padding:80px 0 40px}
.footer a{text-decoration:none;color:rgba(237,237,237,.75)}
.footer a:hover{color:var(--accent)}
.footgrid{display:flex;gap:60px;flex-wrap:wrap}
.footgrid > *{flex:1 1 240px}
.footer img{height:52px;width:auto;margin-bottom:18px}
.footer .addr{margin:0;font-family:var(--gothic);font-size:15px;line-height:1.9;color:rgba(237,237,237,.7)}
.footer h3{font-family:var(--gothic);font-size:13px;letter-spacing:.18em;color:rgba(237,237,237,.5);
  margin:0 0 18px;font-weight:400}
.footer ul{display:flex;flex-direction:column;gap:14px;font-family:var(--gothic);font-size:15px}
.copy{margin:60px 0 0;padding-top:26px;border-top:1px solid rgba(237,237,237,.15);
  font-family:var(--gothic);font-size:13px;letter-spacing:.1em;color:rgba(237,237,237,.45)}

/* ============================================================
   印刷・PDF書き出し用
   ・写真と背景色が出るようにする
   ・カルーセルは全部たてに並べる（横スクロール分が切れないように）
   ・メニューなど、紙に不要なものを消す
   ============================================================ */
@media print{
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
  body{ font-size:11pt; }
  .header, .navbtn, .car-btn, .gt-box, .langsw{ display:none !important; }
  .footer{ background:#fff !important; color:#333 !important; border-top:1px solid #ccc; padding:20px 0 }
  .footer a{ color:#333 !important }
  .mv{ height:auto !important; min-height:0 !important; padding:60px 0 }
  .mv__hero{ font-size:26pt !important; line-height:1.4 !important }
  .pagehead{ padding:0 0 24px !important }
  .sec{ padding:26px 0 !important }
  /* 横スクロールのカルーセルを、たてに並べ直す */
  .carousel{ display:block !important; overflow:visible !important; padding:0 !important }
  .slide{ max-width:none !important; width:100% !important; page-break-inside:avoid; break-inside:avoid;
          margin-bottom:22px; display:flex !important; flex-direction:row !important; gap:20px !important;
          align-items:flex-start !important }
  .slide figure{ flex:0 0 42%; }
  /* 途中で切れてほしくないもの */
  .altlist li, .svcrow, .tl .row, table.info tr, .supply-list li{ page-break-inside:avoid; break-inside:avoid }
  .altlist li{ margin-bottom:18px }
  .sec-ttl b{ font-size:22pt !important }
  a{ text-decoration:none }
  img{ max-width:100% !important }
}