/**************************************** スタイル設定1 ****************************************/
html,body {font-size:0.9vw;margin:0;padding:0;background:#000;}
body {font-family: "Roboto","Noto Sans Japanese","Helvetica",sans-serif;}
div,h1,h2,h3,h4,ul,li,dl,dt,dd,img {margin:0px; padding: 0px;}
ul {list-style: none; margin: 0px; padding:0px;}
p {margin: 0px; padding: 0px;}
a,a:visited {color: #000; text-decoration: none;}
a:hover {color: #000; text-decoration: underline;}
a img {border-style:none;}
input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
* {box-sizing:border-box;}
/*SP*/
@media (max-width: 896px){
	html,body {font-size:3.5vw;}
}

/*共通*/
@media (max-width: 896px){ .pc {display:none !important;} }
@media (min-width: 897px){ .sp {display:none !important;} }

/*PCの場合*/
@media (min-width: 897px){
}
@media (min-width: 1200px){
}


/*横の場合*/
@media screen and (orientation: landscape) {
}
/*縦の場合*/
@media screen and (orientation: portrait) {
}

/*パソコン設定*/
@media (min-width: 897px){
.col {}
.collist {display:flex; flex-wrap:wrap;}
.collist .inner {justify-content:space-between;}
.col .inner {float:left;}
.col .inner.right {float:right;}
.col2 .inner {width:50%;} .col3 .inner {width:33.3%;} .col4 .inner {width:25%;} .col5 .inner {width:20%;}
.col6 .inner {width:16.6%;} .col7 .inner {width:14.2%;} .col8 .inner {width:12.5%;} .col9 .inner {width:11.1%;} .col10 .inner {width:10%;}

	/*横の場合*/
	@media screen and (orientation: landscape) {
	}
	/*縦の場合*/
	@media screen and (orientation: portrait) {
	}
}

/**************************************** スタイル設定2 ****************************************/

section {}
.contentarea {padding:7vw 5vw;position:relative;z-index:100;}
.contentwrap {position:relative;z-index:100;}
.content {width:65vw;max-width:100%;margin:0px auto;}
.content.wide {width:80vw;}
.text-center {text-align:center;}

a.btn, span.btn {font-size:1.4rem;padding:0.6em 3em;border-radius:2em;font-weight:bold;
	display:inline-block;text-decoration:none;background:#f00;border:solid #f00 0.4rem;color:#fff;cursor:pointer;}
a.btn:hover, span.btn:hover {transform:scale(1.05);transition:0.2s;}

a.btn2, span.btn2 {font-size:1.4rem;padding:0.6em 3em;border-radius:2em;font-weight:bold;
	display:inline-block;text-decoration:none;background:#fff;border:solid #fff 0.4rem;color:#000;cursor:pointer;}
a.btn2:hover, span.btn2:hover {transform:scale(1.05);transition:0.2s;}

a.btn3, span.btn3 {font-size:1.0rem;padding:0.5em 2em;margin-top:1rem;border-radius:0.2rem;
	display:inline-block;text-decoration:none;background:#f00;color:#fff;cursor:pointer;font-weight:bold;}
a.btn3:hover, span.btn3:hover {transform:scale(1.05);transition:0.2s;text-decoration:none;color:#fff;}

a.btn4, span.btn4 {font-size:1.4rem;padding:0.6em 3em;border-radius:2em;font-weight:bold;
	display:inline-block;text-decoration:none;background:#fff;border:solid #f00 0.4rem;color:#f00;cursor:pointer;}
a.btn4:hover, span.btn4:hover {transform:scale(1.05);transition:0.2s;}


/*SP*/
@media (max-width: 896px){
	.contentarea {padding:15vw 5vw;}
	.content {width:100%;}
}


h2 {font-size:3.5rem;line-height:1.8em;margin-bottom:0.8em; }
p {font-size:1.2rem;line-height:1.8em;}
/*SP*/
@media (max-width: 896px){
	h2 {font-size:1.8rem;margin-bottom:1em;}
	p {font-size:1.0rem;}
}

.contentarea {position:relative;}

.contentarea h2 {font-size:4.5rem;}
.contentarea ul {margin-bottom:2rem;}
.contentarea ul li {font-size:1.4rem;}
.contentarea ul li:before {content:"✅ ";}
.contentarea p {font-size:1.4rem;margin-bottom:2rem;}
.contentarea p strong {border-bottom:solid #f00 0.2em;}
.contentarea table {width:100%;border-collapse:collapse;margin-bottom:2rem;}
.contentarea table th {border:solid #000 1px;font-size:1.4rem;padding:1em 2em;}
.contentarea table td {border:solid #000 1px;font-size:1.4rem;padding:1em 2em;}
/*SP*/
@media (max-width: 896px){
	.contentarea h2 {font-size:2.5rem;}
	.contentarea ul {margin-bottom:2rem;}
	.contentarea ul li {font-size:1.2rem;}
	.contentarea p {font-size:1.2rem;}
	.contentarea table th {font-size:1.2rem;}
	.contentarea table td {font-size:1.2rem;}
}

/**************************************** ヘッダー ****************************************/
.headerarea {position:fixed;top:0;left:0;width:100%;height:10vh; background:#000;z-index:8000;border-bottom:solid #333 1px; }
.headerarea .header {padding:0 3vw;}
.headerarea img.logo {width:15vw;height:10vh;object-fit:contain;}
.headerarea .menu {position:absolute;top:0;right:0;width:80%;height:10vh;}
.headerarea .menu a {font-size:1.2rem;font-weight:bold;line-height:10vh;color:#fff;
display:inline-block;padding:0 2em;}

/*SP*/
@media (max-width: 896px){
	.headerarea img.logo {width:50vw;height:10vh;object-fit:contain;}
	.headerarea .menu {position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(0,0,0,0.8);text-align:center;padding:10vh 0px;
		transform:translateX(150vw);transition:0.2s;backdrop-filter:blur(15px);}
	.headerarea .menu.on {transform:translateX(0vw);transition:0.4s;}
	.headerarea .menu a {font-size:1.6rem;display:block;line-height:1em;padding:1em 2rem;}
	.barwrap {position:fixed;top:0;right:0;width:20vw;height:20vw;z-index:10000;}
	.barwrap .bar {width:16vw;height:1vw;background:#fff;background:linear-gradient(135deg, #f00 0%, #ffc 50%, #f00 90%);
		position:absolute;}
	.barwrap .bar.bar01 {top:7.5vw;left:3vw;}
	.barwrap .bar.bar02 {top:11.5vw;left:1vw;}
	.barwrap.on .bar {background:linear-gradient(135deg, #38c 0%, #fff 50%, #38c 90%);}
	.barwrap.on .bar.bar01 {top:50%;left:50%;transform:translateX(-50%) translateY(-50%) rotate(45deg);transition:0.4s;}
	.barwrap.on .bar.bar02 {top:50%;left:50%;transform:translateX(-50%) translateY(-50%) rotate(135deg);transition:0.4s;}
	.barwrap.on.out .bar.bar01 {top:7.5vw;left:3vw;transform:translateX(0%) translateY(0%) rotate(0deg);transition:0.2s;}
	.barwrap.on.out .bar.bar02 {top:11.5vw;left:1vw;transform:translateX(0%) translateY(0%) rotate(0deg);transition:0.2s;}
}
/**************************************** フッター ****************************************/
.contentarea.ctaarea {text-align:center;background:#000!important;padding:20vh 5vw;}
.contentarea.ctaarea h2 {color:#fff;}
.contentarea.ctaarea p {color:#fff;}


.footerarea {background:#000;padding:5vh 5vw;}
.copyright {text-align:center;font-size:0.9rem;color:#f00;}
/*SP*/
@media (max-width: 896px){
	.contentarea.ctaarea {padding:10vh 5vw;text-align:left;}
	.contentarea.ctaarea h2 {line-height:1.4em;}
	.contentarea.ctaarea p {font-size:1.4rem;}
	.copyright {font-size:1.2rem;}
}