/* ===== PSC 切替パネル ===== */
.p-psc-switch{
	--nkblue: var(--color-nkblue, #0065b4);
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	/* 左=空白／中央=PC版／右=モバイル */
	grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
	align-items: center;
	gap: 60px;
	padding: 2rem 0;
}

.p-psc-center{
	grid-column: 2;
	justify-self: center;
	text-align: center;
	color: var(--color-nkblue);
	display: grid;
	justify-items: center;
}
.p-psc-center__icon{
	width: auto;
	height: 140px;
	display: block;
	margin: 0 auto 1rem;
}
.p-psc-center h2 {
	margin: 0;
	padding-top: 5px;
	
}
.p-psc-center__title{
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.1;
	margin: .5rem 0 0;
}
.p-psc-center__sub{
	font-weight: bold;
	margin: 0 0 3rem;
}
.p-psc-mouse{
	width: 30px;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* モバイル列（右側） */
.p-psc-right{
	grid-column: 3;
	justify-self: end;
}

/* モバイル版カード */
.p-psc-right__card{
	display: grid;
	padding: 8px 20px;
	width: 350px;
	grid-template-columns: 120px minmax(0,1fr);
	gap: 1rem;
	color: #fff;
	background: var(--color-nkblue);
	border-radius: 10px;
	box-sizing: border-box;
}

/* ホバー範囲（スマホ画像〜サブ見出し） */
.p-psc-right__area{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
	padding: 8px 0 6px;
}
.p-psc-right__phone{
	position: relative;
	width: 64px;
	height: 64px;
	margin-bottom: .75rem;
}
.p-psc-right__phone img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: contain;
}
.p-psc-right__phone .is-blue{ display: none; }
.p-psc-right__area:hover .is-white{ display: none; }
.p-psc-right__area:hover .is-blue{ display: block; }

.p-psc-right__title{
	display: block;
	color: white;
	font-weight: bold;
	font-size: 24px;
	line-height: 1.1;
}
.p-psc-right__sub{
	display: inline-block;
	margin-top: .25rem;
	font-size: 18px;
	line-height: 1.2;
	color: white;
	border-bottom: 1px solid #fff;
	padding-bottom: .15rem;
}
.p-psc-right__sub:lang(zh){
	font-size: 17px;
}
.p-psc-right__sub:lang(ja){
	white-space: nowrap;
}
.p-psc-right__texts {
	display: block;
	text-align: center;
}

/* ムービーリンク群（右側） */
.p-psc-movies-wrap{
	display: grid;
	align-content: center;
	gap: 20px;
	width: 100%;
	min-width: 0;
}
.p-psc-movie{
	--h: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--h);
	border: 2px solid #fff;
	padding: 0 10px;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	text-decoration: none;
	background: transparent;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	box-sizing: border-box;
}
.p-psc-movie__label{
	overflow: hidden;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.p-psc-movie__icon{
	display: inline-flex;
	align-items: center;
	gap: 0;
	transform: translateX(4px);
}
.p-psc-movie__icon img {
	width: 20px;
	height: 20px;
	display: block;
}
.p-psc-movie__icon .blue{ display: none; }

.p-psc-movie:hover{
	border-color: var(--color-nkblue);
	color: var(--color-nkblue);
	background: rgb(221, 238, 243);
}
.p-psc-movie:hover .white{ display: none; }
.p-psc-movie:hover .blue{ display: inline; }
.p-psc-movie:hover .p-psc-movie__label{
	color: var(--color-nkblue);
}
@media (max-width: 1024px){
	.p-psc-switch{
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.p-psc-center, .p-psc-right{
		grid-column: 1;
		justify-self: center;
		margin-top:40px;
	}
	.p-psc-center__sub{
		margin-bottom: 1.5rem;
	}
	.p-psc-movies-wrap{
		width: 100%;
	}
	.p-psc-movie{
		width: 100%;
		font-size: 1.2rem;
	}
}
@media (max-width: 400px){
	.p-psc-right__card { 
		width: 360px;
		grid-template-columns: 1fr;
	}

}




.p-psc-switch--3col{
	--nkblue: var(--color-nkblue, #0065b4);
	--even: var(--u-bg-even, #E6F3F8);
	display: grid;
	grid-template-columns: 260px minmax(0,1fr) 300px;
	grid-template-areas: "left center right";
	align-items: center;
	gap: 60px;
}
.p-psc-switch--3col .p-psc-left{ grid-area: left; }
.p-psc-switch--3col .p-psc-center{ grid-area: center; }
.p-psc-switch--3col .p-psc-right{ grid-area: right; }

.p-psc-switch--3col .p-psc-movie__label{
	color: var(--color-nkblue);
}
/* 右カード：初期は横並び（アイコン左・文字右） */
.p-psc-pcLink{
	display: grid;
	grid-template-columns: 110px minmax(0,1fr);
	align-items: center;
	gap: 0px;
	background: var(--color-nkblue);
	color: #fff;
	text-decoration: none;
	padding: 20px;
	border-radius: 12px;
	box-sizing: border-box;
}
.p-psc-pcLink__icon {
	position: relative;
	display: inline-block;
	inline-size: 86px;
	block-size: 86px;
	vertical-align: middle;
}

.p-psc-pcLink__icon img{
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}


/* ホバー：背景＝u-bg-even相当、テキストは青、アイコンを青版に切替 */
.p-psc-pcLink:hover{
	background: var(--even);
	color: var(--color-nkblue);
	filter: none;
}
.p-psc-pcLink__icon img.is-blue { display: none; }
.p-psc-pcLink:hover .p-psc-pcLink__icon img.is-white { display: none; }
.p-psc-pcLink:hover .p-psc-pcLink__icon img.is-blue { display: inline; }
.p-psc-pcLink:hover .p-psc-right__title,
.p-psc-pcLink:hover .p-psc-right__sub
{
	color: var(--color-nkblue);
}

.p-psc-pcLink:hover .is-white{ display: none; }
.p-psc-pcLink:hover .is-blue{ display: block; }


/* 左Movie列：既存の見た目維持しつつアウトライン版 */
.p-psc-movie--outline{
	border-color: var(--color-nkblue);
	color: var(--color-nkblue);
	background: transparent;
}
.p-psc-movie--outline .white{ display: none; }
.p-psc-movie--outline .blue{ display: inline; }

/* ====== 段階2：カードの中だけ縦積み（充分幅がなくなったら） ====== */
@media (max-width: 1024px){
	.p-psc-pcLink{
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		padding: 22px;
	}
	.p-psc-pcLink__icon img{ width: 80px; }
}

/* ====== 段階3：全体を縦積み（順序＝モバイル → PC → Movie） ====== */
@media (max-width: 900px){
	.p-psc-switch--3col{
		grid-template-columns: 1fr;
		grid-template-areas:
			"center"
			"right"
			"left";
		gap: 24px;
	}
	.p-psc-switch--3col .p-psc-left,
	.p-psc-switch--3col .p-psc-right{ justify-self: center; width: 204px; }
	.p-psc-switch--3col .p-psc-left{ width: min(100%, 320px); }
}
/******************************/
/***        Slider          ***/
/******************************/
.p-psc-slider {
	max-width: 1170px;
	margin: 0 auto;
}

.p-psc-slider__container {
	position: relative;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	aspect-ratio: 1170 / 495;
	overflow: hidden;
}
#psc-slider-5 .p-psc-slider__container{
	aspect-ratio: 1170 / 550;
}
.p-psc-slider__container [class^="p-psc-slider__slide"]{
	position: absolute;
	inset: 0;
}
.p-psc-slider__container [class^="p-psc-slider__slide"] img{
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.p-psc-slider__slide1,
.p-psc-slider__slide2,
.p-psc-slider__slide3,
.p-psc-slider__slide4,
.p-psc-slider__slide5 {
	display: none;
}


.p-psc-slider__controls{
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	display: flex; align-items: center; gap: 12px;
	z-index: 10;
}

.p-psc-slider__controls .onsld6,
.p-psc-slider__controls .onsld7{
	display: inline-flex; align-items: center; justify-content: center;
	height: 21px; width: 70px;
}

/* The dots/bullets/indicators */
.p-psc-slider__dot1,
.p-psc-slider__dot2,
.p-psc-slider__dot3,
.p-psc-slider__dot4,
.p-psc-slider__dot5 {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	background-color: #fff;
	border-radius: 50%;
	border: 3px solid #0559a1;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active-sld, .p-psc-slider__dot:hover {
	background-color: #717171;
	background-color: #b2cfe7;
}

.p-psc-slider__btn--pause {
	cursor: pointer;
	height: 15px;
	width: 64px;
	margin: 0 2px;
	background-color: #bbb;
	background-color: #0559a1;
	border: 3px solid #0559a1;
	display: inline-block;
  transition: background-color 0.6s ease;
}

.p-psc-slider__btn--play {
	cursor: pointer;
	height: 15px;
	width: 64px;
	margin: 0 2px;
	background-color: #bbb;
	background-color: #ff0000;
	border: 3px solid #ff0000;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.p-psc-slider__controls .p-psc-slider__btn--pause{
	display: none;
}
.p-psc-slider__controls.is-paused .p-psc-slider__btn--play{
	display: none;
}
.p-psc-slider__controls.is-paused .p-psc-slider__btn--pause{
	display: inline-flex;
}



/* Fading animation */
.is-fading {
  -webkit-animation-name: is-fading;
  -webkit-animation-duration: 1.5s;
  animation-name: is-fading;
  animation-duration: 1.5s;
}

@-webkit-keyframes is-fading {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes is-fading {
  from {opacity: .4}
  to {opacity: 1}
}


.p-psc-features{
	display: grid;
	margin-top: 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 75px;
	align-items: start;
}
.p-psc-features__item{
	text-align: center;
}
.p-psc-features__icon{
	display: block;
	height: 70px;
	width: auto;
	max-width: 98px;
	margin: 0 auto 12px;
}
.p-psc-features__title{
	margin: 0 0 12px;
	font-weight: bold;
	font-size: 1.6rem;
	line-height: 1.3;
}
.p-psc-features__desc{
	margin: 0;
	text-align: left;
	line-height: 1.9;
}

/* 2カラム時、項目数が奇数なら最後の1件を中央に */
.p-psc-features > .p-psc-features__item:last-child:nth-child(odd){
	grid-column: 1 / -1;
	justify-self: center;
	max-width: 640px;
	width: 100%;
}

@media (max-width: 900px){
	.p-psc-features{
		grid-template-columns: 1fr;
		gap: 60px;
	}
}


/* =====   psc-introduction.html  ===== */
.p-ac-portal-psc-introduction .p-psc-even{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 512px;
	gap: 0px;
	align-items: center;
}
.p-ac-portal-psc-introduction .p-psc-even .p-psc-even__right{
	justify-self: center;
}
.p-ac-portal-psc-introduction .p-psc-even .p-psc-even__phone{
	width: 250px;

	block-size: auto;
	display: block;
}

@media screen and (min-width: 1024px){
	.p-ac-portal-psc-introduction .p-psc-even{
		--right-image-shift: -20%;
	}
	.p-ac-portal-psc-introduction .p-psc-even .p-psc-even__right{
		justify-self: start;
	}

	.p-psc-even__phone{
		transform: translateX(20%);
	}
	.p-psc-even__left .p-psc-even__phone{
		transform: translateX(80%);
	}
}
/* 狭幅で縦配置（1024px未満） */
@media screen and (max-width: 1023px){
	.p-ac-portal-psc-introduction .p-psc-even{
		grid-template-columns: 1fr;
		gap: 50px;
	}

	.p-ac-portal-psc-introduction .p-psc-even__right{
		order: 2;
	}
	.p-ac-portal-psc-introduction .p-psc-even__left{
		order: 1;
	}
}

/* ===== 機能カード ===== */
.p-ac-portal-psc-introduction .p-psc-even .p-psc-features{
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	inline-size: 512px;
	max-inline-size: 100%;
}
.p-ac-portal-psc-introduction .p-psc-even .p-psc-features .p-psc-feature{
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: 16px;
	align-items: center;
	background: #fff;
	padding: 10px 12px 6px 12px;
	min-block-size: 96px;
}
/* アイテム間の縦余白 */
.p-psc-feature + .p-psc-feature{
	margin-block-start: 25px;
}
.p-psc-feature__icon{
	inline-size: 72px;
	block-size: 72px;
	display: grid;
	place-items: center;
	margin: 0;
}
.p-psc-feature__icon img{
	max-inline-size: 100%;
	max-block-size: 100%;
	display: block;
	object-fit: contain;
}
.p-psc-feature__body{
	align-self: start;
}
.p-psc-feature__body p{
	margin-bottom: 15px;
}
.p-psc-feature__body .p-psc-feature__title{
	font-weight: bold;
	font-size: 1.2em;
	color: var(--color-nkblue);
	line-height: 1.4;
}
.p-psc-feature .p-psc-feature__desc{
	line-height: 1.2;
}


.p-psc-even__right{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
}

.p-psc-feature__title{
	margin: 0;
	color: var(--nkblue);
	font-weight: bold;
}
.p-psc-feature__desc{
	margin: 0;
	text-align: left;
	max-inline-size: 526px;
}

@media screen and (max-width: 1023px){
	.p-ac-portal-psc-introduction .p-psc-even .p-psc-features{
		inline-size: 100%;
		max-inline-size: 526px;
		margin-inline: auto;
	}

	/* 左カラムのスマホ枠を中央寄せ */
	.p-psc-even .p-psc-even__left .p-psc-phone{
		margin: 0 auto;
	}
	.p-psc-even--textFirst .p-psc-even__right{	order: 1; }
	.p-psc-even--textFirst .p-psc-even__left{	order: 2; }
}
.p-psc-feature__title2{
	font-weight: bold;
	font-size: 1.9rem;
	margin:0;
}
.p-psc-featureScope--centerTitle .p-psc-feature__title,
.p-psc-featureScope--centerTitle .p-psc-feature__title2 {
	text-align: center;
}


.p-psc-phone{
	position: relative;
	inline-size: 250px;
}

/* 画像は枠にフィット */
.p-psc-phone .p-psc-even__phone{
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* 動画を画像の画面部分にピッタリ重ねる（基準 250×495px → 割合化） */
.p-psc-phone .movie{
	position: absolute;
	left: 13px;
	top: 65px;
	inline-size: 222px;
	block-size: 392px;
	z-index: 1;
}
.p-psc-phone .movie iframe{
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

/* 画像側に掛かっていた transform があれば枠へ移す（重ねた動画も一緒に移動） */
@media screen and (min-width: 1024px){
	.p-psc-even__left .p-psc-even__phone{ transform: none; }
	.p-psc-even__left .p-psc-phone{ transform: translateX(80%); }
}

/* 左カラム版：タイトル・本文・アイコンを中央寄せ（右と同等の見た目に） */
.p-psc-even .p-psc-even__left.p-psc-featureScope--centerTitle .p-psc-feature__body{
	text-align: center;
}

.p-psc-even .p-psc-even__left.p-psc-featureScope--centerTitle .p-psc-feature__icon{
	display: block;
	margin: 0 auto 12px;
}

.p-psc-even .p-psc-even__left.p-psc-featureScope--centerTitle .p-psc-feature__title2,
.p-psc-even .p-psc-even__left.p-psc-featureScope--centerTitle .p-psc-feature__title,
.p-psc-even .p-psc-even__left.p-psc-featureScope--centerTitle .p-psc-feature__desc{
	margin-left: auto;
	margin-right: auto;
}



/* 中央寄せ＆はみ出し防止用にサイズ・間隔を微調整 */
.p-psc-slider--inPhone .p-psc-slider__controls{
	left: 50%;
	bottom: 26px;
	transform: translateX(-49%);
	gap: 6px;
	padding: 0 4px;
}

.p-psc-slider--inPhone .p-psc-slider__dot1,
.p-psc-slider--inPhone .p-psc-slider__dot2,
.p-psc-slider--inPhone .p-psc-slider__dot3 {
	inline-size: 12px;
	block-size: 12px;
	border-width: 2px;
}

/* 再生・一時停止ボタン画像を縮小 */
.p-psc-slider--inPhone .onsld6 img,
.p-psc-slider--inPhone .onsld7 img{
	inline-size: 48px;
	height: auto;
}

#psc-slider-mobile1 .onsld6 {
	display: none;
}

/* mobileは2つ想定：mobile1 / mobile2 の両方に適用 */
#psc-slider-mobile1.p-psc-slider--inPhone,
#psc-slider-mobile2.p-psc-slider--inPhone,
#psc-slider-mobile3.p-psc-slider--inPhone {
	width: 250px;
	height: 495px;
	max-width: 250px;
	margin: 0 auto;
}

/* コンテナの比率・パディング系をリセットし縦長に固定 */
#psc-slider-mobile1.p-psc-slider--inPhone .p-psc-slider__container,
#psc-slider-mobile2.p-psc-slider--inPhone .p-psc-slider__container,
#psc-slider-mobile3.p-psc-slider--inPhone .p-psc-slider__container {
	width: 250px;
	height: 495px;
	max-width: 250px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;

	aspect-ratio: auto;
	padding-top: 0;
}

#psc-slider-mobile1 [class^="p-psc-slider__slide"] img,
#psc-slider-mobile2 [class^="p-psc-slider__slide"] img,
#psc-slider-mobile3 [class^="p-psc-slider__slide"] img{
	width: 250px;
	height: 495px;
	object-fit: contain;
	object-position: center;
}

#psc-slider-mobile1 .p-psc-slider__controls .onsld7,
#psc-slider-mobile2 .p-psc-slider__controls .onsld7,
#psc-slider-mobile3 .p-psc-slider__controls .onsld7 {
	background-color: #ff0000;
}

#psc-slider-mobile1 .p-psc-slider__controls .onsld6,
#psc-slider-mobile2 .p-psc-slider__controls .onsld6,
#psc-slider-mobile3 .p-psc-slider__controls .onsld6{
	background-color: var(--color-nkblue);
}

/* ==== PSC: ダウンロード案内（画像のような中央寄せレイアウト） ==== */
.p-psc-download{
	text-align: center;
}
.p-psc-download p{
	margin: 0 0 16px;
	line-height: 1.8;
}
.p-psc-download p + p{
	margin-top: 8px;
	font-size: .95rem;
}

/*  ストア2枚を横並び  */
.p-psc-download .p-psc-download__box{
	display: inline-block;
	vertical-align: top;
	margin: 40px 80px 0;
	padding:20px;
	border: 1px solid #ddd;
}

.p-psc-download dl{
	margin: 0;
}
.p-psc-download dt{
	margin: 0 0 16px;
}
.p-psc-download dt img{
	display: block;
	width: 136px;
	height: auto;
	margin: 0 auto;
}

.p-psc-download dd{
	margin: 0;
}
.p-psc-download dd img{
	display: block;
	width: 112px;
	height: 112px;
	background: #fff;
	padding: 18px;
	margin: 0 auto;
}