@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
@import url(reset.css);

html { height: 100%; padding: 0; margin: 0; overflow: hidden; }
body { font-family: 'M PLUS Rounded 1c', sans-serif; color: #535353; line-height: 180%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
h1 { font-size: 130%; font-weight: bold; margin: -30px 0 15px; }
a:link { text-decoration: none; color: #5c789e; }
a:visited { text-decoration: none; color: #5c789e; }
a:hover { text-decoration: none; color: #a54a4a; }
a:active { color: #c3a942; }
section { width: 100%; height: 100%; float: left; margin: 0; padding: 75px 0 0 0; display: block; }
#section-section01 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section02 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section03 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section04 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section05 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section06 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section07 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section08 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section09 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
#section-section10 { background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; }
.horizon-prev, .horizon-next { position: fixed; top: 50%; margin-top: -24px; z-index: 9999; }
.horizon-prev { left: 20px; }
.horizon-next { right: 20px; }
.textL { color: #fff; text-shadow: 2px 1px 1px #000; width: 36%; float: left; margin: 5% 0 0 10%; padding: 0; display: block; }
.textC { color: #fff; text-shadow: 2px 1px 1px #000; width: 50%; float: right; margin: 0 25% 0; padding: 0; display: block; }
.textR { color: #fff; text-shadow: 2px 1px 1px #000; width: 33%; float: right; margin: 5% 10% 0 0; padding: 0; display: block; }
.intr_img1 { width: 30%; float: left; margin: 4% 0 0 13%; padding: 0; display: block; }
.intr_img1 img { width: 100%; }
.intr_img2 { width: 30%; float: right; margin: 4% 13% 0 0; padding: 0; display: block; }
.intr_img2 img { width: 100%; }
.intr_img3 { width: 30%; float: left; margin: 0 0 0 13%; padding: 0; display: block; }
.intr_img3 img { width: 100%; }
.intr_img4 { width: 30%; float: right; margin: 0 13% 0 0; padding: 0; display: block; }
.intr_img4 img { width: 100%; }
.Limg { width: 50%; float: left; margin: 0; padding: 240px 0 0; display: block; }
.Rimg { width: 50%; float: right; margin: 0; padding: 240px 0 0; display: block; }
footer { text-align: center; font-size: 80%; background-color: rgba(255, 255, 255, 0.6); width: 100%; position: fixed; left: 0; bottom: 0; margin: 0; padding: 1% 0; display: block; z-index: 999; }
footer a:link { text-decoration: none; color: #535353; }
footer a:visited { text-decoration: none; color: #535353; }
footer a:hover { text-decoration: none; color: #a54a4a; }

/* Tablet用 */
@media only screen and (min-width: 916px) and (max-width: 1000px) {
}

/* Tablet2用 */
@media only screen and (min-width: 701px) and (max-width: 915px) {
}

/* Mobile用 */
@media only screen and (min-width: 541px) and (max-width: 700px) {
section { padding: 30px 0 0; }
.horizon-prev { left: 0px; }
.horizon-next { right: 0px; }
.textL { width: 80%; margin: 5px 10% 0; }
.textC { width: 80%; margin: 5px 10% 0; }
.textR { width: 80%; margin: 5px 10% 0; }
}

/* Mobile2用 */
@media screen and (max-width: 540px) {
section { padding: 30px 0 0; }
.horizon-prev { left: 0px; }
.horizon-next { right: 0px; }
.textL { width: 80%; margin: 5px 10% 0; }
.textC { width: 80%; margin: 5px 10% 0; }
.textR { width: 80%; margin: 5px 10% 0; }
}