@charset "utf-8";
/* 

CSS page.css
下層各自cssで微調整するときに使用してください。

*/

#mainv.index{ height: 100vh; position: relative; color: #fff; overflow: hidden; }
#mainv.index>.mainbox{position: absolute;top: 0;bottom: 0;right: 0;left: 0;width: 100%;height: 100%;}
#mainv.index>.mainbox .copybox{display: flex;justify-content: flex-end;align-items: flex-start;position: absolute;top: 0;bottom: 0;right: 0;left: 0;width: 100%;height: 100%;z-index: 10;flex-direction: column;padding-bottom: 16vh;padding-left: 12%;padding-right: 12%;}
#mainv.index>.mainbox .copybox .main{border-bottom: 1px solid #fff;margin-bottom: 30px;padding-bottom: 40px;}
#mainv.index>.mainbox .copybox .main .en{margin-bottom: 21px;letter-spacing: 0.1em;}
#mainv.index>.mainbox .copybox .main .jn{font-size: 6.5vh;line-height: 1.5;letter-spacing: 0.2em;}
#mainv.index>.mainbox .copybox .txt{ font-size: 1.8rem; }
#mainv.index .slidebox{ z-index: 5; position: absolute; top: 0;bottom: 0;right: 0;left: 0;width: 100%; height: 100%; }
#mainv.index .slidebox .bg{ height: 100vh; }
#mainv.index .scroll{position: absolute;bottom: calc(300px + 2vh);margin-top: auto;margin-bottom: auto;right: 0;display: flex;align-items: center;z-index: 10;}
#mainv.index .scroll>.inwrap{transform: rotate(90deg);display: inline-block;padding-right: 65px;position: relative;font-size: 1.4rem;line-height: 1;}
#mainv.index .scroll>.inwrap>.txt{ font-size: 1.4rem; }
#mainv.index .scroll>.inwrap>.arr{position: absolute;top: 0;bottom: 0;margin-top: auto;margin-bottom: auto;right: 0;}
#mainv.index .scroll>.inwrap>.arr>svg{position: absolute;bottom: 5px;right: 0;-webkit-animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate; animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;}
@keyframes arrow {
	0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
	100% { -webkit-transform: translate3d(-8px, 0, 0); transform: translate3d(-8px, 0, 0); }
}

#mainv.index .sarabnrlink{ position: absolute; z-index: 15; bottom: 30px; right: 30px; width: 280px; }
#mainv.index .sarabnrlink>.inwrap .mainbox .imgbox{ width: 120px; }

#index.langen #mainv.index>.mainbox .copybox{ padding-bottom: 20vh; }
#index.langen #mainv.index>.mainbox .copybox .main .jn{ font-size: 5.5vh; }
@media screen and (max-width: 1040px){
	#mainv.index>.mainbox .copybox .main .jn{ font-size: 5.5vh; }
	#mainv.index .sarabnrlink{ display: none; }
	#mainv.index .scroll{ top: auto; bottom: 30px; height: 114px; }
	#index.langen #mainv.index>.mainbox .copybox .main .jn{ font-size: 4.5vh; }
}
@media screen and (max-width: 767px){
	#mainv.index>.mainbox .copybox{padding-bottom: 0!important;justify-content: center;padding-top: 50px;padding-left: 8%;padding-right: 8%;}
	#mainv.index>.mainbox .copybox .main{margin-bottom: 20px;padding-bottom: 30px;}
	#mainv.index>.mainbox .copybox .main .en{margin-bottom: 15px;}
	#mainv.index>.mainbox .copybox .main .jn{font-size: 4.5vh;}
	#mainv.index>.mainbox .copybox .txt{ font-size: 1.6rem; }
	#mainv.index .scroll{width: 90px;}
	#index.langen #mainv.index>.mainbox .copybox .main .jn{ font-size: 3.5vh; }
}
@media screen and (max-width: 500px){
	#mainv.index>.mainbox .copybox{ width: 100%; }
	#index.langen #mainv.index>.mainbox .copybox{ width: 90%; }
	#mainv.index>.mainbox .copybox .txt{ font-size: 1.5rem; }
	#mainv.index .scroll>.inwrap{padding-right: 55px;font-size: 1.3rem;}
	#mainv.index .scroll>.inwrap>.txt{ font-size: 1.3rem; }
	#mainv.index .scroll>.inwrap>.arr>svg{bottom: 5px;width: 45px;height: 7px;}
}

