@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text&family=Montserrat&family=Noto+Sans+JP:wght@400;500&display=swap');

@media screen and (min-width: 821px) {
（ここにPC用スタイルを記述）
}
@media screen and (max-width: 820px) {
（ここにモバイル用スタイルを記述）
}

html {
font-size: 62.5%;
}
@media screen and (max-width: 820px) {
    html {
    /*font-size: calc(1000vw / 375);*/
    }
}
body{
font-family: 'Noto Sans JP', sans-serif;
color: #222222;
font-size: 15px;
font-size: 1.5rem;
line-height: 2.0;
letter-spacing: 0.1em;
width: 100%;
max-width: 100%;
}
main{
width: 100%;
overflow-x: hidden !important;
}
main::-webkit-scrollbar{
display: none;
}
@media screen and (min-width: 821px) {
    .nonePC{
    display: none;
    }
}
@media screen and (max-width: 820px) {
    body{
    line-height: 1.6;
    }
    main img{
    width: 100%;
    }
    .noneSP{
    display: none;
    }
}
h2,
h3,
h4{
line-height: normal;
}

/* ========================
header
======================== */
#header{}
#header{
padding: 25px 0;
overflow: hidden;
/*font-size: clamp(14px, 1vw, 16px);*/
}

@media screen and (min-width: 1250px) {
    .checkbox,
    .span-container,
    .acd-check,
    .acd-content{
    display: none;
    }
    #header{
    width:90%;
    margin: 0 auto;
    font-size: 14px;
    font-size: 1.4rem;
    }
    #header h1{
    width:260px;
    float: left;
    }
    #header nav{
    width: calc(100% - 260px);
    float: right;
    }
    #header nav{
    margin-top: 5px;
    text-align: right;
    line-height: 1.4;
    }
    #header nav a{
    display: inline-block;
    margin-left:14px;
    vertical-align: middle;
    color: #139987;
    transition: color .3s;
    }
    #header nav a:hover{
    color: #00d9bc;
    } 
    #header nav label:nth-of-type(11) a{  
    position: fixed;
    right: 0;
    top:calc(50% - 190px/2);
    padding: 40px 20px;
    background-color: #149988;
    z-index: 3;
    color: #ffffff;
    writing-mode: vertical-rl;
    transition: all .5s;
    }
    #header nav label:nth-of-type(11) a:hover{  
    background-color: #00d9bc;
    }
}
@media screen and (max-width: 1500px) {
    #header{
    padding: 25px 20px;
    width: 100%;
    }
}
@media screen and (max-width: 1251px) {
    #header{
    padding: 20px 20px;
    }
    #header h1 img{
    width:200px;
    }
    #header nav .noneSP{
    display: none;
    }
}

/* ========================
footer
======================== */
#footer{}
#footer{
margin-top: 100px;
}
#footer #js-pagetop {
position: fixed;
width: 46px;
height: 46px;
border-radius: 50%;
background: #139987;
bottom: 50px;
right: 50px;
cursor: pointer;
transition: 1s;
z-index: 3;
}
#footer #js-pagetop:hover {
background: #00d9bc;
}
#footer #js-pagetop span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-size: 1.2rem;
letter-spacing:0.025em;
line-height: 1.2;
color: #ffffff;
}
#footer #js-pagetop:hover {
transform: scale(1.5);
}
#footer hr{
border: 0;
height: 0;
margin: 0;
padding: 0;
border-top: 2px #84d6d7 solid;
}
#footer #footerIn{
padding: 40px 0;
overflow: hidden;
}
#footer #footerIn address,
#footer #footerIn ul{
margin-top: 10px;
}
#footer #footerIn ul li a:hover{
color: #00d9bc;
}
@media screen and (min-width: 821px) {
    #footer #footerIn{
    width: 1120px;
    margin: 0 auto;
    font-size: 14px;
    font-size: 1.4rem;
    }
    #footer #footerIn p:nth-of-type(1),
    #footer #footerIn address,
    #footer #footerIn ul,
    #footer #footerIn p:nth-of-type(2){
    float: left;
    }
    #footer #footerIn p:nth-of-type(1){width: 30%;}
    #footer #footerIn address{width:47%;}
    #footer #footerIn ul{width: 15%;}
    #footer #footerIn p:nth-of-type(2){
    width: 8%;
    position: relative;
    top: -10px;
    }
}
@media screen and (max-width: 820px) {
    #footer{
    margin-top:40px;
    }
    #footer #js-pagetop {
    bottom: 20px;
    right: 20px;
    }
    #footer #footerIn{
    text-align: center;
    }
    #footer #footerIn p:nth-of-type(2){
    margin-top: 20px;
    }
}

/* ========================
common
======================== */
#mainContent .marginB10{margin-bottom: 10px;}
#mainContent .marginB20{margin-bottom: 20px;}
#mainContent .marginB30{margin-bottom: 30px;}
#mainContent .marginB40{margin-bottom: 40px;}

.btn{
text-align: center;
font-family: 'Libre Caslon Text', serif;
}
.btn a{
color: #139987;
font-size: 18px;
font-size: 1.8rem;
letter-spacing: 0.2em;
transition: color .3s;
}
.btn a:hover{
color: #00d9bc;
}
@media screen and (min-width: 821px) {
    #mainContent .size-large img{
    width: 960px;    
    height: auto;
    }
    #mainContent .size-medium img{
    width: 480px;    
    height: auto;
    }
}
@media screen and (max-width: 820px) {
    #mainContent .size-large img,
    #mainContent .size-medium img{
    width: 100%;    
    height: auto;
    }
}

