@charset "UTF-8";
:root {
 --main: #3c6792;
 --main-sub: #4273a5;
 --main-soft: #90afc5;
 --bg: #e6e2de;
 --pale: #d9d4d5;
 --pale2: #a09698;
 --ink: #1a1a1a;
 --ink-sub: #4a5663;
 --white: #fafafa;
 --link: #4273a5;
 --nav-now: #184a63;
 --footer: #3c6792;
 --placeholder: #6b7785;
 --selectC: #373137;
 --line: #a1a8bb;
 --navy: #151f2d;
 --listline:#94afc8;
 --field-line: #6f7a86;
 --req: #a63d2d;
 --teal: #1c4c65;
 --card: #f5f5f5;
 --panel: #dedad6;
 --wave-sky: #c6dede;
 --btn_rd: 5px;
 --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
 --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
 --serifE: "Newsreader", serif;
	box-sizing: border-box;
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* =====================================================
   Base
   ===================================================== */
html {
	height: 100%;
	font-size: 100%;
	scroll-padding-top: env(safe-area-inset-top, 0px);
	scroll-behavior: smooth;
}
html[data-size="large"] {
	font-size: 112.5%;
}
html[data-size="xlarge"] {
	font-size: 125%;
}
 *, *::before, *::after {
 box-sizing: inherit;
}
body {
	margin: 0;
	min-height: 100%;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--serif);
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
}
h1, h2, h3 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.5;
}
p {
	margin: 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
a {
	color: inherit;
}
img {
	width: 100%;
	height: auto;
}

:focus-visible {
 outline: 3px solid #e9a93b;
 outline-offset: 2px;
}
.cstext{
	margin: -2rem 0 3rem;
	text-align: center;
	font-family: var(--serifE);
	font-weight:400;
	font-size: 1.6rem;
}
.tac {
	text-align:center;
}
.tar {
	text-align:right;
}
.tal {
	text-align:left;
}
.spL {
	text-align:left
}
.spL span {
	display:inline;
}
.sptxC {
	text-align: center!important;
}
.sptxLpctxC {
	text-align: left!important;
}
.sptabtxLpctxC {
	text-align: left!important;
}
.container, .container-main {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
	padding: 0 8vw;
}
.skip {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 10;
	padding: .6em 1em;
	background: var(--main);
	color: var(--white);
}
.skip:focus {
	top: 8px;
	left: 8px;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
/* =====================================================
   Header
   ===================================================== */

.site-header {
	position: relative;
}
.top {
	position: relative;
	z-index: 5;
	background: transparent;
	border-radius: 0;
}
.tools {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
 "label btns" "lang btns";
	justify-content: end;
	align-items: center;
	gap: 0 12px;
	padding: 12px 106px 0 clamp(12px, 12.8vw, 48px);
	font-weight: 600;
}
.tools-label {
	grid-area: label;
	align-self: end;
	font-size: 14px;
	line-height: 1.3;
}
.size-group {
	display: flex;
	grid-area: btns;
	gap: 6px;
}
.size-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 3px;
	background: var(--white);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.size-btn:hover {
	background: var(--white);
}
.size-btn[aria-pressed="true"] {
	border-color: var(--footer);
	background: var(--footer);
	color: var(--white);
}
.lang-switch {
	grid-area: lang;
	align-self: start;
	margin-left: 0;
	font-size: 16px;
	white-space: nowrap;
}
.lang-separator {
	margin: 0 5px;
}
.lang-current {
/* color: var(--link); */
}
.lang-switch a {
	color: var(--ink);
	text-decoration: none;
}
.lang-switch a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--main);
}
.brand-row {
	display: flex;
	justify-content: center;
	padding: 54px 0 4px;
}
.brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
}
.brand-name .ja {
	/* padding-left: 0; */
	font-family: var(--serif);
	font-size: 2.45rem;
	font-weight: 400;
	letter-spacing: .13em;
	line-height: 1.6;
	display: block;
	margin-top: 0;
}
.brand-role .ja {
	margin-top: 0;
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: .13em;
}
.brand-name .en {
	font-size: 2rem;
	letter-spacing: 0.1em;
	line-height: 1.4;
	display: block;
	font-family: var(--serif);
	margin: 0 8vw;
	text-align: center;
}
.brand-role .en {
	font-size: 1.25rem;
}
/* =====================================================
   Global nav
   ===================================================== */
