@charset "utf-8";

#page {
    padding-bottom: clamp(0px, 18.2vw, 200px);
}

.page_title {
    color: var(--color-main);
    padding: clamp(0px, 20vw, 220px) 0 clamp(0px, 8.2vw, 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page_title span {
    font-size: clamp(0px, 9.1vw, 100px);
    font-family: var(--font-en);
    letter-spacing: -0.05em;
    line-height: 1;
    font-style: oblique;
    padding-right: 0.2em;
}

.page_title small {
    font-size: clamp(0px, 1.8vw, 20px);
    font-weight: var(--font-w-bl);
    line-height: 1;
    margin-top: 1em;
}

@media screen and (max-width: 768px) {
    #page {
        padding-bottom: 20dvw;
    }

    .page_title {
        padding: 36dvw 0 7dvw;
    }

    .page_title span {
        font-size: 10dvw;
    }

    .page_title small {
        font-size: 3dvw;
        margin-top: 0.8em;
    }
}


/* ===============================================
   Thanks
=============================================== */
.message_block {
    width: clamp(0px, 86vw, 965px);
    margin: 0 auto;
    padding-top: clamp(0px, 4.1vw, 45px);
}

.message_head {
    display: flex;
    justify-content: space-between;
}

.message_head .img_area {
    width: 38%;
}

.message_head .text_area {
    width: 51%;
    padding-top: clamp(0px, 8.2vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.message_head .text_area .text {
    font-size: clamp(0px, 2.8vw, 31px);
    line-height: 1.6em;
    font-weight: var(--font-w-bl);
    white-space: nowrap;
}

.message_head .text_area .name {
    font-size: clamp(0px, 1.8vw, 20px);
    font-weight: var(--font-w-b);
    text-align: right;
    margin-top: clamp(0px, 7.3vw, 80px);
}

.message_head .text_area .name small {
    margin-right: 1em;
}

.thanks_cont {
    margin-top: clamp(0px, 5.5vw, 60px);
}

.thanks_cont p {
    font-size: clamp(0px, 1.55vw, 17px);
    font-weight: var(--font-w-m);
    line-height: 2.3em;
    letter-spacing: 0.03em;
}

.cont_logo {
    padding: clamp(0px, 20vw, 220px) 0;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 768px) {
    .message_block {
        width: 100%;
        padding-top: 0;
    }

    .message_head {
        width: 84%;
        margin: 0 auto;
        flex-direction: column-reverse;
        align-items: center;
    }

    .message_head .img_area {
        width: 50dvw;
    }

    .message_head .text_area {
        width: 100%;
        padding-top: 5dvw;
    }

    .message_head .text_area .text {
        font-size: 5.5dvw;
        line-height: 1.5em;
        text-align: center;
    }

    .message_head .text_area .name {
        font-size: 4dvw;
        margin-top: 4dvw;
    }

    .thanks_cont {
        margin-top:5dvw;
    }

    .thanks_cont p {
        width: 84%;
        margin: 0 auto;
        font-size: 3.5dvw;
        line-height: 1.7em;
        letter-spacing: 0;
    }

    .cont_logo {
        padding: 8dvw 0 19dvw;
    }
    
    .cont_logo img {
        width: 21dvw;
    }
}


/* ===============================================
   Topics
=============================================== */
#topics_menu {
    width: 100%;
    padding-bottom: clamp(0px, 9.1vw, 100px);
}

#topics_menu .menu_list {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 1px;
}

#topics_menu .menu_list a {
    width: clamp(0px, 21.8vw, 240px);
    aspect-ratio: 240 / 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-main);
    font-size: clamp(0px, 2.1vw, 23px);
    font-family: var(--font-en);
    letter-spacing: -0.05em;
    line-height: 1;
    font-style: oblique;
    padding-right: 0.2em;
    color: #fff;
}

#topics_menu .menu_list a:hover,
#topics_menu .menu_list a.current {
    background-color: var(--color-brown);
}

#topics_menu .menu_list a.current {
    pointer-events: none;
}

@media screen and (max-width: 768px) {
    #topics_menu {
        padding-bottom: 10dvw;
    }

    #topics_menu .menu_list a {
        width: calc((100% - 3px) / 4);
        aspect-ratio: 250 / 145;
        font-size: 3dvw;
    }
}

