@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');
.font1,body,.font_sans-seri{
font-family: "Fjalla One", 'Noto Sans JP',"游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif!important;
font-weight: normal;
}
.font_bold{font-weight: normal;}

/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
#top_blog .cate_box h3,.con_wrap{position: relative;}
/*リピートなし*/
.catch,#top_blog .cate_box h3:before,.con_wrap:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
/*
.catch{
background-image: url(./Dup/img/catch.png);
background-size: 100%;
width: clamp(400px,31vw,600px);
height: clamp(267px,20vw,400px);
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
mix-blend-mode: exclusion;
}
*/
#top_blog .cate_box h3:before{
background-color: white;
width: 30px;
height: 1px;
top:50%;
right: 0;
-ms-transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.con_wrap:before{
width: 80%;
height: 100%;
/*background-color: rgba(0,0,0,0.9);*/
background-color: rgba(200,200,200,0.8);
top: 0;
}
#still .con_wrap:before,#news .con_wrap:before{right: 0;}
#film .con_wrap:before{left: 0;}
/*--------------------------------
全体
--------------------------------*/
.rectangle2_img{
    position: relative;
	overflow: hidden;
}
.rectangle2_img img{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

#bg_video{
position: fixed;
top: 0;
left: 0;
}
#bg_video span{
width: 100%;
height: 100vh;
filter: blur(30px);
}

#bg_video iframe{
position: absolute;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

#noise{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 2;
opacity: 0.1;
mix-blend-mode: screen;
pointer-events: none;
}

#logo{mix-blend-mode: exclusion;}

.index .main_wrap{background-color: rgba(255,255,255,0.8);}
.bg_base{background-color: rgba(255,255,255,0.9);}
#footer{
height: 100%;
min-height: 88vh;
padding: 0 10%;
box-sizing: border-box;
}
#page_top{mix-blend-mode: exclusion;}

.fix_banner{
width: 350px;
position: fixed;
bottom: 20px;
right: 90px;
z-index: 1;
}
/* スマホ時真ん中へ */
@media  screen and (max-width: 667px){
.fix_banner{
width: 250px;
right: auto;
left: 50%;
-ms-transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
transform: translate(-50%,0);
}
}
/* =========== more_btn =========== */

.more_btn a{
  cursor: pointer;
  background-color: #000;
  width: 330px;
  height: 64px;
  line-height: 64px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.2);
}
.more_btn span {
  color: #fff;
  display: block;
  padding-left: 35px;
  text-transform: uppercase;
  font: bold 18px/66px Arial;
  transform: scaleX(0.6);
  letter-spacing: 3px;
  transform-origin: center left;
  transition: color 0.3s ease;
  position: relative;
  z-index: 1;
}
.more_btn em {
  position: absolute;
  height: 1px;
  background: #fff;
  width: 47%;
  right: 23px;
  top: 50%;
  transform: scaleX(0.25);
  transform-origin: center right;
  transition: all 0.3s ease;
  z-index: 1;
}
.more_btn a:before,
.more_btn a:after {
  content: '';
  background: #fff;
  height: 51%;
  width: 0;
  position: absolute;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.more_btn a:before {
  top: 0;
  left: 0;
  right: auto;
}
.more_btn a:after {
  bottom: 0;
  right: 0;
  left: auto;
}
.more_btn a:hover:before {
  width: 100%;
  right: 0;
  left: auto;
}
.more_btn a:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}
.more_btn a:hover span {
  color: #000;
}
.more_btn a:hover em {
  background: #000;
  transform: scaleX(1);
}



/* =========== animation =========== */
.zoom-random{
animation-duration: 1.2s;
animation-delay: .3s;
animation-timing-function: cubic-bezier(.215,.61,.355,1);
animation-fill-mode: forwards;
opacity: 0;
}
.zoom-random.scrollin:nth-child(4n+1){animation-name: zoom-in-left;}
.zoom-random.scrollin:nth-child(4n+2){animation-name: zoom-out-down;}
.zoom-random.scrollin:nth-child(4n+3){animation-name: zoom-in-up;}
.zoom-random.scrollin:nth-child(4n){animation-name: zoom-out-right;}

