@charset "utf-8";

:root {
	/* base */
	--cts-gutter: clamp(30px, -2.212rem + 8.91vw, 65px);/*375-768*/
	--cts-width: 1610px;

	/* font */
	--dp-font-jp: "Noto Sans JP", sans-serif;      
	/* 
	100 to 900
	*/
	/* color */
	--color-white-1: #FFFFFF;
	--color-white-2: #FBFBFB;
	--color-white-3: #EBEBEB;
	--color-gray-2: #4E4E4E;
	--color-gray-3: #999999;
	--color-gray-4: #464646;
	--color-gray-5: #7A7A7A;
	--color-purple-1: #5E1C87;
	--color-green-1: #00C479;
	--color-yellow-1: #F7C900;
	--color-orange-1: #FF5B00;
	--color-orange-2: #FFE7D9;
	--color-black-1: #000000;
}

/* LP共通汎用
____________________*/
body {
	padding-right: 0 !important;
	overflow: visible !important;
}
#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%;
	background: var(--cts-color-1);
	margin-inline: auto;
	font-size: var(--cts-font-size);
	font-family: var(--dp-font-jp);
	letter-spacing: 0.05em;
	color: var(--color-black-1);
}
.contents__wrap img {
	max-width: 100%;
	vertical-align: bottom;
}
.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;
	}
}

/* コンテンツ
____________________*/
::selection {
	color: var(--color-white-1);
	background-color: var(--color-orange-1);
}
.contents__wrap {
	background: var(--color-white-2);
	position: relative;
	z-index: 1;
}
.contents__inner {
	width: 100%;
	max-width: var(--cts-width);
	margin-inline: auto;
	padding-inline: var(--cts-gutter);
	box-sizing: border-box;
	position: relative;
}
.gray-wrap {
	background: var(--color-white-3);
	border-radius: 0 50px 50px 50px;
	padding-bottom: 40px;
	overflow: hidden;
}
.gray-wrap-inner {
	padding-inline: 45px;
}
.ttl-block {
	width: fit-content;
    position: relative;
    z-index: 1;
    padding: 20px 170px 20px 110px; 
}
.ttl-block::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-orange-1);
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 92% 100%, 0% 100%);
    z-index: -1; 
}
.ttl-block .ttl-h2 {
    margin: 0;
    color: var(--color-white-1);
	font-size: 40px;
    font-weight: 700;
    line-height: 1.5;
	position: relative;
	z-index: 2;
}
.txt-main {
	font-size: 18px;
	font-weight: 500;
	line-height: 2;
	text-align: center;
	margin-top: 50px;
}
.btn-link {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
	letter-spacing: 0;
    text-align: center;
    width: 100%;
    background: var(--color-black-1);
    color: #fff;
    padding-block: 15px;
    border-radius: 9999px;
    display: block;
    position: relative;
    text-decoration: none;
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.btn-link .arrow {
    width: 12px;
    height: 19px;
    background: url(../../create/img/creater-guide/arrow-3.webp) no-repeat center center/contain;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    transition: transform 0.3s ease;
}
@media (hover: hover) {
    .btn-link:hover {
        background: var(--color-orange-1);
    }
    .btn-link:hover .arrow {
        transform: translate(5px, -50%);
    }
}
@media (max-width: 1480px) { /*-1480*/
	.gray-wrap {
		border-radius: 0 3.378vw 3.378vw 3.378vw;
		padding-bottom: 2.703vw;
	}
	.gray-wrap-inner {
		padding-inline: 3.041vw;
	}
	.ttl-block {
		padding: 1.351vw 11.486vw 1.351vw 7.432vw;
	}
	.ttl-block .ttl-h2 {
		font-size: 2.703vw;
	}
	.txt-main {
		font-size: 1.216vw;
		margin-top: 3.378vw;
	}
	.btn-link {
		font-size: 1.216vw;
		padding-block: 1.014vw;
		border-radius: 675.608vw;
	}
	.btn-link .arrow {
		width: 0.811vw;
		height: 1.284vw;
		right: 1.351vw;
	}
}
@media (max-width: 768px) {/*-768*/
.pc {
display: none !important;
}
.sp {
    display: block !important;
}
.contents__wrap {
    padding-bottom: 0;
}
.ttl-block {
    /* 10px 50px 10px 30px */
    padding: 2.6667vw 13.3333vw 2.6667vw 8vw;
}
.ttl-block .ttl-h2 {
    /* 16px */
    font-size: 4.2667vw;
}
.txt-main {
    /* 12px */
    font-size: 3.2vw;
    letter-spacing: 0.11em;
    text-align: left;
    /* 25px */
    margin-top: 6.6667vw;
}
.btn-link {
    /* 10px */
    font-size: 2.6667vw;
    /* 14px */
    padding: 3.7333vw;
}
.btn-link .arrow {
    /* 8px */
    width: 2.1333vw;
    /* 13px */
    height: 3.4667vw;
    /* 15px */
    right: 4vw;
}
}
/* mv
____________________*/
.contents--mv {
	width: 100%;
	background: url(../../create/img/creater-guide/bg-kv-pc.webp) no-repeat center center / 100% 100%;
	aspect-ratio: 1920 / 500;
	position: relative;
	z-index: 1;
}
.contents--mv .mv {
	width: fit-content;
	position: absolute;
	left: 11.458333333333332vw;
	top: 4.53125vw;
	z-index: 2;
}
.contents--mv .mv .kv-tag {
	width: fit-content;
	background: var(--color-white-1);
	border-radius: 9999px;
	padding: 1.1979166666666667vw 2.34375vw;
}
.contents--mv .mv .kv-tag .txt-kv-tag {
	color: var(--color-black-1);
	font-size: 2.083333333333333vw;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}
.contents--mv .mv .ttl-h1 {
    color: var(--color-black-1);
    font-size: 4.166666666666666vw;
    font-weight: 700;
    line-height: 1.5;
	margin-top: 0.5208333333333333vw;
}
@media (max-width: 768px) {/*-768*/
	.contents--mv {
		background: url(../../create/img/creater-guide/bg-kv-sp.webp) no-repeat center center / 100% 100%;
		aspect-ratio: 375 / 235;
	}
	.contents--mv .mv {
		top: 6.133333333333333vw;
		left: 8.266666666666666vw;
	}
	.contents--mv .mv .kv-tag .txt-kv-tag {
		font-size: 4.266666666666667vw;
	}
	.contents--mv .mv .ttl-h1 {
		font-size: 6.666666666666667vw;
	}
}
/* intro
____________________*/
.contents--intro {
	padding-top: 70px;
}
.txt-intro {
	color: var(--color-black-1);
	font-size: 18px;
	font-weight: 500;
	line-height: 2.2;
	text-align: center;
}
@media (max-width: 1480px) {/*-1480*/
	.contents--intro {
	padding-top: 4.73vw;
	}
	.txt-intro {
	font-size: 1.216vw;
	}
}
@media (max-width: 768px) {/*-768*/
	.contents--intro {
		/* 30px / 375px * 100 */
		padding-top: 8vw;
	}
	.txt-intro {
		/* 13px / 375px * 100 */
		font-size: 3.4667vw;
	}
}
/* nav
____________________*/
.contents__wrap .page-nav {
    width: 100%;
    max-width: var(--cts-width);
	padding-inline: var(--cts-gutter);
    margin: 60px auto 0;
    position: sticky;
    top: 60px;
    z-index: 2;
}
.page-nav-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}
.page-nav-list li {
    width: 100%;
}
.page-nav-list li .page-nav-link {
    color: var(--color-black-1);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 18px;
    border: 1px solid var(--color-black-1);
    border-radius: 9999px;
    background: var(--color-white-1);
    display: block;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.page-nav-list li .page-nav-link .arrow {
    width: 24px;
    height: 14px;
    background: url(../../create/img/creater-guide/arrow-6.webp) no-repeat center center/contain;
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
}
.page-nav-list li .page-nav-link:hover .arrow {
	background: url(../../create/img/creater-guide/arrow-6.webp) no-repeat center center/contain;
}
.page-nav-list li .page-nav-link:hover .arrow {
    transform: translateY(calc(-50% + 4px));
}
.page-nav-list li .page-nav-link.is-active {
    color: var(--color-white-1);
    background-color: var(--color-orange-1);
}
.page-nav-list li .page-nav-link.is-active .arrow {
    background: url(../../create/img/creater-guide/arrow-7.webp) no-repeat center center/contain;
}
@media (max-width: 1480px) {/*-1480*/
	.contents__wrap .page-nav {
	margin: 4.054vw auto 0;
	top: 4.054vw;
	}
	.page-nav-list {
	gap: 1.689vw;
	}
	.page-nav-list li .page-nav-link {
	font-size: 1.351vw;
	padding: 1.216vw;
	border: 1px solid var(--color-black-1);
	border-radius: 675.608vw;
	}
	.page-nav-list li .page-nav-link .arrow {
	width: 1.622vw;
	height: 0.946vw;
	right: 2.365vw;
	}
	.page-nav-list li .page-nav-link:hover .arrow {
	transform: translateY(calc(-50% + 0.27vw));
	}
}
@media (max-width: 768px) {/*-768*/
	.contents__wrap .page-nav {
		/* 8px */
		padding-inline: 2.1333vw;
		/* 30px auto 0 */
		margin: 8vw auto 0;
		/* 30px */
		top: 8vw;
	}
	.page-nav-list {
		/* 4px */
		gap: 1.0667vw;
	}
	.page-nav-list li .page-nav-link {
		/* 11px */
		font-size: 2.9333vw;
		/* 8px */
		padding: 2.1333vw;
	}
	.page-nav-list li .page-nav-link .arrow {
		display: none;
	}
}
/* learn
____________________*/
.contents--learn {
	padding-top: 140px;
}
.learn-contents {
    display: flex;
    gap: 62px;
    margin: 70px auto 0;
}
/* ボタンを縦に配置 */
.learn-btn-wrap {
    display: flex;
    flex-direction: column;
    gap: 27px;
    width: 200px;
}
.learn-btn-wrap {
	width: 45.7%;
}
.learn-btn {
	color: var(--color-white-1);
	font-size: 22px;
	font-weight: 700;
	text-align: center;
    padding: 15px;
    background: var(--color-black-1);
	border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.3s;
	position: relative;
}
.learn-btn .arrow {
	width: 35px;
	height: 35px;
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	background: var(--color-white-1);
	border-radius: 50%;
}
.learn-btn .arrow::before {
	content: "";
	width: 13px;
    height: 22px;
	background: url(../../create/img/creater-guide/arrow-1.webp) no-repeat center center /contain;
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%,-50%);
}
/* ホバー時およびアクティブ時のボタンのスタイル */
.learn-btn:hover,
.learn-btn.active {
    background-color: var(--color-orange-1);
    color: #fff;
}
.learn-btn:hover .arrow::before,
.learn-btn.active .arrow::before {
	background: url(../../create/img/creater-guide/arrow-2.webp) no-repeat center center /contain;
}
.learn-btn .dotted-block {
	display: none;
}
.learn-btn.active .dotted-block {
	position: absolute;
	top: 50%;
	right: -85px;
	transform: translate(-50%,-50%);
	display: flex;
	gap: 6px;
}
.learn-btn.active .dotted-block .dotted {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-orange-1);
    animation: waveDotted 1.2s infinite ease-in-out;
	position: relative;
}
.learn-btn:nth-of-type(6).active .dotted-block {
	right: -145px;
}
.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(2) {
	top: -20px;
    left: -10px;
}
.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(3) {
	top: -40px;
    left: -20px;
}
.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(4) {
	top: -60px;
    left: -30px;
}
.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(5) {
	top: -80px;
    left: -40px;
}
.learn-btn.active .dotted-block .dotted:nth-child(1) {
    animation-delay: 0s;
}
.learn-btn.active .dotted-block .dotted:nth-child(2) {
    animation-delay: 0.2s;
}
.learn-btn.active .dotted-block .dotted:nth-child(3) {
    animation-delay: 0.4s;
}
.learn-btn.active .dotted-block .dotted:nth-child(4) {
    animation-delay: 0.6s;
}
.learn-btn.active .dotted-block .dotted:nth-child(5) {
    animation-delay: 0.8s;
}
@keyframes waveDotted {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
}

