@charset "utf-8";

/* s5 調整 */
.s5-breadcrumbs {
	--arr: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"><path fill="none" stroke="%23fffa" d="M2.2.45l3.6,3.5-3.6,3.6"/></svg>');
}
.s5-returnToTop .s5-returnToTop__button {
	--arr: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="8" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 10 8"><defs><linearGradient id="grad" x1="0" y1="0" x2="0" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="%23b95eea"/><stop offset="1" stop-color="%234d008e"/></linearGradient></defs><path fill="none" stroke="url(%23grad)" d="M1.5.5h7M5,2.53L1.06,7.5h7.88l-3.94-4.97Z"/></svg>');
	background: var(--arr) center / cover no-repeat;
	opacity: 1;
}
.s5-returnToTop .s5-returnToTop__inner2 {
	max-width: none;
}
.s5-returnToTop .s5-returnToTop__button img {
	visibility: hidden;
}

@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans JP'), url('../font/NotoSansJP-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: local('Noto Sans JP'), url('../font/NotoSansJP-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans JP';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: local('Noto Sans JP'), url('../font/NotoSansJP-Black.woff') format('woff');
}

/* :::::: initialize :::::: */
.c5-main {
	overflow-x: clip;
	--header-height: 64px;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}
:where(.c5-main) {
	--cw: 100vw; /* js で更新 */
	--bp: 1920;
	--radius: min(var(--cw) * 16 / var(--bp), 16px);
	--basisgap: min(var(--cw) * 40 / var(--bp), 40px);
	--sectiongap: min(var(--cw) * 144 / var(--bp), 144px);
	
	--whitesmoke: #f4f4f4;
	--fillsmoke: linear-gradient(#f4f4f4) 0 fill / 0 / 0 50vw;
	--grad: linear-gradient(to top, #4d008e, #b95eea);
	
	--font-serif: "A-OTF Ryumin Pro", serif;
	
	--ease-in: cubic-bezier(.3,0,.7,0);
	--ease-out: cubic-bezier(.3,1,.7,1);
	--ease-inout: cubic-bezier(.7,0,.3,1);
	--ease-back: cubic-bezier(.3,1.6,.7,1);
	--external: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="none" stroke="%232f353d" stroke-width="2" d="M10.978,1h6.022v6.021M8.971,1H1.86c-.475,0-.86.385-.86.86v14.28c0,.475.385.86.86.86h14.28c.475,0,.86-.385.86-.86v-7.132M5.468,12.546L17,1"/></svg>');
	--external-w: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"><path fill="none" stroke="white" stroke-width="2" d="M10.978,1h6.022v6.021M8.971,1H1.86c-.475,0-.86.385-.86.86v14.28c0,.475.385.86.86.86h14.28c.475,0,.86-.385.86-.86v-7.132M5.468,12.546L17,1"/></svg>');
}
:where(.c5-main) :is(h2,h3,h4,h5,h6,p,ul,ol,dl,figcaption,button,.c5-button,.c5-note) {
	font-size: min(var(--cw) * var(--font-basis) / var(--bp), var(--font-basis) * .0625rem);
}
@media print, (min-width: 640px) {
	.c5-mdonly { display: none !important; }
}
@media screen and (max-width: 639px) {
	.c5-dtonly { display: none !important; }
	:where(.c5-main) {
		--bp: 390;
		--radius: calc(100cqi * 16 / var(--bp));
		--basisgap: calc(100cqi * 20 / var(--bp));
		--sectiongap: calc(var(--cw) * 72 / var(--bp));
	}
	:where(.c5-main) :is(h2,h3,h4,h5,h6,p,ul,ol,dl,figcaption,button,.c5-button,.c5-note) {
		font-size: calc(var(--cw) * var(--font-basis) / var(--bp));
	}
}
@media screen and (max-width: 992px) {
	.c5-main {
		--header-height: 50px;
	}
}
:where(.c5-main) img {
	max-width: 100%;
	vertical-align: middle;
}
:where(.c5-main) img[height],
:where(.c5-main) picture img {
	height: auto;
}
:where(.c5-main) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.c5-visuallyhidden {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	margin: -1px;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* :::::: タイポグラフィ :::::: */
.c5-subject {
	--font-basis: 18;
	line-height: 1.4;
}
.c5-paragraph {
	--font-basis: 14;
	line-height: 1.7777;
}
.c5-note {
	display: block;
	--font-basis: 10;
	line-height: inherit;
}
@media print, (min-width: 640px) {
	.c5-subject {
		--font-basis: 40;
	}
	.c5-paragraph {
		--font-basis: 18;
	}
	.c5-note {
		--font-basis: 12;
	}
}

/* :::::: ホバー画像 :::::: */
.c5-imgwrap {
	display: block;
	overflow: hidden;
	position: relative;
	border-radius: var(--radius);
}
.c5-imgwrap::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid #fff3;
	pointer-events: none;
}
@media (hover) {
	.c5-imgwrap img {
		transition: transform .8s var(--ease-out);
	}
	 a:hover .c5-imgwrap img {
		transform: scale(1.04);
		transition-duration: .4s;
	}
}

/* :::::: ボタン :::::: */
:root .c5-button {
	display: inline-flex;
	justify-content: center;
	z-index: 0;
	position: relative;
	box-sizing: border-box;
	padding: .55em 1em .65em;
	border-radius: 3em;
	font-weight: 700;
	--font-basis: 18;
	line-height: 1.5;
	--bgcolor: var(--grad);
}
:root .c5-button::before {
	content: "";
	z-index: -1;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--bgcolor);
}
.c5-button,
.c5-button:hover,
.c5-button:visited {
	color: white;
	text-decoration: none;
}
:root .c5-button.-line {
	--font-basis: 24;
	--bgcolor: #06c755;
}
@media (hover) {
	:root .c5-button::before {
		transition: transform .8s var(--ease-out);
	}
	:root .c5-button:hover::before {
		transform: scale(1.04, 1.08);
		transition-duration: .2s;
		transition-timing-function: var(--ease-back);
	}
}
@media print, (min-width: 640px) {
	:root .c5-button {
		min-width: 10em;
		--font-basis: 20;
	}
}

/* :::::: 別窓アイコン :::::: */
.c5-p-interview .c5-paragraph a[target="_blank"]::after,
.c5-button[target="_blank"]::after,
.c5-p-interview__banners a[target="_blank"]::after,
:is(.c5-p-othersites__list, .c5-p-cta__links) a[target="_blank"] p::after {
	content: "";
	display: inline-block;
	width: .75em;
	height: .75em;
	vertical-align: middle;
	background: var(--external-w) center / cover no-repeat;
}
.c5-p-interview .c5-paragraph a[target="_blank"]::after {
	position: relative;
	top: -.1em;
	margin-left: .3em;
	background-image: var(--external);
}
.c5-button[target="_blank"]::after {
	align-self: center;
	margin-left: .5em;
}
.c5-p-interview__banners a[target="_blank"]::after {
	position: absolute;
	inset: auto 1em 1em auto;
}
.c5-p-othersites__list a[target="_blank"] p::after {
	position: relative;
	top: -.1em;
	margin-left: .5em;
}