:root {
	--header-height-pc: 80rem;
	--header-height-sp: 60rem;
	
	--header-humburger-color: black;
}

*,
*::before,
*::after { margin:0; padding:0; box-sizing: border-box; position:relative; justify-content:center; align-items:center; }

html { font-size:1px; line-height:1.6; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width:1200px) {
	html { font-size:calc(1 / 1200 * 100vw); }
}
@media (max-width:780px) {
	html { font-size:calc(1 / 390 * 100vw); }
}


body { font-size:16rem; line-height: 1.5; font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; margin: 0; color:#333; }

main { min-height:100vh; }
html.ready main { padding-bottom:var(--footer-height); }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 { font-size:inherit; }

button, input, textarea, select, .button { font: inherit; font-size:16rem; line-height:1.5em; }

/* input */
input[type=radio] { width:32rem; height:32rem; margin-right:.5em; }
input:not([type=submit]):not(input[type=button]):not(input[type=radio]):not(input[type=checkbox]) { width:100%; height:40rem; line-height:40rem; border:1rem solid #ccc; padding:0 .75em; }

/* textarea */
textarea { width:100%; height:10em; padding:.75em; }

/* button / .button */
.buttons { display:flex; gap:16rem; }
input[type=submit], input[type=button], .button,
button { display:inline-flex; min-width:240rem; height:60rem; padding:0 40rem; border-radius:999rem; background:white; border:1rem solid black; color:black; font-size:18rem; font-weight:500; cursor:pointer; }
input[type=submit].white, input[type=button].white, .button.white,
button.white { border:none; }
@media (max-width:780px) {
	.buttons { flex-direction:column; }
	input[type=submit], input[type=button], .button,
	.button { min-width:inherit; width:80%; height:60rem; padding:0 40rem; border-radius:999rem; background:white; border:1rem solid black; color:black; font-size:18rem; font-weight:500; }
}

/* a tag */
a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; border-spacing: 0; }

figure { max-width:100%; height:auto; line-height:0; }
figure img { width:100%; height:auto; }
figure.objectFit { max-width:none; width:100%;}
figure.objectFit img { position:absolute; height:100%; object-fit:cover;}
figure.objectFit.contain img { object-fit:contain; }
span, b, strong { display:inline-block; }

footer { width:100%; }
html.ready footer { position:absolute; left:0; bottom:0; }


.sp { display:none; }
@media (max-width:780px) {      /* MOBILE */
	.pc { display:none; }
	.sp { display:initial; }
}

.flexLeft, .flexCenter, .flexRight, flexTop, .flexMiddle, flexBottom { display:flex; }
.flexLeft { justify-content:flex-start; }
.flexCenter { justify-content:center; }
.flexRight { justify-content:flex-end; }
.flexTop { align-items:flex-start; }
.flexMiddle { align-items:center; }
.flexBottom { align-items:flex-end; }

.widthFull,
.width1400,
.width1200,
.width1120,
.width860 { width:100%; margin-left:auto; margin-right:auto; }
.widthFull { max-width:none; }
.width1400 { max-width:1440rem; padding-left:20rem; padding-right:20rem; }
.width1200 { max-width:1240rem; padding-left:20rem; padding-right:20rem; }
.width1120 { max-width:1120rem; }
.width860 { max-width:860rem; }
@media (max-width:780px) {
	.widthFull,
	.width1400,
	.width1200,
	.width1120,
	.width860 { max-width:none; padding-left:12rem; padding-right:12rem; }
}

.marginTopM { margin-top:40rem; }
.marginTopL { margin-top:60rem; }
.marginTopLL { margin-top:80rem; }
.marginTop3L { margin-top:100rem; }

/*-----------------------------------------------
ハンバーガーメニュー

<header>
<div class="menuFrame navCopyHere"></div>
<div class="hamburgerMenu"><div class="bar"></div></div>
</header>
-----------------------------------------------*/
/* メニューアイコン */
.hamburgerMenuIcon { position:absolute; right:0; top:0; width:var(--header-height-pc); height:var(--header-height-pc); display:flex; cursor:pointer; }
.hamburgerMenuIcon > * { width:50%; height:5%; background:var(--header-humburger-color); transition:all 0.3s; overflow:visible; }
.hamburgerMenuIcon > *::before,
.hamburgerMenuIcon > *::after { content:''; width:100%; height:100%; background:var(--header-humburger-color); transition:all 0.5s; display:block; position:absolute; left:0; top:0;}
.hamburgerMenuIcon > *::before { transform:translateY(-300%); }
.hamburgerMenuIcon > *::after { transform:translateY(300%); }
.hamburgerMenuIcon.sp { display:none; }
@media (max-width:780px) {
	.hamburgerMenuIcon { width:var(--header-height-sp); height:var(--header-height-sp); }
	.hamburgerMenuIcon.sp { display:flex; }
}

/* メニューフレーム */
.hamburgerMenuFrame { position:fixed; right:0; top:var(--header-height-pc); width:100vw; height:calc(100vh - var(--header-height-pc)); background:#fffffff8; color:black; transition:left 1s; display:flex; flex-direction:column; justify-content:flex-start; transition:opacity 0.5s; opacity:0; pointer-events:none; padding-top:40rem; z-index:1001; }
.hamburgerMenuFrame > * { font-size:18rem; height:60rem; display:flex; }
@media (max-width:780px) {
	.hamburgerMenuFrame { top:var(--header-height-sp); height:calc(100vh - var(--header-height-sp)); }
	.hamburgerMenuFrame > * { font-size:var(--font-size-LL); width:100%; height:60rem; padding:0 40rem; display:flex; justify-content:flex-start; }
}

/* メニューアクティブ時 */
html.slideMenuActive .hamburgerMenuFrame { opacity:1; pointer-events:auto; }
html.slideMenuActive .hamburgerMenuIcon > * { background:transparent; }
html.slideMenuActive .hamburgerMenuIcon > *::before { transform:translateY(0) rotate(45deg); transform-origin:center center; }
html.slideMenuActive .hamburgerMenuIcon > *::after { transform:translateY(0) rotate(-45deg); transform-origin:center center; }


/* BORDER BOX */
.borderBox { border:1rem solid #ccc; padding:20rem 40rem; }
@media (max-width:780px) {
	.borderBox { padding:12rem; }
}


/* ホバー処理各種 */
.hover.toBlack { transition:all 0.2s; }
.hover.toBlack:not(:disabled):hover { background:black; color:white; }