@charset "utf-8";

/* *****************************
 * 色調
 * ベース2：紺碧こんぺき #3e62ad
 * ベース：藍色（あいいろ）#165E83
 * 薄色：水色鼠（みずいろねず）#E0EDF1
 *パターン：秘色（ひそく・ひしょく）#00708E
 
 * ベース：mediumvioletred #3e62ad
 * plum #E5F1F8
 * **************************** */


/* *****************************
 * 疑似クラス定義
 * **************************** */
:root {
  --ci-text: #FF3E7C;
  --ci-bg: #3e62ad;
  --ci-bg-hot: #FFA2C0;
  --ci-bg-light: #FFF0F5;
}

/* *****************************
 * 基本要素スタイル
 * **************************** */
*{
    /* 意図しない横幅が出ないように画面幅で強制改行を有効にする */
    /* word-break: break-all; */

	/* 単語単位改行 */
    word-break:break-word;
	
	/* 内側に線を引く */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

a {
	/* タグ区切り毎に改行*/
	word-break: keep-all;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif;
	/*
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	*/
	font-size: 14pt;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
}

header, nav, article, aside, section, footer {
	margin: 0em;
	padding:0em;
}

img {
	max-width:100%;
	height: auto;
	object-fit: cover;
}

a {
	text-decoration: none;
	color: #333;
}

a:hover {
	text-decoration: underline;
	color: #B83503;
}

small {
	font-weight: normal;
}

/* *****************************
 * 基本フォームスタイル
 * **************************** */
input, textarea, select, label {
	margin: 0em;
    padding: 0.2em;
    max-width: 100%;
	
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 13pt;
	line-height: normal;

	/* 内側に線を引く */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

input, textarea, select {
	border:1px solid #999;
	border-radius: 0.3em;
	-moz-border-radius: 0.3em;
	-webkit-border-radius: 0.3em;
	-o-border-radius: 0.3em;
	-ms-border-radius: 0.3em;
}

/*
select {
    vertical-align: middle;
	height: 2em;
}
*/

input[type=button]
,input[type=submit]
,input[type=reset]
,input[type=file] {
	padding:0.5em 1em;
	line-height: 1.2em;

    vertical-align: middle;
	cursor:pointer;
}

input[type=button] {
	border:#a9a9a9 1px solid;
	
	color:#333;
	font-weight:bold;
	background:#f5f5f5;
	/*text-shadow:1px 1px 0px #fff;*/
}



input[type=submit] {
	font-weight:bold;
	color:#fff;
	background-color:#C94761;
	border:#C94761 1px solid;
}

/*
input[type=submit] {
	font-weight:bold;
	color:#333;
	background:#f5f5f5;
	border:#a9a9a9 1px solid;
}
*/

input[type=reset] {
	border:#a9a9a9 1px solid;
	color:#333;
	font-weight:bold;
	background:#f5f5f5;
	/*text-shadow:1px 1px 0px #fff;*/
}


input[type=file] {
	border:#a9a9a9 1px solid;
	color:#333;
	font-weight:bold;
	background:#f5f5f5;
	/*text-shadow:1px 1px 0px #fff;*/
}

input[type=checkbox] {
    display: none;
}

input[type=checkbox]+label {
    margin: 0.2em;
    padding: 0.5em;
    display: inline-block;
	position: relative;
	text-indent:1.6em;
	line-height: 1.2em;
	word-break: keep-all;
	
    cursor: pointer;
	
    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
    background-color: #F0F0F0;

}

input[type=checkbox]+label::before {
/* チェックボックスの枠を描画 */
	content: "";
    display: inline-block;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    width: 1em;
    height: 1em;
    border: 1px solid #999;
	background:#FFF;
}

input[type=checkbox]:checked+label::after{
/* チェックを描画 */
	content: "";
	display: inline-block;
	position: absolute;
	top: 0.6em;
	left: 0.9em;
	width: 0.2em;
	height: 0.6em;
	transform: rotate(40deg);
	border-bottom: 3px solid #31A9EE;
	border-right: 3px solid #31A9EE;
}

input[type=checkbox]:checked+label {
    background: #31A9EE;
    color: #ffffff;
}

/* フォーカス装飾 */
input:focus, textarea:focus, select:focus,input+label:focus {
	opacity: 100%;
}

/* button以外のフォーカス装飾 */
input:not([type=submit]):focus, textarea:focus, select:focus,input+label:focus {
	border: 1px solid #66f;
}

/* ホバリング装飾 */
input:hover, textarea:hover, select:hover,input+label:hover {
	opacity: 70%;
}

/* submit以外のホバリング装飾 */
input:not([type=submit]):hover, textarea:hover, select:hover,input+label:hover {
	background-color: #ffa;
}

/* 入力済みの場合のスタイル */
input[type=text]:not(:placeholder-shown) {
	background-color: #f0ffff;
}

/* プレースホルダの説明文用スタイル */
input::-webkit-input-placeholder
,input::-moz-placeholder
,input:-ms-input-placeholder {
	/* chrome, fireox, ie対応 */
	color: #999;
	font-weight:normal;
}

/* 読み取り専用 */
input:-moz-read-only
,input:read-only {
	/* firefox, Blink/WebKit/Edge */
	background-color: #ccc;
}

/* *****************************
 * 印刷メディア用
 * **************************** */
@media print{
	/* 印刷しないクラス */
	.noprint {
		display:none;
	}
}

/* *****************************
 * 汎用クラス
 * **************************** */

/* 大きく */
.large {
	font-size:x-large;
	font-weight: bold;
}

/* 強制改行 */
.clear {
	margin: 0px;
	clear: both;
	padding: 0px;
}

/* 横中央 */
.center {
	text-align: center;
}

/* 角丸 */
.round {
	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
}

/* 自身を示す */
.me {
	font-size: larger;
	font-weight: bold;
}

/* *****************************
 * システムクラス
 * **************************** */

/* エラーの場合 */
.error {
	margin:1em;
	padding:1em;
	
	background:#fee;
	border:#666 solid 1px;
	
	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
}

/* 警告の場合 */
.warn {
	margin:1em;
	padding:1em;
	
	background:#ffe;
	border:#666 solid 1px;

	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
}

/* OKの場合 */
.complete {
	margin:1em;
	padding:1em;
	
	border:#666 solid 1px;

	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
}

/* *****************************
 * 装飾クラス
 * **************************** */


/* 支援活動・受賞 */
.volunteer, .awards {
	margin:0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	color:#FFF;
	background:#3C0;
}

/* 取り組み */
.initiatives {
	margin:0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	color:#FFF;
	background:#09F;
}

/* 地域貢献 */
.contributions {
	margin:0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	color:#FFF;
	background:#F90;
}

/* 時事 */
.events, .news {
	margin:0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	color:#FFF;
	background:#999;
}

/* *****************************
 * ヘッダ 
 * **************************** */
header {
	position:relative;
	overflow:visible;
	display:block;
	
	left:0em;
	top:0em;

	margin: 0px;
	padding: 0em 0em;
	z-index: 100;
	
	background:#fff;
	color: #000;
	clear: both;
	text-align: left;

	/*border-bottom: 0.2em solid #3e62ad;*/
	
}

header .inbox {
	position:relative;
}

header address {
	position:absolute;
	right:1em;
	bottom:0em; 
	font-style: normal;
	font-size: 14pt;
	/*font-weight: bold;*/
	
	color:#fff;
}


header address a {
	margin: 0.2em 0em;
	padding: 0.2em 0.5em;
	display:inline-block;
	
	/*font-size: 1.2em;*/
	/*text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);*/

	/*border:solid 2px #3e62ad;*/
	
	background-color:#3e62ad;
	color:#fff;
	
	opacity:80%;
	
    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
}

.inbox > a > img {
	margin-top:0.5em;
	margin-left:1em;
	vertical-align:middle;
}

header a {
	margin: 0em;
	padding: 0em;
}

header a:hover {
	text-decoration:none;
	color:#fff;
	opacity: 70%;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	header address {
		top:auto;
		bottom:0em; 
		position:initial;
		margin:0em 0.2em;
	}
	.inbox > a > img {
		margin: 0em;
		vertical-align:middle;
		max-width:100%;
	}
}


/* *****************************
 * header:nav 
 * **************************** */
header nav {
	margin: 0em;
	padding: 0em;
	
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 12pt;
	
	text-align:center;

	line-height: 4rem;
	height: 4rem;
		
	background-color:#3e62ad;
	/*background: linear-gradient(#3e62ad, #cca6bf);*/
	
	border-bottom: 0.2em solid #eee;
}

header #menuhead {
	display:none;
	overflow:hidden;
	
	background-color:#3e62ad;

    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	header nav {
		text-align:left;

		line-height:inherit;
		height:inherit;

	}
	header #menuhead {
		display:inline;
	}
	header nav #menubody {
		display:none;
	}	
}

