/* ========================================================================
 variables
======================================================================== */
:root {
	--boxshadow-square: 0 0 15px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 1) inset;
	--boxshadow-frame: 0 0 15px rgba(255, 255, 255, 1);
	--anim-delay1: 0s;
	--anim-delay2: 0.2s;
	--anim-delay3: 0.4s;
	--anim-delay4: 0.6s;
	--anim-delay5: 0.8s;
	--anim-delay6: 1s;
	--anim-delay7: 1.2s;
	--anim-delay8: 1.4s;
	--anim-ease1: cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media only screen and (max-width: 980px) {
	:root {
		--anim-delay1: 0s;
		--anim-delay2: 0.2s;
		--anim-delay3: 0.4s;
		--anim-delay4: 0.6s;
		--anim-delay5: 0.8s;
		--anim-delay6: 1s;
		--anim-delay7: 1.2s;
		--anim-delay8: 1.4s;
	}
}
/* ========================================================================
 body
======================================================================== */
body{
	
}
/* ========================================================================
 loading
======================================================================== */
.loading{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	left:0;
	top: 0;
	background-image:url(/tour/_assets/img/loading_bg.webp);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:left bottom;
	z-index: 102;
}
.loading:after{
	content:"";
	width:300px;
	aspect-ratio: 622 / 414;
	display: block;
	background-image:url(/tour/_assets/img/loading_image.webp);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:cover;
}
.loading .text {
	width: fit-content;
	margin-bottom:20px;
	display:flex;
	color: #fff;
	font-size: 14px;
	line-height:1;
}
.loading .text .word{
	margin-right:2px;
}
.loading .text .dot {
	margin-left:2px;
	position:relative;
	top:-1px;
	animation: dots 0.6s infinite steps(2, start);
}
.loading .text .dot:nth-child(2) {animation-delay: 0.2s;}
.loading .text .dot:nth-child(3) {animation-delay: 0.4s;}
@keyframes dots {
	0% { visibility: visible;}
	79% { visibility: visible;}
	80% { visibility: hidden;}
	100% { visibility: hidden;}
}

@media only screen and (max-width: 980px) {
	.loading:after{
		width:200px;
	}
	.loading .text {
		font-size:12px;
	}
}

/* ========================================================================
 all
======================================================================== */
#all{
	width:100%;
	visibility:hidden;
}
/* ========================================================================
 bg-gradation
======================================================================== */
#bg-gradation{
	width:100%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/bg_gradation.webp);
	background-repeat:no-repeat;
	background-size:100% 100%;
	background-position:center;
}
@media only screen and (max-width: 980px) {
	#bg-gradation{
		background-image:url(/tour/_assets/iridium_ruthenium_basics/img/bg_gradation_sp.webp);
	}
}

/* ========================================================================
 gheader
======================================================================== */
#gheader{
	width:100%;
	position:absolute;
	left:0; top:0;
	z-index: 101;
}
#header-logo{
	width:218px;
	margin-top:25px;
	margin-left:30px;
	display: block;
}
#header-logo img{
	width:100%;
	display: block;
}
#gheader #btMenu{
	position:fixed;
}
@media only screen and (max-width: 980px) {
	#gheader{
		width:100%;
		height:56px;
		position:fixed;
		background: linear-gradient(to right, var(--color-deepblue) 0%, var(--color-lightblue) 100%);
		transition: transform 0.3s 0.3s;
	}
	#gheader.hidden {
		transform: translateY(-56px);
	}
	#header-logo{
		width:138px;
		margin-top:10px;
		margin-left:13px;
	}
	#btMenu{
		width:56px;
		height:56px;
		background-image:none;
	}
	#btMenu:after{
		content:none;
	}
	#btMenu .text{
		margin-top:4px;
		margin-bottom: 6px;
		font-size: 11px;
	}
	#btMenu > div{
		width:32px;
		margin-bottom:4px;
		border-top:solid 1px rgba(255,255,255,0.8);
	}
}
/* ========================================================================
 sec-irb
======================================================================== */
.sec-irb {
    width: 100%;
	padding:0 4%;
	box-sizing: border-box;
}
/* ------------------------------------------------------------------------
 contents
------------------------------------------------------------------------ */
.sec-irb .contents{
    width: 100%;
	max-width:1300px;
    margin:0 auto;
}
/* ------------------------------------------------------------------------
 contents-block
------------------------------------------------------------------------ */
.sec-irb .contents-block{

}

