@charset "UTF-8";
/* ================================================================================
[ 外部共通スタイル SX14 R2 Kachiiro ]
================================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Old+Mincho:wght@400;500;700&display=swap');

/* ================================================================================
common
================================================================================ */
@media print,
screen {

	html {
		scroll-behavior: smooth;
	}

	:root {
		--color1: #0B0D2F;
		--color2: #2d89d1;
		--color3: #C60757;
		--color4: #DBDCDC;
		--color5: rgb(11, 17, 62);
		--grad1: linear-gradient(-180deg, rgb(11, 17, 62) 0%, rgb(5, 10, 30) 100%);
		--grad2: linear-gradient(-180deg, rgb(5, 10, 30) 0%, rgb(0, 5, 20) 100%);

		--pagePadding: 30px;
		--YuGothic: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
		--DIN: DIN Next W01 Regular, YuGothic, 游ゴシック, ＭＳ Ｐゴシック, MS P Gothic, MS-PGothic, ヒラギノ角ゴ Pro W3, Hiragino Kaku Gothic Pro, Osaka, arial, helvetica, clean, sans-serif;
		--ZenMincho: 'Zen Old Mincho', serif;
		--stickyheaderH: 50px;
	}

	main {
		background-color: #ffffff;

		color: var(--color4);
		font-family: var(--ZenMincho);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.7;
		letter-spacing: normal;
		-webkit-text-size-adjust: 100%;
		word-break: break-word;
	}

	:where(.content_wrapper *) {
		box-sizing: border-box;

		margin: 0;
		padding: 0;

		list-style: none;

		border-collapse: collapse;
		border-spacing: 0;

		color: var(--color4);
		letter-spacing: 0;
	}

	.content_wrapper {
		background: black;
	}

}

@media screen and (min-width: 600px) {
	/* main{	min-width: 1280px;	} */
}

@media screen and (max-width: 1024px) {
	:root {
		--stickyheaderH: 34px;
	}
}

@media screen and (max-width: 599px) {
	.content_wrapper {
		min-width: unset;
		padding-top: unset;
		font-size: 14px;
	}
}

/* ========================================
pc / sp
======================================== */
@media screen and (min-width: 600px) {
	main .sp {
		display: none !important;
	}
}

@media screen and (max-width: 599px) {
	main .pc {
		display: none !important;
	}
}

/* ========================================
sub / sup
======================================== */
@media print,
screen {
	.content_wrapper sub {
		position: relative;
		top: 0.35em;
		font-size: 0.7em;
		/* line-height: 1; */
		vertical-align: baseline;
	}

	.content_wrapper sup {
		position: relative;
		top: 0.15em;
		font-size: 0.7em;
		/* line-height: 1; */
		vertical-align: top;
	}
}

/* ========================================
content_wrapper p a
======================================== */
@media print,
screen {

	.content_wrapper p a:link,
	.content_wrapper p a:visited,
	.content_wrapper p a:active,
	.content_wrapper li a:link,
	.content_wrapper li a:visited,
	.content_wrapper li a:active {
		color: #2d75c7;
	}
}

/* ========================================
picture
======================================== */
@media print,
screen {
	.content_wrapper picture {
		display: block;
	}

	.content_wrapper picture img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.svgs {
		z-index: 0;
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		visibility: hidden;
		pointer-events: none;
	}

}

/* ========================================
mw : max width
======================================== */
@media print,
screen {

	.content_wrapper [style*=" --mw"],
	.content_wrapper [style^="--mw"] {
		--mw: 1100;
		max-width: calc(var(--mw) * 1px);
		margin-inline: auto;
	}
}

@media screen and (max-width: 599px) {

	.content_wrapper [style*=" --mw"],
	.content_wrapper [style^="--mw"] {
		max-width: unset;
	}
}

