@charset "utf-8";

#VISUAL {
background: var(--color-taikyu);
}
.bc-player-default_default .vjs-big-play-button {
transform: scale(0.7);
background: var(--color-taikyu);
}
#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: 28.8vw;
}
@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: 210px;
	}
}

#EXPLAN {
background-color: #fff;
}
#EXPLAN .cont {
padding: 7.467vw 6.667vw 13.333vw 6.667vw;
}
#EXPLAN .cardList {
display: flex;
flex-direction: column;
gap: 16vw;
}
#EXPLAN h2 {
margin-bottom: 12vw;
}
#EXPLAN .card:nth-of-type(1) h2 svg,
#EXPLAN .card:nth-of-type(1) h2 img {
width: auto;
height: 29.867vw;
}
#EXPLAN .card:nth-of-type(2) h2 svg,
#EXPLAN .card:nth-of-type(2) h2 img {
width: auto;
height: 45.333vw;
}
#EXPLAN .movie1 {
margin-bottom: 16vw;
}
#EXPLAN .movie1 figure {
margin: 0;
text-align: center;
}
#EXPLAN .movie1 figcaption {
margin-bottom: 1.333vw;
font-weight: 700;
font-size: 4.533vw;
}
#EXPLAN .movie2 {
position: relative;
margin: 14.667vw -6.667vw 0 -6.667vw;
padding: 8vw 0 14.667vw 0;
z-index: 1;
text-align: center;
}
#EXPLAN .movie2::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
background: var(--color-taikyu);
width: 100%;
height: 100%;
opacity: 0.3;
z-index: -1;
}
#EXPLAN .movie2 h5 {
margin-bottom: 1.333vw;
font-weight: 700;
font-size: 4.533vw;
}
#EXPLAN .list .block .movie2 .view {
margin: 0 auto;
width: 71.467vw;
}
#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 .list .block:nth-of-type(1) h3::before {
background: url("../img/sp/exp_num1.svg") no-repeat;
background-size: contain;
}
#EXPLAN .list .block:nth-of-type(2) h3::before {
background: url("../img/sp/exp_num2.svg") no-repeat;
background-size: contain;
}
#EXPLAN .list .block:nth-of-type(3) h3::before {
background: url("../img/sp/exp_num3.svg") no-repeat;
background-size: contain;
}
#EXPLAN .list .block:nth-of-type(4) h3::before {
background: url("../img/sp/exp_num4.svg") no-repeat;
background-size: contain;
}
#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.note {
margin-top: 2.667vw;
font-size: 3.2vw;
line-height: 1.3;
}
#EXPLAN .list .block p.note:last-child {
margin-bottom: 0;
}
#EXPLAN .list .block p + p.note {
margin-top: -4vw;
}
#EXPLAN .list .block sub {
font-size: 2.667vw;
}
#EXPLAN .list .block .view {
margin: 0 -6.667vw;
overflow-x: auto;
}
#EXPLAN .list .block:nth-of-type(1) .image img {
margin: 0 auto;
width: 82.667vw;
}
#EXPLAN .list .block:nth-of-type(3) .view img {
width: auto;
max-width: inherit;
height: 58.667vw;
}
#EXPLAN .list .block:nth-of-type(1) .view {
padding: 0 6.667vw;
}
#EXPLAN .list .block:nth-of-type(1) .view img {
width: auto;
max-width: inherit;
height: 106.667vw;
}
#EXPLAN .list .folder {
margin: 0 auto 6.667vw auto;
width: 66.667vw;
cursor: pointer;
}
#EXPLAN .list .folder:last-child {
margin: 0 auto;
}
.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: 135px;
	}
	#EXPLAN .card:nth-of-type(1) h2 {
	margin-bottom: 74px;
	}
	#EXPLAN .card:nth-of-type(2) h2 {
	margin-bottom: 54px;
	}
	#EXPLAN .card:nth-of-type(1) h2 svg,
	#EXPLAN .card:nth-of-type(1) h2 img {
	height: 225px;
	}
	#EXPLAN .card:nth-of-type(2) h2 svg,
	#EXPLAN .card:nth-of-type(2) h2 img {
	height: 225px;
	}
	#EXPLAN .movie1 {
	margin: 0 auto 130px auto;
	width: 760px;
	}
	#EXPLAN .movie1 figcaption {
	margin-bottom: 10px;
	font-size: 26px;
	}
	#EXPLAN .movie2 {
	margin: 70px -60px 0 -60px;
	padding: 40px 0 70px 0;
	}
	#EXPLAN .movie2 h5 {
	margin-bottom: 20px;
	font-size: 26px;
	}
	#EXPLAN .list .block .movie2 .view {
	margin: 0 auto !important;
	width: 480px;
	}
	#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;
	padding: 0;
	text-indent: 0;
	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 .list .block .view {
	margin: 0;
	overflow-x: auto;
	}
	#EXPLAN .list .block:nth-of-type(1) .image {
	position: relative;
	}
	#EXPLAN .list .block:nth-of-type(1) .image h4 {
	position: absolute;
	left: 0;
	top: 0;
	}
	#EXPLAN .list .block:nth-of-type(1) .image img {
	margin: 0 auto;
	width: 615px;
	}
	#EXPLAN .list .block:nth-of-type(3) .view img {
	width: 100%;
	max-width: inherit;
	height: auto;
	}
	#EXPLAN .list .block:nth-of-type(1) .view {
	padding: 0;
	}
	#EXPLAN .list .block:nth-of-type(1) .view img {
	width: auto;
	max-width: inherit;
	height: 570px;
	}
	#EXPLAN .list .set {
	display: flex;
	justify-content: center;
	gap: 40px;
	padding: 10px 0 0 0;
	}
	#EXPLAN .list .folder {
	margin: 0;
	width: 390px;
	}
	#EXPLAN .list .folder:last-child {
	margin: 0;
	}
	.scroll-wrap{
	position: relative;
	}
	.scroll-arrow {
	border-radius: 9999px;
	width: 60px;
	height: 60px;
	}
	.scroll-arrow.left {
	left: -30px;
	}
	.scroll-arrow.right {
	right: -30px;
	}
}

