@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

body{ width: 100%; height: 100%; margin: auto; font-family: 'Josefin Sans', 'Noto Sans JP', sans-serif; background-color: #fff;}

.clearfix { *zoom: 1;}
.clearfix:before,
.clearfix:after { display: table; line-height: 0; content: "";}
.clearfix:after { clear: both;}

.forPC{ display: block;}
.forSP{ display: none;}

h1,h2,h3,h4,h5,li{ color: #000;}

p{ font-size: 14px; font-weight: normal; text-align: left; color: #000;}
p.indent-1 { padding-left:1em; text-indent:-1em;}
p.indent-15 { padding-left:1.5em; text-indent:-1.5em;}
a{ text-decoration: none; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; outline: none; color: #000; font-size: 14px;}
a:hover{ transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; opacity: .6;}
a.none{ pointer-events: none; opacity: .3;}


.bar-top{ background-color: #000; position: fixed; width: 100%; height: 12px; top: 0; left: 0; margin: auto; z-index: 99;}
.bar-top::before{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 49px; height: 49px; top: 11px; left: 11px; margin: auto; position: fixed;}
.bar-top::after{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 49px; height: 49px; top: 11px; right: 11px; margin: auto; position: fixed; transform:rotate(90deg);}
.bar-left{ background-color: #000; position: fixed; width: 12px; height: 100lvh; top: 0; left: 0; margin: auto; z-index: 99;}
.bar-right{ background-color: #000; position: fixed; width: 12px; height: 100lvh; top: 0; right: 0; margin: auto; z-index: 99;}
.bar-bottom{ background-color: #000; position: fixed; width: 100%; height: 12px; bottom: 0; left: 0; margin: auto; z-index: 99;}
.bar-bottom::before{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 49px; height: 49px; bottom: 11px; left: 11px; margin: auto; position: fixed;transform:rotate(270deg);}
.bar-bottom::after{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 49px; height: 49px; bottom: 11px; right: 11px; margin: auto; position: fixed; transform:rotate(180deg);}

.body-bg-white{ width: 100%; height: 100%; margin: auto; background-color: #fff; border-radius: 43px; position: relative;}
.body-bg-white header{ position: fixed; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 80px; padding: 40px 70px 0; box-sizing: border-box; z-index: 100;}
.body-bg-white header .left{ position: relative; width: 100%; max-width: 50px; height: 100%;}
.body-bg-white header nav{ background-color: transparent; width: 100%; float: none; position: fixed; top: 0; bottom: 0; right: 0; left: -230px; margin: auto; visibility: hidden; opacity: 0;  transition: .3s ease-in-out; padding: 0;}
.body-bg-white header nav .nav-list{ position: absolute; top: 0; /*transform: translateY(-50%);*/ display: block; margin: auto 0; left: 0; width: 100%; max-width: 340px; height: 100%; box-sizing: border-box; background-color: #fff;}
.body-bg-white header nav .nav-list > div{ width: calc(100% - 12px); height: calc(100vh - 24px); margin: 12px 0 0 12px; background-color: #000; border-radius: 43px 0 0 43px; position: relative; display: flex; justify-content: center; align-items: center;}
.body-bg-white header nav ul{ list-style: none; width: 100%; overflow: hidden; padding: 0 21px; box-sizing: border-box;}
.body-bg-white header nav ul li{ display: block; margin: 10px 20px; margin: 0 0 0 0; padding: 10px 10px; box-sizing: border-box; opacity: 1 !important; animation-name: none; opacity: 1;}
.body-bg-white header nav ul li:last-child{ border-left: 0px none; border-right: 0px none;}
.body-bg-white header nav ul li.ti{ font-size: 59px; font-weight: bold; text-align: center; color: #fff;}
.body-bg-white header nav ul li a{ display: block; width: 100%; opacity: 1; animation: none; font-size: 25px; color: #fff; position: relative;}
.body-bg-white header nav ul li a::after{ display: block; content: ""; width: 12px; height: 6px; background-image: url(../images/arrow01.png); background-size: 100%; background-repeat: no-repeat; background-position: center center; position: absolute; top: 0; right: 0; bottom: 0; margin: auto;}
.body-bg-white header nav ul li a:hover{ opacity: .6;}
.body-bg-white header nav ul li a:hover::after{ right: -4px;}
.body-bg-white header .btn-trigger{ position: absolute; top: 50%; left: 0; width: 50px; height: 20px; transform: translateY(-50%); cursor: pointer;}
.body-bg-white header .btn-trigger.active{ left: 270px;}
.body-bg-white header .btn-trigger span{ position: absolute; left: 0; width: 100%; height: 4px; background-color: #000; border-radius: 10px;}
.body-bg-white header .btn-trigger, .btn-trigger span{ display: inline-block; transition: all .5s; box-sizing: border-box;}
.body-bg-white header .btn-trigger span:nth-of-type(1){ top: -4px;}
.body-bg-white header .btn-trigger span:nth-of-type(2){ top: 8px;}
.body-bg-white header .btn-trigger span:nth-of-type(3){ bottom: -4px;}
.body-bg-white header #btn.active span:nth-of-type(1){ transform: translateY(12px) rotate(-45deg);}
.body-bg-white header #btn.active span:nth-of-type(2){ left: 50%; opacity: 0; animation: active-btn-bar02 .8s forwards;}
@keyframes active-btn-bar02 {
	100% { height: 0;}
}
.body-bg-white header #btn.active span:nth-of-type(3){ transform: translateY(-12px) rotate(45deg);}
.body-bg-white header .right{ position: relative; width: 100%; max-width: 114px; height: 100%; display: flex; justify-content: space-between; align-items: center;}
.body-bg-white header .right a{ display: block; width: 100%; max-width: 100%; padding: 6px 10px; box-sizing: border-box; border: 1px solid #000; border-radius: 100px; text-align: center; font-size: 14px;}


.mv-area{ width: 100%; height: calc(100lvh - 12px); position: fixed; overflow: hidden;}
.mv-area .logo-box{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.mv-area .logo-box img{ width: 100%; max-width: 680px;}
.body-bg-white > .bottom{ position: fixed; right: 70px; bottom: 40px; margin: auto; width: 57px; height: 16px; z-index: 2;}
.body-bg-white > .bottom p{ font-size: 12px;}


.wrap{ width: 100%; max-width: 1768px; margin: auto; padding: 185px 100px; box-sizing: border-box;}
.purpose-area{ background-color: #e5e5e5; border-radius: 352px 352px 0px 0px; margin-top: calc(100lvh + 70px); z-index: 1; position: relative;}
.purpose-area h2{ font-size: 111px; font-weight: bold; line-height: 1; display: inline-block; position: relative;}
.purpose-area h2 .line{ width: 105%; height: 1px; background-color: #000; margin-top: -10px; position: relative;}
.purpose-area .txt-box{ width: 100%;}
.purpose-area .txt-box.jp{ background-position: left top 40px; padding-top: 60px;}
.purpose-area .txt-box.jp p{ font-size: 24px; font-weight: bold; line-height: 1.8;}
.purpose-area .txt-box.en{ padding-top: 60px;}
.purpose-area .txt-box.en p{ font-size: 18px; font-weight: bold; line-height: 1.8;}

.concept-area{ background-color: #e5e5e5; z-index: 1; position: relative;}
.concept-area::before{ background-color: #fff; position: absolute; top: 0; width: 100%; height: 100%; z-index: 1; content: ""; border-radius: 3500px 0px 0px 0px;}
.concept-area .wrap{ display: flex; justify-content: space-between; align-items: flex-start; z-index: 1; position: relative;}
.concept-area .left{ width: 100%; max-width: 135px;}
.concept-area .right{ width: calc(100% - 135px); padding: 20px 0 0 10px; box-sizing: border-box;}
.concept-area .right h2{ font-size: 38px; font-weight: bold; line-height: 1; display: inline-block; position: relative; display: block;}
.concept-area .txt-box.jp{ padding-top: 60px;}
.concept-area .txt-box.jp p{ font-size: 24px; font-weight: bold; line-height: 1.8;}
.concept-area .right h3{ font-size: 38px; font-weight: bold; line-height: 1; display: inline-block; position: relative; display: block; margin-top: 20px; padding-top: 100px;}
.concept-area .txt-box.en{ padding-top: 60px;}
.concept-area .txt-box.en p{ font-size: 18px; font-weight: bold; line-height: 1.8;}

.business-area{ background-color: #fff; margin-top: 0; z-index: 1; position: relative;}
.business-area .bg{ background-color: #e5e5e5; border-radius: 352px 352px 0px 0px;}
.business-area .wrap h2{ font-size: 111px; font-weight: bold; line-height: 1; display: inline-block; position: relative;}
.business-area .wrap h2 .line{ width: 105%; height: 1px; background-color: #000; margin-top: -10px; position: relative;}
.business-area .wrap ul{ width: 100%; list-style: none; margin-top: 40px;}
.business-area .wrap ul li{ display: block;}
.business-area .wrap ul li:nth-child(even){ margin: 60px 0;}
.business-area .wrap ul li .title-box{ width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.business-area .wrap ul li .title-box span{ display: block; font-size: 100px; font-weight: bold; width: 58px; text-align: center;}
.business-area .wrap ul li .title-box div{ width: auto; padding: 26px 0 0 40px; box-sizing: border-box;}
.business-area .wrap ul li .title-box div h2{ font-size: 34px; font-weight: bold;}
.business-area .wrap ul li .title-box div h3{ font-size: 24px;}
.business-area .wrap ul li .txt-box{ padding: 40px 0 0 98px; box-sizing: border-box;}
.business-area .wrap ul li .txt-box.en{ padding-top: 20px;}
.business-area .wrap ul li .txt-box.jp p{ font-size: 24px; font-weight: bold;}
.business-area .wrap ul li .txt-box.en p{ font-size: 18px; font-weight: bold;}
.business-area .wrap ul li .txt-box a{ display: block; width: 100%; max-width: 114px; padding: 6px 10px; box-sizing: border-box; border: 1px solid #000; border-radius: 100px; text-align: center; font-size: 14px; margin: 20px 0 0;}


footer{ background-color: #e5e5e5; margin-top: 0; z-index: 1; position: relative; text-align: center; padding: 100px 100px 40px; box-sizing: border-box;}
footer a{ display: block; width: 45px; height: 45px; border: 1px solid #000; box-sizing: border-box; background-image: url(../images/tw.png); background-size: 19px; background-repeat: no-repeat; background-position: center center; border-radius: 100px; margin: auto auto auto auto;}
footer .logo-box{ width: 100%; max-width: 100px; margin: 40px auto auto auto;}


.txt-box.jp,
.txt-box.en{ opacity: 0; transition: .8s ease-in-out .5s;}
.txt-box.jp.is-animated,
.txt-box.en.is-animated{ opacity: 1;}
@media screen and (max-width:1340px){
	.purpose-area h2{ font-size: 80px;}
	.concept-area .right h2{ font-size: 30px;}
	.concept-area .right h3{ font-size: 30px;}
	.business-area .wrap h2{ font-size: 80px;}
	.business-area .wrap ul li .title-box span{ font-size: 70px; width: 44px;}
	.business-area .wrap ul li .title-box div h2{ font-size: 30px; line-height: 1.4;}
	.business-area .wrap ul li .title-box div h3{ font-size: 20px;}
	.business-area .wrap ul li .txt-box{ padding: 40px 0 0 84px;}
	.txt-box.jp p{ font-size: 20px !important;}
	.txt-box.en p{ font-size: 16px !important;}
}
@media screen and (max-width:994px){
	.wrap{ padding: 95px 40px 95px 40px;}
	.purpose-area h2{ font-size: 60px;}
	.concept-area .right h2{ font-size: 24px;}
	.concept-area .right h3{ font-size: 24px; padding-top: 60px;}
	.business-area .wrap h2{ font-size: 60px;}
	.business-area .wrap ul li .title-box span{ font-size: 40px; width: 24px;}
	.business-area .wrap ul li .title-box div{ padding: 26px 0 0 14px;}
	.business-area .wrap ul li .title-box div h2{ font-size: 24px; line-height: 1.4;}
	.business-area .wrap ul li .title-box div h3{ font-size: 16px;}
	.business-area .wrap ul li .txt-box{ padding: 40px 0 0 41px;}
	.txt-box.jp p{ font-size: 18px !important;}
	.txt-box.en p{ font-size: 14px !important;}
}
@media screen and (max-width:940px){
	.mv-area .logo-box{ padding: 0 100px; box-sizing: border-box;}
}
@media screen and (max-width:768px){
	.bar-top{ background-color: #000; position: fixed; width: 100%; height: 5px; top: 0; left: 0; margin: auto; z-index: 99;}
	.bar-top::before{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 25px; height: 25px; top: 4px; left: 4px; margin: auto; position: fixed;}
	.bar-top::after{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 25px; height: 25px; top: 4px; right: 4px; margin: auto; position: fixed; transform:rotate(90deg);}
	.bar-left{ background-color: #000; position: fixed; width: 5px; height: 100lvh; top: 0; left: 0; margin: auto; z-index: 99;}
	.bar-right{ background-color: #000; position: fixed; width: 5px; height: 100lvh; top: 0; right: 0; margin: auto; z-index: 99;}
	.bar-bottom{ background-color: #000; position: fixed; width: 100%; height: 5px; bottom: 0; left: 0; margin: auto; z-index: 99;}
	.bar-bottom::before{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 25px; height: 25px; bottom: 4px; left: 4px; margin: auto; position: fixed;transform:rotate(270deg);}
	.bar-bottom::after{ content: ""; background-image: url(../images/r.png); background-size: 100%; width: 25px; height: 25px; bottom: 4px; right: 4px; margin: auto; position: fixed; transform:rotate(180deg);}
	
	.body-bg-white header .btn-trigger{ width: 35px; height: 15px;}
	.body-bg-white header .btn-trigger span{ height: 2px;}
	.body-bg-white header .btn-trigger span:nth-of-type(1){ top: -5px;}
	.body-bg-white header .btn-trigger span:nth-of-type(2){ top: 7px;}
	.body-bg-white header .btn-trigger span:nth-of-type(3){ bottom: -5px;}
	
	.mv-area{ background-position: right 0 top;}
	.body-bg-white header{ padding: 0px 20px 0;}
	.body-bg-white header nav .nav-list{ max-width: 260px;}
	.body-bg-white header nav .nav-list > div{ width: calc(100% - 5px); height: calc(100vh - 10px); margin: 5px 0 0 5px;}
	.body-bg-white header .btn-trigger.active{ z-index: 99;}
	.body-bg-white header nav ul li.ti{ font-size: 24px;}
	.body-bg-white header nav ul li a{ font-size: 16px;}
	.body-bg-white > .bottom{ right: 7px; bottom: 20px;}
	.wrap{ padding: 60px 20px 60px 20px;}
	.purpose-area h2{ font-size: 38px;}
	.purpose-area h2 .line{ margin-top: 3px; width: 100%;}
	.purpose-area .txt-box.jp{ background-size: 100%; padding-top: 40px;}
	.purpose-area .txt-box.en{ padding-top: 40px;}
	.concept-area .left{ max-width: 45px;}
	.concept-area .right{ width: calc(100% - 45px);}
	.concept-area .right h2{ font-size: 24px; line-height: 1.4;}
	.concept-area .right h3{ font-size: 24px;}
	.concept-area .txt-box.jp,
	.concept-area .txt-box.en{ padding-top: 40px;}
	.business-area .wrap{ background-size: 100%;}
	.business-area .wrap h2{ font-size: 38px;}
	.business-area .wrap ul li .title-box{ align-items: flex-start;}
	.business-area .wrap ul li .title-box span{ font-size: 30px; width: 15px;}
	.business-area .wrap ul li .title-box div{ padding: 0 0 0 14px;}
	.business-area .wrap ul li .title-box div h2{ font-size: 24px; line-height: 1.4;}
	.business-area .wrap ul li .title-box div h3{ font-size: 16px;}
	.business-area .wrap ul li .txt-box{ padding: 40px 0 0 26px;}
	.txt-box.jp p{ font-size: 18px !important;}
	.txt-box.en p{ font-size: 14px !important;}
}

/* Company */
.mv-area.contents{ width: 100%; height: 335px; position: fixed; background-image: none; display: flex; justify-content: center; align-items: center;}
.mv-area.contents > div{ width: 100%; max-width: 580px;}
.mv-area.contents > div h1{ font-size: 100px; text-align: center; font-weight: bold;}
.mv-area.contents > div .logo-box{ margin: auto; width: 100px; height: auto; display: block; position: relative;}
.mv-area.contents > div .logo-box img{ width: 100%;}

.company-area{ background-color: #e5e5e5; border-radius: 352px 352px 0px 0px; margin-top: 335px; z-index: 1; position: relative;}
.company-area .wrap{ width: 100%; max-width: 1055px; margin: auto; padding: 185px 100px 0; box-sizing: border-box;}
.company-area th{ font-size: 22px; padding: 40px 10px; box-sizing: border-box; border-top: 1px solid #000; border-bottom: 1px solid #000; width: 200px; text-align: left;}
.company-area td{ font-size: 22px; padding: 40px 10px; box-sizing: border-box; border-top: 1px solid #000; border-bottom: 1px solid #000;}

@media screen and (max-width:940px){
	.mv-area.contents > div .logo-box{ padding: 0 0; box-sizing: border-box;}
}
@media screen and (max-width:768px){
	.mv-area.contents{ height: 245px;}
	.mv-area.contents > div h1{ font-size: 38px;}
	.mv-area.contents > div .logo-box{ width: 60px;}
	
	.company-area{ margin-top: 245px;}
	.company-area .wrap{ padding: 60px 40px 60px 40px;}
	.company-area th{ display: block; width: 100%; border-bottom: 0px none; padding-bottom: 0; font-size: 18px; padding-top: 20px;}
	.company-area td{ display: block; width: 100%; border-top: 0px none; border-bottom: 0px none; padding-top: 0; padding-bottom: 20px; font-size: 16px;}
	.company-area tr:last-child td{ border-bottom: 1px solid #000;}
}