@charset "utf-8";





/* =============================================================================
   汎用スタイル
   ========================================================================== */

/*
タイトル
<h2 class="title02">テキストテキスト</h2>
*/
.title02 {
	font-size: 2.0em;
	margin-top: 0;
	color: #003366;
}
@media only screen and (max-width: 767px) {
	.title02 {
		font-size: 1.6em;
	}
}

/*
タイトル
<h2 class="title03">INFORMATION</h2>
*/
.title03 {
	font-size: 3.0em;
	margin-top: 0;
}
.title03 span {
	font-size: 0.35em;
	display: block;
	line-height: 2.0;
}
@media only screen and (max-width: 767px) {
	.title03 {
		font-size: 2.0em;
	}
	.title03 span {
		font-size: 0.5em;
	}
}

/*
ボタン
<nav class="btn"><a href=""><i class="fas fa-circle"></i>ボタンです</a></nav>
*/
nav.btn {
	width: 80%;
	margin: 0 auto;
	margin-top: 30px;
	text-align: center;
}
nav.btn a {
	display: block;
	color: #003366;
	background: #fff;
	font-weight: bold;
	line-height: 1.0;
	padding: 15px 0;
	border: 3px solid #003366;
	border-radius: 40px;
	position: relative;
}
nav.btn a .fas {
	font-size: 10px;
	color: #f9576e;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
}
nav.btn a:hover {
	background: #003366;
	color: #fff;
	text-decoration: none;
}
@media only screen and (max-width: 767px) {
	nav.btn {
		margin-top: 20px;
	}
}





/* =============================================================================
   コンテンツふわっと表示
   ========================================================================== */

.fadein {
	opacity : 0;
	transform : translateY(45px);
	transition : all 500ms;
}
.fadein.nth2 {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
}
.fadein.nth3 {
	-moz-transition-delay:1200ms;
	-webkit-transition-delay:1200ms;
	-o-transition-delay:1200ms;
	-ms-transition-delay:1200ms;
}
.fadein.nth4 {
	-moz-transition-delay:1800ms;
	-webkit-transition-delay:1800ms;
	-o-transition-delay:1800ms;
	-ms-transition-delay:1800ms;
}
.fadein.scrollin {
	opacity : 1;
	transform : none;
}
@media only screen and (max-width: 767px) {
	.fadein {
		opacity : 1;
		transform : none;
	}
}












/* =============================================================================
   パンくずリストスタイル
   Breadcrumb NavXTプラグイン
   ========================================================================== */
/* htmlコーディング部分
<nav id="topicpath" class="wrap">
<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="Go to テスト株式会社." href="http://test.jp" class="home"><span property="name">テスト株式会社</span></a>
<meta property="position" content="1"></span>
<i class="fa fa-angle-right"></i>
<span class="post post-page current-item">テストニュース</span>
</nav>
*/
#topicpath {
	font-size: 0.875em;
	margin-bottom: 40px;
}
#topicpath a {
	text-decoration: underline;
}
#topicpath a:hover {
	text-decoration: none;
}
#topicpath .fa {
	margin: 0 10px;
}
#topicpath .home {
	background: url("../img/common/ico_home.png") no-repeat left center;
	padding-left: 25px;
}




/* =============================================================================
   ページングスタイル
   wp pagenaviプラグイン
   ========================================================================== */
/* htmlコーディング部分
一覧
<nav id="paging">
<div class="wp-pagenavi" role="navigation">
<span class="pages">1 / 19</span>
<span aria-current="page" class="current">1</span>
<a class="page larger" title="Page 2" href="/news/page/2">2</a>
<a class="page larger" title="Page 3" href="/news/page/3">3</a>
<a class="page larger" title="Page 4" href="/news/page/4">4</a>
<a class="page larger" title="Page 5" href="/news/page/5">5</a>
<span class="extend">...</span>
<a class="larger page" title="Page 10" href="/news/page/10">10</a>
<span class="extend">...</span>
<a class="nextpostslink" rel="next" href="/news/page/2">»</a>
<a class="last" href="/news/page/19">最後 »</a>
</div>
</nav>
*/
/*
詳細
<nav id="paging">
<div class="wp-pagenavi" role="navigation">
<a class="page larger" title="Page 2" href="/news/page/2">«</a>
<a class="archive" href="">お知らせ一覧へ</a>
<a class="page larger" title="Page 3" href="/news/page/3">»</a>
</div>
</nav>
*/
#paging {
	padding-bottom: 60px;
	text-align: center;}