/* ========================================
mt : margin-top
======================================== */
@media print,
screen {

	.content_wrapper [class*=" mt"],
	.content_wrapper [class^="mt"],
	.content_wrapper .mt0 {
		--mt: 0;
		--ratio: 1;
		margin-top: calc(var(--mt) * var(--ratio) * 1px) !important;
	}

	.content_wrapper .mt5 {
		--mt: 5;
	}

	.content_wrapper .mt10 {
		--mt: 10;
	}

	.content_wrapper .mt20 {
		--mt: 20;
	}

	.content_wrapper .mt30 {
		--mt: 30;
	}

	.content_wrapper .mt40 {
		--mt: 40;
	}

	.content_wrapper .mt50 {
		--mt: 50;
	}

	.content_wrapper .mt60 {
		--mt: 60;
	}

	.content_wrapper .mt70 {
		--mt: 70;
	}

	.content_wrapper .mt80 {
		--mt: 80;
	}

	.content_wrapper .mt90 {
		--mt: 90;
	}

	.content_wrapper .mt100 {
		--mt: 100;
	}

	.content_wrapper .mt110 {
		--mt: 110;
	}

	.content_wrapper .mt120 {
		--mt: 120;
	}

	.content_wrapper .mt130 {
		--mt: 130;
	}

	.content_wrapper .mt140 {
		--mt: 140;
	}

	.content_wrapper .mt150 {
		--mt: 150;
	}

	.content_wrapper .mt160 {
		--mt: 160;
	}

	.content_wrapper .mt170 {
		--mt: 170;
	}

	.content_wrapper .mt180 {
		--mt: 180;
	}

	.content_wrapper .mt190 {
		--mt: 190;
	}

	.content_wrapper .mt200 {
		--mt: 200;
	}
}

@media screen and (max-width: 599px) {

	.content_wrapper [class*=" mt"],
	.content_wrapper [class^="mt"] {
		--ratio: 0.8;
	}
}

/* ========================================
section
======================================== */
@media print,
screen {
	.content_wrapper section {
		scroll-margin-top: 200px;
	}

	.content_wrapper section>.inner {
		padding-inline: var(--pagePadding);
	}
}

/* ========================================
sectionObi
======================================== */
@media print,
screen {
	.content_wrapper .sectionObi img {
		min-height: 420px;
	}
}

@media screen and (max-width: 599px) {
	.content_wrapper .sectionObi img {
		height: 200px;
		min-height: unset;
	}
}

/* ========================================
subSection
======================================== */
@media print,
screen {
	.content_wrapper .subSection {
		scroll-margin-top: 200px;
	}
}

/* ========================================
sectionTitle / subSectionTitle / miniSectionTitle
======================================== */
@media print,
screen {
	.content_wrapper .sectionTitle {
		/* padding: 70px 0; */

		font-size: 36px;
		/* font-weight: 700; */
		line-height: 1.4;
		letter-spacing: 0.2em;
		text-align: center;
	}

	.content_wrapper .subSectionTitle {
		font-size: 24px;
		font-weight: 700;
		line-height: 1.53;
		letter-spacing: 0.2em;
	}

	.content_wrapper .miniSectionTitle {
		font-size: 20px;
		font-weight: 700;
		line-height: 1.5;
	}
}

@media screen and (max-width: 599px) {
	.content_wrapper .sectionTitle {
		/* padding: 40px 0; */
		font-size: 25px;
		text-align: left;
	}

	.content_wrapper .subSectionTitle {
		font-size: 25px;
	}

	.content_wrapper .miniSectionTitle {
		font-size: 16px;
	}
}

/* ========================================
columns
======================================== */
@media print,
screen {

	.content_wrapper ul[class^="columns"],
	.content_wrapper ul[class*=" columns"] {
		container-type: inline-size;
		display: grid;
		gap: 20px 50px;
	}

	.content_wrapper ul[class^="columns"]:has(li:nth-child(2)),
	.content_wrapper ul[class*=" columns"]:has(li:nth-child(2)),
	.content_wrapper ul.columns2 {
		grid-template-columns: 1fr 1fr;
	}

	.content_wrapper ul[class^="columns"]:has(li:nth-child(3)),
	.content_wrapper ul[class*=" columns"]:has(li:nth-child(3)),
	.content_wrapper ul.columns3 {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media screen and (max-width: 599px) {

	.content_wrapper ul[class^="columns"],
	.content_wrapper ul[class*=" columns"] {
		grid-template-columns: 1fr !important;
	}
}

/* ========================================
textImageCol
======================================== */
@media print,
screen {
	.content_wrapper [class*="textImageCol"] {
		display: grid;
		gap: 20px 50px;
	}

	.content_wrapper .textImageCol40 {
		grid-template-columns: 0.4fr 0.6fr;
	}

	.content_wrapper .textImageCol45 {
		grid-template-columns: 0.45fr 0.55fr;
	}

	.content_wrapper .textImageCol50 {
		grid-template-columns: 1fr 1fr;
	}

	.content_wrapper .textImageCol55 {
		grid-template-columns: 0.55fr 0.45fr;
	}

	.content_wrapper .textImageCol60 {
		grid-template-columns: 0.6fr 0.4fr;
	}

	.content_wrapper .textImageCol65 {
		grid-template-columns: 0.65fr 0.35fr;
	}

	.content_wrapper .textImageCol70 {
		grid-template-columns: 0.7fr 0.3fr;
	}
}

@media screen and (max-width: 599px) {
	.content_wrapper [class*="textImageCol"] {
		grid-template-columns: 1fr !important;
	}

	.content_wrapper [class*="textImageCol"]:not(.rev) .text {
		order: 2;
	}

	.content_wrapper [class*="textImageCol"]:not(.rev) .image {
		order: 1;
	}
}

/* ========================================
notesArea
======================================== */
@media print,
screen {
	.content_wrapper .notesArea {
		display: flex;
		flex-direction: column;
		gap: 0.2em;
		padding-left: 1em;
		font-size: 12px;
	}

	.content_wrapper .notesArea>li {
		text-indent: -1em;
	}
}

@media screen and (max-width: 599px) {
	.content_wrapper .notesArea {
		font-size: 10px;
	}
}

/* ========================================
buttonA
======================================== */
@media print,
screen {

	.content_wrapper .buttonA,
	.content_wrapper .buttonA {
		width: fit-content;
	}

	.content_wrapper .buttonA a,
	.content_wrapper .buttonA .a {
		display: block;
		width: 100%;
		padding: 10px 34px;

		background: #ffffff;
		border: 1px solid #707070;

		cursor: pointer;
		transition: all 0.4s;
	}

	.content_wrapper .buttonA a p,
	.content_wrapper .buttonA .a p {
		/* padding: 0.2em 0 0; */
		color: black;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.75;
		transition: all 0.4s;
	}

	.content_wrapper .buttonA a:hover,
	.content_wrapper .buttonA .a:hover {
		background: var(--color2);
	}

	.content_wrapper .buttonA a:hover p,
	.content_wrapper .buttonA .a:hover p {
		color: white;
	}
}

@media screen and (max-width: 599px) {

	.content_wrapper .buttonA a,
	.content_wrapper .buttonA .a {
		padding: 10px 15px;
	}

	.content_wrapper .buttonA a p,
	.content_wrapper .buttonA .a p {
		font-size: 12px;
	}
}

/* ========================================
buttonB
======================================== */
@media print,
screen {

	.content_wrapper .buttonB,
	.content_wrapper .buttonA {
		width: fit-content;
	}

	.content_wrapper .buttonB a,
	.content_wrapper .buttonB .a {
		display: block;
		width: 100%;
		padding: 10px 34px;

		background: #8d8d8d;

		cursor: pointer;
		transition: all 0.4s;
	}

	.content_wrapper .buttonB a p,
	.content_wrapper .buttonB .a p {
		/* padding: 0.2em 0 0; */
		color: white;
		font-size: 16px;
		font-weight: 700;
		text-align: center;
		line-height: 1.75;
	}

	.content_wrapper .buttonB.active a,
	.content_wrapper .buttonB.active .a,
	.content_wrapper .buttonB a:hover,
	.content_wrapper .buttonB .a:hover {
		background: var(--color2);
	}
}

@media screen and (max-width: 599px) {

	.content_wrapper .buttonB a,
	.content_wrapper .buttonB .a {
		padding: 10px 15px;
	}

	.content_wrapper .buttonB a p,
	.content_wrapper .buttonB .a p {
		font-size: 12px;
	}
}

/* ========================================
buttonC
======================================== */
@media print,
screen {

	.content_wrapper .buttonC a,
	.content_wrapper .buttonC {
		width: fit-content;
	}

	.content_wrapper .buttonC a,
	.content_wrapper .buttonC .a {
		position: relative;

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		min-height: 74px;
		padding: 10px 50px;

		background: #EFEFEF;
		border: 1px solid #888888;

		cursor: pointer;
		transition: all 0.4s;
	}

	.content_wrapper .buttonC a p,
	.content_wrapper .buttonC .a p {
		/* padding: 0.2em 0 0; */

		color: black;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.75;

		transition: all 0.4s;
	}

	.content_wrapper .buttonC a::after,
	.content_wrapper .buttonC .a::after {
		position: absolute;
		right: 20px;

		content: "";
		display: block;
		width: 0.9em;
		height: 1em;
		background: black;
		clip-path: polygon(0 0, 0 100%, 100% 50%);

		transition: all 0.4s;
	}

	.content_wrapper .buttonC a:hover,
	.content_wrapper .buttonC .a:hover {
		background: #ea3a24;
	}

	.content_wrapper .buttonC a:hover p,
	.content_wrapper .buttonC .a:hover p {
		color: white;
	}

	.content_wrapper .buttonC a:hover::after,
	.content_wrapper .buttonC .a:hover::after {
		background: white;
	}
}

@media screen and (max-width: 599px) {

	.content_wrapper .buttonC a,
	.content_wrapper .buttonC .a {
		min-height: 60px;
		padding: 10px 15px;
	}
}

/* ========================================
buttonD
======================================== */
@media print,
screen {

	.content_wrapper .buttonD a,
	.content_wrapper .buttonD {
		width: fit-content;
	}

	.content_wrapper .buttonD a,
	.content_wrapper .buttonD .a {
		position: relative;

		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 10px 0;

		background: #2B2B2B;

		cursor: pointer;
		transition: all 0.4s;
	}

	.content_wrapper .buttonD a p,
	.content_wrapper .buttonD .a p {
		/* padding: 0.2em 0 0; */

		color: white;
		font-size: 20px;
		font-weight: 700;
		text-align: center;
		line-height: 1.4;

		transition: all 0.4s;
	}

	.content_wrapper .buttonD a svg,
	.content_wrapper .buttonD .a svg {
		--color: white;
		position: absolute;
		bottom: 4px;
		right: 4px;

		display: block;
		width: 18px;
		aspect-ratio: 1;
		transition: all 0.4s;
	}

	.content_wrapper .buttonD a:hover,
	.content_wrapper .buttonD .a:hover {
		filter: brightness(2);
	}
}

@media screen and (max-width: 599px) {

	.content_wrapper .buttonD a p,
	.content_wrapper .buttonD .a p {
		font-size: 12px;
	}

	.content_wrapper .buttonD a svg,
	.content_wrapper .buttonD .a svg {
		width: 10px;
	}
}

/* ========================================
dialog
======================================== */
@media print,
screen {

	.content_wrapper [dialog] {
		z-index: 10000;
		position: fixed;
		top: 0;
		left: 0;

		/* display: flex;	justify-content: center;	align-items: center; */
		width: 100vw;
		height: 100vh;
		padding: 0 var(--pagePadding);

		background: rgba(0, 0, 0, 0.6);

		opacity: 0;
		pointer-events: none;
	}

	.content_wrapper [dialog].OPEN {
		animation: dialogIn .3s ease-in-out forwards;
		pointer-events: all;
	}

	.content_wrapper [dialog].CLOSE {
		animation: dialogOut .3s ease-in-out forwards;
	}

	@keyframes dialogIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes dialogOut {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.content_wrapper [dialog] .backdrop {
		z-index: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.content_wrapper [dialog] .closeButton {
		cursor: pointer;
	}

	.content_wrapper [dialog] .close {
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;

		color: black;
		font-size: 40px;
		line-height: 1;
	}

	.content_wrapper [dialog]>.inner {
		z-index: 1;
		position: relative;
		top: 130px;
		width: 100%;
		max-height: calc(100dvh - 150px);

		overflow-y: auto;
	}

}

@media screen and (max-width: 599px) {
	.content_wrapper [dialog] {
		padding: 0;
	}

	.content_wrapper [dialog]>.inner {
		top: 0;
		max-height: 100dvh;
	}
}

/* ========================================
accordion
======================================== */
@media print,
screen {
	.content_wrapper .accordion .titleArea {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;

		padding: 14px 25px 14px 34px;
		background: #e0e0e0;
		border-radius: 5px;

		cursor: pointer;
	}

	.content_wrapper .accordion .titleArea h3 {
		width: 100%;
		font-size: 20px;
		font-weight: 700;
	}

	.content_wrapper .accordion .titleArea::after {
		flex-shrink: 0;

		content: "";
		display: block;
		width: 16px;
		aspect-ratio: 1;

		border-bottom: 2px solid #333333;
		border-right: 2px solid #333333;

		transform: translateY(-20%) rotate(45deg);
	}

	.content_wrapper .accordion .contentArea {
		display: none;
		padding: 50px;
		border: 4px solid #e0e0e0;
		border-top: unset;
	}

	.content_wrapper .accordion.OPEN .titleArea {
		border-radius: 5px 5px 0 0;
	}

	.content_wrapper .accordion.OPEN .titleArea::after {
		transform: translateY(20%) rotate(-135deg);
	}
}

@media screen and (max-width: 599px) {
	.content_wrapper .accordion .titleArea {
		padding: 14px 25px 14px 20px;
	}

	.content_wrapper .accordion .titleArea h3 {
		font-size: 16px;
	}

	.content_wrapper .accordion .contentArea {
		padding: 20px;
	}
}

/* ========================================
video
======================================== */
@media print,
screen {

	.content_wrapper video,
	.content_wrapper [src*="youtu"] {
		display: block;
		width: 100%;
		aspect-ratio: 16/9;
		max-width: 560px;
		margin: 0 auto;
	}
}

/* ========================================
specTip
======================================== */
@media print,
screen {
	.specTip {
		display: grid;
		align-items: center;
		grid-template-columns: 1fr 2fr;
		gap: 15px;
	}

	.specTip h4 {
		grid-column: 1 / -1;

		color: #18C5F4;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.5;
	}

	.specTip picture img {
		object-fit: contain;
	}

	.specTip .description1 {
		font-weight: 700;
		line-height: 1.5;
	}

	.specTip .description2 {
		font-size: 12px;
		line-height: 1.6;
	}

	.specTip .notesArea {
		grid-column: 1 / -1;
	}
}

/* ================================================================================
stickyheader
================================================================================ */
@media print,
screen {

	#stickyheader {
		z-index: 10;
		position: fixed;
		left: 0;
		width: 100%;

		background: rgb(0, 0, 0, 0.7);
		border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	}

	#stickyheader>.inner {
		display: flex;
		align-items: center;
		padding: 0;
	}

	#stickyheader .title {
		width: 100%;
		/* padding: 0.2em 0 0 40px; */
		padding: 0 0 0 40px;

		color: white;
		font-family: var(--YuGothic);
		font-size: 20px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
	}

	#stickyheader .links {
		flex-shrink: 0;
		display: flex;
		width: fit-content;
	}

	#stickyheader .links li a {
		position: relative;
		display: flex;
		align-items: center;
		height: var(--stickyheaderH);
		padding: 0 35px;
		background: #111111;

		transition: all 0.2s;
	}

	#stickyheader .links li a:hover {
		background: rgba(17, 17, 17, 0.6);
	}

	#stickyheader .links li a p {
		/* padding: 0.2em 0 0; */
		color: white;
		font-family: var(--YuGothic);
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
	}

	#stickyheader .button {
		flex-shrink: 0;
		width: 270px;
	}

	#stickyheader .button a {
		position: relative;
		display: flex;
		align-items: center;
		height: var(--stickyheaderH);
		padding: 0 35px;
		background: #f0512e;

		transition: all 0.2s;
	}

	#stickyheader .button a:hover {
		background: rgba(240, 81, 46, 0.6);
	}

	#stickyheader .button a::after {
		position: absolute;
		left: 15px;

		content: "";
		display: block;
		width: 0.7em;
		height: 1em;
		background: white;
		clip-path: polygon(0 0, 0 100%, 100% 50%);
	}

	#stickyheader .button a p {
		/* padding: 0.2em 0 0; */
		color: white;
		font-family: var(--YuGothic);
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
	}

}

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

	#stickyheader .links li:not(:last-child) a::after {
		position: absolute;
		right: 0;
		content: "";
		display: block;
		width: 1px;
		height: 16px;
		background: white;
	}

}

