@charset "utf-8";

#VISUAL {
background-color: var(--color-primary);
}
#VISUAL .cont {
display: flex;
width: 100%;
height: 46.667vw;
}
#VISUAL .title {
display: flex;
justify-content: center;
align-items: center;
width: 47.2vw;
height: 100%;
}
#VISUAL .title img {
width: 38.4vw;
height: auto;
}
#VISUAL .image {
flex: 1;
height: 100%;
}
#VISUAL .image img {
object-fit: cover;
width: 100%;
height: 100%;
}
@media screen and (min-width: 768px) {
	#VISUAL .cont {
	height: 315px;
	}
	#VISUAL .title {
	width: 658px;
	}
	#VISUAL .title img {
	width: 395px;
	}
}

#ANCHOR .cont {
background-color: #fff;
padding: 4vw;
}
#ANCHOR ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.333vw;
width: 100%;
}
#ANCHOR li {
font-weight: bold;
font-size: 3.733vw;
}
#ANCHOR a {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-primary);
width: 100%;
height: 9.067vw;
text-decoration: none;
}
@media screen and (min-width: 768px) {
	#ANCHOR .cont {
	padding: 44px 60px;
	}
	#ANCHOR ul {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	}
	#ANCHOR li {
	font-size: 20px;
	}
	#ANCHOR a {
	transition: background-color 0.3s ease, color 0.3s ease;
	height: 62px;
	color: #000;
	}
	#ANCHOR a:hover {
	background-color: #000;
	color: #fff;
	}
}

#CONCEPT .cont {
background-color: #fff;
padding: 4.267vw 6.667vw 8.533vw 6.667vw;
white-space: nowrap;
}
#CONCEPT .image {
display: flex;
justify-content: center;
margin-bottom: 8.533vw;
}
#CONCEPT .image img {
display: block;
margin: 0 auto;
width: 49.6vw;
height: auto;
}
#CONCEPT .explan h2 {
margin-bottom: 5.333vw;
font-weight: 900;
font-family: "Zen Old Mincho", serif;
font-size: 6.667vw;
}
#CONCEPT .card h3 {
margin-bottom: 0.533vw;
font-weight: 900;
font-family: "Zen Old Mincho", serif;
font-size: 5.333vw;
}
#CONCEPT .card p {
margin-bottom: 9.067vw;
font-weight: 900;
font-family: "Zen Old Mincho", serif;
font-size: 3.733vw;
line-height: 2.33;
}
#CONCEPT p.more {
margin: 0;
font-size: 3.733vw;
}
#CONCEPT p.more span {
display: flex;
justify-content: center;
align-items: center;
background-color: #efefef;
border-radius: 26666.4vw;
margin: 0 auto;
width: 32vw;
height: 8.533vw;
text-decoration: none;
}
@media screen and (min-width: 768px) {
	#CONCEPT .cont {
	padding: 15px 60px 85px 60px;
	}
	#CONCEPT .image {
	margin-bottom: 65px;
	}
	#CONCEPT .image img {
	width: 372px;
	}
	#CONCEPT .explan {
	margin: 0 auto;
	width: 520px;
	text-align: left;
	}
	#CONCEPT .explan h2 {
	margin-bottom: 35px;
	font-size: 45px;
	}
	#CONCEPT .card h3 {
	margin-bottom: 15px;
	font-size: 28px;
	}
	#CONCEPT .card p {
	margin-bottom: 45px;
	font-size: 19px;
	line-height: 2.27;
	}
	#CONCEPT p.more {
	cursor: pointer;
	font-size: 20px;
	}
	#CONCEPT p.more span {
	border-radius: 99999px;
	width: 166px;
	height: 45px;
	}
}

