/* 全てのページに適用される設定 */
html {
    font-size: 17px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: #eeeeee;
    font-family: 'BIZ UDPGothic', sans-serif;
    font-weight: 400;
}

p,
li,
td {
    line-height: 1.6;
}

img {
    max-width: 100%;
}

.sp {
    display: none;
}

.pc {
    display: block;
}

time {
    font-size: 0.8rem;
}

h2 {
    padding: 5px 20px;
    font-family: 'Zenkaku Gothic New', sans-serif;
}

h3 {
    font-family: 'Zenkaku Gothic New', sans-serif;
}

/* 共通項目ヘッダー */
header {
    width: 100%;
    background: #fff;
}

.header-inner {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 修正：ロゴを少し中央（右側）へ寄せる */
.logo {
    width: 380px;
    margin-left: 40px;
    /* 左側に40pxの余白を作って中央に寄せる */
}

.logo h1 {
    margin: 0;
}

/* 修正：ナビゲーションを右端に寄せる */
ul.nav {
    display: flex;
    list-style: none;
    margin: 0;
    margin-right: auto;
    /* 左側の余白を自動で最大に広げ、右端に押し込みます */
    padding-right: 10px;
    /* 右端にぴったりくっつきすぎるのを防ぐ余白 */
}

.nav li {
    height: 75px;
}

.nav a {
    display: flex;
    align-items: center;
    color: #000;
    height: 100%;
    text-decoration: none;
    padding: 5px 20px;
    /* 少し左右のパディングを広げて押しやすく */
    transition: 0.3s;
}

.nav a:hover {
    background-color: #3B6E53;
    color: #fff;
}

/* 共通項目　ヒーロー画像 */
.hero {
    position: relative;
}

.hero img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.hero p {
    position: absolute;
    bottom: 20px;
    width: 300px;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0, 0.7);
    font-size: 2rem;
    z-index: 10;
}

.hero.index img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
}

.hero.index p {
    position: absolute;
    top: 30%;
    left: 15%;
    width: initial;
    font-size: 2rem;
    background: none;
    text-shadow: 2px 2px 5px #555;
    z-index: 10;
}

/* 共通項目　２カラム */
main {
    max-width: 1000px;
    display: flex;
    /* 追加：子要素を横並びにする */
    justify-content: space-between;
    margin: 50px auto;
    background: #fff;
    box-shadow: 2px 2px 5px #ccc;
}

main.oter {
    justify-content: center;
}

article {
    width: 650px;
    padding: 15px;
    margin: 10px;
}

/* 共通項目サイドバー */

aside.sidebar {
    width: 300px;
    padding: 10px;
    margin: 10px;
}

.sidebar-item {
    padding: 10px;
    margin-bottom: 30px;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 3px 3px 5px;
}

.sidebar-item h3 {
    padding: 5px 20px;
    color: #fff;
    background: #2E5A44;
    border-bottom: 5px solid #3b4f70;
}

.sidebar-item.profile span {
    font-size: 0.8rem;
}

.profile-img {
    width: 250px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
}

.profile-img img {
    height: 200px;
    object-fit: cover;
    margin-bottom: 30px;
}

.profile-link {
    text-align: center;
    margin-bottom: 30px;
}

.sidebar-item.profile .profile-link a {
    color: #fff;
    background: #2E5A44;
    border-radius: 5px;
    padding: 5px 15px;
}

.sidebar-item p {
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.sidebar-item li {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.slidebar-item li a:hover {
    background-color: #3B6E53;
    color-scheme: #fff;

}

/* 共通項目　フッター */
footer {
    background: #2E5A44;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}

/* Topに戻る */
#page_top {
    position: fixed;
    bottom: 30px;
    /* 位置の調整 */
    right: 20px;
}

#page_top a {
    padding: 20px;
    color: #fff;
    background: #2E5A44;
    border-radius: 5px;
    text-align: center;
}

/* index.html */
/* カテゴリーバナー */
.cat-slide {
    padding: 30px 0;
    background-image: url(../images/cat-bg.webp);
}

.cat-slide h3 {
    text-align: center;
}

/* 新着一覧 */
h2.index-h2 {
    margin-top: 25px;
}

.post-item {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #aaa;
    border-radius: 5px;
    box-shadow: 3px 3px 5px #eee;
}

.new-posts a,
.sidebar-item a {
    color: #000;
    text-decoration: none;
    transition: 0.3s;
}

.new-posts a:hover,
.sidebar-item a:hover {
    opacity: 0.6;
}

.eyecatch img {
    width: 300px;
    height: 180px;
    object-fit: cover;
}

.post-text {
    position: relative;
    width: 50%;
    padding: 10px 0;
}

.post-text h3 {
    font-size: 1.1rem;
    margin: 5px 0;
}

.post-text span {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #fff;
    padding: 5px 8px;
    background: #2E5A44;
    border-radius: 5px;
    margin-left: auto;
}

/* contents.html */
main.content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
}

