*{
  margin: 0;
  padding:0;
 list-style: none;
 text-decoration: none;

}
html {
scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
body{
  overflow: scroll;

font-weight: 400;
  overflow-wrap: break-word;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", Meiryo, sans-serif;
}
img{
max-width: 100%;
  height:auto;
}
h1,h2,h3,h4,{
  color:#000;
}
p,dt,dd,span,a{
  color:#333333;
}


/*header*/
#header{
  position:  relative;
  	top: 0;
    z-index: 995;

}
@media (max-width:800px){
  #header{
    position: fixed;
    background-color: #fff;
    width:100%;
    height:60px;
  }
}

.header_nav{
  padding-top:0;
}
.header_div{
  display: flex;
  justify-content: space-between;
}

.header_manu{
  display: flex;
position: absolute;
top:0;
right:0;
}

@media (max-width:800px){
  .header_menu{
    display: inline-block;
  text-align: center;

  }
}

@media (max-width:800px){
  .header_list{
    width: 100%;
     height: 100%;
     position: fixed;
  bottom: 200%;
  right:0px;
text-align: center;
    z-index: 998;
    background-color: #D1D8DC;
   transition: all 0.5s;

  }
}
@media (max-width:800px){
  #menu-btn-check:checked ~ .header_list{
      bottom: 0;/*メニューを画面内へ*/
  }

}



/*ボタン*/
#menu-btn-check {
    display: none;
}
@media (max-width:800px){

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 1px;
    width: 30px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 30px;
}
.menu-btn span:after {
    top: 30px;
}

.menu-btn {
    position: fixed;
  top:0 ;
  right:0;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 999;
    background-color: #000;
}
@media (max-width:800px){
.header_logo img{
  max-width:200px;
  height:auto;
  position: absolute;
  top:15px;
left:30px;
  }
}

.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check {
    display: none;
}
#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);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}
}
/*ヘッダーロゴ*/
.header_logo img{
  max-width:280px;
  height:auto;
  position: absolute;
  top:20px;
left:30px;
}
@media (max-width:1500px){
.header_logo img{
  max-width:200px;
  height:auto;
  position: absolute;
  top:15px;
left:30px;
  }
}
@media (max-width:800px){
.header_logo img{
  height:auto;
  position: fixed;
  top:13px;
left:10px;
  }
}
/*ヘッダーメニュー*/
.header_list .header_ul{
  display: flex;

}
@media (max-width:800px){
  .header_list .header_ul{
display: inline-block;
text-align: center;
padding-top:60px;
  }
}
@media (max-width:800px){
  .header_ul li{
 margin:0 10px;
 max-width: 400px;
  }
}

.header_ul li a{
  background-color: #9C9C9C;
  position: relative;
}

.header_ul li a .header_li_btn{
    background-color: #9C9C9C;
    padding:30px 40px;
}

.header_ul li a .header_li_btn:hover{
      background-color: #000;
}
@media (max-width:1500px){
  .header_ul li a .header_li_btn{
      background-color: #9C9C9C;
      padding:20px 30px;
  }
}
@media (max-width:800px){
  .header_ul li a .header_li_btn{
      background-color:#fff;
      padding:20px 55px;
      margin:10px;
      border-radius: 10px;
  }
  .header_ul li a .header_li_btn::after {
    content: "";
    border-top: 3px solid #707070;
    border-right:3px solid #707070;
    margin-top: -4px;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 49%;
    right: 20px;
    transform: rotate(45deg);
    border-radius: 2px;
     }
     .header_ul li a:hover .header_li_btn::after {
       content: "";
       border-top: 3px solid #fff;
       border-right:3px solid #fff;

        }
  }

.header_ul li a .header_li_btn p{
  color:#ffff;
  font-weight: bold;
  font-size: 18px;
}
@media (max-width:800px){
  .header_ul li a .header_li_btn p{
    color:#333333;
    font-weight: bold;
    font-size: 16px;
  }
  .header_ul li a:hover .header_li_btn p{
    color:#fff;
  }
}
.header_ul .top_mail{
    background-color:#333333;
}

/*メールお問い合わせ*/
.header_ul .top_mail a .header_li_btn{
    background-color:#333333;
    padding:10px 30px;
    display: flex;
    position: relative;
}
@media (max-width:1500px){
.header_ul .top_mail a .header_li_btn{
      background-color:#333333;
        padding:5px 20px;
  }
}
@media (max-width:800px){
.header_ul .top_mail a .header_li_btn{
display: none;
  }
}
.header_ul .top_mail a .header_li_btn p{
  color:#ffff;
  font-weight: bold;
      font-size: 18px;
    position: relative;
    top:5px;
}
.header_ul .top_mail a .header_li_btn img{
object-fit: cover;
width:60px;
height:40px;
position: relative;
top:12px;
right:5px;
}

/*スマホサイズ時の関所と吊ってみた*/

.header_list_2{
  display: none;
}
@media (max-width:800px){
  .header_list_2{
    display: inline-block;


  }

/*スマホサイズ時の電話とメール*/


.header_tel{
  background-color: #fff;
  max-width:500px;
  margin: 30px;
 padding:30px;
 border-radius: 10px;
}
@media (max-width:800px){
.header_tel{
  background-color: #fff;
  max-width:500px;
  margin:0 10px 10px;
 padding:10px;
 border-radius: 10px;
}
}
@media (max-width:500px){
.header_tel{
  background-color: #fff;
  max-width:500px;
 padding:10px;
 border-radius: 10px;
}
}
.header_tel h3{
font-size: 20px;
  padding-bottom:10px;
}
.header_tel_btn a{
  font-size: 38px;
    color:#BE7802;
    font-weight: bold;
}
@media (max-width:420px){
  .header_tel_btn a{
    font-size: 30px;
      color:#BE7802;
      font-weight: bold;
  }
}
.header_tel p{
  font-size: 14px;
  padding-top:10px;
}
.header_meil{
  background-color: #fff;
  max-width:500px;
  margin:0 30px;
 padding:30px 30px 50px;
  border-radius: 10px;
}
@media (max-width:500px){
  .header_meil{
    background-color: #fff;
    max-width:500px;
    margin:0 10px;
   padding:15px 10px 30px;
    border-radius: 10px;
  }
}
.header_meil h3{
  padding-bottom:40px;
}
@media (max-width:500px){
  .header_meil h3{
    padding-bottom:40px;
  }
}
.header_meil_btn a{
  padding:15px 40px;
  border:3px solid#707070;
    margin: 30px auto 0;
  font-size:16px;
  font-weight: bold;
  position:relative;
}
@media (max-width:500px){
  .header_meil_btn a{
    padding:15px 40px;
    border:3px solid#707070;
      margin: 30px auto 0;
    font-size:16px;
    font-weight: bold;
    position:relative;
  }
}
.header_meil_btn a::after {
  content: "";
  border-top: 3px solid #707070;
  border-right:3px solid #707070;
  margin-top: -4px;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 49%;
  right: 20px;
  transform: rotate(45deg);
  border-radius: 2px;
   }
}
/*トップ*/

.wrapper{
  position: relative;

}
#top_1{

  display:flex;

}
#top_2{
  display:flex;

}