.lower{}
.lower #mainTitle{}
.lower #mainTitle{
position: relative;
background-image: url(../images/main_others.jpg);
background-repeat: repeat-x;
}
.lower.service.serviceA #mainTitle,
.lower.service.serviceB #mainTitle,
.lower.others #mainTitle{
margin-bottom: 120px;
}
.lower.service.serviceC #mainTitle,
.lower.others #mainTitle{
height: 300px;
}
.lower #mainTitle .arrowWrap {
position: absolute;
left:0;
top:0;
}
.lower #mainTitle .arrow {
position: relative;
overflow: hidden;
background-color:#139987;
}
.lower #mainTitle article{
position:absolute;
transform: translateY(-50%) translateX(-50%);
top:50%;
left:50%;
color: #ffffff;
}
.lower.service.serviceA #mainTitle article,
.lower.service.serviceB #mainTitle article,
.lower.others #mainTitle article{
text-align: center;
}
.lower.service.serviceC #mainTitle article{
text-align: left;
}
.lower.service.serviceA #mainTitle article h2,
.lower.service.serviceB #mainTitle article h2,
.lower.others #mainTitle article h2{
font-family: 'Libre Caslon Text', serif;
font-size: 80px;
font-size: 8rem;
text-transform: uppercase;
width: 100vw;
}
.lower.service.serviceA #mainTitle article p,
.lower.service.serviceB #mainTitle article p{
font-size: 23px;
font-size: 2.3rem;
}
.lower.service.serviceA #mainTitle article p:nth-of-type(1),
.lower.service.serviceB #mainTitle article p:nth-of-type(1),
.lower.others #mainTitle article p{
font-size: 20px;
font-size: 2.0rem;
}
.lower.service.serviceC #mainTitle article span{
border-radius:3px;
border:#139987 solid 2px; 
background: #139987;
padding:4px 20px;
font-size: 12px;
font-size: 1.2rem;
}
.lower.service.serviceC #mainTitle article h2{
margin-bottom: 5px; 
}
.lower.service.serviceC #mainTitle article hr{
width: 300px;
border: 0;
height: 0;
margin: 0;
padding: 0;
border-bottom: 2px solid #139987;
}
.lower.service.serviceA #mainTitle article h2,
.lower.service.serviceB #mainTitle article h2{
opacity: 0;
animation: fade 1s ease 0s 1 normal forwards;
}
.lower.service.serviceA #mainTitle article p:nth-of-type(1),
.lower.service.serviceB #mainTitle article p:nth-of-type(1){
opacity: 0;
animation: fade 1s ease .5s 1 normal forwards;
}
.lower.service.serviceA #mainTitle article p:nth-of-type(2),
.lower.service.serviceB #mainTitle article p:nth-of-type(2){
opacity: 0;
animation: fade 1s ease 1s 1 normal forwards;
}
@keyframes fade{
  0% {
    transform: scale(1.2,1.2)
  }
  100% {
    opacity: 1;
    transform: scale(1,1)
  }
}
@media screen and (min-width: 821px) {
    .lower.service #mainTitle{
    height: 600px;
    }
    .lower #mainTitle .arrowWrap {
    height: 200px;
    }
    .lower #mainTitle .arrow {
    width: 15px;
    height: 200px;
    }
    .lower.service.serviceC #mainTitle article{
    width: 1120px;
    }
    .lower.service.serviceC #mainTitle article h2{
    font-size: 32px;
    font-size: 3.2rem;
    }
    .lower.service.serviceA #mainTitle article p:nth-of-type(1),
    .lower.service.serviceB #mainTitle article p:nth-of-type(1){
    margin-bottom: 20px;
    }
}
@media screen and (max-width: 820px) {
    .lower.service #mainTitle{
    height:340px;
    background-size:auto 340px;
    line-height: 2.0;
    }
    .lower.service.serviceC #mainTitle{
    height: 300px;
    background-size:auto 300px;
    }
    .lower.others #mainTitle{
    height: 200px;
    }
    .lower.service.serviceA #mainTitle,
    .lower.service.serviceB #mainTitle,
    .lower.others #mainTitle{
    margin-bottom: 60px;
    }
    .lower #mainTitle .arrowWrap {
    height: 110px;
    }
    .lower #mainTitle .arrow {
    width: 12px;
    height: 110px;
    }
    .lower.service.serviceA #mainTitle article h2,
    .lower.service.serviceB #mainTitle article h2,
    .lower.others #mainTitle article h2{
    font-size:36px;
    font-size:3.6rem;
    }
    .lower.service.serviceA #mainTitle article p,
    .lower.service.serviceB #mainTitle article p{
    margin: 0 20px;
    font-size:14px;
    font-size:1.4rem;
    }
    .lower.service.serviceA #mainTitle article p:nth-of-type(1),
    .lower.service.serviceB #mainTitle article p:nth-of-type(1){
    font-size: 13px;
    font-size: 1.3rem;
    }
    .lower.service.serviceC #mainTitle article h2{
    font-size: 24px;
    font-size: 2.4rem;
    }
}

.lower #mainContent{}
.lower.service #mainContent .btn{
margin-top: 30px;
}
.lower.service #mainContent .btn span{
padding: 20px 15px;
background: #defbf7;
color: #139987;
transition: color .3s;
}
.lower.service #mainContent a:hover .btn span{
color: #00d9bc;
}
.lower.service #mainContent a .btn em{
font-style: normal;
color: #222222;
}
@media screen and (min-width: 821px) {
    .lower #mainContent{
    width: 1120px;
    margin:0 auto;
    }
    .lower #mainContent #mainContentIn{
    width: 960px;
    margin:0 auto;
    }
    .lower #mainContent #mainContentIn section{
    margin-left: 50px;
    }
}
@media screen and (max-width: 820px) {
    .lower #mainContent{
    margin:0 20px;
    }
}