@media screen and (max-width: 1024px) {
	#stickyheader .title {
		/* padding: 0.2em 0 0 20px; */
		padding: 0 0 0 20px;
		font-size: 12px;
	}

	#stickyheader .links {
		flex-direction: row-reverse;
	}

	#stickyheader .links li a {
		padding: 0 15px;
	}

	#stickyheader .links li a p {
		font-size: 14px;
	}

	#stickyheader .button {
		width: 90px;
	}

	#stickyheader .button a {
		padding: 0 10px;
	}

	#stickyheader .button a::after {
		left: auto;
		right: 10px;
		width: 0.5em;
	}

	#stickyheader .button a p {
		padding: 0.4em 0 0;
		font-size: 9px;
		line-height: 1.3;
	}

}



/* ================================================================================
key_visual
================================================================================ */
@media print,
screen {
	#key_visual {
		padding-top: var(--stickyheaderH);
	}

	#key_visual>.inner {
		background: var(--grad1);
	}

	#key_visual .swiper img {
		min-height: 500px;
	}

	#key_visual .titleArea {
		width: fit-content;
		padding: 70px 0;
		margin: 0 auto;
	}

	#key_visual .titleArea p {
		font-size: 22px;
		letter-spacing: 0.05em;
		/* text-align: center; */
	}

	#key_visual .titleArea h1 {
		font-family: var(--YuGothic);
		font-size: 22px;
		letter-spacing: 0.05em;
		/* font-weight: 700; */
		/* text-align: center; */
	}

	#key_visual .titleArea h1 span {
		font-size: 0.8em;
	}

	#key_visual .titleArea h1 em {
		display: inline-block;
		padding: 0.2em 1em 0.15em;
		border: 1px solid var(--color4);
		font-size: 0.7em;
		line-height: 1;
		letter-spacing: 0.1em;

		transform: translateY(-0.15em);
	}
}

