@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.7;
	--default-line-height-sp:1.6;

	--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:13rem;
	--font-size-SS-sp:14rem;
	--font-size-S-sp:15rem;
	--font-size-M-sp:16rem;
	--font-size-L-sp:18rem;
	--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;
}

@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 {
	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; }

section { padding:60rem 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:780px) {
	html { font-size:calc(1 / 390 * 100vw) !important; }
}


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

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

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

便利クラス

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

/* 画像を外枠にフィットさせる */
.objectFit { 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; }

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

/* flex指定 */
.flexBox, .flexLeft, .flexCenter, .flexRight, flexTop, .flexMiddle, flexBottom { display:flex; flex-wrap:wrap; }
.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; }
@media (max-width:780px) {
	.flexLeftSp { justify-content:flex-start; }
	.flexCenterSp { justify-content:center; }
	.flexRightSp { justify-content:flex-end; }
	.flexTopSp { align-items:flex-start; }
	.flexMiddleSp { align-items:center; }
	.flexBottomSp { align-items:flex-end; }
}

/* grid指定 */
.gridBox { display:grid; grid-template-columns:1fr; align-items:stretch; }
.gridBox.column2 { grid-template-columns:1fr 1fr; }
.gridBox.column3 { grid-template-columns:1fr 1fr 1fr; }
.gridBox.column4 { grid-template-columns:1fr 1fr 1fr 1fr; }
.gridBox.column5 { grid-template-columns:1fr 1fr 1fr 1fr 1fr; }
.gridBox.column6 { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; }
.gridBox.gap20 { gap:20rem; }
.gridBox.gap20x40 { gap:40rem 20rem; }
.gridBox.gap20x60 { gap:60rem 20rem; }
.gridBox.gap40 { gap:40rem; }
.gridBox.gap60 { gap:60rem; }

@media (max-width:780px) {
	.gridBox.column1sp { grid-template-columns:1fr; }
	.gridBox.column2sp { grid-template-columns:1fr 1fr; }
	.gridBox.column3sp { grid-template-columns:1fr 1fr 1fr; }
	.gridBox.column4sp { grid-template-columns:1fr 1fr 1fr 1fr; }
	.gridBox.column5sp { grid-template-columns:1fr 1fr 1fr 1fr 1fr; }
	.gridBox.column6sp { grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; }
	.gridBox.gap10sp { gap:10rem; }
	.gridBox.gap10x20sp { gap:20rem 10rem; }
	.gridBox.gap10x40sp { gap:40rem 10rem; }
	.gridBox.gap20sp { gap:20rem; }
	.gridBox.gap20x40sp { gap:40rem 20rem; }
	.gridBox.gap20x60sp { gap:60rem 20rem; }
	.gridBox.gap40sp { gap:40rem; }
	.gridBox.gap60sp { gap:60rem; }
}

/* 最大幅指定 */
.widthFull,
.width1400,
.width1200,
.width1120,
.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; }
.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,
	.width860,
	.width800,
	.width720,
	.width640 { max-width:none; }
}

/* ホバー処理各種 */
html:not(.mobileBrowser) .hoverToBlack { transition:background 0.2s, color 0.2s; }
html:not(.mobileBrowser) .hoverToBlack:not(:disabled):hover { background:black; color:white; }
html:not(.mobileBrowser) .hoverZoom { transition:transform 0.5s; }
html:not(.mobileBrowser) .hoverZoom:not(:disabled):hover { transform:scale(1.1); z-index:2; }

/* テキストにボーダーを付ける */
.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; }

.textUnderline { text-decoration:underline; }

.hide { display:none; }


/* シャドウをつける */
.blackShadow { box-shadow:5rem 5rem 10rem rgba(0, 0, 0, 0.15) }

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

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); }


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

HEADER

***********************************************************/
header { width:100%; background:var(--header-background-color); display:flex; }
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 .copyright { font-size:13rem; }
}


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



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

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 { height:40rem; padding:0 12rem; font-size:16rem; line-height:24rem; border-radius:4rem; border:1rem solid var(--form-border-color); }
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; }

/* 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; display:flex; border:1rem solid  var(--form-border-color); background:white; }
input[type=submit]:not(:disabled), input[type=button]:not(:disabled), button:not(:disabled), .noirButton:not(:disabled) { cursor:pointer; }


.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) {
	.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; }
}
*/

/* form */
form { line-height:24rem; text-align:left; }
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.formValidation .indexGrid > *:first-child { padding-left:52rem; }
form.formValidation .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.formValidation .required > *:first-child::before { content:'必須'; background:red; color:white; }
form.formValidation .indexGrid.noRequiedIcon > *:first-child { padding-left:0; }
form.formValidation .indexGrid.noRequiedIcon > *:first-child::before { content:none; }
form.formValidation .validateErrorMessage { position:absolute; left:0; bottom:0; transform:translateY(calc(100% + 5rem)); 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.formValidation .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:40rem; line-height:1.5; }
@media (max-width:780px) {
	.sectionTitle { margin-bottom:20rem; }
}

/*--------------------------------------------------------
	ブロックタイトル
--------------------------------------------------------*/
.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; }


/*--------------------------------------------------------
	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); }

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

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

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

/* ボタンホバー時に明るくする */
.floatButton.brightness:hover { filter:brightness(120%); }

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

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

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

@media (max-width:780px) {

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

	/* ボタン */
	.floatButton { flex-direction:row; width:auto; height:60rem; font-size:14rem; flex:1; }
	.floatButton .icon { margin-bottom:0; margin-right:4rem; }
	.floatButton.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; }


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

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


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

<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; }

/*--------------------------------------------------------
	PC / SP切り替え
--------------------------------------------------------*/
.sp { display:none; }
@media (max-width:780px) {      /* MOBILE */
	.pc { display:none; }
	.sp { display:block; }
	img.sp, span.sp, br.sp { display:inline; }
}


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

	カレンダーピッカー

--------------------------------------------------------*/
.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; }


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

	セクション

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

/*--------------------------------------------------------
	キービジュアルセクション
--------------------------------------------------------*/
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; margin-top:var(--margin-space-M); 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:1em; font-size:1.2em; }
section.wpPost .postContent h3.wp-block-heading { margin-top:1.5em; margin-bottom:1em; font-size:1.1em; }

@media (max-width:780px) {
	section.wpPost .contentWrapper { padding:0; max-width:none; }
	section.wpPost .postContent { margin-top:1em; font-size:17rem; line-height:1.8em; letter-spacing:0.025em; }
	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; }