.fadein_up{
opacity : 0;
-webkit-transform: translateY(50px);
-ms-transform: translateY(50px);
transform: translateY(50px);
transition:transform 1.5s ease,opacity 2s ease; 
}
.fadein_up.scrollin{
opacity : 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}

@keyframes zoom-in-left {
    0% {
        opacity: 0;
        transform: translate3d(60px,0,0) scale(.6)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1)
    }
}
@keyframes zoom-out-down {
    0% {
        opacity: 0;
        transform: translate3d(0,-60px,0) scale(1.2)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1)
    }
}
@keyframes zoom-in-up {
    0% {
        opacity: 0;
        transform: translate3d(0,60px,0) scale(.6)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1)
    }
}
@keyframes zoom-out-right {
    0% {
        opacity: 0;
        transform: translate3d(-60px,0,0) scale(1.2)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0) scale(1)
    }
}
/* =========== lightbox =========== */
.lb-nav a.lb-prev{
width: 100px;
position: absolute;
left: -85px;
}
.lb-nav a.lb-next{
width: 100px;
position: absolute;
right: -85px;
}

@media  screen and (max-width: 667px){
.lb-nav a.lb-prev{
background-size: 35px;
width: 40px;
left: -42px;
}
.lb-nav a.lb-next{
background-size: 35px;
width: 40px;
right: -42px;
}
}

/* =========== modal =========== */
html.modalset{
	overflow: hidden;
}
.modal{
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
}
.modal-wrap{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 20px;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
.modal-wrap::-webkit-scrollbar {
	display: none;
}
.modal-wrap:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 100%;
}
.modal-bg{
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
}
.modal-box{
	width: 95%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.modal-box .inner{
	background: rgba(0,0,0,0.9);
	max-height: 90vh;
	box-sizing: border-box;
	overflow: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.modal-box .inner::-webkit-scrollbar {
	display:none;
}
.modal-box .inner > :first-child {
	margin-top: 0;
}
.modal-box .modal_txt_wrap{
    max-height: 73vh;
    overflow-y: auto;
    overflow-x: hidden;
}
.modal-box .modal_txt_wrap::-webkit-scrollbar{width: 2px;}
.modal-box .modal_txt_wrap::-webkit-scrollbar-track {background-color: #000;}
.modal-box .modal_txt_wrap::-webkit-scrollbar-thumb {background-color: #fff;}

.modal_txt span{display: block;word-wrap: break-word;}

.modal_item.over{position: relative;}
.modal_item.over:before{
content: "SCROLL 》";
font-size: 12px;
color: #fff;
position: absolute;
bottom: 3%;
left: 40%;
transform: rotate(90deg);
}

.modal-box .modal-close{
	cursor: pointer;
	position: absolute;
    top: 0;
    right: 0;
}
.modal-box .modal-close span{
	display: block;
	width: 50px;/*枠の大きさ*/
	height: 50px;/*枠の大きさ*/
	position: relative;
}

.modal-box .modal-close span::before, .modal-box .modal-close span::after{
	content: "";
	display: block;
	width: 100%;/*バツ線の長さ*/
	height: 2px;/*バツ線の太さ*/
	background: #fff;
	transform: rotate(45deg);
	transform-origin:0% 50%;
	position: absolute;
	top: calc(14% - 1px);
	left: 14%;
}

.modal-box .modal-close span::after{
	transform: rotate(-45deg);
	transform-origin:100% 50%;
	left: auto;
	right: 14%;
}
.modal-open{cursor: pointer;}
.modal_video{
position: relative;
width: calc(58.33333% - 50px)!important;
height: 27vw;
padding-left: 50px;
}
.modal_video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#contents_modal.still .modal_img{min-height: 82vh;}
@media  screen and (max-width: 768px){
    #contents_modal.still .modal_img{min-height: auto;}
}
@media  screen and (max-width: 667px){
    .modal_video{
        width: 100%!important;
        height: 40vw;
        padding-left: 0;
    }
    .modal-wrap{padding: 3vh 20px;}
    .modal-box{width: 100%;}
    .modal-box .inner{
        max-height: none;
        height: 94vh;
        padding: 21% 10%;
    }
    #contents_modal.still .modal-box .inner{padding: 0;}
    .modal_item.over:before{
        left: auto;
        right: -53px;
    }
    .modal-box .modal_txt_wrap{
        max-height: 51vh;
    }
}
/*--------------------------------
TOP
--------------------------------*/
#bg_video .text{
    position: absolute;
	top:50%;
	-ms-transform: translate(0,-50%) rotate(90deg);
	-webkit-transform: translate(0,-50%) rotate(90deg);
	transform: translate(0,-50%) rotate(90deg);
	mix-blend-mode: exclusion;
	z-index: 1;
}
#bg_video .text:first-of-type{right: -12px;}
#bg_video .text:last-of-type{left: -80px;}

.hover-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 450px;
  height: auto;
  z-index: -1;
  aspect-ratio: 0.9;
  transform-origin: center;
  background: gray;
  object-fit: cover;
  pointer-events: none;
}

.con_wrap > div{
    z-index: 1;
    position: relative;
    transform: translateY(-20px);
}
#news .con_wrap > div
#top_text .con_wrap > div{transform: translateY(0);}
#top_text .con_box img{
    transition: transform 0.5s;
    -ms-transform: translate(-50%,-50%) scale(1.0);
    -webkit-transform: translate(-50%,-50%) scale(1.0);
    transform: translate(-50%,-50%) scale(1.0);
}
#top_text .con_box:hover img{
    -ms-transform: translate(-50%,-50%) scale(1.2);
    -webkit-transform: translate(-50%,-50%) scale(1.2);
    transform: translate(-50%,-50%) scale(1.2);
}

