@charset "utf-8";

@media screen and (max-width: 767px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 768px) and (max-width: 1023px) {}
/*-------------------------------------------------
レイアウト
-------------------------------------------------*/
body{
	text-align:left;
	font-size: 100%;
	line-height:1.8;
	letter-spacing:0.05em;
	color:#222222;
	background:#ffffff;
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo', sans-serif;
	font-variant: normal;
	padding-bottom:0px;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	}
#wrap{ width: 100%; height: 100%; position: relative; overflow-x: hidden;}
.inner{ margin-right:auto; margin-left:auto;}
.inner:before{content:" ";display:table;}
.inner:after{ clear:both;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
html.is-open { overflow-y: hidden;}
.inner{ margin-right:20px; margin-left:20px;}
}
@media screen and (min-width: 768px) , print{
.inner{ max-width:1320px;}
.container{ margin-right:40px; margin-left:40px;}
}

/*-----------------------------------------------------
header
-----------------------------------------------------*/
#header_frame{ z-index: 9000; width: 100%; -webkit-transition: all 0.3s ease;transition: all  0.3s ease;background: #fff;}
#header_frame.is-animation{ background: rgba(255,255,255,0.9);}

.header_title { padding-left: 10px;padding-top: 10px;}
.header_title h1{ float: left;}

.header_sns ul li{ margin: 0 8px;}
.header_sns ul li a{ padding: 8px;}
.header_sns ul li.btn_facebook{ width: 20px; height: 20px;}
.header_sns ul li.btn_youtube{ width: 25px; height: 18px; padding-top: 1px;}
.header_sns ul li.btn_contact{ width: 22px; height: 18px; padding-top: 1px;}
svg .icon_pk{ fill: #096b91;}
a:hover svg .icon_pk{ fill: #000;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	#header_frame{ position: absolute; height: 60px;}

	.header_title{ padding: 10px 0 0 10px;}
	.header_title a{ display: block; float: left; width: 30%;}
	.header_title h1{ margin-bottom: 5px;width: 90px;}

	.header_sns{ padding-top: 40px;}
	.header_sns ul{ text-align: center;}
	.header_sns ul li{ display: inline-block;}

}
@media screen and (min-width: 768px), print{
	#header_frame{ position: fixed;}
	.header_sns{ position: absolute; top: 38px; right: 30px;}
	.header_sns ul li{ float: left;}
	.header_title h1{ margin-bottom: 10px;width: 190px;}

}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.header_title{ float: left;}
	.header_title h1{ margin-bottom: 10px;}
	.header_title p{ float: none; width: 203px; padding-top: 0; padding-left: 0;}
}


