/* ----- 一覧ページ ----- */
/* トップ画像 */
.subpage_top_wrapper {
    position: relative;
    width: 100%;
    height: 120px;
    margin-bottom: 20px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../images/blog_top.jpg);
}
.subpage_top_title {
    position: absolute;
    display: block;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 4rem;
}
/* ブログ一覧 */
.blog_list {
    box-sizing: border-box;
	margin: 0;
	padding: 0;
    width: 95%;
    max-width: 950px;
    /* height: 120px;
    overflow-y: scroll; */
    margin: 10px auto;
    padding: 10px 15px 10px 10px;
    border: none;
}
.blog_item {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #555;
}
/* .blog_item a {
    color: #2dabea;
} */
.blog_thumbnail {
    position: relative;
}
.list_date {
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translate(-50%, 0);
    padding: 0.1em 0.2em;
    background-color: rgba(255,255,255,1);
    color: #9b7e5e;
    line-height: 1;
    font-weight: bold;
    font-size: 1.4rem;
}
.ti_grid {
    display: grid;
    grid-template-columns: 2fr 5fr;
    grid-gap: 10px;
}
.blog_thumbnail img {
    position: relative;
    width: 100%;
    /* border-radius: 20px;   
    transform: scale(1.01); */
    aspect-ratio: 3 / 2; 
    object-fit: cover;
}
.blog_item a:hover {
    opacity: 0.8;
    transition: 0.2s;
}
.list_title {
    color: #1527ce;
    font-weight: bold;
    font-size: 1.4rem;
}
/* サークルアイテム */
.circle_item {
    position: relative;
    display: inline-block;
    padding: 0 1em;
    font-size: 1.4rem;
}
.circle_item::before {
    position: absolute;
    content: "○";
    left: 0;
    top: 2px;
    font-size: 1.2rem;
}

/* ----- ブログページ ----- */
/* ブログ記事 */
.blog_wrapper {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

/* タイトル */
.blog_title {
    position: relative;
    margin: 20px auto 5px;
    padding: 0 0 0 0.5em;
    /* border: 1px solid #ccc; */
    border-left: 5px solid #1527ce;
    color: #1527ce;
    font-size: 1.6rem;
}
/* 日付 */
.blog_date {
    color: #9b7e5e;
    font-weight: bold;
    font-size: 1.6rem;
}

/* ブログ画像 */
.blog_image {
    width: 80%;
    max-width: 500px;
    margin: 10px auto;
}
.blog_image img {
    width: 100%;
}

/* 見出しリスト */
.blog_headline {
    width: fit-content;
    border: 1px solid #1527ce;
    padding: 1em 1.5em 1em 2em;
    margin: 0 auto;
}
.blog_headline li {
    position: relative;
    width: fit-content;
    margin: 0.75em 0 0.75em 1em;
    border-bottom: 1px dashed #aaa;
    color: #444;
    line-height: 1.5;
    font-weight: bold;
    font-size: 1.6rem;
}
.blog_headline li:before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(-45deg);
    top: 0.4em;
    left : -1.2em;
    border-right: 4px solid #1527ce;
    border-bottom: 4px solid #1527ce;
}
.blog_headline a:hover {
    opacity: 0.8;
    transition: 0.2s;
}

/* 文章ブロック */
.blog_block {
    margin: 25px auto;
}
/* 文章 */
.blog_sentence {
    margin: 0.5em auto 1em;
    font-size: 1.4rem;
}
.emphasis_sky {
    color: #4ba3e3;
    font-weight: bold;
}
.font_normal {
    color: #000;
    font-weight: normal;
}

/* 小見出し */

/* グリッド */
.grid_basic {
    width: 95%;
    max-width: 1000px;
    display: grid;
    margin: 0 auto;
    padding: 0.2em 0.5em;
}


.explain_index {
    border-bottom: 1px solid #f78b2b;
    color: #f78b2b;
}

/* PR */
.pr_block {
    margin-top: 30px;
    padding-top: 0.5em;
    border-top: 1px dashed #aaa;
}
/* 汎用ボタン */
.basic_button {
    display: block;
    /* width: 300px; */
    height: fit-content;
    margin: 10px auto;
    padding: 0.5em;
    color: #523210;
    border: 1px solid #523210;
    background-color: #fff;
    box-shadow: 2px 2px 2px #514232;
    text-align: center;
    font-weight: bold;
    font-size: 1.6rem;
}
.basic_button:hover {
    transition: 0.2s;
    background-color: #523210;
    color: #fff;
}
.pr_grid {
    display: grid;
    margin: 10px auto ;
    grid-gap: 5px;
}
.pr_grid .basic_button {
    width: 90%;
}
.news_link {
    display: block;
    width: fit-content;
    margin: 2em auto;
    padding-bottom: 0.1em;
    border-bottom: 0.5px dashed #444;
    font-size: 1.4rem;
}
.news_link:hover {
    opacity: 0.8;
    transition: 0.2s;
}

