/* ===================================================================
CSS
 file name  :  common.css
=================================================================== */


@font-face {
  font-family: "MyYuGothicM";
  font-weight: normal;
  src: local("YuGothic-Medium"),
       local("Yu Gothic Medium"),
       local("YuGothic-Regular"),
       local("Yu Gothic");
}

@font-face {
  font-family: "MyYuGothicM";
  font-weight: bold;
  src: local("YuGothic-Bold"),
       local("Yu Gothic");
}
body{
	font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
}

a.button{
	display:block;
	margin: auto;
	text-decoration:none;
	text-align:center;
	position: relative;
	box-sizing: border-box;
	-webkit-transition: all .5s;
	transition: all .5s;
}
a.button.white {
	background-color: #FFF;
	border: 1px solid #FFF;
	color: #0C8E70;
}
a.button.white:hover{
	background-color: #0C8E70;
	border-color: #FFF;
	color: #FFF;
}
a.button.white_out {
	border: 1px solid #FFF;
	color: #FFF;
}
a.button.white_out:hover {
	background-color: #FFF;
	border: 1px solid #FFF;
	color: #0C8E70;;
}
a.button.color {
	background-color: #0C8E70;
	border: 1px solid #0C8E70;
	color: #FFF;
}
a.button.color:hover {
	background-color: #FFF;
	border-color: #0C8E70;
	color: #0C8E70;
}
a.button.color_out {
	background-color: none;
	border: 1px solid #0C8E70;
	color: #0C8E70;
}
a.button.color_out:hover {
	background-color: #0C8E70;
	color: #FFF;
}
.txt_c{
	text-align: center;
}
.attention{
	color:#D90000;
}


/* =====================================
フッター
======================================== */
#footer{
	width:100%;
}
#footer #footer_wrap{
	position: relative;
	padding: 80px 40px;
	box-sizing: border-box;
	background: linear-gradient(135deg, #01A357, #0D6075);
	color: #fff;
}
#footer .inner{
	display: flex;
	justify-content: space-between;
}
#footer #footer_info{
	width: 60%;
	box-sizing: border-box;
}

#footer_info ul{
	margin:0 auto;
	height: 80px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
}
#footer_info ul li{
	display: block;
	width: 16.666%
}
#footer_info ul li a{
	position: relative;
	display: flex;
	justify-content: center;/*左右中央揃え*/
	align-items: center;	/*上下中央揃え*/
	flex-direction: column;	/*子要素の並ぶ向き*/
	text-decoration: none;
	text-align: center;
	width: 100%;
	height: 60px;
	color: #fff;
	box-sizing: border-box;
}
#footer_info ul li a span{
	display: block;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
}
#footer_info ul li a::after {
	position: absolute;
	bottom: 0px;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s;
}
#footer_info ul li a:hover::after {
	transform: scale(1, 1);
}
#footer #footer_info .footer_company{
	padding:30px 0;
}
#footer #copy{
	width:100%;
	margin:0 auto;
	padding: 20px 0px;
	box-sizing: border-box;
	text-align: center;
	font-size:12px;
}
#footer .footer_logo{
	width: 90%;
}
#footer .footer_logo img{
	width: 100%;
}

/* =====================================
ページトップ
======================================== */
#pagetop {
    display: none;
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index:1000;
}
#pagetop a{
	color: #FFFFFF;
	font-size: 180%;
	padding: 10px;
	line-height: 1;
	display: inline-block;
	background: #0C8E70;
	border-radius: 50px;
	border: 1px solid #F5F3F0;
}
/* =====================================
電話
======================================== */
#top_contact .contact_list .tel_number a{
	text-decoration: none;
}