@media only screen and (max-width: 980px) {
	.sec-irb {
		padding:0 5%;
	}
	.sec .contents{
		padding: 60px 0 40px;
	}
}

/* ========================================================================
 secMain
======================================================================== */
#secMain{
	overflow: hidden;
}
#secMain .contents-block{
	padding: 12% 0 7%;
	position:relative;
}
#secMain .secMain-head{
	width:100%;
	position:relative;
}
#secMain .shoulder{
	margin-bottom: 2.5%;
	color:var(--color-deepblue);
	font-size:17px;
	font-weight:500;
	line-height:1.6;
}
#secMain .secMain-title{
	width:53%;
	margin-bottom: 8%;
	position:relative;
	z-index:1;
	opacity:0;
}
#secMain .secMain-title img{
	width:100%;
	display: block;
}
#secMain .secMain-image1{
	width: 56%;
    position: absolute;
    right: 0;
    top: -69%;
}
/* ------------------------------------------------------------------------
 mainImage
------------------------------------------------------------------------ */
#mainImage{
	/* width:60%; */
	aspect-ratio: 1220 / 1258;
	position:relative;
}
#mainImage .mi-book{
	width:100%;
	height:100%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/mi_book.webp);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	opacity:0;
}
#mainImage .mi-items{
	width:100%;
	height:100%;
	position:absolute;
	left:0; top:0;
	opacity:0;
}
#mainImage .mi-item{
	position:absolute;
}
#mainImage .mi-item img{
	width:100%;
	display: block;
}
/* ------------------------------------
 size and position
------------------------------------ */
#mi-rock1{width:12.9508%; height:11.5262%; left:23.9344%; top:13.1161%; z-index:3;}
#mi-car{width:12.623%; height:9.6979%; left:34.7541%; top:8.903%; z-index:4;}
#mi-mri{width:19.5082%; height:15.6598%; left:61.4754%; top:15.8983%; z-index:1;}
#mi-hydrogen{width:10.7377%; height:14.1494%; left:84.4262%; top:27.186%; z-index:2;}
#mi-earth{width:17.623%; height:17.0111%; left:67.377%; top:35.5326%; z-index:6;}
#mi-rock2{width:12.2131%; height:11.2878%; left:52.459%; top:47.7742%; z-index:9;}
#mi-wafer{width:11.8033%; height:9.6184%; left:24.5082%; top:47.7742%; z-index:7;}
#mi-hdd{width:17.7049%; height:12.6391%; left:27.7049%; top:37.2019%; z-index:8;}
#mi-bulb{width:11.6393%; height:16.1367%; left:50%; top:27.027%; z-index:5;}
/* ------------------------------------
 set animation
------------------------------------ */
#mi-rock1{animation: floatingY20 3s ease-in-out -2s infinite alternate-reverse;}
#mi-rock1 img{animation: rotating30 10s ease-in-out -10s infinite alternate-reverse; transform-origin: 20% 40%;}
#mi-car{animation: floatingY20 4s ease-in-out 0s infinite alternate-reverse;}
#mi-car img{animation: rotating30 15s ease-in-out -4s infinite alternate-reverse; transform-origin: 70% 90%;}
#mi-mri{animation: floatingY10 3s ease-in-out -1s infinite alternate-reverse;}
#mi-mri img{animation: rotating20 8s ease-in-out -7s infinite alternate-reverse; transform-origin: 50% 60%;}
#mi-hydrogen{animation: floatingY30 5s ease-in-out -5s infinite alternate-reverse;}
#mi-hydrogen img{animation: rotating10 20s ease-in-out -3s infinite alternate-reverse; transform-origin: 80% 40%;}
#mi-earth{animation: floatingY10 3s ease-in-out -1s infinite alternate-reverse;}
#mi-earth img{animation: rotating30 12s ease-in-out -15s infinite alternate-reverse; transform-origin: 40% 30%;}
#mi-rock2{animation: floatingY30 6s ease-in-out -2s infinite alternate-reverse;}
#mi-rock2 img{animation: rotating50 10s ease-in-out -11s infinite alternate-reverse; transform-origin: 90% 20%;}
#mi-wafer{animation: floatingY20 4s ease-in-out -4s infinite alternate-reverse;}
#mi-wafer img{animation: rotating20 5s ease-in-out -8s infinite alternate-reverse; transform-origin: 60% 70%;}
#mi-hdd{animation: floatingY30 3s ease-in-out -3s infinite alternate-reverse;}
#mi-hdd img{animation: rotating30 22s ease-in-out -10s infinite alternate-reverse; transform-origin: 40% 50%;}
#mi-bulb{animation: floatingY20 4s ease-in-out -2s infinite alternate-reverse;}
#mi-bulb img{animation: rotating20 15s ease-in-out -5s infinite alternate-reverse; transform-origin: 30% 80%;}

