@charset "utf-8";

/*****　ヘッダー　*****/
ul.flx_header {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	width: 100%;
	margin: 0;
	list-style: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: 100px;
	background-image: url(images/top_bg.png);
	background-size: auto 100%;
	font-size: 12.7px
}
ul.flx_header li {
	margin: 0;
}
/* ul.flx_header li:nth-of-type(1) { */
/* 	width: 90%; */
/* } */
ul.flx_header li:nth-of-type(2) {
/* 	flex-grow: 1; */
/* 	min-width: 1240px; */
/* 	max-width: 1240px; */
/* 	min-width: 1200px; */
/* 	max-width: 1200px; */
/* 	max-width: 1495px; */
	width: 100%;
	margin:0 auto;
}
ul.flx_header li:nth-of-type(3) {
	width: 100%;
	background-image: url(images/menu_bg.png);
	background-size: auto 100%;
}

#header_out{
	width:100%;
}

#header{
	height:100px;
	font-size:12px;
	background-image: url(images/top_bg.png);
	background-size: auto 100%;
}

#header_in{
	width:100%;
	height:100%;
	max-width:1210px;
	margin:0 auto;
}
#header_menu{
/* 	text-align: right; */
/* 	margin:0px 0px 0px auto; */
	letter-spacing:1.5px;
	position:relative;
}

.banner_img_menu{
	height: 80px;
	margin-top:10px;
}

.banner_img_sp_menu{
	display:none;
}

#header_left{
/* 	flex: 2; */
/* 	margin:0px auto; */
	margin-left: 16vw;
	min-width: 580px;
	height: 100%;
}

#header_left_text{
	letter-spacing:1px;
}

#header_right{
	text-align: right;
	margin:0px 30px 1px auto;
/* 	margin-left:317px; */
/*  	letter-spacing:1.5px; */
	letter-spacing:0.6px;
	min-width: 200px;
}

#banner_right_sp {
	display: none;
}

.member{
	height: 100px;
	line-height: 100px
}

.mypage {
	height: 100px;
	line-height: 100px
}

#banner{
	max-width:1200px;
	margin:0 auto;
}

.banner_in{
	display:inline-block;
	vertical-align:middle;
	margin: 17px 0;
}

.banner_small_text{
	font-size:9px;
	padding-left:25px;
	letter-spacing:1px;
	color:#4d5459;
}

.banner_img_pc{
	height:100%;
/* 	margin-left: 310px; */
	margin-left: 1px;
}

.banner_img_sp{
	display:none;
}

.banner_img_smile{
	width:87px;
	height:23px;
}

#banner_right{
	margin-top:12px;
}

.banner_middle_text{
	font-size:16px;
/* 	font-family:'HGP教科書体','YuKyoKasho';*/
	/* font-family:'ＭＳ 明朝'; */
	font-family:serif;
	letter-spacing:0.7px;
	padding-left:13px;
	color:#242528;
}

#sp_header_menu {
 	display: none;
	position: absolute;
    width: 67%;
    background-color: #45046ed6;
    z-index: 15000;
    right: 349px;
    top: 10px;
    padding-bottom: 75px;
}

/*****　プルダウンメニュー　*****/
#menu_sp{
	display:none;
}

#menu{
	background-color:#eaf3fa;
}

#menu_list{
	width: 90%;
	height: 70px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	font-size: 0;
}

.menu_top{
	width:100%;
	height:90px;
	display:flex;
}

#menu_close{
	width:60px;
	padding:30px 0 0 26px;
}
#close_icon{
	width:20px;
	height:20px;
	cursor:pointer;
}

.menu_top > div:nth-child(2){
	width: calc(100% - 180px);
}
#menu_open{
	height: 100%
}
#menu_open > img{
	height:80px;
}

.menu_list_waku{
	display: inline-block;
	position:relative;
	width:33.3%;
	padding-top: 1px;
	vertical-align: top;
	text-align:center;
	list-style: none;
}

