@charset "UTF-8";
/* ストーリースライダー：トップ・一覧共通 */
.js-stories-swiper .swiper-slide > .stories-coming-soon {
	display:grid;
	place-items:center;
	aspect-ratio:16 / 9;
	min-height:280px;
	border-radius:8px;
	background:var(--color-gray-200);
	color:var(--color-gray-400);
	font-family: var(--font-display);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-heading);
	letter-spacing:.08em;
}
/*　スライダー　*/
.stories-slider {
	width:calc(100% + (50vw - 50%) * 2);
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
	overflow:hidden;
	padding-top:24px;
}
.js-stories-swiper {
	width:100%;
	overflow:hidden;
}
.js-stories-swiper .swiper-wrapper {
	box-sizing:border-box;
	display:flex;
}
.js-stories-swiper .swiper-slide {
	width:calc(100% - 40px);
	max-width:720px;
	min-width:0;
	box-sizing:border-box;
	overflow:hidden;
	height:auto;
	flex-shrink:0;
	margin:0;
}
.js-stories-swiper .swiper-slide > .stories-feature {
	width:100%;
	box-sizing:border-box;
}
.stories-feature {
	--feature-marker: rgba(9, 111, 200, .8);
	--feature-title-color: #fff;
	position:relative;
	display:block;
	aspect-ratio:16 / 9;
	min-height:280px;
	overflow:hidden;
	border-radius:8px;
	background:#f0f2f4;
	color:#fff;
	text-decoration:none;
	isolation:isolate;
}
.stories-feature__image {
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	height:100%;
	box-sizing:border-box;
	object-fit:cover;
}
.stories-feature::before,
.stories-feature::after {
	content:"";
	position:absolute;
	z-index:1;
	pointer-events:none;
}
.stories-feature__number {
	position:absolute;
	z-index:2;
	top:12px;
	left:12px;
	padding:8px 10px;
	background:#fff;
	border:1px solid #000;
	text-align:center;
	font-family: var(--font-display);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-display);
	letter-spacing:.05em;
	color:var(--color-blue);
}
.stories-feature__series {
	display:block;
	color:#000;
	margin-top:6px;
	padding-top:6px;
	border-top:1px solid var(--color-blue);
	font-family: var(--font-body);
	font-size: .65rem;
	font-weight: var(--font-weight-heading);
	line-height:1.5;
	letter-spacing:.03em;
}
.stories-feature__number::after,
.stories-feature__copy::after {
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	clip-path:polygon(100% 0, 100% 100%, 0 100%);
	pointer-events:none;
}
.stories-feature__number::after {
	width:12px;
	height:12px;
	background:#000;
}
.stories-feature__copy::after {
	width:24px;
	height:24px;
	background:#00a6d9;
}
.stories-feature__copy {
	position:absolute;
	z-index:2;
	left:0;
	right:auto;
	width:fit-content;
	max-width:85%;
	bottom:0;
}
.stories-feature__title {
	display:block;
	padding:0 0 20px;
	box-sizing:border-box;
	letter-spacing:.02em;
	color:var(--feature-title-color);

}
.stories-feature__marker {
	padding:.12em .35em;
	background:var(--feature-marker);
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}
.stories-feature__tags {
	position:absolute;
	z-index:2;
	top:14px;
	left:max(120px, 32%);
	right:100px;
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin:0;
	padding:0;
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-semibold);
	line-height:1.5;
	letter-spacing:0;
}
.stories-feature__tags > span {
	padding:3px 8px;
	background:rgba(255,255,255,.92);
	color:var(--color-gray-800);
}
/* 試作・挑戦：右下から曲線を差し込み、写真の中央を見せる */
.stories-feature--trial::before,
.stories-feature--product::before {
	inset:auto;
	top:0;
	left:0;
	width:30%;
	height:42%;
	background:radial-gradient(ellipse 100% 100% at 100% 100%, transparent 0 99.5%, #a6d8e8 100%);
	clip-path:none;
}
.stories-feature--trial::after {
	top:auto;
	right:0;
	bottom:0;
	left:auto;
	width:48%;
	height:52%;
	border:0;
	border-radius:0;
	background:radial-gradient(ellipse 100% 100% at 0 0, transparent 0 99.5%, #a6d8e8 100%);
}
/* 技術・工程：方眼と黒ベタの文字ボックス */
.stories-feature--technology {
	--feature-marker: transparent;
	--feature-title-color: #fff;
	background:#eaf1f6;
}
.stories-feature--technology::before {
	inset:auto;
	left:0;
	bottom:0;
	width:45%;
	height:24px;
	background:repeating-linear-gradient(45deg, transparent 0 11px, rgba(9, 111, 200, .6) 11px 12px), repeating-linear-gradient(135deg, transparent 0 11px, rgba(9, 111, 200, .6) 11px 12px);
	clip-path:none;
}
.stories-feature--technology::after {
	content:none;
}
.stories-feature__stripes {
	position:absolute;
	z-index:2;
	top:0;
	right:0;
	width:120px;
	height:120px;
	border:0;
	border-radius:0;
	background:repeating-linear-gradient(45deg, transparent 0 6px, #fff 6px 7px);
	clip-path:polygon(0 0, 100% 0, 100% 100%);
	filter:none;
	pointer-events:none;
}
.stories-feature__stripes--bottom {
	top:auto;
	bottom:0;
	width:72px;
	height:72px;
	background:repeating-linear-gradient(-45deg, transparent 0 6px, #00a6d9 6px 7px);
	clip-path:polygon(100% 0, 100% 100%, 0 100%);
	filter:none;
}
.stories-feature--technology .stories-feature__copy {
	bottom:24px;
	max-width:74%;
}
.stories-feature--technology .stories-feature__title {
	padding:20px 24px;
	background:#191919;

}
.stories-feature--technology .stories-feature__marker,
.stories-feature--product .stories-feature__marker {
	padding:0;
	background:none;
}
/* 製品紹介：右端から下端にだけ水色の楕円の外側を見せる */
.stories-feature--product {
	--feature-marker: transparent;
	--feature-title-color: #193b55;
	background:#f0f5ea;
}
.stories-feature--product::after {
	inset:0;
	width:auto;
	height:auto;
	border:0;
	border-radius:0;
	background:radial-gradient(ellipse 110% 125% at 0 0, transparent 0 99.5%, #a6d8e8 100%);
}
.stories-feature--product .stories-feature__copy {
	bottom:24px;
	max-width:78%;
}
.stories-feature--product .stories-feature__title {
	padding:18px 24px;
	background:rgba(255,255,255,.88);

}
.stories-feature:focus-visible {
	outline:3px solid var(--color-blue);
	outline-offset:-3px;
}
.js-stories-swiper .swiper-slide-active {
	transform:scale(1);
	opacity:1;
}
.js-stories-swiper .swiper-slide-prev,
.js-stories-swiper .swiper-slide-next {
	opacity:.6;
}


@media screen and (max-width:640px) {
	.stories-feature__tags {
		top:.75rem;
		left:max(8rem, 32%);
		right:.75rem;
		gap:4px;
		font-size: .6rem;
	}

	
}


/**
* Stories CSS
* File: assets/css/stories.css
* Description: カスタム投稿「stories」専用スタイルシート
*/

/* =====================================================
□ 共通（PC・スマホ共通）
===================================================== */

/*  stories */
.stories-tag-cloud {
	margin:50px 0;
	padding:40px;
	background: var(--color-gray-100);
	border-radius:8px;
}
.stories-tag-cloud.taxonomy-back-link {
	margin:20px 0;
	padding:10px;
	background:none;
	border-radius:0;
}

/* 記事全体：タイトルと本文を囲む */
body.single-stories {
	background: linear-gradient(2deg, #E5EAF0 15.13%, #ECF0F3 54.34%, #F9F9F9 70.26%, #E5EAF0 88.37%);
}

.single-stories .inside-article {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 88px 48px 48px;
	box-sizing: border-box;
	border: 1px solid var(--color-gray-200);
	border-radius: 12px;
	background-color: #fff;
}

/* タイトル・本文・SNSの左右位置を揃える */
.single-stories .inside-article > .entry-header {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	max-width: 880px;
	margin: 0 auto 32px;
	padding-bottom: 0;
}

.single-stories .inside-article > .sns-share {
	max-width: 880px;
	margin: 64px auto 0;
}

/* 記事本文 */
.single-stories .entry-header > .stories-feature__number {
	position:relative;
	display:inline-block;
	top:auto;
	left:auto;
	margin-bottom:3rem;
}
.single-stories .entry-header > .stories-labels {
	order:2;
	align-self:stretch;
	margin:.25rem 0 0;
	padding-top:1.5rem;
	border-top:.0625rem solid #000;
}
.single-stories .entry-header > .entry-title {
	order:1;
	margin:0;

}
.single-stories .entry-header > .stories-meta {
	position:absolute;
	top:0;
	right:0;
	margin:0;
}

.single-stories .entry-content {
	max-width: 880px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;

}

.single-stories .entry-content p {
	margin-top: 0;
	margin-bottom: 26px;

}

.single-stories .entry-content > :last-child {
	margin-bottom: 0;
}

.single-stories .entry-content :is(h2, h3, h4, h5, h6) {
	margin-top: 44px;
	margin-bottom: 18px;

}

/* 本文内の写真：全幅ブロックも本文幅に収める */
.single-stories .entry-content .wp-block-image {
	width: auto;
	max-width: 100%;
	margin: 28px 0;
}

.single-stories .entry-content img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 380px;
	margin-left: auto;
	margin-right: auto;
}

body {
	overflow-x:hidden;
}

/*　フル幅ヘッダー　*/
.stories-header-full {
	width:calc(100% + (50vw - 50%) * 2);
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}

/*　メタ情報　*/
.entry-header {
	position:relative;
	padding-bottom:3%;
}

.stories-number {
	position:absolute;
	top:0;
	left:0;
	font-family: var(--font-display);
	font-weight: var(--font-weight-display);
	font-size: var(--font-size-body);
	color: var(--color-blue);
	text-transform:uppercase;
	letter-spacing:.05em;
	opacity:.7;
	pointer-events:none;
	z-index:10;
}

.stories-meta {
	display:flex;
	justify-content:end;
	margin:10px;
}

.stories-labels {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-top:2%;
}

.entry-header .label {
	display:inline-block;
	padding:.125rem 1rem;
	font-size: var(--font-size-small);
	line-height:1.5;
	text-decoration:none;
	background:transparent;
	color: var(--color-gray-500);
	border: 1px solid var(--color-gray-200);
	transition:color .25s ease,border-color .25s ease;
}
.entry-header .label::before {
	content:"#";
	margin-right:4px;
	opacity:.6;
}
.entry-header .label:hover {
	color: var(--color-blue);
	border-color: var(--color-blue);
	background:#fff;
}
.stories-meta time {
	font-family: var(--font-display);
	font-size: var(--font-size-small);
	color: var(--color-gray-400);
}
/*　ヘッダー　*/
.stories-header {
	width:100%;
	max-width:1000px;
	margin:0 auto;
}

/*　カード　*/
.stories-card {
	display:block;
	text-decoration:none;
	color:inherit;
	position:relative;
	width:31%;
	margin:1%;
	background:#fff;
	border-radius:.5rem;
	container-type:inline-size;
	overflow:hidden;
}
.stories-card .stories-feature {
	min-height:0;
	border-radius:0;
}
.stories-card .stories-feature__stripes {
	width:18cqw;
	height:18cqw;
}
.stories-card .stories-feature__stripes--bottom {
	width:12cqw;
	height:12cqw;
}
.stories-card .entry-header {
	padding:1rem;
}
.stories-card .stories-number {
	top:1rem;
	left:1rem;
	font-size: var(--font-size-lead);
}
.stories-card .stories-meta {
	margin:0 0 .75rem;
}
.stories-card .stories-meta time {
	font-size: var(--font-size-small);
}
.stories-card .entry-title {
	margin:0;

}
.stories-card .stories-labels {
	margin-top:.75rem;
	gap:.5rem;
}
.stories-card .label {
	font-size: clamp(.8125rem, 3cqw, .875rem);
}
.stories-archive {
	width:100%;
	display:flex;
	flex-wrap:wrap;
}
.stories-thumb {
	width:100%;
	aspect-ratio:16 / 9;
	overflow:hidden;
}
.stories-thumb img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}
.stories-archive .stories-card:hover img {
	transform:scale(1.05)!important;
}
.stories-title {
	margin-top:12px;

}

/* アーカイブ */

/* サムネイル */
.post-thumbnail {
	overflow:hidden;
}
.post-thumbnail img {
	width:100%;
	height:auto;
	display:block;
	object-fit:cover;
}

/* ストーリーの未公開枠：一覧・スライダー */
.stories-card.stories-coming-soon,
.swiper-slide > .stories-coming-soon {
	display:grid;
	border-radius:.5rem .5rem 0 0;
	place-items:center;
	min-height:220px;
	background:var(--color-gray-200);
	color:var(--color-gray-400);
	font-family: var(--font-display);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-heading);
	letter-spacing:.08em;
}

.stories-card.stories-coming-soon {
	aspect-ratio:3 / 2;
}

.swiper-slide > .stories-coming-soon {
	height:100%;
}

/* =====================================================
□ PC（641px以上）
===================================================== */

@media screen and (min-width:641px) {

	#content {
		display:block;
		width:100%;
	}

	#storieshead {
		width:100%;
		padding:0!important;
	}

	#primary {
		width:100%;
	}

	h1.stories-title {
		text-align:center;
		color: var(--color-gray-900);
	

}

	h1.stories-title::after {
		content:'';
		display:block;
		width:130px;
		height:1px;
		background: var(--color-gray-200);
		margin:40px auto 48px;
	}
}

/* =====================================================
□ スマホ（640px以下）
===================================================== */
@media screen and (max-width: 640px) {
	.single-stories .inside-article {
		padding: 88px var(--content-gutter) 32px;
		border-radius: 12px;
	}

	

	.stories-tag-cloud {
		padding:30px 20px;
		margin:30px 0;
	}


	.stories-header-full {
		width:100%;
		margin-left:0;
		margin-right:0;
	}

	.stories-header h1,
	h1.stories-title {
		padding:0;
	

}

	#storieshead > .stories-header {
		box-sizing:border-box;
		padding:0 var(--content-gutter);
	}

	.stories-description {
		padding-bottom:0;
	
}

	.stories-card {
		width:90%;
		margin:5% auto;
	}
}

/* =====================================================
□ 小さいスマホ（480px以下）
===================================================== */
@media screen and (max-width:480px) {
	.stories-tag-cloud {
		padding:20px 15px;
	}
}