@charset "utf-8";

/* ==================================================
   インフォメーション・獣医学部合格最新情報 共通
================================================== */

/* セクション
------------------------------ */
#information,
#results {
    background: none;
}

/* 見出し
------------------------------ */
/* 見出し
------------------------------ */
#contents #information h2,
#contents #results h2,
#contents #note h2,
#contents #voice h2 {
    margin: 0 0 4px;
    padding: 0;

    border: none !important;
    background: none;
    box-shadow: none;
    text-shadow: none;

    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.4;
    text-align: center;
    color: #0060bb;

    padding: 7px 20px;
    box-sizing: border-box;

    /* グラデーション非対応時 */
    background: #eeeeee;

    /* 左右に向かって白くなる帯 */
    background: linear-gradient(
        to right,
        #ffffff 0%,
        #ffffff 9%,
        #e6f3fb 26%,
        #e6f3fb 74%,
        #ffffff 91%,
        #ffffff 100%
    );
}

/* h2先頭文字の既存装飾を解除
------------------------------ */
#contents #information h2::first-letter,
#contents #results h2::first-letter,
#contents #note h2::first-letter,
#contents #voice h2::first-letter {
    margin: 0;
    padding: 0;

    border: none !important;
    background: none !important;

    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* 一覧全体
------------------------------ */
#information dl,
#results dl,
#note dl {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 0;
    align-items: stretch;

    width: 100%;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;

    font-family: "Zen Kaku Gothic New", sans-serif;
    line-height: 1.5;
}

/* 日付・記事共通
------------------------------ */
#information dt,
#information dd,
#results dt,
#results dd {
    margin: 0;
    border-bottom: 1px solid;
}

/* 日付
------------------------------ */
#information dt,
#results dt {
    padding: 8px 8px 8px 0;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

/* 記事
------------------------------ */
#information dd,
#results dd {
    min-width: 0;
    padding: 8px 0;

    font-size: 14px;
    font-weight: 700;
}

/* リンク
------------------------------ */
#information dd a,
#results dd a {
    position: relative;
    display: block;

    padding-left: 23px;

    color: #333;
    text-decoration: none;
}

/* 丸
------------------------------ */
#information dd a::before,
#results dd a::before {
    content: "";
    position: absolute;
    top: 0.22em;
    left: 0;

    width: 15px;
    height: 15px;
    border-radius: 50%;
}

/* 白い三角
------------------------------ */
#information dd a::after,
#results dd a::after {
    content: "";
    position: absolute;
    top: calc(0.22em + 4px);
    left: 6px;

    width: 0;
    height: 0;

    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-left: 5px solid #fff;
}


/* ==================================================
   インフォメーションの色
================================================== */

#contents #information h1 {
    color: #0060bb;
}

#information dl {
    background-color: #e1e3bf;
}

#information dt {
    color: #dc2d00;
}

#information dt,
#information dd {
    border-bottom-color: #c9cba9;
}

#information dd a::before {
    background-color: #d8380b;
}

#information dd a:hover {
    color: #dc2d00;
}


/* ==================================================
   獣医学部合格最新情報の色
================================================== */

#contents #results h1 {
    color: #0068bd;
}

#results dl {
    background-color: #e3e5e5;
}

#results dt {
    color: #0068bd;
}

#results dt,
#results dd {
    border-bottom-color: #c3c6c7;
}

#results dd a::before {
    background-color: #0872c4;
}

#results dd a:hover {
    color: #0068bd;
}


/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 480px) {

    #contents #information h1,
    #contents #results h1 {
        font-size: 15px;
    }

    #information dl,
    #results dl {
        /*
        grid-template-columns: 66px minmax(0, 1fr);
        column-gap: 6px;
        padding: 10px 12px;
        */
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    #information dt,
    #results dt {
        /*
        padding: 8px 5px 8px 0;
        */
        padding: 8px 0 0;
        border-bottom: none;
        font-size: 10px;
    }

    #information dd,
    #results dd {
        /*
        padding: 8px 0;
        */
        padding: 2px 0 8px;
        font-size: 12px;
    }

    #information dd a,
    #results dd a {
        padding-left: 20px;
    }

    #information dd a::before,
    #results dd a::before {
        width: 13px;
        height: 13px;
    }

    #information dd a::after,
    #results dd a::after {
        top: calc(0.22em + 3px);
        left: 5px;

        border-top-width: 3px;
        border-bottom-width: 3px;
        border-left-width: 4px;
    }
}

/* ==============================
   バナースライダー
============================== */

