@charset "utf-8" ;

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

body{
	padding: 0;
	color: #333;
	line-height: 1.5;
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	font-variant-east-asian: jis90; 
}
img{
	width: 100%;
	vertical-align: bottom;
}

.wrap {
	width: min(100vw, 1000px);
	position: relative;
	margin:auto;
	padding: 3vw;
}
.sp {display:none;}
.pc {display:block;}
@media screen and (max-width: 768px) {
	.sp {display:block;}
	.pc {display:none;}
}
:root{
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
	overflow-x: hidden;
}
img {
	max-width: 100%;
	width: 100%;
}
div, figure, section, a, h1,h2,h3,h4,h5,h6,p{
	box-sizing: border-box;
}
img,iframe{
	vertical-align: bottom;
	border-style: none;
}
a{
	-webkit-transition: 0.3s ease-in-out;
	-moz-tranPerformersition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
	overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
a:link {
	text-decoration: none;
	outline: none;
}
a:visited {
}
a:hover {
	opacity: 0.6;
}


body{
	font-family: "Open Sans", sans-serif;
	background: url(../images/bg.jpg) no-repeat;
	background-size: auto;
	background-position: top center;
}

.lang{
	margin: 0 0 0 auto;
	text-align: right;
	background-color: #fff;
	padding: .6em 1em;
	display: inline-block;
	position: absolute;
	top:0;
	right: 0;
}
.flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4%;
}
.w50{
	width: 48%;
}

.fv{
	padding: 100px 0;
	background: url(../images/bg_top_fv.png)no-repeat;
	background-size: contain;
	background-position: bottom center;
}
.fv .logo{
	width: min(80%, 340px);
	margin-bottom: 3em;
}
.fv .copy{
	color: #EA609E;
	font-size: clamp(15px, 4vw, 40px);
	font-weight: 600;
}
.fv .box{
	background-color: #fff;
	margin-bottom: 3em;
	display: block;
	transition: 0.3s ease-in-out;
}
.fv .box:hover {
	border: solid 6px #EA609E;
}
.fv .box a{
	display: block;
}
.fv .box a:hover{
	opacity: 1;
}
.fv .pic-area{
	width: 100%;
}
.fv .logo-area{
	width: 100%;
	height: 180px;
	display: flex;
	justify-content: center;
	align-items: center
}
.fv .logo-area .logo-udg{
	width: 50%;
}
.fv .logo-area .logo-udg-step{
	width: 70%;
}
.fv .link-area{
	background-color: #EA609E;
	color: #fff;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}

.campany{
	padding: 100px 0;
	font-size: clamp(15px, 2vw, 20px);
}
.campany .htext{
	color: #EA609E;
	font-size: clamp(15px, 8vw, 80px);
	font-weight: 600;
}
.campany .pic-area{
	margin-bottom: 3em;
}
.campany .map{
	margin: 5em auto;
	width: min(100%, 700px);
}
.campany .map iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}
.footer{
	background:url(../images/bg_footer.png)no-repeat;
	background-position: top center;
	background-size: cover;
	text-align: center;
	padding: 50px 0 150px;
}
.copyright{
	font-size: clamp(15px, 2vw, 20px);
}