@media screen and (max-width: 599px) {
	#key_visual .swiper img {
		min-height: 70vw;
	}

	#key_visual .titleArea {
		padding: 40px 0 60px;
	}

	#key_visual .titleArea p {
		font-size: 26px;
		line-height: 2.7;
	}

	#key_visual .titleArea h1 {
		margin-top: 30px;
		font-size: 28px;
		/* line-height: 2.8; */
	}

	#key_visual .titleArea h1 em {
		width: 100%;
		margin-top: 20px;
		text-align: center;
	}

}

/* ================================================================================
feature
================================================================================ */
@media print,
screen {
	section[id^="feature"] {
		background: var(--grad1);
	}

	[id^="feature"]>.inner {
		padding: 0;
	}

	[id^="feature"] .areaA {
		/* padding: 70px var(--pagePadding); */
		padding: 70px 0;
	}

	[id^="feature"] h2+p {
		font-size: 20px;
		text-align: center;
	}

	[id^="feature"] p {
		line-height: 2;
		letter-spacing: 0.1em;
	}

	.fullWidth [class*="textImageCol"] {
		gap: 0;
	}

	.fullWidth [class*="textImageCol"] .text {
		padding: 50px;
	}

	[id^="feature"] .buttonE {
		width: fit-content;
	}

	[id^="feature"] .buttonE a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 30px;
		width: 100%;
		padding: 10px 30px;

		border: 1px solid var(--color4);
		border-radius: 100px;

		cursor: pointer;
		transition: all 0.4s;
	}

	[id^="feature"] .buttonE a p {
		color: var(--color4);
		font-size: 16px;
		line-height: 1;
		transition: all 0.4s;
	}

	[id^="feature"] .buttonE a .arrow {
		width: 40px;
		height: 8px;
		background: var(--color4);
		clip-path: polygon(0 100%, 100% 100%, calc(100% - 8px) 0, calc(100% - 10px) 0, calc(100% - 2px) 7px, 0 7px);
		transform: translateY(-2px);
		transition: all 0.4s;
	}

	[id^="feature"] .buttonE a:hover {
		background: var(--color4);
	}

	[id^="feature"] .buttonE a:hover p {
		color: var(--color5);
	}

	[id^="feature"] .buttonE a:hover .arrow {
		background: var(--color5);
	}

}

