@charset "utf-8";

/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after { content:'';content:none;}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration: line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0;}
input, select{vertical-align:middle;}

/*======================================
	カスタムプロパティ
======================================*/
:root {
	
	--headerMargin: 56px;
	--fontawesome: "Font Awesome 6 Free";
	--contentWidth: 1100px;
	
	--colorBlue01:		#006499; 	/* 通常 */
	--colorBlue02:		#00466b;	/* ちょっと濃いめ */
	--colorBlue03:		#00304a;	/* 更に濃いめ */
	
	--colorRed01:		#f00000;	/* 通常 */
	
	--colorCaution01:	#feffeb;	/* 注意書き01 */
	--colorCaution02:	#fffde3;	/* 注意書き02 */

}


/*======================================
	基本スタイル
======================================*/
html {
	font-size: 62.5%;
}

body {
	color: #333;
	line-height: 1.4;
	min-width: var( --contentWidth );
	font-size: 1.4rem;
	letter-spacing: 0.04rem;
	margin: 0;
	
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	
}

body, textarea, input, pre {
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
}


*, *::before, *::after {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

a { text-decoration: none; }

ul { margin: 0; padding: 0; }

p {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1.4;
}

sup {
	vertical-align: super;
	font-size: small;
}

li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	-webkit-backface-visibility: hidden;
}

.nblur {
	-webkit-backface-visibility: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }


/*======================================
	debug
======================================*/
.debug {
}

.debug .disp {
	position: fixed;
	font-size: .8rem;
	width: 200px;
	height: 100px;
	background: #eee;
	bottom: 50px;
	
	z-index: 10000;
}
/*
.line1,
.line2 {
	position: fixed;
	width: 100%;
}

.line1 { border-top: 1px #f00 solid; }
.line2 { border-top: 1px #00f solid; }
*/

/*======================================
	breadcrumb
======================================*/
#breadcrumbList {
	position: relative;
	padding: 10px 0;
	color: #000;
	background: #fff;

}

/* リスト親 */
#breadcrumbList .list {
	display: flex;
}

#breadcrumbList .list .item {
	display: inline-flex;
	align-items: center;

}

#breadcrumbList .list .item:not(:last-of-type):after {
	content: "\f054";
	font-weight: bold;
	line-height: 1;
}


#breadcrumbList .list .item a {
	padding: 5px 10px;
	color: #000;
	font-size: 1.6rem;
}


/*======================================
	アイコン設定
======================================*/

/* 疑似要素設定 */
.iconfas::before,
.iconfas::after,
.iconfas *::before,
.iconfas *::after,
.iconfas_b *::before,
.iconfas_f *::after {
	font-family: "Font Awesome 6 Free";
}


/* 疑似要素設定(brand) */
.iconfab *::before,
.iconfab *::after,
.iconfab_b *::before,
.iconfab_f *::after {
	font-family: "Font Awesome 6 Brands";
}


/* 疑似要素設定 */
.gicon::before,
.gicon::after,
.gicon *::before,
.gicon *::after,
.gicon_b *::before,
.gicon_f *::after {
	font-family: 'Material Icons';
}


/*======================================
	マージン
======================================*/
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb50 { margin-bottom: 50px; }
.mb80 { margin-bottom: 80px; }

/*======================================
	画像の比率設定
======================================*/

/* 4:3 */
[class*="img-ratio"] {
	position: relative;
	display: block;
	width: 100%;
}

[class*="img-ratio"] img {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0;
	left: 0;
}

[class*="img-ratio"]::before {
	content: "";
	display: block;
}

/* 4:3 */
.img-ratio01::before { padding-top: 75%; }

/* 16:9 */
.img-ratio02::before { padding-top: 56.25%; }


/*======================================
	コンテンツ調整
======================================*/

.cMiddle {
	width: var(--contentWidth);
	margin: 0 auto;
	padding: 0 10px;
}

/*======================================
	基本コンテンツ
======================================*/

/* コンテンツ wrapper */
[class*="content-"] .contentWrap {
	position: relative;
	padding: 0 10px;
	z-index: var(--priorityContentWrap)
}



/*======================================
	コメントボックス
======================================*/
[class*="commentBox"] p {
	font-size: 1.8rem;
}

[class*="commentBox"] .mb {
	margin-bottom: 16px;
}

[class*="commentBox"] .pcmb {
	margin-bottom: 10px;
}


/* 自動マージン */
[class*="commentBox"].automb p:not(:last-child) {
	margin-bottom: 16px;
}



/*======================================
	flexbox
======================================*/
.fbox {
	display: flex;
	-wekbit-flex;
}


/*======================================
	サブコメントボックス
======================================*/
.subComment {
	border: 1px #aaa dotted;
	padding: 10px 20px;
	background: #fffbe3;
	
	border-radius: 5px;
}