.top_img_box .top_img_pc{
  display: block;
  width: 100%;
  height: auto;
}
.top_img_box .top_img_sp{
  display: none;
}
@media (max-width:800px){
  .top_img_box .top_img_pc{
    display: none;
  }
  .top_img_box .top_img_sp{
    display: block;
    width: 100%;
    height: auto;
  }
}
#top_1 .top_list{
  position: absolute;
  top:150px;
  left:0;
    background-color: rgba(255,255,255,0.7);
  padding:70px 0;
width:1000px;

}
@media (max-width:1500px){
  #top_1 .top_list{
    position: absolute;
    top:100px;
    left:0;
      padding:50px 0;
    width:800px;
  }
}
@media (max-width:1260px){
  #top_1 .top_list{
    position: absolute;
    top:70px;
    left:0;
      padding:30px 0;
    max-width:600px;
  }
}
@media (max-width:800px){
  #top_1 .top_list{
        max-width:100%;
        top:150px;
        left:0;
          right:0;
  }
}
@media (max-width:500px){
  #top_1 .top_list{
        max-width:100%;
    position: absolute;
          top:110px;
        left:0;
          right:0;
      padding:30px 0;
  }
}
#top_2 .top_list{
  position: absolute;
  top:150px;
  left:0;

    background-color: rgba(000,000,000,0.7);
      color:#DE8B00;
  padding:70px 0;
width:1000px;
}
@media (max-width:1500px){
#top_2 .top_list{
    position: absolute;
      top:100px;
    left:0;
      padding:50px 0;
      width:800px;
  }
}
@media (max-width:1260px){
  #top_2 .top_list{
    position: absolute;
    top:70px;
    left:0;
      padding:30px 0;
      max-width:600px;
  }
}
@media (max-width:800px){
  #top_2 .top_list{

    position: absolute;
    top:150px;
    left:0;
      right:0;
max-width: 100%;
  }
}
@media (max-width:500px){
  #top_2 .top_list{
        max-width:100%;
    position: absolute;
      top:110px;
    left:0;
      right:0;
          padding:30px 0;
  }
}


#top_1 .top_list h3{
  font-size: 40px;
  color:#000000;
}
@media (max-width:1500px){
  #top_1 .top_list h3{
    font-size: 30px;
    color:#000000;
  }
}
@media (max-width:1260px){
  #top_1 .top_list h3{
    font-size: 20px;
    color:#000000;
  }
}
@media (max-width:800px){
  #top_1 .top_list h3{
    font-size: 15px;
    color:#000000;
  }
}
#top_2 .top_list h3{
  font-size: 40px;
  color:#fff;

}
@media (max-width:1500px){
  #top_2 .top_list h3{
    font-size: 30px;

  }
}
@media (max-width:1260px){
  #top_2 .top_list h3{
    font-size: 20px;

  }
}
@media (max-width:800px){
  #top_2 .top_list h3{
    font-size: 15px;

  }
}


#top_1 .top_list h2{
  font-size: 70px;
    color:#DE8B00;
    color:#DE8B00;
position: relative;
right:30px;
}
@media (max-width:1500px){
  #top_1 .top_list h2{
  font-size: 50px;
  }
}
@media (max-width:1260px){
  #top_1 .top_list h2{
  font-size: 40px;
  }
}
@media (max-width:800px){
  #top_1 .top_list h2{
  font-size: 30px;
  position:static
  }
}
@media (max-width:500px){
  #top_1 .top_list h2{
  font-size: 35px;
  position:static
  }
}
@media (max-width:400px){
  #top_1 .top_list h2{
  font-size: 30px;
  position:static
  }
}
#top_2 .top_list h2{
  font-size: 70px;
    color:#DE8B00;
    color:#DE8B00;
    position: relative;
    right:30px;
}
@media (max-width:1500px){
  #top_2 .top_list h2{
font-size: 50px;

  }
}
@media (max-width:1260px){
  #top_2 .top_list h2{
  font-size: 40px;
  }
}
@media (max-width:800px){
  #top_2 .top_list h2{
  font-size: 40px;
    position:static
  }
}
@media (max-width:500px){
  #top_2 .top_list h2{
  font-size: 35px;
    position:static
  }
}
@media (max-width:420px){
  #top_2 .top_list h2{
  font-size: 32px;
    position:static
  }
}
.top1_p{
  font-size: 60px;
    color:#DE8B00;
   font-weight: bold;
}
@media (max-width:1500px){
  .top1_p{
    font-size: 50px;
  }
}
@media (max-width:1260px){
  .top1_p{
    font-size: 40px;
  }
}
@media (max-width:800px){
  .top1_p{
    font-size: 30px;
  }
}
 .top_list_box{
  margin-left:200px;
}
@media (max-width:1500px){
 .top_list_box{
    margin-left:150px;
  }
}
@media (max-width:1260px){
 .top_list_box{
    margin-left:100px;
  }
}
@media (max-width:800px){
.top_list_box{
text-align: center;
    margin: 0 auto;
  }
}


/*TOPボタン*/


.slider-item {
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    max-width: 100%;
    max-height:100vh;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
}

.slick-dots {
	position: absolute;
  bottom:50px;
  left:50%;
    transform: translateX(-50%);
	z-index: 3;
    text-align:center;
	margin:10px 0 0 0;/*ドットの位置*/
}

.slick-dots li {
    display:inline-block;
	margin:0 20px;
}

.slick-dots button {
  position: absolute;
  top:10px;
    color: transparent;
    outline: none;
    width:20px;/*ドットボタンのサイズ*/
    height:20px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#fff;/*ドットボタンの色*/
    border:  transparent;
}

.slick-dots .slick-active button{

    background:#000;/*ドットボタンの現在地表示の色*/
}


/*丸メリット*/
.top_ul {
  display:flex;
text-align: center;
position: relative;
right:40px;
padding:10px 30px;
}
@media (max-width:1500px){
.top_ul {
  position: relative;
  right:0;
  left:0;
  }
}
@media (max-width:1260px){
.top_ul {

  }
}
@media (max-width:800px){
.top_ul {
  position:static;
display: flex;
justify-content: center;
  }
}
.top_ul li{
  text-align: center;
  font-weight: bold;
  width:150px;
  height:150px;
  background-color: #000000;
margin:0 10px;
  border-radius: 100px;
}
@media (max-width:1500px){
.top_ul li{
  width:120px;
  height:120px;
  }
}
@media (max-width:1260px){
.top_ul li{
  width:80px;
  height:80px;
  }
}
#top_2 .top_ul li{
  background-color: #fff;
}
.top_ul li p{
  font-weight: bold;
  color:#fff;
position: relative;
top:40px;
font-size: 26px;
}
@media (max-width:1500px){
.top_ul li p{
font-size: 20px;
position: relative;
top:30px;
  }
}
@media (max-width:1260px){
.top_ul li p{
font-size: 16px;
position: relative;
top:20px;
  }
}
#top_2 .top_ul li p{
  color:#000;
}
/*トップボタン*/
.slider .top_btn{
  display:flex;
margin-top:40px;
}
@media (max-width:800px){
.top_btn{
display:flex;
justify-content: center;
}
}
.top_detail a:hover{
    opacity:0.5;
}
.top_detail{
}
.top_detail a {
    font-size: 20px;
  font-weight: bold;
  background-color:#DE8B00;
  color:#fff;
 padding:30px 80px;
   letter-spacing:3.5;
   max-width:400px;
}