.lower.serviceA{}
.lower.serviceA #mainContent a.column{
margin-bottom: 80px;
}
.lower.serviceA #mainContent a.column div{
position: relative;
margin: 50px 0 0 -120px;
padding: 80px 35px;
z-index: 2;
background: #ffffff;
box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.15);
}
.lower.serviceA #mainContent a.column div.right{
margin: 50px 0 0 -120px;
}
.lower.serviceA #mainContent a.column div.left{
margin: 50px -120px 0 0;
}
.lower.serviceA #mainContent a.column .img{
height: auto;
position: relative;
z-index: 1;
cursor: pointer;
overflow: hidden;
}
.lower.serviceA #mainContent a.column .img img{
width: 100%;
height: auto;
transition: transform .6s ease;
}
.lower.serviceA #mainContent a.column:hover .img img{
transform: scale(1.1);
}
.lower.serviceA #mainContent h3{
margin-bottom: 10px;
font-size: 34px;
font-size: 3.4rem;
font-weight: 500;
border-bottom: 2px #139987 solid;
}
@media screen and (min-width: 821px) {
    .lower.serviceA #mainContent a.column{
    display: flex;
    }
    .lower.serviceA #mainContent a.column div{
    width: 430px;
    }
    .lower.serviceA #mainContent a.column .img{
    width: 800px;
    }
}
@media screen and (max-width: 820px) {
    .lower.serviceA #mainContent h3{
    margin-bottom: 20px;
    font-size: 24px;
    font-size: 2.4rem;
    }
    .lower.serviceA #mainContent a.column{
    display: flex;
    flex-direction: column;
    margin-bottom: 60px;
    }
    .lower.serviceA #mainContent a.column:last-of-type{
    margin-bottom: 40px;
    }
    .lower.serviceA #mainContent a.column div.right{
    margin: -20px 0 0 20px;
    order: 2;
    }
    .lower.serviceA #mainContent a.column div.left{
    margin: -20px 20px 0 0;
    order: 2;
    }
    .lower.serviceA #mainContent a.column .img{
    order: 1;
    }
}

.lower.serviceB{}
.lower.serviceB #mainContent h3{
margin-bottom: 70px;
font-weight: 500;
color: #139987;
}
.lower.serviceB #mainContent section{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.lower.serviceB #mainContent a.column{
height: auto;
vertical-align: top;
background: #ffffff;
overflow: hidden;
}
.lower.serviceB #mainContent dl{
height: 100%;
display: flex;
align-items: stretch;
}
.lower.serviceB #mainContent dl .img{
margin: 0 -50px;
width: calc(100% + 100px);
height: auto;
cursor: pointer;
overflow: hidden;
}
.lower.serviceB #mainContent dl img{
position: relative;
z-index: 1; 
width: 100%;
height: auto;
transition: transform .6s ease;
}
.lower.serviceB #mainContent a:hover dl img{
transform: scale(1.1);
}
.lower.serviceB #mainContent dl dd{
margin: 0 40px 60px;
background: #ffffff;
box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.15);
}
.lower.serviceB #mainContent dl dd div{
background-color: #ffffff;
background-image: linear-gradient(135deg, #139987 20px, transparent 0);
position: relative;
margin-top: -50px;
padding:50px 40px;
z-index:2;
}
.lower.serviceB #mainContent dl dd h4{
margin-bottom: 10px;
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
border-bottom: 2px #139987 solid;
}
@media screen and (min-width: 821px) {
    .lower.serviceB #mainContent h3{
    font-size: 34px;
    font-size: 3.4rem;
    }
    .lower.serviceB #mainContent a.column{
    width:calc(50% - 30px);
    }
    .lower.serviceB #mainContent a:nth-child(even).column{
    margin-left: 30px;
    }
}
@media screen and (max-width: 820px) {
    .lower.serviceB #mainContent h3{
    margin-bottom: 40px;
    font-size: 26px;
    font-size: 2.6rem;
    }
    .lower.serviceB #mainContent dl dd h4{
    margin-bottom: 20px;
    }
    .lower.serviceB #mainContent dl dd{
    margin: 0 20px 60px;
    }
    .lower.serviceB #mainContent dl dd div{
    padding:50px 20px;
    }
    }