/*======================================
	中央
======================================*/
.posMid {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

/*======================================
	その他
======================================*/
/* 表示,非表示 */
.chide { visibility: hidden; }
.cshow { visibility: visible; }

/* PCのみ表示 */
.sponly { display: none; }

/* font */
.fset01 {
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
}


/*---------------------------
　矢印
---------------------------*/

/* arrow01 */
.arrow01::before {
	position: absolute;
	content: "\f105";
	color: #f00;
	font-weight: bold;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transition: .4s;
}

.arrow01:hover:before {
	transform: translate(5px, -50%);
}

/* color */

/* 赤系 */
.sr00 { color: #f22; }

/* 青系 */
.sb00 { color: #00c; }

/* オレンジ系 */
.so00 { color: #ff9500; }

.tshadow01 {
	text-shadow: 1px 1px 1px #000 ;
}

/* 太字 */
.bold {
	font-weight: bold;
}

/* PCでは改行 */
.pcbr { display: block; }

/* PCでは非表示 */
#contents .pcHide { display: none; }

/*======================================
	共通
======================================*/
/* ページ上部マージン */
.topMargin {
	margin-top: var(--headerMargin);
}

[id^="content-"] { background: #fff; }
[class^="content-"] .wrap,
[id^="content-"] .wrap {
	padding-top: 30px;
	padding-bottom: 100px;
}


/*======================================
	会社ロゴ
======================================*/
/* 業務 */
.compTitle .sub {
	font-size: 1.1rem;
}


/* ロゴ */
.compTitle .logo {
	display: flex;
	align-items: center;
	color: #00466b;
	font-size: 2.5rem;
	font-weight: bold;
}

/* 株式会社 */
.compTitle .logo .ctype {
	font-size: 1.25rem;
	line-height: 1.2;
	margin-right: 7px;
}

/* 改行 */
.compTitle .logo .br {
	display: block;
}


/*======================================
	header
======================================*/
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	width: 100%;
	background: #fff;
	box-shadow: 0 1px 5px #333;
	top: 0;
	left: 0;
	padding: 3px 20px;
	z-index: 50;
}


/* タイトル */
header .title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 308px;
}

header .compTitle {
}


/* QRコード */
header .qrbox {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: 0 0 170px;
}

header .qrbox .qr {
	flex: 0 0 49px;
}

header .qrbox p {
	font-size: 1.2rem;
}


/* メニューボタン */
header .menuButton {
	display: none;
}


/* お問い合わせボタン等 */
header .infobox {
	flex: 0 0 140px;
	order: 1;
}

header .infobox .button {
	display: block;
	text-align: center;
	
	color: #fff;
	font-size: 1.6rem;
	background: #00466b;
	padding: 8px 0;
	border-radius: 8px;
}

header .infobox .button::before {
	content: "\f0e0";
	font-weight: bold;
	margin-right: 8px;
}



/*======================================
	navi
======================================*/
header nav {
	flex: 1 0 460px;
	max-width: 600px;
	padding: 0 5px;
}

/* メニューリスト */
header nav .menuList {
	display: flex;
	justify-content: space-between;
}


/* 各メニュー */
header nav .menuList .menu {
	position: relative;
	flex: 0 0 16%;
	text-align: center;
}


header nav .menuList .menuLink {
	display: block;
	color: #333;
	font-size: 1.6rem;
	padding: 8px 0;
}

header nav .menuLink::after {
	position: absolute;
	content: "";
	width: 0;
	height: 2px;
	background: var(--colorBlue01);
*	background: linear-gradient( to right, rgba( 0, 0, 0, 0 ) 0, var(--colorBlue01) 30%, var(--colorBlue01) 70%, rgba( 0, 0, 0, 0 ) );
	
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	transition: .2s;
}

header nav .menuLink:hover:after {
	width: 60%;
}

/* スマホ用非表示 */
header .infonavi {
	display: none;
}

/*======================================
	各ページのheadline
======================================*/
:root {
	--subHeaderHeight: 460px;
}

/* サブページのヘッド部 */
.subHeadline {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: var(--subHeaderHeight);
}

/* 文字設定 */
.subHeadline .headerStyle01 {
	color: #fff;
	font-size: 3.8rem;
	text-shadow: 1px 1px 2px #000;
	opacity: 0;
	animation: animSubHeadMsg .6s .2s forwards;
}

@keyframes animSubHeadMsg {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
	
}


/* 日本語 */
.subHeadline .headerStyle01 .ja {
	padding-bottom: 6px;
}
.subHeadline .headerStyle01 .ja::before {
	background: #fff;
}

/* 英語 */
.subHeadline .headerStyle01 .en {
	font-size: 2.8rem;
}


/* 背景 */
.backimage::before {
	position: fixed;
	content: "";
	width: 100%;
	min-width: 900px;
	height: var(--subHeaderHeight);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	top: var(--headerMargin);
	left: 0;
	z-index: -1;
	opacity: 0;
}

/* filter */
.backimage::after {
	position: fixed;
	content: "";
	width: 100%;
	height: var(--subHeaderHeight);
	background: #000;
	opacity: 0;
	top: var(--headerMargin);
	left: 0;
	z-index: -1;
}

.backimage::before { animation: animFadeIn 1s forwards; }
.backimage::after { animation: animSubHeadFilter 1s forwards; }
@keyframes animSubHeadFilter {
	0% { opacity: 0; }
	100% { opacity: .3; }
	
}

/*======================================
	画像一覧
======================================*/

/* 画像一覧*/
.viewer {
	display: flex;
	flex-wrap: wrap;
}

/* 各ボックス */
.viewer .box {
	flex: 0 0 32%;
	margin-bottom: 24px;
}

/* 各イメージの間隔 */
.viewer .box:not(:nth-child(3n)) {
	margin-right: 2%;
}


/* 各イメージボックス */
.viewer .image {
	position: relative;
	width: 100%;
	cursor: pointer;
}


.viewer .image::before {
	display: block;
	content: "";
	padding-top: 75%;
}


.viewer .image img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}


/* コメント */
.viewer .box .comment {
	font-size: 1.6rem;
	padding: 5px 0;
	letter-spacing: -.02rem;
}


/*======================================
	viewer
======================================*/

/* viewer window */
.viewerWin {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba( 0, 0, 0, .6 );
	top: 0;
	left: 0;
	visibility: hidden;
	z-index: 60;
}

/* 表示 */
.viewerWin.show {
	visibility: visible;
}

/* メイン部分 */
.viewerWin .vwrap {
	position: relative;
	display: flex;
	align-items: center;
	width: 1000px;
	height: 100%;
	opacity: 0;
}

/* 表示 */
.viewerWin.show .vwrap {
	animation: animViewerImage .4s forwards;
}

.viewerWin .vwrap .vwin {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #fff;
	width: 76%;
	padding: 30px 30px 10px 30px;
	margin: auto;
}


@keyframes animViewerImage {
	0% { opacity: 0; transform: scale( .8, .8 ); }
	100% { opacity: 1; transform: scale( 1, 1 ) }
	
}

/* 画像のオフセット */
.viewerWin .vwrap .offset {
	text-align: center;
	font-size: 2.0rem;
}

.viewerWin .vwrap .image {
}

/* 前後移動 */
.viewerWin .vwrap .ctrl {
	position: absolute;
	color: #fff;
	background: var(--colorBlue01);
	width: 60px;
	height: 60px;
	border-radius: 30px;
	cursor: pointer;
	box-shadow: 1px 1px 2px #333;
	transition: .4s;
	opacity: 0;
}

.viewerWin .vwrap .ctrl::before {
	position: absolute;
	font-size: 2.6rem;
	font-weight: bold;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.viewerWin .vwrap .comment {
	font-size: 1.7rem;
	padding: 5px 0;
}

.viewerWin .vwrap .comment .pcbr {
	display: inline;
}

/* 画像にカーソルが乗った時 */
.viewerWin .vwrap:hover {  }
.viewerWin .vwrap:hover .prev { opacity: 1; left: -20px; }
.viewerWin .vwrap:hover .next { opacity: 1; right: -20px; }


/* 戻る */
.viewerWin .vwrap .prev { left: -10px; }
.viewerWin .vwrap .prev::before { content: "\f053"; }

/* 進む */
.viewerWin .vwrap .next { right: -10px; }
.viewerWin .vwrap .next::before { content: "\f054"; }



/*======================================
	お問い合わせ方法・応募方法
======================================*/
#content-application {
	background: #efefef;
	padding: 20px 0;
}

#content-application .wrap {
	background: #fff;
	padding: 30px 10px;
}

/* 最後以外に間隔をつける */
#content-application .wrap:not(:last-of-type) {
	margin-bottom: 20px;
}


