@charset "UTF-8";

@media print, screen and (max-width:1199px) {

#kvWrap {
position: relative;
width: 100%;
padding-top: 110px;
}

#kvCopyWrap {
display: none;
}

#kvCopyWrap h1 {
display: none;
}

#kvCopyWrap #kvImg {
display: none;
}

#jMap {
display: none;
}

#jMapBg {
display: none;
}

#kvSp {
width: 90%;
margin: 0 auto;
padding-bottom: 40px;
}

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

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

#kv {
position: relative;
width: 100%;
height: 320px;
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 36%;
background-size: 250px;
width: 94%;
text-align: center;
margin: 0 auto;
margin-top: -50px;
padding: 40px 30px 30px;
z-index: 20;
}

#aboutRoof {
width: 100%;
margin-bottom: 40px;
}

#aboutPhoto {
margin-bottom: 30px;
}

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

#indexAbout .title {
position: relative;
font-size: 2.7rem;
font-weight: 700;
text-align: center;
color: var(--themeColor);
margin-bottom: 40px;
padding-bottom: 20px;
line-height: 1.3;
z-index: 1;
}

#indexAbout .title::after {
position: absolute;
background-color: var(--themeColor);
width: 40px;
height: 4px;
content: "";
margin: auto;
left: 0;
right: 0;
bottom: 0;
}

#indexAboutTxt {
font-size: 1.5rem;
font-weight: 700;
text-align: left;
margin: 0 auto;
padding-bottom: 130px;
}

#aboutImg {
position: absolute;
width: 110px;
margin: auto;
left: 20px;
bottom: -1px;
}

.commonFlex {
width: 100%;
}

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

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

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

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

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

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

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

#enArea {
position: absolute;
width: 190px;
margin: auto;
z-index: 0;
left: 0;
top: 60px;
}

#enQa {
position: absolute;
width: 140px;
margin: auto;
z-index: 0;
left: 0;
top: 60px;
}

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

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

#areaL {
width: 100%;
text-align: justify;
}

#areaPhoto {
margin-bottom: 30px;
}

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

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

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

.areaCircleFlex {
margin: 40px auto;
margin-bottom: 60px;
}

.areaCircleWrap {
width: 250px;
font-size: 1.4rem;
text-align: center;
margin: 0 auto;
margin-bottom: 20px;
}

.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: 20px;
border-radius: 230px;
border: 2px solid #ccc;
line-height: 220px;
}

#areaR {
width: 100%;
text-align: left;
}

#areaImg {
position: absolute;
width: 150px;
right: 20px;
bottom: -1px;
}

#indexQaWrap {
position: relative;
width: 88%;
margin: 0 auto;
padding: 60px 0 150px;
}

#qaL {
width: 100%;
text-align: left;
}

#qaImg {
position: absolute;
width: 200px;
left: 20px;
bottom: -1px;
}

#qaR {
width: 100%;
text-align: justify;
}

.tabWrap {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border-bottom: 1px solid var(--themeColor);
}

.tabWrap li {
background-color: var(--themeColor);
width: 49.5%;
font-weight: 700;
text-align: center;
color: #fff;
padding: 10px;
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: 20px;
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.4rem;
font-weight: 700;
line-height: 1.5;
}

.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 60px 28px 20px;
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: 20px;
}

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

/*
.accordion a:hover .accordion_icon span{
background-color: #fff;
}
*/

.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: 2.8rem;
font-weight: 700;
line-height: 1;
}

.toggle dd {
padding: 0 0 0 34px;
}

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

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

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

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

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

#contactBtnFlex {
width: 100%;
}

#btnConsultationWide,
#btnAffiliationWide {
width: 100%;
height: 100px;
font-size: 1.6rem;
font-weight: 700;
color: #fff;
margin: 10px auto;
padding: 22px 10px 5px;
cursor: pointer;
border-radius: 100px;
display: block;
line-height: 1.6;
}

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

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

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

/**/

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

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

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

#companyImg01 {
position: absolute;
width: 120px;
left: 20px;
bottom: -1px;
}

#companyImg02 {
position: absolute;
width: 120px;
right: 20px;
bottom: -1px;
}

/**/

footer {
position: relative;
background-color: #F0F9FD;
width: 100%;
padding: 60px 10px;
}

#footerL {
position: relative;
width: auto;
font-size: 1.3rem;
font-weight: 700;
text-align: center;
margin: 0 auto;
}

#footerL a {
color: var(--themeColor);
}

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

footer .globalNav ul {
position: relative;
width: auto;
margin-bottom: 40px;
white-space: nowrap;
}

footer .globalNav ul li {
text-align: center;
margin-bottom: 15px;
}

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

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

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

#snsNavF li {
margin: 0 8px;
}

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

#copyRight {
position: relative;
background-color: var(--themeColor);
font-family: var(--font-barlow);
font-size: 1.1rem;
font-weight: 600;
color: #fff;
margin: auto;
padding: 10px;
letter-spacing: 0;
}

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

#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;
}

.orderBox { 
display: flex;
flex-direction: column;
}

.order1 { order: 1; }
.order2 { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }
.order5 { order: 5; }

.alignright,
.alignleft,
.aligncente {
display: block;
margin: 0 auto;
margin-bottom: 30px;
}

}