@media (max-width:1500px){
  .top_detail a {
      font-size: 20px;
    font-weight: bold;
    background-color:#DE8B00;
    color:#fff;
   padding:20px 50px;
     letter-spacing:3.5;
     width:400px;
  }
}
@media (max-width:1260px){
  .top_detail a {
      font-size: 20px;
     letter-spacing:3.5;
     width:200px;
      padding:20px 50px;
  }
}
@media (max-width:800px){
  .top_detail a {
      font-size: 20px;
    font-weight: bold;
    background-color:#DE8B00;
    color:#fff;
          padding:20px 30px;
     letter-spacing:3.5;
     max-width:200px;
     margin: 0 auto;
  }
}
@media (max-width:500px){
  .top_detail a {
      font-size: 18px;
    font-weight: bold;
    background-color:#DE8B00;
    color:#fff;
          padding:20px 10px;
     letter-spacing:3.5;
     max-width:200px;
     margin: 0 auto;
  }
}
/*防水扉*/
#door{
  position: relative;

}
.door{
  position: relative;
  display:flex;
  justify-content:center;
    background-color: #000000;
    padding:60px 0;
}
@media (max-width:1200px){
  .door{

    display:block;
text-align: center;
  }
}
/*防水扉の最初のテキスト*/

.door_text{

max-width:600px;
  padding-right:50px;
}
@media (max-width:1200px){
.door_text{
padding-right:0;
text-align: center;
margin: 0 auto;
max-width:500px;
}
}
@media (max-width:1200px){
  .door{
    margin: 0 auto;
  max-width: 100%;
position:static;
  }
}
.door_text h2{
  font-size: 40px;
  color:#ffff;
  text-align: left;
  display: inline-block;
  margin-bottom:30px;
}
@media (max-width:1200px){
  .door_text h2{
    font-size: 30px;
    color:#ffff;
    text-align: left;
    display: inline-block;
    margin:0 30px 30px;
  }
}
@media (max-width:500px){
  .door_text h2{
    font-size: 26px;
    color:#ffff;
    text-align: left;
    display: inline-block;
      margin:0 20px 30px;
  }
}
@media (max-width:400px){
  .door_text h2{
    font-size: 23px;
    color:#ffff;
    text-align: left;
    display: inline-block;
      margin:0 20px 30px;
  }
}
.door_text p{
  font-size: 18px;
  color:#ffff;
  line-height: 2.5;
  text-align: left;
  display: inline-block;
  margin:0 30px;
}
@media (max-width:1200px){
  .door_text p{
    font-size: 16px;
    color:#ffff;
    line-height: 2;

    display: inline-block;
      margin-bottom:30px;
  }
  .door_text p br{
display: none;
  }
}
/*背景ロゴと画像*/

.door_back img{
  object-fit: cover;
max-width:520px;
max-height:380px;
z-index: 20;
position: relative;
padding-left:50px;
}
@media (max-width:1200px){
.door_back  img{
padding-left:0;
  object-fit: cover;
max-width:400px;
max-height:250px;
  }
}
@media (max-width:400px){
.door_back  img{
padding-left:0;
  object-fit: cover;
max-width:300px;
max-height:250px;
  }
}
/*防水扉とは？*/
.main_1{
position: relative;
left:0;
  display: flex;
  padding:100px 0;
}
@media (max-width:1000px){
  .main_1{
    display: block;
      padding:30px 0;
  }
}

.main_1 img{
width:800px;
}
@media (max-width:1200px){
  .main_1_img{
text-align: center;
  }
}
.main_1_text_box{
  position: relative;
  top:80px;
 box-shadow:2px 2px 2px 2px gray;
 padding-top:60px;
 padding-bottom:80px;
 padding-right: 150px;
 padding-left:30px;
}
@media (max-width:1500px){
.main_1_text_box{
  position: relative;
  top:20px;
   padding-top:40px;
    padding-right:30px;
  }
}
@media (max-width:1000px){
.main_1_text_box{
  position: relative;
  top:20px;
  padding: 0;
  margin:0 30px;
   box-shadow:none;
  }
  .main_1_text_box br{
    display: none;
  }
}
@media (max-width:500px){
.main_1_text_box{
  position: relative;
  top:20px;
  padding: 0;
  }
}
.main_1_text_box h2{
font-size: 60px;
color:#000000;
}
@media (max-width:1000px){
  .main_1_text_box h2{
  font-size: 50px;
  color:#000000;
  }
}
@media (max-width:500px){
  .main_1_text_box h2{
  font-size: 40px;
  color:#000000;

  }
}
.main_1_text_box h2::before{
content:"";
   display:inline-block;
   width: 7px;
   height: 70px;
   background-color: #BE7802;
  position: relative;
  top:10px;
  right:5px;
 }
@media (max-width:1000px){
   .main_1_text_box h2::before{
      width: 7px;
      height: 60px;
     position: relative;
     top:10px;
     right:5px;
    }
 }
 @media (max-width:500px){
   .main_1_text_box h2::before{
      width: 7px;
      height: 45px;
     position: relative;
     top:10px;
     right:5px;
    }
 }
.main_1_text_box p{
line-height: 2.5;
color:#000000;
padding-top:40px;
font-size: 18px;
}
@media (max-width:800px){
  .main_1_text_box p{
  line-height: 2;
  padding-top:30px;
  font-size: 16px;
  }
}
/*防水扉ボタン*/
.main_btn{
  padding:100px 0;
}
.main_btn_ul{
  display: flex;
  justify-content: center;
}
.main_btn_ul li {
padding:0 30px;
}
.main_btn_ul li a{

  background-color: #D1D8DC;

}
.main_btn_ul li a{
  font-size: 26px;
  font-weight: bold;

}


.main_btn{
  padding:100px 0;
 max-width:1200px;
 margin:0 auto;
}

@media (max-width:800px)  {
  .main_btn{
padding:30px 0;
  }
}
@media (max-width: 800px){
.main_btn {
    padding: 0;
}
}
@media (max-width:800px)  {
  .item_btn_list_p {
text-align: justify;

  }
}
.main_btn ul{
  display:flex;
  justify-content: center;
  text-align: center;
}
@media (max-width:1100px)  {
.main_btn ul{
    display:block;
    justify-content: center;
  }
}
.main_btn ul li{
margin:0 10px;
}
@media (max-width:800px)  {

  .main_btn ul li{
  margin:0;
  }
}
.main_btn ul li a{
  position:relative;
 width:300px;
 padding:30px 20px;
  display:block;
  font-size: 28px;
  font-weight:bold;
  color:#000;
background-color:#D1D8DC;
  margin:30px auto;
 }
.main_btn ul li a:hover{
   opacity:0.7;
 }
 @media (max-width:1100px)  {
  .main_btn ul li a{
     position:relative;
    width:450px;
    padding:30px 0;
      font-size: 20px;
    }
 }
 @media (max-width:500px)  {
  .main_btn ul li a{
     position:relative;
     width:100%;
    padding:30px 0;
    font-size: 18px;
    }
 }

 @media (max-width:380px)  {
.main_btn ul li a{
     position:relative;
     width:100%;
     margin:30px auto;

    }
 }