.learn-detail-wrap {
	width: calc(100% - 45.7% - 62px);
}

.learn-detail-content {
	background: var(--color-white-1);
	padding: 30px 35px;
    display: none;
	box-sizing: border-box;
	border-radius: 30px;
	display: none;
	opacity: 0;
	transition: opacity 0.4s ease-in-out; 
}

.learn-detail-content.active {
    display: block;
	animation: fadeIn 0.4s forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.learn-detail-content .ttl-h3 {
	color: var(--color-orange-1);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.spec-category {
	margin-top: 20px;
}
.spec-category:nth-of-type(n+2) {
	margin-top: 30px;
}
.learn-detail-content .ttl-h4 {
	font-size: 22px;
	font-weight: 700;
}
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.tag-list li {
	font-size: 20px;
	font-weight: 700;
	background: var(--color-white-3);
	border-radius: 12px;
	line-height: 1;
	padding: 12px 18px;
	box-sizing: border-box;
}
.txt-guideline {
	margin-top: 20px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: 0.03em;
}
.learn-note-1 {
	color: var(--color-orange-1);
	font-size: 18px;
	font-weight: 500;
	line-height: 2;
	margin-top: 15px;
}
.learn-note-2 {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
	margin-top: 40px;
}
.sp-none {
	display: inline-block;
}
@media (max-width: 1480px) {/*-1480*/
	.contents--learn {
	padding-top: 9.46vw;
	}
	.learn-contents {
	gap: 4.189vw;
	margin: 4.73vw auto 0;
	}
	.learn-btn-wrap {
	gap: 1.824vw;
	width: 38.514vw;
	}
	.learn-btn {
	font-size: 1.486vw;
	padding: 1.014vw;
	border-radius: 675.608vw;
	}
	.learn-btn .arrow {
	width: 2.365vw;
	height: 2.365vw;
	right: 0.811vw;
	}
	.learn-btn .arrow::before {
	width: 0.878vw;
	height: 1.486vw;
	}
	.learn-btn.active .dotted-block {
	right: -5.743vw;
	gap: 0.405vw;
	}
	.learn-btn.active .dotted-block .dotted {
	width: 0.946vw;
	height: 0.946vw;
	}
	.learn-btn:nth-of-type(6).active .dotted-block {
	right: -9.797vw;
	}
	.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(2) {
	top: -1.351vw;
	left: -0.676vw;
	}
	.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(3) {
	top: -2.703vw;
	left: -1.351vw;
	}
	.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(4) {
	top: -4.054vw;
	left: -2.027vw;
	}
	.learn-btn:nth-of-type(6).active .dotted-block .dotted:nth-child(5) {
	top: -5.405vw;
	left: -2.703vw;
	}
	.learn-detail-wrap {
	width: calc(100% - 45.7% - 4.189vw);
	}
	.learn-detail-content {
	padding: 2.027vw 2.365vw;
	border-radius: 2.027vw;
	}
	.learn-detail-content .ttl-h3 {
	font-size: 2.162vw;
	}
	.spec-category {
	margin-top: 1.351vw;
	}
	.spec-category:nth-of-type(n+2) {
	margin-top: 2.027vw;
	}
	.learn-detail-content .ttl-h4 {
	font-size: 1.486vw;
	}
	.tag-list {
	gap: 0.541vw;
	margin-top: 0.676vw;
	}
	.tag-list li {
	font-size: 1.351vw;
	border-radius: 0.811vw;
	padding: 0.811vw 1.216vw;
	}
	.txt-guideline {
	margin-top: 1.351vw;
	font-size: 1.216vw;
	}
	.learn-note-1 {
	font-size: 1.216vw;
	margin-top: 1.014vw;
	}
	.learn-note-2 {
	font-size: 0.946vw;
	margin-top: 2.703vw;
	}
}
@media (max-width: 768px) {/*-768*/
	.contents--learn {
    /* 40px */
    padding-top: 22.459vw;
}
.learn-contents {
    align-items: center;
    flex-direction: column;
    /* 40px */
    gap: 10.6667vw;
    /* 20px */
    margin-top: 5.3333vw;
}
.gray-wrap {
    /* 0 20px 20px 20px */
    border-radius: 0 5.3333vw 5.3333vw 5.3333vw;
    /* 30px */
    padding-bottom: 8vw;
}
.gray-wrap-inner {
    /* 20px */
    padding-inline: 5.3333vw;
}
.learn-btn.active .dotted-block {
    display: none;
}
.learn-btn-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    /* 252px */
    width: 72.8vw;
    /* 9px */
    gap: 2.4vw;
}
.learn-btn {
    /* 12px */
    font-size: 3.2vw;
    /* 45px */
    height: 12vw;
    padding-block: 0;
}
.learn-btn .arrow {
    display: none;
}
.learn-btn .arrow::before {
    /* 17px */
    width: 4.5333vw;
    /* 16px */
    height: 4.2667vw;
    transform: rotate(90deg);
    left: 14%;
    top: 21%;
}
.learn-detail-wrap {
    /* 273px */
    width: 72.8vw;
}
.learn-detail-content {
    /* 20px 10px */
    padding: 5.3333vw 2.6667vw;
}
.learn-detail-content .ttl-h3 {
    /* 24px */
    font-size: 6.4vw;
}
.spec-category {
    /* 15px */
    margin-top: 4vw;
}
.spec-category:nth-of-type(n+2) {
    /* 40px */
    margin-top: 10.6667vw;
}
.learn-detail-content .ttl-h4 {
    /* 13px */
    font-size: 3.4667vw;
}
.tag-list {
    /* 15px */
    margin-top: 4vw;
    /* 10px */
    gap: 2.6667vw;
}
.tag-list li {
    /* 12px */
    font-size: 3.2vw;
    /* 8px 6.5px */
    padding: 2.1333vw 1.7333vw;
    /* 8px */
    border-radius: 2.1333vw;
}
.txt-guideline {
    /* 12px */
    font-size: 3.2vw;
    /* 15px */
    margin-top: 4vw;
    letter-spacing: 0;
}
.learn-note-1 {
    /* 12px */
    font-size: 3.2vw;
    /* 25px */
    margin-top: 6.6667vw;
}
.learn-note-2 {
    /* 11px */
    font-size: 2.9333vw;
    text-align: left;
    /* 35px */
    margin-top: 9.3333vw;
}
.sp-none {
	display: none;
}
}
/* diagnosis
____________________*/
.contents--diagnosis {
	padding-top: 140px;
}
/* 1. 一番外側の枠 */
.chart-wrap-pc {
	display: grid;
	grid-template-columns: 259px repeat(3, 1fr);
	gap: 20px; 
	margin: 160px auto 0;
}
.chart-wrap-sp {
	display: none;
}
/* 2. 中にある各エリア（.area-1, .area-2） */
.area-1, .area-2 {
	grid-column: span 4; 
	display: grid;
	grid-template-columns: subgrid;
	gap: inherit; 
}
.area-1 .row-2,
.area-1 .row-3,
.area-1 .row-4 {
	padding: 25px;
	background: var(--color-white-1);
	border-radius: 30px;
	position: relative;
}
.row-2 .area-1-icon,
.row-3 .area-1-icon,
.row-4 .area-1-icon {
	width: 98px;
	position: absolute;
	left: 50%;
	top: -85px;
	transform: translateX(-50%);
}
.area-1 .ttl-h3 {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	padding-bottom: 20px;
}
.area-1 .row-2 .ttl-h3 {
	border-bottom: 1px solid var(--color-green-1);
}
.area-1 .row-3 .ttl-h3 {
	border-bottom: 1px solid var(--color-yellow-1);
}
.area-1 .row-4 .ttl-h3 {
	border-bottom: 1px solid var(--color-purple-1);
}
.txt-chart-main {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.9;
	letter-spacing: .06em;
	text-align: left;
	margin-top: 20px;
}
.area-2 {
	background: var(--color-white-1);
	border-radius: 20px;
	padding: 15px;
}
.area-2 .row-1 {
	display: flex;
	align-items: center;
}
.area-2-icon {
	width: 78px;
}
.txt-purpose {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	width: calc(100% - 78px);
}
/* ==========================================
	▼ プルダウンメニュー
========================================== */
.dropdown-menu {
	position: relative;
	width: 100%;
	height: 100%;
	border: 1px solid #ddd;
	box-sizing: border-box;
}
.row-2 .dropdown-menu {
	border-color: var(--color-green-1);
}
.row-3 .dropdown-menu {
	border-color: var(--color-yellow-1);
}
.row-4 .dropdown-menu {
	border-color: var(--color-purple-1);
}
/* メニュー内リンク・テキストの共通設定 */
.dropdown-menu > a {
	width: 100%;
	height: 100%;
	display: block;
	padding: 12px 80px 12px 15px;
	color: var(--color-black-1);
	text-decoration: none;
	box-sizing: border-box;
}

/* 親メニュー（リンクなし）にマウスを乗せたときのカーソル */
.menu-trigger {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
	user-select: none; /* テキストの誤選択を防止 */
	transition: 0.3s ease, color 0.3s ease;
}
.row-2 .menu-trigger:hover {
	color: var(--color-green-1);
}
.row-3 .menu-trigger:hover {
	color: var(--color-yellow-1);
}
.row-4 .menu-trigger:hover {
	color: var(--color-purple-1);
}
/* ==========================================
	▼ 子メニューの絶対配置 ＆ アニメーション
========================================== */
.sub-menu {
	list-style: none;
	padding: 0 15px;
	margin: 0;
	width: 100%;
	background-color: #eaeaea; /* 子メニューの背景色 */
	border: 1px solid var(--color-gray-5);
	
	/* 外側のブロックの高さを広げないための絶対配置 */
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;

	/* ふわっと位置を変えながら表示するアニメーション初期設定 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

/* 子メニューの中の各リスト枠線 */
.sub-menu li {
	border-bottom: 1px solid var(--color-gray-3);
}
.sub-menu li:last-child {
	border-bottom: none;
}

/* 親メニュー展開時（is-openクラス付与時）の子メニュー状態 */
.dropdown-menu.is-open .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}


/* ==========================================
	▼ 矢印画像の設定（向き変更 ＆ 子メニュー対応）
========================================== */

/* 1. 親メニューの矢印（初期状態：下向き） */
.has-child > .menu-trigger::after {
	content: "";
	position: absolute;
	right: 25px;
	top: calc(50% - 6px); /* 上下中央配置（矢印の高さの半分を引く） */
	width: 20px;         /* 矢印画像の横幅 */
	height: 12px;        /* 矢印画像の縦幅 */
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
	/* 回転を滑らかにするための設定 */
	transition: transform 0.3s ease;
}
.row-2 .has-child > .menu-trigger::after {
	background-image: url(../../create/img/creater-guide/arrow-8.webp);
}
.row-3 .has-child > .menu-trigger::after {
	background-image: url(../../create/img/creater-guide/arrow-9.webp);
}
.row-4 .has-child > .menu-trigger::after {
	background-image: url(../../create/img/creater-guide/arrow-10.webp);
}
/* ★親メニュー展開時：画像を変更せず、180度回転させて上向きにする */
.dropdown-menu.is-open > .menu-trigger::after {
	transform: rotate(180deg);
}


/* 2. 子メニューの矢印設定（右向きの固定矢印など） */
.child-link {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	padding: 20px 50px 20px 0 !important;
	position: relative;
	display: flex;
	transition: color 0.3s ease;
}
.child-link::before {
	content: "";
	position: absolute;
	width: 37px;
	height: 37px;
    right: 0;
    top: calc(50% - 20px);
	background: var(--color-white-1);
	border: 1px solid var(--color-gray-5);
	border-radius: 50%;
}
.child-link::after {
    content: "";
    position: absolute;
    right: 8px;
    top: calc(50% - 6px);
    width: 21px;
    height: 13px;
	background-image: url(../../create/img/creater-guide/arrow-6.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.row-2 .child-link:hover {
	color: var(--color-green-1);
}
.row-3 .child-link:hover {
	color: var(--color-yellow-1);
}
.row-4 .child-link:hover {
	color: var(--color-purple-1);
}
.row-2 .child-link:hover::after {
	background-image: url(../../create/img/creater-guide/arrow-8.webp);
}
.row-3 .child-link:hover::after {
	background-image: url(../../create/img/creater-guide/arrow-9.webp);
}
.row-4 .child-link:hover::after {
	background-image: url(../../create/img/creater-guide/arrow-10.webp);
}

/* 全体のコンテナ（ボタンを右下配置するための基準） */
.slider-container {
    position: relative;
    max-width: 1000px; /* 必要に応じて調整してください */
    margin: 100px auto 0;
    padding-bottom: 60px; /* 下部ボタン用の余白 */
}

.slide-wrap {
    display: flex;
    justify-content: center;
    gap: 58px;
    margin-top: 0; /* container側で管理 */
}

.slide-item {
    width: 100%;
    max-width: 448px;
    background:var(--color-white-1);
    border-radius: 30px;
    padding: 45px 27px;
    box-sizing: border-box;
    
    /* 高さを揃えるためのGrid設定 */
    display: grid;
    grid-template-rows: auto auto auto 1fr auto; /* 4番目の.txt-slideが残りの高さを埋める */
    justify-items: center;
    align-items: start;
}

.point-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.point-list li {
    font-size: 20px;
    font-weight: 700;
    position: relative;
    display: flex;
    gap: 10px;
}
.point-list li::before {
    content: "";
    width: 25px;
    height: 25px;
    background: url(../../create/img/creater-guide/icon-check.webp) no-repeat center left /100% 100%;
    flex-shrink: 0; /* ← これを追加（縮小を禁止する） */
}
.point-arrow {
    width: 39px;
    margin-top: 45px;
}
.pc-category {
    margin-top: 25px;
    text-align: center;
}
.pc-category .note-pc { width: 107px; margin-top: 25px; }
.pc-category .desktop-pc { width: 154px; margin-top: 25px; }
.pc-category figcaption {
    color: #ff6600; /* 確認用（var(--color-orange-1)） */
    font-size: 25px;
    font-weight: 700;
}

/* 高さが揃うテキスト部分 */
.txt-slide {
    font-size: 18px;
    font-weight: 500;
    line-height: 2;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;
    display: flex;
    align-items: center; /* 上下中央揃え（必要なければ消してください） */
}

/* ナビゲーション（PCでは非表示） */
.slider-nav {
    display: none;
}
@media (max-width: 1480px) {/*-1480*/
	.contents--diagnosis {
	padding-top: 9.459vw;
	}
	.chart-wrap-pc {
		grid-template-columns: 17.5vw repeat(3, 1fr);
		gap: 1.351vw;
		margin: 10.811vw auto 0;
	}
	.area-1 .row-2,
	.area-1 .row-3,
	.area-1 .row-4 {
	padding: 1.689vw;
	border-radius: 2.027vw;
	}
	.row-2 .area-1-icon,
	.row-3 .area-1-icon,
	.row-4 .area-1-icon {
	width: 6.622vw;
	top: -5.743vw;
	}
	.area-1 .ttl-h3 {
	font-size: 1.486vw;
	padding-bottom: 1.351vw;
	}
	.area-1 .row-2 .ttl-h3 {
	border-bottom: 1px solid var(--color-green-1);
	}
	.area-1 .row-3 .ttl-h3 {
	border-bottom: 1px solid var(--color-yellow-1);
	}
	.area-1 .row-4 .ttl-h3 {
	border-bottom: 1px solid var(--color-purple-1);
	}
	.txt-chart-main {
	font-size: 1.216vw;
	margin-top: 1.351vw;
	}
	.area-2 {
	border-radius: 1.351vw;
	padding: 1.014vw;
	}
	.area-2-icon {
	width: 5.27vw;
	}
	.txt-purpose {
	font-size: 1.486vw;
	width: calc(100% - 5.27vw);
	}
	.dropdown-menu {
	border: 1px solid #ddd;
	}
	.dropdown-menu > a {
	padding: 0.811vw 5.405vw 0.811vw 1.014vw;
	}
	.menu-trigger {
	font-size: 1.216vw;
	}
	.sub-menu {
	padding: 0 1.014vw;
	border: 1px solid var(--color-gray-5);
	left: 0;
	transform: translateY(-0.676vw);
	}
	.sub-menu li {
	border-bottom: 1px solid var(--color-gray-3);
	}
	.has-child > .menu-trigger::after {
	right: 1.351vw;
	top: calc(50% - 0.405vw);
	width: 1.351vw;
	height: 0.811vw;
	}
	.child-link {
	font-size: 1.216vw;
	padding: 1.351vw 3.378vw 1.351vw 0 !important;
	}
	.child-link::before {
	width: 2.5vw;
	height: 2.5vw;
	top: calc(50% - 1.351vw);
	border: 1px solid var(--color-gray-5);
	border-radius: 50%;
	}
	.child-link::after {
	right: 0.541vw;
	top: calc(50% - 0.405vw);
	width: 1.419vw;
	height: 0.878vw;
	}
	.slider-container {
	max-width: 67.568vw;
	margin: 6.757vw auto 0;
	padding-bottom: 4.054vw;
	}
	.slide-wrap {
	gap: 3.919vw;
	}
	.slide-item {
	max-width: 30.27vw;
	border-radius: 2.027vw;
	padding: 3.041vw 1.824vw;
	}
	.point-list {
	gap: 1.014vw;
	}
	.point-list li {
	font-size: 1.351vw;
	gap: 0.676vw;
	}
	.point-list li::before {
	width: 1.689vw;
	height: 1.689vw;
	}
	.point-arrow {
	width: 2.635vw;
	margin-top: 3.041vw;
	}
	.pc-category {
	margin-top: 1.689vw;
	}
	.pc-category .note-pc {
	width: 7.23vw;
	margin-top: 1.689vw;
	}
	.pc-category .desktop-pc {
	width: 10.405vw;
	margin-top: 1.689vw;
	}
	.pc-category figcaption {
	font-size: 1.689vw;
	}
	.txt-slide {
	font-size: 1.216vw;
	margin-top: 1.689vw;
	margin-bottom: 1.689vw;
	}
}
@media screen and (max-width: 768px) {
	.contents--diagnosis {
		padding-top: 22.459vw;
	}
	.chart-wrap-pc {
		display: none;
	}
	.chart-wrap-sp {
		display: block;
		position: relative;
		z-index: +1;
	}
	.chart-contents {
		display: flex;
        align-items: center;
        flex-direction: column;
        gap: 29.333vw; /* 110px */
        margin-top: 5.333vw; /* 20px */
	}
	.chart-btn-wrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
        width: 72.8vw; /* 252px */
        gap: 2.4vw; /* 9px */
    }
	.chart-btn {
		color: var(--color-white-1);
		font-size: 3.2vw; /* 12px */
		font-weight: 700;
		text-align: center;
		height: 12vw; /* 45px */
		background: var(--color-black-1);
		border-radius: 9999px; /* 特性を維持するためpxのまま */
		cursor: pointer;
		transition: background-color 0.3s;
		position: relative;
	}
	.chart-btn:hover, .chart-btn.active {
		background-color: var(--color-orange-1);
		color: #fff;
	}
	.chart-btn .arrow {
		display: none;
	}
	.chart-btn .arrow::before {
		content: "";
		width: 4.533vw; /* 17px */
        height: 4.267vw; /* 16px */
		background: url(../../create/img/creater-guide/arrow-1.webp) no-repeat center center / contain;
		position: absolute;
        left: 14%;
        top: 21%;
		transform: rotate(90deg);
	}
	.chart-btn:hover .arrow::before, .chart-btn.active .arrow::before {
		background: url(../../create/img/creater-guide/arrow-2.webp) no-repeat center center / contain;
	}
	.chart-detail-wrap {
		width: 72.8vw; /* 273px */
	}
	.chart-detail-content {
		background: var(--color-white-1);
		padding: 9.333vw 2.667vw 5.333vw; /* 35px 10px 20px */
		display: none;
		box-sizing: border-box;
		border-radius: 2.667vw; /* 10px */
		display: none;
		opacity: 0;
		transition: opacity 0.4s ease-in-out; 
		position: relative;
	}
	.chart-detail-content .genre-icon {
		width: 20.8vw; /* 78px */
		position: absolute;
		top: -17.333vw; /* -65px */
		left: 50%;
		transform: translateX(-50%);
	}
	.chart-detail-content .ttl-h3 {
		color: var(--color-orange-1);
		font-size: 4.267vw; /* 16px */
		font-weight: 700;
		line-height: 1;
		text-align: center;
	}
	.chart-detail-content.active {
		display: block;
		animation: fadeIn 0.4s forwards;
	}
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}
	
	/* アコーディオン */
	.custom-accordion-wrap {
		display: flex;
		flex-direction: column;
		gap: 6.667vw; /* 25px */
		margin-top: 6.667vw; /* 25px */
	}
	.custom-accordion-block {
		padding: 2.667vw; /* 10px */
		border: 0.267vw solid var(--color-gray-3); /* 1px */
		border-radius: 2.667vw; /* 10px */
		box-sizing: border-box;
	}
	.custom-accordion-btn {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		border: none;
		background: none;
		cursor: pointer;
		text-align: left;
		position: relative;
    }

    /* 矢印 */
    .custom-accordion-arrow {
		display: inline-block;
		width: 6.4vw; /* 24px */
		height: 3.2vw; /* 12px */
		transition: transform 0.3s ease;
		margin-top: 4vw; /* 15px */
		flex-shrink: 0;
    }

	.custom-accordion-block:nth-of-type(1) .custom-accordion-arrow {
		background: url(../../create/img/creater-guide/arrow-8.webp) no-repeat center center/contain;
	}

	.custom-accordion-block:nth-of-type(2) .custom-accordion-arrow {
		background: url(../../create/img/creater-guide/arrow-9.webp) no-repeat center center/contain;
	}

	.custom-accordion-block:nth-of-type(3) .custom-accordion-arrow {
		background: url(../../create/img/creater-guide/arrow-10.webp) no-repeat center center/contain;
	}


    /* 展開時の矢印 */
    .custom-accordion-btn[aria-expanded="true"] .custom-accordion-arrow {
		transform: rotate(180deg);
    }

    /* 回答エリアのコンテナ */
    .custom-accordion-body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease;
    }

    /* ボタンが開いたら中身を展開 */
    .custom-accordion-btn[aria-expanded="true"] + .custom-accordion-body {
		grid-template-rows: 1fr;
    }

    /* 内側の余白とフェードイン */
    .custom-accordion-content {
		min-height: 0;
		padding: 0;
		opacity: 0;
		transition: opacity 0.3s ease, padding 0.3s ease;
    }

    /* 展開時の余白と不透明度 */
    .custom-accordion-btn[aria-expanded="true"] + .custom-accordion-body .custom-accordion-content {
		opacity: 1;
    }

    .custom-accordion-title {
		color: var(--color-black-1, #111);
		font-size: 3.467vw; /* 13px */
		font-weight: 700;
		line-height: 1.5;
		margin: 0;
		display: flex;
		align-items: center;
		gap: 2.667vw; /* 10px */
    }
	.custom-accordion-title .category-icon {
		width: 11.467vw; /* 43px */
	}
    .custom-accordion-text {
		color: var(--color-black-1);
		font-size: 3.2vw; /* 12px */
		font-weight: 500;
		line-height: 1.8;
		letter-spacing: 0.17em;
		margin-top: 2.667vw; /* 10px */
		padding-top: 2.667vw; /* 10px */
		display: block;
    }
	.custom-accordion-block:nth-of-type(1) .custom-accordion-text {
		border-top: 0.267vw solid var(--color-green-1); /* 1px */
	}
	.custom-accordion-block:nth-of-type(2) .custom-accordion-text {
		border-top: 0.267vw solid var(--color-yellow-1); /* 1px */
	}
	.custom-accordion-block:nth-of-type(3) .custom-accordion-text {
		border-top: 0.267vw solid var(--color-purple-1); /* 1px */
	}
	.dropdown-menu {
		height: inherit;
		background: var(--color-white-1);
		margin-top: 2.667vw; /* 10px */
	}
	.custom-accordion-block:nth-of-type(1) .dropdown-menu {
		border-color: var(--color-green-1);
	}
	.custom-accordion-block:nth-of-type(2) .dropdown-menu {
		border-color: var(--color-yellow-1);
	}
	.custom-accordion-block:nth-of-type(3) .dropdown-menu {
		border-color: var(--color-purple-1);
	}
	.dropdown-menu a {
		font-size: 3.467vw; /* 13px */
		padding: 0.811vw 11.405vw 0.811vw 1.014vw; /* 元々vw指定のためそのまま */
	}
	.custom-accordion-block .has-child > .menu-trigger::after {
        width: 4.351vw;
        height: 2.811vw;
		right: 4.351vw; /* 元々vw指定のためそのまま */
	}
	.custom-accordion-block:nth-of-type(1) .has-child > .menu-trigger::after {
		background-image: url(../../create/img/creater-guide/arrow-8.webp);
	}
	.custom-accordion-block:nth-of-type(2) .has-child > .menu-trigger::after {
		background-image: url(../../create/img/creater-guide/arrow-9.webp);
	}
	.custom-accordion-block:nth-of-type(3) .has-child > .menu-trigger::after {
		background-image: url(../../create/img/creater-guide/arrow-10.webp);
	}
	.dropdown-menu.is-open .sub-menu {
		padding: 0 2.667vw; /* 10px */
	}
	.child-link {
		padding: 2.667vw 9.333vw 2.667vw 0 !important; /* 10px 35px 10px 0 */
	}
	.child-link::before {
        width: 6.4vw; /* 24px */
        height: 6.4vw; /* 24px */
        top: calc(50% - 3.2vw); /* 12px */
        border: 0.267vw solid var(--color-gray-5); /* 1px */
        border-radius: 50%;
    }
	.child-link::after {
        right: 1.067vw; /* 4px */
        top: calc(50% - 0.533vw); /* 2px */
        width: 4vw; /* 15px */
        height: 2.4vw; /* 9px */
    }
    /* スライダー */
    .slider-container {
        position: relative;
        margin-top: 50px;
        padding-bottom: 70px; 
        
        /* 左端は親要素に合わせ、右端だけ画面幅（100vw）まで突き抜けさせる設定 */
        width: auto;
		max-width: inherit;
        margin-left: 0;
        margin-right: calc(50% - 50vw);
    }

    /* 2. スライダーの横スクロール領域 */
    .slide-wrap {
        display: flex;
        justify-content: flex-start;
        gap: 20px;
        
        overflow-x: auto; 
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox用 */
        -webkit-overflow-scrolling: touch;

        /* 左端はサイトの余白に自動で揃うため、padding-leftは不要（またはデザイン微調整用で0〜10px程度に） */
        padding-left: 0;
        /* 右側が画面端にぴったりくっつかないよう、最後のスライドの右側に余白を持たせる */
        padding-right: 40px;
        box-sizing: border-box;
    }
    .slide-wrap::-webkit-scrollbar {
        display: none; /* Chrome, Safari用 */
    }

    /* 3. 各スライドの横幅固定 */
    .slide-item {
        flex: 0 0 226px; 
        width: 226px;
        max-width: 226px;
        padding: 20px 8px 15px;
		border-radius: 10px;
        scroll-snap-align: start; 
        grid-template-rows: auto; 
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 4. 右下の丸いボタン設置 */
    .slider-nav {
        display: flex;
        gap: 10px;
        position: absolute;
        bottom: 10px;
        right: 60px; 
        z-index: 10;
    }
    .nav-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #fff;
        cursor: pointer;
        position: relative;
        transition: background-color 0.2s;
    }
    .nav-btn:active {
        background-color: #f0f0f0;
    }

    /* 矢印アイコン */
    .nav-btn::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 20px;
        background: url(../../create/img/creater-guide/arrow-12.webp) no-repeat center center /contain;
    }
    .nav-btn.prev::before {
        transform: translate(-57%, -50%) ;
    }
    .nav-btn.next::before {
        transform: translate(-43%, -50%) rotate(180deg);
    }
	.point-list {
		gap: 10px;
	}
	.point-list li {
		font-size: 13px;
		gap: 5px;
	}
	.point-list li::before {
		width: 15px;
		height: 15px;
	}
	.point-arrow {
		width: 23px;
		margin-top: 10px;
	}
	.pc-category {
		margin-top: 10px;
	}
	.pc-category .note-pc {
		width: 65px;
		margin-top: 5px;
	}
	.pc-category .desktop-pc {
		width: 94px;
		margin-top: 5px;
	}
	.pc-category figcaption {
		font-size: 16px;
	}
	.txt-slide {
		font-size: 12px;
		letter-spacing: 0.1em;
		padding-inline: 10px;
		margin-top: 10px;
		box-sizing: border-box;
	}
}
/* line-up
____________________*/
.contents--line-up {
	padding-top: 130px;
	padding-bottom: 145px;
}
.line-up .ttl-h2 {
	color: var(--color-orange-1);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
.line-up-wrap {
	background: var(--color-white-3);
	border-radius: 50px;
	margin-top: 45px;
	padding: 45px 43px;
	box-sizing: border-box;
}
.line-up-wrap .category-block:nth-of-type(n+2) {
	padding-top: 100px;
}
.ttl-category-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
}
.ttl-category-wrap .category-icon {
	width: 75px;
}
.ttl-category {
	color: var(--color-black-1);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.5;
}
.txt-category {
	color: var(--color-black-1);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	margin-top: 15px;
}
.item-wrap {
	margin-top: 45px;
	display: flex;
	flex-direction: column;
	gap: 34px;
	position: relative;
}
.model-item .anchor {
	width: 100%;
	height: 1px;
	display: block;
	position: absolute;
	left: 0px;
	top: -130px;
}
.model-item {
	background: var(--color-white-1);
	border-radius: 20px;
	padding: 15px 30px 20px;
	box-sizing: border-box;
	position: relative;
}
.pc-layout {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}
.pc-layout .block-1 {
	width: 74.6%;
}
.pc-layout .block-2 {
	width: 25.4%;
}
.sp-layout {
	display: none;
}
.line-up .item-tag-block {
	display: flex;
	align-items: center;
	gap: 25px;
}
.line-up .tag {
	color: var(--color-orange-1);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	background: var(--color-orange-2);
	padding: 9px 16px;
	border-radius: 9999px;
}
.line-up .genre {
	color: var(--color-gray-5);
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.6em;
}
.detail-flex {
	display: flex;
	margin-top: 20px;
	gap: 45px;
}
.detail-flex .detail-inner {
	padding-right: 45px;
	border-right: 1px solid var(--color-gray-5);
}
.detail-flex .detail-inner:nth-of-type(1) {
	width: 45%;
}
.detail-flex .detail-inner:nth-of-type(2) {
	width: 55%;
}
.line-up .catch {
	color: var(--color-orange-1);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
}
.line-up .model-name {
	color: var(--color-black-1);
	font-size: 20px;
	margin-top: 5px;
}
.line-up .txt-model-comments {
	color: var(--color-black-1);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	margin-top: 30px;
}
.line-up .spec-list {
	color: var(--color-black-1);
	font-size: 18px;
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 12px 16px;
}
.line-up .spec-list dd {
	margin: 0;
}
.line-up .price {
	color: var(--color-black-1);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	margin-top: 30px;
	text-align: right;
}
.line-up .price .tax {
	font-size: 15px;
}
.line-up .model-img {
	width: 100%;
	max-width: 205px;
	margin-inline: auto;
}
.line-up .btn-link {
	margin-top: 20px;
}
@media (max-width: 1480px) {/*-1480*/
	.contents--line-up {
	padding-top: 8.784vw;
	padding-bottom: 9.797vw;
	}
	.line-up .ttl-h2 {
	font-size: 2.703vw;
	}
	.line-up-wrap {
	border-radius: 3.378vw;
	margin-top: 3.041vw;
	padding: 3.041vw 2.905vw;
	}
	.line-up-wrap .category-block:nth-of-type(n+2) {
	padding-top: 6.757vw;
	}
	.ttl-category-wrap {
	gap: 1.3514vw;
	}
	.ttl-category-wrap .category-icon {
	width: 75px;
	}
	.ttl-category {
	font-size: 3.0676vw;
	}
	.txt-category {
	font-size: 1.486vw;
	margin-top: 1.014vw;
	}
	.item-wrap {
	margin-top: 3.041vw;
	gap: 2.297vw;
	}
	.model-item .anchor {
		top: -8.78vw;
	}
	.model-item {
	border-radius: 1.351vw;
	padding: 1.014vw 2.027vw 1.351vw;
	}
	.pc-layout {
	gap: 2.703vw;
	}
	.line-up .item-tag-block {
	gap: 1.689vw;
	}
	.line-up .tag {
	font-size: 1.351vw;
	padding: 0.608vw 1.081vw;
	border-radius: 675.608vw;
	}
	.line-up .genre {
	font-size: 1.151vw;
	}
	.detail-flex {
	margin-top: 1.351vw;
	gap: 3.041vw;
	}
	.detail-flex .detail-inner {
	padding-right: 3.041vw;
	border-right: 1px solid var(--color-gray-5);
	}
	.line-up .catch {
	font-size: 1.486vw;
	}
	.line-up .model-name {
	font-size: 1.351vw;
	margin-top: 0.338vw;
	}
	.line-up .txt-model-comments {
	font-size: 1.216vw;
	margin-top: 2.027vw;
	}
	.line-up .spec-list {
	font-size: 1.216vw;
	grid-template-columns: 6.757vw 1fr;
	gap: 0.811vw 1.081vw;
	}
	.line-up .price {
	font-size: 1.216vw;
	margin-top: 2.027vw;
	}
	.line-up .price .tax {
	font-size: 1.014vw;
	}
	.line-up .model-img {
	max-width: 14.905vw;
	}
	.line-up .btn-link {
	margin-top: 1.351vw;
	}
}
@media (max-width: 768px) {/*-768*/
	.contents--line-up {
    /* 60px */
    padding-top: 21vw;
    padding-bottom: 16vw;
}
.line-up .ttl-h2 {
    /* 20px */
    font-size: 5.3333vw;
}
.line-up-wrap {
    /* 20px */
    border-radius: 5.3333vw;
    /* 30px 20px */
    padding: 8vw 5.3333vw;
    /* 20px */
    margin-top: 5.3333vw;
}
.line-up-wrap .category-block:nth-of-type(n+2) {
    /* 50px */
    padding-top: 13.3333vw;
}
.ttl-category-wrap {
    /* 8px */
    gap: 2.1333vw;
}
.ttl-category-wrap .category-icon {
    /* 45px */
    width: 12vw;
}
.ttl-category {
    /* 18px */
    font-size: 4.8vw;
}
.txt-category {
    /* 13px */
    font-size: 3.4667vw;
    /* 10px */
    margin-top: 2.6667vw;
}
.item-wrap {
    /* 25px */
    gap: 6.6667vw;
    margin-top: 6.6667vw;
}
.model-item .anchor {
	top: -22.78vw;
}
.model-item {
    /* 10px */
    border-radius: 2.6667vw;
    /* 15px 10px 20px */
    padding: 4vw 2.6667vw 5.3333vw;
}
.pc-layout {
    display: none;
}
.sp-layout {
    display: flex;
    flex-direction: column;
    /* 15px */
    gap: 4vw;
}
.sp-layout .block-2 {
    border-top: 1px solid var(--color-gray-5);
    display: flex;
    /* 15px */
    gap: 4vw;
    padding-top: 4vw;
}
.line-up .item-tag-block {
    flex-direction: column;
    align-items: flex-start;
    /* 10px */
    gap: 2.6667vw;
}
.line-up .tag {
    /* 13px */
    font-size: 3.4667vw;
    /* 5px 8px */
    padding: 1.3333vw 2.1333vw;
}
.line-up .genre {
    /* 12px */
    font-size: 3.2vw;
	flex-wrap: wrap;
}
.line-up .catch {
    /* 14px */
    font-size: 3.7333vw;
    /* 10px */
    margin-top: 2.6667vw;
}
.line-up .model-name {
    /* 11px */
    font-size: 2.9333vw;
}
.line-up .txt-model-comments {
    /* 12px */
    font-size: 3.2vw;
    width: 51%;
    margin-top: 0;
}
.line-up .model-img {
    width: 42%;
    max-width: 110px; /* 必要に応じてここも29.3333vw等に変換可能ですが、max-widthのためひとまず残しています */
}
.line-up .spec-list {
    /* 11px */
    font-size: 2.9333vw;
    letter-spacing: 0;
    grid-template-columns: 16vw 1fr;
    /* 6px 10px */
    gap: 1.6vw 2.6667vw;
}
.line-up .price {
    /* 16px */
    font-size: 4.2667vw;
    /* 15px */
    margin-top: 4vw;
    text-align: center;
}
.line-up .price .tax {
    /* 11px */
    font-size: 2.9333vw;
}
.line-up .btn-link {
    width: 83%;
    /* 15px auto 0 */
    margin: 4vw auto 0;
}
}
/* high-Performance
____________________*/
.contents--high-Performance {
	color: var(--color-white-1);
	padding-top: 45px;
	padding-bottom: 80px;
	background: var(--color-gray-4);
}
.high-Performance .ttl-h2 {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}
.txt-high-Performance {
	font-size: 18px;
	font-weight: 500;
	line-height: 2.2;
	text-align: center;
	margin-top: 40px;
}
.tag-high-Performance {
	width: fit-content;
	border: 1px solid var(--color-white-1);
	border-radius: 9999px;
	padding: 15px 40px;
	margin: 30px auto 0;
}
.tag-high-Performance .txt-tag {
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
}
.high-Performance-item-wrap {
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin-top: 45px;
	gap: 50px;
}
.high-Performance-item {
	color: var(--color-black-1);
	width: calc(50% - 25px);
	background: var(--color-white-1);
	border-radius: 30px;
	padding: 25px;
	box-sizing: border-box;
}
.high-Performance-catch {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}
.high-Performance .model-name {
	font-size: 20px;
	line-height: 1;
	margin-top: 15px;
}
.high-Performance-item-inner-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 20px;
}
.high-Performance .model-img {
	width: 60.9%;
}
.high-Performance .model-img.note img {
	width: 260px;
}
.high-Performance .model-img.desk img {
	width: 260px;
}
.high-Performance .btn-link {
	width: 39.1%;
}
@media (max-width: 1480px) {/*-1480*/
	.contents--high-Performance {
	padding-top: 3.041vw;
	padding-bottom: 5.405vw;
	}
	.high-Performance .ttl-h2 {
	font-size: 2.703vw;
	}
	.txt-high-Performance {
	font-size: 1.216vw;
	margin-top: 2.703vw;
	}
	.tag-high-Performance {
	border: 1px solid var(--color-white-1);
	border-radius: 675.608vw;
	padding: 1.014vw 2.703vw;
	margin: 2.027vw auto 0;
	}
	.tag-high-Performance .txt-tag {
	font-size: 1.216vw;
	}
	.high-Performance-item-wrap {
	margin-top: 3.041vw;
	gap: 3.378vw;
	}
	.high-Performance-item {
	width: calc(50% - 1.689vw);
	border-radius: 2.027vw;
	padding: 1.689vw;
	}
	.high-Performance-catch {
	font-size: 1.486vw;
	}
	.high-Performance .model-name {
	font-size: 1.351vw;
	margin-top: 1.014vw;
	}
	high-Performance-item-inner-flex {
	margin-top: 1.351vw;
	}
	.high-Performance .model-img.note img {
	width: 17.568vw;
	}
	.high-Performance .model-img.desk img {
	width: 17.568vw;
	}
}
@media (max-width: 768px) {/*-768*/
	.contents--high-Performance {
    /* 40px */
    padding-top: 10.6667vw;
}
.high-Performance .ttl-h2 {
    /* 16px */
    font-size: 4.2667vw;
}
.txt-high-Performance {
    /* 12px */
    font-size: 3.2vw;
    text-align: left;
    /* 10px */
    margin-top: 2.6667vw;
}
.tag-high-Performance {
    /* 10px */
    padding: 2.6667vw;
    /* 25px */
    margin-top: 6.6667vw;
}
.tag-high-Performance .txt-tag {
    /* 12px */
    font-size: 3.2vw;
    letter-spacing: 0;
}
.high-Performance-item-wrap {
    width: 86.7%;
    flex-direction: column;
    /* 30px auto 0 */
    margin: 8vw auto 0;
    /* 25px */
    gap: 6.6667vw;
}
.high-Performance-item {
    width: 100%;
    /* 20px 10px */
    padding: 5.3333vw 2.6667vw;
    /* 10px */
    border-radius: 2.6667vw;
}
.high-Performance-catch {
    /* 14px */
    font-size: 3.7333vw;
    letter-spacing: 0.02em;
}
.high-Performance .model-name {
    /* 11px */
    font-size: 2.9333vw;
    /* 10px */
    margin-top: 2.6667vw;
}
.high-Performance-item-inner-flex {
    flex-direction: column;
    align-items: center;
    /* 15px */
    gap: 4vw;
    border-top: 1px solid var(--color-gray-5);
    /* 14px */
    padding-top: 3.7333vw;
}
.high-Performance .model-img.note img {
    /* 120px */
    width: 32vw;
}
.high-Performance .model-img.desk img {
    /* 120px */
	width: 32vw;
}
.high-Performance .btn-link {
    width: 80%;
}
}
/* faq
____________________*/
.contents--faq {
	padding-block: 75px;
	background: var(--color-white-3);
}
.faq .ttl-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.faq .ttl-wrap .ttl-h2 {
	color:var(--color-black-1);
	font-size: 40px;
}
.faq .ttl-wrap .arrow  {
	width: 45px;
	height: 23px;
	background: url(../../create/img/creater-guide/arrow-4.webp) no-repeat center center/contain;
	display: inline-block;
}
.faq-container {
	margin-top: 55px;
}
.faq-item {
	border-top: 1px solid var(--color-gray-3);
}
/* 質問エリア（ボタン） */
.faq-question {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 40px 0;
	border: none;
	cursor: pointer;
	text-align: left;
}

