@charset "UTF-8";


/* -----------------------------------------------
[Media Queries] smart phone
-------------------------------------------------- */

@media only screen and (min-width:1px) and (max-width:767px){

.openbtn{
	top: 10px;
	right: 10px;
}

  
  
  #main_visual {
   justify-content: flex-start;
    padding: 0;
  }

  #main_visual iframe {
    width: 90%;
    height: auto;
    aspect-ratio: 16/9;
  }
  
  #logo{
    position: absolute;
    left: 5%;
    top: 1em;
  }
  
#g-nav.panelactive #g-nav-list-in {
  padding-bottom: 3em;
}

#g-nav .logo{
  width: 50%;
  margin: 0 auto 2em;
  margin-top: 0;
}

#g-nav.panelactive #g-nav-list-in .inner_in{
  display: block;
}

#g-nav ul{
  margin-left: 0;
}
#g-nav li{
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 16px;
}

  
header{
  padding-top: 5em;
}

  
#top_copy{
  position: relative;
  padding-bottom: 1em;
  left: inherit;
  transform: translateY(0);
  transform: translateX(-50%);
  font-size: 13px;
  
}

.scroll{
  right: 50%;
  bottom: 4em;
  top: inherit;
  transform: translateY(0%);
  transform: translateX(50%);
  font-size: 13px;
  line-height: 1;
}
.scroll::after{
  content: "→";
  font-size: 2em;
  position: absolute;
  right: -4px;
  bottom: -1.5em;;
}

  
  
  
#top_contents{
  background: #fff;
}
  
  
#news{
  display: block;
  margin-bottom: 5em;
}

#news .col{
  width: 100%;
}
#news .col{
  border-left: none;
}
 
  
  
  
#introduction{
  padding-bottom: 5em;
}
#introduction .col{
 padding-top: 5em;
 display: block;
}
#introduction .col .txt{
  width: 100%;
  padding-right: 0;
  margin-bottom: 5em;
}
#introduction .col.reverse .txt{
  padding-left: 0;
}

#introduction .col .photo{
  width: 100%;
  margin-right: 0;
  text-align: right;
}
#introduction .col.reverse .photo{
  margin-left: 0;
  text-align: left;
}

#introduction h3 em{
  display: block;
  }
  

#introduction .col .photo .message01{
  width: 70%;
  margin-left: 36%;
  margin-bottom: 4em;
}
#introduction .col .photo .message02{
  text-align: left;
  margin-left: -6%;
}

  
.sp_photo{
  display: block;
  width: 100vw; 
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}
.sp_photo img{
  display: block;
  width: 100%;
  height: auto;
}
  
#introduction .col .photo .sphoto,
#introduction .col .photo .ssphoto{
  display: block;
  width: 100vw; 
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}
#introduction .col .photo .sphoto img,
#introduction .col .photo .ssphoto img{
   display: block;
  width: 80%;
  height: auto;
  margin-left: 20%;
 }
  
  
  
  
.pc_photo{
  display: none;
}

  
.headline{
  margin-left: 5%;
}
#introduction h3{
  margin-top: 0;
  font-size: 2rem;
}
#introduction h3 span{
  font-size: 1.5em;
}

  
  
  
  
  
.headline01{
  font-size: 1.6em;
  margin-bottom: 3rem;
}

  
.column3 .col{
  width: 100%;
  margin-right: 0;
}

  
.column4 .col{
  width: 48%;
}
.column4 .col:nth-child(2n){
  margin-right: 0;
}

  
  
.column1-2{
  display: block;
  margin-bottom: 6rem;
}

.column1-2 .sub{
  width: 100%;
  margin-bottom: 2em;
}

.column1-2 .main{
  width: 100%;
  margin-right: 0;
}

  
  
  
  
  
  
#delivert{
  padding: 4rem 0;
}
  
#delivert .linkBtn{
  width: 70%;
  margin: 3em auto 0;
  position: relative;
  right: inherit;
  top: inherit;
}

  
#delivert .col{
  text-align: center;
}


  
#attached{
  padding: 7em 0 3em;
}
  
  
#about{
  padding: 6em 10% 10em;
}

  
  
#flow{
  padding: 6em 0 3em;
}
.flow_column{
  display: block;
}
.flow_column .col{
  width: 100%;
  margin-bottom: 2.5%;
}

.step{
  position: relative;
  display: flex;
  align-items: flex-start;
  }
.step:before{
  left: 50%;
}

  /* 1列目の最後（= #05）を再表示 */
  .flow_column .col:first-child .step:last-child::before{
    background-image: url("../images/arrow02.png");
    /* background-size は共通で指定済みなので不要 */
  }
  /* 2列目の最後（= #09）は非表示のまま */
  .flow_column .col:last-child .step:last-child::before{
    background-image: none;
  }
  
.step .no{
  position: absolute;
  left: 0;
  top: 10px;
  font-size: 2.6em;
}
  
.step dl{
  width: 100%;
  margin-right: 0;
}

.step dt{
  display: flex;
  align-items: center;
  margin-left: 35%;
  font-size: 1.5em;
  margin-bottom: 0.5em;
  min-height: 100px;
}
  
  
#delivery{
  padding-bottom: 5em;
}
#delivert .linkBtn a{
  font-size: 1.3em;
}

  
#showRoom{
  padding: 5em 0; 
}
#showRoom h2{
  text-align: center;
}

  
#showRoom .inner_in{
  display: block;
}
  
#showRoom .txt{
  width: 100%;
  margin-bottom: 3em;
}

#showRoom .photo{
  width: 100%;
}

  
.table_style dl{
  display: block;
  padding: 1em 0;
  border-top: 1px #e0e6e8 solid;
}
.table_style dt{
  width: 100%;
}

  
  
#info{
  padding: 5em 0;
  display: block;
}
  
  
#coporate{
  width: 100%;
  margin-bottom: 5em;
}

#contact{
  width: 100%;
  margin-right: 0;
}

  
  
  
  
#professional{
  display: block;
}

#professional .professional_photo{
  width: 100%;
}
#professional .professional_txt{
  width: 100%;
  padding-top: 4em;
}

  
  
  
footer{
  padding-top: 15em;
  padding-bottom: 2em;
}

.ft_logo{
  width: 50%;
  margin: 0 auto 10em;
}

footer .inner{
  display: block;
}
footer ul{
  display: block;
  text-align: center;
}
footer li{
  margin-right: 0;
  margin-bottom: 2em;
}

#copy{
  padding-top: 2em;
  display: block;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
}


  
.column_horizontal{
  display: block;
}

.column_horizontal .main{
  width: 100%;
}

.column_horizontal .sub{
  width: 100%;
}


.column_horizontal .column_headline{
  width: 100%;
}

.column_horizontal .column_contents{
  width: 100%;
}


  

.column_summary .col{
  display: block;
  margin-bottom: 5em;
}

.column_summary .thumbnail{
  width: 100%;
  margin-bottom: 1em;
}
.column_summary .thumbnail img{
  margin: 0 auto;
}

.column_summary .txt{
  width: 100%;
}

.column_summary .txt .linkBtn{
  text-align: center;
}


  
  
  
  
}