/* */
#content-application .cwrap {
	display: flex;
	justify-content: space-between;
	padding: 0 20px;
}


/* 各ボックス */
#content-application .cwrap .box {
	flex: 0 0 49%;
	display: flex;
	flex-direction: column;
	
}

/* コメントボックス */
#content-application .cwrap .box .commentBox {
	padding: 20px 8px;
}

#content-application .cwrap .box .commentBox p {
	letter-spacing: -.01rem;
}


/* 営業時間 */
#content-application .cwrap .date {
	text-align: center;
	margin-bottom: 20px;

	padding: 10px 0;
	background: #fffbe8;
	border-radius: 8px;
}

#content-application .cwrap .date p { font-size: 1.8rem; }


/* 電話 */
#content-application .cwrap .ctrlbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: auto;
	padding-top: 10px;
}

#content-application .cwrap .subTitle {
	font-size: 1.8rem;
}

#content-application .cwrap .ctrlbox p {
	color: var(--colorBlue01);
	font-size: 4.8rem;
	font-weight: bold;
	line-height: 1;
}

#content-application .cwrap .ctrlbox .icon_tel::before {
	content: "\f2a0";
	font-weight: bold;
	margin-right: 16px;
}

#content-application .cwrap .ctrlbox .buttonStyle01 {
	width: 90%;
	border-radius: 8px;
}


