@charset "utf-8";

/* ------------------------------ */
/* ▼ block 要素 ▼ */

:root{
	--margin-center:0 auto;
	--col-link:#0044CC;
	--col:230;
	--col-red:0;
	--col-gray:0;
	--col-orange:25;
	--col-brown:30;
	--col-yellow:60;
	--col-green:110;
	--col-skyblue:185;
	--col-blue:230;
	--col-purple:265;
	--col-pink:300;
}



div,
table,
td,
th,
h1,
h2,
h3,
h4,
h5,
p,
ul,
ol,
li,
dl,
dt,
dd
{
	margin: 0;
	padding: 0;
	float: none;
	border-collapse:collapse;
	list-style:none;
	line-height:1.82;
}
*{
	box-sizing:border-box;
}	

br{
	display:block;
	content:"";
	margin:16.2px 0px;	
}




.disp-grid,
.grid,
*[class^="grid-border"]
{
	display:grid;
}

.disp-flex,
.flex,
*[class^="flex-border"]
{
	display:flex;
	flex-wrap:wrap;
}


*[class^="grid-border"] > *,
*[class^="flex-border"] > *
{
	border:1px solid hsl(var(--col),100%,95%);
	padding:.5vw 1vw;
	margin:-1px 0px 0px -1px;
}

*[class^="flex-border"] > *
{
	margin:0 .5vw 1vw !important;
}







/* ▼ block 要素 ▼ */
/* ------------------------------ */

/* ------------------------------ */
/* ▼ BOX 関連 ▼ */


.fl-l{
	float:left;	
}
.fl-r{
	float:right;	
}

.disp-none,
._disp_none{
	display:none;	
}

.after-clear:after{
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}


/*-----------------------------------*/
/* 角丸 */

.radius-s{
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}


