/* ==========================================
   1. 基本設定（スマホ基準）
   ========================================== */
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.7;
    letter-spacing: 0.03em;
    
}

/* リンクなどの細かい部分もゴシック体を適用 */
nav a, .btn, .section-title span {
    font-family: "Helvetica Neue", Arial, sans-serif;
}

p,ul,ol,li,figcaption {
    font-size: 16px;
    text-align: justify;
    font-feature-settings: "palt";
}

h1,h2,h3 { line-height: 1.4; }

h2,h3 { font-size: 22px; }

h2,h3,.footer-brand,.logo span { line-height: 1.4; color: #562e25; }

img {
    max-width: 100%;
    height: auto;
}

figure 
.container {
    padding: 0 20px;
}

.bg-light {
    background-color: #fcfcfc;
}

section { padding: 30px 0; }


/* ==========================================
   2. ヘッダー・ナビゲーション（スマホ）
   ========================================== */
header {
    background-color: #fff;
    padding: 15px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;         /* 横並びにする */
    align-items: center;   /* 垂直方向を中央に揃える */
    gap: 10px;             /* 画像とテキストの間の距離 */
    text-decoration: none; /* リンクの下線を消す */
    color: #333;           /* テキストの色 */
}

.logo img {
    height: 40px;          /* ロゴ画像の高さを調整（お好みで変えてください） */
    width: auto;           /* 横幅は比率を保って自動調整 */
}

.logo span {
    font-size: 20px;       /* テキストのサイズ */
    font-weight: bold;     /* 太字 */
    white-space: nowrap;   /* 改行されないようにする */
}

/* チェックボックスは常に隠す */
.nav-unshown {
    display: none !important;
}

/* ハンバーガーアイコン */
#nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    position: relative;
    z-index: 150;
    cursor: pointer;
}

#nav-open span, #nav-open span::before, #nav-open span::after {
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #333;
    display: block;
    content: '';
    transition: 0.3s;
}
#nav-open span { top: 10px; }
#nav-open span::before { top: -10px; }
#nav-open span::after { top: 10px; }

/* スマホメニューの本体（隠しておく） */
#nav-content {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    z-index: 100;
    padding-top: 70px;
}

.nav-list {
    height: 100vh;
    list-style: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.98);
    text-align: center;
}

.nav-list li {
    padding: 30px 0;
    border-top: dotted 1px;
}

.nav-list a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-family: sans-serif;
}

/* メニュー展開時 */
#nav-input:checked ~ #nav-content { left: 0; }
#nav-input:checked ~ #nav-open span { background: transparent; }
#nav-input:checked ~ #nav-open span::before { transform: rotate(45deg); top: 0; }
#nav-input:checked ~ #nav-open span::after { transform: rotate(-45deg); top: 0; }

/* ==========================================
   3. 各セクション（スマホ）
   ========================================== */
/* メインビジュアル */

#concept,
#gallery,
#access { width: 90%; margin: 0 auto; }

.footer-info { width: 90%; }

section#service,
#faq {
    padding: 30px 5%;
}


.hero {
    padding: 0 30px;
    background: #eee url('images/home-image.webp') no-repeat center/cover;
    height: 400px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #fff;
    position: relative;
}

.hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }

.hero-content { position: relative; z-index: 1; width: 100%; }

.hero-content h1 { margin: 0 auto 20px; }

/* コンセプト */
.concept-wrap {
    display: flex;
    flex-direction: column; /* スマホは縦並び */
    gap: 30px;
}

/* サービス */
/* --- サービス詳細設定（スマホ基準：縦並び） --- */

.services-grid {
    margin: 20px 0 0;
}