/* パンフレットダウンロード */
#content-application .pamfhletBox {
}


#content-application .pamfhletBox .commentBox {
	text-align: center;
	margin-bottom: 20px;
}

#content-application .pamfhletBox .ctrlbox a {
	width: 360px;
}




/*======================================
	ページ上部へ移動するボタン
======================================*/
.jumpScroll {
	position: fixed;
	width: 60px;
	height: 60px;
	background: rgba( 33, 33, 33, .6 );
	bottom: 20px;
	right: -80px;
	bottom: 36px;
	cursor: pointer;
	z-index: 50;
	
	border: 2px #fff solid;
	border-radius: 50%;
	transition: .4s;
}

.jumpScroll.show {
	transform: translateX(-100px);
}

.jumpScroll::before {
	position: absolute;
	content: "\f077";
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	color: #fff;
	font-size: 3.4rem;
	font-family: var( --fontawesome );
	font-weight: bold;

}

/*======================================
	footer
======================================*/
footer {
	width: 100%;
	background: linear-gradient( to bottom, #444 0, #000 100% );
}


/* 会社名 */
footer .compTitle {
	margin-bottom: 20px;

}

/* 業務 */
footer .compTitle .sub {
	color: #fff;
	font-size: 1.1rem;
}

/* ロゴ */
footer .compTitle .logo {
	color: #fff;
}

/* wrapper */
footer .fwrap {
	position: relative;
	padding: 50px 20px;
	z-index: 1;
}

/* 街並み */
footer .fwrap::after {
	position: absolute;
	content: "";
	background: url( "../img/footer_obj.png" ) no-repeat;
	width: calc( 100% - 40px );
	height: 216px;
	bottom: 0;
	opacity: 0.08;
	z-index: -1;
}


/* wrapper */
footer .cwrap {
	display: flex;
	justify-content: space-between;
}

/* 各見出し */
footer .cwrap .title {
	color: #fff;
	font-size: 1.6rem;
	border-bottom: 1px #aaa solid;
	padding: 3px 0;
	margin-bottom: 10px;
}



/*-------------------------------------
	会社概要
-------------------------------------*/
footer .overview {
	flex: 0 0 52%;
}

footer .overview .cList {
}


/* 各会社情報*/
footer .overview .box {
	position: relative;
	display: flex;
	color: #fff;
	margin-bottom: 3px;
}


/* 項目名 */
footer .overview .box .name {
	flex: 0 0 100px;
	font-size: 1.6rem;
	margin-right: 10px;
}

/* 値 */
footer .overview .box .value,
footer .overview .box .value p {
	font-size: 1.6rem;
}


/*-------------------------------------
	サイトマップ
-------------------------------------*/
footer .sitemap {
	flex: 0 0 46%;
}


footer .sitemap .sList {
}

/* 各ページ */
footer .sitemap .sList .item {
	display: flex;
	align-items: center;
	color: #fff;
	font-size: 1.4rem;
	border-bottom: 1px #aaa dotted;
	padding: 5px 0;
	
}

/* ページ名 */
footer .sitemap .sList .item .name {
	flex: 0 0 28%;
	font-weight: bold;
}

/* 説明 */
footer .sitemap .sList .item .value {
	flex: 0 0 72%;
}


/* リンク */
footer .sitemap .sList .link {
	position: relative;
	display: block;
	color: #fff;
	padding-left: 20px;
}

footer .sitemap .sList .link::before {
	position: absolute;
	content: "\f105";
	font-size: 1.2rem;
	font-weight: bold;
	color: #f33;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	transition: .2s;
}

footer .sitemap .sList .link:hover:before {
	left: 3px;
}



/*-------------------------------------
	最下部
-------------------------------------*/
footer .band {
	color: #fff;
	background: var(--colorBlue02);
	text-align: center;
	padding: 6px 0;
}
footer .band a {
	color: #fff;
}


/*======================================
	ICON 設定
======================================*/
[class*="icon_"]::before {
	font-family: var( --fontawesome );
}

/* 電話 */
.icon_phone01::before {
	content: "\f2a0";
	font-weight: bold;
}

.icon_phone02::before {
	content: "\f095";
	font-weight: bold;
}

/* 時計 */
.icon_clock::before {
	content: "\f017";
	font-weight: bold;
}

/* メール */
.icon_mail::before {
	content: "\f0e0";
	font-weight: bold;
}

/* 矢印(右) */
.icon_arrowRight::before {
	content: "\f054";
}

/*======================================
	header01
======================================*/
.headerStyle01 {
	position: relative;
	font-size: 3.2rem;
	color: var(--colorBlue01);
	margin-bottom: 50px;
	text-align: center;
}

.headerStyle01 .ja {
	display: inline-block;
	position: relative;
	font-weight: bold;
	padding: 0 20px 3px 20px;
}

.headerStyle01 .ja::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background: var(--colorBlue01);
	bottom: 0;
	left: 0;
}

