/* リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
    font-family: 'Hiragino Mincho ProN', '游明朝', YuMincho, 'MS PMincho', 'ヒラギノ明朝 ProN W3', serif;
    background-color: #fbf0e8; /* 外枠のベージュ */
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ヘッダー */
.header-nav  {

}
.logoandsnsicon{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 52px;
}
/* ヘッダーロゴの画像スタイル */
.header-logo-image {
    width: 125px; /* ワイヤーフレームのロゴの幅 */
    height: 100px; /* ワイヤーフレームのロゴの高さ */
    object-fit: contain; /* 画像全体が表示されるように調整 */
    display: block;
}

.header-right{
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100px;
    position: relative; /* ハンバーガーメニューとナビゲーションの配置基準 */
}

.header-nav ul {
    display: flex;
    gap: 70px;
    margin-right: 90px;
    font-size: 23px;
}

.header-nav a {
  color: black;
  text-decoration: none; /* デフォルトのアンダーラインを消す */
  position: relative;    /* 擬似要素の基準位置とする */
  display: inline-block; /* 擬似要素がa要素の幅に合わせるように */
  padding-bottom: 5px;   /* アンダーラインとテキストの間に少しスペースを空ける */
  overflow: hidden;      /* はみ出した擬似要素を隠すため */
}

.header-nav a::before {
  content: '';
  position: absolute;
  bottom: 0;             /* a要素の下部に配置 */
  left: 0;               /* a要素の左端に配置 */
  width: 100%;           /* a要素の幅いっぱいに */
  height: 1.5px;           /* アンダーラインの太さ */
  background-color: black; /* アンダーラインの色 */
  transform: translateY(100%); /* 初期状態では完全に下に移動させて見えないように */
  transition: transform 0.3s ease-out; /* アニメーションの時間とイージング */
}

.header-nav a:hover::before {
  transform: translateY(0); /* ホバー時に元の位置に戻す */
}

.header-icons {
    display: flex;
    gap: 10px;
}

/* ヘッダーアイコンの画像スタイル */
.header-icon {
    width: 35px; /* ワイヤーフレームのアイコンの幅 */
    height: 20px; /* ワイヤーフレームのアイコンの高さ */
    object-fit: contain; /* 画像全体が表示されるように調整 */
    display: block;
}

/* ハンバーガーメニューボタンのスタイル（通常は非表示） */
.hamburger-menu {
    display: none; /* デスクトップでは非表示 */
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #333;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1001; /* ナビゲーションより手前に */
}

/* スライドセクション */
 .slide {
            width: 100%;
            height: 500px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 50px;
            overflow: hidden;
            position: relative; /* 子要素のabsolute配置のために必要 */
}

/* スライド画像のスタイル */
.slide-image {
    width: 94%; /* スライドセクションの幅に合わせる */
    height: 100%; /* スライドセクションの高さに合わせる */
    object-fit: cover; /* 画像がセクション全体を覆うように拡大縮小（はみ出しはトリミング） */
    display: block;
    position: absolute; /* 親要素 .slide 内での配置 */
    right: 0; /* 右端に寄せる */
    opacity: 0; /* デフォルトでは非表示 */
    transition: opacity 1s ease-in-out; /* 透明度の変化に1秒かける */
    
}
.slide-image.active {
            opacity: 1; /* activeクラスが付いている画像は表示 */
        }

/* 各コンテンツセクション共通 */
.about-section, .menu-section, .info-section {
    display: flex;
    padding: 50px 100px; /* 左右の余白 */
    gap: 50px; /* テキストと画像の間隔 */
    align-items: center; /* 垂直方向の中央揃え */
}
.menu-section, .info-section {
    margin-top:50px ;
}
.info-text{
    background-color: #66666680;
    padding: 50px;
    color: #fbf0e8;
}
h2 {
    font-size: 2em;
    margin-bottom: 20px;
}

/* ボタンコンテナのスタイル（中央寄せ用） */
.more-button-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px; /* 上部に余白を追加 */
    margin-bottom: 80px; /* 下部に余白を追加 */
}