/* ----- インタビュー ----- */
/* 吹き出し */
.bubble_wrapper {
    max-width: 900px;
    margin: 25px auto;
}
.bubble_block {
    display: grid;
    grid-template-columns: 1fr 5fr;
    margin: 20px 0;
    padding: 0 5px 0 0;
}
.bubble_block img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #1527ce;
}
.bubble_right img {
    border: 2px solid #73e063;
}
/* 吹き出し */
.bubble {
    position: relative;
    display: inline-block;
    min-width: 120px;
    margin: 0 0 0 15px;
    padding: 7px;
    border: 2px solid #1527ce;
    border-radius: 5px;
    background-color: #fff;
    text-align: left;
    color: #444;
    font-weight: bold;
    font-size: 1.2rem;
}
.bubble::before {
    content: "";
    position: absolute;
    top: 28px;
    left: -21px;
    margin-top: -13px;
    border: 11px solid transparent;
    border-right: 11px solid #FFF;
    z-index: 2;
}
.bubble::after {
    content: "";
    position: absolute;
    top: 28px;
    left: -25px;
    margin-top: -14px;
    border: 12px solid transparent;
    border-right: 12px solid #1527ce;
    /* border-right: 14px solid #92e0d5; */
    z-index: 1;
}
.bubble .link {
    border-bottom: 1px solid #f78b2b;
    color: #f78b2b;
    font-weight: bold;
}

.bubble_right .bubble {
    border: 2px solid #73e063;
}
.bubble_right .bubble::after {
    border-right: 12px solid #73e063;
}

.bubble_right {
    /* position: relative;
    display: inline-block;
    min-width: 120px;
    width: 90%;
    margin: 0 0 0 15px;
    padding: 7px;
    border: 2px solid #73e063;
    border-radius: 5px;
    background: #fff;
    text-align: left;
    color: #444;
    font-weight: bold;
    font-size: 1.2rem; */
}
.bubble_right::before {
    /* content: "";
    position: absolute;
    top: 28px;
    left: -25px;
    margin-top: -13px;
    border: 13px solid transparent;
    border-right: 13px solid #FFF;
    z-index: 2; */
}
.bubble_right::after {
    content: "";
    position: absolute;
    top: 28px;
    left: -29px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #73e063;
    z-index: 1;
}

/* 画像一覧 */
.photo_wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    grid-gap: 15px;
    margin: 15px auto 30px;
}
.photo_wrapper a {
    position: relative;
    display: block;
    width: 45%;
}
.photo_wrapper a:hover {
    opacity: 0.8;
    transition: 0.2s;
}
.photo_wrapper img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #ccc;
    aspect-ratio: 3 / 2 ;
    object-fit: cover;
}
.photo_index {
    display: block;
    width: max-content;
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translate(-50%, 0);
    padding: 0.2em 0.4em;
    background-color: rgba(255,255,255,0.9);
    color: #000;
    line-height: 1;
    text-align: center;
    font-weight: 500;
    font-size: 1.6rem;
}

@media screen and (max-width: 599px) {
    .sp_hidden {
        display: none;
    }
}

