@charset "utf-8";

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

@font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 400;
	src:
		local('NotoSansJP-Regular.otf'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Regular.otf) format('opentype');
 }

 @font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: 500;
	src:
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Medium.otf) format('opentype');
 }

 @font-face {
	font-family: 'Noto Sans Japanese';
	font-style: normal;
	font-weight: bold;
	src:
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff2) format('woff2'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.woff) format('woff'),
		url(//fonts.gstatic.com/ea/notosansjapanese/v6/NotoSansJP-Bold.otf) format('opentype');
 }

body {
	color: #282828;
	font-family: 'Noto Sans Japanese', "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
	word-wrap : break-word;
	overflow-wrap : break-word;
	-webkit-text-size-adjust: 100%;
	   -moz-text-size-adjust: 100%;
	    -ms-text-size-adjust: 100%;
	     -o-text-size-adjust: 100%;
	        text-size-adjust: 100%;
	-moz-osx-font-smoothing: grayscale;
	 -webkit-font-smoothing: antialiased;
}
.modePC.modeSP {
	opacity: 0;
}
.modePC {
	font-size: 16px;
	line-height: 2;
	letter-spacing: .1em;
}
.modeSP {
	font-size: 24px;
	line-height: 43px;
	letter-spacing: .05em;
}
.androidUA * {
	max-height: 999999px;
}

em {
	font-weight: bold;
}

img {
	vertical-align: top;
}

svg {
	fill: #282828;
}

.svgs {
	height: 0;
	width: 0;
	position: absolute;
}

/* structure
==========================================*/
.wrapper {
	background-color: #fafafa;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.modePC .wrapper {
	min-width: 1100px;
	padding: 50px 0 200px 0;
	position: relative;
}
.modeSP .wrapper {
	width: 750px;
	padding: 100px 0;
	margin-right: auto;
	margin-left: auto;
}

.wrapper .box,
.wrapper .wide {
	margin-right: auto;
	margin-left: auto;
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

.modePC .box {
	width: 1100px;
}

.modePC .wide {
	min-width: 1100px;
}

/* common
==========================================*/
.modeSP h2,
.modeSP p,
.modeSP li {
	 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=);
}

.modePC .hiddenPC,
.modeSP .hiddenSP {
	display: none !important;
}

/* link */
:hover{} /* Fixes for IE10 */

a {
	color: #282828;
}

/* clearfix */
.clear:after {
	content: "";
	display: block;
	clear: both;
}

h2{
	text-align: center;
	font-weight: bold;
	line-height: 1;
	letter-spacing: .02em;
	position: relative;
}
.modePC h2{
	font-size: 32px;
	margin-bottom: 70px;
}
.modeSP h2{
	font-size: 44px;
	margin-bottom: 120px;
}

h2:after {
	content: "";
	display: block;
	background-color: #00983e;
	position: absolute;
	top: 50%;
	left: 50%;
}
.modePC h2:after {
	width: 80px;
	height: 8px;
	margin-top: 44px;
	margin-left: -40px;
}
.modeSP h2:after {
	width: 80px;
	height: 12px;
	margin-top: 44px;
	margin-left: -40px;
}


/* mainvisual
==========================================*/
.mainvisual{
	width: 100%;
	background: #00983e;
	text-align: center;
}
.modePC .mainvisual{
	height: 500px;
}
.modeSP .mainvisual{
	height: 600px;
}

.mainvisual .inner{}
.modePC .mainvisual .inner{
	width: 1100px;
	margin: 0 auto;
}
.modeSP .mainvisual .inner{
	width: 100%;
}

.mainvisual h1{
	color: #fff;
}
.modePC .mainvisual h1{
	padding-top: 70px;
}
.modeSP .mainvisual h1{
	padding-top: 120px;
}

.modePC .mainvisual h1 .jp{
	font-size: 56px;
}
.modeSP .mainvisual h1 .jp{
	font-size: 56px;
}

