@charset "utf-8";

:root {
	/* base */
	--cts-gutter: clamp(17px, -1.512rem + 8.91vw, 65px);/*375-768*/
	--cts-width: 1501px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;
	/* Noto Sans JP
	Noto Sans JP Thin 100
	Noto Sans JP Light 300
	Noto Sans JP Regular 400
	Noto Sans JP Medium 500
	Noto Sans JP Bold 600
	*/
	--cts-font-1: "m-plus-1p", sans-serif;
	/* font-weight: 400;
	font-weight: 500;
	font-weight: 700; */

	--dp-h1-size: clamp(24px,calc(1.159rem + 1.45vw),36px);
	--dp-h2-size: clamp(20px,calc(1.023rem + .97vw),28px);
	--dp-h3-size: clamp(18px,calc(.955rem + .73vw),24px);
	--dp-h4-size: clamp(16px,calc(.886rem + .48vw),20px);
	--dp-p-l-size: clamp(14px, 0.806rem + 0.3vw, 16px);/* 本文 Large */
	--dp-p-note-size: clamp(10px,calc(.597rem + .12vw),11px);/* 本文 Notes */
	--dp-price-s-size: clamp(16px,calc(.886rem + .48vw),20px);/* 価格 Small */
	--dp-price-tax-s-size: clamp(12px,calc(.693rem + .24vw),14px);/* 円・税 Small */

	--cts-font-size: clamp(12px, 0.636rem + 0.48vw, 16px);
	--cts-font-ls: .025em;/*letter-spacing*/

	/* color */
	--cts-color1: #FFFFFF;
	--cts-color2: #BFD9E5;
	--cts-color3: #7BCEF6;
	--cts-color4: #21B5FC;
	--cts-color5: #0C2A73;
	--cts-color6: #150F4D;
	--cts-color7: #FF9CCE;
	--cts-color8: #333333;
	--cts-color9: #241C1B; 
}


/* LP共通汎用
____________________*/
#container a, #container a span {
    color: inherit;
    text-decoration: none;
}
.pagetop {
	display: none;	
}
#pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 55px;
}
#pagetop a {
	color: #fff;
	background-color: #333;
	border-radius: 5px;
	display: block;
	font-size: 12px;
	line-height: 1.5em;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
}
figure {
	margin: 0;
	text-align: center;
}
img {
	image-rendering: -webkit-optimize-contrast;
}
.l-header {
    width: 100%;
    background: #fff;
    position: relative;
}
.c-breadcrumb--gray {
	display: flex;
	align-items: center;
}
.bnr_link_win11_wrap {
    margin: 0 auto;
}
.bnr_link_win11 img {
    transition: opacity 0.3s;
    width: 300px;
}
.bnr_link_win11 img:hover {
	opacity: 0.75;
}
.BreadcrumbList_wrap {
	background: #fff;
	position: relative;
    z-index: 2;
}
.footer-wrap {
    background: #fff;
    position: relative;
    z-index: 2;
}
@media screen and (min-width: 768px), print and (min-width: 768px) {
	.c-breadcrumb__list.u-pc-width,
	.bnr_link_win11_wrap.u-pc-width {
		padding-inline: 30px;
	}
	.bnr_link_win11_wrap.u-pc-width {
		width: auto;
	}
}
@media screen and (max-width: 1000px) {
	.c-breadcrumb--gray {
		display: inherit;
	}
	.bnr_link_win11_wrap {
		width: 100%;
		margin: 10px auto 0;
		padding-block-end: 10px;
	}
	.bnr_link_win11 {
		width: 100%;
		margin-top: 0;
		text-align: center;
	}
}
.contents__wrap {
	width: 100%;
	margin-inline: auto;
	background: var(--cts-color1);
	font-size: var(--cts-font-size);
	font-family: var(--dp-font-jp);
	font-weight: 400;
	color: var(--cts-color1);
	overflow: hidden;
}
.contents__wrap img {
	max-width: 100%;
	vertical-align: bottom;
}
.contents {
	margin-top: 120px;
	margin-bottom: 120px;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}
