/* リセットと基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 背景色はコンテンツの間に見える薄いベージュ系 */
    /*background-color: #EFE8D2; */
    background-color: #EFE8D2; /* 背景画像の裏の基本色（画像でいうベージュ） */
    background-size: cover;
    background-repeat: no-repeat;

    overflow-x: hidden;
    font-family: 'Hiragino Mincho Pro', sans-serif;
    color: #333;
    line-height: 1.6;
     min-height: 100vh;
    height: 100%;
}

.wrapper {
    display: flex;
    flex-direction: column; /* 要素を縦方向に並べる */
    min-height: 100vh; /* 画面の高さより小さくても100%の高さにする */
}


.homepage {
    background-image: url('back01.jpg');
}

.otherpage {
    background-image: url('back02.jpg');
}

/* ---------- モバイルで homepage を otherpage と同じ画像に差し替えるサンプル ----------
   実装方法:
   1) プロジェクト内に軽量版画像 `back02-small.jpg` を用意する（モバイル用にリサイズ/圧縮したもの）
   2) 以下の CSS を有効にすると、画面幅が 767px 以下のとき `body.homepage` が `back02-small.jpg` を使います。
   3) `back02-small.jpg` が無ければ `back02.jpg` にフォールバックする形にしています。
*/
@media (max-width: 768px) {
    /* もし小さい画像を用意するならこちらを使う */
    body.homepage {
        background-image: url('back02-small.jpg'); /* mobile 用に用意した軽量画像 */
        /* フォールバック: サーバ/ブラウザのキャッシュや存在確認が必要なら、
           HTML 側で <link rel="preload"> 等を使って先に用意する方法もあります */
    }
}



main {
  flex: 1;
}


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

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

ul {
    list-style: none;
}

/* --- ヘッダー --- */
header {
    background-color: #405F70; 
    color: #fff;
    padding: 10px 20px;
    font-size: 0.8rem;
    position: sticky; /* スクロールしても上部に固定したい場合は有効に */
    top: 0;
    z-index: 10;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* PC表示を想定して最大幅を設定 */
    margin: 0 auto;
}

.utility-nav ul {
    width: 100%;
    display: flex;
    gap: 15px;
}

/* --- メインビジュアル --- */
.main-visual {
    background-color: #2e4a4a; /* 濃い目のグリーン/ネイビー系 */
    color: #fff;
    text-align: center;
    padding: 110px 20px 20px;
    max-width: 1500px;
    margin-top: 0%;
}

.main-visual h1 {
    font-family: serif; /* デザインのロゴに近いフォント */
    font-size: 3rem; /* サイズは画像から調整 */
    letter-spacing: 0.2em;
    margin-bottom: 5px;
    border-bottom: 1px solid #a3b8b1; /* 1pxの実線で、ちょっと明るい色 */
    padding-bottom: 10px; /* 線と文字の間に少しスペースを開ける */
    margin-bottom: 15px; /* 線と「印象派の世界へ」の間にスペースを開ける */
    max-width: 550px; /* 線が画面いっぱいに伸びないように幅を調整 */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
}

.main-visual .tagline {
    font-family: 'Hiragino Mincho Pro';
    font-size: 2rem;
    margin: 40px 0 80px 0;
}


/* --- メインビジュアル --- */
/* ... 省略 ... */

.slider-container {
    /* JavaScriptは不要！transitionは削除！ */
    display: flex;
    gap: 10px;
    padding: 10px 0;
    width: 400%; 
    min-width: calc(1810px * 3); /* 3セット分の幅を最低限確保 */
    margin: 50px auto 0 auto;
    
    /* 💖✨ これがないと流れ続けないよ！ ✨💖 */
    overflow-x: hidden; 
    
    /* ★ アニメーションを開始！ ★ */
    animation: flow-slide 60s linear infinite; /* 60秒かけて、直線的に、無限に繰り返す */
}

/* ★ アニメーション中はマウスが触れても止めない場合は、これらは削除！ ★
.slider-container:hover {
    animation-play-state: paused;
}
*/

.slide-item {
    width: 250px; 
    min-width: 250px; 
    height: 300px; 
    overflow: hidden;
    /* transition: none; を明示的に入れておくと、JSの残骸が影響しなくて安心 */
    transition: none; 
}