header nav ul {
	margin: 0px;
	padding: 0px;
	/*font-weight: bold;*/
	/*background-color:#fff;*/
	
}

header nav > ul {
	display: flex;
}

header nav li {
	/*display:inline-block;*/
	margin: 0px;
	padding: 0px;
	list-style-type: none;
    /*position: relative;*/
	
}

/*親階層のみ幅を25%にする*/
header nav > ul > li {
    width: 16.66%;
}

/*子階層以降共通*/
header nav li li {
    height: 0;
    overflow: hidden;
    transition: .5s;
}

header nav li li a {
	background-color: #3e62ad;
	color: #fff;
	/*text-indent: 1em;*/
	border-top: 1px solid #eee;
}

header nav li:hover > ul > li {
    height: 4rem;
    overflow: visible;
}

header nav a {
	position: relative;
	display:block;
	margin: 0em;
	padding:0em 1em;
    overflow: hidden;
	height: 4rem;
	line-height: 4rem;
	/*background-color: var(--ci-bg-color);*/
	color: #fff;
	
}

header nav a::before {
  position:absolute;
  content: '';
  bottom: 0;
  left: 0;
  border: none;
  border-bottom: solid 0.8em #eee;
  border-right: solid 0.8em transparent;
}

header nav a:hover {
	/*background:#FFA2C0;*/
	/*background-color: var(--ci-bg-hot);*/
	background-color:#999;
	color: #FFF;
	/*text-decoration: none;
	opacity:70%;*/
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	header nav a {
		/*margin: 0em;
		padding: 0.5em 1em;*/
		display:block;
	}
	/*親階層のみ幅を100%にする*/
	header nav > ul > li {
		width: 100%;
	}
	/*子階層以降共通*/
	header nav li li {
   		overflow: visible;
   		height:inherit;
	}
	header nav ul li a {	
		border-top: 1px solid #eee;
	}
}