#QA {
background-color: var(--color-primary);
}
#QA .cont {
padding: 8vw 6.667vw 8.533vw 6.667vw;
}
#QA h2 {
margin-bottom: 3.2vw;
font-size: 9.067vw;
line-height: 1.59;
}
#QA .lead {
font-size: 3.733vw;
line-height: 1.97;
}
#QA .js-more-panel,
#QA .cardList {
display: flex;
flex-direction: column;
}
#QA .card {
box-shadow: 0.533vw 0.533vw 0px #798764;
background-color: #fff;
border-radius: 2.667vw;
margin-top: 6.667vw;
}
#QA h3 {
position: relative;
padding: 4vw;
font-size: 5.6vw;
}
#QA .trigger::after {
transition: margin 0.3s ease, transform 0.3s ease;
transform: translateY(-50%) rotate(45deg);
content: '';
position: absolute;
right: 7.2vw;
top: 50%;
display: inline-block;
vertical-align: middle;
color: #000;
line-height: 1;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
margin-top: -1.067vw;
width: 0.5em;
height: 0.5em;
}
#QA .trigger.active::after {
transform: translateY(-50%) rotate(225deg);
margin-top: 1.067vw;
}
#QA .trigger {
transition: margin 0.3s ease;
}
#QA .trigger.active {
margin-bottom: -0.8vw;
}
#QA .panel {
padding: 0 4vw;
}
#QA h4 {
position: relative;
margin-bottom: 2.667vw;
padding-left: 2.667vw;
font-size: 4.267vw;
line-height: 1.66;
}
#QA h4::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 1.333vw;
bottom: 1.333vw;
background-color: var(--color-primary);
width: 1.067vw;
}
#QA .panel p {
font-family: "Koburina Gothic W3 JIS2004";
font-size: 3.733vw;
line-height: 1.54;
}
#QA .panel p.note {
margin-top: 1.333vw;
font-size: 3.2vw;
}
#QA .row {
display: flex;
padding-bottom: 5.333vw;
}
#QA .row p {
flex: 1;
}
#QA-CRD1 .image {
margin: -8.8vw auto 0 auto;
width: 59.733vw;
}
#QA-CRD2 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 66.667vw;
}
#QA-CRD3 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 0 0;
width: 62.667vw;
}
#QA-CRD4 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 53.333vw;
}
#QA-CRD5 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 73.867vw;
}
#QA-CRD6 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 52vw;
}
#QA-CRD7 p {
padding: 0 0 5.333vw 0;
}
#QA-CRD8 .image {
margin: 0 auto 0 auto;
width: 37.333vw;
}
#QA-CRD9 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 58.667vw;
}
#QA-CRD10 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 1.333vw 5.333vw 1.333vw;
}
#QA-CRD11 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 1.333vw 5.333vw 1.333vw;
}
#QA-CRD12 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 1.333vw 5.333vw 1.333vw;
}
#QA-CRD13 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 64.533vw;
}
#QA-CRD14 .image {
margin: 0 auto 0 2.667vw;
width: 29.333vw;
}
#QA-CRD15 p {
padding: 0 0 5.333vw 0;
}
#QA-CRD16 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 69.333vw;
}
#QA p.more {
margin-top: 8vw;
font-size: 3.733vw;
}
#QA p.more span {
display: flex;
justify-content: center;
align-items: center;
background-color: #efefef;
border-radius: 26666.4vw;
margin: 0 auto;
width: 32vw;
height: 8.533vw;
text-decoration: none;
}
@media screen and (min-width: 768px) {
	#QA .cont {
	padding: 50px 60px 60px 60px;
	}
	#QA h2 {
	margin-bottom: 5px;
	font-size: 74px;
	}
	#QA .lead {
	margin-bottom: 15px;
	font-size: 22px;
	line-height: 1.82;
	}
	#QA .js-more-panel,
	#QA .cardList {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0 40px;
	}
	#QA .card {
	position: relative;
	box-sizing: border-box;
	box-shadow: 4px 4px 0px #798764;
	border-radius: 20px;
	margin-top: 40px;
	}
	#QA h3 {
	position: relative;
	padding: 40px 30px;
	font-size: 32px;
	line-height: 1.13;
	}
	#QA .trigger {
	cursor: pointer;
	}
	#QA .trigger::after {
	right: 45px;
	margin-top: -5px;
	}
	#QA .trigger.active::after {
	margin-top: 5px;
	}
	#QA .trigger.active {
	margin-bottom: -20px;
	}
	#QA .panel {
	padding: 0 30px;
	}
	#QA h4 {
	margin-bottom: 15px;
	padding-left: 17px;
	font-size: 24px;
	line-height: 1.38;
	}
	#QA h4::before {
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 5px;
	}
	#QA .panel p {
	font-size: 19px;
	line-height: 1.64;
	}
	#QA .panel p.note {
	margin-top: 10px;
	font-size: 14px;
	}
	#QA .row {
	display: flex;
	padding-bottom: 30px;
	}
	#QA .row2 {
	display: flex;
	padding-bottom: 30px;
	}
	#QA .row2 p,
	#QA .row p {
	flex: 1;
	}
	#QA-CRD1 {
	margin-bottom: 40px;
	width: 624px;
	}
	#QA-CRD1 .image {
	margin: -33px auto 0 auto;
	width: 288px;
	}
	#QA-CRD2 {
	width: 316px;
	}
	#QA-CRD2 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 100%;
	}
	#QA-CRD3 {
	width: 400px;
	}
	#QA-CRD3 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 100%;
	}
	#QA-CRD4 {
	top: -40px;
	width: 540px;
	}
	#QA-CRD4 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 328px;
	}
	#QA-CRD5 {
	top: -40px;
	margin-bottom: -40px;
	width: 370px;
	}
	#QA-CRD5 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 100%;
	}
	#QA-CRD6 {
	width: 570px;
	}
	#QA-CRD6 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 306px;
	}
	#QA-CRD7 {
	width: 370px;
	}
	#QA-CRD7 p {
	padding: 0 0 30px 0;
	}
	#QA-CRD8 {
	width: 570px;
	}
	#QA-CRD8 .image {
	margin: 0 auto 0 auto;
	width: 273px;
	}
	#QA-CRD9 {
	width: 345px;
	}
	#QA-CRD9 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 100%;
	}
	#QA-CRD10 {
	margin-bottom: 75px;
	width: 595px;
	}
	#QA-CRD10 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 365px;
	}
	#QA-CRD11 {
	width: 510px;
	}
	#QA-CRD11 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 100%;
	}
	#QA-CRD12 {
	top: -75px;
	margin-bottom: -75px;
	width: 350px;
	}
	#QA-CRD12 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 100%;
	}
	#QA-CRD13 {
	margin-bottom: 75px;
	width: 600px;
	}
	#QA-CRD13 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 336px;
	}
	#QA-CRD14 {
	width: 340px;
	}
	#QA-CRD14 .row {
	flex-direction: column;
	}
	#QA-CRD14 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 0 0;
	width: 178px;
	}
	#QA-CRD15 {
	top: -75px;
	margin-bottom: -75px;
	width: 460px;
	}
	#QA-CRD15 p {
	padding: 0 0 30px 0;
	}
	#QA-CRD16 {
	width: 410px;
	}
	#QA-CRD16 .image {
	margin: 0 auto 0 auto;
	padding: 15px 0 30px 0;
	width: 100%;
	}
	#QA p.more {
	margin-top: 60px;
	font-size: 20px;
	cursor: pointer;
	}
	#QA p.more span {
	border-radius: 99999px;
	width: 166px;
	height: 45px;
	}
}

