@charset "utf-8";
/*------------------------------------------------------------------------------
Css name: common.css
Css info: 共通スタイル
------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------
基本
--------------------------------------------------------------------------*/
*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

html{
	box-sizing: border-box;
	overflow-y: scroll;
	font-size: 62.5%;
}

body{
	min-height:100%;
	width:100%;
	margin:0 auto;
	padding:0px;
	position: relative;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", HelveticaNeue, 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-feature-settings: "pwid";
	letter-spacing: 1px;
	font-style:normal;
	color:#4d4d4d;
	font-size:1.8rem;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}
@media all and (-ms-high-contrast: none)  {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
@media all and (-ms-high-contrast: active) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

p{
	line-height:1.8;
}

table, th, td, th {
	border-collapse: collapse;
	border-spacing: 0;
	font-weight: normal;
	font-size:1em;
	word-wrap: break-word;
}

table,div,ol,ul,dl,dt,dd{
	margin:0px;
	padding:0px;
}
li{
	list-style: none;
}

textarea,input{
	font-size:1em;
}

h1,h2,h3,h4,h5,h6,small{
	font-size:100%;
	line-height:100%;
	margin:0;
	padding:0;
}
h1,h2,h3,h4,h5,h6{
	line-height: 1.4;
}
pre {
	white-space: pre-wrap ;/* 折り返し */
}
em,strong{
	font-weight: normal;
	font-style: normal;
}
address{
	font-style: normal;
}
img,table {
	border:none;
}

img{
	vertical-align: bottom;
	max-width: 100%;
	height: auto;
}

a{		/* テキストリンク */
	color:#4d4d4d;
	text-decoration:none;
	background-color: transparent;
	transition: .3s;
}
a:active,
a:hover{		/* テキストリンク */
	color: inherit;
	text-decoration:none;
	outline-width: 0;
}

a:hover img{		/* 画像リンク */
	/*opacity:0.8;
	filter: alpha(opacity=80);*/
}
.link_u_line{
	border-bottom: 1px dotted #4d4d4d;
	padding-bottom: 2px;
	transition: .3s;
}
	.link_u_line:hover{
		border-bottom: 1px dotted  transparent;
	}

.link_nw{
	margin-right: 2px;
	padding-right: 16px;
	background: url(../img/common/ico_nw.png) right center no-repeat;
}
.mobi_o{ display: none; }

/* 回り込みの解除 */
.cf:after {
	content:" ";
	display:block;
	clear:both;
}

@media only screen and (max-width: 560px) {
	p{
		line-height:1.6;
	}
	.mobi_o{ display: block; }
}
/*------------------------------------------------------------------------
グローバルナビ
--------------------------------------------------------------------------*/
.header{
	position: relative;

	padding: 0 2%;
	background: #fff;
}
	.head_logo{
		max-width: 100%;
		padding: 22px 0;
	}
	.head_contact{
		position: absolute;
		top: 20px;
		right: calc( 2% + 100px );

		width: 220px;
		line-height: 60px;

	}
		.head_contact a{
			display: block;
			width: 100%;
			height: 100%;
			padding-left: 24px;
			color: #fff;
			font-weight: bold;
			background: #e64273 url(../img/common/ico_arrow.png) 90% center no-repeat;
			background-size: 18px 15px;
			border-radius: 5em;
		}
		.head_contact a:hover{
			opacity: 0.8;
			background: #e64273 url(../img/common/ico_arrow.png) 92% center no-repeat;
			background-size: 18px 15px;
		}


.header .inner{
	position: relative;
}

@media screen and (max-width: 700px) {
	.head_contact{
		display: none;
	}
}
@media screen and (max-width: 560px) {
	.header{
		padding: 0 3%;
	}
		.head_logo{
			width: 70%;
			max-width: 240px;
			padding: 14px 0;
		}
}
/* メニュー ------------------------------------*/
.gNav{
	pointer-events: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: block;
	width: 100%;
	min-height: 100vh;
	margin: 0;
	padding: 60px 10% 30px;
	color: #fff;
	background: rgba(29,66,100,.98);
	overflow-y: scroll;
	z-index: 100;
	transition: all 0.4s ease;
	opacity: 0;
}
.gNav ul{
	max-width: 300px;
	margin: 0 0 0 auto;
	background: transparent;
	border-top: 1px solid #fff;
}
	.gNav ul li.page_nav_home{ /* ホーム　非表示 */
		display: block;
	}
	.gNav ul .page_nav{
		flex-basis: 100%;
		display: block;
		height: auto;
		margin: 0;
		border-bottom: 1px solid #fff;
	}
	.gNav ul .page_nav a{
		display: block;
		width: 100%;
		height: 100%;
		color: #fff;
		padding: 14px 0;
		line-height: 1.4em;
		text-align: center;
	}
		.gNav ul .page_nav a::after {
			content: none;
		}
		.gNav ul .page_nav a:hover{
			background: #fbac07;
			background-size: 32px 24px;
			color: #fff;
		}
	.gNav_contact_sp{
		width: 100%;
		line-height: 60px;
		margin-bottom: 24px;
	}
		.gNav_contact_sp a{
			display: block;
			width: 100%;
			height: 100%;
			padding-left: 30px;
			color: #fff;
			font-weight: bold;
			background: #e64273 url(../img/common/ico_arrow.png) 90% center no-repeat;
			background-size: 18px 15px;
			border-radius: 4em;
		}
		.gNav_contact_sp a:hover{
			opacity: 0.8;
			background: #e64273 url(../img/common/ico_arrow.png) 92% center no-repeat;
			background-size: 18px 15px;

		}
.gNav_contact{
	max-width: 300px;
	margin: 24px 0 0 auto;
}
.gNav_contact .gNav_name{
	margin-bottom: 8px;
	text-align: center;
}
.gNav_contact .gNav_name img{
	display: block;
	margin: 0 auto 16px;
	width: 240px;
	max-width: 90%;
}
.gNav_contact .gNav_name span{
	font-size: 1.6rem;
	font-weight: normal;
}
.gNav_contact .gNav_tel,
.gNav_contact .gNav_tel a{
	font-size: 2.4rem;
	text-align: center;
	color: #57c1ce;
	font-weight: 700;
}
.gNav_tel_time{
	margin-top: 24px;
	line-height: 1.4;
	font-size: 1.4rem;
	text-align: center;
}
	.gNav_tel_time span{
		display: block;
		width: 80px;
		padding: 4px 0;
		margin: 0 auto 4px;
		text-align: center;
		border: 1px solid #fff;
	}
@media screen and (max-width: 560px) {
	.gNav ul{
		margin: 0 auto;
	}
	.gNav_contact{
		margin: 24px auto 0;
	}

}
/* スライドアニメーション ------------------------------------*/
.open .gNav{
    opacity: 1;
	pointer-events: initial;
}
/* Toggle Button ------------------------------------*/
#nav-toggle {
	display: block;
    position: fixed;
    right: 2%;
    top: 20px;
    width: 62px;
    height: 66px;
    padding: 14px 16px;
    background: #fff;

    cursor: pointer;
    z-index: 101;
    transition: .3s;
}
.open #nav-toggle{
	padding: 14px 14px;
}
#nav-toggle:hover{
}
	#nav-toggle::after{
		position: absolute;
		bottom: 4px;
		left: 10px;
		content: "MENU";
		font-size: 1.4rem;
		font-family: 'Roboto', sans-serif;
		color: #1d426e;
	}
	.open #nav-toggle::after{
		left: 9px;
		bottom: 5px;
		content: "Close";
		font-weight: bold;
		line-height: 1;
	}
