@charset "utf-8";
/* CSS Document */

body{
	font-family:"Zen Maru Gothic",sans-serif,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-style: normal;
	font-size:16px;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	color: #222222;
}
*{vertical-align: top; box-sizing: border-box; word-break: break-all;}

body.noscroll {overflow: hidden;}

a{
	display: inline-block;
	text-indent: 0;
	text-decoration: underline;
}
a:hover{opacity: 0.6; text-decoration: none;}

.btn_green{
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding: 9px 10px 10px;
	font-size: 14px;
	background: #127f3b;
	border-radius: 20px;
}

.br_sp {display: none;}

label,
input{
	font-family: "Zen Maru Gothic", sans-serif, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック";
	font-style: normal;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 500;
	color: #222222;
	cursor: pointer;
}


@media screen and (max-width: 768px){
	body {font-size:14px;}
	.br_pc {display: none;}
	.br_sp {display: block;font-size: 0;}
}


/*=======================================================
*********************************************************

　　header

*********************************************************
========================================================*/

header {
	width: 100%;
	position: fixed;
	top: 0;
	right:0;
	z-index: 1000;
	display: inline-block;
	animation: he_bg 0.5s;
	transition: 0.4s;
	box-sizing: border-box;
	background: #ffffff;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
	padding: 15px 16px;
	height: 100px;
}

header .logo_h1{
	display: flex;
	/*align-items: center;*/
	align-items: flex-start;
	gap: 8px;

	position: fixed;
	top: 36px;
	left: 20px;
	width: 62%;
}

header .logo_h1 span{
	font-size: 14px;
	text-align: left;
	display: inline-block;
	line-height: 1.3;
	margin-top: 0.3em;
}

header h1{
	color: #FFFFFF;
	font-weight: bold;
	z-index: 101;
	height: 29px;
	width: 303px;
	text-decoration: none;
}

header h1 img{width: 100%;}

header .menu_btn{
	float: right;
	display: flex;
	align-items: center;
	justify-content: end;
}


/*↓↓↓↓↓↓↓↓↓ 検索ボタン ↓↓↓↓↓↓↓↓↓*/
.search {
	width: 70px;
	height: 70px;
	position: relative;
	background: #127f3b;
	border-radius: 50%;
	margin-right: 20px;
	cursor: pointer;
}
.search img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

.kenmin {
	border-radius: 10px;
	color: #ffffff;
	text-decoration: none;
	margin-right: 8px;
}
.kenmin_sp{display: none;}

.logout{
	background: #127f3b;
	border-radius: 10px;
	color: #ffffff;
	text-decoration: none;
	padding: 10px 18px;
	margin-right: 15px;
}

/*↓↓↓↓↓↓↓↓↓ ハンバーガーメニュー ↓↓↓↓↓↓↓↓↓*/

.hamburger {
	width: 70px;
	height: 70px;
	position: relative;
	background: #127f3b;
	border-radius: 50%;
}

.btn-trigger {
	display: inline-block;
	width: 26px;
	height: 25px;
	position: absolute !important;
	z-index: 10001;
	cursor: pointer;
	right: 32%;
	top: 50%;
	transform: translateY(-50%);
	transition: all .5s;
}

.btn-trigger span {
	display: inline-block;
	position: absolute;
	height: 3px;
	width: 100%;
	background: #ffffff none repeat scroll 0% 0%;
	opacity: 1;
	right: 0px;
	transition: all .5s;
	transform: rotate(0deg);
}

.btn-trigger span:nth-child(1) {margin-top: 0px;}
.btn-trigger span:nth-child(2) {
	margin-top: 10px;
	margin-right: 0px;
}
.btn-trigger span:nth-child(3) {margin-top: 20px;}

/*--- ハンバーガーメニュークリック時の× ---*/
.btn-trigger span.color {background: #ffffff none repeat scroll 0% 0%;}
.btn-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(10px) rotate(-45deg);
	transform: translateY(10px) rotate(-45deg);
}
.btn-trigger.active span:nth-of-type(2) {opacity: 0;}
.btn-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-10px) rotate(45deg);
	transform: translateY(-10px) rotate(45deg);
}

/*--- ハンバーガーメニュークリック時の中身 ---*/

div.inner {
	width: 32%;
	/*height: 100%;*/
	height: 80vh;
	background: #127f3b;
	border-radius: 20px;
	position: fixed;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	z-index: 10000;
	top: 120px;
	opacity: 0;
	right: -100%;
	display: block;
	/*overflow-y: scroll;*/
	padding: 60px 0 50px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.2);
}
.inner.active {
	right: 16px;
	top: 120px;
	opacity: 1;
}

