@charset "utf-8";

/* About専用：テンプレートと固定ページ本文の見え方を整える。 */

.cr-about{
	--ink: var(--cycride-ink);
	--ink2: var(--cycride-ink);
	--gray: var(--cycride-muted);
	--light: var(--soft);
	--hair: var(--cycride-line);
	--blue: var(--cycride-brand);
	--green: #88a938;
	--orange: #ef872c;
	--coral: #e95e5b;
	--font: -apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,"Noto Sans JP",sans-serif;
}

.cr-about *{
	box-sizing: border-box;
}

.cr-about{
	margin: 0;
	font-family: var(--font);
	color: var(--ink2);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
}

.cr-about a{
	color: inherit;
	text-decoration: none;
}

.cr-about button{
	font: inherit;
	cursor: pointer;
}

.cr-about a:focus-visible,.cr-about button:focus-visible{
	outline: 2px solid var(--blue);
	outline-offset: 4px;
}

.cr-about img{
	max-width: 100%;
	display: block;
}

.cr-about .preview-label{
	background: var(--ink);
	color: #b7ced5;
	font-size: 10px;
	letter-spacing: .07em;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 7px max(23px,calc((100vw - 1450px)/2));
	min-height: 28px;
}

.cr-about .preview-label strong{
	color: white;
	font-weight: 700;
}

.cr-about .site-head{
	height: 93px;
	background: var(--paper);
	border-bottom: 1px solid #ebeeee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 max(30px,calc((100vw - 1450px)/2));
}

.cr-about .logo{
	width: 215px;
	height: auto;
}

.cr-about .nav{
	display: flex;
	gap: 39px;
	align-items: center;
	font-size: 12px;
	font-weight: 650;
	letter-spacing: .05em;
	color: var(--ink);
}

.cr-about .nav a.active,.cr-about .nav a:hover{
	color: var(--blue);
}

.cr-about .nav a.active{
	border-bottom: 2px solid var(--blue);
	padding: 10px 0 8px;
}


.cr-about .hero{
	position: relative;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	height: clamp(440px,49vw,690px);
	background: #5b8b90;
}

.cr-about .hero img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 40%;
	filter: saturate(.84);
}

.cr-about .hero:after{
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,rgba(2,30,41,.72) 0%,rgba(3,30,41,.37) 43%,rgba(3,30,41,.02) 86%),linear-gradient(0deg,rgba(2,31,41,.25),transparent 65%);
	pointer-events: none;
}

.cr-about .hero-txt{
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px,6.3vw,100px);
	color: #fff;
}

.cr-about .hero-overline{
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .19em;
	margin-bottom: 32px;
	display: flex;
	align-items: center;
	gap: 11px;
}

.cr-about .hero-overline:before{
	content: '';
	width: 27px;
	height: 1px;
	background: var(--paper);
}

.cr-about .hero-heading{
	font-family: Arial,Helvetica,sans-serif;
	font-size: clamp(36px,5.65vw,91px);
	font-weight: 800;
	letter-spacing: -.063em;
	line-height: 1.06;
	max-width: 1220px;
	margin: 0;
}

.cr-about .hero-ja{
	margin-top: 29px;
	font-size: clamp(15px,1.4vw,18px);
	font-weight: 600;
	letter-spacing: .12em;
}

.cr-about .hero-mark{
	position: absolute;
	bottom: 24px;
	right: 38px;
	color: #fff;
	font-size: 11px;
	letter-spacing: .17em;
	z-index: 2;
}

.cr-about .main-wrap{
	max-width: 1400px;
	margin: auto;
	padding: 0 44px;
}

.cr-about .story-intro{
	padding: 108px 0 12px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 16px;
	border-bottom: 1px solid var(--hair);
}

.cr-about .story-intro h2{
	font-size: clamp(27px,3vw,46px);
	line-height: 1.35;
	letter-spacing: -.045em;
	margin: 0 0 27px;
	color: var(--ink);
	font-weight: 740;
}

