@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 fonts
----------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

/*----------------------------------------------------------------
 custom properties
----------------------------------------------------------------*/
:root {
	/* colors */
	--text-color		: #163052;
	--main-color		: #384357;
	--heading-color		: #339933;
	--accent-color		: #ef772b;
	--base-color		: #d9dddf;
	--invert-text-color	: #FFFFFF;

	/* width */
	--content-width		: 90vw;

	/* height */
	--header-height: 65px;

	/* font */
	--font-size			: 1.4rem;
	--font-sans			: 
							'Noto Sans JP',
							"ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro',
							"メイリオ",
							Verdana,
							"ＭＳ Ｐゴシック",
							sans-serif;
	--line-height		: 1.875;
}

@media screen and (min-width: 769px) {
:root {
	/* width */
	--content-width		: 700px;

	/* height */
	--header-height		: 80px;

	/* font */
	--font-size			: 1.6rem;
}
}
@media screen and (min-width: 920px) {
:root {
	/* width */
	--content-width		: 800px;

	/* height */
	--header-height		: 100px;
}
}
@media screen and (min-width: 1100px) {
:root {
	/* width */
	--content-width		: 1050px;

	/* height */
	--header-height		: 120px;
}
}
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	background			: var(--base-color);
	font-size			: var(--font-size);
	font-family			: var(--font-sans);
	line-height			: var(--line-height);
	color				: var(--text-color);
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	text-decoration		: none;
	color				: inherit;
}

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 769px) { [data-hide=pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 768px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 769px) { [data-show=pc]{ display: block; } }


/* fixed
-----------------------------------------------------*/
.fixed{
	position			: fixed!important;
	top					: 0px;
	z-index				: 10;
}

/* fixed-navi
-----------------------------------------------------*/
.fixed-navi{
	position			: fixed;
	right				: 0;
	bottom				: 0;
	z-index				: 10;
}
.fixed-navi li{ list-style: none; }
@media screen and (max-width: 768px) {
.fixed-navi{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	width				: 100vw;
}
.fixed-navi li		{ flex: 1; }
.fixed-navi li img	{ width: 100%; }
}
@media screen and (min-width: 769px) {
.fixed-navi li img	{ height: 50px; }
}

/* acd
-----------------------------------------------------*/
.acd dt{
	cursor: pointer;
}
.acd dd{
	background: rgba(255, 255, 255, 0.2);
	padding: 2rem;
}

/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
}

#wrap{
	width				: 100%;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	z-inde				: 1;
	clear				: both;
}
#header{
	--header-color: #63a762;

	position			: fixed;
	left				: 0;
	top					: 0;
	z-index				: 2;
	width				: 100%;
	height				: var(--header-height);
}
@media screen and (max-width: 768px) {
#header{ background: var(--header-color); }
}
@media screen and (min-width: 769px) {
#header{
	--logo-width: 200px;

	background			: var(--main-color);
}
}
@media screen and (min-width: 1050px) {
#header{
	--logo-width: 300px;
}
}


#contents{  }
#footer{
	background			: var(--main-color);
	color				: var(--invert-text-color);
}
@media screen and (max-width: 768px) {
#footer{ padding: 80px 0 15vw 0; }
}
/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	width				: var(--content-width);
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/
/* logo
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#header .logo{
	height				: var(--header-height);
	padding				: 0 0 0 5vw;
}
#header .logo a{
	display				: inline-block;
	position			: relative;
	top					: 12px;
}
#header .logo img{ height: 29px; }
}

@media screen and (min-width: 769px) {
#header .logo{
	position			: absolute;
	left				: 0;
	width				: var(--logo-width);
	height				: var(--header-height);
	background			: var(--header-color);
}
#header .logo a{
	position			: relative;
	display				: block;
	width				: 100%;
	height				: var(--header-height);
}
#header .logo a img{
	position			: absolute;
	top					: 45%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	height				: 27px;
}
}
@media screen and (min-width: 1050px) {
#header .logo a img{ height: 37px; }
}

/* navigation
-----------------------------------------------------*/
#header .navigation li{ list-style: none; }
#header .navigation li>span{ opacity: 0.3; }

@media screen and (max-width: 768px) {
#header .navigation{
	height				: calc(100vh - var(--header-height));
	padding				: 0 5vw;
	background			: var(--header-color);
}
#header .navigation nav{
	padding				: 15px 0 0 0;
	line-height			: 1;
}
#header .navigation .navi li			{ margin: 0 0 32px 0; }
#header .navigation .navi li img		{ height: 18px; }
#header .navigation .sub-navi li		{ margin: 0 0 22px 0; }
#header .navigation .sub-navi li img	{ height: 14px; }
}

@media screen and (min-width: 769px) {
#header .navigation{
	position			: relative;
	left				: var(--logo-width);
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: flex-end;
	flex-wrap			: nowrap;
	align-items			: center;
	width				: calc(100% - var(--logo-width));
}
#header .navigation ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#header .navigation nav{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column-reverse;
	padding				: 0 20px 0 0;
}
#header .navigation nav ul{ justify-content: flex-end; }

#header .navigation nav .navi li			{ margin: 0 0 0 9px; }
#header .navigation nav .navi li a{
	position			: relative;
	display				: block;
	padding				: 0 0 5px 0;
}
#header .navigation nav .navi li a:after{
	position: absolute;
	left: 50%;
	bottom: -10px;
	transform: translateX(-50%);
	content: "";
	display: inline-block;
	width: 20px;
	height: 15px;
	background: url(../images/angle-down-solid.svg) center center /contain no-repeat;
}
#header .navigation nav .navi li a:hover:after{
	opacity: 0.7;
}
#header .navigation nav .navi li.current a	{ border-bottom: 3px solid var(--header-color); }
#header .navigation nav .navi li.current a:after	{ display: none; }
#header .navigation nav .navi img			{ height: 12px; }

