@charset "UTF-8";

/*======================================
基本CSS

■■■目次■■■
スタイルの初期化
基本設定
アニメーション
印刷設定
コーディング制作用
======================================*/

/*─────────────────────────
スタイルの初期化
─────────────────────────*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure, hr {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 1em;
}
main {
	display: block;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	border: none;
}
img, iframe {
	border:none;
	vertical-align: bottom;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ul, li, ol, dl {
	list-style: none;
}
th, td {
	vertical-align: top;
	font-weight: normal;
	text-align: left;
}
caption {
	text-align: left;
}
fieldset {
	border: none;
}
input, textarea {
	font-size: 1em;
}
i, em, address, dfn {
	font-style: normal;
}
input {
	background: transparent;
	border: none;
	border-radius: 0;
	font: inherit;
	/*outline: none;	フォーカス時の装飾*/
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
input[type="submit"] {
	cursor: pointer;
}
button {
	background: transparent;
	border: none;
	font-size: 1em;
	cursor: pointer;
	/*outline: none;	フォーカス時の装飾*/
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}


/*─────────────────────────
基本設定
─────────────────────────*/
body {
	-webkit-text-size-adjust: 100%;	/*スマホで文字サイズ変更防止*/
	-webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset;	/*文字の滑らかOff*/
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;	/*文字の滑らかOn*/
	font-feature-settings: "palt";	/*字詰め*/
}
body, input, textarea, select, button, mark {
	/*基本は角ゴシック　「Noto Sans」はGoogleフォント*/
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	color: #222;
}
p {
	line-height: 2em;
}
a {
	color: #05c;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);	/*クリック時のハイライトカラー無効化*/
}
a:hover {
	color: #05c;
	text-decoration: underline;
}

/*　フロート解除　*/
.cf::before, .cf::after {
	content: "";
	display: table;
}
.cf::after {
	clear: both;
}

/*　CSS無効時の区切り線　*/
hr.border {
	display: none;
}

/*　JavaScript無効時のメッセージ　*/
noscript {
	position: fixed;
	z-index: 500;
	top: 0;
	width: 100%;
	padding: 7px;
	background-color: rgba(170,0,51,0.8);
	font-size: 0.9em;
	color: #fff;
	text-align: center;
	display: block;
}