/* Moreボタンの基本スタイル */
.more-button {
    position: relative; /* 擬似要素の基準位置 */
    width: 140px;
    height: 50px;
    border: 1px solid #000; /* デフォルトの黒い枠線 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000; /* デフォルトの黒い文字色 */
    font-weight: bold;
    cursor: pointer;
    overflow: hidden; /* 枠線アニメーションの準備 */
    transition: color 0.4s ease-out; /* 文字色のアニメーション */
}

/* ホバー時の文字色を白に */
.more-button:hover {
    color: #fff;
}

/* ボタンの背景色（ホバー時） */
.more-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* 黒い背景色 */
    transform: translateX(-100%); /* 最初は左に完全に隠しておく */
    transition: transform 0.4s ease-out; /* 背景色のアニメーション */
    z-index: -1; /* ボタンの文字より奥に配置 */
}

/* ホバー時に背景色が左から右へスライドしてくるアニメーション */
.more-button:hover::before {
    transform: translateX(0);
}

/* 外枠の線を一周させるための擬似要素 */
.more-button::after {
    content: '';
    position: absolute;
    top: -1px; /* 親要素のボーダーと重ならないように調整 */
    left: -1px; /* 親要素のボーダーと重ならないように調整 */
    width: calc(100% + 2px); /* 親要素のボーダーを含めた幅 */
    height: calc(100% + 2px); /* 親要素のボーダーを含めた高さ */
    border: 1px solid transparent; /* 最初は透明 */
    box-sizing: border-box; /* paddingとborderをwidth/heightに含める */
    animation: none; /* デフォルトではアニメーションなし */
}

/* ホバー時に外枠の線を一周させるアニメーションを再生 */
.more-button:hover::after {
    animation: drawBorder 1.2s linear forwards; /* アニメーション定義 */
}

/* 枠線を描画するKeyframesアニメーション */
@keyframes drawBorder {
    0% {
        border-color: transparent transparent transparent transparent;
        border-width: 0 0 0 0;
    }
    10% {
        border-color: #000 transparent transparent transparent; /* 上線を引く */
        border-width: 1px 0 0 0;
    }
    30% {
        border-color: #000 #000 transparent transparent; /* 上線と右線を引く */
        border-width: 1px 1px 0 0;
    }
    50% {
        border-color: #000 #000 #000 transparent; /* 上線、右線、下線を引く */
        border-width: 1px 1px 1px 0;
    }
    70% {
        border-color: #000 #000 #000 #000; /* 全ての線を引く */
        border-width: 1px 1px 1px 1px;
    }
    100% {
        border-color: #000 #000 #000 #000; /* 全ての線を引いた状態を維持 */
        border-width: 1px 1px 1px 1px;
    }
}

/* レスポンシブ対応 (必要に応じて調整) */
@media (max-width: 600px) {
    .more-button {
        width: 100px;
        height: 35px;
        font-size: 0.9em;
        margin: 0 auto;
    }
    .more-button-container {
        margin-top: 30px;
        margin-bottom: 60px;
    }
}

/* 各セクション内の画像の共通スタイル */
.section-image {
    width: 400px; /* ワイヤーフレームの画像サイズに合わせる */
    height: 250px; /* ワイヤーフレームの画像サイズに合わせる */
    object-fit: cover; /* 画像が指定サイズに収まるようにトリミング */
    display: block;
}

/* テキストコンテンツのFlex設定 */
.about-content, .menu-content, .info-text {
    flex-shrink: 0; /* 必要に応じて縮まないようにする */
    /* flex-grow: 1; を追加すると、余ったスペースを埋めるように広がる */
}


/* Aboutセクション: テキストが左、画像 (IMG1) が右 */
.about-section {
    flex-direction: row; /* デフォルトの並び順 */
    justify-content: center; /* 両端揃え */
}
.whbg{
    background-color: #fff;
    width: 94%;
}
.about-content p{
    margin-bottom: 10px;
    font-size: 20px;
}
/* Menuセクション: 画像 (IMG2) が左、テキストが右 */
.menu-section {
    flex-direction: row; /* 並び順を反転 */
    justify-content: center; /* 両端揃え */
}
/* Menuセクション: タイトルとリンク部分 */
.menu-content{
    width: 100px;

}
/* Infoセクション: テキストが左、画像 (IMG3) が右 */
.info-section {
    flex-direction: row; /* デフォルトの並び順 */
    justify-content: center; /* 両端揃え */
}
/* googleMAPのサイズ*/
.maparea{
    width: 100%;
    position: relative;
    padding-bottom: 30%; /* これが縦横比 */
    height: 0;
    overflow: hidden;
}
.maparea iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* フッター */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 50px;
    border-top: 1px solid black;
    background-color: #f8f8f8;
    font-size: 0.9em;
}