/* 記事リスト */
.article_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0px, 3.2vw, 35px) 0;
    margin-bottom: clamp(0px, 13.6vw, 150px);
}

.article_list li {
    width: calc(100% / 3);
}

.article_list li .article_img {
    width: 100%;
    height: clamp(0px, 27.3vw, 300px);
    overflow: hidden;
    position: relative;
}

.article_list li a .article_img::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #231815;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s;
}

.article_list li a:hover .article_img::before {
    opacity: 0.7;
}

.article_list li .article_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article_list li .article_icon {
    font-family: var(--font-en);
    font-size: clamp(0px, 1.8vw, 20px);
    letter-spacing: -0.05em;
    line-height: 1;
    font-style: oblique;
    color: #fff;
    background-color: var(--color-main);
    display: inline-block;
    padding: 0.1em 0.5em 0.1em 0.2em;
    margin: clamp(0px, 1.6vw, 18px) 0 clamp(0px, 0.9vw, 10px) clamp(0px, 2.3vw, 25px);
}

.article_list li .article_text {
    font-size: clamp(0px, 1.55vw, 17px);
    font-weight: var(--font-w-b);
    line-height: 1.4em;
    margin: 0  clamp(0px, 2.3vw, 25px);
}

@media screen and (max-width: 768px) {
    .article_list {
        width: 90%;
        margin: 0 auto 10dvw;
        gap: 9dvw 0;
    }

    .article_list li {
        width: calc(100% / 2);
    }

    .article_list li .article_img {
        height: 37dvw;
    }
    
    .article_list li .article_icon {
        font-size: 4.2dvw;
        margin: 2dvw 0 1.5dvw 3dvw;
    }

    .article_list li .article_text {
        font-size: 3.5dvw;
        letter-spacing: 0;
        margin: 0  3dvw;
    }
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination .page-numbers {
    width: clamp(0px, 5.5vw, 60px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0px, 1.8vw, 20px);
    font-family: var(--font-en);
    line-height: 1;
    font-style: oblique;
    padding-right: 0.1em;
    position: relative;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: var(--color-main);
    color: #fff;
}

.pagination .page-numbers.dots {
    width: clamp(0px, 2.7vw, 30px);
    pointer-events: none;
}

.pagination .page-numbers.next,
.pagination .page-numbers.prev {
    border: 1px solid var(--color-main);
    padding: 0;
}

.pagination .page-numbers.next::before,
.pagination .page-numbers.prev::before {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    z-index: 2;
    background: url(../img/arrow_red2.svg) no-repeat center center / contain;
    transition: background 0.4s;
}

.pagination .page-numbers.prev::before {
    transform: scaleX(-1);
}

.pagination .page-numbers.next:hover::before,
.pagination .page-numbers.prev:hover::before {
    background-image: url(../img/arrow_white.svg);
    background-color: var(--color-main);
}

@media screen and (max-width: 768px) {
    .pagination .page-numbers {
        width: 12dvw;
        font-size: 4dvw;
    }
    
    .pagination .page-numbers.dots {
        width: 6dvw;
    }
}


/* ===============================================
   single
=============================================== */
#single {
    width: 100%;
    padding: clamp(0px, 18.2vw, 200px) 0;
}

#single .inner {
    width: 965px;
    max-width: 88%;
}

#single .category_icon {
    font-size: clamp(0px, 3.6vw, 40px);
    font-family: var(--font-en);
    letter-spacing: -0.05em;
    line-height: 1;
    font-style: oblique;
    background-color: var(--color-main);
    color: #fff;
    display: inline-block;
    padding: 0.1em 0.5em 0.15em 0.2em;
    margin-bottom: clamp(0px, 1.8vw, 20px);
}

#single .article_title {
    font-size: clamp(0px, 2.8vw, 31px);
    font-weight: var(--font-w-bl);
    line-height: 1.6em;
    margin-bottom: 0.8em;
}

#single .name_area {
    font-size: clamp(0px, 2vw, 22px);
    font-weight: var(--font-w-b);
    text-align: right;
    line-height: 1;
    margin-bottom: 1.3em;
}

#single .article_sec + .article_sec {
    margin-top: clamp(0px, 8.2vw, 90px);
}

