/*タイトル用のフォント*/
.C-titlefont {
    font-family: "fot-chiaro-std", sans-serif;
    font-weight: 700;
    font-size: 4vw;
    font-style: normal;
}

.special-title {
    font-family: "fot-chiaro-std", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 4vw;              /* 基本は画面幅に応じたサイズ */
    white-space: nowrap;         /* 改行しない */
    display: inline-block;       /* 背景をテキストにフィットさせる */
    padding-left: 1em;           /* 左ライン分の余白 */
    /* background: linear-gradient(to right, #ffcccc 5px, transparent 5px); */
    background-repeat: no-repeat;
    background-size: 5px 100%;   /* 左のラインだけ */
    background-position: left center;
}


/* 大きめデスクトップ：上限より大きくしたい場合 */
@media (max-width: 700px) {
  .C-titlefont {
    font-size: 6vw; /* 必要なら上げる */
  }
}
/* 小さめスマホ：少し大きめにして読みやすく */
@media (max-width: 420px) {
  .C-titlefont {
    font-size: 9vw;
  }
}



/*本文用のフォント*/
.C-textfont {
    font-family: momochidori-variable, sans-serif;
    font-style: normal;
    font-variation-settings: "ital" 0, "wdth" 100, "wght" 200;
}

/*色の設定*/
.white {
    color: #FFFFFF;
}

.pink {
    color: #FFDBE6;
}

.lightblue {
    color: #ABD3FF;
}

.blue {
    color: #3490F6;
}

.lightgray {
    color: #8B8B8B;
}

.gray {
    color: #5B5B5B;
}

.top-wrapper {
    overflow: hidden;
    height: 100vh;
}

.top-image {
    height: 80vh;
    position: relative;
    object-fit: cover;
    transform: translate(-10%, -10%);
}

.top-text {
    position: absolute;
    right: 5%;
    top: 20%;
    transition: translateY(-50%);
    z-index: 2;
    max-width: 40%;
}

.top-title {
    font-size: 12rem !important;
    line-height: 0.8;
}

.top-subtitle {
    font-size: 4rem !important;
    margin-right: 10rem;
}

.top-theme {
    font-size: 4rem !important;
}

.date-block {
    right: 15%;
    bottom: 1%;
}

.top-year {
    font-size: 2rem !important;
    text-align: left;
}

.top-date {
    font-size: 4rem !important;
}

.small-day {
    font-size: 2rem !important;
}

@media (max-width: 1200px) {
    .top-wrapper {
        position: relative;
        width: 100vw;
        height: 80vh;
        overflow: hidden;
    }

    .top-image {
        object-position: center;
        transform: translateX(0);
    }

    .top-text {
        max-width: 80%;
        position: absolute;
        top: 5%;
        right: 10%;
        text-align: right;

    }

    .top-title {
        font-size: 8rem !important;
    }

    .top-subtitle {
        font-size: 2rem !important;
    }

    .top-theme {
        font-size: 2rem !important;
    }

    .date-block {
        right: 5%;
        bottom: 3%;
    }

    .top-year {
        font-size: 1.5rem !important;
        text-align: left;
    }

    .top-date {
        font-size: 3rem !important;
    }

    .small-day {
        font-size: 2rem !important;
    }
}

@media (max-width: 400px) {
    .top-title {
        font-size: 4rem !important;
    }

    .top-subtitle {
        font-size: 1.2rem !important;
    }

    .top-theme {
        font-size: 1.2rem !important;
    }

    .date-block {
        right: 2%;
        bottom: 2%;
        max-width: 95%;
        text-align: right;
        word-wrap: break-word;
        white-space: normal;
    }

    .top-year {
        font-size: 1rem !important;
    }

    .top-date {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }

    .small-day {
        font-size: 1rem !important;
    }
}


#eventsinfo {
    background-image: url('../images/');
}

/*タイトル用のフォント*/
/* .C-titlefont {
    font-family: "fot-chiaro-std", sans-serif;
    font-weight: 700;
    font-size: 4vw;
    font-style: normal;
} */


/*色の設定*/
.white {
    color: #FFFFFF;
}

.input-group-text {
    border: none;
    background-color: white;
}

.input-group-text-left {
    border-radius: 2rem 0 0 2rem;
}

.input-group-text-right {
    border-radius: 0 2rem 2rem 0;
}

/* ホバー時にプレースホルダーを濃く */
.custom-search-bar .form-control:hover::placeholder {
    font-weight: bold;
}

.custom-search-bar .form-control:focus {
    box-shadow: none;
}

.input-group-text:hover,
.input-group-text:focus {
    background-color: transparent;
    border: none !important;
    box-shadow: none !important;
}

/* ×ボタンのスタイル */
.clear-btn {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}

.clear-btn-wrapper {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    padding: 0;
}

.clear-btn i {
    font-size: 1.3rem;
    line-height: 1;
    vertical-align: middle;
}