.service-card {
    display: flex;
    flex-direction: column; /* スマホでは縦に積む */
    background: #fff;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.service-card:last-of-type { margin: 0; }

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-body {
    padding: 30px;
}

.service-body h3 {
    margin-top: 0;
    font-size: 20px;
    border-bottom: 2px solid #d4b483; /* アクセントのライン */
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.service-body p {
    font-size: 15px;
    margin: 0;
}

/* --- Q&A スムーズな開閉設定 --- */

#faq { background: #fff9f9; }

.faq-item {
    border-bottom: 1px solid #ddd;
}

.faq-item:last-of-type {
    border: none;
}

.faq-question {
    padding: 25px 50px 25px 0;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    position: relative;
    display: block;
}


.faq-question::-webkit-details-marker {
    display: none;
}

/* アイコン設定 */
.faq-question::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    content: '+';
    color: #999;
    transition: transform 0.3s, content 0.3s;
}

details[open] > .faq-question::after {
    content: '−';
}

/* --- 滑らかな開閉の核となる設定 --- */

/* 1. 中身を包むラッパーをグリッドにする */
.faq-answer-wrapper {
    display: grid;
    grid-template-rows: 0fr; /* 最初は高さを0にする */
    transition: grid-template-rows 0.4s ease-out; /* ここでアニメーション時間を設定 */
    visibility: hidden;
    opacity: 0;
}

/* 2. 開いた時に高さを1fr（中身に合わせる）にする */
details[open] > .faq-answer-wrapper {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
}

/* 3. 中身の要素に overflow: hidden をかける */
.faq-answer {
    overflow: hidden;
    padding: 0 50px 20px 0;
}

.faq-answer-type {
    padding: 10px 0 0;
    color: #562e25;
    font-weight: bold;
}

.faq-answer ul {
    padding: 0 0 10px;
}



/* --- ギャラリー設定（スマホ基準） --- */
.gallery-grid {
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* figureタグのデフォルト余白を消去 */
.gallery-item {
    margin: 0; 
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* figcaptionを以前のキャプションと同じ見た目にする */
.gallery-caption {
    padding: 10px;
    margin: 0;
    font-size: 14px;
    text-align: center;
    background-color: #fff;
    color: #333;
}

/* --- フェードイン・アニメーションの設定 --- */

/* アニメーションさせたい要素の初期状態（透明で少し下に配置） */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s, transform 0.8s;
}

/* 画面内に入った時に付与されるクラス（不透明にして元の位置へ） */
.fade-in.is-show {
    opacity: 1;
    transform: translateY(0);
}


/* --- アクセスセクション（スマホ基準） --- */

#access { padding: 0 0 30px; }

.access-wrapper {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 30px;
}

.access-map {
    width: 100%;
    margin: 20px 0 0;
    aspect-ratio: 4 / 3; /* 地図の比率を固定 */
}

.access-map iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.access-info h3 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #333;
}

.info-item {
    margin: 0 0 15px;
    border-bottom: dotted 1px;
    padding: 0 0 15px;
}

.info-label {
    font-weight: bold;
    font-size: 14px;
    color: #888;
    margin-bottom: 2px;
}

.info-item p:not(.info-label) {
    font-size: 16px;
    margin: 0;
}

footer {
    margin: 30px 0 0;
}

.footer-info {
    margin: 0 auto 80px;
    font-size: 12px;
}

.footer-brand {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.footer-address {
    font-size: 14px;
    opacity: 0.8; /* 少しだけ薄くして落ち着かせる */
}

.copyright {
    margin-top: 20px;
    font-size: 12px;
    opacity: 0.5;
    font-family: sans-serif; /* 英数字はゴシック系でスッキリと */
}

/* --- 固定ボタン（スマホ基準） --- */
.floating-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    z-index: 200; /* ヘッダーより上に表示 */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.float-btn {
    flex: 1;
    height: 70px;
    padding: 5px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    transition: 0.3s;
}

/* 電話ボタンの色（例：少し落ち着いたゴールド系） */
.tel-btn {
    background-color: #562e25;
}

/* メールボタンの色（例：チャコールグレー） */
.mail-btn {
    background-color: #b10f32;
}

.float-btn .icon {
    font-size: 20px;
    margin-bottom: 2px;
}

.float-btn:active {
    opacity: 0.8;
}


.icon img { height: 26px; }


/* ==========================================
   お問い合わせフォーム（スマホ・PC共通）
   ========================================== */

   #contact-page {
    width: 90%;
    margin: 0 auto;
   }

.contact-form {
    max-width: 900px; /* PCでの見やすさを考慮して少し広めに */
    margin: 30px auto 0;
}

.form-group {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee; /* 項目ごとの区切り線 */
}

.form-group:last-of-type {
    border-bottom: none;
}

.form-group label {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 入力要素の基本スタイル */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: #fdfdfd;
}

/* 送信ボタン（太字・白抜き） */
.form-button {
    margin-top: 30px;
}

.btn-submit {
    background-color: #562e25; /* シルク工房のメインカラー */
    color: #ffffff;           /* 白抜き文字 */
    font-weight: bold;        /* 太字 */
    font-size: 18px;
    padding: 15px 60px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-submit:hover {
    background-color: #3b1e18;
    transform: translateY(-2px);
}


.badge-required { font-size: 12px; color: #b10f32; }


/* ==========================================
   確認画面テーブル (formTable) のレスポンシブ設定
   ========================================== */

/* --- スマホ基準（縦並び） --- */
.formTable {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    border-top: 1px solid #ddd;
}

.formTable tbody, 
.formTable tr, 
.formTable th, 
.formTable td {
    display: block; /* テーブル構造を解除して縦に並べる */
    width: 100%;
}

.formTable th {
    background-color: #f9f6f3; /* 薄い茶系 */
    color: #562e25;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.formTable td {
    padding: 15px;
    background-color: #fff;
    min-height: 1.5em;
    word-break: break-all; /* 長い英数字の改行対策 */
}

p.error_messe{
	margin:5px 0;
	color:red;
}

.send {
    display: flex;
    gap: 20px;
}

.send input[type="submit"], 
.send input[type="button"] {
    display: block;
    width: 45%;           /* スマホでは横幅いっぱい */
    max-width: 150px;      /* 最大幅を大きめに設定 */
    padding: 18px 0;       /* 上下の余白を増やして大きく */
    font-weight: bold;     /* 太字 */
    color: #ffffff !important; /* 白抜き文字 */
    border: none;
    border-radius: 50px;   /* 角丸でプロっぽい印象に */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* 影をつけて立体感を出す */
    appearance: none;      /* ブラウザ標準デザインの解除 */
    -webkit-appearance: none;
}

/* 【送信する】ボタンの色（ブランドカラーの茶） */
.send input[type="submit"] {
    background-color: #562e25;
}

input[type="submit"] {
    background-color: #562e25;
}

/* 【前画面に戻る】ボタンの色（少し落ち着いたグレー系） */
/* ※ここも茶色にしたい場合は #562e25 に変更してください */
input[type="button"] {
    background-color: #888888;
}

.section-title a {
        padding-top: 100px; /* ヘッダーの高さ分 */
        margin-top: -100px; 
    }






/* ==========================================
   4. PC用設定（768px以上で上書き）
   ========================================== */
@media (min-width: 768px) {

    h2 { font-size: 26px; }

    section { padding: 60px 0; }

    #access { padding: 0 0 60px; }

    /* ハンバーガーアイコンを隠す */
    #nav-open { display: none; }

    /* メニューを横並びに戻す */
    #nav-content {
        position: static;
        height: auto;
        width: auto;
        background: none;
        padding-top: 0;
        left: 0;
    }

    .nav-list {
        height: auto;
        display: flex;
        gap: 25px;
    }

    .nav-list li {
        margin: 0;
        border: none;
    }

    .nav-list a { font-size: 14px; }

    /* メインビジュアル */
    .hero { height: 600px; }

    .hero-content {
    width: 450px;
    margin: 0 auto;
    }

    .hero-content h1 { font-size: 40px; }

    .hero-content h1 br { display: none; }

    /* コンセプト（横並び） */
    .concept-wrap { flex-direction: row; }
    .concept-img, .concept-text { flex: 1; }

    .concept-text h2 { margin: 0 auto 20px; }


    /* 会社概要（横並び） */
    .company-table th { display: table-cell; width: 30%; }

    .company-table td { display: table-cell; }

    .service-card {
        flex-direction: row; /* 横並びに変更 */
        align-items: stretch;
        min-height: 350px;
    }

    .service-image {
        flex: 1; /* 画像エリアを1の比率に */
    }

    .service-body {
        flex: 1; /* テキストエリアも1の比率に（50%ずつ） */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 縦方向の中央に配置 */
        padding: 50px;
    }

    .service-body h3 {
        font-size: 24px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .access-wrapper {
        margin: 20px auto 0;
        flex-direction: row; /* 横並びにする */
        align-items: flex-start;
    }

    .access-map {
         margin: 0;
         flex: 1.2; /* 地図を少し広めに */
    }

    .access-info { flex: 1; }

    #faq {
    padding: 60px 5% 30px;
}

    .floating-nav {
        bottom: 30px;
        right: 30px;
        left: auto;
        width: auto;
        flex-direction: column;
        gap: 10px;
        box-shadow: none;
    }

    .float-btn {
        width: 180px;
        height: 50px;
        flex-direction: row;
        border-radius: 25px;
        font-size: 14px;
        gap: 10px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    .faq-question { font-size: 18px; }



    .form-group {
        flex-direction: row;    /* 横並びに変更 */
        align-items: center;    /* 垂直方向を中央揃え */
    }

    .form-group label {
        width: 250px;           /* 左側のラベル幅を固定 */
        margin-bottom: 0;       /* 下の余白を消す */
        flex-shrink: 0;         /* 幅を縮ませない */
    }

    /* お問い合わせ内容（textarea）だけはラベルを上端に合わせる */
    .form-group:has(textarea) {
        align-items: flex-start;
    }
    
    .form-group:has(textarea) label {
        padding-top: 10px;
    }

    .contact-form {
        background: #fff;
        padding: 50px;
        border-radius: 10px;
    }

    #formWrap {
	    width:95%;
	    margin:0 auto;
    }

    table.formTable tr {
        display: flex;
        border-bottom: 1px solid #ddd;
    }

    table.formTable th, table.formTable td {
	    width:auto;
	    display:block;
    }

    table.formTable th {
        width: 200px;
        padding: 15px;
	    border-bottom:0;
    }

    .section-title a {
        padding-top: 150px; /* ヘッダーの高さ分 */
        margin-top: -150px; 
    }


}


/* ==========================================
   4. PC用設定（820px以上で上書き）
   ========================================== */
@media (min-width: 820px) {





}


/* ==========================================
   4. PC用設定（1180px以上で上書き）
   ========================================== */
@media (min-width: 1180px) {

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

    #concept, #gallery, #access { width: 100%; }

    #contact-page { width: 1000px; }


    footer {
        margin: 30px auto 0;
        width: 1000px;
    }

    .footer-info { width: 100%; }

    .footer-info { margin: 0 auto 20px; }




}