@media screen and (max-width: 768px) {
	.fv{
		padding: 50px 0;
	}
	.fv .w50{
		width: 100%;
	}
	.fv .logo{
		margin: auto auto 1em auto;
	}
	.fv .copy{
		text-align: center;
		margin-bottom: 2em;
	}
	.fv .box{
		margin-bottom: 3em;
		width: 100%;
	}
	.fv .box a{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.fv .box a:hover{
		opacity: 1;
	}
	.fv .pic-area{
		width: 60%;
		order: 2;
	}
	.fv .logo-area{
		width: 40%;
		height: auto;
		order: 1;
	}
	.fv .link-area{
		width: 100%;
		order: 3;
	}

	.campany{
		padding: 50px 0;
	}
	.campany .w50{
		width: 100%;
	}
	.campany .htext{
		text-align: center;
	}
	.campany .address{
		text-align: center;
	}
	.campany .pic-area{
	}
	.campany .map{
		margin: 5em auto auto auto;
	}
	.campany .map iframe {
	}
	.footer{
		text-align: center;
		padding: 20px 0 60px;
	}
	.copyright{
		font-size: 13px;
	}


}



/*UDG*/
.second-page .logo{
	margin: 3em auto;
	width: min(80%, 340px);
}
.second-page .title-area {
	margin-bottom: 10em;
}
.second-page .title-area .logo-udg{
	width: 40%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.second-page .title-area .logo-udg img{
	width: 80%;
}
.second-page .title-area .pic{
	width: 55%;
}
.udg-cnt{
	margin-bottom: 10em;
}
.udg-cnt .cnt-title-area{
	color: #ED6C01;
	position: relative;
	text-align: center;
	margin-bottom: 5em;
}
.udg-cnt .cnt-title-area .cnt-number{
	font-size: clamp(40px, 20vw, 200px);
	font-weight: 700;
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 0;
	line-height:0.2;
}
.udg-cnt .cnt-title-area .htext{
	font-size: clamp(20px, 3vw, 30px);
	margin: 0;
}
.udg-cnt .cnt-title-area .copy{
	font-size: clamp(16px, 2vw, 20px);
	margin: 0;
}
.udg-cnt .inner{
	width: 80%;
	margin: auto;
}
.udg-cnt .inner .text{
	font-size: clamp(16px, 2vw, 20px);
	margin: 3em auto;
}
.udg-cnt.cnt02 .pics{
	width: 60%;
	margin: auto;
}
.udg-cnt.cnt03 .illust,
.udg-cnt.cnt03 .pics{
	width: 60%;
	margin: auto;
}
.udg-cnt-useit{
	background-color: #F8F8F8;
	padding: 4em 4em 1em 4em ;
	margin-bottom: 6em;
}
.udg-cnt-useit .htext{
	font-size: clamp(20px, 3vw, 30px);
	margin: 0;
	color: #ED6C01;
	text-align: center;
	margin-bottom: 2em;
}
.udg-cnt-useit .flex{
	width: 80%;
	margin: 3em auto;
}
.udg-cnt-useit .flex .pic{
	width: 40%;
}
.udg-cnt-useit .flex .illsut{
	width: 55%;
}
.udg-cnt-useit .flex .illsut p{
	color: #ED6C01;
	font-size: clamp(16px, 2vw, 20px);
	margin: 0;
}
.udg-cnt-useit .flex .illsut img{
	width: 60%;
	margin: auto;
	display: block;
}
.udg-cnt-useit .flex.ex{
	justify-content: start;
	width: 100%;
}
.udg-cnt-useit .ex-pic{
	width: 22%;
	margin-bottom: 1rem;
}
.udg-cnt-useit .pics{
	margin-bottom: 4em;
}
.second-page .catalog{
	text-align: center;
}
.second-page .catalog .htext{
	font-size: clamp(20px, 3vw, 30px);
	color: #EA609E;
}
.second-page .catalog a{
	color: #EA609E;
}

.udg-step-cnt{
	margin-bottom: 6em;
}
.udg-step-cnt .copy{
	font-size: clamp(20px, 3vw, 30px);
	text-align: center;
	margin-bottom: 6em;
}
.udg-step-cnt .box{
	background-color: #fff;
	padding: 3vw 0 3vw 3vw;
	margin-bottom: 4em;
	box-shadow: 2px 2px 10px #00000011;
}

.udg-step-cnt .sub-title{
	color: #1D8C61;
	font-size: clamp(16px, 2vw, 20px);
	margin: 0;
}
.udg-step-cnt .htext{
	color: #1D8C61;
	font-size: clamp(20px, 3vw, 30px);
	margin: 0;
}
.udg-step-cnt .sub-title.orange,
.udg-step-cnt .htext.orange{
	color: #ED6C01;
}
.udg-step-cnt .pic-area{
	width: 40%;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.udg-step-cnt .pic-area .icons{
	width: 80%;
	margin: auto auto 0 auto;
}
.udg-step-cnt .diagram-area{
	width:55%;
}
.udg-step-cnt .table{
	width: 90%;
	margin: 3em auto auto auto;
	padding-right: 3vw;
}

@media screen and (max-width: 768px) {
	.second-page .logo{
	}
	.second-page .title-area {
	}
	.second-page .title-area .logo-udg{
	}
	.second-page .title-area .logo-udg img{
	}
	.second-page .title-area .pic{
	}
	.udg-cnt{
	}
	.udg-cnt .cnt-title-area{
	}
	.udg-cnt .cnt-title-area .cnt-number{
	}
	.udg-cnt .cnt-title-area .htext{
	}
	.udg-cnt .cnt-title-area .copy{
	}
	.udg-cnt .inner{
		width: 80%;
	}
	.udg-cnt .inner .text{
	}
	.udg-cnt.cnt02 .pics{
		width: 100%;
	}
	.udg-cnt.cnt03 .illust,
	.udg-cnt.cnt03 .pics{
		width: 100%;
	}
	.udg-cnt-useit{
		padding: 5vw;
	}
	.udg-cnt-useit .htext{
	}
	.udg-cnt-useit .flex{
		width: 80%;
	}
	.udg-cnt-useit .flex .pic{
		width: 100%;
	}
	.udg-cnt-useit .flex .illsut{
		width: 100%;
	}
	.udg-cnt-useit .flex .illsut p{
	}
	.udg-cnt-useit .flex .illsut img{
	}
	.udg-cnt-useit .pics{
	}
	.udg-cnt-useit .ex-pic{
		width: 48%;
	}
	.second-page .catalog{
	}
	.second-page .catalog .htext{
	}
	.second-page .catalog a{
	}

	.udg-step-cnt{
	}
	.udg-step-cnt .copy{
		margin-bottom: 4em;
	}
	.udg-step-cnt .box{
		padding: 5vw;
	}

	.udg-step-cnt .sub-title{
	}
	.udg-step-cnt .htext{
	}
	.udg-step-cnt .sub-title.orange,
	.udg-step-cnt .htext.orange{
	}
	.udg-step-cnt .pic-area{
		width: 80%;
		margin:  auto auto 2em auto;
	}
	.udg-step-cnt .pic-area .icons{
		width: 60%;
	}
	.udg-step-cnt .diagram-area{
		width: 100%;
	}
	.udg-step-cnt .table{
		width: 100%;
		margin: 1em auto auto auto;
		padding-right: 3vw;
	}

}