.main_btn ul li a:after {
  content: "";
  border-top: 3px solid #000;
  border-right:3px solid #000;
  margin-top: -7px;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: rotate(45deg);
  border-radius: 2px;
 }

/*防水扉の特長 */

/*防水扉の特長　TOP*/
.feature_top{
  text-align: center;
padding:60px 200px;
  max-width: 1200px;
margin: 0 auto;
}
@media (max-width:1500px)  {
  .feature_top{
    text-align: center;
  padding:60px 100px;
    max-width: 1200px;
  margin: 0 auto;
  }
}
@media (max-width:1260px)  {
  .feature_top{
    text-align: center;
  padding:60px 50px;
    max-width: 1200px;
  margin: 0 auto;
  }
}
@media (max-width:800px)  {
  .feature_top{
    text-align: center;
  padding:60px 30px;
    max-width: 1200px;
  margin: 0 auto;
  }
}
.feature_top h2{
font-size:50px;
color:#000;
  display:flex;
  align-items: center;
  justify-content: center;
}
@media (max-width:800px)  {
  .feature_top h2{
  font-size:40px;
  color:#000;
    display:flex;
    align-items: center;
    justify-content: center;
  }
}
@media (max-width:500px)  {
  .feature_top h2{
  font-size:30px;
  color:#000;
    display:flex;
    align-items: center;
    justify-content: center;
  }
}
.feature_top h2::before,
.feature_top h2::after{

  content: "";
  flex-grow:1;
  border-top: 3px solid black;
  padding:0 30px;
}
@media (max-width:500px)  {
  .feature_top h2::before,
  .feature_top h2::after{
padding:0;
  }
}
.feature_top h2:before {
  margin-right: 2rem;

}
.feature_top h2:after {
  margin-left: 2rem;

}
.top_p{
  font-size: 40px;
  font-weight: bold;
  color:#D1D8DC;
  text-align: center;
}
@media (max-width:800px)  {
  .top_p{
    font-size: 30px;
    font-weight: bold;
    color:#D1D8DC;
  }
}
@media (max-width:500px)  {
  .top_p{
    font-size: 20px;
    font-weight: bold;
    color:#D1D8DC;
  }
}
/*防水扉の特長　特長まとめ*/

.feature_main{
  background-color: #D1D8DC;
  text-align: center;
  padding:60px 0;
}

.feature_main h2{
font-size: 50px;
color:#000;
    padding-bottom:60px;
}
 @media (max-width:1200px)  {
  .feature_main h2{
  font-size: 40px;
  color:#000;
      padding-bottom:60px;
  }
}
@media (max-width:800px)  {
 .feature_main h2{
 font-size: 30px;
 color:#000;
     padding-bottom:60px;
 }
}
.feature_main h2 .main_span{
font-size: 60px;
color:#000;
}
@media (max-width:800px)  {
  .feature_main h2 .main_span{
  font-size: 40px;
  color:#000;
 }
}
.feature_list{
  display:flex;
  justify-content: center;
  max-width:1200px;
  margin: 0 auto;
}
@media (max-width:800px)  {
  .feature_list{
    display:block;
    justify-content: center;

  max-width:100%;
 padding:0 30px;
    margin:0 auto;
  }
}
.feature_list_box{
  padding:0 30px;
}

.feature_list_box_top{
  background-color: #000000;
  padding:10px 0;
}
.feature_list_box_top h3{
    color:#ffffff;
    font-size:20px;

}
@media (max-width:1200px)  {
  .feature_list_box_top {

  margin:0 auto;
  }
}
.feature_list_box{
max-width:100%;
vertical-align:bottom;
}
@media (max-width:1200px)  {
  .feature_list_box{
padding:30px 0;
  }
}
@media (max-width:800px)  {
  .feature_list_box{
padding:30px 0;
max-width:280px;
margin:0 auto;
  }
}
@media (max-width:800px)  {
  .feature_list_box{

max-width:100%;
margin:0 auto;
  }
}
@media (max-width:800px)  {
.feature_list_box img{
  object-fit: cover;
width:100%;
height:300px;

}
}
@media (max-width:500px)  {
.feature_list_box img{
  object-fit: cover;
width:100%;
height:300px
}
}


 .feature_list_box a .feaure_btn {
   padding:10px 0;
   position: relative;
   bottom:8px;
  background-color: #ffffff;
font-size:20px;
font-weight: bold;
transition: 0.8s;
}
@media (max-width:1200px)  {
 .feature_list_box a .feaure_btn {
 padding:30px 0;
  }
}
 .feature_list_box a .feaure_btn:hover {
  background-color: #000;
  color:#fff;
 }
.feature_list_box a .feaure_btn::after {
  content: "";
  border-top: 3px solid #000;
  border-right:3px solid #000;
  margin-top: -7px;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: rotate(45deg);
  border-radius: 2px;
  transition: 0.8s;
 }
.feature_list_box a .feaure_btn:hover::after {
  border-top: 3px solid #ffff;
  border-right:3px solid #fff;
 }

/*特長　まとめ*/

@media (max-width:1200px)  {
.feature_main_box{
  text-align: center;
  margin:0 30px;
}
}
.feature_img{
  display:flex;
  justify-content: center;
 position: relative;
 top:60px;
}

.feature_img{
  display:flex;
 position: relative;
 top:60px;
}

@media (max-width:1200px)  {
  .feature_main_text{
 order: 2;
 max-width: 600px;
}
.feature_img{
 order: 1;
}
}

@media (max-width:800px)  {
  .feature_img .feature_jpg{
   width:100%;
  }
}

.feature_main_text h2{
  font-size: 50px;
  position: relative;
  right:5px;
}
@media (max-width:1200px)  {
.feature_main_text h2{
  position: relative;
  right:-5px;
    width:200px;
      font-size: 40px;
   }
}
.feature_main_text .feature_main_span{
  font-size: 40px;
  position: relative;
  top:10px;
  bottom:5px;
  font-weight:bold;

}
@media (max-width:800px)  {
  .feature_main_text .feature_main_span{
    font-size: 30px;
    position: relative;
    top:10px;
    right:-10px;
  }
}
@media (max-width:500px)  {
  .feature_main_text .feature_main_span{
    font-size: 23px;

  }
}
.feature_main_p{
  margin-top:30px;
line-height: 2.5;
}
@media (max-width:800px)  {
  .feature_main_p{
    margin-top:10px;
  line-height: 2;
  }
  .feature_main_p br{
   display:none;
  }
}
.feature_main_text h2::before{
content:"";
   display:inline-block;
   width: 7px;
   height: 40px;
   background-color: #BE7802;
  position: relative;
  top:75px;
  right:10px;
 }
 @media (max-width:1200px)  {
   .feature_main_text h2::before{
     width: 7px;

     position: relative;
     top:5px;
     right:5;
    }
 }
