@charset "UTF-8";

/* ====================
reset
==================== */
.content {
	background: #ffffff;
}
.content,
.content div, .content dl, .content dt, .content dd,
.content ul, .content ol, .content li,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.content textarea, .content p, .content a, .content span {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: inherit;
}
.content picture {
	display: block;
}
.content table {
	border-collapse: collapse;
	border-spacing: 0;
}
.content img {
	border: 0;
	image-rendering: -webkit-optimize-contrast;
	display: block;
	max-width: 100%;
	height: auto;
}
.content a:hover img,
.content a:active img,
.content a:visited img {
	border: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	filter: blur(0);
	-webkit-filter: blur(0);
}
.content em,
.content th {
	font-style: normal;
	font-weight: normal;
}
.content strong {
	font-weight: bold;
}
.content li {
	list-style: none;
}
.content th {
	text-align: left;
}
.content dt,
.content dd {
	font-style: normal;
	font-weight: normal;
	line-height: inherit;
}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	font-size: 100%;
	font-weight: normal;
	background: none;
	border: none;
}
.content a,
.content a:hover {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.5s;
}
.content a:hover {
	opacity: 1;
}
@media (min-width: 768px) {
	.content a:hover {
		opacity: 0.8;
	}
}
.content button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
}
.MB_to_top {
	position: relative;
	z-index: 1;
}

/* ====================
PFEC追加
==================== */
#main .container-fluid {
	padding-left: 0px;
	padding-right: 0px;
	max-width: 100%;
}