.cr-about .story-intro .micro{
	font-size: 11px;
	letter-spacing: .16em;
	color: var(--muted);
	font-weight: 750;
	margin-bottom: 30px;
}

.cr-about .chapter{
	display: grid;
	grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
	align-items: center;
	column-gap: clamp(34px,5.2vw,100px);
	border-bottom: 1px solid var(--hair);
	padding: clamp(52px,6.7vw,114px) 0;
}

.cr-about .chapter-2,.cr-about .chapter-4{
	grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr);
}

.cr-about .chapter-2 .chapter-photo,.cr-about .chapter-4 .chapter-photo{
	grid-column: 2;
	grid-row: 1;
}

.cr-about .chapter-2 .chapter-body,.cr-about .chapter-4 .chapter-body{
	grid-column: 1;
	grid-row: 1;
}

.cr-about .chapter-photo figure{
	padding: 0;
	margin: 0;
}

.cr-about .chapter-photo img{
	width: 100%;
	height: clamp(245px,28vw,450px);
	object-fit: cover;
	filter: saturate(.83);
	border-radius: 0;
	transition: filter .4s,transform .8s;
}

.cr-about .chapter-photo figure{
	overflow: hidden;
}

.cr-about .chapter-photo img:hover{
	filter: saturate(1.0);
	transform: scale(1.025);
}

.cr-about .chapter-photo figcaption{
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: Arial,sans-serif;
	margin-top: 12px;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: .13em;
}

.cr-about .chapter-top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 25px;
}

.cr-about .chapter-no{
	font-family: Arial,sans-serif;
	color: var(--blue);
	letter-spacing: .02em;
	font-weight: 850;
	font-size: 20px;
}

.cr-about .chapter-no em{
	color: var(--muted);
	font-size: 11px;
	font-weight: 450;
	font-style: normal;
	margin-left: 6px;
}

.cr-about .chapter-category{
	color: var(--muted);
	font-family: Arial,sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
}

.cr-about .chapter h2{
	font-size: clamp(22px,2.3vw,32px);
	line-height: 1.55;
	letter-spacing: -.05em;
	font-weight: 740;
	color: var(--ink);
	margin: 0 0 24px;
}

.cr-about .chapter-prose p{
	font-size: 15px;
	line-height: 2;
	letter-spacing: .015em;
	color: var(--ink);
	margin: 0 0 1.55em;
}

.cr-about .chapter-prose p:last-child{
	margin-bottom: 0;
}

.cr-about .chapter-3{
	grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
}

.cr-about .chapter-3 .chapter-photo img{
	height: clamp(290px,31vw,475px);
}

.cr-about .feature-area{
	max-width: 1400px;
	margin: 0 auto;
	padding: 105px 44px 110px;
}

.cr-about .feature-kicker{
	font-family: Arial,sans-serif;
	font-size: 11px;
	letter-spacing: .17em;
	color: var(--blue);
	font-weight: 800;
	margin-bottom: 22px;
}

.cr-about .feature-container{
	display: grid;
	grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
	gap: clamp(36px,5.5vw,85px);
	align-items: center;
}

.cr-about .feature h2{
	font-size: clamp(26px,2.8vw,41px);
	color: var(--ink);
	line-height: 1.45;
	letter-spacing: -.052em;
	font-weight: 750;
	margin: 0 0 22px;
}

.cr-about .feature .desc{
	color: var(--muted);
	font-size: 14px;
	line-height: 2.1;
	margin: 0 0 28px;
	max-width: 470px;
}

.cr-about .feature-cta{
	display: inline-flex;
	gap: 26px;
	align-items: center;
	justify-content: space-between;
	background: #063e53;
	color: #fff;
	padding: 17px 22px;
	font-size: 12px;
	font-weight: 740;
	letter-spacing: .025em;
	transition: background .2s;
}

