@charset "utf-8";
/* CSS Document */

html {
	font-size:62.5%;
	font-feature-settings: "palt"; /* 全角文字をプロポーショナル幅で表示。 */ /*font-feature-settings: "halt";*/ /*全角文字を半角幅で表示*/
	word-break: auto-phrase;
}
body { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; }
*	 { font-family: inherit; color: inherit; }

body::before {
	content: "";
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-image: url(../img/musubi25_back.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	z-index: -1;
}
@media (max-width:767.98px) {
	body::before {
		content: "";
		width: 100vw;
		height: 100svh;  /* 100vh */
		position: fixed;
		top: 0;
		left: 0;
		background-image: url(../img/musubi25_back.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top center;
		z-index: -1;
	}
}

header,
main,
section,
article,
footer {
	overflow: hidden;
}

section { width: 100%; max-width: 750px; }
article { width: 100%; max-width: 750px; }
aside	{ width: 100%; max-width: 750px; }

.iframe-wrapper {
	width: 100%;
	display:inline-block;
	overflow: hidden;
}
.iframe-container {
	width: 100%;
	height: 100%;
	aspect-ratio: 65 / 82;
	border-radius: min(28px, 4.6%) / min(28px, 3.6%);
}

/* Margin
------------------------------ */
.mt {
	margin-block-start: min(
		calc(var(--mt) * 1px),
		calc(var(--mt) / 750 * 100vw)
	);
}
.mb {
	margin-block-end: min(
		calc(var(--mb) * 1px),
		calc(var(--mb) / 750 * 100vw)
	);
}

/* Font size
------------------------------ */
.fs {
	font-size: min(
    calc(var(--fs, 16) * 1px),			/* 上限：px化 */
    calc(var(--fs, 16) / 750 * 100vw)	/* 可変：数 / 数 × vw */
	);
}

/* Padding Side
------------------------------ */
.pt {
	padding-top: calc(var(--pt, 1) / 750 * 100%);
}
.pb {
	padding-bottom: calc(var(--pb, 1) / 750 * 100%);
}
.ph {
	padding-left: calc(var(--ph, 1) / 750 * 100%);
	padding-right: calc(var(--ph, 1) / 750 * 100%);
}
.pv {
	line-height: 1;
	padding-top: calc(var(--pt, 1) / 750 * 100%);
	padding-bottom: calc(var(--pt, 1) / 750 * 100%);
}

/* Line-height
------------------------------ */
.lh	{ line-height: var(--lh); }

/* Common
------------------------------ */

/* text lined */
.lined {
	text-decoration-color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: calc(100% / (2*10) + 2px);
}

@media screen and (max-width: 320px) {
	.lined {
		text-decoration-color: inherit;
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: calc(100% / (1*20) + 1px);
	}
}

/* block lined */
.lined-block {
	display: inline-block;
	background-image: linear-gradient(to right, #053c82 2px, #053c82 2px);
	background-size: 100% 1px;
	background-repeat: repeat-x;
	background-position: left bottom;
}

.dashed {
	display: inline-block;
	background-image: linear-gradient(to right, #053c82 4px, transparent 4px);
	background-size: 8px 1px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.dashed-2x {
	display: inline-block;
	background-image: linear-gradient(to right, #fff 4px, transparent 4px);
	background-size: 8px 1px;
	background-repeat: repeat-x;
	background-position: left bottom;
}
.dotted {
	display: inline-block;
	background-image: linear-gradient(to right, #053c82 4px, transparent 4px);
	background-size: 8px 4px; /*セットの幅と高　幅を上記で振り分ける*/
	background-repeat: repeat-x;
	background-position: left bottom;
}

.indent > * {
	text-indent: -1em;
	padding-left: 1em;
	/* letter-spacing: 0.3em; text-indent: 1.3em; */
}

.indent13 > * { text-indent: -1.3em; padding-left: 1.3em; }

@media (max-width:767.98px) {}
@media (min-width:768px) and (max-width:1023.98px) {}
@media (min-width:1024px) {}

.eButton {
	text-decoration: none;
	transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}
.eButton:hover {
	box-shadow: 0 clamp(1px, 0.3vw, 3px) clamp(2px, 1vw, 6px) rgba(0,0,0,0.66);
	opacity: 0.66;
}
.eButton:active {
	box-shadow: 0 clamp(1px, 0.3vw, 3px) clamp(2px, 1vw, 6px) rgba(0,0,0,0.66);
	opacity: 0.66;
}

@media (hover: none) {
  .eButton:hover {
    box-shadow: none;
    opacity: 1;
  }
  .eButton:active {
	box-shadow: none;
    opacity: 0.66;
  }
}