@charset "utf-8";

body{
  font-family:sans-serif;
  background-color: #fff;

}

.index__wrap{
  background-image: url(../img/back.jpg);
  background-size:100%;
  background-repeat: repeat;
  width: 100%;
}

.index__main{
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    text-align: center;
}

.main__headbox{
  background-image: url(../img/index_topback.png);
  background-size:100%;
  background-position: center;
  background-repeat: no-repeat;

  width: 100%;
  margin: 0 auto;
  padding-top: 5vh;
  text-align: center;
}

.main__headbox img{
  width: 100%;
  max-width: 1500px;
}

.map{
    width: 100%;
    height: 840px;
}


/*タブコンテンツ全体の要素*/
.tab_content{
    width: 80%;
    margin: 30px auto 0 auto;
  }
  
  /*タブ部分の基本設定*/
  .tab_list{
    display: flex;
    /* justify-content: space-between; */
    border-left: solid 2px #006aa7;


  }
  
  .tab_item{
    width: calc(200px - 2px);
    position: relative;
    color: #878787;
  }
  
  .tab_item label{
    padding: 8px 0;
    display: block;
    cursor: pointer;
    text-align: center;
    border-right: solid 2px #006aa7;
  }

  .tab_item:hover{
    transition: 0.5s;
    background-color: #007fc380;
    color: #fff;
  }
  
  /*チェックが入ったときのタブ部分の指定*/
  #item1:checked ~ .tab_list .tab_item1,
  #item2:checked ~ .tab_list .tab_item2,
  #item3:checked ~ .tab_list .tab_item3{
    /* border: solid 1px #000; */
    background-color: #0080c3;
    /* z-index: 2; */
    color: #fff;
  }
  
  #item1:checked ~ .tab_list .tab_item1 label,
  #item2:checked ~ .tab_list .tab_item2 label,
  #item3:checked ~ .tab_list .tab_item3 label{
    cursor: auto;

  }
  
  /*コンテンツ部分の基本設定*/
  .content_wrap{
    width: 100%;
    height: 0;
    margin-top: 50px;
  }
  
  .content{
    position: relative;
    /* z-index: 1; */
    padding: 20px 10px;
    display: none;
    /* border: solid 1px #000; */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  /*チェックが入ったときのコンテンツ部分の指定*/
  #item1:checked ~ .content_wrap .content1,
  #item2:checked ~ .content_wrap .content2,
  #item3:checked ~ .content_wrap .content3{
    display: block;
    padding-top: 69.8207171314741%;
    height: 0;
  }

  .content1{
    background-image: url(../img/1f_2.jpg);    
  }

  .content2{
    background-image: url(../img/2f_2.png);
  }

  .content3{
    background-image: url(../img/3f_2.png);
  }


  .comp__btn{
    margin-top: 72%;
    margin-bottom: 14%;
    width: 60%;
    max-width: 1000px;
    box-shadow: 0px 0.3em 0 rgba(0, 0, 0, 0.1);
    transition: 0.3s;
  }


  .comp__btn:hover {
    transform: translate3d(0, 5px, 0);
    box-shadow: none;
  }


  /* 堺 */

  .sakai{
    position:absolute;
    width: 5%;
    max-width: 60px;
  }

  .sakai:hover{
    opacity: 0.7;
  }

  .sakai1_1{
    top: 45%;
    left: 67%;
  }

  .sakai1_2{
    top: 48%;
    left: 57%;
  }

  .sakai1_3{
    top: 41%;
    left: 51.5%;
  }

  .sakai1_4{
    top: 47%;
    left: 45%;
  }

  .sakai1_5{
    top: 58%;
    left: 30.5%;
  }

  .sakai1_6{
    top: 78%;
    left: 13%;
  }


  .sakai2_1{
    top: 49%;
    left: 68.5%;
  }

  .sakai2_2{
    top: 26%;
    left: 43%;
  }

  .sakai2_3{
    top: 65%;
    left: 37%;
  }



  .sakai3_1{
    top: 40%;
    left: 82%;
  }

  .sakai3_2{
    top: 48%;
    left: 68%;
  }

  .sakai3_3{
    top: 27%;
    left: 39.5%;
  }

  .sakai3_4{
    top: 65%;
    left: 36%;
  }
  



 /* モーダル  */