.gnav {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 50;
	width: min(295px, calc(100vw - 72px));
	max-height: 100vh;
	overflow-y: auto;
	padding-top: env(safe-area-inset-top, 0px);
	border: 0;
	border-radius: 0 0 0 14px;
	background: var(--footer);
	transform: translateX(100%);
	visibility: hidden;
 transition: transform .3s ease, visibility 0s linear .3s;
}
.gnav.is-open {
	transform: none;
	visibility: visible;
 transition: transform .3s ease, visibility 0s;
}
.gnav ul {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}
.gnav li + li {
	border-top: 4px solid rgba(255, 255, 255, .5);
}
.gnav li a {
	position: relative;
	display: block;
 padding: 1rem .5rem .8rem;
	color: var(--white);
	text-align: center;
	text-decoration: none;
	font-family:var(--serifE);
 font-size: clamp(1.4rem, calc(1rem + .5vw), 1.25rem);
	letter-spacing: 0.03em;
}
.gnav li a:hover {
	background: rgba(255, 255, 255, .12);
}
.gnav li li.cs a{pointer-events: none;color: var(--pale);}
.gnav {
	display: block;
	font-weight: 500;
	letter-spacing: .05em;
	line-height: 1.5;
}
.gnav a:hover .ja {
	color: var(--white);
}
.gnav a[aria-current="page"] {
	background: rgba(255, 255, 255, .16);
}
 .gnav a[aria-current="page"]::after {
 display: none;
}
 .gnav :focus-visible {
 outline-color: var(--white);
 outline-offset: -4px;
}
.gnav li ul {
	background: rgba(0, 0, 0, .18);
}
.gnav li li + li {
	border-top: 1px solid rgba(255, 255, 255, .3);
}
.gnav li li a {
}
.menu-btn {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 96px;
	height: calc(88px + env(safe-area-inset-top, 0px));
	padding: env(safe-area-inset-top, 0px) 0 0;
	border: 0;
	border-radius: 0 0 0 14px;
	background: var(--footer);
	color: var(--white);
	font: inherit;
	cursor: pointer;
 transition: right .3s ease, width .3s ease;
}
.menu-btn.is-open {
	right: min(295px, calc(100vw - 72px));
	width: 72px;
}
.menu-label {
 font-size: .85rem;
	font-weight: 600;
	letter-spacing: 0.05rem;
	line-height: 1;
}
.menu-icon {
	position: relative;
	display: block;
	width: 44px;
	height: 22px;
}
.menu-icon i {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--white);
 transition: transform .3s ease, top .3s ease;
}
 .menu-icon i:nth-child(1) {
 top: 3px;
}
 .menu-icon i:nth-child(2) {
 top: 16px;
}
 .menu-btn.is-open .menu-icon i:nth-child(1) {
 top: 10px;
 transform: rotate(45deg);
}
 .menu-btn.is-open .menu-icon i:nth-child(2) {
 top: 10px;
 transform: rotate(-45deg);
}
 .menu-btn:focus-visible {
 outline-color: var(--white);
 outline-offset: -6px;
}
 body::after {
 content: "";
 position: fixed;
 inset: 0;
 z-index: 40;
 background: rgba(64, 64, 64, .6);
 opacity: 0;
 visibility: hidden;
 pointer-events: none;
 transition: opacity .3s ease, visibility 0s linear .3s;
}
 body:has(.gnav.is-open)::after {
 opacity: 1;
 visibility: visible;
 pointer-events: auto;
 transition: opacity .3s ease, visibility 0s;
}
/* =====================================================
   Top page
   ===================================================== */
