@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display&family=Zen+Old+Mincho:wght@400;700&display=swap');


/** font **/

:root{
    --font-jp: 'Zen Old Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
    --font-en: 'Noto Serif Display', 'Zen Old Mincho', "游明朝", "YuMincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "Sawarabi Mincho", "serif";
}
body, .font_sans-serif{
    font-family: var(--font-jp);
}
.font_en, .patrima, .hgs, .overlay .overlay-nav .en, #pc_nav, .more .more_item, #footer_nav_wrap, .date_box, .pager, a[href^="tel:"]{
    font-family: var(--font-en);
}

/** color **/

:root{
    --color1: #5B504D;
    --color2: #EDDCAE;
    --color3: #5E5E33;
    --color4: #E8D3BF;
    --black: #5B504D;
    --base: #7A706C
}

/** other **/

body{
    font-size: 14px;
    line-height: 2;
    letter-spacing: 2px;
}
h2, h3, h4, h5, h6{
    line-height: 1.5;
}

#loading #loading_text .progressbar-text{
    font-family: var(--font-en)!important;
}

.blur {
    background: linear-gradient(to bottom, rgba(91,80,77,0.2), rgba(122,112,108,0.9) 200px);
    backdrop-filter: none;
}
#wrap.page .blur{
    background: var(--base);
    position: relative;
}
#wrap.page .blur::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    top: -1px;
    left: 0;
    background-color: var(--base);
}

#loading #loading_text .progressbar-text{
    top: calc(50% + 200px);
}

header{
    border-bottom: none!important;
}
#header{
    padding: 20px;
    padding-right: 100px;
}
.menu-trigger, .close-trigger{
    top: 55%;
}
#logo img{
    max-width: 120px;
}
#pc_nav ul li{
    padding: 0 15px;
    letter-spacing: 3px;
}

#main_img:before{
    background-color: var(--color1);
    opacity: 0.2;
}
#main_img .catch{
    bottom: 200px;
    left: 5%;
    z-index: 1;
}
#main_img .catch::before{
    position: absolute;
    content: "";
    width: 300px;
    height: 80px;
    background-image: url(./Dup/img/img1.png);
    background-size: contain;
    background-repeat: no-repeat;
    top: -45px;
    left: -30px;
    transform: rotate(-8deg);
}
#main_img .catch .catch_1{
    font-size: 70px;
}

.overlay div.overlay-nav{
    padding-top: 50px;
    height: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.overlay div.overlay-nav::-webkit-scrollbar{
    display:none;
}
.overlay .overlay-nav .top li, .overlay .overlay-nav .middle li{
    margin-bottom: 10px;
}
.overlay .overlay-nav .top li a, .overlay .overlay-nav .middle li a{
    padding-bottom: 5px;
}
.overlay .overlay-nav .top li a span, .overlay .overlay-nav .middle li a span{
    display: block;
    line-height: 1.5;
}
.overlay .overlay-nav .top li a .br:before, .overlay .overlay-nav .middle li a .br:before{
    display: none;
}
.overlay .overlay-nav .top{
    margin-bottom: 30px;
}
.overlay .overlay-nav .top .jp{
    font-size: 12px;
}
.overlay ul.sns_links{
    margin: 30px 0;
}

.sns_links{
    max-width: inherit;
}
.sns_links li{
    width: 50px!important;
    height: 50px!important;
    margin-right: 0;
}
.sns_links li:not(:last-of-type){
    margin-right: 20px;
}
.sns_links li a{
    display: block;
    border: solid 1px #fff;
    padding: 10px;
    border-radius: 50%;
}
.sns_links li a img{
    display: block;
}

.top_title h2{
    top: 0!important;
    left: 0!important;
    right: auto!important;
    width: 100%;
    height: 100%;
    background-color: rgba(91,80,77,0.4);
}
.top_title h2::before{
    position: absolute;
    content: "";
    width: 1px;
    height: 200px;
    left: 0;
    right: 0;
    bottom: -50px;
    background-color: #fff;
    margin: auto;
}
.top_title h2 > span{
    padding-top: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
.top_title h2 > span:before{
    display: none;
}
.top_title .rotate_txt span {
    transform: none;
    display: inline;
    line-height: 1.5;
    letter-spacing: 5px;
    font-size: 80px;
}

#intro #intro_wrap{
    position: relative;
}
#intro #intro_wrap::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 70px;
    background-image: url(./Dup/img/bg_img.png);
    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 100%;
    background-repeat: repeat-x;
    animation: anime1 30s linear infinite;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
@keyframes anime1 {
    0% {
        background-position-x: 0
        }
    100% {
        background-position-x: -1200px
    }
}
#intro .intro_photo{
    z-index: 1;
}
#intro .intro_photo h2{
    display: none;
}
#intro .intro_img1{
    clip-path: polygon(70px 0%, 100% 0, 100% 100%, 0 100%, 0% 70px);
}
#intro .intro_img2{
    clip-path: polygon(100% 0, 100% calc(100% - 70px), calc(100% - 70px) 100%, 0 100%, 0 0);
}

