/* CSS Document */

/*base*/

html{
  scroll-behavior: smooth;
}

.section_top{
  padding-top: 90px;
}



.hide {
  transform: translateY(-90px);
}

.sec{
    
    margin-top: 20px;
    margin-bottom: 60px;
    
    
    }

.sec li{
    padding: 20px 0 5px 0;
}



.sec h2{
    font-size: 30px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: bold;
  }

.sec h3{
    font-size: 1.5rem;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: bold;
}

.sec img{
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

.sec p{
  text-indent: 0.8em ;
}

.borderbox > div{
  padding-right: 2%;
}

.parent{
    width: 90%;
    margin:0 10px 30px 10px;
    position: relative;
    
 
   
}

.child1{
    
    width:50%;
  
    position:relative;
    top:10%;
    left:5%;
    z-index:1;
}

.child2{
    display: block;
    width:50%;
    position: relative;
    top:10%;
    

    transform: translateX(-50%);
    
}

.child3{
    
  width:75%;

  position:relative;
  top:10%;
  left:5%;
  z-index:3;
}

.child4{
  width:25%;
  position: relative;
  z-index:4;
 
  

  transform: translateX(-20%);
  transform: translateY(3%);
  
}

/*吹き出し*/
.img-title{
  font-size: 1.5rem;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  border:6px solid #40a0ff;
  color:#333;
  border-radius:30%;
  -webkit-border-radius:30%;
  -moz-border-radius:30%;
  position:relative;
  padding: 10px;
 
}
.img-title:after,.img-title:before{
  border: solid transparent;
  content:'';
  height:0;
  width:0;
  pointer-events:none;
  position:absolute;
  bottom:100%;
  left:50%;
  
}
.img-title:after{
  border-color: rgba(255, 255, 255, 0);
  border-top-width:20px;
  border-bottom-width:20px;
  border-left-width:10px;
  border-right-width:10px;
  margin-left: -10px;
  border-bottom-color:#FFFFFF;
}
.img-title:before{
  border-color: rgba(21, 100, 177, 0);
  border-top-width:32px;
  border-bottom-width:32px;
  border-left-width:16px;
  border-right-width:16px;
  margin-left: -16px;
  margin-bottom: 6px;
  border-bottom-color:#40a0ff;
}

.titlecall{
  font-size: 2.8em;
  padding: 20px;
  margin:0 auto;
}

.beforeAfter{
  width:100%;
}

.beforeAfter h3{
  padding-left: 1em;
  font-weight: bold;
  font-size: 1.2rem;
  color: #FFFFFF;
  margin-top: 10px;
}

.beforeAfter p{
 
  color: #333;
  padding-top:1em;
  margin-left:5px;
  
}

.after-list {
  display: flex;
	flex-wrap: wrap;
}

.after-list li img{
  width:100%;
}

.before{
  margin: 0 auto;
  width: 85%;
}

.after{
  margin:0 auto;
  position: relative;
}

.voice{
  width: 70%;
  display: block;
  margin:0 auto;
  margin-top: 10px;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); 
  background-color: rgb(255, 251, 241); /* 背景色 */
  left:20px;


  position: absolute;
  z-index:5;
  transform: translateY(250%);
}

.note{
 width:90%;
 margin:20px auto;
  
  


 
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, rgb(255, 251, 241) 50%, rgb(255, 251, 241) 100%), /* 点線1の色 */
                    linear-gradient(180deg, rgb(173, 156, 136) 1px, transparent 1px); /* 点線2の色と太さ */
  background-size: 8px 100%, /* 点線1のサイズ */
                   100% 2.5em; /* 点線2のサイズ */
  line-height: 2.5em; /* 文字の高さ */
  padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}

.voice h3{
  font-family:'Yomogi','san-serif';
  font-size: 1.8rem;
  font-weight: bolder;
  text-align: center;
}


.voice p{
  
 

  font-family: 'Yomogi','san-serif';
  font-size: 1.4rem;

}

/*左マージン*/
.ml{
    margin-left: 70px;
}

.cp_qa *, .cp_qa *:before, .cp_qa *:after {
font-family: 'FontAwesome', sans-serif;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa {
margin: 0 auto;
background: #ffffff;
}
.cp_qa input {
display: none;
}
/* カテゴリー */
.cp_qa #cp_content1,
.cp_qa #cp_content2,
.cp_qa #cp_content3,
.cp_qa #cp_content4 {
display: none;
padding: 20px 0 0;
border-top: 1px solid #dddddd;
}
.cp_qa label.cp_tabitem {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
text-align: center;
color: #bbbbbb;
border: 1px solid transparent;
}
.cp_qa label.cp_tabitem:before {
margin-right: 10px;
}
.cp_qa label.cp_tabitem[for*='1']:before { content: '\f2bd'; }
.cp_qa label.cp_tabitem[for*='2']:before { content: '\f15c'; }
.cp_qa label.cp_tabitem[for*='3']:before { content: '\f0f4'; }
.cp_qa label.cp_tabitem[for*='4']:before { content: '\f001'; }
.cp_qa label.cp_tabitem:hover {
cursor: pointer;
color: #888888;
}
.cp_qa input:checked + label {
color: #555555;
border: 1px solid #dddddd;
border-bottom: 1px solid #ffffff;
}
/* --ブロックのバーの色 */
.cp_qa input:checked + label[for*='1'] {
border-top: 5px solid #00BCD4;
}
.cp_qa input:checked + label[for*='2'] {
border-top: 5px solid #FF5722;
}
.cp_qa input:checked + label[for*='3'] {
border-top: 5px solid #03A9F4;
}
.cp_qa input:checked + label[for*='4'] {
border-top: 5px solid #E91E63;
}
@media screen and (max-width: 650px) {
.cp_qa label.cp_tabitem {
font-size: 0;
}
label:before {
font-size: 18px;
margin: 0;
}
}
@media screen and (max-width: 400px) {
.cp_qa label.cp_tabitem {
padding: 15px;
}
.cp_qa label.cp_tabitem:before {
margin-right: 0px;
}
}
/* QAブロック */
.cp_qa #cp_conttab1:checked ~ #cp_content1,
.cp_qa #cp_conttab2:checked ~ #cp_content2,
.cp_qa #cp_conttab3:checked ~ #cp_content3,
.cp_qa #cp_conttab4:checked ~ #cp_content4 {
display: block;
}
.cp_qa .cp_qain {
overflow-x: hidden;
margin: 0 auto;
color: #333333;
}
.cp_qa .cp_qain .cp_actab {
padding: 20px 0;
border-bottom: 1px dotted #cccccc;
}
/* 質問 */
.cp_qa .cp_qain label {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 10px 10px 0 48px;
cursor: pointer;
}

.cp_qa .cp_qain label:hover {
opacity: 0.7;
}
/* ＋アイコン */
.cp_qa .cp_qain .cp_plus {
font-size: 2em;
line-height: 100%;
position: absolute;
z-index: 5;
margin-top: 3px;
margin-left: 10px;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
}


/* 答え */
.cp_qa .cp_qain .cp_actab-content {
position: relative;
overflow: hidden;
color:#6B6B6B;
background-color: rgba(199,199,199,0.2);
border-radius: 3px;
height: 0;
margin: 10px 10px 0 48px;
padding: 14px 15px;
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
opacity: 0;
}
/* 質問を開いた時の仕様 */
.cp_qa .cp_qain .cp_actab input[type=checkbox]:checked ~ .cp_actab-content {
height: auto;
opacity: 1;
}
/* 質問をクリックした時の▼アイコンの動き */
.cp_qa .cp_qain .cp_actab input[type=checkbox]:checked ~ .cp_plus {
-webkit-transform: rotate(45deg );
transform: rotate(45deg) ;
    
}


#cp_content1 .cp_qain .plus::before,
#cp_content2 .cp_qain .plus::before,
#cp_content3 .cp_qain .plus::before,
#cp_content4 .cp_qain .plus::before{
    content: '\f067';
    font-family: "Font Awesome 5 Free";
    font-size: 24px;
}

#cp_content1 .cp_qain .plus::before {
        color: #555555;
}
#cp_content2 .cp_qain .plus::before {
        color: #FF5722;
}
#cp_content3 .cp_qain .plus::before {
        color: #03A9F4;
}
#cp_content4 .cp_qain .plus::before {
        color: #E91E63;
}



/* 各ページ用 */

/*文字グラデーション*/