.cr-about .feature-cta:hover{
	background: #087ea1;
}

.cr-about .feature-cta span{
	font-size: 19px;
}

.cr-about .media-wrap{
	min-width: 0;
}

.cr-about .media-over{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 10px;
	font-weight: 730;
	letter-spacing: .12em;
	color: var(--muted);
}

.cr-about .media-over a{
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}

.cr-about .media-card{
	background: var(--paper);
	border: 1px solid #e2e9eb;
	transition: transform .65s ease,box-shadow .65s ease;
	box-shadow: 0 10px 34px rgba(0,38,51,.07);
	will-change: transform;
}

.cr-about .media-card:hover{
	transform: translateY(-5px);
	box-shadow: 0 18px 42px rgba(0,38,51,.13);
}

.cr-about .tab-strip{
	display: flex;
	justify-content: center;
	gap: 28px;
	border-bottom: 1px solid #e1e8e9;
}

.cr-about .media-tab{
	border: 0;
	border-bottom: 3px solid transparent;
	color: var(--muted);
	background: var(--paper);
	font-size: 13px;
	font-weight: 700;
	min-width: 75px;
	padding: 18px 16px 15px;
	margin-bottom: -1px;
	cursor: pointer;
}

.cr-about .media-tab[aria-selected=true]{
	color: #007d9f;
	border-bottom-color: #0084ab;
}

.cr-about .media-stage{
	aspect-ratio: 1.73;
	position: relative;
	background: #d2e6e7;
	overflow: hidden;
}

.cr-about .media-panel{
	position: absolute;
	inset: 0;
}

.cr-about .media-panel[hidden]{
	display: none;
}

.cr-about .media-panel .map-pic{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr-about .media-panel .video-poster{
	position: relative;
	height: 100%;
	width: 100%;
	display: grid;
	place-items: center;
	background: linear-gradient(125deg,#1d5261,#06384b);
	color: white;
	overflow: hidden;
}

.cr-about .video-poster img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.74) saturate(.8);
}

.cr-about .video-poster .play{
	position: relative;
	z-index: 2;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.85);
	background: rgba(4,49,67,.56);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 27px;
}

.cr-about .video-poster .play:hover{
	background: rgba(4,49,67,.85);
}

.cr-about .media-panel iframe{
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.cr-about .media-meta{
	padding: 17px 20px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	color: var(--muted);
	font-size: 11px;
}

.cr-about .media-meta strong{
	color: #0084ab;
	font-size: 13px;
}

.cr-about .closing{
	background: #073d52;
	color: #fff;
	text-align: center;
	padding: 93px 20px;
	margin-bottom: 0;
}

.cr-about .closing-kicker{
	font-family: Arial,sans-serif;
	letter-spacing: .2em;
	font-size: 11px;
	color: #96cad8;
	margin-bottom: 22px;
	font-weight: 800;
}

.cr-about .closing h2{
	font-weight: 770;
	font-size: clamp(32px,4vw,58px);
	letter-spacing: -.05em;
	margin: 0 0 34px;
}



.cr-about .footer{
	padding: 42px max(30px,calc((100vw - 1330px)/2));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: var(--paper);
}

.cr-about .footer img{
	width: 178px;
}

.cr-about .footer span{
	font-family: Arial,sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--muted);
	font-weight: 680;
}

.cr-about .asset-warning{
	font-size: 10px;
	background: #f5f6f4;
	border-top: 1px solid #e7ebea;
	padding: 17px max(30px,calc((100vw - 1330px)/2));
	line-height: 1.7;
	color: var(--muted);
}

.cr-about .reveal{
	opacity: 1;
	transform: none;
}

.cr-about .js-motion .reveal:not(.seen){
	opacity: 0;
	transform: translateY(22px);
}