#single .article_sec .img_area {
    width: 100%;
    margin-bottom: clamp(0px, 2.7vw, 30px);
    display: flex;
    justify-content: center;
}

#single .article_sec .title_area {
    font-size: clamp(0px, 2vw, 22px);
    font-weight: var(--font-w-b);
    line-height: 1.6em;
    margin-bottom: 0.8em;
}

#single .article_sec .text_area {
    font-size: clamp(0px, 1.55vw, 17px);
    font-weight: var(--font-w-m);
    line-height: 2.3em;
    letter-spacing: 0.03em;
}

#single .button_single {
    margin: clamp(0px, 12.7vw, 140px) auto 0;
}

.button_single {
    width: clamp(0px, 21.8vw, 240px);
    aspect-ratio: 240 / 70;
    border: 1px solid var(--color-main);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(0px, 1.6vw, 18px);
    font-family: var(--font-en);
    letter-spacing: -0.05em;
    line-height: 1;
    font-style: oblique;
    color: var(--color-main);
    background-color: #fff;
    padding-right: 0.1em;
}

.button_single:hover {
    color: #fff;
    background-color: var(--color-main);
}

@media screen and (max-width: 768px) {
    #single {
        padding: 36dvw 0 20dvw;
    }

    #single .inner {
        max-width: 90%;
    }

    #single .category_icon {
        font-size: 6dvw;
        margin-bottom: 4dvw;
        margin-left: 3dvw;
    }

    #single .article_title {
        font-size: 5dvw;
        padding: 0 3dvw;
        margin-bottom: 1em;
    }
    
    #single .name_area {
        font-size: 4dvw;
        padding: 0 3dvw;
    }

    #single .article_sec + .article_sec {
        margin-top: 9dvw;
    }

    #single .article_sec .img_area {
        width: 100%;
        margin-bottom: 5dvw;
    }

    #single .article_sec .title_area {
        font-size: 4dvw;
        line-height: 1.5em;
        padding: 0 3dvw;
    }

    #single .article_sec .text_area {
        font-size: 3.5dvw;
        line-height: 1.7em;
        letter-spacing: 0;
        padding: 0 3dvw;
    }

    #single .button_single {
        margin: 13dvw auto 0;
    }

    .button_single {
        width: 50dvw;
        aspect-ratio: 500 / 145;
        font-size: 4dvw;
    }
}


/* ===============================================
   History
=============================================== */
.history_block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.history_block .text_1 {
    font-size: clamp(0px, 1.4vw, 17px);
    line-height: 2.4em;
    letter-spacing: 0.03em;
}

.history_block .lead_text {
    font-size: clamp(0px, 1.7vw, 20px);
    line-height: 2em;
    font-weight: 500;
    text-align: center;
    margin-bottom: clamp(0px, 5.4vw, 65px);
}

.history_text_cont {
    width: clamp(0px, 51.6vw, 620px);
}

.history_cont {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 6.3vw, 75px);
}

.history_cont .text_area {
    width: clamp(0px, 36.6vw, 440px);
    border-top: 2px solid #231815;
    border-bottom: 2px solid #231815;
    padding: 1.5em 0.2em;
}

.history_cont2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 6.3vw, 75px);
}

.history_block .sec_title {
    font-size: clamp(0px, 2.1vw, 25px);
    font-weight: bold;
    letter-spacing: 0.03em;
    text-align: center;
    color: var(--color-main);
    margin-bottom: 2.5em;
}

.history_table {
    width: clamp(0px, 83.3vw, 1000px);
    margin: 0 auto;
}

.history_table tr:nth-of-type(odd) {
    background-color: #f3f3f3;
}

.history_table th,
.history_table td {
    font-size: clamp(0px, 1.4vw, 17px);
    line-height: 1.4em;
    font-weight: 500;
    letter-spacing: 0.1em;
    padding: clamp(0px, 1.7vw, 20px) clamp(0px, 2.9vw, 35px);
}

.history_table th {
    width: 20%;
    text-align: right;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    white-space: nowrap;
}

.history_table td {
    width: 80%;
}

#history1 {
    margin-bottom: clamp(0px, 20.8vw, 250px);
}

#history1 .history_cont {
    margin-bottom: clamp(0px, 4.1vw, 50px);
}

