@charset "utf-8";

/* CSS Document */



/* ----------------------------------------
reset
---------------------------------------- */
/**
 * uaplus.css version 0.0.1
 */
*,*::after,*::before{box-sizing:border-box}:focus-visible{outline-offset:3px}:where(html){-webkit-text-size-adjust:none;text-size-adjust:none}:where(html){line-height:1.5}:where(html){scrollbar-gutter:stable}:where(h1){font-size:2em;margin-block:.67em}:where(abbr[title]){cursor:help;text-decoration-line:underline;text-decoration-style:dotted}@media (forced-colors:active){mark{color:HighlightText;background-color:Highlight}}:where(del,ins,s)::before,:where(del,ins,s)::after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute;white-space:nowrap;content:"test"}:where(s)::before{content:"stricken text start "}:where(s)::after{content:" stricken text end"}:where(del)::before{content:"deletion start "}:where(del)::after{content:" deletion end"}:where(ins)::before{content:"insertion start "}:where(ins)::after{content:" insertion end"}:where(audio,iframe,img,svg,video){max-block-size:100%;max-inline-size:100%}:where(fieldset){min-inline-size:0}:where(label):has(+:where(textarea,input,select)){display:block}:where(textarea:not([rows])){min-block-size:6em}:where(button,input,select,textarea){font-family:inherit;font-size:inherit}:where([type="search"]){-webkit-appearance:textfield}@supports (-webkit-touch-callout:none){:where([type="search"]){border:1px solid -apple-system-secondary-label;background-color:canvas}}:where([type="tel"],[type="url"],[type="email"],[type="number"]):not(:placeholder-shown){direction:ltr}:where(table){border-collapse:collapse;border:1px solid}:where(th,td){border:1px solid;padding:.25em .5em}:where(dialog)::backdrop{background:oklch(0% 0 0 / .3)}:where(dialog),:where(dialog)::backdrop{opacity:0;transition:opacity 300ms ease-out,display 300ms allow-discrete,overlay 300ms allow-discrete}:where(dialog[open]),:where(dialog[open])::backdrop{opacity:1}@starting-style{:where(dialog[open]),:where(dialog[open])::backdrop{opacity:0}}[hidden]:not([hidden="until-found"]){display:none!important}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li{
	margin: 0;
	padding: 0;
	list-style: none;
}
/* ???Ώۉӏ�
---------------------------------------- */


