@charset "utf-8";
@font-face {
    font-family: number;
    src: local(''Ebrima','Avenir','Avenir Next','Arial',sans-serif');
    unicode-range: U+0030-0039;
}
@font-face {
    font-family: hoge;
    src: local(''Ebrima','Avenir',sans-serif');
    unicode-range: U+0041-007A;
}
html{
    font-size: 62.5%;
    line-height: 1.15;
}
body{
    margin: 0;
    padding: 0;
    font-size: 1.4rem;/*22px*/
    font-weight: normal;
    letter-spacing: 0.12em;
    line-height: 2;
    color: #333;
    font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    width: 100%;
    overflow-y: hidden;
}
img{
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast;
}

h1,h2,h3,h4{
    font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,sans-serif;
    line-height: 1.5;
    font-weight: 600;
}
h1{
    font-size: 2rem;/*32px*/
    font-weight: 700;
    text-align: center;
}
h2{
    font-size: 2.125rem;/*34px*/
    font-weight: 700;
    text-align: center;
    color: unset;
}
h3{
    font-size: 1.875rem;/*30px*/
    font-weight: 700;
    text-align: center;
}
h4{
    font-size: 1.5rem;/*24px*/
}
h5{
    font-weight: normal;
}
p{
    line-height: 2;
    letter-spacing: 1px;
}

.inner{
    max-width: calc(100% - 40px);
    margin: 0 auto;
}
ul{
    list-style: none;
}
a{
    color: #333;
}
a:hover{
    color: #938E8C;
}

/* フェードイン(初期値) */
.js-fadeIn {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s, transform .8s; 
}
/* フェードイン(スクロールした後) */
.js-fadeIn.is-inview {
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: .5s; 
}
.js-fadeRight{
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity .8s, transform .8s; 
}
/* フェードイン(スクロールした後) */
.js-fadeRight.is-inview {
    opacity: 1; 
    transform: translateX(0); 
    transition-delay: .5s; 
}
.js-fadeOn {
    opacity: 0;
    transition: opacity .8s, transform .8s; 
}
/* フェードイン(スクロールした後) */
.js-fadeOn.is-inview {
    opacity: 1; 
    transition-delay: .5s; 
}

#post-interview{
    padding-top: 54px;
    background-color: #fbfaf4;
}


/* header */
.fixed-top {
    position: fixed;
    left: 0;
    right: 0;
    top: 0%;
    width: 100%;
    height: 54px;
    line-height: 54px;
    text-align: center;
    z-index: 999;
    transition: 0.5s;
    opacity: 1;
    visibility: visible;

    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.logo-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 54px;
    padding-left: 1em;
    z-index: 999;
}
.request-wrap{
    display: inline-block;
    width: 140px;
    height: 54px;
    background-color: #FFD681;
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 999;
}

.fixed-top a{
    justify-content: center;
}
.fixed-top .logo{
    width: 100px;
}
.req-nav-wrap{
    display: flex;
}
.fixed-top .nav-wrap {
    display: none;
}
.fixed-top .nav-wrap .nav-box {
    position: relative;
    font-weight: 600;
}

/* hamburger */
#navArea .toggle-btn::before{
    content: none;
}
#navArea .toggle-btn.open::before{
    content: none;
}
#navArea .toggle-btn span {
    display: block;
    position: absolute;
    width: 20px;
    height: 1px;
    left: 17px;
    border-radius: 4px;
    transition: all 0.5s;
}

#navArea .toggle-btn span:nth-child(1) {
    top: 24px;
}
#navArea .toggle-btn span:nth-child(2) {
    top: 31px;
}
#navArea .toggle-btn.open span:nth-child(1) {
    top: 18px;
    transform: translateY(10px) rotate(-315deg);
}
#navArea .toggle-btn.open span:nth-child(2) {
    top: 38px;
    transform: translateY(-10px) rotate(315deg);
}

.fixed-top .nav-wrap {
    display: inline-block;
    position: fixed;
    right: 0%;
    width: 100%;
    height: 100%;
    padding-top: 84px;
    padding-bottom: 50px;
    background: #fbfaf4;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: all 0.5s;
    opacity: 0;
    pointer-events: none;
}
.fixed-top .nav-wrap.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- 記事一覧ページ archive-interview --- */

