@charset "utf-8";

/* base
------------------ */
/* reset */
html,body,div,h1,h2,h3,h4,h5,h6,p,blockquote,q,pre,table,caption,colgroup,col,tbody,thead,tfoot,tr,th,td,ul,ol,li,dl,dt,dd,form,fieldset,legend,label,span,a,img,em,ins,del,cite,abbr,sup,sub,dfn,code,var,samp,kbd,object,script,noscript,style,iframe,embed,param,map,area,menu,hr,address,small,strong,i,b,article,aside,figure,footer,header,hgroup,nav,section,figcaption,time,video,audio,mark,ruby,rt,rp,bdo,source,canvas,details,summary,command,datalist,keygen,output,progress,meter{margin:0;padding:0;outline:0;}
address,article,aside,figure,figcaption,footer,header,hgroup,hr,legend,menu,nav,section,summary{display:block;}
h1,h2,h3,h4,h5,h6{font-size:100%;}

/* body */
body{
	color:#333;
	line-height:1.7;
	font-size:100%;/*16px*/
	/*font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", sans-serif;*/
	font-family: 'Noto Serif JP', "serif","メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Gothic", sans-serif;
	font-weight: 500;
	word-break:break-all;
	background: #FAFAFA;
}

@media screen and (orientation:landscape){
body{
	-webkit-text-size-adjust:100%;
}
}

/* リンク */
a:link{color:#0070ad;text-decoration:underline;}
a:visited{color:#865d86;text-decoration:underline;}
a:hover{color:#288ec6;text-decoration:none;}

/* タグ共通 */
img{border:none;max-width:100%;}
p{margin:0 0 1.5rem 0; letter-spacing: 1px; font-weight: 300;}
hr{border:none;border-top:1px solid #ccc;margin:3rem auto;clear:both; margin: 4rem auto;}
table{empty-cells:show;border:none;border-collapse:collapse;max-width:100%;}

/*テキスト関係*/
.smaller{font-size:75%;}/*12px*/
.larger{font-size:125%;}/*20px*/
.bold{font-weight:bold;}
.normal{font-weight:normal;}
.red{color:#f00;}
.gray{color:#666;}
.highlight{background:-webkit-gradient(linear, left top, left bottom, from(#ffec95), to(#ffec95));background:linear-gradient(transparent 55%, #ffec95 55%);}

.caution{ color: #E48125;}

/*リスト*/
li{list-style:none;}
ul.list_mark{margin-bottom:1.5rem;}
ul.list_mark li{list-style:disc;margin-left:1.5em;}
ol.list_mark{margin-bottom:1.5rem;}
ol.list_mark li{list-style:decimal;margin-left:1.5rem;}
dl.dl_default{margin-bottom:1.5rem;}
dl.dl_default dt{font-weight:bold;}
dl.dl_default dd{margin-left:1em;}

/* テキスト揃え */
.ac{text-align:center;}
.al{text-align:left;}
.ar{text-align:right;}
.vam{vertical-align:middle;}
.vat{vertical-align:top;}

/* フロート */
.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}

/* マージン */
.ma{margin-right:auto;margin-left:auto;}
.ml{margin-left:1rem;}
.mr{margin-right:1rem;}
.mb{margin-bottom:1rem;}
.mb0{margin-bottom:0;}

/* エフェクト */
.fade:hover{opacity:0.8;transition:0.2s;}

/* アコーディオン */
.trg{
	cursor:pointer;
}

/* flex */

.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.j-c{justify-content: center;}
.ai-c{align-items: center}


.bg_white{
	background: #fff;
	padding: 2rem 0.5rem;
}

@media print, screen and (min-width: 640px){

	.bg_white{
		padding: 4rem 0.5rem;
	}

}


/* レイアウト */

.column_2 > .c-item{
	width: 50%;
}

.t-column_2 > .c-item,
.p-column_2 > .c-item,
.t-column_3 > .c-item,
.p-column_3 > .c-item{
	width: 100%;
}


@media print, screen and (min-width: 640px){

	.t-column_2 > .c-item{
		width: 50%;
	}
	
	.t-column_3 > .c-item{
		width: calc(100% / 3 - 1rem);
	}

}


@media print, screen and (min-width:1024px){

	.p-column_2 > .c-item{
		width: 50%;
	}
	
	.p-column_2.space > .c-item{
		width: calc(50% - 2rem );
	}
	
	.p-column_3 > .c-item{
		width: calc(100% / 3 - 2rem);
	}
	
}


.bg_cube{
	max-width: 1460px;
	padding: 5rem 0;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.bg_cube::before,
.bg_cube::after{
	content: "";
	display: block;
	width: 2.5rem; height: 2.5rem;
	background: #3197B5;
	position: absolute;
}

.bg_cube::before{
	top: 0; left: 0;
}
.bg_cube::after{
	bottom: 0; right: 0;
}


/* header
------------------ */
#header{
	display: flex;
	justify-content:space-between;
	align-items: center;
	line-height: 1.0;
	padding: 1rem 0;
}

/* ロゴ */
#s-logo{
	max-width: 15rem;
    margin: 0 auto;
}


@media print, screen and (min-width: 640px){

	#header{
		display: none;
	}


}


/* スマホメニューボタン */
#sp_nav_trg{
	width: 4rem;
	padding: 1.2rem 0;
	text-align: center;
	font-size: 175%;
	background: #abcdef;
}

@media print, screen and (min-width: 980px){
#sp_nav_trg{
	display: none;
}
}

/* pc nav
------------------ */
#pc_nav{
	display: none;
}

@media print, screen and (min-width: 980px){
#pc_nav{
	display: block;
	/*background: #abcdef;*/
	text-align: center;
}

#pc_nav li{
	display: inline-block;
	width:  calc(100% / 4 - 1rem);
	position: relative;
	letter-spacing: 2px;
}

#pc_nav li:not(:last-of-type)::after{
	display: inline-block;
	content: "/";
	font-size: 1.25rem;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	
}

#pc_nav a{
	display: block;
	padding: 4rem 1.5rem;
	text-decoration: none;
	color: #333;
	transition: 0.2s;
	position: relative;
}

#pc_nav a::after{
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: 0.5rem;
	background: #E48125;
	
	position: absolute;	
	left: 50%;
	transform: translateX(-50%);
}