#TECHNOLOGY {
background-color: #fff;
}
#TECHNOLOGY .cont {
padding: 8vw 6.667vw 8.533vw 6.667vw;
}
#TECHNOLOGY h2 {
margin-bottom: 3.2vw;
font-size: 9.067vw;
line-height: 1.59;
}
#TECHNOLOGY .lead {
margin-bottom: 5.333vw;
font-size: 3.733vw;
line-height: 1.97;
}
#TECHNOLOGY .folder {
margin: 0 auto 5.333vw auto;
width: 53.867vw;
}
#TECHNOLOGY .folder img {
filter: drop-shadow(0.533vw 0.533vw 0.533vw rgba(0,0,0,0.3));
}
#TECHNOLOGY .image {
position: relative;
margin: 0 -6.667vw;
}
#TECHNOLOGY .image li {
position: absolute;
font-size: 3.733vw;
list-style: 1.29;
}
#TECHNOLOGY .image li:nth-of-type(1) {
left: 47%;
top: -1%;
}
#TECHNOLOGY .image li:nth-of-type(2) {
left: 8%;
top: 11%;
}
#TECHNOLOGY .image li:nth-of-type(3) {
left: 55%;
top: 11%;
}
#TECHNOLOGY .image li:nth-of-type(4) {
left: 8%;
top: 76%;
}
#TECHNOLOGY .image li:nth-of-type(5) {
left: 61%;
top: 76%;
}
#TECHNOLOGY .image li:nth-of-type(6) {
left: 10%;
bottom: 1%;
}
#TECHNOLOGY .image li:nth-of-type(7) {
left: 61%;
bottom: 1%;
}
#TECHNOLOGY .image span {
display: block;
padding-right: 4vw;
text-decoration: none;
}
#TECHNOLOGY .image span::after {
transform: translateY(-50%);
content: '';
display: inline-block;
position: absolute;
right: 0;
top: 50%;
vertical-align: middle;
color: #333;
line-height: 1;
width: 0;
height: 0;
border-style: solid;
border-color: transparent;
border-width: 0.375em 0.64952em;
border-left-color: currentColor;
border-right: 0;
}
@media screen and (min-width: 768px) {
	#TECHNOLOGY .cont {
	padding: 50px 60px 120px 60px;
	}
	#TECHNOLOGY h2 {
	margin-bottom: 5px;
	font-size: 74px;
	}
	#TECHNOLOGY .lead {
	margin-bottom: 15px;
	font-size: 22px;
	line-height: 1.82;
	}
	#TECHNOLOGY .set {
	position: relative;
	}
	#TECHNOLOGY .folder {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	width: 318px;
	cursor: pointer;
	z-index: 1;
	}
	#TECHNOLOGY .folder img {
	filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
	}
	#TECHNOLOGY .image {
	margin: 0;
	}
	#TECHNOLOGY .image li {
	font-size: 24px;
	}
	#TECHNOLOGY .image li:nth-of-type(1) {
	left: 465px;
	top: 125px;
	}
	#TECHNOLOGY .image li:nth-of-type(2) {
	left: 30px;
	top: 215px;
	}
	#TECHNOLOGY .image li:nth-of-type(3) {
	left: 795px;
	top: 125px;
	}
	#TECHNOLOGY .image li:nth-of-type(4) {
	left: 0;
	top: 685px;
	}
	#TECHNOLOGY .image li:nth-of-type(5) {
	left: 570px;
	top: 685px;
	}
	#TECHNOLOGY .image li:nth-of-type(6) {
	left: 670px;
	bottom: inherit;
	top: 40px;
	}
	#TECHNOLOGY .image li:nth-of-type(7) {
	left: 805px;
	bottom: 10px;
	}
	#TECHNOLOGY .image span {
	padding-right: 25px;
	cursor: pointer;
	}
}