@media screen and (min-width: 600px) {
	.fullWidth [class*="textImageCol"] .text:nth-child(1) {
		text-align: right;
	}

	.fullWidth [class*="textImageCol"] .image,
	.fullWidth [class*="textImageCol"] .image picture {
		height: 100%;
	}

	.fullWidth [class*="textImageCol"] .image img {
		height: 560px;
	}

	[id^="feature"] .buttonE {
		margin: 0 0 0 auto;
	}
}

@media screen and (max-width: 599px) {
	[id^="feature"] .areaA {
		/* padding: 40px var(--pagePadding); */
		padding: 40px 0;
	}

	[id^="feature"] h2+p {
		font-size: 16px;
		text-align: left;
	}

	.fullWidth [class*="textImageCol"] .text {
		padding: 40px var(--pagePadding);
	}
}

/* ================================================================================
kachiiro
================================================================================ */
@media print,
screen {
	#kachiiro {
		background: white;
	}

	#kachiiro>.inner {
		padding: 80px var(--pagePadding);
	}

	#kachiiro .boxes {
		display: flex;
		justify-content: center;
		gap: 20px 55px;
	}

	#kachiiro .box:nth-child(1) {
		flex-shrink: 0;
	}

	#kachiiro h2 {
		display: block;
		min-width: 1em;

		padding-top: 0.2em;
		color: var(--color5);
		font-size: 36px;
		text-orientation: upright;
		line-height: 1;
		letter-spacing: 0.4em;
		writing-mode: vertical-rl;
	}

	#kachiiro p {
		color: #565656;
		font-size: calc(10.31px / 0.6);
		line-height: 2.4;
		letter-spacing: 0.05em;
	}
}