.menu_border{
	margin-top: 13px;
	padding-bottom: 4px;
	border-left: 2px solid #d3e1ee;
}

.last_border{
	border-right: 2px solid #d3e1ee;
}

.menu_name span{
	display:block;
}

.menu_name_ja{
	padding-top:2.5px;
	letter-spacing:4px;
	font-size:17px;
	font-weight: bold;
	color: #4c4b4b;
}

.menu_name_eng{
	font-size:8px;
	letter-spacing:1.2px;
	color:#afbeca;
	font-family:'Arial',sans-serif;
	transform:scale(0.8);
}

.open_menu{
	width: 4%;
	margin: 0 auto;
	margin-bottom: 8px;
}

.triangle{
	width: 0;
  	height: 0;
  	border-left: 6.5px solid transparent;
  	border-right: 6.5px solid transparent;
  	border-top: 7.5px solid #e8235f;
}

.sub_list {
	position: absolute;
	width: 100%;
	padding: 0;
	z-index: 10000;
	list-style-type: none;
	background-color: #404d73;
}

.sub_list li {
	width: 85%;
	margin: 0 auto;
	font-size: 11pt;
	text-align: left;
}

.sub_list li a {
	display: block;
	width: 100%;
	padding: 10px 0;
	color: white;
}

.sub_list a:hover {
	opacity: 0.6;
}


.menu_list_waku li {
	overflow: hidden;
	height: 0;
}

.menu_list_waku:hover li:first-child {
	padding-top: 25px;
}

.menu_list_waku:hover > ul > li {
	height: 2.7rem;
	overflow: visible;
	transition: .7s;
}

.menu_list_waku:hover li:last-child {
	padding-bottom: 25px;
}

.pull_down_box {
	display:inline-block;
	width: 8px;
	height: 8px;
	margin-left: 15px;
	border : solid 2px white;
	opacity: 0.5;
}

.pull_down_box2 {
	background-color: white;
	opacity: 0.5;
}

.sp_list {
	position: relative;
	margin-top: 27px;
}

.sp_list a{
	position:absolute;
	width:300px;
	height:40px;
	top:-12px;
}

.sp_list a:hover{
	background-color:#45046ed6;
	opacity:0.6;
}

.sp_list:first-child {
	margin-top: 0px;
}

.sp_subtitle {
	display: inline-block;
	width: auto;
	color: #4c4a4b;
	cursor:pointer;
}


.sp_sub_text{
	color:#ffffff;
	font-size:15px;
	padding-left:60px;
}

.sp_menu_border_first {
	opacity:0.9;
	position: absolute;
	width: 7px;
	height: 7px;
	top: 5px;
	left: 35px;
	border-bottom: 2px solid #f7f7f7;
	border-right: 2px solid #f7f7f7;
	transform: rotate(-45deg);
}

