@charset "UTF-8";

@media print, screen and (min-width:1200px) {

#kvWrap {
position: relative;
width: 100%;
}

#kvCopyWrap {
position: relative;
width: 100%;
padding-top: 190px;
padding-bottom: 60px;
}

#kvCopyWrap h1 {
position: relative;
width: 75%;
text-align: left;
line-height: 1.5;
padding: 0 60px;
z-index: 2;
}

#kvCopyWrap h1 span {
font-size: 2rem;
font-weight: 700;
text-align: left;
display: block;
margin-top: 25px;
padding: 0 10px;
line-height: 1.7;
}

#kvCopyWrap #kvImg {
position: absolute;
width: 32%;
z-index: 2;
bottom: -2px;
right: 20px;
}

#jMap {
position: absolute;
width: 30%;
z-index: 1;
top: 160px;
right: 17%;
}

#jMapBg {
position: absolute;
width: 65%;
z-index: 0;
top: 100px;
right: 20px;
}

.colorWrap {
position: relative;
width: 100%;
height: 5px;
display: flex;
justify-content: space-between;
z-index: 1;
}

.colorWrap div {
width: 10%;
height: 5px;
}

#kvSp {
display: none;
}

#kv {
position: relative;
width: 100%;
height: 800px;
overflow: hidden;
}

.kvImg {
z-index:10;
opacity: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-image: url(../img/kv01.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
bottom: 0;
-webkit-animation: anime 36s 0s infinite;
animation: anime 36s 0s infinite;
}

.kvImg:nth-of-type(2) {
background-image: url(../img/kv02.jpg);
-webkit-animation-delay: 6s;
animation-delay: 6s; }

.kvImg:nth-of-type(3) {
background-image: url(../img/kv03.jpg);
-webkit-animation-delay: 12s;
animation-delay: 12s; }

.kvImg:nth-of-type(4) {
background-image: url(../img/kv04.jpg);
-webkit-animation-delay: 18s;
animation-delay: 18s; }

.kvImg:nth-of-type(5) {
background-image: url(../img/kv05.jpg);
-webkit-animation-delay: 24s;
animation-delay: 24s; }

.kvImg:nth-of-type(6) {
background-image: url(../img/kv06.jpg);
-webkit-animation-delay: 30s;
animation-delay: 30s; }

@keyframes anime {
0% {
opacity: 0;
transform: scale(1);
}
8% {
opacity: 1;
}
16% {
opacity: 1;
}
24% {
opacity: 0;
transform: scale(1.2);
z-index: 9;
}
100% { opacity: 0 }
}

#indexAbout {
position: relative;
background: #fff url("../img/svg_about.svg") no-repeat center 1600px;
background-size: 480px;
width: 1200px;
text-align: center;
margin: 0 auto;
margin-top: -100px;
padding: 80px 100px 120px;
z-index: 20;
}

#aboutRoof {
width: 100%;
margin-top: 30px;
margin-bottom: 80px;
}

#aboutPhoto {
margin-bottom: 100px;
}

#aboutPhoto img {
border-radius: 20px;
}

#indexAbout .title {
font-size: 4rem;
font-weight: 700;
text-align: left;
color: var(--themeColor);
margin: 0 0 0 auto;
writing-mode: vertical-rl;
}

#indexAboutTxt {
font-size: 2rem;
font-weight: 700;
text-align: left;
margin: 0 auto;
margin-bottom: 80px;
writing-mode: vertical-rl;
line-height: 2.5;
}

#parentheses {
position: relative;
top: -14px;
}

#aboutImg {
position: absolute;
width: 200px;
left: -50px;
bottom: -1px;
}

.commonFlex {
width: 100%;
display: flex;
justify-content: space-between;
}

.wrapColor {
position: relative;
/*background-color: #f1f1f1;*/
background-color: #F0F9FD;
width: 100%;
overflow: hidden;
}

.wrap {
position: relative;
width: 1200px;
text-align: left;
margin: 0 auto;
padding: 130px 0;
overflow: hidden;
}

.commonTitleCe {
position: relative;
font-family: var(--font-primary);
font-size: 4.2rem;
font-weight: 700;
text-align: center;
color: var(--themeColor);
margin-bottom: 80px;
padding-bottom: 25px;
line-height: 1.3;
z-index: 1;
}

.commonTitleCe::after {
position: absolute;
background-color: var(--themeColor);
width: 60px;
height: 5px;
content: "";
margin: auto;
left: 0;
right: 0;
bottom: 0;
}

.commonTitleL {
position: relative;
font-family: var(--font-primary);
font-size: 4.2rem;
font-weight: 700;
text-align: left;
color: var(--themeColor);
margin: 0 auto;
margin-bottom: 80px;
padding-bottom: 25px;
line-height: 1.3;
z-index: 1;
}

.commonTitleL::after {
position: absolute;
background-color: var(--themeColor);
width: 60px;
height: 5px;
content: "";
margin: auto;
left: 0;
bottom: 0;
}