div.inner .inner_rogo {width: 70%;}
div.inner .inner_rogo img{width: 100%;}

div.inner ul {
	width: 80%;
	font-weight: bold;
	margin: 30px auto 20px;
	height: calc(80vh - 20vh);

	overflow-y: scroll;
}
div.inner ul li {
	width: 100%;
	display: block;
	vertical-align: top;
	text-align: left;
}

div.inner ul li a {
	color: #ffffff;
	font-size: 18px;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 20px;
}

div.inner ul li .inner_rogo {
	color: #ffffff;
	font-size: 18px;
	text-decoration: none;
	display: inline-block;
	margin-bottom: 20px;
}

div.inner ul li a::before {
	content: "";
	background: url(../img/common/kirakira2.png)top center no-repeat;
	background-size: cover;
	width: 10px;
	height: 11px;
	display: inline-block;
	margin-right: 16px;
}

.top_return{display: none;}

@media screen and (max-width: 1200px) {

	header h1 {width: 263px;}

	.kenmin {width: 40%;}
	.kenmin img{width: 100%;}
}

@media screen and (max-width: 1000px) {
	header .logo_h1{width: 68%;}
	.kenmin {display: none;}
	.kenmin_sp {
		display: block;
		width: 52%;
		margin: 0 auto 6px;
	}
	.kenmin_sp img{width: 100%;}
}

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

	header {height: 76px;}
	header .logo_h1{
		display: block;
		text-align: left;
		top: 12px;
		left: 16px;
		width: 57%;
	}

	header .logo_h1 span {
		line-height: 1.2;
		margin-top: 0;
	}

	header h1 {
		margin-bottom: 4px;
		width: 230px;
		height: 24px;
	}
	/*header h1 div {width: 100%;}*/
	.search{
		width: 46px;
		height: 46px;
		margin-right: 8px;
	}
	.hamburger{
		width: 46px;
		height: 46px;
	}
	.btn-trigger {
		right: 27%;
		width: 22px;
		height: 20px;
	}

	.btn-trigger span:nth-child(1) {margin-top: 0px;}
	.btn-trigger span:nth-child(2) {
		margin-top: 9px;
		margin-right: 0px;
	}
	.btn-trigger span:nth-child(3) {margin-top: 18px;}

	/*--- ハンバーガーメニュークリック時の× ---*/
	.btn-trigger.active span:nth-of-type(1) {
		-webkit-transform: translateY(9px) rotate(-45deg);
		transform: translateY(9px) rotate(-45deg);
	}
	.btn-trigger.active span:nth-of-type(3) {
		-webkit-transform: translateY(-9px) rotate(45deg);
		transform: translateY(-9px) rotate(45deg);
	}

	div.inner {
		top: 100px;
		width: calc(100% - 32px);
	}
	.inner.active{top: 100px;}
	div.inner ul {
		height: calc(72vh - 28vh);
		width: 90%;
	}

	.top_return {
		background: #ffffff;
		color: #127f3b;
		border-radius: 20px;
		width: 240px;
		max-width: 80%;
		font-size: 14px;
		display: block;
		padding: 9px 10px 10px;
		text-decoration: none;
		font-weight: bold;
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translate(-50%);
	}

	div.inner ul li a {font-size: 16px;}

	.logout {
		border-radius: 5px;
		font-size: 12px;
		padding: 10px;
		margin-right: 8px;
	}

	.kenmin_sp {
		width: 40%;
		margin: 0 auto 10px;
	}

}


/*画面の縦が短い時*/
@media screen and (max-height: 700px) {
	div.inner{
		height: 77vh;
		padding: 50px 0;
	}
	div.inner ul{height: calc(72vh - 28vh);}
}

@media screen and (max-width: 500px) {
	header{padding: 15px 10px;}
	div.inner {height: 72vh;}
	div.inner ul {height: calc(64vh - 28vh);}
	header .logo_h1{
		top: 14px;
		width: 54%;
	}
	header h1{
		width: 200px;
		height: 18px;
	}
}


/*=======================================================
*********************************************************

マイページTOPに戻る

*********************************************************
========================================================*/

.mypage_top{
	background: #127f3b;
	border-radius: 20px;
	width: 210px;
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding: 9px 10px 10px;
	position: fixed;
	right: 16px;
	margin-top: 20px;
	z-index: 11;
}
@media screen and (max-width: 768px) {
	.mypage_top {display: none;}
}
/*=======================================================
*********************************************************

全体のmv

*********************************************************
========================================================*/