.cr-about .js-motion .reveal{
	transition: opacity .75s ease,transform .75s cubic-bezier(.22,.8,.3,1);
}

@media(max-width:950px){


	.cr-about .chapter,.cr-about .chapter-2,.cr-about .chapter-4,.cr-about .chapter-3{
		grid-template-columns: 1fr 1.15fr;
		gap: 27px;
	}

	.cr-about .chapter-2 .chapter-photo,.cr-about .chapter-4 .chapter-photo{
		grid-column: 1;
	}

	.cr-about .chapter-2 .chapter-body,.cr-about .chapter-4 .chapter-body{
		grid-column: 2;
	}

	.cr-about .feature-container{
		grid-template-columns: 1fr;
	}

	.cr-about .media-wrap{
		max-width: 800px;
	}

}

@media(max-width:700px){
	.cr-about .preview-label{
		padding: 8px 16px;
	}

	.cr-about .preview-label span:last-child{
		display: none;
	}

	.cr-about .site-head{
		height: 68px;
		padding: 0 20px;
	}

	.cr-about .logo{
		width: 171px;
	}

	.cr-about .nav{
		gap: 11px;
	}

	.cr-about .nav a:not(.active){
		display: none;
	}

	.cr-about .nav a{
		font-size: 11px;
	}


	.cr-about .hero{
		height: 470px;
	}

	.cr-about .hero img{
		object-position: 56% center;
	}

	.cr-about .hero:after{
		background: linear-gradient(90deg,rgba(3,34,45,.7),rgba(3,34,45,.28) 90%);
	}

	.cr-about .hero-txt{
		padding: 30px 25px;
	}

	.cr-about .hero-heading{
		font-size: clamp(33px,8.35vw,58px);
		line-height: 1.15;
	}

	.cr-about .hero-overline{
		font-size: 9px;
		margin-bottom: 26px;
	}

	.cr-about .hero-ja{
		font-size: 13px;
		margin-top: 21px;
	}

	.cr-about .hero-mark{
		right: 18px;
		bottom: 18px;
		font-size: 9px;
	}

	.cr-about .main-wrap{
		padding: 0 23px;
	}

	.cr-about .story-intro{
		padding: 66px 0 8px;
	}

	.cr-about .story-intro h2{
		font-size: 30px;
		margin-bottom: 22px;
	}

	.cr-about .story-intro .micro{
		display: none;
	}

	.cr-about .chapter,.cr-about .chapter-2,.cr-about .chapter-4,.cr-about .chapter-3{
		display: flex;
		flex-direction: column;
		padding: 44px 0 52px;
		gap: 24px;
		align-items: stretch;
	}

	.cr-about .chapter .chapter-body,.cr-about .chapter-2 .chapter-body,.cr-about .chapter-4 .chapter-body{
		order: 0;
	}

	.cr-about .chapter .chapter-photo,.cr-about .chapter-2 .chapter-photo,.cr-about .chapter-4 .chapter-photo{
		order: 1;
	}

	.cr-about .chapter-photo img,.cr-about .chapter-3 .chapter-photo img{
		height: 250px;
	}

	.cr-about .chapter h2{
		font-size: 25px;
		margin-bottom: 17px;
	}

	.cr-about .chapter-top{
		margin-bottom: 17px;
	}

	.cr-about .chapter-prose p{
		font-size: 15px;
		line-height: 2;
	}

	.cr-about .feature-area{
		padding: 69px 23px 77px;
	}

	.cr-about .feature-kicker{
		font-size: 10px;
	}

	.cr-about .feature h2{
		font-size: 29px;
	}

	.cr-about .feature .desc{
		font-size: 14px;
	}

	.cr-about .feature-container{
		gap: 33px;
	}

	.cr-about .media-over{
		font-size: 9px;
		letter-spacing: .05em;
	}

	.cr-about .media-card{
		box-shadow: 0 8px 20px rgba(0,38,51,.06);
	}

	.cr-about .media-tab{
		padding: 14px 11px;
		min-width: 60px;
	}

	.cr-about .media-stage{
		aspect-ratio: 1.4;
	}

	.cr-about .media-meta{
		font-size: 10px;
		padding: 12px 13px;
	}

	.cr-about .media-meta strong{
		font-size: 11px;
	}

	.cr-about .closing{
		padding: 71px 20px;
	}

	.cr-about .closing h2{
		font-size: 37px;
	}

	.cr-about .footer{
		padding: 28px 20px;
		flex-wrap: wrap;
		gap: 14px;
	}

	.cr-about .footer img{
		width: 149px;
	}

	.cr-about .footer span{
		font-size: 9px;
	}

	.cr-about .asset-warning{
		padding: 16px 20px;
	}

}