@media only screen and (max-width: 980px) {
	#mi-rock1{width:12.9508%; height:11.5262%; left:39.5082%; top:-10.4928%; z-index:3;}
	#mi-car{width:12.623%; height:9.6979%; left:50.4098%; top:-14.7059%; z-index:4;}
	#mi-mri{width:19.5082%; height:15.6598%; left:68.7705%; top:1.3514%; z-index:1;}
	#mi-hydrogen{width:10.7377%; height:14.1494%; left:70.4098%; top:24.7218%; z-index:2;}
}

/* ------------------------------------------------------------------------
 Aniamtions for mainImage
------------------------------------------------------------------------ */
/* ------------------------------------
 floatingY
------------------------------------ */
@keyframes floatingY10 {
	0% {transform: translateY(-10%);}
	100% {transform: translateY(10%);}
}
@keyframes floatingY20 {
	0% {transform: translateY(-20%);}
	100% {transform: translateY(20%);}
}
@keyframes floatingY30 {
	0% {transform: translateY(-30%);}
	100% {transform: translateY(30%);}
}
@keyframes floatingY40 {
	0% {transform: translateY(-40%);}
	100% {transform: translateY(40%);}
}
@keyframes floatingY50 {
	0% {transform: translateY(-50%);}
	100% {transform: translateY(50%);}
}
/* ------------------------------------
 rotating
------------------------------------ */
@keyframes rotating10 {
	0% {transform: rotate(-10deg);}
	100% {transform: rotate(10deg);}
}
@keyframes rotating20 {
	0% {transform: rotate(-20deg);}
	100% {transform: rotate(20deg);}
}
@keyframes rotating30 {
	0% {transform: rotate(-30deg);}
	100% {transform: rotate(30deg);}
}
@keyframes rotating40 {
	0% {transform: rotate(-40deg);}
	100% {transform: rotate(40deg);}
}
@keyframes rotating50 {
	0% {transform: rotate(-50deg);}
	100% {transform: rotate(50deg);}
}

#secMain .text-title{
	margin-bottom:1em;
	color:var(--color-text-black);
	font-size:30px;
	font-weight:700;
	line-height:1.4;
	opacity:0;
}
#secMain .text-desc{
	margin-bottom:50px;
	color:var(--color-text-black);
	font-size:16px;
	font-weight:500;
	line-height:1.8;
	opacity:0;
}

/* ------------------------------------------------------------------------
 meteoImage
------------------------------------------------------------------------ */
#meteoImage{
	width:77.321%;
	aspect-ratio: 1733 / 835;
	margin:0 auto;
	position:relative;
}
#meteoImage .meteo-item{
	position:absolute;
	opacity:0;
}
#meteoImage .meteo-item img{
	width:100%;
	display: block;
}
#meteo-arrow{width:23.7738%; height:92.3353%; left:39.1229%; top:7.4251%;}
#meteo-earth{width:41.4887%; height:86.1078%; left:0.6924%; top:9.4611%;}
#meteo-shockwave{width:12.4639%; height:25.8683%; left:24.5817%; top:60.8383%;}
#meteo-text-southafrica{width:13.3295%; height:5.3892%; left:24.5239%; top:71.2575%;}
#meteo-meteo{width:24.9856%; height:69.2216%; left:28.7363%; top:0%;}
#meteo-rock1{width:15.753%; height:24.5509%; left:74.3797%; top:19.521%;}
#meteo-rock2{width:16.3301%; height:22.1557%; left:67.9169%; top:45.988%;}
#meteo-rock3{width:13.3872%; height:27.4251%; left:86.6128%; top:42.8743%;}
#meteo-text-pgm{width:22.562%; height:11.3772%; left:72.4178%; top:76.4072%;}

