@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');
html,body,h1,h2,h3,h4,h5,h6,p,span,div,object,iframe,em,ul,ol,li,label,dl,dt,dd,form,label,table,tbody,tr,th,td { margin:0; padding:0; border:0; outline:0; font-size: 100%; font-weight:inherit; font-style:inherit; font-family:inherit; list-style-type:none; } html { height:100%; min-height:100%; background:#84cbc3; font-size: 62.5%; } img { border:none; vertical-align:bottom !important; line-height:0; font-size:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag:none; } body { position:relative; font-family:'BIZ UDPGothic',sans-serif; font-size:1.8rem; line-height:1.8; font-weight:400; background:#84cbc3; color:#fff; } .clearfix { zoom:1; min-height: 1px; } .clearfix:after { content: ''; display: block; clear: both; height: 0; visibility: hidden; font-size: 0.1em; line-height: 0; } .clearboth { clear: both; height: 1px; } *html .clearfix{ height: 1px; /*\*//*/ height: auto; overflow: hidden; /**/ }
.nopc { display: none; }
.nosp { display: inline-block; }

@media screen and (max-width:768px) {
	body { font-size: 1.6rem; }
	.nosp { display: none; }
	.nopc { display: inline-block; }
	.kome { display: block; padding: 2px 0; font-size: 90%; }
}

/* --------------------------------------------------------------------------
   styles
-------------------------------------------------------------------------- */

@media screen and (min-width:769px) {
	#wrap {
		position: relative; width: 100vw; min-width: 1100px; height: 100vh; min-height: 100%;
	}
	header { position: fixed; top: 20px; left: 20px; }
	header h1 { width: 320px; }
	footer { position: fixed; bottom: 20px; right: 20px; }
	footer dl { text-align: left; }
	section {
		position: absolute; top: 50%; left: 50%; width: 380px; height: 380px; background: #84cbc3;
		border: solid 8px #fff; border-radius: 10px; transform: translate(-50%,-50%);
		box-shadow: -30px 30px 0 #fff; font-size: 3.2rem; font-weight: 700; text-align: center;
	}
}

@media screen and (max-width:768px) {
	#wrap { min-width: 100vw; height: auto; }
	header { position: relative; padding: 12px; }
	h1 { width: 60vw; }
	footer { position: relative; text-align: center; }
	footer dl { display: inline-block; padding: 12px; text-align: left; font-size: 1.4rem; }
	section {
		position: relative; width: 74vw; height: 74vw; margin: 24px 12vw 36px 14vw;
		backgound: #84cbc3; border: solid 8px #fff; border-radius: 10px;
		box-shadow: -6vw 6vw 0 #fff; font-size: 2.4rem; font-weight: 700; text-align: center;
	}
}

h1 i {
	display: block; width: 100%; height: 0; padding: 0 0 27.6%;
	background: url(../img/h1.png) 0 0 no-repeat; background-size: 100% auto;
	text-indent: 100%; white-space: nowrap; overflow: hidden;
}

footer dd { margin: -1.8em 0 0 7.0em; }

section ul { position: relative; width: 100%; height: 100%; text-align: center; display: none; }
section p { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }