/*
Theme name:fujitanitosoukoubou-hp
Theme URL:https://fujitanitosoukoubou.co.jp
Description:藤谷塗装工房HP
Vertion:1.0
Auther:株式会社DICE
Auther URL:https://dice-6.co.jp
*/

head{
  margin:0;
  padding:0;
}
body{
  height: 100%;
  margin:0;
  padding:0;
  font-family:'Ubuntu',"Hiragino Sans W3","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","メイリオ",Meiryo,"MS P ゴシック","MS PGothic",sans-serif;
}
.inner{
  margin:0 auto;
}
.wrapper{
  margin:0;
  width:  70%;
  margin: 0 auto;
}
.container{
  height: 900px;
}

h4{
  font-size: 2rem;
  margin: 0;
  letter-spacing: 0.2em;
}
h5{
  font-size: 1.7rem;
  margin: 0;
}
h6{
  font-size: 0.67rem;
  margin: 0;
}
p{
  margin:0;
  font-size:16px;
  line-height: 1.8em;
  letter-spacing: 0.05em;
  font-weight: normal;
}
a{
  margin:0;
  text-decoration: none;
  color:#000;
  letter-spacing: 0.1em;
}
ul{
  padding:0;
}
li{
  list-style: none;
}
iframe{
  margin:0;
}
.role-over{
  display: block;
  transition-duration: 0.3s;
}
.role-over:hover{
  opacity:0.5;
	transition-duration: 0.3s;
}

.page-title{
  font-size:14px;
  line-height:20px;
  margin:0;
  text-align:left;
  background-image: url(images/hd-top.png);
  position:absolute;
}
header{
  height:80px;
}
.hd-cap{
  display: none;
}
/*
.header-logo{
  display:none;
}
*/
.logo{
  width: auto;
  height:45px;
}
.logo-name{
  width:90px;
  height:40px;
  margin:auto 0;
}
.tel-icon{
  width:40px;
  height:40px;
  padding:10px 0;
  position:fixed;
  right:120px;
  z-index:70;
}
.mail-icon{
  width:40px;
  height:40px;
  position:fixed;
  padding:10px 0;
  right:65px;
  z-index:70;
}
.hd-top-img{
  width:100%;
  height:160px;
  position:absolute;
  left:0;
  right:0;
  top:0;
}
.hd-top-logo{
  position:absolute;
  top:16px;
  left:0;
  right:0;
  margin:auto;
  height:74px;
  z-index:2;
}
.hd-top-logo-name{
  position:absolute;
  top:100px;
  left:0;
  right:0;
  margin:auto;
  height:30px;
  z-index:2;
}
.hd-cap{
  width:70%;
  margin:0 auto;
  position:relative;
  top:100%;
  left:50%;
  right:0;
  margin:auto;
}
.hd-logo{
  width: 250px;
  margin-top: 20px;
  margin-left: 5%;
}

.hd-menu{
  position:absolute;
  top:40px;
  right: 5%;
  margin:auto;
}
.hd-menu a{
  margin: 0 1rem;
}

.m-list{
  color:black;
  text-decoration: none;
}
/*210801色変更
.hd-cap p,
.m-list p{
color: #343434;
}
*/
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}

/*imgタグだと下に隙間ができるのでblockに。*/
.slide-img img{
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
.m-list p{
color: #ffffff;
}
.m1{
  position: absolute;
  top:0;
}
.m2{
  position:absolute;
  top:50px;
  margin:auto;
  }
.m3{
  position:absolute;
  top:100px;
}
.m4{
  position:absolute;
  top:150px;
}
.m5{
  position:absolute;
  top:200px;
}
.m6{
  width: 80px;
  position:absolute;
  top:280px;
}
.hamburger-menu{
  display:none;
}
.menu-btn {
  position: fixed;
  top: 20px;
  right: 5%;
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 4px;
  width: 31px;
  border-radius: 6px;
  background-color: #000000;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
  background-color: #ffffff;
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
  background-color: #ffffff;
}
#menu-btn-check {
  display: none;
}
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  background-color: rgba(0, 0, 0, 0.8);
}
.menu-content ul {
  padding: 130px 10px 0;
}
/*
.menu-content ul li {
  border-bottom: solid 1px #333333;
  list-style: none;
}
*/
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 18px;
  color:#ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
  text-align: center;
  font-weight: bold;
}
/*
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}
*/
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #3584bb;
  transition: all 0.5s;/*アニメーション設定*/
}
.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 0.5s;/*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
  left: 0;/*メニューを画面内へ*/
}
.about-top-img{
  width:100%;
}
.top-wrapper{
  height:100%;
}
.top-img{
  width:100%;
  height: 100vh;
  display:none;
  object-fit: cover;
}
.active{
  display:block;
  animation-name: load;
}
.top-img::before{
  content:"";
  height:100%;
  position:relative;
}