#MODAL {
position: fixed;
transition: opacity 0.3s ease, visibility 0.3s ease;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 9;
}
#MODAL.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#MODAL .mask {
position: fixed;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
z-index: 9;
}
#MODAL .cont {
transform: translate(-50%,-50%);
position: fixed;
left: 50%;
top: 50%;
margin: 0 auto;
width: 86.667vw;
z-index: 9;
}
#MODAL .card {
display: none;
}
#MODAL .card.active {
display: block;
}
#MODAL h3 {
position: relative;
display: flex;
}
#MODAL h3::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
background-color: var(--color-primary);
width: 100%;
height: 3.467vw;
}
#MODAL h3 span {
position: relative;
z-index: 1;
box-sizing: border-box;
display: flex;
align-items: center;
background: url("../img/tec_tab.svg") no-repeat right center;
background-size: auto 8.533vw;
padding: 0 18.667vw 0 3.2vw;
height: 8.533vw;
font-size: 4.267vw;
}
#MODAL h3 span::before {
content: '';
transform: translateY(-50%) rotate(45deg);
display: block;
position: absolute;
right: 10.667vw;
top: 50%;
background-color: #000;
width: 4vw;
height: 0.267vw;
}
#MODAL h3 span::after {
content: '';
transform: translateY(-50%) rotate(-45deg);
display: block;
position: absolute;
right: 10.667vw;
top: 50%;
background-color: #000;
width: 4vw;
height: 0.267vw;
}
#MODAL .panel {
position: relative;
background-color: #fff;
padding: 2.667vw 5.333vw 0 5.333vw;
}
#MODAL h4 {
font-size: 5.067vw;
}
#MODAL h4 span {
font-family: "Koburina Gothic W3 JIS2004";
font-size: 3.733vw;
}
#MODAL p {
margin-top: 1.867vw;
font-family: "Koburina Gothic W3 JIS2004";
font-size: 3.733vw;
line-height: 1.43;
}
#TEC01 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 42.933vw;
}
#TEC02 h4 span {
margin-right: 1em;
}
#TEC02 .image {
margin: 0 auto 0 auto;
padding: 1.867vw 0 0 0;
width: 50.133vw;
}
#TEC03 .panel {
display: flex;
flex-direction: column-reverse;
padding-bottom: 4.533vw;
}
#TEC03 .image {
margin: 0 auto 0 auto;
padding: 0.8vw 0 2.667vw 0;
width: 53.333vw;
}
#TEC04 .image {
margin: 0 auto 0 auto;
padding: 4.533vw 0 5.333vw 0;
width: 58.667vw;
}
#TEC05 .panel {
display: flex;
flex-direction: column-reverse;
padding-bottom: 4.533vw;
}
#TEC05 .image {
margin: 0 -5.333vw -5.333vw -5.333vw;
padding: 0.8vw 0 0 0;
}
#TEC05 h4 {
flex: 1;
text-align: right;
}
#TEC06 .panel {
display: flex;
flex-direction: column-reverse;
padding-bottom: 4.533vw;
}
#TEC06 .image {
margin: 0 -5.333vw 0 auto;
padding: 0.8vw 0 2.667vw 0;
width: 61.333vw;
}
#TEC07 .panel {
padding: 0;
}
#TEC07 .image {
margin: 0 auto 0 auto;
padding: 0 0 2.667vw 0;
width: 22.4vw;
}
#TEC07 h4 {
position: absolute;
left: 5.333vw;
top: 66.667vw;
}
#TEC07 h4 span {
font-size: 3.2vw;
letter-spacing: 0;
}
#TEC08 .image {
margin: 0 0 0 2.667vw;
padding: 0.8vw 0 5.333vw 0;
width: 40.533vw;
}
#TEC08 h4 {
position: absolute;
right: 5.333vw;
top: 5.333vw;
}
@media screen and (min-width: 768px) {
	#MODAL .cont {
	width: 510px;
	}
	#MODAL #TEC01 {
	margin: 0 -160px;
	width: 830px;
	}
	#MODAL h3 {
	overflow: hidden;
	cursor: pointer;
	}
	#MODAL h3::before {
	height: 28px;
	}
	#MODAL h3 span {
	background-size: auto 64px;
	padding: 0 160px 0 30px;
	height: 64px;
	white-space: nowrap;
	font-size: 32px;
	}
	#MODAL h3 span::before {
	right: 80px;
	width: 30px;
	height: 2px;
	}
	#MODAL h3 span::after {
	right: 80px;
	width: 30px;
	height: 2px;
	}
	#MODAL .panel {
	position: relative;
	background-color: #fff;
	padding: 10px 30px 0 30px;
	}
	#MODAL h4 {
	font-size: 32px;
	}
	#MODAL h4 span {
	font-size: 25px;
	}
	#MODAL p {
	margin-top: 10px;
	font-size: 19px;
	line-height: 1.9;
	}
	#TEC01 .set {
	display: flex;
	gap: 20px;
	padding-bottom: 20px;
	}
	#TEC01 .set p {
	flex: 1;
	}
	#TEC01 .image {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 240px;
	}
	#TEC02 .panel {
	padding-top: 20px;
	}
	#TEC02 .image {
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	width: 266px;
	}
	#TEC03 .panel {
	display: flex;
	flex-direction: column-reverse;
	padding-bottom: 20px;
	}
	#TEC03 .image {
	margin: 0 auto 0 auto;
	padding: 0 0 0 0;
	width: 345px;
	}
	#TEC04 .panel {
	display: flex;
	flex-direction: column-reverse;
	padding-bottom: 20px;
	}
	#TEC04 .image {
	margin: 0 auto 0 auto;
	padding: 40px 0 10px 0;
	width: 364px;
	}
	#TEC05 .panel {
	display: flex;
	flex-direction: column-reverse;
	padding-bottom: 20px;
	}
	#TEC05 .image {
	margin: 0 -30px -20px -30px;
	padding: 0 0 0 0;
	}
	#TEC05 h4 {
	flex: 1;
	text-align: right;
	}
	#TEC06 .panel {
	display: flex;
	flex-direction: column-reverse;
	padding-bottom: 20px;
	}
	#TEC06 .image {
	margin: 0 -30px 0 auto;
	padding: 20px 0 10px 0;
	width: 365px;
	}
	#TEC07 .panel {
	padding: 0 0 0 25px;
	}
	#TEC07 .image {
	margin: 0 auto 0 auto;
	padding: 0 0 10px 0;
	width: 125px;
	}
	#TEC07 h4 {
	position: absolute;
	left: 30px;
	top: 400px;
	}
	#TEC07 h4 span {
	display: inline-block;
	font-size: 20px;
	line-height: 1.3;
	}
	#TEC08 .image {
	margin: 0;
	padding: 0 0 20px 0;
	width: 245px;
	}
	#TEC08 h4 {
	position: absolute;
	right: 30px;
	top: 25px;
	}
}

