html {
    scroll-behavior: smooth; /* スクロールを滑らかにする */
}

/* ===============================================
   フォント設定
   =============================================== */
/* サイト全体のフォント設定（本文） */
body {
    /* 欧文には Noto Serif、和文には Noto Serif JP を適用 */
    font-family: "Noto Serif", "Noto Serif JP", serif;
    font-size: 16px;
    line-height: 1.8; 
    color: #333;
}



/* メニューバーと見出し（Fraunces） */
h1, h2, h3, .main-nav a {
    
    font-family: "Fraunces", "Noto Serif JP", serif;
    font-variant-numeric: lining-nums; /* 数字を整える設定 */
}




/* ===============================================
   タイトルロゴ設定
   =============================================== */
.site-logo {
    /* サイズ指定 */
    width: 100%;        
    max-width: 650px;     /* ロゴの最大幅 */
    height: auto;         /* 比率を保ったまま伸縮させる */

    /* 配置の調整 */
    display: block;       /* 画像の下に隙間ができるのを防ぐ */
    margin: 30px auto 0px; /* 上30px、左右auto、下0px */
    
}


/* ===============================================
   メニュー基本設定
   =============================================== */


/* メニューの外枠 */
.main-nav {
    max-width: 800px;       
    margin: 0 auto;          /* 左右の余白を自動調整して中央に寄せる */
    margin-bottom: 15px;     
    
    border-top: 2px solid #17b1c3;
    border-bottom: 2px solid #17b1c3;
}

/* 中のリスト（横並び指定、ブラウザの邪魔な余白を完全にゼロにする） */
.main-nav .menu {
    list-style: none;
    padding: 0;    /*ブラウザが勝手につける左側の余白を消す */
    margin: 0;     /* 上下の余白を消す */
    
    display: flex;
    justify-content: center;
    gap: 60px;
}

/* リストの項目 */
.main-nav .menu li {
    padding: 0;
    margin: 0;
}

/* 文字（文字のサイズと、最低限の上下の隙間担当） */
.main-nav .menu a {
    font-family: "Fraunces", serif;
    font-size: 20px;       
    font-weight: 700;      
    letter-spacing: 0.05em;
    text-decoration: none;   
    color: #333;             
    display: block;          
    padding: 2px 0; 
}


 /* メニューにマウスを乗せた時の色変化（ホバー） */
 .main-nav a:hover {
    color: #17b1c3;         /* アクセントカラー */
 }

/* ===============================================
   PC用の基本設定（画面が広いときはハンバーガーを隠す）
   =============================================== */
.menu-btn, .menu-icon {
    display: none; /* PCでは三本線ボタンを非表示に */
}

.main-nav ul {
    display: flex;
    justify-content: center;
    gap: 10px 40px;
    flex-wrap: wrap;
    list-style: none;
    padding: 20px 0;
    margin: 0;
}

/* ===============================================
   スマホ用の設定（画面幅850px以下）
   =============================================== */