#top_text .con_box:first-of-type{margin-top: 20vh;}
footer #map iframe{
    width: 100%;
    height: 100%;
}
/*--------------------------------
下層
--------------------------------*/
.page_title_box{transition: opacity 0.3s;}

#still .cms_wrap figure{
flex-grow: 1;
width: auto;
margin: 20px;
}
#still .cms_wrap img{
width: 100%;
height: 285px;
object-fit: cover;
}
.still .modal_img{margin-bottom: 1%;}
.still .box_img1{
    width: 24.25%;
    margin-right: 1%;
    margin-bottom: 1%;
    box-sizing: border-box;
}
.still .box_img1:nth-of-type(4n){margin-right: 0;}

#film .cate_box{
    margin: 0;
    margin-bottom: 20px;
}
#film .cate_box:last-of-type{margin-bottom: 0;}

.page4 .modal-bg{background: rgba(0,0,0,0.9);}
.page4 .modal-box .inner{
    background: transparent;
    overflow: auto;
    max-height: none;
}
.page4 .modal_sub_img figure,.index .modal_sub_img figure{cursor: pointer;}
.page4 #cms_4-b .sub_cate{width: 32% !important;}
.page4 #cms_4-b .box_wrap{justify-content: space-between;}

/* 5-c QA削除 */
#cms_5-c .box_title1::before,#cms_5-c .box_txt1::before,
.cms_5-c .box_title1::before,.cms_5-c .box_txt1::before{
display: none;
}
#cms_5-c .box_title1,#cms_5-c .box_txt1,
.cms_5-c .box_title1,.cms_5-c .box_txt1{
padding-left: 0;
}

