/* ---------- font ---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

:root{
    --font-title: YuMincho,"Noto Serif JP",serif;
    
}
.catch > div, #top_contents .con_title span > div, .intro_title span > div {
    font-family: var(--font-title);
    font-weight: 600;
}


/* ---------- color ---------- */
#main_nav {
    background-color:  var(--color2);
    line-height: 1.2;
}
.fv_box h1 {
    max-width: 807px;
    transform: rotate(-7deg) scale(1.15);
    pointer-events: none;
}
.catch > div{
    background: linear-gradient(transparent 66%, #959595a6 50%);
    display: inline;
    font-size: 20px;
    line-height: 1.8;
}



/* ---------- all ---------- */
#wrap{
    min-width: 1280px;
    overflow: hidden;
}
#header:not(.top){
        padding: 20px 0;
}
#header:not(.top) h1 img{
    max-width: 166px;
}
.logo img{
    max-width: 150px;
}
#loader .logo img{
     max-width: 100%;
}


/* ---------- top ---------- */
main{
    position: relative;
    padding-bottom: 100px;
}
#intro_h {
    position: relative;
    max-width: 100%;
    padding: 0;
}
.intro_title {
    background: url(../img/item1.png) center top 24px / 90% no-repeat;
    padding-top: 8%;
}
main::before, #intro_h::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 9vw;
    background-image: url(../img/bg_item1.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top left;
    bottom: -1px;
    left: 0;
    z-index: 1;
}
.video{
    width: 100%!important;
    height: auto!important;
}


#intro_h::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 9vw;
    background-image: url(../img/bg_item1.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top left;
    top: -1px;
    left: 0;
    z-index: 2;
    transform: scale(-1, -1);
}
#intro_h .intro_h_box{
    padding: 10% 10% 11%;
}
#intro_h .intro_h_box::before {
    content: '';
    display: inline-block;
    width: 40%;
    max-width: 700px;
    height: 26vw;
    background-image: url(../img/item2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -7%;
    bottom: -9%;
    z-index: 2;
}

#top_contents {
    background: var(--color2);
    position: relative;
    margin-bottom: 0;
    padding-bottom: 5%;
}
#top_contents .con1{
    background: none;
}

#top_gallery{
    position: relative;
    padding-top: 14%;
}
#top_gallery::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 9vw;
    background-image: url(../img/bg_item1.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top left;
    top: -1px;
    left: 0;
    z-index: 2;
    transform: scale(-1, -1);
}
#top_gallery::before {
    content: '';
    display: inline-block;
    width: 40%;
    max-width: 700px;
    height: 20vw;
    background-image: url(../img/item3.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: -7%;
    top: -6%;
    z-index: 3;
}

.intro_title span {
    max-height: 100%;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    margin-bottom: 41px;
}
#top_contents .con_title span > div, .intro_title span > div {
    font-size: clamp(25px, 2.8vw, 45px);
    border-bottom: 2px solid;
    display: inline;
    line-height: 1.2;
    color: var(--color1);
}
.con_no {
    color: var(--color1);
    font-weight: bold;
}
.cms_2-g .box_wrap {
    box-shadow: rgb(0 0 0 / 0%) 0px 5px 15px 0px;
    border: 2px solid var(--color1);
}
.cms_2-g {
        margin-bottom: 50px;
}


/* ---------- under ---------- */





/* ---------- tablet ---------- */
@media screen and (max-width: 768px){
main{padding-bottom: 66px;}
#wrap{
    min-width: 100%;
}
#header:not(.top) h1 img {
    max-width: 144px;
}
#header:not(.top) {
    padding: 13px 0;
}

.top_video, .top_header #main_img, #video {
    height: 64vw;
}
.fv_box h1 {
    max-width: 308px;
}
#intro_h::after{
    display: none;
}
#intro_h .intro_h_box::before {
    width: 46%;
    max-width: 700px;
    height: 26vw;
    right: -7%;
    bottom: -18%;
}

#top_contents .con_img {
    height: 280px;
}
#top_contents .con_img {
    height: 280px;
}
#top_contents {
    padding-bottom: 20%;
}

#top_gallery::before {
    width: 59%;
    max-width: 700px;
    height: 27vw;
    left: -7%;
    top: -14%;
}
#top_gallery {
    margin-bottom: 100px;
}
#footer_links{
    display: block;
    width: 100%!important;
}
#footer_links .flex_top-right {
    justify-content: center;
}
#page_title{
    background: url( "../img/page_bg.jpg" ) center / cover no-repeat;
}

}

/* ---------- mobile ---------- */
@media screen and (max-width: 667px){
.catch > div{
    font-size: 17px;
    letter-spacing: 0;
}
#top_contents .con_title span > div, .intro_title span > div {
    letter-spacing: 2px;
}
#intro_h .intro_h_box {
    padding: 10% 10% 26%;
}
#intro_h .intro_h_box::before {
    display: none;
}
#top_contents::before {
    content: '';
    display: inline-block;
    width: 68%;
    max-width: 700px;
    height: 47vw;
    background-image: url(../img/item2.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -7%;
    top: -5%;
    z-index: 2;
}
.intro_title {
    background: url(../img/item1.png) center top 0px / 100% no-repeat;
    padding-top: 8%;
}

#top_gallery {
    padding-top: 19%;
    margin-bottom: 50px;
}
#top_gallery::before {
    width: 72%;
    height: 41vw;
    left: -7%;
    top: -10%;
}

#top_cms{
    margin-bottom: 50px;
}

#footer_links .flex_top-right li {
    margin-bottom: 10px;
    width: 80%;
    text-align: center;
}
footer #footer #footer_links li::after {
    display: none;
}

.top_cms_title p {
    letter-spacing: 3px;
}

.cms_2-g {
    margin-bottom: -37px;
}

#page_title .font_28_sp {
    font-size: 23px;
    letter-spacing: 1px;
}
#cms .cate_wrap {
    margin-bottom: 30px;
}

}