@charset "utf-8";

*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:inherit;text-decoration-skip-ink:auto}
img,svg,video,iframe{vertical-align:middle}
img,video{max-width:100%}
img[height]{height:auto}
input,button,textarea,select{font:inherit}
small{font-size:inherit}

:root {
	/* mono */
	--gray4: #92939c;
	/* color */
	--red: #dc6688;
	--orange: #ec9268;
	--yellow: #eab952;
	--green: #68aa68;
	--skyblue: #86c0de;
	--monospace: "Source Code Pro", "FOT-筑紫A丸ゴシック Std M", consolas, monospace;
	/* alpha */
	--red_a: rgba(220,102,136,.8);
	--orange_a: rgba(236,146,104,.8);
	--yellow_a: rgba(234,185,82,.8);
	--green_a: rgba(104,170,104,.8);
	--skyblue_a: rgba(134,192,222,.8);
	/* easing */
	--easeIn: cubic-bezier(.3,0,.7,0);
	--easeOut: cubic-bezier(.3,1,.7,1);
	--easeInOut: cubic-bezier(.7,0,.3,1);
	--viewWidth: 100vw;
	--scrollBarWidth: 0;
	
	/* 本文 */
	--tsukuAM: "FOT-筑紫A丸ゴシック Std M", TsukuARdGothicStd-M, sans-serif;
	--tsukuAB: "FOT-筑紫A丸ゴシック Std B", TsukuARdGothicStd-B, sans-serif;
	--tsukuAE: "FOT-筑紫A丸ゴシック Std E", TsukuARdGothicStd-E, sans-serif;

	/* タイトル */
	--tsukuAN: "FOT-筑紫ANC丸ゴL Std B", TsukuANCRdGoLStd-B, sans-serif;
	--tsukuBB: "FOT-筑紫B丸ゴシック Std B", TsukuBRdGothicStd-B, sans-serif;
	
	/* ストライプ */
	--stripeYellow: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><g fill="none" stroke="%23eab952" stroke-width="0.6"><line x1="5" y1="7" x2="13" y2="-1"/><line x1="2" y1="7" x2="10" y2="-1"/><line x1="-1" y1="7" x2="7" y2="-1"/><line x1="-4" y1="7" x2="4" y2="-1"/><line x1="-7" y1="7" x2="1" y2="-1"/></g></svg>');
}
@media (prefers-color-scheme: light) {
	:root {
		--white: #fafafd;
		--black: #373039;
		--lopan: #553968;
		/* mono */
		--gray7: #eeeff1;
		--gray6: #dadcde;
		--gray5: #c2c4ca;
		--gray3: #696975;
		--gray2: #52515c;
		--gray1: #46434c;
		/* color */
		--blue: #568dda;
		--vioret: #525abc;
		/* alpha */
		--gray7_a: rgba(240,241,243,.5);
		--blue_a: rgba(86,141,218,.8);
		--vioret_a: rgba(82,90,188,.8);
		/* stripe */
		--stripeGray: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><g fill="none" stroke="%23dadcde" stroke-width="0.6"><line x1="5" y1="7" x2="13" y2="-1"/><line x1="2" y1="7" x2="10" y2="-1"/><line x1="-1" y1="7" x2="7" y2="-1"/><line x1="-4" y1="7" x2="4" y2="-1"/><line x1="-7" y1="7" x2="1" y2="-1"/></g></svg>');
	}
}
@media (prefers-color-scheme: dark) {
	:root {
		--white: #373039;
		--black: #fafafd;
		--lopan: #9181cc;
		--dark-black: #252127;
		/* mono */
		--gray1: #eeeff1;
		--gray2: #dadcde;
		--gray3: #c2c4ca;
		--gray5: #696975;
		--gray6: #52515c;
		--gray7: #46434c;
		/* color */
		--blue: #7aadf6;
		--vioret: #9294e8;
		/* alpha */
		--gray7_a: rgba(70,67,76,.5);
		--blue_a: rgba(122,173,246,.8);
		--vioret_a: rgba(146,148,232,.8);
		/* stripe */
		--stripeGray: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><g fill="none" stroke="%2352515c" stroke-width="0.6"><line x1="5" y1="7" x2="13" y2="-1"/><line x1="2" y1="7" x2="10" y2="-1"/><line x1="-1" y1="7" x2="7" y2="-1"/><line x1="-4" y1="7" x2="4" y2="-1"/><line x1="-7" y1="7" x2="1" y2="-1"/></g></svg>');
	}
}
@font-face {
	font-family: "Ubuntu Condensed";
	src: local("UbuntuCondensed-Regular"),
		url("/prx/000/https/lopan.jp/assets/fonts/UbuntuCondensed-Regular.woff") format("woff"),
		url("/prx/000/https/lopan.jp/assets/fonts/UbuntuCondensed-Regular.ttf") format("opentype");
}

/**
 * Prefix について
 * c-: 使いまわせるコンポーネント (部品)
 * l-: ページレイアウト (z-index の基礎として)
 * u-: ユーティリティ (u-mt8/u-spacer etc. 便利スタイル)
 * p-: 固有のブロックスタイル (主に main/section に附帯)
 * js-: js で拾うための class (js-anc/js-inview etc.)
 * is-: 要素の状態を表す (is-active/is-anim etc. js で判定)
 * hyphen: コンポーネントに附属するバリエーション (-large/-sub/-last etc.)
 * no prefix: コンポーネント内の要素 (title/lead/text/photo etc.)
 * -------------------------------------------------- */