.update span {
    font-size: #fff;
    background: #aaa;
    padding: 5px 10px;
    margin-bottom: 15px;
    border-radius: 5px;
}

h1.post-title {
    line-height: 1.5;
    color: #fff;
    background-color: #5C7461;
    padding: 5px 15px;
    border-bottom: 10px solid #000000;
    margin: 40px 0;
}

article h2 {
    color: #fff;
    background: #3A7D44;
    margin: 50px 0 20px;
}

.blog h3 {
    padding: 8px 10px;
    border-bottom: 3px solid #2E5A44;
    margin: 50px 0 20px;
}

.post-eyecatch,
.post-img {
    text-align: center;
    margin: 30px 0;
}

.post-eyecatch img {
    width: 500px;
    height: 300px;
    object-fit: cover;
}

.box-005 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #f06060;
    border-radius: 5px;
    color: #333333;
}

.box-005 div {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #f06060;
    font-weight: 600;
    vertical-align: top;
}

.box-005 div::before {
    width: 22px;
    height: 22px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.box-005 p {
    margin: 0;
    padding: 0 1.5em 1em;
}



p.announce {
    font-size: 0.9rem;
    font-weight: bold;
    color: #ff0000;
}

.contents-img {
    color: #fff;
    background: #777;
    margin: 30px 0;
    /* テキストセンター */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 引用 */
blockquote {
    background: #eee;
    padding: 10px;
    margin: 10px;
}

/* 関連記事 */

aside.recommend {
    max-width: 600px;
    margin: 30px auto;
    background: #eee;
    padding: 15px;
}

.recommend-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
}

.recommend-wrap a {
    color: #000;
    text-decoration: none;
}

.recommend-item {
    display: flex;
    gap: 20px;
    padding: 10px;
    background: #fff;
}

.recommend-img {
    width: 100px;
    height: 100px;
}

.recommend-img img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.recommend-text {
    width: 50%;
}

.recommend-text h4 {
    line-height: 1.5;
    font-size: 0.8rem;
    margin: 5px 0;
}

/* contents-2 Stickly */
.sticky {
    position: sticky;
    top: 0px;
}

/* profile.html */
article.other {
    max-width: 750px;
    margin: 50px auto;
}

.admin-name {
    text-align: right;
}

/* contact.html */
form {
    max-width: 650px;
    margin: 0 auto;
    background: #eee;
    padding: 30px 15px;
}

.attention {
    font-size: 0.8rem;
    color: #BA1C22;
}

.contact-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 30px 0;
}

.contact-wrap div,
input[type="text"],
input[type="email"],
textarea,
select {
    padding: 5px;
    margin: 5px 0;
    width: 100%;
    font-size: 1rem;
}

textarea {
    height: 150px;
}

.submit {
    text-align: center;
}

input[type="submit"] {
    border: 1px solid #fff;
    padding: 15px;
    width: 200px;
    color: #fff;
    background: #2E5A44;
    font-size: 1rem;
    transition: 0.3s;
}

input[type="submit"]:hover {
    background: #aaa;
}

/* イベントページ専用の追加スタイル */
.event-section {
    margin-bottom: 40px;
}

.season-title {
    font-size: 1.5rem;
    border-left: 10px solid #ff9800;
    /* 既存のメインカラー */
    padding-left: 10px;
    margin-bottom: 20px;
    color: #fff;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.event-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.event-card h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #d32f2f;
    /* アクセントカラー（例） */
}

.event-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.event-meta span {
    display: inline-block;
    margin-right: 15px;
}

.event-desc {
    font-size: 0.95rem;
    line-height: 1.6;
}

.memo-box {
    background-color: #f9f9f9;
    border-left: 4px solid #ff9800;
    padding: 15px;
    margin-top: 20px;
    font-size: 0.9rem;
}

/* Slick slider */

