@charset "UTF-8";

:root {
	
	
	--text-color:#222;
	--link-color:#89c3eb;
	--error-color:#e60033;
	
	--default-font-family:"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
	--default-font-size:16rem;
	--default-line-height:1.6;
	--default-line-height-sp:1.5;

	--body-background-color:#fff;

	--header-background-color:#fffffff8;
	--header-height-pc:80rem;
	--header-height-sp:60rem;

	--header-hamburger-color:var(--text-color);
	--slide-menu-bg-color:var(--header-background-color);

	--footer-background-color:#f4f4f4;
	
	--font-size-SSS:12rem;
	--font-size-SS:14rem;
	--font-size-S:15rem;
	--font-size-M:16rem;
	--font-size-L:18rem;
	--font-size-LL:22rem;
	--font-size-LLL:32rem;
	--font-size-SSS-sp:11rem;
	--font-size-SS-sp:13rem;
	--font-size-S-sp:14rem;
	--font-size-M-sp:15rem;
	--font-size-L-sp:16rem;
	--font-size-LL-sp:20rem;
	--font-size-LLL-sp:24rem;
	
	--margin-space-SSS:8rem;
	--margin-space-SS:12rem;
	--margin-space-S:20rem;
	--margin-space-M:40rem;
	--margin-space-L:60rem;
	--margin-space-LL:80rem;
	--margin-space-LLL:100rem;
	--margin-space-SSS-sp:4rem;
	--margin-space-SS-sp:6rem;
	--margin-space-S-sp:10rem;
	--margin-space-M-sp:20rem;
	--margin-space-L-sp:30rem;
	--margin-space-LL-sp:40rem;
	--margin-space-LLL-sp:50rem;
	
	--link-color: cyan;
	
	--form-checked-color: blue;
	--form-border-color: #aaa;
	--place-holder-color: #aaa;
	
	--toast-bg-color: #008b8b;
	--toast-text-color: white;
}

@media (max-width:780px) {
}

body, .fontGothic { font-family:var(--default-font-family); }
.fontMincho { font-family:"Noto Serif JP", serif; }

*, ::before, ::after { margin:0px; padding:0px; box-sizing:border-box; vertical-align:baseline; backface-visibility:visible; justify-content:center; align-items:center; }
body,main,section,article,aside,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,table,tbody,tr,td,a,img,label,time,nav,figure,picture,details,summary {
	position:relative; border:none; border-spacing:0;
}

ul, ol { list-style:none; }
h1, h2, h3, h4, h5, h6 { font-size:inherit; }

body { font-size:var(--default-font-size); line-height:var(--default-line-height); font-feature-settings:"palt" 1; width:100%; min-height:100%; height:auto; text-align:center; word-break:normal; word-wrap:break-word; overflow-wrap:break-word; background:var(--body-background-color); color:var(--text-color); }
@media (max-width:780px) {
	body { line-height:var(--default-line-height-sp); }
}

a { text-decoration:none; color:inherit; }
a.linkColor { color:var(--link-color); }

img { user-drag:none; -webkit-user-drag:none; }

figure { max-width:100%; line-height:0; }
figure img { width:100%; height:auto; }

i, em { font-style:normal; }

summary { cursor:pointer; list-style: none;  }
summary::-webkit-details-marker,
summary::marker { display: none; }

section { padding:60rem 0; }
section.noPadding { padding:0; }
@media (max-width:780px) {
	section { padding:30rem 0; }
}

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


/* スクロールロック時の設定 */
html.noirScrollLocked body { overflow:hidden; height:100vh; }


/***********************************************************

スケーリング

***********************************************************/
html { font-size:1px; margin-top:0 !important; height:100%; }
@media (max-width:1240px) {
	html.scaleing1240 { font-size:calc(1 / 1240 * 100vw); }
}
@media (max-width:1200px) {
	html.scaleing1200 { font-size:calc(1 / 1200 * 100vw); }
}
@media (max-width:1120px) {
	html.scaleing1120 { font-size:calc(1 / 1120 * 100vw); }
}
@media (max-width:1000px) {
	html.scaleing1000 { font-size:calc(1 / 1000 * 100vw); }
}
@media (max-width:840px) {
	html.scaleing840 { font-size:calc(1 / 840 * 100vw); }
}
@media (max-width:780px) {
	html { font-size:calc(1 / 390 * 100vw) !important; }
}


.fontSizeSSS { font-size:var(--font-size-SSS) !important; }
.fontSizeSS { font-size:var(--font-size-SS) !important; }
.fontSizeS { font-size:var(--font-size-S) !important; }
.fontSizeM { font-size:var(--font-size-M) !important; }
.fontSizeL { font-size:var(--font-size-L) !important; }
.fontSizeLL { font-size:var(--font-size-LL) !important; }
.fontSizeLLL { font-size:var(--font-size-LLL) !important; }
@media (max-width:780px) {
	.fontSizeSSS { font-size:var(--font-size-SSS-sp) !important; }
	.fontSizeSS { font-size:var(--font-size-SS-sp) !important; }
	.fontSizeS { font-size:var(--font-size-S-sp) !important; }
	.fontSizeM { font-size:var(--font-size-M-sp) !important; }
	.fontSizeL { font-size:var(--font-size-L-sp) !important; }
	.fontSizeLL { font-size:var(--font-size-LL-sp) !important; }
	.fontSizeLLL { font-size:var(--font-size-LLL-sp) !important; }
}