.gradation {
   
    background: linear-gradient(90deg, #002aff, #ff02ee 30%, #ffa600);
    
    -webkit-background-clip: text;
    -webkit-linear-gradient:(0deg,  #002aff, #ff02ee 30%, #ffa600);
    -webkit-text-fill-color: transparent;
    background-size: 300% auto;
    animation: gradientEffect 2.5s infinite alternate;
}
 
@keyframes gradientEffect {
  from {background-position: left}
  to {background-position: right}
}
  

/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachText{

  white-space:nowrap;
  overflow:hidden;
  animation:eachText 2s linear;
}

@keyframes eachText{
  from{
    width: 0%;
  }
  to{
    width:100%;
  }
}

/*複数行*/
#s1,#s2,#s3 {

  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
 
  }


#s1.on{
animation:s1 3s linear;
}
@keyframes s1 {
  0% { width:0em; }
  33% { width:8em; }
  66% { width:8em; }
  to { width:8em; }
}
#s2.on{
animation:s2 3s linear;
}
@keyframes s2 {
      0% { width:0em; }
      33% { width:0em; }
      66% { width:6em; }
      to { width:6em; }
}
#s3.on{
animation:s3 3s linear;
}
@keyframes s3 {
       0% { width:0em; }
      33% { width:0em; }
      66% { width:0em; }
      to { width:6em; }
}

/*見出し*/

.main_Box{
        
        text-align:center;
       
        height: 90vh;
        display:flex;
        justify-content: center;
        text-align:center;
        position: relative;
        padding: auto;
    
}


.copy h1 {
    color: #FFFFFF;
    display:block;
    font-size:1.9rem;
    text-align: center;
    font-family: 'M PLUS 1p', sans-serif;
    text-shadow: 1px 2px 3px #808080;  
	}

.copy p {
    display:block;
    font-size:4.8rem;
    font-family: 'M PLUS 1p', sans-serif;
    letter-spacing: .1em;
    line-height: 1.5em;
    text-align: center;
    padding: 30px 0;
    font-weight: 300; 
     
    
    }
    
 
.main_box_img{
    background-size: cover;
    background: no-repeat center center;
}

.copy{
    display: block;
    position: absolute;
    z-index: 11;
    margin:0 auto;
    top:20%;
    left: 50%;
    transform: translateX(-50%);
   
    margin-bottom: 20px;
    width:80%;
    
    
    
}



/*イメージ画像*/

.img-list {
    margin: 0 auto;
    display: flex;
	flex-flow: flex-start;
	justify-content:space-between;
    padding: 60px 0;
}


.img-list li {
	width: 25%;
}

.img-list li img {
	width: 100%;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}



/*メニュー*/
.menu {
    width: 100%;
    background-color: #eeeeee;	
   border-bottom: 1px solid #eee;

    
}

.menu ul{
  width:70%;
  margin:0 auto;
  display: flex;
  justify-content:flex-start;
  padding: 5px 10px;
  
}

.menu li{
  display:block;
  margin:0 auto;
  padding: 5px 1px;
  width: 25%;

}


.menu a{
    display: block;
        text-align:center;
  padding:5px 10px;
    transition: all 0.5s;
  color:#6B6B6B;
}

.menu a:hover {
background-color: rgba(109,109,109,0.30);
  color:#000;
}



/*キャッチコピー*/
.catch{
  margin-top: 90px;
  padding:35px 60px;

}

.catch h2{
  font-size:4rem;
  font-weight:700;
  font-family: 'M PLUS 1p', sans-serif;
  color:#020202a6;
  text-shadow: 1px 2px 3px #ffffff;  

}

.catch p{
  font-size: 1.1rem;
  font-weight: bold;
  padding:20px 0;
  letter-spacing:.1rem;
 
}


/*コンセプト*/




.concept h2{
        font-size:36px;
        font-weight:bold;
        
    }
    
.concept p {
        font-size: 18px;
        font-weight: bold;
            padding:20px 0;
            
        letter-spacing:.1rem;
        
            
    }
    
.concept{
            max-width:900px;
            margin:40px auto;
            background-color: rgba(255, 254, 254, 0.6);
            padding:35px 60px;
            text-align:center;
           
    }

    
.concept-text {
	margin-top:-80px; 
	padding:20px 15px;
    width: 60%;
    position: relative;
    z-index: 10;
    background: rgba(224,224,224,.50);
}

.about-mustwood .concept-text{
    color:#fff;
     background: rgba(42,42,42,0.50);
}


.concept-text h2{
    font-size:36px;
}

.concept-text p{
    margin:5px 0;
}



/*ボタン付き自動再生スライダー*/