.footer-icons {
    display: flex;
    gap: 10px;
}

/* フッターアイコンの画像スタイル */
.footer-icon {
    width: 40px; /* ワイヤーフレームのフッターアイコンの幅 */
    height: 25px; /* ワイヤーフレームのフッターアイコンの高さ */
    object-fit: contain; /* 画像全体が表示されるように調整 */
    display: block;
}

.footer-contact {
    color: black;
    font-weight: bold;
}

.footer-nav ul {
    display: flex;
    gap: 20px;
}

.footer-nav a {
    color: black;
}

.copyright {
    color: #666;
    font-size: 0.8em;
}

/* スクロールバー */
.scroll {
  position: relative;
}
.scroll-text {
  font-size: 14px;
  text-align: center;
  position: relative;
  top: 80px;
}
.scroll-border {
  position: relative;
  padding: 56px 0;
}
.scroll-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
  background: #333;
  animation: scrollbar-top 2.0s ease-in-out infinite;
  margin: auto;
}
.scroll-border::after {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 50px;
  top: 85px;
  left: 0;
  right: 0;
  background: #333;
  animation: scrollbar-bottm 2.0s ease-in-out infinite;
  margin: auto;
}
@keyframes scrollbar-top {
  0% {
    height: 0;
  }
  30% {
    height: 50px;
  }
  90% {
    height: 50px;
  }
  90.1% {
    height: 0;
  }
  100% {
    height: 0;
  }
}
@keyframes scrollbar-bottm {
  0% {
    height: 0;
  }
  25% {
    height: 0;
  }
  55% {
    height: 50px;
  }
  90% {
    height: 50px;
  }
  90.1% {
    height: 0;
  }
  100% {
    height: 0;
  }
}

