@charset "utf-8";

#VISUAL {
background: var(--color-dannetsu);
}
.bc-player-default_default .vjs-big-play-button {
transform: scale(0.7);
background: var(--color-dannetsu);
}
#VISUAL .cont {
box-sizing: border-box;
display: flex;
align-items: center;
padding: 0 8vw 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: 30.933vw;
}
#VISUAL .image {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 0;
width: auto;
}
#VISUAL .image svg,
#VISUAL .image img {
object-fit: cover;
width: auto;
height: 31.467vw;
}
#VIS-ICN .svg-elem-1 {
  stroke-dashoffset: 95.34815979003906px;
  stroke-dasharray: 95.34815979003906px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}
#VIS-ICN.activeView .svg-elem-1 {
  stroke-dashoffset: 190.69631958007812px;
}
#VIS-ICN .svg-elem-2 {
  stroke-dashoffset: 285.45294189453125px;
  stroke-dasharray: 285.45294189453125px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.0s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.0s;
}
#VIS-ICN.activeView .svg-elem-2 {
  stroke-dashoffset: 570.9058837890625px;
}
#VIS-ICN .svg-elem-3 {
  stroke-dashoffset: 95.35167694091797px;
  stroke-dasharray: 95.35167694091797px;
  -webkit-transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s;
          transition: stroke-dashoffset 0.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.12s;
}
#VIS-ICN.activeView .svg-elem-3 {
  stroke-dashoffset: 190.70335388183594px;
}
#VIS-ICN .svg-elem-4 {
  stroke-dashoffset: 209.87350463867188px;
  stroke-dasharray: 209.87350463867188px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}

#VIS-ICN.activeView .svg-elem-4 {
  stroke-dashoffset: 419.74700927734375px;
}

@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: 228px;
	}
}

#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: 30.4vw;
}
#EXPLAN .card:nth-of-type(2) h2 {
margin-bottom: 5.333vw;
}
#EXPLAN .card:nth-of-type(2) h2 svg,
#EXPLAN .card:nth-of-type(2) h2 img {
width: auto;
height: 19.2vw;
}
#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-dannetsu);
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 .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 h4 {
margin-bottom: 5.333vw;
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 + p.note {
margin-top: -4vw;
}
#EXPLAN .list .block sub {
font-size: 2.667vw;
}
#EXPLAN .card:nth-of-type(1) .block:nth-of-type(1) .image {
margin: 0 auto;
width: 77.333vw;
height: auto;
}
#EXPLAN picture.pic1 {
display: block;
margin: 0 -10px 0 auto;
}
#EXPLAN .block .image .set figure {
display: block;
margin: 16vw auto 0 auto;
width: 67.2vw;
height: auto;
}
#EXPLAN .block .image .set figure:nth-of-type(1) picture {
display: block;
margin: 0 auto 0 auto;
width: 48vw;
height: auto;
}
#EXPLAN .block .image .set figure:nth-of-type(2) picture {
display: block;
margin: 0 auto 0 auto;
width: 47.467vw;
height: auto;
}
#EXPLAN .card:nth-of-type(2) .block:nth-of-type(1) .image {
margin: 0 -4vw;
height: auto;
}
#EXPLAN .block .image .set figcaption {
margin-top: 2.667vw;
font-family: "Koburina Gothic W3 JIS2004";
font-weight: 300;
font-size: 3.733vw;
line-height: 1.54;
}
#EXPLAN .list .box {
background-color: #efefef;
border-radius: 4vw;
margin-top: 16vw;
padding: 8vw 4vw;
}
#EXPLAN .list .box .ctg {
margin-bottom: 4vw;
}
#EXPLAN .list .box .ctg img {
margin: 0 auto;
object-fit: contain;
width: auto;
height: 6.133vw;
}
#EXPLAN .list .box h4 {
margin-bottom: 0;
font-size: 5.867vw;
line-height: 1.54;
}
#EXPLAN .list .box p {
margin-bottom: 3.2vw;
font-family: "Koburina Gothic W3 JIS2004";
font-size: 3.733vw;
line-height: 1.54;
}
#EXPLAN .list .box .img {
display: flex;
flex-direction: column;
gap: 5.333vw;
}
#EXPLAN .list .box .mov {
margin: 13.333vw auto 0 auto;
width: 71.467vw;
}
#EXPLAN .list .box figure {
margin: 0;
}
#EXPLAN .list .box figure p {
margin: 2.667vw 0 0 0;
font-size: 3.2vw;
}
#EXPLAN .list .box figcaption {
margin-bottom: 2.133vw;
font-size: 3.733vw;
}
#EXPLAN .list .box h5 {
margin-bottom: 2.133vw;
font-size: 4.533vw;
text-align: center;
}
@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: 140px;
	}
	#EXPLAN .card:nth-of-type(2) h2 svg,
	#EXPLAN .card:nth-of-type(2) h2 img {
	height: 142px;
	}
	#EXPLAN .movie1 {
	margin: 0 auto 0 auto;
	width: 760px;
	}
	#EXPLAN .movie1 p {
	margin-top: 10px;
	margin-bottom: 0 !important;
	}
	#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 .movie2 .view {
	margin: 0 auto;
	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: 35px;
	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 .card:nth-of-type(1) .block:nth-of-type(1) .image {
	width: 654px;
	}
	#EXPLAN picture.pic1 {
	display: block;
	margin: 0;
	}
	#EXPLAN .block .image .set {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	}
	#EXPLAN .block .image .set figure {
	display: block;
	margin: 25px 0 0 0;
	width: 420px;
	height: auto;
	}
	#EXPLAN .block .image .set figure:nth-of-type(1) picture {
	width: 206px;
	}
	#EXPLAN .block .image .set figure:nth-of-type(2) picture {
	width: 206px;
	}
	#EXPLAN .card:nth-of-type(2) .block:nth-of-type(1) .image {
	margin: 0;
	height: auto;
	}
	#EXPLAN .block .image .set figcaption {
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.42;
	}
	#EXPLAN .list .box {
	border-radius: 30px;
	margin-top: 105px;
	padding: 55px 70px 65px 70px;
	}
	#EXPLAN .list .box .ctg {
	margin-bottom: 50px;
	}
	#EXPLAN .list .box .ctg img {
	height: 42px;
	}
	#EXPLAN .list .box h4 {
	margin-bottom: 10px;
	font-size: 40px;
	line-height: 1.54;
	}
	#EXPLAN .list .box p {
	margin-bottom: 20px;
	font-size: 22px;
	line-height: 1.6;
	}
	#EXPLAN .list .box .img {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 0;
	}
	#EXPLAN .list .box .mov {
	margin: 40px auto 0 auto;
	width: 480px;
	}
	#EXPLAN .list .box .img figure {
	margin: 0;
	width: 400px;
	}
	#EXPLAN .list .box figure p {
	margin: 10px 0 0 0;
	font-size: 18px;
	}
	#EXPLAN .list .box figcaption {
	margin-bottom: 15px;
	font-size: 18px;
	}
	#EXPLAN .list .box h5 {
	margin-bottom: 20px;
	font-size: 26px;
	text-align: center;
	}
}

@media screen and (max-width: 767px) {
	#CATALOG .cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	#CATALOG .image {
	position: relative;
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
	margin: 5.333vw 0 6.667vw 0;
	width: 100vw;
	}
	#CATALOG .image ul {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 210.933vw;
	}
	#CATALOG .image li {
	width: 55.467vw;
	text-align: center;
	}
	#CATALOG .image li img {
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0.533vw 0.533vw 0.533vw rgba(0,0,0,0.3));
	width: 39.467vw;
	}
	#CATALOG .image li:nth-of-type(3) img {
	width: 53.067vw;
	}
	.scroll-wrap{
	position: relative;
	}
	#CATALOG .view {
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	}
	#CATALOG .view::-webkit-scrollbar {
	height: 0;
	}
	.scroll-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border: 0;
	width: 5.333vw;
	height: 5.333vw;
	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: 20vw;
	}
	.scroll-arrow.right {
	background: url("../img/arw_next.svg") no-repeat;
	background-size: contain;
	right: 20vw;
	}
	.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) {
	#CATALOG .cont {
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 80px 0 95px 0;
	width: 1020px;
	min-height: 500px;
	}
	#CATALOG h2 {
	padding-top: 0;
	margin-bottom: 10px;
	width: 340px;
	font-size: 42px;
	}
	#CATALOG p {
	margin-bottom: 20px;
	width: 340px;
	font-family: "Koburina Gothic W6 JIS2004";
	font-size: 18px;
	line-height: 2.22;
	}
	#CATALOG .image {
	position: absolute;
	right: 0;
	top: 120px;
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
	margin: 0;
	width: 665px;
	height: 232px;
	}
	#CATALOG .image li:nth-of-type(1) {
	transform: translate(0,-50%);
	position: absolute;
	right: 0;
	top: 50%;
	}
	#CATALOG .image li:nth-of-type(2) {
	transform: translate(0,-50%);
	position: absolute;
	left: 0;
	top: 50%;
	}
	#CATALOG .image li:nth-of-type(3) {
	transform: translate(-50%,-50%);
	position: absolute;
	left: 50%;
	top: 50%;
	}
	#CATALOG .image img {
	filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
	margin: 0;
	width: 172px;
	}
	#CATALOG .image li:nth-of-type(3) img {
	filter: drop-shadow(4px 4px 4px rgba(0,0,0,0.3));
	margin: 0;
	width: 232px;
	}
	#CATALOG .link {
	margin: 0;
	width: 315px;
	height: 58px;
	font-size: 24px;
	}
	#CATALOG .link a {
	width: 315px;
	height: 58px;
	color: #000;
	}
	#CATALOG .link a::after {
	right: 70px;
	}
	.scroll-arrow {
	display: none;
	}
}

#SCT0 .videos {
position: relative;
margin: 0 auto;
width: 100%;
}
#SCT0 .videos .back {
transform: translateY(-50%);
position: absolute;
left: 30px;
top: 50%;
z-index: 2;
display: none;
cursor: pointer;
}
#SCT0 .videos ul {
position: absolute;
left: 0;
top: 0;
width: 100%;
list-style: none;
z-index: 2;
}
#SCT0 .videos li {
width: 50%;
float: left;
}
#SCT0 .videos li img {
display: block;
width: 100%;
height: auto;
}
#SCT0 .videos .active {
z-index: 1;
}