.br-pc, .br-tab {
	display: none;
}
.br-sp {
	display: inline;
}
.photoTop {
	position: relative;
	margin: 27px auto 0;
}
.photoTop {
	opacity: 0;
	transform: translateY(28px);
}
.photoTop.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 1.4s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
	max-width: 600px;
}
.slider {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: #cfcac5;
}
.slider-track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
 transition: transform .9s cubic-bezier(.6, 0, .2, 1);
}
.slide {
	flex: 0 0 100%;
	height: 100%;
}
.slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slider-dots {
	position: absolute;
	bottom: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	gap: 10px;
}
.slider-dots button {
	position: relative;
	width: 10px;
	height: 10px;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
 .slider-dots button::after {
 content: "";
 position: absolute;
 inset: -9px;
}
.slider-dots button[aria-current="true"] {
	background: #fff;
}
.photoTop figcaption {
	margin: 5px 10px 0 0;
	color: #686358;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
 font-size: .75rem;
	letter-spacing: 0;
	line-height: 1.6;
	text-align: right;
}
/* =====================================================
   Today card
   ===================================================== */

.top-wrap {
	max-width: 1156px;
	margin: 0 auto;
	padding: 0 16px;
}
.today-card {
	position: relative;
	display: grid;
	justify-items: center;
	margin-top: 64px;
	padding: 0 22px 26px;
	border-radius: 12px;
	background: var(--card);
 transition: background-color .8s ease;
}
.today-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: -40px;
}
.today-date time {
	position: relative;
	display: block;
	width: 96px;
	height: 98px;
	color: var(--main-sub);
	font-family: var(--serif);
	font-size: 2.75rem;
	font-weight: 400;
	line-height: 1;
}
.today-date .d-m {
	position: absolute;
	top: 6px;
	left: 0;
}
.today-date .d-d {
	position: absolute;
	right: 0;
	bottom: 6px;
}
 .today-date time::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 width: 1px;
 height: 100px;
 background: var(--main-sub);
 transform: translate(-50%, -50%) rotate(40deg);
}
.today-label {
	margin-top: 6px;
	color: var(--main-sub);
	font-family: var(--serif);
	font-weight: bold;
 font-size: .9375rem;
	letter-spacing: 0.25rem;
	line-height: 1.5;
}
.today-jacket {
	width: auto;
	height: 140px;
	margin: 14px 0 0;
}
.today-jacket img {
	display: block;
	width: auto;
	height: 100%;
	object-fit: cover;
}
.today-body {
	width: 100%;
	margin-top: 18px;
}
.today-set {
}
.today-title {
	color: var(--main-sub);
	font-family: var( --serif);
 font-size: clamp(1.25rem, calc(1rem + .5vw), 1.6rem);
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
}
.today-meta {
	margin: 0;
	color: var(--main-sub);
	font-size: 1rem;
	letter-spacing: .06em;
	line-height: 1.7;
	font-weight: 600;
}
.today-desc {
	margin: 10px 0 0;
	color: #4d4d4d;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: 0.02rem;
}
.today-links {
	display: flex;
	gap: 14px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
.today-links img {
	display: block;
	width: 54px;
	height: 54px;
}
.today-links a {
	display: block;
	border-radius: 12px;
}
.today-links a:hover {
	filter: brightness(.92);
}
/* =====================================================
   News
   ===================================================== */

.news-section {
	margin-top: 60px;
}
.news-section h2 {
	width: fit-content;
	margin: 0 auto;
 padding: 0.1rem .5rem;
	border-top: 2px solid var(--main-sub);
	border-bottom: 2px solid var(--main-sub);
	color: var(--main-sub);
	font-family: var(--serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.6;
	text-align: center;
}
.news {
	margin: 30px 0 0;
	padding: 0 20px;
	list-style: none;
}
.news li a {
	text-decoration: none;
}
.news li a.nolink {
	pointer-events: none;
}
.news li a:hover p {
	color: var(--main);
}
.news time {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
}
.news p {
	margin: 4px 0 0;
	font-size: 1rem;
	line-height: 1.85;
}
body#NEWS .news li:first-child::before {
 content: "";
 display: block;
 width: 67px;
 height: 1px;
 margin: 22px auto 24px;
 background: #8aa4c4;
}
 .news li:not(:last-child)::after {
 content: "";
 display: block;
 width: 67px;
 height: 1px;
 margin: 22px auto 24px;
 background: #8aa4c4;
}
/* =====================================================
   Official SNS
   ===================================================== */

.sns-panel {
	position: relative;
	margin-top: 62px;
	padding: 38px 16px 26px;
	background: var(--panel);
}
 .sns-panel::before {
 content: "";
 position: absolute;
 top: 0;
 left: 50%;
 width: 26px;
 height: 18px;
 background: var(--main-sub);
 clip-path: polygon(0 0, 100% 0, 50% 100%);
 transform: translateX(-50%);
}
.sns-panel h2 {
	color: var(--main-sub);
	font-family: var(--serif);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .2em;
	line-height: 1.6;
	text-align: center;
}
.sns-panel > p {
	margin: 14px 0 0;
	font-size: 1rem;
	line-height: 1.8;
}
.sns-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px;
	margin-top: 16px;
}
.sns-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 14px 16px;
	border-radius: 4px;
	background: #f6f6f6;
	color: var(--ink);
	text-decoration: none;
}
.sns-list a:hover {
	background: #fff;
}
.sns-list a > div {
	min-width: 0;
}
.sns-list svg {
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--main-sub);
}
.sns-list strong {
	display: block;
	line-height: 1.5;
}
.sns-list span {
	display: block;
	overflow-wrap: anywhere;
	font-size: 1rem;
	line-height: 1.5;
}
/* =====================================================
   Footer wave
   ===================================================== */

.footer-wave {
	height: clamp(140px, 36vw, 260px);
	margin-top: 28px;
	line-height: 0;
}
.footer-wave__svg {
	display: block;
	width: 100%;
	height: 100%;
}
.wave--sky {
	fill: var(--wave-sky);
}
.wave--colorful {
	fill: #a5c6de;
	fill-opacity: .5;
}
.wave--blue {
	fill: var(--footer);
}
/* =====================================================
   Footer
   ===================================================== */

.site-footer {
	margin-top: 66px;
	padding-block: 26px;
	background: var(--navy);
	color: var(--white);
}
.site-footer .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 40px;
}
.foot-name {
	font-family: var(--serif);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: .18em;
}
.foot-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
}
.foot-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	text-underline-offset: 4px;
}
.foot-links a:hover {
	text-decoration: underline;
}
.foot-links svg {
	width: 16px;
	height: 16px;
}
.copy {
	margin-left: 0;
 font-size: .85rem;
}
.site-footer.ft5 {
	margin-top: -1px;
	padding: 40px 0;
	border-radius: 0;
	background: var(--footer);
	color: var(--white);
}
.site-footer.ft5 span {
/* color: var(--white); */
}
.site-footer .ft5-inner {
	display: block;
	padding: 0 20px 0 50px;
}
.ft5-name {
	margin: 0 0 8px;
}
.ft5-name-main {
	display: block;
	font-family: var(--serif);
	font-size: 2.5rem;
	font-weight: 400;
	letter-spacing: .14em;
	line-height: 1.25;
}
.ft5-name-role {
	display: block;
	margin-top: 2px;
 font-size: .875rem;
	letter-spacing: .25em;
}
.ft5-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.ft5-nav ul .cs a {
	color: var(--pale);
	pointer-events: none;
}
.ft5-nav a {
	position: relative;
	display: block;
	padding: 14px 0 22px;
	color: #fff;
	text-decoration: none;
}
.ft5-nav a, .ft5-nav ul li.nof a {
	padding: 14px 0;
}
.ft5-nav ul li.nof ul li a {
	padding: 5px 0;
}
.ft5-nav li li strong {
	font-size: 1rem;/* padding: 0; */
}
 .ft5-nav ul li a::after {
 content: "";
 position: absolute;
 bottom: 50%;
 left: -50px;
 width: 40px;
 height: 2px;
 background: #7b97b8;
}
.ft5-nav ul li.nof ul li a::after {
 content: none;
}
.ft5-nav li.is-home {
/* display: none; */
}
.ft5-nav strong {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.5;
}
.ft5-nav a:hover strong {
	text-decoration: underline;
	text-underline-offset: 6px;
}
.ft5-sns {
	display: flex;
	gap: 22px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}