/* main */
main {
    padding: 40px 20px;
    max-width: 800px;
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.contact-form-container h1 {
    text-align: center;
    color: #5a4b41; /* bodyのベージュに合うように少し濃いめの色 */
    margin-bottom: 30px;
    font-size: 2em;
    font-weight: normal;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #5a4b41;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box; /* paddingを含めてwidthを計算 */
    font-family: 'Hiragino Mincho ProN', '游明朝', YuMincho, 'MS PMincho', 'ヒラギノ明朝 ProN W3', serif; /* bodyと合わせる */
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    border-color: #d1b8a9; /* フォーカス時に少し色を変える */
    outline: none;
    box-shadow: 0 0 5px rgba(209, 184, 169, 0.5);
}

.contact-form textarea {
    resize: vertical; /* 縦方向のみリサイズ可能にする */
}

.contact-form .submit-button {
    display: block;
    width: 200px;
    padding: 15px;
    margin: 30px auto 0;
    background-color: #d1b8a9; /* bodyのベージュに合わせたボタン色 */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Hiragino Mincho ProN', '游明朝', YuMincho, 'MS PMincho', 'ヒラギノ明朝 ProN W3', serif;
}

.contact-form .submit-button:hover {
    background-color: #b79c8d;
}


/* ==============================================
   レスポンシブデザイン (メディアクエリ)
   ============================================== */
@media (max-width: 768px) {
    /* ヘッダー */
    .logoandsnsicon {
        flex-direction: row; /* ロゴとアイコンは横並びに戻す */
        justify-content: space-between; /* 両端に配置 */
        align-items: center; /* 中央揃え */
        padding: 15px 20px;
        position: relative; /* ハンバーガーメニュー配置のため */
    }

    .header-logo-image {
        width: 100px;
        height: auto;
        margin-bottom: 0; /* リセット */
    }

    .header-right {
        flex-direction: row; /* アイコンとハンバーガーメニューを横並びに */
        align-items: center;
        width: auto; /* 幅を自動調整 */
        height: auto;
        position: static; /* position: relative; をリセット */
    }

    .header-icons {
        margin-bottom: 0; /* リセット */
        margin-right: 15px; /* ハンバーガーボタンとの間隔 */
    }

    /* ハンバーガーメニューボタンの表示 */
    .hamburger-menu {
        display: block; /* スマートフォンで表示 */
        position: static; /* position: absolute; をリセット */
    }

    /* 通常のナビゲーションメニューは初期状態で非表示 */
    .header-nav {
        display: block; /* デフォルトでブロック要素として存在させる */
        position: absolute;
        top: 100px; /* ヘッダーの高さの下に配置 */
        left: 0;
        width: 100%;
        background-color: #fbf0e8; /* 背景色を設定 */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        padding: 20px 0;
        
        /* === フェードイン効果を追加 === */
        opacity: 0; /* 初期状態で透明 */
        transform: translateY(-100%); /* 上に隠しておく */
        transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* transform と opacity の両方にトランジション */
        pointer-events: none; /* メニューが非表示のときにクリックできないように */
    }

    /* JavaScriptで'is-active'クラスが追加されたら表示 */
    .header-nav.is-active {
        opacity: 1; /* 不透明にして表示 */
        transform: translateY(0); /* スライドイン */
        pointer-events: auto; /* メニューが表示されたらクリックできるように */
    }

    .header-nav ul {
        flex-direction: column; /* ナビゲーションを縦並びに */
        gap: 15px; /* 間隔を調整 */
        margin-right: 0; /* 右マージンをリセット */
        text-align: center; /* テキスト中央揃え */
        width: 100%;
        padding-bottom: 0; /* リセット */
    }

    .header-nav a {
        font-size: 1.1em; /* フォントサイズ調整 */
        color: #333; /* メニュー内のリンク色 */
        padding: 10px 0; /* クリックしやすいようにパディング */
        display: block; /* クリックエリアを広げる */
    }

    /* スライドセクション */
    .slide {
        height: 300px; /* 高さを調整 */
        margin-bottom: 30px;
    }

    .slide-image {
        width: 100%; /* 全幅に */
        right: 0;
        left: 0;
    }

    /* 各コンテンツセクション */
    .about-section,  .info-section {
        flex-direction: column; /* 縦並びに変更 */
        padding: 30px 20px; /* パディングを調整 */
        gap: 30px; /* 間隔を調整 */
        text-align: center; /* テキストを中央揃え */
    }
    .menu-section{
        flex-direction: column-reverse; /* 縦並びに変更 */
        padding: 30px 20px; /* パディングを調整 */
        gap: 30px; /* 間隔を調整 */
        text-align: center; /* テキストを中央揃え */

    }

    .section-image {
        width: 90%; /* 幅を調整 */
        height: auto; /* 高さを自動調整 */
        max-width: 350px; /* 最大幅を設定 */
    }
    
    .about-content p {
        font-size: 1em; /* フォントサイズ調整 */
    }

    .info-text {
        padding: 30px 20px; /* パディングを調整 */
    }
    
    h2 {
        font-size: 1.8em; /* h2のサイズを調整 */
    }

    /* Googleマップ */
    .maparea {
        padding-bottom: 60%; /* 縦横比を調整して高さを確保 */
    }

    /* フッター */
    .footer {
        flex-direction: column; /* 縦並びに変更 */
        padding: 20px;
        text-align: center;
    }

    .footer-icons {
        margin-bottom: 15px;
    }

    .footer-contact {
        margin-bottom: 15px;
        font-size: 1em;
    }

    .footer-nav ul {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    .footer-nav a {
        font-size: 1em;
    }

    .copyright {
        font-size: 0.7em;
    }

    /* コンタクトフォーム */
    main {
        padding: 20px;
        margin: 10px auto;
    }

    .contact-form-container h1 {
        font-size: 1.8em;
        margin-bottom: 20px;
    }

    .contact-form label {
        font-size: 0.9em;
    }

    .contact-form input[type="text"],
    .contact-form input[type="email"],
    .contact-form textarea {
        padding: 10px;
        font-size: 0.9em;
    }

    .contact-form .submit-button {
        width: 160px;
        padding: 12px;
        font-size: 1em;
        margin-top: 20px;
    }
}