.content{
    margin: 0 auto;
    padding: 40px;
}
.modal{
    display: none;
    position: fixed;
    z-index: 500;
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    left: 50%;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
    max-width: 600px;
    /* text-align: right; */

}

.modal__overflow{
  max-height: 570px;
  overflow: scroll;
}



.js-modal-close{
  top: 0;
  right: 0;
  color: #fff;
  font-size: 2rem;
  margin-left: 95%;
  /* float: right; */
}

.modal .modal__content img{
  max-height: 1030px;
}


.modal__content10 img{
  height: 80%;
  max-height: 1030px;
}



/* 企業 */

.main__comp{
  width: 100%;
  margin: 40px auto 0 auto;
  text-align: center;
}

.comp__head{
  width: 100%;
  text-align: center;
  background-image: url(../img/color.png);
}

.comp__head img{
  width: 100%;
  max-width: 1240px;
}


.comp_copy{
  width: 80%;
  max-width: 1240px;
  font-size: min(2.3vw,30px);
  font-weight: bold;
  margin: 8vw auto 0 auto;

}



.compbox{
  width: 80%;
  max-width: 1240px;
  margin: 8vw auto 0 auto;
  text-align: center;


}


.comp__in01{
  margin: 4vh auto 2vw auto;
  width: 90%;
  display: flex;
  justify-content: space-between;

  /* background-color: #1a00c3; */

}

.comp__in01 .comp__item{
  width: 70%;
  
  /* background-color: #fff; */

}



.comp__in02{
  display: flex;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  width: 80%;
  
  /* background-color: #c3006b; */

}

.comp__in02 .comp__item{
  width: 95%;
  
  /* background-color: #fff; */

}

.comp__in02 .comp__a_item{
width: 25%;
margin: 3vw 5px;
display: flex;
align-items: center;
}

.comp__item:hover{
  opacity: 0.5;
}


.comp__a_back:hover{
  opacity: 0.5;
  transition: 0.3s;
}

.comp__a_back img{
  width: 50%;
  max-width: 600px;
  margin: 5vh 0;
}




/* footer */

.footer{
  font-size: 1.0rem;
  background-color: rgb(255, 255, 255);
}

.clearfix { *zoom: 1; }

.clearfix:after { content: ""; display: table; clear: both; }


@media screen and (min-width: 769px) { .footer { min-width: 1280px; } }

/* .footer .pagetop { margin-top: 75px; } */