.content{
 
  height:100%;
  width: 100%;
  overflow: hidden;
  float:left;
  position:relative;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
  

}

.slides{
  display: flex;
  width: 400%;
  height: 100%;
}

.slide {
  width: 25%;
  transition: 0.6s;
 
}

.slide img {
  width: 100%;
  height: 100%;
}

#slide1:checked ~ .s1 {
  margin-left: 0;
}

#slide2:checked ~ .s1 {
  margin-left: -25%;
}

#slide3:checked ~ .s1 {
  margin-left: -50%;
}

#slide4:checked ~ .s1 {
  margin-left: -75%;
}

#slide5:checked ~ .s1 {
  margin-left: 0;
}

#slide6:checked ~ .s1 {
  margin-left: -25%;
}

#slide7:checked ~ .s1 {
  margin-left: -50%;
}

#slide8:checked ~ .s1 {
  margin-left: -75%;
}
#slide9:checked ~ .s1 {
  margin-left: 0;
}

#slide10:checked ~ .s1 {
  margin-left: -25%;
}

#slide11:checked ~ .s1 {
  margin-left: -50%;
}
.navigation {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translate(-50%);
  display: flex;
}

.bar {
  width: .8rem;
  height: .8rem;
  border: 2px solid white;
  border-radius: 50%;
  margin: 0.4rem;
  cursor: pointer;
}

.bar:hover {
  background-color: #ffffff8e;
  transition: 0.2s;
}



input{
  display: none;
}


  
  /*写真スペース*/
  .photogallery img{
    padding: 15px;
    margin: 0 auto;
    
  }

 /*コンタクトエリア*/


 .contact-area{
  display: flex;
	justify-content: center;
  width: 100%;
  margin-top: 30px;
 }

 .contact-area li{
  width: 400px;

 

 }

 .contactbox{
  margin: 0 5px 0 5px;
  border: 1px solid #fff;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  padding: 40px 20px 35px 20px;
 }

.contactbox h3{
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin: 1.2em auto;
}

.contactbox p{
  font-size: 1em;
  font-weight: bold;
  text-align: left;
  display: block;
  margin: 0 auto;
}

 .img{
  width: 55px;
    height: 55px;
    background: #fff;
    color: #d6000f;
    border-radius: 50%;
    padding: 13px 0 0 0;
    box-sizing: border-box;
    position: absolute;
    top: -23px;
    left: 50%;
    margin: 0 0 0 -25px;

   
 }

 .img i{
  font-size: 2.2rem;
  text-align: center;
  display: block;
  margin:0 auto;
  position: relative;
  top:-5px;
 }

 .img svg {
  fill: #d6000f;
  margin:0 auto;
  position: relative;
  top:-5px;
}

.telephonecall{
  font-size: 3rem;
  font-family:'Fugaz One','san-serif';
  display: block;
  margin: 0 auto;
   
}

.telephonecall:hover{
  color:#d6000f;
   
}
 

.contact-banner{
  width:100%;  
}



.contact-banner a:hover{
  background-color:#ffffff;
  color:#d6000f ;
 
}

.contact-banner a{
  font-weight: bold;
  margin-top: 1.3em;
  background: #d6000f;
  display: block;
  transition: all 0.5s;
  padding: 15px 15px;

}

.contact-bg{
  background-image: url(../img/highdeck/wood2_img_wrap.jpg );
background-repeat:no-repeat;
background-size: cover;
background-position: 50% 50%;
background-color:rgba(0, 0, 0, 0.4);
  background-blend-mode:darken;
  color: #FFFFFF;
  padding-bottom: 90px;
 
}

/*----------バナー公式サイト用--------*/

.banner-erea{
  display: flex;
  justify-content: center;
  width:100%;

}

.banner-erea ul{
  width:400px;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
  margin: 5px 15px 5px 30px;
  padding: 10px 15px 10px 30px;

}


.banner-box{
  display: flex;
  justify-content: center;
  margin:0 auto;
  height: 325px;
  
}

.banner-box h2{
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  margin: .5em auto;
  line-height: 1.3em;
}

.banner-box p.subtitle{
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 500;
  font-size: .9rem;
}

.banner-box li{
  width: 50%;
}
.triming{

  padding: 10px;
}

