@charset "UTF-8"; 

body {	
	font-family: "Noto Sans JP Regular", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "Yu Gothic", 游ゴシック体, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif;
	font-size:16px; /* font-size: 1vw; */
	color:#444;
	line-height:1.8em;
	font-feature-settings: "palt"; /* 日本語フォントを自動カーニングする（文字間の字詰め） */
	letter-spacing:0.05em; /* 文字間隔 */
	height:100%;
	background-color:#f0f0e1;
	word-break: normal;
	hyphens: auto; /* ハイフンを入れる */
}

/*** bg color ***/
.bg_lightgreen {
	background-color:#a8d2bc !important;
}
.bg_aqua {
	background-color:#29abe2 !important;
 }
.bg_orange {
	background-color:#ffc285 !important;
 }
 .bg_blue {
	background-color:#0071bc !important;
 }

/*** Frame ***/
.container {
	margin:0;
}
.inner {
	width:calc(100% - 4rem);
	max-width:60rem;
	margin:2.0rem auto;	
}
main > .inner { 
	margin-top:0;	
}

header .inner {
	width:100%;
	max-width:calc(100% - 4rem);
	margin:1.0rem auto 1.0rem;
}
footer .inner {
	margin:2.5rem auto;	
}

/* 横幅1000px以下 */
@media screen and (max-width: 1000px) { /* 左右の余白を作る */
	.container > .inner {
		width:calc(100% - 2rem);
		margin-left:1rem;
		margin-right:1rem;
	}
}
/* 横幅640px以下 */
@media screen and (max-width: 640px) {
	.inner {
		width:calc(100% - 3rem);
		margin-left:auto;
		margin-right:auto;
	}
	.container.page main > .inner , .container.single main > .inner { /* 固定ページとシングルページ */
		margin:3rem auto;	
	}
}


/*** heading ***/
h1 {
	color:#333;
	font-size:2.0rem;
	line-height:1.3em;
	margin:0 0.2rem 2.5rem 0;
    padding:1em 1em;
}
.front h1 {
	margin:0 0 2.5rem 0;
    padding:0 1em;
}

h2 {
	color:#333;
	font-size:2.0rem;
	line-height:1.4em;
	margin:0 0 0.4em 0;
    padding:0;
}
h3 {
	color:#2F5736;
	font-size:1.4rem;
	line-height:1.4em;
	margin:0 0 0.5em 0;
    padding:0;
	border:none;
}
h3.flag {
	color:#333;
	background:#cde4ed;
	padding:0.4em 1.0em;
}
h4 {
	color:#2F5736
	font-size:1.0rem;
	padding:0 0 0.1em 0.1em;
	margin:0 0 0.6em 0;
}
h5 {
	position:relative;
	font-size:1.6rem;
	text-align: left;
	line-height:1.8em;
	color:#2F5736;
 	padding:0.5em 0 0.5em 1.8em;
	margin:0 0 0.2em 0;
	background:none;
	border-radius:0.2em;
}
h5::before {
	position:absolute;
	top:0.6em;
	left:0;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url('img/feather.png') no-repeat;
  background-size: contain;
}
h5.box {
	display:inline-block;
	font-size:1rem;
	line-height:1.8em;
	color:#fff;
	padding:0 0.8em;
	margin:0 0 0.2em 0;
	background:#2F5736;
	border-radius:0.2em;
}
h5.box::before {
  background:none;
}

/* 横幅640px以下 */
@media screen and (max-width: 640px) {
	h1 {
		font-size:1.8rem;
	}
	h2 {
		font-size:1.6rem;		
	}
}


ol.maru {
  margin: 0;
  padding: 0
}
ol.maru li  {
  list-style: none;
  padding-left: 1.3em;
  text-indent: -1.3em;
  margin:0;
}

/* page */
.page h1 {
	letter-spacing:0; /* 文字間隔 */
}
.page h2  {
	font-weight:bold;
	font-size:2.6rem;
	color:#05c5a1;
	line-height:1.2em;
	margin:0 0 0.4em 0;
    padding:0;
}
.page h3  {
	font-weight:bold;
	color:#05c5a1;
	line-height:1.4em;
	line-height:1.5em;
	margin:0 0 0.5em 0;
    padding:0;
	border:none;
}
.page h4  {
	color:#05c5a1;
	font-size:1.5rem;
	line-height:1.4em;
	font-weight:bold;
	margin:0;
	padding:0 0 0.5em 0;
	border:none;
}
.page h5  {
	display:inline-block;
	font-size:1rem;
	line-height:1.8em;
	padding:0 1.0em;
	margin:0 0 0.2em 0;
	border:thin solid #333;
}
/* 横幅640px以下 *** スマホ表示では見出し全般を小さくする */
@media screen and (max-width: 640px) {
	.page h2,.single h2 {
		font-size: 1.8rem;
	}	
	.page h3,.single h3 {
		font-size: 1.rem;
	}	
	.page h4,.single h4 {
		font-size: 1.2rem;
	}	
	.page h5,.single h5 {
		font-size: 1.0rem;
	}	
}
/*** front ***/
.front ol,.front ul {
	margin:1.5em 1em;
}