/**
 * Breakpoint について
 * common style (desktop/mobile 共通の style)
 * @media (min-width: 520px) {} mobile には適用したくない style
 * @media (min-width: 960px) {} desktop だけの style
 * @media (min-width: 1200px) {} wide desktop style
 * @media (max-width: 959px) {} desktop には適用したくない style
 * @media (max-width: 519px) {} mobile だけの style
 * @media (max-width: 360px) {} small mobile style
 * -------------------------------------------------- */

html {
	scroll-behavior: auto;
	-webkit-text-size-adjust: 100%;
}
body {
	overscroll-behavior: auto;
	color: var(--black);
	font-size: 1em;
	line-height: 2;
	font-family: sans-serif;
	font-weight: normal;
	letter-spacing: .02em;
	font-synthesis: none;
	text-align: center;
	background: var(--white) url(/prx/000/https/lopan.jp/assets/img/bg.webp) center / 200px fixed;
	/*animation: sandstorm 1s steps(8) infinite;
	will-change: animation;*/
}
@media (prefers-color-scheme: dark) {
	body {
		color: var(--gray2);
		background-image: url(/prx/000/https/lopan.jp/assets/img/bg_dark.webp);
	}
}
body.is-fixed {
	content-visibility: auto;
	position: fixed;
	width: 100%;
}
.ico {
	--size: 20px;
	width: var(--size);
	height: var(--size);
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ico.-fill {
	fill: currentcolor;
	stroke: none;
}
button .ico {
	pointer-events: none;
}

.l-footer { z-index: 3; }
.l-menu { z-index: 4; }
.l-loader { z-index: 5; }

@keyframes sandstorm {
	from { background-position: 123px 456px; }
	to { background-position: 456px 789px; }
}

a[aria-current="page"] {
	pointer-events: none !important;
}


/**
 * Header
 * ---------------------------------------- */
.l-header {
	position: static;
}
.header_logo {
	z-index: 1;
	position: fixed;
	top: 16px;
	left: 28px;
	width: 44px;
	height: 41px;
	color: var(--lopan);
	line-height: 1;
	pointer-events: none;
}
.header_logo .pan {
	width: 100%;
	height: 100%;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.header_menu {
	cursor: pointer;
	z-index: 1;
	position: fixed;
	top: 16px;
	right: 24px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1.4px solid var(--lopan);
	border-radius: 40px;
	color: var(--lopan);
	line-height: 1;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	pointer-events: none;
}
@media (prefers-color-scheme: dark) {
	.header_logo,
	.header_menu {
		color: var(--gray2);
	}
	.header_menu {
		border-color: var(--gray2);
	}
}
.header_menu .ico {
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	pointer-events: none;
}
@media (hover: hover) and (prefers-color-scheme: light) {
	.l-header .header_menu {
		transition: color .4s, background-color .4s;
	}
	.header_menu:hover ~ .l-header .header_menu {
		color: white;
		background: var(--lopan);
		transition-duration: .05s;
	}
}
@media (hover: hover) and (prefers-color-scheme: dark) {
	.l-header .header_menu::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		opacity: .2;
		transition: background .4s;
	}
	.header_menu:hover ~ .l-header .header_menu::before {
		background: white;
		transition-duration: .05s;
	}
}
@media (max-width: 519px) {
	.header_logo {
		left: 20px;
	}
	.header_menu {
		right: 20px;
	}
}
.l-header .header_logo,
.l-header .header_menu {
	z-index: 1;
}
.header_logo[aria-label],
.header_logo[title],
.header_menu[type] {
	z-index: 3;
	pointer-events: auto;
}
.header_menu[type] {
	outline-offset: 3px;
	border-color: #55396800;
}
.header_logo[aria-label] .pan,
.header_logo[title] .pan,
.header_menu[type] .ico {
	stroke: #55396800;
}


/**
 * Main block
 * ---------------------------------------- */
.l-main {
	position: static;
	max-width: 1048px;
	min-height: 60vh;
	margin: 0 auto;
	padding: 0 24px;
}
@media (max-width: 519px) {
	.l-main {
		padding: 0 16px;
	}
}


/**
 * Index
 * ---------------------------------------- */
.p-index {
	padding-top: 40px;
}
.p-series {
	position: relative;
	margin: 80px 0 40px;
}
.p-series > .c-title,
.p-series > .c-lead {
	padding: 0 100px;
}
.p-series > .c-title {
	position: relative;
	margin: 0 auto;
	font-size: 2rem;
}
.p-series > .c-lead {
	margin-top: 1em;
}
@media (max-width: 959px) {
	.p-series > .c-title,
	.p-series > .c-lead {
		padding: 0 40px;
	}
	.p-series > .c-title {
		font-size: 1.75rem;
	}
}
@media (max-width: 519px) {
	.p-series > .c-title,
	.p-series > .c-lead {
		padding: 0 24px;
	}
	.p-series > .c-title {
		font-size: 1.5rem;
	}
}
@media (max-width: 360px) {
	.p-series > .c-title {
		font-size: 1.375rem;
	}
}

/* 404 */
.p-404 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - 260px);
	padding-top: 120px;
}
.p-404 p {
	font-size: 1.125rem;
	line-height: 1.8;
	font-family: var(--tsukuAM);
	text-align: center;
}