@media screen and (max-width: 599px) {
	#kachiiro>.inner {
		padding: 40px var(--pagePadding) 60px;
	}

	#kachiiro .boxes {
		flex-direction: column;
		justify-content: unset;
	}

	#kachiiro h2 {
		font-size: 32px;
	}

	#kachiiro p {
		font-size: 15px;
	}
}

/* ================================================================================
feature1-1
================================================================================ */
@media print,
screen {
	#feature1-1 ul.columns {
		grid-template-columns: 1.4fr 2fr 2fr;
	}

	#feature1-1 ul.columns h4 {
		color: #18C5F4;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.5;
	}

	#feature1-1 ul.columns h4 sup,
	#feature1-1 ul.columns h4 sub {
		color: #18C5F4;
	}
}

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

	#feature1-1 ul.columns li:nth-child(1),
	#feature1-1 ul.columns li:nth-child(5) {
		grid-column: 2 / -1;
	}
}

@media screen and (max-width: 599px) {
	#feature1-1 ul.columns li:nth-child(1) {
		order: 2;
	}

	#feature1-1 ul.columns li:nth-child(2) {
		order: 1;
	}

	#feature1-1 ul.columns li:nth-child(3) {
		order: 3;
	}

	#feature1-1 ul.columns li:nth-child(4) {
		order: 4;
	}

	#feature1-1 ul.columns li:nth-child(5) {
		order: 5;
	}
}


/* ================================================================================
feature2
================================================================================ */
@media print,
screen {
	#feature2>.inner {
		padding-inline: 0;
	}

	#feature2 .areaA {
		padding-inline: var(--pagePadding);
		background: var(--grad1);
	}

	#feature2-2 .pic1 {
		max-width: 300px;
		margin: 0 0 0 auto;
	}

	#feature2-2 [class*="textImageCol"] .image img {
		height: 700px;
	}

	#feature2-6 [class*="textImageCol"] .text p {
		max-width: 550px;
		margin: 0 0 0 auto;
	}
}

@media screen and (max-width: 599px) {
	#feature2-2 .pic1 {
		margin: 0 auto 0 0;
	}

	#feature2-2 [class*="textImageCol"] .image img {
		height: auto;
	}
}



/* ================================================================================
specLinkArea
================================================================================ */
@media print,
screen {
	#specLinkArea>.inner {
		padding: 0 var(--pagePadding);
	}

	#specLinkArea .text1 {
		color: black;
		font-family: var(--YuGothic);
		font-size: 22px;
		text-align: center;
	}

	#specLinkArea .buttonArea {
		padding: 0;
	}

	#specLinkArea .buttonArea .buttons {
		container-type: inline-size;
		display: flex;
		justify-content: center;
		gap: 30px 25px;
	}

	#specLinkArea .button a {
		position: relative;
		display: block;
		padding: 0 20px;

		transition: 0.2s ease-in-out 0s;
	}

	#specLinkArea .button a::before,
	#specLinkArea .button a::after {
		position: absolute;
		bottom: 0;
		right: 0;
		content: "";
		display: block;
		height: 1px;
		background: black;
	}

	#specLinkArea .button a::before {
		width: 100%;
	}

	#specLinkArea .button a::after {
		width: 15px;
		transform-origin: bottom right;
		transform: rotate(45deg);
	}

	#specLinkArea .button a p {
		color: black;
		font-family: var(--YuGothic);
		font-size: 20px;
	}

	#specLinkArea .button a:hover {
		opacity: 0.6;
	}
}

@media screen and (max-width: 599px) {
	#specLinkArea .text1 {
		font-size: 20px;
		text-align: left;
	}

	#specLinkArea .buttonArea .buttons {
		flex-direction: column;
	}

	#specLinkArea .buttonArea .buttons li {
		width: unset;
	}
}

