@charset "utf-8";

/* reset */
html {
	min-width: 100%;
	overflow-y: scroll;
}
html.scroll-lock {
	overflow-y: hidden;
}
body, header, footer, nav, main, section, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, span, table, tr, th, td, a, :after, :before {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-style: normal;
	font: inherit;
	vertical-align: baseline;
}
object, embed {
	vertical-align: top;
}
img, abbr, acronym, fieldset {
	border: 0;
}
a img {
	outline: none;
	border: none;
}
img {
	vertical-align: top;
	border: none;
	outline: none;
}
ul, ol {
	list-style-type: none;
}
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
button, input, optgroup, select, textarea , label {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
	font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
a:focus, *:focus {
	outline:none;
}
*, :after, :before {
	box-sizing: border-box;
}



/* default */
body {
	width: 100%;
	color: #000;
	font-family: Helvetica, "Helvetica Neue", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-feature-settings: "palt";
	line-height: 1;
	font-weight: 500;
	background: #E8E8E8;
}
#wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#wrap.is-locked {
	position: fixed;
    width: 100%;
}


a {
	color: #000;
	text-decoration: underline;
	word-break: break-all;
}
a:hover, a:focus {
	color: rgba(99,190,172,1);
	text-decoration: underline;
}

.imgwrap {
	margin: 0 auto;
}
.imgwrap img {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: auto;
}

@media screen and (min-width: 768px) {
	.noPc {
		display: none;
	}
}
@media screen and (max-width: 768px) {
	.noSp {
		display: none;
	}
}



/* heaeder
====================================================*/
.headerwrap {
	width: 100%;
}
header {
	position: relative;
	width: 100%;
	height: 110px;
	background: #FFF;
	overflow: hidden;
	z-index: 100;
}
@media screen and (max-width: 768px) {
	header {
		height: calc(60px + 1rem);
	}
}
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
}

/* ---  logo  --- */
.header-logo {
	display: flex;
	width: 350px;
}
.header-logo .imgwrap {
	width: 100%;
}
.header-logo img {
	display: block;
	margin: 0 auto;
	width: 100%;
}
@media screen and (max-width: 768px) {
	.header-logo {
		width: auto;
		height: calc(60px + 1rem);
	}
	.header-logo img {
		width: auto;
		height: calc(60px + 1rem);
	}
}
.header-inner p {
	display: inline-flex;
	margin-right: 1rem;
	padding: .5rem;
	background: rgba(99,190,172,1);
	color: #FFF;
	font-weight: bold;
}


/* footer
====================================================*/
.footerwrap {
	width: 100%;
}

footer {
	width: 100%;
}
.footer-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem 0;
	width: 100%;
	background: #000;
	color: #FFF;
}
.footer-copy {
	position: relative;
	width: 100%;
	text-align: center;
}
.footer-copy p {
	width: 100%;
}
.footer-copy p.sub {
	margin-top: .5rem;
	font-size: .9rem;
	line-height: 1.2;
}


/*pagetop*/
.pagetop {
	position: fixed;
	right: .5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	background: #FFF;
	cursor: pointer;
	z-index: 1;
}



/* main
====================================================*/
main.main {
	flex: 1;
	margin: 2rem auto;
	padding: 4rem 2rem;
	width: calc(100% - 4rem);
	max-width: 1000px;
	border-radius: 1rem;
	background: #FFF;
}
section {
	margin: 0 auto 3rem;
}
section:last-child {
	margin-bottom: 0;
}
@media screen and (max-width: 768px) {
	main.main {
		margin: .5rem auto;
		padding: 3rem 1rem;
		width: calc(100% - 1rem);
		border-radius: .5rem;
	}
}

section.head {
	margin-bottom: 4rem;
}
section.head h1 {
	margin-bottom: 2rem;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 768px) {
	section.head {
		margin-bottom: 2rem;
	}
	section.head h1 {
		font-size: 1.7rem;
		line-height: 1.2;
	}
}
section.head .imgwrap {
	max-width: 336px;
}
section.head .catch {
	margin: 2rem auto 4rem;
	font-size: 1.2rem;
	line-height: 1.6;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 768px) {
	section.head .catch {
		margin: 0 auto 2rem;
		font-size: 1.1rem;
	}
}

section.head > div {
	margin-top: 2rem;
}
section.head > div .title {
	margin-bottom: .5rem;
	font-size: 1.2rem;
	font-weight: bold;
}
section.head > div p:not(.title) {
	line-height: 1.4;
}


section:not(.head) h2 {
	margin-bottom: 1rem;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 1.2;
}
@media screen and (max-width: 768px) {
	section:not(.head) h2 {
		margin-bottom: .5rem;
	}
}
section:not(.head) img {
	border: 2px solid #CCC;
}
section:not(.head) .youtube {
	aspect-ratio: 16 / 9;
}
section:not(.head) .youtube iframe {
	width: 100%;
	height: 100%;
}
section:not(.head) a {
	position: relative;
	display: block;
	margin: 0 auto 0 0;
	max-width: 400px;
}
section:not(.head) a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	transition: .2s;
}
section:not(.head) a:hover::after {
	background: rgba(0,0,0,.1);
}
section:not(.head) .attention {
	margin-top: .5rem;
	font-size: .9rem;
}
section:not(.head) ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: -2rem;
}
section:not(.head) li {
	padding-top: 1rem;
	margin-bottom: 2rem;
	width: calc(50% - 1rem);
}
@media screen and (max-width: 768px) {
	section:not(.head) ul {
		margin-bottom: -1rem;
	}
	section:not(.head) li {
		margin-bottom: 1rem;
		width: 100%;
	}
}