/***** レスポンシブ *****/
@media screen and (max-width: 768px) {
	#header_out {
		background-color: #f7f7f7;
	}

	#header_left{
		min-width:initial;
	}

	ul.flx_header{
		display:block;
		padding:0;
 		height: 13vw
	}

	ul.flx_header li:nth-of-type(2){
		min-width:auto;
		max-width:none;
	}

	#header_right{
		display:none;
	}

	.banner_img_pc{
		display:none;
	}

	.banner_img_sp{
		display:block;
		width:100%;
		margin-top: 5px;
	}

	.banner_img_menu{
		display:none;
	}

	.banner_img_sp_menu{
		display:block;
		height: 12.2vw
	}

	/***** プルダウンメニュー *****/
	#sp_header_menu{
		width: 550%;
		width: calc(70vw + 50px); ;
		top:0px;
		right:0px;
	}

	#menu_close{
		width:auto;
		padding:0px;
		min-width: 52.5px;
		max-width: 52.5px;
	}

	#close_icon{
		width:100%;
		height:100%;
	}

	#menu_pc{
		display:none;
	}

	#menu_sp{
		display:block;
	}

	.menu_top{
		height:55px;
	}

	.menu_top_block_sp{
	    width: 160%;
	    margin-left: 7%;
	}

	.menu_top_login_sp{
		display: flex;
	    justify-content: space-around;
	    border: 1px solid white;
	    opacity:0.7;
	    margin: 10px 0;
	}

	.login_sp{
		padding: 4% 0;
	    color: white;
	}

	.login_sp a{
		position:absolute;
		width:100%;
		height:100%;
		top: -4%;
		z-index: 1;
	}

	.login_sp span{
/* 		font-size: 3.2vw; */
		font-size: 2.5vw;
		padding:0 14px;
		opacity:1.0;
	}

	.login_sp_border span{
		opacity:0.7;
		border-left:1px solid #f1f1f1;

	}

	#header {
		display: none;
	}

	#banner {
		width: 100%;
	}

	.banner_in {
		margin-top: 20px;
		margin-bottom: 13px;
		padding-top: 6px;
	}

	#banner_left {
		display: flex;
		width: 100%;
		float: none;
	}



	.back_color {
		background-color: white;
	}

	#sp_banner_padding {
		width: 185px;
		height: 45px;
		margin-left: 4%;
		padding: 0;
		padding-top: 6px;
	}

	#sp_hamburger_munu {
		margin-left: 33%;
	}

	.banner_small_text {
		height: 16px;
		font-size: 1.8vw;
		margin: auto 0;
		padding-left: 5px;
		letter-spacing: 2px;
	}

	#banner_right {
		display: none;
	}

	#banner_right_sp {
		display: block;
		width: 115px;
		margin-left: auto;
	}

	#menu {
		display: none;
	}

	.sp_menu_contents {
		width: 92%;
		margin: 0 auto;
	}

	.sp_top_left {
		display: inline-block;
		width: 14.5%;
		margin-left: 0.2%;
	}

	.sp_top_left img {
		width: 100%;
		height: 100%;
	}

	.sp_top_right {
		display: inline-block;
		margin-left: 2.8%;
		vertical-align: super;
	}

	.sp_top_text {
		font-family: serif;
		font-size: 2.5vw;
		letter-spacing: 0.5px;
	}

	.sp_menu_banner {
		height: 33px;
		margin-top: 40px;
		background-color: #e8235f;
	}

	.sp_banner_contents {
		width: 87%;
		margin: 0 auto;
	}

	.sp_banner_text {
		font-size: 2.3vw;
		padding-top: 2px;
		letter-spacing: 0.6px;
		color: white;
	}

	.sp_menu_btnlist {
		margin-top: 27px;
	}

	.sp_btnlist {
		width: 100%;
		height: 79px;
		margin: 0 auto;
		padding: 0;
		list-style: none;
		font-size: 0px;
	}

	.btnlist_waku {
		display: inline-block;
		width: 24%;
		height: 100%;
		text-align: center;
	}

	.bor_btnlist {
		border-right: solid 2px #e92360;
	}

	.btnlist_waku a {
		display: block;
		width: 100%;
		height: 100%;
	}

	.btnlist_text {
		display: block;
		font-size: 3.4vw;
		padding-top: 19px;
		color: #e92360;
	}

	.sp_list_contents {
/* 		width: 81.5%; */
		margin: 0 auto;
		padding-top: 25px;
	}

	.sp_list {
		position: relative;
		margin-top: 27px;
	}

	.sp_subtitle {
		display: inline-block;
		width: auto;
		color: #4c4a4b;
		cursor:pointer;
	}

	.sp_menu_border {
		position: absolute;
		width: 11px;
		height: 11px;
		top: 10px;
		left: 0;
		border-bottom: 3px solid #e7245f;
		border-right: 3px solid #e7245f;
		transform: rotate(-45deg);
		transition: .4s linear;
	}

	.sp_menulist_open {
		top: 7px;
		left: 4px;
		transform: rotate(45deg);
		transition: .4s linear;
	}

	.sp_menu_border_first {
		position: absolute;
		width: 6px;
		height: 6px;
/* 		top: 5px; */
/* 		top:0.8vw; */
		left: 10%;
		border-bottom: 1px solid #f7f7f7;
		border-right: 1px solid #f7f7f7;
		transform: rotate(-45deg);
		transition: .4s linear;
	}

	.sp_menulist_open_first {
		top: 1px;
		left: 4px;
		transform: rotate(45deg);
		transition: .4s linear;
	}

	.sp_sub_text {
		font-size: 3.4vw;
/* 		padding-left: 42px; */
/* 		padding-left: 12vw; */
		padding-left: 16vw;
		letter-spacing: 3px;
	}

	.sp_list ul {
		display: none;
		margin: 0;
		padding-left: 14%;
		color: #e7245f;
	}

	.sp_list a{
	    width: 100%;
	    height: 250%;
	}
	.sp_list ul li {
		position: relative;
		width: 90%;
		margin-top: 28px;
	}

	.sp_menulist_text {
		display: inline-block;
		margin-left: 2%;
		font-size: 3vw;
		letter-spacing: 2px;
		vertical-align: middle;
		color: #4c4a4b;
	}

	.sp_menu_link {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

}


