﻿/* all page */
/*fonts*/
.overlay .overlay-nav .en, .top_cms_box .cms_title h3 {
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #333;text-decoration: underline;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
.txt_color1, .hvr_txt_color1:hover{color: #676767;} /* メインカラー */
.txt_color2, .hvr_txt_color2:hover{color: #676767;} /* サブカラー */
.txt_color3, .hvr_txt_color3:hover{color: #D8C593;} /* アクセントカラー1 */
.txt_color4, .hvr_txt_color4:hover{color: #D8C593;} /* アクセントカラー2 */
.txt_color5, .hvr_txt_color5:hover{color: #fff;} /* アクセントカラー2 */

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: #9d9d9d;} /* メインカラー */
.bg_color2, .hvr_bg_color2:hover{background-color: #676767;} /* サブカラー */
.bg_color3, .hvr_bg_color3:hover{background-color: #D8C593;} /* アクセントカラー1 */
.bg_color4, .hvr_bg_color4:hover{background-color: #D8C593;} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: #9d9d9d;}
.border_color2, .hvr_border_color2:hover{border-color: #676767;}
.border_color3, .hvr_border_color3:hover{border-color: #D8C593;}
.border_color4, .hvr_border_color4:hover{border-color: #D8C593;}

.blur {
    background: rgba(255,255,255,0.75);
}
.txt_white, .hvr_txt_white:hover {
    color: #333;
}
.more .more_item:before {
    background-color: #d8c593;
}
.more .more_item:hover{
    border-color: #D8C593;
}
.more .more_item:hover .icon-right.after:before {
    color: black;
}
.more .more_item:hover .icon-right.after:after {
    color: black;
}
.more .more_item:after{
    display: none;
}
#pc_nav li a::after, #footer_nav li a::after {
    background: #d8c593;
}


/* header */
header.scr_header {
    background-color: rgba(255,255,255,0.8)!important;
}
.menu-trigger-bar {
    background-color: black;
}
.menu-trigger-bar:before {
    background-color: #D8C593;
}

/* top ----------------*/
/* main img */
#main_img:before {
    background-color: rgba(255,255,255,0.25);
    z-index: 1;
}
#main_img .sns_links {
    z-index: 3;
    width: 200px;
    max-width: 300px;
}
.catch{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    color: #fff;
    font-size: calc(1rem + 32px);
    background: rgba(51,51,51,0.6);
    padding: 3%;
    font-weight: bold;
    mix-blend-mode: darken;
}
#main_img .banner{
    top: calc(50% + 90px);
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
}
#main_img .banner a{
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
}
#main_img .banner a:hover{
    background-color: #fff;
    color: #333;
}

/* main */
.top_title h2 > span:before {
    background-color: #333;
    width: 2px;
}

/* intro */
.intro_right .intro_title{
    position: relative;
}
.intro_right .intro_title::before{
    content: "";
    background-color: #d8c593;
    width: 50px;
    height: 2px;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

/* contents */
.contents_title_img {
    margin: -20px auto;
}
.con1_img{
    max-width: 250px;
}
#contents .con_title {
    position: relative;
    z-index: 1;
    font-size: 60px;
}

/* topcms */
#top_cms .top_cms_box{
    background-color: #676767;
    border-color: #676767;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.cms_6-b .cate_box .box_txt1{
    color: #fff;
}
.cms_5-c .box_title1 {
    border-color: rgba(0,0,0,0.15);
    color: #fff;
}
.cms_5-c .box_txt1::before, .cms_5-c .box_txt1{
    color: rgba(255,255,255,0.9);
}

/* footer */
.info_btn_wrap a{
    color: #D8C593;
    background-color: #fff;
    border: 1px solid #fff;
}
.info_btn_wrap a:hover{
    color: #fff;
    background-color: #D8C593;
    border: 1px solid #fff;
}
#copyright, #copyright a{
    color: #fff;
}
.scroll_d > span {
    background-color: rgba(51,51,51,0.5);
}


/* under page */
#page_title_img:before {
    background-color: rgba(255,255,255,0.35);
}
.cate_list li a{
    color: #fff;
}
.cate_list li a:hover{
    color: #333;
}
#page_title .en:before {
    background-color: #9e9e9e;
    width: 2px;
}
.page_container .con_box{
    background: rgba(255,255,255,0.8);
}
.page .cate{
    text-align: center;
}
.page .cate p, .page .cate .box_wrap{
    text-align: left;
}
.page .cate_title{
    border: none;
    background: none;
    position: relative;
}
.page .cate_title::before{
    content: "";
    background-color: #d8c593;
    width: 50px;
    height: 2px;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

/* cms1 */

/* cms2 */
#cms_2-a .cate {
    margin-bottom: 100px;
}

/* cms3 */

/* cms4 */
#cms_6-b .cate_box .box_txt1{
    color: #fff;
}

/* cms5 */

/* page7 */

/* page8 */

/* page9 */

/* page10 */
#page10 .left, #page10 .right{
    border-color: #333;
}