.pink {
    color: #FFDBE6;
}

.lightblue {
    color: #ABD3FF;
}

.blue {
    color: #3490F6;
}

.lightgray {
    color: #8B8B8B;
}

.gray {
    color: #5B5B5B;

}


.btn.btn-custom {
    color: #ABD3FF;
    background-color: white;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 1rem;
    text-align: center;
    font-weight: bold;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* 縦いっぱい（必要に応じて調整） */
}

.btn.btn-custom:hover {
    background-color: #AED3FF;
    color: #ffffff !important;
    transform: translateY(-3px);
}

.btn.btn-custom:active {
    background-color: #ABD3EF !important;
    color: white !important;
    border-color: #ABD3EF !important;
    box-shadow: none !important;
}

.bi-clock {
    font-size: 1.4rem;
}

.bi-map-fill {
    font-size: 1.4rem;
}

.bi-book {
    font-size: 1.4rem;
}

.cardImg {
    background-image: url('../images/cardImg.webp');
    background-size: cover;
    background-position: center;
    border: 2px solid #99d4ff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* フッターのスタイル */
.footercontainer {
    clip-path: circle(150vw at 50% 150vw );
}
/*ヘッダー*/
.headerbgcolor {
    background-color: rgba(255, 255, 255, 0.5);
}

.headerfont {
    font-size: 1.5rem;
    font-weight: 800;
}


/*フッター*/
.footerwrapper {
    clip-path: circle(170vw at 50% 170vw);

    clip-path: circle(150vw at 50% 150vw);

    background-color: #ffffff;
}

.footercopyright {

    background-color: #ffffff;
    text-align: center;
    justify-content: center;
}


.footertoTop {
    width: 100%;
    height: 20vh;
    background-image: url("../images/footer2.gif");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: end;
}

.footercuruton {
    width: 20vw;
    height: 20vw;
}

.footerlinks {
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
}

@media (max-width:576px) {
    .footerlinks {
        justify-content: start;
    }

}

.footericons {
    clip-path: circle();
    background-color: #ABD3FF;
    height: 2rem;
    text-align: center;
    padding-top: 0.25rem;
    margin: 0.5rem;
    width: 2rem;
}

.footericons:hover {
    background-color: #3490F6;
    text-decoration: none;
    transition: background-color 0.5s ease;
}
    /*旭祭について*/
    /* .rightside-bg {
        display: flex;
        justify-content: center;
        max-width: fit-content;
        padding: 10px 35vw 10px 5vw;
        margin-left: 35vw;
        background-color: #3490F6;
        border-radius: 5px 0px 0px 5px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    } */
    .rightside-bg {
    display: flex;
    justify-content: center;
    max-width: fit-content;
    padding: 10px 35vw 10px 5vw;
    display: inline-block;
    padding: 10px 36vw 10px 5vw;
    margin-left: 35vw;
    background-color: #3490F6;
    border-radius: 5px 0px 0px 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}


    /*ボタン・本文用のフォント*/
    .M-btnfont {
        font-family: "momochidori-variable", sans-serif;
        font-size: medium;
        font-variation-settings: 'wdth' 100, 'wght' 700, 'ital' 0;
        color: #ABD3FF;
        fill: #ABD3FF;
        transition: fill 0.3s ease, transform 0.3s ease;
        text-decoration: none;
        cursor: pointer;
    }


    .nav {
        font-size: 2rem;
        cursor: pointer;
        color: white;
        z-index: 1000;
    }

    .nav:hover {
        color: aliceblue;
    }

    .nav.prev {
        left: -5vw;
    }

    .nav.next {
        right: -5vw;
    }

    .indicator-container {
        display: flex;
        gap: 10px;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .indicator-dot {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 6px;
        background-color: white;
        border-radius: 50%;
        opacity: 0.5;
        transition: transform 0.3s, opacity 0.3s;
    }

    .indicator-dot.active {
        transform: scale(1.5);
        opacity: 1;
    }


    .sud-btn {
        display: inline-block;
        transition: all 0.5s ease;
        transform: translate(0px, 0px);
    }

    .sud-btn:hover {
        transition: transform 0.3s;
    }

    .sud-img {
        transition: fill 0.3s ease;
        filter: grayscale(60%);
        cursor: pointer;
    }

    .sud-img:hover {
        filter: contrast(120%);
    }

    .sud-font {
        font-family: "momochidori-variable", sans-serif;
        font-size: 2vw;
        font-variation-settings: 'wdth' 100, 'wght' 700, 'ital' 0;
        text-decoration: none;
        color: white;
        position: relative;
        display: flex;
        justify-content: center;
    }

    .sud-font:hover {
        color: #3490F6;
    }

    /*公式コンテンツ*/
    #officialcontents {
        background-color: whitesmoke;
        padding: 50px;
        text-align: center;
    }

    .off-con {
        fill: #FFFF;
        stroke: #ABD3FF;
        stroke-width: 3px;
        stroke-dasharray: none;
        stroke-opacity: 1;
        transition: fill 0.3s, stroke 0.3s ease;
        filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));
    }

    .off-img {
        transition: fill 0.3s ease;
        filter: grayscale(60%);
        cursor: pointer;
    }

    .oft-btn {
        display: inline-block;
        transition: all 0.5s ease;
        cursor: pointer;
        transform-origin: center;
    }

    .off-btn:hover {
        transform: scale(1.02);
        transition: transform 0.3s;
    }

    .off-btn:hover .M-btnfont {
        color: #FFFF;
        fill: #FFFF;
    }

    .off-btn:hover .off-con {
        fill: #ABD3FF;
        stroke: #FFFF;
        filter: drop-shadow(4px 4px 11px rgba(0, 0, 0, 0.3));
        cursor: pointer;
    }

    .off-btn:hover .off-img {
        filter: contrast(150%);
    }

    /*ご案内*/
    .infobox {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }

    .infoicons {
        height: 15vw;
        width: 15vw;
        clip-path: circle();
        background-color: white;
        text-align: center;
        margin: auto;
    }

    .infoitem {
        width: 33.33%;
        height: 25vw;
        text-align: center;
        margin-top: 2vh;
    }

    @media screen and (max-width: 767px) {
        .infoitem {
            font-size: 0.85rem;
        }
    }

    @media screen and (min-width: 768px) {
        .infoitem {
            font-size: 1.5rem;
        }

    }

    /*作成中お知らせ吹き出し*/
    /* 吹き出し用 */
    .btn-dev {
        position: relative;
    }

    /* ツールチップのデザイン */
    .tooltip-dev {
        position: absolute;
        top: -2.5rem;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: #fff;
        padding: 0.4rem 0.8rem;
        border-radius: 0.5rem;
        font-size: 0.9rem;
        white-space: nowrap;
        z-index: 10;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* PC：ホバー時に表示 */
    .btn-dev:hover .tooltip-dev {
        opacity: 1;
    }

    /* モバイル：クリックで表示切替 */
    .btn-dev.active .tooltip-dev {
        opacity: 1;
    }

    /* すでに導入済みのCSSの再掲（これをstyle.cssに書いておけばOK） */
    .prep-tooltip {
        position: relative;
        display: inline-block;
        cursor: not-allowed;
    }

    .prep-tooltip::after {
        content: attr(data-text);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #444;
        color: #fff;
        padding: 0.4em 0.8em;
        border-radius: 0.5em;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        font-size: 0.9em;
        z-index: 999;
    }

    .prep-tooltip:hover::after {
        opacity: 1;
        filter: contrast(120%);
    }


/*旭祭についてcss*/
    /* 共通見出し */
.section-heading {
  font-size: 1.8rem;
  font-weight: bold;
}

/* 旭祭について */
.about-text {
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

/* 委員長挨拶 */
.greeting-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.greeting-photo {
  flex: 1 1 300px;
  text-align: center;
}
.greeting-photo img {
  max-width: 100%;
  border-radius: 8px;
}
.greeting-message {
  flex: 1 1 300px;
}
.greeting-message p {
  font-size: 1rem;
  line-height: 1.6;
}

/* シンプルタイムライン */
.simple-timeline {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-left: 2px solid #ccc;
}
.simple-timeline li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
}
.simple-timeline li::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 12px;
  width: 10px;
  height: 10px;
  background: #ff7f50; /* オレンジ色 */
  border-radius: 50%;
}
.simple-timeline .year {
  font-weight: bold;
  margin-right: 0.5rem;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .greeting-wrapper {
    flex-direction: column;
    text-align: center;
  }
  .greeting-message {
    text-align: center;
  }
}

/*テーマについてcss*/
.theme-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #ffffff;
}

.theme-banner {
    position: relative;
    display: inline-block;
}

.theme-image {
    width: 100%;
    height: auto;
    border-radius: 10px;
    opacity: 0.9;
}

.theme-title {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.5em;
    color: white;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    font-weight: bold;
}
#theme-description {
    font-size: 1.2rem;
    line-height: 2.4rem; /* 行間を広く */
    color: black;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

#theme-description span {
    opacity: 0;
    display: inline-block;
    transform: scale(0.6); /* 少し小さい状態から */
    transition: all 0.6s ease;
}

#theme-description span.show {
    opacity: 1;
    transform: scale(1);
}

@media screen and (min-width: 768px) {
    .infoitem {
        font-size: 1.5rem;
    }

}
.infosv{
    width: 80%;
    padding-top: 10%;
    margin: auto;
}
.I-titlefont{
    font-family: "fot-chiaro-std", sans-serif;
    font-weight: 700;
    font-style: normal;
}