@media(prefers-reduced-motion:reduce){
	.cr-about *,.cr-about *:before,.cr-about *:after{
		scroll-behavior: auto!important;
		transition: none!important;
		animation: none!important;
	}

	.cr-about .reveal{
		opacity: 1!important;
		transform: none!important;
	}

}

.cr-about .chapter-photo figure{
	aspect-ratio: 8/5;
	overflow: hidden;
}

.cr-about .chapter-photo img,.cr-about .chapter-3 .chapter-photo img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.cr-about .chapter-1 .chapter-photo img{
	object-position: 49% 50%;
}

.cr-about .chapter-2 .chapter-photo img{
	object-position: 51% 50%;
}

.cr-about .chapter-3 .chapter-photo img{
	object-position: 54% 55%;
}

.cr-about .chapter-4 .chapter-photo img{
	object-position: 50% 55%;
}

@media(min-width:951px){
	.cr-about .chapter-3{
		grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr);
	}

}

@media(max-width:700px){
	.cr-about .chapter-photo figure{
		aspect-ratio: 8/5;
	}

	.cr-about .chapter-photo img,.cr-about .chapter-3 .chapter-photo img{
		height: 100%;
	}

}

.cr-about .hero img,.cr-about .chapter-2 .chapter-photo img,.cr-about .chapter-2 .chapter-photo img:hover{
	filter: none !important;
}


/* 共通テーマへの調整はAbout内に限定。承認済みの2枚に色調補正を加えない。 */

.cr-about{
	--ink: var(--cycride-ink);
	--ink2: var(--cycride-ink);
	--gray: var(--cycride-muted);
	--hair: var(--cycride-line);
	--blue: var(--cycride-brand);
	--font: Arial,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
	padding-top: 0;
	color: var(--ink2);
}

.cr-about .main-wrap,.cr-about .feature-area{
	max-width: 1392px;
	padding-left: 56px;
	padding-right: 56px;
}


.cr-about .hero-heading{
	font-weight: 600;
	letter-spacing: -.035em;
	font-size: clamp(36px,4.5vw,65px);
}

.cr-about .chapter h2,.cr-about .story-intro h2,.cr-about .feature h2{
	font-weight: 500;
	letter-spacing: .005em;
}

.cr-about .chapter h2{
	font-size: clamp(24px,2.2vw,30px);
	line-height: 1.7;
}

.cr-about .chapter-prose p{
	line-height: 2;
	color: var(--ink);
}

.cr-about .media-card,.cr-about .media-card:hover{
	box-shadow: none;
	transform: none;
	will-change: auto;
}

.cr-about .media-tab{
	font-weight: 400;
}

.cr-about .closing{
	border-top: 1px solid var(--hair);
	background: var(--paper);
	color: var(--ink);
	padding: 85px 22px 100px;
}

.cr-about .closing-kicker{
	color: var(--gray);
	font-weight: 400;
}

.cr-about .closing h2{
	font-weight: 500;
}


.cr-about .hero img,.cr-about .chapter-2 .chapter-photo img,.cr-about .chapter-2 .chapter-photo img:hover{
	filter: none!important;
}

