@charset "utf-8";

/*=================================================================================================================================*/
/** 個別指定 for スマートフォン
/*=================================================================================================================================*/

/*---------------------------------------------
 ** 320px
---------------------------------------------*/
@media screen and (max-width: 320px) {
}

/*---------------------------------------------
 ** 740px
---------------------------------------------*/
@media screen and (max-width: 740px) {

/*---------------------------------------------
	body
---------------------------------------------*/
html { scroll-behavior: smooth; }
body { font-size: 15px;  font-family: sans-serif; color:#000;   line-height: 1.8;
}
p    {font-size: 15px;}

/* fook */
.only_sp_none {display:none !important; }
.sp_br{display: inline;}

/*画像*/
img{max-width:100%; height:auto;}

.movie iframe{ max-width:560px; height: 315px}

/*---------------------------------------------
 **  ナビ
---------------------------------------------*/




/*---------------------------------------------
 **  メイン画像
---------------------------------------------*/



/*---------------------------------------------
 ** ヘッダー記述
---------------------------------------------*/

  #header {
    height:110px;
  }

  .header_inner {
    width:100%;
    height:110px;
    margin:0 auto;
    position:relative;
  }
  .tel_box{
    width:100%;
    position:absolute;
    top:0;
    left:0;
  }
  .tel_box div{
    position:relative;
    background:none;
    background-color:#D90000;
  }

  .tel_box p{
    height:30px;
    font-size:2.2rem;
    padding:10px 0;
    text-align:center;

  }
  .tel_box p a:before{
    color:#fff;
    display: inline;
    content: "\f2a0";
    font-family: "Font Awesome 5 Free";
  }
  .tel_box p span{
    font-size:1.2rem;
    display: inline;
    margin-left:10px;
  }

  /* ロゴ */
  h1{
    font-size:2.0rem;
    top:54px;
    left:5%;
  }
  h1 span{
    font-size:1.2rem;
  }
  h1 a{ display: block; width: 280px; height: 60px; background: url( ../img/common/logo.png) no-repeat; background-size: 98%;}


/*---------------------------------------------
 **  タイトル
---------------------------------------------*/
h2 {font-size: 2.0rem;margin-bottom: 1.4rem;}
h2.index_info{font-size: 2.0rem !important;}

h3 {font-size: 19px;}
h3.index_info{font-size: 1.7rem !important;}


/*=================================================================================================================================*/
/**  TOP	*/
#content {
  width: 100%;
  overflow: hidden;
}
.catch{
  margin:0 auto;
  padding:10% 0;
  left: 5%;
  /* top: 5%; */
  max-width: 286px;
}
.slider img{
    object-fit: cover;
    /* height: 170px; */
}
#main_img::before,#main_img::after{content:'';}
.subnav{
  width:100%;
  position:static;
  padding-top:0;
  margin:10px auto 0;
}
.subnav ul{
  position:static;
  flex-wrap: wrap;
  margin:0 auto;
}
.subnav ul li{
  width:48%;
  background-color:#D90000;
  border-radius: 10px;
  text-align: center;
  margin:0 3px 10px;
  font-size:2.0rem;
  position:relative;
  letter-spacing:0px;
  z-index: 0;
  padding-top:10px;
  padding-bottom:10px;
}
.subnav ul li::before{
  top:10px;
  background-size:30%!important;
  text-align:left;
  top:14px;
  left:-10px;
  right:auto;
}
#sec00{
  padding-top:114px;
}

#sec00 h2, #sec01 h2, #sec04 h2{
  font-size:2.0rem;
}

/*
#sec00 h2{
  background:url(../img/common/woman.png) no-repeat right top;
  background-size: 25%;
  padding:10px 116px 13px 0;
  text-align: left;
}
*/

#sec00 h2.bgnone{ background:none; text-align: center;}

.t_box{
  width:90%;
  margin:0 auto;
}


#sec04 .t_box p{
  background:none;
  padding-right:0;
}
#sec00 .t_box{
  padding-top:5%;
}

.area{
  width:95%;
  border:4px solid #D80000;
  position: relative;
  margin:10% auto;
}
.area::after{
  background:none;
}
.area h3{
  font-size:1.8rem;
}
.area h3 span{
  font-size:1.2rem;
}

