@charset "UTF-8";
/* ================================================================================
common
================================================================================ */
@media print, screen
{

html{	scroll-behavior: smooth;	}

:root
{
	--color1: #0B0D2F;
	--color2: #2d89d1;
	--color3: #C60757;
	--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;

	--stickyheaderH: 50px;
}

main
{
	background-color: #ffffff;

	color: #000000;
	font-family: var(--YuGothic);
	font-size: 16px;
	font-weight: 500;
	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: white;
  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: 50px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.content_wrapper .subSectionTitle
{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.53;
}
.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: 30px;
}
.content_wrapper .subSectionTitle{	font-size: 20px;	}
.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-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 .image1 img{	min-height: 500px;	}
#key_visual .titleArea{	padding: 70px 0 100px;	}
#key_visual .titleArea p
{
	color: white;
	font-size: 27px;
	font-weight: 700;
	text-align: center;
}
#key_visual .titleArea h1
{
	color: white;
	font-size: 55px;
	font-weight: 700;
	text-align: center;
}
#key_visual .text1
{
	color: white;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

}
@media screen and (min-width: 600px)
{
#key_visual .text1{	text-align: center;	}
}
@media screen and (max-width: 599px)
{

#key_visual .image1 img{	min-height: unset;	}

#key_visual .titleArea{	padding: 40px 0 60px;	}
#key_visual .titleArea p{	font-size: 18px;	}
#key_visual .titleArea h1{	font-size: 28px;	}
#key_visual .text1{	font-size: 14px;	}

}

/* ================================================================================
feature
================================================================================ */
@media print, screen
{
[id^="feature"] > .inner{	padding: 0;	}
[id^="feature"] h2 + p
{
	/* padding-inline: var(--pagePadding); */
	font-size: 18px;
	text-align: center;
}
[id^="feature"] .subSection{	padding: 100px var(--pagePadding);	}
[id^="feature"] p{	line-height: 2;	}
}
@media screen and (max-width: 599px)
{
[id^="feature"] .subSection{	padding: 60px var(--pagePadding);	}


}

/* ================================================================================
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;	}
}

/* ================================================================================
specLinkArea
================================================================================ */
@media print, screen
{
#specLinkArea .buttonArea{	padding: 0;	}
#specLinkArea .buttonArea .buttons
{
	container-type: inline-size;
	display: flex;	justify-content: center;
	gap: 30px 25px;
}
#specLinkArea .buttonArea .buttons li{	width: calc((100cqw - 25px * 2)/2);	}
#specLinkArea .buttonC a{	background: black;	}
#specLinkArea .buttonC a p{color: white;	}
#specLinkArea .buttonC a::after{	background: white;	}

#specLinkArea .buttonC a:hover{	background: white;	}
#specLinkArea .buttonC a:hover p{	color: black;	}
#specLinkArea .buttonC a:hover::after{	background: black;	}
}
@media screen and (min-width: 600px)
{
#specLinkArea .buttonC a p{	padding-right: 20px;	}
}
@media screen and (max-width: 599px)
{
#specLinkArea .buttonArea .buttons{	flex-direction: column;	}
#specLinkArea .buttonArea .buttons li{	width: unset;	}
}

/* ================================================================================
buyArea
================================================================================ */
@media print, screen
{
#buyArea h2
{
	/* padding: 0.4em 0 0.2em; */
	padding: 0.4em 0;
	background: black;
	border: 1px solid #707070;

	color: white;
	line-height: 1.3;
	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 .contactArea
{
	padding: 30px 65px;
	margin-top: -1px;
	border: 1px solid black;
}
#buyArea .contactArea h3
{
	font-size: 22px;
	font-weight: 700;
}
#buyArea .contactArea .text1
{
	font-size: 14px;
	font-weight: 700;
}
#buyArea .contactArea .text2
{
	font-size: 15px;
	font-weight: 700;
}
#buyArea .contactArea .buttonC a
{
	min-width: 180px;	min-height: unset;
	padding: 5px 50px;
	background: var(--color3);
	border: unset;
}
#buyArea .contactArea .buttonC a p
{
	color: white;
	font-size: 13px;
}
#buyArea .contactArea .buttonC a::after
{
	right: 10px;
	background: white;
	width: 0.6em;	height: 0.7em;
}
#buyArea .contactArea .buttonC a:hover{	opacity: 0.7;	}
}
@media screen and (max-width: 599px)
{
#buyArea .buttonArea{	padding: 30px;	}
#buyArea .buttonArea .buttons{	flex-direction: column;	}
#buyArea .buttonArea .buttons li{	width: unset;	}

#buyArea .contactArea{	padding: 30px;	}
#buyArea .contactArea h3{	font-size: 20px;	}
#buyArea .contactArea .text1{	font-size: 10px;	}
#buyArea .contactArea .text2{	font-size: 11px;	}
}

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

#intelFamily .columns
{
	grid-template-columns: 100px 1fr;
	gap: 10px 50px;
}
#intelFamily h2{	font-family: var(--DIN);	font-weight: 700;	}
#intelFamily .notesArea li{	font-family: var(--DIN);}
#intelFamily a{	color: #999999;	}
}
@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;	}
}