@charset "UTF-8";

/*
PC 1000px↑
@media (min-width: 1000px){
TAB 768px↑
@media (min-width: 768px){
SP 375px↓
@media (max-width: 374px){
*/

/* 00 reset
------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	outline: 0;
	font-size: 1em;
}
body,
table,
input, textarea, select, option {
	font-family: HiraKakuProN-W3;
	font-size: 1em;
}
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
:root{
	--c-main:#52bce6;
	--c-sub:#fc8400;
	--c-link:#f0b808;
	--c-accent:#eba000;
	--c-sky:#6fdced;
	--c-output:#48bf65;

	--bg-cream:#fffcdf;
	--bg-gray:#e5e7eb;
	--bg-hover:#8ad4f2;

	--tx-main:#0f2a3a;
	--tx-sub:#50302b;
	--tx-gray:#12324a;
	--tx-pale:#dddddd;
	--tx-blue:#00648b;

	--line:#d1d5db;
	--line-soft:#e5e7eb;
	--line-blu:#90d9eb;
	--line-yel:#ffe75f;
}

a{
	-webkit-tap-highlight-color:rgba(50,35,240,0.6);
	text-decoration: none;
	color: var(--tx-main);
}
button, [role="button"], .scr {
	-webkit-tap-highlight-color:rgba(50,35,240,0.6);
}
a:link{color: var(--tx-main)}
a:visited{}
a:hover{}
a:active{}
a:focus {outline: none;}
img{vertical-align:top;}
.pc-only{display: none;}
.sp-only{display: inline;}
.ext:after {
	margin: 0 0 0 6px;
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: bold;
	font-size: .7em;
	color: #777;
}
.prep{
	text-align: center;
	margin: 10px;
}
.prep img{
	width: 100%;
	max-width: 350px;
	height: auto;
}

.txtLink{
	margin: 10px 0;
}
.txtLink a{
	display: block;
	color: var(--tx-main);
	text-decoration: underline;
}
.loading-wrap{
	min-height:calc(100vh - 200px);
	display:flex;
	flex-direction:column;
}
.loading-main{
	flex:1;
	display:flex;
	align-items: flex-start;
	justify-content:center;
	padding:24px;
}
.spinner{
	aspect-ratio:1 / 1;
	width:28px;
	height:28px;
	border-radius:50%;
	border:3px solid #d1d5db;
	border-top-color:transparent;
	animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width: 768px){
	.loading-main{
		width: 700px;
	}
}
@media (min-width: 1000px){
	.loading-wrap {
		min-height: calc(100vh - 470px);
	}
}

.pageTop{
	opacity: .7;
	position:fixed;
	right:5px;
	bottom:70px;
	width:48px;
	height:48px;
	border-radius:999px;
	display:none;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	background:#bbb;
	color:#fff;
	z-index:9998;
}
.pageTop.is-show{
	display:flex;
}
.pageTop:focus-visible{
	outline:2px solid #fff;
	outline-offset:2px;
}
.pageTop::before{
	content:"";
	display:block;
	width:0;
	height:0;
	border-left:9px solid transparent;
	border-right:9px solid transparent;
	border-bottom:14px solid #fff;
	transform:translateY(-1px);
}
@media (min-width: 768px){
	main{
		max-width:800px;
		margin: 0 auto;
	}
	.pc-only{display: inline;}
	.sp-only{display: none;}
	.prep img{
		max-width: 700px;
	}
}

@media (min-width: 1000px){
}

/* 01 書式設定
------------------------------------------------------------*/
/* テキストの位置 */
.txt-left 	{text-align: left;}
.txt-center {text-align: center;}
.txt-right 	{text-align: right;}

.bold{font-weight: bold !important;}
.none{display: none;}

/* 02 margin padding 各種
-------------------------------------------------------*/
.mb3 {margin-bottom:3px;}
.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb15 {margin-bottom:15px;}
.mb20 {margin-bottom:20px;}
.mb25 {margin-bottom:25px;}
.mb30 {margin-bottom:30px;}
.mb35 {margin-bottom:35px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}

.ml10 {margin-left:10px;}
.ml15 {margin-left:15px;}
.ml20 {margin-left:20px;}
.ml25 {margin-left:25px;}
.ml30 {margin-left:30px;}

.mr10 {margin-right:10px;}
.mr15 {margin-right:15px;}
.mr20 {margin-right:20px;}
.mr25 {margin-right:25px;}
.mr30 {margin-right:30px;}

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt15 {margin-top:15px;}
.mt20 {margin-top:20px;}
.mt25 {margin-top:25px;}
.mt30 {margin-top:30px;}

