@charset "UTF-8";

/*-------------------------
__base_style
-------------------------*/
#wrap {overflow:hidden;}
/*#main{padding:108px auto 0!important;}*/

@media screen and (max-width: 960px) {
#main{padding:138px auto 0!important;}
.tab_none{display:none;}
}
@media screen and (max-width: 767px) {
#main{padding:55px auto 0!important;}
.sph_none{display:none;}
}

/*-------------------------ヘッダー-------------------------*/
#contents{margin-top:120px;}
.contents_title{margin-top:177px;}
#header{background-color:#ffffff;width:100%;padding:55px 20px 0;position:fixed;top:0;z-index:1000;border-bottom:1px solid #dddddd;box-sizing:border-box;}
#header .header_inner{max-width:1200px;margin:0 auto;position:relative;}
#header .header_inner .header_logo{height:57px;margin-bottom:10px;}
#header .header_inner .header_logo a{display: inline-block;height:100%;}
#header .header_inner .header_logo h1{display:inline-block;height:100%;}
#header .header_inner .header_logo img{height:100%;width:auto;}
#header #navi{padding:0 0 0 20px;}
#header #navi #dropmenu{display:flex;justify-content:center}
#header #navi #dropmenu li{display:block;position:relative;}
#header #navi ul#dropmenu > li{}
#header #navi ul#dropmenu > li a,
#header #navi ul#dropmenu > li > span{ padding: 20px 20px; box-sizing: border-box;display:block;white-space: nowrap;cursor:pointer;}
#header #navi #dropmenu > li > a {color:#000;text-decoration:none;display:block;font-size:1.4em;font-weight:700;-webkit-transition:.3s;-ms-transition:.3s;transition:.3s;white-space: nowrap;}
#header #navi #dropmenu > li > span {color:#000;text-decoration:none;display:block;font-size:1.4em;font-weight:700;-webkit-transition:.3s;-ms-transition:.3s;transition:.3s;}
#header #navi #dropmenu > li > a:hover {opacity:0.7;}
#header #navi #dropmenu li ul {margin:0;padding:1px 0 0 0;position:absolute;top:100%;left:calc((200px - 100%)/-2);z-index:99;width:100%;}
#header #navi #dropmenu li:hover ul {}
#header #navi #dropmenu li ul li{height:0;width:200px;background:#fafafa;overflow:hidden;-webkit-transition:.3s;-ms-transition:.3s;transition:.3s;}
#header #navi #dropmenu #li-navi4 ul{left:calc((300px - 100%)/-2);}/*a textが長いため*/
#header #navi #dropmenu #li-navi4 ul li{width:300px;}/*a textが長いため*/
#header #navi #dropmenu li:hover ul li{overflow:visible;height:54px;}
#header #navi #dropmenu li ul li:hover{background:#f2f2f2;}
#header #navi #dropmenu li ul li a {border:none!important;font-size:14px;line-height:54px;text-decoration:none;display:block;color:#000; padding: 0!important;transition:opacity 0.6s;opacity:0;}
#header #navi #dropmenu li ul li.lines2 a{line-height:22px;padding-top:5px!important;}/*2行にするとき*/
#header #navi #dropmenu li:hover ul li a {opacity:1;}
#header #navi #dropmenu li ul li a:hover {}
/*予約・お問い合わせボタン*/
#header .contact_b_list{position:absolute;top:-55px;right:0;}
#header .contact_b_list ul{display:flex;}
#header .contact_b_list ul li:not(:first-child){margin-left:10px;}
#header .contact_b_list ul li a{text-decoration:none;background:#db2020;box-sizing:border-box;padding:8px 15px;font-size:13px;font-weight:500;display:block;color:#FFF;}

@media screen and (min-width: 768px) {
#header .contact_b_list ul li a{transition:opacity 0.3s;}
#header .contact_b_list ul li a:hover{opacity:0.7;}
}