.top-banner-slider {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0;

    width: 100%;
    margin-bottom: 30px;
}

.top-banner-slider__button--next {
    margin-left: 6px;
}

/* スライド部分
------------------------------ */
.top-banner-slider__track {
    flex: 0 0 100%;
    min-width: 0;

    display: flex;
    gap: 16px;

    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.top-banner-slider__track::-webkit-scrollbar {
    display: none;
}

/* 各バナー
------------------------------ */
.top-banner-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.top-banner-slider__slide a {
    display: block;
}

.top-banner-slider__slide img {
    display: block;
    width: 100%;
    height: auto;
}

/* 2枚以上なら右側に次のバナーを見せる
------------------------------ */
.top-banner-slider.is-multiple .top-banner-slider__slide {
    flex-basis: calc(100% - 100px);
}

/* バー型ボタン
------------------------------ */
.top-banner-slider__button {
    flex: 0 0 36px;

    width: 36px;
    height: 7px;
    margin-top: 10px;
    padding: 0;

    border: none;
    border-radius: 1px;

    background-color: #c8c8c8;
    cursor: pointer;
}

/* マウスオーバー
------------------------------ */
.top-banner-slider__button:hover {
    background-color: #888;
}

/* 1枚だけならボタンを非表示
------------------------------ */
.top-banner-slider.is-single .top-banner-slider__button {
    display: none;
}

.top-banner-slider.is-single .top-banner-slider__track {
    overflow: hidden;
}

/* スマートフォン
------------------------------ */
@media screen and (max-width: 480px) {

    .top-banner-slider__track {
        gap: 10px;
    }

    .top-banner-slider.is-multiple .top-banner-slider__slide {
        flex-basis: calc(100% - 45px);
    }
}

/* ==================================================
   Official Note
================================================== */

/* セクション全体
------------------------------ */
#contents .official-note {
    width: 100%;
    margin: 36px auto 30px;
    padding: 0;
    box-sizing: border-box;

    background: none;
    text-align: left;
}

/* 見出し
   既存のh2用装飾をすべて解除
------------------------------ */
/*
#contents .official-note .official-note__title {
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 0 0 10px !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

    color: #0068b7;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 18px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.4;
    text-align: center;
    text-indent: 0 !important;
}

#contents .official-note .official-note__title::before,
#contents .official-note .official-note__title::after {
    content: none !important;
    display: none !important;
}
*/

/* 読み込みエリア
------------------------------ */
#contents #note-rss-area {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 記事一覧 */
#contents .official-note__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* flex-startから変更 */
    justify-content: center;
    gap: 10px;

    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 記事カード */
#contents .official-note__item {
    position: relative;
    float: none;
    display: flex; /* 追加 */
    flex: 0 0 calc(25% - 8px);

    width: calc(25% - 8px);
    min-height: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;

    border: 1px solid #999;
    background-color: #fff;
}

/* カード全体のリンク */
#contents .official-note__item > a {
    position: static;
    display: flex; /* blockから変更 */
    flex-direction: column; /* 追加 */

    width: 100%;
    height: 100% !important; /* カードの高さに合わせる */
    min-height: 0 !important;
    margin: 0;
    padding: 0 !important;
    box-sizing: border-box;

    background: none;
    color: #333;
    text-decoration: none;
}

#contents .official-note__item > a:hover {
    opacity: 0.8;
}

/* サムネイル
------------------------------ */
#contents .official-note__thumb {
    position: relative;
    width: 100%;
    height: 0;
    margin: 0;
    padding-top: 56.25%;
    overflow: hidden;

    background-color: #eee;
}

#contents .official-note__thumb img {
    position: absolute;
    top: 0;
    left: 0;

    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    object-fit: cover;
}

/* テキスト部分
   下余白は右下矢印の分だけ確保
------------------------------ */
#contents .official-note__body {
    flex: 1; /* 残りの高さを埋める */

    width: 100%;
    margin: 0;
    padding: 8px 8px 22px;
    box-sizing: border-box;
}

/* 日付
------------------------------ */
#contents .official-note__date {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 6px !important;
    padding: 0 !important;

    border: 0 !important;
    background: none !important;

    color: #0068b7;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    text-indent: 0 !important;
}

#contents .official-note__date::before,
#contents .official-note__date::after {
    content: none !important;
    display: none !important;
}