/* main */
.main{
    padding-bottom: 5em;
}
.main-title{
    margin: 3em 0 0em 0;
    position: relative;
}
.main-title::before{
    content: '';
    position: absolute;
    width: 40px;
    height: 1px;
    top: -1em;
    background-color: #FFD681;
}
.main-title .title{
    font-family: YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
    line-height: 1.5;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    letter-spacing: 1.7px;
    text-align: left;
}
.main-title .deco{
    font-family: "Lora", serif;
    text-align: left;
    font-weight: 500;
    color: #938E8C;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

/* 記事一覧 */
.post-itemList{
    margin-top: 2em;
}
.post-itemList ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3em 2em;
}
.post-itemList a{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.post-item{
    display: flex;
    padding-bottom: 0.5em;
    border-bottom: 1px dotted #938E8C;
}
a .post-itemBox{
    display: flex;
    gap: 1em;
}

.post-itemBox > div {
    width: calc((100% / 2) - 1em);
}
.post-itemBox .post-contents{
    display: flex;
    flex-direction: column;
}

a .post-thumbnail figure{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.post-thumbnail img{
    aspect-ratio: 150 / 100;
    object-fit: cover;
    border-radius: 5px;
    transition:.5s all;
}

.post-title{
    font-size: 1.8rem;
    text-align: left;
    padding: 0em 0 0.8em;
}
.post-detail{
    line-height: 1.8;
    font-size: 1.4rem;
    margin-bottom: 1em;
}

.arrow.-more{
    width: 71px;
    margin-top: auto;
    margin-left: auto;
}
.arrow span{
    position: relative;
    font-size: 1.2rem;
    color: #938E8C;
}
.arrow span::before {
    content: '';
    position: absolute;
    display: inline-block;
    left: 45px;
    width: 25px;
    height: 1px;
    margin: 14px 0 0 auto;
    border-radius: 9999px;
    background-color: #938E8C;
}
.arrow span::after {
    content: '';
    position: absolute;
    top: calc(50% - 0px);
    left: 63px;
    width: 8px;
    height: 1px;
    border-radius: 9999px;
    background-color: #938E8C;
    transform: rotate(45deg);
    transform-origin: calc(100% - 3px) 50%;
}

/* pagination */
.nav-links {
    margin: 3em auto 0;
    display: flex;
    justify-content: center;
}
.page-numbers {
    display: inline;
    margin: 0 5px;
    padding: 3px 12px;
    color: #333;
    text-decoration: none;
}
.page-numbers.current {
    background: #938E8C;
    color: #fff;
    font-weight: bold;
}

.toppage a{
    display: block;
    width: 250px;
    height: 50px;
    line-height: 50px;
    margin: 5em auto 0;
    color: #333;
    text-align: center;
    border: 1px solid #333;
    position: relative;
}
.toppage a::before{
    content: '';
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 20px;
    border-radius: 1px;
    transition: all .5s ease-in-out;
}



@media only screen and (min-width: 600px) {
    #navArea .toggle_btn span {
        left: 18px;
    }
}

@media only screen and (min-width: 768px) {
    .fixed-top .logo {
        width: 130px;
    }
    .inner {
        width: calc(100% - 60px);
    }

    /* hamburger */
    #navArea {
        
    }

    .post-item {
        width: calc((100% / 2) - 1.5em);
    }
}

@media only screen and (min-width: 820px) {
    #navArea .toggle_btn span {
        left: 16px;
    }
}

@media only screen and (min-width: 1000px) {
    .inner {
        max-width: calc(100% - 160px);
        width: 1000px;
    }

    .post-itemList ul::before {
        content: '';
        order: 1;
        width: calc((100% / 2) - 1.5em);
    }
    .post-item {
        width: calc((100% / 2) - 1.5em);
    }
}

/*  --- 記事詳細ページ single-interview --- */

#post-single-interview{
    padding-top: 54px;
    background-color: #fbfaf4;
}

#post-single-interview .deco{
    margin-bottom: 0em;
}

/*----------------------
パンくずリスト
----------------------*/
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    font-size: 1.1rem;
    max-width: 1024px;
    margin: 1em auto 1em 0em;
}
.breadcrumb__list:not(:last-of-type)::after {
    content: ">";
    margin: 0 0.6em;
    color: #999;
}
.breadcrumb__list:not(:last-of-type) a {
    color: #8f8f8f;
}

