@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&Noto+Sans+JP:wght@400;500;700&display=swap');
body {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.65em;
	color: #000;
	margin: 0;
	padding: 0;
	position: relative;
	background: #fff url(../images/common/bg.jpg) top center repeat;
}

* {
	font-size: 1em;
	box-sizing: border-box;
	background-size: contain;
	word-break: break-all;
}

html, body, p, h1, h2, h3, h4, h5, ul, ol, li, dd, dl, dt, div {
	padding: 0;
	margin: 0;
	font-weight: normal;
}

img {
	border: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	max-width: 100%;
}

html { height: 100%; }
li { list-style-type: none; }
a {
	color: inherit;
	text-decoration: none;
}
a.underline,
.underline a { text-decoration: underline; }
.none { display: none; }
.sp { display: none; }
.pc { display: block; }

/* for modern brouser */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	line-height: 0;
	font-size: 0;
	visibility: hidden;
}

/* IE7,MacIE5 */
.clearfix { display: inline-block; }

/* WinIE6 below, Exclude MacIE5 \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
.tcenter { text-align: center; }
.tright { text-align: right; }

/* 選択色 */
::selection {
	background: #bc8446;
	color: #fff;
}

::-moz-selection {
	background: #bc8446;
	color: #fff;
}

/* YouTube 埋め込み */
.YT {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.YT iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

.red { color: #f00; }
.pink { color: #f52e9d; }
.blue { color: #4249b4; }
.green { color: #42967e; }
.gold { color: #bc8446; }
.white { color: #fff; }

.bgBox {
	background: url(../images/common/bg.png) top center repeat-y;
}

main {
	width: 100%;
	max-width: 1200px;
	margin: 0px auto;
	display: grid;
	grid-gap: 0;
	grid-template-columns: 1fr 200px;
	background: #fff;
}

p.smallTXT {
	font-size: 0.65em;
	line-height: 1.25;
}

main div.menu {
	background: #0b254a;
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	text-align: center;
	padding: 1em 0;
}
main div.menu img.ttl { width: 90%; }
main div.menu a { color: #ddaf7f; }

main div.menu ul {
	display: grid;
	grid-gap: 0;
	grid-template-columns: 1fr;
	padding: 1em 0;
	color: #fff;
}
main div.menu ul li {
	padding: 0.5em 0 0;
	margin: 0.125em auto;
}
main div.menu ul a li { color: #fff; }
main div.menu ul li.on,
main div.menu ul li:hover { background: #bc8446; }
main div.menu ul li.off {
	background: none;
	color: rgba(255,255,255,0.35);
}

.whTXT {
	font-size: 0.8em;
	color: #fff;
}
div.sns {
	width: 90%;
	display: grid;
	grid-gap: 0.5em;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin: 0 auto;
	padding: 0 0 1em;
}

main div#container {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	text-align: center;
}
div.ttl { padding: 4em 1em 1em; }
div.ttl h1 img { max-width: 90%; }
div.ttl h2 {
	font-size: 1.3em;
	font-weight: bold;
}

main div#container a { text-decoration: underline; color: #bc8446; }
main div#container a.btn_alubm {
	display: block;
	margin: 1em 1em 0.25em;
	padding:1em;
	text-align: center;
	background: #b6a381;
	color: #fff;
	font-size: 2em;
	text-decoration: none;
}
main div#container a.btn_alubm img { width: 90%; max-width: 500px; }

main div#container a.btn_alubm2 {
	display: block;
	margin: 0 1em 1em;
	padding: 0;
	text-align: center;
	color: #fff;
	font-size: 2em;
	text-decoration: none;
}
main div#container a.btn_alubm2 img { max-width: 100%; }

dl#news {
	padding: 0 1em;
	margin: 0 auto 2em;
	width: calc(100% - 3em);
	max-height: 13.5em;
	overflow: auto;
	text-align: left;
	border: #ddaf7f solid 3px;
}
 
dl#news dt {
	color: #ddaf7f;
	clear: left;
	float: left;
	margin: 0;
	padding: 0.5em 1em 0;
	width: 9em;
	line-height: 1.5em;
}
 
dl#news dd {
	vertical-align: middle;
	margin: 0;
	padding: 0.5em 1em 0.5em 10em;
	border-bottom: 1px dashed #CCC;
}
dl#news dd:last-child {
	border-bottom: 0;
}
 
main div#container dl#news a {
	padding: 5px 20px 5px 0;
	color: #f52e9d;
	text-decoration: underline;
}
 
dl#news a:hover { text-decoration: none; }

.attention {
	margin: 2em;
	padding: 2em;
	background: #bc8446;
	font-size: 0.8em;
	font-weight: bold;
	line-height: 1.25em;
	text-align: left;
	color: #fff;
}
.attention h2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #ff0;
}
.attention span.red { color: #ff0; }

.toiawase {
	margin: 2em;
	font-size: 0.8em;
	line-height: 1.25em;
	text-align: left;
}
.toiawase h2 {
	font-size: 1.2em;
	font-weight: bold;
}
.toiawase .p10 { padding: 0 0 0 1em }

main div#ft {
	background: #bc8446;
	color: #fff;
	grid-row: 2 / 3;
	grid-column: 1 / 3;
	text-align: center;
	padding: 1em;
	font-size: 0.8em;
}
main div#ft span { margin: 0 0.5em; }

@media all and (max-width: 1200px) {
	.bgBox {
		background-size: 110% auto;
		padding: 0 2em;
	}
}

@media all and (max-width: 736px) {
	img { max-width: 90%; }
	.sp { display: block; }
	.pc { display: none; }

	body {
		font-size: 3vw;
	}

	.bgBox {
		background: url(../images/common/bg_sp.jpg) top center repeat-y;
		background-size: 100% auto;
		padding: 0 1.3em;
	}

	main { grid-template-columns: 1fr; }
	main div.menu {
		grid-row: 1 / 2;
		grid-column: 1 / 2;
		position:fixed;
		top:0;
		left:0;
		width: 100%;
		box-shadow: 0 0.25em 2em hsl(0 0% 0% / 30%);
	}

	.open_spmenu {
		position:absolute;
		right:1.5vw;
		top:0;
		height:7.5vw;
		cursor:pointer;
	}

	.close_spmenu {
		position:absolute;
		right:4vw;
		top: -0.6vw;
		cursor:pointer;
		font-size:3vw;
		color:#fff;
		padding:0;
		vertical-align:middle;
	}
	.open_spmenu img,
	.close_spmenu img { height: 15vw; }
	
	.spmenu {
		display:none;
		position:fixed;
		top:0;
		left:0;
		height:100vh;
		width:100vw;
		padding:15vh 5vw;
		box-sizing:border-box;
		background-color:#f52e9d;
		z-index:99;
		text-align:center;
		overflow: auto;
	}

	main div.menu p {
		display: grid;
		grid-gap: 0;
		grid-template-columns: 23vw 1fr 15vw;
		text-align: center;
	}
	main div.menu p .logo { width: 90%; }
	main div.menu ul li.on,
		main div.menu ul li:hover {
		background: #bc8446;
		color: #fff;
		border-radius: 10em;
	}
	main div.menu ul li { padding: 1em 0 0.5em; }
	main div.menu ul li img { width: 60%; }
	div.sns { width: 50%; }

	dl#news { padding: 0; }
	dl#news dt { width: 100%; }
	dl#news dd {
		padding: 0.5em 1em;
		width: 100%;
	}

	main div#container {
		grid-row: 2 / 3;
		grid-column: 1 / 2;
		margin-top: 15vw;
	}
	div.ttl { padding: 2em 1em 1em; }
	div.ttl .logo { width: 40%; }
	div.ttl p {
		padding: 0 1em;
		font-size: 1em;
		line-height: 1.5;
	}

	main div#ft {
		grid-row: 3 / 4;
		grid-column: 1 / 2;
	}
	main div#ft span { display: block; }

}