/* *****************************
 * main
 * **************************** */
main {
	margin:0em;
	padding: 0em;
	position: relative;
}

main h1 {
	margin: 0em;
	padding: 1em;
	text-align: left;
	
	line-height: normal;
	clear: both;

	/*
	color: #fff;
	background-color: #3e62ad;
	background: -moz-linear-gradient(top right, #3e62ad, #fff); 
	background: -webkit-linear-gradient(top right, #3e62ad, #fff); 
	background: linear-gradient(to top right, #3e62ad, #fff); 
	*/
	
	/* 風車:緑青色 */
	/*
	background-size: 20px 20px;
	background-color:#165E83;
	
	background-image:
	linear-gradient(45deg, #145578 25%, transparent 25%,
	   transparent 75%, #145578 75%, #145578),
	  linear-gradient(-45deg, #145578 25%, transparent 25%,
	   transparent 75%, #145578 75%, #145578);
   
	background-position: 0 0, 10px 10px;
	*/
	
	/* 斜めギンガムチェック */
	/*
	background-size: 20px 20px;
	background-color: #165E83;
	background-image: linear-gradient(45deg, #145578 25%, transparent 25%,
	 transparent 50%, #145578 50%, #145578 75%,
	 transparent 75%, transparent),
	linear-gradient(-45deg, #145578 25%, transparent 25%,
	 transparent 50%, #145578 50%, #145578 75%,
	 transparent 75%, transparent);
	*/
}