#meteo-meteo{
	transform-origin: 32.333% 76.125%;
}

@media only screen and (max-width: 980px) {
	#secMain .contents-block {
		padding: 80px 0 50px;
	}
	#secMain .shoulder{
		margin-bottom: 30px;
		font-size:15px;
	}
	#secMain .secMain-title {
		width: 95%;
		margin-bottom: 67%;
	}
	#secMain .secMain-image1 {
		width: 97%;
        left: 23%;
        right: auto;
        top: 18%;
	}
	#secMain .text-title{
		margin-bottom:1.2em;
		font-size:22px;
	}
	#secMain .text-desc{
		margin-bottom:30px;
		font-size:16px;
	}
	#meteoImage{
		width:100%;
	}
}

/* ========================================================================
 sec1
======================================================================== */
#sec1{
	background-color: #fff;
}
#sec1 .contents-block{
	padding:5% 0 0;
}
#sec1 .text-title{
	margin-bottom:1em;
	font-size:30px;
	font-weight: 700;
	line-height: 1.4;
}
#sec1 .text-desc{
	margin-bottom:20px;
	font-size:16px;
	font-weight: 500;
	line-height: 1.8;
}
#sec1 .charts{
	width:100%;
	padding:0 3.5%;
	display: flex;
    position: relative;
    bottom: -35px;
	justify-content: space-between;
	box-sizing: border-box;
}
#sec1 .chart{
	width:44.595%;
	padding-top:64px;
	position:relative;
	opacity:0;
}
#sec1 .chart1.anim{
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay1) 1 normal forwards;
}
#sec1 .chart2.anim{
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay2) 1 normal forwards;
}
#sec1 .chart-title{
	padding-bottom: 0.4em;
	display:inline-block;
	position:absolute;
	left:0;
	top:0;
	font-size:22px;
	font-weight: 700;
	border-bottom:solid 2px var(--color-deepblue);
}
#sec1 .chart-image{
	width:100%;
	max-width: 450px;
    margin: 0 auto;
	display: block;
}

@media only screen and (max-width: 980px) {
	#sec1 .contents-block{
		padding:60px 0 0;
	}
	#sec1 .text-title{
		margin-bottom:1.2em;
		font-size:22px;
	}
	#sec1 .text-desc{
		margin-bottom:15px;
	}
	#sec1 .charts{
		width:100%;
		padding:0 3.5%;
		flex-direction: column;
		bottom: -25px;
	}
	#sec1 .chart{
		width:100%;
		padding-top:50px;
	}
	#sec1 .chart2.anim{
		animation-delay: var(--anim-delay1);
	}
	#sec1 .chart-title{
		left:0;
		top:0;
		font-size:16px;
		font-weight: 700;
		border-bottom:solid 2px var(--color-deepblue);
	}
}

/* ========================================================================
 sec2
======================================================================== */
#sec2{
	
}
#sec2 .contents-block{
	padding:5% 0 0;
}
#sec2 .text-title{
	margin-bottom:1em;
	color:#fff;
	font-size:30px;
	font-weight: 700;
	line-height: 1.4;
}
#sec2 .text-desc{
	margin-bottom:20px;
	color:#fff;
	font-size:16px;
	font-weight: 500;
	line-height: 1.8;
}
@media only screen and (max-width: 980px) {
	#sec2 .head-block{
		padding:60px 0 0;
	}
	#sec2 .text-title{
		margin-bottom:1.2em;
		font-size:22px;
	}
	#sec2 .text-desc{
		margin-bottom:20px;
	}
}

/* ------------------------------------------------------------------------
 feature
------------------------------------------------------------------------ */
#sec2 .feature-block{
	
}
#sec2 .feature-block h3{
	margin-bottom:1em;
	display: flex;
	justify-content: center;
	color:#fff;
	font-size:32px;
	font-weight: 700;
	line-height: 1.4;
}
#sec2 .feature-block h3:before{
	content:"";
	width:60px;
	aspect-ratio: 1 / 1;
	margin-right:0.5em;
	display: block;
	position: relative;
    top: -5px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#sec2 .feature-ir h3:before{
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_1_ir_titleicon.webp);
}
#sec2 .feature-ru h3:before{
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_1_ru_titleicon.webp);
}