@media screen and (max-width: 1200px) {
#header #navi #dropmenu li#li-navi1 ul{left:-10px;}
#header #navi #dropmenu li:last-child ul{left:auto;right:100px;}
}

@media screen and (max-width: 960px) {
#contents{margin-top:150px;}
.contents_title{margin-top:177px;}
#header{padding:45px 20px 0;}
#header .header_inner .header_logo{float:none;margin-bottom:10px;}
#header #navi #dropmenu{justify-content:space-between;}
#header #navi ul#dropmenu > li{}
#header #navi ul#dropmenu > li a,
#header #navi ul#dropmenu > li > span{padding:25px 0px!important;}
#header #navi #dropmenu li:last-child ul{right:140px;}
/*予約・お問い合わせボタン*/
#header .contact_b_list{top:-45px;right:0;}
#header .contact_b_list ul li a{font-size:12px;}
}

@media screen and (max-width: 767px) {
#contents{margin-top:66px;}
.contents_title{margin-top:56px;}
#header{padding:15px 0;}
#navi{display:none;}
#header .header_inner{margin:0 10px;}
#header .header_inner .header_logo{float:left;height:25px;margin-bottom:0;}
/*予約・お問い合わせボタン*/
#header .contact_b_list{display:none;}
}

@media screen and (max-width: 374px) {
#header{ padding:18px 0;}
#header .header_inner .header_logo{ height:20px;}
}

/*-------------------------コンテンツタイトル-------------------------*/

#content{}

#content .contents_title{
	position:relative;
	text-align:center;
	width:100%;
	height:265px;
	padding-top:10px;
	box-sizing:border-box;}

.topic_path{clear:both;padding:0 0 20px;}
.topic_path ul{width:100%;text-align:left;}
.topic_path li{font-size:1.4em;line-height:1.4;font-weight:700;color:#000;vertical-align:top;display:inline-block;}
.topic_path li:before{content:">";color:#fff;font-weight:400;margin-left:5px;margin-right:5px;}
.topic_path li:first-child:before{content:"";margin:0;}
.topic_path li a{font-weight:400;color:#fff;text-decoration:underline;}
.topic_path li a:hover{text-decoration:none;}

#content .topic_path{
	width:980px;
	margin:0 auto;}

#content .topic_path{}

#content .topic_path ul li,
#content .topic_path ul li a{
	color:#fff;}

#content .contents_title h1{
	height:110px;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
   margin:auto auto;
   color:#fff;}

#content .contents_title h1 span.title_top{
	display:inline-block;
	border-bottom:1px solid #fff;
	padding-bottom:15px;
	height:50px;}

#content .contents_title h1 span.title_top img{
	height:100%;
	width:auto;}

#content .contents_title h1 span.title_bottom{
	display:block;
	padding-top:20px;
	font-size:1em;}

@media screen and (max-width: 960px) {

.topic_path{padding:0 20px 20px;}

#content .contents_title h1{
	height:80px;}

#content .contents_title{
	height:122px;}


#content .contents_title h1 span.title_top{
	height:40px;
	padding-bottom:10px;}

#content .contents_title h1 span.title_bottom{
	padding-top:10px;
	font-size:0.8em;}

}

@media screen and (max-width: 767px) {

#content .topic_path{
	display:none;}

#content .contents_title h1{
	height:60px;}

#content .contents_title{
	height:100px;}

#content .contents_title h1 span.title_top{
	height:30px;
	padding-bottom:5px;}

#content .contents_title h1 span.title_bottom{
	padding-top:5px;
	font-size:0.7em;}

}

/*-------------------------フッター-------------------------*/

#footer {}
.re_top{display:none;height:50px;width:50px;overflow:hidden;position:fixed;z-index:9999;right:15px;bottom:15px;}
.re_top a{display:block;}
.re_top a:hover img{margin-top:-50px;}

