@charset "UTF-8";

/**
 * basis.css
 * @version v1.1 2022.4.27
 * @copyright Maven Inc.
----------------------------------------------------------------*/
/* 初期設定 */
:root{

	/* ブレイクポイント */
	--pc:1200;
	--tab:960;
	--sp:768;
	--legacy:375;
	
	--bp-pc:calc(1px * var(--pc));
	--bp-tab:calc(1px * var(--tab));
	--bp-sp:calc(1px * var(--sp));
	--bp-legacy:calc(1px * var(--legacy));
	
	/* 余白 */
	--gap-base:40;
	--gap-min:20;
	--gap:clamp(
	
		/* 【最小余白】SP時の余白(半分) */
		calc(1px * var(--gap-base) / 2),
		
		/* 【推奨余白】SP時の余白(半分)相当の画面比値 */
		calc(var(--gap-base) / var(--sp) * 100vw),
		
		/* 【最大余白】PC時の余白 */
		calc(1px * var(--gap-base))
	
	);
	--gap-half:calc(1px * var(--gap-base) / 2);
	--gap-quarter:calc(1px * var(--gap-base) / 4);
	--gap-double:calc(var(--gap) * 2);
	--gap-triple:calc(var(--gap) * 3);
	--gap-quadruple:calc(var(--gap) * 4);
	
	/* フォント */
	--mincho: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	--gothic: "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, sans-serif;
	
	/* フォントサイズ */
	--xxl:clamp(24px, calc(34 / var(--sp) * 100vw), 34px);
	--xl:clamp(24px, calc(28 / var(--sp) * 100vw), 28px);
	--l:clamp(18px, calc(18 / var(--sp) * 100vw), 22px);
	--m:clamp(16px, calc(16 / var(--sp) * 100vw), 18px);
	--s:clamp(14px, calc(14 / var(--sp) * 100vw), 16px);
	--xs:14px;
	--xxs:12px;
	
	/* 配色 */
	--main:steelblue;
	--sub:lightslategray;
	--main-hover:cornflowerblue;
	--sub-hover:dodgerblue;
	--black:black;
	--border:rgb(204,204,204);
	--filter:rgb(245,245,245);

}

/**
 * destyle.css v3.0.2
 * @license MIT License
 * @url https://github.com/nicolas-cusan/destyle.css
----------------------------------------------------------------*/
*,::before,::after{
	box-sizing:border-box;
	border-style:solid;
	border-width:0;
}
html{
	line-height:1.15;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:transparent;
}
body{ margin:0; }
main{ display:block; }
p,table,blockquote,address,pre,iframe,form,figure,dl{ margin:0; }
h1,h2,h3,h4,h5,h6{
	font-size:inherit;
	font-weight:inherit;
	margin:0;
}
ul,ol{
	margin:0;
	padding:0;
	list-style:none;
}
dt{ font-weight:bold; }
dd{ margin-left:0; }
hr{
	box-sizing:content-box;
	height:0;
	overflow:visible;
	border-top-width:1px;
	margin:0;
	clear:both;
	color:inherit;
}
pre{
	font-family:monospace, monospace;
	font-size:inherit;
}
address{ font-style:inherit; }
a{
	background-color:transparent;
	text-decoration:none;
	color:inherit;
}
abbr[title]{ text-decoration:underline dotted; }
b,strong{ font-weight:bolder; }
code,kbd,samp{
	font-family:monospace, monospace;
	font-size:inherit;
}
small{ font-size:80%; }
sub,sup{
	font-size:75%;
	line-height:0;
	position:relative;
	vertical-align:baseline;
}
sub{ bottom:-0.25em; }
sup{ top:-0.5em; }
svg,img,embed,object,iframe{ vertical-align:bottom; }
button,input,optgroup,select,textarea{
	-webkit-appearance:none;
	appearance:none;
	vertical-align:middle;
	color:inherit;
	font:inherit;
	background:transparent;
	padding:0;
	margin:0;
	border-radius:0;
	text-align:inherit;
	text-transform:inherit;
}
[type="checkbox"]{
	-webkit-appearance:checkbox;
	appearance:checkbox;
}
[type="radio"]{
	-webkit-appearance:radio;
	appearance:radio;
}
button,[type="button"],[type="reset"],[type="submit"]{ cursor:pointer; }
button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{ cursor:default; }
:-moz-focusring{ outline:auto; }
select:disabled{ opacity:inherit; }
option{ padding:0; }
fieldset{
	margin:0;
	padding:0;
	min-width:0;
}
legend{ padding:0; }
progress{ vertical-align:baseline; }
textarea{ overflow:auto; }
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{ height:auto; }
[type="search"]{ outline-offset:-2px; }
[type="search"]::-webkit-search-decoration{ -webkit-appearance:none; }
::-webkit-file-upload-button{
	-webkit-appearance:button;
	font:inherit;
}
label[for]{ cursor:pointer; }
details{ display:block; }
summary{ display:list-item; }
[contenteditable]:focus{ outline:auto; }
table{
	border-color:inherit;
	border-collapse:collapse;
}
caption{ text-align:left; }
td,th{
	vertical-align:top;
	padding:0;
}
th{
	text-align:left;
	font-weight:bold;
}