.headerStyle01 .en {
	display: block;
	font-size: 1.6rem;
	padding-top: 5px;
}


.headerStyle01 .str {
	display: block;
	position: relative;
}





/*======================================
	header02
======================================*/
.headerStyle02 {
	color: #fff;
	font-size: 2.0rem;
	background: linear-gradient( to right, var(--colorBlue02) 0, var(--colorBlue01) 20%, var(--colorBlue01) 80%, var(--colorBlue02) 100% );
	text-align: center;
	padding: 8px 0;
	border-radius: 30px;
}


/*======================================
	header03
======================================*/
.headerStyle03 {
	position: relative;
	font-size: 3.4rem;
	color: #fff;
	margin-bottom: 80px;
	text-align: center;
	padding: 10px 0;
	overflow: hidden;
}

/* 上下ライン */
.headerStyle03::before,
.headerStyle03::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 2px;
	background: var(--colorBlue01);
	
	left: 0;
	opacity: 0;
}


/* ライン上 */
.headerStyle03.start::before {
	top: 0;
	animation: animHeaderStyle03Line01 .8s forwards;
}

/* ライン下 */
.headerStyle03.start::after {
	bottom: 0;
	animation: animHeaderStyle03Line02 .8s forwards;
}


@keyframes animHeaderStyle03Line01 {
	0% { opacity: 0; transform: translateX(-100%); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes animHeaderStyle03Line02 {
	0% { opacity: 0; transform: translateX(100%); }
	100% { opacity: 1; transform: translateX(0); }
}




/* 背景 */
.headerStyle03 .hwrap::before {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	
	background:
		linear-gradient( to right,
			var(--colorBlue02) 0,
			var(--colorBlue01) 30%,
			var(--colorBlue01) 70%,
			var(--colorBlue02) 100%
		);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
}


/* animation - 背景 */
.headerStyle03.start .hwrap::before {
	animation: animHeaderStyle03back .6s .6s ease-out forwards;
}

@keyframes animHeaderStyle03back {
	0% { opacity: 0; width: 0; }
	100% { opacity: 1; width: 100%; }
}




/* ja */
.headerStyle03 .ja {
	display: inline-block;
	position: relative;
	font-weight: bold;
	padding: 0 20px 3px 20px;
}

/* 中央ライン */
.headerStyle03 .ja::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background: #fff;
	
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	opacity: 0;
}

/* en */
.headerStyle03 .en {
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
	padding-top: 5px;
}


.headerStyle03 .str {
	display: block;
	position: relative;
	opacity: 0;
}



/* ライン */
.headerStyle03.start .ja::before {
	animation: animHeaderStyle03Line .8s 1.0s forwards;
}


@keyframes animHeaderStyle03Line {
	0% { opacity: 0; transform: rotate(360deg); }
	100% { opacity: 1; transform: rotate(0); }
}


/* 文字(ja) */
.headerStyle03.start .ja .str {
	animation: animHeaderStyle03_01 .6s 1.2s ease-out forwards;
}

@keyframes animHeaderStyle03_01 {
	0% { opacity: 0; transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}


/* 文字(en) */
.headerStyle03.start .en .str {
	animation: animHeaderStyle03_02 .6s 1.2s ease-out forwards;
}

@keyframes animHeaderStyle03_02 {
	0% { opacity: 0; transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}


/*================================================
	押し込んだ表現
================================================*/
.pressButton {
	outline: none;
	box-shadow: 2px 2px  #333;
	background: -webkit-linear-gradient( top, #eee 0%, #bbb 100% );
	background: -moz-linear-gradient( top, #eee 0%, #bbb 100% );
	background: -ms-linear-gradient( top, #eee 0%, #bbb 100% );
}

/* 押された時 */
.pressButton:active {
	box-shadow: 0 0 0 transparent;
	transform: translate( 2px, 2px );
}


/*================================================
	アンダーライン
================================================*/

/* 左右が透過 */
.uline01 {
	position: relative;
}

.uline01::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background: linear-gradient( to right, rgba( 255, 255, 255, 0 ) 0, #fff 10%, #fff 90%, rgba( 255, 255, 255, 0 ) 100% );
	background: -webkit-linear-gradient( left, rgba( 255, 255, 255, 0 ) 0, #fff 10%, #fff 90%, rgba( 255, 255, 255, 0 ) 100% );
	left: 50%;
	bottom: 0;
	transform: translateX( -50% );
}

/*================================================
	ボタン等に光を走らせる
================================================*/
.effectReflection {
	position: relative;
	display: block;
	overflow: hidden;
}

.effectReflection::before {
	position: absolute;
	content: "";
	width: 40px;
	height: 100%;
	background: #fff;
	top: -50px;
	left: -80px;
	z-index: 1;
	animation: effectReflection 2.6s infinite;
}

@keyframes effectReflection {
	0% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}
	
	30% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}

	31% {
		opacity: 1;
		transform: scale(2) rotate( 30deg );
	}


	100% {
		opacity: 0;
		transform: scale(50) rotate( 30deg );
	}
}


@keyframes effectReflectionDelay {
	0% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}
	
	30% {
		opacity: 0;
		transform: scale(0) rotate( 30deg );
	}

	31% {
		opacity: 1;
		transform: scale(2) rotate( 30deg );
	}


	70% {
		opacity: 0;
		transform: scale(50) rotate( 30deg );
	}

	100% {
		opacity: 0;
		transform: scale(50) rotate( 30deg );
	}

}



/*================================================
	マーカーアニメーション
================================================*/
.effectMarker01 {
	background-image: linear-gradient(to right, #ffff00 50%, transparent 50%);
	background-image: -webkit-linear-gradient(left, #ffff00 50%, transparent 50%);
	background-position: 100% 0;
	background-size: 200% auto;
	background-repeat: no-repeat;
}

@keyframes animeEffectMarker01 {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}


/*================================================
　汎用アニメーション
================================================*/

/* beat */
@keyframes animBeat {
	0% { filter: drop-shadow( 0 0 0 #000 ); }
	100% { filter: drop-shadow( 0 0 12px transparent ); }
}

/* fade in */
@keyframes animFadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

/* fade out */
@keyframes animFadeOut {
	0% { opacity: 1; }
	100% { opacity: 0; }
}


/* 上から下へ移動 */
.effectMove01 {
	position: relative;
	animation: animeEffectMove01 1.6s forwards;
}

.effectInit01 {
	opacity: 0;
}

@keyframes animEffectMove01 {
	0% {
		opacity: 0;
		transform: translateY( -20px );
	}
	
	100% {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* zoom in */
@keyframes animZoomIn {
	0% { opacity: 0; transform: scale( .6, .6 ); }
	100% { opacity: 1; transform: scale( 1, 1 ); }
}


/*================================================
　縁取り
================================================*/
.tborder-white01 {
	text-shadow: #fff 2px 0px,
				 #fff -2px 0px,
				 #fff 0px -2px,
				 #fff 0px 2px,
				 #fff 2px 2px,
				 #fff -2px 2px,
				 #fff 2px -2px,
				 #fff -2px -2px,
				 #fff 1px 2px,
				 #fff -1px 2px,
				 #fff 1px -2px,
				 #fff -1px -2px,
				 #fff 2px 1px,
				 #fff -2px 1px,
				 #fff 2px -1px,
				 #fff -2px -1px;
}


.tborder-white02 {
	text-shadow: #fff 4px 0px,
				 #fff -4px 0px,
				 #fff 0px -4px,
				 #fff 0px 4px,
				 #fff 4px 4px,
				 #fff -4px 4px,
				 #fff 4px -4px,
				 #fff -4px -4px,
				 #fff 2px 4px,
				 #fff -2px 4px,
				 #fff 2px -4px,
				 #fff -2px -4px,
				 #fff 4px 2px,
				 #fff -4px 2px,
				 #fff 4px -2px,
				 #fff -4px -2px;
}



.tborder-black01 {
	text-shadow: #000 2px 0px,
				 #000 -2px 0px,
				 #000 0px -2px,
				 #000 0px 2px,
				 #000 2px 2px,
				 #000 -2px 2px,
				 #000 2px -2px,
				 #000 -2px -2px,
				 #000 1px 2px,
				 #000 -1px 2px,
				 #000 1px -2px,
				 #000 -1px -2px,
				 #000 2px 1px,
				 #000 -2px 1px,
				 #000 2px -1px,
				 #000 -2px -1px;
}



.tborder-black02 {
	text-shadow: #000 4px 0px,
				 #000 -4px 0px,
				 #000 0px -4px,
				 #000 0px 4px,
				 #000 4px 4px,
				 #000 -4px 4px,
				 #000 4px -4px,
				 #000 -4px -4px,
				 #000 2px 4px,
				 #000 -2px 4px,
				 #000 2px -4px,
				 #000 -2px -4px,
				 #000 4px 2px,
				 #000 -4px 2px,
				 #000 4px -2px,
				 #000 -4px -2px;
}

/*======================================
	ボタン01
======================================*/

/* ボタン */
.buttonStyle01 {
	position: relative;
	display: flex;
	color: #fff;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 1.8rem;
	background: var( --colorBlue02 );
	background: linear-gradient( to right, var( --colorBlue02 ), var( --colorBlue01 ), var( --colorBlue02 ) );
	padding: 14px 10px;
	
	width: 320px;
	margin: 0 auto;
	border-radius: 5px;
	
}

.buttonStyle01::after {
	position: absolute;
	content: "\f105";
	font-family: var( --fontawesome );
	font-weight: bold;
	right: 30px;
	transition: .4s;
}

.buttonStyle01:hover:after {
	right: 20px;
}
/*======================================
	blog - 基本設定
======================================*/
#content-blog {
}

#content-blog .entryMain {
}


/* 本文 */
#content-blog .entryMain .body {
}

/* デフォルト文字設定 */
#content-blog .entryMain .body p {
	font-size: 17px;
	line-height: 1.4;
}


/*======================================
	見出し
======================================*/

/*--------------------------------------
	My HeaderStyle - 01
--------------------------------------*/
.myHeadStyle01 {
	position: relative;
	color: #fff;
	font-size: 1.9rem;
	line-height: 1.2
	letter-spacing: 0.1rem;
	padding: 6px 20px;
	border-radius: 5px;
	margin-bottom: 20px;
	overflow: hidden;
	z-index: 1;

}

/* 最初の文字 */
.myHeadStyle01::first-letter {
	color: #ffef40;
	font-size: 2.1rem;
	font-weight: bold;
}

/* 背景 */
.myHeadStyle01::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient( to right, #006499 0, #00466b 100% );
	z-index: -2;
}


/*--------------------------------------
	My HeaderStyle - 02
--------------------------------------*/
.myHeadStyle02 {
	color: #fff;
	font-size: 1.8rem;
	background: #006499;
	padding: 6px 20px;
	margin-bottom: 20px;
	border-radius: 5px;
}


/*--------------------------------------
	My HeaderStyle - 03
--------------------------------------*/
.myHeadStyle03 {
	color: #333;
	font-size: 1.8rem;
	padding: 3px 10px;
	border-left: 5px #f33 solid;
}


/*======================================
	サブページビジュアル
======================================*/
.backimage::before {
	background-image: url( "../img/head_news.webp" );
}


/*================================================
	共通
================================================*/
.headerTitle {
	margin-bottom: 50px;
}



/*================================================
	固有設定
================================================*/
.headerImage {
	background: url( "../img/header_news01.jpg" ) no-repeat;
	background-size: cover;
	background-position: center;
}

#breadcrumbList {
	margin-bottom: 0;
}

/*================================================
	お知らせ - 共通
================================================*/
#content-wrap {
	display: flex;
	justify-content: space-between;
}

/* メイン */
#content-wrap #main {
	flex: 0 0 70%;
}


/* サイド */
#content-wrap #side {
	flex: 0 0 28%;
}


/*================================================
	メイン
================================================*/
.content-news {
	background: #fff;
	padding-bottom: 50px;
}


/*================================================
	サイドコンテンツ
================================================*/
#side-news {
}


#side-news .headerName {
	color: #fff;
	font-size: 1.6rem;
	text-align: center;
	background: var(--colorBlue01);
	padding: 5px 0;
	margin-bottom: 10px;
}