/*********************
pc
****************************/ 
.china_lp{
	background-color: #FBFBFB;
	overflow-x: hidden;
	.cn_header{
		width: 100%;
		height: 100px;
		margin: 0 auto;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 5px 10px;
		box-sizing: border-box;
		.cn_logo{
			display: flex;
			justify-content: center;
			align-items: center;
			width: fit-content;
			color: #ff8800;
			font-size: clamp(14px, 2vw, 16px);
			font-weight: bold;
			img{
				width: 100%;
				max-width: 260px;
				padding-right: 2em;
			}
		}
		ul{
            display: flex;
            justify-content: space-between;
            width: fit-content;
            margin: 1em 0 1em auto;
			align-items: center;
			li{
				margin: 0 0 0 1em;
			}
			li:first-child{
				a{
					color: #fff;
					background-color: #666;
					padding: 0.5em 2em 0.5em 3em;
					border-radius: 5px;
					text-decoration: none;
					font-size: clamp(16px, 3vw, 20px);
					font-weight: bold;
					transition: all 0.3s ease;
					position: relative;
					width: 200px;
					display: block;
					&::before {
						content: '';
						position: absolute;
						background-image: url(../img/cn_mail_icon.png);
						left: 1em;
						top: 0.4em;
						width: 1.2em;
						height: 1.6em;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
					}
				}
			}
			li:last-child{
				a{
					img{
						width: 100%;
						max-width: 50px;
					}
				}
			}
		}
	}

	.cn_main{
		background-image: url(../img/china_main_pc.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: 100%;
		height: 700px;
		margin: 0 auto;
		position: relative;
		.cn_main_in_left{
			position: absolute;
			top: 15%;
			right: 60%;
			width: fit-content;
			font-size: clamp(14px, 2vw, 16px);
			font-weight: bold;
			line-height: 2;
			h1{
				color: #fff;
				line-height: 1.3;
				font-weight: bold;
				padding: 0;
				margin-bottom: 20px;
				font-size: clamp(30px, 6vw, 65px);
				span{
					font-size: clamp(16px, 3.5vw, 20px);
					display: block;
					line-height: 2;
					color: #fff;
				}
			}
		}
		.cn_main_in_right{
			width: 35%;
			min-width: 470px;
			max-width: 500px;
			position: absolute;
			top: 50%;
			left: 55%;
			transform: translateY(-50%);
		}
		.cn_cta_block{
			background-color: #fff;
			display: block;
			box-sizing: border-box;
			h3{
				color: #fff;
				display: block;
				width: 100%;
				position: relative;
				background-color: #EF8200;
				font-size: clamp(20px, 4vw, 24px);
				line-height: 2;
				text-indent: 1.5em;
			}
			p{
				font-size: clamp(16px, 3vw, 16px);
				margin: 0.5em auto;
				font-weight: bold;
				display: block;
				width: 90%;
				text-align: left;
				span{
					color: red;
					font-weight: bold;
					font-size: clamp(24px, 6vw,34px);
					margin-left: 0.5em;
				}
			}
			ul{
				display: flex;
				justify-content: start;
				gap: 2em;
				margin: 1em auto;
				width: 70%;
				li{
					width: fit-content;
					&:first-child>a{
						color: #fff;
						background: rgb(0, 0, 0);
						display: block;
						padding: 0em 2em 0em 4em;
						border-radius: 10px;
						text-decoration: none;
						font-weight: bold;
						position: relative;
						line-height: 2.5em;
						font-size: clamp(14px, 5vw, 20px);
						transition: all 0.3s ease;
						&:hover{
							opacity: 0.8;
						}
						&::before{
							content: '';
							position: absolute;
							background-image: url(../img/cn_mail_icon.png);
							left: 1.5em;
							top: 0.5em;
							width: 1.5em;
							height: 1.7em;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}
				}
			}
		}
	}

	.cn_main_sub{
		background-color: #fff;
		width: 90%;
		max-width: 1100px;
		padding: 1em 2em;
		position: relative;
		margin: 0 auto;
		top:-50px;
		border-radius: 10px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
		div{
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			h2{
				background-color: #000;
				color: #fff;
				padding: 0.5em 1em;
				border-radius: 5px;
				font-size: clamp(16px, 2vw, 24px);
				font-weight: bold;
				width: 6em;
				margin-right: 1em;
				text-align: center;
			}
			ul{
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 1em auto;
				li{
					width: 45%;
					h3{
						color: #EF8200;
						font-size: clamp(16px, 2vw, 24px);
					}
					p{
						font-size: clamp(14px, 1.5vw, 16px);
					}
				}
			}
		}
	}
	.cn_reason{
		width: 100%;
		margin: 7em auto;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: center;
		position: relative;
		&::before{
			content: '';
			position: absolute;
			top: 40px;
			left: 0;
			width: 50%;
			height: 420px;
			background-image: url(../img/reason_bg.png);
			background-size: cover;
			background-position: bottom;
			background-repeat: no-repeat;
			z-index: -1;
		}
		>div{
			width: 25%;
			max-width: 300px;
			margin: 0% 2% 0 auto;
			h3{
				font-size: clamp(24px, 4vw, 50px);
				span{
					font-size: clamp(16px, 2vw, 24px);
					display: block;
				}
			}
			p{
				font-size: clamp(14px, 3.5vw, 16px);
				font-weight: bold;
				line-height: 2;
				margin-top: 3em;
			}
		}
		ul{
			width: 50%;
			max-width: 700px;
			margin: 0 auto 0 2%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			li{
				width: 100%;
				margin: 1em auto;
				display: flex;
				flex-wrap: nowrap;
				justify-content: start;
				align-items: center;
				img{
					width: 120px;
					height: 120px;
					border-radius: 10px;
					object-fit: cover;
				}
				div{
					width: 70%;
					margin: 0 auto 0 5%;
					h3{
						font-size: clamp(16px, 2vw, 24px);
					}
					p{
						font-size: clamp(14px, 1.5vw, 16px);
					}
				}
			}
		}
		h4{
			display: block;
			width: 100%;
			text-align: center;
			font-size: clamp(16px, 2vw, 24px);
			font-weight: bold;
			margin-top: 3em;
		}
	}
	.cn_suggestion{
		width: 96%;
		max-width: 1100px;
		margin: 7em auto;
		background-image: url(../img/plesentation_bg.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 20px;
		padding: 2em;
		>h3{
			font-size: 50px;
			position: relative;
			margin: 50px auto 0 50%;
			span{
				color: #EF8200;
				font-size: 20px;
				display: block;
			}
		}
		>p{
			font-size: 50px;
			position: relative;
			margin: 0px auto 0 50%;
			font-size: clamp(14px, 1.5vw, 18px);
			line-height: 2;
		}
		ul{
			width: 96%;
			margin: 50px auto 0 auto;
			display: flex;
			gap: 1em;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			li{
				width: 49%;
				display: flex;
				flex-wrap: nowrap;
				justify-content: start;
				align-items: center;
				background-color: #fff;
				border-radius: 10px;
				padding: 1em;
				box-sizing: border-box;
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
				img{
					width: 150px;
					height: 120px;
					object-fit: contain;
					margin-right: 1em;
				}
				div{
					h3{
						font-size: clamp(16px, 2vw, 24px);
						color: #EF8200;
						span{
							color: #000;
							font-size: clamp(14px, 1.5vw, 16px);
						}
					}
					p{
						font-size: clamp(12px, 1.5vw, 14px);
						color: #000;
						line-height: 1.7;
					}
				}
			}
			li:last-child{
				width: 100%;
			}
		}
	}
	.cn_area{
		text-align: center;
		width: 100%;
		margin: 6em auto;
		h3{
			font-size:50px;
			span{
				color: #EF8200;
				font-size: 20px;
				display: block;
			}
		}
		p{
			color: #000;
			font-size: clamp(14px, 1.5vw, 16px);
			font-weight: bold;
			line-height: 2;
			margin-bottom: 2em;
			margin-top: 2em;
		}
		div{
			width: 100%;
			margin: 2em auto;
			display: flex;
			flex-wrap: wrap;
			gap: 1%;
			div{
				background-image: url(../img/tokyo_bg.webp);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				width: 49.5%;
				display: block;
				box-sizing: border-box;
				padding: 2em 0;

				h4{
					color: #fff;
					font-size: 60px;
					display: block;
					width: 100%;
					margin: 0.5em auto;
				}
				ul{
					width: fit-content;
					margin: 3em auto;
					li{
						width: fit-content;
						color: #fff;
						font-weight: bold;
						list-style: disc;
						line-height: 2;
					}
				}
			}
			div:last-child{
				background-image: url(../img/osaka_bg.webp);
			}
		}

	}
	.slide-animation_tokyo{
		position: relative;
		&::before{
			content: 'TOKYO';
			color: #dddddd;
			font-size: 200px;
			position: absolute;
			top: -0.5em;
			left: 2%;
		}
		.slide-contents{
			margin: 70px auto 10px auto;
			li{
				img{
					width: auto;
					height: auto;
					max-width: none;
					max-height: none;
					margin-right: 30px;
				}
			}
		}
	}
	.slide-animation_osaka{
		
		position: relative;
		&::before{
			content: 'OSAKA';
			color: #dddddd;
			font-size: 200px;
			position: absolute;
			bottom: -0.5em;
			right: 2%;
		}
		.slide-contents{
			margin: 10px auto 70px auto;
			animation: loopAnimationReverse 150s linear infinite;
			li{
				width: 100%;
				img{
					width: auto;
					height: auto;
					max-width: none;
					max-height: none;
					margin-right: 30px;
				}
			}
		}
	}
	.cn_flow{
		margin: 5em auto;
		h3{
			color: #000;
			font-size: 50px;
			text-align: center;
			span{
				font-size: 20px;
				color: #EF8200;
				display: block;
			}
		}
		>p{
			font-size: clamp(14px, 1.5vw, 16px);
			line-height: 2;
			text-align: center;
		}
		.flow-container{
			max-width: 1000px;
			margin: 50px auto;
			position: relative;
		}
		.flow-steps{
			position: relative;
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.flow-steps::before{
			content: '';
			position: absolute;
			left: 14px;
			top: 5em;
			bottom: 5em;
			width: 4px;
			background: linear-gradient(180deg, #EF8200 0%, #ffaa40 50%, #EF8200 100%);
			border-radius: 2px;
		}
		.flow-step{
			position: relative;
			margin-bottom: 30px;
			display: flex;
			align-items: center;
		}
		.flow-step:last-child{
			margin-bottom: 0;
		}
		.step-number{
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 30px;
			height: 30px;
			background: linear-gradient(135deg, #EF8200 0%, #ffaa40 100%);
			border-radius: 50%;
			box-shadow: 0 4px 15px rgba(239, 130, 0, 0.3);
			z-index: 2;
		}
		.step-content{
			margin-left: 50px;
			width: calc(100% - 50px);
			background: #fff;
			border-radius: 15px;
			padding: 20px;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			gap: 20px;
			transition: all 0.3s ease;
		}
		.step-content:hover{
			transform: translateY(-5px);
			box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
		}
		.step-icon{
			flex-shrink: 0;
			width: auto;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10px;
			padding: 10px;
		}
		.step-icon img{
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		.step-text{
			flex: 1;
		}
		.step-text h4{
			color: #333;
			font-size: 20px;
			font-weight: bold;
			margin-bottom: 10px;
			line-height: 1.4;
		}
		.step-text p{
			color: #666;
			font-size: 16px;
			line-height: 1.6;
			margin: 0;
		}
	}
	
	.cn_dl_book{
		margin: 50px auto;
		width: fit-content;
		a{
			img{
				width: 500px;
				transition: all 0.3s ease;
			}
		}
		a>img:hover{
			opacity: 0.8;
		}
	}
	.cn_qa{
		width: 100%;
		margin: 10em auto;
		display: flex;
		flex-wrap: nowrap;
		justify-content: start;
		position: relative;
		gap: 5%;
		h3{
			font-size: 60px;
			width: 40%;
			text-align: right;
			span{
				display: block;
				font-size: 20px;
			}
		}

		div{
			width: 50%;
			max-width: 600px;
			display: block;
			h4{
				color: #EF8200;
				font-size: clamp(16px, 4vw, 20px);
				font-weight: bold;
				margin-bottom: 0.5em;
			}
			p{
				color: #000;
				font-size: clamp(14px, 3vw, 16px);
				line-height: 1.5;
				margin-bottom: 2em;
			}	
		}
	}
	.cn_qa::before{
		content: '';
		position: absolute;
		background-image: url(../img/qa_bg.webp);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
            bottom: -100px;
            left: 0;
            width: 40%;
            height: 400px;

	}
	.cn_cta{
		width: 100%;
		margin: 3em auto;
		background-image: url(../img/cta_bg.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 3em 2em;
		.cn_cta_block{
			width: 700px;
			height: 300px;
			background-color: #fff;
			margin: 2em auto;
			display: block;
			box-sizing: border-box;
			position: relative;
			&::after{
				content: '';
				background-image: url(../img/cta_girl.png);
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				width: 280px;
				height: 340px;
				bottom: 0;
				right: 0;
				position: absolute;
				z-index: 1;
			}
			h3{
				color: #fff;
				display: block;
				width: 100%;
				position: relative;
				background-color: #EF8200;
				font-size: clamp(20px, 4vw, 24px);
				line-height: 2;
				text-indent: 1.5em;
			}
			p{
				text-align: center;
				font-size: clamp(16px, 3vw, 16px);
				margin: 1.5em;
				font-weight: bold;
				display: block;
				width: 100%;
				text-align: left;
				span{
					color: red;
					font-weight: bold;
					font-size: clamp(24px, 6vw,34px);
					margin-left: 0.5em;
				}
			}
			ul{
				display: flex;
				justify-content: start;
				gap: 2em;
				margin: 2em auto 2em 2em;
				li{
					width: fit-content;
					&:first-child>a{
						color: #fff;
						background: rgb(0, 0, 0);
						display: block;
						padding: 0em 2em 0em 4em;
						border-radius: 10px;
						text-decoration: none;
						font-weight: bold;
						position: relative;
						line-height: 2.5em;
						font-size: clamp(14px, 5vw, 20px);
						transition: all 0.3s ease;
						&:hover{
							opacity: 0.8;
						}
						&::before{
							content: '';
							position: absolute;
							background-image: url(../img/cn_mail_icon.png);
							left: 1.5em;
							top: 0.5em;
							width: 1.5em;
							height: 1.7em;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}
				}
			}
		}
	}
	.cn_canpany_data{
		width: 100%;
		max-width: 1200px;
		margin: 3em auto;
		padding: 2em;
		
		h2{
			font-size: clamp(24px, 4vw, 36px);
			font-weight: bold;
			text-align: left;
			margin-bottom: 2em;
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				bottom: -0.5em;
				left: 0%;
				width: 3.5em;
				height: 5px;
				background: linear-gradient(90deg, #EF8200, #ffaa40);
				border-radius: 2px;
			}
		}
		
		dl{
			display: grid;
			grid-template-columns: 1fr 2fr;
			gap: 0;
			width: 100%;
			border-top: 1px solid #e0e0e0;
			border-bottom: 1px solid #e0e0e0;
			overflow: hidden;
			
			dt{
				padding: 1.2em 1.5em;
				font-weight: bold;
				font-size: clamp(16px, 3.5vw, 18px);
				color: #333;
				border-bottom: 1px solid #e0e0e0;
				display: flex;
				min-height: 4em;
				line-height: 1.8;
			}
			dt:before{
				content: '●';
				display: block;
				color: #EF8200;
				font-size: clamp(16px, 5vw, 30px);
				margin-right: 0.5em;
				line-height: 1;
			}
			dd{
				padding: 1.2em 1.5em;
				font-size: clamp(14px, 2.5vw, 16px);
				color: #555;
				line-height: 1.6;
				margin: 0;
				display: flex;
				align-items: center;
				min-height: 60px;
				border-bottom: 1px solid #e0e0e0;
			}
			
			dt:last-of-type,
			dd:last-of-type {
				border-bottom: none;
			}
		}
	}
}

.cn_footer{
	display: block;
	width: 100%;
	padding: 1em 0;
	text-align: center;
	font-size: 12px;
	background: orange;
	color: #fff;
}

/*********************
animation
****************************/ 

.slide-animation {
    display: flex;
    width: 100%;
    gap: 0px;
    overflow: hidden;
}
.slide-animation li {
    width: fit-content;
}
.slide-contents {
    display: flex;
    gap: 0px;
    animation: loopAnimation 150s linear;
    animation-iteration-count:infinite;
}
@keyframes loopAnimation {
    0% {
    transform: translateX(0%);
    }
    100% {
    transform: translateX(-65%);
    }
}

@keyframes loopAnimationReverse {
    0% {
    transform: translateX(-65%);
    }
    100% {
    transform: translateX(0%);
    }
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

@keyframes slideAnime {
    0%, 100% {
        opacity: 0;
    }/* スライド・?非表示タイミング */
    50% {
        opacity: 1;
    }/* スライド・?表示タイミング */
}