@keyframes load {
  from {
        opacity: 0;
    }
    to {
        opacity:1;
      }
}
.slide img{
  animation:load 3s ease-in-out;
  animation-iteration-count: 1;
}
.slide-btn{
  display:flex;
  justify-content: space-between;
  position:absolute;
  bottom:5px;
  right:0;
  left:0;
  margin:auto;
  width:60px;
}
.s-btn{
  width:15px;
  height:15px;
  border-radius: 50%;
  background:#fff;
  border:1px solid #000;
  cursor: pointer;
}
.top-title{
  width:300px;
  position:absolute;
  top: 30%;
  right:10%;
}
.top-btn{
  position:absolute;
  top:60%;
  right:10%;
}
.res-top-btn{
  display:none;
  background-image: url(images/res_top_bc_btn.png);
  padding:30px;
}
.res-top-text-btn{
  width:200px;
  margin:auto;
  display:block;
}
.res-top-text-btn img{
  width:200px;
}
.title{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  text-align:center;
  font-size:40px;
  color:#fff;
  width:300px;
  height:50px;
}
.wrap{
  margin-top:70px;
}
.wt-text{
  margin-bottom:20px;
}

.wrap01{
  text-align:center;
}
.blog{
  display:flex;
  flex-wrap:wrap;
  width:900px;
  margin:0 auto;
}
.blog-box{
  width:25%;
  padding:10px;
  box-sizing: border-box;
  text-align:left;
}
.blog-box img{
  width:100%;
}
.data{
  color:gray;
  font-size:9px;
}
.category{
  padding:2px 5px;
  font-size:9px;
  background:#00AFCC;
  color:#fff;
}
.btn{
  margin-top:30px;
}
.btn a{
  width:200px;
  margin:0 auto;
}

.wrap02{
  text-align:center;
}
.about-box{
  background-image:url(images/back_index_001.png);
  color:#fff;
  padding:50px 50px 70px 50px;
}
.about-box h3{
  font-size:30px;
  padding-bottom:10px;
}
.about-box h3 br{
  display:none;
}
.about-box p{
  font-size:16px;
  line-height: 25px;
  padding:20px;
}
.about-point{
  text-align:left;
}
.point01{
  display:flex;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
}
.p01-l{
  width:40%;
  padding:0 50px;
}
.p01-l h4{
  font-size:23px;
  margin:0;
}
.point01 > img{
  width:45%;
  height:100%;
}
.line{
  width:50%;
}

.point02{
  display:flex;
  justify-content: flex-end;
  margin-top:70px;
  background-color:rgb(206, 232, 241);
  position:relative;
}
.point02 img{
  position:absolute;
  bottom:0;
  left:5%;
  width:350px;
}
.p02-r{
  width:45%;
  margin-right:100px;
  padding:30px 0;
}
.p02-t h4{
  font-size:23px;
  font-family:"游明朝",YuMincho,"Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif ;
  color:#00AFCC;
  border-bottom:2px solid gray;
  margin:5px 0;
}
.p02-t{
   padding:20px 40px;
   background:#fff;
   margin-top:20px;
   margin-bottom:30px;
}

.wrap03{
  text-align:center;
}
.service{
  margin-top:30px;
  display:flex;
  flex-wrap: wrap;
}
.ser-back{
  width:100%;
  height:100%;
}
.ser-box{
  width:50%;
  box-sizing: border-box;
  position:relative;
  margin-bottom:10px;
}
.ser-box:nth-child(odd){
  padding-right:5px;
}
.ser-box:nth-child(even){
  padding-left:5px;
}
.s-box-1,.s-box-3{
  position:absolute;
  top:0;
  right:0;
  height:90%;
  padding:7px;
}
.s-box-2,.s-box-4{
  position:absolute;
  top:0;
  left:0;
  height:90%;
  padding:7px;
}
.ser-t{
  width:50%;
  height:100%;
  border:1px solid #fff;
  color:#fff;
  padding:5px;
}
.ser-t01,.ser-t03{
  float:right;
}
.ser-title{
  margin:3px 0;
  padding-bottom:5px;
  border-bottom:1px solid #00AFCC;
  font-family: Mi;
}
.ser-title p{
  font-size:18px;
  font-family: "游明朝",YuMincho,"Hiragino Mincho ProN W3","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","MS P明朝","MS 明朝",serif;
}
.s-text{
  padding:10px;
  /*font-size:12px;
  line-height:20px;*/
}

