/* =============================================
   フォント・配色・その他 基本設定
============================================= */
:root {
    --primary-orange: #ff6600;
    --text-black: #1a1a1a;
    --text-gray: #555555;
    --text-light-gray: #666666;
    --font-main: "Noto Sans JP", sans-serif;
    --bubble-bg: #ffffff; /* 少し透け感のある白 */
    --bubble-border: #ffffff;             /* 白い縁取り */
    --bubble-text: #555555;;               /* 文字はT2オレンジ */
}
ul { list-style: none;}

/* =============================================
   コンテンツ表示 設定
============================================= */

/* ボディ基本 */
body { margin: 0; font-family: var(--font-main); color: var(--text-black); line-height: 1.8; }

/* 改行設定 */
.pc { display: block;}
.sp { display: none;}

/* スマホ */
@media (max-width: 1279px) {
.pc { display: none;}
.sp { display: block; height: 14px; font-size: 0; line-height: 0;}
}

/* =============================================
   ハンバーガーナビ表示 設定
============================================= */

/* ヘッダー固定 */
.site-header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; z-index: 2000; transition: background 0.3s; }

/* ハンバーガーボタンを右上に固定 */
.hamburger { position: fixed; top: clamp(0.4rem, 2.5vw, 0.8rem); right: clamp(1.0rem, 2.5vw, 1.4rem); width: 44px; height: 44px; background: none; border: none; cursor: pointer; z-index: 2100; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.hamburger span { position: absolute; width: 30px; height: 2px; background-color: #333; transition: all 0.4s ease; }

/* 三本線の初期位置 */
.hamburger span:nth-child(1) { transform: translateY(-8px); }
.hamburger span:nth-child(2) { opacity: 1; }
.hamburger span:nth-child(3) { transform: translateY(8px); }

/* ×印への変形（中心を軸に回転） */
.hamburger.is-active span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* 全画面メニュー スタイル */
.global-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; transition: right 0.6s cubic-bezier(0.8, 0, 0.2, 1); z-index: 2050; }
.nav-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px clamp(10px, 3vw, 40px); width: 90%; max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; text-align: center; }

/* PC版（992px以上など）は3列 */
@media (min-width: 992px) {
.nav-list { grid-template-columns: repeat(3, 1fr); }
}

.global-nav.is-active { right: 0; }