#cms_5-c #cate0 .cate_box,
#cms_5-c #cate0 .box_title1{position: relative;}
#cms_5-c #cate0 .cate_box{padding-left: 100px;}
#cms_5-c #cate0 .cate_box:before,
#cms_5-c #cate0 .box_title1:before,#cms_5-c #cate0 .box_title1:after{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}
#cms_5-c #cate0 .cate_box:before{
background-color: #000;
width: 1px;
height: calc(100% + 50px);
top: 13px;
left: 4px;
}
#cms_5-c #cate0 .cate_box:last-of-type:before{display: none;}
#cms_5-c #cate0 .box_title1:before{
background-color: #000;
width: 10px;
height: 10px;
border-radius: 50%;
top: 8px;
left: -100px;
}
#cms_5-c #cate0 .box_title1:after{
background-color: #000;
width: 90px;
height: 1px;
top: 13px;
left: -100px;
}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){
    #logo{
        width: 120px;
        top: 25px;
        left: 30px;
    }
    #footer{
        min-height: auto;
        padding: 0;
    }
    #footer .left{padding: 0 10%;}
    #main_img{height: 100vh;}
    #still .cms_wrap figure{margin: 10px;}
    #still .cms_wrap img{height: 160px;}
    #top_text .con_wrap > div{transform: translateY(50px);}
    #top_text .con_box:first-of-type{
        margin-top: 0;
        margin-left: 0;
    }
    #top_text .con_box:last-of-type{
        margin-left: auto;
        margin-right: 0;
    }
    
    .page4 #cms_4-b .sub_cate{width: 48% !important;}
    #cms_4-b .cate_box{width: 48%!important;margin-bottom: 2%;}
}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){
    #logo{
        width: 100px;
        top: 10px;
        left: 10px;
    }
    /*
    .catch{
        width: 70vw;
        height: 45vw;
    }
    */
    footer {padding-bottom: 0!important;}
    #page_top{right: 8px;}
    #page_top a{padding-right: 25px;}
    #bg_video .text:first-of-type{right: -40px;}
    #bg_video .text:last-of-type{left: -105px;}
    #page_title{padding-bottom: 60px;}
    #still .cms_wrap figure{
        margin: 5px;
        flex-grow: 0;
        display: inline-block;
    }
    #still .cms_wrap img{
        width: auto;
        height: 80px;
        display: inline-block;
    }
    .page4 #cms_4-b .sub_cate,
    #cms_4-b .cate_box{width: 100%!important;}
    #cms_5-c #cate0 .cate_box{padding-left: 50px;}
    #cms_5-c #cate0 .cate_box:before{
        height: calc(100% + 30px);
        top: 15px;
        left: 4px;
    }
    #cms_5-c #cate0 .box_title1:before{
        top: 15px;
        left: -50px;
    }
    #cms_5-c #cate0 .box_title1:after{
        width: 40px;
        top: 20px;
        left: -50px;
    }
}

/*IE*/
@media all and (-ms-high-contrast: none) {}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #333; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #333;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #fff;}
.bg_color2 .linkStyle{color: #333;}
.bg_color3 .linkStyle{color: #fff;}
.bg_color4 .linkStyle{color: #333;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #1a1a1a;}
.txt_black,.hvr_txt_black:hover{color: black;}
.txt_white,.hvr_txt_white:hover{color: white;}
.txt_red,.hvr_txt_red:hover{color: red;}
.txt_color1,.hvr_txt_color1:hover{color: #000000;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #333333;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #1A1A1A;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #ffffff;} /* アクセントカラー2 */

/* background-color */
.bg_white,.hvr_bg_white:hover{background-color: white;} /* 白背景 */
.bg_black,.hvr_bg_black:hover{background-color: black;} /* 黒背景 */
.bg_color1,.hvr_bg_color1:hover{background-color: #000000;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #333333;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #1A1A1A;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #ffffff;} /* アクセントカラー2 */
.bg_color_clear,.hvr_bg_color_clear:hover{background-color: transparent!important;}

/* border-color */
.border_white,.hvr_border_white:hover{border-color: white;}
.border_black,.hvr_border_black:hover{border-color: black;}
.border_color1,.hvr_border_color1:hover{border-color: #000000;}
.border_color2,.hvr_border_color2:hover{border-color: #333333;}
.border_color3,.hvr_border_color3:hover{border-color: #1A1A1A;}
.border_color4,.hvr_border_color4:hover{border-color: #ffffff;}