@media screen and (min-width: 600px)  {
    .pc_hidden {
        display: none;
    }

    /* ----- 一覧ページ ----- */
    /* トップ画像 */
    .subpage_top_wrapper {
        margin-bottom: 30px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        height: 300px;
        position: relative;
    }
    .subpage_top_title {
        font-size: 6rem;
    }
    /* ブログ一覧 */
    .blog_list {
        /* height: 400px; */
        padding: 20px 30px 20px 20px;
    }
    .blog_item {
        /* display: grid;
        grid-template-columns: 2fr 9fr; */
        grid-gap: 20px;
        align-items: center;
        margin-bottom: 25px;
        padding-bottom: 25px;
    }
    .list_date {
        height: fit-content;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        padding: 0.1em 0.2em;
        background-color: rgba(255,255,255,0.9);
        color: #9b7e5e;
        line-height: 1;
        font-weight: bold;
        font-size: 2rem;
    }
    .ti_grid {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-gap: 20px;
    }
    .list_title {
        margin-bottom: 10px;
        font-size: 2.4rem;
    }
    .circle_item {
        margin-top: 0.1em;
        margin-bottom: 0.1em;
        font-weight: 500;
        font-size: 2rem;
    }
    .circle_item::before {
        left: 2px;
        top: 5px;
        font-size: 1.4rem;
    }

    /* ----- ブログページ ----- */
    /* タイトル */
    .blog_title {
        margin: 40px auto 15px;
        font-size: 2.2rem;
    }
    /* 日付 */
    .blog_date {
        color: #9b7e5e;
        font-weight: bold;
        font-size: 2rem;
    }
    /* ブログ画像 */
    .blog_image {
        margin: 20px auto;
    }
    /* 見出しリスト */
    .blog_headline {
        padding: 1em 3em 1em 3.5em;
    }
    .blog_headline li {
        margin: 0.75em 0 0.75em 1em;
        font-size: 2rem;
    }
    .blog_headline li:before {
        width: 12px;
        height: 12px;
        transform: rotate(-45deg);
        top: 0.4em;
        left : -1.2em;
        border-right: 4px solid #1527ce;
        border-bottom: 4px solid #1527ce;
    }
    /* 文章ブロック */
    .blog_block {
        margin: 40px auto;
    }
    /* 文章 */
    .blog_sentence {
        margin: 0.5em auto 1em;
        font-size: 2rem;
    }

    .explain_index {
        border-bottom: none;
    }
    .explain_block {
        border-bottom: 1px solid #f78b2b;
    }
    .explain_block:last-child {
        border: none;
    }

    /* PR */
    .pr_block {
        margin-top: 50px;
    }
    /* 汎用ボタン */
    .basic_button {
        position: relative;
        width: fit-content;
        bottom: -35px;
        margin: 10px auto 50px;
        padding: 0.5em 1em;
        font-size: 2rem;
    }
    .pr_grid {
        width: 90%;
        grid-template-columns: 1fr 1fr;
        margin: 10px auto ;
        grid-gap: 5px;
    }
    .news_link {
        margin: 4em auto 2em;
        font-size: 1.6rem;
    }

    /* ----- インタビュー ----- */
    /* 吹き出し */
    .bubble_wrapper {
        margin: 60px auto;
    }
    .bubble_block {
        display: grid;
        grid-template-columns: 1fr 5fr 1fr;
        grid-gap: 30px;
        margin: 40px 0;
    }
    .bubble_block img {
        border: 3px solid #1527ce;
    }
    .bubble_right img {
        border: 3px solid #73e063;
    }
    .bubble {
        width: 100%;
        margin: 0 auto;
        padding: 10px 15px;
        border: 3px solid #1527ce;
        border-radius: 10px;
        font-size: 2rem;
    }
    .bubble::before {
        top: 40px;
        left: -25px;
        margin-top: -13px;
        border: 13px solid transparent;
        border-right: 13px solid #FFF;
        z-index: 2;
    }
    .bubble::after {
        top: 40px;
        left: -30px;
        margin-top: -14px;
        border: 14px solid transparent;
        border-right: 14px solid #1527ce;
        z-index: 1;
    }
    .bubble_right img {
        order: 3;
    }
    .bubble_right .bubble {
        order: 2;
        border: 3px solid #73e063;
    }
    .bubble_right .bubble::before {
        left: auto;
        right: -25px;
        border: 13px solid transparent;
        border-left: 13px solid #FFF;
    }
    .bubble_right .bubble::after {
        left: auto;
        right: -30px;
        border: 14px solid transparent;
        border-left: 14px solid #73e063;
    }
    .br_blank {
        order: 1;
    }

    /* 画像一覧 */
    .photo_wrapper {

    }
    .photo_wrapper a {
        width: 30%;
    }
    .photo_wrapper4 a {
        width: 23%;
    }
    .photo_wrapper img {
        border-radius: 20px;
        box-shadow: 3px 3px 3px #ccc;
    }
    .photo_wrapper4 img {
        border-radius: 10px;
        box-shadow: 2px 2px 2px #ccc;
    }
    .photo_index {
        height: fit-content;
        bottom: 4px;
        /* top: 0;
        left: 0;
        transform: translate(0, 0); */
        color: #000;
        line-height: 1;
        font-weight: 500;
        /* font-size: 1.6rem; */
        font-size: clamp(14px, 1.2vw, 20px);
    }
}