section:not(.head) li a {
	margin: 0;
	padding: 1rem;
	width: 100%;
	border: 1px solid #CCC;
	max-width: none;
}
section:not(.head) li a .imgwrap {
	display: flex;
	justify-content: center;
	align-items: center;
}
section:not(.head) li a .imgwrap img {
	margin: auto;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

section:not(.head) li .title {
	margin-bottom: .5rem;
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
}
section:not(.head) li .size {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: .5rem;
	text-align: center;
	line-height: 1.4;
}
section:not(.head) li .size::before {
	content: "サイズ";
	margin-bottom: .5rem;
	padding: .2rem .5rem;
	border: 1px solid #666;
	font-size: .9rem;
	line-height: 1
}

section:not(.head) li .imgwrap {
	width: 60%;
	aspect-ratio: 1 / 1;
}
section:not(.head) li .imgwrap img {
	width: auto;
	height: 100%;
}

#entry {
	margin-top: 1.5rem;
	text-align: center;
}
#entry a {
	display: inline-flex;
	margin: 0 auto;
	padding: 2rem;
	max-width: none;
	border: 5px solid rgba(99,190,172,1);
	border-radius: .5rem;
	background: #FFF;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.4;
	transition: .2s;
}
#entry a:hover {
	color: #333;
	background: rgba(99,190,172,.2);
}
#entry a::after {
	content: none;
}


/*モーダル
====================================================*/
/*modal*/
.modal {
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	visibility: hidden;
	opacity: 0;
	transition: opacity .4s, visibility 0s .4s;
	z-index: 400;
}
.modal.modal-open {
	visibility: visible;
	opacity: 1;
	transition: opacity .4s, visibility 0s 0s;
}
.modalBox {
	position: relative;
	display: none;
	padding: 1rem .5rem;
	width: 100%;
	max-width: 800px;
	max-height: calc(100vh - 4rem);
	border-radius: 4px;
	background: #FFF;
	overflow: hidden;
}
.modalBox.modal-scroll {
	padding: 1rem .25rem 1rem .5rem;
	height: 100%;
}
.modal-open .modalBox {
	display: block;
}
.modalClose {
	position: absolute;
	right: .5rem;
	top: .5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #FFF;
	cursor: pointer;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: .75rem;
	background: #CCC;
	transition: .2s;
	z-index: 500;
}

.modalClose::before {
	content: "close";
	font-family: 'Material Symbols Outlined';
	font-size: 1.2rem;
}
.modalClose:hover {
	background: #666;
}

.modalBtn {
	color: #000;
	text-decoration: underline;
	cursor: pointer;
}
.modalBtn:hover, .modalBtn:focus {
	color: rgba(99,190,172,1);
	text-decoration: underline;
}

/*モーダル内スクロールバー*/
.modal *::-webkit-scrollbar {
	padding-top: 100px;
	width: .25rem;
	height: .25rem;
}
.modal *::-webkit-scrollbar-track {
	background-color: #FFF;
}
.modal *::-webkit-scrollbar-thumb {
	background: #CCC;
	width: auto;
}

.modal .scrollwarp {
	flex: 1!important;
	padding-left: .5rem!important;
	padding-right: 0.25rem!important;
	overflow-y: scroll!important;
}

/*modal中身*/
.modal-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.modal-inner > * {
	padding: 0 .5rem;
}

.modal-inner .title {
	margin-bottom: 1rem;
    font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}



/*login*/
.main-login {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.login .imgwrap {
	width: 100px;
}
.login img {
	border: none!important;
}
.login p {
	text-align: center;
	line-height: 1.4;
}
.login form p + p {
	display: flex;
	flex-direction: column;
	margin: 2rem auto 0;
	padding: 1rem;
	border: 1px solid #CCC;
	border-radius: .5rem;
	width: 400px;
	text-align: left;
}
@media screen and (max-width: 768px) {
	.login form p + p {
		width: 100%;
	}
}
.login input[type="password"] {
	padding: .5rem;
	width: 100%;
	border: none;
	border-bottom: 1px solid #CCC;
	font-size: 1.5rem;
}
.login input[type="submit"] {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 1rem 0 0 auto;
	width: 6rem;
	height: 2rem;
	border: 1px solid #0265DC;
	border-radius: 1rem;
	background: #0265DC;
	font-size: 1rem;
	font-weight: bold;
    color: #FFF;
	letter-spacing: .2rem;
	transition: .2s;
	cursor: pointer;
}
.login input[type="submit"]:hover {
	border: 1px solid #0054B6;
	background: #0054B6;
}