/**
 * 記事一覧
 * ---------------------------------------- */
.c-index {
	z-index: 0;
	position: relative;
	margin-top: 40px;
	padding: 80px 100px;
	border-radius: 40px;
	background: white;
}
@media (prefers-color-scheme: dark) {
	.c-index {
		background: var(--dark-black);
	}
}
@media (max-width: 959px) {
	.c-index {
		padding: 80px 40px;
		border-radius: 24px;
	}
}
@media (max-width: 519px) {
	.c-index {
		padding: 64px 24px;
		border-radius: 16px;
	}
}

.c-index li:nth-child(n+2) {
	margin-top: 48px;
}
@media (min-width: 520px) {
	.c-index li {
		justify-content: space-between;
		align-items: center;
	}
}
@media (max-width: 519px) {
	.c-index li {
		flex-direction: column;
	}
	.c-index li:nth-child(n+2) {
		margin-top: 32px;
	}
}

/* テキスト */
.c-index .c-date time {
	display: inline-block;
}
.c-index .c-title {
	margin-top: .2em;
	font-size: 1.5rem;
}
.c-index .c-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: .8em;
	font-size: .875rem;
	font-feature-settings: "palt" 1;
}
.c-index .c-tags a {
	z-index: 2;
	position: relative;
	height: 24px;
}
@media (min-width: 520px) {
	.c-index .text {
		flex-basis: 50%;
	}
	.c-index .even .text,
	.c-index .even .c-title {
		text-align: right;
	}
	.c-index .odd .c-date .post {
		margin-right: 1em;
	}
	.c-index .even .c-date .update {
		margin-left: 1em;
	}
	.c-index .even .c-tags {
		justify-content: end;
	}
}
@media (max-width: 959px) {
	.c-index .c-title {
		font-size: 1.375rem;
	}
}
@media (max-width: 519px) {
	.c-index .text {
		margin-top: 16px;
		padding: 0 16px;
	}
	.c-index .c-title {
		font-size: 1.25rem;
	}
	.c-index .lead {
		font-size: .875rem;
		line-height: 1.8;
	}
	.c-index .c-date .post {
		margin-right: 1em;
	}
}

/* サムネイル */
.c-index .c-thumb {
	--r: 40px;
	height: 160px;
}
.c-index .c-thumb .effect::after {
	top: 25%;
	height: 300%;
}
@media (min-width: 520px) {
	.c-index .c-thumb {
		flex-basis: calc(50% - 32px);
	}
	.c-index li.odd .c-thumb {
		order: -1;
	}
}
@media (min-width: 960px) {
	.c-index .c-thumb {
		flex-basis: min(50% - 48px, 390px);
	}
}
@media (max-width: 519px) {
	.c-index .c-thumb {
		order: -1;
	}
}


/**
 * Footer
 * ---------------------------------------- */