/* 矢印（通常時は下向き） */
.faq-arrow {
	display: inline-block;
	width: 24px;
	height: 12px;
	background: url(../../create/img/creater-guide/arrow-4.webp) no-repeat center center/contain;
	transform: rotate(180deg); /* 右下を向く＝下矢印に見える */
	transition: transform 0.3s ease; /* 0.3秒かけて滑らかに回転 */
	margin-top: 15px;
	margin-right: 10px;
	flex-shrink: 0;
}

/* 展開時（aria-expanded="true"）の矢印（上向きに反転） */
.faq-question[aria-expanded="true"] .faq-arrow {
	transform: rotate(0deg); /* 反転して上を向く */
}

/* 回答エリアのコンテナ（高さのアニメーション） */
.faq-answer {
	display: grid;
	grid-template-rows: 0fr; /* 初期状態は高さゼロ（非表示） */
	transition: grid-template-rows 0.3s ease; /* 0.3秒かけて開閉 */
	overflow: hidden;
}

/* 質問がクリックされたら、回答の数値を 1fr にして中身の高さまで展開 */
.faq-question[aria-expanded="true"] + .faq-answer {
	grid-template-rows: 1fr;
}

/* 回答の内側の余白とテキストのフェードイン */
.faq-answer-content {
	min-height: 0;
	padding: 0;
	opacity: 0;
	color: #555;
	line-height: 1.6;
	transition: opacity 0.3s ease, padding 0.3s ease;
}