#finfo{
	width:100%;
	border-top:1px solid #ccc;
	/*margin-top:50px;*/}

#finfo .finfo_inner{
	max-width:980px;
	margin:0 auto;
	padding:60px 0 0;}

#finfo .finfo_inner .finfo_title{
	background-color:#282828;
	color:#fff;
	display:inline-block;
	font-size:1.2em;
	padding:30px 20px;
	box-sizing:border-box;
	margin-top:-50px;
	margin-bottom:55px;}

#finfo .finfo_inner .finfo_title span{
	display:block;
	width:185px;
	padding-bottom:10px;}

#finfo .finfo_inner .finfo_title span img{
	width:100%;
	height:auto;}

#finfo .finfo_inner ul{
	margin:0 auto;}

#finfo .finfo_inner ul li{

	margin-right:30px;
	margin-bottom:5px;
	height:70px;
	width:25%;
	width: calc((100% - 90px) / 4);
	width: -webkit-calc((100% - 90px) / 4);
	width: -moz-calc((100% - 90px) / 4);
	float:left;
	text-align:left;
	position:relative;
	
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;}

#finfo .finfo_inner ul li:hover{
	filter:alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;}

#finfo .finfo_inner ul li a{
	box-sizing:border-box;
	text-decoration:none;
	display:inline-block;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: center left 13px;
	color: #282828;
	transition: background-color .4s ease;
	padding:10px 13px;
	font-size:1.5em;}

#finfo .finfo_inner ul li img{
	width:50px;
	height:50px;
	position:absolute;
	top:11px;
	right:0px;}

@media screen and (min-width: 768px) {

#finfo .finfo_inner ul li:nth-child(4n){
	margin-right:0;}

.sph_menu{
	display:none;}

#finfo .finfo_inner ul li a:hover{
	background-color: #ccc;}

}

@media screen and (max-width: 960px) {

#finfo .finfo_inner .finfo_title{
	padding:20px 20px;}

#finfo .finfo_inner .finfo_title{
	margin-top:-30px;
	margin-bottom:30px;}

#finfo .finfo_inner .finfo_title span{}

#finfo .finfo_inner{
	width:100%;
	padding:40px 20px 0;
	box-sizing:border-box;}

#finfo .finfo_inner ul{
	width:500px;
	margin:0 auto;}

#finfo .finfo_inner ul li{
	width:auto;
	float:none;
	display:inline-block;
	margin:0 0 20px 0;
	padding:0 10px!important;
	text-align:center!important;
	border-right:1px solid #000000;}

#finfo .finfo_inner ul li:last-child{
	border-right:none;}

#finfo .finfo_inner ul li a{
	margin:0!important;
	padding: 0!important;
	font-size:1.2em;
	line-height:1.2em;}

#finfo .finfo_inner ul li a{ background-size:35px 35px;}

#finfo .finfo_inner ul li img{
	position:absolute;
	top:0px;
	right:0px;}

}

@media screen and (max-width: 767px) {

#finfo .finfo_inner .finfo_title span{}

#finfo .finfo_inner{
	margin:0;
	padding:30px 10px 0;}

#finfo .finfo_inner ul{
	width:100%;}

#finfo .finfo_inner ul li{
	margin: 0 0 10px 0;}

#finfo .finfo_inner ul li a{
	padding: 20px 0 0 10px;
	font-size:1.1em;}

#finfo .finfo_inner ul li.finfo_list1 a,
#finfo .finfo_inner ul li.finfo_list2 a,
#finfo .finfo_inner ul li.finfo_list3 a,
#finfo .finfo_inner ul li.finfo_list4 a,
#finfo .finfo_inner ul li.finfo_list5 a,
#finfo .finfo_inner ul li.finfo_list6 a,
#finfo .finfo_inner ul li.finfo_list7 a,
#finfo .finfo_inner ul li.finfo_list8 a,
#finfo .finfo_inner ul li.finfo_list9 a{
	background-image:none;}

