/* CSS Document */
/*　normalize
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
	display: block;
}
h1, h2, h3, h4, h5, h6, ul, ol, dl, table, pre {
	margin: 0;
}
/*　汎用的なテキストや部品
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
/* Web font Roboto
------------------------------------------------------------*/

/*body用*/
@font-face {
	font-family: 'Roboto';
	src: local('Roboto Light'), local('Roboto-Light'), url("../font/roboto/Roboto-Light.ttf") format('truetype');
}
/*400i　catch用*/
@font-face {
	font-family: 'Roboto';
	src: local('Roboto Italic'), local('Roboto-Italic'), url("../font/roboto/Roboto-Italic.ttf") format('truetype');
}

/*700 h2用*/
@font-face {
	font-family: 'Roboto';
	src: local('Roboto Bold'), local('Roboto-Bold'), url("../font/roboto/Roboto-Bold.ttf") format('truetype');
}


/*
------------------------------------------------------------*/
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/*本文
------------------------------------------------------------*/
p {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1.6em;
	margin-left: 0;
}
p:last-child {
	margin-bottom: 0;
}
/*リンク文字設定
------------------------------------------------------------*/
a {
	text-decoration: none;
	color: #0059a2;
}
a:visited {
	text-decoration: none;
	color: #0059a2;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a:hover {
	text-decoration: none;
	color : #008dff;
}
a:active {
	text-decoration: none;
	color : #008dff;
}
}
/*画像
------------------------------------------------------------*/

