@charset "UTF-8";
/* CSS Document */

@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15); /* 拡大率 */
}
}


/*==================================================
背景色が伸びて出現
===================================*/

/*全共通*/

.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/*　はみ出た色要素を隠す　*/
opacity:0;
}

@keyframes bgextendAnimeBase{
from {
opacity:0;
}

to {
opacity:1;  
}
}

/*中の要素*/
.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #000;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
opacity: 0;
}

/* テキストをポップアップで表示できるプラグイン　*/
.featherlight-sample {
display: none;
}

/*PC*/
@media print, screen and (min-width: 768px) {
/* slider
--------------------------------------------*/
#mv {
position: relative;
}

#mv::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 1200px;
height: 50px;
background: #FFF;
margin-left: -600px;
z-index: 1;
}

.slider li {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100svh;
height: 100vh;

margin: 0;
}
.slider li::before {
content: '';
background: rgba(0, 0, 0, 0.1);
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
right: 0;
z-index: 1;
}
.slider .slider01 {
background-image: url("../images/slider/img01.jpg");
}
.slider .slider02 {
background-image: url("../images/slider/img02.jpg");
}
.slider .slider03 {
background-image: url("../images/slider/img03.jpg");
}
.slider .slider04 {
background-image: url("../images/slider/img04.jpg");
}
.slider .slick-dots {
display: none;
}
.slider_txt_box {
position: absolute;
bottom: 20%;
left: 5%;
color: #fff;
}
.slider_txt_box h1 {
font-size: 3.3rem;
font-weight: 300;
margin-bottom: 40px;
line-height: 1.2;
text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.slider_txt_box h2 {
font-size: 1.2rem;
font-weight: 100;
line-height: 1.7;
}
.add-animation {
animation: zoomUp 10s linear 0s normal both;
}


/* WHAT'S NEW
--------------------------------------------*/
#news .news_wrap{
width: 100%;
height: 200px;
overflow-y: scroll;
margin: 0 auto 60px;
}

#news .news_list_item {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}
#news .news_list_item dt {
width: 10%;
}
#news .news_list_item dd {
width: 88%;
} 

#news .news_list_item dd .link_wrap {
display: flex;
flex-flow: wrap;
font-size: 0.8rem;
margin:10px 0 0;
}

#news .news_wrap .link_wrap span {
width: 15px;
display: inline-block;
margin-right: 5px;
}

#news .sns_btn{
width: 300px;
margin: 0 auto;
}

#news .sns_btn li{
width: 100%;
position: relative;
}

#news .sns_btn li a{
border: 1px solid #000;
padding: 10px 5px;
box-sizing: border-box;
display: block;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}

#news .sns_btn li::before{
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 25px;
height: 25px;
}

#news .sns_btn li:first-child:before{
background: url("../images/com/facebook_c.png") center center no-repeat;
background-size: cover;
}

#news .sns_btn li:last-child:before{
background: url("../images/com/instagram_c.png") center center no-repeat;
background-size: cover;
}



/* BUSINESS
--------------------------------------------*/
#business.section_wrap{
padding: 150px 0 0;
box-sizing: border-box;
min-width: 1200px;
}

#business.section_wrap::before {
position: absolute;
top: 0;
right: 0;
bottom: 15%;
left: 17.7%;
z-index: -1;
content: "";
background: #f1f4f6;
}

#business .business_tit_wrap{
position: relative;
width: auto;
margin: 0 100px;
}

#business .business_tit_wrap .hed_tit{
text-align: left;
width: 50%;
margin: 0 0 -100px;
}

#business .business_tit_wrap .hed_tit::before {
left:2.7%;
margin-left: 0;
}

#business .business_wrap {
display: flex;
margin: 0 auto 150px;
}

#business .business_box {
width: calc(50% + 90px);
padding-top: 150px;
overflow:hidden;
}

#business .business_box .business_box_inner {
position: relative;
z-index: 0;
display: flex;
flex-direction: column;
justify-content: center;
height: 900px;
padding: 100px calc(7.3% + 178px) 100px 7.3%;
box-sizing: border-box;
overflow: hidden;
background:url("../images/index/bg_img01.jpg") 0 0 no-repeat;
background-size: cover;
color: #FFF;
}

#business .business_box .business_box_inner .lead{
font-size: 1.8rem;
font-weight: 300;
line-height: 1.6;
margin: 0 0 30px;
}

