@charset 'utf-8';

@media screen and (max-width: 1024px) {
  #contents.responsive {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px 20px;
  }

  section.point {
    padding: 15px 20px 0;
    background: url(../images/sp/top_main_btn_smp.png);
    background-repeat: no-repeat;
    background-position: top;
    background-position-x: center;
    position: relative;
    background-size: cover;
    padding-top: 100vw;
  }
  
  .responsive .textbox{
  display: flex;
	  display: -webkit-flex;
	  flex-direction: column-reverse;
  }

  .responsive .layer1,
  .responsive .layer2,
  .responsive .layer3,
  .responsive .layer4,
  .responsive .layer5 {
    position: relative;
    margin-bottom: 20px;
    max-width: 720px;
  }
       
  #top_main .layer3 div.small,
  #top_main .layer4 div.small,
  #top_main .layer5 div.small {
    position: absolute;
    color: #fff;
    white-space: normal;
    word-break: break-all;
    line-height: 1.6em;
  }

  #top_main .top_mail_banner_01 {
    margin-bottom: 20px;
    text-align: center;
  }
  #top_main .top_mail_banner_02 {
    margin-bottom: 20px;
    text-align: center;
  }

  #tab_box {
    width: 100%;
  }

  #tab_box > div {
    padding: 20px 0 10px 15px;
    border: 5px solid #007038;
    background-color: #cce2d7;
    text-align: center;
    clear: both;
  }

  #tab_nav {
    display: flex;
    margin: auto;
    padding: 0 20px;
  }

  #tab_nav li {
    padding: 0 5px;
    width: 33.333%;
  }
  #tab_nav li img {
    width: 100%;
  }
}

@media screen and (min-width: 601px) and (max-width: 1024px) {
  #top_main .layer1 {
    background: url(../images/top_ly01_bg.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-position-x: center;
    position: relative;
    background-size: cover;
    padding-top: 55vw;
  }

  #top_main .layer1 div.small {
    position: absolute;
    top: 50%;
    width: 42%;
    font-size: 12px;
    white-space: normal;
    word-break: break-all;
  }

  #top_main .layer1 .left {
    left: 4.2%;
  }

  #top_main .layer1 .right {
    left: 54.2%;
  }

  #top_main .layer3,
  #top_main .layer4,
  #top_main .layer5 {
    height: 450px;
    position: relative;
    background-position: top;
    background-position-x: center;
  }

  #top_main .layer3 {
    background-image: url(../images/top_ly03_bg.jpg);
  }
  #top_main .layer4 {
    background-image: url(../images/top_ly04_bg.jpg);
  }
  #top_main .layer5 {
    background-image: url(../images/top_ly05_bg.jpg);
  }

  #top_main .layer3 div.small,
  #top_main .layer4 div.small,
  #top_main .layer5 div.small {
    top: 13.2vw;
    left: 27vw;
    width: 68%;
  }
}

@media screen and (max-width: 600px) {
  section.point {
    padding: 15px 20px 0;
    background-size: contain;
    padding-top: 100vw;
  }
  #top_main .layer1 div.small {
    position: absolute;
    left: 10%;
    width: 80%;
    font-size: 13px;
    white-space: normal;
    word-break: break-all;
    line-height: 1.6em;
  }

  #top_main .layer1 .left {
    top: 30.5%;
  }

  #top_main .layer1 .right {
    top: 64.8%;
  }

  #top_main .layer3 div.small,
  #top_main .layer4 div.small,
  #top_main .layer5 div.small {
    width: 61vw;
    top: 13vw;
    left: 24vw;
    font-size: 3.2vw;
  }
  #tab_nav {
    padding: 0 10px;
  }
  #tab_nav li {
    padding: 0 2px;
  }
  #tab_box > div {
    padding: 20px 0 0 5px;
  }
}

@media screen and (max-width: 320px) {
  #top_main .layer3 div.small,
  #top_main .layer4 div.small,
  #top_main .layer5 div.small {
    width: 60vw;
    top: 13vw;
    font-size: 3.1vw;
  }
}