.fwNormal, .fwRegular { font-weight:normal; }
.fwMedium { font-weight:500; }
.fwBold { font-weight:700; }
.fwBlack { font-weight:900; }

/***********************************************************

HEADER

***********************************************************/
header { width:100%; background:var(--header-background-color); display:flex; }
header.shadow,
header .shadow { box-shadow:0 2rem 6rem #00000010; }
header .headerLogo { margin-left:40rem; }
header .headerLogo img { width:auto; height:60rem; }

@media (max-width:780px) {
	header { width:100%; height:var(--header-height-sp); }

	header .headerLogo { margin:0; }
	header .headerLogo img { height:36rem; }
}

/* 上部完全固定型 */
header.fixedHeader { position:fixed; left:0; top:0; z-index:1000; }

/* 張り付き固定型 */
header.stickyHeader { position:sticky; left:0; top:0; z-index:1000; }

@media (max-width:780px) {

}


/***********************************************************

NAVIGATION

***********************************************************/

/* 標準 */
nav { display:flex; align-items:stretch; margin-left:auto; margin-right:40rem; }
nav > * { display:flex; padding:0 20rem; height:var(--header-height-pc); vertical-align:baseline; }
@media (max-width:780px) {
}


/***********************************************************

FOOTER

***********************************************************/
footer { width:100%; visibility:hidden; padding-top:80rem; }
footer .footerContainer { background:var(--footer-background-color); padding-top:40rem; }
footer .copyright { display:flex; height:40rem; }
html.ready footer { position:absolute; left:0; bottom:0; visibility:visible; }
@media (max-width:780px) {
	footer { padding-top:40rem; }
	footer .copyright { font-size:13rem; }
}

/***********************************************************

MAIN

***********************************************************/
main { position:absolute; left:0; top:0; width:100%; min-height:100%;  padding-bottom:var(--footer-height);  }
main:has(header.fixedHeader) { padding-top:var(--header-height); }


/***********************************************************

FORM

***********************************************************/

::placeholder { color:var(--place-holder-color); }

/* デフォルト */
label { display:inline-flex; justify-content:flex-start; }
input, textarea, button { -webkit-appearance:none; -moz-appearance:none; outline:none; appearance:none; outline:none; }
input, select, textarea, button, .noirButton { height:40rem; padding:0 12rem; font-size:16rem; line-height:24rem; border-radius:4rem; border:1rem solid var(--form-border-color); font-weight:500; }
input:not([type=radio]):not([type=checkbox]) { width:100%; }
textarea { width:100%; height:5em; padding-top:12rem; padding-bottom:12rem; }

/* checkbox / radio */
input[type=radio] { width:28rem; height:28rem; border-radius:50%; margin:6rem 0.5em 6rem 0; cursor:pointer; border:none; outline:1rem solid  var(--form-border-color); }
input[type=checkbox] { width:28rem; height:28rem; margin:6rem 0.5em 6rem 0; cursor:pointer; border:none; outline:1rem solid  var(--form-border-color); }
input[type=radio]:checked,
input[type=checkbox]:checked { outline:2rem solid var(--form-checked-color); position:relative; }
input[type=radio]:checked::after { content:''; position:absolute; left:50%; top:50%; width:75%; aspect-ratio:1 / 1; border-radius:50%; background:var(--form-checked-color); transform:translate(-50%, -50%); }
input[type=checkbox]:checked::after { content:''; position:absolute; left:10%; top:0%; width:100%; height:50%; border-style:solid; border-color:var(--form-checked-color); border-width:0 0 4rem 4rem; transform:rotate(-45deg); }
label:has(input[type=radio]), label:has(input[type=checkbox]) { cursor:pointer; }

/* label */
label.zipCode, label.zip { gap:0.5em; }
label.zipCode input:not([type=radio]):not([type=checkbox]),
label.zip input:not([type=radio]):not([type=checkbox]) { width:8em; }

/* select */
select:focus { outline:none; }

/* checkbox, radioのグルーピング */
.radioGroup, .checkboxGroup { display:flex; flex-wrap:wrap; justify-content:start; align-items:start; gap:0.5em 1.5em; text-align:left; }
.radioGroup.singleLines, .checkboxGroup.singleLines { display:flex; flex-direction:column; }
.radioGroup.singleLines label, .checkboxGroup.singleLines label { display:flex; }

/* ボタン */
.noirButtons { display:flex; gap:20rem; }
input[type=submit], input[type=button], button, .noirButton { min-width:240rem; height:60rem; font-size:18rem; line-height:1.2; display:inline-flex; border:1rem solid  var(--form-border-color); background:white; color:var(--text-color); }
input[type=submit]:not(:disabled), input[type=button]:not(:disabled), button:not(:disabled), .noirButton:not(:disabled) { cursor:pointer; }
@media (max-width:780px) {
	.noirButtons { flex-direction:column; gap:10rem; width:100%; }
	.noirButtons.reverceSp { flex-direction:column-reverse; }
	input[type=submit], input[type=button], button, .noirButton { min-width:0; width:90%; }
}


form .indexGrid > *:nth-child(2) p { margin-top:8rem; }
form .indexGrid > *:nth-child(2) p:first-child { margin-top:0; }
form .formButton { min-width:auto; height:40rem; padding:0 0.75em; font-size:15rem; background:#eee; font-weight:normal; }

/*

.noirForm input,
.noirForm textarea,
.noirForm button,
.noirForm select { font-family:inherit; font-size:16rem; line-height:24rem; padding:10rem 12rem; border:1rem solid #ccc; color:#444; background-color:#fff; border-radius:4rem; outline:none; }



.noirForm input,
.noirForm textarea,
.noirForm .select { border:1rem solid #ccc; padding:0 12rem; }
.noirForm input,
.noirForm textarea { font-size:18rem; }
.noirForm input { height:40rem; width:100%; }
*/


/* checkbox */
/*
.noirForm input[type=checkbox] { width:32rem; height:32rem; }

*/
/* radio */
/*
.noirForm .radioGroup { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:40rem; }
.noirForm input[type=radio] { width:32rem; height:32rem; border-radius:50%; }
.noirForm input[type=radio]:checked { border-color:#89c3eb; border-width:2rem; }
.noirForm input[type=radio]:checked::after { content:''; position:absolute; left:50%; top:50%; width:66%; height:66%; background:#89c3eb; border-radius:50%; transform:translate(-50%, -50%); }
*/

/* textarea */
/*
.noirForm textarea { width:100%; height:10em; resize:vertical; }


.noirForm input,
.noirForm textarea,
.noirForm button,
.noirForm select { -webkit-appearance:none; -moz-appearance:none; outline:none; appearance:none; }
*/


/* select */
/*
.noirForm .select { position:relative; line-height:44rem; }
.noirForm .select select { width:100%; padding-right:50rem; appearance: none; outline:none; }
.noirForm .select::after { content:''; position:absolute; right:15rem; top:calc(50% - 9rem); width:12rem; height:12rem; border-left:2px solid; border-bottom:2px solid; transform:rotate(-45deg); pointer-events:none; }
*/

/* label */
/*
.noirForm label { display:inline-flex; column-gap:0.75em; white-space:nowrap; }
.noirForm label.full { width:100%; }
.noirForm label.zip { width:200rem; }
.noirForm label.dividedZip input { width:5em; }
.noirForm label.tel { width:200rem; }
.noirForm label.dividedTel input { width:5em; }
*/

/*
input[type=submit], input[type=button], .button,
button { display:inline-flex; appearance: none; min-width:280rem; height:60rem; padding:0 40rem; border-radius:999rem; background:white; border:1rem solid #888; color:#222; font-size:18rem; font-weight:500; cursor:pointer; user-select:none; -webkit-user-select:none; }
input[type=submit].inlineButton, input[type=button].inlineButton, .button.inlineButton,
button.inlineButton { min-width:60rem; height:32rem; padding:0 16rem; font-size:16rem; }
input[type=submit].white, input[type=button].white, .button.white,
button.white { border:none; }
input[type=submit].arrow::after, input[type=button].arrow::after, .button.arrow::after,
button.arrow::after {  }
input[type=submit]:disabled, input[type=button]:disabled, .button:disabled,
button:disabled { opacity:0.33; }
input[type=submit]:disabled, input[type=button]:disabled, .button:disabled,
button:not(:disabled):hover { cursor:pointer; }
@media (max-width:780px) {
	.noirButtons { 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; }
}
*/

/* form */
form { line-height:24rem; }
form.taCenter { text-align:center; }
form .formTitle { font-size:var(--font-size-LL); line-height:1.6; }
form .indexGrid { grid-template-columns:200rem 1fr; }
form * + .indexGrid { margin-top:20rem; }
form .indexGrid > *:first-child,
form .indexGrid > *:not(:first-child) .text:first-child { padding:8rem 0; line-height:24rem; }
form .errorMessage { font-weight:500; color:var(--error-color); display:flex; text-align:left; }
form hr { margin:30rem auto; height:1rem; background:#eee; border-style:none; }

form .indexGrid > *:first-child { display:flex; justify-content:flex-start; height:40rem;}

/* バリデーション */
form.noirFormValidation .indexGrid > *:first-child { padding-left:52rem; }
form.noirFormValidation .indexGrid > *:first-child::before { content:'任意'; position:absolute; left:0; display:flex; width:44rem; height:24rem; background:#ccc; color:white; border-radius:6rem; font-size:0.8em; font-weight:bold; }
form.noirFormValidation .required > *:first-child::before { content:'必須'; background:red; color:white; }
form.noirFormValidation .indexGrid.noRequiedIcon > *:first-child { padding-left:0; }
form.noirFormValidation .indexGrid.noRequiedIcon > *:first-child::before { content:none; }
form.noirFormValidation .validateErrorMessage { position:absolute; left:0; bottom:0; transform:translateY(calc(100%)); border-radius:5rem; padding:5rem 10rem; background:rgba(255, 47, 47, 0.8); color:#fff; font-weight:bold; z-index:2; white-space:nowrap; font-size:0.8em; line-height:1.5em; pointer-events:none; }
form.noirFormValidation .validateErrorMessage::before { content:''; position:absolute; left:20rem; top:-8rem; border-style:solid; border-color:transparent transparent #ff2f2f; border-width:0 4rem 8rem; pointer-events:none;}


/* 認証コード */
form .authCodeForm .authCodeView { display:flex; gap:10rem; margin-top:2em; }
form .authCodeForm .authCodeView > div { width:60rem; height:80rem; border:1rem solid #ccc; display:flex; font-size:40rem; cursor:pointer; }
form .authCodeForm .authCodeView > div.focus { border:2rem solid #a2d7dd; }
form .authCodeForm input { position:fixed; left:-100%; top:-100%; }
form .authCodeForm .errorBox { color:#f00; font-weight:500; padding:10rem 0 10rem; display:flex; margin-bottom:40rem; border:1rem solid #f00; }


/***********************************************************

MODULES

***********************************************************/
/*--------------------------------------------------------
	ページタイトル
--------------------------------------------------------*/
.pageTitle { font-size:32rem; letter-spacing:0.05; font-weight:500; padding:40rem 0; }
.pageTitle + section { padding-top:0; }
@media (max-width:780px) {
	.pageTitle .title { font-size:24rem; }
}

/*--------------------------------------------------------
	セクションタイトル
--------------------------------------------------------*/
.sectionTitle { margin-bottom:var(--margin-space-M); line-height:1.5; }
@media (max-width:780px) {
}

/*--------------------------------------------------------
	ブロックタイトル
--------------------------------------------------------*/
.blockTitle { margin-bottom:40rem; }
@media (max-width:780px) {
	.blockTitle { margin-bottom:20rem; }
}

/* インデックスグリッド */
.indexGrid { display:grid; grid-template-columns:160rem 1fr; text-align:left; justify-content:flex-start; align-items:flex-start; }
.indexGrid.indexGridShort { grid-template-columns:120rem 1fr; }

/*--------------------------------------------------------
	コンテンツラッパー
--------------------------------------------------------*/
.contentWrapper { width:100%; margin-left:auto;  margin-right:auto; }
@media (max-width:780px) {
	.contentWrapper { padding-left:12rem; padding-right:12rem; }
}

/*--------------------------------------------------------
	トップスクロールボタン
--------------------------------------------------------*/
.scrollToTop { position:fixed; right:20rem; bottom:20rem; width:80rem; opacity:0; pointer-events:none; transition:opacity 0.33s; }
html.scrolled .scrollToTop { opacity:1; pointer-events:auto; cursor:pointer; }
@media (max-width:780px) {
	.scrollToTop { right:12rem; bottom:12rem; width:60rem; }
}


/*--------------------------------------------------------
	CSSで作る×ボタン
--------------------------------------------------------*/
.noirCloseButton { position:absolute; right:8rem; top:8rem; width:32rem; height:32rem; display:block; cursor:pointer; }
.noirCloseButton::before, .noirCloseButton::after { content:''; position:absolute; left:50%; top:50%; width:32rem; height:3rem; background-color:#444; }
.noirCloseButton::before { transform:translate(-50%, -50%) rotate(45deg); }
.noirCloseButton::after { transform:translate(-50%, -50%) rotate(-45deg); }
.noirCloseButton.small { width:20rem; height:20rem; }
.noirCloseButton.small::before, .noirCloseButton.small::after { width:16rem; height:2rem; }

.noirCloseButton.circle { border-radius:50%; border:2rem solid #444; background:white; width:40rem; height:40rem; right:-20rem; top:-20rem; }
.noirCloseButton.circle::before, .noirCloseButton.circle::after { width:24rem; }

/*
CSSで作る矢印○ボタン
*/
.noirCircleArrow { width:52rem; height:52rem; display:block; border-radius:50%; background-color:rgba(0, 0, 0, 0.5); cursor:pointer; }
.noirCircleArrow::before, .noirCircleArrow::after { content:''; position:absolute; left:33%; top:48%; width:33%; height:4%; background-color:#fff; }
.noirCircleArrow::before { transform-origin:left center; transform:rotate(-45deg); }
.noirCircleArrow::after { transform-origin:left center; transform:rotate(45deg); }
.noirCircleArrow.toRight { transform:rotate(180deg); }

/*--------------------------------------------------------
フロート式サイドボタン
--------------------------------------------------------*/

/* ボタンラッパー */
.noirFloatButtons { position:fixed; z-index:200;  right:0; top:150rem;  color:#fff; }

/* ボタン */
.noirFloatButtons > * { display:flex; justify-content:center; align-items:center; flex-direction:column; color:inherit;  width:80rem; height:80rem; font-size:14rem; line-height:1.5em; }
.noirFloatButtons > a:link, .noirFloatButtons > a:active, .noirFloatButtons > a:hover { text-decoration:none; color:inherit; }


/* ボタン内の画像サイズ */
.noirFloatButtons .icon { display:block; width:24rem; font-size:24rem; line-height:1; margin-bottom:8rem; }

/* ボタン別指定 */
.noirFloatButtons > *:nth-child(1) { background:#ee827c; }
.noirFloatButtons > *:nth-child(2) { background:#ad7d4c; }
.noirFloatButtons > *:nth-child(3) { background:#5a544b; }
.noirFloatButtons > *:nth-child(4) { background:#2c4f54; }
.noirFloatButtons > *:nth-child(5) { background:#cca6bf; }

/* 横書き */
.noirFloatButtons .horizontalText { writing-mode:sideways-lr; width:60rem; height:120rem; }

@media (max-width:780px) {

	/* ボタンラッパー */
	.noirFloatButtons { right:auto; top:auto; width:100%; display:flex;  left:0; bottom:0; }

	/* ボタン */
	.noirFloatButtons > * { flex-direction:row; width:auto; height:60rem; font-size:14rem; flex:1; }
	.noirFloatButtons > * .icon { margin-bottom:0; margin-right:4rem; }
	.noirFloatButtons > *.horizontalText { writing-mode:horizontal-tb; height:60rem; }
}

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

<header>
	<div class="hamburgerMenuIcon"><div></div></div>
</header>
<div class="slideMenu navCopyHere"></div>
--------------------------------------------------------*/
/* メニューアイコン */
.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-hamburger-color); transition:all 0.3s; overflow:visible; }
.hamburgerMenuIcon > *::before,
.hamburgerMenuIcon > *::after { content:''; width:100%; height:100%; background:var(--header-hamburger-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.hamburgerMenuActive .hamburgerMenuFrame { opacity:1; pointer-events:auto; }
html.hamburgerMenuActive .hamburgerMenuIcon > * { background:transparent; }
html.hamburgerMenuActive .hamburgerMenuIcon > *::before { transform:translateY(0) rotate(45deg); transform-origin:center center; }
html.hamburgerMenuActive .hamburgerMenuIcon > *::after { transform:translateY(0) rotate(-45deg); transform-origin:center center; }


/*--------------------------------------------------------
	トースト
--------------------------------------------------------*/
.noirToast { position:fixed; left:0; bottom:-80rem; width:100%; height:80rem; display:flex; background:var(--toast-bg-color); color:var(--toast-text-color); font-weight:500; z-index:2000; }
.noirToast.error { background:var(--error-color); color:white; }

/*--------------------------------------------------------
	簡易確認ダイアログ
--------------------------------------------------------*/
.noirConfirmDialog { position:fixed; left:0; top:0; width:100%; height:100vh; z-index:2000; padding:80rem 0; overflow-y:auto; transition:opacity 0.2s; display:flex; background:#00000040; }
.noirConfirmDialog .frame { padding:40rem; background:white; font-size:var(--font-size-L); }

/*--------------------------------------------------------
	ダイアログコンテンツ
--------------------------------------------------------*/
/* トリガー */
.noirDialogTrigger:hover { cursor:pointer; }

/* コンテンツ */
.noirDialogContent { position:fixed; left:0; top:0; width:100%; height:100vh; z-index:2000; padding:80rem 0; overflow-y:auto; transition:opacity 0.2s; }
.noirDialogContent .frame { padding:40rem; background:white; }
.noirDialogContent .close:hover { cursor:pointer; }
.noirDialogContent.active { background-color:rgba(0, 0, 0, 0.5); }
.noirDialogContent.closing { opacity:0; }
@media (max-width:780px) {
	.noirDialogContent .scroller { padding:20rem 12rem; }
}

/*--------------------------------------------------------
オーバーレイヤーコンテンツ
--------------------------------------------------------*/
/* トリガー */
.noirOverlayTrigger:hover { cursor:pointer; }

/* コンテンツ */
.noirOverlay { position:fixed; left:0; top:0; width:100%; height:100vh; z-index:2000; padding:80rem 0; overflow-y:auto; pointer-events:none; background:#00000080; opacity:0; transition:opacity 0.5s; }
.noirOverlay.light { background:#ffffffe0; }
.noirOverlay .scroller { position:absolute; left:0; top:0; width:100%; min-height:100%; display:flex; padding:60rem 40rem; }
.noirOverlay .frame { max-width:800rem; padding:40rem 60rem; background:white; transition:transform 0.5s; transform:translateY(40rem); }

html.ready .noirOverlay.active { opacity:1; pointer-events:auto; }
html.ready .noirOverlay.active .frame { transform:translateY(0); }

transition:opacity 0.5s;

/*--------------------------------------------------------
スライダー

<div class="noirSlider">
	<div class="viewer">
		<div class="itrems">
			<div>アイテム</div>
			<div>アイテム</div>
				:
		</div>
	</div>
	<div class="thumbs"></div>
	<div class="prev"></div>	<!-- PREVボタン -->
	<div class="next"></div>	<!-- NEXTボタン -->
</div>
-------------------------------------------------------*/
.noirSlider .prev,
.noirSlider .next { position:absolute; top:calc(50% - 20rem); width:40rem; height:40rem; border-radius:50%; background:#000000a0; opacity:0; pointer-events:none; }
.noirSlider .prev { left:4rem; }
.noirSlider .prev::after { content:''; }
.noirSlider .next { right:4rem; }
.noirSlider .prev.on,
.noirSlider .next.on { opacity:1; pointer-events:auto; }


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

	カレンダーピッカー

--------------------------------------------------------*/
.noirDatePickerTriger { cursor:pointer; }
.noirDatePicker { display:none; background:#eee; padding:10rem; width:320rem; box-shadow:5rem 5rem 10rem rgba(0, 0, 0, 0.15); }
.noirDatePicker .header { display:flex; justify-content:space-evenly; align-items:stretch; margin-bottom:10rem; }
.noirDatePicker .header .arrow { width:40rem; height:40rem; background:#fff; flex-shrink:0; display:flex; cursor:pointer; }
.noirDatePicker .header .arrow.disabled { opacity:0.33; pointer-events:none; }
.noirDatePicker .header .arrow.prev::before { content:'\25C0'; }
.noirDatePicker .header .arrow.next::before { content:'\25B6'; }
.noirDatePicker .header .title { text-align:center; font-size:18rem; font-weight:bold; background:#fff; display:flex; flex:1; cursor:pointer; }
.noirDatePicker .items { display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr 1fr; justify-content:flex-start; align-items:stretch; }
.noirDatePicker .items .cell { text-align:center; padding:6rem 0; cursor:pointer; }
.noirDatePicker .items .cell.week { font-size:16rem; font-weight:bold; padding:0 0 5rem; }
.noirDatePicker .items .cell.date { border-left:1px solid; border-top:1px solid; background:#fff; font-size:14rem; font-weight:bold; }
.noirDatePicker .items .cell.date.sat { background:#bbe2f1; border-right:1px solid; }
.noirDatePicker .items .cell.date.sun { background:#f7ddec; }
.noirDatePicker .items .cell.date.holiday { background:#f7ddec; }
.noirDatePicker .items .cell.date.disabled { pointer-events:none; opacity:0.33; }
.noirDatePicker .items .cell.afterBlank { background:transparent; border-top:1px solid; padding:0; }
.noirDatePicker .items .cell.afterBlank.first { border-left:1px solid; }
.noirDatePicker .cancelBox { display:flex; width:100%; gap:20rem; margin-top:12rem; }
.noirDatePicker .cancelBox > * { text-decoration:underline; cursor:pointer; }
.noirDatePickerTriger input[ype="date" i] { display:none; }


/*  ローディングアイコン
<div class="noirLoadingSpinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>
---------------------------------------------------------*/
.noirLoadingSpinner { position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width: 70rem; text-align: center; transition:opacity 0.33s; pointer-events:none; }
.noirLoadingSpinner > div { width: 18px; height: 18px; background-color:var(--lp-color-text); border-radius: 100%; display: inline-block; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.noirLoadingSpinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.noirLoadingSpinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
html.ready .noirLoadingSpinner { opacity:0; }
html.ready .noirLoadingSpinner > div { opacity:0; }
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

/***********************************************************

	セクション

***********************************************************/

/*--------------------------------------------------------
	キービジュアルセクション
--------------------------------------------------------*/
section.keyVisual { padding:0; overflow:hidden; }

/*--------------------------------------------------------
	投稿セクション
--------------------------------------------------------*/
section.wpPost {  }
section.wpPost .postTitle { font-size:24rem; line-height:1.8em; letter-spacing:0.05em; font-weight:500; display:flex; text-align:left; }
section.wpPost .postDate { text-align:right; margin-top:0.5em; }
section.wpPost .postContent { text-align:left; font-size:17rem; line-height:1.8em; letter-spacing:0.025em; }
section.wpPost .postContent > * { margin:0.75em 0; }
section.wpPost .postContent > *:first-child { margin-top:0; }
section.wpPost .postContent .wp-block-embed { border:1rem solid #ccc; padding:20rem; font-size:var(--font-size-M); line-height:var(--default-line-height); }
section.wpPost .postContent a { text-decoration:underline; }
section.wpPost .postContent h2.wp-block-heading { margin-top:2em; margin-bottom:0.75em; font-size:1.2em; }
section.wpPost .postContent h3.wp-block-heading { margin-top:1.5em; font-size:1.1em; }
section.wpPost .postContent figure.wp-block-image { width:auto; margin:1.5em 0; }
section.wpPost .postContent figure.wp-block-image img { width:auto; }
@media (max-width:780px) {
	section.wpPost .contentWrapper { padding:0; max-width:none; }
	section.wpPost .postContent { font-size:16rem; line-height:1.6em; letter-spacing:0; }
	section.wpPost .postTitle { font-size:18rem; line-height:1.5; }
	section.wpPost .postTitle,
	section.wpPost .postDate,
	section.wpPost .postContent .wp-block-heading,
	section.wpPost .postContent p { padding:0 12rem; }
}


/*--------------------------------------------------------
	404セクション
--------------------------------------------------------*/
section.page404 { padding:100rem 0; }
section.page404 .message { font-size:1.5em; font-size:var(--font-size-L); }


/*--------------------------------------------------------
	COMING SOONセクション
--------------------------------------------------------*/
section.comingSoon { padding:100rem 0; }
section.comingSoon .message {  font-size:1.5em; font-size:var(--font-size-L); }


/*--------------------------------------------------------
	マイページセクション
--------------------------------------------------------*/
section.myPage {  }






/***********************************************************

WORDPRESS OVERRIDE

***********************************************************/
#wpadminbar { background:#00000080; }



/***********************************************************

便利クラス

***********************************************************/

/* ボーダーボックス */
.borderBox { border:1px solid #ccc; padding:40rem; }
.borderBox.borderBoxShadow { box-shadow:10rem 10rem 20rem #00000008; }

/* ドットリスト */
.noirDots > *, .noirDot { padding-left:1em; text-align:left; }
.noirDots > *::before, .noirDot::before { content:'・'; position:absolute; left:0; }

/* ※リスト */
.noirNotes > *, .noirNote { padding-left:1.2em; text-align:left; }
.noirNotes > *::before, .noirNote::before { content:'※'; position:absolute; left:0; }

/* 画像を外枠にフィットさせる */
.objectFit { position:absolute; left:0; top:0; object-fit:cover; width:100%; height:100%; }
.objectFit.contain { object-fit:contain; }

/* ※付きテキスト */
.notes { text-align:left; margin-top:2em; }
.notes > *, .note { text-indent:-1em; padding-left:1em; }
.notes > *::before, .note::before { content:'※'; }
.notes > * + * { margin-top:0.33em; }

/* aspect-ratio */
.aspectRatio1x1 { aspect-ratio:1 / 1; }
.aspectRatio4x3 { aspect-ratio:4 / 3; }
.aspectRatio3x2 { aspect-ratio:3 / 2; }
.aspectRatio16x9 { aspect-ratio:16 / 9; }
@media (max-width:780px) {
	.aspectRatio1x1Sp { aspect-ratio:1 / 1; }
	.aspectRatio2x3Sp { aspect-ratio:2 / 3; }
}

/* text align */
.textAlignCenter { text-align:center; }
.textAlignLeft { text-align:left; }
.textAlignRight { text-align:right; }
@media (max-width:780px) {
	.textAlignCenterSp { text-align:center; }
	.textAlignLeftSp { text-align:left; }
	.textAlignRightSp { text-align:right; }
}

/* cursor */
.cursorPointer { cursor:pointer; }

/* margin */
.marginTopNone { margin-top:0 !important; }
.marginTopSSS { margin-top:var(--margin-space-SSS) !important }
.marginTopSS { margin-top:var(--margin-space-SS) !important }
.marginTopS { margin-top:var(--margin-space-S) !important }
.marginTopM { margin-top:var(--margin-space-M) !important }
.marginTopL { margin-top:var(--margin-space-L) !important }
.marginTopLL { margin-top:var(--margin-space-LL) !important }
.marginTopLLL { margin-top:var(--margin-space-LLL) !important }
.marginBottomSSS { margin-bottom:var(--margin-space-SSS) !important }
.marginBottomSS { margin-bottom:var(--margin-space-S) !important }
.marginBottomS { margin-bottom:var(--margin-space-S) !important }
.marginBottomM { margin-bottom:var(--margin-space-M) !important }
.marginBottomL { margin-bottom:var(--margin-space-L) !important }
.marginBottomLL { margin-bottom:var(--margin-space-LL) !important }
.marginBottomLLL { margin-bottom:var(--margin-space-LLL) !important }
@media (max-width:780px) {
	.marginTopSSS { margin-top:var(--margin-space-SSS-sp) !important }
	.marginTopSS { margin-top:var(--margin-space-SS-sp) !important }
	.marginTopS { margin-top:var(--margin-space-S-sp) !important }
	.marginTopM { margin-top:var(--margin-space-M-sp) !important }
	.marginTopL { margin-top:var(--margin-space-L-sp) !important }
	.marginTopLL { margin-top:var(--margin-space-LL-sp) !important }
	.marginTopLLL { margin-top:var(--margin-space-LLL-sp) !important }
	.marginBottomSSS { margin-bottom:var(--margin-space-SSS-sp) !important }
	.marginBottomSS { margin-bottom:var(--margin-space-S-sp) !important }
	.marginBottomS { margin-bottom:var(--margin-space-S-sp) !important }
	.marginBottomM { margin-bottom:var(--margin-space-M-sp) !important }
	.marginBottomL { margin-bottom:var(--margin-space-L-sp) !important }
	.marginBottomLL { margin-bottom:var(--margin-space-LL-sp) !important }
	.marginBottomLLL { margin-bottom:var(--margin-space-LLL-sp) !important }
}

/* gap指定 */
.gap5 { gap:10rem; }
.gap10 { gap:10rem; }
.gap10x20 { gap:20rem 10rem; }
.gap10x40 { gap:40rem 10rem; }
.gap20 { gap:20rem; }
.gap20x40 { gap:40rem 20rem; }
.gap20x60 { gap:60rem 20rem; }
.gap40 { gap:30rem; }
.gap60 { gap:60rem; }
@media (max-width:780px) {
	.gap0Sp { gap:0; }
	.gap5Sp { gap:5rem; }
	.gap10Sp { gap:10rem; }
	.gap12Sp { gap:12rem; }
	.gap10x20sp { gap:20rem 10rem; }
	.gap10x40sp { gap:40rem 10rem; }
	.gap20Sp { gap:20rem; }
	.gap20x40Sp { gap:40rem 20rem; }
	.gap20x60Sp { gap:60rem 20rem; }
	.gap40Sp { gap:30rem; }
	.gap60Sp { gap:60rem; }
}

/* block指定 */
.blockLayout { display:block; }

/* flex指定 */
.flexLayout { display:flex; flex-wrap:wrap; }
.flexLayout.left { justify-content:flex-start; }
.flexLayout.center { justify-content:center; }
.flexLayout.right { justify-content:flex-end; }
.flexLayout.top { align-items:flex-start; }
.flexLayout.middle { align-items:center; }
.flexLayout.bottom { align-items:flex-end; }
.flexLayout.vertical { flex-direction:column; }
.flexLayout.column2 > * { width:50% }
.flexLayout.column3 > * { width:calc(100% / 3); }
.flexLayout.column4 > * { width:25%; }
.flexLayout.column5 > * { width:20%; }
.flexLayout.column6 > * { width:calc(100% / 6); }
@media (max-width:780px) {
	.flexLayoutSp { display:flex; }
	.flexLayout.column2Sp > *, .flexLayoutSp.column2Sp > * { width:50% }
	.flexLayout.column3Sp > *, .flexLayoutSp.column3Sp > * { width:calc(100% / 3); }
	.flexLayout.column4Sp > *, .flexLayoutSp.column4Sp > * { width:25%; }
	.flexLayout.column5Sp > *, .flexLayoutSp.column5Sp > * { width:20%; }
}

/* grid指定 */
.gridLayout { display:grid; grid-template-columns:1fr; align-items:stretch; }
.gridLayout.column2 { grid-template-columns:1fr 1fr; }
.gridLayout.column3 { grid-template-columns:1fr 1fr 1fr; }
.gridLayout.column4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.gridLayout.column5 { grid-template-columns:1fr 1fr 1fr 1fr 1fr; }
.gridLayout.column6 { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; }
.gridLayout.left { justify-content:flex-start; }
.gridLayout.center { justify-content:center; }
.gridLayout.right { justify-content:flex-end; }
.gridLayout.top { align-items:flex-start; }
.gridLayout.middle { align-items:center; }
.gridLayout.bottom { align-items:flex-end; }
@media (max-width:780px) {
	.gridLayoutSp { display:grid; grid-template-columns:1fr; align-items:stretch; }
	.gridLayout.column1Sp, .gridLayoutSp.column1Sp { grid-template-columns:1fr; }
	.gridLayout.column2Sp, .gridLayoutSp.column2Sp { grid-template-columns:1fr 1fr; }
	.gridLayout.column3Sp, .gridLayoutSp.column3Sp { grid-template-columns:1fr 1fr 1fr; }
	.gridLayout.column4Sp, .gridLayoutSp.column4Sp { grid-template-columns:1fr 1fr 1fr 1fr; }
	.gridLayout.column5Sp, .gridLayoutSp.column5Sp { grid-template-columns:1fr 1fr 1fr 1fr 1fr; }
	.gridLayout.column6Sp, .gridLayoutSp.column6Sp { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; }
}

/* 最大幅指定 */
.widthFull,
.width1400,
.width1200,
.width1120,
.width1100,
.width960,
.width860,
.width800,
.width720,
.width640 { width:100%; margin-left:auto; margin-right:auto; }
.width1400 { max-width:1400rem; }
.width1200 { max-width:1200rem; }
.width1120 { max-width:1120rem; }
.width1100 { max-width:1100rem; }
.width960 { max-width:960rem; }
.width860 { max-width:860rem; }
.width800 { max-width:800rem; }
.width720 { max-width:720rem; }
.width640 { max-width:640rem; }
@media (max-width:780px) {
	.width1400,
	.width1200,
	.width1120,
	.width1100,
	.width960,
	.width860,
	.width800,
	.width720,
	.width640 { max-width:none; }
}

/* ホバー処理：背景が黒に、文字が白に */
html.hoverReady .hoverToBlack { transition:background 0.2s, color 0.2s; }
html.hoverReady .hoverToBlack:not(:disabled):hover { background:black; color:white; }
/* ホバー処理：1.1倍に拡大する */
html.hoverReady .hoverZoom { transition:transform 0.5s; }
html.hoverReady .hoverZoom:not(:disabled):hover { transform:scale(1.1); z-index:2; }
/* ホバー処理：上にスライドする */
html.hoverReady .hoverSlideUp { transition:transform 0.3s ease-in-out; }
html.hoverReady .hoverSlideUp:not(:disabled):hover { transform:translateY(-20rem); z-index:2; }
/* ホバー処理：明るくする */
html.hoverReady .hoverBrightness { transition:filter 0.3s; }
html.hoverReady .hoverBrightness:hover { filter:brightness(120%); }

/* テキストにボーダーを付ける */
.textBorderBlack,
.textBorderWhite { paint-order:stroke fill; }
.textBorderBlack { -webkit-text-stroke:2px black; text-stroke:2px black; }	/* 黒 */
.textBorderWhite { -webkit-text-stroke:2px white; text-stroke:2px white; }	/* 白 */

/* 選択させない */
.unselect { user-select:none; -webkit-user-select:none; }

/* ドラッグさせない */
.undrag { user-drag:none; -webkit-user-drag:none; }

/* 下線をつける (text-decoration) */
.textUnderline { display:inline-block; border-bottom:1rem solid; }

/* 表示を消す */
.hide { display:none !important; }

/* シャドウをつける */
.blackShadow { box-shadow:5rem 5rem 10rem #00000028; }
.whiteShadow { box-shadow:5rem 5rem 10rem #ffffff28; }

/* 画面いっぱいに固定表示 */
.fixedFullScreen { position:fixed; left:0; top:0; width:100%; height:100vh; }

/* 要素いっぱいに固定表示 */
.absoluteFullScreen { position:absolute; left:0; top:0; width:100%; height:100vh; }

/* 左右のborder-radiusを全部丸く */
.roundedInfinite { border-radius:9999rem; }

/* 文字を横書き */
.horizontalText { writing-mode:sideways-lr;}

/*--------------------------------------------------------
PC / SP切り替え
--------------------------------------------------------*/
.sp, .spFlex, .spGrid { display:none; }
@media (max-width:780px) {      /* MOBILE */
	.pc { display:none; }
	.sp { display:initial; }
	.spFlex { display:flex; }
	.spGrid { display:grid; }
}