/*─────────────────────────
アニメーション
─────────────────────────*/
/*　フェードイン（JS読込みまで透過） */
@-webkit-keyframes fadeInJS { 0% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInJS { 0% { opacity: 0; } 70% { opacity: 0; } 100% { opacity: 1; } }

/*　タイピング表示　 */
@-webkit-keyframes typingText {
	0% { -webkit-transform: translate(0.3em, -0.3em) scale(2.5); opacity: 0; }
	80% { -webkit-transform: translate(0.3em, -0.3em) scale(2.5); opacity: 0; }
	100% { -webkit-transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes typingText {
	0% { transform: translate(0.3em, -0.3em) scale(2.5); opacity: 0; }
	80% { transform: translate(0.3em, -0.3em) scale(2.5); opacity: 0; }
	100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/*　ウェーブ表示　 */
-webkit-@keyframes wavingText {
	0% { -webkit-transform: translate(0, 0) scale(1, 1); opacity: 1; }
	1% { -webkit-transform: translate(0, 0.2em) scale(1, 0.92); opacity: 0.5; }
	4% { -webkit-transform: translate(0, 0) scale(1, 1); opacity: 1; }
	100% { -webkit-transform: translate(0, 0) scale(1, 1); opacity: 1; }
}
@keyframes wavingText {
	0% { transform: translate(0, 0) scale(1, 1); opacity: 1; }
	1% { transform: translate(0, 0.2em) scale(1, 0.92); opacity: 0.5; }
	4% { transform: translate(0, 0) scale(1, 1); opacity: 1; }
	100% { transform: translate(0, 0) scale(1, 1); opacity: 1; }
}

/*　点滅表示　*/
@-webkit-keyframes blinking {
	0% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes blinking {
	0% { opacity: 0; } 100% { opacity: 1; }
}

/*─────────────────────────
印刷設定
─────────────────────────*/
@media print {
	/*　背景色・画像を印刷（無効なブラウザあり）*/
	body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	
	/*　強制的に要素の頭でページ分割　*/
	/*#top .news { break-inside: avoid-column; page-break-inside: avoid; }*/
	
	/*　レイアウト（モバイルSafariの余白を考慮してMax1100px幅）*/
	.w18, .w15, .w12, .w10 {
		width: 1000px !important;
		padding-left: 50px !important;
		padding-right: 50px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	header .hdinfo a {
		left: 30px !important;
	}
	header .hdinfo .btn1 {
		right: 30px !important;
	}
	footer aside {
		right: 50px !important;
	}

	/*　パララックス背景　*/
	.parallax { background: transparent !important; }
	.bg1 { background: #eee url(../image/common/pic-bgsec01.jpg) repeat !important; background-size: 1400px auto !important; }
	
	/*　スクロールイベント　*/
	.hs1 span, 
	.typ, 
	.typ span, 
	#top .role li::before, 
	#top .role li::after, 
	#top .support .num::after, 
	#top .support .num b, 
	#top .about .area, 
	footer address::before {
		opacity: 1 !important;
		-webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important;
		-webkit-animation: none !important; animation: none !important;
	}
	#top .role li::before {
		width: 140px !important;
	}
	#top .support .num::before {
		height: 270px !important;
		background: #222 !important;
	}
	.hs1 span::before, .hs1 span::after {
		width: 100px !important;
		opacity: 1 !important;
	}

	/*　トップ（ヘッダー背景）*/
	#top header {
		-webkit-animation: none !important; animation: none !important;
	}
	#top header::before {
		background-size: 100% 100% !important;
		-webkit-animation: none !important; animation: none !important;
	}
	#top .townscape .slider1 {
		background: url(../image/top/pic-townscape01.png) repeat-x !important; background-size: auto 280px !important;
		-webkit-animation: none !important; animation: none !important;
	}
	#top .townscape .slider1 .img1, 
	#top .townscape .slider1 .img2 {
		opacity: 0 !important;
	}
	
	/*　トップ（日本地図）*/
	#top .about .area {
		margin-top: 0 !important;
		-webkit-transform: translate(0, -150px) !important; transform: translate(0, -150px) !important;
	}
	
	/*　トップ（お知らせ）*/
	#top .news .box figure {
		display: none !important;	/*改ページ時の対策*/
	}
	
	/*　box-shadow対応　*/
	#top .news .box {
		box-shadow: none !important;
		border: 1px solid rgba(0,0,0,0.1) !important;
	}
	
	/*　JS無効メッセージ　*/
	noscript {
		display: none !important;
	}
}

/*─────────────────────────
コーディング制作用
─────────────────────────
body::after { position: fixed; z-index:100; bottom: 0; left: 0; width: 100%; padding: 0.5em; font-size: 0.9em; color: #fff; text-align: center; }
@media screen and (min-width: 1501px) { body::after { content: "ここは確認用サイト（1500px〜）"; background: rgba(150,0,100,0.8); } }
@media screen and (min-width: 1401px) and (max-width: 1500px) { body::after { content: "ここは確認用サイト（1401〜1500px）"; background: rgba(150,0,100,0.6); } }
@media screen and (min-width: 1201px) and (max-width: 1400px) { body::after { content: "ここは確認用サイト（1201〜1400px）"; background: rgba(200,0,0,0.8); } }
@media screen and (min-width: 981px) and (max-width: 1200px) { body::after { content: "ここは確認用サイト（981〜1200px）"; background: rgba(200,0,0,0.6); } }
@media screen and (min-width: 801px) and (max-width: 980px) { body::after { content: "ここは確認用サイト（801〜980px）"; background: rgba(50,150,250,0.8); } }
@media screen and (min-width: 641px) and (max-width: 800px) { body::after { content: "ここは確認用サイト（641〜800px）"; background: rgba(50,150,250,0.6); } }
@media screen and (min-width: 481px) and (max-width: 640px) { body::after { content: "ここは確認用サイト（480〜640px）"; background: rgba(0,150,150,0.8); } }
@media screen and (max-width: 480px) { body::after { content: "ここは確認用サイト（〜480px）"; background: rgba(0,150,150,0.6); } }
*/