/*特長１*/
#feature_main_box_1{
  display:flex;
  justify-content:space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding:60px 0;
}
@media (max-width:1200px)  {
  #feature_main_box_1{
    display:inline-block;
text-align: left;
    max-width: 600px;
    margin: 0 auto;
    padding:60px 10px;

  }
}
@media (max-width:800px)  {
  #feature_main_box_1{
padding:60px 0;
  }
}
/*特長2*/
#feature_main_box_2{
  display:flex;
  justify-content:space-between;
  max-width: 1200px;
  margin: 0 auto;
    padding:60px 0;
}
@media (max-width:1200px)  {
  #feature_main_box_2{
    display:inline-block;
text-align: left;
  max-width: 600px;
    margin: 0 auto;
    padding:60px 10px;

  }
}
@media (max-width:800px)  {
  #feature_main_box_2{
padding:60px 0;
  }
}
/*特長3*/
#feature_main_box_3{
  display:flex;
  justify-content:space-between;
  max-width: 1200px;
  margin: 0 auto;
    padding:60px 0;
}
@media (max-width:1200px)  {
  #feature_main_box_3{
    display:inline-block;
text-align: left;
  max-width: 600px;
    margin: 0 auto;
    padding:60px 10px;

  }
}
@media (max-width:800px)  {
  #feature_main_box_3{
    display:inline-block;
text-align: left;

    margin: 0 auto;
    padding:60px 0;

  }
}
#feature_main_box_3 .feature_img .feature_img_box_3{
  display:flex;
  max-width:600px;
flex-wrap: wrap;
position: relative;
right:0;
}
@media (max-width:1200px)  {
  #feature_main_box_3 .feature_img .feature_img_box_3{
    position: relative;
    left:0;
      max-width:500px;
  }
}
@media (max-width:550px)  {
  #feature_main_box_3 .feature_img .feature_img_box_3{
display: inline-block;
position:static;
text-align: center;
  width:100%;
  }
}
.feature_img_box_list{
  position: relative;
  padding:15px 0;
  margin-left: auto;
  text-align: center;
}
@media (max-width:800px)  {
  .feature_img_box_list{
    position: relative;
    padding:30px 0;
    margin-left: auto;
    text-align: center;
  }
}
@media (max-width:800px)  {
.feature_img_box_list img{
  text-align: center;
  }
}
@media (max-width:800px)  {
.feature_img_box_list .feature_jpg{
object-fit: cover;
width:100%;
height:150px;
object-position: bottom;
  }
}
.feature_img_box_list .feature_png{
  position: absolute;
  top:-10px;
  left:-15px;
}
@media (max-width:800px)  {
  .feature_img_box_list .feature_png{
    width:70px;
    height:auto;
    position: absolute;
   top:-10px;
    left:-10px;
  }
}

/*設置事例*/
#example{
  padding:100px 0;
}
@media (max-width:800px)  {
#example{
  padding:30px 0;
}
}
@media (max-width:500px)  {
#example{
  padding:0;
}
}
/*設置事例　TOP*/

.example{
  text-align: center;
  padding:60px 0;
}
@media (max-width:1200px)  {
.example br{
display:none;
}
}
.example_top{
  padding-bottom:60px;
}
@media (max-width:800px)  {
  .example_top{
    padding:0 30px 60px;
  }
}
.example_top h2{
  font-size: 50px;
  color:#000000;
  display:flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width:1200px)  {
  .example_top h2{
    font-size: 40px;
    color:#000000;
    display:flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }
}
@media (max-width:800px)  {
  .example_top h2{
    font-size: 40px;
    color:#000000;
    display:flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    margin: 0 auto;
  }
}
@media (max-width:500px)  {
  .example_top h2{
text-align: center;
font-size: 30px;
  }
}
@media (max-width:500px)  {
.how_to_use .example_top h2{
text-align: center;
    font-size: 23px;
  }
  }
    .example_top h2::before,
.example_top h2::after{

  content: "";
  flex-grow:1;
  border-top: 3px solid black;
  padding:0 30px;
}
.how_to_use  .example_top h2::before,
.how_to_use  .example_top h2::after{

content: "";
flex-grow:1;
border-top: 3px solid black;
padding:0 10px;
}

.example_top h2:before {
  margin-right: 0.5rem;
}

.example_top h2:after {
  margin-left: 0.5rem;
}

.how_to_use.example_top h2:before {
  margin-right: 1rem;
}

.how_to_use.example_top h2:after {
  margin-left: 1rem;
}

/*設置事例　main*/

.example_main{
  text-align: center;
}

.example_main_h3{
  background-color: #000000;
  border-radius: 30px;
 max-width: 1200px;
 margin: 0 auto;
 padding:10px 0;
}
@media (max-width:1200px)  {
  .example_main_h3{
margin:0 30px;
  }
}
.example_main_h3 h3{
font-size:40px;
color:#ffffff;
}
@media (max-width:1200px)  {
  .example_main_h3 h3{
  font-size:30px;
  color:#ffffff;
  }
}
@media (max-width:800px)  {
  .example_main_h3 h3{
  font-size:20px;
  color:#ffffff;
  }
}
.example_box_top{
  display:flex;
  justify-content: space-between;
  padding: 60px 0;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width:1200px)  {
.example_box_top {
display: inline-block;
text-align: left;
  padding: 60px 30px;
}
}
@media (max-width:800px)  {
.example_box_top {
display: inline-block;
text-align: left;
  padding: 30px 30px;
}
}
.example_text{
  text-align: left;
}
.example_text h3{
  font-size: 40px;
  color:#000;
  padding-bottom: 30px;
}
@media (max-width:1200px)  {
  .example_text h3{
    font-size: 30px;
    color:#000;
    padding-bottom: 20px;
  }
}
@media (max-width:800px)  {
  .example_text h3{
    font-size: 26px;
    color:#000;
    padding: 10px 0;
  }
}
.example_text h3::before{
content:"";
   display:inline-block;

   width: 7px;
   height: 40px;
   background-color: #BE7802;
  position: relative;
  top:5px;
  right:5px;
 }
 @media (max-width:1200px)  {
.example_text h3::before{
  display:inline-block;
  width: 7px;
  height: 30px;
   }
 }
 .example_text p{
  line-height: 2.5;
}
@media (max-width:800px)  {
  .example_text p{
   line-height: 2;
 }
}
@media (max-width:1200px)  {
  .example_text p{
   max-width:600px;
 }
}
/*設置事例　施工スポット*/

.example_box_main{
  display:flex;
  justify-content: space-between;
  padding-bottom:60px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width:1200px)  {
  .example_box_main{
text-align: center;
  display:inline-block;
    padding-bottom:30px;
    max-width: 600px;
    margin: 0 auto;
  }
}
.example_box_main h4{
  background-color: #D1D8DC;
  border-radius: 30px;
  padding:10px 30px;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
  max-width: 550px;
}
@media (max-width:1200px)  {
  .example_box_main h4{
    background-color: #D1D8DC;
    border-radius: 30px;
    padding:10px 30px;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 30px;
    max-width: 550px;
  }
}
@media (max-width:800px)  {
  .example_box_main h4{
font-size: 20px;
  }
}
.example_box_main p{
  text-align:left;
  max-width:550px;
line-height: 2;
}

.example_box_main_1:nth-child(1){
  padding-right: 50px;
}