#index #sec_1{ padding-top: 120px; padding-bottom: 120px; }
#index #sec_1 .sectitlebox{ margin-bottom: 50px; }
#index #sec_1 .newslist>li:nth-child(4){ display: none; }
@media screen and (max-width: 1040px){
	#index #sec_1{ padding-top: 100px; padding-bottom: 100px; }
	#index #sec_1 .sectitlebox{ margin-bottom: 40px; }
	#index #sec_1 .newslist>li:nth-child(4){ display: block; }
}
@media screen and (max-width: 767px){
	#index #sec_1{ padding-top: 80px; padding-bottom: 60px; }
	#index #sec_1 .newslist>li:nth-child(4){ display: none; }
}
@media screen and (max-width: 500px){
	#index #sec_1 .sectitlebox{ margin-bottom: 35px; }
}

#index #sec_2{display: flex;flex-direction: row-reverse;padding-top: 90px;padding-bottom: 60px;}
#index #sec_2 .txtbox{padding-left: 185px;padding-right: 12%;flex-shrink: 0;width: 56%;background: #f7f7f7; padding-top: 120px; padding-bottom: 120px;}
#index #sec_2 .txtbox .link{ margin-top: 50px; }
#index #sec_2 .imgbox{ background: #002348; position: relative; width: 100%; padding-left: 60px; }
#index #sec_2 .imgbox .imglist{height: calc(100% + 160px);position: absolute;top: -90px;right: 0;width: 92%;}
#index #sec_2 .imgbox .imglist>li{width: 74%;position: absolute;}
#index #sec_2 .imgbox .imglist>li img{ width: 100%; height: 100%; }
#index #sec_2 .imgbox .imglist>li:nth-child(1){right: -90px;top: 0;z-index: 1;height: calc(100% - 180px);}
#index #sec_2 .imgbox .imglist>li:nth-child(2){left: 0;bottom: 0;z-index: 2;height: calc(100% - 180px);}
@media screen and (max-width: 1200px){
	#index #sec_2{display: block;padding-top: 0;padding-bottom: 0;}
	#index #sec_2 .txtbox{padding-left: 8%;padding-right: 8%;width: 100%;padding-top: 80px; padding-bottom: 90px;}
	#index #sec_2 .imgbox{ padding-left: 0; }
	#index #sec_2 .imgbox .imglist{height: auto;position: static;top: 0;display: flex;flex-direction: row;width: 100%;height: 560px;}
	#index #sec_2 .imgbox .imglist>li{width: 50%;position: static;}
	#index #sec_2 .imgbox .imglist>li:nth-child(1){right: 0;height: auto;}
	#index #sec_2 .imgbox .imglist>li:nth-child(2){height: auto;}
}
@media screen and (max-width: 1040px){
	#index #sec_2 .txtbox{padding-bottom: 80px;}
	#index #sec_2 .txtbox .link{ text-align: center; }
	#index #sec_2 .imgbox .imglist{ height: 460px; }
}
@media screen and (max-width: 767px){
	#index #sec_2 .txtbox{padding-top: 70px;padding-bottom: 70px;}
	#index #sec_2 .txtbox .link{ margin-top: 40px; }
	#index #sec_2 .imgbox .imglist{ height: 360px; }
}
@media screen and (max-width: 500px){
	#index #sec_2 .imgbox .imglist{ height: 260px; }
}

#index #sarabnr{padding-top: 95px;padding-bottom: 120px;}
@media screen and (max-width: 767px){
	#index #sarabnr{padding-top: 65px;padding-bottom: 80px;}
}

#index #sec_4{ padding-top: 100px; padding-bottom: 120px; background: #f7f7f7; }
#index #sec_4 .sectitlebox{ text-align: center; }
#index #sec_4 .imgbox{ margin-top: 50px; }
@media screen and (max-width: 767px){
	#index #sec_4{ padding-top: 70px; padding-bottom: 80px; }
	#index #sec_4 .imgbox{ margin-top: 40px; }
}
@media screen and (max-width: 500px){
	#index #sec_4{ padding-bottom: 70px; }
}