.header_mv{
	background: #E5FF93;
	border-radius: 20px;
	color: #127f3b;
	width: calc(100% - 80px);
	margin: 0 auto 40px;
	padding: 80px 40px;
}
/*.header_mv h2{font-size: 32px;}*/

.header_mv h2 {
	font-size: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header_mv h2 p{display: inline-block;}
.header_mv h2 p::before{
	content: "";
	background: url(../img/common/kirakira.png)top center no-repeat;
	background-size: cover;
	width: 21px;
	height: 22px;
	display: inline-block;
	margin-right: 20px;
}
.header_mv h2 p::after {
	content: "";
	background: url(../img/common/kirakira.png)top center no-repeat;
	background-size: cover;
	width: 21px;
	height: 22px;
	display: inline-block;
	margin-left: 20px;
}

@media screen and (max-width: 768px) {
	.header_mv {
		border-radius: 10px;
		width: calc(100% - 40px);
		max-width: 90%;
		margin: 0 auto 20px;
		padding: 36px 20px;
	}
	.header_mv h2 p{
		font-size: 22px;
		position: relative;
	}

	.header_mv h2 p::before {
		width: 15px;
		height: 17px;
		position: absolute;
		margin: 0;
		top: 34%;
		left: -16%;
		transform: translate(-50%);
	}

	.header_mv h2 p::after {
		width: 15px;
		height: 17px;
		position: absolute;
		margin: 0;
		top: 34%;
		right: -23%;
		transform: translate(-50%);
	}
}

/*=======================================================
*********************************************************

全体コンテンツ

*********************************************************
========================================================*/
#contents_box{
	margin-top: 100px;
	padding: 95px 0 120px;
	background: #f6ffd9;
}
.inner_box {
	width: 1000px;
	max-width: 90%;
	margin: 0 auto;
}

@media screen and (max-width: 768px){
	#contents_box{
		margin-top: 76px;
		padding: 50px 0 60px;
	}
}

/*=======================================================
*********************************************************

　　footer

*********************************************************
========================================================*/
footer{
	width: 100%;
	text-align: center;
	overflow: hidden;
	background: #127f3b;
	padding-top: 80px;
}

footer>div{
	width: 1200px;
	max-width: 90%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

footer div>div{
	color: #ffffff;
	text-align: left;
}

footer strong{
	display: block;
	font-weight: bold;
	font-size: 18px;
	padding-bottom: 7px;
}

footer p > a{
	pointer-events: none;
	color: #ffffff;
	text-decoration: none;
}
footer p > a:hover{text-decoration: none;}

footer ul{
	padding: 0 0 30px 50px;
	font-size: 14px;
}
footer ul li{
	padding: 0 0 20px;
	line-height: 16px;
	text-align: left;
}
footer ul li:last-child{border-right: none;}
footer ul a{
	color: #FFF;
	text-decoration: none;
}

/*↓↓↓ お問い合わせボタン ↓↓↓*/
footer .contact{
	border-radius: 10px;
	background: #ffffff;
	color: #222222;
	font-size: 20px;
	width: 250px;
	max-width: 100%;
	padding: 0;
	position: relative;
}
footer .contact a{
	color: #127f3b;
	display: block;
	padding: 22px 36px 24px 46px;
	text-align: left;
	font-weight: bold;
}
footer .contact::after{
	content: "";
	background: url(../img/common/mail_icon.gif)top center no-repeat;
	display: inline-block;
	background-size: contain;
	width: 25px;
	height: 18px;
	position: absolute;
	right: 42px;
	top: 50%;
	transform: translateY(-50%)
}
footer .contact:hover::after{opacity: 0.7;}
/*↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑*/

footer small{
	width: 100%;
	display: block;
	padding: 20px 0;
	color: #FFF;
	font-size: 12px;
	font-weight: bold;
	position: relative;
	z-index: 2;
}
footer br.sp{display: none;}

@media only screen and (max-width: 768px){
	footer{padding-top: 50px;}
	footer>div {display: block;}
	footer div>div{margin-bottom:24px;}
	footer ul{padding: 0;}
	footer p > a{pointer-events: inherit;}

	/*↓↓↓ お問い合わせボタン ↓↓↓*/
	footer .contact {
		font-size: 16px;
		width: 180px;
		max-width: 100%;
		border-radius: 6px;
	}
	footer .contact a{
		padding: 16px 26px;
	}
	footer .contact::after{
		right: 25px;
		width: 22px;
		height: 16px;
	}
}