.mtb10{margin: 10px 0;}
.mtb30{margin: 30px 0;}

/* padding
-------------------------------------------------------*/
.pAll5 {padding:5px;}
.pAll10 {padding:10px;}
.pAll20 {padding:20px;}

.ptb3 {padding: 3px 0;}
.plr5 {padding: 0 5px;}
.plr10 {padding: 0 10px;}
.ptb10 {padding: 10px 0;}
.ptb20 {padding: 20px 0;}

.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt15 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt25 {padding-top:25px;}
.pt30 {padding-top:30px;}

.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl15 {padding-left:15px;}
.pl20 {padding-left:20px;}
.pl25 {padding-left:25px;}
.pl30 {padding-left:30px;}

.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr15 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr25 {padding-right:25px;}
.pr30 {padding-right:30px;}

.pb10 {padding-bottom:10px !important;}
.pb15 {padding-bottom:15px !important;}
.pb20 {padding-bottom:20px !important;}
.pb25 {padding-bottom:25px !important;}
.pb30 {padding-bottom:30px !important;}

.w100{
	display: block;
	width: 100%;
	text-align: center !important;
}

/* 03 レイアウト
------------------------------------------------------------*/
/*

基本サイズ12px	基本サイズ13px	基本サイズ14px	基本サイズ16px
10px 	 84%			10px 	 77%			10px 	 72%			10px 	 63%
11px 	 92%			11px 	 85%			11px 	 79%			11px 	 69%
12px 	100%			12px 	 93%			12px 	 86%			12px 	 75%
13px 	109%			13px 	100%			13px 	 93%			13px 	 81%
14px 	117%			14px 	108%			14px 	100%			14px 	 88%
15px 	125%			15px 	116%			15px 	108%			15px 	 94%
16px 	134%			16px 	124%			16px 	115%			16px 	100%
17px 	142%			17px 	131%			17px 	122%			17px 	106%
18px 	150%			18px 	139%			18px 	129%			18px 	113%
19px 	159%			19px 	147%			19px 	136%			19px 	119%
20px 	167%			20px 	154%			20px 	143%			20px 	125%
21px 	175%			21px 	162%			21px 	150%			21px 	131%
22px 	184%			22px 	170%			22px 	158%			22px 	138%
23px 	192%			23px 	177%			23px 	165%			23px 	144%
24px 	200%			24px 	185%			24px 	172%			24px 	150%
25px 	209%			25px 	193%			25px 	179%			25px 	156%
26px 	217%			26px 	200%			26px 	186%			26px 	163%
-------------------------------------------------------*/
html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html{font-size: 13px;}
body{
	text-align: center;
	line-height: 1.5;
	font-size:13px;
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, sans-serif;
	-webkit-text-size-adjust: none;
	color:#333;
	padding-top:72px;
}

/* 便利class
------------------------------------------ */
img{
	max-width: 100%;
	height: auto;
}
em{font-style: normal;}
.marker {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ffe066 60%);
}
.pMarker {
	color: #fa484d;
	background: linear-gradient(transparent 60%, #ffe687 60%);
}
.fHir{
  font-family: "ヒラギノ角ゴ ProN W3","HiraKakuProN-W3","ヒラギノ角ゴ Pro W3","HiraKakuPro-W3","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS Pgothic","Osaka",sans-serif,Helvetica, Helvetica Neue, Arial;
  font-weight: 400;
  font-style: normal;
}
.fDes{
  font-family: "Kaisei Opti", serif;
  font-weight: 400;
  font-style: normal;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2000;
	transform: translateY(0);
	transition: transform .25s ease;
	border-bottom: 2px solid var(--line-soft);
	background: #fff;
}

header.is-hide{
	transform: translateY(-110%);
}
header #hdInner {
	max-width: 1000px;
	height: 60px;
	padding: 5px;
	margin: 0 auto;
	background: #fff;
	display: -webkit-flex;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
header nav{
	display: flex;
	align-items: center;
}
header nav > span{
	color: #fff;
	background: #6c7280;
	display: inline-block;
	padding: 1px 8px;
	margin: 0 5px;
	border: 1px solid #6c7280;
	border-radius: 3px;
}

footer{
	margin-top: 30px;
}
footer #ftSP{
	padding: 10px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	border-top: 1px solid var(--line-soft);
	border-bottom: 1px solid var(--line-soft);
}
footer #ftSP li{
	position: relative;
}
footer #ftSP li a{
	display: inline-block;
	width: 7em;
	padding: 10px;
}
footer #ftSP li a:hover{
	opacity: .7;
}
footer #ftSP li a span{
}
footer #ftPC{
	display: none;
}
footer .inner{
	padding: 25px 0;
}
@media (min-width: 1000px){
	.siteFooter{
		border-top: 1px solid var(--line);
		background: var(--bg-gray);
	}
	footer #ftSP{
		display: none;
	}
	footer #ftPC{
		font-size: .9em;
		color: var(--tx-gray);
		width: 800px;
		box-sizing: border-box;
		padding: 30px 10px;
		margin: 0 auto;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: flex-start;
	}
	footer #ftPC a{
		color: var(--tx-gray);
	}
	footer #ftPC div:first-child{
		height: stretch;
		display: flex;
		flex-flow: column nowrap;
		justify-content: space-between;
	}
	footer #ftPC ul{
	}
	footer #ftPC ul li{
		text-align: left;
	}
	footer #ftPC ul li a{
		display: inline-block;
		padding-left: 5px;
		margin: 2px 0;
	}
	footer #ftPC ul li a span{
		padding-left: 10px;
		position: relative;
	}
	footer #ftPC ul li a span::before{
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 6px solid #a2aabb;
	}
	.ftTitle{margin-bottom: 3px;}
	
}