@media (max-width: 850px) {

.main-nav {
        border-top: none;    /* スマホでは上の線を消す */
        border-bottom: none; /* スマホでは下の線を消す */
        margin-bottom: 0;    /* PC用につけていた下マージンもゼロに */
  }

    /*  メニュー全体を画面外（右上）に隠しておく */
    .main-nav .menu {
        display: block;
        position: fixed;
        top: 0;
        right: -100%; /* 画面の右外側に隠す */
        width: 40%;   /* メニューの横幅（画面の7割を覆う） */
        height: 100vh;
        background: #17b1c3; /* 背景色 */
        box-shadow: -5px 0 15px rgba(0,0,0,0.05); /* うっすら影をつける */
        padding-top: 80px; /* ボタンと被らないように上に余白 */
        transition: right 0.3s ease; /* スライドのアニメーション */
        z-index: 999; /* 一番手前に表示 */
    }

    /* メニュー内のリンクを縦並びにする */
    .main-nav .menu li {
        text-align: center;
        margin-bottom: 30px;
    }

    /*  ハンバーガーを右上端に配置 */
    .menu-icon {
        display: block;
        position: fixed; /* 画面に固定 */
        top: 7px;
        right: 7px;
   
        width: 70px;          /* ボタン全体の横幅 */
        height: 70px;         /* ボタン全体の縦幅 */
        background-color: #17b1c3; /* ボタンの背景色 */
        border-radius: 50px;  /* 完全な正円にする */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* ボタンの下に影 */
        
        cursor: pointer;
        z-index: 1000;        /* 一番手前に表示 */
        
        /* 三本線が円の真ん中に来るように調整 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 三本線の中央の線 */
    .menu-icon .navicon {
        background: #ffffff;
        display: block;
        height: 3px;
        position: relative;
        transition: background .2s ease-out;
        width: 26px;          /* 丸いボタンの中に綺麗に収まるサイズに調整 */
    }

    

    /* 三本線の上下の線 */
    .menu-icon .navicon:before,
    .menu-icon .navicon:after {
        background: #ffffff;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }
    .menu-icon .navicon:before { top: 9px; }
    .menu-icon .navicon:after { top: -9px; }

    /* チェックが入ったらメニューを画面内にスライドイン */
    .menu-btn:checked ~ .menu {
        right: 0; /* 右端を画面にぴったり合わせる */
    }

    /*  チェックが入ったら三本線を「×」に変形させる */
    .menu-btn:checked ~ .menu-icon .navicon {
        background: transparent; /* 中央の線を透明に */
    }
    .menu-btn:checked ~ .menu-icon .navicon:before {
        transform: rotate(-45deg);
        top: 0;
    }
    .menu-btn:checked ~ .menu-icon .navicon:after {
        transform: rotate(45deg);
        top: 0;
    }
    .menu-btn:checked ~ .menu a {
        color: #ffffff;
    }

    .menu-btn:checked ~ .menu a:hover {
        color: #ffffff;
        opacity: 0.7; /* タッチしたときに少しだけ文字を半透明にして、押した感を出す */
    }


    /*  チェックボックス自体は見えなくする */
    .menu-btn {
        display: none;
    }
}



 /*======================
   カルーセル全体の枠組み
   ======================*/

.hero-carousel {
    max-width: 800px;     /* メニューバーやコンテンツと同じ幅に */
    margin: 0 auto 30px;  /* 中央に寄せ、下に60pxの余白を空ける */
}

.swiper {
    width: 100%;
    height: auto;       /* カルーセルの高さ */
    border-radius: 8px;   /* 角丸 */
}

.swiper-slide {
    position: relative;
    overflow: hidden;
}

.swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

/* 画像が歪まないように全体に敷き詰める */
.swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 画像の上に被せる文字（キャプション）の装飾 */
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)); /* 文字が見やすいように下部を黒くぼかす */
    color: #fff;
}

.slide-caption h3 {
    font-family: "Fraunces", serif; /* 見出しフォント */
    font-size: 15px;
    margin-bottom: -8px;
}

.slide-caption p {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    opacity: 0.9;
}

/* 矢印ボタンやドットの色 */
.swiper-button-next,
.swiper-button-prev {
    color: #152729 !important;
}
.swiper-pagination-bullet-active {
    background: #ffffff !important;
}


/* ============
    外枠の設定
   ============ */

/* 左右余白用コンテナ */
.container {
    max-width: 1000px;  /* サイトの最大横幅 */
    margin: 0 auto;     /* 中央配置 */
    padding: 0 20px;    /* スマホ用の最低限の余白 */
}

/* コンテンツエリア用コンテナ */
.contents-area {
    max-width: 800px;  /* コンテナ（1000px）より狭く設定 */
    margin: 0 auto;    /* 中央配置 */
}

/* 見出し（h2）のデザイン */
.section-title {
    font-family: "Fraunces", serif;
    font-size: 28px;
    text-align: left;       
    padding-bottom: 3px;   /* 文字と線の間の距離 */
    margin-bottom: 30px;    /* 線から下のコンテンツまでの距離 */
    border-bottom: 2px solid #17b1c3; /* 線 */
    color: #0e8996;
    font-weight: 700;
}