#business .business_box .business_box_inner .txt{
line-height: 2;
margin: 0 0 50px;
}

#business .business_box .business_box_inner .business_tit{
font-size: 1.2rem;
font-weight: 300;
line-height: 1;
color: #26c1d5;
margin: 0 0 30px;
position: relative;
}

#business .business_box .business_box_inner .business_tit::before{
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 1px;
background: #a5aaaf;
}

#business .business_box .business_box_inner .business_tit::after{
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 20%;
height: 1px;
background: #26c1d5;
z-index: 1;
}

#business .business_box .business_box_inner .business_list{
display: flex;
flex-wrap: wrap;
}

#business .business_box .business_box_inner .business_list li{
width: 49%;
padding:10px 5px;
box-sizing: border-box;
text-align: center;
border: 1px solid #a5aaaf;
font-size: 1.1rem;
line-height: 1;
margin-right: 2%;
margin-bottom: 2%;
background: rgba(0,0,0,0.5)
}

#business .business_box .business_box_inner .business_list li:nth-child(2n){
margin-right: 0;
}

#business .business_box .business_box_inner .business_list li a{
color: #26c1d5;
display: block;
}

#business .business_img {
flex: 1 1 auto;
height: 900px;
margin: 0 0 0 -178px;
overflow: hidden;
background: url("../images/index/business_img.jpg") center center no-repeat;
background-size: cover;
z-index: 2;
}

#business .business_list_img{
width: 100%;
margin: 0 auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#business .business_list_img li{
width: 25%;
position: relative;
}



/* COMPANY
--------------------------------------------*/
#company.section_wrap{
padding: 150px 0 0;
box-sizing: border-box;
}

#company.section_wrap::before {
position: absolute;
top: 0;
right: 0;
bottom:6%;
left: 100px;
z-index: -1;
content: "";
background: #f1f4f6;
}

#company .company_wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 0 150px 170px;
}

#company .company_box {
width: 44%;
}

#company .company_img {
width: 50%;
height: 700px;
background: url("../images/index/c_img01.jpg") center center no-repeat;
background-size: cover;
}

#company .company_list_img{
margin: 0 0 0 200px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#company .company_list_img li{
width: 31%;
position: relative;
}




/* CONTACT
--------------------------------------------*/
#contact .contact_txt{
text-align: center;
margin: 0 auto 60px;
}



/* ACCESS
--------------------------------------------*/
#access .google-map {
width: 100%;
}

#access .google-map iframe {

}

}
/*sp*/
@media only screen and (max-width: 767px) {

/* slider
--------------------------------------------*/
#mv {
position: relative;
margin-bottom: 50px;
}

#mv::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 96%;
height: 25px;
background: #FFF;
margin-left: -48%;
z-index: 1;
}

.slider li {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 90svh;
height: 90vh;
margin: 0;
}
.slider li::before {
content: '';
background: rgba(0, 0, 0, 0.2);
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
right: 0;
z-index: 1;
}
.slider .slider01 {
background-image: url("../images/slider/img01.jpg");
}
.slider .slider02 {
background-image: url("../images/slider/img02.jpg");
}
.slider .slider03 {
background-image: url("../images/slider/img03.jpg");
}
.slider .slider04 {
background-image: url("../images/slider/img04.jpg");
}
.slider .slick-dots {
display: none;
}
.slider_txt_box {
position: absolute;
bottom: 10%;
left: 3%;
color: #fff;
width: 90%;
}
.slider_txt_box h1 {
font-size:1.6rem;
font-weight: 300;
margin-bottom: 20px;
line-height: 1.4;
text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
.slider_txt_box h2 {
font-size: 0.85rem;
font-weight: 100;
letter-spacing: -0.01em;
line-height: 1.7;
}
.add-animation {
animation: zoomUp 10s linear 0s normal both;
}


/* WHAT'S NEW
--------------------------------------------*/
#news .news_wrap{
width: 100%;
height: 260px;
overflow-y: scroll;
margin: 0 auto 60px;
}

#news .news_list_item {
margin-bottom: 30px;
}
#news .news_list_item dt {
width: 100%;
margin: 0 0 5px;
}
#news .news_list_item dd {
width: 100%;
} 

#news .news_list_item dd .link_wrap {
display: flex;
flex-flow: wrap;
font-size: 0.8rem;
margin:10px 0 0;
}

