@charset "utf-8";

#VISUAL {
background: var(--color-kankyou);
}
#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: 26.667vw;
}

#VIS-ICN .svg-elem-4 {
  stroke-dashoffset: 542.4603881835938px;
  stroke-dasharray: 542.4603881835938px;
  -webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
          transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.5s;
}
#VIS-ICN.activeView .svg-elem-4 {
  stroke-dashoffset: 1084.9207763671875px;
}
#VIS-ICN .svg-elem-5 {
  stroke-dashoffset: 90.09000396728516px;
  stroke-dasharray: 90.09000396728516px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.62s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.62s;
}
#VIS-ICN.activeView .svg-elem-5 {
  stroke-dashoffset: 180.1800079345703px;
}

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

#EXPLAN {
background-color: #fff;
}
#EXPLAN .cont {
padding: 7.467vw 6.667vw 13.333vw 6.667vw;
}
#EXPLAN h2 {
margin-bottom: 12vw;
}
#EXPLAN h2 svg,
#EXPLAN h2 img {
width: 100%;
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 .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 + p.note {
margin-top: -4vw;
}
#EXPLAN .list .block sub {
position: relative;
top: 1vw;
font-size: 60%;
}
#EXPLAN .list .block:nth-of-type(2) .image {
margin: 0 -3.2vw;
}
#EXPLAN .list .block:nth-of-type(3) .image {
margin: 0 0 0 -4.8vw;
}
#EXPLAN .list .block:nth-of-type(4) .image {
margin: 0 -3.2vw;
}
@media screen and (min-width: 768px) {
	#EXPLAN .cont {
	padding: 60px 60px 70px 60px;
	}
	#EXPLAN h2 {
	margin-bottom: 74px;
	}
	#EXPLAN h2 svg,
	#EXPLAN h2 img {
	width: auto;
	height: 132px;
	}
	#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 sub {
	top: 0;
	}
	#EXPLAN .list .block:nth-of-type(1) .image {
	margin: 0 auto;
	width: 980px;
	}
	#EXPLAN .list .block:nth-of-type(2) .image {
	margin: 0 auto;
	width: 865px;
	}
	#EXPLAN .list .block:nth-of-type(3) .image {
	margin: 0 auto;
	width: 980px;
	}
	#EXPLAN .list .block:nth-of-type(4) .image {
	margin: 0 auto;
	width: 980px;
	}
}