.wrap04{
  text-align:center;
}
.rec-box{
  width:900px;
  height:300px;
  background-image: url(images/back_index_002.png);
  background-size: cover;
  margin:30px auto;
  color:#fff;
  padding-bottom:30px;
}
.rec-r{
  width:50%;
  float:right;
  margin-right:50px;
  padding:40px 30px;
  text-align:left;
}
.rec-r h3{
  font-size:26px;
}
.rec-r > img{
  width:100%;
}
.rec-r > .btn{
  text-align:center;
}

.wrap05{
  text-align:center;
}
.con-box{
  width:900px;
  margin:0 auto;
}
.con-l{
  width:55%;
  text-align:left;
}
.con-l h3{
  font-size:23px;
}
.con-l p{
  width:90%;
}
.con-l img{
  width:100%;
}
.con-l h3 br{
  display:none;
}
.con-b{
  background: #00AFCC;
  position:relative;
  text-align:left;
}
.tel-line img{
  padding-top:8px;
  padding-left:10px;
}
.hd2-003{
  position: absolute;
  bottom:0;
  right:0;
  width:400px;
}

.wrap06{
  padding:30px 0 50px 0;
  text-align:center;
  background: rgb(233, 233, 233);
}
table{
  margin:0 auto;
  border-collapse: separate;
  border-spacing: 0px 8px;
}
tr{
  height:30px;
}
td{
  padding:5px;
  border-bottom:1px dashed #fff;
}
.blog-title{
  font-size:12px;
}
.res-category{
  padding:1px 5px;
  background:#00AFCC;
  color:#fff;
  display:none;
}

footer{
  margin:0;
  text-align:center;
  padding-top:30px;
  background-image: url(images/back_index_004.png);
}
footer img{
  margin:0;
}
.footer-logo{
  width:140px;
  margin:0 auto;
}
.f-logo{
  width:100px;
}
.f-name{
  margin-bottom:20px;
}
.con-tel{
  width:400px;
  margin:0 auto;
  display: block;
}
.con-tel img{
  width:100%;
}
.f-strong{
  margin-top:20px;
}
footer ul{
  display:flex;
  justify-content: center;
}
li{
  padding:0 10px;
}
.footer-list:nth-child(1),.footer-list:nth-child(2),.footer-list:nth-child(3){
  border-right:1px solid #000;
}

.copylight{
  margin-top:40px;
  background:#000;
  color:#fff;
}

.section-title h4{
  font-size: 2rem;
  text-align: center;
}

.section-title{
  margin-top: 43px;
  margin-bottom: 100px;
}
.photo-list{
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}

.profile-section1,
.profile-section2{
  display: flex;
  justify-content: space-between;
}

.section-left,
.section-right{
  width: 50%;
}

.section-left img,
.section-right img{
  width: 90%;
}
.profile-section1 .logo{width: auto;}
.flex-align-center{
  display: flex;
  align-items: center;
}
.profile-section1 h6{
  margin-top: 2rem;
}

.profile-section1 .section-left,
.profile-section1 .section-right{
  margin-bottom: 100px;
}
.profile-section2 .section-left,
.profile-section2 .section-right{
  margin-bottom: 50px;
}

.history{
  margin-bottom: 2rem;
}

.history-list{
  margin-bottom: 1rem;
}

/*///////////////       //////////////*/
/*                COURSE              */
/*///////////////       //////////////*/
.section-title.sub{margin-bottom: 50px;}
.page-content{text-align: center;}
.price-table ul{width: 60%;margin: 50px auto;}
.price-table ul li{
  display: flex;  
  padding: 10px 0;
  border-bottom: 1px solid #707070;
}
.price-table ul li:first-child{border-top: 1px solid #707070;}
.price-table ul li div{
  width: 50%;
  text-align: center;
}
.tax-include{
  text-align: right;
  font-size: 12px;
}
.line-contact{
  text-align: center;
  padding-bottom: 50px;
}
.line-contact img{margin: 20px 0;}
/*///////////////       //////////////*/
/*                ACRYLIC             */
/*///////////////       //////////////*/
.photos{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 100px;}
.photos img{width: 48%;margin-bottom: 50px;}