/* 展開時の余白と不透明度 */
.faq-question[aria-expanded="true"] + .faq-answer .faq-answer-content {
	padding-bottom: 45px;
	opacity: 1;
}
.txt-q {
	color: var(--color-black-1);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.7;
}
.txt-a {
	color: var(--color-black-1);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.8;
}
@media (max-width: 1480px) {/*-1480*/
	.contents--faq {
	padding-block: 5.068vw;
	}
	.faq .ttl-wrap .ttl-h2 {
	font-size: 2.703vw;
	}
	.faq .ttl-wrap .arrow {
	width: 3.041vw;
	height: 1.554vw;
	}
	.faq-container {
	margin-top: 3.716vw;
	}
	.faq-item {
	border-top: 1px solid var(--color-gray-3);
	}
	.faq-question {
	padding: 2.703vw 0;
	}
	.faq-arrow {
	width: 1.622vw;
	height: 0.811vw;
	margin-top: 1.014vw;
	margin-right: 0.676vw;
	}
	.faq-question[aria-expanded="true"] + .faq-answer .faq-answer-content {
	padding-bottom: 3.041vw;
	}
	.txt-q {
	font-size: 1.486vw;
	}
	.txt-a {
	font-size: 1.216vw;
	}
}
@media (max-width: 768px) {/*-768*/
	.contents--faq {
    /* 30px */
    padding-block: 8vw;
}
.faq .ttl-wrap .ttl-h2 {
    /* 22px */
    font-size: 5.8667vw;
}
.faq .ttl-wrap .arrow {
    /* 26px 16px */
    width: 6.9333vw;
    height: 4.2667vw;
}
.faq-container {
    /* 15px */
    margin-top: 4vw;
}
.faq-question {
    /* 15px 0 */
    padding: 4vw 0;
    /* 15px */
    gap: 4vw;
}
.faq-arrow {
    /* 15px 9px */
    width: 4vw;
    height: 2.4vw;
    /* 8px */
    margin-top: 2.1333vw;
}
.faq-question[aria-expanded="true"] + .faq-answer .faq-answer-content {
    /* 15px */
    padding-bottom: 4vw;
}
.txt-q {
    /* 14px */
    font-size: 3.7333vw;
}
.txt-a {
    /* 12px */
    font-size: 3.2vw;
}
}
/* category-type
____________________*/
.contents--category-type {
	padding-top: 100px;
	padding-bottom: 100px;
}
.category-link-block {
	display: flex;
	gap: 70px;
}
.category-type .btn-link {
	font-size: 20px;
	padding-block: 20px;
}
@media (max-width: 1480px) {/*-1480*/
	.contents--category-type {
	padding-top: 6.757vw;
	padding-bottom: 6.757vw;
	}
	.category-link-block {
	gap: 4.73vw;
	}
	.category-type .btn-link {
	font-size: 1.351vw;
	padding-block: 1.351vw;
	}
}
@media (max-width: 768px) {/*-768*/
	.contents--category-type {
    /* 45px */
    padding-top: 12vw;
    padding-bottom: 12vw;
}
.category-link-block {
    flex-direction: column;
    /* 15px */
    gap: 4vw;
}
.category-type .btn-link {
    /* 12px */
    font-size: 3.2vw;
    /* 13px */
    padding-block: 3.4667vw;
}
}