.ft5-sns a {
	display: inline-flex;
	color: #fff;
}
.ft5-sns svg {
	width: 28px;
	height: 28px;
}
.footer-line {
	display: flex;
	justify-content: center;
	margin: 0 40px;
}
.footer-line .copy {
	margin: 0;
 font-size: .875rem;
}
.footer-line p {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 34px 0 0;
 font-size: .875rem;
	font-weight: 400;
	letter-spacing: .04em;
	line-height: 1.8;
}
.footer-line a {
	color: #fff;
	text-underline-offset: 4px;
}

/* =====================================================
   Background animations
   ===================================================== */

.hero-area.is-anim::before {
 animation: bg-light 6.5s cubic-bezier(.45, 0, .55, 1) both;
}
 @keyframes bg-light {
 0% {
 opacity: 0;
 transform: translate3d(-4%, 4%, 0) scale(1.06);
}
 12% {
 opacity: 1;
}
 100% {
 opacity: 0;
 transform: translate3d(16%, -14%, 0) scale(1.12);
}
}
 .hero-area.bg-wind::before {
 animation: bg-wind 3.8s cubic-bezier(.16, .8, .3, 1) both;
}
 @keyframes bg-wind {
 0% {
 opacity: 0;
 transform: translate3d(-3%, 9%, 0) scale(1.12) rotate(-1.2deg);
}
 100% {
 transform: none;
}
}
.pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 45;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--footer);
	color: var(--white);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
 transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s ease;
}
.pagetop.is-show {
	opacity: 1;
	visibility: visible;
	transform: none;
 transition: opacity .3s ease, transform .3s ease, visibility 0s, background .2s ease;
}
.pagetop:hover {
	background: var(--ink);
}
.pagetop:focus-visible {
 outline: 2px solid #e9a93b;
 outline-offset: 3px;
}
 @media (prefers-reduced-motion: reduce) {
 html {
scroll-behavior: auto;
}
 .pagetop {
transition: none;
}
}
 @media (min-width: 768px) {
 .pagetop {
 right: 32px;
 bottom: 32px;
 width: 56px;
 height: 56px;
}
}
/* =====================================================
   Responsive
   ===================================================== */
@media (min-width: 481px) {
 .songs, .choices {
 grid-template-columns: 1fr 1fr;
}
 .history {
 grid-template-columns: 7.6em 1fr;
}
 .history dt {
 padding-bottom: .85rem;
 border-bottom: 1px solid var(--line);
}
}

/* =====================================================
   Tablet (761px)
   ===================================================== */