.banner-box li img.thumb{
  width: 150px;
  height: 220px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

.banner-box li .logo{
  width:100px;
  margin-left: 0;
}

.profile{
  font-size: 1rem;
  display: block;
  margin: 60px auto;
  text-align: center;
}


.footer_img{
  height: 250px;
  display: block;
}

.footer_bg{
  height: 100%;
  background-image: url(../img/highdeck/footer_bg.jpg);
  background-repeat:no-repeat;
  background-size: 100% auto;
  background-position-y: 550px;
  background-attachment: fixed;
  background-color:rgba(5, 5, 5, 0.3);
  background-blend-mode:darken;
 
}

.footer_img p{
  position: relative;
  bottom:0;
}

/*====== 9-1-1 縦線が動いてスクロールを促す =======*/

/*スクロールダウン全体の場所*/
.scrolldown1{
  /*描画位置※位置は適宜調整してください*/
position:absolute;
left:50%;

  /*全体の高さ*/
height:50px;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
  /*描画位置*/
position: absolute;
left:-15px;
top: -15px;
  /*テキストの形状*/
color: rgb(253, 253, 253);
font-size: 0.7rem;
letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
content: "";
  /*描画位置*/
position: absolute;
top: 0;
  /*線の形状*/
width: 1px;
height: 30px;
background: rgb(253, 253, 253);
  /*線の動き1.4秒かけて動く。永遠にループ*/
animation: pathmove 1.4s ease-in-out infinite;
opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
0%{
  height:0;
  top:0;
  opacity: 0;
}
30%{
  height:30px;
  opacity: 1;
}
100%{
  height:0;
  top:50px;
  opacity: 0;
}
}






/*--------バナー-------------*/
/* フローティングバナーのラップ要素 */
.fixed_return_banner
{
/* 右端の上から20pxの位置に固定表示 */
position: fixed;
bottom: 30px;
right: 15px;
  width: 65px;
    height: 65px;
    background: rgb(201, 200, 200);
    border-radius: 50%;
    box-sizing: border-box; 
    z-index: 9999;
    box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}

/* 画像の共通設定 */
.fixed_return_banner svg
{
/* 横幅 */
fill: #d6000f;
margin:0 auto;
position: relative;
top: 13px;
left: 13px;
   
}

/* 2個目以降の画像の上部に余白を作る */
.fixed_return_banner > * ~ * { margin-top: 10px; }







.floating-banner {
  position: fixed;
  z-index: 99999;
  bottom: 30px;
  left: 0;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
.banner-list {
  width: 180px;/* バナーの横幅 */
  display: flex;
  justify-content:flex-start;
  

}
.banner-list li{
  width: 50%;
  padding: 5px;
  text-align: center;
}

.banner-list li p{
font-size: .6rem;
padding: 1px;


  
}



.telephone{
 
  background-color: #fff;
  color: #d6000f;
}

.telephone svg{
  display: block;
  margin:0 auto;
  position: relative;
  top:2px;
  fill: #d6000f;
}

.mailform{
  
  background-color: #d6000f;
  color: #ffffff;
}

.mailform svg{
  display: block;
  margin:0 auto;
  position: relative;
  top:6px;
  fill: #ffffff;
}



/* リンク要素 */
.fixed_return_banner
 > a
{
/* ブロック要素に変更 */
display: block;

/* 透過変更をスムーズにする(任意) */
-webkit-transition: opacity .2s ease;
transition: opacity .2s ease;
}

/* マウスオーバー時の表現 */
.fixed_return_banner
> a:hover
{
/* 20%透過させる */
opacity: .6;


}



/* --------------------------------
  Hero
-------------------------------- */

/* ------ slide image ------- */
.hero-slide__img {
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-name: slideAnime;
  animation-timing-function: ease;
  display: block;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  width: 100%;
}

.hero-slide__item:nth-of-type(1) .hero-slide__img {
  animation-delay: 0s;
}

.hero-slide__item:nth-of-type(2) .hero-slide__img {
  animation-delay: 5s;
}

.hero-slide__item:nth-of-type(3) .hero-slide__img {
  animation-delay: 10s;
}

.hero-slide__item:nth-of-type(4) .hero-slide__img {
  animation-delay: 15s;
}

@keyframes slideAnime {
  0% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }

  33% {
    opacity: 1;
  }

  49% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateX(-10%);
  }
}

