@charset "utf-8";

.contactUsWrap {
    margin-top: 0;
}

/* **************************************************************

ttlh1Type1

************************************************************** */
.ttlh1Type1{
padding: 0 15px;
background-color: #00DBDE;
background-image: linear-gradient(90deg, #d2e6e5 0%, #f4e9ed 100%);
}
.ttlh1Type1 .ttlh1Type1Wrap{
max-width: 1200px;
margin: auto;
}
.ttlh1Type1 .ttlh1Type1Inner{
padding: 4% 0;
padding-bottom: calc(4% + 59px);
}
.ttlh1Type1 .flex{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
position: relative;
}
.ttlh1Type1 .flex:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 32%;
width: 7px;
height: 34px;
margin: auto;
background: url(/lab/img/index_h1_bg01.png);
background-size: contain;
}
.ttlh1Type1 .logo{
display: flex;
flex-wrap: wrap;
flex-basis: 26.5%;
}
.ttlh1Type1 .logo1{
width: 72.4%;
max-width: 228px;
}
.ttlh1Type1 .logo2{
width: 100%;
max-width: 315px;
margin-top: 15px;
}
.ttlh1Type1 .txt{
flex-basis: 62.5%;
margin-left: auto;
}
.ttlh1Type1 .txt p{
color: #1a1a1a;
font-size: 1.5rem;
line-height: 1.8;
font-weight: normal;
}
.ttlh1Type1 img{
display: block;
width: auto;
max-width: 100%;
}

@media screen and (max-width:767px) {
.ttlh1Type1 .ttlh1Type1Inner{
padding: 7% 0;
}
.ttlh1Type1 .flex:after{
content: normal;
}
.ttlh1Type1 .logo{
justify-content: center;
flex-basis: 100%;
}
.ttlh1Type1 .logo1,
.ttlh1Type1 .logo2{
flex-basis: 100%;
width: auto;
max-width: none;
}
.ttlh1Type1 .logo1 img{
width: 58%;
max-width: 199px;
margin: auto;
}
.ttlh1Type1 .logo2 img{
width: 58%;
max-width: 199px;
margin: auto;
}
.ttlh1Type1 .txt{
flex-basis: 100%;
margin-top: 1em;
}
.ttlh1Type1 .txt p{
font-size: 1.3rem;
}
}


/* **************************************************************

tabList

************************************************************** */
.tabList{
position: relative;
}
.tabList:before{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 20px;
background: #f2f2f2;
z-index: 1;
}
.tabList:after{
content: "";
display: block;
position: absolute;
top: -49px;
left: 0;
right: 0;
width: calc(100% - 1px);
height: 49px;
background: #e6e6e6;
box-shadow: 0 0 5px 0 rgb(0,0,0,0.3);
}
.tabList ul{
position: relative;
z-index: 1;
}
.tabList li > .tabBtn{
position: absolute;
top: -59px;
width: calc((100% - 3px) / 4);
z-index: 1;
}
.tabList li:nth-of-type(1) > .tabBtn{
left: 0;
}
.tabList li:nth-of-type(2) > .tabBtn{
left: calc(100% / 4 * 1);
}
.tabList li:nth-of-type(3) > .tabBtn{
left: calc(100% / 4 * 2);
}
.tabList li:nth-of-type(4) > .tabBtn{
left: calc(100% / 4 * 3);
}
.tabList .tabBtn a{
display: flex;
justify-content: center;
align-items: center;
position: relative;
border-top: 5px solid #d9d9d9;
padding: 1em 0;
font-size: 1.6rem;
color: #333;
text-decoration: none;
background: #FFF;
}
.tabList .tabBtn a.open{
border-color: #198dd7;
color: #3a9cda;
background: #f2f2f2;
}

