@charset 'utf-8';

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:wght@300;400;500;700&display=swap');

/* reset
------------------------------------------------ */
body,div,pre,p,a,img,form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,table,th,td,embed,object,
figure,figcaption {
	margin: 0;
	padding: 0;
}
h1,h2,h3,h4,h5,h6 { font-family: inherit; font-size: inherit; }
html { height: 100%; font-size: 62.5%; }
body {
	width: 100%;
	height: 100%;
	background: #fff;
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS P Gothic', Osaka, Arial, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #333333;
}

ul,ol { list-style: none; }
img { width: auto; height: auto; max-width: 100%; border: none; vertical-align: top; }
a { transition: all 0.2s ease; }
a:link { text-decoration: none; color: #333333; }
a:visited { text-decoration: none; color: #333333; }
a:hover { text-decoration: none; }

/* clearfix
------------------------------------------------ */
.clearfix {
	clear: both;
	*zoom: 1;
}
.clearfix:before,.clearfix:after {
	content: ' ';
	display: table;
}
.clearfix:after { clear: both; }

body.noscroll { overflow: hidden; }

/* hide show pc and sp */
.pc { display: block !important; }
.sp { display: none !important; }

	@media only screen and (max-width: 767px) {
	    .pc { display: none !important; }
	    .sp { display: block !important; }
	}

.roboto { font-family: "Roboto", serif; font-weight: 500; }

/* container
------------------------------------------------ */
#container {
	font-size: 10px;
	position: relative;
	display: block;
	overflow: clip;
	padding-top: 11em;
}
	.wrap { position: relative; display: block; max-width: 130em; margin: 0 auto; padding: 0 2.5em; z-index: 1; }
	.wrap-initial { position: initial; }

		@media only screen and (min-width: 767px) {
			.font-small #container { font-size: 9.3px; }
			.font-big #container { font-size: 11px; }
		}

		@media only screen and (min-width: 767px) and (max-width: 1440px) {
			#container { font-size: .6944vw; }
			.font-small #container { font-size: .6458vw; }
			.font-big #container { font-size: .7638vw; }
		}

		/*@media only screen and (min-width: 767px) and (min-height: 400px) and (max-height: 1170px) {
	        #container { font-size: .8547vh; }
	        .font-small #container { font-size: .79487vh; }
			.font-big #container { font-size: .94vh; }
	    }*/

		@media only screen and (max-width: 767px) {
			#container { padding-top: 6em; }
			.wrap { padding: 0 1.5em; }
		}

		@media only screen and (max-width: 376px) {
			#container { font-size: 2.65vw; }
		}

	/* section style */
	.section { position: relative; display: block; scroll-margin-top: 7em; }
	.section--block { display: block; position: relative; }
	.section--btn { display: block; position: relative; max-width: 28.4em; margin: 0 auto; margin-top: 10em; z-index: 3; text-align: center; }
	.section--btn a { position: relative; display: block; padding: 1.15em 1em; color: #fff; border-radius: 10em; overflow: hidden; background: linear-gradient(90deg, #00a175 3%, #a3ca0f 67%, #cddc35 100%); }
	.section--btn a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, #00a175 3%, #a3ca0f 67%, #cddc35 100%); opacity: 0; transition: opacity .3s ease; }
	.section--btn a span { font-size: 1.6em; line-height: 1.7; font-weight: bold; display: inline-block; position: relative; z-index: 2; }

		@media only screen and (min-width: 767px) {
			.section--btn a:hover:before { opacity: 1; }
		}

		@media only screen and (max-width: 767px) {
			.section { scroll-margin-top: 6em; }
			.section--btn { margin-top: 6em; }
		}

	/*hover show line */
	.c-linelink { display: inline-block; color: #2b2e38; line-height: 1.5; text-decoration: none }
    .c-linelink__txt { will-change: background-size; background: url(../img/share/line.png) no-repeat left bottom; background-size: 100% 1px }
    .c-linelink__txt.white { background-image: url(../img/share/line-white.png) }
    .c-linelink__txt.red { background-image: url(../img/share/line-red.png) }
    .c-iconlink span:after { content: ''; display: inline-block; vertical-align: -.1em; width: 1em; height: 1em; margin-left: .333em; background-image: url(../img/share/icon-link-r.svg); background-repeat: no-repeat; background-size: 100% 100%; transition: background-image .2s ease; }

    body.ie11 .c-linelink__txt { background: none !important; text-decoration: underline }
    body.device_pc .c-linelink:hover .c-linelink__txt,
    body.device_pc a:hover .c-linelink .c-linelink__txt { -webkit-animation: linelink 1s cubic-bezier(0.43, 0.05, 0.17, 1) 0s; animation: linelink 1s cubic-bezier(0.43, 0.05, 0.17, 1) 0s }
    body.ie11.device_pc .c-linelink:hover .c-linelink__txt,
    body.ie11.device_pc a:hover .c-linelink .c-linelink__txt { -webkit-animation: none; animation: none; text-decoration: none }

    .c-linelink--hidden .c-linelink__txt { -webkit-transition: background-size .5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s; transition: background-size .5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s; background-position: right bottom; background-size: 0 1px }

    body.ie11 .c-linelink--hidden .c-linelink__txt { text-decoration: none }
    body.device_pc .c-linelink--hidden:hover .c-linelink__txt,
    body.device_pc a:hover .c-linelink--hidden .c-linelink__txt { -webkit-animation: none; animation: none; background-position: left bottom; background-size: 100% 1px }
    body.ie11.device_pc .c-linelink--hidden:hover .c-linelink__txt,
    body.ie11.device_pc a:hover .c-linelink--hidden .c-linelink__txt { -webkit-transition: none; transition: none; text-decoration: underline }


/* header
------------------------------------------------ */
#header {
	font-size: inherit;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 11em;
	z-index: 99;
	background: #fff;
	transition: all .2s ease;
	box-shadow: 0 3px 10px rgba(204, 204, 204, .16);
}

	#header .wrap { max-width: 100%; }

		@media only screen and (max-width: 767px) {
			#header { height: 6em; }
		}

	#head-logo { float: left; width: 22.4em; display: block; position: relative; margin-top: 1em; transition: linear .2s; z-index: 2; }
	#head-logo a { display: block; }
	#head-logo a img { width: 100%; height: auto; position: relative; }

		@media only screen and (max-width: 767px) {
			#head-logo { width: 12.4em; margin: .5em 0; }
		}

	.head-more { position: absolute; right: 2.5em; top: 1.8em; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; transition: linear .2s; }
	.head-more--sns { display: flex; flex-wrap: wrap; align-items: center; }
	.head-more--sns li { display: inline-block; }
	.head-more--sns li:not(:last-child) { margin-right: .5em; }
	.head-more--sns li a { width: 3.2em; height: 3.2em; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #CCEAD8; }
	.head-more--sns li a svg { height: 1.8em; width: auto; }
	.head-more--mode,
	.head-more--modes { display: flex; flex-wrap: wrap; align-items: center; }
	.head-more--mode { margin-left: 2.2em; }
	.head-more--mode dt { font-size: 1.5em; font-weight: bold; color: #33AA64; }
	.head-more--modes li { cursor: pointer; display: inline-block; margin-left: .5em; }
	.head-more--modes li span { font-size: 1.6em; font-weight: bold; width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #33AA64; background: #CCEAD8; }
	.head-more--modes li.active span { color: #fff; background: #33AA64 }

	#head-menu { float: right; display: block; position: relative; margin-top: 6.5em; transition: linear .2s; }
	.head-menu--frame { position: relative; justify-content: center; transition: all .2s ease; }
		
		@media only screen and (min-width: 767px) {
			.head-menu--links { display: flex; flex-wrap: wrap; align-items: center; text-align: center; }
			.head-menu--links li { display: block; margin-left: 4em; }
			.head-menu--links li a { font-size: 1.6em; font-weight: bold; position: relative; display: block; }
			.head-menu--links li a:hover { color: #00953E; }

			.head-more--sns li a:hover,
			.head-more--modes li:hover span { color: #fff; background: #33AA64; }
			.head-more--sns li a:hover svg path { fill: #fff; }
			.head-more--sns li a:hover svg g g path { fill: #33AA64 }
		}

		@media only screen and (max-width: 767px) {
			#head-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; margin: 0; padding-top: 6em; background: none; transition: all .2s ease; z-index: 0; opacity: 0; visibility: hidden; box-sizing: border-box; background: #fff; }
			#head-menu:after { content: ''; display: block; width: 100vw; height: calc( 100vh - 7.3em ); position: absolute; left: 50%; top: 7.3em; transform: translateX(-50%); background-image: url(../img/share/bg-manu.png); background-repeat: no-repeat; background-size: cover; transition: background-image .2s ease; z-index: 0; }
			#head-menu:before { content: ''; display: block; width: 100vw; height: 126.4vw; position: absolute; left: 50%; top: 8.1em; transform: translateX(-50%); background-image: url(../img/share/bg-manu1.png); background-repeat: no-repeat; background-size: 100% 100%; z-index: 1; }
			.head-menu--frame { width: 100%; height: calc( 100vh - 6em ); display: block; padding: 11.7em 2.5em 16.5em; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; z-index: 2; }
			.head-menu--links { display: block; position: relative; z-index: 2; }
			.head-menu--links:after { content: ''; display: block; width: 100vw; height: 34.2vw; position: absolute; left: 50%; bottom: calc( -34.2vw + -2.8em ); transform: translateX(-50%); background-image: url(../img/share/bg-manu2.png); background-repeat: no-repeat; background-size: 100% 100%; z-index: 1; }
			.head-menu--links li { display: block; position: relative; z-index: 2; }
			.head-menu--links li:not(:last-child) { margin-bottom: 1.5em; }
			.head-menu--links li a { font-size: 1.5em; font-weight: bold; border: 2px solid #00953E; min-height: 4.66em; padding: 1em 2em; border-radius: 50em; background: #fff; position: relative; display: flex; align-items: center; box-sizing: border-box; }
			.head-menu--links li a:after { content: ''; display: inline-block; position: absolute; right: 1.33em; top: calc( 50% - .2em ); width: .4em; height: .4em; border-radius: 50%; background: #00953E; }

			.head-more { right: 6em; top: 50%; transform: translateY(-50%); z-index: 2; }
			.head-more--mode { display: none; }

			#head-hamb { font-size: inherit; position: absolute; right: 0; top: 0; z-index: 10; }
	        #head-hamb a { display: block; position: relative; width: 6em; height: 6em; z-index: 2; }
	        #head-hamb span { display: block; position: absolute; left: 50%; width: 2.5em; height: .2em; color: #000; background: #333; transform: translateX(-50%); transition: all .2s; border-radius: 10em; }
	        #head-hamb span:first-of-type { top: calc( 50% - .6em); }
	        #head-hamb span:last-of-type { bottom: calc( 50% - .6em); }

	        /* header action hamburger */
	        #header.h-show { box-shadow: none; background: none; }
	    	#header.h-show #head-menu { opacity: 1; visibility: initial; }
	        #header.h-show #head-hamb span:first-of-type { top: calc( 50% - .1em ); width: 2.5em; transform: translateX(-50%) rotate(-45deg); }
	        #header.h-show #head-hamb span:last-of-type { bottom: calc( 50% - .1em ); width: 2.5em; transform: translateX(-50%) rotate(45deg); }

	        body.h-showed { overflow: hidden; }
		}


	/* header scroll */
	@media only screen and (min-width: 767px) {
		#header.is-scrolled { height: 9em; transition: linear .2s; }
		#header.is-scrolled #head-logo { width: 19.8em; margin-top: .5em; }
		#header.is-scrolled .head-more { opacity: 0; visibility: hidden; pointer-events: none; }
		#header.is-scrolled #head-menu { margin-top: 3.2em; }
	}

/* main
------------------------------------------------ */
#main {
	display: block;
	position: relative;
	width: 100%;
}
	.pages { padding: 10em 0; }

		@media screen and (max-width: 767px) {
			.pages { padding: 3em 0 6em; }
		}

/* footer
------------------------------------------------ */
#footer {
	font-size: inherit;
	position: relative;
	display: block;
	width: 100%;
	z-index: 2;
}

	#ft-bot { padding: 1.7em 0; display: block; position: relative; background: #fff; border-top: 1px solid #ccc; }
	.ft-bot--block { max-width: 120em; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; }
	.ft-bot--links { display: flex; flex-wrap: wrap; align-items: center; }
	.ft-bot--links li { display: block; margin-right: 3em; }
	.ft-bot--links li a { font-size: 1.3em; line-height: 1.7; display: inline-block; }
	.ft-bot--links li a[target="_blank"]:after { content: ''; display: inline-block; vertical-align: -.15em; width: 1.14em; height: 1.14em; margin-left: .333em; background-image: url(../img/share/icon-links-b.svg); background-repeat: no-repeat; background-size: 100% 100%; transition: background-image .2s ease; }
	.ft-bot--copy { font-family: "Roboto", serif; font-size: 1em; }

		@media screen and (min-width: 767px) {
			.ft-bot--links li a:hover { color: #00953E; }
			.ft-bot--links li a:hover:after { background-image: url(../img/share/icon-links-g.svg); }
		}

		@media screen and (max-width: 767px) {
			#ft-bot { padding: 1.4em 0; }
			.ft-bot--block { flex-direction: column; justify-content: center; }
			.ft-bot--links { justify-content: center; margin-top: -1.5em; margin-bottom: 1.2em; }
			.ft-bot--links li { margin: 1.5em 1.5em 0; }

			#footer #breadcrumb { display: flex; }
		}