@charset "UTF-8";

/*==================================================================================================

       hero

===================================================================================================*/

.hero-wrap {
        position: relative;
        box-sizing: border-box;
        margin-top:80px;
        z-index: 0;
        }
        .hero-wrap:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left: 0;
        width:100%;
        height:100%;
        background: rgb(0 0 0 / .2);
        z-index: 0;
        }
        .hero-title {
        position: absolute;
        width:100%;
        top:50%;
        left:50%;
        translate:-50% -50%;
        color:#FFF;
        text-align: center;
        font-size:clamp(27px, 3.2vw, 50px);
        z-index: 2;
        }
        @media screen and (max-width:1024px) {
        .hero-wrap { margin-top:96px; }
        }
        @media screen and (max-width:767px) {
        .hero-wrap { margin-top:96px; }
        .hero-title { font-size:clamp(21px, 6vw, 50px); }
        }

/*==================================================================================================

       top-slider

===================================================================================================*/

.top-slider {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .slick-wrap.top-slick { margin-bottom:0; }

        .top-slick .slick-slide { margin:0 !important; }
        .top-slick:after { content: ""; display: block; }
        
        /* ***** 100vhの場合 *****          */
        .top-slick { height:calc(100vh - 80px); }
        .top-slick .slickslider-s figure { width: 100%; height:calc(100vh - 80px); }

        /* ***** 16:9の場合 *****
        .top-slick { height:auto; max-height:calc(100vh - 80px); }
        .top-slick .slickslider-s figure { width: 100%; height:0; padding-bottom:56.25%; }
        .slick-wrap.top-slick:after { padding-bottom:56.25%; }
          */
        .slick_01 { background: url("../images/img/top/slider_01.jpg") center center / cover; }
        .slick_02 { background: url("../images/img/top/slider_02.jpg") center center / cover; }
        .slick_03 { background: url("../images/img/top/slider_03.jpg") center center / cover; }

        @media screen and (max-width:1024px) {
        .top-slick { height:auto; }
        .top-slick .slickslider-s figure { height:0; padding-bottom:150%; }
        .slick-wrap.top-slick:after { padding-bottom:150%; }
        }

/*==================================================================================================

       背景

===================================================================================================*/

.border-box {
        border:2px solid #342B21;
        padding:6%;
        background: rgb(255 255 255 / .3);
        box-sizing: border-box;
        border-radius: 1px;
        }
        .border-box.gray { border:6px solid #DDD; }
        .border-box-m {
        border:1px solid rgb(50 51 52 / .5);
        padding:8% 10%;
        box-sizing: border-box;
        }
        .border-box-s {
        border:1px solid rgb(50 51 52 / .5);
        padding:8%;
        box-sizing: border-box;
        }

.after-bg {
        position: relative;
        z-index: 0;
        }
        .after-bg:after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        width:96%;
        height:100%;
        background: #FFF;
        opacity:.75;
        z-index: -1;
        }
        .after-bg.left:after { margin-right:4%; border-radius:0 50px 50px 0; }
        .after-bg.right:after { margin-left:4%; border-radius:50px 0 0 50px; }
        @media screen and (max-width:1680px) {
        .after-bg:after { width:98%; }
        .after-bg.left:after { margin-right:2%; }
        .after-bg.right:after { margin-left:2%; }
        }
        @media screen and (max-width:1550px) {
        .after-bg:after { width:calc(100% - 8px); }
        .after-bg.left:after { margin-right:8px; }
        .after-bg.right:after { margin-left:8px; }
        }
        @media screen and (max-width:1350px) {
        .after-bg:after { width:calc(100% - 3px); }
        .after-bg.left:after { margin-right:3px; }
        .after-bg.right:after { margin-left:3px; }
        }
        @media screen and (max-width:1024px) {
        .border-box  { padding:8%;  }
        .border-box-m { padding:2.5rem; }
        .border-box-s {  }
        
        }
        @media screen and (max-width:767px) {
        .border-box  { padding:12% 2rem;  }
        .border-box-m { padding:2rem; }
        .border-box-s {  }
        
        }

/*==================================================================================================

        タイトル / テキスト

===================================================================================================*/

.white { color:#FFF !important; }
.white .en { color:#FFF; }
.red { color:#B9151B;}
.green { color:#126512; }
    .green a { color:#126512; }


.mark {background:linear-gradient(transparent 60%, #f7ebbd 60%);}
.mark-w {background:linear-gradient(transparent 60%, rgb(144 131 55 / 1) 60%);}
.under-line { border-bottom:1px solid #FFF;}

.under-title {
        padding-bottom:.5rem;
        border-bottom:3px solid rgb(0 0 0 / .6);
        }
        .under-title-w {
        padding-bottom:.5rem;
        border-bottom:1px solid rgb(255 255 255 / .6);
        }

.dotted-title {
        padding-bottom:.35rem;
        border-bottom:3px dotted #707070;
        display:block;
        }
.short-lead {
        position: relative;
        display: inline-block;
        padding:0 4em 0 0;
        z-index: 0;
        }
        .short-lead:after {
        content:"";
        display: inline-block;
        position: absolute;
        bottom:.75em;
        right:0;
        width:3em;
        height:1px;
        background: #342B21;
        }

.lead {
        position: relative;
        width:100%;
        overflow: hidden;
        z-index: 0;
        }
        .lead:after {
        content:"";
        position: absolute;
        display: inline-block;
        bottom:.75em;
        width:100%;
        height:1px;
        background:rgb(50 51 52 / .3);
        margin-left:1rem;
        z-index: -1;
        }



/*==================================================================================================

       トップページ

===================================================================================================*/

        /*=================================================
                ABOUT
        ==================================================*/

        .about-img {
        width:100%;
        height:0;
        padding-bottom:420px;
        background: url("../images/img/top/img_01.jpg") left center / cover;
        }
        @media screen and (max-width:1024px) {
        .about-img { padding-bottom:60%; }
        }

        /*=================================================
                NEWS
        ==================================================*/

        .outer-left {
        padding-left:3.5vw;
        box-sizing: border-box;
        }
        .left-inner {
        position: relative;
        width:100%;
        max-width:calc(50vw + 700px);
        margin:0 0 0 auto;
        }
        .swiper {
        width: 100%;
        height: auto;
        padding-bottom:70px !important;
        }
        .swiper-slide {
        height:auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right:40px !important;
        }
        .news-section .swiper-slide {
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
        }
        .swiper-section {
        width:360px;
        box-sizing: border-box;
        }
        .swiper-text-wrap h4 { font-weight:500; }
        
        .news-section .swiper-button-prev,
        .news-section .swiper-button-next { top: auto; height: 30px; width: 30px; margin-top:0; }
        .news-section .swiper-button-prev::after,
        .news-section .swiper-button-next::after { content: ""; height: 30px; margin: auto; width: 30px; }
        .news-section .swiper-button-prev::after { background: url("swiper/prev.svg") center center / cover; }
        .news-section .swiper-button-next::after { background: url("swiper/next.svg") center center / cover; }
        .news-section .swiper-slide img { height: auto; width: 100%; }
        
        .news-section .swiper-button-next { left:45px; bottom:0; }
        .news-section .swiper-button-prev { left:0; bottom:0; }

        @media screen and (max-width:1024px) {
        .outer-left { padding-left:4.5vw; }
        .swiper-section { width: 360px; }
        }
        @media screen and (max-width:767px) {
        .outer-left { padding-left:7.5vw; }
        .swiper-section { width: 280px; }
        .news-section .swiper { padding-left:0px; margin-left:0px; padding-bottom:50px; }
        .news-section .swiper:after { display: none; }
        .swiper-slide { margin-right:20px !important; }
        }

        /*=================================================
                PROJECT
        ==================================================*/

        .category-list {
        display: block;
        position: relative;
        margin-bottom:.5em;
        }
        .category-list li {
        display: inline-block;
        position: relative;
        margin-right:2px;
        background: #483D8B;
        border-radius: 3px;
        line-height: 1;
        }
        .category-list li a {
        display: block;
        position: relative;
        width:100%;
        height:100%;
        padding:5px 10px;
        box-sizing: border-box;
        color:#FFF;
        font-size:14px;
        }
        .category-list li .category_box {
        display: block;
        position: relative;
        width:100%;
        height:100%;
        padding:5px 10px;
        box-sizing: border-box;
        color:#FFF;
        font-size:14px;
        }

/*==================================================================================================

       記事一覧　item box

===================================================================================================*/

        /*=================================================
                NEWS   item box
        ==================================================*/

        .news-item-box {
        box-sizing: border-box;
        height:100%;
        }
        .news-item-box a {
        display:block;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
        }
        .news-item-box .item-content {
        padding:1.25rem 0;
        box-sizing: border-box;
        }
        .news-item-box .item-title {
        position: relative;
        font-size:1rem;
        padding-bottom:.45rem;
        line-height:150%;
        }
        .news-item-box a .item-title:after {
        position:absolute;
        bottom:0;
        left:0;
        content:'';
        width:0;
        height:1px;
        background-color:#26313C;
        transition:.3s;
        }
        .news-item-box a:hover .item-title:after {
        width:100%;
        }
        .news-item-box .item-date {
        font-size:.75rem;
        line-height: 100%;
        padding-top:.5rem;
        z-index: 1;
        }
        .news-thumb {
        height:100%;
        }
        .news-thumb img {
        height:100%;
        width:100%;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        }
        @media only screen and (max-width:1024px) {
        .news-thumb img { height:auto; }
        }
        @media only screen and (max-width: 767px) {
        .news-item-box .item-content { padding:.75rem 0; }
        .news-item-box .item-title { padding-bottom:.25rem; }
        }

/*==================================================================================================

       投稿　Post

===================================================================================================*/

        .post-wrap {
        padding-bottom:12rem;
        }

        .post-title {
        line-height: 160%;
        padding-bottom: .5em;
        font-size:1.4rem;
        border-bottom:3px solid rgb(0 0 0 / .6);
        }
        .post-cat {
        text-align: right;
        }
        .post-date { font-size:.866666rem; padding:1rem 0 3rem; text-align: right; }


        .post-content {
            position: relative;
            padding-bottom: 3rem;
            }
            .post-content p { padding-bottom:1.75rem; }
            .post-content img { margin-bottom:1.75rem; text-align: center; }
            .post-content p img { margin-bottom:1.75rem; text-align: center; }
            .post-content p span { display: block; }
            .post-content p span.center-img { text-align: center; }
            .post-content h2 { padding:3rem 0 .5rem; margin:0 auto 1.5rem; font-size:1.25rem; line-height: 160%; font-weight:500; border-bottom:2px solid rgb(0 0 0 / .3); }
            .post-content h3 { padding:3rem 0 .5rem; margin:0 auto 1.5rem; font-size:1.125rem; line-height: 160%; font-weight:500; border-bottom:1px solid rgb(0 0 0 / .3); }
            .post-content h4 { padding:3rem 0 .5rem; margin:0 auto 1.5rem; font-size:1.075rem; line-height: 160%; font-weight:500; border-bottom:1px solid rgb(0 0 0 / .3); }
            .post-content h5 { padding:3rem 0 .5rem; margin:0 auto 1.5rem; font-size:1.075rem; line-height: 160%; font-weight:500; }
            .post-content a { font-weight:600; color:#184383; text-decoration: underline; }
            .post-content a:hover { color:#AAA;}
            .post-content p.more { padding-bottom:10px; }
            .post-content blockquote { padding: 2.5rem; border: 4px solid #CCC; background-color: #f7f7f7; line-height: 220%; margin-bottom:3rem; }
            .post-content blockquote p { padding-bottom:0; font-weight:400; }
            .post-content .post-image-box  { padding-bottom:3rem; }
            .post-content .post-image-box p { padding-bottom:0; }
            .post-content .post-image-box img { padding-bottom:0; }

        .post-footer {
        padding-top:2rem;
        padding-bottom:1rem;
        border-bottom:3px solid #3C3C3B;
        }
        .blog-list-cat {
        position: relative;
        line-height: 100%;
        padding-top:.5rem;
        }
        .blog-list-cat a {
        display: inline-block;
        padding:6px 8px;
        line-height: 1;
        background:#483D8B;
        color:#FFF;
        margin-right:2px;
        margin-bottom:2px;
        font-size:12px;
        border-radius: 6px;
        }
        .blog-list-cat .category_box {
        display: inline-block;
        padding:6px 8px;
        line-height: 1;
        background:#483D8B;
        color:#FFF;
        margin-right:2px;
        margin-bottom:2px;
        font-size:12px;
        border-radius: 6px;
        }



        @media screen and (max-width:1024px) {
        .post-content blockquote { padding: 2rem; border: 3px solid #CCC; line-height: 220%; }
        }
        @media screen and (max-width:767px) {
        .post-memo-wrap { padding:1.25rem 1.5rem; }
        .post-content blockquote { padding: 1.5rem; border: 2px solid #CCC; line-height: 200%; }
        }


/*==================================================================================================

       一覧　ページャー

===================================================================================================*/

        .pagination-wrap {
        position: relative;
        clear: both;
        width:100%;
        }
        .pagination-wrap ul {
        position: relative;
        text-align: center;
        list-style: none;
        }
        .pagination-wrap li {
        position: relative;
        margin-right: .3rem;
        margin-bottom: 5px;
        display:inline-block;
        }
        .pagination-wrap li a {
        display: block;
        color: #353535;
        padding: 12px 0;
        font-size:1rem;
        font-weight:700;
        line-height:1;
        text-align: center;
        width:40px;
        box-sizing: border-box;
        border-radius:4px;
        background-color: #FFF;
        border: 1px solid #bcb9ce;
        }
        .pagination-wrap li a:hover {
        background-color:rgb(72 61 139 / .1);
        border: 1px solid #483D8B;
        }
        .pagination-wrap li .current {
        display: block;
        color: #FFF;
        padding: 12px 0;
        font-size:1rem;
        line-height:1;
        text-align: center;
        width:40px;
        background-color: #483D8B;
        border: 1px solid #483D8B;
        text-decoration: none;
        border-radius:4px;
        }
        @media screen and (max-width:767px) {
        .pagination-wrap { padding-top:2rem;}
        .pagination-wrap li a { padding: 10px 0; width:40px; }
        .pagination-wrap li .current { padding: 10px 0; width:40px; }
        }

/*==================================================================================================

       投稿　ページャー

===================================================================================================*/

        .post-pager {
        padding:2em 0 1.5em;
        }
        .prev-pager,
        .next-pager,
        .all-pager {
        height:100%;
        line-height:135%;
        position: relative;
        }
        .prev-pager a {
        display: block;
        width:100%;
        height:100%;
        padding:1.75em 1.5em 1.75em 45px;
        box-sizing:border-box;
        color:#816C3F;
        text-align: left;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .prev-pager a:before {
        display: block;
        content: "";
        position: absolute;
        left:0;
        top:50%;
        margin-top:-1px;
        line-height:1;
        padding:0;
        background:#816C3F;
        width:30px;
        height:2px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .prev-pager a:hover {
        padding-left:55px;
        }
        .prev-pager a:hover:before {
        width:40px;
        }
        .next-pager a {
        display: block;
        width:100%;
        height:100%;
        padding:1.75em 45px 1.75em 1.5em;
        box-sizing:border-box;
        color:#816C3F;
        text-align: right;
        -webkit-transition: all 0.3s ease;
         transition: all 0.3s ease;
        }
        .next-pager a:before {
        display: block;
        content: "";
        position: absolute;
        right:0;
        top:50%;
        margin-top:-1px;
        line-height:1;
        padding:0;
        background: #816C3F;
        width:30px;
        height:2px;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        }
        .next-pager a:hover {
        padding-right:55px;
        }
        .next-pager a:hover:before {
        width:40px;
        }
        @media screen and (max-width:767px) {
        .prev-pager a { padding:1.75em 1.5em 1.75em 30px; }
        .prev-pager a:before { width:20px; }
        .prev-pager a:hover { padding-left:40px; }
        .prev-pager a:hover:before { width:30px; }
        .next-pager a { padding:1.75em 30px 1.75em 1.5em; }
        .next-pager a:before { width:20px; }
        .next-pager a:hover { padding-right:40px; }
        .next-pager a:hover:before { width:30px; }
        }

/*==================================================================================================

       カテゴリー・アーカイブ　サイドバー

===================================================================================================*/

        .cat-btn {
        position:relative;
        width:100%;
        max-width:300px;
        line-height: 1;
        }
        .cat-btn a {
        width:100%;
        height:46px;
        line-height:46px;
        text-align: center;
        font-weight:500;
        color:#FFF;
        background: #726F86;
        border-radius:23px;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1rem;
        white-space: nowrap;
        text-decoration:none !important;
        position: relative;
        z-index: 1;
        letter-spacing: 0em;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .cat-btn a:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:0;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgb(255 255 255 / .3);
        }
        .cat-btn a:hover {
        opacity:1;
        }
        .cat-btn a:hover:after {
        left: 0;
        width: 100%;
        }
        @media screen and (max-width:1024px) {
        .cat-btn a { height:42px; line-height:42px; }
        }
        @media screen and (max-width:767px) {
        .cat-btn a { height:40px; line-height:40px; }
        }

.cat-overlay,.archive-overlay {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0, 0.9);
        position:fixed;
        top: 0;
        left: 0;
        z-index: -10;
        opacity: 0;
        }
        .cat-overlay.open,.archive-overlay.open  {
        width: 100%;
        height: 100%;
        opacity: 1;
        z-index: 10001;
        cursor: pointer;
        }
        .cat-trigger,.archive-trigger {
        z-index:10100;
            }
        .cat-modal,.archive-modal {
        width: 250px;
        height: 100%;
        padding-top: 60px;
        background:#FFF;
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10010;
        transform: translate(250px);
        transition: all .4s;
        overflow-y: scroll;
        }
        .cat-modal.open,.archive-modal.open {
        transform: translateZ(0);
        }
.cat-outer {
        padding:0 10px 120px;
        }
        .cat-outer.desktop {
        padding:0 0 3rem;
        }
        .cat-outer h2 {
        font-size:1.06666rem;
        padding-bottom:1rem;
        }
        .cat-outer > ul {
        border-top: 1px solid rgba(0,0,0,.2);
        }
        .cat-outer li {
        width:100%;
        position:relative;
        text-align: center;
        }
        
        .cat-outer li a {
        position: relative;
        display: block;
        width:100%;
        padding:13px 10px;
        font-size:13px;
        text-align: left;
        line-height: 150%;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(0,0,0,.2);
        letter-spacing: 0.01em;
        -webkit-transition: all 0.3s ease;
                transition: all 0.3s ease;
        }
        .cat-outer li li a {
        padding-left:13px;
        }
        .cat-outer li li a:before {
        content:"-";
        display: inline-block;
        margin-right:.5em;
        color:#332F29;
        }
        .cat-outer li li li a:before {
        content:"- -";
        display: inline-block;
        margin-right:.5em;
        color:#332F29;
        }
        .cat-outer li a:hover {
        background:rgb(221 208 185 / .3);
        color:#332F29;
        }
        .cat-outer li a:hover span:after {
        width:100%;
        }
.cat-close,.archive-close {
        position:absolute;
        right:0;
        top:0;
        padding:0;
        width:100%;
        height:60px;
        text-align: center;
        font-size: 0px;
        letter-spacing: 0;
        box-sizing: border-box;
        pointer-events: auto;
        cursor:pointer;
        z-index:999999;
        }
        .cat-close span,.archive-close span { display: block; position: absolute; height: 1px; width:25px; background: #1F1F1F; border-radius:2px; left: 0; -webkit-transition: .35s ease-in-out;transition: .35s ease-in-out; }
        .cat-close span:nth-child(1),.archive-close span:nth-child(1) { top: 30px; left:20px; transform: rotate(315deg);}
        .cat-close span:nth-child(2),.archive-close span:nth-child(2) { top: 30px; left:20px; transform: rotate(-315deg);}