/* 記事の中身 */
#post-single-interview h2{
    text-align: left;
    font-size: 1.8rem;
    position: relative;
    padding-left: 0.8em;
    margin: 1em 0;
}
#post-single-interview h2::before{
    content: '';
    position: absolute;
    top: 0%;
    left: 0;
    width: 5px;
    height: 100%;
    background-color: #FFD681;
}
#post-single-interview h3{
    text-align: left;
    font-size: 1.6rem;
    margin: 1em 0;
    padding-bottom: 0.2em;
    border-bottom: 2px solid #FFD681;
}
#post-single-interview h4{
    margin: 1em 0;
}
#post-single-interview strong{
    position: relative;
    padding-left: 1.5em;
    margin: 1em 0;
    line-height: 1.6;
}
#post-single-interview strong::before{
    content: '';
    position: absolute;
    top: 0.8em; 
    left: 0;
    width: 15px;
    height: 2px;
    background-color: #FFD681;
}
#post-single-interview p{
    padding: 1em 0;
}
#post-single-interview p.upper-section{
    border: 1px solid #8d8886;
    padding: 2em;
    margin: 0em 0 3em;
}

#post-single-interview .entry-content a{
    border-bottom: 1px dotted #938E8C;
}


#post-single-interview .entry-title{
    padding: 0.5em 0 0.5em;
    text-align: left;
}
#post-single-interview .entry-header{
    font-family: "Lora", serif;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 2em;
}
#post-single-interview .entry-header .post-date{
    text-align: center;
}
#post-single-interview .entry-header .post-category{
    position: relative;
    margin-left: 0.8em;
    padding: 0 0 0 1em;
}
#post-single-interview .entry-header .post-category::before{
    content: '|';
    position: absolute;
    top: 0%;
    left: 0;
}
#post-single-interview .post-thumbnail{
    margin-bottom: 2em;
}
.wp-block-paragraph {
    white-space: pre-line;
}

#post-single-interview .wp-block-embed .responsive-video-wrap {
    position: static;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}


/* 前・次の記事へ */
.post-navigation{
    display: flex;
    justify-content: space-between;
    margin-top: 3em;
}


/* カテゴリー */
.site-side{
    margin-top: 8em;
}
.category{
    font-family: "Lora", serif;
}


/* --- footer --- */
footer{
    padding: 3em 0;
    background-color: #938E8C;
    font-size: 1.2rem;
}
.footer-area .logo{
    width: 180px;
    margin: 0 auto;
}
.footer-list li a,
.foot ul a{
    color: #fff;
}

.right{
    margin-top: 3em;
}
.footer-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1em;
}
.footer-list::before,
.footer-list::after{
    content: '';
    order: 1;
    width: calc((100% / 2) - 0.2em);
}
.footer-list li{
    width: calc((100% / 2) - 1em);
}
.foot{
    margin-top: 3em;
}
.foot ul{
    display: flex;
    justify-content: center;
    gap: 2em;
}
.foot ul li{
    position: relative;
}
.foot ul li:not(:last-child)::after{
    content: '';
    position: absolute;
    top: 50%;
    right: -1em;
    width: 1px;
    height: 10px;
    background-color: #fff;
    transform: translateY(-50%);
}

footer small{
    margin-top: 3em;
    color: #fff;
}



@media only screen and (min-width: 769px) {
    .main .inner{
        width: 1000px;
    }
    .inner-area{
        display: flex;
        flex-wrap: nowrap;
        gap: 3em;
    }
    .site-main{
        width: 70%;
    }

    /* カテゴリー */
    .site-side{
        width: 30%;
        margin-top: 0em;
        position: -webkit-sticky;
        position: sticky;
        top: 5em;
    }

    /* --- footer --- */
    .footer-area{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 2em;
    }
    .footer-area .logo{
        width: 200px;
    }
    .footer-area .right{
        width: 70%;
    }
    .right{
        margin-top: 0em;
    }
    .right div a{
        display: block;
    }
    .footer-list{
        gap: 0.2em;
        line-height: 2;
    }
    .footer-list::before,
    .footer-list::after{
        width: calc((100% / 5) - 0.2em);
    }
    .footer-list li{
        width: calc((100% / 5) - 0.2em);
    }

    
    
}
@media only screen and (min-width: 1000px) {
    /* header */
    .fixed-top{
        background-color: #fbfaf4;
    }
    .logo-area {
        width: 15%;
    }
    #navArea{
        display: none;
    }
    .req-nav-wrap{
        display: flex;
        flex-direction: row-reverse;
        gap: 1.5em;
    }
    .fixed-top .nav-wrap{
        opacity: 1;
        background: unset;
        display: flex;
        gap: 2em;
        padding: 0;
        pointer-events: auto;
        position: unset;
        height: auto;
        font-size: 1.2rem;
        transform: none;
    }
    .fixed-top .nav-wrap .nav-box{
        font-weight: normal;
    }
}