#nav-toggle div {
    position: relative;
}
	#nav-toggle span {
	    display: block;
	    position: absolute;
			left: 0;
	    height: 2px;
	    width: 100%;
	    background: #57c1ce;

	    -webkit-transition: .35s ease-in-out;
	    -moz-transition: .35s ease-in-out;
	    transition: .35s ease-in-out;
	}
	#nav-toggle span:nth-child(1) {
	    top: 0;
	}
	#nav-toggle span:nth-child(2) {
	    top: 10px;
	}
	#nav-toggle span:nth-child(3) {
	    top: 20px;
	}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
    top: 14px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}
.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: 14px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
@media only screen and (max-width: 560px) {
	#nav-toggle {
	    right: 5px;
	    top: 8px;
	    width: 50px;
	    height: 50px;
	    padding: 14px 8px;

	    cursor: pointer;
	    z-index: 101;
	    transition: .3s;
	}
	.open #nav-toggle{
		 padding: 14px 8px;
	}
	#nav-toggle:hover{
	}
		#nav-toggle::after{
			content: "";
		}
		.open #nav-toggle::after{
			content: "";
		}
	.open #nav-toggle span:nth-child(1),
	.open #nav-toggle span:nth-child(3) {
		top: 10px;
	}
}



/*------------------------------------------------------------------------
パーツ
--------------------------------------------------------------------------*/
.pan_list{
	display: flex;
	width: 1000px;
	max-width: 90%;
	margin: 20px auto 0;
}
	.pan li{
		font-size: 1.4rem;
		color: #1d426e;
	}
	.pan li + li::before{
		display: inline-block;
		content: " > ";

		margin: 0 8px;
		color: #999;
	}
		.pan li a:hover{
			opacity: .8;
		}