#finfo .finfo_inner ul li{}

#finfo .finfo_inner ul li.finfo_list6 span{
	display:block;}

}

#footer_box{
	background-color:#F5F5F5;}

#footer{}

#footer .footer_inner{
	width:100%;
	max-width:980px;
	margin:0 auto;
	padding:40px 0 0;
	box-sizing:border-box;}

#footer .footer_logo{
	margin-bottom:30px;
	height:70px;}

#footer .footer_logo img{
	height:42px;
	width:auto;}

#footer .footer_logo p{
	font-size:1.2em;
	color: #282828;
	margin-bottom:12px;}

#footer .footer_list{
	text-align:left;
	margin:0 auto 60px;
	width:620px;}

#footer .footer_list dl{
	padding:0 15px;
	margin-right:0px;
	margin-bottom:20px;
	width: calc((100% - 10px) / 3);
	width: -webkit-calc((100% - 10px) / 3);
	width: -moz-calc((100% - 10px) / 3);
	float:left;
	border-right:1px solid #000;
	box-sizing:border-box;}

#footer .footer_list dl:nth-child(3),
#footer .footer_list dl:nth-child(6){
	margin-right:0;
	border-right:none;}

#footer .footer_list dl dt{
	font-size:1.4em;
	line-height:1.2em;
	font-weight:700;
	color: #282828;
	margin-top:5px;
	height:40px;}

#footer .footer_list dl dd{
	font-size:1.1em;
	line-height:1.4em;}

#footer .footer_list dl dd.f_ad{
	height:70px;}

#footer .footer_list dl dd img{
	height:20px;
	width:auto;}

#footer .footer_text01{
	font-size:1.1em;
	line-height:1.1em;
	margin-bottom:30px;}

#footer .footer_text02{
	font-size:1.1em;
	line-height:1.1em;
	padding-bottom:10px;
	color:#B5B5B6;}

ul.footer_text03 li{
	display:inline-block;
	margin-bottom:20px;}

ul.footer_text03 li:nth-child(2){
	border-left:1px solid #000;}

ul.footer_text03 li a{
	font-size:1.1em;
	line-height:1.1em;
	padding:0 10px;
	color:#000;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;}

ul.footer_text03 li a:hover{
	color:#aaaaaa;}

@media screen and (max-width: 960px) {

#footer .footer_inner{
	padding:30px 0 0;}

#footer .footer_list dl dd.f_ad{
	height:85px;}

#footer .footer_logo{
	margin-bottom:20px;}

#footer .footer_list{
	margin-bottom:20px;}

ul.footer_text03 li{
	margin-bottom:15px;}

#footer .footer_text01{
	margin-bottom:15px;}

}

@media screen and (max-width: 767px) {

#footer .footer_inner{
	padding:20px 0 0;}

#footer .footer_logo{
	margin-bottom:20px;}

#footer .footer_list{
	display:none;}

#footer .footer_text01{
	margin-bottom:20px;}

#footer .footer_text01 span{
	line-height:0.8em;
	display:block;}

}
/*-------------------------スマホfixボタン-------------------------*/
#sph_footer_fixbtn{display:none;}

@media screen and (max-width: 767px) {
#footer{margin-bottom:44px;}
#sph_footer_fixbtn{display:flex;position:fixed;bottom:0;width:100%;z-index:999;background:#FFF;}
#sph_footer_fixbtn a{display:block;text-decoration:none;width:calc((100% - 1px)/2);background:#2A3681;color:#FFF;font-size:14px;padding:15px 5px;font-weight:500;}
#sph_footer_fixbtn a:not(:first-child){margin-left:1px;}
#sph_footer_fixbtn a span{display:inline-block;}
#sph_footer_fixbtn a span::before{content:"";display:inline-block;width:18px;height:18px;background:url(../images/fix_ico1@drimontide.com)center no-repeat;background-size:cover;vertical-align:middle;margin-right:3px;}
#sph_footer_fixbtn a:nth-of-type(2) span::before{background:url(../images/fix_ico2@drimontide.com)center no-repeat;background-size:cover;}
}
@media screen and (max-width: 374px) {
#sph_footer_fixbtn a{font-size:13px;}
#sph_footer_fixbtn a span::before{display:none;}
}
/*-------------------------fixボタン-------------------------*/