/**
 * 初期値
----------------------------------------------------------------*/
body{
	font-size:var(--s);
	line-height:1.75;
	font-family:var(--gothic);
	color:var(--black);
	font-feature-settings:'palt';
}
*,::before,::after{
	transition:all .2s ease;
	border-color:var(--border);
}
svg,img,embed,object,iframe{ vertical-align:top; }
fieldset,img,abbr,acronym{ border-width:0; }
table{ width:100%; }
iframe{ display:block; }
img{
	display:block;
	margin:0 auto;
	max-width:100%;
}
p{ text-align:justify; }
pre{
	border-width:1px;
	padding:10px;
	font-size:var(--xs);
	background:var(--filter);
	font-family:SFMono-Regular,Consolas,Menlo,Meiryo,monospace;
}
hr{ border:none; }

/**
 * プロトタイプ
----------------------------------------------------------------*/

/* レスポンシブ分岐
----------------------------------------------------------------
基本 pc pctab tab sptab sp
----------------------------------------------------------------*/
.pc{ display:block; }
.pctab{ display:block; }
.tab{ display:none; }
.sptab{ display:none; }
.sp{ display:none; }
@media screen and (max-width: 960px){
	.pc{ display:none; }
	.tab{ display:block; }
	.sptab{ display:block; }
}
@media screen and (max-width: 520px){
	.pctab{ display:none; }
	.tab{ display:none; }
	.sp{ display:block; }
}

/* コンテンツ幅
----------------------------------------------------------------
基本 base
オプション -tab - sp -legacy
----------------------------------------------------------------*/
.base{
	max-width:var(--bp-pc);
	margin:0 auto;
}
.base.-tab{ max-width:var(--bp-tab); }
.base.-sp{ max-width:var(--bp-sp); }
.base.-legacy{ max-width:var(--bp-legacy); }
@media screen and (max-width: 960px){
	.base.-smart{ max-width:375px; }
}

/* 単一レイアウト
----------------------------------------------------------------
基本 alone
オプション -halfwrap -nowrap
----------------------------------------------------------------*/
.alone{ margin:var(--gap); }
.alone.-halfwrap{ margin:var(--gap-half) var(--gap); }
.alone.-nowrap{ margin:0 var(--gap); }

/* 中央レイアウト
----------------------------------------------------------------
基本 central
オプション -left -right
----------------------------------------------------------------*/
.central{
	display:flex;
	flex-direction:column;
	flex-basis:100%;
	align-items:center;
	justify-content:center;
}
.central.-left{ align-items:flex-start; }
.central.-right{ align-items:flex-end; }

/* 段組みレイアウト
----------------------------------------------------------------
基本 columns
余白 -nogap -nowrap -halfgap -halfwrap
その他 -keep -early
----------------------------------------------------------------*/
.columns{
	columns:2;
	column-gap:var(--gap);
	margin:var(--gap);
}
.columns.-nogap{ column-gap:0; }
.columns.-nowrap{ margin:0; }
.columns.-halfgap{ column-gap:calc(var(--gap) / 2) var(--gap); }
.columns.-halfwrap{ margin:calc(var(--gap) / 2) var(--gap); }
@media screen and (max-width: 960px){
	.columns:not(.-keep).-early{ columns:1; }
}
@media screen and (max-width: 520px){
	.columns:not(.-keep){ columns:1; }
}

