@charset "utf-8";

/*ここでは
	ページのエリア分け
	などを記述します
*/

body{
	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Noto Sans Japanese","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
	letter-spacing: 1px;
	}
body>img{position: absolute;}/*フッター下部の余白を無くす*/
p{ font-size: 15px;}
a{ text-decoration: none; color: #000000; }
a:hover{ color: #FF3366;}

.p_b_box{ border: 2px solid #FF3366; display: inline-block; text-align: center; padding: 0.8em 1em; color: #FF3366; background: #FFFFFF; letter-spacing: 2px; line-height: 1em; font-weight: 600;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
	}
.p_b_box:hover{ background: #FF3366; color: #FFFFFF;}
.p_b_box span.arrow{ background: url(../img/icon/p_arrow.png) no-repeat left center; display: inline-block; padding: 0.3em 0 0.3em 1.1em;}
.p_b_box:hover span.arrow{ background: url(../img/icon/w/arrow.png) no-repeat left center;}

.d_p_arrow{ color: #FF3366; font-size: 18px; background: url(../img/icon/d_p_arrow.png) no-repeat left center; padding-left: 20px;}
.d_p_arrow:hover{ border-bottom: 1px dotted #FF3366;}

.w_b_box{ border: 1px solid #FFFFFF; color: #FFFFFF; padding: 30px 5px; display: inline-block; letter-spacing: 2px;
	/* box-shadow */
	box-shadow: 0px 0px 2px 1px #8e8e8e;
	-moz-box-shadow: 0px 0px 2px 1px #8e8e8e;
	-webkit-box-shadow: 0px 0px 2px 1px #8e8e8e;
	text-shadow: 0px 0px 5px #8e8e8e;
	-moz-box-shadow: 0px 0px 5px #8e8e8e;　/* Firefox用 */
	-webkit-box-shadow: 0px 0px 5px #8e8e8e;　/* Safari,Google Chrome用 */
	}
.w_b_box:hover{ color: #FFFFFF; background: url(../img/bg2.gif);}
@media screen and (max-width: 681px) {
	.w_b_box{ padding: 1em 5px; }
}


.p_bg_box{ border: 2px solid #FF3366; display: inline-block; text-align: center; padding: 1em 2em; color: #FFFFFF; background: #FF3366; letter-spacing: 2px; line-height: 1em; font-weight: 600;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: color, background-color;
	transition-property: color, background-color;
	/* box-shadow */
	box-shadow: 0px 3px 0px 0px #dddfd7;
	-moz-box-shadow: 0px 3px 0px 0px #dddfd7;
	-webkit-box-shadow: 0px 3px 0px 0px #dddfd7;
	}
.p_bg_box:hover{ background: #FFFFFF; color: #FF3366;}


@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
	.d_p_arrow{ font-size: 17px;}
}
@media screen and (max-width: 990px) {
	.p_b_box{ font-size: 13px;}
}
@media screen and (max-width: 681px) {
	.p_b_box{ font-size: 12px;}
	.d_p_arrow{ font-size: 15px;}
}


.header_height{ display: block;}
@media screen and (max-width: 1280px) {
	.header_height{}
}
@media screen and (max-width: 1024px) {
	.header_height{}
}
@media screen and (max-width: 990px) {
	.header_height{}
}
@media screen and (max-width: 681px) {
	.header_height{}
}

.deco{
	-moz-text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	-webkit-text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	}

/*---h系---*/
h1{ font-size: 24px;}
.p_title{ text-align: center; font-weight: 500; font-size: 40px; padding: 0.8em; color: #303030; letter-spacing: 3px;
	-moz-text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	-webkit-text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	}
.p_title span{ display: block; font-size: 13px; color: #ff3366; letter-spacing: 4px; font-weight: normal; text-shadow: none;}
h2{ font-size: 20px;}
.sub_title{ text-align: center; font-weight: 600; font-size: 30px; padding: 1em; letter-spacing: 2px;
	/*-moz-text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	-webkit-text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;
	text-shadow: 0px -1px 1px #7a7a7a, 1px 1px 0px #fff;*/
	}
h3{ font-size: 18px;}
.me_title{ font-size: 29px;}
.me_title span{ font-size: 15px; color: #4b4b4b; display: inline-block; margin-left: 1em; font-weight: normal;}
.b_p_line{ display: inline-block; border-bottom: 4px solid #FF3366; margin-bottom: 1em; font-size: 18px; line-height: 1.7em; padding: 0.2em 0;}

h4{ font-size: 15px;}
.h4_p_line{ border-left: 3px solid #FF3366; padding: 0.2em 0.4em; font-size: 16px; margin: 0.5em 0;}

h5{ font-size: 14px;}
.p_arrow{ background: url(../img/p_arrow.gif) no-repeat left top; padding: 0 0 0 0.8em !important;  font-weight: normal;}

.comment{
	padding: 0 0 0 1em !important;
	text-indent: -1em;
	}
.comment2{
	padding: 0 0 0 2em !important;
	text-indent: -2em;
	}
.comment3{
	padding: 0 0 0 3em !important;
	text-indent: -3em;
	}
.comment35{
	padding: 0 0 0 3.5em !important;
	text-indent: -3.5em;
	}
.comment4{
	padding: 0 0 0 4em !important;
	text-indent: -4em;
	}
.mincho{ font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Sawarabi Mincho","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif !important; font-weight: 500;}
.gothic{ font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Noto Sans Japanese","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;}
.wf-sawarabimincho { font-family: "Sawarabi Mincho", serif; }
.wf-notosansjapanese { font-family: "Noto Sans Japanese"; }

/*---/h系---*/
/*---スマホ用h系---*/
@media screen and (max-width: 1280px) {
	.b_p_line{ font-size: 17px;}
}
@media screen and (max-width: 1024px) {
	.me_title{ font-size: 25px;}
	.me_title span{ font-size: 14px;}
	.h4_p_line{ font-size: 15px;}
}
@media screen and (max-width: 990px) {
	.p_title{ font-size: 37px; padding: 0.7em;}
	.sub_title{ font-size: 27px;}
}
@media screen and (max-width: 681px) {
	.b_p_line{ line-height: 1.5em;}
	.me_title{ font-size: 22px;}
	.me_title span{ font-size: 13px;}
	.p_title{ font-size: 33px; line-height: 1.2em; padding: 0.7em 0.7em 0.3em;}
	.sub_title{ font-size: 22px; letter-spacing: 1px; line-height: 1.4em;}
}

/*---/スマホ用h系---*/

.t_right{
	text-align: right;
	}
.t_left{
	text-align: left;
	}
.t_center{
	text-align: center;}

.left {
	float: left;
	}
.right {
	float: right;}

.pcnone{
	display: none;
	}
.clear{ clear: both;}
.clearfix::after {
	clear: both; 
	content: " "; 
	display: block;}

header{ width: 100%; z-index: 10;}
footer{ background: #edf1f4; overflow:}
header::after,
footer::after { clear: both; content: " "; display: block;}

header{ background-color: #fff; border-bottom: 1px solid #e0dcd6; }
header #pc_head{ padding: 0.6em 0 0.5em 30px; font-size: 12px;}
header #pc_head::after { clear: both; content: " "; display: block;}
#pc_head span.midashi{ display: inline-block; padding: 0.7em 0 0;}
#pc_head .search{ float: right;}
#pc_head .p_b_box{ float: right; margin-right: 1.5em; font-size: 13px; padding: 0.7em 0.8em;}
header #smt_head{ display: none;}

header ul{}
header ul::after { clear: both; content: " "; display: block;}
header ul li{}
header ul li a{}
header ul li a:hover{ text-decoration: underline; }
.header_area{ display: none;}

@media screen and (max-width: 1024px) {
	header{ position: fixed; top: 0;}
	header #pc_head{ display: none;}
	header #smt_head{ display: block; max-width: 100%;}
	header #smt_head::after { clear: both; content: " "; display: block;}
	header #smt_head .smt_btn{ float: right; background: #FF3366; padding: 3% 4% 2% 3.5%;}
	header #smt_head .smt_btn a{}
		/*ハンバーガーメニュー共通*/
		.menu-trigger,
		.menu-trigger span {
			display: inline-block;
			transition: all .4s;
			box-sizing: border-box;
		}
		.menu-trigger {
			position: relative;
			width: 40px;
			height: 34px;
		}
		.menu-trigger span {
			position: absolute;
			left: 0;
			width: 100%;
			height: 4px;
			background-color: #fff;
			border-radius: 4px;
		}
		.menu-trigger span:nth-of-type(1) {
			top: 0;
		}
		.menu-trigger span:nth-of-type(2) {
			top: 15px;
		}
		.menu-trigger span:nth-of-type(3) {
			bottom: 0;
		}
		/*ハンバーガーメニューアニメーション*/
		.menu-trigger.active span:nth-of-type(1) {
			-webkit-transform: translateY(18px) rotate(-45deg);
			transform: translateY(18px) rotate(-45deg);
		}
		.menu-trigger.active span:nth-of-type(2) {
			opacity: 0;
		}
		.menu-trigger.active span:nth-of-type(3) {
			-webkit-transform: translateY(-18px) rotate(45deg);
			transform: translateY(-18px) rotate(45deg);
		}
	header #smt_head .s_menu{ float: left; width: 70%;}
	header #smt_head .s_menu::after { clear: both; content: " "; display: block;}
	header #smt_head .s_menu .logo{ float: left; width: 25%; margin-left: 2%; background: url(../img/icon/logo.svg) no-repeat center center / 85% auto;
		-webkit-transition: opacity 0.3s ease-out;
		-moz-transition: opacity 0.3s ease-out;
		-ms-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
		}
	header #smt_head .s_menu .logo:hover{
		opacity: 0.5;
		-webkit-opacity: 0.5;
		-moz-opacity: 0.5;
		filter: alpha(opacity=50);	/* IE lt 8 */
		-ms-filter: "alpha(opacity=50)"; /* IE 8 */
		}
	header #smt_head .s_menu .p_b_box{ float: right; margin-top: 2.5%;}
	.header_area{ display: block;}
}
@media screen and (max-width: 990px) {
	header #smt_head .s_menu .logo{ width: 30%; background: url(../img/icon/logo.svg) no-repeat center center / auto 80%;}
	header #smt_head .s_menu .p_b_box{ margin-top: 3%;}
}
@media screen and (max-width: 681px) {
	header #smt_head .s_menu .logo{ width: 45%;}
	header #smt_head .s_menu .p_b_box{ margin-top: 4%; letter-spacing: 1px; padding: 0.8em 0.7em;}
}


#wrapper{ max-width: 100%; padding: 0; margin: 0; z-index: 0; padding-left: 160px;}
#wrapper::after { clear: both; content: " "; display: block;}

@media screen and (max-width: 1024px) {
	#wrapper{ padding-left: 0;}
}


#contents{ width: 100%; }
#contents::after { clear: both; content: " "; display: block;}


.bg_pattern{ background: url(../img/bg.jpg);}

footer{ padding: 20px 0 30px;}
footer #footer{ max-width: 1280px; margin: 0 auto; font-size: 14px; max-height: 60px;}
footer #footer::after { clear: both; content: " "; display: block;}

#smt_footer{ display: none;}

#footer .colophon{ max-width: 100%; margin: 0 auto; padding-bottom: 25px;}
#footer .colophon::after { clear: both; content: " "; display: block;}
.colophon .logo{ float: left; width: 10%; background: url(../img/icon/logo.svg) no-repeat left center / 100% auto; margin-right: 1%; }
.colophon .logo2{ float: left; width: 30%; background: url(../img/icon/logo2.svg) no-repeat left center / 100% auto;}
.colophon dl{ float: right; width: 50%;}
.colophon dl::after { clear: both; content: " "; display: block;}
.colophon dl dt{ float: left;}
.colophon dl dt {
    background-color: #FFFFFF;
    float: left;
    font-size: 15px;
	margin-top: 6px;
    margin-bottom: 5px;
    margin-right: 24px;
	padding: 5px 0 5px 8px;
    position: relative;
}
.colophon dl dt::after {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent transparent transparent #FFFFFF;
    border-image: none;
    border-style: solid;
    border-width: 16px 11px 16px 10px;
    box-sizing: border-box;
    content: "";
    height: 28px;
    position: absolute;
    right: -21px;
    top: 0;
    width: 13px;
}
.colophon dl dd{ float: left;}
.colophon dl dd .tel{ color: #ff3366; font-weight: bold; display: block; font-size: 30px; letter-spacing: 1px;}
.colophon dl dd a{ color: #ff3366; text-decoration: none !important;}

#footer .link{ width: 55%; float: left; display: table;}
#footer .link::after { clear: both; content: " "; display: block;}
#footer .link span{ display: table-cell; vertical-align: middle;}
#footer a{ text-decoration: underline;}
#footer a:hover{ text-decoration: none;}
#footer .p_mark{ width: 9%; display: table-cell; vertical-align: middle;
	text-align: center;
	 padding: 1%;
	 border-radius: 40px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	 background: #FFFFFF;
	}
#footer .p_mark img{ max-width: 100%; display: block; margin: 0 auto;}
#footer .copyright{ text-align: right; float: right; width: 30%; display: table;}
#footer .copyright small{ display: table-cell; vertical-align: middle;}

@media screen and (max-width: 1280px) {
	footer #footer{ max-width: 96%;}
	#footer .p_mark{ width: 10%;}
	#footer .copyright{ width: 40%;}
	#footer .link{ width: 60%;}
}
@media screen and (max-width: 1024px) {
	footer #footer{ font-size: 13px; max-width: 94%;}
}
@media screen and (max-width: 990px) {
}
@media screen and (max-width: 681px) {
	#smt_footer{ display: block;}
	#footer .p_mark{ float: right; width: 15%;}
	#footer .link{ width: 100%;}
	#footer .link span{ float: left; width: 75%;}
	footer #footer{ max-width: 86%;}
	.colophon .logo{ min-height: 60px; width: 20%;}
	.colophon .logo2{ float: right; width: 76%;}
	.colophon dl{ float: none; width: 100%; clear: both; margin-top: 12px;}
	.colophon dl dt{ font-size: 13px; margin: 0 4% 0 0;}
	#footer .copyright{ clear: both; width: 100%; padding-top: 2em; text-align: left;}
}

section{ max-width: 100%;}
section::after { clear: both; content: " "; display: block;}
section p{ padding-bottom: 1em; line-height: 1.7em;}
section .content_box{ max-width: 960px; margin: 0 auto;}
section .content_box::after { clear: both; content: " "; display: block;}

@media screen and (max-width: 990px) {
	section .content_box{ max-width: 90%; }
	section p{ line-height: 1.5em;}
}
@media screen and (max-width: 681px) {
	section p{ line-height: 1.4em;}
}

/*ページトップ*/
#page-top{
    bottom: 40px;
    position: fixed;
    right: 40px;
	z-index: 10;
	width: 50px;
	}
#page-top img { -webkit-transition: opacity 0.9s ease-out; -moz-transition: opacity 0.9s ease-out; -ms-transition: opacity 0.9s ease-out; transition: opacity 0.9s ease-out; max-width: 100%;}
#page-top:hover{ cursor: pointer;}
#page-top img:hover{
	-webkit-transition: opacity 0s ease-out;
	-moz-transition: opacity 0s ease-out;
	-ms-transition: opacity 0s ease-out;
	transition: opacity 0s ease-out;
}
@media screen and (max-width: 990px) {
	#page-top { bottom: 50px; right: 40px; }
}
@media screen and (max-width: 681px) {
	#page-top { bottom: 25px; left: 20px; right: auto; }
	#page-top img{ max-width: 90%;}
}


/*404*/

.page_404{}
.page_404 ul{ width: 70%; margin: 30px auto 0;}
.page_404 ul::after { clear: both; content: " "; display: block;}
.page_404 ul li{ float: left; width: 50%;}
.page_404 ul li .p_b_box{ width: 60%;}

.page_404 .box p{}

/*お問い合わせ*/

.contact{}
.contact::after { clear: both; content: " "; display: block;}
.contact_box{ max-width: 960px; margin: 0 auto 70px;}
.contact_box a{ text-decoration: underline; color: #ff3366;}
.contact_box p{ margin-bottom: 1em;}
.contact_box ul{ width: 70%; margin: 30px auto 0;}
.contact_box ul::after { clear: both; content: " "; display: block;}
.contact_box ul li{ float: left; width: 50%; text-align: center;}
.contact_box ul li .p_b_box{ width: 60%;}

@media screen and (max-width: 990px) {
	.contact_box{ max-width: 90%; margin: 0 auto 30px;}
	.contact_box ul{ width: 86%;}
}
@media screen and (max-width: 681px) {
	.contact_box ul{ width: 100%;}
	.contact_box ul li .p_b_box{ width: 70%;}
	.contact_box p{ font-size: 14px;}
}

@media screen and (max-width: 990px) {
	img{ height: auto; max-width: 100%;}
	.tabnone{ display: none;}
	#contents{ width: 100%;}
		
	header, footer{ width: 100%;}
	footer{ padding: 20px 0 55px}
	header ul{}
	header ul li{}
}
@media screen and (max-width: 681px) {
	p{}
	.pcnone{ display: block;}
	.smtnone{ display: none; }
	
	/*---h系---*/
	h1{}
	.gray_bg_title{ margin-bottom: 25px;}
	.gray_bg_title img{ max-height: 15px; width: auto;}
	h2{}
	h3{}
	
	/*---/h系---*/
	
	header .sub_main{ padding: 40px 0 30px;}
	header .sub_main img{ width: 60%;}
	header ul li{}
	header ul li a{}
	header ul li a:hover{ text-decoration: none;}
}


.pankuzu{ background: #FFFFFF; max-width: 100%; margin: 0 auto;}
.pankuzu ul{ font-size: 13px; padding: 1em 5px 1em 30px; position: relative;}
.pankuzu ul a > span{ text-decoration: underline;}
.pankuzu ul a:hover{
	color: inherit;
	}
.pankuzu ul a:hover > span{
	color: #FF3366;
	}
.pankuzu ul li{
	display: table-cell;
	*display: inline;  
	*zoom: 1;
	}
.pankuzu ul li a:after {
	content: ">";
	margin-left: 1em;
	margin-right: 0.5em;
	}


@media screen and (max-width: 681px) {
	.pankuzu ul{ font-size: 13px;}
}

.service{ padding: 40px 0;}
.service .service_area{ max-width: 1280px; margin: 0 auto;}
.service h4{ font-size: 20px; padding-bottom: 0.5em;}
.service ul{ max-width: 100%;}
.service ul::after{ clear: both; content: " "; display: block;}
.service ul li{ float: left; width: 292px; margin: 0 25px 25px 0;}
.service ul li a{ border: #a5a5a6 1px solid; display: block;}
.service ul li a:hover{ border: #FF3366 1px solid;}
.service ul li a img{ max-width: 100%; height: auto;}

@media screen and (max-width: 1280px) {
	.service{ padding: 25px 0;}
	.service .service_area{ max-width: 92%;}
	.service ul li{ width: 25%; margin: 0 2% 2% 0;}
}
@media screen and (max-width: 1280px) {
	.service .service_area{ max-width: 94%;}
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 990px) {
}
@media screen and (max-width: 681px) {
	.service .service_area{ max-width: 90%;}
	.service{ padding: 15px 0;}
	.service ul li{ width: 48%; margin: 0 1% 2%;}
}

.company{ padding: 40px 0;}
.company .office_area{ max-width: 1280px; margin: 0 auto; background: url(../img/icon/logo.svg) no-repeat left top / 155px auto;}
.company .office_area::after{ clear: both; content: " "; display: block;}
.company .office_area .map{ background: url(../img/map.png) no-repeat center center / 98% auto; float: left; width: 480px;}
.company .office_area .office{ float: right; width: 715px;}
.company .office_area .office dl{ max-width: 100%; margin-bottom: 50px; padding-left: 33px; color: #565656; line-height: 1.8em;}
.company .office_area .office dl::after{ clear: both; content: " "; display: block;}
.company .office_area .office dl.yokohama{ background: url(../img/pin_y.png) no-repeat left top;}
.company .office_area .office dl.amami{ background: url(../img/pin_a.png) no-repeat left top;}
.company .office_area .office dl dt{ float: left; width: 70%;}
.company .office_area .office dl dt strong{ display: block; font-size: 20px; padding-bottom: 1em;}
.company .office_area .office dl dd{ float: right; width: 30%;}
.company .office_area .office dl dd img{ max-width: 100%;}

@media screen and (max-width: 1280px) {
	.company{ padding: 40px 0 15px;}
	.company .office_area{ max-width: 94%; background: url(../img/icon/logo.svg) no-repeat left top / 130px auto;}
	.company .office_area .map{ width: 39%; background: url(../img/map.png) no-repeat center center / 100% auto; margin-right: 2%;}
	.company .office_area .office{ width: 59%;}
	.company .office_area .office p{ font-size: 14px;}
	.company .office_area .office dl{ margin-bottom: 30px; line-height: 1.7em;}
	.company .office_area .office dl dt{ width: 65%;}
	.company .office_area .office dl dt strong{ padding-bottom: 0.7em; }
	.company .office_area .office dl dd{ width: 32%;}
}
@media screen and (max-width: 1024px) {
	.company .office_area{ background: url(../img/icon/logo.svg) no-repeat left top / 100px auto;}
	.company .office_area .office dl{ line-height: 1.6em;}
	.company .office_area .office dl dt strong{ font-size: 18px; letter-spacing: 2px;}
}
@media screen and (max-width: 990px) {
}
@media screen and (max-width: 681px) {
	.company{ padding: 25px 0 15px;}
	.company .office_area{ max-width: 90%; background: url(../img/icon/logo.svg) no-repeat left top / 90px auto;}
	.company .office_area .map{ width: 100%; float: none; margin-right: 0; min-height: 300px; background: url(../img/map.png) no-repeat center center / auto 100%; margin-bottom: 20px;}
	.company .office_area .office{ width: 100%; float: none;}
	.company .office_area .office dl{ padding-left: 6%; line-height: 1.4em; margin-bottom: 25px;}
	.company .office_area .office dl dt{ width: 52%;}
	.company .office_area .office dl dt strong{ font-size: 17px; letter-spacing: 1px; line-height: 1em;}
	.company .office_area .office dl dd{ width: 45%;}
	.company .office_area .office dl.yokohama{ background: url(../img/pin_y.png) no-repeat left top / 5% auto;}
	.company .office_area .office dl.amami{ background: url(../img/pin_a.png) no-repeat left top / 5% auto;}
}


ul.double{ max-width: 960px; margin: 0 auto;}
ul.double::after { clear: both; content: " "; display: block;}
ul.double img{ max-width: 100%;}
ul.double li{ float: left; width: 470px; margin: 20px 20px 0 0;}
ul.double li span{ font-size: 15px; display: block; padding: 0.5em 0; letter-spacing: 2px;}
ul.double li a img{ border: 1px solid #FFFFFF;}
ul.double li a:hover img{ border: 1px solid #FF6633;}
ul.double li:nth-child(even){ margin: 20px 0 0 0;}

ul.triple{ max-width: 960px; margin: 0 auto;}
ul.triple::after { clear: both; content: " "; display: block;}
ul.triple img{ max-width: 100%;}
ul.triple li{ float: left; width: 310px; margin: 15px 15px 0 0;}
ul.triple li span{ font-size: 15px; display: block; padding: 0.5em 0; letter-spacing: 2px;}
ul.triple li a img{ border: 1px solid #e0dcd6;}
ul.triple li a:hover img{ border: 1px solid #FF6633;}
ul.triple li:nth-of-type(3){ margin: 15px 0 0 0;}

ul.quartet{ max-width: 960px; margin: 0 auto;}
ul.quartet::after { clear: both; content: " "; display: block;}
ul.quartet img{ max-width: 100%;}
ul.quartet li{ float: left; width: 215px; margin: 15px 30px 15px 0;}
ul.quartet li span{ font-size: 15px; display: block; padding: 0.5em 0; letter-spacing: 2px;}
ul.quartet li a img{ border: 1px solid #FFFFFF;}
ul.quartet li a:hover img{ border: 1px solid #FF6633;}
ul.quartet li:nth-of-type(4){ margin: 20px 0 0 0;}

.link_area{ padding: 40px 0 100px; border-top: 1px dotted #EDF1F4;}
.link_area::after { clear: both; content: " "; display: block;}

.link_area ul.double li{ margin: 0 20px 0 0;}
.link_area ul.double li:nth-of-type(3){ margin: 0;}
.link_area ul.triple li{ margin: 0 15px 0 0;}
.link_area ul.triple li:nth-of-type(3){ margin: 0;}
.link_area ul.quartet li{ margin: 0 20px 0 0;}
.link_area ul.quartet li:nth-of-type(3){ margin: 0;}

@media screen and (max-width: 990px) {
	ul.double{ max-width: 100%;}
	ul.double li{ width: 47%; margin: 3% 3% 0 0;}
	ul.double li span{ font-size: 13px;}
	ul.double li:nth-child(even){ margin: 3% 0 0 0;}
	
	ul.triple{ max-width: 100%;}
	ul.triple li{ width: 32%; margin: 2% 2% 0 0;}
	ul.triple li span{ font-size: 13px;}
	ul.triple li:nth-of-type(3){ margin: 2% 0 0 0;}
	
	ul.quartet{ max-width: 100%;}
	ul.quartet li{ width: 22%; margin: 3% 3% 0 0;}
	ul.quartet li span{ font-size: 13px;}
	ul.quartet li:nth-of-type(4){ margin: 3% 0 0 0;}
	
	.link_area ul.double li{ margin: 0 3% 0 0;}
	
	.link_area{ max-width: 90%; margin: 0 auto; padding: 40px 0 80px;}
	.link_area ul.triple li{ margin: 0 2% 0 0;}
}
@media screen and (max-width: 681px) {
	.link_area{ padding: 40px 0 40px;}
	.link_area ul.double li{ width: 47%; margin: 0 3% 3% 0;}
	.link_area ul.double li:nth-of-type(2){ margin: 0 0 3%;}
	.link_area ul.double li:nth-of-type(3){ margin: 0 3% 3% 0;}
	
	.link_area ul.triple li{ width: 49%; margin: 0 2% 2% 0;}
	.link_area ul.triple li:nth-of-type(2){ margin: 0 0 2%;}
	.link_area ul.triple li:nth-of-type(3){ margin: 0 2% 2% 0;}
	
	ul.quartet li{ width: 44%; margin: 2.5% 3%;}
	ul.quartet li:nth-child(even){ margin: 2.5% 3%;}
	
}
























/*---サイドバーここから---*/
#sidebar{ width: 160px; background-color: #fff; height: 100%; left: 0; position: fixed; top: 0; z-index: 100;
	/* box-shadow */
	box-shadow: 0px 0px 0px 1px #e0dcd6;
	-moz-box-shadow: 0px 0px 0px 1px #e0dcd6;
	-webkit-box-shadow: 0px 0px 0px 1px #e0dcd6;
	}
#sidebar .top{ max-width: 100%;}
#sidebar .top::after { clear: both; content: " "; display: block;}
#sidebar .logo{ width: 100%; background: url(../img/icon/logo.svg) no-repeat center center / auto 100%; display: block; margin: 30% 0; min-height: 55px;
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-ms-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
	}
#sidebar .logo:hover{
	opacity: 0.5;
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	filter: alpha(opacity=50);	/* IE lt 8 */
	-ms-filter: "alpha(opacity=50)"; /* IE 8 */
	}
#sidebar .g_menu{ width: 100%; text-align: center; font-size: 15px; letter-spacing: 2px; position: relative;}
#sidebar .g_menu::after { clear: both; content: " "; display: block;}
#sidebar .g_menu li{ width: 100%; border-top: #e0dcd6 1px solid;}
#sidebar .g_menu li a{ padding: 1em 0; display: block;}
#sidebar .g_menu li a:hover{ background: #FF3366; color: #FFFFFF;}
#sidebar .g_menu li.faq{}
#sidebar .g_menu li.faq a{ padding: 0.7em 1em; margin: 1em auto; font-size: 14px; display: inline-block;}
#sidebar .sns{ width: 100%; padding-top: 20%;}
#sidebar .sns::after { clear: both; content: " "; display: block;}
#sidebar .sns li{ float: right; width: 33%;}
#sidebar .sns li.facebook a{ background: url(../img/icon/g/f.png) no-repeat center center / auto 25px; display: block; height: 50px;}
#sidebar .sns li.facebook a:hover{ background: url(../img/icon/f.png) no-repeat center center / auto 25px;}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1024px) {
	#sidebar{ display: none;}
	#sidebar .logo{ margin: 3% 0 3% 0%; width: 30%; min-height: 65px;}
}
@media screen and (max-width: 990px) {
	#sidebar .logo{ min-height: 50px;}
}
@media screen and (max-width: 681px) {
	#sidebar .logo{ margin: 5% 0 5% 3%; min-height: 40px;}
}

/*---side_nav左横から出るメニュー追記----ここから触らない-----*/
	#sidebar ul.g_menu{ position: static;}
	
	body #sidebar .g_menu {
		margin-bottom: 20px;
	}
	
	body #sidebar .g_menu > li:hover > a + ul {
		width: 100%;
		opacity: 1;
		transition: .2s ease 0s;
	}
	body #sidebar .g_menu > li:hover + li a:before {
		border: none;
		height: 1px;
	}
	body #sidebar .g_menu > li:hover .subnav {
		width: 230px;
		opacity: 1;
		transition: .2s ease 0s;
	}
	body #sidebar .g_menu > li:hover .subnav .subnav-tit {
		display: block;
	}
	body #sidebar .g_menu > li:hover .subnav .subnav-tit figure > img {
		transition: .2s ease 0s;
	}
	body #sidebar .g_menu > li:hover .subnav .subnav-tit figure figcaption {
		width: 100%;
		overflow: hidden!important;
		transition: .2s ease 0s;
	}
	body #sidebar .g_menu .subnav {
		width:0;
		height: 100%;
		opacity: 0;
		background-color: #FF3366;
		position: absolute;
		left: 100%;
		top: 0%;
		z-index: 999;
		transition: .2s ease 0s;
		box-sizing: border-box;
		/**/
		padding-top: 50px;
	}
	body #sidebar .g_menu .subnav li{
	overflow: hidden;
	}
	body #sidebar .g_menu .subnav li a {
		padding-right:3em;
		text-align: right;
		height: 30px;
		color: #fff!important;
		line-height: 30px;
		overflow: hidden!important;
		transition: .2s ease 0s;
		background: url(../img/icon/w/arrow.gif) no-repeat 94% center;
	}
	body #sidebar .g_menu .subnav li a:hover {
		background: url(../img/icon/w/arrow.gif) no-repeat 96% center;
	}
	body #sidebar .g_menu .subnav > li {
		line-height: 1;
	border-top:none!important;
	}
	body #sidebar .g_menu .subnav > li .subnav-tit {
		display: none;
		color: #fff;
	}
	body #sidebar .g_menu .subnav > li .subnav-tit figure {
		margin: 0;
	}
	body #sidebar .g_menu .subnav > li .subnav-tit figure > img {
		width: 0;
		margin-bottom: 10px;
		transition: .2s ease 0s;
	}
	body #sidebar .g_menu .subnav > li .subnav-tit figure figcaption {
		width: 0;
		line-height: 1;
		overflow: hidden!important;
		transition: .2s ease 0s;
	}
	body #sidebar .g_menu .subnav > li:hover, body #sidebar .g_menu .subnav > li.hover {
		background-color: #CB2952;
	}
	body #sidebar .g_menu .subnav > li a:hover, body #sidebar .g_menu .subnav > li a.hover {
		background-color: #CB2952;
	}
	
	body #sidebar .g_menu .subnav > li:hover .mininav, body #sidebar .g_menu .subnav > li.hover .mininav {
		width:200px;
		transition: .2s ease 0s;
	}
	body #sidebar .g_menu .subnav > li:hover .subnav-tit figure figcaption, body #sidebar .g_menu .subnav > li.hover .subnav-tit figure figcaption {
		transition: .2s ease 0s;
		
	}
	body #sidebar .g_menu .mininav {
		width: 0;
		height: 100%;
		position: absolute;
		top: 0;
		left: 100%;
		padding: 50px 0 0;
		background-color: #FF3366;
		overflow: visible;
		transition: .2s ease 0s;
		-webkit-box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2) inset;
		-moz-box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2) inset;
		-ms-box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2) inset;
		-o-box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2) inset;
		box-shadow: 3px 0px 10px rgba(0, 0, 0, 0.2) inset;
	}
	body #sidebar .g_menu .mininav .mininav-tit {
		line-height: 50px;
		border-top:none!important;
	}
	
	body #sidebar .g_menu .mininav .mininav-tit a {
		overflow: hidden!important;
		text-align: right;
		padding-right:3em;
		width:100%;
		padding: 0em 3em 0em 0em;
		box-sizing: border-box;
		background: url(../img/icon/w/arrow.gif) no-repeat 94% center;
		transition: background 0.1s ease 0s;
	}
	body #sidebar .g_menu .mininav .mininav-tit a:hover {
		text-align: right;
		overflow: hidden;
		transition: background 0.1s ease 0s;
		background: #CB2952 url(../img/icon/w/arrow.gif) no-repeat 96% center;
	}
	body #sidebar .g_menu .mininav .mininav-tit a.long-txt {
		line-height: 1.5;
		padding: 4% 8%;
	}
	@media screen and (max-width: 1024px) {
		body #sidebar .g_menu .subnav{ display: none;}
	}