.modePC .mainvisual h1 .en{
	font-size: 24px;
}
.modeSP .mainvisual h1 .en{
	margin-top: 20px;
	font-size: 32px;
}

.mainvisual img{}
.modePC .mainvisual img{}
.modeSP .mainvisual img{
	margin-top: 30px;
	margin-left: -20px;
	width: 40%;
}


/* box00
==========================================*/
.box00{}
.modePC .box00{
	width: 900px;
	margin: 0 auto;
	padding-top: 70px;
}
.modeSP .box00{
	width: 630px;
	margin: 0 auto;
}

.box00 .jp{}
.modePC .box00 .jp{
	margin-bottom: 50px;
}
.modeSP .box00 .jp{
	margin-bottom: 50px;
}

.box00 .btn{
	display: block;
}
.modePC .box00 .btn{
	margin-top: 50px;
	width: 200px;
}
.modeSP .box00 .btn{
	margin-top: 50px;
	width: 400px;
}

.btn{
	padding: 0.5em 1em;
	text-align: center;
	text-decoration: none;
	background: #00983e;/*ボタン色*/
	color: #FFF;
	border-bottom: solid 4px #346f46;
	border-radius: 3px;
	font-weight: bold;
}
.modePC .btn:active {/*ボタンを押したとき*/
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
	border-bottom: none;
	margin-bottom: 4px;
}


/* box01
==========================================*/
.box01{}
.modePC .box01{
	width: 1100px;
	margin: 0 auto;
	padding-top: 150px;
}
.modeSP .box01{
	width: 630px;
	margin: 0 auto;
	padding-top: 200px;
}

.box01 ul{
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap; /* 折り返し */
}
.modePC .box01 ul{}
.modeSP .box01 ul{}

.box01 li{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.modePC .box01 li{
	margin: 33px;
	width: 300px;
	height: 300px;
}
.modeSP .box01 li{
	margin: 5px;
	width: 300px;
	height: 300px;
}

.box01 li img{}
.modePC .box01 li img{
	width: 250px;
	height: auto;
}
.modeSP .box01 li img{
	width: 250px;
	height: auto;
}



/* box02
==========================================*/
.box02{}
.modePC .box02{
	width: 600px;
	margin: 0 auto;
	padding-top: 150px;
}
.modeSP .box02{
	width: 630px;
	margin: 0 auto;
	padding-top: 200px;
}

.box02 dl{}
.modePC .box02 dl{
	padding-top: 50px;
}
.modeSP .box02 dl{}

.box02 dt{
	font-weight: bold;
}
.modePC .box02 dt{
	margin-bottom: 10px;
}
.modeSP .box02 dt{
	margin-bottom: 20px;
	font-size: 30px;
}

.box02 dd{}
.modePC .box02 dd{
	margin-bottom: 70px;
	font-size: 14px;
}
.modeSP .box02 dd{
	margin-bottom: 70px;
	font-size: 26px;
}

.box02 dd .jp{}
.modePC .box02 dd .jp{}
.modeSP .box02 dd .jp{}

.box02 dd .en{}
.modePC .box02 dd .en{
	margin-top: 10px;
}
.modeSP .box02 dd .en{}



/* footer
==========================================*/
footer{
	background-color: #00983e;
	text-align: center;
	color: #fff;
}
.modePC footer{
	padding: 70px 0;
}
.modeSP footer{
	padding: 120px 0;
}


footer ul {
	font-size: 0;
}
.modePC footer ul {
	margin-bottom: 50px;
}
.modeSP footer ul {
	margin-bottom: 50px;
}

footer li { display: inline-block; }
.modePC footer li { margin: 12px 12px 0; }
.modeSP footer li { margin: 40px 22px 0; }

.modePC footer a {
	-webkit-transition: opacity .3s;
	        transition: opacity .3s;
}
.modePC footer a:hover {
	opacity: .6;
}

footer svg{
	color: #fff;
	fill:#fff;
}

.modePC footer svg {
	height: 36px;
	width: 36px;
}
.modeSP footer svg {
	height: 52px;
	width: 52px;