.area_data{
  width:100%;
  display:block;
  margin-left:2%;
}
.area_data div{
  width:95%;
  margin-right:0;
  margin-bottom:20px;
  display: flex;
}
.area_data p{
  padding:2% 8% 2% 0;
  font-size:1.6rem;
  min-height: 80px;
}
.area_data ul{
  padding-left:5%;
}

#sec01{
  width:95%;
  margin:5% auto;
}

.point_data{
  width:100%;
  margin:0 auto 5%;
  float:none;
  position:relative;
  padding-top: 40%;
  margin-bottom:10%;
}
.point_data:nth-child(2n-1){
  margin-right:0;
  margin-top:0;
}

.point_data:nth-child(2){
  margin-top:0;
}
.fuwafuwa {
  width:7%;
  height:40px;
  font-size:2.0rem;
  color:#fff;
  font-weight: bold;
  float:left;
  background:url(../img/common/point_bg.png) no-repeat left 10px top 0;
  background-size:64%;
  padding: 6% 5% 5% 5.5%;

}

.point_data h3{
  width:80%;
  font-size:1.6rem;
  line-height:1.4;
  margin:5% auto 0;

}
  .point_data h3::before{
  font-size:2.4rem;
  position:absolute;
  color:#fff;
  text-shadow: none;
  top:25px;
  left:11px;
}
#sec01 .p_phone{
  float:none;
}
.p_phone{
  width:95%;
  display: block;
  padding:2% 0;
  margin:0 auto 15%;
  float:none;
}
.phone_no{
  width:100%;
  text-align: center;
}
.phone_no p{
  font-size:3.6rem;
}
  .mail_btn a{
  margin:3% auto 1%;
}


#sec02 .work_img,#sec03 .work_img{background-size:160%;}

.work_img{
  width: 100%;
  background-size: contain;
  position:relative;
  z-index: 0;
  padding-top: 22%;
}
.work_img::before{
  z-index: -2;
  top: 26%;
  left: -124%;
  background-size: 33%;
}
#sec03 .work_img::before{
  left: 0;
}

#sec02 .work_img h2,#sec03 .work_img h2{background-size:20%; margin-top:5px;}
.work_img h2{
  padding-left:80px;
  font-size:2.0rem;
  position:static;
}
#sec02 .sec_in, #sec03 .sec_in{
  padding-top:2%;
}
#sec02 p.read, #sec03 p.read{
  width:90%;
  padding-left:0;
  margin:0 auto;
}

.work_block,
.case_block{
  padding-left:0;
  width:95%;
  margin:0 auto;
}
.work_box,
.case_box{
  width:49%;
  position:relative;
  text-align:center;
  margin-bottom:8%;
}
.work_box h3,
.case_box h3{
  width:90%;
  z-index: 2;
  font-size:1.4rem;
  text-align: center;
  margin-bottom:0;
  line-height:1.4;
}
.work_box img{
  width:80%;
  margin:0 auto;
  position:static;
  margin-top:5%;
}
.work_box p{
  width:86%;
  padding-top: 10%;
  text-align:left;
  margin:0 auto;
}

.case_box p{
  font-size: 80%;
  padding: 0;
  margin: 0;
}

.info_block ul li span{ display: block;}


.price_box{
  margin-left:0;
  margin-bottom:10%;
}
.work_box:nth-child(3n){
  margin:0 0 12% 0;
}

.c_name{
  background-size:contain;
}

.c_name p{
  font-size: 2.0rem;
  padding:19% 0 11%;
}
.c_name p span{
  font-size: 1.4rem;
  letter-spacing: 0.4rem;
  display: block;
}

.c_info{
  width:95%;
}
.c_info2 p.add{
  width:90%;
  font-size:1.6rem;
  margin:5% auto 2%;
  line-height: 1.6;
  text-align: left;
}

#sec_map iframe{
  height:300px;
}
/*=================================================================================================================================*/


/*=================================================================================================================================*/
/**  フッター	*/
/*=================================================================================================================================*/
.footer_wrapper{ margin:0 ; padding-bottom:10px; }

.footer_inner {
  padding: 50px 0 10px 0;
}


/* フッターナビ */
#footer nav ul {
  display: block;
  background: #fff;
  justify-content: center;
  padding: 1px 0 1px 0;
  margin-top: 20px;
}

#footer nav li {
  width: 49.4%;
  float:left;
  border: 1px solid #fff;
}

#footer nav a {
  width: 100%;
  background: #eee;
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
}



