@charset "utf-8";
/* CSS Document */
/* --- 基本設定 --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Sawarabi Mincho', 'Noto Sans JP', serif;
    color: #333;
    line-height: 1.6;
    overflow-x: hidden; /* 横揺れ防止 */
}
html, body {
    overflow-x: hidden; /* 横方向のはみ出しを禁止する魔法！ */
	scroll-behavior: smooth; /* これでページ内の移動がすべて滑らかに */
}

/* ==========================================
   共通セクション・見出し設定
   ========================================== */

/* セクションの基本余白 */
section {
    padding: 60px 0;
}

/* 偶数番目のセクション背景色（一箇所に統合） */
section:nth-of-type(even) {
    background-color: #f9f6f1; /* 小川の庄らしいベージュ */
}

/* 共通コンテナ */
.container {
    max-width: 1000px; 
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center; /* 見出しを中央にするため */
}

/* 共通の見出し2 (h2.section-title) */
.section-title {
    display: inline-block;
    color: #15295D; /* 濃い紺 */
    margin-bottom: 50px;
    font-size: 2.4rem;
    text-align: center;
}

/* 見出し内の英語部分 */
.section-title span {
    display: block;
    font-size: 1.2rem;
    font-weight: normal;
    color: #15295D;
    margin-bottom: 0;
    padding-bottom: 4px;
    border-bottom: 2px solid #77C2D6; /* 水色の線 */
}

@media screen and (max-width: 768px) {
    section { padding: 40px 0; }
    .section-title { font-size: 1.8rem; margin-bottom: 30px; }
}




/* --- メインビジュアル --- */
.main-visual {
    position: relative;
    width: 100%;
    height: 90vh; /* 画面いっぱいの高さ */
    min-height: 600px;
    background: url('images/top_image.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mv-container {
    text-align: center;
    z-index: 2;
    padding: 20px;
}

.main-logo img {
    max-width: 100%;
    height: auto;
    width: 600px; /* PCサイズ */
}

.message-box {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 30px;
    border-radius: 8px;
    margin-top: 80px;
    display: inline-block;
}

/* --- 左上ロゴ --- */
.corp-logo {
    position: absolute;
    top: 60px;
    left: 60px;
    z-index: 100;
}
.corp-logo img {
    width: 120px;
}

@media screen and (max-width: 1024px) { /* iPadなどのタブレットサイズ */
    .main-logo img {
        width: 500px; /* PCより少し小さく */
    }
    .nav-open {
        right: 15px; /* 少しだけ内側に入れる */
        top: 20px;
    }
}

/* --- ハンバーガーメニュー本体 --- */
.nav-unshown { display: none; }

/* 3本線ボタンの自作 */
.nav-open {
    display: flex;         /* 縦に並べる魔法 */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;           /* ボタンの横幅 */
    height: 24px;          /* ボタンの高さ */
    position: fixed;       /* 画面に固定 */
    top: 30px;             /* 上からの位置 */
    right: 20px;            /* 右からの位置 */
    cursor: pointer;
    z-index: 1100;         /* 一番手前に出す */
}

.nav-open span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #15295D !important; /* 確実にこの色にする */
    border-radius: 2px;
    transition: all 0.3s;
}

/* クリックしたら×印にするアニメーション */
#nav-input:checked + .nav-open span:nth-child(1) { transform: translateY(8px) rotate(-45deg); }
#nav-input:checked + .nav-open span:nth-child(2) { opacity: 0; }
#nav-input:checked + .nav-open span:nth-child(3) { transform: translateY(-8px) rotate(45deg); }

/* 右から出る小窓 */
.nav-content {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    max-width: 80%;
    height: 100%;
    background: #fff;
    z-index: 1050;
    transition: 0.4s;
    box-shadow: -5px 0 15px rgba(0,0,0,0.2);
}

#nav-input:checked ~ .nav-content { right: 0; }

/* メニューの背景を暗くする */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 1040;
}
#nav-input:checked ~ .nav-overlay { display: block; }