.footer .pagetop:before { content: ""; display: block; width: 100%; height: 1px; background-image: -webkit-linear-gradient(left, #abc4fa, #bef3ea); background-image: -o-linear-gradient(left, #abc4fa, #bef3ea); background-image: linear-gradient(to right, #abc4fa, #bef3ea); }

.footer .pagetop:after { content: ""; display: block; width: 100%; height: 1px; background-image: -webkit-linear-gradient(left, #abc4fa, #bef3ea); background-image: -o-linear-gradient(left, #abc4fa, #bef3ea); background-image: linear-gradient(to right, #abc4fa, #bef3ea); }

@media screen and (min-width: 769px) { .footer .pagetop { margin-top: 0; } }

.footer .pagetop .pagetop__inner { text-align: center; }

@media screen and (min-width: 769px) { .footer .pagetop .pagetop__inner { text-align: right; padding: 0 20px; width: 1280px; margin: 0 auto; } }

.footer .pagetop .pagetop__inner a { display: block; padding: 10px 0; font-size: 0.7rem; color: #3EA9E4; text-decoration: none; }

@media screen and (min-width: 769px) { .footer .pagetop .pagetop__inner a { display: inline-block; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; }
  .footer .pagetop .pagetop__inner a:hover { filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } }

.footer .pagetop .pagetop__inner a span { position: relative; padding-right: 15px; }

.footer .pagetop .pagetop__inner a span:after { content: ""; position: absolute; top: 50%; right: 0px; width: 8px; height: 8px; margin-top: -1px; border-top: 1px solid #3EA9E4; border-right: 1px solid #3EA9E4; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

.footer__head { padding: 25px 25px 40px; }

@media screen and (min-width: 769px) { .footer__head { padding: 40px 40px 50px; width: 1280px; margin: 0 auto; } }

.footer__nav { font-size: 0.7rem; margin-bottom: 15px; }

@media screen and (min-width: 769px) { .footer__nav { font-size: 0.7rem; width: 1010px; float: left; letter-spacing: 0.2rem; margin-bottom: 0; }
  .footer__nav a { -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; line-height: 1.4;}
  .footer__nav a:hover { filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } }

.footer__nav li { padding-bottom: 10px; }

@media screen and (min-width: 769px) { .footer__nav li { float: left; width: 25%; } }

.footer__nav li a { color: #444; text-decoration: none;}

.footer__sns img { width: 43px !important; height: 43px !important; }

@media screen and (min-width: 769px) { .footer__sns img { width: 40px !important; height: 40px !important; } }

@media screen and (min-width: 769px) { .footer__sns { float: left; width: auto; } }

.footer__sns dt { display: block; font-size: 1.0rem; padding-bottom: 10px; letter-spacing: 0.25rem; font-weight: normal; }

@media screen and (min-width: 769px) { .footer__sns dt { font-size: 1.0rem; } }

.footer__sns dd { float: left; width: 40px; }

.footer__sns dd { margin-left: 10px; }
.footer__sns dd:nth-of-type(1) { margin-left: 0; }

@media screen and (min-width: 769px) { .footer__sns dd a { -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; }
  .footer__sns dd a:hover { filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } }

@media screen and (min-width: 769px) { .footer__body { width: 1280px; margin: 0 auto; } }

.footer__body ul { border-top: 1px solid #ccc; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }

@media screen and (min-width: 769px) { .footer__body ul { margin: 0 40px; padding-top: 35px; padding-bottom: 20px; width: 1200px; } }

.footer__body ul li { font-size: 0.7rem; text-align: center; width: 50%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; border-bottom: 1px solid #ccc; }

.footer__body ul li:nth-of-type(odd) { border-right: 1px solid #ccc; }

.footer__body ul li img { max-height: 44px; }

.footer__body ul li a { display: block; width: 100%; }

@media screen and (max-width: 768px) { .footer__body ul li a { padding: 10px 20px; } }

@media screen and (min-width: 769px) { .footer__body ul li { font-size: 0.7rem; text-align: center; float: none; border: none; padding: 0; }
  .footer__body ul li:not(:first-of-type) { border-left: 1px solid #ddd; }
  .footer__body ul li:nth-of-type(odd) { border-right: none; }
  .footer__body ul li img { max-height: none; height: auto; }
  .footer__body ul li:nth-of-type(1) { width: 200px; }
  .footer__body ul li:nth-of-type(1) img { width: 111px; }
  .footer__body ul li:nth-of-type(2) { width: 200px; }
  .footer__body ul li:nth-of-type(2) img { width: 121px; }
  .footer__body ul li:nth-of-type(3) { width: 200px; }
  .footer__body ul li:nth-of-type(3) img { width: 144px; }
  .footer__body ul li:nth-of-type(4) { width: 200px; }
  .footer__body ul li:nth-of-type(4) img { height: 44px; }
  .footer__body ul li:nth-of-type(5) { width: 200px; }
  .footer__body ul li:nth-of-type(5) img { width: auto; height: 44px; }
  .footer__body ul li:nth-of-type(6) { width: 200px; }
  .footer__body ul li:nth-of-type(6) img { width: auto; height: 42px; }
  .footer__body ul li a { display: block; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; }
  .footer__body ul li a:hover { filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } }

@media screen and (max-width: 768px) { .footer__body ul li.num_04 img { max-width: 85%; } }

.footer__body .footer__link { border-bottom: 1px solid #ccc; text-align: center; }

@media screen and (min-width: 769px) { .footer__body .footer__link { text-align: right; margin: 0 40px 20px; padding: 0 0 10px 0; } }

.footer__body .footer__link .link-text { color: #444; font-size: 0.7rem; text-decoration: none; display: block; padding: 11px 0; }

@media screen and (min-width: 769px) { .footer__body .footer__link .link-text { font-size: 0.7rem; letter-spacing: 1.2px; display: inline-block; padding: 0; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; }
  .footer__body .footer__link .link-text:hover { filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; } }

.footer__body .footer__link .link-text span { position: relative; padding-right: 10px; }

.footer__body .footer__link .link-text span:after { content: ""; position: absolute; top: 50%; right: 0px; width: 5px; height: 5px; margin-top: -3px; border-top: 1px solid #444; border-right: 1px solid #444; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

.footer__foot .links { padding: 0 25px 0px; }

.footer__foot .links ul { overflow: hidden; margin-bottom: 10px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; }

@media screen and (min-width: 769px) { .footer__foot .links { padding: 0px 0 0 40px; }
  .footer__foot .links ul { margin-bottom: 0; } }

.footer__foot .links li { float: left; font-size: 0.5rem; padding-bottom: 10px; }

.footer__foot .links li a { display: inline-block; padding: 0 15px; position: relative; text-decoration: none; color: #343434; }

.footer__foot .links li a:after { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 8px; margin-top: -4px; background: #c1c1c1; }

.footer__foot .links li:first-of-type { font-size: 0.5rem; color: #878787; padding: 0 5px 11px 0; }

.footer__foot .links li:first-of-type a:after { display: none; }

.footer__foot .links li:nth-of-type(2) a:after { display: none; }

@media screen and (min-width: 769px) { .footer__foot .links li { padding-bottom: 0px; }
  .footer__foot .links li:first-of-type { font-size: 0.5rem; padding-bottom: 1px; }
  .footer__foot .links li a { -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; padding: 0 17px; }
  .footer__foot .links li a:hover { filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; opacity: 0.5; }
  .footer__foot .links li a:after { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: #c1c1c1; }
  .footer__foot .links li:first-of-type { padding: 0 3px 0 0; } }

.footer__foot .copyright { font-size: 0.5rem; padding: 0px 0 25px; text-align: left; display: inline-block; line-height: 1.5; color: #999; }

@media screen and (min-width: 769px) { .footer__foot { width: 1280px; margin: 0 auto 20px; }
  .footer__foot .copyright { float: left; padding: 7px 0 0 0px; font-size: 1.0rem; text-align: left; } }

.footer__logo { max-width: 108px; margin: 30px auto 20px; }

@media screen and (min-width: 769px) { .footer__logo { float: right; width: auto; height: 54px; max-width: none; text-align: right; margin: 0 40px 0 0; } }



/* 20170922 モンキーFB No.38 パーツリスト追加対応で余白つきの .md-link-text__wrap を追加 */
.md-link-text__wrap { padding: 0 25px; }

@media screen and (min-width: 769px) { .md-link-text__wrap { padding: 0 20px 0 30px; } }

a.link-text { color: #3EA9E4; }

a.link-text.grey { color: #444; }

a.link-text.arrowR { position: relative; padding-right: 10px; }

a.link-text.arrowR:after { content: ""; position: absolute; top: 50%; right: 0px; width: 6px; height: 6px; margin-top: -3px; border-top: 1px solid #3EA9E4; border-right: 1px solid #3EA9E4; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

a.link-text.arrowL { position: relative; padding-left: 10px; }

a.link-text.arrowL:after { content: ""; position: absolute; top: 50%; left: 0px; width: 6px; height: 6px; margin-top: -3px; border-bottom: 1px solid #3EA9E4; border-left: 1px solid #3EA9E4; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

a.link-text.link-blank { background: url(https://lalaport.tripsters.cn/lalaport/iwata/common/image/svg/icon_blank.svg) right center no-repeat; background-size: 12px 14px; padding-right: 15px; }

@media print, screen and (min-width: 769px) { a.link-text.link-blank { padding-right: 20px; -moz-transition: 0.4s; -o-transition: 0.4s; -webkit-transition: 0.4s; transition: 0.4s; } }

a.link-text:hover { text-decoration: none; }


