@charset "UTF-8";
/*
Theme Name: Water One Holdings - ウォーターワンホールディングス株式会社
Theme URI: https://juita.co.jp
Description: ウォーターワンホールディングス株式会社 ベーステーマ
Author: Juita Inc.
Author URI: https://juita.co.jp
Version: 1.20231202
*/
/*
1.1 fonts
1.2 reset
1.3 common (header, effect, footer)
1.4 index top
2.1 page
2.2 responsive
*/
/****************
1.1 fonts
*****************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
.ti-fnt{font-family:'A-OTF A1明朝 Std', A1明朝, 'Zen Old Mincho','A1 Mincho', 'Noto Serif JP', serif;letter-spacing: 10px;font-weight: 500;}
/****************
1.2 reset
*****************/
*{font-family: 'Noto Serif JP', serif;}
html,
body {margin: 0px;margin-bottom: 0px;margin-right: auto;margin-left: auto;font-size: 1rem;color: #222;line-height: 2em;-webkit-font-smoothing: antialiased;letter-spacing: 1px; background: #f1f7fa;scroll-behavior: smooth;}
article,aside,details,figcaption,figure,footer,header,hgroup,
menu,nav,section {display: block;margin: 0px;padding: 0px;}
p,td,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4 {margin: 0px;padding: 0px;list-style: none;}
table , td, th {border-collapse: collapse;}
img {border: 0px; font-size: 0; line-height: 0;vertical-align:bottom; max-width: 100%;transition: 0.5s;height: inherit;}
input,textarea{border-radius: 0;}
a,img {transition: 0.5s;text-decoration: none;color: var(--color-base);}
a:hover{color:var(--color-red);transition: 0.5s;}
a:hover img {opacity: 0.7;filter: alpha(opacity=70);-ms-filter: "alpha(opacity=70)";transition: 0.5s;}
.left{float: left}
.right{float: right;}
.pc{display: inline-block;}
.sp{display: none;}
.center{text-align: center;}
/****************
1.3 common
*****************/
:root {
--color-base: #0f2a4d;
--color-white: #ffffff;
--color-black: #000000;
--color-red: #b52125;
--color-blue:#3abec1;
}
::selection{background-color: #c0c2f3;}
/*header nav*/
header{position: fixed;left: 0;top: 0;background: var(--color-white);float: left;width: 140px; height: 100vh;z-index: 9;}
nav{position: relative;height: 100%;}
nav .cpy{-ms-writing-mode: tb-rl; writing-mode: vertical-rl;position: absolute;bottom: 50px;left: 35%;color: var(--color-base);font-size: 13px;letter-spacing: 3px;}
.nav-toggle{width: 25px;height: 20px;position: relative;top: 30px;left: 50%;transform: translateX(-50%);padding: 10px; cursor: pointer;z-index: 9;-webkit-transition: opacity .25s ease 0s;transition: opacity .25s ease 0s;}
.nav-toggle:hover{opacity: .7;}
.nav-toggle.active .top{background: var(--color-white);-webkit-transform: translateY(17px) translateX(0) rotate(45deg);transform: translateY(17px) translateX(0) rotate(45deg);}
.nav-toggle.active .middle{opacity: 0;background: var(--color-white);}
.nav-toggle.active .bottom{background: var(--color-white);-webkit-transform: translateY(-13px) translateX(0) rotate(-45deg);transform: translateY(-13px) translateX(0) rotate(-45deg);}
.nav-toggle span{width: 100%;height: 2px;background: var(--color-base);position: absolute;top: 4px;left: 0;cursor: pointer;-webkit-transition: all .35s ease 0s;transition: all .35s ease 0s;}
.nav-toggle span:nth-of-type(2){top: 19px;}
.nav-toggle span:nth-of-type(3){top: 34px;}
.navbar{height: 100%;width: 100%;background: #183963;position: fixed;top: 0;left: 0;opacity: 0;overflow: hidden;visibility: hidden;z-index: 1;-webkit-transition: all .35s ease 0s;transition: all .35s ease 0s;}
.navbar.open{width: 100%;opacity: 1;visibility: visible;}
.navbar.open li{-webkit-animation: load .5s ease forwards;animation: load .5s ease forwards;-webkit-animation-delay: 0.35s;animation-delay: 0.35s;}
.navbar.open li:nth-of-type(2){-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
.navbar.open li:nth-of-type(3){-webkit-animation-delay: 0.45s;animation-delay: 0.45s;}
.navbar.open li:nth-of-type(4){-webkit-animation-delay: 0.50s;animation-delay: 0.50s;}
.navbar .nav{z-index: 9;height: 0%;width: 100%; font-size: 20px;font-weight: 400;line-height: 2em; text-align: center;position: absolute;top: 23%;-webkit-transform: translateY(-20%);transform: translateY(-20%);}
.navbar ul{display: inline-block;height: 100%;padding: 0;margin: 0 auto;list-style: none;position: relative;}
.navbar ul li{display: block;height: 25%;min-height: 50px;position: relative;opacity: 0;padding: 20px 0;}
.navbar ul li a{display: block;position: relative;color: var(--color-white);text-decoration: none;overflow: hidden;}
.navbar ul li a:after{content: "";width: 0;height: 1px;background: var(--color-white);position: absolute;bottom: 5px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);-webkit-transition: 0.35s;transition: 0.35s;}
.navbar ul li a:hover:after,
.navbar ul li a:focus:after,
.navbar ul li a:active:after{width: 100%;}
.navfixed {position: fixed;width: 100%;height: 100%;}
#navbar{position: fixed; top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;}
.mainContent{position: relative;margin: 0 0 0 140px;z-index: 2;}
.warpInner{width: 80%;margin: 0 auto;}
.mainLogo{width: 130px;position: absolute;top: 30px;left: 40px;z-index: 9;}
.invert{filter: brightness(0) invert(1);}
/*footer*/
.footer{padding: 100px 0 40px;background: var(--color-white);}
.footer .footerContent{display: flex;justify-content: space-between;-webkit-flex-direction: row-reverse;flex-direction: row-reverse;font-size: .9rem;}
.footer .footerAddress{width: 55%; display: flex;justify-content: space-between;}
.footer .footerLogo{width: 15%;}
.footer .footerCp{width: 80%;}
.footer .footerContent .ti{font-weight: 700;}
.footer .nav{width: 42%;}
.footer .nav ul{display: flex;flex-wrap: wrap;justify-content: flex-end;}
.footer .nav li{margin: 0 20px 10px;}
.footer a{color:var(--color-black);}
.footer a:hover{color:var(--color-red);}
.footer .copyright{margin: 100px auto 0;text-align: center;font-size: .65rem;}
.footer .page-scroll {font-size: 0.7rem;font-weight: 200; position: fixed;bottom: -18rem;right: 1rem;opacity: 0;transition: all .4s ease-out;z-index: 9997;mix-blend-mode: difference;}
.footer .page-scroll a {color:  var(--color-white);padding-top: 5rem;writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;letter-spacing: 3px;position: relative;transition: all .2s ease-out;}
.footer .page-scroll a:before {content: "";width: 1px;height: 4rem;background: var(--color-white);margin-left: -1px;position: absolute;top: 0;left: 50%;display: block;transition: all .2s ease-out;display: block;}
_:lang(x)::-ms-backdrop,.footer .page-scroll a {color:  var(--color-black);}
_:lang(x)::-ms-backdrop,.footer .page-scroll a:before {background:  var(--color-black);margin-left: 0;}
_:-ms-lang(x)::backdrop,.footer .page-scroll a {color:  var(--color-black);}
_:-ms-lang(x)::backdrop,.footer .page-scroll a:before {background: var(--color-black);}
.footer .is-scroll {bottom: 1.5rem;opacity: 1}
.btn{font-size: 1.2rem;}
.btn a {background: transparent;padding: 15px 100px;border: 1px solid var(--color-base);position: relative;z-index: 1;transition: .2s;}
.btn a::before {content: "";width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: -1;background: var(--color-base);transform-origin: 100% 50%;transform: scaleX(0);transition: transform ease .2s;}
.btn a:hover {color: var(--color-white);}
.btn a:hover::before {transform-origin: 0% 50%;transform: scaleX(1);}
.icon-ar{width: 25px;height: 15px;position: absolute;right: 30px;top: 50%;transform: translateY(-50%);transition: .2s;}
.btn-arrow{background: var(--color-base);-webkit-mask: url(../img/btn-arrow.svg) no-repeat center;mask: url(../img/btn-arrow.svg) no-repeat center;transition: .2s;}
a:hover .btn-arrow{background: var(--color-white);transition: .2s;}
.btn.nolink p{color:#bbb;border: 1px solid #bbb;padding: 10px 0;width: 100%;display: block;font-size: .9rem;}
/*effect*/
body::after {content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:var(--color-base);z-index: 9999;pointer-events: none;opacity: 0;-webkit-transition: opacity .8s ease;transition: opacity .8s ease;}
body.fade::after {opacity: 1;}
@-webkit-keyframes load{0%{opacity: 0;left: -20%;}100%{opacity: 1;left: 0;}}
@keyframes load{0%{opacity: 0;left: -20%;}100%{opacity: 1;left: 0;}}
@-webkit-keyframes bounce {
55% {transform: translate3d(-40%, -50%, 0);}
70% {transform: translate3d(15%, -50%, 0);}
80% {transform: translate3d(-10%, -50%, 0);}
85% {transform: translate3d(5%, -50%, 0);}
}
@keyframes bounce {
55% {transform: translate3d(-40%, -50%, 0);}
70% {transform: translate3d(15%, -50%, 0);}
80% {transform: translate3d(-10%, -50%, 0);}
85% {transform: translate3d(5%, -50%, 0);}
}
.intro{width: 100%;height: 100vh;position: fixed;top: 0;left: 0; z-index: 9999;background: #dadce8;}
.drop {position: absolute;z-index: 99999; transform-origin: 50% 50%;transform: translate(-50%, -50%);width: 50vmin;height: 50vmin;border-radius: 50%;filter: blur(1vmin);box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;border: 0 solid #DADCE8;-webkit-animation: expand 4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation: expand 4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;}
@-webkit-keyframes expand {
0% {width: 0;height: 0;box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
border: 0 solid rgba(218, 220, 232, 0.5);}
5% {box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;border: 2vmin solid rgba(218, 220, 232, 0.5);}
90% {box-shadow: none;border: 2vmin solid rgba(218, 220, 232, 0.5);}
100% {width: 100vmin;height: 100vmin;box-shadow: none;border: 0 solid rgba(218, 220, 232, 0.5);}
}
@keyframes expand {
0% {width: 0;height: 0;box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
border: 0 solid rgba(218, 220, 232, 0.5);}
5% {box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;border: 2vmin solid rgba(218, 220, 232, 0.5);}
90% {box-shadow: none;border: 2vmin solid rgba(218, 220, 232, 0.5);}
100% {width: 100vmin;height: 100vmin;box-shadow: none;border: 0 solid rgba(218, 220, 232, 0.5);}
}
.drop:before {content: "";position: absolute;margin: auto;left: 0;top: 0;right: 0;bottom: 0;width: 0%;height: 0%;border-radius: 50%;-webkit-animation: expand1 4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation: expand1 4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;}
@-webkit-keyframes expand1 {
0% {width: 0%;height: 0%;box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
border: 0 solid #DADCE8;}
20% {box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;}
100% {width: 60%;height: 60%;box-shadow: none;border: 1vmin solid #DADCE8;}
}
@keyframes expand1 {
0% {width: 0%;height: 0%;box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;border: 0 solid #DADCE8;}
20% {box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;}
100% {width: 60%;height: 60%;box-shadow: none;border: 1vmin solid #DADCE8;}
}
.fade-text {display: block;color: transparent;-webkit-background-clip: text;background-size: 300% 300%;}
.fade-text.to__right {background-position: left 100% center;transform: translate(0, 0);}
.fade-text.to__right.wh{background-image: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0) 60%);}
.fade-text.to__right.base{background-image: linear-gradient(to right, #0f2a4d 30%, rgba(15, 42, 77, 0) 60%);}
.fade-text.to__right.blk{background-image: linear-gradient(to right, #222222 30%, rgba(34, 34, 34, 0) 60%);}
.fade-text.slow{transition: all 2.4s ease-out;}
.fade-text.fast{transition: all 1.5s ease-out;}
.fade-text.to__right.reveal {transform: translate(0, 0);background-position: left 0% center;}
.txt_set{display: inline-block;opacity: 0;-webkit-filter: blur(3px);filter: blur(3px);-webkit-transform: scale(3);transform: scale(3);}
.txt_set.on{-webkit-filter: blur(3px);filter: blur(3px);opacity: 1;-webkit-transform: scale(1);transform: scale(1);-webkit-transition: all 0.5s ease() 0.2s;transition: all 0.5s ease() 0.2s;}
.img-container{overflow: hidden;position: relative;}
.img-container__img{display: block;opacity: 0;position: relative;transition:all .5s .3s ease;z-index: 0;}
.img-container:before{background:var(--color-base);content: '';display: block;height: 100%;position: absolute;transform: translateX(-100%);transition:all .8s 0s ease;width: 100%;z-index: 1;}
.text-container{padding:0;}
.text-container__title{display: inline-block;overflow: hidden;position: relative;z-index: 0;}
.text-container__title:before{background: var(--color-base);content: '';display: block;height: 101%;position: absolute;transform: translateX(-101%);transition:all .8s .3s ease;width: 100%;z-index: 1;}
.text-container__title__inner{display: inline-block;opacity: 0;transition: all .8s .5s ease;}
.text-container__text{left: -50px;opacity: 0;position: relative;transition: all .5s .5s ease;}
.img-container.active img{opacity: 1;}
.img-container.active:before{transform: translateX(100%);}
.text-container.active .text-container__title:before{transform: translateX(101%);}
.text-container.active .text-container__title__inner{opacity: 1;}
.text-container.active .text-container__text{left: 0;opacity: 1;}
.fdin {animation: fadein 1.5s forwards;}
@keyframes fadein {0% {opacity: 0}100% {opacity: 1}}
.videobg{width: 100%;height: 100vh;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: -1;background: #183963;}
.videobg video{width: 105%;height: 100vh;opacity: .9;object-fit: cover;mix-blend-mode: color-burn;}


/****************************
1.4 index top
*****************************/
.topmainVisual{position: relative;}
.topmainVisual .img{overflow: hidden;position: relative; width: 100%;height: 100vh;background: url(../img/mainvisual-bg.webp) center 0 no-repeat;background-size: cover;}
.topmainVisual .img img{object-fit: cover;width: 100%;}
.topmainVisual .mainVisualTitle{position: absolute;bottom: 23%;color: var(--color-white);letter-spacing: 5px;line-height: 1.5;}
.topmainVisual .mainVisualTitle h1{font-weight: 400;font-size: 5rem;text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);}
.topmainVisual .mainVisualTitle p{font-size: 1.7rem;margin: 40px 0 0;text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5);font-weight: 300;}
.topMaintext{padding: 0 0 100px;color: var(--color-white); position: relative;}
.topMaintext .swiper{top: -130px;left: 0;}
.topMaintext .swiper-wrapper {-webkit-transition-timing-function: linear !important;transition-timing-function: linear !important;}
.topMaintext .topMaintextTitle{font-size: 2rem;font-weight: 400;line-height: 2.5;letter-spacing: 5px;margin: -50px 0 0;}
.topMaintext .btns{margin: 65px 0 0 75px;}
.topMaintext .btns a {color:var(--color-white); display: inline-block;position: relative;height: 60px;width: 60px;box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);border-radius: 50%;}
.topMaintext .btns a:hover .arrow {-webkit-animation: bounce 0.5s forwards;animation: bounce 0.5s forwards;}
.topMaintext .btns a:hover .line:nth-of-type(1):before {transform: rotate(135deg);}
.topMaintext .btns a:hover .line:nth-of-type(2):before {transform: rotate(-135deg);}
.topMaintext .btns .line {position: absolute;height: 50%;left: 0;right: 0;overflow: hidden;}
.topMaintext .btns .line:before {content: "";box-sizing: border-box;position: absolute;left: 0;right: 0;height: 200%;border: 1px solid transparent;border-radius: 50%;border-left-color: var(--color-white);transition: .3s cubic-bezier(0.5, 0.07, 0.25, 1);}
.topMaintext .btns .line:nth-of-type(1) {top: 0;}
.topMaintext .btns .line:nth-of-type(1):before {top: 0;border-bottom-color: var(--color-white);transform: rotate(-5deg);}
.topMaintext .btns .line:nth-of-type(2) {bottom: 0;}
.topMaintext .btns .line:nth-of-type(2):before {bottom: 0;border-top-color: var(--color-white);transform: rotate(5deg);}
.topMaintext .btns .arrow {position: absolute;top: 50%;height: 1px;background: var(--color-white);left: 30%;right: 30%;transform: translateY(-50%);}
.topMaintext .btns .arrow:before {content: "";position: absolute;right: -1px;width: 65%;top: 1px;padding-bottom: 65%;border-top: 1px solid var(--color-white);border-right: 1px solid var(--color-white);transform-origin: top right;transform: rotate(45deg);}
.topMaintext .btns .tx{font-style: normal;position: absolute;left: -70px;top: 50%;transform: translateY(-50%);}
.topBusiness{padding: 100px 0;background: url(../img/topbusiness-bg.webp) center 0 no-repeat;background-size: cover;}
.topBusiness .topBusinessTitle{display: flex;justify-content: flex-start;color: var(--color-base);}
.topBusiness .topBusinessTitle .topBusinessTitlemain{margin: 0 50px 0 0;}
.topBusiness .topBusinessTitle .topBusinessTitlemain h2{font-size: 8rem;line-height: 1.4;}
.topBusiness .topBusinessTitle .topBusinessTitlemain p{font-size: 1.8rem;margin: 5px 0 0;}
.topBusiness .topBusinessTitle .topBusinessTitlesub{padding: 85px 0 0;}
.topBusiness ul{display: flex;justify-content: space-between;margin: 100px 0 60px;}
.topBusiness li{width: 31.5%;}
.topBusiness .btn{text-align: center;}
.topCompany{padding: 130px 0;background: url(../img/topcompany-bg.webp) center 0 no-repeat;background-size: cover;color: var(--color-white);}
.topCompany .topCompanyTitle{margin: 0 0 80px;}
.topCompany .topCompanyTitle h2{font-size: 8rem;line-height: 1.4;}
.topCompany .topCompanyTitle p{font-size: 1.8rem;margin: 5px 0 0;}
.topCompany .btn{margin: 80px 0 0;}
.topCompany .btn a{border: 1px solid var(--color-white);color:var(--color-white);}
.topCompany .btn .btn-arrow{background: var(--color-white);}
.topCompany .btn a::before{background: var(--color-white);}
.topCompany .btn a:hover{color:var(--color-base);}
.topCompany .btn a:hover .btn-arrow{background: var(--color-base);}

/****************************
2.1 page
*****************************/
.pagemainVisual{overflow: hidden;padding: 6% 0;color:var(--color-base);position: relative;}
.pagemainVisual .mainVisualTitle{padding: 20% 0 15%;position: relative;z-index: 3;}
.pagemainVisual .mainVisualTitle h1{margin: 0 0 30px;display:flex;align-items: center;}
.pagemainVisual .mainVisualTitle h1 .ti-fnt{letter-spacing: 2px;font-size: 1.8rem;line-height: 1.4;}
.pagemainVisual .mainVisualTitle h1 .tisub{font-weight: 300;font-size: 55%;margin: 10px 0 0 20px;}
.pagemainVisual .mv-bg{position: absolute;right: 0;top: 0;width: 60%;}
.pagemainVisual .mv-clip{position: absolute;top: 0;right: 0;z-index: 2;}
.pagemainVisual .shadow{position: relative;right: -130px;top: 45px;}
.page{ background: url(../img/mainvisual-bg.webp) #f1f7fa center 0 no-repeat;background-size: 100%;}
/*about page*/
.aboutCpy{padding:40px 0;}
.aboutCpy h2{text-align: center;color:var(--color-base);font-weight: 400;margin: 0 auto 60px;font-size: 1.8rem;}
.aboutCpy .ctn{margin: 20px auto 0;line-height: 4;width: 450px;}
.aboutMessage{padding:60px 0;}
.aboutMessage h2{text-align: center;color:var(--color-base);font-weight: 400;margin: 0 auto 60px;font-size: 1.8rem;}
.aboutMessage h2 span{font-size: 1.4rem;margin: 15px 0 0;display: block;}
.aboutMessage .ctn{margin: 80px auto 40px;display: flex;justify-content: space-between;}
.aboutMessage .aboutMessagetxt{width: 52%;}
.aboutMessage .ti{font-size: 1.3rem;line-height: 1.8;margin: 0 0 20px;}
.aboutMessage p{margin: 0 0 30px;line-height: 2.4;}
.aboutMessage .img{width: 42%; text-align: center;}
/*business page*/
.businessCpy{padding: 40px 0;display: flex;justify-content: space-between;flex-wrap: wrap;box-sizing:border-box;}
.businessCpy .service{background: var(--color-white);width: 48.5%;margin: 0 0 30px;padding: 0 0 30px; display:flex;flex-direction:column;box-sizing:border-box;}
.businessCpy .img{position: relative;}
.businessCpy .img .inimg{overflow: hidden;width: 100%;position: relative;padding: 27% 0;}
.businessCpy .img .inimg img{object-fit: cover;height: 130%;position: absolute;top: 50%;transform: translateY(-45%);}
.businessCpy .img .ttl{position: absolute;padding: 15px 15px 10px;bottom: 0;right: 0;left: 0;margin: 0 auto;font-size: .9rem; text-align: right;line-height: 1.6;color:var(--color-white);background: url(../img/business-txbg.png) 0 0 repeat-x;background-size: contain;}
.businessCpy .txt{padding: 25px 70px 20px;flex-grow:1;}
.businessCpy .ti{font-size: 1.2rem; font-weight: 600;text-align: center;margin: 0 0 15px;}
.businessCpy .srv{padding: 15px 25px 0;margin: 15px 0 0;border-top: 1px solid #111;}
.businessCpy .btn{margin: 0 auto;display: block;text-align: center;width: 75%;}
.businessCpy .btn a{padding: 10px 0;width: 100%;display: block;font-size: .9rem;}
/*company page*/
.companyCtn{padding: 10px 0 60px;}
.companyCtn .inr{padding: 50px;background: var(--color-white);margin: 30px auto 0;border-radius: 25px;width: 65%;}
.companyCtn .ti{color:var(--color-base);font-size: 1.2rem;padding: 0 0 20px;margin: 20px 0;position: relative;border-bottom: 1px solid #dae6ec;}
.companyCtn .ti:before{content: "";display: block; position: absolute;left: 0;bottom: -1px;height: 1px;background: var(--color-base);width: 110px;}
.companyCtn table{width: 100%;}
.companyCtn th,.companyCtn td{font-weight: normal;text-align: left;padding: 6px 0;font-size: .9rem;line-height: 2.4;vertical-align: top;}
.companyCtn th{width: 20%;}
.companyCtn td{width: auto;}
/*policy page*/
.policyCtn{padding: 16% 0 40px;}
.policyCtn .inr{padding: 40px 10%;}
.policyCtn .policyCtnTitle{text-align: center;color:var(--color-base);margin: 0 0 60px;}
.policyCtn h1{font-weight: 500;font-size: 1.3rem;}
.policyCtn h1 span{display: block;font-size: 80%;margin: 5px 0 0;}
.policyCtn .subCtn{font-size: .88rem;text-align: justify;margin: 0 0 20px;}
.policyCtn .tisub{text-align: center;font-weight: 700;font-size: 1rem;padding: 20px 0;margin: 20px 0;border-bottom: 1px solid var(--color-black);}
.policyCtn p{margin: 0 0 15px;}
.policyCtn .tis{font-weight: 700;margin: 0 0 2px;}
/*privacy page*/
.privacyCtn{padding: 16% 0 40px;}
.privacyCtn .inr{padding: 40px 10%;}
.privacyCtn .privacyCtnTitle{text-align: center;color:var(--color-base);margin: 0 0 60px;}
.privacyCtn h1{font-weight: 500;font-size: 1.3rem;}
.privacyCtn h1 span{display: block;font-size: 80%;margin: 5px 0 0;}
.privacyCtn .subCtn{font-size: .88rem;text-align: justify;margin: 0 0 20px;}
.privacyCtn .tx{margin: 0 0 15px;}
.privacyCtn .tis{font-weight: 700;margin: 0 0 2px;}
.privacyCtn ol{counter-reset :item;padding: 0 0 0 30px;}
.privacyCtn li{position: relative;}
.privacyCtn li:before{content:"（"counters(item, ".") "）";counter-increment:item;position: absolute;left: -35px;}
.privacyCtn ol ol{padding: 0 0 0 65px;}
.privacyCtn li li:before{left: -55px;}
/*404 page*/
.e404{padding: 10% 0;}
.e404 .inr{padding: 100px 10% 0;}
.e404 .e404Title{text-align: center;color:var(--color-base);margin: 0 0 60px;}
.e404 h1{font-weight: 500;font-size: 1.3rem;}
.e404 h1 span{display: block;font-size: 80%;margin: 5px 0 0;}
.e404 .btn{margin: 30px 0 0;display: inline-block;text-decoration: underline;}

/*contact page*/
.contactCtn{padding: 10px 0 100px;width: 800px;margin: 0 auto;}
.contactCtn table{width: 100%;}
.contactCtn th,
.contactCtn td{font-weight: normal;text-align: left;padding: 5px 0;vertical-align: top;font-size: .9rem;position: relative;}
.contactCtn th{width: 35%;}
.contactCtn .req:after{content: "必須";position: absolute;right: 20px; top: 20px;font-size: .6rem;line-height: 1; padding: 3px 5px;border-radius: 20px; background: var(--color-black);color:var(--color-white);}
.contactCtn td a{padding: 10px 0;margin: 10px 0;text-decoration: underline;display: inline-block;font-size: .8rem;}
/*.contactCtn input[type="text"],.contactCtn input[type="email"],.contactCtn textarea{background: var(--color-white);}*/
.contactCtn :placeholder-shown{background: transparent;}
.contactCtn :focus{background: var(--color-white);}
.contactCtn input[type="text"]:focus,
.contactCtn input[type="email"]:focus,
.contactCtn textarea:focus{outline: none;}
.contactCtn input[type="text"],
.contactCtn input[type="email"],
.contactCtn textarea{width: 96%;-webkit-appearance: none;border: none;padding: 10px;border-bottom: 1px solid var(--color-base);}
.contactCtn textarea{height: 80px;resize: vertical;}
.contactCtn .wrn{font-size: .8rem;color:#333333;line-height:1.6;margin: 15px 0;font-weight: 200;padding: 25px 25px 15px;border: 1px solid #ccc; border-radius: 6px;margin: 40px auto 0;}
.contactCtn .wrn p{margin: 0 0 10px;}
.contactCtn label{cursor: pointer;vertical-align: middle;}
.contactCtn label input{margin: 0 5px 0 0;}
.contactCtn .send{text-align: center;margin: 20px auto 10px;width: 42%;position: relative;}
.contactCtn .send .btns{font-size: 1rem; display:inline-block;vertical-align:middle;padding:15px 0;width: 100%; color:var(--color-white);letter-spacing:1px;text-decoration:none;background:var(--color-base);border:1px solid var(--color-base);cursor:pointer;transition-duration:0.3s;-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;-ms-transition-duration:0.3s;} 
.contactCtn .send .btns:hover{color:var(--color-white);background:var(--color-blue);border: 1px solid var(--color-blue);}
.contactCtn .send .btn-arrow{background: var(--color-white);}
.contactCtn .send .btns.submit-btn[disabled] {background-color: #bbbbbb;border: 1px solid #bbbbbb; cursor: not-allowed;}
.wpcf7 .wpcf7-radio .wpcf7-list-item { display: block; }
.wpcf7 .screen-reader-response{display: none;}
.wpcf7-not-valid-tip {color: #ff0000;font-size: .75rem;display: block;}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {text-align: center;margin: 15px auto;padding: 5px;background: #fff1f1;color:#ff0000;border: 2px solid #ff0000 !important;}
.wpcf7-form.sent .wpcf7-response-output {text-align: center;margin: 15px auto;padding: 5px;background: #008f6f;color:#ffffff;border: 2px solid #008f6f;}
.wpcf7 form.spam .wpcf7-response-output{background: #fff1f1;color:#ff0000;border: 2px solid #ff0000 !important;text-align: center;}

/****************************
2.2 responsive
*****************************/
/*PCビュー：1,280px～　タブレットビュー：768px～　スマホビュー：～767px*/
/*****************************************************************
タブレットビュー
******************************************************************/
@media screen and (max-width: 1280px) {
/****************
common
*****************/
.sp{display: block;}
.pc{display: none;}
header{width: 8vw;}
.mainContent{margin: 0 0 0 8vw;}
.warpInner{width: 90%;}
nav .cpy{bottom: 12vw;left: 30%;}
.mainLogo{width: 9vw;}
.mainLogo.pc{display: inline-block;}
.mainLogo.sp{display: none;}
.footer .footerContent{display: block;}
.footer .nav{width: 100%;}
.footer .nav ul{justify-content: flex-start;margin: 0 0 7vw;}
.footer .nav li{margin: 0 4vw 2vw 0;}
.footer .footerAddress{width: 100%;}
.footer .page-scroll{right: 4.5vw;bottom: 6vw;}
.footer .copyright{margin: 10vw auto 0;}
/****************************
page
*****************************/
/*top page*/
.topmainVisual .img{height: 60vh;}
.topmainVisual .mainVisualTitle h1{font-size: 3rem;}
.topmainVisual .mainVisualTitle p{font-size: 1rem;margin: 2vw 0 0;}
.swiper-slide{height: auto;}
.topMaintext .swiper{top: -8.5vw;}
.topMaintext .topMaintextTitle,
.topBusiness .topBusinessTitle .topBusinessTitlemain p,
.topCompany .topCompanyTitle p{font-size: 1.5rem;margin: 0;}
.topBusiness .topBusinessTitle .topBusinessTitlemain h2,
.topCompany .topCompanyTitle h2{font-size: 5rem;}
.topBusiness .topBusinessTitle{display: block;}
.topBusiness .topBusinessTitle .topBusinessTitlesub{padding: 4vw 0 0;}
.topBusiness ul{margin: 10vw 0;}
.topBusiness li{width: 32.5%;}
.topCompany .topCompanyTitle{margin: 0 0 4vw;}
.topBusiness{padding: 10vw 0;}
.topCompany{padding: 10vw 0;background-position: right -100px center;}
.topCompany .btn{margin: 15vw 0 0;text-align: center;}
/*about page*/
.pagemainVisual{padding: 16% 0;}
.pagemainVisual .mainVisualTitle{padding: 3vw;margin: 12vw 0 0;background-color: rgb(255, 255, 255,0.7);display: inline-block;border-radius: 4px;}
.pagemainVisual .mainVisualTitle h1 .tisub{font-size: 1rem;}
.pagemainVisual .mainVisualTitle h1{margin: 0 0 1.5vw;}
.pagemainVisual .mainVisualTitle p{font-size: .9rem;line-height: 1.6;}
.pagemainVisual .mv-bg{width: 78%;}
.aboutCpy .ctn{width: 100%;}
.aboutMessage .ctn{display: block;}
.aboutMessage .aboutMessagetxt{width: 100%;}
.aboutMessage .img{width: 40%;text-align: left;}
/*business page*/
.businessCpy .txt{padding: 2vw;}
.businessCpy .txt p{font-size: .82rem;letter-spacing: 1px;text-align: justify;}
.businessCpy .txt .ti{text-align: center;}
.businessCpy .img .inimg{padding: 15vw 0;}
/*company & contact page*/
.companyCtn .inr{padding: 4vw;width: 90%;}
.companyCtn th, .companyCtn td{padding: .8vw 0;line-height: 1.8;}
.companyCtn th{width: 25%;}
.contactCtn{width: 100%;padding: 4vw 0;}
/*policy & privacy page*/
.policyCtn .inr,
.privacyCtn .inr{padding: 8vw 0 4vw;}
}
/*****************************************************************
landscape
******************************************************************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.topmainVisual .img{height: 80vh;}
}
/*****************************************************************
スマホビュー
******************************************************************/
@media screen and (max-width: 767px) {
/****************
common
*****************/
header,nav{background: #fff;height: 18vw;width: 100%;}
.nav-toggle{top: 4.5vw;left: 100%;transform: translateX(-145%);}
nav .cpy{display: none;}
.mainLogo{top: 1.8vw;left: 5vw;width: 13vw;}
.mainLogo.sp{display: block;}
.mainLogo.pc{display: none;}
.mainContent{margin: 18vw 0 0;}
.pagemainVisual {padding: 16% 0 4%;}
.footer .nav ul{display: block;text-align: center;}
.footer .nav li{margin: 0;}
.footer .nav li a{display: block;padding: 1vw 0;}
.footer .copyright{font-size: .5rem;}
.footer .footerAddress{display: block;text-align: center;margin: 10vw 0;}
.footer .footerLogo,
.footer .footerCp{width: 100%;font-size: .85rem;margin: 2vw 0;}
.footer .footerLogo img{width: 25%;margin: 0}
.footer .page-scroll{right: 8vw;}
/****************************
page
*****************************/
/*top page*/
.topmainVisual .img{height: 55vh;}
.topmainVisual .mainVisualTitle{width: 70%;}
.topmainVisual .mainVisualTitle h1{font-weight: 500; font-size: 1.8rem;letter-spacing: 1px;text-shadow: 0px 4px 6px rgba(0, 0, 0, 1);}
.topmainVisual .mainVisualTitle p{font-weight: 600; font-size: .93rem;letter-spacing: 1px;text-shadow: 0px 4px 6px rgba(0, 0, 0, 1);}
.topMaintext .topMaintextTitle,
.topBusiness .topBusinessTitle .topBusinessTitlemain p,
.topCompany .topCompanyTitle p{font-size: 1.2rem;}
.topBusiness ul{display: block;}
.topBusiness li{width: 90%;margin: 0 auto 3vw;}
.topBusiness .topBusinessTitle .topBusinessTitlemain h2,
.topCompany .topCompanyTitle h2{font-size: 2.8rem;}
/*about page*/
.pagemainVisual .mv-bg{width: 100%;}
.pagemainVisual .mainVisualTitle{padding: 4.2vw;width: 90%;display: block; margin: 45vw auto 0;background-color: rgb(255, 255, 255,0.9);}
.pagemainVisual .mainVisualTitle h1 .tisub{display: block;padding: 0;margin: 3vw 3vw 0;}
.aboutMessage .aboutMessagetxt{font-size: .9.5rem;}
.aboutCpy .ctn{line-height: 3;}
.aboutMessage .img{width: 100%;}
/*business page*/
.businessCpy{display: block;}
.businessCpy .service{width: 100%;margin: 0 auto 6vw;}
.businessCpy .img .inimg {padding: 25vw 0;}
.businessCpy .txt{padding: 5vw;}
.businessCpy .txt p{font-size: .95rem;}
/*company page*/
.companyCtn .inr{padding: 0;background: none;width: 100%;}
.companyCtn table{padding: 4vw;margin: 0 auto 6vw;background: var(--color-white);display: block;}
.companyCtn th{font-weight: 600;padding: 0;}
.companyCtn th,.companyCtn td{width: 100%;display: block;}
.companyCtn td{padding: 1vw 0 2vw;margin: 0 0 2vw;border-bottom: 1px dotted #ddd;}
.companyCtn .ti{margin: 10vw 0 0;padding: 0 0 1vw;}
.companyCtn .ti:before{width: 100%;}
/*contact page*/
.contactCtn{margin: 0;padding: 10vw 0 15vw;}
.contactCtn th,.contactCtn td{width: 100%;display: block;}
.contactCtn th{border-bottom: 1px solid #dddddd;padding: 1vw 0;font-weight: 600;}
.contactCtn td{margin: 0 0 3.5vw;padding: 0 0 2vw;}
.contactCtn .send{width: 75%;}
.contactCtn input[type="text"], .contactCtn textarea{font-size: .9rem;padding: 2vw 0;width: 100%;}
.contactCtn .prv th{border: none;}
.contactCtn .prv td{text-align: center;}
}