#paging .wp-pagenavi {}
#paging .wp-pagenavi span,
#paging .wp-pagenavi a {
	width: 20px;
	line-height: 20px;
	font-weight: bold;
	margin: 2px;
	padding: 12px 12px;
	display: inline-block;
	border-radius: 50%;
	border: 2px solid #003366;}
#paging .wp-pagenavi span {
	color: #888;
	background: #eee;}
#paging .wp-pagenavi span.current {
	color: #fff;
	background: #003366;}
#paging .wp-pagenavi a {
	text-decoration: none;
	background: #FFF;}
#paging .wp-pagenavi a:hover {
	color: #fff;
	background: #003366;}
#paging .wp-pagenavi a.archive {
	width: auto;
	border-radius: 50px;
	padding: 12px 20px;}
#paging .wp-pagenavi .last,
#paging .wp-pagenavi .pages {
	display: none;}
@media only screen and (max-width: 767px) {
	#paging {
		padding-bottom: 40px;}
	#paging .wp-pagenavi span,
	#paging .wp-pagenavi a {}
	#paging .wp-pagenavi span.pages,
	#paging .wp-pagenavi span.extend,
	#paging .wp-pagenavi a.first,
	#paging .wp-pagenavi a.previouspostslink,
	#paging .wp-pagenavi a.nextpostslink,
	#paging .wp-pagenavi a.last {
		display: none;}
}




/* =============================================================================
   form
   ========================================================================== */
form .inp100 { width:100%;}
form .inp90 { width:90%;}
form .inp70 { width:70%;}
form .inp50 { width:50%;}
form .inp30 { width:30%;}
form .inp10 { width:10%;}
form .imeActive { ime-mode: active; /* 全角モード */}
form .imeInactive { ime-mode: inactive; /* 半角モード */}
form input[type=text], form input[type=email], form input[type=search], form input[type=tel], form input[type=url], form input[type=date], form input[type=submit], form textarea{
	-webkit-appearance: none;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:100%;
	width:100%;
	border-radius: 4px;
	box-sizing: border-box;
	line-height: 1.5em;
	border:1px solid #ddd;
	background: #eee;
	padding:8px;}
form select{
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:100%;
	width:100%;
	border-radius: 4px;
	box-sizing: border-box;
	line-height: 1.5em;
	border:1px solid #ddd;
	background: #eee;
	padding:8px;}
form label{
	margin-right: 15px;}
form input[type=checkbox], form input[type=radio]{
	vertical-align:0;
	margin-right:5px;}
form .ico {
	display: flex;
	align-items: center;
	justify-content: space-between;}
form .req{
	font-size: 0.75em;
	line-height: 1.0;
	background: #d60023;
	padding: 5px 5px;
	color: #fff;
	border-radius: 3px;}
form .btn {
	text-align: center;
	margin-top: 10px;}
form .btn button[type=submit] {
	cursor:pointer;
	width: auto;
	box-sizing: border-box;
	margin: 0 auto;
	display: block;
	color: #003366;
	background: #fff;
	font-weight: bold;
	line-height: 1.0;
	padding: 15px 12%;
	border: 3px solid #003366;
	border-radius: 40px;
	position: relative;
	transition: all 0.1s linear;}
form .btn button[type=submit] .fas {
	font-size: 10px;
	color: #f9576e;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
}
form .btn button[type=submit]:hover {
	background: #003366;
	color: #fff;}
@media only screen and (max-width: 767px) {
	form input[type=text], form input[type=email], form input[type=search], form input[type=tel], form input[type=url], form input[type=date], form input[type=submit], form textarea {
		font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;}
	form .btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 15px;}
	form .btn button[type=submit] {
		width: 100%;}
}






/* =============================================================================
   汎用クラス
   ========================================================================== */
/* float 指定 */
.imgLeft {
    float: left;
	margin:0.5em 1em 2em 0;}
.imgRight {
    float: right;
	margin:0.5em 0 2em 1em;}

