@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 幅を指定した要素（タグ）にborder、paddingを設定した際に要素が広がってしまうことを防ぐため */
}

body {
    /* font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
    /*   上記は  各OSに適したフォントファミリー */
    /* 今回は、google fontのみ使用 */

  font-family: "Kaisei HarunoUmi", serif;
  /* font-weight: 400; */



    /* font-weight: 400; */
    color: #222;
    /* サイト全体の文字色を定義しておく */
    line-height: 1;
    /* 文字行間のリセット */
}

ul {
    list-style: none;
    /*   liの装飾を削除する  */
}

a {
    text-decoration: none;
    /*   aタグの初期設定。aタグはでデフォルトで持っている下線を消しておく */
}

img {
    max-width: 100%;
    /* 親要素の大きさ以上大きくならず、かつ、自身の原寸大以上に大きくならない */
    vertical-align: bottom;
    /* imgは、文字と同等扱いなので、必ず下部に余白（デセンダー）が出来てしまうのを防ぐ。他の防ぐ方法としてインライン要素をブロック要素に変える方法もあり */
}

/*-----------------------------------------
    pc max-setting   
-----------------------------------------*/

.container {
    max-width: 1024px;
    /* 最大値、1024px それ以下可変　max-width使用 */
    margin: 0 auto;
    /* ブロック要素の中央揃い　m0ｰa */
    padding: 80px 15px 100px;
    /* 各sectionに、上80px　左右15px　下100px程度に設定 */
}




/*-----------------------------------------
    html - smooth scroll setting   
-----------------------------------------*/

html {
    scroll-behavior: smooth;
    /* PC表示の際、 cssの、scroll-behavior: smoothを設定 */
}

/*-----------------------------------------
    header - setting   
-----------------------------------------*/

header {
    /* 背景画像のヒーローヘッダーの設定 */
    height: 100vh;
    /* 表示されるwindowの高さを100% → 100vhで設定　いわゆるヒーローヘッダーの設定 */
    position: relative;
    /*  header .logoの位置を、header領域の四隅から自由に配置するため */
}

/* 20251107ADD */
header .bxSlider li {
    height: 100vh;
}


/* header img{   20251107 change  */
header .bxSlider li img{
    object-fit: cover;
    object-position: center ;
    width: 100%;
    height: 100%;
}


/* Calender 20251112 add  */
/* .calendar-container{
    position: absolute;
    top: 200px;
    left: 30px;
    z-index: 999;
} */


header .logo {
    position: absolute;
    /* headerの四隅からの自由な配置*/
    padding: 20px 60px 48px;
    /* paddingの設定 */
    background-color: rgba(255, 255, 255, 0.8);
    /* 背景色、#fffの透明度、0.8程度 */
    top: 30%;
    left: 40px;
    /* top、leftからの距離は適宜 */
    text-align: center;
    /* .logo内フォントの中央揃い設定 */
    z-index: 100;

}

header .logo h1 {

    font-size: 32px;
    font-weight: normal;
    /* フォントサイズ20px以上で適当 */
}

header .logo h1 span {
    display: block;
    /* spanのブロック設定 */
    font-size: 16px;
    margin-bottom: 6px;
    /* フォントサイズと、下側の文字との余白適宜設定 */
}

/*-----------------------------------------
    nav - setting   
-----------------------------------------*/

nav {
    position: fixed;
    top: 0;
    left: 0;
    /* 画面のtop:0 → y座標0 left:0 ｘ座標0 で設定  */
    width: 100%;
    /* positionを使うと親からの継承ができなくなるので、自身で幅設定。今回はwidth: 100% ; */
    background-color: rgba(255, 255, 255, 0.6);
    /* 背景色設定 → 少し透明に*/
    z-index: 20;

}

nav ul {
    display: flex;
    /* liを横並びさせる display:flex */
    justify-content: center;
    /* flexでの横並び・横配置を中央寄せの設定 */
}