/* ------ hero erea ------- */
.hero {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.hero__inner {
  margin: 0 auto;
  width: 1100px;
}

/* ------ hero title ------- */
.hero__title {
  font-size: 50px;
  font-weight: bold;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 45%;
  transform: translateY(-50%);
  width: 100%;
}

.hero-slide__item {
  bottom: 0;
  height: 100%;
  position: absolute;
  right: -10%;
  width: 110%;
}


.footer{
  padding: 0;
}



/*=== RESPONSIVO ================================*/
@media screen and (max-width: 500px) {

/*フォントの設定*/

.txt-content{
  font-size: 16px;
}




.main_Box{
  margin: 0 auto;
}

.copy{
  width: 90%;
}

.main_box_img{
  background-size: cover;
  height: 100%;
  background: no-repeat center center;
  overflow: hidden;
}

.copy h1 {
  font-size:1.1rem;
 }

 .copy p {
  font-size:2.1rem;
  padding-top: 3em;
  line-height: 2.0em;
 }

 .catch{
  padding:0 20px;
 }

 .catch h2{
  font-size:2.4rem;
  
 }

 .img-list{
  flex-flow: column;
  
 }

 .img-list li{
  width:100%;
 }


.sec {
   margin:auto;
  margin-top: 30px;
 
  
}
.sec h2{
  display: block;
  padding:0 5px 0 15px; 
  text-align: left;
}

.sec h3{
  margin-bottom: 15px;
}


.titlecall{
  text-align:left;
  font-size: 2.1rem;
  margin:0 auto;
}

.after-list{
  flex-flow: column;
  width: 90%;
  margin: 0 auto;
  
 }

 .after-list li{
  width:100%;
  
 }

 .after-list li img{
  width:100%;
 }


  .navigation {
    bottom: 0.8rem;
  }

  .bar {
    width: 1rem;
    height: 1rem;
    border: 1px solid rgb(117, 117, 117);
    
  }

  .photogallery img{
    padding: 1%;
    padding-bottom: 3rem;
    
  }

  .concept{
    display: block;
    margin-top: 250px;
    text-align: left;
  }

  .contact-area{
    flex-flow: column;
   }
  
   .contact-area li{
    width: 90%;
    margin:10% auto;
   
  
   }

   .floating-banner {
    display: inline-block;
}
.banner-list {
    width: 100vw;
    padding: 0;
  
}



.fixed_return_banner 
{ bottom: 130px;
 
}

.footer_bg{
 
  background-size: auto 30%;
  background-position-x:-150px;
  
 
}

.banner-erea{
  flex-flow: column;
  margin: 0 auto;
 
}

.banner-erea ul{
  width:90%;
  margin-top: 30px;
  margin: 30px 15px 5px 15px;
  padding: 10px 15px ;


}

.banner-box{
  flex-flow: column;
  height: 100%;
 

}

.banner-box li{
  width:90%;
  margin: 0 auto;
}

.banner-box li img.thumb{
  width:90%;

}







 
 

 

  
.header-right{
display: none;
}

.menu{
display: none;
}


.voice{
position: relative;
transform: translateY(0%);
left:0;
}
.ml{
margin-left: 10px;
}




.telephonecall{
font-size: 2.4rem;
}



}









@media screen and (min-width:500px) and (max-width: 1024px){

  .copy h1 {
    font-size:1.6rem;
   }
   
   .copy p {
    font-size:3.6rem;
    padding-top: 2em;
   }

   .catch h2{
    font-size:3rem;
   }

   
.main_Box{
  margin: 0 auto;
}

.copy{
  width: 90%;
}

.main_box_img{
  background-size: cover;
  height: 100%;
  background: no-repeat center center;
  overflow: hidden;
}

    
.header-right{
  display: none;
}

.menu{
  display: none;
 }

.child1{
  left:auto;
}



.child2{
  left:auto;
}

.voice{
  position: relative;
  transform: translateY(0%);
  left:0;
}
.ml{
  margin-left: 10px;
}




.banner-erea ul{
  width:320px;
  margin: 5px 15px;
  padding: 10px 15px;

}

.banner-box{
  flex-flow: column;
  height: 100%;
  
}

.banner-box li{
  width: 100%;
}

.banner-box li img.thumb{
  width: 220px;
  height: 220px;
  object-fit: cover;
}


p.titlecall{
  font-size: 2.1rem;
  text-align: left;
  width:90%;
 }

 .telephonecall{
  font-size: 2.4rem;
 }
  .footer_bg{

    background-size: 100% auto;
    background-position:bottom;
    
   
  }
  

  
}