/* =========================
   フッター注意事項
   ========================= */
.notice{
	margin: 24px auto 0;
	padding: 0 14px;
	font-size: 12px;
	color: var(--tx-gray);
}
.notice-toggle{
	margin: 0;
	padding: 10px 0;
	font-weight: 700;
	color: #6b7280;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
	user-select: none;
}
.notice-toggle::before{
	content:"▸";
	font-size: 12px;
	color: #9ca3af;
	transition: transform .2s ease;
}
.notice-toggle.is-open{
	color: var(--tx-gray);
}
.notice-toggle.is-open::before{
	transform: rotate(90deg);
}
.notice-list{
	margin: 0;
	padding-left: 5px;
}
.notice-list li{
	text-align: left;
	margin: 6px 0;
	line-height: 1.6;
	color: #4b5563;
}
footer .notice{
	border-top: 1px solid var(--line-soft);
	padding-top: 12px;
}
.attention{
	margin-top: 5px;
	font-size: .8em !important;
}

/* メニューbtn
------------------------------------------ */
header #hdInner ul li a {
	width: 52px;
	height: 52px;
	padding: 35px 5px 0;
	text-decoration: none;
	font-size: .84rem;
	color: #333;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
#menuBtn{
	-webkit-tap-highlight-color: transparent;
	appearance:none;
	border:0;
	background:transparent;
	cursor:pointer;

	width:44px;
	height:44px;
	border-radius:12px;

	position:relative;
	display:inline-grid;
	place-items:center;

	touch-action:manipulation;
}

#menuBtn:hover{
	background:rgba(0,0,0,.05);
}
#menuBtn:focus-visible{
	outline:2px solid rgba(0,0,0,.35);
	outline-offset:2px;
}

#menuBtn span{
	width:22px;
	height:2px;
	background:var(--tx-gray);
	border-radius:999px;
	position:relative;
	display:block;

	transition:transform .25s ease, background-color .25s ease;
}

#menuBtn span::before,
#menuBtn span::after{
	content:"";
	width:22px;
	height:2px;
	background:var(--tx-gray);
	border-radius:999px;
	position:absolute;
	left:0;

	transition:transform .25s ease, top .25s ease, opacity .2s ease;
}

#menuBtn span::before{ top:-7px; }
#menuBtn span::after{ top:7px; }

#menuBtn.is-open span{
	background:transparent;
}

#menuBtn.is-open span::before{
	top:0;
	transform:rotate(45deg);
}

#menuBtn.is-open span::after{
	top:0;
	transform:rotate(-45deg);
}

/* =========================
   Motion preference
========================= */
@media (prefers-reduced-motion: reduce){
	#menuBtn span,
	#menuBtn span::before,
	#menuBtn span::after{
		transition:none;
	}
}

#menuOverlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	opacity:0;
	visibility:hidden;
	transition:opacity .3s ease;
	z-index:900;
	backdrop-filter: blur(2px);
}