/* ===============
   紹介文の設定
   ===============*/
.about-section {
    max-width: 800px;        
    margin: 0 auto 5px;      /* 中央寄せにして、下との間をあける */
    text-align: center;       /* 文字を中央寄せ */
    padding: 0 20px;          /* スマホ用の余白 */
}

/* 見出し文 */
.about-lead {
    font-family: "Noto Serif JP", serif;
    font-size: 20px;
    font-weight: 700;
    color: #152729;       
    margin-bottom: 0px;
    letter-spacing: 0.05em;
}

/* 本文 */
.about-text {
    font-family: "Noto Serif JP", serif;
    font-size: 14px;
    color: #444;              
    line-height: 2.0;         
    letter-spacing: 0.08em;   
}


/* 無断転載・利用禁止の一文の装飾 */
.about-warning {
    font-family: "Noto Serif JP", serif;
    font-size: 12px;          
    color: #999999;          
    line-height: 1.8;         
    letter-spacing: 0.05em;
    
    margin-top: 5px;         
    border-top: 1px dotted #e0e0e0; /* 点線 */
    padding-top: 20px;        /* 点線と文字の間の隙間 */
}


/* =======================
   バナーセクション共通設定
   ======================= */

/* バナーを囲む箱の設定 */
.banner-item {
    display: flex;       /* 横並び */
    align-items: center; 
    gap: 20px;         /* 画像と文字の間の隙間 */
    margin-bottom: 15px; /* バナー同士の上下の間隔 */
    border: 1px solid #ddd; /* 枠線 */
    padding: 10px 10px 10px 40px;     /* 枠内の余白 */
    transition: 0.3s;    /* ホバー時の動きを滑らかにする */
}



/* 画像のサイズを指定 */

.banner-img {
    width: 15%; 
    height: auto;
    object-fit: cover; /* 画像歪み防止 */
}


/* バナーテキスト */
.banner-text h3 {
    font-family: "Fraunces", serif;
    margin-bottom: 5px;
    font-size: 20px;
}

/* バナーリンク全体の設定 */
.banner-link {
    text-decoration: none; /* 下線を消す */
    color: inherit;        /* 親要素の色を引き継ぐ*/
    display: block;        /* バナー全体をクリック可能にする */
}


.banner-text p {
    color: #666;           /* 説明文の色 */
}

.banner-item {
    transition: transform 0.3s ease; /* 動きを滑らかにする */
}

.banner-link:hover .banner-item {
    transform: translateY(-5px); /* 上に5px浮く */
}


/* スマホ用の設定（レスポンシブ） */
@media (max-width: 850px) {
    .banner-item {
        flex-direction: column; /* スマホでは縦並びに切り替える */
        text-align: center;     /* 文字を中央寄せにする */
        gap: 3px;          /* 画像と文字の間の隙間 */
        padding: 30px;       /* 枠内の余白 */

    }
    .banner-item img {
        width: 30%;           /* スマホでの画像横幅 */
        max-width: 300px;      /* 広がりすぎないよう制限 */
    }
}





/* ===============================================
   Newsのデザイン
   =============================================== */
.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #eee; /* 一番上の区切り線 */
}

.news-list li {
    display: flex;
    align-items: flex-start;
    padding: 20px 10px;
    border-bottom: 1px solid #eee; /* ニュースごとの区切り線 */
    font-family: "Noto Serif JP", serif;
    font-size: 15px;
    line-height: 1.6;
}

/* 日付 */
.news-date {
    color: #888;
    margin-right: 20px;
    font-family: "Fraunces", serif; 
}