/* メニュー内のリスト */
.nav-inner { padding: 80px 40px; }
.menu-title { font-weight: bold; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 20px; }
.nav-content ul { list-style: none; padding: 0; }
.nav-content ul li { margin-bottom: 25px; }
.nav-content ul li a { text-decoration: none; color: #333; font-size: 1.1rem; }

/* --- レスポンシブ (スマホ用) --- */
@media screen and (max-width: 768px) {
    .main-visual { height: auto; min-height: 100vh; padding: 100px 0; }
    .main-logo img { width: 85%; }
    .message-box { width: 90%; padding: 20px; font-size: 0.9rem; }
    .nav-content { width: 100%; right: -100%; } /* スマホは全画面メニュー */
    .nav-open span { background: #fff; } /* 背景が白ならここは変える */
}

.btn-area {
    margin-top: 25px;
}

.btn-mynavi {
    display: inline-block;
    background-color: #f39800; /* 小川の庄っぽいオレンジや暖色系 */
    color: #fff;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px; /* 丸みのあるボタン */
    font-weight: bold;
    transition: background 0.3s;
}

.btn-mynavi:hover {
    background-color: #d88700; /* 重ねた時に少し濃く */
}
/* --- レスポンシブ (スマホ用) --- */
@media screen and (max-width: 768px) {
	.btn-mynavi {
		
	}
}


/* ==========================================
   3. スマホ用 (768px以下)
   ========================================== */
@media screen and (max-width: 768px) {
/* メインビジュアルの箱の高さを指定する */
    .main-visual {
        height: 60vh !important;  /* 画面の高さの60%くらいにする（お好みで50〜70で調整） */
        min-height: 400px !important; /* 小さくなりすぎないようにストッパーをかける */
    }

    /* ボックスやロゴがはみ出さないように余白を微調整 */
    .mv-container {
        padding-top: 40px; 
    }
    /* 左上ロゴ：位置を端に寄せる */
    .corp-logo {
        top: 40px !important;   /* 上の余白を詰める */
        left: 20px !important;  /* 左の余白を詰める */
    }

    /* 3本線ボタン：位置を右端に寄せる */
    .nav-open {
        top:40px !important;   /* ロゴと高さをだいたい合わせる */
        right: 20px !important; /* 右の余白を20pxに詰める */
    }

    /* ロゴの大きさも少し控えめに */
    .corp-logo img {
        width: 80px !important;
    }

    .main-logo img {
        width: 85%; /* 画面幅に合わせて可変 */
    }
    .message-box {
        padding: 20px;
        font-size: 0.9rem; /* 文字を少し小さくして読みやすく */
    }

}

/* 中身を中央に寄せるための共通クラス */
.container {
    max-width: 1000px; 
    margin: 0 auto;    /* これで真ん中に寄るよ！ */
    padding: 0 40px;   /* スマホの時に左右がくっつかないための遊び */
    box-sizing: border-box; /* パディングを含めたサイズ計算にする */
}

/* セクションごとの上下余白（ゆったり見せる） */
section {
    padding: 60px 0;
}

/* --- 4. スマホ用の調整 --- */
@media screen and (max-width: 768px) {
section {
    padding: 20px 0;
}

}


/* 偶数番目のセクションだけ薄い背景色をつける */
section:nth-of-type(even) {
    background-color: #f9f9f9;
}





/* 偶数番目（2, 4, 6...）のセクションだけ背景色を変える */
section:nth-of-type(even) {
    background-color: #f9f6f1; /* 小川の庄の雰囲気に合う、ごく薄いベージュ系 */
}

/* 奇数番目（1, 3, 5...）は白のままでもいいし、明示するならこれ */
section:nth-of-type(odd) {
    background-color: #ffffff;
}

/*エントリーボタン*/
/* --- 1. 横並びにする設定 --- */
.flex-btn-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 60px 0;
    flex-wrap: wrap; /* スマホで自動折り返し */
}

.btn-wrap{
	
}
/* --- 2. ボタンの基本（共通） --- */
.btn, a.btn {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    position: relative;
    display: inline-block;
	    width: 280px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.5rem;
}

/* --- 3. 青色ボタン本体 --- */
a.btn-c {
    font-size: 1rem;
    position: relative;
    padding:1.2rem 0 1.8em 0; /* 吹き出しがあるから少し高さを調整 */
    color: #fff;
    background: #64B5F6; /* 鮮やかな青 */
    box-shadow: 0 5px 0 #1a7cca; /* 濃い青の立体感 */
}

/* 吹き出し部分（丸型）を少し下げる */
a.btn-c span {
    font-size: 0.8rem;
	letter-spacing:-0.01em;
    position: absolute;
    /* --- ここを調整！ --- */
    top: -1.4rem; /* 【変更】数値を小さくして、ボタンに半分重なる位置に下ろしたよ */
    /* ------------------ */
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 220px;
    padding: 0.8rem 0;
    color: #007bbb;
    border: 2px solid #007bbb;
    border-radius: 100vh;
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    z-index: 10; /* 【追加】念のためボタンより上にくるように設定 */
}

/* 吹き出しの三角（下向き矢印） */
a.btn-c span:before, a.btn-c span:after {
    position: absolute;
    left: calc(50% - 10px);
    content: "";
}
a.btn-c span:before {
    bottom: -10px;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #007bbb transparent transparent transparent;
}
a.btn-c span:after {
    bottom: -7px;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

/* アイコン（右側の矢印） */
a.btn-c i {
    margin-left: 1rem;
}

/* ホバー設定 */
a.btn-c:hover {
    transform: translate(0, 3px);
    background: #006699;
    box-shadow: 0 2px 0 #005a8a;
}

/* --- 4. スマホ用の調整 --- */
@media screen and (max-width: 768px) {
    .flex-btn-container {
        flex-direction: column;
        align-items: center;
        gap: 50px; /* 縦並びの時は吹き出しが被らないよう広めに */
    }
    a.btn-c {
        width: 320px; /* スマホでちょうどいい幅 */
        font-size: 1.2rem;
    }
	a.btn-c span {
        width: 280px;
        font-size: 1.1rem;
        top: -1.2rem; /* 【変更】スマホでもちょうど半分重なるくらいの位置に調整 */
    }


}


/* --- 共通のコンテナ設定（すべてのセクションを中央揃えに） --- */
section .container {
    text-align: center; /* これで今後増えるすべてのセクションの見出しが真ん中にくるよ！ */
}

/* --- 本文などは個別に左揃えに戻す --- */
.content-wrapper,
.about_ogawanosho {
    text-align: left; 
    margin: 0 auto;
	width:800px;
}
@media screen and (max-width: 768px) {
	.content-wrapper,
.about_ogawanosho {
	width:100%;
}
	
	}

/* --- 見出し2のデザイン --- */
.section-title {
    display: inline-block; /* 文字幅に合わせる */
    text-align: center;    /* 文字自体も中央揃え */
    color: #15295D;        /* 指定の文字色 */
    margin-bottom: 50px;
    font-size: 2.4rem;
}

@media screen and (max-width: 768px) {
	.section-title {
    margin-bottom: 24px;
    font-size: 1.8rem;
}
	
	}

/* 英語の補足（About Us など） */
.section-title span {
    display: block;        /* 改行させる */
    font-size: 1.2rem;
	font-weight:normal;
    color: #15295D;
    margin-bottom: 0;
    padding-bottom: 4px;  /* 線との距離 */
    border-bottom: 2px solid #77C2D6; /* 【ここ！】英語と日本語の間に線を引く */
}

/* --- 本文（リード文）の設定 --- */
.about_ogawanosho {
    max-width: 800px;      /* 1000pxのコンテナ内で、さらに少し絞ると読みやすいよ */
    margin: 0 auto;        /* 中央配置 */
    text-align: left;      /* 文章は左揃えに戻す */
    font-size: 1rem;
    line-height: 2;        /* 行間を広げて「読み物」感を出す */
    color: #15295D;
}

/* リード文内の画像 */
.about_ogawanosho img {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}

/* --- 歓迎しますセクション --- */
.welcome-list {
    display: flex;             /* 横並び */
    flex-wrap: wrap;           /* 折り返しOK */
    justify-content: center;   /* 中央寄せ */
    gap: 20px;                 /* 項目間の隙間 */
    list-style: none;
    padding: 0;
    margin: 50px 0;
}

/* --- PC版（3列にする場合） --- */
.welcome-list li {
    width: calc(100% / 3 - 30px); /* 100%を3で割って、余白分を引く */
    text-align: center;
}

.icon-box {
    width: 250px;              /* サイズはモモンガさんの設定通り */
    height: 250px;
    margin: 0 auto 15px;
    /* background-color: #222; 削除しました */
    border-radius: 50%;        /* 外枠を円にする */
    overflow: hidden;          /* 【重要】枠からはみ出た画像を隠す（切り抜く） */
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box img {
    width: 100%;               /* 【変更】枠いっぱいに広げる */
    height: 100%;              /* 【追加】高さも枠に合わせる */
    object-fit: cover;         /* 【追加】縦横比を保ったまま、隙間なく丸の中に収める */
}

.welcome-list li p {
    font-size: 1em;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    line-height: 1.4;
    font-weight: normal;
	text-align:center;
}
.welcome-list li p.left{
	text-align:left;
}
/* --- スマホ版（2列にする場合） --- */
@media screen and (max-width: 768px) {


    #welcome .container {
        max-width: none;     /* 横幅の制限を解除！ */
        width: 100%;         /* 画面いっぱいにする */
        padding-left: 10px;  /* ほんの少しだけ左右に隙間を作る（画像が端にピタッとくっつきすぎないように） */
        padding-right: 10px;
    }
.welcome-list li p {
	font-size:1em;

}
    .welcome-list {
        gap: 15px 10px;      /* 縦の隙間を15px、横の隙間を10pxにする */
        justify-content: space-between; /* 2つの画像を左右いっぱいに広げる */
    }

    .welcome-list li {
        width: 48%;          /* 50%より少し小さくして、2つ並びを確実にする */
    }

    .icon-box {
        width: 170px;        /* さっきの170pxでも、これなら2つ並ぶはずだよ！ */
        height: 170px;
    }
}

/* --- 仕事内容（Works）セクション専用 --- */

/* 3つ並びをPCで綺麗に整列 */
#works .welcome-list li {
    width: calc(100% / 3 - 30px);
    margin-bottom: 40px;
}

.sub_ttl{
	font-size:1.6em;
}

/* 丸い写真のラッパー */
#works .icon-box {
    position: relative; /* 基準点 */
    width: 250px;
    height: 250px;
    background-color: transparent;
    border-radius: 50%; /* ここで丸くする */
    overflow: hidden;   /* はみ出し防止 */
}