/*-----------------------------------------------------
menu
-----------------------------------------------------*/
ul.header_menu li{ line-height: 1;}
ul.header_menu li img{ height: 14px; width: auto;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	#menu{ background: #fff; padding-top: 80px;}

	ul.header_menu{ text-align: center; border-top: 1px solid #f1f1f1;}
	ul.header_menu li{ border-bottom: 1px solid #f1f1f1;}
	ul.header_menu li img{ width: auto;}
	ul.header_menu li a{ display: block; padding: 20px;}

	/* menu */
	#menu{ display: none; position: fixed; top: -1px; right: 0; z-index: 8000; width:100%; height: 110vh; overflow-y: scroll;}

	/*ハンバーガー*/
	#menu-icon{ position: fixed; right: 20px; top: 16px; z-index: 9999; -webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
	#menu-icon span{ background: #ff018f; width: 36px; height: 2px; margin-bottom: 5px; display:block;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}

	#menu-icon{ display:inline; cursor:pointer; font-size: 8px; text-align: center; line-height: 1; letter-spacing: 0; font-weight: bold; color: #ff018f; font-family: 'Roboto', sans-serif;}
	#menu-icon.active{ border: none;}
	#menu-icon.active .first{transform:rotate(45deg);-webkit-transform:rotate(45deg);margin-top:10px;}
	#menu-icon.active .second{transform:rotate(135deg);-webkit-transform:rotate(135deg);position:relative;top:-8px;}
	#menu-icon.active .third{display:none;}

	/* アコーディオン  */
	p.btn_ac_01{ position: relative; display: block; font-size: 1.1em; padding: 10px 0;}
	p.btn_ac_01::before{ position: absolute; top: 22px; right: 20px; content: ""; display: inline-block; width: 12px; height: 12px; transition: .3s;}
	p.btn_ac_01::after{ position: absolute; top: 17px; right: 25px; content: ""; display: inline-block; width: 12px; height: 12px; transform: rotate(90deg); transition: .3s;}
	p.btn_ac_01.open::before{ transform: rotate(360deg);}
	p.btn_ac_01.open::after{ transform: rotate(0); top: 22px; right: 20px;}

	ul.list_menu_02 li p.btn_ac_01::before, ul.list_menu_02 li p.btn_ac_01::after{ border-top: 2px solid #059ad8;}

}
@media screen and (min-width: 768px), print{
	#menu{}

	ul.header_menu{ padding-top: 34px; padding-right: 140px; text-align: center;}
	ul.header_menu li{ display: inline-block; text-align: center; margin: 0 4px;}
	ul.header_menu li a{ position: relative; display: block; padding: 10px;}
	ul.header_menu li a:hover img{ opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1}
	ul.header_menu li a::after{ position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 3px; background: #ff018f; transform: scale(0, 1); transform-origin: left top; -webkit-transition: all 0.3s ease;transition: all  0.3s ease;}
	ul.header_menu li a:hover::after{ transform: scale(1, 1);}

	/*ハンバーガー*/
	#menu-icon{ display: none;}

}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	ul.header_menu li{ margin: 0;}
}

/*-------------------------------------------------
共通指定
-------------------------------------------------*/
/* 背景 */
.bg_logomark{ background: url(../images/home/bg_top.png) right top no-repeat;}

/* ul,li */
ul.list_maru_01 li{ text-indent: -1.2em; padding-left: 1.2em; margin-bottom: 0.5em; line-height: 1.4;}
ul.list_maru_01 > li::before{ content: "・"; margin-right: 0.2em;}
ul.list_maru_02 li{ text-indent: -1.2em; padding-left: 1.2em; margin-bottom: 0.5em; line-height: 1.4;}
ul.list_maru_02 > li::before{ content: "●"; margin-right: 0.2em; color: #8f018f;}

ul.list_kome_01 li{ text-indent: -1.2em; padding-left: 1.2em;}
ul.list_kome_01 > li::before{ content: "※"; margin-right: 0.2em;}

/* 分割 */
.list_01{ display:-webkit-flex;display: flex; -webkit-justify-content:flex-start;justify-content:flex-start; -webkit-flex-wrap: wrap;flex-wrap: wrap;}
.list_02{ display:-webkit-flex;display: flex; -webkit-justify-content:justify;justify-content: space-between; -webkit-flex-wrap: wrap;flex-wrap: wrap;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	/* 背景 */
	.bg_logomark{ background-size: 80%;}
}
@media screen and (min-width: 768px), print{
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* 背景 */
	.bg_logomark{ background-size: 80%;}
}

/*-----------------------------------------------------
footer
-----------------------------------------------------*/
#footer_frame{ clear: both;}
#footer_frame .footer_logo{ text-align: center; margin-bottom: 40px;}
#footer_frame h1{ text-align: center; font-size: 0.9em; font-weight: bold; margin-bottom: 20px;}
#footer_frame .add{ clear: both; text-align: center; margin-bottom: 50px;}

.footer_sns ul{ text-align: center; margin-bottom: 20px;}
.footer_sns ul li{ display: inline-block; text-align: center; margin: 0 8px;}
.footer_sns ul li a{ padding: 8px;}
.footer_sns ul li.btn_facebook{ width: 20px; height: 20px;}
.footer_sns ul li.btn_youtube{ width: 25px; height: 18px; padding-top: 1px;}
.footer_sns ul li.btn_contact{ width: 22px; height: 18px; padding-top: 1px;}
svg .icon_bk{ fill: #000;}
a:hover svg .icon_bk{ fill: #ff018f;}

ul.footer_menu{ text-align: center; margin-bottom: 20px;}

.btn_center{ text-align: center; margin-bottom: 20px;}
.btn_center a{ display: inline-block; border: 1px solid #000;}
.btn_center a:hover{ border: 1px solid #ccc;}
.btn_center img{ width: auto;}

#copy{ clear: both; text-align: center; font-weight: bold;}

/*ブラウザサイズ別指定*/
@media screen and (max-width: 767px) {
	#footer_frame{ padding-top: 80px;}
	#footer_frame .footer_logo img{ width: 150px;}
	#footer_frame .add{ font-size: 0.8em;}

	ul.footer_menu{ font-size: 0.8em;}

	#copy{ padding-top: 40px; padding-bottom: 40px; font-size: 0.6em;}
}
@media screen and (min-width: 768px), print{
	#footer_frame{ padding-top: 120px;}
	#footer_frame .footer_logo img{ width: auto;}
	#footer_frame .add{ font-size: 0.9em;}

	ul.footer_menu{ font-size: 0.9em;}

	#copy{ padding-top: 60px; padding-bottom: 80px; font-size: 0.9em;}

}
@media screen and (min-width: 768px) and (max-width: 1023px) {
}

/* page-top */
#page-top {
	position: fixed;
/*	font-size: 60%;*/
	margin-bottom:0px;
	line-height: 1.2;
	z-index:7000;
}
#page-top span {
	text-decoration: none;
	color: #fff;
	text-align: center;
	font-weight: bold;
	display: block;
	background:rgba(200,194,253,0.8);
/*	border-radius:50%;*/
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;
}
#page-top span img{
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 100;
}

#page-top span:hover {
	cursor: pointer;
	background:#e7e5fc;
/*
	text-decoration: none;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-moz-opacity: 60;
*/
}

/*ブラウザ別サイズ指定*/
@media screen and (max-width: 767px) {
	#page-top {	bottom: 20px; right: 20px;}
	#page-top span { width: 39px; height: 39px; padding: 15px 12px;}
	#page-top span img{ width:15px; height: 9px;}
}
@media screen and (min-width: 768px), print {
	#page-top {	bottom: 20px; right: 20px;}
	#page-top span { width: 45px; height: 45px; padding: 18px 15px;}
	#page-top span img{ width:15px; height: 9px;}
}