﻿/*--------------------------------
疑似要素にオブジェクト
--------------------------------*/
.top header,#main_img,#page_title{position: relative;}
/*リピートなし*/
.top header:before,#main_img:before,#main_img:after,#page_title:before{
content: "";
display: block;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
}

#main_img:before{
background-color: rgba(0,0,0,0.2);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
/*
#main_img:after{
background-image: url(./Dup/img/catch.png);
width: 600px;
height: 350px;
top:50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 2;
}
*/

.top header:before,#page_title:before{
background-image: url(./Dup/img/frame1.png);
background-size: 100%;
width: 100%;
height: 5vw;
bottom: -1vw;
left: 0;
z-index: 3;
}

/*--------------------------------
全体
--------------------------------*/
#loading .gauge{background-image: url(./Dup/img/bg5.jpg);transform: skewX(0deg)!important;}

#wrap.bg_color1{background-color: #f2f2f2;}
#header{height: 200px;}
header h1{max-width: 300px;width: 100%;height: auto;}
header h1 img.width_auto{max-width: 300px;width: 100%!important;height: auto;}
.menu_stick span:last-of-type{
font-size: 11px;
margin-top: 5px;
}
header .menu_stick.stick_trans span:last-of-type{opacity: 0;}
#footer .con_img figure.opacity03 {opacity: 0.7;}
#pc_nav{display: none;}
#sp_nav .bg_color1{
background-image: url(./Dup/img/bg5.jpg);
background-size: cover;
}
.footer_logo{
max-width: 300px;
}
/*--------------------------------
TOP
--------------------------------*/
#main_img .catch{
width: 70%;
z-index: 2;
text-shadow:
0 0 10px rgba(255,255,255,1),
0 0 20px rgba(255,255,255,1),
0 0 40px rgba(255,255,255,0.9),
0 0 50px rgba(255,255,255,0.8),
0 0 60px rgba(255,255,255,0.7),
0 0 70px rgba(255,255,255,0.6);
}

#contents0 .posi_abs{
top: 0;
left: 0;
}
#contents0 .con_box_wrap{margin-left: 58%;}

#contents2, #contents3, #contents2 .con_box, #contents3 .con_box{
padding: 5%;
min-height: auto;
}
#contents2,#contents3{min-height: 50vh;}
#contents2:before{
background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0));
background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0));
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0));
display:block;
content: "";
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#contents3:before{
background: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0));
background: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0));
background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0));
display:block;
content: "";
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
#contents2 .con_box,#contents3 .con_box{
background: -moz-rgba(25,25,25,0.9);
background: -webkit-rgba(25,25,25,0.9);
background: rgba(25,25,25,0.9);
z-index: 1;
}
#contents2 .right, #contents3 .left{min-height: 80vh;}
#contents2 .right .con_txt, #contents3 .left .con_txt{vertical-align: middle;}

#top_cms{
background-image: url(./Dup/img/bg4.jpg);
background-attachment: fixed;
background-size: cover;
}

.cms_2-c .cate_box{
background: rgba(25,25,25,0.9);
padding: 20px;
}

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: 90%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.modal-box:before{
	content: "";
	display: block;
	background-color: #fff;
	box-sizing: border-box;
	width: 100%;
	height: 10%;
	position: absolute;
	bottom: 0;
	left: 50%;
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	transform: translate(-50%,0);
	z-index: 1;
}
.modal-box .inner{
	background: #fff;
	max-height: 500px;
    overflow: auto;
	-ms-overflow-style: none;
}
.modal-box .inner::-webkit-scrollbar {
	display:none;
}
.modal-box .inner > :first-child {
	margin-top: 0;
}

.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: #000;
	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 > span{cursor: pointer;position: relative;}
.modal-open > span:before,.modal-open > span:after{
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
transition: 0.3s;
}
.modal-open > span:before{
border-top: solid 1px #fff;
border-right: solid 1px #fff;
top: -0.5px;
right: -0.5px;
}
.modal-open > span::after{
border-bottom: solid 1px #fff;
border-left: solid 1px #fff;
bottom: -0.5px;
left: -0.5px;
}
.modal-open > span:hover{background-color: rgba(255,255,255,0.1);}
.modal-open > span:hover:before,.modal-open > span:hover:after{width: 0;}