.lower.serviceC{}
.lower.serviceC{
background: #f4faf9;
}
.lower.serviceC #mainContent section{
background: #ffffff;
padding: 100px 80px;
box-shadow: 0 0px 50px 0 rgba(0, 0, 0, 0.15);
}
.lower.serviceC #mainContent #report h3,
.lower.others #mainContent h3{
padding-bottom: 10px;
border-bottom: 2px #139987 solid;
font-weight: 500;
}
.lower.serviceC #mainContent #report h4,
.lower.others #mainContent h4{
margin-bottom: 20px;
padding:17px 0 17px 36px;
background-image:
linear-gradient(#00b2b3 50%, #139987 50%);
background-repeat: no-repeat;
background-size:16px 100%;
font-weight: 500;
}
.lower.serviceC #mainContent #report h5,
.lower.others #mainContent h5{
margin-bottom: 20px;
font-weight: 500;
color: #139987;
}
.lower.serviceC #mainContent #report p{
margin-bottom: 20px;
}
.lower.serviceC #mainContent #contact{ 
margin-top: 80px;
padding:80px 125px 0;
border-top: 1px solid #c2c2c2;
}
.lower.serviceC #mainContent #contact .title{
background: #068373;
border-bottom:8px solid #18655b;
position: relative;
z-index: 2;
text-align: center;
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
color: #ffffff;
}
.lower.serviceC #mainContent #contact article{
background: #d9e8e6;
margin-top: -30px;
padding: 70px 0;
position: relative;
z-index: 1;
}
.lower.serviceC #mainContent #contact article p{
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
}
.lower.serviceC #mainContent .document{
margin: 70px 0 90px;
text-align: center;
}
@media screen and (min-width: 821px) {
    .lower.serviceC #mainContent #contact .title{
    margin: 0 150px;
    }
    .lower.serviceC #mainContent #contact article{
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .lower.serviceC #mainContent #contact article p:nth-child(2){
    margin-left: 24px;
    }
}
@media screen and (min-width: 821px) {
    .lower.serviceC #mainContent #report h3,
    .lower.others #mainContent h3{ 
    margin-bottom: 65px;
    font-size: 30px;
    font-size: 3.0rem;
    }
    .lower.serviceC #mainContent #report h4,
    .lower.others #mainContent h4{
    font-size: 25px;
    font-size: 2.5rem;
    }
    .lower.serviceC #mainContent #report h5,
    .lower.others #mainContent h5{
    font-size: 22px;
    font-size: 2.2rem;
    }
    .lower.serviceC #mainContent #contact .title{
    margin: 0 150px;
    }
    .lower.serviceC #mainContent #contact article{
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .lower.serviceC #mainContent #contact article p:nth-child(2){
    margin-left: 24px;
    }
}
@media screen and (max-width: 820px) {
    .lower.serviceC #mainContent #report h3,
    .lower.others #mainContent h3{
    margin-bottom: 30px;
    font-size: 24px;
    font-size: 2.4rem;
    }
    .lower.serviceC #mainContent #report h4,
    .lower.others #mainContent h4{
    font-size: 20px;
    font-size: 2.0rem;
    }
    .lower.serviceC #mainContent #report h5,
    .lower.others #mainContent h5{
    font-size: 18px;
    font-size: 1.8rem;
    }
    .lower.serviceC #mainContent section{
    padding:50px 20px;
    }
    .lower.serviceC #mainContent #contact{ 
    margin-top: 40px;
    padding:50px 0px 0;
    }
    .lower.serviceC #mainContent #contact .title{
    margin: 0 10px;
    font-size: 18px;
    font-size: 1.8rem;
    }
    .lower.serviceC #mainContent #contact article{
    padding: 60px 20px 40px;
    }
    .lower.serviceC #mainContent #contact article p:nth-child(2){
    margin-top:10px;
    }
}

/* ========================
color
======================== */
#media{}
#media #mainTitle{
background-image: url(../images/main_media.jpg);
}
@media screen and (max-width: 820px) {
    #media #mainTitle{
    background-position: top 0 left -100px;
    }
}
#media #mainTitle .arrow {
background-color:#db3c3c;
}
#media.serviceC #mainTitle article span{
border:#db3c3c solid 2px; 
background: #db3c3c;
}
#media.serviceC #mainTitle article hr,
#media.serviceA #mainContent h3,
#media.serviceB #mainContent dl dd h4,
#media.serviceC #mainContent #report h3{
border-bottom: 2px solid #db3c3c;
}
#media.serviceB #mainContent h3,
#media.serviceC #mainContent #report h5{
color: #db3c3c;
}
#media #mainContent .btn span{
background: #ffefef;
color: #db3c3c;
}
#media #mainContent a:hover .btn span{
color: #ff7979;
}
#media.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #db3c3c 20px, transparent 0);
}
#media.serviceC #mainContent #report h4{
background-image:linear-gradient(#ff7070 50%, #db3c3c 50%);
}

#solution{}
#solution #mainTitle{
background-image: url(../images/main_solution.jpg);
}
@media screen and (min-width: 821px) {
    #solution.serviceC #mainTitle{
    background-position: bottom -100px left 0px;
    }
}
@media screen and (max-width: 820px) {
    #solution #mainTitle{
    background-position: top 0 left -300px;
    }
}
#solution #mainTitle .arrow {
background-color:#ee7700;
}
#solution.serviceC #mainTitle article span{
border:#ee7700 solid 2px; 
background: #ee7700;
}
#solution.serviceC #mainTitle article hr,
#solution.serviceA #mainContent h3,
#solution.serviceB #mainContent dl dd h4,
#solution.serviceC #mainContent #report h3{
border-bottom: 2px solid #ee7700;
}
#solution.serviceB #mainContent h3,
#solution.serviceC #mainContent #report h5{
color: #ee7700;
}
#solution #mainContent .btn span{
background: #ffefef;
color: #ee7700;
}
#solution #mainContent a:hover .btn span{
color: #ffbe57;
}
#solution.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #ee7700 20px, transparent 0);
}
#solution.serviceC #mainContent #report h4{
background-image:linear-gradient(#eeb300 50%, #ee7700 50%);
}


#research{}
#research #mainTitle{
background-image: url(../images/main_research.jpg);
}
@media screen and (max-width: 820px) {
    #research #mainTitle{
    background-position: top 0 left -400px;
    }
}
#research #mainTitle .arrow {
background-color:#e1b401;
}
#research.serviceC #mainTitle article span{
border:#e1b401 solid 2px; 
background: #e1b401;
}
#research.serviceC #mainTitle article hr,
#research.serviceA #mainContent h3,
#research.serviceB #mainContent dl dd h4,
#research.serviceC #mainContent #report h3{
border-bottom: 2px solid #e1b401;
}
#research.serviceB #mainContent h3,
#research.serviceC #mainContent #report h5{
color: #e1b401;
}
#research #mainContent .btn span{
background: #fff8d4;
color: #e1b401;
}
#research #mainContent a:hover .btn span{
color: #ffe063;
}
#research.serviceB #mainContent dl dd div{
background-image:linear-gradient(135deg, #e1b401 20px, transparent 0);
}
#research.serviceC #mainContent #report h4{
background-image:linear-gradient(#eed54d 50%, #e1b401 50%);
}