/* padding 指定 */
.noPad { padding:0 !important;}
.pad5 { padding:5px !important;}
.pad10 { padding:10px !important;}
.pad15 { padding:15px !important;}
.pad20 { padding:20px !important;}
.pad30 { padding:30px !important;}
.pad40 { padding:40px !important;}
.pad50 { padding:50px !important;}
.padT5 { padding-top:5px !important;}
.padT10 { padding-top:10px !important;}
.padT15 { padding-top:15px !important;}
.padT20 { padding-top:20px !important;}
.padT30 { padding-top:30px !important;}
.padT40 { padding-top:40px !important;}
.padT50 { padding-top:50px !important;}
.padR5 { padding-right:5px !important;}
.padR10 { padding-right:10px !important;}
.padR15 { padding-right:15px !important;}
.padR20 { padding-right:20px !important;}
.padR30 { padding-right:30px !important;}
.padR40 { padding-right:40px !important;}
.padR50 { padding-right:50px !important;}
.padB5 { padding-bottom:5px !important;}
.padB10 { padding-bottom:10px !important;}
.padB15 { padding-bottom:15px !important;}
.padB20 { padding-bottom:20px !important;}
.padB30 { padding-bottom:30px !important;}
.padB40 { padding-bottom:40px !important;}
.padB50 { padding-bottom:50px !important;}
.padL5 { padding-left:5px !important;}
.padL10 { padding-left:10px !important;}
.padL15 { padding-left:15px !important;}
.padL20 { padding-left:20px !important;}
.padL30 { padding-left:30px !important;}
.padL40 { padding-left:40px !important;}
.padL50 { padding-left:50px !important;}

/* margin 指定 */
.noMar { margin:0 !important;}
.mar5 { margin:5px !important;}
.mar10 { margin:10px !important;}
.mar15 { margin:15px !important;}
.mar20 { margin:20px !important;}
.mar30 { margin:30px !important;}
.mar40 { margin:40px !important;}
.mar50 { margin:50px !important;}
.marT5 { margin-top:5px !important;}
.marT10 { margin-top:10px !important;}
.marT15 { margin-top:15px !important;}
.marT20 { margin-top:20px !important;}
.marT30 { margin-top:30px !important;}
.marT40 { margin-top:40px !important;}
.marT50 { margin-top:50px !important;}
.marR5 { margin-right:5px !important;}
.marR10 { margin-right:10px !important;}
.marR15 { margin-right:15px !important;}
.marR20 { margin-right:20px !important;}
.marR30 { margin-right:30px !important;}
.marR40 { margin-right:40px !important;}
.marR50 { margin-right:50px !important;}
.marB5 { margin-bottom:5px !important;}
.marB10 { margin-bottom:10px !important;}
.marB15 { margin-bottom:15px !important;}
.marB20 { margin-bottom:20px !important;}
.marB30 { margin-bottom:30px !important;}
.marB40 { margin-bottom:40px !important;}
.marB50 { margin-bottom:50px !important;}
.marL5 { margin-left:5px !important;}
.marL10 { margin-left:10px !important;}
.marL15 { margin-left:15px !important;}
.marL20 { margin-left:20px !important;}
.marL30 { margin-left:30px !important;}
.marL40 { margin-left:40px !important;}
.marL50 { margin-left:50px !important;}

/* font style */
.fontRed { color:crimson;}
.fontRed2 { color:red;}
.fontBlue { color:#0066CC;}
.fontBlue2 { color:blue;}
.fontGreen { color:green;}
.fontYellow { color:gold;}
.fontYellow2 { color:yellow;}
.fontOrange { color:#ef8200;}
.fontRem8 { font-size:12px; font-size:0.9rem;}
.fontRem10 { font-size:14px; font-size:1.0rem;}
.fontRem11 { font-size:15px; font-size:1.1rem;}
.fontRem12 { font-size:16px; font-size:1.2rem;}
.fontRem14 { font-size:18px; font-size:1.4rem;}
.fontRem16 { font-size:20px; font-size:1.6rem;}
.fontRem18 { font-size:22px; font-size:1.8rem;}
.fontBold { font-weight:bold;}

/* text align */
.textLeft { text-align:left;}
.textRight { text-align:right;}
.textCenter { text-align:center;}
.textCenterLeft { text-align:center;}
@media only screen and (max-width: 767px) {
	.textCenterLeft { text-align:left;}
}

.textJustify {
	text-align: justify;
	text-align-last: left;
}