nav ul a {
    display: block;
    /* マウスの反応領域を広げるため */
    padding: 20px 40px;
    /* 上下・左右の余白適宜 */
    letter-spacing: .1em;
    /* 文字装飾適宜設定 */
    transition: 0.3s;
    /* hoverの時のtransition設定 */
    color: #000;
    /* 文字の色適宜 */
}

nav ul a:hover {
    background-color: #6a7072;
    color: #fff;
    font-weight: bold;
    /* 適宜設定 */
}



/*-----------------------------------------
    main - setting   
-----------------------------------------*/

main h2 {
    font-size: 38px;
    /* フォントサイズ、40px前後で設定 */
    padding: 20px 0 10px;
    /* 上下の内側余白、30px 40px設定 */
    text-align: center;
    font-weight: normal;
    /* 文字装飾適宜 */
}
.container h2{
    /* color: #f00; */
    font-size: 3rem;
    color: #ab0dea; /* 赤色の発光 */
    /* color: #ff5555; 赤色の発光 */
    font-weight: bold;
    
    /* 発光・グロー効果 */
    text-shadow: 
        0 0 1px #ff0000,   
        0 0 10px #ff0000;  
    
    /* レトロなフォントの質感を出す */
    letter-spacing: -2px;




}


/*-----------------------------------------
    message - setting   
-----------------------------------------*/


.message {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #fff;
    /* .message::beforeの背景画像を表示させるための次のブロックへの余白 */
    margin-bottom: 400px;
}

.message::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg_img.jpg);
    background-position: center;
    background-size: cover;
    z-index: -1;
    /* 擬似要素に、全画面表示の背景画像の設定と、1つ下の階層に表示させるためのz-index:-1設定 */
}


.message p {
    padding: 20px 0;
    /* 上下の内側余白、30px設定 */
  font-family: "Kaisei HarunoUmi", serif;

    /* font-family: '"Noto Serif JP"', serif; */
    /* bodyでfont-familyが設定されているが、文章中の英文字が、影響を受けるのであえて設定 */
    line-height: 2;
    /* 標準的な行間設定 → lh1.5 〜 lh2 の間 */
    text-align: center;
}

.message p:last-of-type {
    padding: 20px 0 20px;
    /* .messageのpタグの最後のpタグだけpaddingの設定を変える場合の設定 */
}

.message ul {
    display: flex;
    justify-content: space-between;
    /* 横並び、両端揃い設定 */
}

.message ul li {
    width: 31%;
    /* 幅、31%設定 */
    aspect-ratio: 3/2;
    /* 設定された幅に対して比率を設定 */
}

.message ul li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* タテ・ヨコ型の画像かかわらずカバーしてくれる */
}

/*-----------------------------------------
    date - setting   
-----------------------------------------*/

.date {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #fff;
}


.date .date_item {
    display: flex;
    /* 横並び設定 */
    padding: 30px 0;
    /* 余白上限、30px設定 */
}

.date_item .photo {
    width: 35%;
    /* 幅、55%*/

}

.date_item .photo p {
    aspect-ratio: 1/2;
    /* 設定された幅に対して比率を設定 */
}

.date_item .photo p img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* タテ・ヨコ型の画像かかわらずカバーしてくれる */
}

.date_item .text {
    width: 45%;
    /* 幅、45%*/
}

.date_item .text p {
    font-size: 32px;
    /* フォントサイズ、32pxほど */
    color:  #222;
        /* 桜色 */


    padding: 50px 40px;
    /* 上下左右の余白、50px、40pxほど */
    background-color: rgba(120, 128, 133, 0.3);
    /* 透明の背景色の設定 */
    margin-top: 150px;
    /* 外上側余白、100pxほど */
    margin-left: -80px;
    /* 左側の外側余白を、−80pxほどに設定し、左側のブロックに重ねる */
}

.date_item .text p span {
    font-size: 26px;
    /* フォントサイズ、26pxほど */
    padding: 0 10px;
    /* 余白左右、10pxほど */
}

/*-----------------------------------------
    access - setting   
-----------------------------------------*/