#system{}
#system #mainTitle{
background-image: url(../images/main_system.jpg);
}
@media screen and (max-width: 820px) {
    #system #mainTitle{
    background-position: top 0 left -400px;
    }
}
#system #mainTitle .arrow {
background-color:#2389c9;
}
#system.serviceC #mainTitle article span{
border:#2389c9 solid 2px; 
background: #2389c9;
}
#system.serviceC #mainTitle article hr,
#system.serviceA #mainContent h3,
#system.serviceB #mainContent dl dd h4,
#system.serviceC #mainContent #report h3{
border-bottom: 2px solid #2389c9;
}
#system.serviceB #mainContent h3,
#system.serviceC #mainContent #report h5{
color: #2389c9;
}
#system #mainContent .btn span{
background: #e0eefa;
color: #2389c9;
}
#system #mainContent a:hover .btn span{
color: #52bcff;
}
#system.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #2389c9 20px, transparent 0);
}
#system.serviceC #mainContent #report h4{
background-image:linear-gradient(#5dabe7 50%, #2389c9 50%);
}

#creative{}
#creative #mainTitle{
background-image: url(../images/main_creative.jpg);
}
@media screen and (min-width: 821px) {
    #creative.serviceC #mainTitle{
    background-position: bottom -100px left -10px;
    }
}
@media screen and (max-width: 820px) {
    #creative #mainTitle{
    background-position: top 0 left -200px;
    }
}
#creative #mainTitle .arrow {
background-color:#d84b97;
}
#creative.serviceC #mainTitle article span{
border:#d84b97 solid 2px; 
background: #d84b97;
}
#creative.serviceC #mainTitle article hr,
#creative.serviceA #mainContent h3,
#creative.serviceB #mainContent dl dd h4,
#creative.serviceC #mainContent #report h3{
border-bottom: 2px solid #d84b97;
}
#creative.serviceB #mainContent h3,
#creative.serviceC #mainContent #report h5{
color: #d84b97;
}
#creative #mainContent .btn span{
background: #fff0fc;
color: #d84b97;
}
#creative #mainContent a:hover .btn span{
color: #ff81c5;
}
#creative.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #d84b97 20px, transparent 0);
}
#creative.serviceC #mainContent #report h4{
background-image:linear-gradient(#fa76ae 50%, #d84b97 50%);
}

#human{}
#human #mainTitle{
background-image: url(../images/main_human.jpg);
}
@media screen and (min-width: 821px) {
    #human.serviceC #mainTitle{
    background-position: bottom 0 left 0px;
    }
}
@media screen and (max-width: 820px) {
    #human #mainTitle{
    background-position: top 0 left -100px;
    }
}
#human #mainTitle .arrow {
background-color:#34b850;
}
#human.serviceC #mainTitle article span{
border:#34b850 solid 2px; 
background: #34b850;
}
#human.serviceC #mainTitle article hr,
#human.serviceA #mainContent h3,
#human.serviceB #mainContent dl dd h4,
#human.serviceC #mainContent #report h3{
border-bottom: 2px solid #34b850;
}
#human.serviceB #mainContent h3,
#human.serviceC #mainContent #report h5{
color: #34b850;
}
#human #mainContent .btn span{
background: #e1fae6;
color: #34b850;
}
#human #mainContent a:hover .btn span{
color: #54ee75;
}
#human.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #34b850 20px, transparent 0);
}
#human.serviceC #mainContent #report h4{
background-image:linear-gradient(#5bc89e 50%, #34b850 50%);
}

#sales{}
#sales #mainTitle{
background-image: url(../images/main_sales.jpg);
}
@media screen and (max-width: 820px) {
    #sales #mainTitle{
    background-position: top 0 left -250px;
    }
}
#sales #mainTitle .arrow {
background-color:#2b5a98;
}
#sales.serviceC #mainTitle article span{
border:#2b5a98 solid 2px; 
background: #2b5a98;
}
#sales.serviceC #mainTitle article hr,
#sales.serviceA #mainContent h3,
#sales.serviceB #mainContent dl dd h4,
#sales.serviceC #mainContent #report h3{
border-bottom: 2px solid #2b5a98;
}
#sales.serviceB #mainContent h3,
#sales.serviceC #mainContent #report h5{
color: #2b5a98;
}
#sales #mainContent .btn span{
background: #f3f5ff;
color: #2b5a98;
}
#sales #mainContent a:hover .btn span{
color: #549cfa;
}
#sales.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #2b5a98 20px, transparent 0);
}
#sales.serviceC #mainContent #report h4{
background-image:linear-gradient(#6c7dca 50%, #2b5a98 50%);
}

#business{}
#business #mainTitle{
background-image: url(../images/main_business.jpg);
}
@media screen and (min-width: 821px) {
    #business.serviceC #mainTitle{
    background-position: bottom 0 left 0px;
    }
}
@media screen and (max-width: 820px) {
    #business #mainTitle{
    background-position: top 0 left -300px;
    }
}
#business #mainTitle .arrow {
background-color:#865092;
}
#business.serviceC #mainTitle article span{
border:#865092 solid 2px; 
background: #865092;
}
#business.serviceC #mainTitle article hr,
#business.serviceA #mainContent h3,
#business.serviceB #mainContent dl dd h4,
#business.serviceC #mainContent #report h3{
border-bottom: 2px solid #865092;
}
#business.serviceB #mainContent h3,
#business.serviceC #mainContent #report h5{
color: #865092;
}
#business #mainContent .btn span{
background: #f6edf8;
color: #865092;
}
#business #mainContent a:hover .btn span{
color: #c155d9;
}
#business.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #865092 20px, transparent 0);
}
#business.serviceC #mainContent #report h4{
background-image:linear-gradient(#cd70d0 50%, #865092 50%);
}

