@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;

		letter-spacing: 0;
	}

	#header {
		margin-bottom: 0;
	}
}

@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 {

	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;
	}

	.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 .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 20px;

		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: 24px;
		font-weight: 700;
		line-height: 1;
		letter-spacing: 0.02em;
	}

	#stickyheader .title span {
		padding-left: 33px;
		font-weight: 400;
	}

	#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: 140px;
	}

	#stickyheader .button a {
		position: relative;
		display: flex;
		align-items: center;
		height: var(--stickyheaderH);
		padding: 0 0 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 .title br {
		display: none;
	}

	#stickyheader .button a p br {
		display: none;
	}

	/* 
#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: 14px;
		line-height: 1.5;
	}

	#stickyheader .title span {
		padding-left: 0;
		font-size: 11px;
	}

	/* #stickyheader .links{	flex-direction: row-reverse;	} */
	#stickyheader .links li a {
		padding: 0 15px;
	}

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

	#stickyheader .button {
		width: 76px;
	}

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

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

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

}



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

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

	#key_visual .titleArea {
		padding: 70px 0 100px;
	}

	#key_visual .titleArea p {
		font-size: 25px;
		font-weight: 700;
		text-align: center;
	}

	#key_visual .titleArea h1 picture {
		height: 48px;
	}

	#key_visual .titleArea h1 picture img {
		object-fit: contain;
	}

	#key_visual .image2 {
		max-width: 700px;
		margin: 0 auto;
	}

	#key_visual .image3 {
		max-width: 700px;
		margin: 0 auto;
	}

	#key_visual .image2 video {
		max-width: 100%;
		width: 640px;
	}

	#key_visual .text1 {
		font-size: 18px;
		line-height: 1.6;
		letter-spacing: 0.03em;
	}

}

@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: 20px;
	}

	#key_visual .titleArea h1 picture {
		height: 30px;
	}

	/*#key_visual .image2{	width: 60%;	max-width: unset;	}*/
	#key_visual .image3 {
		width: 50%;
		max-width: unset;
	}

	#key_visual .text1 {
		font-size: 14px;
	}

}

/* ================================================================================
feature1
================================================================================ */
.placeholder-obi {
	width: 100%;
	height: auto;
	display: block;
}

.textImageCol55.align-center {
	align-items: center;
}

.textImageCol55.row-reverse {
	flex-direction: row-reverse;
}

/* ================================================================================
feature2-anc
================================================================================ */
@media print,
screen {
	#feature2-anc h3 {
		text-align: center;
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	#feature2-anc ul.columns {
		grid-template-columns: 1fr 1fr 1fr !important;
		gap: 120px;
		max-width: 720px;
		margin: 0 auto;
	}

	#feature2-anc ul a {
		display: block;
		transition: 0.2s ease-in-out 0s;
	}

	#feature2-anc ul a:hover {
		opacity: 0.7;
	}

	#feature2-anc ul svg {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	#feature2-anc ul a p {
		color: black;
		font-weight: 700;
		text-align: center;
	}

}

@media screen and (max-width: 599px) {
	#feature2-anc ul.columns {
		gap: 15px;
	}
}

/* ================================================================================
copilot-badge
================================================================================ */
.copilot-badge-container {
	align-items: center;
}

.copilot-badge-container li {
	text-align: center;
}

.content_wrapper .copilot-badge-img {
	object-fit: contain;
	width: 50%;
	margin: 0 auto;
	display: block;
}

/* ================================================================================
truePerformace
================================================================================ */
@media print,
screen {
	#truePerformace {
		padding: 60px 50px;
		background: #f0f0f0;
	}

}

@media screen and (max-width: 599px) {
	#truePerformace {
		width: 100vw;
		padding: 20px;
		margin-left: calc(-1 *var(--pagePadding));
	}
}

/* ================================================================================
truePerformaceDialog
================================================================================ */
@media print,
screen {
	#truePerformaceDialog .inner {
		max-width: 700px;
		padding: 20px;
		margin: 0 auto;
		background: #f0f0f0;
	}

	#truePerformaceDialog h4 {
		font-size: 20px;
		font-weight: 700;
	}

	#truePerformaceDialog h5 {
		font-weight: 700;
	}
}

/* ================================================================================
feature2-anc
================================================================================ */
@media print,
screen {
	#feature6-1 ul.columns {
		grid-template-columns: 1fr 1fr 1fr 1fr !important;
	}
}

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