#contents .con_box .con_photo{
    width: 55%!important;
    margin-bottom: 50px;
    z-index: 1;
}
#contents .con_box:nth-of-type(odd) .con_photo{
    clip-path: polygon(calc(100% - 70px) 0, 100% 70px, 100% 100%, 0 100%, 0 0);
}
#contents .con_box:nth-of-type(even) .con_photo{
    clip-path: polygon(70px 0, 100% 0, 100% 100%, 0 100%, 0 70px);
}
#contents .con_box .con_box_item{
    padding: 0;
    width: calc(45% + 50px)!important;
    border: solid 1px rgba(255,255,255,0.2);
    box-sizing: border-box;
    align-content: center;
    position: relative;
}
#contents .con_box:nth-of-type(odd) .con_box_item{
    margin-right: -50px;
}
#contents .con_box:nth-of-type(even) .con_box_item{
    margin-left: -50px;
}
#contents .con_box .con_box_item::before{
    position: absolute;
    content: "";
    width: 50px;
    height: 50px;
    border-bottom: solid 1px #fff;
    bottom: -1px;
    pointer-events: none;
}
#contents .con_box:nth-of-type(odd) .con_box_item::before{
    border-left: solid 1px #fff;
    left: -1px;
}
#contents .con_box:nth-of-type(even) .con_box_item::before{
    border-right: solid 1px #fff;
    right: -1px;
}
#contents .con_box .con_box_item::after {
    position: absolute;
    width: 100%;
    font-family: var(--font-en);
    font-size: 150px;
    left: 0;
    top: -50px;
    line-height: 100px;
    -webkit-text-stroke: 0.5px #fff;
    color: transparent;
    z-index: 1;
}
#contents .con_box:nth-of-type(1) .con_box_item::after{
    content: "01";
}
#contents .con_box:nth-of-type(2) .con_box_item::after{
    content: "02";
}
#contents .con_box:nth-of-type(3) .con_box_item::after{
    content: "03";
}

#top_cms .top_cms_box{
    border: none;
    padding: 0;
    padding-top: 30px;
    background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0.3));
    background-size: 40px 1px, 100% 1px;
    background-position: top left;
    background-repeat: no-repeat;
}
#top_cms .top_cms_box .cms_title h3{
    letter-spacing: 3px;
}

.icon-right.after:before{
    display: none;
}

#page_title_img:before{
    background-image: linear-gradient(to bottom, rgba(122,112,108,0.3), rgba(122,112,108,1))!important;
    background-color: transparent!important;
}
#page_title_img .page_img{
    z-index: -1;
}
#page_title .en{
    top: -100px;
    left: 50px;
}
#page_title .jp span{
    line-height: 2;
    font-size: 14px;
}

footer #footer_info{
    padding: 50px;
}
footer #footer_info #logo2{
    max-width: 200px;
    margin: 0 auto 50px;
}
footer .info_btn_wrap a:hover{
    opacity: 0.7;
}