.cr-about .chapter-photo img{
	transform: none!important;
}

.cr-about .about-route-attribution{
	padding: 8px 13px;
	font-size: 9px;
	line-height: 1.7;
	text-align: right;
}

.cr-about .map-demo-note{
	font-size: 10px;
	line-height: 1.7;
	padding: 10px 13px;
	color: var(--muted);
	border-top: 1px solid #dce2df;
	margin: 0;
}

@media(max-width:1000px){
	.cr-about .main-wrap,.cr-about .feature-area{
		padding-left: 32px;
		padding-right: 32px;
	}

}

@media(max-width:700px){
	.cr-about .main-wrap,.cr-about .feature-area{
		padding-left: 22px;
		padding-right: 22px;
	}


	.cr-about .hero-heading{
		font-size: clamp(30px,7.8vw,48px);
	}

	.cr-about .chapter h2{
		font-size: 24px;
	}

	.cr-about .closing h2{
		font-size: 32px;
	}

	.cr-about .media-over{
		flex-wrap: wrap;
	}

	.cr-about .media-meta{
		flex-wrap: wrap;
		gap: 8px;
	}

	.cr-about .tab-strip{
		gap: 12px;
	}

	.cr-about .media-tab{
		min-width: 55px;
		padding-inline: 9px;
	}

	.cr-about .hero-txt{
		padding-inline: 22px;
	}

}


/* 第2案：本文の導入から4章までを、一つの固定ページ本文として更新する想定。 */


.cr-about .story-intro{
	display: block;
	padding-top: 85px;
	padding-bottom: 25px;
}

.cr-about .story-intro h2{
	margin-bottom: 18px;
}

.cr-about .about-intro-text{
	font-size: 15px;
	color: var(--muted);
	line-height: 1.9;
	margin-bottom: 0;
}

.cr-about .main-wrap{
	counter-reset: chapter;
}

.cr-about .chapter{
	counter-increment: chapter;
}

.cr-about .chapter-no:before{
	content: counter(chapter,decimal-leading-zero);
}

.cr-about .chapter-top{
	justify-content: flex-start;
}

@media(max-width:700px){
	

	.cr-about .story-intro{
		padding-top: 60px;
	}

	.cr-about .about-intro-text{
		font-size: 14px;
	}

}

@media(max-width:370px){
	.cr-about .hero-heading{
		font-size: 25px;
	}

}


/* 第3案：固定ページ本文で編集できる補助見出しを復元。番号は章の数から自動表示。 */

.cr-about .story-intro{
	display: grid;
	grid-template-columns: minmax(0,1fr) auto;
	gap: 0 25px;
}

.cr-about .story-intro h2{
	grid-column: 1;
	grid-row: 1;
	margin-bottom: 0;
}

.cr-about .story-intro .about-intro-text{
	grid-column: 1;
	grid-row: 2;
	margin-top: 18px;
}

.cr-about .story-intro .micro{
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0 0 6px;
	color: var(--muted);
}

.cr-about .story-range:after{
	content: " / 01—" var(--cr-about-total,"04");
	white-space: nowrap;
}

.cr-about .chapter-top{
	justify-content: space-between;
}

.cr-about .chapter-category,.cr-about .chapter-no em{
	color: var(--muted);
}

.cr-about .chapter-total:after{
	content: var(--cr-about-total,"04");
}

.cr-about .has-no-chapters .story-range{
	display: none;
}

@media(max-width:700px){
	.cr-about .story-intro{
		display: block;
	}

	.cr-about .story-intro .micro{
		display: block;
		margin: 20px 0 0;
		font-size: 10px;
	}

	.cr-about .chapter-category{
		font-size: 10px;
	}

}


/* WordPress本文：ブロックの外枠は自由に更新し、番号だけ自動表示
----------------------------------------- */

.cr-about{
	background-color: var(--paper);
	color: var(--ink);
}