@media (min-width: 761px) {
.spV {
 display:none;
}
 .tabV {
 display:block;
}
 .pcV {
 display:none;
}
 .sptabV {
 display:block;
}
 .pctabV {
 display:block;
}
 .pctabV_i {
 display:inline;
}
 .sptxC {
 text-align: left!important;
}
 .sptxLpctxC {
 text-align:  center!important;
}
 .sptabtxLpctxC {
 text-align:  left!important;
}
 .top {
 position: absolute;
 top: 0;
 right: 96px;
 background: var(--bar);
 border-radius: 0 0 0 14px;
}
 .tools {
 display: flex;
 flex-wrap: nowrap;
 gap: 0 12px;
 padding: 10px 26px 9px 14px;
}
.tools-label, .lang-switch {
 align-self: center;
}
 .size-btn {
 width: 42px;
 height: 42px;
 border: 0;
 background: var(--white);
 color: var(--ink);
 font-size: 14px;
}
 .brand-row {
 padding: 60px 0 12px;
 height: 160px;
}
 .brand-name {
 font-size: clamp(2.4rem, 3.2vw, 3rem);
}
 .brand-role {
 margin-top: 0;
 font-size: 1rem;
 letter-spacing: .3em;
}
 .hero {
 grid-template-columns: minmax(0, 1fr) min(537px, 45vw);
 grid-template-areas:
 " photo quote";
 max-width: 1200px;
 margin: 35px auto 0;
 padding: 0;
}
 .hero-text {
 grid-area: text;
 padding: 113px 0 0 36px;
}
 .hero h1 {
 font-size: clamp(1.9rem, 3.6vw, 2.75rem);
 letter-spacing: .06em;
 line-height: 1.4;
}
 .hero-lead {
 margin-top: 13px;
 font-size: clamp(.95rem, 1.5vw, 1.25rem);
 line-height: 1.8;
 letter-spacing: .1em;
 padding: 0 40px 0 0;
}
 .photoTop {
 grid-area: photo;
 margin: 0 auto;
}
 .slider {
 z-index: 1;
}
 .photoTop figcaption {
 margin: 5px 0 0;
 font-size: .875rem;
 letter-spacing: 0.05rem;
 text-align: right;
}
 .hero-quote {
 grid-area: quote;
 align-self: end;
 max-width: 500px;
 margin: 125px 40px 0 4px;
 margin: 30px 0 80px 80px;
 padding: 14px 0 6px 28px;
 font-size: clamp(1rem, 1.5vw, 1.3rem);
 letter-spacing: .08em;
 line-height: 1.68;
 padding: 20px;
}
 .hero-quote::before {
 top: 2px;
 left: -2px;
 font-size: 1.5rem;
}
 .hero-quote::after {
 right: 0;
 bottom: -10px;
 font-size: 1.5rem;
}
 .hero-quote .hero-quote-src {
 margin-top: 8px;
 padding-right: 30px;
 font-size: 1rem;
}
 .today-card {
 display: grid;
 grid-template-columns: auto minmax(0, 1fr) auto;
 align-items: start;
 justify-items: stretch;
 column-gap: 0;
 min-height: 180px;
 margin-top: 78px;
 padding: 44px 23px 19px 59px;
}
 .today-date {
 position: relative;
 flex-direction: row;
 align-items: flex-start;
 width: 152px;
 margin: -42px 0 0;
}
 .today-date time {
 width: 90px;
 height: 108px;
 font-size: 3rem;
}
 .today-date .d-m {
 top: 12px;
}
 .today-date .d-d {
 right: 6px;
 bottom: 14px;
}
 .today-label {
 margin: 28px 0 0 14px;
 font-size: .875rem;
 letter-spacing: .1em;
 writing-mode: vertical-rl;
}
 .today-jacket {
 width: 104px;
 height: 104px;
 margin: 0;
}
.today-set {
 margin-left: 20px;
}
 .today-body {
 width: auto;
 margin: 0 0 20px;
 padding-right: 24px;
}
.today-links {
 display: flex;
 gap: 14px;
 margin: 22px 0 0;
 padding: 0;
 list-style: none;
}
.today-linkset {
 display: flex;
 justify-content: flex-end;
}
 .today-title {
 font-size: 1.625rem;
 line-height: 1.4;
}
 .today-meta {
 margin-top: 2px;
 font-size: 1rem;
}
 .today-desc {
 max-width: 460px;
 margin-top: 12px;
 font-size: .9375rem;
 line-height: 1.6;
}
 .today-links {
 align-self: end;
 gap: 20px;
 margin: 0;
}
 .today-links img {
 width: 51px;
 height: 51px;
}
 .news-section {
 display: grid;
 grid-template-columns: 72px minmax(0, 1fr);
 column-gap: 28px;
 margin-top: 68px;
 padding: 0 20px 0 42px;
}
body#NEWS .news-section {
 display: 	block;
 margin-top: 	0;
}
body#NEWS .news li {
 display: 	block;
}
 .news-section h2 {
 align-self: start;
 width: auto;
 margin: 0;
 padding: 16px 12px;
 border: 0;
 border-right: 2px solid var(--main-sub);
 border-left: 2px solid var(--main-sub);
 font-size: 1rem;
 letter-spacing: .5em;
 line-height: 1.5;
 writing-mode: vertical-rl;
 text-orientation: upright;
 width: 3rem;
 display: flex;
 align-items: center;
 justify-content: center;
}
 .news {
 margin: 0;
 padding: 0;
}
 .news li a {
 display: grid;
 grid-template-columns: 138px minmax(0, 1fr);
 column-gap: 14px;
 padding: 0 0 13px;
}
 .news li + li {
 padding-top: 13px;
 border-top: 1px solid var(--listline);
}
body#NEWS .news li:first-child::before {
 display: none;
}
body#NEWS .news {
 padding: 13px 0 0;
 border-top: 1px solid var(--listline);
 border-bottom: 1px solid var(--listline);
}
 .news li:not(:last-child)::after {
 display: none;
}
 .news time {
 font-size: .85rem;
}
 .news p {
 margin: 0;
 font-size: 1rem;
 line-height: 1.7;
}

  /* SNS */
  .sns-panel {
 margin-top: 74px;
 padding: 38px 48px 34px;
}
 .sns-panel > p {
 text-align: center;
}
 .sns-list {
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 50px;
 margin-top: 22px;
 padding: 0;
}
 .sns-list a {
 padding: 20px 28px;
 box-shadow: none;
}
 .footer-wave {
 height: clamp(180px, 15vw, 260px);
 margin-top: 24px;
}
 .site-footer.ft5 {
 margin-top: -1px;
 padding: 20px 0 40px;
 border-radius: 0;
 background: var(--footer);
 color: var(--white);
}
 .ft5-name {
 grid-column: 1;
 grid-row: 1 / span 2;
 margin: 6px 0 0 0;
 align-self: start;
}
 .ft5-name-main {
 font-size: 2.45rem;
}
.ft5-name-main.en {
 font-size: 1.8rem;
 letter-spacing: 00.1rem;
}
 .ft5-nav {
 grid-column: 2;
}
 .ft5-nav > ul {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 grid-template-rows: auto auto;
 column-gap: 24px;
 margin: 0;
 padding: 0;
 list-style: none;
}
.ft5-nav > ul > li:nth-child(1) {
 grid-column: 1;
 grid-row: 1;
}
.ft5-nav > ul > li:nth-child(2) {
 grid-column: 1;
 grid-row: 2;
}
.ft5-nav > ul > li:nth-child(3) {
 grid-column: 2;
 grid-row: 2;
}
 .ft5-nav > ul > li:nth-child(4) {
 grid-column: 3;
 grid-row: 2;
}
 .ft5-nav > ul > li:nth-child(5) {
 grid-column: 4;
 grid-row: 2;
}
.ft5-nav > ul > li:nth-child(5) > ul.ft5-sns {
 display: flex;
 flex-direction: row;
 gap: 22px;
 margin: 10px 0 0;
 padding: 0;
 list-style: none;
}
 .ft5-nav > ul > li:nth-child(5) > ul.ft5-sns li {
 width: auto;
}
 .ft5-nav > ul > li:nth-child(5) > ul.ft5-sns li a {
 display: inline-flex;
 padding: 0;
}
 .ft5-nav > ul > li:nth-child(5) > ul.ft5-sns svg {
 width: 28px;
 height: 28px;
}
 .ft5-nav ul ul {
 display: block;
 margin: 0;
 padding: 0;
}
 .ft5-nav ul li a::after {
 content: "";
 position: absolute;
 bottom: 50%;
 left: -50px;
 width: 40px;
 height: 2px;
 background: #7b97b8;
}
.footer-line {
 display: flex;
 justify-content: center;
}
 .br-tab {
 display: inline;
}
 .br-sp {
 display: none;
}
}