/** tablet 780 **/
@media screen and (max-width: 768px){
#main_img .catch .catch_1 {
    font-size: 40px;
}
.top_title .rotate_txt span {
    font-size: 60px;
}
.top_title h2::before {
    height: 120px;
}
#contents #contents_wrap, #top_cms #top_cms_wrap{
    padding: 100px 5%;
}
#contents .con_box .con_box_item {
    width: calc(50% + 30px)!important;
}
#contents .con_box:nth-of-type(odd) .con_box_item {
    margin-right: -30px;
}
#contents .con_box:nth-of-type(even) .con_box_item {
    margin-left: -30px;
}
#contents .con_box .con_photo {
    width: 50%!important;
}
#contents .con_box .con_txt{
    padding: 0 60px;
}
#contents .con_box .con_box_item::after {
    font-size: 100px;
}
.more{
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}
#page_title .en{
    left: 30px;
}
footer #footer_info {
    padding: 30px;
}
}

/** mobile 750 **/
@media screen and (max-width: 667px){
#loading #loading_text .progressbar-text{
    top: calc(50% + 150px);
}
#loading_logo{
    max-width: 200px;
}
#header{
    padding: 15px;
}
.menu-trigger, .close-trigger{
    top: 60%;
}
.overlay .overlay-nav .top .jp{
    display: none;
}
.overlay .overlay-nav .top li a, .overlay .overlay-nav .middle li a{
    padding-bottom: 0;
}
#logo img {
    max-width: 70px;
}
#main_img .scr, #page_title_img .scr{
    font-size: 16px;
}
#main_img .catch{
    bottom: 100px;
}
#main_img .catch::before {
    width: 150px;
    height: 40px;
    top: -25px;
    left: -10px;
}
#main_img .catch .catch_1 {
    font-size: 30px;
}
.top_title .rotate_txt span {
    letter-spacing: 4px;
    font-size: 40px;
}
#intro #intro_wrap::before {
    bottom: 70px!important;
}
#intro .intro_img1{
    clip-path: polygon(50px 0%, 100% 0, 100% 100%, 0 100%, 0% 50px);
}
#intro .intro_img2{
    clip-path: polygon(100% 0, 100% calc(100% - 50px), calc(100% - 50px) 100%, 0 100%, 0 0);
}
#contents #contents_wrap{
    padding: 100px 0;
}
#contents .con_box .con_photo {
    width: 90%!important;
}
#contents .con_box .con_photo{
    margin-bottom: -30px;
}
#contents .con_box:nth-of-type(odd) .con_photo {
    margin-left: auto;
    clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0 50px);
}
#contents .con_box:nth-of-type(even) .con_photo {
    margin-right: auto;
    clip-path: polygon(calc(100% - 50px) 0, 100% 50px, 100% 100%, 0 100%, 0 0);
}
#contents .con_box .con_box_item {
    width: 90%!important;
    margin: 0!important;
    padding-top: 50px;
}
#contents .con_box .con_box_item::after {
    font-size: 80px;
    top: -20px;
}
#contents .con_box .con_txt {
    padding: 0 20px;
}
#top_cms .top_cms_box .cms_title{
    padding-left: 0;
}
#top_cms .top_cms_box .cms_title h3{
    letter-spacing: 2px;
    font-size: 40px;
}
#page_title .en{
    padding-left: 20px;
    letter-spacing: 2px;
    left: 10px;
}
#page_title .en:before{
    width: 2px;
}
#page_title .jp{
    padding-left: 20px;
    letter-spacing: 5px;
    position: static;
    display: block;
    margin-top: 10px;
}
#page_title .jp span{
    transform: none;
    display: inline;
    line-height: 1.5;
}
.cate_list li{
    margin-right: 0!important;
}
footer #footer_info {
    padding: 0;
}
footer #footer_info .info_txt{
    padding: 40px;
}
footer .scroll {
    right: -20px;
}
}