#us-institute{}
#us-institute #mainTitle{
background-image: url(../images/main_us-institute.jpg);
}
@media screen and (min-width: 821px) {
    #us-institute.serviceC #mainTitle{
    background-position: bottom 0 left 0px;
    }
}
@media screen and (max-width: 820px) {
    #us-institute #mainTitle{
    background-position: top 0 left -300px;
    }
}
#us-institute #mainTitle .arrow {
background-color:#9ac631;
}
#us-institute.serviceC #mainTitle article span{
border:#9ac631 solid 2px; 
background: #9ac631;
}
#us-institute.serviceC #mainTitle article hr,
#us-institute.serviceA #mainContent h3,
#us-institute.serviceB #mainContent dl dd h4,
#us-institute.serviceC #mainContent #report h3{
border-bottom: 2px solid #9ac631;
}
#us-institute.serviceB #mainContent h3,
#us-institute.serviceC #mainContent #report h5{
color: #9ac631;
}
#us-institute #mainContent .btn span{
background: #eff9d7;
color: #9ac631;
}
#us-institute #mainContent a:hover .btn span{
color: #bbf927;
}
#us-institute.serviceB #mainContent dl dd div{
background-image: linear-gradient(135deg, #9ac631 20px, transparent 0);
}
#us-institute.serviceC #mainContent #report h4{
background-image:linear-gradient(#bbf927 50%, #9ac631 50%);
}

/* ========================
index
======================== */
#index{}
#index{
background: url(../images/inde_bg.jpg) center bottom 300px repeat-x; 
}
#index section.bgEafaff{
background: #eafaff;
margin: 0 calc(50% - 50vw);
width: 100vw;
}
@media screen and (min-width: 821px) {
    #index section > section {
    width: 1120px;
    margin: 0 auto;
    }
}
@media screen and (max-width: 820px) {
    #index img{
    width: 100%;
    }
    #index section.bgEafaff{
    padding-top: 60px;
    }
    #index section > section {
    margin: 0 20px;
    }
}

#index #mainV{}
#index #mainV{
display:block;
height: 776px;
position: relative;
overflow:hidden;
padding:0;
box-sizing:border-box;
margin: 0 calc(50% - 50vw) 120px;
width: 100vw;
}
#index #mainV .circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 2;
width: 610px;
height: 610px;
border-radius: 50%;
background-color: rgba(19,153,135,0.7);
color: #ffffff;
text-align:center;
letter-spacing:0em;
}
#index #mainV .circle .txt01 span{
display: block;
}
#index #mainV .circle .txt01 {
opacity: 0;
animation: fade 1s ease 0s 1 normal forwards;
}
#index #mainV .circle .txt02 {
opacity: 0;
animation: fade 1s ease .5s 1 normal forwards;
}
#index #mainV .circle .txt03 {
opacity: 0;
animation: fade 1s ease 1s 1 normal forwards;
}
@keyframes fade{
  0% {
    transform: scale(1.2,1.2)
  }
  100% {
    opacity: 1;
    transform: scale(1,1)
  }
}
@media screen and (min-width: 821px) {
    #index #mainV .circle .txt01{
    margin-top:110px;
    font-size:25px;
    line-height: 1.8;
    }
    #index #mainV .circle .txt01 span:nth-of-type(1){
    font-size: 42px;
    margin-bottom:40px;
    line-height: 1.4;
    }
    #index #mainV .circle .txt02{
    margin-top:70px;
    font-size: 16px;
    line-height:0.5;
    }
    #index #mainV .circle .txt03{
    font-size: 26px;
    }
}
@media screen and (max-width: 820px) {
    #index #mainV{
    height:600px;
    margin: 0 calc(50% - 50vw) 60px;
    }
    #index #mainV .circle{
    width: 370px;
    height: 370px;
    }
    #index #mainV .circle .txt01{
    margin-top:60px;
    font-size: 16px;
    line-height: 2.0;
    }
    #index #mainV .circle .txt01 span:nth-of-type(1){
    font-size:26px;
    margin-bottom: 20px;
    line-height: 1.4;
    }
    #index #mainV .circle .txt02{
    margin-top:40px;
    font-size: 12px;
    line-height:0.8;
    }
    #index #mainV .circle .txt03{
    font-size: 18px;
    }
}
#index #mainV .slide {
position: relative;
width:100%;
height:100%;
}
#index #mainV .slide .image{
position: absolute;
width:100%;
opacity: 0;
animation: change-img-anim 30s infinite;
}
#index #mainV .slide .image:nth-of-type(1) {
animation: change-img-anim-first 30s infinite;
animation-delay: 0s;
}
#index #mainV .slide .image:nth-of-type(2) {
animation-delay: 10s;
}
#index #mainV .slide .image:nth-of-type(3) {
animation-delay: 20s;
}
@keyframes change-img-anim-first {
  0%{ opacity: 1;transform: scale(1,1)}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;transform: scale(1.5,1.5)}
}
@keyframes change-img-anim {
  0%{ opacity: 0;transform: scale(1,1)}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;transform: scale(1.5,1.5)}
}
@media screen and (min-width: 821px) {
    #index #mainV .slide .image{
    width: inherit;
    height: inherit;
    }
}
@media screen and (max-width: 820px) {
    #index #mainV .slide .image{
    position: absolute;
    bottom:0px;
    right:-500px;
    width: auto;
    height: 600px;
    }
}

