@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@900&display=swap');

/*------------------------------------------------------

	リセット

------------------------------------------------------*/

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%;
	font-style: normal;
	font-weight: normal;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
ul {
	list-style: none;
}
picture { display: block;}
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;
}
/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}
/* change colours to suit your needs */
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;
}
/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #909090;
	margin: 0;
	padding: 0;
}
input, select {
	vertical-align: middle;
}
img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: top;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


/*------------------------------------------------------

	グローバル

------------------------------------------------------*/

html { height: 100%;}

body {
	font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #323232;
	font-size: 0.9em;
	line-height: 1.6;
	position: relative;
	max-width: 750px;
	margin: auto;
}

.fo_noto { font-family: 'Noto Sans JP', sans-serif;}

p { margin-bottom: 25px;}
p:last-child { margin-bottom: 0px;}

a { color: #0054A3;}
a:hover, a:active { color: #62add3; text-decoration: none;}

/* 文字装飾 */
.fo06 { font-size: 0.6em !important;}
.fo07 { font-size: 0.7em !important;}
.fo075 { font-size: 0.75em !important;}
.fo08 { font-size: 0.8em !important;}
.fo085 { font-size: 0.85em !important;}
.fo09 { font-size: 0.9em !important;}
.fo105 { font-size: 1.05em !important;}
.fo11 { font-size: 1.1em !important;}
.fo115 { font-size: 1.15em !important;}
.fo12 { font-size: 1.2em !important;}
.fo13 { font-size: 1.3em !important;}
.fo14 { font-size: 1.4em !important;}
.fo15 { font-size: 1.5em !important;}
.fo16 { font-size: 1.6em !important;}
.fo17 { font-size: 1.7em !important;}
.fo19 { font-size: 1.9em !important;}
.fo21 { font-size: 2.1em !important;}
.fo24 { font-size: 2.4em !important;}

.lh12 { line-height: 1.2;}
.lh14 { line-height: 1.4;}
.lh18 { line-height: 1.8;}
.lh20 { line-height: 2;}

.fo_white { color: #FFFFFF;}
.fo_yellow { color: #FFF100;}
.fo_red, .fo_pink { color: #ef8a12;}
.fo_blue { color: #0068b7;}

.left { float: left;}
.right { float: right;}

.pos_rel { position: relative;}
.pos_ab { position: absolute;}

.bold { font-weight: bold;}

.ta_center { text-align: center;}
.ta_right { text-align: right;}
.ta_left { text-align: left;}

.back_white { background-color: #fff;}
.back_gray { background-color: #F5F5F5;}
.back_red { background-color: #ED0C4C;}
.back_blue { background-color: #0054a5;}
.back_orange { background-color: #ef8a12;}

.container { padding: 0px 15px;}

/* リスト */
ol { padding-left: 1.5em;}
ol li { list-style: outside decimal;}

.list_indent { padding-left: 1em;}
.list_indent li { text-indent: -1em;}

.list_disc { padding-left: 1em;}
.list_disc li { list-style: outside disc;}

/* margin */
.mb00 { margin-bottom: 0px !important;}
.mb05 { margin-bottom: 5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb40 { margin-bottom: 40px !important;}
.mb50 { margin-bottom: 50px !important;}
.mb60 { margin-bottom: 60px !important;}
.mb80 { margin-bottom: 80px !important;}
.mb120 { margin-bottom: 120px !important;}

/* clearFix */
.clearFix { zoom: 100%;}
.clearFix:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}


/* ------------------------
	グローバルナビ
------------------------ */
.header h1 { line-height: 50px; padding: 0px 70px 0px 10px;}
.header h1 img { width: auto; max-height: 40px; vertical-align: middle;}

.humberger {
	background: #323232;
	cursor: pointer;
	position: fixed;
	top: 0px;
	right: 0px;
	width: 50px;
	height: 50px;
	z-index: 10000;
}
.humberger span {
	background: #fff;
	border-radius: 15px;
	position: absolute;
	left: 10px;
	width: 30px;
	height: 3px;
	transition: 0.4s;
}
.humberger span:nth-of-type(1) { top: 9px;}
.humberger span:nth-of-type(2) { top: 17px;}
.humberger span:nth-of-type(3) { top: 25px;}
.humberger:after {
	color: #fff;
	content: 'MENU';
	display: block;
	font-size: 10px;
	text-decoration: none;
	text-align: center;
	transition: 0.4s;
	position: absolute;
	left: 0;
	bottom: 1px;
	width: 100%;
}
.is-open .humberger:after { content: 'CLOSE';}
.is-open .humberger span:nth-of-type(1) {
  -webkit-transform: translateY(6px) rotate(-45deg);
	  -ms-transform: translateY(6px) rotate(-45deg);
		  transform: translateY(6px) rotate(-45deg);
}
.is-open .humberger span:nth-of-type(2) { opacity: 0;}
.is-open .humberger span:nth-of-type(3) {
  -webkit-transform: translateY(-10px) rotate(45deg);
	  -ms-transform: translateY(-10px) rotate(45deg);
		  transform: translateY(-10px) rotate(45deg);
}
/* ナビ本体 */
.sp-navi { -webkit-text-size-adjust: 100%;}
.sp-navi.is-open .sp-navi-inner {
	opacity: 1;
	visibility: visible;
	z-index: 9999;
}
.sp-navi .sp-navi-inner {
	background-color: rgba(255,251,200,0.90);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0px;
	width: 100%;
	transition: .5s;
	padding-top: 60px;
}

.sp-navi li a {
	display: block;
	text-decoration: none;
	color: #1a1a1a;
	font-weight: bold;
	border-bottom: solid 1px #eb6a7a;
	padding: 10px;
}
.sp-navi li a:before { content: "● "; color: #eb6a7a;}
.sp-navi li:last-child a { border-bottom: none;}

/* ------------------------
	フッター
------------------------ */

.footer .back_gray { padding: 30px 15px 1px;}
.footer .copy { background: #323232; padding: 3px;}

.pagetop {
	display: none;
	position: fixed;
	right: 10px;
	padding-bottom: 18%;
	bottom: 0px;
	z-index: 999;
}

.fixed_btn { position: fixed; left: 50%; bottom: 0px; z-index: 9999; width: 100%; max-width: 750px; transform: translateX(-50%);}
.fixed_btn ul { display: flex; background-color: #fff; justify-content: space-between;}
.fixed_btn li:not(:last-child) { margin-right: 1px;}

body { padding-bottom: 16%;}

/* ------------------------
	コンテンツ
------------------------ */

.sec01 h2, .sec05 h2 { font-size: min(8.5vw,4.3em); letter-spacing: 0.05em; padding: 0.3em;}

.sec03 { background: #ffffae; padding-bottom: 25px;}
.sec03 .box01 { display: flex; font-size: 3.7vw;}
.sec03 .box01 figure { width: 28%; padding-right: 12px;}
.sec03 .box01 .box_inner { width: 72%; padding-top: 0.7em;}

.sec04 dl { display: flex; justify-content: space-between; align-items: center;}
.sec04 dt { width: 16%;}
.sec04 dd { width: 84%; padding-left: 10px; font-size: 4.8vw; line-height: 1.5;}
.sec04 .text01 { font-size: 4vw;}
.sec04 .box01 { display: flex; justify-content: space-between;}
.sec04 .box01 > * { width: 48%;}

.sec05 .text01 { font-size: min(3.7vw,1.5em); margin: 1.5em 0;}
.sec05 h3 { font-size: min(7.5vw,1.8em);}
.sec05 .box01 { display: flex; gap: 10px;}
.sec05 .box01 > * { width: calc((100% - 10px) / 2);}
.sec05 .box01 img, .sec05 .box01 iframe { width: 100%; height: 100%; vertical-align: bottom; object-fit: cover;}
.sec05 .box01 figure img { vertical-align: bottom;}
.sec05 hr { border: none; border-bottom: dashed 2px #323232; margin: 2em 0;}

.btn_box p a { display: inline-block; width: 100%; max-width: 500px; border-radius: 6px; padding: 5% 5% 5% 10%; background-color: #f0831e; box-shadow: 0px 5px 0px #b46217; transition: 0.3s;}
.btn_box p a:hover { transform: translateY(5px); box-shadow: none !important;}
.btn_box .btn02 a { background-color: #eb5d7a; box-shadow: 0px 5px 0px #b0465c;}
.btn_box .btn03 a { background-color: #33c9cc; box-shadow: 0px 5px 0px #269799;}

body.form { padding-bottom: 0px;}

.contact_box { padding-bottom: 15px;}
.contact_box h1.back_pink { padding: 15px 10%;}
.contact_box .hissu { display: inline-block; background-color: #0c9cff; font-size: 0.75em; color: #fff; padding: 0px 0.3em; margin-right: 0.6em;}
.res.contact_box .hissu { background-color: #ff7ba3;}
.contact_box input[type="text"], .contact_box input[type="email"], .contact_box input[type="tel"], .contact_box textarea, .contact_box select { width: 100%; background: #f0f0f0; border: solid 1px #e2e2e2; border-radius: 3px; padding: 5px; font-family: "Hiragino Maru Gothic W4 JIS2004", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em;}
.contact_box .width_auto input[type="text"], .contact_box .width_auto select { width: auto;}
.contact_box textarea { width: 100% !important; height: 100px !important;}
.contact_box label { display: block; padding: 0px 0px 3px;}
.contact_box input[type="submit"] {
	display: inline-block;
	width: 100%;
	max-width: 300px;
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: 0.1em;
	font-size: 1.2em;
	color: #fff;
	text-decoration: none;
	background: #0068b7;
	padding: 8px 5px;
	border-radius: 6px;
	border: none;
	outline: none;
	box-shadow: 0px 5px 0px #003272;
	cursor: pointer;
	transition: 0.3s;
	-webkit-appearance: none;
}
.contact_box input[type="submit"]:hover, .contact_box input[type="submit"]:focus { transform: translateY(5px); box-shadow: none;}
.contact_box .back_white { border: solid 1px #909090; padding: 1em; height: 120px; overflow-y: scroll;}

.page_wrap { height: 100%; padding: 30px 0px;}

.add_btn { background: #ffffae; padding: 30px 20px;}

@media only screen and (min-width: 750px) {
	.sec03 .box01 { font-size: 1.5em;}

	.sec04 dd, .sec04 .text01 { font-size: 2.1em;}
}



/* topics */
.topics_wrap { background: url("../images/bg.jpg"); padding: 20px;}
.topics_wrap h2 span { font-size: 4.5vw; display: inline-block;}
.topics_wrap h2 span:before, .topics_wrap h2 span:after { content: ""; position: absolute; background: url("../images/topics_ttl.svg") no-repeat center center; background-size: 100% auto; width: 4em; height: 1em; top: 50%; transform: translateY(-50%);}
.topics_wrap h2 span:before { left: -4.7em;}
.topics_wrap h2 span:after { right: -4.7em; transform: scale(-1,1) translateY(-50%);}
.topics_wrap h3 span { background: linear-gradient(transparent 50%, #f0e221 0%);}

.topics_wrap h2 span.fo_blue:before, .topics_wrap h2 span.fo_blue:after { background-image: url("../images/topics_ttl02.svg");}

@media only screen and (min-width: 751px) {
	.topics_wrap h2 span { font-size: 2em;}
}