/* ====================
content
==================== */
#main .content {
	width: 100%;
	margin: 0 auto;
	padding-bottom: calc(230 / 780 * 100vw);
	color: #000000;
	font-size: calc(16 / 780 * 100vw);
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	line-height: normal;
	font-feature-settings: normal;
	background-color: #efefef;
}
@media (min-width: 768px) {
	#main .content {
		margin: 68px auto 0;
		padding: 0 0 192px;
		overflow: hidden;
		font-size: 15px;
		line-height: normal;
		/* margin-top: -7px; */
	}
}
.content .view-pc {
	display: none;
}
@media (min-width: 768px) {
	.content .view-pc {
		display: block;
	}
	.content .view-sp {
		display: none;
	}
}
/* ====================
more-button
==================== */
@media screen and (min-width: 768px){
	.content .more-button {
		width: 400px;
		height: 70px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: solid 1px #000000;
	}
	.content .more-button .label-main {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 18px;
		line-height: calc(21.5 / 18);
	}
	.content .more-button .label-sub {
		font-size: 14px;
		line-height: calc(27 / 14);
		letter-spacing: 0.02em;
	}
}
@media screen and (max-width: 767px){
	.content .more-button {
		width: calc(648 / 780 * 100vw);
		height: calc(150 / 780 * 100vw);
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: solid 1px #000000;
	}
	.content .more-button .label-main {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(32 / 780 * 100vw);
		line-height: calc(43 / 32);
		padding-top: calc(2 / 780 * 100vw);
	}
	.content .more-button .label-sub {
		font-size: calc(24 / 780 * 100vw);
		line-height: calc(40 / 24);
		letter-spacing: 0.02em;
	}
}
/* ====================
hero
==================== */
@media screen and (min-width: 768px){
	.content .hero {
		width: 1180px;
		margin: 0 auto;
		padding-top: 100px;
	}
}
@media screen and (max-width: 767px){
	.content .hero {
		width: 100%;
		margin: 0 auto;
		padding-top: calc(123 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .hero-title {
		width: 414px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px){
	.content .hero-title {
		width: calc(414 / 780 * 100vw);
		margin: 0 auto;
	}
}

@media screen and (min-width: 768px){
	.content .hero-nav {
		width: 900px;
		margin: 0 auto;
		padding-top: 14px;
	}
}
@media screen and (max-width: 767px){
	.content .hero-nav {
		width: calc(720 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(47 / 780 * 100vw);
	}
}

.content .hero-nav-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

@media screen and (min-width: 768px){
	.content .hero-nav-item {
		display: block;
		width: 300px;
		height: 136px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 767px){
	.content .hero-nav-item {
		display: block;
		width: calc(240 / 780 * 100vw);
		height: calc(120 / 780 * 100vw);
		margin: 0 auto;
	}
}

.content .hero-nav-link {
	width: 100%;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 768px){
	.content .hero-nav-text-main {
		font-family: 'Inter', sans-serif;
		font-weight: 300;
		font-size: 26px;
	}
}
@media screen and (max-width: 767px){
	.content .hero-nav-text-main {
		font-family: 'Inter', sans-serif;
		font-weight: 300;
		font-size: calc(37 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .hero-nav-text-sub {
		font-size: 11px;
		letter-spacing: 0.02em;
		padding-top: 6px;
	}
}
@media screen and (max-width: 767px){
	.content .hero-nav-text-sub {
		font-size: calc(16 / 780 * 100vw);
		padding-top: calc(6 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .hero-image {
		width: 1180px;
		margin: 0 auto;
		padding-top: 7px;
	}
}
@media screen and (max-width: 767px){
	.content .hero-image {
		width: 100%;
		margin: 0 auto;
		padding-top: calc(42 / 780 * 100vw);
	}
}
.content .hero-image {
	position: relative;
}
.content .hero-image-item {
	width: 100%;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.content .hero-image-item:first-child {
	/* 1枚目をフロー内に残して高さを確保し、初回のレイアウトシフトを防ぐ */
	position: relative;
	z-index: 1;
}
.content .hero-image:not(.is-ready) .hero-image-item:first-child {
	opacity: 1;
}
.content .hero-image-item:not(:first-child) {
	position: absolute;
	left: 0;
	z-index: 1;
}
@media screen and (min-width: 768px){
	.content .hero-image-item:not(:first-child) {
		top: 7px;
	}
}
@media screen and (max-width: 767px){
	.content .hero-image-item:not(:first-child) {
		top: calc(42 / 780 * 100vw);
	}
}
.content .hero-image-item img {
	display: block;
	width: 100%;
}
.content .hero-image-item.is-active {
	opacity: 1;
	z-index: 2;
}

/* ====================
sped-banner
==================== */
@media screen and (min-width: 768px){
	.content .sped-banner {
		width: 600px;
		height: 120px;
		margin: 80px auto 0;
		position: relative;
	}
}
@media screen and (max-width: 767px){
	.content .sped-banner {
		width: calc(630 / 780 * 100vw);
		height: calc(210 / 780 * 100vw);
		margin: calc(100 / 780 * 100vw) auto 0;
		position: relative;
	}
}

div.sped-banner a {
	display: block;
	background-color: #2b3875;
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 768px){
	.content .sped-image {
		width: 100px;
		height: 100px;
		position: absolute;
		top: 10px;
		left: 34px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-image {
		width: calc(150 / 780 * 100vw);
		height: calc(150 / 780 * 100vw);
		position: absolute;
		top: calc(30 / 780 * 100vw);
		left: calc(50 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-text {
		text-align: center;
		color: #cfcdcd;
		position: absolute;
		top: 30px;
		right: 37px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-text {
		text-align: center;
		color: #cfcdcd;
		position: absolute;
		top: calc(35 / 780 * 100vw);
		right: calc(85 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-text-main {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 24px;
		line-height: calc(46 / 24);
	}
}
@media screen and (max-width: 767px){
	.content .sped-text-main {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(35 / 780 * 100vw);
		line-height: calc(46 / 35);
	}
}

@media screen and (min-width: 768px){
	.content .sped-text-sub {
		font-size: 16px;
		font-weight: 500;
		letter-spacing: 0.08em;
		margin-top: -5px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-text-sub {
		font-size: calc(24 / 780 * 100vw);
		font-weight: 500;
		margin-top: calc(6 / 780 * 100vw);
	}
}

/* ====================
catch
==================== */
@media screen and (min-width: 768px){
	.content .catch {
		text-align: center;
		padding-top: 68px;
	}
}
@media screen and (max-width: 767px){
	.content .catch {
		text-align: center;
		padding-top: calc(94 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .catch-text {
		font-size: 24px;
		line-height: calc(43 / 24);
		letter-spacing: 0.06em;
	}
}
@media screen and (max-width: 767px){
	.content .catch-text {
		font-size: calc(34 / 780 * 100vw);
		line-height: calc(43 / 34);
		letter-spacing: 0.04em;
	}
}

/* ====================
section
==================== */
@media screen and (min-width: 768px){
	.content .section-catch {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 24px;
		line-height: calc(42 / 24);
		letter-spacing: 0.04em;
		text-align: center;
		position: relative;
	}
}
@media screen and (max-width: 767px){
	.content .section-catch {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(34 / 780 * 100vw);
		line-height: calc(62 / 34);
		letter-spacing: 0.04em;
		text-align: center;
		position: relative;
	}
}

@media screen and (min-width: 768px){
	.content .section-catch::after {
		content: "";
		display: block;
		width: 300px;
		height: 1px;
		background-color: #000000;
		position: absolute;
		bottom: -19px;
		left: calc(50% - 150px);
	}
}
@media screen and (max-width: 767px){
	.content .section-catch::after {
		content: "";
		display: block;
		width: calc(380 / 780 * 100vw);
		height: calc(2 / 780 * 100vw);
		background-color: #000000;
		position: absolute;
		bottom: calc(-12 / 780 * 100vw);
		left: calc(50% - calc(380 / 780 * 100vw) / 2);
	}
}

@media screen and (min-width: 768px){
	.content .section-title {
		font-size: 24px;
		font-weight: 400;
		line-height: calc(43 / 24);
		letter-spacing: 0.06em;
		text-align: center;
		padding-top: 37px;
	}
}
@media screen and (max-width: 767px){
	.content .section-title {
		font-size: calc(34 / 780 * 100vw);
		font-weight: 400;
		line-height: calc(64 / 34);
		letter-spacing: 0.06em;
		text-align: center;
		padding-top: calc(27 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .section-lead {
		width: 900px;
		margin: 0 auto;
	}
	.content .section-title + .section-lead {
		padding-top: 37px;
	}
}
@media screen and (max-width: 767px){
	.content .section-lead {
		width: calc(668 / 780 * 100vw);
		margin: 0 auto;
	}
	.content .section-title + .section-lead {
		padding-top: calc(37 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .lead-text {
		font-size: 16px;
		line-height: calc(34 / 16);
		letter-spacing: 0.02em;
	}
}
@media screen and (max-width: 767px){
	.content .lead-text {
		font-size: calc(30 / 780 * 100vw);
		line-height: calc(56 / 30);
		letter-spacing: 0.02em;
	}
}

/* ====================
about
==================== */
@media screen and (min-width: 768px){
	.content .about {
		margin-top: 49px;
		padding-top: 49px;
	}
}
@media screen and (max-width: 767px){
	.content .about {
		margin-top: calc(68 / 780 * 100vw);
		padding-top: calc(68 / 780 * 100vw);
	}
}


/* ====================
reason
==================== */
@media screen and (min-width: 768px){
	.content .reason {
		margin-top: 49px;
		padding-top: 49px;
	}
}
@media screen and (max-width: 767px){
	.content .reason {
		margin-top: calc(65 / 780 * 100vw);
		padding-top: calc(65 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .reason-list {
		width: 1000px;
		margin: 0 auto;
		padding-top: 47px;
		display: flex;
		flex-direction: column;
		row-gap: 40px;
	}
}
@media screen and (max-width: 767px){
	.content .reason-list {
		width: calc(580 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(46 / 780 * 100vw);
		display: flex;
		flex-direction: column;
		row-gap: calc(72 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .reason-item {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}
@media screen and (max-width: 767px){
	.content .reason-item {
		position: relative;
	}
	.content .reason-item:not(:last-child)::after {
		content: "";
		display: block;
		width: calc(240 / 780 * 100vw);
		height: calc(2 / 780 * 100vw);
		background-color: #000000;
		position: absolute;
		bottom: 0;
		left: calc(50% - calc(240 / 780 * 100vw) / 2);
	}
}

@media screen and (min-width: 768px){
	.content .reason-item-image {
		width: 320px;
	}
}
@media screen and (max-width: 767px){
	.content .reason-item-image {
		width: calc(430 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(32 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .reason-item-content {
		width: 640px;
	}
}
@media screen and (max-width: 767px){
	.content .reason-item-content {
		width: calc(580 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(22 / 780 * 100vw);
		padding-bottom: calc(74 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .reason-item-title {
		font-size: 20px;
		line-height: calc(32 / 20);
		letter-spacing: 0.08em;
		margin-top: -7px;
	}
}
@media screen and (max-width: 767px){
	.content .reason-item-title {
		font-size: calc(28 / 780 * 100vw);
		line-height: calc(43 / 28);
		letter-spacing: 0.08em;
		text-align: center;
	}
}

@media screen and (min-width: 768px){
	.content .reason-item-text {
		font-size: 14px;
		line-height: calc(30 / 14);
		letter-spacing: 0.08em;
		padding-top: 5px;
	}
}
@media screen and (max-width: 767px){
	.content .reason-item-text {
		font-size: calc(28 / 780 * 100vw);
		line-height: calc(43 / 28);
		letter-spacing: 0.08em;
		display: block;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.35s ease, opacity 0.35s ease;
	}
	.content .reason-item-text.reason-text-is-open {
		opacity: 1;
	}
	.content .reason-item-text-more {
		text-align: center;
		margin-top: calc(-10 / 780 * 100vw);
		padding-left: calc(38 / 780 * 100vw);
		cursor: pointer;
	}
	.content .reason-item-text-more span {
		font-size: calc(30 / 780 * 100vw);
		line-height: calc(56 / 30);
		letter-spacing: 0.1em;
		position: relative;
	}
	.content .reason-item-text-more span::before {
		position: absolute;
		content: ">";
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(30 / 780 * 100vw);
		top: calc(-6 / 780 * 100vw);
		left: calc(-38 / 780 * 100vw);
	}
}

/* ====================
sped
==================== */
@media screen and (min-width: 768px){
	.content .sped {
		margin-top: 120px;
		padding-top: 108px;
		padding-bottom: 212px;
		background-color: #2b3875;
		position: relative;
	}
}
@media screen and (max-width: 767px){
	.content .sped {
		margin-top: calc(42 / 780 * 100vw);
		padding-top: calc(143 / 780 * 100vw);
		padding-bottom: calc(310 / 780 * 100vw);
		background-color: #2b3875;
		position: relative;
	}
}

@media screen and (min-width: 768px){
	.content .sped::after {
		content: "";
		display: block;
		width: 300px;
		height: 1px;
		background-color: #cfcdcd;
		position: absolute;
		bottom: 120px;
		left: calc(50% - 150px);
	}
}
@media screen and (max-width: 767px){
	.content .sped::after {
		content: "";
		display: block;
		width: calc(380 / 780 * 100vw);
		height: calc(2 / 780 * 100vw);
		background-color: #cfcdcd;
		position: absolute;
		bottom: calc(160 / 780 * 100vw);
		left: calc(50% - calc(380 / 780 * 100vw) / 2);
	}
}

.content .sped .section-catch {
	color: #cfcdcd;
}
.content .sped .section-catch::after {
	background-color: #cfcdcd;
}
.content .sped .section-title {
	color: #cfcdcd;
}

@media screen and (min-width: 768px){
	.content .sped-image-list {
		width: 1000px;
		margin: 0 auto;
		padding-top: 47px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}
@media screen and (max-width: 767px){
	.content .sped-image-list {
		width: calc(724 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(54 / 780 * 100vw);
		display: flex;
		flex-direction: column;
		row-gap: calc(50 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-image-main {
		width: 480px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-image-main {
		width: calc(724 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-image-sub {
		width: 480px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-image-sub {
		width: calc(724 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-image-sub-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 40px;
		row-gap: 30px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-image-sub-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: calc(44 / 780 * 100vw);
		row-gap: calc(50 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-image-sub-item {
		width: 220px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-image-sub-item {
		width: calc(340 / 780 * 100vw);
	}
	.content .sped-image-sub-item:nth-child(3){ order: 4; }
	.content .sped-image-sub-item:nth-child(4){ order: 3; }
}

.content .sped-image-sub-item {
	position: relative;
}
.content .sped-image-sub-item .sped-sub-image {
	width: 100%;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.content .sped-image-sub-item .sped-sub-image:first-child {
	position: relative;
	z-index: 1;
}
.content .sped-image-sub-item:not(.is-ready) .sped-sub-image:first-child {
	opacity: 1;
}
.content .sped-image-sub-item .sped-sub-image:not(:first-child) {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.content .sped-image-sub-item .sped-sub-image img {
	display: block;
	width: 100%;
}
.content .sped-image-sub-item .sped-sub-image.is-active {
	opacity: 1;
	z-index: 2;
}

.content .sped-info {
	width: 100%;
	height: 100%;
}

@media screen and (min-width: 768px){
	.content .sped-spec {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 20px;
		line-height: calc(34 / 20);
		letter-spacing: 0.02em;
		color: #cfcdcd;
		padding-top: 62px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-spec {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(32 / 780 * 100vw);
		line-height: calc(52 / 32);
		color: #cfcdcd;
		padding-top: calc(75 / 780 * 100vw);
		padding-left: calc(26 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-button {
		padding-top: 30px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-button {
		padding-top: calc(66 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-button a {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 18px;
		line-height: calc(21.5 / 18);
		color: #cfcdcd;
		width: 100%;
		height: 70px;
		border: solid 1px #cfcdcd;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}
@media screen and (max-width: 767px){
	.content .sped-button a {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(32 / 780 * 100vw);
		line-height: calc(52 / 32);
		color: #cfcdcd;
		width: calc(330 / 780 * 100vw);
		height: calc(110 / 780 * 100vw);
		border: solid 1px #cfcdcd;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
}

@media screen and (min-width: 768px){
	.content .sped-disc {
		width: 1000px;
		margin: 0 auto;
		padding-top: 90px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}
@media screen and (max-width: 767px){
	.content .sped-disc {
		width: calc(668 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(144 / 780 * 100vw);
		display: flex;
		flex-direction: column;
		row-gap: calc(50 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .sped-disc-text {
		font-size: 16px;
		line-height: calc(34 / 16);
		letter-spacing: 0.02em;
		color: #cfcdcd;
		width: 480px;
	}
}
@media screen and (max-width: 767px){
	.content .sped-disc-text {
		font-size: calc(30 / 780 * 100vw);
		line-height: calc(56 / 30);
		letter-spacing: 0.02em;
		color: #cfcdcd;
		width: calc(668 / 780 * 100vw);
	}
}

/* ====================
popular-model
==================== */
@media screen and (min-width: 768px){
	.content .popular-model {
		margin-top: 55px;
		padding-top: 54px;
	}
}
@media screen and (max-width: 767px){
	.content .popular-model {
		margin-top: calc(72 / 780 * 100vw);
		padding-top: calc(71 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-list {
		width: 1000px;
		margin: 0 auto;
		padding-top: 47px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}
@media screen and (max-width: 767px){
	.content .genre-list {
		width: calc(724 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(54 / 780 * 100vw);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}

@media screen and (min-width: 768px){
	.content .genre-item {
		width: 480px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-item {
		width: calc(340 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-content {
		width: 1000px;
		margin: 0 auto;
	}
	.content .genre-content#sunglasses {
		padding-top: 88px;
	}
	.content .genre-content#frame {
		padding-top: 88px;
	}
	.content .genre-content#faq {
		padding-top: 108px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-content {
		width: calc(668 / 780 * 100vw);
		margin: 0 auto;
	}
	.content .genre-content#sunglasses {
		padding-top: calc(144 / 780 * 100vw);
	}
	.content .genre-content#frame {
		padding-top: calc(144 / 780 * 100vw);
	}
	.content .genre-content#faq {
		width: calc(680 / 780 * 100vw);
		padding-top: calc(144 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-content-title {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 24px;
		line-height: calc(42 / 24);
		letter-spacing: 0.04em;
		text-align: center;
	}
}
@media screen and (max-width: 767px){
	.content .genre-content-title {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(34 / 780 * 100vw);
		line-height: calc(62 / 34);
		letter-spacing: 0.04em;
		text-align: center;
	}
}

@media screen and (min-width: 768px){
	.content .genre-content-lead {
		width: 900px;
		margin: 0 auto;
		padding-top: 17px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-content-lead {
		width: calc(668 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(46 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-main-model {
		width: 1000px;
		margin: 0 auto;
		padding-top: 52px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
}
@media screen and (max-width: 767px){
	.content .genre-main-model {
		width: calc(648 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(46 / 780 * 100vw);
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}
}

@media screen and (min-width: 768px){
	.content .genre-main-model-image {
		width: 480px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-main-model-image {
		width: calc(648 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-main-model-info {
		width: 480px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-main-model-info {
		width: calc(648 / 780 * 100vw);
		padding-top: calc(32 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-main-model-spec {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 18px;
		line-height: calc(28 / 18);
		margin-top: -6px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-main-model-spec {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(28 / 780 * 100vw);
		line-height: calc(40 / 28);
		text-align: center;
	}
}

@media screen and (min-width: 768px){
	.content .genre-main-model-text {
		font-size: 14px;
		line-height: calc(28 / 14);
		letter-spacing: 0.08em;
		padding-top: 28px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-main-model-text {
		font-size: calc(28 / 780 * 100vw);
		line-height: calc(48 / 28);
		padding-top: calc(42 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-sub-model {
		width: 1000px;
		margin: 0 auto;
		padding-top: 50px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-sub-model {
		width: calc(648 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(70 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-sub-model-list {
		width: 1000px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 40px;
		row-gap: 40px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-sub-model-list {
		width: calc(648 / 780 * 100vw);
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: calc(48 / 780 * 100vw);
		row-gap: calc(50 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-sub-model-item {
		width: 220px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-sub-model-item {
		width: calc(300 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-sub-model-spec {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: 16px;
		line-height: calc(24 / 16);
		text-align: center;
		padding-top: 11px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-sub-model-spec {
		font-family: 'Inter', sans-serif;
		font-weight: 400;
		font-size: calc(24 / 780 * 100vw);
		line-height: calc(28 / 24);
		text-align: center;
		padding-top: calc(18 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .genre-button {
		margin: 0 auto;
		padding-top: 47px;
	}
}
@media screen and (max-width: 767px){
	.content .genre-button {
		margin: 0 auto;
		padding-top: calc(54 / 780 * 100vw);
	}
}

@media screen and (min-width: 768px){
	.content .faq-list {
		width: 1000px;
		margin: 0 auto;
		margin-top: 49px;
		border-top: solid 1px #000000;
	}
}
@media screen and (max-width: 767px){
	.content .faq-list {
		width: calc(680 / 780 * 100vw);
		margin: 0 auto;
		margin-top: calc(40 / 780 * 100vw);
		border-top: solid 1px #000000;
	}
}

@media screen and (min-width: 768px){
	.content .faq-item {
		position: relative;
		width: 100%;
		border-bottom: solid 1px #000000;
		padding-top: 33px;
		padding-bottom: 34px;
		cursor: pointer;
	}
}
@media screen and (max-width: 767px){
	.content .faq-item {
		position: relative;
		width: 100%;
		border-bottom: solid 1px #000000;
		padding-top: calc(69 / 780 * 100vw);
		padding-bottom: calc(71 / 780 * 100vw);
		cursor: pointer;
	}
}

@media screen and (min-width: 768px){
	.content .faq-question::after {
		content: "";
		display: block;
		width: 21px;
		height: 1px;
		background-color: #000000;
		position: absolute;
		top: 50%;
		right: 33px;
		transform: translateY(-50%);
	}
	.content .faq-question::before {
		content: "";
		display: block;
		width: 21px;
		height: 1px;
		background-color: #000000;
		position: absolute;
		top: 50%;
		right: 33px;
		transform: translateY(-50%) rotate(90deg);
		transition: 0.3s;
	}
}
@media screen and (max-width: 767px){
	.content .faq-question::after {
		content: "";
		display: block;
		width: calc(30 / 780 * 100vw);
		height: calc(2 / 780 * 100vw);
		background-color: #000000;
		position: absolute;
		top: 50%;
		right: calc(20 / 780 * 100vw);
		transform: translateY(-50%);
	}
	.content .faq-question::before {
		content: "";
		display: block;
		width: calc(30 / 780 * 100vw);
		height: calc(2 / 780 * 100vw);
		background-color: #000000;
		position: absolute;
		top: 50%;
		right: calc(20 / 780 * 100vw);
		transform: translateY(-50%) rotate(90deg);
		transition: 0.3s;
	}
}

.content .faq-item.faq-open .faq-question::before {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

@media screen and (min-width: 768px){
	.content .faq-question {
		position: relative;
		font-size: 20px;
		line-height: calc(32 / 20);
		letter-spacing: 0.06em;
		text-align: center;
	}
}
@media screen and (max-width: 767px){
	.content .faq-question {
		position: relative;
		font-size: calc(30 / 780 * 100vw);
		line-height: calc(54 / 30);
		letter-spacing: 0.02em;
		text-align: center;
	}
}

@media screen and (min-width: 768px){
	.content .faq-answer {
		padding-top: 14px;
		display: none;
	}
}
@media screen and (max-width: 767px){
	.content .faq-answer {
		width: calc(580 / 780 * 100vw);
		margin: 0 auto;
		padding-top: calc(59 / 780 * 100vw);
		display: none;
	}
}

@media screen and (min-width: 768px){
	.content .answer-text {
		font-size: 16px;
		line-height: calc(34 / 16);
		letter-spacing: 0.02em;
		text-align: center;
	}
}
@media screen and (max-width: 767px){
	.content .answer-text {
		font-size: calc(28 / 780 * 100vw);
		line-height: calc(54.5 / 28);
	}
}

@media screen and (min-width: 768px){
	.content .faq-button {
		margin: 0 auto;
		padding-top: 61px;
	}
}
@media screen and (max-width: 767px){
	.content .faq-button {
		margin: 0 auto;
		padding-top: calc(104 / 780 * 100vw);
	}
}


/* ====================
shoplist
==================== */
@media screen and (min-width: 768px){
	.content .shoplist {
		margin-top: 55px;
		padding-top: 54px;
	}
}
@media screen and (max-width: 767px){
	.content .shoplist {
		margin-top: calc(72 / 780 * 100vw);
		padding-top: calc(71 / 780 * 100vw);
	}
}

/* shop-list: PCは列優先3列（各8件）、SPは列優先2列（各12件） */
@media screen and (min-width: 768px){
	.content .shop-nav {
		width: 1000px;
		max-width: 100%;
		margin: 0 auto;
		padding-top: 46px;
	}
	.content .shop-list {
		/* グリッドレイアウトを有効化 */
		display: grid;
		/* 横方向に3列、各列の幅は均等（1fr） */
		grid-template-columns: repeat(3, 1fr);
		/* 縦方向に8行、行の高さは内容に合わせる */
		grid-template-rows: repeat(8, auto);
		/* 子要素を「列を先に埋める」順で配置（1列目の上から8件→2列目→3列目） */
		grid-auto-flow: column;
		/* 列と列の間の余白 */
		column-gap: 50px;
	}
	.content .shop-list-item {
		border-bottom: solid 1px #000000;
	}
	.content .shop-list-item:nth-child(8n+1) {
		border-top: solid 1px #000000;
	}
	.content .shop-list-btn {
		display: block;
		width: 100%;
		padding: 0;
		margin-top: -1px;
		text-align: left;
		font-size: 14px;
		line-height: calc(51 / 14);
		letter-spacing: 0.02em;
	}
}
@media screen and (max-width: 767px){
	.content .shop-nav {
		width: calc(648 / 780 * 100vw);
		max-width: 100%;
		margin: 0 auto;
		padding-top: calc(53 / 780 * 100vw);
	}
	.content .shop-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(12, auto);
		grid-auto-flow: column;
		column-gap: calc(40 / 780 * 100vw);
	}
	.content .shop-list-item {
		border-bottom: solid 1px #000000;
	}
	.content .shop-list-item:nth-child(12n+1) {
		border-top: solid 1px #000000;
	}
	.content .shop-list-btn {
		display: block;
		width: 100%;
		padding: 0;
		margin-top: calc(-2 / 780 * 100vw);
		text-align: left;
		font-size: calc(20 / 780 * 100vw);
		line-height: calc(62 / 20);
	}
}


/* ====================
スクロール
==================== */
.fadein{opacity:0;}


.fadein.scrollin{opacity:1;-webkit-transition:.5s .2s ease;transition:.5s .2s ease;-webkit-transform:none;transform:none}