#BIRTH {
background-color: var(--color-primary);
padding: 1.867vw;
}
#BIRTH .cont {
background-color: #fff;
padding: 6.4vw 4.8vw 10.667vw 4.8vw;
}
#BIRTH h2 {
margin-bottom: 3.2vw;
font-size: 9.067vw;
line-height: 1.59;
}
#BIRTH h2 img {
margin-bottom: 3.2vw;
width: 50.667vw;
}
#BIRTH .lead {
margin-bottom: 6.667vw;
font-size: 3.733vw;
line-height: 1.97;
}
#BIRTH .cardList {
display: flex;
flex-direction: column;
gap: 9.333vw;
}
#BIRTH .trigger {
position: relative;
}
#BIRTH .trigger div {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#BIRTH .trigger div img {
width: auto;
height: 6.933vw;
}
#BIRTH #BIR-CRD2 .trigger div {
top: -5.333vw;
}
#BIRTH #BIR-CRD4 .trigger div {
top: -2.667vw;
}
#BIRTH .trigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 32vw;
}
#BIRTH .trigger h3 {
font-family: "Koburina Gothic W3 JIS2004";
font-size: 4vw;
line-height: 6.667vw;
text-align: center;
}
#BIRTH .trigger h3 strong {
font-family: "Koburina Gothic W6 JIS2004";
font-size: 4.8vw;
background: url("../img/bir_lin.svg") no-repeat center bottom;
background-size: auto 2.4vw;
}
#BIRTH #BIR-CRD3 .trigger h3 strong {
font-size: 6.4vw;
}
#BIRTH .trigger h3::before {
transform: translate(-50%,-50%);
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
}
#BIR-CRD1 h3::before {
background: url("../img/sp/bir_hed1.svg") no-repeat center center;
background-size: contain;
width: 90.933vw;
height: 29.333vw;
}
#BIR-CRD2 h3::before {
background: url("../img/sp/bir_hed2.svg") no-repeat center center;
background-size: contain;
width: 89.333vw;
height: 32vw;
}
#BIR-CRD3 h3::before {
background: url("../img/sp/bir_hed3.svg") no-repeat center center;
background-size: contain;
width: 91.733vw;
height: 29.333vw;
}
#BIR-CRD4 h3::before {
background: url("../img/sp/bir_hed4.svg") no-repeat center center;
background-size: contain;
width: 90.667vw;
height: 32vw;
}
#BIRTH .trigger::after {
transition: margin 0.3s ease, transform 0.3s ease;
transform: translateY(-50%) rotate(45deg);
content: '';
position: absolute;
top: 50%;
display: inline-block;
vertical-align: middle;
color: #000;
line-height: 1;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
margin-top: -1.067vw;
width: 0.5em;
height: 0.5em;
}
#BIRTH .trigger.active::after {
transform: translateY(-50%) rotate(225deg);
margin-top: 1.067vw;
}
#BIR-CRD1 .trigger::after {
right: 4vw;
}
#BIR-CRD2 .trigger::after {
right: 6.667vw;
}
#BIR-CRD3 .trigger::after {
right: 6.667vw;
}
#BIR-CRD4 .trigger::after {
right: 1vw;
}
#BIRTH .panel {
}
#BIRTH .image {
display: flex;
flex-direction: column;
gap: 3.2vw;
margin: 0 auto;
padding: 2.667vw 0 2.667vw 0;
width: 69.333vw;
}
#BIRTH .panel p {
font-size: 3.733vw;
line-height: 1.61;
}
#BIRTH .panel p.led {
padding-top: 2.667vw;
}
#BIRTH #BIR-CRD1 figure {
margin: 0;
padding: 0;
}
#BIRTH #BIR-CRD1 figcaption {
margin-bottom: 1.067vw;
font-size: 3.2vw;
}
#BIRTH #BIR-CRD2 .image {
padding: 2.667vw 1.067vw 0 1.067vw;
width: auto;
}
#BIRTH #BIR-CRD2 .pack {
display: flex;
justify-content: space-between;
}
#BIRTH #BIR-CRD2 .pack img {
width: auto;
height: 38.933vw;
}
#BIRTH #BIR-CRD4 .image {
padding: 2.667vw 0 0 0;
width: 59.733vw;
gap: 4.8vw;
}
@media screen and (min-width: 768px) {
	#BIRTH {
	padding: 18px;
	}
	#BIRTH .cont {
	background-color: #fff;
	padding: 60px 42px 100px 42px;
	}
	#BIRTH h2 {
	margin-bottom: 5px;
	font-size: 74px;
	}
	#BIRTH h2 img {
	margin-bottom: 10px;
	width: 370px;
	}
	#BIRTH .lead {
	margin-bottom: 15px;
	font-size: 22px;
	line-height: 1.82;
	}
	#BIRTH .cardList {
	gap: 100px;
	}
	#BIRTH .trigger div img {
	width: auto;
	height: 50px;
	}
	#BIRTH #BIR-CRD2 .trigger div {
	top: -45px;
	}
	#BIRTH #BIR-CRD4 .trigger div {
	top: -35px;
	}
	#BIRTH .trigger {
	height: 180px;
	cursor: pointer;
	}
	#BIRTH .trigger h3 {
	font-size: 30px;
	line-height: 50px;
	}
	#BIRTH .trigger h3 strong {
	font-size: 34px;
	background-size: auto 18px;
	}
	#BIRTH #BIR-CRD3 .trigger h3 strong {
	font-size: 48px;
	}
	#BIR-CRD1 h3::before {
	background: url("../img/bir_hed1.svg") no-repeat center center;
	background-size: contain;
	width: 927px;
	height: 171px;
	}
	#BIR-CRD2 h3::before {
	background: url("../img/bir_hed2.svg") no-repeat center center;
	background-size: contain;
	width: 948px;
	height: 186px;
	}
	#BIR-CRD3 h3::before {
	background: url("../img/bir_hed3.svg") no-repeat center center;
	background-size: contain;
	width: 831px;
	height: 213px;
	}
	#BIR-CRD4 h3::before {
	background: url("../img/bir_hed4.svg") no-repeat center center;
	background-size: contain;
	width: 860px;
	height: 193px;
	}
	#BIRTH .trigger {
	cursor: pointer;
	}
	#BIRTH .trigger::after {
	right: 150px;
	margin-top: -5px;
    font-size: 32px;
	}
	#BIRTH .trigger.active::after {
	margin-top: 5px;
	}
	#BIRTH .trigger.active {
	margin-bottom: -20px;
	}
	#BIR-CRD1 .trigger::after {
	right: 150px ;
	}
	#BIR-CRD2 .trigger::after {
	right: 150px;
	}
	#BIR-CRD3 .trigger::after {
	right: 200px;
	}
	#BIR-CRD4 .trigger::after {
	right: 150px;
	}
	#BIRTH .panel {
	margin: 0 auto;
	width: 750px;
	}
	#BIRTH .image {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 18px;
	margin: 0 auto;
	padding: 10px 0 0 0;
	width: 750px;
	}
	#BIRTH .panel p {
	font-size: 15px;
	line-height: 1.67;
	}
	#BIRTH .panel p.led {
	padding-top: 20px;
	}
	#BIRTH #BIR-CRD1 figcaption {
	margin-bottom: 4px;
	font-size: 15px;
	}
	#BIRTH #BIR-CRD1 .panel img {
	width: 366px;
	}
	#BIRTH #BIR-CRD2 .image {
	margin: 0 auto;
	padding: 15px 0 0 0;
	width: 540px;
	}
	#BIRTH #BIR-CRD2 .pack {
	width: 540px;
	}
	#BIRTH #BIR-CRD2 .pack img {
	width: auto;
	height: 250px;
	}
	#BIRTH #BIR-CRD3 .panel {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0 80px 0;
	}
	#BIRTH #BIR-CRD3 .image {
	align-items: center;
	justify-content: center;
	padding-top: 30px;
	width: 344px;
	}
	#BIRTH #BIR-CRD3 .panel img {
	margin: 0 auto;
	width: auto;
	height: 192px;
	}
	#BIRTH #BIR-CRD4 picture {
	flex: 1;
	}
	#BIRTH #BIR-CRD4 .panel {
	margin: 0 auto;
	width: 880px;
	}
	#BIRTH #BIR-CRD4 .image {
	flex-direction: row;
	padding: 30px 0 0 0;
	width: 880px;
	gap: 40px;
	}
}