/* リンク文字サイズ（上段） */
.nav-item a { text-decoration: none; color: #333; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.3; transition: color 0.3s; }

/* リンク文字サイズ（下段） */
.nav-item a span { display: block; font-size: clamp(0.7rem, 1.2vw, 0.85rem); font-weight: 400; color: #999; margin-top: 8px; }

/* ホバー時の演出（任意） */
.nav-item a:hover { color: var(--primary-orange); }

/* --- 縦幅が短い端末への最適化 --- */
@media (max-height: 500px) {
.nav-list { gap: 10px; }
.nav-item a span { display: none; }
}

/* --- 縦幅が短い端末（SE3など）への対応 --- */
@media (max-width: 375px) {
.nav-item a { font-size: 1.1rem; }
.nav-item a span { display: block; font-size: 0.7rem; margin: 8px 0 0.8rem; }
}

/* =============================================
   セクション表示 設定
============================================= */

/* セクションヘッダー */
.section-header { display: flex; align-items: center; gap: 20px; margin-bottom: clamp(2.188rem, 1.619rem + 2.84vw, 3.75rem); }

/* セクションヘッダー ロゴエリア */
.mini-logo { border-right: 1px solid var(--text-black); padding-right: clamp(2.4rem, 3.0vw, 6.0rem); line-height: 1; }

/* セクションヘッダー ロゴ画像 */
.mini-logo img { width: clamp(10vw, 6vw, 14vw); height: auto; max-width: 96px; min-width: 74px; }

/* セクションヘッダー セクション情報 */
.title-group { display: flex; flex-direction: column; justify-content: flex-start; padding-left: clamp(0.6px, 2.0vw, 1.2rem); }

/* セクションヘッダー セクション情報 英文見出し */
.title-group .en { display: block; font-weight: 500; font-size: clamp(1.9rem, 5.0vw, 3.0rem); color: var(--text-black); line-height: 1; margin-bottom: clamp(0.02rem, 3.0vw, 1.2rem); }

/* セクションヘッダー セクション情報 日本語見出し */
.title-group .jp { display: block; font-size: clamp(0.9rem, 2.0vw, 1.2rem); color: var(--text-light-gray); font-weight: 400; line-height: 1; margin-bottom: clamp(0.01rem, 1.0vw, 0.4rem); }


/* スマホ */
@media (max-width: 440px) {
.mini-logo { padding-right: 1.4rem; line-height: 0; }
.mini-logo img { min-width: 70px; }
.title-group { padding-left: 0; }
.title-group .en { margin-bottom: 1.0rem; }
.title-group .jp { margin-bottom: 0.2rem; }
}


/* --- 縦幅が短い端末（SE3など）への対応 --- */
@media (max-width: 375px) {
.mini-logo img { min-width: 66px; }
.title-group .en { font-size: 1.8rem; margin-bottom: 0.9rem; }
.title-group .jp { font-size: 0.8rem; margin-bottom: 0.1rem; }
}

/* =============================================
   本文表示 設定
============================================= */

/* レイアウト外枠 */
.content-section { width: 84%; max-width: 1400px; margin: 0 auto; padding: clamp(3.5rem, 6.0vw, 6.5rem) 0 clamp(4.0rem, 6.5vw, 7.0rem); text-align: left; }

/* レイアウト外枠(最下段) */
.content-section-end { width: 84%; max-width: 1400px; margin: 0 auto; padding: clamp(3.5rem, 6.0vw, 6.5rem) 0 clamp(2.0rem, 2.5vw, 3.0rem); text-align: left; }

/* 本文 大見出し */
h2 { font-size: clamp(1.5rem, 5.6vw, 3.025rem); line-height: 1.2; margin-bottom: clamp(1.625rem, 0.716rem + 4.55vw, 4.125rem); font-weight: 700; }

/* 本文 小見出し */
h2 span { display: block; font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 500; margin-top: clamp(0.7rem, 2.7vw, 1.7rem); }

/* 本文 */
p { font-size: clamp(0.912rem, 0.867rem + 0.23vw, 1.038rem); line-height: clamp(1.4rem, 1.255rem + 0.73vw, 1.8rem)); }

/* --- 縦幅が短い端末（SE3など）への対応 --- */
@media (max-width: 375px) {
h2 { font-size: 1.4rem; line-height: 1.2; }
h2 span { font-size: 1.0rem; margin-top: 0.6rem; }
p { font-size: 0.85rem; line-height: 1.35rem; }
}

/* 挿絵 */
.illustration-area { width: 100%; margin: clamp(2.3rem, 4.7vw, 5.2rem) 0; }
.illustration-area ul { width: 100%; display: flex; padding: 0; margin: 0; }
.illustration-area ul li { width: 50%; }
.illustration-area ul li:first-child img { margin-left: 0; margin-right: auto; }
.illustration-area ul li:last-child img { margin-left: auto; margin-right: 0; }
.illustration-area ul li img { display: block; width: 96%; height: auto; max-width: 640px; max-height: 364px; }

/* タブレット */
@media (max-width: 1080px) {
.illustration-area ul { display: block; padding: 0; margin: 0; }
.illustration-area ul li { width: 100%; }
.illustration-area ul li:first-child img { text-align: center; margin: 0 auto;}
.illustration-area ul li:last-child img { text-align: center; margin: 2.5rem auto 0; }
.illustration-area ul li img { display: block; width: 100%; height: auto; max-width: 640px; max-height: 402px; }
}

.illustration-area picture { }
.illustration-area picture img { display: block; width: 96%; height: auto; max-width: 760px; max-height: 677px; margin: 0 auto; padding: 0;}

/* タブレット */
@media (max-width: 1080px) {
.illustration-area picture img { display: block; width: 100%; height: auto; max-width: 650px; max-height: 682px; }
}

/* =============================================
   吹き出し表示 設定
============================================= */

/* 吹き出しのグリッドコンテナ */
.bubble-container { display: grid; gap: calc(15px + 2vh) calc(15px + 2vw); max-width: 1400px; margin: 0 auto; padding: calc(20px + 2vw) 0; }

/* タブレット：2列 */
@media (min-width: 768px) {
.bubble-container { grid-template-columns: repeat(2, 1fr); }
}

/* スマホ：1列（4行） */
@media (max-width: 767px) {
.bubble-container { grid-template-columns: 1fr; }
}

/* 吹き出し本体 */
.bubble-item { position: relative; background: var(--bubble-bg); border-radius: 15px; padding: 0 calc(15px + 1.5vw); display: flex; align-items: center; justify-content: center; text-align: center; }

/* 吹き出し内のテキスト */
.bubble-item p { color: var(--bubble-text); font-weight: bold; line-height: clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem); font-size: clamp(0.912rem, 0.867rem + 0.23vw, 1.038rem);}

/* --- 縦幅が短い端末（SE3など）への対応 --- */
@media (max-width: 375px) {
.bubble-item  { font-size: 0.85rem; line-height: 1.35rem; }
}