.flash:hover {
	animation-name: hover-flash;
	animation-duration: 1s;
	opacity: .85;
}
@keyframes hover-flash {
	0% {
		opacity: .3;
	}
	100% {
		opacity: .85;
	}
}
.contents__inner {
	width: 100%;
	max-width: var(--cts-width);
	margin-inline: auto;
	padding-inline: var(--cts-gutter);
	box-sizing: border-box;
}
.contents__wrap .link__inner {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-block: clamp(5px,0.236rem + 1.38vw,12px);
	padding-inline: clamp(25px,0.737rem + 2vw,40px);
	margin-top: 10px;
	min-height: 50px;
	background: var(--dp-color);
	font-size: clamp(15px, 0.545rem + 1.61vw, 18px);
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	letter-spacing: var(--cts-font-ls);
	box-sizing: border-box;
	overflow: hidden;
	z-index: 1;
	border-radius: 4px;
	width: 100%;
}
.link__inner::before {
	position: absolute;
	content: "";
	width: 150%;
	height: 100%;
	top: 0;
	left: -168%;
	background: #fff;
	transform: skewX(-18deg);
	opacity: .3;
	z-index: -1;
}
.link__inner::after {
	content: "";
	position: absolute;
	top: calc(50% - 5px);
    right: 24px;
    width: 9px;
    height: 9px;
    border-right: 1px solid;
    border-bottom: 1px solid;
	border-color: #fff;
	transform: rotate(-45deg);
}
.link--over::before {
	animation: link-over ease-out .4s both;
}
.link--out::before {
	animation: link-out ease-in .4s both;
}
@keyframes link-over {
	0% {
		left: -168%;
	}
	100% {
		left: -18%;
	}
}
@keyframes link-out {
	0% {
		left: -18%;
	}
	100% {
		left: 168%;
	}
}

/* コンテンツ
____________________*/
.contents__wrap {
	padding-block-end: 0;
}
.contents__wrap .link__inner {
	color: var(--cts-bg);
	font-size: clamp(15px, 0.545rem + 1.61vw, 17px);
	font-weight: 700;
	background: var(--cts-color);
	border-radius: 50px;
	padding-block:0;
    padding-inline: 0;
	margin-top: 20px;
	max-width: 255px;
}
.contents__wrap .link__inner span {
	position: relative;
	padding-block: clamp(5px,0.236rem + 1.38vw,14px);
    padding-inline: clamp(10px,0.337rem + 2vw,40px);
	width: 100%;
	height: 100%;
}
.ttl_wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.ttl_wrap h2 {
	width: 100%;
	font-size: clamp(30px, 0.245rem + 2.61vw, 60px);
	line-height: 1.7;
	text-align: center;
}
.ttl_wrap .ttl_decoration {
	width: 100%;
	max-width: 374px;
	margin: 70px 0 0;
}
/* mv
____________________*/
.contents--mv {
	width: 100%;
	padding: 0;
	position: relative;
	z-index: 2;
	margin-top: 0;
	margin-bottom: 0;
}
.contents--mv img {
	width: 100%;
	padding: 0;
	position: relative;
	vertical-align: bottom;
}
/* read
____________________*/
.contents--read {
	background: rgb(59,41,117);
	background: linear-gradient(0deg, rgba(59,41,117,1) 0%, rgba(12,42,115,1) 50%);
	margin: 0;
	padding-top: 5.73vw;
	padding-bottom: 5.73vw;
	position: relative;
}
.contents--read::before {
	content: "";
	background: url(../../general_note/img/new-note-pc2024/bg_1.webp) no-repeat left top/100%;
	width: 100%;
	height: 100%;
	position: absolute;
	left: -5vw;
	top: 0;
	z-index: 1;
}
.read {
	max-width: inherit;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.read_inner_wrap {
	color: var(--cts-color1);
	position: relative;
	z-index: 2;
	margin-left: auto;
}
.read_ttl {
	/* font-size: clamp(17px, 0.245rem + 2.61vw, 40px); */
	font-size: 2.084vw;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 1px;
}
.read_txt {
	/* font-size: clamp(12px, 0.245rem + 1.61vw, 30px); */
	font-size: 1.565vw;
    font-weight: 500;
	line-height: 2.2;
	letter-spacing: 1px;
	margin: 2.09vw 0 0;
}
/* youtube
____________________*/
.contents--youtube {
	padding-top: 120px;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
}
.youtube_block {
	width: 100%;
	max-width: 1024px;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
}
.youtube_block iframe {
	width: 100%;
	height: 100%;
}
/* lineup
____________________*/
.contents--lineup {
	background: var(--cts-color1);
	position: relative;
	z-index: 2;
	padding-top: 110px;
	padding-bottom: 77px;
	margin-top: 0;
	margin-bottom: 0;
}
.lineup .ttl_wrap h2 {
	color: var(--cts-color9);
}
.lineup .lineup--list {
	width: 100%;
	margin: 70px auto 0;
	display: flex;
	justify-content: center;
	align-items: stretch;
    flex-wrap: wrap;
	gap: 20px;
}
.lineup .lineup--list .lineup--list_item {
	width: 100%;
	max-width: 442px;
	padding: 28px 26px 45px;
	color: var(--cts-color1);
	background: rgb(4,3,15);
	background: linear-gradient(0deg, rgba(4,3,15,1) 0%, rgba(21,62,231,1) 100%);
	box-sizing: border-box;
}
.catch_warp {
	position: relative;
	display: inline-block;
	padding: 12px 10px;
	width: 100%;
	color: var(--cts-color1);
	text-align: center;
	border: 4px solid var(--cts-color1);
	box-sizing: border-box;
}

.catch_warp:before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
    margin-left: -12px;
    border: 12px solid transparent;
    border-top: 24px solid var(--cts-color1);
}

