@charset "utf-8";

@import url(reset.css);
@import url(../_plugin/fontawesome/css/all.min.css);
@import url(../_plugin/aos/aos.css);
@import url(../_plugin/OwlCarousel/assets/owl.carousel.min.css); @import url(../_plugin/OwlCarousel/assets/owl.theme.default.css);
@import url(common_parts.css);
@import url(common.css);


/*
 index
==============================*/
ul { list-style:none; }

/*
body { overflow:hidden; }
section { height:100vh; }
section:nth-of-type(n+1) { padding-top:7rem; }
*/

/* mv ----------*/
#mv { margin-top:0; padding:9rem 5rem 0; display:flex; justify-content:space-between; position:relative; }
#mv picture { order:2; height:100%; width:calc(100% - 42rem); margin-left:auto; }
#mv .text-area { position:absolute; bottom:5%; left:5rem; }
#mv .text-area .copy { font-size:7rem; font-weight: bold; margin-bottom: 3rem; }
#mv .text-area .copy span { color:#fff; }
#mv .text-area .tx { max-width:42rem; padding-right:2rem; font-weight: bold; }
#mv .text-area .btn { max-width:27rem; width:100%; }
#mv .text-area .btn a {  }
#mv .text-area .btn a:after { border-color:#4caf50; }

@media screen and (max-width:1370px){
  #mv picture { width:calc(100% - 35rem); }
  #mv .text-area .copy { font-size:5.8rem; margin-bottom: 2rem; }
  #mv .text-area .tx { max-width:35rem; }
  #mv .text-area .btn { max-width:25rem; }
  #mv .text-area .btn a { padding:1rem 2rem; min-width:20rem; }
}
@media screen and (max-width:1250px){
  #mv picture { width:calc(100% - 25rem); }
  #mv .text-area .copy { font-size:4.2rem; }
  #mv .text-area .tx { max-width:25rem; }
  #mv .text-area .btn { max-width:20rem; }
}
@media screen and (max-width:1024px){
  #mv { display:block; margin-top:7rem; padding:0 2rem; }
  #mv .text-area { left:5rem; bottom:3rem; color:#fff; }
  #mv .text-area .tx { max-width:100%; }
  #mv .text-area .btn a { color:#fff; border-color:#fff; }
}
@media screen and (max-width:800px){
  #mv .text-area .copy { font-size:3rem; }
  #mv .text-area .tx {font-size:1.4rem; }
}
@media screen and (max-width:414px){
  #mv { padding:0; }
  #mv .text-area { position:initial; color:#333; padding:0 2rem; }
  #mv .text-area .copy { margin-bottom: 1rem; }
  #mv .text-area .btn { margin-top: 3rem; }
  #mv .text-area .btn a { color:#333; border-color:#333; }
}



/* service --------------------*/
#service { padding-top:10rem; }
#service .inner {  }
#service .top { max-width:128rem; margin:0 auto 10rem; }

#service img { width:100%; }
#service .img { position:relative; }

#service .company:after , #service .individual:after { clear:both; content:""; display:block; }
#service .company .img,#service .company .text , #service .individual .img,#service .individual .text { width:50%; }

#service .company { margin:0 0 6vw; }
#service .company .img { float:right; }
#service .company .text { float:left; padding:0 4vw 0 8vw; }

#service .individual .img { float:left;}
#service .individual .text { float:right; padding:0 8vw 0 4vw; }

@media screen and (max-width:1290px){
  #service ul li p { margin-right:5rem; }
  #service { padding:10rem 2rem 0; }
}
@media screen and (max-width:1024px){
  
}
@media screen and (max-width:768px){  
  #service .company , #service .individual { display:block; }
  #service .company .img,#service .company .text , #service .individual .img,#service .individual .text { width:100%; }
  #service .company .text,#service .individual .text { padding:0; }
  #service .btn { text-align:center; }
}

@media screen and (max-width:414px){
  #service { padding-top: 5rem; }
}