.l-footer {
	padding: 80px 16px;
	text-align: center;
}
.pagetop {
	display: inline-block;
	padding: 24px;
	color: var(--gray4);
	line-height: 1;
}
.copyright {
	margin-top: 16px;
	color: var(--gray4);
	line-height: 1.2;
	font-family: "Ubuntu Condensed", sans-serif;
	letter-spacing: .05em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
.copyright small {
	display: inline-block;
	fill: currentcolor;
}


/**
 * Lopan Menu
 * ---------------------------------------- */
.l-menu,
.menu_overlay {
	position: fixed;
	inset: 0;
}
@supports (inset: 0) {
	.l-menu,
	.menu_overlay {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
.menu_overlay {
	background: rgba(54,47,56,.1);
}
.menu_container {
	position: fixed;
	top: 0;
	right: 0;
	width: calc(100% - 24px);
	max-width: 376px;
	min-height: calc(76px * 6 + 64px + 48px);
	padding: 60px 36px 48px 40px;
	border-radius: 0 0 0 40px;
	background: white;
}
@media (prefers-color-scheme: dark) {
	.menu_overlay {
		background: rgba(54,47,56,.2);
	}
	.menu_container {
		background: var(--dark-black);
	}
}
@media (max-width: 959px) {
	.menu_container {
		max-width: 360px;
		min-height: calc(76px * 6 + 64px + 40px);
		padding: 60px 28px 40px 32px;
		border-radius: 0 0 0 24px;
	}
}
@media (max-width: 519px) {
	.menu_container {
		max-width: 344px;
		min-height: calc(76px * 6 + 64px + 32px);
		padding: 60px 20px 32px 24px;
		border-radius: 0 0 0 16px;
	}
}

/* メニュー内のボタン */
:where(.l-menu) button {
	cursor: pointer;
	min-width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	color: var(--lopan);
	line-height: 1;
	background: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
@media (prefers-color-scheme: dark) {
	:where(.l-menu) button {
		color: var(--gray2);
	}
}
:where(.l-menu) button::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 40px;
	background: var(--gray7_a);
}
@supports (inset: 0) {
	:where(.l-menu) button::before {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
@media (hover: hover) {
	.menu_button.-close::before,
	.menu_pinlist .trash::before {
		transition: opacity .3s, transform .3s var(--easeOut);
	}
	.menu_button.-close:not(:hover)::before,
	.menu_pinlist .trash:not(:hover)::before {
		opacity: 0;
		transform: scale(.6);
	}
}

/* ピンボタン/閉じるボタン */
.menu_button {
	position: absolute;
	top: 16px;
}
.menu_button .ico {
	position: relative;
}
.menu_button.-close {
	right: 24px;
}
@media (max-width: 519px) {
	.menu_button.-close {
		right: 20px;
	}
}
.menu_button.-pin {
	left: 40px;
	color: white;
	font-family: var(--tsukuBB);
}
.menu_button.-pin.is-pined {
	color: var(--gray5);
}
.menu_button.-pin::before {
	background-color: var(--skyblue);
}
.menu_button.-pin.is-pined::before {
	background-color: var(--gray7_a);
}
.menu_button.-pin.is-popn {
	transition: color .4s .1s;
	animation: pinning .6s both;
	pointer-events: none;
}
.menu_button.-pin.is-popn::before {
	transition: background-color .4s .1s;
}
@keyframes pinning {
	from, to { transform: none; }
	20% { transform: scale(.8); }
	40% { transform: scale(1.2); }
	60% { transform: scale(.9); }
	80% { transform: scale(1.06); }
}
@media (max-width: 959px) {
	.menu_button.-pin {
		left: 32px;
	}
}
@media (max-width: 519px) {
	.menu_button.-pin {
		left: 24px;
	}
}

/* :::::: ピン一覧 :::::: */
.menu_pinlist {
	position: relative;
	margin-top: 16px;
	padding-left: 0;
}
.menu_pinlist li {
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 64px;
	margin-top: 12px;
}
.menu_pinlist li:not([class]) {
	border-radius: 16px;
	background: var(--gray7_a);
}
.menu_pinlist li:nth-child(7) {
	position: absolute;
	top: 100%;
	left: 0;
	opacity: 0;
	transform: scale(.4);
	pointer-events: none;
}
.menu_pinlist .c-thumb {
	--r: 16px;
	min-width: 64px;
	height: 64px;
}
.menu_pinlist .text {
	flex-grow: 1;
	margin: 0 1em;
	text-align: left;
}
.menu_pinlist .c-date {
	font-size: .875rem;
	white-space: nowrap;
}
.menu_pinlist .trash {
	z-index: 1;
	position: relative;
}
.menu_pinlist .trash .ico {
	position: relative;
}
@media (max-width: 360px) {
	.menu_pinlist .text {
		margin: 0 .3em 0 .7em;
	}
	.menu_pinlist .c-date {
		font-size: .75rem;
	}
}

/* ピン追加 */
.menu_pinlist li.is-added {
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0;
}
.menu_pinlist li.is-added .text,
.menu_pinlist li.is-added .c-thumb {
	animation: addedPin .6s var(--easeOut) both;
}
.menu_pinlist li.is-added .trash {
	animation: addedPinTrash .4s .2s cubic-bezier(.3,1.8,.7,1) both;
}
.menu_pinlist li.is-added ~ li {
	transform: translateY(calc(100% + 12px));
	transition: transform .3s var(--easeOut);
}
.menu_pinlist li.is-added ~ li:nth-child(7) {
	transform: translateY(calc(100% + 12px)) scale(.4);
	transition: opacity .3s, transform .3s var(--easeOut);
}
@keyframes addedPin {
	from { opacity: 0; transform: translateX(40px); }
	to { opacity: 1; transform: none; }
}
@keyframes addedPinTrash {
	from { opacity: 0; transform: scale(.6); }
	to { opacity: 1; transform: none; }
}

/* ピン削除 */
.menu_pinlist li.is-remove {
	animation: removePin .3s var(--easeOut) both;
}
.menu_pinlist li.is-remove ~ li {
	transform: translateY(calc(-100% - 12px));
	transition: transform .3s var(--easeOut);
}
.menu_pinlist li.is-remove ~ li:nth-child(7) {
	opacity: 1;
	transition: opacity .3s, transform .3s var(--easeOut);
}
@keyframes removePin {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: scale(.4); }
}

/* :::::: メニュー開閉 :::::: */
.l-menu:not(.is-active) {
	pointer-events: none;
}
.l-menu:not(.is-active) .menu_overlay {
	opacity: 0;
}
.l-menu:not(.is-active) .menu_pinlist li {
	opacity: 0;
	transform: translateX(40px);
}
.l-menu:not(.is-active) .menu_container {
	opacity: 0;
	transform: translateX(30%);
}
.l-menu:not(.is-active) .menu_button {
	opacity: 0;
	transform: scale(.6);
}
.l-menu .menu_overlay.is-anim {
	transition: opacity .6s;
}
.l-menu .menu_container.is-anim,
.l-menu .menu_pinlist.is-anim li,
.l-menu .menu_button.is-anim {
	transition: opacity .6s, transform .6s var(--easeOut);
}
.l-menu.is-active .menu_button.is-anim {
	transition-timing-function: ease, cubic-bezier(.3,1.8,.7,1);
}
.l-menu.is-active .menu_overlay.is-anim { transition-delay: 0s; }
.l-menu.is-active .menu_container.is-anim { transition-delay: .1s; }
.l-menu.is-active .menu_pinlist.is-anim li:nth-child(1) { transition-delay: .15s; }
.l-menu.is-active .menu_pinlist.is-anim li:nth-child(2) { transition-delay: .2s; }
.l-menu.is-active .menu_pinlist.is-anim li:nth-child(3) { transition-delay: .25s; }
.l-menu.is-active .menu_pinlist.is-anim li:nth-child(4) { transition-delay: .3s; }
.l-menu.is-active .menu_pinlist.is-anim li:nth-child(5) { transition-delay: .35s; }
.l-menu.is-active .menu_pinlist.is-anim li:nth-child(6) { transition-delay: .4s; }
.l-menu.is-active .menu_button.-close.is-anim { transition-delay: .5s; }
.l-menu.is-active .menu_button.-pin.is-anim { transition-delay: .6s; }
.l-menu:not(.is-active) .menu_container.is-anim,
.l-menu:not(.is-active) .menu_button.is-anim {
	transition-duration: .3s;
}
.l-menu:not(.is-active) .menu_pinlist.is-anim li {
	transition-delay: .4s;
	transition-duration: 0s;
}
.l-menu:not(.is-active) .menu_button.is-anim { transition-delay: 0s; }
.l-menu:not(.is-active) .menu_container.is-anim { transition-delay: .1s; }
.l-menu:not(.is-active) .menu_overlay.is-anim { transition-delay: .2s; }





/**
 * Component
 * ---------------------------------------- */
/* title */
.c-title {
	color: var(--lopan);
	line-height: 1.4;
	font-family: var(--tsukuBB);
	font-feature-settings: "palt" 1;
	text-align: left;
}
.c-title small {
	font-size: max(60%, .75rem);
}

/* lead */
.c-lead {
	line-height: 1.8;
	font-family: var(--tsukuAM);
	font-feature-settings: "palt" 1;
	text-align: left;
}

/* date */
.c-date {
	font-size: 1rem;
	line-height: 1.4;
	font-family: var(--monospace);
}
.c-date .ico {
	position: relative;
	top: -.1em;
	width: 1.2em;
	height: 1.2em;
	margin-right: .5em;
}
.c-date abbr {
	text-decoration: none;
}
.c-date span[aria-label] {
	font-size: inherit;
}
@media (max-width: 519px) {
	.c-date {
		font-size: .875rem;
	}
}
@media (max-width: 360px) {
	.c-date {
		font-size: .75rem;
	}
}

/* button */
.c-button {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	height: 48px;
	padding: 0 2em;
	border: 0;
	border-radius: 48px;
	color: white;
	background: var(--skyblue);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.c-button.-c {
	margin-inline: auto;
}
.c-button:empty {
	display: none;
}
@media (hover: hover) {
	.c-button {
		transition: background .3s;
	}
	.c-button:hover {
		background: var(--lopan);
		transition-duration: .05s;
	}
}

/* thumb */
.c-thumb {
	position: relative;
	overflow: hidden;
	border-radius: var(--r);
}
.is-safari .c-thumb {
	z-index: 0;
	/* --end: calc(100% - var(--r));
	-webkit-mask-image:
		radial-gradient(circle at var(--r) var(--r), black var(--r), transparent var(--r)),
		radial-gradient(circle at var(--end) var(--r), black var(--r), transparent var(--r)),
		radial-gradient(circle at var(--r) var(--end), black var(--r), transparent var(--r)),
		radial-gradient(circle at var(--end) var(--end), black var(--r), transparent var(--r)),
		linear-gradient(to top, transparent var(--r), black var(--r), black var(--end), transparent var(--end)),
		linear-gradient(to left, transparent var(--r), black var(--r), black var(--end), transparent var(--end)); */
}
.c-thumb img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
}
@media (hover: hover) {
	.c-thumb .effect,
	.c-thumb .effect::before,
	.c-thumb .effect::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.c-thumb .effect::before,
	.c-thumb .effect::after {
		content: "";
	}
	.c-thumb .effect::before {
		background: url(/prx/000/https/lopan.jp/assets/img/watercolor.webp) center / cover no-repeat;
		opacity: .68;
	}
	.c-thumb .effect::after {
		top: 25%;
		left: -50%;
		width: 500%;
		height: 140%;
		background: linear-gradient(to right,
			rgba(220,102,136,.8) 0, rgba(236,134,104,.8) 10.5%, rgba(134,198,140,.8) 21%,
			rgba(238,204,0,.8) 31.5%, rgba(220,102,136,.8) 50%, rgba(236,134,104,.8) 60.5%,
			rgba(134,198,140,.8) 71%, rgba(238,204,0,.8) 81.5%, rgba(220,102,136,.8) 100%);
		transform-origin: 0 0;
		transform: rotate(-30deg);
		animation: gradientLoop 20s infinite linear paused;
	}
	.js-hov:not(:hover) .c-thumb .effect {
		opacity: 0;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	.js-hov.is-anim .c-thumb .effect {
		transition: opacity 1s;
		will-change: opacity;
	}
	.js-hov.is-anim:hover .c-thumb .effect {
		transition-duration: .3s;
	}
	.js-hov:hover .c-thumb .effect::after,
	.js-hov.is-anim .c-thumb .effect::after {
		animation-play-state: running;
	}
	@keyframes gradientLoop {
		from { transform: rotate(-30deg); }
		to { transform: rotate(-30deg) translateX(-50%); }
	}
}
@media (hover: none) {
	.c-thumb .effect { display: none; }
}

/* 記事カセット */
.c-cassette {
	display: flex;
	position: relative;
}
.c-cassette .c-title a::after {
	content: "";
	z-index: 1;
	position: absolute;
	inset: 0;
}
@supports (inset: 0) {
	.c-cassette .link {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
.c-cassette .text {
	text-align: left;
	line-break: strict;
	-webkit-hyphens: auto;
	hyphens: auto;
	hanging-punctuation: first last allow-end;
}

/* タグ一覧 */
.c-tags .ico {
	position: relative;
	top: -.1em;
	margin-right: .5em;
}
.c-tags a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	min-width: 64px;
	height: 32px;
	padding: 0 1em;
	border: 1px solid currentcolor;
	border-radius: 40px;
	font-family: var(--tsukuAM);
	background: none;
}
@media (hover: hover) and (prefers-color-scheme: light) {
	.c-tags a {
		transition: color .4s, background .4s;
	}
	.c-tags a:hover {
		color: white;
		background: var(--lopan);
		transition-duration: .05s;
	}
}
@media (hover: hover) and (prefers-color-scheme: dark) {
	.c-tags a::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		opacity: .2;
		transition: background .3s;
	}
	.c-tags a:hover::before {
		background: currentcolor;
		transition-duration: .05s;
	}
}

/* シェア */
.c-share {
	display: inline-flex;
	justify-content: center;
	height: 40px;
	margin-top: 40px;
}
.c-share a {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	border: 1px solid var(--skyblue);
	color: white;
	background: var(--skyblue);
}
.c-share .tweet {
	min-width: 42px;
	padding-left: 4px;
	border-right: 0;
	border-radius: 40px 0 0 40px;
}
.c-share .no-tweet {
	min-width: 40px;
	padding-right: 2px;
	border-right: 0;
	border-radius: 40px;
}
.c-share .count {
	min-width: 40px;
	padding: 0 12px 0 8px;
	border-left: 0;
	border-radius: 0 40px 40px 0;
	color: var(--skyblue);
	font-size: .875rem;
	background: white;
}
.c-share a:empty {
	display: none;
}
.c-share .ico {
	margin: 0 -2px -1px 0;
	fill: currentcolor;
	stroke: none;
}


/**
 * Usability
 * -------------------------------------------------- */
/* アニメーション抑制 */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ダークモード */
@media (prefers-color-scheme: dark) {
	
}

/* PDF 出力 */
@media print {
	
}


/**
 * Utility
 * -------------------------------------------------- */
@media screen and (min-width: 960px) {
	.u-mb { display: none !important; }
}
@media screen and (max-width: 959px) {
	.u-dt { display: none !important; }
}
.u-svgparts,
.u-visuallyhidden {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	white-space: nowrap;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}
.p-article .u-breakingout {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}
.has-scrollbar .p-article .u-breakingout {
	margin-right: calc(50% - var(--viewWidth) / 2);
	margin-left: calc(50% - var(--viewWidth) / 2);
}
.p-article .u-breakingreturn {
	padding-right: calc(50vw - 50%);
	padding-left: calc(50vw - 50%);
}
.has-scrollbar .p-article .u-breakingreturn {
	padding-right: calc(var(--viewWidth) / 2 - 50%);
	padding-left: calc(var(--viewWidth) / 2 - 50%);
}
.u-idt {
	padding-left: 1em;
	text-indent: -1em;
}
.u-alignl { text-align: left; }
.u-alignc { text-align: center; }
.u-alignr { text-align: right; }
.u-m0 { margin-block: 0 !important; }
.u-mt0 { margin-top: 0 !important; }
.u-mt1 { margin-top: 8px !important; }
.u-mt2 { margin-top: 16px !important; }
.u-mt3 { margin-top: 24px !important; }
.u-mt4 { margin-top: 32px !important; }
.u-mt5 { margin-top: 40px !important; }
.u-mt6 { margin-top: 48px !important; }
.u-mt7 { margin-top: 56px !important; }
.u-mt8 { margin-top: 64px !important; }
.u-mt9 { margin-top: 72px !important; }
.u-mt10 { margin-top: 80px !important; }
.u-mt11 { margin-top: 88px !important; }
.u-mt12 { margin-top: 96px !important; }
.u-mt13 { margin-top: 104px !important; }
.u-mt14 { margin-top: 112px !important; }
.u-mt15 { margin-top: 120px !important; }
.u-mt16 { margin-top: 128px !important; }
.u-mt17 { margin-top: 136px !important; }
.u-mt18 { margin-top: 144px !important; }
.u-mt19 { margin-top: 152px !important; }
.u-mt20 { margin-top: 160px !important; }
.u-mb0 { margin-bottom: 0 !important; }
.u-mb1 { margin-bottom: 8px !important; }
.u-mb2 { margin-bottom: 16px !important; }
.u-mb3 { margin-bottom: 24px !important; }
.u-mb4 { margin-bottom: 32px !important; }
.u-mb5 { margin-bottom: 40px !important; }
.u-mb6 { margin-bottom: 48px !important; }
.u-mb7 { margin-bottom: 56px !important; }
.u-mb8 { margin-bottom: 64px !important; }
.u-mb9 { margin-bottom: 72px !important; }
.u-mb10 { margin-bottom: 80px !important; }
.u-mb11 { margin-bottom: 88px !important; }
.u-mb12 { margin-bottom: 96px !important; }
.u-mb13 { margin-bottom: 104px !important; }
.u-mb14 { margin-bottom: 112px !important; }
.u-mb15 { margin-bottom: 120px !important; }
.u-mb16 { margin-bottom: 128px !important; }
.u-mb17 { margin-bottom: 136px !important; }
.u-mb18 { margin-bottom: 144px !important; }
.u-mb19 { margin-bottom: 152px !important; }
.u-mb20 { margin-bottom: 160px !important; }


/**
 * JavaScript
 * -------------------------------------------------- */
.js-anc {
	cursor: pointer;
}

/* ObserveInview */
.js-inview:not([data-last]):not(.is-inview) {
	opacity: 0;
	transform: translateY(1em);
}
.js-inview.is-anim:not([data-last]) {
	transition: opacity 1s, transform 1s;
	will-change: opacity, transform;
}
.js-inview[data-last]:not(.is-inview) .item {
	opacity: 0;
	transform: translateX(-1em);
}
.js-inview.is-anim[data-last] .item {
	transition: opacity 1s, transform 1s;
	will-change: opacity, transform;
}
.js-inview.is-anim[data-last] .i2 { transition-delay: .1s; }
.js-inview.is-anim[data-last] .i3 { transition-delay: .2s; }
.js-inview.is-anim[data-last] .i4 { transition-delay: .3s; }
.js-inview.is-anim[data-last] .i5 { transition-delay: .4s; }

/* lazySrc */
.js-lazy {
	position: relative;
}
.js-lazy img {
	opacity: 0;
}
.js-lazy .cover {
	display: block;
	position: absolute;
	inset: 0;
}
@supports (inset: 0) {
	.js-lazy .cover {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
.js-lazy.is-loaded img {
	opacity: 1;
}
.js-lazy.is-loaded .cover {
	opacity: 0;
}
.js-lazy.is-anim img,
.js-lazy.is-anim .cover {
	transition: opacity 1s;
	will-change: opacity;
}
.js-lazy .cover .ico {
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	fill: none;
	stroke: var(--skyblue);
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.js-lazy .cover .ico {
		animation: loader 1.4s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	}
}

/* iframe for mobile */
html.is-touch .js-iframe {
	position: relative;
}
html.is-touch .js-iframe iframe {
	background: rgba(55,48,57,.41);
	background: #37303968;
}
.js-iframe .dummy {
	display: block;
	position: absolute;
	inset: 0;
	border-radius: 8px;
}
.js-iframe .dummy {
	cursor: pointer;
	padding: 0;
	border: 0;
	width: 100%;
	max-width: 1200px;
	height: 100%;
	background: transparent;
	/* background: var(--white) url(/prx/000/https/lopan.jp/assets/img/bg.webp) center / 200px; */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.js-iframe.u-breakingout .dummy {
	width: calc(100vw - 96px);
	margin: 0 auto;
}
@media (prefers-color-scheme: dark) {
	html.is-touch .js-iframe iframe {
		background: rgba(250,250,253,.41);
		background: #fafafd68;
	}
}
@supports (inset: 0) {
	.js-iframe .dummy {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
@media (max-width: 519px) {
	.js-iframe .dummy {
		max-width: calc(100vw - 64px);
		margin: 0 auto;
	}
	.js-iframe.u-breakingout .dummy {
		width: calc(100vw - 64px);
	}
}
.js-iframe .menu {
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 45px;
	border-bottom: 1px solid var(--gray4);
	border-radius: 7px 7px 0 0;
	background: rgba(55,48,57,.8);
}
@media (prefers-color-scheme: dark) {
	.js-iframe .menu {
		border-color: var(--gray6);
	}
}
.js-iframe .menu .btn {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 0 1.2em;
	color: #eeeff1;
	font-size: .875rem;
	font-family: "Ubuntu Condensed", monospace;
	opacity: .39;
}
.js-iframe .menu .btn:not(:last-child) {
	border-right: 1px solid var(--gray4);
}
.js-iframe .menu .btn:last-child {
	min-width: 4em;
	margin-left: auto;
}
.js-iframe .menu .btn .ico {
	width: 14px;
	height: 14px;
}
.js-iframe .msg {
	z-index: 1;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1em;
	color: white;
	font-size: .875rem;
	text-align: center;
}
.js-iframe figcaption + .dummy .msg {
	top: calc(50% - .5em);
}

/* copy */
.js-copy {
	cursor: pointer;
	position: relative;
}
.js-copy.is-copyed {
	pointer-events: none;
}
.js-copy.is-copyed .msg {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: calc(100% - 1em);
	right: 8px;
	height: 2.4em;
	padding: 0 1em;
	border-radius: 5px;
	color: white;
	font-size: .625rem;
	white-space: nowrap;
	opacity: 0;
	background: rgba(31,40,131,.9);
}
.js-copy.is-copyed .msg {
	animation: copyed 2s;
}
@keyframes copyed {
	from, to { opacity: 0; }
	10%, 80% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.js-copy.is-copyed .msg {
		animation-timing-function: steps(2);
	}
}

/* speach */
.js-speach {
	cursor: default;
}


/**
 * loader (panchandash)
 * ---------------------------------------- */
.l-loader {
	--s: .8s;
	--d: .1s;
	position: fixed;
	color: var(--black);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.l-loader,
.l-loader::before,
.l-loader::after {
	inset: 0;
	width: 100%;
	height: 100%;
}
.l-loader::before,
.l-loader::after {
	content: "";
	position: absolute;
}
.l-loader::before {
	background: var(--black);
}
.l-loader::after {
	background: var(--white);
}
.l-loader:not(.is-loading) {
	pointer-events: none;
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.l-loader:not(.is-loading).is-anim {
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
.l-loader:not(.is-loading)::after {
	transform: translateY(-100%);
}
.l-loader:not(.is-loading).is-anim::after {
	transform: translateY(100%);
}
.l-loader.is-anim {
	transition: clip-path  var(--easeInOut);
	transition-duration: calc(var(--s) - var(--d));
}
.l-loader.is-anim:not(.is-loading) {
	transition-delay: var(--d);
}
.l-loader.is-anim.is-loading {
	transition-duration: var(--s);
}
.l-loader.is-anim::after {
	transition: transform var(--easeInOut);
	transition-duration: var(--s);
}
.l-loader.is-anim.is-loading::after {
	transition-duration: calc(var(--s) - var(--d));
	transition-delay: var(--d);
}
.l-loader .pan {
	display: block;
	overflow: hidden;
	z-index: 1;
	position: absolute;
	top: calc(50% - 42px);
	left: calc(50% - 50px);
	width: 100px;
	height: 83px;
}
.l-loader .pan .dash {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	fill: currentcolor;
	animation: panchandash .64s steps(16) infinite;
}
@keyframes panchandash {
	from { transform: translateY(0); }
	to { transform: translateY(calc(-100% + 83px)); }
}


/**
 * Osano
 * ---------------------------------------- */
.osano-cm-window {
	color: var(--black);
	font-size: 1rem;
	font-family: var(--tsukuAM);
	line-height: 1.6;
}
.osano-cm-info {
	box-shadow: 0 0 4px 0 #0001;
}
.osano-cm-info-dialog {
	background: rgba(54,47,56,.1);
}
.osano-cm-description {
	margin: 0;
	font-family: var(--tsukuAM);
}
.osano-cm-label,
.osano-cm-toggle,
.osano-cm-info-dialog-header {
	font-family: var(--tsukuAB);
	line-height: 1.2;
}
.osano-cm-header,
.osano-cm-info-dialog-header {
	background: white;
}
.osano-cm-list {
	margin-top: 1.5em;
}
.osano-cm-list-item__description {
	margin-top: 1em;
}
.osano-cm-cookie-disclosure {
	align-items: center;
	row-gap: .25em;
	margin: 0;
}
.osano-cm-cookie-disclosure__title,
.osano-cm-cookie-disclosure__description {
	margin: 0;
}
.osano-cm-dialog {
	align-items: end;
	gap: 1em 1.5em;
	max-width: 1200px;
	margin-inline: auto;
	padding: 2em;
	line-height: inherit;
	background: none;
	border-image: linear-gradient(#fafafdcc, #fafafdcc) 0 fill / 0 / 0 50vw;
	backdrop-filter: blur(4px);
}
.osano-cm-close {
	border: 0;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.osano-cm-close:hover,
.osano-cm-close:focus,
.osano-cm-close:focus:hover {
	stroke: var(--lopan);
	background: none;
}
.osano-cm-close svg {
	overflow: visible;
}
.osano-cm-content {
	line-break: strict;
	overflow-wrap: break-word;
	hyphens: auto;
	hanging-punctuation: last allow-end;
}
.osano-cm-dialog--type_bar .osano-cm-dialog__content {
	margin: 0;
}
.osano-cm-message {
	padding: 0;
}
.osano-cm-link {
	color: var(--lopan);
	text-decoration: none;
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
.osano-cm-dialog--type_bar .osano-cm-dialog__buttons {
	justify-content: center;
	min-width: 12em;
	margin: 0;
}
.osano-cm-dialog--type_bar .osano-cm-button {
	flex: auto;
	width: auto;
	margin: 0;
	padding: 1em;
	border: 0;
}
.u-preload-string {
	display: none;
	font-family: "FOT-筑紫A丸ゴシック Std M", TsukuARdGothicStd-M, "FOT-筑紫A丸ゴシック Std B", TsukuARdGothicStd-B, sans-serif;
}
@media (hover) {
	.osano-cm-link {
		transition: color .4s, background-size .4s cubic-bezier(.3,1,.7,1);
	}
	.osano-cm-link:hover,
	.osano-cm-toggle:hover {
		color: var(--skyblue);
	}
	.osano-cm-link:hover {
		background-position: right bottom;
		background-size: 0 1px;
		transition-duration: .2s;
	}
}


/**
 * FONTPLUS ロード要素
 * ---------------------------------------- */
[id^="_cmp_elm_"] {
	position: absolute;
	overflow: hidden;
	width: 100%;
	top: 0 !important;
	left: 0 !important;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}


/**
 * Google AdSense
 * ---------------------------------------- */
.l-ads {
	overflow: hidden;
	width: fit-content;
	max-width: calc(100% - 48px);
	height: 60px;
	margin: 200px auto 0;
}
.adsbygoogle {
	width: 468px;
	max-width: 100%;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
@media (max-width: 767px) {
	.adsbygoogle {
		width: 234px;
	}
}