/* ================================================================================
buyArea
================================================================================ */
@media print,
screen {
	#buyArea>.inner {
		padding: 0 var(--pagePadding);
	}

	#buyArea h2 {
		/* padding: 0.4em 0 0.2em; */
		padding: 0.4em 0;
		background: black;
		border: 1px solid #707070;

		color: white;
		font-family: var(--YuGothic);
		font-size: 30px;
		line-height: 1.3;
		letter-spacing: 0;
		text-align: center;
	}

	#buyArea .buttonArea {
		padding: 40px 65px;
		margin-top: -1px;
		background: white;
		border: 1px solid #707070;
	}

	#buyArea .buttonArea .buttons {
		container-type: inline-size;
		display: flex;
		justify-content: center;
		gap: 30px 25px;
	}

	#buyArea .buttonArea .buttons li {
		width: calc((100cqw - 25px * 2)/3);
	}

	#buyArea .buttonArea .buttonC a p {
		font-family: var(--YuGothic);
	}
}

@media screen and (max-width: 599px) {
	#buyArea h2 {
		font-size: 24px;
	}

	#buyArea .buttonArea {
		padding: 30px;
	}

	#buyArea .buttonArea .buttons {
		flex-direction: column;
	}

	#buyArea .buttonArea .buttons li {
		width: unset;
	}
}

/* ================================================================================
intelFamily
================================================================================ */
@media print,
screen {
	#footer .footer-wrap:has(.intel) {
		display: none;
	}

	footer .footer_vaio-desc-wrap:has(.intel-title) {
		display: none;
	}

	#intelFamily {
		background: white;
	}

	#intelFamily .columns {
		grid-template-columns: 100px 1fr;
		gap: 10px 50px;
	}

	#intelFamily h2 {
		color: black;
		font-family: var(--DIN);
		font-weight: 700;
	}

	#intelFamily .notesArea li {
		color: black;
		font-family: var(--DIN);
	}

	#intelFamily a {
		color: #0b113e;
	}
}

@media screen and (max-width: 599px) {
	#intelFamily .columns {
		grid-template-columns: 1fr;
	}

	#intelFamily .columns picture {
		width: 30%;
		margin: 0 auto;
	}

	#intelFamily h2 {
		text-align: center;
	}

	#intelFamily .notesArea li {
		text-align: center;
	}
}

/* ================================================================================
[ VAIO T Kachiiro 専用追加スタイル ]
================================================================================ */

/* ================================================================================
Extracted Style Block 1
================================================================================ */
/* add202206*/
#header #globalnav li.globalnav_second_ .globalnav_second_flex_inner_ p.l_p_htxt {
	position: absolute;
	bottom: -60px;
	right: 0;
	text-align: right;
	line-height: 1;
	padding: 13px 20px 8px;
}

#header #globalnav li.globalnav_second_ .globalnav_second_flex_inner_ p.l_p_htxt a {
	color: #fff;
	line-height: 1;
	padding: 6px 5px 3px;
	display: block;
}

#block_of_top_body #top_link_wrapper ul li a img.gn-top_new_icon {
	display: block;
	width: 40px;
	height: auto;
}

/* ================================================================================
Extracted Style Block 2
================================================================================ */
sub,
.content_wrapper sub,
#stickyheader sub {
	position: relative;
	top: 0.35em;
	font-size: 0.7em;
	vertical-align: baseline;
}

#stickyheader .title sub {
	position: relative;
	top: 0.35em;
	font-size: 0.7em;
}

h1 sub,
h2 sub,
.titleArea h1 sub {
	position: relative;
	top: 0.35em;
	font-size: 0.7em;
}

/* ================================================================================
Extracted Style Block 3
================================================================================ */
/* reset */
#header .header_inner_ {
	min-width: 1240px;
}

/* add（.item_6row） */
.gn_new_icon2 {
	display: block;
	width: 30px !important;
	position: absolute;
	top: 0;
}

@media screen and (max-width:1520px) {
	#header #globalnav .globalnav_second_:first-child .item_6row .globalnav_second_ul_ .globalnav_second_img_ {
		width: 70px;
		flex-shrink: 0;
	}

	#header #globalnav .globalnav_second_:first-child .item_6row .globalnav_second_ul_ .globalnav_second_img_ img {
		max-width: 50px;
		height: auto;
	}

	#header #globalnav .globalnav_second_:first-child .item_6row .globalnav_second_ul_ .globalnav_second_text_ {
		padding: 0 0 0 10px;
		font-size: 12px;
		line-height: 1.4;
	}
}

/* ================================================================================
Extracted Style Block 4
================================================================================ */
.footer-instagram img {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	margin-right: 10px;
}