/*#pc_nav a:hover{
	background: #bcdeff;
}*/
}

/* sp nav
------------------ */
#sp_nav{
	display: none;
	width: 100%;
}

/* スマホメニュー閉じるボタン */
#sp_nav_close_top{
	float: right;
	font-size: 200%;
	padding: 1rem 0.5rem;
}

#sp_nav_close_bottom{
	max-width: 60%;
	margin: 0 auto;
	text-align: center;
	border-radius: 3px;
	background: #bcdeff;
	padding: 1rem 0;
}

/* スマホメニュー */
#sp_nav ul{
	clear: both;
	border-top: 1px solid #000;
	margin-bottom: 2rem;
}

#sp_nav li{
	border-bottom: 1px solid #000;
}

#sp_nav li a{
	display: block;
	padding: 1rem;
}

/* footer
------------------ */
#footer{
	margin-top: 4rem;
	padding:0 0 2rem;
	background: #3197B5;
}

#footer .f_logo{
	margin: 0 auto 1rem;
	max-width: 22rem;
}

.footer_wrap{
	align-items: center;
}

/* フッターリンク */

.footer_ph_wrap{
	margin-bottom: 2rem;
}	

.footer_ph01,
.footer_ph02{
	height: 10rem;
}

.footer_ph01{
	background: url("../img/footer_img01.jpg") no-repeat center / cover;
}

.footer_ph02{
	background: url("../img/footer_img02.jpg") no-repeat center / cover;
}


#footer_link{
	width: 100%;
	text-align: center;
}

#footer_link li{
	width: 100%;
}

#footer_link li a{
	display: block;
	color: #fff;
	letter-spacing: 6px;
	padding: 1rem;
	text-decoration: none;
	position: relative;
}



@media print, screen and (min-width: 640px){
	
	#footer{
	margin-top: 8rem;
	padding:0 0 2rem;
	background: #3197B5;
}

	.footer_ph01,
	.footer_ph02{
		height: 15rem;
	}

}


@media print, screen and (min-width: 1024px){
	
	#footer .f_logo{
		max-width: 22rem;
		margin: 0;
	}
	
	
	#footer_link{
		text-align: center;
		width: 70%;
	}

	#footer_link li{
		width: calc(25% - 1rem);
		border-bottom: none;
		display: inline-block;
	}	

	#footer_link li:not(:last-of-type) a::after{
		content: "/";
		display: inline-block;
		color: #fff;
		position: absolute;
		right: 0;
	}
}

/* copyright */
#cpr{
	background: #bcdeff;
	text-align: center;
	padding: 0.5rem 0;
	font-size: 75%;
}

/* main
------------------ */
/* レイアウト */
/*#main{
	margin: 1rem 0 0 0;
}*/

.section{
	margin: 0 0 5rem;
}

.container{
	padding: 0 1.5rem;
}

@media print, screen and (min-width: 980px){
	.section{
		margin: 0 auto 7rem auto;
	}
	
	.container{
		max-width: 1460px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* パンくずリスト */
#path{
	font-size: 75%;
	background: #efefef;
	padding: 0.5rem;
}

/* メインビジュアル */
#mv{
	/*background: #f00;*/
	text-align: center;
	font-size: 150%;
}

/* 見出し */
.h01{
	font-size: 175%;
}

.h02{
	text-align: center;
	font-size: 1.5rem;
	line-height: 1.5;
	letter-spacing: 8px;
	margin-bottom: 2rem;
}