/* =========================
   Slide Menu
========================= */
#spMenu{
	position:fixed;
	top:0;
	right:0;
	width:80%;
	max-width:350px;
	height:calc(100vh - 70px);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	background: var(--bg-gray);
	z-index:1000;
	transform:translateX(100%);
	transition:transform .35s ease;
	padding:70px 0 70px;
	box-shadow:none;
	border-radius:24px 0 0 24px;
}
body.menu-open #spMenu{
	box-shadow: -2px 0 0px var(--bg-gray);
}

/* =========================
   Open state
========================= */
body.menu-open{
	overflow:hidden;
}

body.menu-open #spMenu{
	transform:translateX(0);
}

body.menu-open #menuOverlay{
	opacity:1;
	visibility:visible;
}

/* =========================
   PCでは非表示（必要なら）
========================= */
@media (min-width: 1000px){
	#menuBtn,
	#spMenu,
	#menuOverlay{
		display:none;
	}
}

#hdFirst{
	background:#fff;
	color:#6c7280;
	padding: 6px 4px;
	border: 1px solid #6c7280;
	border-radius: 6px;
	font-size: 1.0em;
	margin-right: 5px;
}
#hdFirst:hover{
	opacity: .7;
}

/*ここからメニュー内*/
/* =========================
   Close button
========================= */
#menuClose{
	position:absolute;
	top:14px;
	right:14px;

	width: 44px;
	height: 44px;
	border-radius: 12px;

	border:0;
	background:#f3f3f3;
	cursor:pointer;

	display:grid;
	place-items:center;

	-webkit-tap-highlight-color: transparent;
}

#menuClose:hover{
	background:#e8e8e8;
}

/* ×をCSSで描画 */
#menuClose span{
	width:22px;
	height:2px;
	background:none;
	border-radius:999px;
	position:relative;
}

#menuClose span::before,
#menuClose span::after{
	content:"";
	position:absolute;
	left:0;
	width:22px;
	height:2px;
	background:#111;
	border-radius:999px;
}

#menuClose span::before{
	transform:rotate(45deg);
}

#menuClose span::after{
	transform:rotate(-45deg);
}

#spMenu a{
	background: #fff;
	font-size: 1.1em;
}
#spMenu a:hover{
	background: var(--bg-gray);
}
#menuTop a{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding: 15px 10px 15px 20px;
	border-bottom:1px solid #e5e7eb;
	color:#12324a;
	text-decoration:none;
	font-weight:bold;
}
#menuTop a::after {
	content: "›";
	font-size: 1.4em;
	color: #9ca3af;
	line-height: 1;
}
#spMenu ul{
	list-style:none;
}
#spMenu li a{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	color: #12324a;
	text-decoration: none;
	border-bottom: 1px solid #e5e7eb;
	position: relative;
}
#spMenu li:first-child a{
	border-top: 1px solid #e5e7eb;
}
#spMenu li a p{
	margin:0;
	font-weight:bold;
}
#spMenu li a p span{
	font-size: .8em;
}
#menuA li a span{
	display:block;
	margin-top:4px;
	font-size:.95em;
	color:#6b7280;
}
#spMenu li a::after{
	position: absolute;
	content: "›";
	font-size: 1.4em;
	color: #9ca3af;
	line-height: 1;
	top: calc(50% - 0.6em);
	right: 10px;
}
#spMenu li a:active{
	background:#f3f4f6;
}
#menuTop{
}
#menuMain{
}
#menuMain li{
}
#menuMain li a{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: flex-start;
}
#menuMain li a span{
	text-align: left;
	font-size: .8em;
}
#menuMain{
}
#menuPop{
}
#menuCont{
}
#spMenu li#menuColumn{
}
#spMenu li#menuColumn div{
}
#spMenu li#menuColumn div a{
	padding: 10px 20px 10px calc(20px + 1em);
}
#menuEtc{
	margin-top: 30px;
}
#spMenu #menuEtc a{
	padding: 10px 20px;
}
.menuTl{
	padding:5px 10px;
	font-size:1.05em;
	font-weight:bold;
	color:#fff;
	background: var(--c-main);
}
#spFixedCta {
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #fff;
	border-top: 1px solid #ddd;
	z-index: 999;
}
.ctaInner {
	display: flex;
	align-items: center;
	padding: 10px 12px;
}
.ctaText {
	font-size: 13px;
	line-height: 1.3;
	margin: 0;
}
.ctaBtn {
	margin-left: auto;
	padding: 5px 15px;
	font-size: 1.0rem;
	color: #fff !important;
	background: var(--c-sub);
	border-radius: 10px;
	line-height: 1.1;
	min-height: 31px;
}
#ctaClose {
	background: none;
	border: none;
	font-size: 18px;
	margin-right: 8px;
	cursor: pointer;
}