main h2 {
	margin: 0em;
	padding: 2em 1em;
	font-size:20pt;
	clear: both;
	
}

main dl {
	margin: 0em;
	padding: 0em;
	overflow: hidden;
	display:block;
	
	border-bottom: 1px solid #aaa;
}

main dl:last-child {
	border:none;
}

main dt {
	margin: 0;
    padding: 0.5em;
	display:block;
	color:#666;

	float:left;
	width:17em;
	text-align:right;

}

main dd {
	margin-left: 18em;
	text-align:left;
	
    padding: 0.5em;
    display: block;
	width:auto;
	height:auto;
	/* 単語改行 */
	word-wrap : break-word;
	overflow-wrap : break-word;

}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	main dt {
		float:none;
		width:100%;
		text-align:left;
	}
	main dd {
		margin: 0;
		text-align:right;
	}
}

/* *****************************
 * main:カテゴリナビ
 * **************************** */
main > nav {
	margin: 0em;
	padding: 1em;
	display:block;
	
	text-align: right;
	font-size: 10pt;
	background-color:#e7e7eb;
}

main > nav a {
	margin: 0em;
	padding: 0.2em 0.5em;
	color: #666;
}

main > nav a:hover {
	text-decoration:underline;
	color: #B83503;
}

main > nav ul {
	margin:0em;
	padding: 0em;
	float:left;
	overflow:hidden;
	list-style-type: none;
}

main > nav li {
	margin: 0em;
	padding: 0em;
	display:inline-block;
	border-right:1px dotted #666;
}

main > nav li:last-child {
	border:none;
}

/* *****************************
 * main:ブログナビ
 * **************************** */

main > nav.blog {
	clear: both;
	text-align:center;
	background:#fff;
	
	font-size:12pt;
	font-weight:bold;
}

main > nav.blog a {
	margin: 0.2em;
	padding: 1em;
	display:inline-block;

	color:#fff;
	
    background-color: #3e62ad;
    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
}

main > nav.blog a:hover {
	text-decoration:underline;
	/*color: #B83503;*/
	opacity:70%;
}

/* *****************************
 * main:ページ番号
 * **************************** */

main > nav.page {
	clear: both;
	text-align:center;
	background:#fff;
	
	font-size:12pt;
	font-weight:bold;
}

main > nav.page strong {
	padding: 0.5em 1em;
	display:inline-block;
}

main > nav.page a {
	padding: 0.5em 1em;
	display:inline-block;
	color:#fff;
	
    background-color: #3e62ad;
    border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -o-border-radius: 0.3em;
    -ms-border-radius: 0.3em;
}

main > nav.page a:hover {
	/*text-decoration:underline;
	border-bottom:#E0EDF1 solid 0.5em;
	*/
	opacity:70%;
}

/* *****************************
 * フッタ
 * **************************** */
footer {
	margin: 2em 0em 0em 0em;
	padding: 0em;
	display:block;
	
	clear:both;
	
	text-align:center;
	
}

footer address {
	margin: 0em;
	padding: 1em;
	font-style:normal;
	line-height: 1.5em;
	color:#fff;
	background-color:#3e62ad;
	/*
	border-top-width: 1em;
	border-top-style: solid;
	border-top-color: #5E6634;
	*/
}

footer address a {
	margin: 0em;
	padding: 0em;
	line-height: 1.5em;
	font-size: larger;
	color: #FFF;
}

footer ul {
	margin:0em;
	padding: 0em;
	list-style-type: none;
	text-align:center;
}

footer li {
	margin: 0em;
	padding: 0em;
	display:inline-block;
}