/* 各ブロック */
#side-news .news {
	display: flex;
	justify-content: space-between;
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px #ccc solid;
}

/* 画像ボックス */
#side-news .news .ibox {
	position: relative;
	flex: 0 0 26%;
	overflow: hidden;
}

/* 高さを割合設定 */
#side-news .news .ibox::before {
	display: block;
	content: "";
	padding-top: 75%;
}

/* 画像 */
#side-news .news .ibox img {
	position: absolute;
	width: 100%;
	height: auto;
	max-width: initial;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	
}

/* 情報ボックス */
#side-news .news .info {
	position: relative;
	flex: 0 0 70%;
}


#side-news .news .info .header {
	display: flex;
	margin-bottom: 5px;
}

/* 投稿日 */
#side-news .news .info .header .date {
	border-right: 1px #ccc solid;
	padding-right: 8px;
	margin-right: 8px;
}

/* カテゴリー名 */
#side-news .news .info .header .cateList a {
    display: block;
    color: #333;
    font-size: 1.2rem;
    border: 1px #666 solid;
    
    border-radius: 5px;
    padding: 0 5px;
    box-shadow: 1px 1px 1px #333;
}

/* タイトル */
#side-news .news .info .title {
	color: #333;
}


/*================================================
	記事一覧
================================================*/
#content-entryList {
}