/* voice --------------------*/
#voice { padding-top:10rem; }
#voice .inner{}
#voice .item { background:#fff; padding:2rem; border:solid 1px #757575; border-radius:15px; min-height:50rem; }
#voice .item ul { display:flex; align-items:center; }
#voice .item ul li {  }
#voice .item ul li:first-child { width:35%; }
#voice .item ul li span {display:block;}
#voice .item ul li img {width:60%;}
#voice .item .tt { margin-top: 1em; margin-bottom: 1rem; font-weight: bold; }
#voice .item .tx { font-size: 1.4rem; }

@media screen and (max-width:1024px){
  #voice .item {  }
}
@media screen and (max-width:768px){
  #voice .item {  }
}
@media screen and (max-width:414px){
  #voice { padding-top: 5rem; }
}


/* slider */
.owl-carousel { margin-top: 3rem; }
.owl-carousel.owl-drag .owl-item { display:flex; }
.owl-carousel .owl-nav.disabled { display:flex; justify-content:space-between; width:10%; margin:0 auto; text-align:center; margin-top: 3rem; }
.owl-carousel .owl-nav button { background:#4CAF50!important; color:#fff!important; border-radius:50%;  }
.owl-carousel .owl-nav button.owl-next { margin-left:2rem; padding:1.5rem 2rem!important; }
.owl-carousel .owl-nav button.owl-prev { margin-right:2rem; padding:1.5rem 2rem!important; }
@media screen and (max-width:1024px){
  .owl-carousel .owl-nav.disabled { width:15%; }
}
@media screen and (max-width:768px){
  .owl-carousel .owl-nav.disabled { width:15%; }
}
@media screen and (max-width:414px){
  .owl-carousel .owl-nav.disabled { width:30%; }
}

/* blog */
#blog { position:relative; padding-top:10rem; }
/*#blog:after { display:block; content:""; position:absolute; left:0; bottom:0rem; width:60%; height:60%; background:#FDD835; z-index:-1;  }*/
#blog .inner {  }
#blog ul.link-list { display:flex; margin-top: 2rem; margin-bottom: 3rem; }
#blog ul.link-list li { width:calc(100% - 3rem * 1/3); background:#4CAF50; text-align:center; font-size: 1.8rem; margin-right:3rem; }
#blog ul.link-list li:last-child { margin-right:0; }
#blog ul.link-list li a { display:block; font-weight: bold; color:#fff; padding:1rem 2rem; }

#blog ul.kizi { display:flex; justify-content:flex-start; flex-wrap:wrap; position:relative; }
#blog ul.kizi li.block { width:calc(25% - 3rem); margin:0 3rem 3rem 0; position:relative; }
#blog ul.kizi li.block:nth-of-type(4n) { margin-right:0; }
#blog ul.kizi li.block a { display:block; color:#757575; }
#blog ul.kizi li.block a:hover { opacity:1; }
/*#blog ul.kizi li.block:nth-of-type(n+5) { margin-top: 3rem; }*/

#blog ul.kizi li.block .img { position:relative; height:28rem; }
#blog ul.kizi li.block .img span { 
  position:absolute; top:0; left:0; 
  width:100%; height:100%;
  display:flex;
  align-items:center; justify-content:center;
  text-align:center;
  background:rgba(0,0,0,.5);
  color:#fff;
  font-weight: bold;
  opacity:0;
  transition: all 0.3s ease-out;
}
#blog ul.kizi li.block img { width:100%; height:100%; object-fit:cover; }
#blog ul.kizi li.block a:hover .img span { opacity:1; transition:all 0.3s ease-out; }
#blog ul.kizi li.block .day { text-align:right; font-size: 1.4rem; }
#blog ul.kizi li.block .text-area {  }
#blog ul.kizi li.block .text-area .cate { font-size: 1.4rem; display:inline-block; margin-top: 1rem; font-weight: bold; }
#blog ul.kizi li.block .text-area .title { font-size:1.8rem; font-weight: bold; }