@media print, screen and (min-width: 641px) {
/* PC用のスタイル記述 */
	.sp{ display:none!important; }
	.pc{ display:block!important; }
	/* =====================================
	ヘッダー
	======================================== */
	#header{
		width:100%;
		z-index: 50;
	}
	#header #header_wrap{
		width:1024px;
		margin:0 auto;
		height: 80px;
		box-sizing: border-box;
		position: relative;
		display: flex;
		justify-content: space-between;
	}
	#header #header_wrap #mobile-head{
		position: relative;
		flex-grow: 1;
		text-align: left;
		width: 20%;
		height: 60px;
		padding-top: 20px;
	}
	#header #header_wrap #mobile-head h1 {
		display: inline-block;
	}
	#global-nav{
		width: 40%;
		flex-grow: 1;
	}
	#global-nav ul{
		margin:0 auto;
		height: 80px;
		padding-top: 10px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#global-nav ul li{
		display: block;
		width: 16.666%
	}
	#global-nav ul li a{
		position: relative;
		color: #000;
		display: flex;
		justify-content: center;/*左右中央揃え*/
		align-items: center;	/*上下中央揃え*/
		flex-direction: column;	/*子要素の並ぶ向き*/
		text-decoration: none;
		text-align: center;
		width: 100%;
		height: 60px;
		box-sizing: border-box;
	}
	#global-nav ul li a span{
		display: block;
		color: #0C8E70;
		font-size: 12px;
		font-weight: normal;
	}
	#global-nav ul li a::after {
		position: absolute;
		bottom: 0px;
		left: 0;
		content: '';
		width: 100%;
		height: 2px;
		background: #0C8E70;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform .3s;
	}
	#global-nav ul li a:hover::after {
		transform: scale(1, 1);
	}

/* =====================================
コンテンツ
======================================== */
	.title_wrap{
		width:100%;
		margin:0;
		background-position: center center;
		background-size: cover;
		box-sizing:border-box;
	}
	h2.title{
		width:1080px;
		margin:auto;
		padding:110px 40px;
		box-sizing: border-box;
		color:#FFF;
		font-size:30px;
		line-height:1;
		text-align:left;
		text-shadow: 1px 1px 1px #000;
		font-weight: bold;
	}
	.container{
		width:1080px;
		margin:50px auto auto;
		padding:0 40px;
		box-sizing: border-box;
	}
	h3.lead{
		color:#0C8E70;
		font-size:26px;
		margin-top: 50px;
	}
	h3.sub_title{
		color:#0C8E70;
		background: #E8F2EF;
		font-size:24px;
		border-bottom: 1px solid #0C8E70;
		padding: 8px 30px;
		margin-top: 50px;
	}
	.container p{
		margin-top: 20px;
	}