#index.langen #sec_2{padding-top: 0; }
@media screen and (max-width: 767px){
}
@media screen and (max-width: 500px){
}



#message #sec_1 .imglist{ display: flex; flex-direction: row; margin-bottom: 60px; }
#message #sec_1 .imglist>li{ width: 33.33%; }
@media screen and (max-width: 1040px){
	#message #sec_1 .imglist{ margin-bottom: 40px; }
}
@media screen and (max-width: 767px){
	#message #sec_1 .imglist{ display: block; }
	#message #sec_1 .imglist>li{ width: 100%; }
}
@media screen and (max-width: 500px){
	#message #sec_1 .imglist{ margin-bottom: 35px; }
}

#message #sec_1 .nametxt{ margin-top: 45px; color: #002348; text-align: right; }
#message #sec_1 .nametxt .name{ font-size: 2.4rem; line-height: 1.6; }
@media screen and (max-width: 767px){
	#message #sec_1 .nametxt .name{ font-size: 2rem; }
}
@media screen and (max-width: 500px){
	#message #sec_1 .nametxt{ margin-top: 35px; }
}




#contact #s1_insec1{ padding-bottom: 110px; }
@media screen and (max-width: 1040px){
	#contact #s1_insec1{ padding-bottom: 80px; }
}
@media screen and (max-width: 767px){
	#contact #s1_insec1{ padding-bottom: 70px; }
}
@media screen and (max-width: 500px){
	#contact #s1_insec1{ padding-bottom: 60px; }
}

#contact #s1_insec2{ background: #f7f7f7; padding-top: 70px; padding-bottom: 115px; }
#contact #s1_insec2 .list{ text-align: center; }
#contact #s1_insec2 form ul.formlist{ margin-top: 55px; }
@media screen and (max-width: 1040px){
	#contact #s1_insec2{ padding-bottom: 80px; }
	#contact #s1_insec2 .list{ text-align: left; }
	#contact #s1_insec2 form ul.formlist{ margin-top: 40px; }
}
@media screen and (max-width: 767px){
	#contact #s1_insec2{ padding-bottom: 70px; padding-top: 60px; }
}
@media screen and (max-width: 500px){
}

#contact #sec_2{ padding-top: 110px; padding-bottom: 115px; }
#contact #sec_2 .box1{ text-align: center; color: #002348; margin-top: 35px; }
#contact #sec_2 .box1 .link>a{ display: inline-block; font-size: 3.6rem; line-height: 1; }
#contact #sec_2 .box1 .link svg{width: 32px;height: 32px;margin-right: 10px;vertical-align: -4px;}
@media screen and (max-width: 1040px){
	#contact #sec_2{ padding-top: 70px; padding-bottom: 80px; }
}
@media screen and (max-width: 767px){
	#contact #sec_2{ padding-bottom: 70px; }
	#contact #sec_2 .box1 .link>a{ font-size: 3rem; }
	#contact #sec_2 .box1 .link svg{width: 28px;height: 28px;}
}
@media screen and (max-width: 500px){
	#contact #sec_2{ padding-top: 60px; padding-bottom: 60px; }
}

#contact #sec_3{ padding-top: 110px; padding-bottom: 125px; background: #f7f7f7; }
#contact #sec_3 .box1{ border: 1px solid #191919; background: #fff; padding: 50px 8%; margin-top: 60px; }
#contact #sec_3 .box1 .list{ margin-top: 30px; }
#contact #sec_3 .box1 .list>li:not(:last-child){ margin-bottom: 10px; }
#contact #sec_3 .box1 .list>li>a>dl{ margin-left: -15px; display: inline-block; }
#contact #sec_3 .box1 .list>li>a>dl>dt{display: inline-block;vertical-align: middle;margin-left: 15px;margin-bottom: 5px;width: 300px;}
#contact #sec_3 .box1 .list>li>a>dl>dd{ display: inline-block; vertical-align: middle; margin-left: 15px; margin-bottom: 5px; }
@media screen and (max-width: 1040px){
	#contact #sec_3{ padding-top: 80px; padding-bottom: 90px; }
}
@media screen and (max-width: 767px){
	#contact #sec_3{ padding-bottom: 80px; }
	#contact #sec_3 .box1{ margin-top: 40px; padding: 30px 8%; }
	#contact #sec_3 .box1 .list{ text-align: center; margin-top: 20px; }
	#contact #sec_3 .box1 .list>li:not(:last-child){ margin-bottom: 15px; }
	#contact #sec_3 .box1 .list>li>a>dl{ margin-left: 0; display: block; }
	#contact #sec_3 .box1 .list>li>a>dl>dt{display: block;margin-left: 0;width: 100%;}
	#contact #sec_3 .box1 .list>li>a>dl>dd{ display: block; margin-left: 0; }
}
@media screen and (max-width: 500px){
}