/* カテゴリタグ（Info, Shop などのラベル） */
.news-category {
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background-color: #aaa;    /* 基本はグレー */
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 20px;
    white-space: nowrap;      /* スマホでタグが改行されないように */
}
/* カテゴリごとに色を変え */
.news-category.shop { background-color: #e58d8d; } /* ショップ */
.news-category.gallery { background-color: #17b1c3; } /* ギャラリー */
.news-category.event { background-color: #ccb34e; } /* イベント */

/* ニュース本文 */
.news-content {
    margin: 0;
    color: #333;
    flex: 1; /* 残りの横幅をいっぱいに使う */
}
.news-content a {
    color: #17b1c3;
    text-decoration: underline;
}

/* ===============================================
   Profile（プロフィール）のデザイン
   =============================================== */
.profile-container {
    display: flex;
    gap: 40px;                /* 画像と文字の間隔 */
    align-items: center;      /* 上下の中央で揃える */
}

/* プロフィール画像（丸型にする） */
.profile-img img {
    width: 120px;
    height: 120px;
    border-radius: 50%;       /* 丸型にする */
    object-fit: cover;
}

.profile-text {
    flex: 1;
    font-family: "Noto Serif JP", serif;
}

.profile-text h3 {
    font-size: 20px;
    margin: 0 0 5px 0;
    color: #333;
}

.profile-lead {
    font-size: 14px;
    color: #17b1c3;        
    margin: 0 0 15px 0;
    font-weight: bold;
}

.profile-body {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 50px;
}

/* ===============================================
   スマホ用のレスポンシブ対応（横並びを縦並びにする）
   =============================================== */
@media (max-width: 850px) {
    /* ニュースをスマホでは縦並び（日付・タグ・本文の順）にする */
    .news-list li {
        flex-direction: column;
        gap: 5px;
    }
    .news-date, .news-category {
        margin-right: 0;
    }
    
    /* プロフィールをスマホでは中央寄せの縦並びにする */
    .profile-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}


/* ===============================================
   【PC用】トップへ戻るボタンの設定
   =============================================== */
/* ボタンの矢印*/
 .to-top-btn .arrow {
    display: block;
    width: 12px;               /* 矢印の幅 */
    height: 12px;              /* 矢印の高さ */
    
    /* 上と右だけに白い線を引く */
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    
    /* 角度を斜め45度回転して上向きに*/
    transform: rotate(-45deg);
    
    /* 綺麗に正真ん中に見えるように、位置をほんの1〜2px下に微調整 */
    margin-top: 4px;
}


   .to-top-btn {
    position: fixed;          /* 画面に対して固定位置に配置 */
    bottom: 7px;             /* 画面の下から7px */
    right: 7px;              /* 画面の右から7px */
    
    width: 70px;              /* ボタンの横幅 */
    height: 70px;             /* ボタンの縦幅 */
    background-color: #17b1c3; 
    border-radius: 50%;       /* 完全な正円にする */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    
    /* ボタンの下にうっすら影をつけて浮かび上がらせる */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    
    /* 画面の一番手前に表示 */
    z-index: 99;
    
    /* マウスを乗せたときにふわっと動くようにする */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ホバー時演出 */
.to-top-btn:hover {
    transform: translateY(-5px); /* 上に5pxぴょこっと浮き上がる */
    opacity: 0.9;
}


/* ===============================================
   フッターの設定
   =============================================== */
.site-footer {
    max-width: 800px;        
    margin: 0 auto;           /* 中央寄せ */
    border-top: 1px solid #eeeeee; 
    /* 線の内側の余白 */
    padding: 10px 0; 
    /* 下余白 */
    margin-bottom: 20px; 
}

/* コピーライトの文字装飾 */
.copyright {
    text-align: center;      
    font-family: "Fraunces", serif; 
    font-size: 13px;   
    color: #888888;        /* 文字色 */
    letter-spacing: 0.05em;   /* 文字の間隔を広げる */
    margin: 0;
}




/* ===============================================
    ギャラリーページ用設定
   =============================================== */

/* ===============================================
   ギャラリーページ全般設定、外枠、見出し
   =============================================== */ 
.gallery-title{
    font-family: "Fraunces", serif;
    font-size: 30px;
    color: #17b1c3;  
    margin: 0;
    letter-spacing: 0.05em; 
    text-align: center; 
}


.gallery-section {
    max-width: 800px;
    margin: 10px auto 30px;
    padding: 10px;
    text-align: center;
}


.gallery-section-title {
    font-family: "Fraunces", serif;
    font-size: 25px;
    color: #333;
    margin: 0;
    letter-spacing: 0.05em; 
         
}

.gallery-section-subtitle {
    font-family: "Noto Serif JP", serif;
    font-size: 13px;
    color: #888;
    margin: 0 auto 25px; 
}



/* ===============================================
    メイン作品用のグリッド
   =============================================== */
.main-gallery-grid {
    max-width: 800px;
    margin:  auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.main-gallery-grid a {
    display: block;
    height: 250px;
    flex-grow: 1;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}
.main-gallery-grid a:hover { transform: scale(1.03); z-index: 2; }
.main-gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* マウスホバーで拡大 */
.main-gallery-grid a:hover {
    transform: scale(1.03);
    z-index: 2;
}

.main-gallery-grid img {
    width: 100%;               /* 箱の横幅いっぱいに広げる */
    height: 100%;              /* 箱の高さに100%合わせる */
    
    /* 画像の縦横比を崩さず、指定した高さに綺麗にフィットさせる */
    object-fit: cover;         
    display: block;
}

/* ===============================================
   【スマホ用】画面が狭いときは2列にする
   =============================================== */
@media (max-width: 600px) {
    .main-gallery-grid {
        column-count: 2;       /* スマホでは2列にして見やすく */
        column-gap: 10px;
    }
    .main-gallery-grid a {
        margin-bottom: 10px;
    }
}

/* ===============================================
   サムネ切り抜き設定
   =============================================== */
/* 上を基準に切り抜く */
.crop-top {
  object-position: center top;
}

/* 右側を基準に切り抜く */
.crop-right {
  object-position: right center;
}

/* パーセンテージ調整（横%, 縦%） */
.crop-custom {
  object-position: 50%, 10%; /* 上から任意の%の位置を中心に */
}



/* ===============================================
    ミニ原画用のグリッド（サイズ固定）
   =============================================== */
.mini-gallery-grid {
    max-width: 800px;
    margin:  auto ;
    padding: 0 20px;
    
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center; 
}

.mini-gallery-grid a {
    display: block;
    width: auto;             
    height: 140px;             
    flex-grow: 0;              /* 余った隙間があっても引き延ばさない */
    flex-shrink: 0;            /* 画面が狭くなっても縮ませない */
    
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.mini-gallery-grid a:hover { 
    transform: scale(1.06);    /* ホバー時の浮き上がりを強めに */
    z-index: 2; 
}

.mini-gallery-grid img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover;         /* 元画像にズレがあっても正方形に保つ */
    display: block; 
}



/* マウスホバーで拡大 */
.main-gallery-grid a:hover {
    transform: scale(1.03);
    z-index: 2;
}

.main-gallery-grid img {
    width: 100%;               /* 箱の横幅いっぱいに広げる */
    height: 100%;              /* 箱の高さに100%合わせる */
    
    /* 画像の縦横比を崩さず、指定した高さに綺麗にフィットさせる */
    object-fit: cover;         
    display: block;
}



/* ===============================================
   アーカイブ専用のデザイン
   =============================================== */ 

.archive-gallery-grid {
    max-width: 800px;
    display: flex;
    flex-wrap: wrap;           /* 横幅がいっぱいになったら自動折り返し */
    gap: 10px;                 /* サムネイル同士の隙間 */
    justify-content: center;   /* 全体を中央寄せ */
}

/* サムネイル画像の設定 */
.archive-gallery-grid a {
    display: block;
    width: 85px;               
    height: 85px;              
    overflow: hidden;          /* はみ出た部分をトリミング */
    border-radius: 4px;        /* 角丸*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 画像大きさ揃え */
.archive-gallery-grid a img {
    width: 100%;               /* 85pxの横幅に100%合わせる */
    height: 100%;              /* 85pxの縦幅に100%合わせる */
    object-fit: cover;         /* 画像を歪ませずに、はみ出た分をトリミングする */
}

/* マウスを乗せたときに浮き上がる */
.archive-gallery-grid a:hover {
    transform: scale(1.08);    /* 少しだけ拡大する */
    opacity: 0.9;
    z-index: 2;                /* 拡大した画像が隣の画像の下に隠れないように */
}