/* =====================================
フッター
======================================== */

	#footer #footer_wrap{
		position: relative;
		padding: 80px 40px;
		box-sizing: border-box;
		background: linear-gradient(135deg, #01A357, #0D6075);
		color: #fff;
	}
	#footer .inner{
		display: flex;
		justify-content: space-between;
	}
	#footer #footer_info{
		width: 60%;
		box-sizing: border-box;
	}

	#footer_info ul{
		margin:0 auto;
		height: 80px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}
	#footer_info ul li{
		display: block;
		width: 16.666%
	}
	#footer_info ul li a{
		position: relative;
		display: flex;
		justify-content: center;/*左右中央揃え*/
		align-items: center;	/*上下中央揃え*/
		flex-direction: column;	/*子要素の並ぶ向き*/
		text-decoration: none;
		text-align: center;
		width: 100%;
		height: 60px;
		color: #fff;
		box-sizing: border-box;
	}
	#footer_info ul li a span{
		display: block;
		color: #fff;
		font-size: 12px;
		font-weight: normal;
	}
	#footer_info ul li a::after {
		position: absolute;
		bottom: 0px;
		left: 0;
		content: '';
		width: 100%;
		height: 1px;
		background: #fff;
		transform: scale(0, 1);
		transform-origin: center top;
		transition: transform .3s;
	}
	#footer_info ul li a:hover::after {
		transform: scale(1, 1);
	}
	#footer #footer_info .footer_company{
		padding:30px 0;
	}
	#footer #copy{
		width:100%;
		margin:0 auto;
		padding: 20px 0px;
		box-sizing: border-box;
		text-align: center;
		font-size:12px;
	}
	#footer .footer_logo{
		width: 60%;
	}
	#footer .footer_logo img{
		width: 100%;
	}
}
@media screen and (max-width: 640px) {
/* スマートフォン用のスタイル記述 */
	body{
		font-size:75%;
	}
	img{
		max-width:100%;
		height:auto;
		width:auto;
	}
	.sp{ display:block!important; }
	.pc{ display:none!important; }
	/* =====================================
	ヘッダー
	======================================== */
	#header{
		width:100%;
		position: fixed;
		z-index: 150;
	}
	#header #header_wrap{
		margin:0 auto;
		box-sizing: border-box;
	}
	#header #header_wrap #mobile-head{
		width:100%;
		height: 50px;
		background: #FFF;
		box-shadow: 0 3px 5px -3px rgba(0,0,0,0.3);
		display: flex;
		position: relative;
	}
	#header #header_wrap #mobile-head h1 {
		width: 60%;
		padding: 0 10px;
		align-self: center;
	}
	#header #header_wrap #mobile-head #tel{
		width: 35%;
		padding: 0 10px 0 20px;
		align-self: center;
	}
	/* Toggle Button */
	#nav-toggle {
		position: absolute;
		right: 15px;
		top: 12px;
		width: 30px;
		height: 36px;
		cursor: pointer;
		z-index: 200;
	}
	#nav-toggle div {
		position: relative;
	}
	#nav-toggle span {
		display: block;
		position: absolute;
		height: 3px;
		width: 100%;
		background: #0C8E70;
		left: 0;
		-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: 11px;
	}
	#nav-toggle span:nth-child(3) {
		top: 22px;
	}
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #0C8E70;
        width: 100%;
        text-align: center;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
		position: static;
		right: 0;
		bottom: 0;
    }
    #global-nav ul li {
		border-bottom: 1px solid #B9CEB1;
    }
    #global-nav ul li a{
        width: 100%;
        display: block;
        color: #fff;
        padding: 15px 10px;
		box-sizing: border-box;
		text-decoration: none;
		font-size: 120%;
    }
    #global-nav ul li a span{
		color: #ccc;
		font-size: 80%;
		margin-left: 10px;
    }
    #nav-toggle {
        display: block;
    }
	/* #nav-toggle 切り替えアニメーション */
	.open #nav-toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}
	/* #global-nav スライドアニメーション */
	.open #global-nav {
		-moz-transform: translateY(550px);
		-webkit-transform: translateY(550px);
		transform: translateY(550px);
	}
/* =====================================
コンテナ ヘッダー分下げる
======================================== */
	#container_wrap{
		padding-top: 50px;
		position: relative;
	}

/* =====================================
コンテンツ
======================================== */
	.title_wrap{
		width:100%;
		margin:0;
		background-position: center center;
		background-size: cover;
		box-sizing:border-box;
	}
	h2.title{
		color:#FFF;
		padding:50px 20px;
		text-shadow: 1px 1px 1px #000;
		font-size:120%;
		line-height:1;
		text-align:left;
		font-weight:bold;
	}
	.container{
		width: 100%;
		padding:0 20px 20px;
		box-sizing: border-box;
	}
	h3.lead{
		color:#0C8E70;
		font-size:120%;
		margin-top: 20px;
	}
	h3.sub_title{
		color:#0C8E70;
		background: #E8F2EF;
		font-weight: bold;
		border-bottom: 1px solid #0C8E70;
		padding: 8px 20px;
		margin-top: 20px;
	}
	.container p{
		margin-top: 10px;
	}

/* =====================================
フッター
======================================== */
	#footer .inner{
		display: initial;
		justify-content: initial;
	}
	#footer #footer_wrap{
		padding: 60px 20px;
	}
	#footer #footer_info{
		width: 100%;
	}
	#footer_info ul{
		justify-content: space-between;
	}
	#footer_info ul li{
		width: initial;
	}

}