/* =====================================================
   PC (1025px)
   ===================================================== */

@media screen and (min-width: 1025px) {
 .br-pc {
 display: inline;
}
.spV {
 display:none;
}
 .tabV {
 display:none;
}
 .pcV {
 display:inline-block;
}
 .sptabV {
 display:none;
}
 .pctabV {
 display:block;
}
 .sptabtxLpctxC {
 text-align: center!important;;
}
 .site-header {
 height: 270px;
}
.container, .container-main {
 padding: 0 60px;
}
 .top {
 right: 0;
 background: var(--panel);
 border-radius: 0 0 0 14px;
 max-height: 88px;
}
.brand-name .ja {
 font-size: 2.85rem;
 margin-top: -.15em;
}
.brand-name .en {
 font-size: 2.4rem;
 margin-bottom: 0;
}
 .menu-btn {
 display: none;
}
 body::after, body:has(.gnav.is-open)::after {
 display: none;
}
 .gnav {
 position: static;
 z-index: auto;
 width: auto;
 max-height: none;
 overflow: visible;
 margin: 0 auto;
 padding-top: 0;
 border-radius: 0;
 background: transparent;
 transform: none;
 visibility: visible;
 transition: none;
}
 .gnav ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-end;
 gap: 6px clamp(28px, 3.6vw, 80px);
 max-width: 1200px;
 margin: 0 auto;
 padding: 56px 20px 0;
}
 .gnav li + li {
 border-top: 0;
}
 .gnav li a {
 position: relative;
 padding: 0 0 .45rem;
 background: transparent;
 color: var(--ink);
 font-size: 1.73rem;
}