/* 突起部分（左側に固定） */
.bubble-item::after { content: ""; position: absolute; bottom: -15px; left: 30px; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0 0; border-color: var(--bubble-border) transparent transparent transparent; }

/* 突起の内側（背景色と合わせる） */
.bubble-item::before { content: ""; position: absolute; bottom: -11px; left: 32px; z-index: 1; border-style: solid; border-width: 12px 12px 0 0; border-color: white transparent transparent transparent; }


/* =============================================
   実績紹介用 吹き出し表示 設定
============================================= */

/* 6個用のグリッド：PC(3列) / タブレット(2列) / スマホ(1列) */
.testimonial-grid { display: grid; gap: calc(20px + 2vh) calc(20px + 2vw); grid-template-columns: repeat(3, 1fr); max-width: 1400px; margin: 0 auto; padding: 0 0 calc(20px + 2vw); }

/* 吹き出し本体 */
.testimonial-bubble { position: relative; background: var(--bubble-bg); border-radius: 15px; padding: calc(2.5px + 0.5vw) calc(12.5px + 1.25vw); display: flex; flex-direction: column; justify-content: space-between; }

/* 本文：左寄せ */
.testimonial-text { text-align: left; color: var(--bubble-text); line-height: clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem); margin-bottom: 0px; font-size: clamp(0.912rem, 0.867rem + 0.23vw, 1.038rem); }

/* 名前：右寄せ */
.testimonial-author { text-align: right; align-self: flex-end; color: var(--bubble-text); line-height: clamp(1.4rem, 1.327rem + 0.36vw, 1.6rem); font-weight: bold; font-size: clamp(0.912rem, 0.867rem + 0.23vw, 1.038rem); }

/* --- 縦幅が短い端末（SE3など）への対応 --- */
@media (max-width: 375px) {
.testimonial-text { font-size: 0.85rem; line-height: 1.35rem; }
.testimonial-author { font-size: 0.85rem; line-height: 1.35rem; }
}

/* --- 突起部分 --- */
.testimonial-bubble::after { content: ""; position: absolute; bottom: -15px; left: auto; right: 30px;  border-style: solid; border-width: 15px 0 0 15px; border-color: #ffffff transparent transparent transparent; }

/* 突起の内側 */
.testimonial-bubble::before { content: ""; position: absolute; bottom: -11px; left: auto; right: 32px; z-index: 1; border-style: solid; border-width: 12px 0 0 12px; border-color: rgba(255, 255, 255, 1) transparent transparent transparent; }

/* 中サイズモニターPC以下 3行2列 */
@media (max-width: 1500px) {
.testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

/* スマホ 6行 */
@media (max-width: 767px) {
.testimonial-grid { grid-template-columns: 1fr; }
}

/* =============================================
   円状回転スクロールアイコン表示 設定
============================================= */

/* 円状回転スクロールアイコン(HERO部) */
.scroll-divider-top { display: flex; justify-content: center; padding: clamp(2.0rem, 5.0vw, 5.0rem) 0 clamp(5.0rem, 7.5vw, 10.0rem); }

/* 円状回転スクロールアイコン */
.scroll-divider { display: flex; justify-content: center; padding: clamp(2.0rem, 4.0vw, 5.0rem) 0 clamp(1.0rem, 2.0vw, 3.0rem); }

/* 円状回転スクロールアイコン リンク設定 */
.is-back-to-top a { text-decoration: none; display: block; width: 100%; height: 100%; }

/* 円状アイコン設定 */
.rotating-scroll { position: relative; width: 100px; height: 100px; }
.rotating-scroll svg { width: 100%; height: 100%; animation: rotate-anim 15s linear infinite; fill: #333; font-size: 10px; font-weight: bold; letter-spacing: 2px; }

/* 円状アイコン 矢印部分設定 */
.rotating-scroll .arrow { position: absolute; top: 50%; left: 50%; width: 2px; height: 30px; background: #333; transform: translate(-50%, -50%); }
.rotating-scroll .arrow::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 8px; height: 8px; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: translateX(-50%) rotate(45deg); }

/* 円状アイコン TOPに戻る矢印部分設定 */
.rotating-scroll .arrow-up { position: absolute; top: 50%; left: 50%; width: 2px; height: 30px; background: #333; transform: translate(-50%, -50%);}
.rotating-scroll .arrow-up::after { content: ''; position: absolute; top: 0; left: -4.5px; width: 10px; height: 10px; border-right: 2px solid #333; border-top: 2px solid #333; transform: rotate(-45deg); margin-bottom: -4px; }

/* 円状アイコン アニメーション設定 */
@keyframes rotate-anim { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

/* スマホ対応の微調整 */
@media (max-width: 767px) {
.rotating-scroll { transform: scale(0.8); }
}