/* 【NEW】写真の上に20%の黒を乗せる魔法 */
#works .icon-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* 20%の黒（0.2） */
    border-radius: 50%;
    z-index: 1; /* 写真より上、文字より下 */
    pointer-events: none;
}

/* 写真の設定 */
#works .icon-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* フィルターは削除（上の::afterで色をつけるため） */
}

/* 【NEW】写真の上に浮かぶ白い見出し */
.works_ttl {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* ど真ん中配置 */
    z-index: 10;                     /* 黒い膜（1）より上に！ */
    width: 100%;
    
    color: #fff;                     /* 【変更】文字を白に */
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    
    /* 【変更】白文字が読みやすいように、影を「黒」に変更 */
    text-shadow: 0 0 10px rgba(0,0,0,0.6); 
    
    margin: 0;
    pointer-events: none;
}

.works_ttl span{
	display:block;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:0.7em;
}

/* --- スマホ版の調整 --- */
@media screen and (max-width: 768px) {
    #works .welcome-list li {
        width: 100%; 
    }

    #works .icon-box {
        width: 200px;
        height: 200px;
    }

    .works_ttl {
        font-size: 1.2rem;
    }
}

/*-----------------先輩インタビュー*/
/* アコーディオン全体 */
.interview-accordion {
    margin-bottom: 30px;
    border: 2px solid #77C2D6;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    text-align: left;
}