@media (max-width:1200px)  {
  .example_box_main_1:nth-child(1){
  display: inline-block;
    padding-right: 0;
    padding-bottom:30px;
      margin:0 30px;
  }
}
.example_box_main_1:nth-child(2){
  padding-left: 50px;
}
@media (max-width:1200px)  {
  .example_box_main_1:nth-child(2){
    display: inline-block;
  padding-left: 0;
      padding-bottom:30px;
        margin:0 30px;
  }
}
.example_box_img{
  display:flex;
  justify-content:space-between;
}
@media (max-width:1200px)  {
  .example_box_img {
    display:inline-block;
text-align: center;
max-width: 600px;
  }
}
@media (max-width:800px)  {
  .example_box_img img{
width: 100%;
  }
}
/*設置事例　導入した*/

.example_box_bottom{
  max-width:1200px;
  margin:0 auto
}
@media (max-width:800px)  {
  .example_box_bottom{
    display: inline-block;
    max-width:100%;
    margin:0 30px;

  }
}


.example_box_bottom h4{
  background-color: #D1D8DC;
  border-radius: 30px;
  padding:10px 30px;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 30px;
  max-width: 1200px;
}
@media (max-width:1200px)  {
.example_box_bottom h4{
    background-color: #D1D8DC;
    border-radius: 30px;
    padding:10px 30px;
    font-size: 26px;
    font-weight: bold;
    margin:0 auto 30px;
    max-width: 550px;

  }
}
@media (max-width:800px)  {
.example_box_bottom h4{
font-size: 20px;
  }
}
@media (max-width:400px)  {
.example_box_bottom h4{
font-size: 18px;
  }
}

.example_box_img_bottom {
  display: flex;
  justify-content: space-between;
}
@media (max-width:1200px)  {
  .example_box_img_bottom {
    display:inline-block;
  text-align: center;
  }
}
@media (max-width:800px)  {
  .example_box_img_bottom img{
width:100%;
  }
}
.example_box_bottom p{
  line-height: 2;
  text-align:left;

}

/*防水扉　紹介動画*/

#movie_1{
  padding-bottom:100px;
}
@media (max-width:1200px)  {
  #movie_1{
padding:0 30px 60px;
  }
}
.movie_top{
  text-align: center;
  padding:60px 30px;
}


@media (max-width:1200px)  {
.movie_top{
   margin:0 auto;
     padding:30px 0 60px;
  }
}
.movie_top h2{
  font-size: 50px;
  color:#000000;
  display:flex;
  align-items: center;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width:1200px)  {
.movie_top h2{
    font-size: 40px;
    color:#000000;
    display:flex;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
  }
}
@media (max-width:800px)  {
.movie_toph2{
    font-size: 30px;
    color:#000000;
    display:flex;
    align-items: center;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
  }
}
@media (max-width:500px)  {
.movie_toph2{
    font-size: 30px;
    color:#000000;
    display:flex;
    align-items: center;
    justify-content: center;
    max-width: 300px;
    margin: 0 auto;
  }
}
.movie_top h2::before,
.movie_top h2::after{

  content: "";
  flex-grow:1;
  border-top: 3px solid black;

}

.movie_top h2:before {
  margin-right: 2rem;

}
.movie_top h2:after {
  margin-left: 2rem;

}

.movie{
	position: relative;
	width: 100%;
	height:500px;
}
@media (max-width:800px)  {
  .movie{

  	height:300px;
  }
}
@media (max-width:500px)  {
  .movie{

  	height:190px;
  }
}
.movie_video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.movie_video video{
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%);
	max-width:800px;
	height: 100%;
}
@media (max-width:800px)  {
  .movie_video video{
	width: 100%;
  	height: auto;
  }
}
/*次の商品*/

.next{
	position: relative;
padding-bottom: 100px;
}
@media (max-width:800px)  {
  .next{
  	position: relative;
  padding-bottom: 60px;
  }
}
.next_box{
padding:0 30px;
}
.next_box img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/*吊ってみた*/

/*吊ってみた商品紹介*/

.hang{

max-width:1200px;
margin: 0 auto;
}

.hang_box{
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  background-color: #D1D8DC;
  text-align: center;
  padding:60px 0;
}

.hang_box  .hang_box_img {
  padding-right:60px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width:1024px)  {
  .hang_box  .hang_box_img{

    padding:0 30px;

  }
}
.hang_box  .hang_box_img img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.hang_box .hang_text{

}
@media (max-width:1024px)  {
.hang_box  .hang_text{
order: -1;
}
}
@media (max-width:800px)  {
.hang_box  .hang_text{
padding:0 30px 30px;
}
}
.hang .hang_text h3{
  background-color: #000;
  border-radius: 40px;
  color:#fff;
font-size:30px;
padding:10px 0;
  margin-right:60px;
}
@media (max-width:1024px)  {
  .hang .hang_text h3{
    background-color: #000;
    border-radius: 50px;
    color:#fff;
  font-size:30px;
    margin:0 auto;
  }
}
@media (max-width:800px)  {
  .hang .hang_text h3{
    background-color: #000;
    border-radius: 50px;
    color:#fff;
  font-size:26px;
    margin:0 auto;

margin: 0 auto;
  }
}
@media (max-width:500px)  {
  .hang .hang_text h3{
  font-size:20px;

  }
}
.hang .hang_text p{
  font-size: 20px;
  font-weight:bold;
  text-align:left;
  position: relative;
  left:30px;
}
@media (max-width:1024px)  {
  .hang .hang_text p{
    position: relative;
    left:60px;
  }
}
@media (max-width:800px)  {
  .hang .hang_text p{
    position: relative;
    left:0;
    margin-left: 40px;
  }
}
.hang .hang_text img{
  position: relative;
  right:50px;
  max-width:600px;
  height:auto;
}
@media (max-width:1024px)  {
  .hang .hang_text img{
    position: static;
    max-width:500px;
    height:auto;
  }
}
@media (max-width:500px)  {
  .hang .hang_text img{
    position: static;
    max-width:100%;
    height:auto;
  }
}
/*吊ってみた　ボタン*/

.hang_btn{
  padding:100px 0;
  display: flex;
  flex-wrap: wrap;
  max-width:1200px;
  margin: 0 auto;
}
@media(max-width:800px){
.hang_btn{
  max-width:800px;
margin: auto;
  padding:60px 30px;

  }
}
.hang_btn a{

  text-align: center;
  position:relative;
 width:500px;
 margin:30px auto;
 padding:40px 0;
 color:#000;
 font-size:26px;
 font-weight: bold;
   scroll-behavior: smooth;
   text-align: center;
background-color: #D1D8DC;
}
@media(max-width:800px){
.hang_btn a{
margin:20px auto;
 padding:30px 0;
  font-size:20px;
   width:100%;

  }
}
@media(max-width:500px){
.hang_btn a{
  font-size:18px;

  }
}
.hang_btn a::after{
  content: "";
  border-top: 3px solid #000;
  border-right:3px solid #000;
  margin-top: -7px;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: rotate(45deg);
  border-radius: 2px;
 }
 @media(max-width:500px){
   .hang_btn a::after{
       margin-top: -5px;
     position: absolute;
     top: 49%;
     right: 20px;
     transform: rotate(45deg);
     border-radius: 2px;
    }
 }
.hang_btn a:hover{
   opacity: 0.7;
 }
/*吊ってみた　開発者エピソード*/