.tabList .subList{
transform: translateY(20px);
transition: height 0.3s ease;
height: 0;
width: 100%;
background: transparent;
box-shadow: none;
overflow: hidden;
}
.tabList .subList.open{
height: auto;
}
.tabList .subList ul{
box-sizing: border-box;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
width: 100%;
padding: 15px 20px;
background: #FFF;
}

.tabList .subList ul{
display: none;
}
.tabList .subList.anm ul,
.tabList .subList.open ul{
display: flex;
}

.tabList .subList li{
margin: 5px;
padding: 0;
}
.tabList .subList li a{
display: inline-block;
border: 1px solid #333;
border-radius: 3px;
padding: 0.3em 1em 0.25em 1em;
color: #333;
font-size: 1.3rem;
text-decoration: none;
white-space: nowrap;
background: #FFF;
}
.tabList .subList li.color_blue a{
border-color: #77bbe8;
color: #FFF;
background: #77bbe8;
}
.tabList .subList li.color_orange a{
border-color: #e8a976;
color: #FFF;
background: #e8a976;
}
.tabList .subList li.color_green a{
border-color: #71be9c;
color: #FFF;
background: #71be9c;
}

@media screen and (min-width:768px) {
.tabList .tabBtn a:hover{
border-color: #198dd7;
color: #3a9cda;
background: #f2f2f2;
}
.tabList .subList li:hover{
padding: 0;
}
.tabList .subList li:hover ul{
display: block;
}
.tabList .subList li.color_blue a:hover{
color: #77bbe8;
background: #FFF;
}
.tabList .subList li.color_orange a:hover{
color: #e8a976;
background: #FFF;
}
.tabList .subList li.color_green a:hover{
color: #71be9c;
background: #FFF;
}
}

@media screen and (max-width:767px) {
.tabList{
padding: 8.3% 0;
}
.tabList:before,
.tabList:after{
content: normal;
}
.tabList:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: -15px;
right: 0;
width: calc(100% + 30px);
height: 100%;
background: #FFF;
box-shadow: none;
}
.tabList li + li{
margin-top: 15px;
}
.tabList li > .tabBtn{
position: static;
width: auto;
}
.tabList .tabBtn a{
border-width: 3px;
padding: 0.75em 0;
font-size: 1.5rem;
background: #f2f2f2;
}
.tabList .tabBtn a.acd:before,
.tabList .tabBtn a.acd:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 10px;
width: 1px;
height: 15px;
margin: auto;
background: #333;
}
.tabList .tabBtn a.acd:before{
right: 10px;
width: 15px;
height: 1px;
}
.tabList .tabBtn a.acd:after{
right: 17px;
width: 1px;
height: 15px;
}
.tabList .tabBtn a.acd.open:after{
content: normal;
}
.tabList .subList{
transform: none;
}
.tabList .subList ul{
padding: 1em 0.5em;
}
.tabList .subList li {
margin: 5px;
}
.tabList .subList li.all{
flex-basis: 100%;
}
}

/* **************************************************************

articleList

************************************************************** */
.article{
margin-top: 0;
background: #f2f2f2;
}
.article .articleList{
padding-top: 3%;
}
.article .articleList * + .ttlh2Type1{
margin-top: 4.5%;
}
.article .articleList .data{
position: relative;
background: #FFF;
}
.article .articleList a{
color: #333;
text-decoration: none;
}
.article .articleList .new{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
border-radius: 60px;
color: #FFF;
background: #ff6e7f;
box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
}
.article .articleList img{
display: block;
width: 100%;
}
.article .articleList .txt{
display: flex;
align-items: center;
}
.article .articleList .txt > *{
    flex: 1;
}
.article .articleList .ttl{
font-weight: bold;
}
.article .articleList .icon{
display: flex;
flex-wrap: wrap;
margin-top: 0.5em;
}
.article .articleList .icon li{
margin: 5px 8px 0 0;
padding: 0.5em 1em;
color: #FFF;
font-size: 1.1rem;
background: #ebebeb;
}
.article .articleList .icon li.color_blue{
background: #77bbe8;
}
.article .articleList .icon li.color_orange{
background: #e8a976;
}
.article .articleList .icon li.color_green{
background: #71be9c;
}
.article .articleList .date{
margin-top: 1em;
}