.page_tit{
	position: relative;

	width: 1000px;
	max-width: 90%;
	margin: 60px auto 100px;
	padding-left: 1em;
	color: #1d426e;
	font-size: 3.8rem;
	line-height: 1.2;
}
.page_tit::before{
	position: absolute;
	top: 6px;
	left: 0;

	display: block;
	content: "";
	width: 14px;
	height: 34px;
	background: #fbac07;
}

.content_box{
	width: 1000px;
	max-width: 90%;
	margin: 0 auto;
}
.content_box + .content_box{
	margin-top: 100px;
}
	.content_tit{
		position: relative;
		margin-bottom: 60px;
		padding: 32px 0 0 1em;

		color: #1d426e;
		font-size: 2.2rem;
		font-weight: 400;
	}
	.content_tit::before{
		position: absolute;
		top: 0;
		left: 0;

		display: block;
		content: "";
		width: 44px;
		height: 2px;
		background: #fbac07;
	}


.btn_vm{ /* さらに見るボタン */
	width: 300px;
	max-width: 80%;
	margin: 60px auto 0;
	line-height: 1;
	background: #fff;
}
	.btn_vm a{
		display: block;
		width: 100%;
		height: 100%;
		padding: 24px 0 18px 20px;
		font-family: 'Roboto', sans-serif;
		color: #fff;
		font-weight: bold;
		background: #e64273 url(../img/common/ico_arrow.png) 90% center no-repeat;
		background-size: 18px 15px;
	}
	.btn_vm a:hover{
		opacity: 0.8;
		background: #e64273 url(../img/common/ico_arrow.png) 92% center no-repeat;
		background-size: 18px 15px;

	}
@media only screen and (max-width: 560px) {
	.page_tit{
		margin-bottom: 60px;
		font-size: 3.2rem;
	}
	.page_tit::before{
		top: 5px;

		width: 12px;
		height: 30px;
	}

	.content_box{
	}
	.content_box + .content_box{
		margin-top: 80px;
	}
		.content_tit{
			margin-bottom: 40px;
			padding: 24px 0 0 1em;

			font-size: 2.0rem;
		}

	.btn_vm{
		margin: 40px auto 0;
	}

}

/*------------------------------------------------------------------------
ページ下ボタン
--------------------------------------------------------------------------*/
.page_btn_area{
	margin-top: 100px;
	padding: 60px 0;
	background: #ebeaea;
}
	.page_btn_list{
		display: flex;
		justify-content: space-around;

		width: 1000px;
		max-width: 90%;
		margin: 0 auto;
	}
		.page_btn_list li{
			width: 45%;
		}
			.page_btn_list li a{
				display: block;
				width: 100%;
				line-height: 120px;
				padding-left: 2.5em;
				font-size: 2.2rem;
				font-weight: 700;
				color: #fff;
				background: url(../img/common/ico_arrow.png) 90% center no-repeat;
				background-size: 18px 15px;
				border-radius: 5em;
			}
			.page_btn_list li a:hover{
				opacity: .8;
				background: url(../img/common/ico_arrow.png) 91% center no-repeat;
				background-size: 18px 15px;
			}
				.page_btn_list .page_btn_order a,
				.page_btn_list .page_btn_order a:hover{
					background-color: #57c1ce;
				}
				.page_btn_list .page_btn_contact a,
				.page_btn_list .page_btn_contact a:hover{
					background-color: #e64273;
				}

@media only screen and (max-width: 560px) {
	.page_btn_area{
		margin-top: 60px;
		padding: 40px auto;
	}
		.page_btn_list{
			flex-wrap: wrap;

			width: 80%;
		}
			.page_btn_list li{
				width: 100%;
			}
			.page_btn_list li + li{
				margin-top: 20px;
			}
				.page_btn_list li a{
					line-height: 60px;
					font-size: 2.0rem;
				}
}
/*------------------------------------------------------------------------
バナーエリア
--------------------------------------------------------------------------*/
.footer_ban_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	padding: 40px 5%;

}
.index .footer_ban_list{
	background: #f4f4f4;
}
.footer_ban_list li{
	width: 240px;
	border: 1px solid #ccc;
}
.footer_ban_list li a:hover{
	opacity: .8;
}
/*------------------------------------------------------------------------
footer
--------------------------------------------------------------------------*/
.footer{
	padding: 24px 0;
	color: #fff;
	background: #1d426e;
}
	.foot_copy{
		text-align: center;
		line-height: 1.2;
		font-size: 1.2rem;
	}
@media only screen and (max-width: 560px) {
}