#blogList {
	margin-bottom: 50px;
}


/* 各記事 */
#blogList .entry {
	display: flex;
	gap: 20px;
	padding: 5px 0;
	margin-bottom: 20px;
	border-bottom: 1px #333 dotted;
}


/* 画像ボックス */
#blogList .entry .ibox {
	position: relative;
	width: 100px;
	overflow: hidden;
}

#blogList .entry .ibox::before {
	display: block;
	content: "";
	padding-top: 75%;
}

#blogList .entry .ibox img {
	position: absolute;
	max-width: initial;
	width: 100%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* メッセージボックス */
#blogList .entry .mbox {
	flex-grow: 1;
}

#blogList .entry .mbox .headerBox {
	display: flex;
	align-items: center;
	padding: 5px 0;
}

/* 日付 */
#blogList .entry .mbox .headerBox .date {
	font-size: 1.8rem;
	line-height: 1.2;
	padding-right: 8px;
	margin-right: 6px;
	border-right: 1px #ccc solid;
}

/* カテゴリー */
#blogList .entry .mbox .headerBox .cate a {
	display: block;
	color: #333;
	font-size: 1.4rem;
	line-height: 1.2;
	border: 1px #333 solid;
	padding: 2px 3px;
	border-radius: 5px;
	box-shadow: 1px 1px 2px #333;
}