#HISTORY {
background-color: var(--color-primary);
}
#HISTORY .cont {
padding-top: 6.4vw;
}
#HISTORY h2 {
padding: 0 4.8vw;
font-size: 9.067vw;
line-height: 1.59;
}
#HISTORY .view {
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
#HISTORY .view::-webkit-scrollbar {
height: 0;
}
.scroll-wrap{
position: relative;
}
.scroll-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
border: 0;
border-radius: 266.4vw;
width: 8vw;
height: 8vw;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
font-size: 0;
}
.scroll-arrow.left {
background: url("../img/arw_prev.svg") no-repeat;
background-size: contain;
left: 1.333vw;
}
.scroll-arrow.right {
background: url("../img/arw_next.svg") no-repeat;
background-size: contain;
right: 1.333vw;
}
.scroll-arrow.is-visible {
opacity: 1;
pointer-events: auto;
}
.is-dragging { cursor: grabbing; }
scroller { touch-action: pan-y; }
[data-scroller]{
  touch-action: pan-y;
}

[data-scroller].is-dragging{
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
#HISTORY .image {
display: block;
padding: 0 4.8vw;
}
#HISTORY img {
width: auto;
max-width: inherit;
height: 176vw;
}
@media screen and (min-width: 768px) {
	#HISTORY .cont {
	padding-top: 0;
	}
	#HISTORY h2 {
	padding: 30px 60px 0 60px;
	font-size: 74px;
	}
	#HISTORY .view {
	overflow-x: auto;
	}
	#HISTORY .image {
	display: block;
	padding: 0;
	}
	#HISTORY img {
	width: auto;
	max-width: inherit;
	height: 1242px;
	}

	.scroll-wrap{
	position: relative;
	}
	.scroll-arrow {
	border-radius: 9999px;
	width: 60px;
	height: 60px;
	}
	.scroll-arrow.left {
	left: 10px;
	}
	.scroll-arrow.right {
	right: 10px;
	}

}