.access {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #fff;
}


.access iframe {
    width: 100%;
    padding: 30px 0;
    height: 400px;
    /* 適宜 */
}

.access p {
    padding: 10px 0;
    text-align: center;
    font-weight: 500;

    /* 適宜 */
}


/*-----------------------------------------
    F and Q - setting   
-----------------------------------------*/

.faq {
    /* 教科書では各sectionごと背景色を変える設定 */
    background-color: #fff;
}

.faq dl dt {
    padding: 20px;
    color: #000;
    font-weight: 400;
    background-color: rgba(120, 128, 133, 0.3);
    margin-bottom: 10px;
    line-height: 1.4;
    /* スマホの時、複数行になった時の対処 */
    cursor: pointer;
}

.faq dl dd {
    padding: 5px 20px;
    line-height: 1.6;
    margin-bottom: 50px;
    display: none;
    /* 2025/11/05 add */
}

/* F&Q 2025/11/05 add START*/
/* .faq dl dd.active{
    display: block;
} */
.faq dl dt.active {
    background-color: rgba(34, 26, 151, 0.3);
}


/* F&Q 2025/11/05 add END*/



/*-----------------------------------------
    footer - setting   
-----------------------------------------*/

footer {
    background-color: #6a7072;
}

footer p {
    font-family: "Noto Serif JP", serif;
    color: #fff;
    /* 文章中の半角英数が英語のgoogle fonts の影響を受けないように */
    padding: 100px 0;
    text-align: center;
    font-size: 14px;
}


@media (width<=768px) {
    /*-----------------------------------------
    header - responsive - setting   
-----------------------------------------*/

    /* 20251107 Change Start */
    /* header img{
        object-position: 80% 80%;
    } */
    header .bxSlider li img {
        object-position: 90% center ;
        /* height: 100vh; */
    }

    /* 20251107 Add  */
    /* header img{
        height: 100vh;
    } */


    header .logo {
        top: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 30px 0 36px;
        text-align: center;
        /* paddingの設定 */
    }

    header .logo h1 {
        font-size: 26px;
    }

    header .logo h1 span {
        font-size: 22px;
    }

    /*-----------------------------------------
    burger 20251105 add START   
-----------------------------------------*/
    .burger {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 50px;
        height: 40px;
        border: 1px solid #000;
        z-index: 100;
    }

    .burger span {
        position: absolute;
        width: 80%;
        height: 3px;
        background-color: #333;
        inset: 0;
        margin: auto;
        transition: 0.2s;
    }

    .burger span:nth-child(1) {
        top: 20px;
    }

    .burger span:nth-child(3) {
        top: -20px;
    }

    .burger.active span:nth-child(1) {
        rotate: 45deg;
        top: 0;
    }

    .burger.active span:nth-child(2) {
        rotate: 45deg;
        top: 0;
    }

    .burger.active span:nth-child(3) {
        rotate: -45deg;
        top: 0;
    }


    /*-----------------------------------------
    20251107 Add    
    html - smooth scroll responsive setting   
-----------------------------------------*/

    html {
        scroll-behavior: auto;
        /* スマホの場合、スムーズスクロールを無効にする ->  scroll-behavior: auto */
    }


    /*-----------------------------------------
    20251107 Add    
    header - responsive - setting   
-----------------------------------------*/

    header .bxSlider li img {
        object-position: 70% 80%;
    }

    header .logo {
        top: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 30px 0 36px;
        text-align: center;
        /* paddingの設定 */
        z-index: 120;
    }

    header .logo h1 {
        font-size: 26px;
    }

    header .logo h1 span {
        font-size: 22px;
    }





     nav {
        width: 50%;
        height: 430px;
        top: 70px;
        left: 100%;
        padding-top: 40px;
        background-color: #87080869;
        background-color: #fdeeef;
        /* 桜色 */
        transition: 0.3s;
        border-radius: 20px;
        box-shadow: inset 0 0 15px 15px gray;
     } 


    nav.drawer {
        left: 50%;
    }

    nav ul {
        display: block;
    }



    /*-----------------------------------------
    burger 20251105 add END  
-----------------------------------------*/




    /*-----------------------------------------
    nav - responsive - setting   
-----------------------------------------*/
    nav ul a {
        display: block;
        padding: 0 20px;
        line-height: 60px;
        /* aタグのブロックボックス、左右の余白、paddingで60px、上下の余白、line-heightで60px設定 */
        letter-spacing: .1em;
        /* 文字装飾適宜設定 */
        transition: 0.3s;
        /* hoverの時のtransition設定 */
        color: #222;
        /* 文字の色適宜 */
        text-align: center;
    }

    /*-----------------------------------------
    message - responsive - setting   
-----------------------------------------*/
    .message p {
        text-align: left;
    }

    .message p br.pc {
        display: none;
    }

    .message ul {
        display: block;
    }

    .message ul li {
        width: 100%;
        margin-bottom: 50px;
    }


}