/* 記事タイトル */
#blogList .entry .mbox .title a {
	display: block;
	color: #333;
	font-size: 1.8rem;
	line-height: 1.4;
}

/* ページ移動 */
#content-entryList .ctrlBox {
	display: flex;
	padding: 10px 0;
	justify-content: center;
}


#content-entryList .ctrlBox .prevPage {
}

/* 各ボックス */
#content-entryList .ctrlBox li {
	border: 1px #333 solid;
	text-align: center;
	margin-right: 10px;
}

/* 現在の表示位置 */
#content-entryList .ctrlBox li.pNow span {
	color: #fff;
	background: var(--colorBlue01);
}


/* リンクや数字のみの時 */
#content-entryList .ctrlBox li a,
#content-entryList .ctrlBox li span {
	display: block;
	color: #333;
	font-size: 1.6rem;
	padding: 3px 12px;
}



/*================================================
	お知らせメイン
================================================*/
#content-blog .entryMain {
	margin-bottom: 50px;
}

/* タイトル */
#content-blog .entryMain .title {
	font-size: 2.2rem;
}


/* ヘッダー */
#content-blog .entryMain .headerbox {
	display: flex;
	align-items: center;
	padding: 20px 0;
}

/* 投稿日 */
#content-blog .entryMain .headerbox .date {
	font-size: 1.8rem;
	padding-right: 10px;
	border-right: 1px #ccc solid;
	margin-right: 10px;
	
}

/* カテゴリー */
#content-blog .entryMain .headerbox .cate a {
	color: #fff;
	font-size: 1.5rem;
	background: var(--colorBlue01);
	padding: 2px 10px;
	border-radius: 5px;
}

#content-blog .entryMain .body {
	font-size: 1.6rem;
}

#content-blog .entryMain .body img {
	width: auto;
	height: auto;
	max-width: 100%;
}


/* ボタン */
#content-blog .entryMain .buttonStyle01 {
	padding: 10px 30px;
}



/*================================================
	前後移動
================================================*/
#content-blog .ctrlBox {
	display: flex;
	justify-content: space-between;
}

#content-blog .ctrlBox .move {
	flex: 0 0 28%;
}

/* wrap を解除 */
#content-blog .ctrlBox .move .wrap {
	padding: 0;
}


#content-blog .ctrlBox .mbox {
	display: block;
	border: 2px var(--colorBlue01) solid;
	border-radius: 10px;
	padding: 10px 20px;
}

#content-blog .ctrlBox .move .postName {
	position: relative;
	color: var(--colorBlue01);
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}

/* 矢印 */
#content-blog .ctrlBox .move .postName.prev::before,
#content-blog .ctrlBox .move .postName.next::before {
	position: absolute;
}

#content-blog .ctrlBox .move .postName.prev::before {
	content: "\f104";
	left: 20px;
}

#content-blog .ctrlBox .move .postName.next::before {
	content: "\f105";
	right: 20px;
}


/*================================================
	記事内
================================================*/
.pcBlogConCenter { margin: auto; }
.pcBlogWidthLimit { width: 550px; }


/*================================================
	カレンダー(置き換えされた場合)
================================================*/
#content-blog .entryMain .body .calendarWrap {
	display: flex;
	justify-content: space-between;
}

#content-blog .entryMain .body .calendarWrap .calendarBox {
	flex: 0 0 48%;
}