/*---サイドバーここまで-----ここまで触らない----*/
/*----------横から出てくるスマホメニュー----------*/
@media screen and (max-width: 1024px) {
	#scrollwrapper {
	position: relative;
	width: 100%;
	height: 1000px;
	overflow: hidden;
	}
	#scrollwrapperbox {
		position:absolute;
		top:0px;
		left:0;
	}
	#sidebackground {
		position:absolute;
		top:0px;
		right:0px;
		width:100%;
		height:100%;
		background-color: rgba(0,0,0,0.6);
		z-index:9998;
		display:none;
	}
	#sidebar {
		position:fixed;
		top:0px;
		left:auto;
		right:0px;
		width:80%;
		z-index:9999;
		display: none;
	}
	#bt-close {
		position:relative;
	}
	#bt-close a {
		position:absolute;
		top:10px;
		right:10px;
		width:30px;
		height:30px;
		display:block;
	}
	#bt-close a::before {
		position:absolute;
		top:13px;
		left:-1px;
		content:"";
		width:30px;
		height:3px;
		background-color:#EB1D50;
		transform: rotate(-45deg);
	}
	#bt-close a::after {
		position:absolute;
		top:13px;
		left:-1px;
		content:"";
		width:30px;
		height:3px;
		background-color:#FF3366;
		transform: rotate(45deg);
	}
}
/*----------横から出てくるスマホメニューここまで----------*/