#fix_btn{
	position:fixed;
	bottom:10px;
	right:20px;
	z-index:9999;}

#fix_btn ul li{
	width:120px;
	height:120px;
	margin-bottom:10px;}

#fix_btn ul li img{
	width:100%;
	height:100%;}

#fix_btn ul li a{
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
	position:relative;}

#fix_btn ul li a:hover{
	filter:alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;}

@media screen and (max-width: 960px) {
}

@media screen and (min-width: 768px) {

#fix_btn .sph_btn{
	display:none;}

}

@media screen and (max-width: 767px) {

#fix_btn .pc_btn{
	display:none;}

#fix_btn{
	position:fixed;
	bottom:0;
	right:0;
	width:100%;
	background-color: rgba(50, 50, 50, 0.8);}

#fix_btn ul{
	margin:10px;}

#fix_btn ul li{
	height:auto;
	vertical-align:middle;
	margin-right:10px;
	width: calc((100% - 10px) / 2);
	width: -webkit-calc((100% - 10px) / 2);
	width: -moz-calc((100% - 10px) / 2);
	float:left;}

#fix_btn ul li:nth-child(1){
	background-color:#D5C82D;}

#fix_btn ul li:nth-child(2){
	background-color:#161575;
	margin-right:0;}

#fix_btn ul li a{
	display: block;
    margin:auto;
	max-width:100%;
	min-height:40px;
	padding:5px 10px;
	box-sizing:border-box;}

#fix_btn ul li img{
	width:auto;
	height:auto;
	max-width:100%;
	max-height:40px;}

}


/*---------------------------------ドロワーメニューここから-------------------------------------*/

@media screen and (min-width: 768px) {
.menu_btn p{
	display:none;}
}

@media screen and (max-width: 767px) {

/*-------------------------
__menu
-------------------------*/
#menu{
position:fixed;
top:0;
text-align:left;
right:-260px;
width:260px;
height:100%;
background-color:#FFF;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
font-size:15px;
line-height:1.5;
}
#menu a {
text-decoration:none;
color:#000;
}
/*#menu p{
font-size:16px;
padding:5px 7px;
margin-bottom:5px;
background-color:#2a3681;
color:#fff;
margin:10px;
}*/
#menu p a{
color:#fff;
}
#menu dl{padding:10px 0;}
#menu dt{
font-size:16px;
padding:6px 7px;
margin-bottom:5px;
background-color:#2a3681;
color:#fff;
}
#menu dt a{color:#FFF;}
#menu dl dd{border-bottom:#ddd dotted 1px;}
#menu dl dd .s_title{display:block;/*border-bottom:#ddd dotted 1px;*/box-sizing:border-box;padding:6px 10px;position:relative;}
#menu dl dd .acc_oya{cursor:pointer;}
#menu dl dd .acc_oya::before{content:"";border-right:solid 2px #999;border-top:solid 2px #999;display:block;height:8px;position:absolute;right:15px;top:25%;transform:rotate(135deg); transition:transform .3s ease-in-out, top .3s ease-in-out;width:8px;}
#menu dl dd .acc_oya.is-open::before {top:38%;transform:rotate(-45deg);}
#menu dl dd .acc_list{position:relative;background:#fff;border:transparent;line-height:0;padding:0;opacity:0;visibility:hidden;transition:line-height 0.4s, padding 0.4s, opacity 0.4s;}
#menu dl dd .acc_list.is-open{line-height:1.5;opacity:1;visibility:visible;}
#menu dl dd .acc_list a{padding:0;}
#menu dl dd .acc_list.is-open a{padding:10px 20px;background:#ddd;font-size:13px;}
#menu dl dd .acc_list.is-open a:nth-of-type(n+2){margin-top:1px;}
#menu dl dd a{display:block;padding:6px 10px;}
}