img.crisp-edges {/*画像がレティーナでモヤっとするのを防ぐ*/
	image-rendering: optimizeSpeed;
// Legal fallback image-rendering:-moz-crisp-edges;
// Firefox image-rendering:-o-crisp-edges;
// Opera image-rendering:-webkit-optimize-contrast;
// Chrome, Safari image-rendering:crisp-edges;
// CSS3 Proposed -ms-interpolation-mode:bicubic;
// IE8+
}
img {
	width: auto;
	max-width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下のすきま防止*/
}
a img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
		transition: all .3s;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a img {
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	background: none!important;
}
}
/*区切り線
------------------------------------------------------------*/
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border-top-width: 1px;
	border-right-width: 0;
	border-bottom-width: 0;
	border-left-width: 0;
	border-top-style: solid;
	border-top-color: #ede8de;
}
@media only screen and (min-width: 641px) {/*641px以上*/
hr {
	margin-top: 50px;
	margin-bottom: 50px;
}
}
/*文字
------------------------------------------------------------*/
/*---太文字---*/
.txt_bold {
	font-weight: bold;
}
/*---小さい文字---*/
.txt_s {
	font-size: 76%;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.txt_s {
	font-size: 75%;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.txt_s {
	font-size: 88%;
}
}
/*---住所など---*/
address {
	font-style: normal;
}
/*---キャッチコピー---*/
.catch {
font-weight: 400;
font-style: italic;
font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 122%;
	color: #bcbcbc;

}
a .catch {/*panelの中に使うよう*/
}
@media only screen and (min-width: 641px) {/*641px以上*/
.catch {
	font-size: 113%;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.catch {
	font-size: 125%;
}
}
/*---キャプション---*/
.caption {
	font-size: 76%;
	line-height: 1.3em;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.caption {
	font-size: 75%;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.caption {
	font-size: 88%;
}
}
/*---タグ---*/
a .category {
	background-color: #E2CDA1;
	margin-top: 1%;
	color: #FFF;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 1%;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	margin-right: 1%;
	line-height: 1;
}
a .category {
	font-size: 76%;
}
@media only screen and (min-width: 641px) {/*641px以上*/
a .category {
	font-size: 75%;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a .category {
	font-size: 88%;
}
a > .category:hover {
	background-color: #ffe466;
}
}
/*---アンダーライン付き文字　ポイント---*/
.point_line {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ffff99 60%);
}
/*上の余白（横幅から割り出す％分が上に余白として付く）
------------------------------------------------------------*/
.top_1pct {
	margin-top: 1%;
}
.top_2pct {
	margin-top: 2%;
}
.top_7pct {
	margin-top: 7%;
}
.top_10pct {
	margin-top: 10%;
}
.top_15pct {
	margin-top: 15%;
}
/*---スマホタブレットの時だけ上に7％すきまができる---*/
.spm-top_7pct {
	margin-top: 7%;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.spm-top_7pct {
	margin-top: 0;
}
}
/*---PCの時だけ上に7％すきまができる---*/
.pc-top_7pct {
	margin-top: 0;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.pc-top_7pct {
	margin-top: 7%;
}
}
/*下の余白（横幅から割り出す％分が下に余白として付く）
------------------------------------------------------------*/
.und_1pct {
	margin-bottom: 1%;
}
.und_2pct {
	margin-bottom: 2%;
}
.und_5pct {
	margin-bottom: 5%;
}

.und_7pct {
	margin-bottom: 7%;
}
.und_10pct {
	margin-bottom: 10%;
}
.und_15pct {
	margin-bottom: 15%;
}
/*---スマホタブレットの時だけ下に7％すきまができる---*/
.spm-und_7pct {
	margin-bottom: 7%;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.spm-und_7pct {
	margin-bottom: 0;
}
}
/*---PCの時だけ下に7％すきまができる---*/
.pc-und_7pct {
	margin-bottom: 0;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.pc-und_7pct {
	margin-bottom: 7%;
}
}
/*横幅パーセント指定
------------------------------------------------------------*/
.w30pct {
	width: 30%!important;
}
.w50pct {
	width: 50%!important;
}
.w75pct {
	width: 75%!important;
}
.w100pct {
	width: 100%!important;
}
/*パーセント指定
------------------------------------------------------------*/
.w_100-50pct {
	width: 100%!important;
	margin-right: auto;
	margin-left: auto;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.w_100-50pct {
	width: 50%!important;
}
}
/*中央揃え
------------------------------------------------------------*/
.center {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	display: block;
}
/*左画像文回り込み
------------------------------------------------------------*/
.fl {
	float: left;
	margin-right: 2%;
	margin-left: 0;
}
/*画像文回り込み
------------------------------------------------------------*/
.fr {
	float: right;
	margin-left: 2%;
	margin-right: 0;
}
/*文字左揃え
------------------------------------------------------------*/
.left {
	text-align: left!important;
}
/*文字右揃え
------------------------------------------------------------*/
.right {
	text-align: right!important;
}
/*回り込み停止<br class="clearfix"> 
------------------------------------------------------------*/
.clearfix {
	clear: both;
}
/*box-shadow 横の位置、縦の位置、ぼかし、広がり、影の色rgba(0, 0, 0, 透明度)
------------------------------------------------------------*/
.shadow {
	/* box-shadow */
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03);
}
/*.border
------------------------------------------------------------*/
.border {
	/* border */
	border: 1px solid #ede8de;
}
/*.borderとshadow　ボタンぽくしたいときに
------------------------------------------------------------*/
.border-shadow {
	/* box-shadow */
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03);
	/* border */
	border: 1px solid #ede8de;
}
/*スマホ（タブレット）とPCで表示切替
------------------------------------------------------------*/
.pc {
	display: none;
}
.sp {
	display: block;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.pc {
	display: block;
}
.sp {
	display: none;
}
}
/*youtube (googlemapはwidth="100%"で行けるがyoutubeはだめらしい）
------------------------------------------------------------*/
.youtube {
	position: relative;
	padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
	height: 0;
	overflow: hidden;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*フォーム周辺
------------------------------------------------------------*/
/*コンタクトフォームセブンは下の方にある*/

/*---アコーディオン---*/

#acMenu {
	margin-bottom: 30px;
}
#acMenu .acbtn {
	color: #fff;
	text-align: center;
	max-width: 100%;
	cursor: pointer;
	display: block;
	margin-bottom: 5px;
	border-radius: 3px;
	background-color: #222;
}
@media only screen and (min-width: 641px) {/*641px以上*/
#acMenu .acbtn {
	max-width: 300px;
}
}
#acMenu .accmt {
	color: #222;
	width: 100%;
	display: none;
	padding: 10px;
	border-radius: 3px;
	background-color: #FFF;
	border: 1px solid #222;
}
/*---必須---*/
.hissu {
	font-size: 76%;
	line-height: 1;
	color: #fff;
	background-color: #e2cda1;
	border-radius: 3px;
	text-align: center;
	vertical-align: text-top;
	display: inline-block;
	padding: 5px;
	width: 50px;
	margin-right: 5px;
}
/*フォームの部品はbodyのフォントを継承しないので、あえて設定が必要*/
input, select, textarea {
	font-family: sans-serif!important;
}
/*枠の指定*/
input, .input_2, textarea {
	background-color : #FFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ede8de;
	border-right-color: #ede8de;
	border-bottom-color: #ede8de;
	border-left-color: #ede8de;
	border-radius: 3px;
	padding: 1%;
	margin-bottom: 2%;
}
/*幅100％*/
input, textarea {
	width: 100%;
}
/*幅45％*/
.input_2 {
	width: 45%;
	margin-bottom: 5px;
	margin-right: 2%;
}
/*テキストエリア縦だけ伸びる*/
textarea {
	resize: vertical;
}
/*---WP外のサブミットボタン用---*/

