@charset "UTF-8";

/* ==================================================
Library
================================================== */

/* Mediaquery
------------------------------ */
@media screen and (min-width: 769px) {}
@media screen and (max-width: 768px) {}

@media screen and (max-width: 480px) {}


/* View Switch
------------------------------ */
@media screen and (min-width: 769px) {
	.sp-only { display: none !important; }
}

@media screen and (max-width: 768px) {
	.pc-only { display: none !important; }
}

/* Smartphone View */
/*html[data-browse-mode="S"] .pc-only  { display: none !important; }*/

/* PC View */
/*html[data-browse-mode="P"] .sp-only  { display: none !important; }*/


/* Introduction Animation
------------------------------ */
.edit-format {
	will-change: animation;
	animation: accessFadein 0.6s linear 0.1s both;
}

@keyframes accessFadein {
	0% { opacity: 0; }
	40% { opacity: 0; }
	100% { opacity: 1.2; }
}

/* Clrfix
------------------------------ */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }


/* 検証用
------------------------------ */
.none { display: none; }


/* transition: var(--transition-def);
------------------------------ */
:root {
	--transition-def: all 0.4s ease-out 0s;
}

/* ==================================================
Fonts Size - Variable
================================================== */

:root {
	--font-jp: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	--font-en: "neuhan", sans-serif;
	--font-en-bold: "neuhan-bold", sans-serif;
	--font-mix: "neuhan", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	--font-mix-bold: "neuhan-bold", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.edit-format .font-jp {
	font-family: var(--font-jp);
	font-weight: 400;
	text-transform: initial;
}

.edit-format .font-jp-bold {
	font-family: var(--font-jp);
	font-weight: 700;
	text-transform: initial;
}

.edit-format .font-mix-bold {
	font-family: var(--font-mix);
	font-weight: 700;
	text-transform: initial;
}

.edit-format .font-en {
	font-family: var(--font-en);
	/* font-weight: 300; */
	text-transform: initial;
}

.edit-format .font-en-bold {
	font-family: var(--font-en-bold);
	/*font-weight: 700;*/
	text-transform: initial;
}


/* 游ゴシック - Medium */
.edit-format .fw400,
.edit-format .fw-medium { font-weight: 400; }

/* Neue Hans Kendrick - Light */
.edit-format .fw300,
.edit-format .fw-light { font-family: var(--font-en); /*font-weight: 300;*/ }

/* Neue Hans Kendrick - Medium or 游ゴシック - Bold */
.edit-format .fw600,
.edit-format .fw700,
.edit-format .fw-bold { font-family: var(--font-mix-bold); font-weight: 700; 
}


/* Variable Fonts Size ※w320-w768px間で可変 */
:root {
	/*font-size: 10px;*/
	--fz-xxsmall: clamp(9px, 7.571px + 0.446vw, 11px);
	--fz-xsmall: clamp(10px, 8.571px + 0.446vw, 12px);
	--fz-small: clamp(11px, 9.571px + 0.446vw, 13px);
	--fz-regular: clamp(12px, 10.571px + 0.446vw, 14px);
	--fz-large: clamp(13px, 11.571px + 0.446vw, 15px);
	--fz-xlarge: clamp(14px, 12.571px + 0.446vw, 16px);
	--fz-xxlarge: clamp(15px, 13.571px + 0.446vw, 17px);
	--fz-extra: clamp(16px, 14.571px + 0.446vw, 18px);
	--fz-xextra: clamp(17px, 15.571px + 0.446vw, 19px);
	--fz-xxextra: clamp(18px, 16.571px + 0.446vw, 20px);
}

.edit-format .fz-xxsmall { font-size: var(--fz-xxsmall); } /*11*/
.edit-format .fz-xsmall { font-size: var(--fz-xsmall); } /*12*/
.edit-format .fz-small { font-size: var(--fz-small); } /*13*/
.edit-format .fz-regular { font-size: var(--fz-regular); } /*14*/
.edit-format .fz-large { font-size: var(--fz-large); } /*15*/
.edit-format .fz-xlarge { font-size: var(--fz-xlarge); } /*16*/
.edit-format .fz-xxlarge { font-size: var(--fz-xxlarge); } /*17*/
.edit-format .fz-extra { font-size: var(--fz-extra); } /*18*/
.edit-format .fz-xextra { font-size: var(--fz-xextra); } /*19*/
.edit-format .fz-xxextra { font-size: var(--fz-xxextra); } /*20*/


/* ==================================================
Text Color
================================================== */
/*.edit-format .txtcolor-red { color: #C66; }*/
.edit-format .txtcolor-red { color: #f00; }
.edit-format .txtcolor-blue { color: #00f; }

.text-shadow {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}


/* ==================================================
Variable Magine & Padding ※w320-w768px間で可変
================================================== */
:root {
	--clamp1: clamp(6px, 3.143px + 0.893vw, 10px);
	--clamp2: clamp(12px, 6.286px + 1.786vw, 20px);
	--clamp3: clamp(18px, 9.429px + 2.679vw, 30px);
	--clamp4: clamp(24px, 12.571px + 3.571vw, 40px);
	--clamp5: clamp(30px, 15.714px + 4.464vw, 50px);
	--clamp6: clamp(36px, 18.857px + 5.357vw, 60px);
	--clamp7: clamp(42px, 22px + 6.25vw, 70px);
	--clamp8: clamp(48px, 25.143px + 7.143vw, 80px);
	--clamp9: clamp(54px, 28.286px + 8.036vw, 90px);
	--clamp10: clamp(60px, 31.429px + 8.929vw, 100px);
	--clamp12: clamp(72px, 37.714px + 10.714vw, 120px);
	--clamp14: clamp(84px, 44px + 12.5vw, 140px);
	--clamp15: clamp(90px, 47.143px + 13.393vw, 150px);
	--clamp16: clamp(96px, 50.286px + 14.286vw, 160px);
	--clamp18: clamp(108px, 56.571px + 16.071vw, 180px);
	--clamp20: clamp(120px, 62.857px + 17.857vw, 200px);
	--clamp22: clamp(132px, 69.143px + 19.643vw, 220px);
	--clamp24: clamp(144px, 75.429px + 21.429vw, 240px);
	--clamp26: clamp(156px, 81.714px + 23.214vw, 260px);
	--clamp28: clamp(168px, 88px + 25vw, 280px);
	--clamp30: clamp(180px, 94.286px + 26.786vw, 300px);
}

/* margin-top */
.edit-format .mt-1 { margin-top: var(--clamp1); }
.edit-format .mt-2 { margin-top: var(--clamp2); }
.edit-format .mt-3 { margin-top: var(--clamp3); }
.edit-format .mt-4 { margin-top: var(--clamp4); }
.edit-format .mt-5 { margin-top: var(--clamp5); }
.edit-format .mt-6 { margin-top: var(--clamp6); }
.edit-format .mt-7 { margin-top: var(--clamp7); }
.edit-format .mt-8 { margin-top: var(--clamp8); }
.edit-format .mt-9 { margin-top: var(--clamp9); }
.edit-format .mt-10 { margin-top: var(--clamp10); }
.edit-format .mt-12 { margin-top: var(--clamp12); }
.edit-format .mt-14 { margin-top: var(--clamp14); }
.edit-format .mt-15 { margin-top: var(--clamp15); }
.edit-format .mt-16 { margin-top: var(--clamp16); }
.edit-format .mt-18 { margin-top: var(--clamp18); }
.edit-format .mt-20 { margin-top: var(--clamp20); }
.edit-format .mt-22 { margin-top: var(--clamp22); }
.edit-format .mt-24 { margin-top: var(--clamp24); }
.edit-format .mt-26 { margin-top: var(--clamp26); }
.edit-format .mt-28 { margin-top: var(--clamp28); }
.edit-format .mt-30 { margin-top: var(--clamp30); }

/* margin-bottom */
.edit-format .mb-1 { margin-bottom: var(--clamp1); }
.edit-format .mb-2 {margin-bottom: var(--clamp2);}
.edit-format .mb-3 { margin-bottom: var(--clamp3); }
.edit-format .mb-4 { margin-bottom: var(--clamp4); }
.edit-format .mb-5 { margin-bottom: var(--clamp5); }
.edit-format .mb-6 { margin-bottom: var(--clamp6); }
.edit-format .mb-7 { margin-bottom: var(--clamp7); }
.edit-format .mb-8 { margin-bottom: var(--clamp8); }
.edit-format .mb-9 { margin-bottom: var(--clamp9); }
.edit-format .mb-10 { margin-bottom: var(--clamp10); }
.edit-format .mb-12 { margin-bottom: var(--clamp12); }
.edit-format .mb-14 { margin-bottom: var(--clamp14); }
.edit-format .mb-15 { margin-bottom: var(--clamp15); }
.edit-format .mb-16 { margin-bottom: var(--clamp16); }
.edit-format .mb-18 { margin-bottom: var(--clamp18); }
.edit-format .mb-20 { margin-bottom: var(--clamp20); }
.edit-format .mb-22 { margin-bottom: var(--clamp22); }
.edit-format .mb-24 { margin-bottom: var(--clamp24); }
.edit-format .mb-26 { margin-bottom: var(--clamp26); }
.edit-format .mb-28 { margin-bottom: var(--clamp28); }
.edit-format .mb-30 { margin-bottom: var(--clamp30); }

/* padding-top */
.edit-format .pt-1 { padding-top: var(--clamp1); }
.edit-format .pt-2 { padding-top: var(--clamp2); }
.edit-format .pt-3 { padding-top: var(--clamp3); }
.edit-format .pt-4 { padding-top: var(--clamp4); }
.edit-format .pt-5 { padding-top: var(--clamp5); }
.edit-format .pt-6 { padding-top: var(--clamp6); }
.edit-format .pt-7 { padding-top: var(--clamp7); }
.edit-format .pt-8 { padding-top: var(--clamp8); }
.edit-format .pt-9 { padding-top: var(--clamp9); }
.edit-format .pt-10 { padding-top: var(--clamp10); }
.edit-format .pt-12 { padding-top: var(--clamp12); }
.edit-format .pt-14 { padding-top: var(--clamp14); }
.edit-format .pt-15 { padding-top: var(--clamp15); }
.edit-format .pt-16 { padding-top: var(--clamp16); }
.edit-format .pt-18 { padding-top: var(--clamp18); }
.edit-format .pt-20 { padding-top: var(--clamp20); }
.edit-format .pt-22 { padding-top: var(--clamp22); }
.edit-format .pt-24 { padding-top: var(--clamp24); }
.edit-format .pt-26 { padding-top: var(--clamp26); }
.edit-format .pt-28 { padding-top: var(--clamp28); }
.edit-format .pt-30 { padding-top: var(--clamp30); }

/* padding-bottom */
.edit-format .pb-1 { padding-bottom: var(--clamp1); }
.edit-format .pb-2 { padding-bottom: var(--clamp2); }
.edit-format .pb-3 { padding-bottom: var(--clamp3); }
.edit-format .pb-4 { padding-bottom: var(--clamp4); }
.edit-format .pb-5 { padding-bottom: var(--clamp5); }
.edit-format .pb-6 { padding-bottom: var(--clamp6); }
.edit-format .pb-7 { padding-bottom: var(--clamp7); }
.edit-format .pb-8 { padding-bottom: var(--clamp8); }
.edit-format .pb-9 { padding-bottom: var(--clamp9); }
.edit-format .pb-10 { padding-bottom: var(--clamp10); }
.edit-format .pb-12 { padding-bottom: var(--clamp12); }
.edit-format .pb-14 { padding-bottom: var(--clamp14); }
.edit-format .pb-15 { padding-bottom: var(--clamp15); }
.edit-format .pb-16 { padding-bottom: var(--clamp16); }
.edit-format .pb-18 { padding-bottom: var(--clamp18); }
.edit-format .pb-20 { padding-bottom: var(--clamp20); }
.edit-format .pb-22 { padding-bottom: var(--clamp22); }
.edit-format .pb-24 { padding-bottom: var(--clamp24); }
.edit-format .pb-26 { padding-bottom: var(--clamp26); }
.edit-format .pb-28 { padding-bottom: var(--clamp28); }
.edit-format .pb-30 { padding-bottom: var(--clamp30); }