/* カレンダー追加 */
/* 20251112 add */

/* カレンダー全体のレイアウト */
#calendar-container {
    max-width: 60wh;
    display: flex;
    /* 2つのカレンダーを横に並べる */
    gap: 20px;
    /* justify-content: center; */
    margin-top: 10px;


    /* height: auto; */
    height: 80wh;
    /* border: red solid 1px; */
    display: flex;
    /* frex-direction: row; */
    flex-wrap: wrap;
    justify-content: center;
}

/* 個々の月のカレンダー */
.calendar {
    /* 大きさ調整要 */
    /* width: 250px;                        */
    /* width: min(90%,280px);        */
    min-width: 280px;       
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    background-color: hsla(0, 80%, 86%, 0.6);
    text-align: center;

}

.calendar h3 {
    /* text-align: center; */
    /* 上部の余白を小さく（例: 5px）設定 */
    margin-top: 10px auto;
    /* 下部の余白はそのまま */
    margin-bottom: 10px;

}

/* テーブルの基本的なスタイル */
.calendar table {
    width: 100%;
    /* テーブル全体は100%幅にする */
    border-collapse: collapse;
}

.calendar th,
.calendar td {
    text-align: center;
    padding: 5px 0;
    /* paddingを調整 */
    border: 1px solid #eee;
    font-size: 12px;            /* 大きさ調整要 */
    width: calc(100% / 7);
    /* 7列で等分に幅を確保（推奨）*/
    min-width: 35px;                   /* 大きさ調整要 */
    /* 最小幅を指定（または固定幅） */
    height: 35px;                     /* 大きさ調整要 */
    /* 高さ（固定） */
    vertical-align: top;
    /* 日付を上に詰める */
    box-sizing: border-box;
    /* paddingとborderを幅と高さに含める */
}

/* 曜日の色 */
.calendar th:first-child,
.calendar td.sunday {
    color: red;
    /* 日曜日 */
}

.calendar th:last-child,
.calendar td.saturday {
    color: blue;
    /* 土曜日 */
}

/* ③ 休日のスタイル */
.calendar td.holiday {
    color: red;
    /* 祝日は文字を赤くする */
    background-color: #ffe0e0;
    /* 背景色も付ける */
}

/* カレンダー追加 */
/* 20251112 add */
/* ③ 休日のスタイル */
/* 🏠 新規追加: 休館日のスタイル */
.calendar td.closure-day {
    color: #555; /* 黄色っぽい文字色 */
    background-color: #fffac2; /* 薄い黄色の背景色 */
}


.holiday-name {
    display: block;
    font-size: 8px;       /* 大きさ調整要 */
    margin-top: 3px;
}


/* ② 当日（赤丸）のスタイル */
.calendar td.today .date-number {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-weight: bold;
}








/* 当日以外の通常の日付 */
.date-number {
    display: block;
    font-size: 12px;       /* 大きさ調整要 */
    font-weight: bold;
    margin-bottom: 3px;
}







/* media end */