@charset "utf-8";

#VISUAL {
background: var(--color-taishin);
}
.bc-player-default_default .vjs-big-play-button {
transform: scale(0.7);
background: var(--color-taishin);
}
#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: 17.6vw;
}
#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: 29.333vw;
}
/***************************************************
 * Generated by SVG Artista on 3/8/2026, 9:01:10 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

#VIS-ICN .svg-elem-1 {
  stroke-dashoffset: 1238.179931640625px;
  stroke-dasharray: 1238.179931640625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

#VIS-ICN.activeView .svg-elem-1 {
  stroke-dashoffset: 0;
}

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

#EXPLAN {
background-color: #fff;
}
#EXPLAN .cont {
padding: 7.467vw 6.667vw 0 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: 43.2vw;
}
#EXPLAN .movie1 {
margin: 0;
}
#EXPLAN .movie1 p {
margin-top: 2.667vw;
margin-bottom: 0 !important;
}
#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-taishin);
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: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 .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.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 .block:nth-of-type(3) .image img {
margin: 0 auto;
width: 65.6vw;
height: auto;
}
#EXPLAN .card:nth-of-type(2) .image picture:nth-of-type(1) {
display: block;
margin: 0 auto 6.667vw auto;
width: 71.467vw;
height: auto;
}

@media screen and (min-width: 768px) {
	#EXPLAN .cont {
	padding: 60px 60px 0 60px;
	}
	#EXPLAN .cardList {
	gap: 135px;
	}
	#EXPLAN .card:nth-of-type(1) h2 {
	margin-bottom: 74px;
	}
	#EXPLAN .card:nth-of-type(2) h2 {
	margin-bottom: 74px;
	}
	#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: 140px;
	}
	#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: 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 .block:nth-of-type(2) .image img {
	margin: 0 auto;
	width: 650px;
	height: auto;
	}
	#EXPLAN .block:nth-of-type(3) .image img {
	margin: 0 auto;
	width: 492px;
	height: auto;
	}
	#EXPLAN .block:nth-of-type(4) .image img {
	margin: 0 auto;
	width: 654px;
	height: auto;
	}
	#EXPLAN .card:nth-of-type(2) .image picture:nth-of-type(1) {
	display: block;
	margin: 0 auto 50px auto;
	width: 535px;
	height: auto;
	}
	#EXPLAN .card:nth-of-type(2) .image picture:nth-of-type(2) {
	display: block;
	margin: 0 auto 0 auto;
	width: 640px;
	height: auto;
	}

}

#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;
	}
}