/* クリックする部分 */
.interview-accordion summary {
    padding: 20px;
    cursor: pointer;
    list-style: none; /* デフォルトの矢印を消す */
    background: #f9f6f1;
    transition: background 0.3s;
}

.interview-accordion summary::-webkit-details-marker {
    display: none; /* Safari用 */
}

.summary-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* キャラクターアイコン */
.char-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.char-icon img {
    width: 100%;
    height: auto;
}
.char-icon img.fuji {
	margin-top:-28px;
}
.title-wrap h3 {
    font-size: 1.6rem;
    color: #15295D;
    margin: 0;
}

.title-wrap span {
    font-size: 1.2rem;
    font-weight: normal;
}

/* インタビューの中身 */
.interview-content {
    padding: 30px;
    border-top: 1px solid #77C2D6;
}
.interview-content em{
background:url(images/green.png) repeat-x 0 12px;
font-weight:bold;
font-style:normal;
}

.sentence-block {
    margin-bottom: 40px;
    overflow: hidden; /* 回り込み解除用 */
}

/* 200pxの写真回り込み設定 */
.small-photo {
    width: 200px; /* 指定のサイズ */
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}
/* 300pxの写真回り込み設定 */
.small-photo300 {
    width: 300px; /* 指定のサイズ */
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}
.align-right {
    float: right;      /* 右に寄せて文字を回り込ませる */
    margin-left: 20px;
}