/*-------------------------
__drawer開閉動作
-------------------------*/
#wrap,
#menu{
-webkit-transition:ease 0.5s;
transition:ease .5s;
}
#wrap.open,
#menu.open{
-webkit-transform:translate3d(-260px, 0, 0);
transform:translate3d(-260px, 0, 0);}
#overlay{
background: rgba(0, 0, 0, 0.2);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999;
}

#wrap.open {
overflow:hidden;
}

/*html,
body,
#wrap,
#menu {height:100%;}*/

/*hambarg*/
.menu_btn {
position:fixed;
top:7px; 
right:7px;
z-index:1000;
background:#fff;
width:36px; 
height:36px;
border:#999 solid 2px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition:ease 0.5s;
transition:ease .5s;
}
.menu_btn.open {
-webkit-transform:translate3d(-260px, 0, 0);
transform:translate3d(-260px, 0, 0);
}

@media screen and (max-width: 374px) {

#menu{ right:-240px; width:240px; font-size: 14px; }
#wrap.open,#menu.open{ -webkit-transform:translate3d(-240px, 0, 0); transform:translate3d(-240px, 0, 0);}
.menu_btn.open { -webkit-transform:translate3d(-240px, 0, 0); transform:translate3d(-240px, 0, 0);}

}
    
.hambarg:nth-child(1) {
position:absolute;
top:30%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#999;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
height:2px;
width:20px;
}
.hambarg:nth-child(2) {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#999;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
height:2px;
width:20px;
}
.hambarg:nth-child(3) {
position:absolute;
top:70%;
left:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#999;
-webkit-transition:ease 0.5s;
transition:ease 0.5s;
height:2px;
width:20px;
}

.menu_btn p{
	position:absolute;
	top:77%;
	left:20%;
	font-size:0.7em;
	color:#666;}

.open .hambarg:nth-child(1) { 
top:50%;
-webkit-transform:translate(-50%,-50%) rotate(45deg);
transform:translate(-50%,-50%) rotate(45deg);
 }
.open .hambarg:nth-child(2) { 
top:50%;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
opacity:0;
 }
.open .hambarg:nth-child(3) { 
top:50%;
-webkit-transform:translate(-50%,-50%) rotate(-45deg);
transform:translate(-50%,-50%) rotate(-45deg);
 }
 
.menu_btn.open p{
	 display:none;}
 




@media screen and (min-width: 768px) {

.head_contact{ display: none;}
    
.header_sns{ position: absolute; top: 0; right: 10px; text-align: center; margin-left: 10px;}
.header_sns ul li{ display: inline-block; width: 40px; height: 40px;}
.header_sns ul li a img{ width: 100%; height: auto;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;}
.header_sns ul li a:hover img{ filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;}
.menu_btn{display:none;}
}

.footer_sns{display: none;}

@media screen and (max-width: 767px) {

.head_contact{ position: fixed; top: 7px; right: 52px;}
.head_contact ul li{ width: 40px; height: 40px; display: inline-block; margin: 0 2px;} 
.head_contact ul li a{}
.head_contact ul li a img{ width: 100%; height: auto;} 

.header_sns{ display: none;}
.head_sns{ text-align: center; margin-top: 15px;}
.head_sns ul li{ display: inline-block; width: 40px; height: 40px;}
.head_sns ul li a img{ width: 100%; height: auto;}

.footer_sns{ text-align: center;padding: 15px 0; display: block;}
.footer_sns ul li{ display: inline-block; width: 40px; height: 40px;}
.footer_sns ul li a img{ width: 100%; height: auto;}

}