.episode_box{
  position: relative;
  display:flex;
  justify-content:center;
    background-color: #000000;

    padding:100px 0;
}
@media(max-width:800px){
.episode_box{
  position: relative;
  display:inline-block;
text-align: center;
    background-color: #000000;
    padding:60px 30px;
}
}
@media(max-width:500px){
.episode_box{

}
}
.episode_text{
    padding-right:50px;
}
@media(max-width:800px){
  .episode_text{
      padding-right:0;
  }

}
.episode_text h3{
  font-size:40px;
color:#fff;
  }
  @media(max-width:800px){
    .episode_text h3{
      font-size:30px;
    color:#fff;
    text-align: left;
      }
    }
    @media(max-width:500px){
      .episode_text h3{
        font-size:23px;
      color:#fff;
      text-align: left;
        }
      }
      @media(max-width:380px){
        .episode_text h3{
          font-size:21px;
        color:#fff;
        text-align: left;
          }
        }
  .episode_text p{
    font-size:18px;
  color:#fff;
  line-height:2.5;
    }
@media(max-width:800px){
  .episode_text p{
    font-size:16px;
  color:#fff;
  line-height:2;
margin: 30px 0;
  text-align: left;
    }
  .episode_text p br{
  display: none;
  }
}
/*吊ってみた　使用方法*/

#how_to_use{
  padding:100px 0 60px;
}
.how_to_use_main{
  background-color: #D1D8DC;
  padding:60px 0;
}
.how_to_use_main h2{
  text-align: center;
  font-size:50px;
  padding-bottom:30px;
  color:#000;
}
@media(max-width:1200px){
  .how_to_use_main h2{
    text-align: center;
    font-size:40px;
  }
  }
  @media(max-width:800px){
    .how_to_use_main h2{
      text-align: center;
      font-size:30px;
    }
    }
 .how_to_use_main h2 .how_top_use_span{
  font-size: 60px;
     color:#000;
}
.how_to_use_list{
  display:flex;
  justify-content: center;
  text-align: center;
}
@media(max-width:800px){
  .how_to_use_list{
    display:block;
    margin: 0 auto;
    max-width:100%;
  }
  }
.how_to_use_list_box {
  margin:0 30px;
}
@media(max-width:800px){
  .how_to_use_list_box {
text-align: center;
padding:30px 0;
  }
  }
.how_to_use_list_box h3{
background-color: #000;
color:#fff;
padding:10px 0;
font-size: 30px;
}

.how_to_use_list_box img{
object-fit: cover;
width:100%;
height:300px;
}
.how_to_use_list_box a .how_to_use_btn_box{
  position:relative;
  bottom:8px;
  background-color:#fff;
  padding:10px 0;
  font-size:20px;
  font-weight: bold;
}
@media(max-width:800px){
.how_to_use_list_box a .how_to_use_btn_box{
padding:30px 0;

  }
  }
.how_to_use_list_box a .how_to_use_btn_box:hover{
background-color: #000;
  color:#fff;
}
.how_to_use_list_box a .how_to_use_btn_box::after{
  content: "";
  border-top: 3px solid #000;
  border-right:3px solid #000;
  margin-top: -7px;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: rotate(45deg);
  border-radius: 2px;
 }
.how_to_use_list_box a .how_to_use_btn_box:hover::after{
  border-top: 3px solid #fff;
  border-right:3px solid #fff;
 }



/*吊ってみた　ステップ*/
@media(max-width:800px){
.how_to_use_step{
text-align: center;
}
}
@media(max-width:800px){
.how_to_use_step_text{
 padding-bottom:30px;
}
}
.how_to_use_step_text h3{
  font-size:50px;

}
@media(max-width:800px){
  .how_to_use_step_text h3{
    font-size:40px;
  }
}
@media(max-width:500px){
  .how_to_use_span{
    font-size: 30px;
  }
 }
.how_to_use_step_text h3::before{
content:"";
   display:inline-block;
   width: 7px;
   height: 40px;
   background-color: #BE7802;
  position: relative;
  top:5px;
  right:5px;
 }
 .how_to_use_span{
   font-size: 40px;
 }
 @media(max-width:800px){
   .how_to_use_span{
     font-size: 30px;
   }
  }
  @media(max-width:500px){
    .how_to_use_span{
      font-size: 20px;
    }
   }
 .how_to_use_step_text p{
font-size:16px;
   line-height: 2.5;
 }
}
@media(max-width:800px){
  .how_to_use_step_text p{
 font-size:16px;
    line-height: 2;
  }
 }
@media(max-width:800px){
  .how_to_use_step_text p br{
  display: none;
  }
 }

 .how_to_use_step_img {
 text-align: center;
 }

 .how_to_use_step_img p{
text-align: left;
 }
 @media(max-width:800px){
.how_to_use_step_img p{
font-size: 13px;
}
}

/*吊ってみた　ステップ1*/
#how_to_use_step_1{
  display:flex;
  justify-content:space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding:60px 0;
}
@media(max-width:800px){
  #how_to_use_step_1{
    display:inline-block;
    text-align:left;
    margin: 0 auto;
    padding:30px;
  max-width:580px;
  }
    #how_to_use_step_1 p br{
 display: none;
  }
  }
#how_to_use_step_1 .how_to_use_step_img{
  display: flex;
  justify-content: center;
}

/*吊ってみた　ステップ2*/
#how_to_use_step_2{
  display:flex;
  justify-content:space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding:60px 0;
}
@media(max-width:800px){
  #how_to_use_step_2{
    display:inline-block;
    text-align:left;
    margin: 0 auto;
    padding:30px;
    max-width:580px;
  }
    #how_to_use_step_2 p br{
 display: none;
  }
  }
.how_to_use_step_img_2_box{
  max-width: 288px;

}
#how_to_use_step_2 .how_to_use_step_img .how_to_use_step_img_1{
margin-bottom:10px;
}
#how_to_use_step_2 .how_to_use_step_img .how_to_use_step_img_2{
  display: flex;
  justify-content: center;
}

/*吊ってみた　ステップ3*/
#how_to_use_step_3{
  display:flex;
  justify-content:space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding:60px 0;
}
@media(max-width:800px){
  #how_to_use_step_3{
    display:inline-block;
    text-align:left;
    margin: 0 auto;
    padding:30px;
  max-width:580px;
  }
    #how_to_use_step_3 p br{
 display: none;
  }
  }
#how_to_use_step_3 .how_to_use_step_img{
  display: flex;
  justify-content: center;
}