#news .news_wrap .link_wrap span {
width: 15px;
display: inline-block;
margin-right: 5px;
}

#news .sns_btn{
width: 300px;
margin: 0 auto;
}

#news .sns_btn li{
width: 100%;
position: relative;
margin: 0 0 30px;
}

#news .sns_btn li:last-child{
margin-bottom: 0;
}

#news .sns_btn li a{
border: 1px solid #000;
padding: 10px 5px;
box-sizing: border-box;
display: block;
text-align: center;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}

#news .sns_btn li::before{
content: "";
position: absolute;
top: 10px;
left: 10px;
width: 25px;
height: 25px;
}

#news .sns_btn li:first-child:before{
background: url("../images/com/facebook_c.png") center center no-repeat;
background-size: cover;
}

#news .sns_btn li:last-child:before{
background: url("../images/com/instagram_c.png") center center no-repeat;
background-size: cover;
}


/* BUSINESS
--------------------------------------------*/
#business.section_wrap{
padding: 50px 0 0;
box-sizing: border-box;
}

#business.section_wrap::before {
position: absolute;
top: 0;
right: 0;
bottom: 0%;
left: 0;
z-index: -1;
content: "";
background: #f1f4f6;
}

#business .business_tit_wrap{
position: relative;
width: auto;
margin: 0 5%;
}

#business .business_tit_wrap .hed_tit{
text-align: left;
margin: 0 0 30px;
}

#business .business_tit_wrap .hed_tit::before {
left:2.7%;
margin-left: 0;
}

#business .business_wrap {
margin: 0 auto 50px;
}

#business .business_box {
width: 100%;
}

#business .business_box .business_box_inner {
position: relative;
padding:10% 5%;
box-sizing: border-box;
overflow: hidden;
background:url("../images/index/bg_img01.jpg") 0 0 no-repeat;
background-size: cover;
color: #FFF;
}

#business .business_box .business_box_inner .lead{
font-size: 1.2rem;
font-weight: 300;
line-height: 1.6;
margin: 0 0 20px;
}

#business .business_box .business_box_inner .txt{
line-height: 2;
font-size: 1rem;
margin: 0 0 30px
}

#business .business_box .business_box_inner .business_tit{
font-size: 1.2rem;
font-weight: 300;
line-height: 1;
color: #26c1d5;
margin: 0 0 30px;
position: relative;
}

#business .business_box .business_box_inner .business_tit::before{
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 1px;
background: #a5aaaf;
}

#business .business_box .business_box_inner .business_tit::after{
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 20%;
height: 1px;
background: #26c1d5;
z-index: 1;
}

#business .business_box .business_box_inner .business_list{
}

#business .business_box .business_box_inner .business_list li{
width: 100%;
padding:10px 5px;
box-sizing: border-box;
text-align: center;
border: 1px solid #a5aaaf;
font-size: 1.1rem;
line-height: 1;
margin-bottom: 10px;
background: rgba(0,0,0,0.5)
}

#business .business_box .business_box_inner .business_list li a{
color:#26c1d5 !important;
display:block;
}

#business .business_img {
flex: 1 1 auto;
height: 400px;
margin:0 auto;
overflow: hidden;
background: url("../images/index/business_img.jpg") center center no-repeat;
background-size: cover;
}

#business .business_list_img{
width: 100%;
margin: 0 auto 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#business .business_list_img li{
width: 50%;
position: relative;
}


/* COMPANY
--------------------------------------------*/
#company.section_wrap{
padding: 50px 0 0;
box-sizing: border-box;
}

#company.section_wrap::before {
position: absolute;
top: 0;
right: 0;
bottom:2%;
left: 0;
z-index: -1;
content: "";
background: #f1f4f6;
}

#company .company_wrap {
width: 90%;
margin: 0 auto 50px;
}

#company .company_box {
width: 100%;
margin: 0 auto 30px;
}

#company .company_img {
width: 100%;
height: 300px;
background: url("../images/index/c_img01.jpg") center center no-repeat;
background-size: cover;
}

#company .company_list_img{
margin:0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

#company .company_list_img li{
width: 32%;
position: relative;
}



/* CONTACT
--------------------------------------------*/
#contact .contact_txt{
width: 90%;
margin: 0 auto 30px;
}



/* ACCESS
--------------------------------------------*/
#access .google-map {
width: 100%;
}

#access .google-map iframe {

}

}