.article .articleList .newArticle .data{
margin-top: 5.5%;
}
.article .articleList .newArticle .data + .data{
margin-top: 4%;
}
.article .articleList .newArticle .new{
top: -20px;
left: -20px;
width: 60px;
height: 60px;
}
.article .articleList .newArticle .flex{
display: flex;
flex-wrap: wrap;
}
.article .articleList .newArticle .flex > *{
flex: 1;
}
.article .articleList .newArticle figure{
padding: 1em 0 1em 1em;
}
@media screen and (min-width:768px) {
.article .articleList .newArticle .txt{
width: 65%;
flex: none;
}
}
.article .articleList .newArticle .txt > div{
padding: 1em 8%;
}
.article .articleList .newArticle .ttl{
font-size: 2.8rem;
}
.article .articleList .newArticle .icon li{
font-size: 1.3rem;
}
.article .articleList .list{
margin-top: 5.6%;
}
.article .articleList .list > ul{
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.article .articleList .list .data{
flex-basis: 23%;
margin-left: 2.6665%;
}
.article .articleList .list .data:nth-of-type(4n + 1){
margin-left: 0;
}
.article .articleList .list .data:nth-of-type(n + 5){
margin-top: 2.5%;
}
.article .articleList .list .new{
top: -13px;
left: -13px;
width: 46px;
height: 46px;
}
.article .articleList .list .ttl{
font-size: 1.6rem;
}
.article .articleList .list .txt{
padding: 1em;
}

@media screen and (max-width:767px) {
.article .articleList{
margin-top: 4%;
}
.article .articleList .ttlh2Type1{
font-size: 1.8rem;
}
.article .articleList .date{
font-size: 1.3rem;
}
.article .articleList .icon li{
min-width: 0;
padding: 0.5em;
font-size: 0.9rem;
}
.article .articleList .newArticle .data{
margin-top: 7.5%;
}
.article .articleList .newArticle .data + .data{
margin-top: 7.5%;
}
.article .articleList .newArticle .flex > * {
flex-basis: 100%;
}
.article .articleList .newArticle figure{
padding: 1em 1em 0 1em;
}
.article .articleList .newArticle .txt > div{
padding: 1em;
}
.article .articleList .newArticle .new{
width: 45px;
height: 45px;
top: -15px;
left: 0;
}
.article .articleList .newArticle .ttl{
font-size: 1.6rem;
}
.article .articleList .newArticle .icon li{
font-size: 1.1rem;
}
.article .articleList .list > ul{
justify-content: space-between;
}
.article .articleList .list .new{
top: -15px;
left: 0;
width: 36px;
height: 36px;
font-size: 1.5rem;
}
.article .articleList .list .data{
flex-basis: calc((100% - 15px) / 2);
margin: 15px 0 0 0;
}
.article .articleList .list .data:nth-of-type(n + 5) {
margin: 15px 0 0 0;
}
.article .articleList .list .ttl{
font-size: 1.4rem;
}
.article .articleList .list .txt {
padding: 0.75em;
}
}

/* **************************************************************

category

************************************************************** */
.category{
margin-top: 6.5%;
margin-bottom: 6.5%;
padding: 3% 1em 2% 1em;
background: #FFF;
}
.category .ttl{
font-size: 2.4rem;
text-align: center;
}
.category .categoryList{
min-height: calc(6em + 20px);
margin-top: 1.5em;
}
.category .categoryList.open{
height: auto;
}
.category .categoryList ul{
display: flex;
flex-wrap: wrap;
padding-bottom: 1.5em;
}
.category .categoryList li{
margin: 5px;
}
.category .categoryList li a{
display: block;
border: 1px solid #3a9cda;
border-radius: 5px;
padding: 0.4em 1.5em 0.4em 1.5em;
font-size: 1.5rem;
color: #2b96d9;
background: #FFF;
}
.category .btn{
position: relative;
display: flex;
justify-content: center;
border-top: 1px solid #d9d9d9;
padding-top: 1.5em;
}
.category .btn:before{
transition: height 0.3s ease, top 0.3s ease;
content: "";
display: block;
position: absolute;
width: 100%;
top: -46px;
height: 45px;
background-image: linear-gradient(0deg, rgba(255,255,255,1) 30%, rgba(255,255,255,0.5) 100%);
}
.category .open + .btn:before{
top: 0px;
height: 0;
}
.category .btn p{
width: 100%;
text-align: center;
background: #FFF;
}
.category .btn a{
position: relative;
display: inline-block;
padding-right: 30px;
color: #2b96d9;
font-size: 1.8rem;
text-align: center;
background: #FFF;
}
.category .btn .more{
display: inline;
}
.category .btn .close{
display: none;
}
.category .btn .open .more{
display: none;
}
.category .btn .open .close{
display: inline;
}
.category .btn .icon{
display: block;
position: absolute;
right: 0;
top: -2px;
bottom: 0;
width: 18px;
height: 18px;
margin: auto;
}
.category .btn .icon:before,
.category .btn .icon:after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #4bacea;
}
.category .btn .icon:before{
width: 2px;
height: 19px;
}
.category .btn .icon:after{
width: 19px;
height: 2px;
}
.category .btn .open .icon:before{
content: normal;
}