#sec2 .featureList{
	width:100%;
	padding:0 3.5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
}
#sec2 .featureList > li{
	width:29.326%;
	min-height: 310px;
	padding:30px 35px 40px;
	margin-bottom: 3%;
	display: flex;
	flex-direction: column;
	position:relative;
	box-sizing: border-box;
	text-align: center;
	background-color: rgba(255,255,255,0.5);
	opacity:0;
}
#sec2 .featureList > li.anim:nth-of-type(3n + 1){
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay1) 1 normal forwards;
}
#sec2 .featureList > li.anim:nth-of-type(3n + 2){
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay2) 1 normal forwards;
}
#sec2 .featureList > li.anim:nth-of-type(3n + 3){
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay3) 1 normal forwards;
}
#sec2 .featureList > li:after{
	content:"";
	width:36.749%;
	aspect-ratio: 1 / 1;
	display: block;
	position:absolute;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity:0;
	scale:0;
}
#sec2 .featureList > li:nth-of-type(1):after{
    right: -16%; bottom: -7%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_feature_icon1.webp);
}
#sec2 .featureList > li:nth-of-type(2):after{
    right: -18.5%; bottom: -7%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_feature_icon2.webp);
}
#sec2 .featureList > li:nth-of-type(3):after{
    right: -16%; bottom: -9%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_feature_icon3.webp);
}
#sec2 .featureList > li:nth-of-type(4):after{
    right: -16%; bottom: -7%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_feature_icon4.webp);
}
#sec2 .featureList > li:nth-of-type(5):after{
    right: -11%; bottom: -13%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_feature_icon5.webp);
}
#sec2 .featureList > li:nth-of-type(6):after{
    right: -14%; bottom: -11%;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_feature_icon6.webp);
}

#sec2 .featureList > li.anim:nth-of-type(3n + 1):after{
	animation: zoominFeatureIcon 0.4s var(--anim-ease1) var(--anim-delay3) 1 normal forwards;
}
#sec2 .featureList > li.anim:nth-of-type(3n + 2):after{
	animation: zoominFeatureIcon 0.4s var(--anim-ease1) var(--anim-delay4) 1 normal forwards;
}
#sec2 .featureList > li.anim:nth-of-type(3n + 3):after{
	animation: zoominFeatureIcon 0.4s var(--anim-ease1) var(--anim-delay5) 1 normal forwards;
}

/* zoominFeatureIcon */
@keyframes zoominFeatureIcon{
    0%{
		scale:0;
		opacity:0;
	}
    100%{
		scale:1;
		opacity:1;
	}
}
#sec2 .featureList > li .feature-title{
	margin-bottom:1em;
	display:block;
	color:var(--color-deepblue);
	font-size:22px;
	font-weight: 700;
}
#sec2 .featureList > li .feature-desc{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-grow: 1;
	color:var(--color-text-black);
	font-size:16px;
	font-weight: 500;
	line-height: 1.5;
}
#sec2 .featureList > li .desc-title{
	font-weight: 700;
    display: block;
}
#sec2 .featureList > li .feature-desc > span:nth-child(n+2){
	margin-top:1em;
	display: inline-block;
}

@media only screen and (max-width: 980px) {
	#sec2 .feature-ir{
		padding: 40px 0;
	}
	#sec2 .feature-ru{
		padding: 40px 0;
	}
	#sec2 .feature-block h3{
		margin-bottom:1em;
		font-size:22px;
	}
	#sec2 .feature-block h3:before{
		width:42px;
	}
	#sec2 .featureList{
		padding:0;
		flex-direction: column;
	}
	#sec2 .featureList > li{
		width:100%;
		min-height: 0;
		padding:30px 35px 40px;
		margin-bottom: 40px;
	}
	#sec2 .featureList > li:last-child{
		margin-bottom: 0;
	}
	#sec2 .featureList > li.anim:nth-of-type(3n + 1),
	#sec2 .featureList > li.anim:nth-of-type(3n + 2),
	#sec2 .featureList > li.anim:nth-of-type(3n + 3){
		animation-delay: var(--anim-delay1);
	}
	#all #sec2 .featureList > li:after{
		width:64px;
		right: 3%;
		bottom: -11%;
	}
	#sec2 .featureList > li .feature-title{
		margin-bottom:1em;
		display:block;
		color:var(--color-deepblue);
		font-size:22px;
		font-weight: 700;
	}
	#sec2 .featureList > li .feature-desc{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
		color:var(--color-text-black);
		font-size:16px;
		font-weight: 500;
		line-height: 1.5;
	}
	#sec2 .featureList > li .desc-title{
		font-weight: 700;
		display: block;
	}
	#sec2 .featureList > li .feature-desc > span:nth-child(n+2){
		margin-top:1em;
		display: inline-block;
	}
}