#history1 .history_cont .img_area {
    width: clamp(0px, 45.0vw, 540px);
}

#history2 {
    margin-bottom: clamp(0px, 10.0vw, 120px);
}

#history2 .history_cont2 {
    width: clamp(0px, 117.5vw, 1410px);
    justify-content: flex-end;
    align-items: flex-start;
    margin-bottom: clamp(0px, 3.7vw, 45px);
}

#history2 .history_cont2 .img_area {
    width: clamp(0px, 53.3vw, 640px);
}

#history2 .history_cont2 .text_area {
    width: clamp(0px, 45.0vw, 540px);
    padding-top: 0.5em;
}

#history2 .img_area2 {
    width: clamp(0px, 35.8vw, 430px);
}

#history3 {
    margin-bottom: clamp(0px, 15.8vw, 190px);
}

#history3 .text_area {
    width: clamp(0px, 51.6vw, 620px);
    margin-bottom: clamp(0px, 3.3vw, 40px);
}

#history3 .img_area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0px, 1.3vw, 15px);
}

#history3 .img_area img {
    width: clamp(0px, 53.3vw, 640px);
}

#history4 {
    margin-bottom: clamp(0px, 15.8vw, 190px);
}

#history4 .logo {
    width: clamp(0px, 25.0vw, 300px);
    margin-bottom: clamp(0px, 5.8vw, 70px);
}

#history4 .text_area2 {
    width: clamp(0px, 51.6vw, 620px);
    margin-bottom: clamp(0px, 10.0vw, 120px);
}

#history4 .history_cont .img_area {
    width: clamp(0px, 48.3vw, 580px);
}

#history5 .img_area {
    width: clamp(0px, 70.8vw, 850px);
    margin: 0 auto;
    padding-top: clamp(0px, 15.8vw, 190px);
}

@media screen and (max-width: 768px) {
    .history_block {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .history_block .text_1 {
        font-size: 3.5dvw;
        line-height: 1.8em;
    }

    .history_block .lead_text {
        font-size: 3.5dvw;
        margin-bottom: 9dvw;
    }

    .history_text_cont {
        width: 100%;
    }

    .history_cont {
        flex-direction: column;
        gap: 3dvw;
    }

    .history_cont .text_area {
        width: 85dvw;
        border-top: 0.3dvw solid #231815;
        border-bottom: 0.3dvw solid #231815;
        padding: 1em 0.2em;
    }

    .history_cont2 {
        flex-direction: column-reverse;
        gap: 5.5dvw;
    }

    .history_block .sec_title {
        font-size: 5dvw;
        margin-bottom: 1.5em;
    }

    .history_table {
        width: 100%;
    }

    .history_table th,
    .history_table td {
        font-size: 2.5dvw;
        line-height: 1.7em;
        padding: 1.5em 2em;
    }

    .history_table th {
        width: 28%;
        vertical-align: text-top;
    }

    .history_table td {
        width: 72%;
    }

    #history1 {
        margin-bottom: 20dvw;
    }

    #history1 .history_cont {
        margin-bottom: 9dvw;
    }

    #history1 .history_cont .img_area {
        width: 100%;
    }

    #history2 {
        margin-bottom: 20dvw;
    }

    #history2 .history_cont2 {
        width: 100%;
        justify-content: center;
        align-items: center;
        margin-bottom: 13dvw;
    }

    #history2 .history_cont2 .img_area {
        width: 100%;
    }

    #history2 .history_cont2 .text_area {
        width: 100%;
    }

    #history2 .img_area2 {
        width: 43dvw;
    }

    #history3 {
        margin-bottom: 19dvw;
    }

    #history3 .text_area {
        width: 100%;
        margin-bottom: 3dvw;
    }

    #history3 .img_area {
        flex-direction: column;
        gap: 5.5dvw;
    }

    #history3 .img_area img {
        width: 100%;
    }

    #history4 {
        margin-bottom: 19dvw;
    }

    #history4 .logo {
        width: 30dvw;
        margin-bottom: 5dvw;
    }

    #history4 .text_area2 {
        width: 100%;
        margin-bottom: 12dvw;
    }

    #history4 .history_cont .img_area {
        width: 100%;
    }

    #history5 .img_area {
        width: 100%;
        padding-top: 10dvw;
    }
}