#privacy #sec_1 .list{ margin-top: 60px; }
#privacy #sec_1 .list>li:not(:last-child) { margin-bottom: 40px; }
#privacy #sec_1 .list2>li:not(:last-child) { margin-bottom: 20px; }
#privacy #sec_1 .list3>li { margin-top: 20px; }
#privacy #sec_1 .list h4{ font-weight: normal; }
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) {
	#privacy #sec_1 .list{ margin-top: 40px; }
	#privacy #sec_1 .list>li:not(:last-child) { margin-bottom: 35px; }
}
@media screen and (max-width: 500px) {
}


#company #sec_1 .list>li>dl{ display: flex; flex-direction: row; }
#company #sec_1 .list>li>dl>dt{background: #19395a;color: #fff;border-bottom: 1px solid #fff;flex-shrink: 0;width: 45%;display: flex; align-items: center;justify-content: center;}
#company #sec_1 .list>li>dl>dt,
#company #sec_1 .list>li>dl>dd{padding: 31px 8%;text-align: center;}
#company #sec_1 .list>li>dl>dd{  border-bottom: 1px solid #002348; width: 100%; }
#company #sec_1 .list>li:first-child>dl>dt{ border-top: 1px solid #fff;  }
#company #sec_1 .list>li:first-child>dl>dd{ border-top: 1px solid #002348; }
@media screen and (max-width: 1040px) {
	#company #sec_1 .list>li>dl>dt,
	#company #sec_1 .list>li>dl>dd{padding: 20px 8%;}
}
@media screen and (max-width: 767px) {
	#company #sec_1 .list>li>dl>dt,
	#company #sec_1 .list>li>dl>dd{text-align: left;}
	#company #sec_1 .list>li>dl>dt{ width: 40%; display: block; }
}
@media screen and (max-width: 500px) {
	#company #sec_1 .list>li>dl>dt{ width: 36%; }
	#company #sec_1 .list>li>dl>dt,
	#company #sec_1 .list>li>dl>dd{padding: 15px 7%;}
}

#company #sec_2 .list{ border-top: 1px solid #002348; }
#company #sec_2 .list>li{ border-bottom: 1px solid #002348; padding: 30px 8%;  }
#company #sec_2 .list>li>dl{ display: flex; flex-direction: row; }
#company #sec_2 .list>li>dl>dt{ flex-shrink: 0; width: 26%; padding-right: 20px; }
#company #sec_2 .list>li>dl>dd{ width: 100%; }
@media screen and (max-width: 1040px) {
	#company #sec_2 .list>li{ padding: 20px 8%;  }
}
@media screen and (max-width: 767px) {
	#company #sec_2 .list>li{ padding: 20px 15px;  }
	#company #sec_2 .list>li>dl>dt{ width: 30%; }
}
@media screen and (max-width: 500px) {
	#company #sec_2 .list>li{ padding: 18px 15px;  }
	#company #sec_2 .list>li>dl>dt{ width: 34%; }
}

#company #sec_3 .list>li:not(:last-child){ margin-bottom: 10px; }
#company #sec_3 .list>li>dl{ display: flex; flex-direction: row; }
#company #sec_3 .list>li>dl>dt{flex-shrink: 0;background: #19395a;color: #fff;line-height: 1.4;padding: 14px 20px 12px;width: 315px;display: flex;align-items: center;justify-content: center;}
#company #sec_3 .list>li>dl>dd{ width: 100%; padding-left: 40px; display: flex; align-items: center; }
#company #sec_3 .map{ margin-top: 60px; }
@media screen and (max-width: 1040px) {
	#company #sec_3 .list>li:not(:last-child){ margin-bottom: 18px; }
	#company #sec_3 .list>li>dl{ display: block; text-align: center; }
	#company #sec_3 .list>li>dl>dt{padding: 14px 20px 12px;width: 100%;display: block; margin-bottom: 10px;}
	#company #sec_3 .list>li>dl>dd{ padding-left: 0; display: block;}
	#company #sec_3 .map{ margin-top: 40px; }
	#company #sec_3 .map iframe{ height: 400px; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 500px) {
	#company #sec_3 .map{ margin-top: 33px; }
	#company #sec_3 .list>li>dl>dd{ text-align: left; }
	#company #sec_3 .map iframe{ height: 300px; }
}