/* ------------------------------------------------------------------------
 purpose
------------------------------------------------------------------------ */
#sec2 .purpose-ir{
	padding-top: 15%;
}
#sec2 .purpose-ru{
	padding-bottom: 5%;
}
#sec2 .purpose-block h3{
	width:100%;
	margin-bottom:2em;
	display:flex;
	justify-content: center;
	color:var(--color-deepblue);
	font-size:24px;
	font-weight:700;
	line-height: 1.5;
}
#sec2 .purpose-block h3:before,
#sec2 .purpose-block h3:after{
	content:"";
	width:1.6em;
	aspect-ratio:83 / 93;
	display:block;
	position:relative;
	top:-5px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
#sec2 .purpose-block h3:before{
	margin-right:0.7em;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_2_title_deco1.webp);
}
#sec2 .purpose-block h3:after{
	margin-left:0.7em;
	background-image:url(/tour/_assets/iridium_ruthenium_basics/img/sec2_2_title_deco2.webp);
}

#sec2 .purposeList{
	width:100%;
	display: flex;
	justify-content: space-between;
}
#sec2 .purposeList > li{
	width:27.679%;
	display: block;
	opacity:0;
}
#sec2 .purposeList > li.anim:nth-of-type(1){
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay1) 1 normal forwards;
}
#sec2 .purposeList > li.anim:nth-of-type(2){
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay2) 1 normal forwards;
}
#sec2 .purposeList > li.anim:nth-of-type(3){
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay3) 1 normal forwards;
}
#sec2 .purposeList > li .purpose-image{
	width:100%;
}
#sec2 .purposeList > li .purpose-image img{
	width:100%;
	display: block;
}
#sec2 .purposeList > li .purpose-text{
	position: relative;
    top: -1em;
}
#sec2 .purposeList > li:nth-of-type(1) .purpose-text{
    top: -3em;
}
#sec2 .purposeList > li .purpose-title{
	margin-bottom:0.65em;
	display: block;
	font-size:22px;
	font-weight:700;
	line-height: 1.35;
}
#sec2 .purpose-descList{
	
}
#sec2 .purpose-descList > li{
	display: flex;
	align-items: center;
	font-size:16px;
	font-weight:500;
	line-height: 1.5;
}
#sec2 .purpose-descList > li:before{
	content:"";
	width:0.85em;
	height:0.85em;
	margin-right:0.3em;
	display: block;
	background-color:var(--color-text-black);
	border-radius: 50%;
}

@media only screen and (max-width: 980px) {
	#sec2 .purpose-ir{
		padding: 40px 0;
	}
	#sec2 .purpose-ru{
		padding: 40px 0;
	}
	#sec2 .purpose-block h3{
		align-items: center;
		font-size:20px;
		text-align: center;
	}
	#sec2 .purpose-ir h3{
		margin-bottom:1.5em;
	}
	#sec2 .purpose-ru h3{
		margin-bottom:1em;
	}


	#sec2 .purposeList{
		flex-direction: column;
	}
	#sec2 .purposeList > li{
		width:100%;
		margin-top: -30px;
	}
	#sec2 .purposeList > li.anim:nth-of-type(1),
	#sec2 .purposeList > li.anim:nth-of-type(2),
	#sec2 .purposeList > li.anim:nth-of-type(3){
		animation-delay: var(--anim-delay1);
	}
	#sec2 .purposeList > li .purpose-image {
		width: 100%;
	}
	#sec2 .purposeList > li .purpose-image img{
		max-width:450px;
		margin:0 auto;
	}
	#sec2 .purposeList > li .purpose-text{
		top: -1em;
	}
	#sec2 .purposeList > li:nth-of-type(1) .purpose-text{
		top: -2.8em;
	}
	#sec2 .purposeList > li .purpose-title{
		font-size:18px;
	}
}
@media only screen and (max-width: 690px) {
	#sec2 .purpose-block h3:before,
	#sec2 .purpose-block h3:after{
		width: 60px;
		height: 43px;
		aspect-ratio: auto;
		top: auto;
	}
}