/* ================================================================================
accordion05A
================================================================================ */
@media print,
screen {
	#accordion05A .items h4 {
		font-weight: 700;
		text-align: center;
	}

	#accordion05A .items p {
		text-align: center;
	}

	#accordion05A .items .buttonA {
		margin: 0 auto;
	}
}






/* ================================================================================
softwareArea
================================================================================ */
@media print,
screen {
	#softwareArea .buttonArea {
		padding: 0 65px;
	}

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

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

@media screen and (max-width: 599px) {
	#softwareArea .buttonArea {
		padding: 30px;
	}

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

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

/* ================================================================================
specLinkArea
================================================================================ */
@media print,
screen {
	#specLinkArea h2 {
		font-size: 50px;
		font-weight: 700;
		text-align: center;
		line-height: 1.6;
	}

	#specLinkArea .buttonArea {
		padding: 0 65px;
	}

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

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

	#specLinkArea .button1 a {
		display: block;
		width: 100%;
		padding: 20px 34px;
		background: var(--color1);
		cursor: pointer;
		transition: all 0.4s;
	}

	#specLinkArea .button1 a p {
		color: white;
		font-size: 18px;
		font-weight: 700;
		text-align: center;
	}

	#specLinkArea .button1 a:hover {
		background: var(--color2);
	}

	#specLinkArea .button2 {
		max-width: 480px;
		margin-inline: auto;
	}

	#specLinkArea .button2 a {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		padding: 20px 40px;
		border: 2px solid var(--color1);
		border-radius: 100px;
		cursor: pointer;
	}

	#specLinkArea .button2 a p {
		color: var(--color1);
		font-size: 18px;
		font-weight: 700;
		text-align: center;
	}

	#specLinkArea .button2 a svg {
		--color: var(--color1);
		position: absolute;
		right: 8px;
		width: 55px;
		aspect-ratio: 1;
	}

	#specLinkArea .button2 a:hover p {
		color: var(--color2);
	}

	#specLinkArea .button2 a:hover svg {
		--color: var(--color2);
	}
}

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

	#specLinkArea .buttonArea {
		padding: 0 30px;
	}

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

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

	#specLinkArea .button1 a p {
		font-size: 16px;
	}

	#specLinkArea .button2 a {
		padding: 20px 60px 20px 20px;
	}

	#specLinkArea .button2 a p {
		font-size: 16px;
	}
}

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

	#carouselArea .sliderWrapper {
		background-color: #f2f2f2;
	}

	#carouselArea .slider {
		display: none;
		width: 1040px;
		margin: 0 auto;
		opacity: 0;
	}

	#carouselArea .slider.active {
		display: block;
		animation-duration: 2s;
		animation-fill-mode: forwards;
		animation-name: displayAnime;
	}

	@keyframes displayAnime {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	#carouselArea .slider li picture {
		width: 600px;
		margin: 0 auto;
	}

	#carouselArea .slider .slick-arrow {
		z-index: 1;
		position: absolute;
		top: 50%;

		display: block;
		width: 36px;

		transform: translateY(-100%);
		cursor: pointer;
	}

	#carouselArea .slider .slick-arrow.next {
		right: 0;
	}

	#carouselArea .slider .slick-arrow.prev {
		left: 0;
	}

	#carouselArea .slider .slick-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 12px;
		height: 90px;
	}

	#carouselArea .slider .slick-dots li button {
		display: block;
		width: 14px;
		aspect-ratio: 1;

		border: 2px solid #535353;
		border-radius: 50%;

		color: transparent;
		font-size: 0px;
	}

	#carouselArea .slider .slick-dots li button+button {
		display: none !important;
	}

	#carouselArea .slider .slick-dots li[class*="active"] button {
		background: #535353;
	}

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

	#carouselArea .buttonArea .buttons li {
		width: 240px;
	}

	#carouselArea .buttonArea .buttonB,
	#carouselArea .buttonArea .buttonD {
		width: 100%;
	}

	#carouselArea .buttonArea .buttonB .a,
	#carouselArea .buttonArea .buttonD .a {
		padding: 10px 0;
	}

	#carouselArea .buttonArea .buttonB p,
	#carouselArea .buttonArea .buttonD p {
		font-size: 20px;
	}

	#carouselArea .notesArea {
		max-width: calc(240px * 5 + 2px * 4);
		margin: 0 auto;
	}

}