/*** header ***/
header {
	width:100%;
	height:auto;
	background:#fff;
}
header div.logo {
	display: flex;
    justify-content: space-between; /* 子要素を均等に配置します */
    align-items: center;
	width:50%;
	max-width:40rem; 
	padding:0;
	margin:0.5rem 0;
}
header div.logo a {
	margin:0 1.5%
}
header div.logo a img {
	width:auto;
	max-height:5rem;
}
header div.principle {
	width:45%;
	font-size:1.3rem;
	line-height:1.5em;
	font-weight:bold;
	margin:0.3rem 0 0.2rem;
}
header div.principle p {
	margin-bottom:0;
	text-align: left;
}

span.feather {
	position:relative;
  padding:0.5em 0 0.5em 1.7em;
}
span.feather::before {
	position:absolute;
	top:0.5em;
	left:0;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url('img/feather-white.png') no-repeat;
  background-size: contain;
}

/* 横幅640px以下 */
@media screen and (max-width: 640px) {
	header div.logo {
		text-align:center;
		width:100%;
	}
	header div.principle {
		width:100%;
		text-align:center;
		font-size:1.0rem;
	}	
	header div.principle.right {
		clear:both;
	}		
}

/*** footer ***/
footer {
	font-size:0.8rem;
	background:#ddd;
}
.title-footer {
	font-size:1.1rem;
	line-height:1.6em;
}
.copyright {
	font-size:0.8em;
	color:#fff;
	background:#999;
	padding:0.5em;
	margin:0 auto;
	text-align:center;
}
/* banner */
div.banner a img {
	height:4em;
	margin:0 2em 2em 0;
}
/* nav */
footer nav.mobile ul {
	width:100%;
}
footer nav.mobile ul li {
	float:left;
	width:50%;
	border-bottom: solid thin #ffffff;
	list-style: none;
	background:#ccc;
}
footer nav.mobile ul li a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	padding: 0.5em 1em;
	position: relative;
}
footer nav.mobile ul li a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-top: solid 2px #ffffff;
	border-right: solid 2px #ffffff;
	transform: rotate(45deg);
	position: absolute;
	right: 11px;
	top: 16px;
}
footer nav.desktop ul li {
	float:left;
	list-style: none;
	padding:0 1em;
}
/*** 横幅640px以下 ***/
@media screen and (max-width: 640px) {
	/*** footer ***/
	footer div.logo {
		width:100%;
		margin:0 auto;
	}
	footer div.logo img {
		width:50%;
	}
}

/******************/
/*** front page ***/
/******************/

/* mainImage */
.mainImage {
	margin:0 auto;
}
.mainImage .inner {
	width:100%;
	max-width:none;
	margin:0 auto;
	aspect-ratio: 5 / 2;
}
.mainImage .inner img {
	margin:0 auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position:center center;
}
/* 横幅640px以下 */
@media screen and (max-width: 640px) {
	.mainImage .inner {
		aspect-ratio: 2 / 1;
	}
}

/* title-01 */
.title-01 {
	color:#fff;
	background:#2F5736;
}
.title-01 h1 {
	color:#fff;
	background: none;
	margin-bottom:0.5rem;
	padding:0;
	box-shadow:none;
}
.title-01 h5 {
	color:#fff;
}

/* 横幅640px以下 */
@media screen and (max-width: 800px) {
	.title-01 {
		background-image:none ;
	}
}


section.lead  {
	text-align: center;
}
section.lead h1 {
	background:#fff;
	text-align:left;
}
section.lead p {
	text-align: left;
	font-size:1.2rem;
	line-height:1.8em;
}
/**************************/
/*** page *****************/
/**************************/


/* note */
.note-02,.note-03 {
	font-weight:bold;
	font-size:0.9rem;
	line-height:1.8em;
	padding:1em 1.5em;
	background:#cde4ed;
	border-radius:0.5rem;
}
.note-02 {
	overflow:visible;
    position: relative;
	display:inline-block;
	text-align:center;
	width:100%;
	max-width:30em;
    padding: 1.0em;
	background:#dbeaeb;
	margin-bottom:2em;
	border-radius:0.5em;
}
.note-02:before {
    position: absolute;
    top: 100%;
    left: calc(33% - 2em);
    height: 0;
    width: 0;
    border: solid transparent;
    content: "";
    margin-left: 1em;
    border-color: transparent;
    border-top-color: #dbeaeb;
    border-width:1em;
}
.note-03 {
	background:#fff5dc;
}
.mark-ex {
	overflow:visible;
    position: relative;
    padding: 1.0em;
	background:#dbeaeb;
	margin:1.5rem 0 2em 0.5rem;
	border-radius:0.5em;
}
.mark-ex img {
    position: absolute;
    top:-1.5rem;
    left:-0.5rem;
    width: 2.5rem;
}
div.line-blue {
	padding:0.3rem;
	background:#fff;
	border:0.15rem solid blue;
}
div.line-red {
	padding:0.3rem;
	background:#fff;
	border: 0.15em solid red;	
}