.top-h2{text-align: center; font-size: 20px; margin: 30px 0 30px 0; color: #007038; font-weight: bold; }
@media screen and (min-width: 768px){
.cta_banner{display: none;}
}
@media screen and (max-width: 767px){
  #header.on{position: unset !important;}
  .mean-container .mean-bar{position: absolute !important;}

  .cta_banner{display: block; position: fixed; bottom: 0; width: 100% !important; padding: 10px 0; border-radius: 0; display: flex; flex-direction: column; justify-content: space-between; background: #fff; color: #fff;}
  /*.cta_banner .s-midashi{padding: 0 0 0 40px;}*/
  .cta_banner .s-midashi .sub{font-size:2rem; font-weight:bold; line-height: 2rem; color: #007038; letter-spacing: 1px;}
  .cta_banner .s-midashi .ctah3{font-size: 1rem; color: #007038; font-weight: bold; margin: 0 0 15px 0;}
  .cta_banner .s-midashi .cta_bannerh3{font-size:2.4rem; font-weight:bold;}
  .cta_banner .s-sub{display:flex; justify-content:space-between; margin:0 0 10px;}
  .cta_banner .s-sub i.circle{width: 15px; height: 15px; border: solid 5px; border-radius: 20px; display: inline-block; line-height: 0.7rem; margin:0 10px 0 0;}
  .cta_banner .s-sub .left{font-size:1rem; font-weight:bold;}
  .cta_banner .s-sub .right{font-size:1rem; color:#365484;}
  .cta_banner .tel_box{padding: 0; width: 48%;}
  .cta_banner .tel_box .btn{display: flex; justify-content: space-between; background: #0079d3; color: #ffffff; padding: 0; border-radius: 3px; height: 50px; align-items: center; box-shadow: 3px 2px 5px 0px rgb(0 0 0 / 25%);}
  .cta_banner .tel_box .btn .icon{background: #ffffff; padding: 13px 2px; border-radius: 2px 0 0 2px; width: 50px; transform: translateX(-1px);}
  .cta_banner .tel_box .btn .icon i:before{font-size:20px; color: #0079d3;}
  .cta_banner .tel_box .btn p {font-size: 1rem; padding: 8px 0; font-weight: bold; line-height: 1.5rem; text-align: center; width: 250px;}
  .cta_banner .tel_box .btn p span{font-size: 0.7rem; background: #fff; border-radius: 50px; color: #0079d3; padding: 0px 10px; letter-spacing: 1.5px;}
  .cta_banner .mail_box{padding: 0; width: 48%;}
  .cta_banner .mail_box .btn{display: flex; justify-content: space-between; background: #f1710b; color: #ffffff; padding: 0; border-radius: 3px; height: 50px; align-items: center; box-shadow: 3px 2px 5px 0px rgb(0 0 0 / 25%);}
  .cta_banner .mail_box .btn .icon{background: #fff; padding: 13px 3px; border-radius: 2px 0 0 2px; width: 50px;}
  .cta_banner .mail_box .btn .icon i:before{font-size:20px; color: #f1710b;}
  .cta_banner .mail_box .btn p {font-size: 1rem; padding: 15px 0; font-weight: bold; line-height: 1.5rem; text-align: center; width: 250px;}
  .cta_banner .mail_box .btn p span{font-size: 0.7rem; background: #fff; border-radius: 50px; color: #f1710b; padding: 0px 10px; letter-spacing: 1.5px;}
  .cta_banner .box{display: flex; justify-content: space-around; padding: 0 10px;}
  .cta_banner a{text-decoration: none;}
  .cta_banner a .btn{transition: 0.3s ease-in-out;}
  .cta_banner a:hover .btn{transform: translate(1px, 2px); box-shadow: none;}
  .cta_banner .fa-house:before{content: "\f015";}
  .cta_banner .fa-phone:before{content: "\f095";}
  .cta_banner i.circle{width: 15px; height: 15px; border: solid 5px; border-radius: 20px; display: inline-block; line-height: 0.7rem; margin: 0 10px 0 0;}

  .sell-btn{font-size: 1.2rem; color: #123d83; border: solid 1px; border-radius: 10px; padding: 8px 15px; margin-top: 15px; display: inline-block;}
  .sell-btn a{color: #123d83; font-size: 15px; font-weight: bold;}
  #footer{margin: 0 0 70px 0;}
}