/* ... 省略 ... */

/* 💖✨ これが本命！画像を左に流すアニメーションの定義 ✨💖 */
@keyframes flow-slide {
        0% {
            transform: translateX(0);
        }
        100% {
            /* 新しい1セット分（7枚）の幅だけ左に移動させる！ */
            transform: translateX(-1810px); 
        }
    }



.slide-item img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* 画像をボックスに収める */
}


/* --- 導入文 --- */
.introduction {
    /*background-color: #EFE8D2;  */
    padding: 100px 20px 100px;
    text-align: center;
    max-width: 800px; /* 読みやすいように最大幅を設定 */
    margin: 60px auto 0 auto;
}

.introduction h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #555;
}

.introduction p {
    margin-bottom: 15px;
    text-align: center;
}

/* --- コンテンツリスト --- */
.content-list {
    padding: 0 0 50px 0;
}

.content-item {
    display: flex;
    flex-direction: column; /* 基本は縦に並べる（モバイルファースト） */
    align-items: center;
    padding: 40px 0;
    /* ストライプ状の背景色 */
    background-color:rgba(232, 222, 208, 0.8)
}


/* 奇数番目の背景は少し濃くする */
.content-list div:nth-child(even) {
    background-color:rgba(175, 160, 139, 0.8)
}

.content-item .text-area {
    padding: 10px 0 20px;
    max-width: 400px;
}

.content-item h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    border-bottom: 1px solid #2a3c8c; /* 見出し下の線 */
    padding-bottom: 5px;
    display: inline-block;
}

.content-item p {
    margin-bottom: 10px;
}

/* 1. リンク全体を position: relative; の基準にする */
.content-item .read-more {
    color: #4a6c6c;
    font-weight: bold;
    display: flex; 
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    width: 80%; 
    
    /* 🚨 追加：矢印の先端の基準にする */
    position: relative; 
}

/* 2. 線の部分 (::after) を修正 */
.content-item .read-more::after {
    content: ''; 
    height: 1px;
    flex-grow: 1; /* 残りの幅いっぱいまで線を伸ばす */
    width: auto;
    background-color: #4a6c6c;
    
    /* 🚨 修正：三角形は別の要素で作るため、borderとmargin-rightを削除！ */
    border: none;
    margin-right: 0; 
}

/* 3. 💖✨ 矢印の先端 (::before) を追加！✨💖 */
.content-item .read-more::before {
    content: '';
    /* 🚨 position: absolute; で、リンク全体の右端に配置する！ */
    position: absolute; 
    
    /* リンクの右端から少し内側 (padding-right) に配置 */
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
    
    /* 三角形の定義 */
    border-top: 4px solid transparent; 
    border-bottom: 4px solid transparent; 
    border-left: 8px solid #4a6c6c; 
}


.content-item .image-area {
    width: 100%;
    max-width: 100%;
    height: 300px;
    overflow: hidden;
    /* 丸い画像を実現 */

}

.content-item .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* PC/タブレットサイズでのレイアウト調整 */

@media (min-width: 768px) {
    .content-item {
        flex-direction: row; /* 横並びにする */
        padding: 10px 0 10px 10%;
        margin: 0; /* 中央寄せの解除 */
        justify-content: space-between;
        align-items: center;
        max-height: 400px;
    }

    .content-item .text-area {
        width: 70%;
        padding: 0 20px 0 0;
        text-align: left;
    }

    .content-item .image-area {
        width: 60%;
        max-width: 100%;
        height: 400px;
    }
    .content-item .image-area img {
        width: 100%;
        height: 400px;
    }

    /* 左右反転のアイテム調整 */
    .content-item.reverse {
        flex-direction: row-reverse;
    }

    .content-item.reverse .text-area {
        /* 左右反転したテキストエリアの余白を調整 */
        padding: 0 0 0 20px; /* 左側の余白を確保しつつ、右は詰める */
    }
}

/* --- フッター --- */
footer {
    background-color: #2e4a4a; /* 濃い目のグリーン/ネイビー系 */
    color: #fff;
    text-align: center;
    padding: 40px 20px;
    font-size: 0.7rem;
    position: static;
}


/* --- 印象派とは？追加スタイル --- */

/* ヘッダー（なぜか共通化されてない） */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