/* ---------- 1450px ---------- */
@media screen and (max-width: 1450px){
    .catch {font-size: calc(1rem + 25px);}
}
/* ---------- 1240px ---------- */
@media screen and (max-width: 1240px){
    .catch {font-size: calc(1rem + 21px);}
}
/* ---------- 1125px ---------- */
@media screen and (max-width: 1125px){
    .catch {font-size: calc(1rem + 11px);}
    #main_img .banner {top: calc(50% + 65px);}
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
    #loading_logo {
        max-width: 200px;
    }
    #main_img .sns_links {
        width: 150px;
        max-width: 200px;
        left: 20px;
    }
    .catch {
        font-size: calc(1rem + 10px);
        padding: 30px 10px;
    }
    #main_img .banner {
        top: calc(50% + 50px);
    }
    #main_img .banner a {
        padding: 5px 20px;
    }
    .con1_img {
        max-width: 180px;
    }
    .map {
        height: 450px;
    }
    
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
    header {
        background-color: rgba(255,255,255,0.5)!important;
    }
    header.scr_header {
        background-color: rgba(255,255,255,0.8)!important;
    }
    #header #logo{
        max-width: 180px;
    }
    .menu-trigger, .close-trigger {
        right: 5px;
    }
    #loading_logo {
        max-width: 150px;
    }
    #video {
        height: 34vh;
    }
    #main_img .sns_links {
        width: 120px;
        left: 0;
    }
    .catch {
        font-size: calc(1rem + 2px);
        padding: 15px 5px;
        letter-spacing: 0.5px;
        left: 30%;
        transform: translate(-20%,-50%);
    }
    #main_img .banner {
        top: calc(50% + 35px);
    }
    #main_img .banner a {
        padding: 5px 0;
    }
    .con1_img {
        max-width: 140px;
        margin: -15px auto;
    }
    #contents .con_title {
        font-size: 40px;
    }
    #contents_modal .modal_title2{
        letter-spacing: 0.5px;
        font-size: 17px;
    }
    .map {
        height: 300px;
    }
    #page_title .en {
        left: 3%;
    }
    #header{
        padding-right: 40px;
    }
    
}

/*20220621公開後修正*/
/*fonts*/
.liana, .more .more_item, #main_img .scr, #page_title_img .scr, footer .scr, #page10 .con_box ul li a {
    font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
        font-weight: bold;
}
header #header > div:first-child{
    align-items: flex-start;
    padding-top: 10px;
    transition: all 0.5s;
}
header.scr_header #header > div:first-child{
    align-items: center;
    padding-top: 0;
}
.intro_right .intro_title::before {
    width: 280px;
}
#page-top a{
    margin-right: -45px;
}
#page-top a .scroll_d {
    margin-right: 30px;
}
footer .scr {
    margin-top: 60px;
    font-size: 30px;
    white-space: nowrap;
}
.info_btn_wrap a {
    color: #ffffff;
    background-color: #9d9d9d;
    border: 1px solid #9d9d9d;
}
#page_title .en:before{
    display: none;
}
#page_title .jp {
    display: block;
    font-size: 18px;
    top: -5px;
    left: 15%;
    position: relative;
    font-weight: bold;
}
#page_title .jp span {
    transform: none;
    display: inline-block;
    line-height: 3;
}
.page .cate_title::before {
    width: 230px;
}
#page3 .banner a{
    color: #fff;
}
#page3 .banner a:hover{
    color: #676767;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#contents .con_title {font-size: 30px;}
#page_title .jp {
    left: 20%;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#header {padding-right: 55px;}
#page-top a {margin-right: -35px;}
#page-top a .scroll_d {margin-right: 20px;}
footer .scr {
    margin-top: 45px;
    font-size: 22px;
}
#page_title .jp {
    font-size: 12px;
    left: 20%;
    letter-spacing: 10px;
}
}

/*20220704公開後修正*/
.overlay .overlay-nav ul.top a:after, .overlay .overlay-nav ul.middle a:after{display:none;}
footer .scroll {right: 17px;}
footer .scr {display: block;margin-right: -45px;margin-top: 75px;}
#page_title .en {left: 0;}
#page_title .jp {
    top: -50px;
    left: 0;
    padding-left: 50px;
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#page-top a .scroll_d {margin-right: 15px;}
footer .scr {font-size: 24px;margin-top: 60px;}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#page-top a {margin-right: -30px;}
footer .scroll {top: 305px;right: 0;}
footer .scr {font-size: 20px;margin-right: -40px;margin-top: 50px;}
#page-top a .scroll_d {margin-right: 20px;}
#page_title .jp {top: -30px;padding-left: 25px;}
}

/*20220722公開後修正*/
#footertxt span{max-width: 300px;font-size: 14px;}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
#logo2{margin-top: 10px;}
#logo2 img{max-width: 250px;}
#footertxt span{max-width: 250px;font-size: 12px;}

}