@media screen and (max-width:767px) {
.category {
display: block;
padding: 5.5% 1em;
}
.category .ttl{
font-size: 1.8rem;
}
.category .categoryList{
min-height: calc(6em + 8px);
}
.category .categoryList{
margin-top: 5.5%;
}
.category .categoryList ul{
padding-bottom: 1em;
}
.category .categoryList li{
margin: 3px;
}
.category .categoryList li a{
font-size: 1.2rem;
}
.category .btn{
padding-top: 1em;
}
.category .btn:before{
background-image: linear-gradient(0deg, rgba(255,255,255,1) 40%, rgba(255,255,255,0.5) 100%);
}
.category .btn a{
padding-right: 25px;
font-size: 1.5rem;
}
.category .btn .icon{
width: 15px;
height: 15px;
}
.category .btn .icon:before {
width: 2px;
height: 15px;
}
.category .btn .icon:after {
width: 15px;
height: 2px;
}
}



/* **************************************************************

linkBlock

************************************************************** */
.linkBlock{
background: #FFF;
}
.linkBlock .list{
margin: 0 3%;
padding: 5.5% 0;
}
.linkBlock .list ul{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-end;
}
.linkBlock .list li{
flex-basis: 42.85%;
}
.linkBlock .list li:nth-of-type(n + 3){
margin-top: 1.5em;
}
.linkBlock .list a{
display: block;
position: relative;
border-bottom: 2px solid #3a9cda;
padding: 0.75em 1em;
padding-right: calc(1em + 40px);
font-size: 1.8rem;
color: #3a9cda;
}
.linkBlock .list a:after{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 15px;
width: 30px;
height: 8px;
margin: auto;
background: url(/common/images/icon_arrow01_blue.png) center no-repeat;
background-size: contain;
}
@media screen and (max-width:767px) {
.linkBlock .list{
margin: 0;
padding: 5.5% 0 8% 0;
}
.linkBlock .list li{
flex-basis: 100%;
}
.linkBlock .list li:nth-of-type(n + 3){
margin-top: 1em;
}
.linkBlock .list li + li{
margin-top: 1em;
}
.linkBlock .list a{
border-width: 1px;
padding: 0.5em 0.5em;
font-size: 1.5rem;
}
.linkBlock .list a:after{
right: 7px;
width: 23px;
height: 6px;
}
}