@charset "UTF-8";
/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section , main {
	display: block;
}

a:link, a:visited, a:hover, a:active { color: #323232; text-decoration: none; }

html { scroll-behavior:smooth; scrollbar-gutter: stable; }
/*[id] {scroll-margin-top:40px;}*/
body { line-height: 1; text-align: justify; background: #fff; color: #323232; font-family: "M PLUS 1p", sans-serif; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: 100%; height: auto; vertical-align: bottom; flex-shrink: 0; }
picture { display: block; }
p.small { margin-top: 15px; text-align: center; font-size: 12px; }

/*滞在色変*/
#Index nav.localnav #menu01 a , #Outline nav.localnav #menu02 a , #Plan nav.localnav #menu03 a , #Location nav.localnav #menu04 a , #Quality nav.localnav #menu05 a { color: #515151; }

/*オーバーレイ*/
.overlay { background: #fff; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; }

/*fade*/
.fade { opacity: 0; transition: opacity 1.5s; }
.fade.is_inview { opacity: 1; transition-delay: .8s; }

.fade_early { opacity: 0; transition: opacity 1s; }
.fade_early.is_inview { opacity: 1; transition-delay: .1s; }

.fadeup { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform .8s; }
.fadeup.is_inview { opacity: 1; transform: translateY(0); transition-delay: .1s; }
.fadeup02 { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform .8s; }
.fadeup02.is_inview  { opacity: 1; transform: translateY(0); transition-delay: .2s; }
.fadeup03 { opacity: 0; transform: translateY(30px); transition: opacity 2s, transform 1s; }
.fadeup03.is_inview  { opacity: 1; transform: translateY(0); transition-delay: .3s; }

.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

/*-----------------------------------------------------

common

----------------------------------------------------- */
* { box-sizing: border-box; }
.bg { min-height: 100vh; position: relative; background: url("../img/bg.png") center / cover no-repeat; overflow: hidden; }

.page { display: grid; grid-template-columns: 1fr min(700px, 100%) 1fr; min-height: 100vh; position: relative; z-index: 1; }

.side { background: none; filter: none; min-height: 100vh; position: relative; }

.side::before { content: ""; position: absolute; inset: 0; backdrop-filter: grayscale(1); -webkit-backdrop-filter: grayscale(1); background: rgba(255,255,255,.001); }
.side--left { }
.side--right { }

.main { position: relative; padding: 0 5%; }


.hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; }

.hero__logo { margin: 7% 0 0; text-align: center; }
.hero__logo img { max-width: 95%; height: auto; }

.hero__inner { display: flex; align-items: flex-start; position: relative; }
.hero__content { position: relative; z-index: 2; text-align: right; }
.hero__character { position: absolute; z-index: -1; bottom: -12%; left: -10%; }
.hero__character img { max-height: 468px; width: auto; }

.hero__ttl { width: 80%; height: auto; margin-bottom: clamp(20px , 5vw , 40px); }

.hero__form { width: 100%; background: #000; border-radius: 18px; padding: 40px; margin-bottom: 40px; }
.hero__label { font-size: clamp(14px, 3vw, 29px); color: #fff; margin: 0 0 20px; font-weight: 700; text-align: center; }

.hero__form-row { display: flex; gap: 10px; }
.hero__form-row label { width: 100%; }
.hero__form-row input { width: 100%; height: 44px; border: none; padding: 0 10px; background: #fff; color: #000; font-size: 20px; font-weight: 700; }
.hero__form-row button { width: 80px; border: none; background: #1e5fbf; color: #fff; font-weight: 700; cursor: pointer; font-size: 23px; }

.hero__note { color: #fff; text-shadow: #000000 1px 0 5px; font-size: clamp(13px , 3vw , 24px); font-weight: 700; line-height: 1.6; }
.speaker_area { display: flex; align-items: center; gap: clamp(10px, 5vw, 30px); margin-bottom: 20px; }
.speaker_area .icon { max-width: clamp(80px, 15vw, 127px); }

small { margin: 40px auto 20px; display: block; line-height: 1.4; font-size: clamp(10px, 2vw, 12px); color: #fff; text-shadow: #000000 1px 0 5px; }
audio { width: 100%; }

/* player下層 */
.player .hero__content { text-align: center; }
.player .hero__ttl { width: 85%; margin-bottom: 0; }
.voice { width: 90%; margin: 25px 0 0; }
.voice article { margin-bottom: clamp(15px, 2vw, 30px); }
.voice__title { font-size: clamp(16px, 3.2vw, 24px); font-weight: 700; color: #fff; text-shadow: 0px 1px 8px rgb(89 39 1 / 95%); margin: 0 0 10px; }
.annotation { text-align: center; font-weight: 700; color: #fff; font-size: clamp(14px, 3.2vw, 18px); margin-top: 15px; line-height: 1.3; text-shadow: #000000 1px 0 5px; }
.sp { display:none; }

@media (max-width: 768px) {
  .sp { display: block; }
  .page { grid-template-columns: 1fr; }
  .side { display: none; }
  .hero { min-height: 100svh; }
  .hero__logo { margin: 25px 0 15px; }
  .hero__logo img { max-width: 92%; }
  .hero__inner { flex-direction: row; align-items: flex-start; gap: 12px; }
  .hero__form { padding: 35px 30px; border-radius: 15px; }
  .hero__label { margin: 0 0 10px; }
  .hero__form-row input { height: 44px; font-size: 16px; }
  .hero__form-row button { width: 80px; font-size: 16px; }
  .hero__note { text-align: left; }
}

@media (max-width: 600px) {
  .hero__form { padding: 20px 25px;}
  .hero__character img { max-height: 235px; }
}