@charset "utf-8";
@font-face {
  font-family: "Zen Old Mincho";
  src: url("../fonts/ZenOldMincho-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Old Mincho";
  src: url("../fonts/ZenOldMincho-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/******************************/
/*common */
/******************************/
body {
  font-family: "Zen Old Mincho", serif;
}

.bold {
  font-weight: 700;
}

/*リニューアル中　表示用*/
/* ==========================================================================
   TOP（100th Anniversary / リニューアル告知）
   --------------------------------------------------------------------------
   デザインのフレーム（PC:1280x800 / SP:375x810）を 1 とした
   単位 --u をビューポートから算出し、全要素をデザイン数値そのままで配置する
   ========================================================================== */
.p-top {
	/* デザイン 1px 相当の長さ（フォールバック → svh） */
	--u: min(calc(100vw / 1280), calc(100vh / 800));
	--u: min(calc(100vw / 1280), calc(100svh / 800));

	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	background: #EFEEE8;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-image: url("../img/top/bg-main.png");
	background-image: image-set(
	  url("../img/top/bg-main.png.webp") type("image/webp"),
	  url("../img/top/bg-main.png") type("image/png")
	);
	overflow-x: hidden;
}

.p-top .main-wrap { 
	flex: 1 0 auto;
	display: flex;
    align-items: center;
    justify-content: center;
}
.p-top footer     { flex: 0 0 auto; }

.top__inner {
	text-align: center;
}

/* ロゴ ------------------------------------------------------------------- */
.top__logo { line-height: 0; }
.top__logo img {
	width: calc(210 * var(--u));
	height: auto;
}

/* 100th + Anniversary ---------------------------------------------------- */
.top__100th {
	position: relative;
	width: calc(430 * var(--u));
	margin: calc(40 * var(--u)) auto 0;
	line-height: 0;
}
.top__100th-num {
	display: block;
	width: 100%;
	height: auto;
}
.top__anniv {
	position: absolute;
	left: 44.7%;
	top: 64.6%;
	width: 56.5%;
	color: #78A4A2;
}
.top__anniv .anniv-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* リード / 本文 ---------------------------------------------------------- */
.top__lead {
	margin-top: calc(12 * var(--u));
	font-size: calc(35 * var(--u));
	line-height: 1;
	color: #0F554D;
}
.top__txt {
	margin-top: calc(20 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: calc(32 * var(--u));
}

/* 電話番号 --------------------------------------------------------------- */
.top__tel { margin-top: calc(20 * var(--u)); line-height: 0; }
.top__tel a { display: inline-block; transition: opacity .3s ease; }
.top__tel a:hover { opacity: .7; }
.top__tel img { width: calc(236 * var(--u)); height: auto; }

/* コピーライト ------------------------------------------------------------ */
.p-top footer { padding-bottom: calc(20 * var(--u)); }
.p-top #footer { text-align: center; }
.p-top #copyright {
	font-size: calc(12 * var(--u));
	line-height: 1.2;
	letter-spacing: .02em;
	color: #0b534b;
}


/* ==========================================================================
   TOP / モーション
   1. 白背景にロゴがふわっと表示
   2. そのロゴがふわっとフェードアウト
   3. 背景・ロゴ・テキストがまとめてふわっと表示
   4. 最後に Anniversary を手描き風に描き出す
   ========================================================================== */

/* 1画面目の白幕 */
.top__curtain {
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 90;
	opacity: 0;
	visibility: hidden;
}
.js .p-top .top__curtain {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.js .p-top.is-reveal .top__curtain {
	opacity: 0;
	visibility: hidden;
}

/* 白幕の上のロゴ（1画面目専用） */
.top__curtain-logo {
	position: absolute;
	left: 50%;
	top: 47.5%;
	width: calc(280 * var(--u));
	height: auto;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.96);
}
/* 2. ふわっと表示 */
.js .p-top.is-logo .top__curtain-logo {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
	transition: opacity 1.0s ease, transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
/* 3. ふわっとフェードアウト */
.js .p-top.is-logout .top__curtain-logo {
	opacity: 0;
	transition: opacity .6s ease;
}

/* ロゴ・テキストなど（.top__inner と同じタイミングで表示） */
.js .p-top .js-fade {
	opacity: 0;
	transform: translateY(calc(14 * var(--u)));
	/*transition:
		opacity 1.0s ease var(--d, 0s),
		transform 1.0s cubic-bezier(.22, .61, .36, 1) var(--d, 0s);*/
	transition:
    opacity 1.5s ease,
    transform 1.5s ease-in-out;
	will-change: opacity, transform;
}
.js .p-top.is-reveal .js-fade {
	opacity: 1;
	transform: translateY(0);
}

/* Anniversary：ペン先の角度（文字の斜体角）で左から書き進む */
.anniv-svg__pen {
	stroke-dasharray: 270;
	stroke-dashoffset: 270;
}
.js .p-top.is-write .anniv-svg__pen {
	animation: anniv-write 1.5s cubic-bezier(.55, .10, .30, 1) forwards;
}
@keyframes anniv-write {
	to { stroke-dashoffset: 0; }
}


/* ==========================================================================
   SP
   ========================================================================== */
@media screen and (max-width: 768px) {

	.p-top {
		--u: min(calc(100vw / 375), calc(100vh / 810));
		--u: min(calc(100vw / 375), calc(100svh / 810));
		background-image: url("../img/top/bg-main-sp.png");
		background-image: image-set(
		  url("../img/top/bg-main-sp.png.webp") type("image/webp"),
		  url("../img/top/bg-main-sp.png") type("image/png")
		);
	}

	.top__logo img       { width: calc(149 * var(--u)); }
	.top__curtain-logo   { width: calc(222 * var(--u)); }

	.top__100th      { width: calc(296 * var(--u)); margin-top: calc(39 * var(--u)); }

	.top__lead       { margin-top: calc(40 * var(--u)); font-size: calc(23 * var(--u)); }

	.top__txt {
		width: calc(322 * var(--u));
		margin: calc(20 * var(--u)) auto 0;
		text-align: left;
	}

}


/* ==========================================================================
   アニメーションを控える設定
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.js .p-top .top__curtain { display: none; }
	.js .p-top .js-fade {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.anniv-svg__pen {
		stroke-dashoffset: 0;
		animation: none !important;
	}
}
/*END リニューアル中　表示用*/