/* ========================================================================
 sec3
======================================================================== */
#sec3{
	
}
#sec3 .title-block{
	padding:5% 0 6%;
}
#sec3 h2{
	font-size:30px;
	font-weight:700;
	line-height: 1.4;
}
#sec3 .col2-block{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
#sec3 .col2-block1{
	margin-bottom: 7%;
}
#sec3 .col2-block2{
	padding-bottom: 10%;
}

#sec3 .col2-block1 .text{
	width:43%;
	padding-top: 2%;
}
#sec3 .col2-block1 .image{
	width:53%;
}

#sec3 .col2-block2 .image{
	width:54%;
}
#sec3 .col2-block2 .text{
	width:43%;
	padding-top: 2%;
}

#sec3 .col2-block .text .reason-title{
	margin-bottom: 1em;
	display: block;
	font-size:24px;
	font-weight:700;
	line-height: 1.4;
}
#sec3 .col2-block .text .reason-desc{
	font-size:16px;
	font-weight:500;
	line-height: 1.5;
}
#sec3 .col2-block .image{
	padding-top: 0.7%;
	position:relative;
	opacity:0;
}
#sec3 .col2-block .image.anim{
	animation: slideinBtoT 0.6s var(--anim-ease1) var(--anim-delay1) 1 normal forwards;
}
#sec3 .col2-block .image .image-title{
	position:absolute;
	left:0; top:0;
	font-size:clamp(10px, 1.3986vw, 20px);
	font-weight:700;
	line-height: 1.5;
}
#sec3 .col2-block .image picture,
#sec3 .col2-block .image img{
	width: 100%;
	display: block;
}

@media only screen and (max-width: 980px) {

	#sec3 .title-block{
		padding:40px 0 60px;
	}
	#sec3 h2{
		font-size:22px;
	}
	#sec3 h2 br.forSp{
		display:none;
	}
	#sec3 .col2-block{
		flex-direction: column;
	}
	#sec3 .col2-block1{
		margin-bottom: 60px;
	}
	#sec3 .col2-block2{
		flex-direction: column-reverse;
		padding-bottom: 90px;
	}
	#sec3 .col2-block .text,
	#sec3 .col2-block .image{
		width:100%;
	}
	#sec3 .col2-block .image{
		padding-top: 12%;
	}
	#sec3 .col2-block .image img{
		max-width: 600px;
		margin:0 auto;
	}
	#sec3 .col2-block .text{
		margin-bottom:40px;
	}
	#sec3 .col2-block .text .reason-title{
		margin-bottom: 1.2em;
		font-size:20px;
	}
	#sec3 .col2-block .text .reason-desc{
		font-size:16px;
	}
	#sec3 .col2-block .image .image-title{
		font-size:14px;
	}
}
@media only screen and (max-width: 550px) {
	#sec3 h2 br.forSp{
		display:block;
	}
}

/* ========================================================================
 secBottom
======================================================================== */
#secBottom{
	position: static;
	background-color: #000;
	visibility: visible;
	opacity: 1;
}
#secBottom .contents{
	padding: 7% 0 3.5%;
	position: relative;
}
#secBottom .contents-block{
    width: 95%;
    max-width: none;
	margin:0 auto;
}
#secBottom h2 {
	color:#fff;
}
#secBottom .copyright {
	color:#fff;
}
#secBottom .footer-extralinks {
    width: 95%;
    max-width: none;
}
@media only screen and (max-width: 980px) {
	#secBottom .contents{
		padding: 60px 0 60px;
		position: relative;
	}
	#secBottom .contents-block{
		width: 100%;
	}
	#secBottom .footer-extralinks {
		width: 100%;
	}
}