#copyright {font-size:10px!important;}

/* ページTOPへ */
#pageTop {right: 6%;bottom:0;}
#pageTop a {width: 40px;height: 57px;}

.today_block_inner{
  width: 49%;
  margin: 5px auto;
 }

 .today_block_inner .today_eyecatch{ width: 100%; height: 150px;}
 .today_block_inner .today_text{ width: 100%;}





/*---------------------------------------------
 **  ご挨拶
---------------------------------------------*/
.greeting{
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 3rem auto;
  padding: 2rem 0;
  border-top: 2px solid #D80000;
  border-bottom: 2px solid #D80000;
  text-align: center;
}
.greeting img{
  width: 250px;
  height: 175px;
  margin: 0 auto;
}
.greeting p{
  width: 90%;
  margin: 1rem auto 0 auto;
  text-align: left;
}

.c_info{
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.c_info img{
  width: 250px;
  height: 439px;
  margin: 0 auto;
}
.c_info table{
  width: 100%;
  margin-bottom: 1rem;
}
.c_info table th{
  padding: 14px 15px 14px 15px;
}
.c_info table td{
  padding: 13px 15px 13px 20px;
}

/*---------------------------------------------
 **  SNS部分変更
---------------------------------------------*/
.introsns{
  display: flex;
  flex-direction: column;
}
.introsns .item{ width: 100%; margin: 1rem auto;}

.snsbnt{
  width:100%;
  display:flex;
  flex-direction: column;
}

/*---------------------------------------------
 **  フロー図
---------------------------------------------*/
.flowwrap{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.flowwrap .item{
  width: 90%;
  margin: 2rem auto;
}
.flowwrap .item a h3{
  background-color: #D80000;
  background-image: url(../img/common/icon_arrow.png);
  background-position: 95% 50%;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 20px;
  letter-spacing: 0.2em;
  box-sizing: border-box;
  border-radius:  20px 20px 0 0;
  padding: 2rem 4rem;
  text-decoration: none;
  font-weight: bold;
  margin: 0;
}
.flowwrap .item a{
  text-decoration: none;
}

.flowwrap .item ul{
  width: 100%;
  box-sizing: border-box;
  background-color: #F0F0E1;
  padding: 2rem 3rem;
  border-radius: 0 0 20px 20px;
  margin: 0;
}
.flowwrap .item ul li{
  border-radius: 20px;
  border: 2px solid #D80000;
  background-color: #fff;
  color: #D80000;
  text-align: center;
  box-sizing: border-box;
  padding: 1.5rem 0;
  letter-spacing: 0.2em;
  font-size: 16px;
  font-weight: bold;
  margin: 1rem auto 4rem auto;
  position: relative;
}
.flowwrap .item ul li:after{
  width: 0;
  height: 0;
  content: " ";
  position: absolute;
  top: 70px;
  left: 42%;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid  #D80000;
}
.flowwrap .item ul li:last-child:after{
  display: none;
}

.flowwrap .item .img{
  text-align: center;
  margin-top: 3rem;
}
.flowwrap .item .img img{
  width: 265px;
}




/*---------------------------------------------
 ** フロー
---------------------------------------------*/
#sec01b{ margin-top: 3rem;}
#flow{
  box-sizing: border-box;
  padding-top: 100px;
  margin-bottom: 10rem;
}
#flow h2{
  background-color: #F0F0E1;
  border-radius: 20px;
  color: #000;
  font-weight: bold;
  letter-spacing: 0.2em;
  box-sizing: border-box;
  padding: 2rem 4rem;
  text-align: left;
  margin-bottom: 2rem;
  margin-top: 5rem;
}

.flowwrap.bdr{
  border: 2px solid #D80000;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 2rem;
  margin: 2rem auto 0 auto;
  flex-direction: column !important;
  width: 95%;
}

.flowwrap.bdr .img,
.flowwrap .txt{
  width: 90%;
  margin: 0 auto;
}

.flowwrap .txt h3{
  font-weight: bold;
  color: #D80000;
  letter-spacing: 0.2em,;
  margin-top: 2rem;
}

.arrow{
  display: block;
  position: relative;
}
.arrow:after{
  width: 0;
  height: 0;
  content: " ";
  position: absolute;
  top: 15px;
  left: 45%;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid  #D80000;
}

.mt100{
  margin-top: 5rem;
}


}