footer li a {
	margin: 0em;
	padding: 1em;
	color: #666;
	display:inline-block;
}

footer li a:hover {
	text-decoration:underline;
	color: #fff;
	background:#3e62ad;
	opacity:70%;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	footer address {
		font-size: 10pt;
	}
}

/* *****************************
 * Facebook対応
 * **************************** */
.fb-page {
	width:290px;
	height:300px;
}

.fb-like-box {
	width:290px;
	height:300px;
}

/* ***************************** *
 * 警告: 
 * ***************************** */
.warn {
	margin:1em;
	padding:1em;
	background-color: #FEE;

	border: 1px solid #FAA;
	border-radius: 0.2em;
	-moz-border-radius: 0.2em;
	-webkit-border-radius: 0.2em;
	-o-border-radius: 0.2em;
	-ms-border-radius: 0.2em;
}


/* ****************************** *
 * スプラッシュ
 * ****************************** */
.splash {
	margin: 0em;
	padding: 0em;
	/*height:calc(100vw / 3);*/
	overflow:hidden;
	position:relative;
	
	background-color:#e7e7eb;
	/*
	background: -moz-linear-gradient(top right, #3e62ad, #fff); 
	background: -webkit-linear-gradient(top right, #3e62ad, #fff); 
	background: linear-gradient(to top right, #3e62ad, #fff); 
	*/
}

/* スプラッシュの直下の画像 */
.splash > img {
	width:100%;
		
	/* 上下中央に合わせる */
	position: absolute;
	min-height:100%;
	min-width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

/* スプラッシュの直下のH1 */
.splash > h1 {
	background-color:#000;
	color:#fff;
	opacity:70%;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	.splash > h1 {
		font-size:smaller;
	}
}


/* ****************************** *
 * コンテンツ（ページ内容）
 * ****************************** */
.content {
	margin: 0em;
	padding: 0em 1vw;
	text-align:left;
}

.content .splash:before {
    content:"";
    display: block;
    padding-top: 40%; /* 高さを幅の75%に固定 */
}

/* ****************************** *
 * コンテンツ：標準DL
 * ****************************** */
 
/*
.content h2 {
	position:relative;
	margin: 2em 0em;
	padding: 1em 0em;
	display:block;
	clear:both;
	
	border-bottom: solid 3px #3e62ad;
}
*/

.content h2 {
	position: relative;
	background: #f4f4f4;
	margin: 2em 0em 2em 1em;
	padding: 0.5em 2em;
	font-size: 20pt;
	color: #474747;
	
	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;

	/*border-bottom: solid 3px #3e62ad;*/
}

.content h2:before {
	content: "∴";
	display: inline-block;
	position: absolute;
	padding: 0em;
	color: white;
	background: #ff6363;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	font-weight:bold;
	text-align: center;
	
	left: -1em;
	top: 50%;
	
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-radius: 50%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.29);
}

/*
.content h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #3e62ad;
  bottom: -3px;
  width: 20%;
}
*/

.content h3 {
	margin: 1em 0em;
	padding: 1em;
	border-bottom: 1px dotted #5E6634;
	display:block;
	clear:both;
}

/* ****************************** *
 * コンテンツ：マップ
 * ****************************** */
.content .map {
	position: relative;
    width: 100%;
}

.content .map::before {
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}

.content .map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ****************************** *
 * コンテンツ：連絡先
 * ****************************** */
.content .contact p {
	/* 単語内の禁則処理はせず、要素毎に改行 */
	word-break: keep-all;
}

/* ****************************** *
 * タイル
 * ****************************** */
.tile {
	margin: 0em;
	padding: 0em;
	width:100%;
	
	display:block;
	clear:both;
	
	text-align:center;
}

.tile dl {
	position:relative;
	margin: 0em;
	padding: 0em;
	
	width: calc(98vw / 3 - 0.5px);
	height: calc(98vw / 3 - 0.5px);

	float:left;
	
	border:none;
}