#header .navigation nav .sub-navi li	{ margin: 0 0 0 10px; }
#header .navigation nav .sub-navi img	{ height: 10px; }

#header .navigation .btn-navi img		{ height: var(--header-height); }
}

@media screen and (min-width: 920px) {
#header .navigation nav .navi img		{ height: 16px; }
#header .navigation nav .sub-navi		{ margin: 0 0 5px 0; }
#header .navigation nav .sub-navi li	{ margin: 0 0 0 12px; }
#header .navigation nav .sub-navi img	{ height: 12px; }
}

@media screen and (min-width: 1050px) {
#header .navigation nav				{ padding: 0 20px 0 0; }
#header .navigation nav .navi li	{ margin: 0 0 0 15px; }
#header .navigation nav .navi li a	{ padding: 0 0 7px 0; }
#header .navigation nav .sub-navi	{ margin: 0 0 15px 0; }
}

@media screen and (min-width: 1200px) {
#header .navigation nav				{ padding: 0 30px 0 0; }
#header .navigation nav .navi li	{ margin: 0 0 0 30px; }
}

/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
/* title
-----------------------------------------------------*/
#contents .title{
	text-align			: center;
	font-weight			: 700;
	font-size			: 3rem;
	color				: var(--heading-color);
}
@media screen and (min-width: 769px) {
#contents .title{ font-size: 4rem; }
}

/* title
-----------------------------------------------------*/
#contents .btn{
	display				: block;
	margin				: 0 auto;
	max-width			: 300px;
	padding				: 0.55em 0;
	border-radius		: 3em;
	background			: var(--accent-color);
	text-align			: center;
	text-decoration		: none;
	font-weight			: 700;
	color				: var(--invert-text-color);
}
#contents input.btn{
	border				: 0;
	width				: 150px;
}
@media screen and (min-width: 769px) {
#contents .btn{
	border-radius		: 4em;
	padding				: 0.66em 0;
}
#contents input.btn{ width: 300px; }
}

#contents .page-title{
	position			: relative;
	margin				: var(--header-height) 0 0 0;
	height				: 80px;
	background			: var(--main-color);
	text-align			: center;
	color				: var(--invert-text-color);
}
#contents .page-title>h1{
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%) ;
	width				: 100%;
}
#contents .page-title>h1>img	{ height: 2.2rem; }
@media screen and (min-width: 769px) {
#contents .page-title		{ height: 150px; }
#contents .page-title>h1>img	{ height: 3.5rem; }
}

/* row
-----------------------------------------------------*/
@media screen and (min-width: 769px) {
#contents .row{
	display				: flex;
	flex-direction		: row;
}
}

/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#footer .content{ margin: 0 0 30px 0; }
}
@media screen and (min-width: 769px) {
#footer .container	{ padding: 60px 0 0 0; }
#footer .content	{ padding: 30px 0; }
}
@media screen and (min-width: 1050px) {
#footer .container{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	padding				: 60px 0 0 0;
}
#footer .content{ padding: 0 0 0 12.4%; }
}

/* block
-----------------------------------------------------*/
#footer .block{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#footer .block h3	{ font-weight: 700; }
#footer .block li	{ list-style: none; }
@media screen and (max-width: 768px) {
#footer .block		{ margin: 0 0 15px 0; }
#footer .block h3	{ flex: 0 0 8rem; }
}
@media screen and (min-width: 769px) {
#footer .block		{ margin: 0 0 30px 0; }
#footer .block h3	{ flex: 0 0 10rem; }
}

/* logo
-----------------------------------------------------*/
@media screen and (max-width: 768px) {
#footer .logo{
	margin				: 0 0 40px 0;
	text-align			: center;
}
#footer .logo img{ max-width: 230px; }
}
@media screen and (min-width: 769px) {
#footer .logo		{ text-align: center; }
#footer .logo img	{ max-width: 230px; }
}
@media screen and (min-width: 1050px) {
#footer .logo{ flex: 0 0 230px; }
}

/* open
-----------------------------------------------------*/
#footer .open .text ul li span{ display: inline-block; }
#footer .open .text ul li span::after{ content: "　"; }
#footer .open .text a{ text-decoration: underline; }
#footer .open .text a:hover{ text-decoration: none; }

/* navigation
-----------------------------------------------------*/
#footer .navigation{
	border-top			: 1px solid #b1bfc8;
	padding				: 30px 0 0 0;
	font-weight			: 700;
	font-size			: 1.4rem;
}
#footer .navigation>ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
}
#footer .navigation>ul>li{ flex: 1; }
#footer .navigation>ul>li li{ margin: 0 0 5px 0; }
#footer .navigation>ul>li span{ opacity: 0.3; }
#footer .navigation>ul>li a{ text-decoration: none; }
#footer .navigation>ul>li span::before,
#footer .navigation>ul>li a::before{
	content				: "－";
	display				: inline-block;
	margin				: 0 5px 0 0;
	font-weight			: 400;
}

/* copy
-----------------------------------------------------*/
#footer .copy{ text-align: center; }
@media screen and (max-width: 768px) {
#footer .copy small{ font-size: 1rem; }
}
@media screen and (min-width: 769px) {
#footer .copy			{ padding: 30px 0; }
#footer .copy small		{ font-size: 1.2rem; }
}