@media screen and (max-width: 572px) {
	.banner_small_text {
		letter-spacing: 0;
	}

	.sp_top_right {
		margin-left: 0;
		vertical-align: top;
	}

	.sp_banner_contents {
		width: 90%;
	}

	.sp_banner_text {
		padding-top: 7px;
	}

	.sp_menu_btnlist {
		margin-top: 25px;
	}

	.sp_list_contents {
		padding-top: 20px;
	}

}

@media screen and (max-width: 456px) {
	.banner_small_text {
		margin-top: 25px;
	}

	#sp_hamburger_munu {
		margin-left: 30%;
	}

/* 	.sp_menu_contents { */
/* 		margin-top: 35px; */
/* 	} */

	.sp_menu_banner {
		margin-top: 30px;
	}

	.sp_banner_contents {
		width: 95%;
	}

	.sp_banner_text {
		padding-top: 8px;
	}

	.sp_btnlist {
		height: 50px;
	}

	/*.btnlist_waku {
		width: 30%;
	}*/

	.btnlist_text {
		padding-top: 13px;
	}

	.sp_list {
		margin-top: 30px;
	}

	.sp_menu_border_first {
		width: 6px;
		height: 6px;
	}

	.sp_menulist_open_first {
		top: 0;
		left: 5px;
	}

	.sp_menu_border {
		width: 8px;
		height: 8px;
		top: 4px;
	}

	.sp_menulist_open {
		top: 0;
		left: 5px;
	}

	.sp_list ul li {
		margin-top: 20px;
	}
}

@media screen and (max-width: 376px) {
	#sp_hamburger_munu {
		margin-left: 25%;
	}
	.banner_img_pc {
		width: 115px;
		height: auto;
	}
	.sp_top_text {
		letter-spacing: 0;
	}

	.sp_menu_banner {
		height: auto;
		margin-top: 20px;
	}

	.sp_banner_text {
		padding: 0;
	}

	.sp_menu_btnlist {
		margin-top: 20px;
	}

	.sp_list_contents {
		padding-top: 10px;
	}
}

@media screen and (max-width: 320px) {
	#sp_hamburger_munu {
		margin-left: 15%;
	}

	.banner_img_pc {
		width: 100px;
	}

	.banner_small_text {
		padding-left: 6ox;
	}

	.sp_list ul {
		padding-left: 19%;
	}

}

@media screen and (max-width: 280px) {
	#sp_hamburger_munu {
		margin-left: 10%;
	}

	.banner_small_text {
		padding-left: 11px;
	}

	.sp_btnlist {
		height: 30px;
	}

	.btnlist_text {
		padding-top: 6px;
	}

	.sp_list {
		margin-top: 15px;
	}

	.sp_list ul {
		padding-left: 20%;
	}

	.sp_sub_text {
		padding-left: 30px;
	}
}