#index h2{
font-family: 'Libre Caslon Text', serif;
font-size: 84px;
font-size: 8.6rem;
color: #139987;
letter-spacing: 0;
}
@media screen and (max-width: 820px) {
    #index h2{
    font-size: 36px;
    font-size: 3.6rem;
    word-break: break-all;
    }
}
#index #topics h2,
#index #company h2,
#index #contact h2{
border-bottom: 2px #84d6d7 solid;
margin:0 calc(50% - 50vw) 70px 0;
width: 100vw;
}
#index section.content{
margin:200px auto 100px;  
}
#index .content article hr{
border: 0;
height: 0;
padding: 0;
border-top: 2px #84d6d7 solid;
margin: 0 calc(50% - 50vw);
width: 100vw;
}
#index .content article .txt{
font-size: 20px;
font-size: 2.0rem;
font-weight: 500;
color: #139987;
}
#index .content article .txt .btn{
margin-top: 30px;
}
@media screen and (min-width: 821px) {
    #index .content article{
    position: relative;
    height: 550px;
    }
    #index .content article h2{
    position: absolute;
    bottom: 400px;
    }
    #index .content article hr{
    position: absolute;
    bottom: 410px;
    }
    #index .content article .txt{
    position: absolute;
    width: 560px;
    top:200px;
    }
    #index .content article .img{
    position: absolute;
    top: -100px;
    }
    #index .content article.right h2,
    #index .content article.right .txt{
    left: 560px;
    }
    #index .content article.left .img{
    right: 0;
    }
    #index .content article.right .img{
    left: 0;
    }
}
@media screen and (max-width: 820px) {
    #index #topics h2{
    margin:0 calc(50% - 50vw) 10px 0;
    }
    #index #company h2,
    #index #contact h2{
    margin:0 calc(50% - 50vw) 30px 0;
    }
    #index section.content{
    margin:60px auto;  
    }
    #index .content article{
    margin-bottom: 80px;
    }
    #index .content article hr{
    margin: 0 calc(50% - 50vw) 20px;
    }
    #index .content article .txt{
    margin-bottom:30px;
    font-size: 16px;
    font-size: 1.6rem;
    }
}

#index #topics{}
#topics dl{
overflow: hidden;
border-bottom: 1px #c1c1c1 solid;
}
#topics dl dt{
font-family: 'Montserrat', sans-serif;
color: #139987;
font-weight: bold;
}
#topics dl dd a{
display: flex;
}
#topics dl dd a:before {
content:"\025b7";
display: block;
color:#139987;
}
#topics dl dd a:hover:before {
content:"\025b6";
}
#index #topics .btn{
margin-top:40px;
}
@media screen and (min-width: 821px) {
    #topics dl{
    padding:46px 0;
    font-size: 16px;
    font-size: 1.6rem;
    }
    #topics dl dt{
    width: 215px;
    float: left;
    }
    #topics dl dd{
    width: 905px;
    float: left;
    }
    #topics dl dd a:before {
    margin-right: 50px;
    }
}
@media screen and (max-width: 820px) {
    #topics dl{
    padding:20px 0;
    }
    }
    #topics dl dd a:before {
    margin-right: 20px;
    }
}

#index #company{}
#index #contact{}
#index #company ul li,
#contact ul li{
margin-bottom: 20px;
padding:18px 0 18px 36px;
background-image:
linear-gradient(#00b2b3 50%, #139987 50%);
background-repeat: no-repeat;
background-size:16px 100%;
}
#index #company{
margin: 0 auto 100px;
}
#index #company ul li{
font-size: 24px;
font-size: 2.4rem;
}
#contact #contactIn{
margin-bottom: 20px;
}
#contact ul li.contactIn2{
font-family: 'Montserrat', sans-serif;
font-size: 20px;
font-size: 2.0rem;
font-weight: bold;
line-height: 1.4;
}
@media screen and (min-width: 821px) {
    #index #company ul li p.btn{
    display: inline;
    }
    #index #company #companyIn,
    #contact #contactIn{
    overflow: hidden;
    }
    #index #company ul li.companyIn1,
    #contact ul li.contactIn1{
    width: 60%;
    float: left;
    }
    #contact ul li.contactIn1{
    font-size: 16px;
    font-size: 1.6rem;
    }
    #index #company ul li.companyIn2,
    #contact ul li.contactIn2{
    width: 40%;
    float: right;
    }
}
@media screen and (max-width: 820px) {
    #index #company{
    margin: 0 auto 60px;
    }
    #index #company ul li{
    font-size: 20px;
    font-size: 2.0rem;
    }
    #index #company ul li p.btn{
    text-align: left;
    }
    #contact #contactIn{
    margin-bottom: 30px;
    }
}

#contact .wpcf7 label{
overflow: hidden;
display: block;
}
#index #contact .wpcf7 label.none{
display: none;
}
#contact .wpcf7 label span input,
#contact .wpcf7 label span textarea{
border: 1px solid #dedede;
background: #ffffff;
}
#contact .wpcf7 label span textarea{
height: 280px;
}
#contact .wpcf7 .btn{
margin-top: 70px;
}
#contact .wpcf7 input[type="submit"]{
color: #139987;
font-family: 'Libre Caslon Text', serif;
font-size: 18px;
font-size: 1.8rem;
letter-spacing: 0.2em;
}
#contact .wpcf7 input[type="submit"]:hover{
color: #00d9bc;
}
/*
#contact .screen-reader-response{
display: none;
}
*/
#contact .wpcf7-not-valid-tip{
color: #ff0000;
}
@media screen and (min-width: 821px) {
    #contact .wpcf7 label{
    width: 1000px;
    margin: 0 0 15px 35px;
    }
    #contact .wpcf7 label p{
    float: left;
    width: 230px;
    }
    #contact .wpcf7 label span{
    float: right;
    width: 760px;
    }
    #contact .wpcf7 label span input,
    #contact .wpcf7 label span textarea{
    width: 760px;
    }
}
@media screen and (max-width: 820px) {
    contact .wpcf7 label span input,
    #contact .wpcf7 label span textarea{
    width: 100%;
    }
    #contact .wpcf7 .btn{
    margin-top: 30px;
    }
}