.catch_warp .catch {
	font-size: clamp(15px, 0.245rem + 1.31vw, 22px);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
}
.catch_warp .catch .regular {
	font-weight: 400;
}
.catch_warp .catch .pink {
	color: var(--cts-color7);
}
.lineup .lineup--list .lineup--list_item .model__detail {
	width: 100%;
	padding: 20px 0 0;
	box-sizing: border-box;
}
.lineup .lineup--list .lineup--list_item .model_image {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: end;
}
.lineup .lineup--list .lineup--list_item .model_image.bg_white {
	background: var(--cts-color1);
}
.lineup .lineup--list .lineup--list_item:nth-of-type(1)  .model_image img,
.lineup .lineup--list .lineup--list_item:nth-of-type(2)  .model_image img{
	max-width: calc(100% * 0.9);
}
.model__txt {
	margin-top: 5px;
	text-align: center;
}
.model__name {
	width: 100%;
	font-size: clamp(21px, 0.545rem + 1.61vw, 30px);
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.3;
	text-align: center;
	margin: 10px 0 0;
}
.model__spec-list {
	font-size: clamp(15px, 0.245rem + 1.61vw, 22px);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.8px;
	margin: 20px 0 0;
}
.model__spec-list .model__spec-item .spec__data {
	display: inline-block;
}
.model__price_block {
	width: 100%;
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.model__price {
	color: var(--cts-color4);
	font-family: var(--cts-font-1);
	font-size: clamp(15px, 0.245rem + 1.61vw, 22px);
	font-weight: 400;
	letter-spacing: 1px;
}
.model__price .model__tax {
	font-size: 20px;
}
.model__price_block .link__inner {
	color: var(--cts-color5);
	font-weight: 700;
	max-width: 360px;
	background: var(--cts-color4);
	border-radius: 0;
}
.model__price_block .link__inner::after {
	border-color: var(--cts-color5);
	border-right: 3px solid;
    border-bottom: 3px solid;
}
.txt_link_wrap {
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin: 55px 0 0;
}
.txt_link_inner{

}
.txt_link_wrap .txt_link {
	color: var(--cts-color6);
	font-size: clamp(19px, 0.545rem + 1.61vw, 30px);
	font-weight: 500;
	letter-spacing: 0.5px;
	line-height: 1.3;
	padding: 0 30px 0 0;
	position: relative;
	text-decoration: none;
	display: block;
}
.txt_link_wrap .txt_link::before {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #000000;
	bottom: -1px;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: transform 0.3s;
}
.txt_link_wrap .txt_link:hover::before {
	transform: scale(1, 1);
}
.txt_link_wrap .txt_link::after {
	content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 15px;
    width: 14px;
    height: 14px;
    border-right: 4px solid;
    border-bottom: 4px solid;
    border-color: var(--cts-color6);
    transform: rotate(-45deg);
}
.txt_link_wrap .txt_link_note {
	color: var(--cts-color6);
	font-size: clamp(14px, 0.445rem + 1.61vw, 17px);
	font-weight: 400;
	margin: 10px 0 0;
}
/* special
____________________*/
.contents--special {
	background: var(--cts-color6) url(../../general_note/img/new-note-pc2024/bg_2.webp) no-repeat center top/100%;
	padding-top: 125px;
	padding-bottom: 155px;
	position: relative;
	z-index: 1;
}
.contents--special::before {
	content: "";
	background: url(../../general_note/img/new-note-pc2024/bg_2_2.webp) no-repeat center center/100%;
	mix-blend-mode: screen;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}
.ttl_wrap {
	position: relative;
	z-index: 2;
}
.image_cpu {
	width: 100%;
	max-width: 244px;
	margin: 60px auto 0;
	position: relative;
	z-index: 2;
}
.about_cpu {
	font-size: clamp(16px, 0.445rem + 1.61vw, 22px);
	font-weight: 400;
	line-height: 1.9;
	text-align: center;
	margin: 60px 0 0;
	position: relative;
	z-index: 2;
}
.cpu_catch {
	font-size: clamp(27px, 0.445rem + 3.61vw, 60px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 4px;
	text-align: center;
	margin: 147px 0 0;
	position: relative;
	z-index: 2;
}
.point_list {
	margin: 110px 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px 25px;
	position: relative;
	z-index: 2;
}
.point_list_item {
	color: var(--cts-color6);
	width: 100%;
	max-width: 440px;
	padding: 5px 25px 22px;
	background: rgb(0,191,252);
	background: linear-gradient(0deg, rgba(0,191,252,1) 0%, rgba(182,235,255,1) 60%, rgba(255,255,255,1) 100%);
	box-sizing: border-box;
}
.point_list_item .point_symbol {
	font-size: 22px;
	font-weight: 500;
	text-align: center;
	display: block;
	width: 100px;
	margin: 0 auto 12px;
	position: relative;
}
.point_list_item .point_symbol::before {
	content: "";
	width: 100%;
	height: 2px;
	background: var(--cts-color6);
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
}
.point_list_item .point_symbol::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top: 12px solid var(--cts-color6);
}
.point_list_item .point_symbol .number {
	font-size: 40px;
}
.point_list_item .point_ttl {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	margin: 20px 0 0;
}
.point_list_item .point_image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px 0 0;
}
.point_list_item:nth-of-type(1) .point_image img {
	width: 113px;
}
.point_list_item:nth-of-type(2) .point_image img {
	width: 107px;
}
.point_list_item:nth-of-type(3) .point_image img {
	width: 113px;
}
.point_list_item .point_txt {
	font-size: clamp(17px, 0.545rem + 1.61vw, 22px);
    font-weight: 400;
	line-height: 1.7;
    letter-spacing: 0.7px;
	width: 100%;
	max-width: 386px;
	margin: 20px auto 0;
	display: block;
}
.movie_wrap {
	width: 100%;
	max-width: 1024px;
	margin: 180px auto 0;
	aspect-ratio: 16 / 9;
	position: relative;
	z-index: 2;
}
.movie_wrap video {
	width: 100%;
	height: 100%;
}
/* campaign
____________________*/
.campaign .ttl_wrap {
	color: var(--cts-color8);
	position: relative;
}
.campaign {
	color: var(--cts-color8);
}
.campaign .ttl_wrap::before {
	content: "CAMPAIGN";
	color: var(--cts-color3);
	font-size: 22px;
}
.campaign_inner {
	width: 100%;
	max-width: 1200px;
	margin: 70px auto 0;
}
.blue_box {
	color: var(--cts-color1);
	text-align: center;
	padding: 35px 70px;
	background: var(--cts-color5);
}
.blue_box .txt_1 {
	font-size: clamp(14px, 0.345rem + 1.61vw, 24px);
    font-weight: 500;
	line-height: 1.4;
	letter-spacing: 1.5px;
}
.blue_box .txt_2 {
	font-size: clamp(30px, 0.545rem + 3.61vw, 60px);
    font-weight: 700;
	line-height: 1.3;
	margin: 15px 0 0;
}
.sky_blue {
	color: var(--cts-color3);
}
.yellow_line {
	position: relative;
}
.yellow_line::after {
	content: "";
	width: 100%;
	height: 5px;
	background: #F6F643;
	position: absolute;
	bottom: 0;
	left: 0;
}
.blue_box_note {
	font-size: clamp(15px, 0.545rem + 1.61vw, 20px);
	margin: 10px 0 0;
}
.cp_detail_wrap {
	margin: 50px 0 0;
}
.cp_ttl {
	font-size: 22px;
	font-weight: 700;
	position: relative;
	padding: 0 0 15px;
}
.cp_ttl:nth-of-type(n+2) {
	margin: 35px 0 0;
}
.cp_ttl::before,
.cp_ttl::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
}
.cp_ttl::before {
	width: 229px;
	height: 3px;
	background: var(--cts-color5);
	z-index: 2;
}
.cp_ttl::after {
	width: 100%;
	height: 3px;
	background: var(--cts-color2);
	z-index: 1;
}
.cp_txt {
	font-size: clamp(16px, 0.545rem + 1.61vw, 22px);
	line-height: 1.7;
	margin: 25px 0 0;
}
.cp_note_list {
	font-size: clamp(15px, 0.545rem + 1.61vw, 20px);
	line-height: 1.7;
	margin: 25px 0 0;
}
.cp_note_list_item {
	text-indent: -1em;
	margin-left: 1em;
}
.cpend_inner {
	padding: 35px 70px;
	margin: 70px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
}
.cpend_inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: #BFD9E5;
}
.cpend_inner::after {
	content: "";
	border: 1px solid var(--cts-color1);
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	position: absolute;
	top: 0;
	left: 0;
	margin: 5px; 
	box-sizing: border-box;
	z-index: 1;
}
.cpend_txt {
	font-size: clamp(18px, 0.345rem + 1.61vw, 24px);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1.5px;
	text-align: center;
	position: relative;
	z-index: 2;
}
.cpend_txt2 {
	font-size: clamp(16px, 0.545rem + 1.61vw, 22px);
	font-weight: 500;
	margin: 1.5em 0 0;
	line-height: 1.7;
    letter-spacing: 1.5px;
	position: relative;
	z-index: 2;
}
/* copilot
____________________*/
.contents--copilot {

}
.copilot .ttl_wrap h2 {
    color: var(--cts-color9);
}
.copilot-read {
	color: var(--cts-color9);
	font-size: clamp(16px, 0.445rem + 1.61vw, 22px);
    font-weight: 400;
    line-height: 1.9;
    text-align: center;
    margin: 60px 0 0;
}
.slider_wrap {
	position: relative;
}
.slider_wrap .slider {
	padding-top: 60px;
	padding-top: 3.75rem;
	padding-bottom: 30px;
	padding-bottom: 1.875rem;
	max-width: clamp(1307.008px, 638px + 46.46vw, 1530px);
	max-width: clamp(81.688rem, 39.875rem + 46.46vw, 95.625rem);
	margin-left: auto;
}
.slider_wrap .splide {
	position: relative;
	padding-bottom: 30px;
	padding-bottom: 1.875rem;
}
.splide__track {
	overflow: visible;
}
.splide__pagination {
	display: none;
}
.slider_wrap .splide__arrows {
	position: absolute;
	bottom: -10px;
	right: clamp(220px, -500px + 50vw, 460px);
	right: clamp(13.75rem, -31.25rem + 40vw, 60.75rem);
}
.splide__arrow {
	width: 3em;
	height: 3em;
}
.slider_wrap .splide__arrow:hover {
	background: #484848;
}
.slider_wrap .splide__arrow.next {
	right: auto;
	left: 1em;
}
.slider_wrap .splide__arrow.next span {
	position: relative;
	width: 100%;
	height: 100%;
}
.slider_wrap .splide__arrow.next span::after {
	position: absolute;
	content: "";
	display: block;
	top: 35%;
	left: 33%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0 2px 2px 0;
	border-color: #fff;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.slider_wrap .splide__arrow.prev {
	left: auto;
	right: 1em;
}
.slider_wrap .splide__arrow.prev span {
	position: relative;
	width: 100%;
	height: 100%;
}
.slider_wrap .splide__arrow.prev span::after {
	position: absolute;
	content: "";
	display: block;
	top: 35%;
	left: 41%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 0 2px 2px 0;
	border-color: #fff;
	width: 12px;
	height: 12px;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.slider_wrap .sliderItem {
	position: relative;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f9e0e0), to(#ece5ff));
	background-image: linear-gradient(180deg, #f9e0e0 0%, #ece5ff 100%);
	padding-top: clamp(20px, 10.464px + 2.54vw, 30px);
	padding-top: clamp(1.25rem, 0.654rem + 2.54vw, 1.875rem);
	border-radius: 20px;
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
}
.slider_wrap .sliderItem_body {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	/* 高さを調整する際に必要 */
	padding-inline: 20px;
	padding-inline: 1.25rem;
	padding-bottom: 20px;
}
.slider_wrap .sliderItem_title {
	font-family: "Noto Sans JP";
	font-size: clamp(1.25rem, 1.011rem + 1.02vw, 1.5rem);
	font-weight: bold;
	color: #141314;
	line-height: 1.5;
	letter-spacing: 0.06em;
	padding-bottom: clamp(1.25rem, 0.654rem + 2.54vw, 1.875rem);
}
.slider_wrap .sliderItem_title .rice-symbol {
	font-size: clamp(.5rem, 1.011rem + 1.02vw, 0.75rem);
	font-weight: normal;
	vertical-align: baseline;
}
.slider_wrap .sliderItem_text {
	color: var(--cts-color8);
	font-size: clamp(12px, 8.176px + 1.02vw, 16px);
	font-size: clamp(0.75rem, 0.511rem + 1.02vw, 1rem);
}
.slider_wrap .sliderItem_img {
	width: 100%;
	margin-top: auto;
	margin-bottom: 0;
}
.slider_wrap .caution {
	font-size: clamp(10px, 8.096px + 0.51vw, 12px);
	font-size: clamp(0.625rem, 0.506rem + 0.51vw, 0.75rem);
	font-weight: normal;
	line-height: 1.666666;
	letter-spacing: 0.06em;
	color: #484848;
}
.slider_wrap .caution_link {
	display: inline-block;
	position: relative;
	color: #00a2e6;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.slider_wrap .caution_link:hover {
	text-decoration: none;
}
.slider_wrap .caution_icon {
	padding-top: 4px;
}
.cp_note {
	color: #484848;
	font-size: clamp(10px, 8.096px + 0.51vw, 12px);
	line-height: 1.4;
	letter-spacing: 0.06em;
	margin-top: 1.875rem;
}
.cp_note li {
	text-indent: -2em;
	margin-left: 2em;
	margin-top: 0.4em;
}
@media screen and (max-width: 1439px) {
	.slider_wrap .slider {
		max-width: clamp(56.75rem, -4.783rem + 96.14vw, 81.688rem);
	}
	.slider_wrap .splide {
		padding-bottom: 3.75rem;
	}
	.slider_wrap .splide__arrows {
		bottom: 20px;
	}
}
@media screen and (max-width: 1023px) {
	.slider_wrap .slider {
		max-width: clamp(40.875rem, -6.998rem + 99.61vw, 56.688rem);
	}
}
/* review
____________________*/
.contents--review {
	background: rgb(0,191,252);
	background: linear-gradient(0deg, rgba(0,191,252,1) 0%, rgba(182,235,255,1) 60%, rgba(255,255,255,1) 100%);
	padding-top: 125px;
	padding-bottom: 125px;
	position: relative;
	z-index: 1;
}
.review .ttl_wrap {
	color: var(--cts-color9);
}
.review--list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 20px;
	margin: 70px auto 0;
}
.review--list_item {
	color: var(--cts-color8);
	background: var(--cts-color1);
	width: 100%;
    padding: 25px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	box-sizing: border-box;
}
.reviewer-logo {
	width: 100%;
	max-width: 240px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--cts-color1);
	box-sizing: border-box;
}
.review--list_item:nth-of-type(3) .reviewer-logo img {
	max-width: 120px;
}
.review-date {
    color: var(--cts-color4);
    font-family: var(--cts-font-1);
    font-size: clamp(15px, 0.245rem + 1.61vw, 20px);
    font-weight: 500;
    letter-spacing: 1px;
}
.ttl__wrap {
	position: relative;
	border-left: 2px solid var(--cts-color2);
	padding-left: 20px;
}
.review-ttl {
	font-size: clamp(20px, 0.545rem + 1.61vw, 24px);
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1.5;
	margin-top: 5px;
}
.review--list_item .link__inner {
	color: var(--cts-color5);
    font-weight: 700;
	text-align: left;
    max-width: 220px;
    background: var(--cts-color4);
    border-radius: 0;
	margin-top: 0;
	margin-left: auto;
}
.review--list_item .link__inner::after {
	border-color: var(--cts-color5);
    border-right: 3px solid;
    border-bottom: 3px solid;
}
@media (max-width: 768px) {/*375-768*/
	.pc {
		display: none !important;
	}
	.sp {
		display: block !important;
	}
/* コンテンツ
____________________*/
.contents {
	margin-top: 50px;
	margin-bottom: 50px;
}
.contents__wrap .bg {
	background: none;
}
/* mv
____________________*/
.contents--mv {
	margin-top: 0;
	margin-bottom: 0;
}
.contents--mv .pc {
	display: none !important;
}
.contents--mv .sp {
	display: block !important;
}
/* read
____________________*/
.contents--read {
	margin-top: 0;
	margin-bottom: 0;
}
.contents--read::before {
	background: url(../../general_note/img/new-note-pc2024/bg_1_sp.webp) no-repeat left top / 100%;
	left: 0;
}
.read {
	flex-direction: column;
}
.read_inner_wrap {
	margin-top: 69vw;
	margin-left: 0;
}
.read_ttl {
	font-size: 4.54vw;
	letter-spacing: 0.1px;
}
.read_txt {
	font-size: 3.2vw;
	letter-spacing: 0.1px;
}
/* youtube
____________________*/
.contents--youtube {
	padding-top: 60px;
	padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}
/* lineup
____________________*/
.contents--lineup {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 65px;
	padding-bottom: 65px;
}
.lineup .lineup--list {
	margin: 35px 0 0;
}
.lineup .lineup--list .lineup--list_item {
	max-width: 315px;
}
.lineup .lineup--list .lineup--list_item .model_image{
	max-width: 256px;
}
.txt_link_wrap {
	align-items: center;
	margin: 35px 0 0;
}
.txt_link_wrap .txt_link::after {
	width: 12px;
    height: 12px;
    border-right: 3px solid;
    border-bottom: 3px solid;
}
.txt_link_wrap .txt_link_note {
	text-align: center;
}
/* special
____________________*/
.contents--special {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 50px;
	padding-bottom: 50px;
}
.contents--special::before {
	width: 552px;
	height: 524px;
	background: url(../../general_note/img/new-note-pc2024/bg_2_2_sp.webp) no-repeat center center / 100%;
	top: 32%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.image_cpu {
	max-width: 160px;
	margin: 35px auto 0;
}
.about_cpu {
	text-align: left;
	margin: 50px auto 0;
	width: 83%;
}
.cpu_catch {
	line-height: 1.8;
	letter-spacing: 1px;
	margin: 30px 0 0;
}
.point_list{
	margin: 60px 0 0;
	gap: 25px 25px;
}
.point_list_item {
	padding: 5px 17px 22px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.point_list_item .point_ttl {
	text-align: left;
}
.point_list_item:nth-of-type(1) .point_image img {
	width: 133px;
}
.point_list_item:nth-of-type(2) .point_image img {
	width: 107px;
}
.point_list_item:nth-of-type(3) .point_image img {
	width: 113px;
}
.movie_wrap {
	margin: 65px auto 0;
}
/* campaign
____________________*/
.contents--campaign {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 35px;
	padding-bottom: 50px;
}
.campaign_inner {
	margin: 30px auto 0;
}
.blue_box {
	padding: 25px 15px;
}
.blue_box .txt_1 {
	letter-spacing: -0.5px;
}
.blue_box .txt_2 {
	margin: 20px 0 0;
	line-height: 1.6;
}
.cp_ttl:nth-of-type(n+2) {
	margin: 25px 0 0;
}
.cp_txt {
	margin: 15px 0 0;
}
.cp_note_list {
	margin: 15px 0 0;
}
.cpend_inner {
	margin: 35px 0 0;
	padding: 25px 15px;
}
/* copilot
____________________*/
.slider_wrap .slider {
	padding-left: 1.5625rem;
	}
.slider_wrap .splide__arrows {
	right: clamp(3.75rem, 1.365rem + 10.18vw, 6.25rem);
}
.slider_wrap .caution {
	padding-top: 30px;
}
.ttl__wrap {
	padding-left: 0;
	border: none;
}
.review--list_item .link__inner {
	margin-left: inherit;
}
/* review
____________________*/
.contents--review {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 50px;
}
.review--list_item {
	flex-direction: column;
}
.review--list_item .link__inner {
	margin-left: inherit;
	width: 100%;
	max-width: inherit;
	text-align: center;
}
}
@media (max-width: 479px) {
	.contents--mv .pc {
		display: none;
	}
	.contents--mv .sp {
		display: block;
	}
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}

/*==================================================
パタッ
===================================*/


/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/


/* X 軸（縦へ） */
.rotateX{
	animation-name:rotateXAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateXAnime{
	from{
		transform: rotateX(0);
		opacity: 0;
		}
	to{
		transform: rotateX(-360deg);
		opacity: 1;
		}
}

/*　Y軸（横へ） */
.rotateY{
	animation-name:rotateYAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateYAnime{
	from{
		transform: rotateY(0);
		opacity: 0;
		}
	to{
		transform: rotateY(-360deg);
		opacity: 1;
		}
}

/* Z 軸（左へ） */
.rotateLeftZ{
	animation-name:rotateLeftZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateLeftZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(-360deg);
		opacity: 1;
		}
}

/*　Z 軸（右へ） */
.rotateRightZ{
	animation-name:rotateRightZAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes rotateRightZAnime{
	from{
		transform: rotateZ(0);
		opacity: 0;
		}
	to{
		transform: rotateZ(360deg);
		opacity: 1;
		}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(0.6);
	opacity: 0;
  }

  to {
    transform: scale(1);
	opacity: 1;
  }
}

/* 縮小 */
.zoomOut{
	animation-name:zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.zoomInTrigger,
.zoomOutTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blurTrigger{
    opacity: 0;
}

/*==================================================
にゅーん
===================================*/

/* 滑らかに変形して出現 */
.smooth{
	animation-name:smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  　transform-origin: left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:var(--cts-color);/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:var(--cts-color);/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
	top:0;
	left:0;
}

.lineTrigger.lineanime::before {
	animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
}

.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
	opacity: 0;/*初期値を透過0にする*/	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--cts-color);/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*右から*/
.bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgRLextendAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/*下から*/
.bgDUextend::before{
	animation-name:bgDUextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgDUextendAnime{
	0% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
	50% {
		transform-origin:bottom;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:top;
	}
	100% {
		transform-origin:top;
		transform:scaleY(0);
	}
}

/*上から*/
.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger{
    opacity: 0;
}




/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
	animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
	animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
	animation-delay: 0.5s;
}

.delay-time1{  
	animation-delay: 1s;
}

.delay-time15{  
	animation-delay: 1.5s;
}

.delay-time2{  
	animation-delay: 2s;
}

.delay-time25{  
	animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
	animation-duration: 0.5s;
}

.change-time1{  
	animation-duration: 1s;
}

.change-time15{  
	animation-duration: 1.5s;
}

.change-time2{  
	animation-duration: 2s;
}

.change-time25{  
	animation-duration: 2.5s;
}