.radius-m{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.radius-b{
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	border-radius:15px;
}

.radius-g{
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}


/* 角丸 */
/*-----------------------------------*/


/*-----------------------------------*/
/* 円 */

.circle-auto{
	width:auto;	
	height:auto;
	border-radius: 50%;
}

.circle-25{
	width:50px;
	height:50px;
	border-radius: 50%;
}

.circle-30{
	width:30px;
	height:30px;
	border-radius: 50%;
}

.circle-35{
	width:35px;
	height:35px;
	border-radius: 50%;
}


.circle-50{
	width:50px;
	height:50px;
	border-radius: 50%;
}

.circle-100{
	width:100px;
	height:100px;
	border-radius: 50%;
}


.circle-150{
	width:150px;
	height:150px;
	border-radius: 50%;
}

.circle-200{
	width:200px;
	height:200px;
	border-radius: 50%;
}


/* 円 */
/*-----------------------------------*/


.foreground{
	z-index:9999;	
}

.fixed {
    position: fixed;
}


.block{
	display:block;
}

.inline-block,
.inline{
	display:inline-block;
}


.mgt-s{
	margin-top:8px !important;
}

.mgt-m{
	margin-top:16px !important;
}

.mgt-b{
	margin-top:24px !important;
}

.mgt-g{
	margin-top:32px !important;
}

.mgt-mb{
	margin-top:40px !important;
}


.mgb-s{
	margin-bottom:8px !important;
}

.mgb-m{
	margin-bottom:16px !important;
}

.mgb-b{
	margin-bottom:24px !important;
}

.mgb-g{
	margin-bottom:32px !important;
}

.mgb-mb{
	margin-bottom:40px !important;
}


.mgl-s{
	margin-left:8px !important;
}

.mgl-m{
	margin-left:16px !important;
}

.mgl-b{
	margin-left:24px !important;
}

.mgl-g{
	margin-left:32px !important;
}

.mgl-mb{
	margin-right:40px !important;
}

.mgr-s{
	margin-right:8px !important;
}

.mgr-m{
	margin-right:16px !important;
}

.mgr-b{
	margin-right:24px !important;
}

.mgr-g{
	margin-right:32px !important;
}

.mgr-mb{
	margin-right:40px !important;
}




.pdt-s{
	padding-top:1vw !important;
}

.pdt-m{
	padding-top:1.5vw !important;
}

.pdt-b{
	padding-top:2vw !important;
}

.pdt-g{
	padding-top:3vw !important;
}

.mgt-mb{
	padding-top:5vw !important;
}


.pdb-s{
	padding-bottom:1vw !important;
}

.pdb-m{
	padding-bottom:1.5vw !important;
}

.pdb-b{
	padding-bottom:2vw !important;
}

.pdb-g{
	padding-bottom:3vw !important;
}

.pdb-mb{
	padding-bottom:5vw !important;
}


.pdl-s{
	padding-left:1vw !important;
}

.pdl-m{
	padding-left:1.5vw !important;
}

.pdl-b{
	padding-left:2vw !important;
}

.pdl-g{
	padding-left:3vw !important;
}

.pdl-mb{
	padding-right:5vw !important;
}

.pdl-s{
	padding-right:1vw !important;
}

.pdr-m{
	padding-right:1.5vw !important;
}

.pdr-b{
	padding-right:2vw !important;
}

.pdr-g{
	padding-right:3vw !important;
}

.pdr-mb{
	padding-right:5vw !important;
}



/* ------------------------------ */
/* ▼ text ▼ */

a{
	color:var(--col-link);	
}

a:visited{
	color:var(--col-link);	
}


.al-c{
	text-align:center;	
}

.al-l{
	text-align:left;	
}

.al-r{
	text-align:right;	
}

.textd-none{
	text-decoration:none;
}

.textd-underline{
	text-decoration:underline;
}

.textd-uline-h:hover{
	text-decoration:underline;
}

.textd-nodata{
	text-decoration:line-through;
}

.no-data{
	color:hsl(var(--col),0%,70%);
	text-decoration:line-through;
}


.font-size10{
	font-size:10px;	
}

.font-size12{
	font-size:12px;	
}

.font-size14{
	font-size:14px;	
}

.font-size16,
.first-letter-font-size16:first-letter{
	font-size:16px;	
}

.font-size18,
.first-letter-font-size18:first-letter{
	font-size:18px;	
}

.font-size20,
.first-letter-font-size20:first-letter{
	font-size:20px;	
}

.font-size22,
.first-letter-font-size22:first-letter{
	font-size:22px;	
}

.font-size24,
.first-letter-font-size24:first-letter{
	font-size:24px;	
}

.font-size26,
.first-letter-font-size26:first-letter{
	font-size:26px;	
}

.font-size28,
.first-letter-font-size28:first-letter{
	font-size:28px;	
}

.font-size30,
.first-letter-font-size30:first-letter{
	font-size:30px;	
}

.font-size32,
.first-letter-font-size32:first-letter{
	font-size:32px;	
}

.font-size34,
.first-letter-font-size34:first-letter{
	font-size:34px;	
}

.font-size36,
.first-letter-font-size36:first-letter{
	font-size:36px;	
}

.font-size38{
	font-size:38px;	
}

.font-size40{
	font-size:40px;	
}

.font-size42{
	font-size:42px;	
}

.font-size44{
	font-size:44px;	
}

.font-size46{
	font-size:46px;	
}

.font-size48{
	font-size:48px;	
}

.font-size50{
	font-size:50px;	
}

.font-size52{
	font-size:52px;	
}

.fwnormal{
	font-weight:normal;	
}

.fwbold{
	font-weight:bold;	
}

.btn{
	cursor: pointer;
}

/* ▼ text ▼ */
/* ------------------------------ */



/* ------------------------------ */
/* ▼ border ▼ */

.border-w1{
	border-width:1px;	
}

.border-w2{
	border-width:2px;	
}

.border-w3{
	border-width:3px;	
}

.border-w4{
	border-width:4px;	
}

.border-w5{
	border-width:5px;	
}

.border-w10{
	border-width:10px;	
}

.border-s-s{
	border-style:solid;	
}


.border-s-ssns{
	border-style:solid solid none solid;	
}


.border-s-sn{
	border-style:solid none;	
}

.border-s-dn{
	border-style:dotted none;	
}

.border-s-d{
	border-style:dotted;	
}

.border-s-nns{
	border-style:none none solid;	
}

.border-s-snn{
	border-style:solid none none;	
}

.border-s-nnd{
	border-style:none none dotted;	
}


.no-border,
.border-none
{
	border-style:none !important;	
}


/* ▼ border ▼ */
/* ------------------------------ */

.col-gray{
	color: hsl(var(--col),0%,60%);
}

.col-red{
	color: hsl(var(--col-red),100%,50%);
}


/* ------------------------------ */
/* ▼ form parts ▼ */


input[type=radio]{
	-webkit-appearance: radio !important;
}

from{
	text-align:center;	
}

from .wrap{
	position:relative;
}

form button{
	cursor: pointer;
	padding:4px 24px;
	font-size: 1.6rem;
	margin: 0 24px;
}

form > *[class*="grid"]{
	padding:0 !important;
}

form .wrap input::before,
form .wrap select::before{
	display: block;
	width:100%;
}

form :is(input , textarea , select){
	border-radius: 5px;
	border: 1px solid hsl(var(--col),0%,90%);
	padding:8px;
	background:#fff;
}

form :is(input , textarea , select):focus{
	background:#fff;
}

form textarea
{
	height:200px;	
}



form .wrap > *[class*="submit"]
{
	display:inline-block !important;
	margin:0 3vw;
	padding:4px 32px !important;
	font-size:1.6rem !important;
	box-shadow: 2px 2px 4px -2px #999;
	background:hsl(var(--col),0%,90%);
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	color:hsl(var(--col),0%,30%) !important;
	cursor:pointer;
}

form .wrap > *[class*="submit"]:before
{
	content:"" !important;
}

form *::placeholder{
	color:hsl(var(--col),0%,80%);
}