/* 余白
----------------------------------------------------------------
上下 _ __ ___
上 t _t __t ___t
下 b _b __b ___b
----------------------------------------------------------------*/
._{ margin-top:calc(var(--gap) / 1); margin-bottom:calc(var(--gap) / 1); }
.__{ margin-top:calc(var(--gap) / 2); margin-bottom:calc(var(--gap) / 2); }
.___{ margin-top:calc(var(--gap) / 4); margin-bottom:calc(var(--gap) / 4); }
.t{ margin-top:calc(var(--gap) * 2); }
._t{ margin-top:calc(var(--gap) / 1); }
.__t{ margin-top:calc(var(--gap) / 2); }
.___t{ margin-top:calc(var(--gap) / 4); }
.b{ margin-bottom:calc(var(--gap) * 2); }
._b{ margin-bottom:calc(var(--gap) / 1); }
.__b{ margin-bottom:calc(var(--gap) / 2); }
.___b{ margin-bottom:calc(var(--gap) / 4); }

/* 文字サイズ
----------------------------------------------------------------
基本 xxl xl l m s xs xxs
----------------------------------------------------------------*/
.xxl{ font-size:var(--xxl); }
.xl{ font-size:var(--xl); }
.l{ font-size:var(--l); }
.m{ font-size:var(--m); }
.s{ font-size:var(--s); }
.xs{ font-size:var(--xs); }
.xxs{ font-size:var(--xxs); }

/* 見出し
----------------------------------------------------------------
基本 h1 h2 h3 h4 h5 h6 copy
----------------------------------------------------------------*/
.h1,.h2,.h3,.h4,.h5,.h6{
	font-weight:bold;
	line-height:1.4;
}
.h1 > p,.h2 > p,.h3 > p,.h4 > p,.h5 > p,.h6 > p{
	font-size:var(--xs);
	font-weight:normal;
}
.h1,.h2{
	display:flex;
	flex-direction:column;
	flex-basis:100%;
	align-items:center;
	justify-content:center;
	text-align:center;
	letter-spacing:.2em;
}
.h1{
	font-size:var(--l);
	padding:var(--gap);
	min-height:120px;
}
.h2{
	font-size:var(--xl);
	margin:var(--gap-double) var(--gap) var(--gap);
}
.h3{
	font-size:var(--l);
	margin:var(--gap-half) 0;
}
.h4{
	font-size:var(--m);
	margin:var(--gap-half) 0 var(--gap-quarter);
}
.h5{
	font-size:var(--s);
	margin:var(--gap-half) 0 var(--gap-quarter);
}
.copy{
	font-size:var(--xl);
	margin:var(--gap-half) 0;
}

/* 文章
----------------------------------------------------------------
基本クラス p
オプション -center
----------------------------------------------------------------*/
.p.-center{
	text-align:center;
	font-size:var(--s);
	letter-spacing:.2em;
}

/* ボタン
----------------------------------------------------------------
基本 buttons
分割 --2 --3 --4 --5 --6
モバイル分割 -to2 -to3
余白 -nowrap
装飾 -reverse -radius -line -stick
----------------------------------------------------------------*/
.buttons{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
	gap:var(--gap-half);
	margin:var(--gap) var(--gap-half);
	position:relative;
}
.buttons > *{
	flex-basis:240px;
	display:block;
	padding:var(--gap-quarter) var(--gap-half);
	background:var(--main);
	color:white;
	position:relative;
	letter-spacing:.2em;
	text-align:center;
	vertical-align:middle;
	font-size:var(--s);
}
.buttons > :hover{ background:var(--sub); }
.buttons > ::before{
	content:'';
	position:absolute;
	display:block;
}

/* 分割 */
.buttons.--2 > *{ flex-basis:calc((100% - var(--gap-half) * 1) / 2); }
.buttons.--3 > *{ flex-basis:calc((100% - var(--gap-half) * 2) / 3); }
.buttons.--4 > *{ flex-basis:calc((100% - var(--gap-half) * 3) / 4); }
.buttons.--5 > *{ flex-basis:calc((100% - var(--gap-half) * 4) / 5); }
.buttons.--6 > *{ flex-basis:calc((100% - var(--gap-half) * 5) / 6); }
@media screen and (max-width: 520px){
	.buttons{ margin:var(--gap); }
	.buttons > *,
	.buttons.--2 > *,
	.buttons.--3 > *,
	.buttons.--4 > *,
	.buttons.--5 > *,
	.buttons.--6 > *{ flex-basis:100%; }
	.buttons.-to2 > *,
	.buttons.-to2.--2 > *,
	.buttons.-to2.--3 > *,
	.buttons.-to2.--4 > *,
	.buttons.-to2.--5 > *,
	.buttons.-to2.--6 > *{ flex-basis:calc((100% - var(--gap-half) * 1) / 2); }
	.buttons.-to3 > *,
	.buttons.-to3.--2 > *,
	.buttons.-to3.--3 > *,
	.buttons.-to3.--4 > *,
	.buttons.-to3.--5 > *,
	.buttons.-to3.--6 > *{ flex-basis:calc((100% - var(--gap-half) * 2) / 3); }
}