.gnav {
 font-size: 1.45rem;
 padding:  0 10px;
}
 .gnav li a:hover {
 background: transparent;
}
 .gnav a:hover .ja {
 color: var(--ink);
}
 .gnav li a::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 3px;
 background: var(--line);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform .35s ease;
}
 .gnav li a:hover::after {
 transform: scaleX(1);
}
 .gnav a[aria-current="page"] {
 background: transparent;
}
 .gnav a[aria-current="page"]::after {
 display: block;
 height: 4px;
 background: var(--nav-now);
 transform: scaleX(1);
}
 .gnav :focus-visible {
 outline-color: #e9a93b;
 outline-offset: 2px;
}
.gnav li.cs, .gnav li + li.cs {
 color: var(--pale);
 pointer-events: none;
}
.gnav li.cs a, .gnav li li.cs a {
 color: var(--main-soft);
}
.gnav li {
 position: relative;
}
.gnav li > ul {
 position: absolute;
 top: 100%;
 left: 50%;
 z-index: 60;
 display: block;
 flex-wrap: nowrap;
 min-width: 180px;
 max-width: none;
 margin: 0;
 padding: 0;
 gap: 0;
 background: var(--pale);
 border-radius: 0 0 8px 8px;
 opacity: 0;
 visibility: hidden;
 transform: translateX(-50%) translateY(8px);
 transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.gnav li:hover > ul, .gnav li:focus-within > ul {
 opacity: 1;
 visibility: visible;
 transform: translateX(-50%) translateY(0);
 transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
 .gnav li li + li {
 border-top: 1px solid rgba(255, 255, 255, .25);
 border-top: 1px solid var(--main-soft);
}
.gnav li li a {
 padding: .8rem 1.4rem;
 color: var(--ink);
 text-align: center;
 white-space: nowrap;
 font-size: 1.5rem;
}
.gnav li li a::after {
 display: none;
}
.gnav li li a:hover {
 background: rgba(255, 255, 255, .15);
 background: var(--main-soft);
}
.gnav li li :focus-visible {
 outline-color: var(--white);
}
 .today-date .d-m {
 top: 14px;
}
 .today-card {
 padding-left: 59px;
}
.site-footer .ft5-inner {
 display: grid;
 grid-template-columns: 185px 1fr;
 gap: 50px;
 padding: 0 50px;
}
 .ft5-nav ul {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 0px 15px;
}
.site-footer .ft5-name-main span.en {
 font-size: 1.8rem;
}
.site-footer .ft5-nav strong span.en {
 font-weight: 500;
 font-size: 1.25rem;
}
}

/* =====================================================
   Motion settings
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
 .js .photoTop {
 opacity: 1;
 transform: none;
}
 .js .photoTop.is-in, .slider-track, .today-card, .menu-btn, .menu-icon i, .gnav, .gnav.is-open {
 transition: none;
}
}