.align-left {
    float: left;       /* 左に寄せて文字を回り込ませる */
    margin-right: 20px;
}

/* スマホでは回り込みを解除して大きく見せる */
@media screen and (max-width: 768px) {
    .summary-inner {
        flex-direction: column;
        text-align: center;
    }
    .small-photo {
        float: none;
        width: 100%;
        margin: 0 0 15px 0;
    }
}

/* ボタンの外側の余白調整 */
.open-btn-container {
    flex-shrink: 0;
    margin-left: auto; /* 右端に寄せる */
}

/* 丸いボタン本体 */
.btn-rounded {
    width: 100px; /* サイズはお好みで */
    height: 100px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:0.9rem;
	    color: #15295D;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* 正円にする */
    /* 水色のグラデーション（球体風） */
    background: radial-gradient(circle at 30% 30%, #aee5f5, #77C2D6); 
    /* ドロップシャドウ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

/* 下向き矢印（Font Awesome想定だけどCSSでも作れるよ） */
.btn-rounded i::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 3px solid #15295D;
    border-bottom: 3px solid #15295D;
    transform: rotate(45deg);
    margin-top: 5px;
}

/* Hover（マウスを乗せた時）の変化 */
.btn-rounded:hover {
    transform: translateY(-3px); /* 少し浮き上がる */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    background: radial-gradient(circle at 30% 30%, #b8ecfc, #88d4e8); /* 少し明るく */
}

/* アコーディオンが開いている時のボタンの変化（任意） */
/* .interview-accordion[open] .btn-rounded {
    background: radial-gradient(circle at 30% 30%, #aee5f5, #5c6cc7); 開いたら色を変えるとかっこいいかも！ */

/* アコーディオンが開いたら（open属性がついたら）、ボタンの入れ物を消す */
details[open] .open-btn-container {
    display: none;
}


/* --- ボタンの配置調整 --- */
.open-btn-container {
    flex-shrink: 0;
    margin-left: auto; /* PCでは右寄せ */
}

/* --- スマホでの配置（中央にする） --- */

@media screen and (max-width: 768px) {
	    .open-btn-container {
        margin: 0 auto; /* スマホでは中央寄せ */
    }

    /* 中身を縦並びにする */
    .summary-inner {
        flex-direction: column; /* 縦積みに変更 */
        align-items: center;    /* 真ん中揃え */
        height: auto;           /* 高さを成り行きに任せる（重要！） */
        padding-bottom: 20px;   /* 下に少し余白 */
    }

    /* アイコンや文字の隙間調整 */
    .char-icon {
        margin-bottom: 10px;    /* イラストの下に隙間 */
    }
    
    .title-wrap {
        text-align: center;     /* 文字を真ん中揃え */
        margin-bottom: 10px;    /* ボタンとの隙間 */
    }
}
/* --- 矢印の修正（1つにする） --- */
.btn-rounded i {
    display: block;
    margin-top: 5px;
}

.btn-rounded i::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
    margin: 0 auto;
}



/* スマホではライトボックスのリンクを無効にする */
@media screen and (max-width: 768px) {
    .sentence-block a[data-lightbox] {
        pointer-events: none; /* クリックできなくする魔法 */
        cursor: default;      /* カーソルも普通に戻す */
    }
}

.sikaku_ttl{
    border-bottom: 2px solid #77C2D6;
}

.waku {
	max-width:800px;
    margin: 30px auto;
    border: 2px solid #77C2D6;
    border-radius: 15px;
    overflow: hidden;
    background:#f9f6f1;
    text-align: left;
}
@media screen and (max-width: 768px) {
.waku {
	width:100%;
}
}
.inner_box{
	width:92%;
	margin:12px auto;
}
/* --- 代表メッセージセクション --- */


/* 全体を囲む箱（特別感の演出） */
.boss-wrapper {
    background-color: #e9f9ff; /* 薄い青みグレー（小川の庄カラーと相性良し） */
    padding: 60px;             /* 【重要】内側にたっぷりと余白をとる */
    border-radius: 20px;       /* 角を優しく丸く */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* うっすら影をつけて浮かせる */
	margin-bottom: 80px;
	margin-top:60px;
}

/* 「代表よりメッセージ」のラベル */
.boss-label {
    text-align: center;
    font-size: 1.2rem;
    color: #15295D;
    margin-bottom: 40px;
    letter-spacing: 0.1em;
    font-weight: bold;
    position: relative;
    display: inline-block;
    width: 100%;
}

/* 2カラムレイアウト（左写真・右文章） */
.boss-content {
    display: flex;             /* 横並び */
    align-items: flex-start;   /* 上揃え（中央揃えならcenter） */
    gap: 50px;                 /* 写真と文章の間隔を広く */
}

/* 左側：写真エリア */
.boss-photo {
    flex: 0 0 35%;             /* 幅を35%に固定 */
    max-width: 350px;          /* 大きくなりすぎないように制限 */
}

.boss-photo img {
    width: 180px;
    height: auto;
    border-radius: 10px;       /* 写真の角を少し丸く */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.boss-photo2 img {
    width: 300px;
    height: auto;
    border-radius: 10px;       /* 写真の角を少し丸く */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* 右側：文章エリア */
.boss-text {
    flex: 1;                   /* 残りの幅を使う */
}

/* 見出し（キャッチコピー） */
.boss-heading {
    font-size: 1.8rem;
    color: #15295D;
    line-height: 1.5;
    margin-bottom: 30px;
    border-bottom: 2px solid #ddd; /* 下線で区切る */
    padding-bottom: 20px;
}

.boss-text p {
    margin-bottom: 20px;
    line-height: 1.8;          /* 読みやすく行間を広めに */
    text-align: justify;       /* 両端揃えで綺麗に見せる */
}

/* 署名 */
.boss-sign {
    margin-top: 30px;
    text-align: right;
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- スマホ版の調整 --- */
@media screen and (max-width: 768px) {
    .boss-wrapper {
        padding: 30px 20px;    /* スマホでは余白を少し控えめに */
    }

    .boss-content {
        flex-direction: column; /* 縦積みに変更 */
        gap: 30px;
    }

    .boss-photo {
        flex: 0 0 100%;        /* 幅いっぱいに */
        max-width: 100%;
        text-align: center;    /* 写真を真ん中に */
        margin: 0 auto;
    }
    
    .boss-photo img {
        width: 80%;            /* スマホでは少し小さめに表示しても上品 */
        max-width: 200px;
    }
    .boss-photo2 img {
        width: 100%;            /* スマホでは少し小さめに表示しても上品 */
        max-width: 200px;
    }
    .boss-heading {
        font-size: 1.4rem;     /* 文字サイズ調整 */
        text-align: center;    /* 見出しも真ん中に */
    }
}


/* よくある質問セクション */


/* ==========================================
   FAQセクション専用（共通ルールを引き継ぐので激スリムに！）
   ========================================== */

.faq-section {
    /* 背景色やパディングは共通ルール(section)が当たるので不要！ */
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 900px; /* ここだけ少し絞る */
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* 質問エリア */
.faq-question {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    background-color: #e6f4f9; /* 薄い水色 */
    font-weight: bold;
    color: #333;
}

/* アイコン共通設定 */
.faq-icon-q, .faq-icon-a {
    color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-right: 15px;
    flex-shrink: 0;
}

.faq-icon-q { background-color: #a0c4d1; } /* Qは水色 */
.faq-icon-a { background-color: #f2a9af; } /* Aはピンク */

/* 回答エリア */
.faq-answer {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    line-height: 1.6;
    color: #555;
}

/* テキストの左寄せ設定 */
.faq-question p, .faq-answer p {
    margin: 0;
    text-align: left;
    flex: 1;
}

/* 募集要項テーブルのデザイン */
.recruit-table-wrapper {
    max-width: 800px;
    margin: 0 auto 30px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #77C2D6;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.recruit-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.recruit-table th, .recruit-table td {
    padding: 20px;
    border-bottom: 1px solid #eee;
    font-family: "Noto Sans JP", sans-serif;
}

.recruit-table th {
    width: 30%;
    background-color: #f0faff; /* サイトに合わせた極薄の水色 */
    color: #15295D;
    font-weight: bold;
}

.recruit-table td {
    background-color: #fff;
    color: #333;
}

/* 最後の行のボーダーを消す */
.recruit-table tr:last-child th,
.recruit-table tr:last-child td {
    border-bottom: none;
}

/* 補足テキスト */
.recruit-notice {
    margin-bottom: 40px;
    font-size: 0.9rem;
    color: #666;
}

/* スマホ対応：1列にする */
@media screen and (max-width: 768px) {
    .recruit-table th, .recruit-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .recruit-table th {
        background-color: #e6f4f9;
        padding: 10px 20px;
    }
    .recruit-table td {
        padding: 15px 20px 25px;
    }
}


/* 会社概要テーブルのデザイン */


.cc_photo img {
    width: 420px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
	margin:28px auto;
}


.profile-table-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #77C2D6;
}

.profile-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.profile-table th, .profile-table td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.profile-table th {
    width: 30%;
    background-color: #f9f6f1; /* サイト全体のベージュに合わせる */
    color: #15295D;
    font-weight: bold;
}

.profile-table td {
    color: #333;
}

.profile-table tr:last-child th,
.profile-table tr:last-child td {
    border-bottom: none;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .profile-table th, .profile-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .profile-table th {
        padding: 10px 20px;
    }
}


/* 拠点紹介のレイアウト */
.location-intro {
    margin-bottom: 40px;
}

.location-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.location-item {
    width: 30%;
    text-align: center;
}

.location-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* あゆみ（歴史）のリスト */
.history-wrapper {
    max-width: 800px;
    margin: 60px auto 0;
    text-align: left;
}

.history-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    border-left: 2px solid #77C2D6; /* 左側にタイムラインの線を引く */
    margin-left: 20px;
}

.history-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 25px;
}

/* タイムラインの丸ポチ */
.history-list li::before {
    content: "";
    position: absolute;
    left: -9px;
    top: 5px;
    width: 16px;
    height: 16px;
    background-color: #77C2D6;
    border-radius: 50%;
}

.history-list .year {
    font-weight: bold;
    color: #15295D;
    display: block;
    margin-bottom: 5px;
}

.history-list p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .location-grid {
        flex-direction: column;
        align-items: center;
    }
    .location-item {
        width: 80%;
        margin-bottom: 20px;
    }
}

/* --- フッター全体のデザイン --- */
.site-footer {
    background-color: #15295D; /* 濃い紺色で最後を締める */
    color: #fff;
    padding: 60px 20px 20px;
    margin-top: 0;
}

.footer-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 最後のメッセージ */
.footer-message {
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.footer-message p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #fff;
}

/* コンテンツ部分のレイアウト */
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
}

/* 左側：ロゴ・住所 */
.footer-info {
    flex: 1;
}

.footer-logo img {
    width: 140px;
    background: #fff; /* ロゴが見やすいように白背景 */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.footer-info address {
    font-style: normal;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #d1d1d1;
}

.footer-links {
    margin-top: 15px;
}

.footer-links a {
    color: #77C2D6;
    text-decoration: none;
    font-size: 0.9rem;
}

/* 右側：ナビゲーション */
.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列で並べる */
    gap: 15px 40px;
}

.footer-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #77C2D6;
}

/* コピーライト */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: #999;
}

/* --- スマホ対応 --- */
@media screen and (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
    }
    
    .footer-nav ul {
        grid-template-columns: 1fr; /* スマホは1列 */
        gap: 20px;
    }

    .footer-message p {
        font-size: 1rem;
    }
}

/* ページTOPへ戻るボタン */
.page-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(119, 194, 214, 0.7); /* 水色(#77C2D6)の半透明(0.7) */
    color: #fff;             /* 矢印の白 */
    font-size: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;      /* 正円にする */
    z-index: 9999;           /* 一番手前に */
    transition: opacity 0.3s, transform 0.3s;
opacity: 0;           /* 最初は透明 */
    visibility: hidden;    /* 最初は隠す */
    transition: 0.3s;      /* ふわっと出すための演出 */
}

/* ホバーしたとき */
.page-top-btn:hover {
    background-color: rgba(119, 194, 214, 1); /* ホバーで不透明に */
    transform: translateY(-5px);             /* 少し浮き上がる */
}

/* JSで表示させるときのクラス */
.page-top-btn.is-show {
    opacity: 1;
    visibility: visible;
}