.submit {
	width: 100%;
	color: #fff!important;
	font-size: 1.6em;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 2;
	display: block;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 3px;
	background-color: #222;
	border: 0;
}
 @media only screen and (min-width: 1025px) {/*1025px以上*/
.submit {
	transition: all .3s;
}
.submit:hover {
	background-color: #4bafff;
	color: #fff;
}
}
/*デカいラジオ*/
input[type="radio"] {
	border: 1px solid #ede8de;
	vertical-align: -8px;
	-webkit-appearance: none;
	position: relative;
	margin-right: 5px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-sizing: border-box;
	width: 26px;
	height: 26px;
	/*Other Browser*/
	background: #e0e0e0;
	/*For Old WebKit*/
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #ffffff), color-stop(1.00, #e2e2e2) );
	/*For Modern Browser*/
	background: linear-gradient( to bottom, #ffffff 0%, #e0e0e0 100% );
	margin-top: 5px;
	margin-bottom: 5px;
}
input[type="radio"]:checked {
	/*Other Browser*/
	background: #008dff;
	/*For Old WebKit*/
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #008dff), color-stop(1.00, #F1FEF2) );
	/*For Modern Browser*/
	background: linear-gradient( to bottom, #008dff 0%, #F1FEF2 100% );
	border: 1px solid #ede8de;
}
input[type="radio"]:checked:before {
	position: absolute;
	left: 1px;
	top: 16px;
	display: block;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	content: "";
	width: 10px;
	height: 4px;
	background: #ffffff;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: right center;
}
input[type="radio"]:checked:after {
	display: block;
	position: absolute;
	left: 9px;
	top: 16px;
	content: "";
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
	width: 16px;
	height: 4px;
	background: #ffffff;
	-webkit-transform: rotate(-53deg);
	-webkit-transform-origin: left center;
}
/*デカいチェックボックス*/
input[type="checkbox"] {
	border: 1px solid #ede8de;
	vertical-align: -8px;
	-webkit-appearance: none;
	position: relative;
	margin-right: 5px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	width: 26px;
	height: 26px;
	/*Other Browser*/
	background: #e0e0e0;
	/*For Old WebKit*/
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #ffffff), color-stop(1.00, #e2e2e2) );
	/*For Modern Browser*/
	background: linear-gradient( to bottom, #ffffff 0%, #e0e0e0 100% );
	margin-top: 5px;
	margin-bottom: 5px;
}
input[type="checkbox"]:checked {
	/*Other Browser*/
	background: #008dff;
	/*For Old WebKit*/
	background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #008dff), color-stop(1.00, #F1FEF2) );
	/*For Modern Browser*/
	background: linear-gradient( to bottom, #008dff 0%, #F1FEF2 100% );
	border: 1px solid #ede8de;
}
input[type="checkbox"]:checked:before {
	position: absolute;
	left: 1px;
	top: 16px;
	display: block;
	/* box-shadow 横の位置、縦の位置、ぼかし、広がり、影の色rgba(0, 0, 0, 透明度)*/
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3);
	content: "";
	width: 10px;
	height: 4px;
	background: #ffffff;
	-webkit-transform: rotate(45deg);
	-webkit-transform-origin: right center;
}
input[type="checkbox"]:checked:after {
	display: block;
	position: absolute;
	left: 9px;
	top: 16px;
	content: "";
	/* box-shadow 横の位置、縦の位置、ぼかし、広がり、影の色rgba(0, 0, 0, 透明度)*/
	box-shadow: 0 1px 5px 0 rgba(0,0,0,0.3);
	width: 16px;
	height: 4px;
	background: #ffffff;
	-webkit-transform: rotate(-53deg);
	-webkit-transform-origin: left center;
}


/*フォームのヒント文字の色*/
::-webkit-input-placeholder {
 color: #ccc;
}
::-moz-placeholder {
 color: #ccc;
 opacity: 1;
}
:-ms-input-placeholder {
 color: #ccc;
}
/*テーブル　デフォルト
------------------------------------------------------------*/
table {
	border-collapse: collapse;
}
th {
	font-weight: bold;
	vertical-align: top;
	text-align: left;
	border: 1px solid #ede8de;
	background-color: #f8f7f5;
	padding: 10px;
}
td {
	vertical-align: top;
	border: 1px solid #ede8de;
padding: 10px;
	background-color: #fff;
}
/*テーブル　横スクロールのために入れる<div class="table-scroll">
------------------------------------------------------------*/
.table-scroll {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
}
.table-scroll table {
	border-collapse: collapse;
	width: 100%;
}
.table-scroll th {
	white-space: nowrap;
}
.table-scroll td {
	white-space: nowrap;
}

/*テーブル　スマホ版　縦横入れ替え<table width="100%" class="tblol">をつけたものだけ反映
------------------------------------------------------------*/
@media only screen and (max-width:1024px) {/*1024px以下*/
.tblol table tr td > table {
	margin: 2%;
}
.tblol th, .tblol td {
	width: auto!important;
	display: block!important;
	border-top: none;
	/**/
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #ede8de;
	border-bottom-color: #ede8de;
	border-left-color: #ede8de;
}
.tblol th {
	text-align: left;
}
.tblol tr:first-child th {
	border-top: 1px solid #ede8de;
}
}
/*数字つきリスト・ポチつきリスト（英語は中黒とか難しいのでデフォルトを利用し余白だけ調整
------------------------------------------------------------*/
.list1 ol,.list2 ul {
	padding: 0;
	margin-bottom: 2%;
	margin-left: 1.3em;
}


/*関連リンクなど
------------------------------------------------------------*/
.moving {
	padding-left: 30px;
	line-height: 22px;
	padding-top: 0;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	background-image: url(../img/arrow.svg);
	background-repeat: no-repeat;
	display: block;
	clear: both;
	overflow: hidden;
}
/*ボタンなど
------------------------------------------------------------*/

.button a {
	width: auto;
	color: #fff!important;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	position: relative;
	z-index: 2;
	display: block;
	margin-right: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 3px;
	background-color: #222;
}
 @media only screen and (min-width: 1025px) {/*1025px以上*/
.button a::before, .button a::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button a, .button a::before, .button a::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.button a:hover {
	background-color: #4bafff;
	color: #fff;
}
.button a::before, .button a::after {
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #222;
	border-radius: 3px;
}
.button a::before {
	right: 0;
}
.button a::after {
	left: 0;
}
.button a:hover::before, .button a:hover::after {
	width: 0;
	background-color: #222;
}
}
/*画像右寄せ・左寄せ
------------------------------------------------------------*/
.photo1r_30pct, .photo1l_30pct {
	width: 30%;
	height: auto;
	margin-top: 0;
}
.photo1r_30pct {
	float: right;
	margin-left: 2%;
}
.photo1l_30pct {
	float: left;
	margin-right: 2%;
}
/*カラム
------------------------------------------------------------*/
/*---カラム　（スマホ1列　PC2列）---*/
.col_s1-m2 {
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
.col_s1-m2 > ul {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
.col_s1-m2 > ul:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
.col_s1-m2 > ul > li {
	width: 100%;
	list-style-type: none;
	margin-top: 0;
	margin-bottom: 7%;
}
.col_s1-m2 > ul > li:last-child {
	margin-bottom: 0;
}
.col_s1-m2 img {
	width: auto;
	height: auto;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.col_s1-m2 > ul {
	display: flex;/**/
	flex-wrap: wrap;/*折り返しができる*/
}
.col_s1-m2 > ul:last-child {
	margin-bottom: 0;
}
.col_s1-m2 > ul > li {
	width: 47%;
	margin-left: 6%;
	/*
		width: 49%;
	margin-left: 2%;
	*/
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;
}
.col_s1-m2 > ul > li:first-child {
	margin-left: 0;
}
}
/*---カラム　（スマホ1列　タブレット・PC3列）---*/
.col_s1-m3 {
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
.col_s1-m3 > ul {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}
.col_s1-m3 > ul:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
.col_s1-m3 > ul > li {
	width: 100%;
	margin-bottom: 7%;
	list-style-type: none;
	margin-top: 0;
}
.col_s1-m3 img {
	width: auto;
	height: auto;
}
@media only screen and (min-width: 641px) {/*641px以上*/
.col_s1-m3 > ul {
	margin-bottom: 7%;
	display: flex;/**/
	flex-wrap: wrap;/*折り返しができる*/
}
.col_s1-m3 > ul:last-child {
	margin-bottom: 0;
}
.col_s1-m3 > ul > li {
	width: 29.333%;
	margin-left: 6%;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 0;/*float: left;*//**/
}
.col_s1-m3 > ul > li:nth-child(1), .col_s1-m3 > ul > li:nth-child(4), .col_s1-m3 > ul > li:nth-child(7), .col_s1-m3 > ul > li:nth-child(10), .col_s1-m3 > ul > li:nth-child(13), .col_s1-m3 > ul > li:nth-child(16), .col_s1-m3 > ul > li:nth-child(19) {
	margin-left: 0;/*★*/
}
}
/*---カラムスマホ2列　PC2列　---*/
.col_2 {
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
.col_2 > ul {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 7%;
	display: flex;
}
.col_2 > ul:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
.col_2 > ul:last-child {
	margin-bottom: 0;
}
.col_2 > ul > li {
	width: 47%;
	margin-left: 6%;
	margin-right: 0;
	margin-top: 0;
	list-style-type: none;
	margin-bottom: 0;/**/
}
.col_2 > ul > li:nth-child(odd) {
	margin-left: 0;/*★*/
}
.col_2 img {
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.col_2 > ul {
	margin-bottom: 7%;
}
}
/*---カラムスマホ2列　PC4列 （汎用）---*/
.col_s2-m4 {
	margin-left: auto;
	margin-right: auto;
}
.col_s2-m4 > ul {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	display: flex;/**/
	flex-wrap: wrap;/*折り返しができる*/
}
.col_s2-m4 > ul:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
.col_s2-m4 > ul:last-child {
	margin-bottom: 0;
}
.col_s2-m4 > ul > li {
	width: 47%;
	margin-left: 0;
	margin-right: 6%;/*★*/
	margin-top: 0;
	margin-bottom: 7%;
	list-style-type: none;/**/
}
.col_s2-m4 > ul > li:nth-child(even) {
	margin-right: 0;/*★*/
}
.col_s2-m4 img {
	width: auto;
	height: auto;
	margin-bottom: 3px;/*写真と文字が近いので*/
}
@media only screen and (min-width: 641px) {/*641px以上*/
.col_s2-m4 {
}
.col_s2-m4 > ul {
	margin-bottom: 0;
}
.col_s2-m4 > ul > li {
	width: 20.5%;
	margin-left: 6%;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 7%;
}
.col_s2-m4 > ul > li:nth-child(1), .col_s2-m4 > ul > li:nth-child(5), .col_s2-m4 > ul > li:nth-child(9), .col_s2-m4 > ul > li:nth-child(13), .col_s2-m4 > ul > li:nth-child(17), .col_s2-m4 > ul > li:nth-child(21), .col_s2-m4 > ul > li:nth-child(25) {
	margin-left: 0;/*★*/
}
.col_s2-m4 img {
	margin-bottom: 7px;/*写真と文字が近いので*/
}
}
/*---カラムスマホ3列　タブレット・PC3列　（概要用）---*/
.col_3 {
	margin-left: auto;
	margin-right: auto;
	clear: both;
}
.col_3 > ul {
	padding: 0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	display: flex;/**/
}
.col_3 > ul:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
.col_3 > ul > li {
	line-height: 1.4;
	list-style-type: none;
	margin-bottom: 7%;
	width: 29.333%;
	margin-left: 6%;
	margin-right: 0;
	margin-top: 0;/**/
}
.col_3 img {
}
.col_3 > ul > li:nth-child(1) {
	margin-left: 0;/*★*/
}
/*パネル
------------------------------------------------------------*/
/* 使い方は、
	<li><a href="#"><div class="panel-○">
         <img src="画像">テキスト</div>
         </a></li>*/

/*---パネル共有基本設定---*/		 
.panel-a, .panel-b, .panel-c, .panel-d, .panel-e, .panel-k {
	width: auto;
	height: auto;
	display: block;
	overflow: hidden;/*margin: 0;*//*←これをいれると他での隙間がききにくくなる*/
}
 @media only screen and (min-width: 1025px) {/*1025px以上*/
a > .panel-a:hover, a > .panel-b:hover, a > .panel-c:hover, a > .panel-d:hover, a > .panel-e:hover, a > .panel-k:hover {
	display: block;
}
}
/*---囲み線○・余白×---*/
.panel-a {
	border: 1px solid #ede8de;
	padding: 0;
	background-color: #fff;
}
a>.panel-a {
	background-color: #fff;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a>.panel-a:hover {
	background-color: #ecf4fa;
}
}
/*---囲み線○・余白○---*/
.panel-b {
	border: 1px solid #ede8de;
	padding: 2%;
	background-color: #fff;
}
a>.panel-b {
	background-color: #fff;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a>.panel-b:hover {
	background-color: #ecf4fa;
}
}
/*---囲み「点」線○・余白○---*/ 
.panel-c {
	border: 1px dotted #ede8de;
	padding: 2%;
	background-color: #fff;
}
a>.panel-c {
	background-color: #fff;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a>.panel-c:hover {
	background-color: #ecf4fa;
}
}
/*---囲み線×・余白○・背景○---*/ 
.panel-d {
	padding: 2%;
	background-color: #ecf4fa;
}
a>.panel-d {
	background-color: #ecf4fa;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a>.panel-d:hover {
	background-color: #d4e9fc;
}
}
/*---囲み線○・余白○・背景×---*/ 
.panel-e {
	color: #008dff;
	padding: 2%;
	background-color: #fff;
	border: 5px dotted #008dff;
}
a>.panel-e {
	color: #0059a2!important;
	background-color: #fff;
	border: 5px dotted #008dff;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a>.panel-e:hover {
	color: #FFF!important;
	background-color: #008dff;
}
}
/*---囲み線×・余白○・背景○緊急用---*/ 
.panel-k {
	color: #fff;
	padding: 2%;
	background-color: #C00;
}
a>.panel-k {
	color: #FFF!important;
	background-color: #C00;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
a>.panel-k:hover {
	color: #FFF!important;
	background-color: #F00;
}
}
/*　全体のレイアウトなど
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/



/*body
------------------------------------------------------------*/

body {
	font-family: 'Roboto Light', Helvetica, Arial, sans-serif;

	color: #222;
	font-size: 82%;
	line-height: 2;/*単位を入れない*/
	margin: 0;
	padding: 0;
	background-color: #fff;
	/*スマホで横向きにしても文字がいい感じになる*/
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	/*英文字やURLが幅に収まりきらない場合に限定した改行方法*/
	overflow-wrap: break-word;
	
}
@media only screen and (min-width: 641px) {/*641px以上*/
body {
	font-size: 16px;/*16px＝100%=1em,14px=88%　サイト全体の基準となる文字の大きさ*/
	background-image: none;
}
}
/*ローディング
------------------------------------------------------------*/
.loading {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background: #fff;
	display: table;
	visibility: visible;/*★優先的に出てくる*/
}
/* アニメーションの位置 */
.animation {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

@keyframes loading-logo {
 0% {
opacity:0;
 transform: scale(1);
}
 10% {
opacity:1;
 transform: scale(1);
}
 60% {
opacity:1;
 transform: scale(1);
 filter: blur(0px);
}
 100% {
opacity:0;
 transform: scale(1.1);
 filter: blur(10px);
}
}
.loading-logo {
	animation : loading-logo 3s ease-out 0s infinite none running
}
/*ナビレイアウト
------------------------------------------------------------*/
/*---ヘッダー---*/
header {/*★背景はbodyでも設定している。コンテンツの黄色水玉背景は別途#containerで設定*/
	width: 100%;
	top: 0;
	padding: 0;
	display: block;
	visibility : visible;  /* 表示する */
	z-index: 999;
	position: fixed;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #afafaf;
	background-color: #FFF;
}
/*---ロゴ---*/
#site-id {
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 10px;
}
#site-id img {/*余白も入れて高さ50px、border-bottom1pxは入れない*/
	height: 40px;
}
@media only screen and (min-width: 641px) {/*641px以上*/
#site-id {
}
#site-id img {
	/*余白も入れて高さ70px、border-bottom1pxは入れない*/
	height: 60px;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
#site-id {
	margin-left: 40px;
}
}
/*--- ナビ--- */
.menuitem {/*ハンバーグボタン、フォント「13.12px」、余白も入れて高さ50px、border-bottom1pxは入れない*/
	width: 60px;
	text-align: center;
	line-height: 1em;
	color: #fff;
	display: block;
	float: right;
	cursor: pointer;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 8.44px;
	margin-bottom: 8.44px;
	margin-right: 10px;
	border-radius: 2px;
	background-color: #222;
}
.menu_on .menuitem {
	color: #FFF;
	background-color: #4bafff;
}
.menu_on .menuitem:before {
	content: "×";
}
.menu_off .menuitem {
}
.menu_off .menuitem:before {
	content: "menu";
}
@media only screen and (min-width: 641px) {/*641px以上*/
.menuitem {/*ハンバーグボタン、フォント「16px」、余白も入れて高さ70px、border-bottom1pxは入れない*/
	padding-top: 18px;
	padding-bottom: 18px;
	margin-top: 9px;
	margin-bottom: 9px;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.menuitem {/*ハンバーグボタン*/
	display: none;
}
.menu_on .menuitem {
	display: none;
}
.menu_off .menuitem {
	display: none;
}
}
.menu_on #g-menu {/*#g-menuという枠を表示する設定*/
	display: auto;
	visibility : visible;  /* 表示する */
}
.menu_off #g-menu {/*#g-menuという枠を表示しない設定*/
	display: none;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
