/* =========================================================
Jampopo HP - Figma SP(1:3305) 忠実実装 + レスポンシブ
レイアウト原則: 全体オートレイアウト / 中央寄せ縦積み
PC = SPカラムを画面右に固定配置・左は固定パネル
========================================================= */
/* ---------- Design Tokens ---------- */
:root{
/* color */
--black:#2D2421;
--white:#FCFCFC;
--cream:#F0E8DC;
--gray:#8D8D8D;
/* 全体背景テクスチャ（タイル敷き） */
--paper-bg:var(--cream) url("../assets/img/bg-texture.png") repeat top left;
--orange:#D56236; /* sec01 bg */
--coral:#F9936C; /* sec01 accent */
--gold:#ECB861; /* sec02 bg */
--gold-accent:#E29B24; /* sec02 accent */
--olive:#96A23F; /* sec05 bg */
--lime:#BFD23B; /* sec05 accent */
--member-accent:#B39591; /* sec04 accent */
--ig-blue:#1699E7;
/* radius / border / shadow */
--bd:2px solid var(--black);
--r-s:5px;
--r-m:7px;
--r-l:10px;
--shadow-hard:4px 4px 0 var(--black);
--shadow-soft:0 4px 10px #cfc6b9;
/* fonts */
--font-body:"LINE Seed JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
--font-jp:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
--font-en:"DM Serif Display","Times New Roman",serif;
--col:480px; /* SPカラム幅 */
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea{font:inherit;}
html{scroll-behavior:smooth;}
body{
font-family:var(--font-body);
color:var(--black);
background:var(--paper-bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* ---------- SPカラム（メイン） ---------- */
.phone{
width:100%;
max-width:var(--col);
margin-inline:auto;
background:var(--paper-bg);
overflow:hidden; /* イラストはみ出し制御 */
position:relative;
border-left:var(--bd); /* Frame 108: コンテンツ列の左右2px枠線 */
border-right:var(--bd);
}
/* =========================================================
上部ストリップ（黒帯にパターン30%）
========================================================= */
.topstrip{
height:36px;background:var(--black);overflow:hidden;display:flex;align-items:center;
}
.topstrip__track{display:flex;gap:10px;align-items:center;opacity:.3;padding-left:0;}
.topstrip__track img{height:18px;width:auto;flex:none;}
/* =========================================================
ヘッダー
========================================================= */
.header{
background:transparent; /* 下地の全体背景テクスチャを見せる */
border-top:var(--bd);border-bottom:var(--bd);
display:flex;align-items:center;justify-content:space-between;
padding:20px 32px;
}
.header__logo img{height:52px;width:auto;}
.header__menu{width:50px;height:50px;display:flex;align-items:center;justify-content:center;}
.header__menu img{width:40.5px;}
/* =========================================================
スマホ用メニューオーバーレイ（フェードイン）
========================================================= */
.menu-overlay{
position:fixed;top:0;bottom:0;left:0;right:0;
width:100%;max-width:var(--col);margin:0 auto;
background:rgba(45,36,33,.8);
display:flex;flex-direction:column;align-items:flex-end;gap:13px;
padding:24px 24px 64px;
z-index:100;
opacity:0;visibility:hidden;
transition:opacity .35s ease,visibility .35s ease;
}
.menu-overlay.is-open{opacity:1;visibility:visible;}
.menu-overlay__close{width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex:none;}
.menu-overlay__close img{width:40.5px;height:40.5px;transform:rotate(45deg);}
.menu-overlay__nav{display:flex;flex-direction:column;gap:24px;width:100%;}
.menu-overlay__nav a{
display:block;width:100%;
border-bottom:1px solid var(--white);padding-bottom:5px;
font-family:var(--font-jp);font-weight:500;font-size:24px;letter-spacing:.72px;line-height:1;
color:var(--white);
}
.menu-overlay__nav a:hover{opacity:.7;}
/* =========================================================
モーダル（フェードイン）
========================================================= */
.modal{
position:fixed;inset:0;z-index:200;
display:flex;align-items:flex-start;justify-content:center;
padding:40px 16px;overflow-y:auto;
background:rgba(45,36,33,.8);
opacity:0;visibility:hidden;
transition:opacity .35s ease,visibility .35s ease;
}
.modal.is-open{opacity:1;visibility:visible;}
.modal__card{
position:relative;background:#fff;border-radius:var(--r-l);
width:100%;max-width:440px;margin:auto;
padding:40px 24px 24px;
display:flex;flex-direction:column;gap:14px;
transform:translateY(14px);transition:transform .35s ease;
}
.modal.is-open .modal__card{transform:none;}
.modal__card--small{max-width:360px;}
.modal__close{
position:absolute;top:14px;right:14px;width:32px;height:32px;
font-size:28px;line-height:1;color:var(--black);
}
.modal__title{font-family:var(--font-jp);font-weight:700;font-size:20px;color:var(--black);}
.modal__img{width:100%;height:auto;border-radius:6px;}
.modal__lead{font-size:14px;line-height:1.7;color:var(--black);}
.modal__h{font-family:var(--font-jp);font-weight:700;font-size:16px;color:var(--black);margin-top:6px;}
.modal__list,.modal__ol{padding-left:1.3em;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.6;color:var(--black);}
.modal__list li{list-style:disc;}
.modal__ol li{list-style:decimal;}
.modal__ol--alpha{padding-left:1.3em;display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.modal__ol--alpha li{list-style:lower-alpha;}
.modal__prep{font-family:var(--font-jp);font-weight:700;font-size:20px;color:var(--black);}
/* 会社概要：項目／値の定義リスト */
.modal__dl{display:flex;flex-direction:column;border-top:1px solid #e5ddd0;}
.modal__dl > div{
display:grid;grid-template-columns:84px 1fr;gap:12px;
padding:12px 2px;border-bottom:1px solid #e5ddd0;
font-size:14px;line-height:1.6;color:var(--black);
}
.modal__dl dt{font-weight:700;color:var(--black);}
.modal__dl dd{margin:0;}
.modal__close-text{align-self:flex-end;margin-top:8px;font-size:14px;color:var(--black);}
.modal__close-text:hover,.modal__close:hover{opacity:.6;}
/* =========================================================
FV / ヒーロー
========================================================= */
.fv{
background:var(--orange);
padding:48px 24px;
}
.fv__full{display:block;width:100%;height:auto;} /* ![]()
-fv をそのまま1枚画像化 */
/* =========================================================
セクション見出し（共通） English + 日本語 + 下線
========================================================= */
.sec-head__label{display:flex;flex-direction:column;gap:6.667px;align-items:flex-start;}
.sec-head__en{display:block;width:auto;height:30px;} /* Century Beam → 画像書き出し */
.sec-head__jp{font-family:var(--font-jp);font-weight:500;font-size:18px;line-height:1;color:var(--black);}
.sec-head__jp--light{color:var(--white);}
.sec-head__line{display:block;width:40px;height:2px;background:var(--black);}
.sec-head__line--light{background:var(--white);}
.sec-head__desc{font-size:15px;line-height:1.4;color:var(--black);}
.sec-head__desc--light{color:var(--white);}
.sec-head{display:flex;flex-direction:column;gap:16px;}
.sec-head--pad{padding:0 24px;width:100%;align-items:flex-start;}
.sec-head--row{flex-direction:row;align-items:center;gap:24px;justify-content:center;width:100%;padding:0 24px;}
.sec-head--row .sec-head__texts{display:flex;flex-direction:column;gap:16px;flex:1 1 auto;min-width:0;max-width:202px;}
/* =========================================================
sec01 : 理念 + コンテンツ
========================================================= */
.sec01{
background:var(--orange);
display:flex;flex-direction:column;align-items:center;gap:64px;
padding-bottom:64px;
}
.box01{
width:440px;max-width:calc(100% - 40px);
background:var(--cream);border:var(--bd);border-radius:var(--r-l);
padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:24px;
overflow:hidden; /* 狭幅でコラージュが枠からはみ出さないようクリップ */
}
.box01__text{font-size:18px;color:var(--black);display:flex;flex-direction:column;gap:1.6em;width:100%;}
.box01__text p{line-height:1.6;}
.box01__collage{display:block;width:100%;max-width:100%;height:auto;border-radius:4px;}
.box02{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;}
.box02__illust{width:180px;flex:0 1 180px;min-width:0;height:auto;}
/* --- カルーセル --- */
.carousel{position:relative;width:100%;}
.carousel__viewport{overflow:hidden;padding:6px 0 10px;}
.carousel__track{display:flex;gap:32px;width:max-content;will-change:transform;}
.carousel__arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:5;
width:41px;height:41px;
}
.carousel__arrow img{width:41px;height:41px;}
.carousel__arrow--l{left:27px;}
.carousel__arrow--r{right:27px;}
.carousel__arrow--r img{transform:scaleX(-1);} /* 左向き画像を反転して右向きに */
.ccard{
flex:none;width:320px;min-height:533px;
background:var(--cream);border:var(--bd);border-radius:var(--r-m);
box-shadow:var(--shadow-hard);
overflow:hidden; /* ホバー時にボタン角からカード色が覗くのを防ぐ */
display:flex;flex-direction:column;justify-content:space-between;
}
.ccard__top{display:flex;flex-direction:column;align-items:center;gap:24px;padding:24px;}
.ccard__media{display:block;width:100%;height:auto;} /* ![]()
-cXX 合成画像（写真＋ロゴ枠）をそのまま使用 */
.ccard__photo{width:100%;height:180px;object-fit:cover;border-radius:4px;}
.ccard__title{
position:relative;margin-top:-32px;width:170px;height:170px;
background:#fff;border-radius:var(--r-m);
display:flex;flex-direction:column;justify-content:center;padding:18px 22px;gap:2px;
box-shadow:var(--shadow-soft);
}
.ccard__title-jp{font-family:var(--font-jp);font-weight:700;font-size:30px;line-height:1.1;color:var(--black);}
.ccard__title-en{font-family:"Alegreya SC",serif;font-weight:500;font-size:30px;line-height:1.05;color:var(--black);letter-spacing:-.5px;}
.ccard__title-mini{font-family:var(--font-jp);font-weight:700;font-size:15px;color:var(--black);}
.ccard__title--club .ccard__title-en{font-size:30px;}
.ccard__title--img{padding:0;overflow:hidden;}
.ccard__title--img img{width:100%;height:100%;object-fit:cover;}
.ccard__body{font-size:15px;line-height:1.5;letter-spacing:.3px;text-align:justify;color:var(--black);width:100%;}
.ccard__btn{
border-top:var(--bd);padding:16px 24px;
display:flex;align-items:center;justify-content:space-between;
transition:background-color .2s ease; /* 角丸はカード側のoverflow:hiddenでクリップ */
}
/* ボタンホバー: 背景オレンジ / 文字・アイコン白（Figma Frame109） */
.ccard__btn:hover{background-color:var(--orange);}
.ccard__btn:hover .ccard__btn-label,
.ccard__btn:hover .ccard__more{color:var(--white);}
.ccard__btn:hover img{filter:brightness(0) invert(1);}
.ccard__btn-label{display:flex;align-items:center;gap:5px;font-size:16px;color:var(--black);}
.ccard__btn-label img{width:19px;height:19px;}
.ccard__more{display:flex;align-items:center;gap:5px;font-size:16px;color:var(--black);}
.ccard__more .arrow-r{width:16px;height:16px;transform:rotate(90deg);}
/* =========================================================
sec02 : 実績（横長カード）
========================================================= */
.sec02{
background:var(--gold);
display:flex;flex-direction:column;align-items:flex-end;gap:0;
padding-bottom:64px;
}
.sec02__illust{width:100%;max-width:480px;height:auto;display:block;}
.sec02 .sec-head{margin:24px 0;align-self:stretch;}
.works{display:flex;flex-direction:column;gap:24px;width:100%;align-items:flex-end;}
.wcard{position:relative;width:100%;display:flex;justify-content:flex-end;align-items:center;padding-left:24px;transition:opacity .15s ease;}
.wcard:hover{opacity:.85;}
.wcard__media{
position:absolute;left:24px;top:50%;transform:translateY(-50%);z-index:2;
width:200px;height:120px;border:var(--bd);border-radius:2px;overflow:hidden;
box-shadow:4px 6px 0 var(--black);
}
.wcard__media img{width:100%;height:100%;object-fit:cover;}
.wcard__body{
background:#fff;border-top:var(--bd);border-bottom:var(--bd);border-left:var(--bd);
border-radius:var(--r-m) 0 0 var(--r-m);
width:432px;max-width:calc(100% - 24px);min-height:160px;
padding:16px 24px 16px 210px;
display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:16px;
}
.wcard__body p{font-size:16px;line-height:1.4;text-align:justify;color:var(--black);width:100%;}
/* =========================================================
sec03 : Instagram
========================================================= */
.sec03{
background:transparent;border-top:var(--bd);border-bottom:var(--bd);
display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:64px;
}
.sec03__title{display:block;width:auto;height:34px;} /* Century Beam → 画像書き出し */
/* ![]()
-sec03（フィード＋オーバーレイ）をそのまま1枚画像化。ボタンはリンクで包む */
.sec03__media{display:block;width:100%;max-width:480px;}
.sec03__media img{display:block;width:100%;height:auto;}
/* =========================================================
sec04 : メンバー
========================================================= */
.sec04{
background:transparent;
display:flex;flex-direction:column;align-items:center;gap:0;padding-bottom:64px;
}
.sec04__illust{width:100%;max-width:480px;height:auto;display:block;}
.sec04 .sec-head{margin:24px 0;}
.profile{
width:432px;max-width:calc(100% - 24px);
background:#fff;border-radius:var(--r-m);box-shadow:var(--shadow-soft);
padding:24px;display:flex;flex-direction:column;align-items:center;gap:24px;
}
.profile__photo{width:328px;max-width:100%;border-radius:4px;}
.member{display:flex;flex-direction:column;gap:8px;width:100%;text-align:justify;color:var(--black);}
.member__name{font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1.5;letter-spacing:.36px;}
.member__role,.member__bio{font-size:13px;line-height:1.5;letter-spacing:.26px;}
/* =========================================================
sec05 : お問い合わせ
========================================================= */
.sec05{
background:var(--olive);
display:flex;flex-direction:column;align-items:center;gap:0;padding-bottom:64px;
}
.sec05__illust{width:100%;height:auto;display:block;} /* 全幅 */
.sec05 .sec-head{margin:0 0 24px;}
.form{
width:440px;max-width:calc(100% - 40px);
background:var(--cream);border:var(--bd);border-radius:var(--r-l);
padding:48px 32px;display:flex;flex-direction:column;gap:24px;
}
.field{display:flex;flex-direction:column;gap:8px;width:100%;}
.field__label{font-size:18px;line-height:1.6;color:var(--black);}
.field__input{
width:100%;height:49px;background:#fff;border:var(--bd);border-radius:var(--r-s);
padding:0 14px;color:var(--black);
}
.field__input--area{height:80px;padding:12px 14px;resize:vertical;}
.field__input:focus{outline:2px solid var(--orange);outline-offset:1px;}
.submit{
width:100%;background:var(--black);color:var(--white);
font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1.6;
border-radius:var(--r-s);padding:10px 24px;
}
.submit:hover{opacity:.9;}
/* =========================================================
HubSpot フォーム埋め込み（HP世界観に合わせる）
- 外枠は .form（クリーム箱・黒2px枠・角丸）をそのまま使用
- HubSpotが light DOM に生成する要素を上書き
- 新旧どちらのクラス命名（.hsfc-* / .hs-*）にも当たるよう両対応
========================================================= */
.form--hs{display:block;padding:0;overflow:hidden;}
.form--hs .hs-form-frame{width:100%;display:block;background:transparent;}
/* iframe要素自体を透過に（HubSpot側のフォーム本体が透過ならクリーム箱が透ける）
※ ブランディング帯の白はiframe内でHubSpotが塗っているため、これでは透明化できない */
.form--hs iframe{background:transparent !important;}
/* フォーム全体・各ステップ：レイアウトをHP流の縦積み24pxに */
.form--hs form,
.form--hs .hsfc-Form,
.form--hs .hs-form{
display:flex;flex-direction:column;gap:24px;width:100%;
font-family:var(--font-body);
}
.form--hs .hsfc-Step,
.form--hs .hsfc-Step__Content{display:flex;flex-direction:column;gap:24px;width:100%;}
/* フィールド１つ分のラッパ */
.form--hs .hs-form-field,
.form--hs .hsfc-FormField{
display:flex;flex-direction:column;gap:8px;width:100%;margin:0;
}
/* ラベル：A1Gothic相当・18px・黒 */
.form--hs label,
.form--hs .hs-form-field > label,
.form--hs .hsfc-FieldLabel,
.form--hs .hsfc-Label{
font-family:var(--font-body);font-size:18px;line-height:1.6;
color:var(--black);font-weight:400;margin:0;
}
.form--hs .hs-field-desc,
.form--hs .hsfc-FieldDescription{font-size:13px;color:var(--gray);margin:0;}
/* 入力欄：白・黒2px枠・角丸5px */
.form--hs input[type="text"],
.form--hs input[type="email"],
.form--hs input[type="tel"],
.form--hs input[type="number"],
.form--hs input[type="url"],
.form--hs select,
.form--hs .hs-input,
.form--hs .hsfc-TextInput,
.form--hs .hsfc-DropdownInput{
width:100%;height:49px;box-sizing:border-box;
background:#fff;border:var(--bd);border-radius:var(--r-s);
padding:0 14px;color:var(--black);
font-family:var(--font-body);font-size:16px;line-height:1.4;
}
.form--hs textarea,
.form--hs textarea.hs-input,
.form--hs .hsfc-TextArea{
width:100%;min-height:80px;box-sizing:border-box;
background:#fff;border:var(--bd);border-radius:var(--r-s);
padding:12px 14px;color:var(--black);resize:vertical;
font-family:var(--font-body);font-size:16px;line-height:1.5;
}
.form--hs input::placeholder,
.form--hs textarea::placeholder{color:var(--gray);}
.form--hs input:focus,
.form--hs textarea:focus,
.form--hs select:focus,
.form--hs .hs-input:focus,
.form--hs .hsfc-TextInput:focus,
.form--hs .hsfc-TextArea:focus{
outline:2px solid var(--orange);outline-offset:1px;
}
/* チェックボックス/ラジオ：アクセント色をHPテーマに */
.form--hs input[type="checkbox"],
.form--hs input[type="radio"]{accent-color:var(--olive);width:auto;height:auto;}
.form--hs .hs-form-booleancheckbox label,
.form--hs .hsfc-CheckboxField{flex-direction:row;align-items:flex-start;gap:8px;font-size:14px;}
/* 送信ボタン：黒地・白文字・Bold18px・角丸5px・幅100% */
.form--hs .hs-button,
.form--hs button[type="submit"],
.form--hs .hsfc-Button,
.form--hs input[type="submit"]{
width:100%;background:var(--black);color:var(--white);border:var(--bd);
font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1.6;
border-radius:var(--r-s);padding:10px 24px;cursor:pointer;
transition:opacity .15s ease;
}
.form--hs .hs-button:hover,
.form--hs button[type="submit"]:hover,
.form--hs .hsfc-Button:hover,
.form--hs input[type="submit"]:hover{opacity:.9;}
/* バリデーションエラー：HPの差し色（オレンジ）で */
.form--hs .hs-error-msg,
.form--hs .hs-error-msgs,
.form--hs .hsfc-ErrorAlert,
.form--hs .hsfc-FieldError{color:var(--orange);font-size:13px;list-style:none;margin:0;padding:0;}
/* 送信完了メッセージ */
.form--hs .submitted-message,
.form--hs .hsfc-Message{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--black);}
/* =========================================================
フッター
========================================================= */
.footer{
background:var(--black);color:var(--white);
display:flex;gap:20px;align-items:flex-start;justify-content:center;padding:24px;
}
.footer__logo{width:50%;height:auto;flex:none;}
.footer__right{display:flex;flex-direction:column;gap:24px;flex:1 0 0;min-width:0;}
.footer__sns{display:flex;align-items:center;gap:19.2px;}
.footer__ig{flex:none;display:flex;}
.footer__ig img{width:31px;height:31px;flex:none;object-fit:contain;}
.footer__note{background:var(--white);border-radius:5.8px;padding:6px 8px;display:flex;}
.footer__note img{height:18px;width:auto;}
.footer__nav{display:flex;flex-wrap:wrap;gap:20px;align-items:center;}
.footer__nav a{font-size:14px;color:var(--white);}
.footer__nav a:hover{text-decoration:underline;}
/* =========================================================
左固定パネル（PC時）
========================================================= */
.side{display:none;}
@media (min-width:900px){
body{background:var(--paper-bg);}
.side{
display:flex;align-items:center;justify-content:center; /* スクロール列より左の領域内で中央寄せ */
position:fixed;top:0;bottom:0;
left:0;right:calc(8% + var(--col)); /* スクロール列の左端までを左エリアとする */
background:var(--paper-bg);
overflow:hidden;
z-index:5;
}
.side__inner{
display:flex;flex-direction:column;align-items:center;
gap:64px;width:286px;max-width:84%; /* 要素間64px / 設計幅286px */
}
.side__head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:243px;max-width:100%;}
.side__tagline{font-family:var(--font-jp);font-weight:400;font-size:16px;line-height:1.6;color:var(--black);}
.side__logo{width:242px;max-width:100%;}
.side__art{width:278px;max-width:100%;}
/* 縦並びナビ: Figma Component 1 を画像書き出し + 透明リンク重ね */
.side__nav{position:relative;width:100%;max-width:286px;}
.side__nav-img{display:block;width:100%;height:auto;}
.side__nav a{position:absolute;left:0;width:100%;height:25%;}
.side__nav a:nth-of-type(1){top:0;}
.side__nav a:nth-of-type(2){top:25%;}
.side__nav a:nth-of-type(3){top:50%;}
.side__nav a:nth-of-type(4){top:75%;}
.side__nav a:hover{background:rgba(45,36,33,.04);}
/* PCでは右カラムのヘッダー（ロゴ＋メニュー）を非表示（モバイルのみ表示） */
.header{display:none;}
/* SPカラムを右16%余白の位置に配置（左パネルの上に重ねて継ぎ目を隠す） */
.phone{
position:relative;z-index:20;
margin-left:auto;margin-right:8%;
width:var(--col);max-width:none;
min-height:100vh;
box-shadow:-8px 0 24px rgba(45,36,33,.12);
}
}
/* 小さい画面の微調整 */
@media (max-width:380px){
.header{padding:16px 20px;}
.ccard{width:84vw;}
.carousel__track{padding:0 40px;}
}