.commonSubTitle {
position: relative;
font-family: var(--font-primary);
font-size: 3.2rem;
font-weight: 700;
text-align: center;
color: var(--themeColor);
margin: 0 auto;
margin-bottom: 40px;
line-height: 1.3;
z-index: 1;
}

#enArea {
position: absolute;
width: 400px;
margin: auto;
z-index: 0;
right: 10px;
top: 130px;
}

#enQa {
position: absolute;
width: 320px;
margin: auto;
z-index: 0;
left: 10px;
top: -20px;
}

#enCompany {
position: absolute;
width: 700px;
margin: auto;
left: 0;
right: 0;
top: 120px;
}

#enContact {
position: absolute;
width: 650px;
margin: auto;
z-index: 0;
left: 0;
right: 0;
top: 120px;
}

#areaL {
width: 760px;
text-align: justify;
}

#areaPhoto {
margin-bottom: 40px;
}

#areaPhoto img {
border-radius: 20px;
}

#areaL h3 {
font-size: 2rem;
font-weight: 700;
color: var(--themeColor);
margin-bottom: 30px;
}

#areaL h4 {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
}

.areaCircleFlex {
margin: 60px auto;
margin-bottom: 60px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

.areaCircleWrap {
width: 250px;
font-size: 1.4rem;
text-align: center;
margin-right: 5px;
}

.areaCircleWrap:nth-of-type(3n) {
margin-right: 0;
}

.areaCircle {
background-color: #fff;
width: 230px;
height: 230px;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
border-radius: 230px;
border: 2px solid var(--themeColor);
line-height: 1.6;
}

.areaCircle a {
padding: 55px 20px;
display: block;
}

.comingSoon {
background-color: #fff;
width: 230px;
height: 230px;
font-size: 1.4rem;
font-weight: 700;
color: #999;
text-align: center;
margin: 0 auto;
margin-bottom: 5px;
border-radius: 230px;
border: 2px solid #ccc;
line-height: 220px;
}

#areaR {
width: auto;
text-align: left;
}

#areaImg {
position: absolute;
width: 280px;
right: 0;
bottom: -1px;
}

#indexQaWrap {
position: relative;
width: 1200px;
margin: 0 auto;
padding: 130px 0;
display: flex;
justify-content: space-between;
}

#qaL {
position: relative;
width: auto;
text-align: left;
}

#qaImg {
position: absolute;
width: 380px;
left: 0;
bottom: -1px;
}

#qaR {
width: 750px;
text-align: justify;
}

.tabWrap {
margin-bottom: 30px;
display: flex;
justify-content: center;
border-bottom: 1px solid var(--themeColor);
}

.tabWrap li {
background-color: var(--themeColor);
width: 300px;
font-weight: 700;
text-align: center;
color: #fff;
margin: 0 3px;
padding: 10px 13px;
cursor: pointer;
border-left: 1px solid var(--themeColor);
border-top: 1px solid var(--themeColor);
border-right: 1px solid var(--themeColor);
}

.tabWrap li.select {
background-color: #fff;
color: var(--themeColor);
}

.accordion {
width: 100%;
text-align: justify;
margin: 0 auto;
}

.accordion ul {
margin: 0 auto;
padding: 0;
}

.accordion li {
position: relative;
background-color: #fff;
width: 100%;
margin-bottom: 30px;
border: 1px solid #ddd;
transition: .3s;
}

.accordion li p:last-child {
margin-bottom: 0;
}

.accordion li h2,
.accordion li h3 {
position: relative;
font-size: 1.6rem;
font-weight: 700;
}

.accordion li h2 .q,
.accordion li h3 .q {
position: relative;
font-family: var(--font-barlow);
font-size: 3.2rem;
font-weight: 700;
margin-right: 10px;
line-height: 1;
top: 4px;
}

.accordion a {
position: relative;
color: var(--themeColor);
display: block;
text-decoration: none;
cursor: pointer;
padding: 20px 76px 28px 34px;
transition: .3s;
}

.accordion li .accordion_icon {
display: inline-block;
transition: all .3s;
box-sizing: border-box;
}

.accordion li .accordion_icon {
position: absolute;
width: 20px;
height: 20px;
margin: auto;
top: 14px;
bottom: 0;
right: 34px;
}

.accordion li .accordion_icon span {
position: absolute;
width: 100%;
height: 2px;
background-color: var(--themeColor);
}

.accordion li .accordion_icon span:nth-of-type(1) {
transform: rotate(0deg);
}

.accordion li .accordion_icon span:nth-of-type(2) {
transform: rotate(90deg);
}

.accordion li .accordion_icon.active span:nth-of-type(1) {
display:none;
}

.accordion li .accordion_icon.active span:nth-of-type(2) {
transform: rotate(180deg);
}