/* 余白 */
.buttons.-nowrap{ margin:var(--gap) 0; }

/* 余白 */
.buttons.-reverse > *{ background:var(--sub); }
.buttons.-reverse > :hover{ background:var(--main); }

/* 角丸 */
.buttons.-radius > *{ border-radius:2em; }

/* ライン */
.buttons.-line > *{
	background:none;
	border:2px solid var(--main);
	color:var(--main);
}
.buttons.-line > :hover{
	background:var(--main);
	border-color:rgba(0,0,0,0);
	color:white;
}
.buttons.-line.-reverse > *{ border-color:var(--sub); }
.buttons.-line.-reverse > :hover{ background:var(--sub); }

/* スティック */
.buttons.-stick > ::before{
	top:50%;
	left:-10px;
	width:0;
	border-top:1px solid var(--border);
}
.buttons.-stick > :hover::before{ width:20px; }

/* バナー
----------------------------------------------------------------
基本 banners
分割 --2 --3 --4 --5 --6
モバイル分割 -to2 -to3
余白 -nowrap
----------------------------------------------------------------*/
.banners{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:var(--gap-half);
	margin:var(--gap) var(--gap-half);
}
.banners > *{
	flex-basis:384px;
	display:block;
}
.banners > :hover{ opacity:.7; }

/* 分割 */
.banners.--2 > *{ flex-basis:calc((100% - var(--gap-half) * 1) / 2); }
.banners.--3 > *{ flex-basis:calc((100% - var(--gap-half) * 2) / 3); }
.banners.--4 > *{ flex-basis:calc((100% - var(--gap-half) * 3) / 4); }
.banners.--5 > *{ flex-basis:calc((100% - var(--gap-half) * 4) / 5); }
.banners.--6 > *{ flex-basis:calc((100% - var(--gap-half) * 5) / 6); }
@media screen and (max-width: 520px){
	.banners > *,
	.banners.--2 > *,
	.banners.--3 > *,
	.banners.--4 > *,
	.banners.--5 > *,
	.banners.--6 > *{ flex-basis:100%; }
	.banners.-to2 > *,
	.banners.-to2.--2 > *,
	.banners.-to2.--3 > *,
	.banners.-to2.--4 > *,
	.banners.-to2.--5 > *,
	.banners.-to2.--6 > *{ flex-basis:calc((100% - var(--gap-half) * 1) / 2); }
	.banners.-to3 > *,
	.banners.-to3.--2 > *,
	.banners.-to3.--3 > *,
	.banners.-to3.--4 > *,
	.banners.-to3.--5 > *,
	.banners.-to3.--6 > *{ flex-basis:calc((100% - var(--gap-half) * 2) / 3); }
}

/* 余白 */
.banners.-nowrap{ margin:var(--gap) 0; }

/* テーブル
----------------------------------------------------------------
基本 table
枠線 -border -hborder -vborder -inborder -outborder
行ヘッダ -header
ストライプ -stripe
----------------------------------------------------------------*/
.table > table tr > *{
	font-size:var(--xs);
	padding:5px 10px;
}
.table > table thead > tr > *,
.table > table tfoot > tr > *{
	background:var(--main);
	color:white;
}
.table > table th{ white-space:nowrap; }
@media screen and (max-width: 520px){
	.table{
		overflow:auto;
	}
}

/* 枠線 */
.table.-border > table tr > *{ border-width:1px; }
.table.-hborder > table tr > *{ border-top-width:1px; }
.table.-hborder > table tr:last-child > *{ border-bottom-width:1px; }
.table.-vborder > table tr > *{ border-left-width:1px; }
.table.-vborder > table tr > *:last-child{ border-right-width:1px; }
.table.-inborder > table tr:not(:first-child) > *{ border-top-width:1px; }
.table.-inborder > table tr > *:not(:first-child){ border-left-width:1px; }
.table.-inborder > table > thead > tr > *{ border-bottom-width:1px; }
.table.-inborder > table > tfoot > tr > *{ border-top-width:1px; }
.table.-outborder > table{ border-width:1px; }