#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;
top: 0;
width: 100%;
height: 102%;
display: flex;
align-items: stretch;
overflow: hidden;
background: linear-gradient(90deg, #7fd3e5, #95d39a, #a6d33f);
clip-path: polygon(0 0, 28% 0, calc(28% + 4.267vw) 50%, 100% 50%, 100% 100%, 0 100%);

}
#MODAL h3 span {
position: relative;
z-index: 1;
box-sizing: border-box;
display: flex;
align-items: center;
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: 5.333vw;
}
#MODAL h4 {
font-size: 5.067vw;
}
#MODAL h4 span {
font-family: "Koburina Gothic W3 JIS2004";
font-size: 3.733vw;
}
#MODAL p {
font-family: "Koburina Gothic W3 JIS2004";
font-size: 3.733vw;
line-height: 1.43;
}
#TEC02 .set,
#TEC01 .set {
margin-top: 4vw;
}
#TEC02 .image,
#TEC01 .image {
margin: 0 auto 0 auto;
padding: 2.667vw 0 0 0;
}
#TEC02 .set:nth-of-type(2) .image {
width: 52.533vw;
}
@media screen and (min-width: 768px) {
	#MODAL .cont {
	width: 830px;
	}
	#MODAL h3 {
	overflow: hidden;
	cursor: pointer;
	}
	#MODAL h3::before {
	clip-path: polygon(0 0, 23% 0, calc(23% + 31px) 50%, 100% 50%, 100% 100%, 0 100%);
	}
	#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: 30px;
	}
	#MODAL h4 {
	margin-bottom: -5px;
	font-size: 32px;
	}
	#MODAL p {
	margin-top: 0;
	font-size: 19px;
	line-height: 1.9;
	}
	#TEC02 .set,
	#TEC01 .set {
	margin-top: 30px;
	display: flex;
	gap: 30px;
	}
	#TEC02 .set p,
	#TEC01 .set p {
	flex: 1;
	}
	#TEC02 .image,
	#TEC01 .image {
	margin: 0 auto 0 auto;
	padding: 0;
	width: 370px;
	}
	#TEC02 .set:nth-of-type(2) .image {
	width: 370px;
	}
}