.site-title {
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0.1em;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: 1.2em;
    margin: 0;
    padding: 0;
}

header nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.95em;
}

/* ヒーローセクション */
.hero {
    margin: 0% auto 1.5em auto;
    max-width: 1600px;
}

.hero-image {
    background: url('Whats/Whats01.png') center/cover no-repeat;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-text {
    background: rgba(255,255,255,0.2);
    text-align: center;
    padding: 2em 1em;
}

.hero-text h1 {
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0.5em 0;
    color: #222;
    letter-spacing: 0.05em;
}

.hero-text p {
    font-size: 1.3em;
    color: #7a5c2e;
    margin: 0;
}

.event-image {
    background: url('Event01.png') center/cover no-repeat;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lead {
    text-align: center;
    margin: 1.5em auto 2em auto;
    font-size: 1.1em;
    max-width: 800px;
}

/* セクション共通 */
section {
    max-width: 900px;
    margin: 2.5em auto;
    padding: 0 1em;
}

h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #bdbdbd;
    padding-bottom: 0.2em;
    margin-bottom: 1em;
    color: #3a5565;
    font-weight: normal;
}

.section-image {
    text-align: center;
    margin-bottom: 1em;
}

.section-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* 印象派の画家たちセクション */
.impressionist-artists {
    margin-bottom: 3em;
}

.impressionist-artists .section-image {
    position: relative;
}

.artists-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 30%;
    text-align: center;
    color: #222;
    background: rgba(255,255,255,0.7);
    padding: 2em 1em 1.5em 1em;
    border-radius: 8px;
    max-width: 80%;
    margin: 0 auto;
}

.artists-text h2 {
    border: none;
    color: #3a5565;
    font-size: 1.4em;
    margin-bottom: 0.7em;
}