/*
各ページ共通
*/
.hero{
}
.hero h2{
	position: relative;
	color: var(--tx-gray);
	background: var(--bg-gray);
	line-height: 1.6;
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
}
.hero h2 span{
	font-weight: bold;
	font-size: 1.6em;
	display: inline-block;
	position: relative;
}
@media (min-width: 768px){
	.hero h2 {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}
.secTitle{
	position: relative;
	margin: 0 0 20px;
	text-align: center;
}
.secTitle span{
	line-height: 1.3;
	font-size: 1.6em;
	padding: 0 10px;
	color: var(--tx-main);
	background: linear-gradient(135deg, var(--line-blu) 10%, var(--line-yel) 100%) bottom/100% 12px no-repeat;
	text-align: center;
	word-break: auto-phrase;
}
.secSubTitle,
.secSubPoint{
	position: relative;
	margin: 0 0 20px;
}
.secSubTitle > span{
	line-height: 1.3;
	font-size: 1.6em;
	padding: 0 10px;
	color: var(--tx-main);
	background: linear-gradient(transparent 80%, var(--line-blu) 80%);
	text-align: center;
	word-break: auto-phrase;
}
.secSubPoint > span{
	line-height: 1.3;
	font-size: 1.6em;
	padding: 0 10px;
	color: var(--tx-main);
	background: linear-gradient(transparent 80%, var(--line-yel) 80%);
	text-align: center;
	word-break: auto-phrase;
}
.inner{
	max-width: 980px;
	margin: 0 auto;
	padding: 0 10px;
}
.inner p{
	color: var(--tx-main);
	text-align: left;
	font-size: 1.1em;
	line-height: 1.5;
}
.secLead{
	margin: 0 0 18px;
	color: var(--tx-main);
	line-height: 1.75;
	font-size: 1.1em;
}
@media (min-width: 768px){
	.secTitle{
		font-size: 1.3em;
	}
	.secLead{
		font-size: 1.3em;
	}
}
.sectionTxt{
	text-align: left;
	font-size: 1.0rem;
	margin-bottom: 10px;
	color: var(--tx-gray);
}
.btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid transparent;
	cursor: pointer;
}
a.btnPrimary{
	background: var(--c-sub);
	color: #fff;
	font-size: 1.4em;
	border-color: rgba(15, 42, 58, .10);
	padding: 15px 10px;
	width: 100%;
	border-radius: 8px;
	box-sizing: border-box;
}
a.btnPrimary:hover{
	background: var(--c-accent);
}
a.btn-output {
    background: var(--c-output);
    color: #fff;
    font-size: 1.4em;
    border-color: rgba(15, 42, 58, .10);
    padding: 15px 10px;
    width: 100%;
    border-radius: 8px;
    box-sizing: border-box;
}
a.btn-output:hover{
	background: #39b157;
}
a.btn-output.ext:after {
	margin: 0 0 0 6px;
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: bold;
	font-size: .7em;
	color: #fff;
}

@media (min-width: 1000px){
	.btnPrimary{
		width: auto;
		padding: 14px 18px;
	}
}

/*
404 Not Found
*/
#nf {
	padding: 40px 0 60px;
	background: #f7f9fb;
	text-align: center;
}
#nf .inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 16px;
}
#nf h2 {
	font-size: 1.4rem;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
	color: var(--tx-main);
}
#nfImg {
	margin-bottom: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#nfImg img {
	max-width: 150px;
	width: 100%;
	height: auto;
}
#nfTxt {
	font-size: 1.0rem;
	line-height: 1.8;
	color: var(--tx-main);
	margin-bottom: 32px;
	text-align: center;
}
#nfBtn .btn {
	display: inline-block;
	background: #68b8d8;
	color: #fff;
	padding: 12px 28px;
	border-radius: 9999px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.2s ease;
}
#nfBtn .btn:hover {
	background: var(--bg-hover);
}

/* =========================
   PC
========================= */
@media screen and (min-width: 769px) {

	#nf {
		padding: 60px 0 80px;
	}
	#nf h2 {
		font-size: 2.0rem;
		margin-bottom: 16px;
	}
	#nfImg {
		margin-bottom: 32px;
	}
	#nfImg img {
		max-width: 320px;
	}
	#nfTxt {
		font-size: 1.2rem;
		margin-bottom: 40px;
	}
	#nfBtn .btn {
		padding: 14px 36px;
	}
}