.h02.ornament::after{
	content: "";
	display: block;
	width: 14rem; height: 1rem;
	margin-top: 1rem;
	background: url("../img/h02.png") repeat-x;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.h03{
	font-size: 1.25rem;
}

.h > .smaller{
	display: block;
	/*font-size: 0.5em;*/
	font-size: 0.75em;
	letter-spacing: 0;
}


@media print, screen and (min-width: 640px){
	
	.h02{
		font-size: 1.75rem;
		margin-bottom: 3.5rem;
	}
}

/* ボタン */
a.button{
	display: inline-block;
	border-radius: 5px;
	text-align: center;
	background: #abcdef;
	transition: 0.2s;
	text-decoration: none;
	color: #fff;
	padding: 0.8rem 3rem;
}

a.button:hover{
	background: #bcdeff;
}


input.btn{
	display: inline-block;
	border-radius: 5px;
	border: none;
	text-align: center;
	background: #abcdef;
	transition: 0.2s;
	text-decoration: none;
	color: #fff;
	padding: 1rem 4rem;
	margin: 0 2rem;
}

input.btn_submit{
	font-size: 125%;
	background: #E48125;
}

input.btn_cancel{
	font-size: 87.5%;
	background: #ccc;
}

/* table */
.ta{
	width: 100%;
	margin-bottom: 2rem;
}

.ta th{
	font-weight: 300;
	border: 1px solid #ccc;
	background: #f1f1f1;
	text-align: left;
	padding:2rem 1rem;
	width: 30%;
}

.ta td{
	padding:2rem 1rem;
	border: 1px solid #ccc;
}



/* フォーム */
input,textarea,select{
	font-family:Meiryo, sans-serif;
	font-size: 100%;
	padding: 0.25rem;
}

input[type=button],input[type=submit],input[type=cancel],textarea{
	-webkit-appearance:none;
}

input[type=button],input[type=submit],input[type=cancel],input[type=file], select,label{
	cursor: pointer;
}

input::placeholder{ /*入力欄に最初から入っている字*/
	color: #ccc;
	font-size: 87.5%;
}

input:focus,textarea:focus {
    outline: 1px solid #3197b5;
}

.w-20{ width: 40%}	
.w-40,.w-60{ width: 80%}
.w-80{ width: 90%;}

@media print, screen and (min-width: 640px){
	
	.w-20{ width: 25%;}
	.w-40{ width: 40%;}
	.w-60{ width: 60%}
	.w-80{ width: 80%;}

}

.textbox{ /*文字入力欄*/
	border: 1px solid #999;
	padding: 3px;
	margin: 1px;
	box-shadow: 1px 1px 5px rgba(0,0,0,0.1) inset;
}




.required{ /*「必須」の文字*/
	display: block;
    color: #fff;
    font-weight: normal;
    font-size: 75%;
	text-align:center;
    padding: 0.15rem 0.5rem;
    margin-top: 0.75rem;
    background: #e90000;
	vetical-align:middle;
}

.optional{ /*「必須」の文字*/
	display: block;
    color: #fff;
    font-weight: normal;
    font-size: 75%;
	text-align:center;
    padding: 0.15rem 0.5rem;
    margin-top: 0.75rem;
    background: #ccc;
	vetical-align:middle;
}

@media print, screen and (min-width: 640px){

	.optional,.required{ 
		display: inline-block;
		margin-top: 0;
		margin-left: 0.75rem;
		text-align: left;
	}

}

.note{ /*入力欄の上の注意書き*/
	color: #999;
	font-size: 87.5%;
}

/* 送信ボタンエリア */
.submit_area{
	text-align: center;
	margin: 2rem 0;
}

.submit_area .button{
	display: block;
	margin: 0 auto 3rem auto;
}

/* エラー表示 */
div.error{
	color: #e90000;
	font-weight: bold;
	margin-bottom: 0.5rem;
}

td.error{
	background: #fff0f0;
}


.p-block{ display: none;}
.t-block{ display: none;}
.s-block{ display: block;}


.p-hide{ display: block;}
.t-hide{ display: block;}
.s-hide{ display: none;}


@media print, screen and (min-width: 640px){
	.t-block{ display: block;}
	.t-hide{ display: none;}
}

@media print, screen and (min-width: 1024px){

	.p-block{display: block;}
	.p-hide{display: none;}
}

/* ---------------------
※メディアクエリの例（あとで消して下さい）
------------------------*/
@media print, screen and (min-width: 980px){} /* 画面が980px以上の場合（＆ 印刷の場合）*/
@media screen and (max-width: 480px){} /* 画面が480px以下の場合 */
@media screen and (min-width: 480px) and (max-width: 980px){} /* 画面が480～980pxの場合 */
@media screen and (orientation:landscape){} /* 画面の横が縦より長い場合（スマホ横向きの代用として使える）*/
@media screen and (orientation:portrait){} /* 画面の縦が横より長い場合 */

/*eof*/