.artists-text .view-more {
    display: inline-block;
    margin-top: 1.2em;
    color: #7a5c2e;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}

/* フッター（共通化されていれば不要） */
footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

footer ul li a {
    color: #fff;
    text-decoration: none;
}

/* === ▼▼▼ ToEnjoyArtページ専用追加スタイル ▼▼▼ === */


/* --- ヒーローセクション --- */
.hero.to-enjoy-hero {
    margin: 0 auto 1.5em auto;
    max-width: 1600px;
}
.hero-image.to-enjoy-hero-image {
    background: url('Enjoy/Enjoy00.png') center/cover no-repeat;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
}


/* --- 各楽しみ方セクション --- */
.enjoy-section {
    max-width: 800px;
    margin: 2.5em auto;
    padding: 25px 40px ;
    background: #f7f3ed;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.enjoy-section h2 {
    font-size: 1.2em;
    color: #3a5565;
    border-bottom: 1px solid #bdbdbd;
    padding-bottom: 0.2em;
    margin-bottom: 1em;
    font-weight: normal;
}
.enjoy-image {
    text-align: center;
    margin-bottom: 1em;
}
.enjoy-image img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* === ▲▲▲ ToEnjoyArtページ専用追加スタイル ▲▲▲ === */

/* === ▼▼▼ 印象派画家ページ専用追加スタイル ▼▼▼ === */

/* ▼ For Gemini ▼ */

/* 🎨 画像とタイトルのセクションのスタイル */
.artist-works {
    /* 🤩 Flexboxを使うよ！これで中の要素が横並びになるよ 🤩 */
    display: flex;
    justify-content: space-between; /* 要素を左右に広げて配置 */
    gap: 30px; /* 要素間の隙間 */
    margin-bottom: 40px; /* 下のテキストとの間にスペース */
}

/* 🖼️ 各画像とタイトルのコンテナのスタイル */
.item {
    margin-top: 40px;
    flex: 1; /* 2つの要素が均等な幅になるように */
    text-align: center; /* タイトルを中央に寄せる */
}

/* 🖼️ タイトルのスタイル */
.title {
    font-size: 1.2em;
    font-weight: normal; /* 太字じゃない方が元のデザインに近いかも */
    margin-top: 0;
    margin-bottom: 15px; /* 画像との間にスペース */
}

/* 🖼️ 画像のスタイル */
.artwork-image {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    height: auto; /* 比率を保つ */
    display: block; /* 余計な隙間をなくす */
    border: 1px solid #ddd; /* 必要なら細い枠線を追加 */
}

/* 📝 下のテキストブロックのセクションのスタイル */
.text-section {
    padding-top: 20px; /* 上部に少し余白 */
    border-top: 1px solid #ddd; /* 上の画像セクションとの区切り線 */
    text-align: left;
}

/* 📝 見出しのスタイル */
.heading {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
    /* 背景画像っぽいデザインなら、ここで背景色を薄くつけるのもアリ！ */
}

/* 📝 本文のスタイル */
.paragraph {
    line-height: 1.8; /* 読みやすいように行の高さを調整 */
    font-size: 1em;
}



/* 🌟 全体を囲むコンテナ (Flexboxの親要素) 🌟 */
.artist-profile {
    display: flex; /* 🤩 これで中の要素 (text-columnとimage-column) が横並びになるよ！ 🤩 */
    align-items: flex-start; /* 縦方向の揃えを上端に */
    gap: 40px; /* 左右のカラム間の隙間 */
}

/* 📝 左側のテキストエリアのスタイル */
.text-column {
    flex: 2; /* 左右の比率を調整！左を右の約2倍の幅にする */
    padding-right: 20px; /* 画像との間に少し余裕を持たせる */
    text-align: left;
    font-size: 14px;
}

/* 🖼️ 右側の画像エリアのスタイル */
.artists-column {
    flex: 1; /* 右側は左の半分の幅にする */
}

/* 🖼️ 画像のスタイル */

.monet-picture {
    width: 100%; 
    height: 370px; /* 比率を保つ */
    display: block;
}

.monet-japonese{
    max-height: 100%;
    width: 400px;
    margin: 0px 0px 30px 0px;
}

.renoir-picture {
    width: 100%; 
    height: 370px; /* 比率を保つ */
    display: block;
}

.renoir-coco{
    max-height: 300px;
    margin: 0px 0px 30px 0px;
}

.degas-picture {
    width: 100%; 
    height: 370px; /* 比率を保つ */
    display: block;
}

.manet-picture {
    width: 100%; 
    height: 370px; /* 比率を保つ */
    display: block;
}

.morizot-picture {
    width: 100%; 
    height: 370px; /* 比率を保つ */
    display: block;
}

.gogh-picture {
    width: 100%; 
    height: 370px; /* 比率を保つ */
    display: block;
}

.klimt-picture {
    width: 100%; 
    height: 370px; /* 比率を保つ */
    display: block;
}

.IkenoAsa{
    max-height: 300px;
}

.soup{
    max-height: 300px;
    margin-bottom: 20px;
}

/* 📝 タイトルのスタイル */
.main-title {
    font-size: 2em;
    font-weight: normal;
    padding-bottom: 5px;
    border-bottom: 1px solid #333; /* 下線 */
    margin-top: 0;
    margin-bottom: 5px;
}

.sub-title {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 30px;
}

/* 📝 本文の段落スタイル */
.discription p {
    line-height: 1.8;
    margin-bottom: 15px;
    font-size: 0.95em;
}


/* スマホとか小さい画面になった時のための設定だよ！ */
@media (max-width: 768px) {

    /* 1. タイトル（H1）もスマホに合わせて少し調整（もし大きければ） */
    .main-visual h1 {
        font-size: 2.2rem; /* 3remから少しサイズダウン */
        max-width: 85%; /* 線が長くなりすぎないように */
    }

    /* 2. 💖 本命！キャッチコピー（tagline）を小さくする 💖 */
    .main-visual .tagline {
        font-size: 1.5rem; /* 2remから1.2remくらいに。スッキリするよ！ */
        margin: 20px 0 40px 0; /* 上下の余白も少し詰めて、スライダーを上に持ってくる ✨ */
        letter-spacing: 0.1em; /* 少し字間を空けると上品になるよ */
    }

    .main-visual{
        padding-bottom: 5%;
    }

    .slider-container{
        margin-top: 10%;
    }

    .slide-item {
        height: 280px; /* 300pxから180pxくらいに。これなら圧迫感がないよ！ */
        width: 180px;  /* 横幅も少し合わせて小さくすると、一度にたくさん絵が見えて楽しい ✨ */
        min-width: 150px; 
    }

    /* 💡 アニメーションの移動距離も微調整が必要かも！ */
    @keyframes flow-slide {
        0% {
            transform: translateX(0);
        }
        100% {
            /* 画像の幅が小さくなったら、1セット分（7枚）の合計幅に合わせてここも調整してね！ */
            /* 例：(150px + gap 10px) * 7 = 1120px */
            transform: translateX(-1120px); 
        }
    }

    .introduction h2{
        /* ✨ ここから下が「線」の設定 ✨ */
        padding-bottom: 1em; /* 👈 この数字をいじると「文字と線の間」が変わるよ！ */
        margin-bottom: 30px;
    }

    .introduction {
        /* 👇 セクション全体の上の隙間（スライダーとの距離） */
        margin: 30px auto 0 auto; 
    
        /* 👇 セクション内側の上下の余白（文字の周りの空間） */
        padding:30px 20px 40px 20px; 
        text-align: center;
    }

    .artist-profile {
        flex-direction: column; /* 縦に並び変える */
    }

    .artist-works {
        flex-direction: column; /* 縦に並び変える */
        gap: 20px;
    }
    
    /* 縦並びになったら、画像のほうを先に表示してもOK！ */
    .artists-column {
        order: -1; /* 画像を文章より上に持ってくる */
        margin-bottom: 20px;
    }
    
    /* 幅の比率設定もリセット */
    .text-column, .artists-column {
        flex: auto;
    }

    .impressionist-artists .artists-text {
        /* 縦方向の固定位置をリセットし、真ん中 (50%) から上に半分の高さを引くことで中央寄せを実現！ */
        top: 35%;
        transform: translateY(-50%); /* 💡これがポイント！ */
        
        /* モバイルで幅を広げすぎないよう max-width を調整してもOK */
        max-width: 80%; 
        max-height: 80%;
        padding: 1.5em 1em; /* パディングを微調整すると見やすくなるよ */
    }
    .artists-text h2 {
        font-size: 1.0em; /* フォントサイズを少し小さく */
        margin-bottom: 0.5em;
    }

    .artists-text p{
        font-size: 0.8em; 
        margin-bottom: 10px;
    }

    .artists-text .view-more{
        font-size: 10px;
        margin-top: 5px;
    }

    .section-image img {
        width: 100%; /* 親要素の幅いっぱい（セクション幅いっぱい）に広げる */
        height: auto; 
    }

    .impressionist-artists .section-image {
        position: relative;
        display: flex;             /* ✨ Flexbox発動！ */
        justify-content: center;    /* ✨ 左右中央 */
        align-items: center;        /* ✨ 上下中央 */
        min-height: 300px;         /* 背景画像が見えるように高さを確保（調整してね） */
    }

    .impressionist-artists .artists-text{
        /* position: absolute;  ← これは消すかコメントアウト！ */
    /* left: 0; right: 0; top: 30%; ← これらも不要になるよ */
        background: rgba(255, 255, 255, 0.8); /* ちょっと透けさせるとエモい✨ */
        padding: 2em 1.5em;
        border-radius: 8px;
        max-width: 85%;            /* スマホで横幅に余裕を持たせる */
        text-align: center;
        z-index: 2;                /* 画像より上にくるように */
    }

    section {
        padding-left: 0;
        padding-right: 0;
    }

    .fade-up-trigger h2{
        padding-left: 5%;
    }
    
    .fade-up-trigger p{
        padding-left: 10%;
        padding-right: 10%;
    }

    .content-item {
        padding: 30px 0 10px 0; /* 下（bottom）の余白を0にするよ！ */
    }

    .content-item .image-area img {
        width: 100%;
        height: 600px;
        display: block; /* これを入れると画像の下に隙間ができなくなるよ！ */
    }

    .content-item .image-area {
        margin-bottom: 0;
        line-height: 0; /* 画像の下に謎の数ピクセルの隙間ができるのを防ぐ魔法 ✨ */
    }

    .content-item .read-more {
        display: none;
    }

    .content-item .text-area {
        padding-bottom: 0; 
        margin-bottom: 10px; /* 画像との間の最低限の隙間だけ残す */
        text-align: left; /* 全体を左寄せに！ */
        max-width: 100%; /* 横幅いっぱい使えるようにする */
    }

    .content-item h3 {
        display: inline-block; /* 文字の長さに合わせる */
        border-bottom: 1px solid #1c696a;
        padding: 0 15px 5px 15px; /* 👈 ここがポイント！右に15px余白を作って、線を文字より右にはみ出させるよ */
        margin-bottom: 0 15px 5px 15px;
    }

    .content-item p{
        margin: 15px 0;
        padding-right: 5px;
    }
    

    /* 2. 右側に伸びていた「横線」を削除 */
    .content-item .read-more::after {
        display: none; 
    }

    /* 3. 尖っていた「矢印の先端」を削除 */
    .content-item .read-more::before {
        display: none;
    }

    .content-item .image-area {
        width: 100vw;       /* 画面の横幅ピッタリに！ */
        margin-left: calc(50% - 50vw); /* 親要素のパディングを無視して端まで広げる裏技 ✨ */
        height: 250px;      /* 高さはまきぽんの好みで調整してね */
        border-radius: 0;   /* 端まで広げるなら角丸はないほうがスッキリ！ */
    }

    .content-item .image-area img {
        height: 100%;
        width: 100%;
        object-fit: cover; /* 画像が歪まないように調整！これ大事！ */
    }
}

@media (max-width: 600px) {
  /* カレンダーの親要素（外枠）に指定されているクラスを特定してね！ */
  .calendar-container {
    width: 95%; /* 画面の幅いっぱいに広げず、少し余白を作るのがおすすめ！ */
    margin: 0 auto; /* 中央寄せにするよ */
  }
}

/* ▲▲▲ For Gemini ▲▲▲ */

/* --- ヒーローセクション（共通部は省略OK） --- */
.artist-hero {
   margin: 0 auto 1.5em auto;
   max-width: 1600px;
}
.artist-hero-image {
    background: url('Artists01.png') center/cover no-repeat;
    height: 320px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Artists-p {
    text-align: center;
    margin: 30px 0 30px 0;
}

.hero-text h1 {
    font-size: 2em;
    color: #222;
    margin-bottom: 0.3em;
}
.hero-text p {
    font-size: 1.1em;
    color: #7a5c2e;
}
.artist-profile{
    max-width: 1600px;
    
}
.artist-detail-custom {
  background: #f7f3ed;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  padding: 2.5em 1.5em 3em 1.5em;
  margin: 2em auto;
  max-width: 1000px;
  text-align: center;
}

.artist-detail-custom h2 {
  font-size: 1.3em;
  color: #3a5565;
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 0.2em;
  margin-bottom: 1.5em;
  font-weight: normal;
}


.artist-works {
  display: flex;
  justify-content: center;
  gap: 2em;
  margin-bottom: 2em;
}

.artist-works img {
  width: auto;
  height: 200px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

.artist-detail-custom > p {
  margin: 2em 0 2em 0;
  font-size: 1.1em;
  color: #333;
}

.artist-detail-custom > img:last-of-type {
  display: block;
  margin: 2em auto 0 auto;
  width: 320px;
  height: 380px;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* --- 画家詳細 --- */

/*プルダウン専用*/
.custom-dropdown {
  width: 380px;
  margin: 60px auto;
  
  font-family: 'Montserrat', 'Arial', sans-serif;
}

.dropdown-label {
  font-size: 1rem;
  color: #939b9e;
  background: #f2efea;
  padding: 20px 30px 8px 30px;
  position: relative;
  border-radius: 8px 8px 0 0;
  text-align: left;
}

.dropdown-arrow {
  position: absolute;
  right: 30px;
  top: 10px;
  font-size: 1.5rem;
  color: #fff;
  background: #c1c1c1;
  border-radius: 6px;
  padding: 0.5px 15px 0.5px 15px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  user-select: none;
}

.dropdown-arrow.open {
  transform: rotate(180deg);
  background: #939b9e;
}

.dropdown-list {
  display: none;
  background: #fff;
  margin: 0;
  padding: 30px 0 30px 0;
  list-style: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  border-top: 6px solid #b0b0b0;
}

.dropdown-list li {
  font-size: 1rem;
  color: #939b9e;
  padding: 12px 30px;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-list li:hover {
  background: #f2efea;
}
/* === ▲▲▲ 印象派画家ページ専用追加スタイル ▲▲▲ === */

.calendar-container {
    margin: 0 auto 50px auto;
    text-align: center;
}

/* === ▼▼▼ フワッと上に文字が浮かび上がるアニメーション ▼▼▼ === */
/* 💖 初期状態（最初は透明で下に少し沈んでいる） */
.fade-up-trigger {
    opacity: 0; /* 透明にして隠す */
    transform: translateY(20px); /* 縦に20px下に移動させておく */
    transition: opacity 1s, transform 1s; /* 1秒かけてフワッと変化させる */
}

/* 🚀 登場後の状態（JavaScriptでこのクラスを追加する！） */
.is-active {
    opacity: 1; /* 透明度を元に戻して、見えるようにする */
    transform: translateY(0); /* 移動をリセットして、元の位置に浮かび上がらせる */
}

/* === カレンダーのイベントがホバーで真っ白になる問題の対処 ===
   代表的なカレンダー（FullCalendar 等）のイベントクラスを上書きして
   ホバー時は濃い背景＋白文字にする。必要に応じてセレクタを調整してください。
*/
.calendar-container .fc-event,
.calendar-container .fc-daygrid-event,
.calendar-container .fc-list-item,
.calendar-container .event-item,
.calendar-container .content-item {
    transition: background-color .18s ease, color .18s ease;
}

.calendar-container .fc-event:hover,
.calendar-container .fc-daygrid-event:hover,
.calendar-container .fc-list-item:hover,
.calendar-container .event-item:hover,
.calendar-container .content-item:hover {
    background-color: rgba(46,74,74,0.95); /* ヘッダーに近い濃い色 */
    color: #0e8b70 !important;
}

.calendar-container a {
    color: inherit;
    text-decoration: none;
}

.calendar-container a:hover {
    color: #0e8b70 !important;
}

/* もしホバーで背景そのものが消える（白抜け）場合に備え、
   強制的に背景色を維持するルールを追加（必要なら !important を付与） */
.calendar-container .fc-event,
.calendar-container .fc-list-item {
    background-clip: padding-box; /* 背景描画の安定化 */
}


/* イベントスケジュール */
/* 1. 額縁（外枠）の装飾：カレンダー全体を囲む部分 */
.calendar-container {
    /* アンティーク調の額縁デザインを適用 */
    border: 3px solid #6D6A66; /* 古びた金属のようなダークグレー */
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2); /* 立体感のある影 */
    border-radius: 8px; /* 角を少し丸く */
    background-color: #134f3e; 
    padding: 15px; /* 額縁とカレンダーの間にゆとり（余白）を持たせる */
    
    /* ページのコンテンツ中央に配置するために追記（調整してみてね） */
    margin: 30px auto; 
    width: 830px; /* <iframe>の幅800px + padding 30px + border 6px = 836px くらいに設定 */
}

/* 2. 埋め込みカレンダー（<iframe>）自体の調整 */
.calendar-container iframe {
    /* 埋め込みコード内のstyle="border:solid 1px #777"を削除すること！ */
    border: none !important; /* iframeのデフォルトの枠線を完全に消す */
    border-radius: 4px; /* 外枠より少し小さめの角丸に */
}

/* FullCalendarのメインテキストの色を白に変更 */
.fc-theme-standard, 
.fc-list-event-title, 
.fc-toolbar-title,
.fc-col-header-cell {
    color: #FFFFFF !important; /* 文字色を白に！ */
}

/* イベント名の部分 */
.fc-list-event{
    background-color: #436779 !important;
}

/* 日付やボタンのテキスト色を白に変更 */
.fc-button-primary,
.fc-prev-button,
.fc-next-button {
    /* ボタンの文字色を白に */
    color: #FFFFFF !important;
    /* ボタンのアイコンの色も白に（矢印など） */
    --fc-button-text-color: #FFFFFF !important;
}

/* 予定リストの日付ヘッダーの色を調整（例：濃い目の背景色を維持） */
.fc-list-day-text,
.fc-list-day-side-text {
    color: #4869ac !important; /* 曜日や日付を白に */
}

.fc-list- {
    /* 🎨 アンティーク調に合う落ち着いた色を選んでみて！ */
    background-color: #A88F7E !important;
}

/*コンテンツを浮かせたい*/
.content-item{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-item:hover {
    transform: translateY(-5px); /* 少し上に浮き上がらせることで高級感UP */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); /* 影を濃くして浮遊感を強調 */
}