.menu_off #g-menu {/*#g-menuという枠を表示する設定*/
	display: block;
	visibility : visible;  /* 表示する */
}
}
#g-menu {/*#g-menuという枠*/
	color: #fff;
	background-color: #222;
	width: auto;
	height: auto;
	display: block;
	visibility : visible;  /* 表示する */
	position: fixed;
	top: 51px;/*headerのボトムに1pxの線がある分を足す*/
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	overflow: auto;
	padding: 0;
	margin: 0;
	-webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 641px) {/*641px以上*/
#g-menu {/*#g-menuという枠*/
	top: 71px;/*headerのボトムに1pxの線がある分を足す*/
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
#g-menu {/*#g-menuという枠*/
	color: #222;
	background-color: #fff;
	top: 0;
	position: relative;
	background-image: none;/*headerとは別に背景設定はPCでは重複するので非表示*/
	float: right;
}
}
#g-menu ul {
	width: 100%;
	margin: 0;
	padding: 0;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
#g-menu ul {
	display: flex;
}
}
#g-menu ul li {/*スマホの時のリスト*/
	line-height: 1em;
	font-weight: normal;
	text-decoration: none;
	display: block;
	margin-right: auto;
	margin-left: auto;
	cursor: pointer;
	background-color: #fff;
	list-style-type: none;
	height: 100%;
}
#g-menu ul li a {/*全てのメニューout*/
	color: #fff;
	background-color: #222;
	font-weight: bold;
	width: auto;
	display: block;
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 40px;
	padding-right: 40px;
	position: relative;/*これを入れないと矢印が崩れる*/
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #afafaf;
	transition: 0.3s;/*ふわっとなる*/
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
#g-menu ul li a {/*全てのメニューout*/
	color: #222;
	background-color: #fff;
	padding-top: 27px;
	padding-bottom: 27px;
	border-bottom-width: 0;
}
}
/*子メニュー　左ぽち*/
#g-menu > ul > li > ul > li > a:before {
	display: block;
	color: #fff;
	content: "・";
	position: absolute;
	top: 25px;
	left: 40px;
}/**/
#g-menu ul li ul li a {/*子どもメニュー　out時*/
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 60px;
}
 @media only screen and (min-width: 1025px) {/*1025px以上*/
/*子メニュー　左ぽち*/
#g-menu > ul > li > ul > li > a:before {
	color: #222;
}
#g-menu ul li ul li a {/*子どもメニュー　out時*/
	padding-top: 27px;
	padding-bottom: 27px;
}
#g-menu ul li a:hover {/*全てのメニュー　over*/
	background-color: #F0F9FF;
}
}
/*コンテンツ側レイアウト
------------------------------------------------------------*/
/*--コンテンツ側を全部包む---*/
#container {
	height: auto;
	padding: 0;
	position: absolute;/*これで右ナビは安泰*/
	top: 51px;/*menuの高さ分*/
	left: 0;
	right: 0;
	background-color: #ffffff;
}
@media only screen and (min-width: 641px) {/*641px以上*/
#container {
	top: 71px;/*menuの高さ分*/
}
}
/*row
------------------------------------------------------------*/
.row-1, .row-2, .row-3 {
	width: auto;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
}
.row-1 {
	background-color: #fff;
}
.row-2 {
	background-color: #F1EFEB;
}
.row-3 {
	background-color: #eae7de;
}
.row-1:after, .row-2:after, .row-3:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
/*section 段落ごと囲むもの
------------------------------------------------------------*/
section {
	max-width: 1300px;
	width: auto;
	height: auto;
	padding-top: 0;
	padding-right: 6%;
	padding-left: 6%;
	padding-bottom: 14%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	/**/
  transform: translateY(20px);
transition: all 1s;
}

section:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
section:first-child {
	padding-top: 14%;
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
section {
	padding-bottom: 7%;
}
section:first-child {
	padding-top: 7%;
}
.top > section {
	padding-bottom: 14%;
}
.top > section:first-child {
	padding-top: 14%;
}
}
/*見出しの基本文字サイズ
------------------------------------------------------------*/
/*装飾は別で*/
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
font-family: 'Roboto', Helvetica, Arial, sans-serif;


	line-height: 1.4;
	overflow: hidden;
	clear: both;
}
h1 {
	font-size: 213%;
}
h2 {
}
h3, h4, h5, h6 {
}
h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	margin-top: 0;
}
h2 {
	font-size: 183%;
}
h3 {
	font-size: 137%;
}
h4 {
	font-size: 107%;
}
h5 {
	font-size: 91%;
}
h6 {
	font-size: 76%;
}
@media only screen and (min-width: 641px) {/*641px以上*/
h1 {
	font-size: 200%;
}
h2 {
	font-size: 175%;
}
h3 {
	font-size: 125%;
}
h4 {
	font-size: 113%;
}
h5 {
	font-size: 88%;
}
h6 {
	font-size: 75%;
}
}
@media only screen and (min-width: 1025px) {/*1025px以上*/
h1 {
	font-size: 225%;
}
h2 {
	font-size: 200%;
}
h3 {
	font-size: 138%;
}
h4 {
	font-size: 125%;
}
h5 {
	font-size: 113%;
}
h6 {
	font-size: 88%;
}
}
/*見出し　飾りと余白
------------------------------------------------------------*/
h1 {
}
h2 {
	/**/margin-top: 7%;
	margin-bottom: 2%;
}
h3, h4, h5, h6 {
	/**/margin-top: 3%;
	margin-bottom: 2%;
}
h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
	margin-top: 0;
}
h2 {
/*border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #008dff;
	padding-left: 2%;
	padding-top: 1.5%;
	padding-bottom: 1.5%;
	background-color: #FBFBFB;*/
}
h3 {
/*padding-left: 0;
	padding-top: 1%;
	padding-bottom: 1%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #008dff;*/
}
h4 {
/*padding-top: 1%;
	padding-bottom: 1%;
	padding-left: 1%;
	background-color: #FBFBFB;*/
	
}
h5 {
}
h6 {
}
/*footer
------------------------------------------------------------*/
footer {
	background-color: #f1f1f1;
	overflow: hidden;
	text-align: center;
}
/*footer囲むもの
------------------------------------------------------------*/
.footer section {
	max-width: 1900px;
	width: auto;
	height: auto;
	padding-top: 0;
	padding-right: 2%;
	padding-left: 2%;
	padding-bottom: 7%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.footer section:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
.footer section:first-child {
	padding-top: 7%;
}
/*フッター中のロゴ　
レティーナ用に2倍の画像のため、1/2に指定
------------------------------------------------------------*/
.f-logo img {
	max-width: 300px;
	margin-top: 0;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	padding: 0;
}
/*下の方のサイトマップ
------------------------------------------------------------*/
.stmp {
}
.stmp ul {
	padding: 2%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.stmp ul:after {/*overflow: hidden;の代わりに.clearfix:after*/
	content: "";
	clear: both;
	display: block;
}
.stmp ul li {
	width: auto;
	list-style-type: none;
	line-height: 3;
}
.stmp ul li:first-child:before {
	content: "｜";
	color: #666;
}
.stmp ul li:after {
	content: "｜";
	color: #666;
}
.stmp a {
	text-decoration: none;
}
/*ページ毎
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/*■TOPPAGE
=========================================================== */

/*main-visual
----------------------------------------------------------*/
.main-visual {
	background-size: cover;
	height: 50vh;
	background-image: url(../img/main-visual.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
/*---main-visual上の文字画像のための枠---*/
.main-visual .logo-catch {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50vh;
}
 @media only screen and (min-width: 1025px) {/*1025px以上*/
.main-visual {
	height: 100vh;
}
/*---main-visual上の文字画像のための枠---*/
.main-visual .logo-catch {
	height: 100vh;
}
}
/*---main-visual上の文字画像---*/
.main-visual .logo-catch img {
	z-index: 100;
	width: 100%;
}
/*■コンテンツ用
=========================================================== */

/*記事タイトル飾り専用
------------------------------------------------------------*/
#title-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	/**/
	width: auto;
	background-size: cover;
	background-color: #008dff;
	background-image: url(../img/main-visual.jpg);
	background-position: center center;
	margin: 0;
	padding: 7%;
	/*ぼかしの設定*/
	position: relative;
	z-index: 0;
	overflow: hidden;/*ブラー効果でボヤけた部分を非表示*/
}
#title-wrap:before {	/*ぼかしの設定*/
	content: '';
	background: inherit;/*#title-wrapで設定した背景画像を継承する*/
	-webkit-filter: blur(8px);
	-ms-filter: blur(8px);
	filter: blur(8px);
	position: absolute;
	/*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	z-index: -1;/*重なり順序を一番下にしておく*/
}
#title-wrap #title {
	width: 94%;
	background-color: #FFF;
	align-items: center;
	padding: 3%;
	opacity: 0.9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
	-moz-opacity: 0.90;
	text-align: center;
}

/*============================================================
印刷用
============================================================*/

/*印刷用に大きいグリッドを優先して表示するようにする場合
------------------------------------------------------------*/
@media print {
.show-for-small, .show-for-medium-up {
	display: none;
}
h1 {
	text-align: center;
	margin-right: auto;
	margin-left: auto;
}
}



/*  2023年9月24日　ADDED  */


.c3-flex-wrapper {
    display: flex;
    width: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    margin: 40px 0px;
    box-sizing: border-box;
}

.c3-flex-wrapper p{margin-bottom : 0}


img.sdgs-icon {
    max-width: 120px;
    display: block;
    margin: 10px auto;
}


.flex-sdgs{

	
}

.flex-sdgs div {
    width: 25%;
    box-sizing: border-box;
    padding: 0px 40px  20px 40px;
	
	
}

p.pr-title {
    color: #4772ae;
    margin-bottom: 5px;
}

.pr-btn {
    display: inline-block;
    background-color: #dce5f6;
    padding: 2px 19px;
    margin-top: 5px;
    border: 1px solid #e1d9d9;
}

.pr-wrap {
    border: 10px #ebebeb solid;
    padding: 15px;
}

@media(max-width : 481px ){

	.fl-inner {
    padding-bottom: 40px;
	}
	
	.c3-flex-wrapper {
    display: block;
	}
	
	.flex-sdgs div {
	width : auto ;
	padding: 0px 0px  40px 0px;
	
}
	
}