@media screen and (max-width: 599px) {
	#carouselArea .slider {
		width: calc(100vw - 60px);
	}

	#carouselArea .slider li picture {
		width: 100%;
	}

	#carouselArea .slider .slick-arrow {
		width: 15px;
	}

	#carouselArea .buttonArea .buttons:has(li:nth-child(3)) li {
		width: calc(100% / 3);
	}

	#carouselArea .buttonArea .buttons:has(li:nth-child(4)) li {
		width: calc(100% / 4);
	}

	#carouselArea .buttonArea .buttons:has(li:nth-child(5)) li {
		width: calc(100% / 5);
	}

	#carouselArea .buttonArea .buttons:has(li:nth-child(6)) li {
		width: calc(100% / 6);
	}

	#carouselArea .buttonArea .buttonB p,
	#carouselArea .buttonArea .buttonD p {
		font-size: 12px;
	}
}

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

		color: white;
		line-height: 1;
		text-align: center;
	}

	#buyArea .buttonArea {
		padding: 40px 65px;
		border: 1px solid black;
	}

	#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;
	}

	/* 電話番号 */
	#buyArea .contactTel {
		margin-top: 10px;
		font-size: 36px;
		font-weight: 900;
		line-height: 1.4;
		color: #C60757;
		font-family: var(--DIN);
	}

	/* 受付時間 */
	#buyArea .contactTime {
		margin-top: 8px;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.6;
	}

	/* 休日注記 */
	#buyArea .contactNote {
		margin-top: 4px;
		font-size: 12px;
		font-weight: 400;
		line-height: 1.6;
	}

	/* 3つのボタン */
	#buyArea .contactButtons {
		margin-top: 18px;
	}

	#buyArea .contactButtons .buttonC {
		width: 100%;
		margin-top: 10px;
	}

	#buyArea .contactButtons .buttonC:first-child {
		margin-top: 0;
	}

	/* 勝色ボタン */
	#buyArea .contactArea .contactButtons .buttonC a {
		width: 100%;
		min-width: 0;
		min-height: unset;
		padding: 8px 30px;
		box-sizing: border-box;

		background-color: #0b113e;
		border-color: #0b113e;
	}

	#buyArea .contactArea .contactButtons .buttonC a p {
		color: #ffffff;
		font-size: 13px;
		font-weight: 700;
		text-align: center;
	}

	#buyArea .contactArea .contactButtons .buttonC a::after {
		background-color: #ffffff;
	}

	/* hover時は白にせず、少し薄くする */
	#buyArea .contactArea .contactButtons .buttonC a:hover {
		background-color: #0b113e !important;
		border-color: #0b113e !important;
		opacity: 0.8;
	}

	#buyArea .contactArea .contactButtons .buttonC a:hover p {
		color: #ffffff;
	}
}

@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;
	}

	#buyArea .contactTel {
		font-size: 26px;
	}

	#buyArea .contactTime {
		font-size: 12px;
	}

	#buyArea .contactNote {
		font-size: 10px;
	}

	#buyArea .contactButtons {
		margin-top: 15px;
	}
}

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

@media screen and (max-width: 599px) {
	.sp-reverse {
		display: flex !important;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
}

/* ================================================================================
Extracted Style Block 1
================================================================================ */
@media screen and (min-width: 600px) {
	.stickyheader_wrapper {
		top: 110px !important;
	}
}

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

.topField {
	display: flex;
	justify-content: flex-end;
	padding: 60px 10px 10px;
}

.topField img {
	display: block;
	width: 210px;
}

/* ================================================================================
Extracted Style Block 3
================================================================================ */
.ms__flex {
	display: flex;
	width: 100%;
}

.ms__flex video {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
}

.ms__inner {
	align-items: center;
	box-sizing: border-box;
	background: #f0f0f0;
	display: flex;
	font-size: 14px;
	justify-content: center;
	padding: 0 2%;
	text-align: center;
}

.ms__inner__mov {
	margin-bottom: 1em;
	pointer-events: none;
}

.ms__flex picture {
	width: 100%;
}

.ms__flex picture img {
	object-fit: cover;
	object-position: center;
}

@media screen and (max-width: 768px) {
	.ms__flex {
		flex-wrap: wrap;
	}

	.ms__inner {
		padding: calc(50 / 768 * 100vw) 0;
		width: 100%;
	}
}

/* ================================================================================
Extracted Style Block 4
================================================================================ */
.nikkei_computer {
	padding: 80px 30px 0 !important;
}

.nikkei_computer>.inner {
	container-type: inline-size;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

.nikkei_computer img {
	display: block;
	width: 100%;
	margin: 0 auto 0.5rem;
}

.nikkei_computer p {
	padding-left: 25.5cqw;
	font-size: 0.8rem;
	/* text-align: center;  */
}