.sliderArea {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.sliderArea ul {
    padding: 0;
    list-style: none;
}

.slick-slide {
    margin: 0;
}

/* スライド内のリンク */
.slider .slick-slide a {
    text-decoration: none;
    display: block;
}

/* 追加：文字を上に重ねるための基準になる箱 */
.slide-item {
    position: relative;
    /* これを基準にする */
    margin-left: 10px;
    /* 元々 img にあった余白をここに移動 */
    overflow: hidden;
}

/* スライド画像 */
.slider .slick-slide img {
    width: 25vw;
    height: auto;
    object-fit: cover;
    display: block;
    transition: 0.3s;
}

/* 修正：文字を画像の上に浮かび上がらせる */
.slider-title {
    position: absolute;
    top: 80%;
    /* 上から50%の位置 */
    left: 50%;
    /* 左から50%の位置 */
    transform: translate(-50%, -50%);
    /* 完全に真ん中へ配置 */

    width: 80%;
    /* 文字背景の横幅（画像からはみ出さないように） */
    margin: 0;
    padding: 10px 5px;

    color: #fff;
    /* 文字を白にする */
    background: rgba(0, 0, 0, 0.6);
    /* 半透明の黒背景（文字を読みやすくする） */
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
    pointer-events: none;
    /* クリックの邪魔をしない設定 */
}

/* スマホ表示の調整 */
@media(max-width:600px) {
    .slider img {
        height: 18vh;
        width: 45vw;
    }

    .slider-title {
        font-size: 0.75rem;
        /* スマホでは文字を少し小さく */
        width: 90%;
        padding: 5px;
    }


}



/* ハンバーガーメニュー */
@media (max-width: 600px) {

    .hamburger {
        display: block;
        position: fixed;
        z-index: 110;
        right: 15px;
        top: 17px;
        width: 42px;
        height: 42px;
        cursor: pointer;
        text-align: center;
        background: #fff;
        border-radius: 5px;
    }

    .hamburger span {
        display: block;
        position: absolute;
        width: 30px;
        height: 2px;
        left: 6px;
        background: #BBBBBB;
        transition: 0.3s ease-in-out;
    }

    .hamburger span:nth-child(1) {
        top: 10px;
    }

    .hamburger span:nth-child(2) {
        top: 20px;
    }

    .hamburger span:nth-child(3) {
        top: 30px;
    }

    /* ナビメニュー展開時のボタン */
    .hamburger.active span:nth-child(1) {
        top: 20px;
        left: 6px;
        background: #bbbbbb;
        transform: rotate(-45deg);
    }

    .hamburger.active span:nth-child(2),
    .hamburger.active span:nth-child(3) {
        top: 20px;
        background: #bbbbbb;
        transform: rotate(45deg);
    }

    /* メニュー展開時　*/
    nav.navi-sp {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        color: #fff;
        background: rgba(0, 0, 0, 0.7);
        text-align: center;
        width: 100%;
        height: auto;
        opacity: 0;
        visibility: hidden;
        padding: 20px 0;
        transition: 0.3s;
    }

    nav.navi-sp ul {
        display: flex;
        margin: 0 auto;
        padding: 0;
        width: 100%;
        height: auto;
        flex-direction: column;
        justify-content: space-between;
    }

    nav.navi-sp ul li a {
        display: block;
        color: #fff;
        padding: 10px 0;
        margin: 5px 0;
        text-decoration: none;
    }



    /* クリックでナビメニュー開閉 */
    nav.navi-sp.active {
        opacity: 100;
        visibility: visible;
    }
}

/* スマホ表示 */
@media(max-width: 600px) {

    /* 共通項目 フレックスの解除（2→１カラム）*/

    main,
    .post-item {
        flex-direction: column;
        margin: 10px 0;
        padding: 0 10px;
    }

    .recommend-wrap {
        grid-template-columns: 1fr;
    }

    /* 横幅の調整（画像など） */
    article,
    aside.sidebar,
    .eyecatch,
    .post-eyecatch,
    h1.contents-title,
    .contents-img {
        width: 100%;
        margin: 10px 0;
    }

    .post-text {
        width: 100%;
        height: 150px;
    }

    /* ヘッダー */
    .logo {
        font-size: 0.9rem;
    }

    .header-innner {
        margin: 0;
        padding: 10px;
    }

    .header-innner ul {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 10px;
    }

    /* ヒーロー画像 */
    .hero img {
        height: 250px;
    }

    /* index.html */
    .hero.index img {
        height: 250px;
    }

    .hero.index p {
        font-size: 1.4rem;
        top: 0;
        left: 8%;
    }

    .post-item {
        gap: 5px;
    }

    /* contents.html */
    main.content {
        grid-template-columns: 1fr;
    }

    .post-eyecatch img,
    article img {
        height: 200px;
    }

    blockquote {
        padding: 15px;
        margin: 0;
    }
}

@media (min-width: 1025px) {

    /*サイドバー追従*/
    .side-fixed-content {
        position: fixed;
        top: 40px;
        width: 250px;
        animation-name: fadeUpAnime;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
    }

    @keyframes fadeUpAnime {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }