@charset "utf-8";

#VISUAL {
background: var(--color-kukan);
}
#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: 1.066vw;
width: auto;
}
#VISUAL .image svg,
#VISUAL .image img {
object-fit: cover;
width: auto;
height: 18.133vw;
}

#VIS-ICN .svg-elem-6 {
  stroke-dashoffset: 149.78082275390625px;
  stroke-dasharray: 149.78082275390625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}
#VIS-ICN.activeView .svg-elem-6 {
  stroke-dashoffset: 299.5616455078125px;
}
#VIS-ICN .svg-elem-7 {
  stroke-dashoffset: 427.0527648925781px;
  stroke-dasharray: 427.0527648925781px;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.62s;
          transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.62s;
}
#VIS-ICN.activeView .svg-elem-7 {
  stroke-dashoffset: 854.1055297851562px;
}
#VIS-ICN .svg-elem-8 {
  stroke-dashoffset: 66.29013061523438px;
  stroke-dasharray: 66.29013061523438px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.74s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.74s;
}
#VIS-ICN.activeView .svg-elem-8 {
  stroke-dashoffset: 132.58026123046875px;
}

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

#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 .cardList .card:nth-of-type(1) h2 svg,
#EXPLAN .cardList .card:nth-of-type(1) h2 img {
width: auto;
height: 30.4vw;
}
#EXPLAN .cardList .card:nth-of-type(2) h2 svg,
#EXPLAN .cardList .card:nth-of-type(2) h2 img {
width: auto;
height: 30.933vw;
}
#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:nth-of-type(1) h3::before {
background: url("../img/sp/exp_num1.svg") no-repeat;
background-size: contain;
}
#EXPLAN .cardList .card:nth-of-type(1) .block:nth-of-type(2) h3::before {
background: url("../img/sp/exp_num2.svg") no-repeat;
background-size: contain;
}
#EXPLAN .cardList .card:nth-of-type(1) .block:nth-of-type(3) h3::before {
background: url("../img/sp/exp_num3.svg") no-repeat;
background-size: contain;
}
#EXPLAN .cardList .card:nth-of-type(1) .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: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 .block:nth-of-type(3) .image {
display: flex;
flex-direction: column;
gap: 9.333vw;
}
#EXPLAN .cardList .block:nth-of-type(3) .pack {
display: flex;
flex-direction: column;
gap: 5.333vw;
}
@media screen and (max-width: 767px) {
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(4) {
	margin: 0 auto;
	width: 60.8vw;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(1) picture:nth-of-type(1) {
	display: block;
	margin: 0 auto;
	width: 69.333vw;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(1) picture:nth-of-type(2) {
	display: block;
	margin: 0 auto;
	width: 76.533vw;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(2) picture:nth-of-type(1) {
	display: block;
	margin: 0 auto;
	width: 41.6vw;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(2) picture:nth-of-type(2) {
	display: block;
	margin: 0 auto;
	width: 76.533vw;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(3) picture:nth-of-type(1) {
	display: block;
	margin: 0 auto;
	width: 86.667vw;
	}
	#EXPLAN .cardList .card:nth-of-type(2) .image {
	display: flex;
	flex-direction: column;
	gap: 5.333vw;
	margin: 0 auto;
	width: 81.067vw;
	}
}
@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 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 .block:nth-of-type(3) .image {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	gap: 75px 0;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack {
	display: flex;
	flex-direction: column;
	gap: 40px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(odd) {
	width: 520px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(even) {
	width: 405px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(4) img {
	margin: 0 auto;
	width: 364px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(1) picture:nth-of-type(1) {
	display: block;
	margin: 0 auto;
	width: 416px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(1) picture:nth-of-type(2) {
	display: block;
	margin: 0 auto;
	width: 404px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(2) picture:nth-of-type(1) {
	display: block;
	margin: 0 auto;
	width: 250px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(2) picture:nth-of-type(2) {
	display: block;
	margin: 0 auto;
	width: 404px;
	}
	#EXPLAN .cardList .block:nth-of-type(3) .pack:nth-of-type(3) picture:nth-of-type(1) {
	display: block;
	margin: 0 auto;
	width: 487px;
	}
	#EXPLAN .cardList .card:nth-of-type(2) .image {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 0;
	margin: 0 auto;
	width: 100%;
	}
	#EXPLAN .cardList .card:nth-of-type(2) .image picture {
	display: block;
	margin: 0 auto;
	width: 452px;
	}
}