.tile dt {
	position:absolute;
	margin: 0em;
	padding: 0.5em;
	bottom:0em;
	left:0em;
	width:100%;
	z-index:2;
	overflow:hidden;
	text-align:center;
}

.tile dd {
	position: absolute;
	margin: 0em;
	padding: 0.5em;
	top: 0em;
	left: -1px;
	width: 100%;
	height: calc(100% - 2em);
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.tile img {
	min-height:100%;
	min-width:100%;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	.tile dl {
		width: calc(98vw / 2 - 2vw);
		height: calc(98vw / 2 - 2vw);
	}
	.tile dt {
		padding: 0em;
	}
	.tile dd {
		padding: 0em;
	}
}

/* ****************************** *
 * タイル:2モード
 * ****************************** */
.tile.two dl {
	width: calc(98vw / 2 - 2vw);
	height: calc(98vw / 2 - 2vw);
}

@media screen and (min-width: 1280px) {
/* 1280pxを超えるビュー */
	.tile.two dl {
		width: calc(1240px / 2);
		height: calc(1240px / 2);
	}
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	.tile.two dl {
		width: calc(98vw - 2vw);
		height: calc(98vw - 2vw);
	}
}

/* ****************************** *
 * タイル:3モード
 * ****************************** */
.tile.three dl {
	width: calc(98vw / 3 - 3vw);
	height: calc(98vw / 3 - 3vw);
}

.tile.three .a75 {
	height: calc((98vw / 3 - 3vw) *  9 / 16);
}

@media screen and (min-width: 1280px) {
/* 1280pxを超えるビュー */
	.tile.three dl {
		width: calc(1240px / 3);
		height: calc(1240px / 3);
	}
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	.tile.three dl {
		width: calc(98vw - 2vw);
		height: calc(98vw - 2vw);
	}

	.tile.three .a75 {
		height: calc((98vw - 2vw) * 9 / 16);
	}
}

/* ****************************** *
 * リスト
 * ****************************** */
.list dl {
	margin-top: 2em;
}

.list dl:first-child {
	/*margin-top: 0em;*/
}

.list dt {
	width:15em;
}

.list dd {
	margin-left: 16em;
}

.list a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	.list dt {
		float:none;
		width:100%;
		text-align:left;
	}
	.list dd {
		margin: 0em;
		text-align:right;
	}
}

/* ****************************** *
 * リスト：PR
 * ****************************** */
 
.list.pr {
	margin-top:1em;
	clear:both;
	overflow:hidden;
}

