@charset "utf-8";

#VISUAL {
background: var(--color-shaon);
}
#VISUAL .cont {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0 8vw;
width: 100%;
height: 46.667vw;
}
#VISUAL .title {
display: flex;
justify-content: center;
align-items: center;
width: auto;
height: 17.6vw;
}
#VISUAL .title img {
width: auto;
height: 17.6vw;
}
#VISUAL .image {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 5.333vw;
width: auto;
}
#VISUAL .image svg,
#VISUAL .image img {
object-fit: cover;
width: auto;
height: 21.867vw;
}
#VIS-ICN .cls-0 {
transition: opacity 0.7s ease, transform 0.7s ease;
opacity: 0;
}
#VIS-ICN.activeView .cls-0 {
opacity: 1;
}
#VIS-ICN.activeView .svg-elem-1 {
transition-delay: 0s;
}
#VIS-ICN.activeView .svg-elem-2 {
transition-delay: 0.5s;
}
#VIS-ICN.activeView .svg-elem-3 {
transition-delay: 0.62s;
}
#VIS-ICN.activeView .svg-elem-4 {
transition-delay: 0.74s;
}
#VIS-ICN.activeView .svg-elem-5 {
transition-delay: 0.86s;
}
#VIS-ICN.activeView .svg-elem-6 {
transition-delay: 1.1s;
}
#VIS-ICN.activeView .svg-elem-7 {
transition-delay: 1.5s;
}
#VIS-ICN.activeView .svg-elem-8 {
transition-delay: 1.74s;
}
#VIS-ICN.activeView .svg-elem-9 {
transition-delay: 1.98s;
}

@media screen and (min-width: 768px) {
	#VISUAL .cont {
	padding: 0 125px;
	height: 315px;
	}
	#VISUAL .title {
	height: 135px;
	}
	#VISUAL .title img {
	height: 135px;
	}
	#VISUAL .image {
	padding-right: 0;
	}
	#VISUAL .image svg,
	#VISUAL .image img {
	height: 162px;
	}
}

#EXPLAN {
background-color: #fff;
}
#EXPLAN .cont {
padding: 7.467vw 6.667vw 13.333vw 6.667vw;
}
#EXPLAN .cardList {
display: flex;
flex-direction: column;
gap: 9.333vw;
}
#EXPLAN h2 {
margin-bottom: 12vw;
}
#EXPLAN .cardList .card:nth-of-type(1) h2 svg,
#EXPLAN .cardList .card:nth-of-type(1) h2 img {
width: 51.2vw;
height: auto;
}
#EXPLAN .cardList .card:nth-of-type(2) h2 {
margin-bottom: 8.8vw;
}
#EXPLAN .cardList .card:nth-of-type(2) h2 svg,
#EXPLAN .cardList .card:nth-of-type(2) h2 img {
width: 77.867vw;
height: auto;
}
#EXPLAN .list {
display: flex;
flex-direction: column;
gap: 16vw;
}
#EXPLAN .list .block h3 {
position: relative;
margin-bottom: 2.667vw;
padding-left: 14.4vw;
font-weight: 700;
font-size: 5.867vw;
line-height: 1.6;
}
#EXPLAN .list .block h3::before {
content: '';
display: block;
position: absolute;
left: 0;
top: -0.533vw;
width: 10.667vw;
height: 10.133vw;
}
#EXPLAN .cardList .card:nth-of-type(1) .block h3::before {
background: url("../img/sp/exp_num1.svg") no-repeat;
background-size: contain;
}
#EXPLAN .cardList .card:nth-of-type(2) .block h3 {
padding-left: 0;
}
#EXPLAN .cardList .card:nth-of-type(2) .block h3::before {
display: none;
}
#EXPLAN .list .block h4 {
margin-bottom: 2.667vw;
font-weight: 700;
font-size: 4vw;
}
#EXPLAN .list .block p {
margin-bottom: 5.6vw;
font-family: "Koburina Gothic W3 JIS2004";
font-weight: 300;
font-size: 3.733vw;
line-height: 1.54;
}
#EXPLAN .list .block p:last-child {
margin-bottom: 0;
}
#EXPLAN .list .block p.note {
margin-top: 2.667vw;
font-size: 3.2vw;
line-height: 1.3;
}
#EXPLAN .list .block p + p.note {
margin-top: -4vw;
}
#EXPLAN .list .block sub {
font-size: 2.667vw;
}
#EXPLAN .cardList .card:nth-of-type(2) .image {
position: relative;
}
#EXPLAN .cardList .card:nth-of-type(2) .view {
margin: 0 -6.667vw;
overflow-x: auto;
}
#EXPLAN .cardList .card:nth-of-type(2) .viewIn {
box-sizing: border-box;
padding: 0 6.667vw;
width: 178.667vw;
max-width: 178.667vw;
}
.scroll-wrap{
position: relative;
}
#EXPLAN .view {
margin: 0 -6.667vw;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
#EXPLAN .view::-webkit-scrollbar {
height: 0;
}
.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: 0;
}
.scroll-arrow.right {
background: url("../img/arw_next.svg") no-repeat;
background-size: contain;
right: 0;
}
.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;
}
@media screen and (min-width: 768px) {
	#EXPLAN .cont {
	padding: 60px 60px 70px 60px;
	}
	#EXPLAN .cardList {
	gap: 125px;
	}
	#EXPLAN h2 {
	margin-bottom: 74px;
	}
	#EXPLAN .cardList .card:nth-of-type(1) h2 svg,
	#EXPLAN .cardList .card:nth-of-type(1) h2 img {
	width: auto;
	height: 140px;
	}
	#EXPLAN .cardList .card:nth-of-type(2) h2 {
	margin-bottom: 60px;
	}
	#EXPLAN .cardList .card:nth-of-type(2) h2 svg,
	#EXPLAN .cardList .card:nth-of-type(2) h2 img {
	width: auto;
	height: 140px;
	}
	#EXPLAN .list {
	gap: 120px;
	}
	#EXPLAN .list .block h3 {
	margin-bottom: 25px;
	padding-left: 88px;
	font-size: 40px;
	line-height: 1.5;
	}
	#EXPLAN .list .block h3::before {
	top: 0;
	width: 62px;
	height: 62px;
	}
	#EXPLAN .list .block h4 {
	margin-bottom: 20px;
	font-size: 24px;
	}
	#EXPLAN .list .block p {
	margin-bottom: 50px;
	font-size: 22px;
	}
	#EXPLAN .list .block p.note {
	margin-top: 20px;
	font-size: 18px;
	line-height: 1.3;
	color: #000;
	}
	#EXPLAN .list .block p + p.note {
	margin-top: -40px;
	}
	#EXPLAN .list .block sub {
	font-size: 11px;
	}
	#EXPLAN .cardList .card:nth-of-type(1) .image {
	margin: 0 auto;
	width: 980px;
	}
	#EXPLAN .cardList .card:nth-of-type(2) .image {
	margin: 0 auto;
	width: 980px;
	}
	#EXPLAN .cardList .card:nth-of-type(2) .view {
	margin: 0;
	overflow-x: inherit;
	}
	#EXPLAN .cardList .card:nth-of-type(2) .viewIn {
	box-sizing: border-box;
	padding: 0;
	width: 980px;
	max-width: 980px;
	}
	.scroll-wrap{
	position: relative;
	}
	.scroll-arrow {
	border-radius: 9999px;
	width: 60px;
	height: 60px;
	}
	.scroll-arrow.left {
	left: -30px;
	}
	.scroll-arrow.right {
	right: -30px;
	}
}