/* 記事タイトル
   既存サイトのh3装飾・左インデント・縦線を完全解除
------------------------------ */
#contents .official-note .official-note__article-title {
    position: static;
    display: -webkit-box;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(1.5em * 3);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;

    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;

    color: #333;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    text-align: left;
    text-indent: 0 !important;
    letter-spacing: 0;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

#contents .official-note .official-note__article-title::before,
#contents .official-note .official-note__article-title::after {
    content: none !important;
    display: none !important;
}

/* 右下の矢印
------------------------------ */
#contents .official-note__arrow {
    position: absolute;
    right: 0;
    bottom: 0;

    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;

    background-color: #0068b7;
    color: #fff;
    font-size: 10px;
    line-height: 1;
}

/* 読み込み中・エラー表示
------------------------------ */
#contents .official-note__loading,
#contents .official-note__error {
    margin: 20px 0 !important;
    padding: 0;

    color: #666;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* スマートフォン
------------------------------ */
@media screen and (max-width: 767px) {

    #contents .official-note {
        width: calc(100% - 30px);
        margin-top: 25px;
        margin-bottom: 25px;
    }

    #contents .official-note__list {
        justify-content: flex-start;
        gap: 0;
    }

    #contents .official-note__item {
        flex: 0 0 calc(50% - 5px);
        width: calc(50% - 5px);
        margin: 0 0 10px;
    }

    #contents .official-note__item:nth-child(odd) {
        margin-right: 10px;
    }
}
/*
@media screen and (max-width: 360px) {

    #contents .official-note__item {
        flex-basis: 100%;
        width: 100%;
    }
}
*/

/* ==================================================
   合格体験記
================================================== */

/* セクション全体
------------------------------ */
#contents #voice {
    width: 100%;
    margin: 36px auto 30px;
    padding: 0;

    background: none;
    box-sizing: border-box;
}

/* グレーの背景
------------------------------ */
#contents .voice__panel {
    width: 100%;
    margin: 0;
    padding: 0;

    background: none;
    box-sizing: border-box;
}


/* 画像一覧
------------------------------ */
#contents .voice__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    width: 100%;
    margin: 0;
    padding: 0;
}

/* 各カード
------------------------------ */
#contents .voice-card {
    width: calc(33.333% - 7px);
    max-width: 292px;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

#contents .voice-card a {
    display: block;
    margin: 0;
    padding: 0;

    background: none;
    text-decoration: none;
}

#contents .voice-card img {
    display: block;
    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
    border: none;
}

/* マウスオーバー
------------------------------ */
#contents .voice-card a:hover {
    opacity: 0.8;
}

/* 合格体験記スライドボタン
------------------------------ */
#contents .voice__slider-buttons {
    display: none;
}

/* スマートフォン
------------------------------ */
@media screen and (max-width: 767px) {

    #contents .voice__panel {
        width: 100%;
        overflow: hidden;
    }

    #contents .voice__list {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 0;

        width: 100%;
        margin: 0;
        padding: 0;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #contents .voice-card {
        flex: 0 0 calc(100% - 45px);

        width: calc(100% - 45px);
        max-width: none;
        margin: 0 10px 0 0;
        padding: 0;

        scroll-snap-align: start;
    }

    #contents .voice-card:last-child {
        margin-right: 0;
    }

    #contents .voice__slider-buttons {
        display: flex;
        justify-content: center;
        gap: 0;

        width: 100%;
        margin: 0 0 25px;
        padding: 0;
    }

    #contents .voice__slider-buttons > * + * {
        margin-left: 6px;
    }
}

/* ==================================================
   and more 共通ボタン
================================================== */

/* ボタン配置
------------------------------ */
#contents .official-note__more,
#contents .voice__more {
    margin: 10px 0 0 !important;
    padding: 0;

    text-align: center;
}

/* ボタン本体
------------------------------ */
#contents .official-note__more a,
#contents .voice__more a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    width: 146px;
    height: 24px;
    margin: 0;
    padding: 0;

    border: 1px solid #999;
    border-radius: 4px;
    background: -webkit-linear-gradient(
        top,
        #fff 0%,
        #ddd 100%
    );
    background: linear-gradient(
        to bottom,
        #fff 0%,
        #ddd 100%
    );
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);

    color: #555;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;

    box-sizing: border-box;
}

/* オレンジの矢印
------------------------------ */
#contents .official-note__more span,
#contents .voice__more span {
    margin-left: 7px;

    color: #f47c35;
    font-size: 17px;
    line-height: 1;
}

/* マウスオーバー
------------------------------ */
#contents .official-note__more a:hover,
#contents .voice__more a:hover {
    opacity: 0.8;
}