.toggle dt {
float: left;
font-family: var(--font-barlow);
font-size: 3.2rem;
font-weight: 700;
line-height: 1.2;
}

.toggle dd {
padding: 7px 0 3px 44px;
}

.qaDetail {
color: var(--txtColor);
display: none;
padding: 0 34px 34px;
overflow: hidden;
}

.qaDetail dt {
float: left;
font-family: var(--font-barlow);
font-size: 3.2rem;
font-weight: 700;
color: var(--themeColor);
line-height: 1;
}

.qaDetail dd {
padding: 0 0 0 44px;
}

.qaDetail dd p {
margin-bottom: 0;
}

#contactBtnWrap {
background-color: #FCFCEE;
width: 100%;
font-size: 1.8rem;
font-weight: 700;
text-align: center;
padding: 60px 50px;
border: 1px solid #ddd;
}

#contactBtnFlex {
width: 100%;
display: flex;
justify-content: space-between;
}

#btnConsultationWide,
#btnAffiliationWide {
width: 49%;
height: 120px;
font-size: 1.9rem;
font-weight: 700;
color: #fff;
margin: 20px 0;
padding-bottom: 5px;
cursor: pointer;
border-radius: 100px;
line-height: 114px;
transition: .3s;
}

#btnConsultationWide i,
#btnAffiliationWide i {
position: relative;
font-size: 3rem;
margin-right: 10px;
top: 3px;
}

#btnConsultationWide {
background-color: var(--themeColor);
border: 2px solid var(--themeColor);
}

#btnConsultationWide:hover {
background-color: #fff;
color: var(--themeColor);
}

#btnAffiliationWide {
background-color: #EA9800;
border: 2px solid #EA9800;
}

#btnAffiliationWide:hover {
background-color: #fff;
color: #EA9800;
}

/**/

.commonSubTitle {
font-size: 2.6rem;
margin-bottom: 30px;
}

#btnUchinobankin {
background-color: var(--themeColor);
width: 420px;
height: 100px;
font-size: 2rem;
font-weight: 700;
color: #fff;
margin-top: 10px;
padding-bottom: 8px;
cursor: pointer;
border: 2px solid var(--themeColor);
border-radius: 100px;
transition: .3s;
}

#btnUchinobankin i {
position: relative;
font-size: 3rem;
margin-right: 10px;
top: 3px;
}

#btnUchinobankin:hover {
background-color: #fff;
color: var(--themeColor);
}

#companyImg01 {
position: absolute;
width: 250px;
left: 0;
bottom: -1px;
}

#companyImg02 {
position: absolute;
width: 250px;
right: 0;
bottom: -1px;
}

/**/

footer {
position: relative;
background-color: #F0F9FD;
width: 100%;
font-size: 1.4rem;
text-align: center;
padding: 120px 30px;
}

#footerLogo {
width: 220px;
margin: 0 auto;
margin-bottom: 40px;
}

footer .globalNav ul {
position: relative;
width: auto;
margin-bottom: 50px;
display: flex;
justify-content: center;
white-space: nowrap;
}

footer .globalNav ul li {
text-align: center;
margin: 0 30px;
}

footer .globalNav ul li a {
position: relative;
font-size: 1.5rem;
font-weight: 700;
color: var(--txtColor);
text-decoration: none;
margin: 0;
padding: 0;
line-height: 1;
}

footer .globalNav ul li a::before {
position: absolute;
background-color: var(--themeColor);
content: "";
width: 20px;
height: 2px;
margin: auto;
bottom: -6px;
left: 0;
right: 0;
}

footer .globalNav ul li a::after {
position: absolute;
background-color: var(--themeColor);
content: "";
width: 100%;
height: 2px;
bottom: -6px;
left: 0;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

footer .globalNav ul li a:hover::after {
transform: scale(1, 1);
}

#footerFollowUs {
font-family: var(--font-barlow);
font-size: 1.6rem;
font-weight: 700;
color: var(--themeColor);
margin-top: 40px;
margin-bottom: 10px;
line-height: 1;
}

#snsNavF ul {
width: 100%;
display: flex;
justify-content: center;
line-height: 1;
}

#snsNavF li {
margin: 0 10px;
}

#snsNavF li a {
font-size: 3.2rem;
color: var(--themeColor);
}

#copyRight {
position: relative;
background-color: #000;
background-color: var(--themeColor);
font-size: 1.3rem;
font-weight: 600;
color: #fff;
margin: auto;
padding: 20px;
letter-spacing: 0;
line-height: 1;
}

#pagetop {
position: fixed;
background-color: var(--themeColor);
width: 80px;
height: 80px;
bottom: -80px;
right: 0;
transition: .3s;
z-index: 1010;
}

#pagetop::before {
position: absolute;
width: 10px;
height: 10px;
content: "";
margin: auto;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
transform: rotate(-45deg);
left: 0;
right: 0;
top: 0;
bottom: 0;
}

}