/* 行ヘッダ */
.table.-header > table th{
	background:var(--main);
	color:white;
}

/* ストライプ */
.table.-stripe > table tr > *{
	border-top:0;
	border-bottom:0;
}
.table.-stripe > table :not(thead):not(tfoot) tr:nth-child(even) > *{ background:var(--filter); }
.table.-stripe.-header > table :not(thead):not(tfoot) tr:nth-child(even) > th{ background:var(--main); }
.table.-stripe.-header > table :not(thead):not(tfoot) tr:nth-child(odd) > th{
	position:relative;
	background:rgba(255,255,255,.1);
}
.table.-stripe.-header > table :not(thead):not(tfoot) tr:nth-child(odd) > th::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	display:block;
	background:var(--main);
	z-index:-1;
}

/* ペア
----------------------------------------------------------------
基本 pair
----------------------------------------------------------------*/
.pair th{
	font-size:var(--xs);
	white-space:nowrap;
	width:1px;
	padding:.2em 1em .2em 0;
}
.pair td{ padding:.2em 0; }

/* 文字整列
----------------------------------------------------------------
基本 c r j
----------------------------------------------------------------*/
.c{ text-align:center; }
.r{ text-align:right; }
.j{ text-align:justify; }

/* トランジション
----------------------------------------------------------------
基本 
----------------------------------------------------------------*/
/* マウスオーバー */
.opacity:hover{ opacity:.7; }

/* 埋め込み
----------------------------------------------------------------
基本 yt gm
----------------------------------------------------------------*/
/* YouTube */
.yt > a:hover{ opacity:.7; }
.yt{
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}
.yt > iframe{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* GoogleMaps */
.gm > iframe{
	width:100%;
	height:400px;
}

/* スペーサー・水平線
----------------------------------------------------------------
基本クラス hr spacer
オプション -halfwrap -quarterwrap -nowrap
----------------------------------------------------------------*/
.hr{
	border-bottom:1px solid var(--border);
	margin-top:var(--gap);
	margin-bottom:var(--gap);
}
.spacer{
	margin-top:var(--gap);
	margin-bottom:var(--gap);
}
.hr.-halfwrap,.spacer.-halfwrap{ margin-top:var(--gap-half); margin-bottom:var(--gap-half); }
.hr.-quarterwrap,.spacer.-quarterwrap{ margin-top:var(--gap-quarter); margin-bottom:var(--gap-quarter); }
.hr.-nowrap,.spacer.-nowrap{ margin-top:0; margin-bottom:0; }

/* ページャー
----------------------------------------------------------------
基本クラス pager
オプション -square -circle -line
----------------------------------------------------------------*/
.pager > ul{
	padding:var(--gap);
	text-align:center;
}
.pager > ul > li{ display:inline-block; }
.pager > ul > li > *{
	padding:5px 10px;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}
.pager > ul > li > span{
	color:var(--black);
	opacity:.3;
}
.pager > ul > li > a{ color:var(--black); }
.pager > ul > li > a:hover{ color:var(--main); }

/* スクウェア・サークル */
.pager.-square:not(.-line) > ul > li > *,
.pager.-circle:not(.-line) > ul > li > *{
	background:var(--main);
	color:white;
}
.pager.-square:not(.-line) > ul > li > a:hover,
.pager.-circle:not(.-line) > ul > li > a:hover{
	background:var(--sub);
	color:white;
}
.pager.-circle > ul > li > *{
	border-radius:50%;
	width:3em;
	height:3em;
	padding:5px;
}

/* ライン */
.pager.-line > ul > li > *{
	background:none;
	border:1px solid var(--main);
	color:var(--main);
}
.pager.-line > ul > li > a:hover{
	background:none;
	border:1px solid var(--sub);
	color:var(--sub);
}

/* その他
----------------------------------------------------------------
インラインリンク a
タグ tag
----------------------------------------------------------------*/
/* インラインリンク */
.a{
	display:inline;
	color:var(--main);
}
.a:hover{ color:var(--sub); }

/* タグ */
.tag{
	display:inline-block;
	font-size:90%;
	background:var(--main);
	color:white;
	text-align:center;
	padding:.3em 1em;
	margin-right:.5em;
}