#PURSUIT {
background-color: var(--color-primary);
padding: 1.867vw;
}
#PURSUIT .cont {
background-color: #fff;
padding: 6.4vw 4.8vw 10.667vw 4.8vw;
}
#PURSUIT h2 {
margin-bottom: 3.2vw;
font-size: 9.067vw;
line-height: 1.59;
}
#PURSUIT .catch {
margin-bottom: 3.2vw;
font-size: 5.6vw;
}
#PURSUIT .lead {
font-size: 3.733vw;
line-height: 1.97;
}
#PURSUIT .js-more-panel,
#PURSUIT .cardList {
display: flex;
flex-direction: column;
}
#PURSUIT .card {
box-shadow: 0.533vw 0.533vw 0.533vw rgba(0,0,0,0.3);
background-color: #fff;
border-radius: 2.667vw;
margin-top: 17.067vw;
}
#PURSUIT .trigger {
position: relative;
padding: 4vw 9.333vw;
font-size: 4.8vw;
}
#PURSUIT .trigger::before {
content: '';
position: absolute;
left: 1.333vw;
top: -6.667vw;
background: url("../img/pur_hed1.svg") no-repeat center center;
background-size: contain;
width: 6.933vw;
height: 11.733vw;
}
#PUR-CRD2 .trigger::before {
background: url("../img/pur_hed2.svg") no-repeat center center;
background-size: contain;
}
#PUR-CRD3 .trigger::before {
background: url("../img/pur_hed3.svg") no-repeat center center;
background-size: contain;
}
#PUR-CRD4 .trigger::before {
background: url("../img/pur_hed4.svg") no-repeat center center;
background-size: contain;
}
#PUR-CRD5 .trigger::before {
background: url("../img/pur_hed5.svg") no-repeat center center;
background-size: contain;
}
#PUR-CRD6 .trigger::before {
background: url("../img/pur_hed6.svg") no-repeat center center;
background-size: contain;
}
#PURSUIT .trigger::after {
transition: margin 0.3s ease, transform 0.3s ease;
transform: translateY(-50%) rotate(45deg);
content: '';
position: absolute;
right: 9.333vw;
top: 50%;
display: inline-block;
vertical-align: middle;
color: #000;
line-height: 1;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
margin-top: -1.067vw;
width: 0.5em;
height: 0.5em;
}
#PURSUIT .trigger.active::after {
transform: translateY(-50%) rotate(225deg);
margin-top: 1.067vw;
}
#PURSUIT .panel {
background-color: var(--color-primary);
padding: 0 4vw 0 4vw;
border-radius: 0 0 2.667vw 2.667vw;
overflow: hidden;
}
#PURSUIT .panel p {
padding: 2.667vw 0 0 0;
font-family: "Koburina Gothic W3 JIS2004";
font-size: 3.733vw;
line-height: 1.54;
}
#PURSUIT .panel .image {
margin: 10px auto 0 auto;
padding-bottom: 5.333vw;
}
#PUR-CRD2 .panel .image {
width: 16vw;
}
#PUR-CRD3 .panel .image {
width: 60vw;
}
#PUR-CRD4 .panel .image {
width: 66.667vw;
}
#PUR-CRD5 .panel .image {
width: 57.333vw;
}
#PUR-CRD6 .panel .image {
width: 57.333vw;
}
#PURSUIT p.more {
margin-top: 8vw;
font-size: 3.733vw;
}
#PURSUIT p.more span {
display: flex;
justify-content: center;
align-items: center;
background-color: #efefef;
border-radius: 26666.4vw;
margin: 0 auto;
width: 32vw;
height: 8.533vw;
text-decoration: none;
}
@media screen and (min-width: 768px) {
	#PURSUIT {
	padding: 18px;
	}
	#PURSUIT .cont {
	background-color: #fff;
	padding: 30px 42px 60px 42px;
	}
	#PURSUIT h2 {
	margin-bottom: 8px;
	font-size: 74px;
	}
	#PURSUIT .catch {
	margin-bottom: 15px;
	font-size: 42px;
	}
	#PURSUIT .lead {
	font-size: 22px;
	line-height: 1.82;
	}
	#PURSUIT .cardList {
	margin: 0 auto;
	width: 855px;
	}
	#PURSUIT .card {
	position: relative;
	box-shadow: 4px 4px 4px rgba(0,0,0,0.3);
	background-color: #fff;
	border-radius: 20px;
	margin-top: 115px;
	}
	#PURSUIT .trigger {
	position: relative;
	padding: 30px 75px;
	font-size: 31px;
	line-height: 1.49;
	cursor: pointer;
	z-index: 1;
	}
	#PURSUIT .trigger::before {
	content: '';
	position: absolute;
	left: 14px;
	top: -48px;
	width: 48px;
	height: 80px;
	}
	#PURSUIT .trigger::after {
	right: 45px;
	margin-top: -5px;
	}
	#PURSUIT .trigger.active::after {
	margin-top: 5px;
	}
	#PURSUIT .panel {
	display: flex;
	flex-direction: row;
	gap: 20px;
	padding: 0 30px;
	border-radius: 0 0 20px 20px;
	}
	#PURSUIT .explan {
	flex: 1;
	}
	#PURSUIT .panel p {
	padding: 20px 0;
	font-size: 18px;
	line-height: 1.54;
	}
	#PURSUIT .panel .image {
	margin: 0;
	padding-bottom: 0;
	}
	#PURSUIT .panel .image img {
	transition: opacity 0.3s ease;
	position: absolute;
	right: 30px;
	bottom: 20px;
	opacity: 0;
	}
	#PURSUIT .js-accordion:has(.active) .panel .image img {
	opacity: 1;
	}
	#PURSUIT .panel .image img {
	opacity: 0;
	}
	#PUR-CRD1 .panel .image img,
	#PUR-CRD1 .panel .image {
	width: 320px;
	}
	#PUR-CRD2 .panel .image img,
	#PUR-CRD2 .panel .image {
	width: 76px;
	}
	#PUR-CRD3 .panel .image img,
	#PUR-CRD3 .panel .image {
	width: 228px;
	}
	#PUR-CRD4 .panel .image img,
	#PUR-CRD4 .panel .image {
	width: 228px;
	}
	#PUR-CRD5 .panel .image img,
	#PUR-CRD5 .panel .image {
	width: 228px;
	}
	#PUR-CRD5 .panel .image img {
	bottom: 25px;
	}
	#PUR-CRD6 .panel .image img,
	#PUR-CRD6 .panel .image {
	width: 228px;
	}
	#PURSUIT p.more {
	margin-top: 60px;
	font-size: 20px;
	cursor: pointer;
	}
	#PURSUIT p.more span {
	border-radius: 99999px;
	width: 166px;
	height: 45px;
	}
}