.modal_title_wrap{
	top: 0;
	left: 0;
}
.modal_title1 span{
	transform: rotate(90deg);
	display: block;
	line-height: 1;
}
/*--------------------------------
下層
--------------------------------*/
#page_title img.opacity02{opacity: 0.7;}
#under_page .under_box{z-index: 3;}

#cms_5-c .box_title1,.cms_5-c .box_title1{border-color: rgba(255,255,255,0.3);}
#cms_5-c .box_txt1::before,.cms_5-c .box_txt1::before{color: rgba(255,255,255,0.7);}

#under_page .info_box .d_flex:first-of-type {border-top: solid 1px #C8B487;}
#under_page .under_box.page9 .border_color2{border-color: rgba(255,255,255,0.3);}

/*タブレット用（768px以下）*/
@media  screen and (max-width: 768px){

.top header:before, #page_title:before{background-image: url(./Dup/img/frame2.png);height: 11vw;bottom: -1px;}
#contents0 .posi_abs{height: 60vw!important;}
#contents0 .con_box_wrap{margin: 0 auto;}
#contents0 .con_box{top: -40px;}
#contents2, #contents3{min-height: auto;}
#contents2 .con_box, #contents3 .con_box{padding-top: 100px;}
#main_img .catch{width: 80%;}

#contents0,#contents1,#contents4,#top_info{background-color: #f2f2f2;}

/* 背景画像 */
#top_cms{background-image:none;background-color: transparent;}
#wrap.top::before {
content: "";
display: block;
background-image: url(./Dup/img/bg4.jpg);
min-width: 100vw;
min-height: 100vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 0;
}

}

/*スマホ用（667px以下）*/
@media  screen and (max-width: 667px){

#header{height: 110px;}
header h1 img.width_auto{max-width: 170px;}
/*
#main_img:after{
width: 300px;
height: 175px;
}
*/

#main_img .catch{width: 90%;}

.modal-box:before{
height: 20px;
bottom: -20px;
}

.footer_logo{
max-width: 200px;
}

}

/*IE*/
@media all and (-ms-high-contrast: none) {

.contact_tel a{padding-bottom: 24px;}
#tel_txt h3{padding-bottom: 0;}
#tel_txt p{padding-bottom: 15px;}

}




/*--------------------------------
自動リンク
--------------------------------*/
/* color */
.linkStyle{color: #C8B487; text-decoration: underline;}
.txt_color_nomal .linkStyle{color: #C8B487;}
.txt_white .linkStyle{color: white;}
.txt_red .linkStyle{color: red;}
.bg_color1 .linkStyle{color: #C8B487;}
.bg_color2 .linkStyle{color: #8C6239;}
.bg_color3 .linkStyle{color: #F2F2F2;}
.bg_color4 .linkStyle{color: #1A1A1A;}

/*IEのみ*/
@media all and (-ms-high-contrast: none) {
.linkStyle{display: inline-block;}
}

/*--------------------------------
カラー
--------------------------------*/
body,.txt_color_nomal,.hvr_txt_color_nomal:hover{color: #333333;}
.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: #8C6239;} /* メインカラー */
.txt_color2,.hvr_txt_color2:hover{color: #C8B487;} /* サブカラー */
.txt_color3,.hvr_txt_color3:hover{color: #1A1A1A;} /* アクセントカラー1 */
.txt_color4,.hvr_txt_color4:hover{color: #F2F2F2;} /* アクセントカラー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: #8C6239;} /* メインカラー */
.bg_color2,.hvr_bg_color2:hover{background-color: #C8B487;} /* サブカラー */
.bg_color3,.hvr_bg_color3:hover{background-color: #1A1A1A;} /* アクセントカラー1 */
.bg_color4,.hvr_bg_color4:hover{background-color: #F2F2F2;} /* アクセントカラー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: #8C6239;}
.border_color2,.hvr_border_color2:hover{border-color: #C8B487;}
.border_color3,.hvr_border_color3:hover{border-color: #1A1A1A;}
.border_color4,.hvr_border_color4:hover{border-color: #F2F2F2;}