/*----------------------
用途目的から選ぶ
-----------------------*/
.c-section {
	padding-bottom: 100px;
}
.p-create-pc__purpose__layout,
.p-create-pc__purpose-list{
	display:grid;
	gap:30px;
	grid-template-columns: repeat(2, 1fr);
}

.p-create-pc__purpose__card,
.p-create-pc__purpose-list li{
	width: 100%;
	border: solid 1px #ececec;
	background-color: #fff;
	-webkit-box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, 0.1);
	box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, 0.1);
}

.p-create-pc__purpose__card:hover,
.p-create-pc__purpose-list li:hover {
	cursor:pointer;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-name: flash;
	animation-name: hover-flash;
	animation-duration: 0.6s;
	opacity: 1;
}

.p-create-pc__purpose__card a,
.p-create-pc__purpose-list li a{
	display:block;
	width:100%;
	padding: 20px 26px;
}

.p-create-pc__purpose__card h4,
.p-create-pc__purpose__card__title {
	font-size: clamp(16px, 0.886rem + 0.57vw, 21px);
	font-weight: bold;
	letter-spacing: 0.02em;
	line-height: 1.46;
	text-align: left;
}
.p-create-pc__purpose-list p {
	margin-top: 8px;
}
@media (max-width: 1480px) {/*-1480*/
	.c-section {
	padding-bottom: 6.757vw;
}
}
@media screen and (max-width: 768px) {
	.c-section {
		padding-bottom: 12vw;
	}
	.p-create-pc__purpose__layout,
	.p-create-pc__purpose-list{
		gap:20px;
		grid-template-columns: repeat(1, 1fr);
	}
}