/*吊ってみた　導入メリット*/
#mer{
  padding-bottom:100px;
}
@media(max-width:800px){
.merit{
  margin:0;
}
}
.merit_main{
  margin:0 30px;
}
.merit_list{
  max-width: 1200px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.merit_box{
  text-align: center;
  position:relative;
 width:450px;
 margin: 10px auto;
 font-size:26px;
 font-weight: bold;
   scroll-behavior: smooth;
  background-color: #D1D8DC;
  padding:50px 60px;
  border-radius: 10px;
}
@media(max-width:1155px){
  .merit_box{
    text-align: center;
    position:relative;
   max-width:600px;
   margin: 10px auto;
   font-size:23px;
   font-weight: bold;
     scroll-behavior: smooth;
    background-color: #D1D8DC;
  padding:30px;
    border-radius: 10px;
  }
}
@media(max-width:800px){
  .merit_box{
font-size: 18px;
  }
}
@media(max-width:500px){
  .merit_box{
width:300px;
  }
}
.merit_box_long{
  text-align: center;
  position:relative;
 max-width:1050px;
 margin: 10px auto;
 font-size:26px;
 font-weight: bold;
   scroll-behavior: smooth;
  background-color: #D1D8DC;
  padding:50px 60px;
  border-radius: 10px;
}
@media(max-width:1155px){
  .merit_box_long{
    text-align: center;
    position:relative;
   max-width:450px;
   margin: 10px auto;
   font-size:26px;
   font-weight: bold;
     scroll-behavior: smooth;
    background-color: #D1D8DC;
    padding:30px;
    border-radius: 10px;
  }
}
@media(max-width:800px){
  .merit_box_long{
font-size: 14px;
  }
}
@media(max-width:500px){
  .merit_box_long{
max-width: 300px;
  }
}
  .merit_box_long h3{
    color: #BE7802;
}

.merit_box_long h3 br{
display: none;
}
@media(max-width:500px){
  .merit_box_long h3 br{
  display: block;
  }
}
@media(max-width:800px){
  .merit_box_long{
font-size: 14px;
  }
}
.merit_box h3{
  color: #BE7802;
}


/*吊ってみた　紹介動画*/


#movie_2{
  padding-bottom:100px;
}
@media (max-width:1200px)  {
  #movie_2{
padding:0 30px 60px;
  }
}



/*トップページに戻るボタン*/
#page_top{
display: none;
}
@media(max-width:860px){
  #page_top{
    position: fixed;
    right: 26px;
    bottom: 40px;
    width: 74px;
    height: 74px;
    background: #BE7802;
    border-radius: 50%;
    z-index: 99;
    box-shadow: 0 0 5px gray;
   transition: 0.9s;
  }
  #page_top:hover{
    opacity: 0.7;
  }
}

@media(max-width:860px){
#page_top a{
  position: relative;
  top:31px;
  left:28px;
  display: block;
  width: 14px;
 height: 14px;
 border: 2px solid #fff;
 border-color: transparent transparent #fff #fff;
 transform: rotate(135deg);
 border-radius: 3px;
  }
}


/*フッダー*/
footer{
  text-align: center;
}

/*お問い合わせ*/

.inquiry{
  background-color: #000000;
  text-align: center;
  padding:60px 0;
}
.inquiry h2{
  color:#fff;
    font-size: 50px;
    padding-bottom:30px;
}
@media (max-width:1200px)  {
  .inquiry h2{
    color:#fff;
      font-size: 40px;
      padding-bottom:30px;
  }
}
@media (max-width:800px)  {
  .inquiry h2{
    color:#fff;
      font-size: 30px;
      padding-bottom:30px;
  }
}
.inquiry p{
  color:#fff;
    font-size: 26px;
}
@media (max-width:800px)  {
  .inquiry p{
    color:#fff;
      font-size: 20px;
      margin:0 30px;
  }
}
@media (max-width:500px)  {
  .inquiry p{
    color:#fff;
      font-size: 14px;
      margin:0 30px;
  }
}
  .inquiry p br{
    display: none;
  }
  @media (max-width:500px)  {
    .inquiry p br{
      display: block;
    }
  }
.inquiry img{
  padding-top:60px;
}
@media (max-width:800px)  {
.inquiry img{
    padding-top:40px;
max-width:60%;
  }
}
/*電話でのお問い合わせ*/
.inquiry_tel{
  background-color: #fff;
  color:#000;
  max-width: 800px;
  margin:30px auto;
  padding:50px 0;
  border-radius: 10px;
}
@media (max-width:800px)  {
  .inquiry_tel{
margin: 30px;
  }
}
.inquiry_tel h3{
font-size: 40px;
  color:#000;
}
@media (max-width:800px)  {
  .inquiry_tel h3{
  font-size: 30px;
    color:#000;
    font-weight: bold;
  }
}
@media (max-width:500px)  {
  .inquiry_tel h3{
  font-size: 23px;
  }
}

.inquiry_tel_btn{
  padding: 10px 0;
}
.inquiry_tel a{
font-size: 80px;
  color:#BE7802;
  font-weight: bold;
}
@media (max-width:800px)  {
  .inquiry_tel a{
  font-size: 60px;
    color:#BE7802;
    font-weight: bold;
  }
}
@media (max-width:500px)  {
  .inquiry_tel a{
  font-size: 40px;
    color:#BE7802;
    font-weight: bold;
  }
}
.inquiry_tel p{
font-size: 26px;
  color:#000;
  font-weight: bold;
}
@media (max-width:1200px)  {
  .inquiry_tel p{
  font-size: 20px;
  }
}
@media (max-width:800px)  {
  .inquiry_tel p{
  font-size: 16px;
  }
}
/*メールでのお問い合わせ*/

.inquiry_meil{
  background-color: #fff;
  color:#000;
  max-width: 800px;
  margin:0 auto;
  padding:30px 0;
  border-radius: 10px;
  position: relative;
}
@media (max-width:800px)  {
.inquiry_meil{
margin: 30px;
  }
}
.inquiry_meil h3{
color:#000;
font-size: 40px;
}
@media (max-width:800px)  {
  .inquiry_meil h3{
  color:#000;
  font-size: 30px;
  }
}
@media (max-width:500px)  {
  .inquiry_meil h3{
  color:#000;
  font-size: 23px;
  }
}
.inquiry_meil_btn{
margin:30px auto;
padding:60px 0;
}
@media (max-width:500px)  {
  .inquiry_meil_btn{
 padding:20px 0;

  }
}
.inquiry_meil_btn a{
padding:36px 150px;
border:3px solid#707070;
  margin:  auto;
font-size: 26px;
font-weight: bold;
position:relative;

}
@media (max-width:800px)  {
.inquiry_meil_btn a{
padding:25px 80px;
border:3px solid#707070;
  margin:  auto;
font-size: 26px;
font-weight: bold;
position:relative;

}
}
@media (max-width:500px)  {
  .inquiry_meil_btn a{
  padding:20px 40px;
  border:3px solid#707070;
    margin:  auto;
  font-size:20px;
  font-weight: bold;
  position:relative;

  }
}
.inquiry_meil_btn a::after {
  content: "";
  border-top: 3px solid #000;
  border-right:3px solid #000;
  margin-top: -7px;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 50%;
  right: 70px;
  transform: rotate(45deg);
  border-radius: 2px;
   }
   @media (max-width:800px)  {
     .inquiry_meil_btn a::after {
       content: "";
       border-top: 3px solid #000;
       border-right:3px solid #000;
       margin-top: -3px;
       height: 10px;
       width: 10px;
       position: absolute;
       top: 49%;
       right: 30px;
       transform: rotate(45deg);
       border-radius: 2px;
        }
   }
   @media (max-width:500px)  {
     .inquiry_meil_btn a::after {
       content: "";
       border-top: 3px solid #000;
       border-right:3px solid #000;
       margin-top: -4px;
       height: 10px;
       width: 10px;
       position: absolute;
       top: 49%;
       right: 20px;
       transform: rotate(45deg);
       border-radius: 2px;
        }
   }
.page_bottom p{
  font-size: 16px;
  color:#000;
}