#business.index #sec_1 .copy{ padding-bottom: 30px; }
@media screen and (max-width: 1040px) {
	#business.index #sec_1 .copy{ padding-bottom: 20px; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 500px) {
	#business.index #sec_1 .copy{ padding-bottom: 15px; }
}

#business.index #sec_2 .borderbox{ background: #fff; text-align: center; padding-left: 40px; padding-right: 40px; }
#business.index #sec_2 .txt{ font-size: 2.4rem; margin-top: 25px; margin-bottom: 50px; }
#business.index #sec_2 .imglist{ display: flex; flex-direction: row; }
#business.index #sec_2 .imglist>li{ width: 33.33%; }
@media screen and (max-width: 1040px) {
	#business.index #sec_2 .borderbox{ text-align: left; }
	#business.index #sec_2 .txt{ font-size: 2rem; text-align: center; }
}
@media screen and (max-width: 767px) {
	#business.index #sec_2 .txt{ font-size: 1.8rem; margin-bottom: 40px; }
	#business.index #sec_2 .imglist{ display: block; }
	#business.index #sec_2 .imglist>li{ width: 100%; }
}
@media screen and (max-width: 500px) {
	#business.index #sec_2 .borderbox{ padding-left: 30px; padding-right: 30px; }
	#business.index #sec_2 .txt{ font-size: 1.6rem; }
}

#business.index #sec_3 .sectitlebox{ padding-bottom: 30px; }
#business.index.langen #sec_3 .sectitlebox{ padding-bottom: 0; }
@media screen and (max-width: 1040px) {
}
@media screen and (max-width: 767px) {
	#business.index #sec_3 .sectitlebox{ padding-bottom: 20px; }
}
@media screen and (max-width: 500px) {
	#business.index #sec_3 .sectitlebox{ padding-bottom: 15px; }
}

#business.sara #sec_2 .list>li:not(:last-child){ margin-bottom: 20px; }
#business.sara #sec_2 .list>li { display: flex; flex-direction: row; padding: 50px 8%; background: #fff; border: 1px solid #002348; }
#business.sara #sec_2 .list>li .titlebox{ flex-shrink: 0; width: 40%; margin-right: 4%; display: flex; justify-content: center; flex-direction: column; color: #002348; }
#business.sara #sec_2 .list>li .titlebox .txt{ font-size: 2.4rem; }
#business.sara #sec_2 .list>li .titlebox .txt2{ font-size: 1.8rem; }
#business.sara #sec_2 .list>li .txtbox{ width: 100%; }
@media screen and (max-width: 1040px) {
	#business.sara #sec_2 .list>li { display: block; padding: 40px 8%; }
	#business.sara #sec_2 .list>li .titlebox{ width: 100%; margin-right: 0%; margin-bottom: 30px; display: block; text-align: center; }
}
@media screen and (max-width: 767px) {
	#business.sara #sec_2 .list>li .titlebox{ margin-bottom: 25px; }
	#business.sara #sec_2 .list>li .titlebox .txt{ font-size: 2rem; margin-bottom: 5px; }
	#business.sara #sec_2 .list>li .titlebox .txt2{ font-size: 1.6rem; line-height: 1.8; }
}
@media screen and (max-width: 500px) {
}

#business.sara #sec_2+.copy{ margin-top: 140px; margin-bottom: 0; }
@media screen and (max-width: 1040px) {
	#business.sara #sec_2+.copy{ margin-top: 80px; }
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 500px) {
	#business.sara #sec_2+.copy{ margin-top: 60px; }
	#business.sara #sec_2+.copy{ font-size: 2rem; }
}