.list.pr * {
	/* 内側に線を引く */
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.list.pr > section {
	/* .list.news直下のsectionにスタイル適用 */
	/*margin-bottom:1em;*/
}
 
.list.pr dl {
	position: relative;
	margin: 2px;
	padding: 0em;
	width: calc(98vw / 4 - 1.5vw);
	height: calc((98vw / 4 - 1.5vw));
	float: left;
	
	/*border-left: solid 1px #E0EDF1;
	border-top: solid 1px #E0EDF1;
	*/
	
	background-color: #3e62ad;

}

.list.pr dt {
	position:absolute;
	margin: 0em;
	padding: 0em;
	width: 100%;
	
	left:0em;
	top:0em;

	height: calc(100% - 3em);
	text-align:center;

}

.list.pr dd {
	position:absolute;
	margin: 0em;
	width:100%;
	
	left:0em;
	bottom:0em;
	
	color:#fff;
	font-size:16pt;
	text-align:center;
	line-height:1.6em;

}

/*
.list.pr dl::before {
	content: '';
	position: absolute;
	display: inline-block;
	bottom: 0.5em;
	left: -1em;
	width: 1em;
	height: 1em;
	border-top: 0.8em solid #539D6D;
	border-left: 0.8em solid #539D6D;
	transform: rotate(135deg);
}

.list.pr dl::after {
	content: '';
}
*/

.list.pr img {
	position: absolute;
	
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	 -ms-transform: translate(-50%, -50%);
		 transform: translate(-50%, -50%);
}

.list.pr a:hover {
	text-decoration:none;
	opacity:80%;
	border-bottom:solid 0.5em #E0EDF1;
}

@media screen and (min-width: 1280px) {
/* 1280pxを超えるビュー */
	.list.pr dl {
		width: calc(1240px / 4 - 5px);
		height: calc(1240px / 4 - 5px);
	}
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	.list.pr dl {
		width: calc(98vw / 2 - 1.5vw);
		height: calc((98vw / 2 - 1.5vw));
	}
	
	.list.pr dd {
		font-size:14pt;
	}
}

/* ****************************** *
 * リスト：post
 * ****************************** */

.list.post > section {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ccc;
}

.list.post a:hover {
	text-decoration:none;
	opacity:80%;
	/*
	border-left:solid 0.5em #165E83;
	border-right:solid 0.5em #165E83;
	*/
}

/* ****************************** *
 * リスト：.postタグ配下の最初のsection
 * ****************************** */
 /*
.list.post section:first-of-type dl {
	font-size: larger;
	
	background-color:#3e62ad;
	border:none;
	
	opacity:80%;
		
	border-radius: 0.5em;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
	-o-border-radius: 0.5em;
	-ms-border-radius: 0.5em;
}

.list.post section:first-of-type dt {
	position:relative;
	width:50%;
	padding:0em;
	min-height:calc(100vw/3.5);

	text-align:center;
}

.list.post section:first-of-type dd {
	margin-left: 50%;
}

.list.post section:first-of-type a {
	color:#fff;
}

.list.post section:first-of-type img {

	position: absolute;
	min-height:100%;
	min-width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
*/

/* ****************************** *
 * コンテンツ：業務内容
 * ****************************** */
 
 .business dt {
	position:relative;
	background:#3e62ad;
	color:#fff;
	
	border-right:#fff solid;
	opacity:80%;
}

.business .tile dd {
	padding-top:3em;
}

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
	.list.post section:first-of-type dt {
		/* .list.postタグ配下の最初のsectionを指定し、その子dtを装飾 */
		position:relative;
		width:100%;
	}
	
	.list.post section:first-of-type dd {
		/* .list.postタグ配下の最初のsectionを指定し、その子dtを装飾 */
		margin-left: 0em;
	}
	.list.post section:first-of-type img {
		position: relative;
		top:0em;
		left:0em;
		transform:none;
	}

}

/* ****************************** *
 * 全体校正(最後に配置)
 * ****************************** */
@media screen and (min-width: 1280px) {
/* 1280pxを超えるビュー */
	header > nav > ul {
		padding-left:calc((100% - 1240px) / 2);
		padding-right:calc((100% - 1240px) / 2);
	}
		
	header > .inbox {
		margin-left:calc((100% - 1240px) / 2);
		margin-right:calc((100% - 1240px) / 2);
	}
		
	.view > * {
		/* viewクラス直下の属性にスタイル適用 */
		padding-left:calc((100% - 1240px) / 2);
		padding-right:calc((100% - 1240px) / 2);
	}
	
	footer ul {
		padding-left:calc((100% - 1240px) / 2);
		padding-right:calc((100% - 1240px) / 2);
	}
}

/* ****************************** *
 * CSSアイコン集
 * ****************************** */
.mail.icon {
  color: #000;
  position: absolute;
  margin-left: 2px;
  margin-top: 4px;
  width: 15px;
  height: 10px;
  border-radius: 1px;
  border: solid 1px currentColor;
}

.mail.icon:before {
  content: '';
  position: absolute;
  left: 7px;
  top: -4px;
  width: 1px;
  height: 10px;
  background-color: currentColor;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotate(-54deg);
          transform: rotate(-54deg);
}

.mail.icon:after {
  content: '';
  position: absolute;
  left: 7px;
  top: -4px;
  width: 1px;
  height: 10px;
  background-color: currentColor;
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  -webkit-transform: rotate(54deg);
          transform: rotate(54deg);
}