#blog .btn { text-align:center; }
@media screen and (max-width:1024px){
  #blog ul.kizi li.block .img { height:20rem; }
}
@media screen and (max-width:768px){
  #blog ul.kizi { }
  #blog ul.kizi li.block { width:calc(33.333% - 2rem); margin:0 3rem 3rem 0; }
  #blog ul.kizi li.block:nth-of-type(3n) { margin-right:0; }
  #blog ul.kizi li.block:nth-of-type(4n) { margin-right:3rem; }
  #blog ul.kizi li.block:nth-of-type(n+7) { display:none; }
  #blog ul.kizi li.block .img { height:20rem; }
}
@media screen and (max-width:414px){
  #blog { padding-top: 5rem; }
  #blog ul.link-list { font-size: 1.6rem; display:block; }
  #blog ul.link-list li { width:100%; }
  #blog ul.link-list li:nth-of-type(n+1) { margin-bottom:1px; }
  #blog ul.link-list li a { padding:1rem 2rem; }
  #blog ul.kizi li.block { width:100%; margin-right:0; margin-bottom: 2rem; }
  #blog ul.kizi li.block:nth-of-type(4n) { margin-right:0; }
  #blog ul.kizi li.block:nth-of-type(n+5) { display:none; }
}


/* contact */
#contact { padding-top: 10rem; margin-bottom: 10rem;}
#contact .inner {  }
#contact .top { position:relative; }
@media screen and (max-width:900px){
    #contact { margin-top:9rem; }
}
@media screen and (max-width:414px){
  #contact { padding-top:5rem; }
  #contact .top { height:20rem; }
  #contact .top img { object-fit:cover; height:100%; }
  #contact .top h2 { font-size: 3rem; }
  #contact h3 { font-size:2.2rem;}
}

#form_wrap { max-width:128rem; margin:5rem auto 10rem; }
#form_wrap .form_box { display:flex; justify-content:space-between; align-items:center; }
#form_wrap .form_box .label { width:30%; font-weight: bold; }
#form_wrap .form_box .label:before { content:"必須"; display:inline-block; font-size:1.4rem; margin-right:1em; padding:0.2rem 1rem; color:#fff; font-weight:bold; background:#ff6347; border-radius:5px; }
#form_wrap .form_box .body { width:75%; margin:1rem 0 2rem; }
#form_wrap input , #form_wrap select , #form_wrap textarea { width:100%; padding:1rem; font-size: 1.6rem; box-sizing: border-box; }
#form_wrap textarea { max-width:100%; }
#form_wrap .privacy { overflow-y:scroll; height:30rem; background:#fff; padding:2rem; border:solid 1px #757575; border-radius:10px 0 0 10px; margin-bottom: 3rem; }
#form_wrap .privacy span.title { display:block; font-size: 2rem; font-weight: bold; border-bottom:solid 2px #4caf50; }
#form_wrap .privacy p { margin-bottom:3rem; }
#form_wrap .privacy p:last-child { margin-bottom: 0; }
#form_wrap .check { text-align:center; margin-bottom:3rem;}
#form_wrap .check label { display:flex; justify-content:center; align-content:center; cursor:pointer; }
#form_wrap .check input { display:none; }
#form_wrap .check span { font-weight: bold; }
#form_wrap .check label span:before { width:2rem; height:2rem; content:""; display:block; position:absolute; background:#fff; border:solid 1px #4CAF50; border-radius:50%; top:0; left:-1.5rem; }
#form_wrap .check label span:after { width:1.8rem; height:1.8rem; content:""; display:block; position:absolute; background:#4CAF50; border-radius:50%; top:0.2rem; left:-1.25rem; opacity:0; }
#form_wrap input[type=checkbox]:checked + .wpcf7-list-item-label:after { opacity:1; }
#form_wrap div.submit { text-align:center; }
#form_wrap input[type="submit"] { width:40%; margin:0 auto; background:#4CAF50; color:#fff; font-weight: bold; border:none; border-radius:15px; cursor:pointer; -webkit-appearance: none; }


@media screen and (max-width:768px){
  #form_wrap .form_box { display:block; }
  #form_wrap .form_box .label { width:auto; }
  #form_wrap .form_box .body { width:auto; }
  #form_wrap .privacy { border-radius:5px; }
}
@media screen and (max-width:414px){
  
}