.cr-about .chapter-category,.cr-about .micro{
	margin: 0;
	color: var(--muted);
}

.cr-about .chapter-no{
	color: var(--brand);
}

.cr-about .chapter-no em{
	color: var(--muted);
}

.cr-about .chapter-top{
	margin-top: 0;
}

.cr-about .chapter-prose p{
	color: var(--ink);
}

.cr-about .main-wrap{
	counter-reset: chapter;
}

.cr-about .chapter{
	counter-increment: chapter;
}

.cr-about .chapter-no:before{
	content: counter(chapter,decimal-leading-zero);
}

.cr-about .hero-heading,.cr-about .hero-sub{
	color: #fff;
}

.cr-about .closing{
	background-color: var(--paper);
}



.cr-about .wp-block-image{
	margin: 0;
}


/* クラシックテーマでWordPressが補う内側のdivも、同じグリッド・横並びへ参加させる。 */

.cr-about .chapter>.wp-block-group__inner-container,.cr-about .story-intro>.wp-block-group__inner-container,.cr-about .chapter-top>.wp-block-group__inner-container{
	display: contents;
}

.cr-about .chapter-photo,.cr-about .chapter-body{
	margin-block: 0;
}


/* closing button：旧closing a:hoverとの競合をなくし、配色と文字をここへ集約
----------------------------------------- */
.cr-about .closing .closing-btn{
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 54px;
	padding: 14px 26px;
	border: 1px solid var(--brand);
	background-color: transparent;
	color: var(--brand);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .04em;
	text-decoration: none;
	transition: background-color .22s,color .22s,border-color .22s;
}

/* ライトは濃い青＋白文字、ダークは明るい青＋濃い文字。太さは固定して揺れを防ぐ。 */
.cr-about .closing .closing-btn:hover,
.cr-about .closing .closing-btn:focus-visible{
	background-color: var(--brand);
	border-color: var(--brand);
	color: var(--paper);
}

.cr-about .closing .closing-btn > .link-arrow{
	display: inline-block;
	color: inherit;
	font-size: 18px;
	line-height: 1;
	transition: transform .22s;
}


@media (prefers-reduced-motion: reduce){
	.cr-about .closing .closing-btn,
	.cr-about .closing .closing-btn > .link-arrow{
		transition: none;
	}

	.cr-about .closing .closing-btn:hover span,
	.cr-about .closing .closing-btn:focus-visible span{
		transform: none;
	}
}


/* VR introduction：導入近くで体験を伝え、文章とリンクは標準ブロックで編集する
----------------------------------------- */
.cr-about .about-vr{
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0,1fr);
	gap: clamp(28px,5vw,72px);
	margin: 44px 0 0;
	padding: 44px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.cr-about .about-vr > .wp-block-group__inner-container{
	display: contents;
}

.cr-about .about-vr-kicker{
	margin: 0 0 20px;
	color: var(--brand);
	font-size: 10px;
	line-height: 1.8;
	letter-spacing: .18em;
}

.cr-about .about-vr h2{
	margin: 0;
	color: var(--ink);
	font-size: clamp(26px,2.5vw,36px);
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: .01em;
}

.cr-about .about-vr-copy p{
	margin: 0 0 1.4em;
	color: var(--ink);
	font-size: 15px;
	line-height: 2;
}

.cr-about .about-vr .text-link{
	margin-top: 10px;
}

@media all and (max-width: 760px){
	.cr-about .about-vr{
		grid-template-columns: minmax(0,1fr);
		gap: 24px;
		margin: 32px 0 0;
		padding: 32px 0;
	}

	.cr-about .about-vr h2{
		font-size: 25px;
	}
}

/* 導入直後は罫線と余白の二重化を避け、1本の区切りでつなぐ。 */
.cr-about .story-intro + .about-vr{
	margin-top: 0;
	border-top: 0;
}