/* ========================
others
======================== */
.lower.others#topics{}
.lower.others#topics .date{
font-family: 'Montserrat', sans-serif;
color: #139987;
font-weight: bold;
}
.lower.others#topics .description{
margin-bottom: 100px;
}
.lower.others#topics .pagination{
margin-top: 50px;
text-align: center;
}
.lower.others#topics .pagination a{
color: #139987;
margin-left: 20px;
}
.lower.others#topics .pagination a:hover{
color: #00d9bc;
} 
.lower.others#topics .pagination span{
margin-left: 20px;
}
@media screen and (min-width: 821px) {
    .lower.others#topics .description{
    font-size: 16px;
    font-size: 1.6rem;
    }
}

.lower.others#company{}
.lower.others#concept{}
.lower.others .main{
margin-bottom: 100px;
padding: 500px 0 0 80px;
}
.lower.others#company .main{
background: url(/wp-content/uploads/2022/09/main_company.jpg) no-repeat;
}
.lower.others#concept .main{
background: url(/wp-content/uploads/2022/09/main_concept.jpg) no-repeat;
}
.lower.others .main article{
background: #ffffff;
padding: 90px 0 0 50px;
}
.lower.others #mainContent .main article h3{
margin-bottom:30px;
padding-bottom: 0;
border: none;
font-size: 38px;
font-size: 3.8rem;
color: #139987;
}
.lower.others#company #mainContentIn section:nth-of-type(2){
margin-bottom:100px;
}
.lower.others table,
table.usOverview {
width: 100%;
margin-bottom:80px;
}   
.lower.others table tr,
table.usOverview tr {
border-bottom: 1px solid #dedede;
}
.lower.others table tr th,
table.usOverview tr th{
color: #139987;
font-weight: 400;
padding:20px 0;
}
.lower.others table tr td,
table.usOverview tr td{
padding:20px 0;
}
.lower.others table tr td iframe,
table.usOverview tr td iframe {
margin:30px 0;
}
.lower.others table tr td a,
table.usOverview tr td a {
display: flex;
}
.lower.others table tr td a:before,
table.usOverview table tr td a:before {
content:"\025b7";
display: block;
color:#139987;
margin-right: 20px;
}
.lower.others table tr td a:hover:before,
table.usOverview tr td a:hover:before {
content:"\025b6";
}
.lower.others#company .pmark{
background: #f0f5f5;
font-weight: 500;
}
.lower.others#company .pmark img{
margin-right: 30px;
}
.lower.others#company dl{
overflow: hidden;
margin-bottom:40px;
}
.lower.others#company dl dt .part{
color: #139987;
}
.lower.others#company dl dt .name{
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
}
.lower.others#company dl dt .kana{
font-size: 14px;
font-size: 1.4rem;
}

.lower.others#company details:not(:last-child) {
margin-bottom: 20px;
}
.lower.others#company details summary {
list-style: none;
cursor: default;
pointer-events: none;
font-size: 3.8rem;
color: #139987;
font-weight: 500;
}
.lower.others#company details summary::-webkit-details-marker {
display: none;
}
.lower.others#company details summary::after {
display: none;
}

@media screen and (min-width: 821px) {
    .lower.others#company .pmark{
    margin-bottom:100px;
    padding: 40px 150px;
    display: flex;
    font-size: 16px;
    font-size: 1.6rem;
    }
    .lower.others#company .pmark p:nth-of-type(2){
    margin-top:20px;
    }
    .lower.others#company dl dt{
    float: left;
    width: 200px;
    }
    .lower.others#company dl dd{
    float: right;
    width: 700px;
    }
}
@media screen and (max-width: 820px) {
    .lower.others .main{
    margin-bottom: 60px;
    padding: 200px 0 0 30px;
    }
    .lower.others#company .main,
    .lower.others#concept .main{
    background-size:100%;
    }
    .lower.others .main article{
    padding: 0px 0 0 20px;
    }
    .lower.others #mainContent .main article h3,
    .lower.others#company details summary{
    margin-bottom:10px;
    font-size: 24px;
    font-size: 2.4rem;
    }
    .lower.others table tr th,
    .lower.others table tr td{
    display: block;
    width: 100%;
    }
    .lower.others table tr th{
    padding:20px 0 0;
    }
    .lower.others table tr td{
    padding:0px 0 20px; 
    }
    .lower.others#company .pmark{
    margin-bottom:60px;
    padding: 30px 30px;
    text-align: center;
    }
    .lower.others#company .pmark img{
    width: auto;
    margin: 0 auto 20px;
    }
    .lower.others#company details summary::after {
    font-size: 1.4rem;
    display: block;
    width: 50%;
    margin-top:20px;
    }
}

.lower.others#privacy{}
.lower.others#privacy dl dt{
margin-top: 60px;
}
.lower.others#privacy h3{
margin-top:60px;
}
.lower.others#privacy #mainContent h5{
margin-top:20px;
margin-bottom: 0px;
font-size: 20px;
font-size: 2.0rem;
font-weight: 500;
color: #139987;
}
.lower.others#privacy #mainContent .right{
margin-top: 20px;
text-align: right;
}