@charset "UTF-8";
@import url("reset.css");
/*共通設定-------------------------------------------------------------------------------------------------------------------------------------*/
/*基本設定*/
html{
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.5;
  color: #191919;
}

main{
  display: block;
}

header a img, main a img, footer a img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease; }

header a:hover img, main a:hover img, footer a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8; }

.fade {
  /*margin-top: 10vh;*/
  opacity: 0;
  transition: opacity 2s; }

.fade.view {
  opacity: 1; }

/*ヘッダー*/
header #h_top{
  width: 100%;
  background-image : url(back01.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4em 0 2em;
}
  header #h_top #h_top_inner{
    width: 80%;
    padding: 4em 10% 2em;
    background-color: rgba(255, 255, 255, 0.5);
    position: relative;
}
    header #h_top #h_top_inner p{
      width: 400px;
      position: absolute;
      top: -3em;
      left: 10%;
}
    header #h_top #h_top_inner h1{
      font-size: 250%;
      text-align: right;
      font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
      header #h_top #h_top_inner h1 span{
        color: blue;
}
      header #h_top #h_top_inner h1 i{
        color: red;
        font-style: normal;
}
header #before_after{
  width: 80%;
  background-color: #679725;
  padding: 2em 10%;
}
  header #before_after h2{
    margin: 0 auto;
    width: 66%;
}
  header #before_after #b_inner{
    background-color: #fff;
    padding: 2em 2%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    box-shadow: 2px 2px 4px black;
}
    header #before_after #b_inner figure{
      width: 46%;
      box-shadow: 2px 2px 4px gray;
}
    header #before_after #b_inner .ya{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      width: 37px;
}
  header #before_after p{
    font-size: 250%;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 0.25em 0 0;
}
header #area{
  width: 100%;
}
  header #area h3{
    background: linear-gradient(to right, #fbc926, white, #fbc926);
    padding: 0.5em 0;
}
    header #area h3 img{
      display: block;
      width: 35%;
      margin: 0 auto;
}
  header #area p{
    width: 80%;
    margin: 1em auto 0;
    background-color: #679725;
    padding: 0.5em 0;
    color: #fff;
    font-size: 250%;
    text-align: center;
    font-weight: bold;
    border-radius: 10px;
}
  header #area #btn{
    width: 80%;
    margin: 2em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
    header #area #btn figure{
      width: 48%;
}
header #area02{
  width: 100%;
  margin: 2em 0 0;
}
  header #area02 h3{
    background: linear-gradient(to right, #fbc926, white, #fbc926);
    padding: 1em 0;
}
    header #area02 h3 img{
      display: block;
      width: 80%;
      margin: 0 auto;
}
  header #area02 p{
    font-size: 250%;
    font-weight: bold;
    text-align: center;
}
  header #area02 #inner02{
    position: relative;
    width: 80%;
    margin: 5em 0 0;
    padding: 8em 10% 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    background-image : url(_image13.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% auto;
}
    header #area02 #inner02 h4{
      width: 60%;
      position: absolute;
      top: -5em;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
}
    header #area02 #inner02 #tel{
      width: 60%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
}
      header #area02 #inner02 #tel i{
        display: block;
        width: 100px;
}
      header #area02 #inner02 #tel span {
        width: calc(100% - 120px); }
    header #area02 #inner02 figure{
      width: 35%;
}
header #b_top{
  width: 80%;
  padding: 0.5em 10%;
  font-size: 250%;
  color: #fff;
  text-align: center;
  background-color: #f57c2c;
  font-weight: bold;
}

/*メイン*/
#service{
  width: 100%;
  margin: 5em 0 0;
}
  #service #m_top{
    width: 80%;
    margin: 5em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
    #service #m_top h2{
      width: 60%;
}
    #service #m_top figure{
      width: 39%;
}
  #service #info{
    width: 100%;
    background-image : url(info_back.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left 2em;
    padding: 0 0 10em;
}
    #service #info h2{
      width: 76%;
      margin: 2em auto 0;
      background-color: #2f59f4;
      font-size: 250%;
      padding: 0.25em 2%;
      text-align: center;
      border-radius: 10px;
      color: #fff;
}
    #service #info #i_menu{
      width: 80%;
      margin: -2em auto 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
}
      #service #info #i_menu figure{
        width: 31.333%;
}
    #service #info #work{
      width: 80%;
      margin: 2em auto 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
}
      #service #info #work li{
        width: 23%;
}
    #service #info .text01{
      width: 80%;
      margin: 1em auto;
      text-align: center;
      font-size: 300%;
      color: #fff;
      font-weight: bold;
      -webkit-text-stroke: 1px #679725;
      text-shadow: 0px 4px 4px #679725;
}
    #service #info nav ul{
      width: 80%;
      margin: 2em auto 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
}
      #service #info nav ul li{
        width: 48%;
}
    #service #info .botan{
      width: 50%;
      display: block;
      margin: 2em auto 0;
      padding: 0.15em 0;
      background-color: #c80000;
      color: #fff;
      font-size: 250%;
      font-weight: bold;
      text-decoration: none;
      text-align: center;
      border-radius: 25px;
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
    #service #info #s_image{
      width: 80%;
      margin: 5em auto 0;
}

#botans{
  width: 80%;
  margin: -6em auto 0;
}

#price{
  width: 100%;
  padding: 3em 0;
  background-color: #e8f0dd;
}
  #price h2{
    width: 80%;
    margin: 0 auto 0;
    font-size: 250%;
    color: #679725;
    text-align: center;
}
  #price table{
    width: 76%;
    padding: 2em 2%;
    margin: 1em auto 0;
    background-color: #fff;
    border-radius: 25px;
}
    #price table tr{
      border-bottom: 3px solid #e8f0dd;
      font-size: 120%;
}
      #price table tr:last-child{
        border-bottom: none;
}
      #price table tr th{
        width: 36%;
        padding: 0.5em 2%;
        vertical-align: top;
}
      #price table tr td{
        width: 56%;
        padding: 0.5em 2%;
}
        #price table tr td a{
          color: #000;
          text-decoration: none;
}
          #price table tr td a:hover, #price table tr td a:active{
            color: #000;
            text-decoration: underline;
}
        #price table tr td .map a{
          color: #fff;
          text-align: center;
          width: 200px;
          font-size: 80%;
          margin: 0 0 0 1em;
          background-color: #28a0dc;
          padding: 0.25em 2%;
          border-radius: 10px;
}
          #price table tr td .map a:hover, #price table tr td .map a:active{
            color: #fff;
            text-decoration: none;
            background-color: #5BB6E4;
}

#mitsumori{
  width: 80%;
  margin: 5em auto 0;
}
  #mitsumori figure{
    margin: 0 0 2em;
}
    #mitsumori figure figcaption{
      margin: 0.5em 0 0;
}

#mi_inner{
  width: 100%;
  padding: 3em 0;
  background-color: #886239;
}
  #mi_inner figure{
    width: 80%;
    margin: 0 auto;
}

#beforeafter{
  width: 80%;
  margin: 5em auto 0;
}
  #beforeafter ul{
    margin: 2em 0 0;
}
    #beforeafter ul li:nth-child(n+2){
      margin: 2em 0 0;
}
  #beforeafter p{
    margin: 2em auto 0;
    text-align: center;
}

#support{
  width: 100%;
  background-color: rgba(255, 234, 0, 0.3);
  margin: 5em 0 0;
  padding: 3em 0;
}
  #support #s_top{
    width: 80%;
    margin: 3em auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
    #support #s_top #inner{
      width: 61%;
}
    #support #s_top .i_right{
      width: 35%;
}
  #support p{
    width: 80%;
    margin: 1em auto 0;
    font-size: 200%;
    font-weight: bold;
}
  #support ul{
    width: 80%;
    margin: 3em auto 0;
}
    #support ul li:nth-child(n+2){
      margin: 0;
}

#business01{
  width: 100%;
  padding: 3em 0;
  background-image: linear-gradient(0deg, #ffffff, #e8f0dd);
}
  #business01 .business_inner{
    width: 80%;
    margin: 0 auto;
    padding: 0 0 2em;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
    #business01 .business_inner h2{
      width: 96%;
      background-color: #679725;
      padding: 0.5em 2%;
      font-size: 250%;
      color: #fff;
      text-align: center;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
}
    #business01 .business_inner .inner01{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
}
      #business01 .business_inner .inner01 figure{
        width: 48%;
}
      #business01 .business_inner .inner01 dl{
        width: 48%;
        padding: 0 2% 0 0;
}
        #business01 .business_inner .inner01 dl dt{
          color: #679725;
          font-size: 200%;
          font-weight: bold;
}
        #business01 .business_inner .inner01 dl dd{
          font-size: 180%;
          font-weight: bold;
}
    #business01 .business_inner .inner02{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      margin: -4em 0 0;
}
      #business01 .business_inner .inner02 dl{
        width: 56%;
        padding: 0 0 0 2%;
}
        #business01 .business_inner .inner02 dl dt{
          color: #679725;
          font-size: 200%;
          font-weight: bold;
}
        #business01 .business_inner .inner02 dl dd{
          font-size: 180%;
          font-weight: bold;
}
      #business01 .business_inner .inner02 figure{
        width: 28%;
        margin: 0 auto 0;
}
    #business01 .business_inner .point{
      width: 96%;
      text-align: center;
      margin: 1em auto 0;
      font-size: 120%;
      font-weight: bold;
}
    #business01 .business_inner .froat{
      width: 96%;
      margin: 2em auto 0;
      font-size: 180%;
      font-weight: bold;
      line-height: 2;
}
      #business01 .business_inner .froat figure{
        float: right;
        margin: 0 0 1em 1em;
        width: 40%;
}
    #business01 .business_inner .bottom_botan{
      width: 100%;
      margin: 2em 0 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
}
      #business01 .business_inner .bottom_botan figure{
        width: 49%;
}

#business02{
  width: 100%;
  padding: 3em 0;
  background-image: linear-gradient(0deg, #ffffff, #e8f0dd);
}
  #business02 .business_inner{
    width: 80%;
    margin: 0 auto;
    padding: 0 0 2em;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
    #business02 .business_inner h2{
      width: 96%;
      background-color: #f57c2c;
      padding: 0.5em 2%;
      font-size: 250%;
      color: #fff;
      text-align: center;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
}
    #business02 .business_inner .inner01{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
}
      #business02 .business_inner .inner01 figure{
        width: 48%;
}
      #business02 .business_inner .inner01 dl{
        width: 48%;
        padding: 0 2% 0 0;
}
        #business02 .business_inner .inner01 dl dt{
          color: #f57c2c;
          font-size: 200%;
          font-weight: bold;
}
        #business02 .business_inner .inner01 dl dd{
          font-size: 180%;
          font-weight: bold;
}
          #business02 .business_inner .inner01 dl dd span{
            display: block;
            margin: 1em 0 0;
            font-size: 70%;
}
    #business02 .business_inner .point{
      width: 96%;
      text-align: center;
      margin: 1em auto 0;
      font-size: 120%;
      font-weight: bold;
}
    #business02 .business_inner .froat{
      width: 96%;
      margin: 2em auto 0;
      font-size: 180%;
      font-weight: bold;
      line-height: 2;
}
      #business02 .business_inner .froat figure{
        float: right;
        margin: 0 0 1em 1em;
        width: 50%;
}
        #business02 .business_inner .froat figure .size{
          width: 50%;
          display: block;
          margin: -5em auto 2em;
}
    #business02 .business_inner .bottom_botan{
      width: 100%;
      margin: 2em 0 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
}
      #business02 .business_inner .bottom_botan figure{
        width: 49%;
}

#business03, #business04, #business05, #business06{
  width: 100%;
  padding: 3em 0;
  background-image: linear-gradient(0deg, #ffffff, #e8f0dd);
}
  #business03 .business_inner, #business04 .business_inner, #business05 .business_inner, #business06 .business_inner{
    width: 80%;
    margin: 0 auto;
    padding: 0 0 2em;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
    #business03 .business_inner h2, #business04 .business_inner h2, #business05 .business_inner h2, #business06 .business_inner h2{
      width: 96%;
      background-color: #679725;
      padding: 0.5em 2%;
      font-size: 250%;
      color: #fff;
      text-align: center;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
}
    #business03 .business_inner .inner01, #business04 .business_inner .inner01, #business05 .business_inner .inner01, #business06 .business_inner .inner01{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: top;
      justify-content: space-between;
}
      #business03 .business_inner .inner01 figure, #business04 .business_inner .inner01 figure, #business05 .business_inner .inner01 figure, #business06 .business_inner .inner01 figure{
        width: 68%;
}
      #business03 .business_inner .inner01 dl, #business04 .business_inner .inner01 dl, #business05 .business_inner .inner01 dl, #business06 .business_inner .inner01 dl{
        width: 28%;
        margin: 2em 0 0;
        padding: 0 2% 0 0;
}
        #business03 .business_inner .inner01 dl dt, #business04 .business_inner .inner01 dl dt, #business05 .business_inner .inner01 dl dt, #business06 .business_inner .inner01 dl dt{
          color: #679725;
          font-size: 200%;
          font-weight: bold;
}
        #business03 .business_inner .inner01 dl dd, #business04 .business_inner .inner01 dl dd, #business05 .business_inner .inner01 dl dd, #business06 .business_inner .inner01 dl dd{
          font-size: 180%;
          font-weight: bold;
          margin: 2em 0 0;
}
          #business03 .business_inner .inner01 dl dd span, #business04 .business_inner .inner01 dl dd span, #business05 .business_inner .inner01 dl dd span, #business06 .business_inner .inner01 dl dd span{
            display: block;
            margin: 1em 0 0;
            font-size: 70%;
}
          #business03 .business_inner .inner01 dl dd img, #business04 .business_inner .inner01 dl dd img, #business05 .business_inner .inner01 dl dd img, #business06 .business_inner .inner01 dl dd img{
            width: 80%;
            display: block;
            margin: 0 auto;
}
    #business03 .business_inner .point, #business04 .business_inner .point, #business05 .business_inner .point, #business06 .business_inner .point{
      width: 96%;
      text-align: center;
      margin: 1em auto 0;
      font-size: 120%;
      font-weight: bold;
}
    #business03 .business_inner .froat, #business04 .business_inner .froat, #business05 .business_inner .froat, #business06 .business_inner .froat{
      width: 96%;
      margin: 2em auto 0;
      font-size: 180%;
      font-weight: bold;
      line-height: 2;
}
      #business03 .business_inner .froat p span, #business04 .business_inner .froat p span, #business05 .business_inner .froat p span, #business06 .business_inner .froat p span{
        color: #f57c2c;
}
      #business03 .business_inner .froat figure, #business04 .business_inner .froat figure, #business05 .business_inner .froat figure, #business06 .business_inner .froat figure{
        float: right;
        margin: 0 0 1em 1em;
        width: 50%;
}
    #business03 .business_inner .bottom_botan, #business04 .business_inner .bottom_botan, #business05 .business_inner .bottom_botan, #business06 .business_inner .bottom_botan{
      width: 100%;
      margin: 2em 0 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
}
      #business03 .business_inner .bottom_botan figure, #business04 .business_inner .bottom_botan figure, #business05 .business_inner .bottom_botan figure, #business06 .business_inner .bottom_botan figure{
        width: 49%;
}

#business03 .business_inner h2{
  background-color: #00b0f0;
}
#business03 .business_inner .inner01 dl dt{
  color: #00b0f0;
}

#business04 .business_inner h2{
  background-color: #c80000;
}
#business04 .business_inner .inner01 dl dt{
  color: #c80000;
}

#business05 .business_inner h2{
  background-color: #0071b8;
}
#business05 .business_inner .inner01 dl dt{
  color: #0071b8;
}

#business06 .business_inner h2{
  background-color: #ff7ba8;
}
#business06 .business_inner .inner01 dl dt{
  color: #ff7ba8;
}

#bottom{
  width: 80%;
  margin: 5em auto 0;
}
  #bottom .botan{
    width: 50%;
    display: block;
    margin: 0 auto 2em;
    padding: 0.15em 0;
    background-color: #c80000;
    color: #fff;
    font-size: 250%;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    border-radius: 25px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}

/*フッター*/
footer{
  margin: 7em 0 0;
  background-image : url(f_back.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 3em 0;
}
  footer #footer_inner{
    width: 80%;
    margin: 0 auto;
}
    footer #footer_inner h2{
      width: 20%;
      margin: 0 auto;
}
    footer #footer_inner table{
      width: 76%;
      padding: 2em 2%;
      margin: 1em auto 0;
      background-color: #fff;
      border-radius: 25px;
}
      footer #footer_inner table tr{
        border-bottom: 3px solid #e8f0dd;
        font-size: 120%;
}
        footer #footer_inner table tr:last-child{
          border-bottom: none;
}
        footer #footer_inner table tr th{
          width: 36%;
          padding: 0.5em 2%;
}
        footer #footer_inner table tr td{
          width: 56%;
          padding: 0.5em 2%;
}
          footer #footer_inner table tr td a{
            color: #000;
            text-decoration: none;
}
            footer #footer_inner table tr td a:hover, footer #footer_inner table tr td a:active{
              color: #000;
              text-decoration: underline;
}
  footer address{
    width: 96%;
    margin: 2em auto 0;
    text-align: center;
    font-style: normal;
}

/*TOPへ戻るボタン設定*/
#page-top{
  position: fixed;
  bottom: 10px;
  right: 20px;
  font-size: 90%;
  z-index: 999;
  font-family: "M PLUS Rounded 1c";
  font-weight: bold;
}
  #page-top img{
    width: 50px;
    display: block;
    margin: 0 auto 0.5em;
}
  #page-top a{
    /*コレ*/
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: #BC1B21;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    margin: 10px 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}
  #page-top a:hover, #page-top a:active {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7; }

/*共通設定ここまで-------------------------------------------------------------------------------------------------------------------------------------*/
/* pc */
@media screen and (min-width: 1300px) {
  /*ヘッダー*/
  /*メイン*/
  .sp{
    display: none;
}

  /*フッター*/ }
/* tablet1 */
@media only screen and (min-width: 1230px) and (max-width: 1440px) {
  /*基本設定*/
  html{
    font-size: 90%;
}

  .sp{
    display: none;
}

  /*ヘッダー*/
  header #header_inner h1 figure{
    top: -1.5em;
    width: 45%;
}

  /*メイン*/
  #business01 .business_inner .inner02{
    margin: 0em 0 0;
}

  #business02 .business_inner .froat figure .size{
    margin: -2em auto 2em;
}

  /*フッター*/ }
/* tablet2 */
@media only screen and (min-width: 1024px) and (max-width: 1229px) {
  /*基本設定*/
  html{
    font-size: 85%;
}

  .sp{
    display: none;
}

  /*ヘッダー*/
  header #header_inner #h_top br{
    display: none;
}
  header #header_inner h1 figure{
    top: -1.2em;
    left: 15%;
    width: 45%;
}

  /*メイン*/
  #service #info #work{
    width: 80%;
    margin: 2em auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
    #service #info #work li{
      width: 23%;
}
  #service #info .botan a{
    width: 70%;
}

  #price table tr th{
    width: 30%;
}
  #price table tr td{
    width: 62%;
}
    #price table tr td .map a{
      width: 150px;
      display: block;
}

  #business01 .business_inner .inner02{
    margin: 0em 0 0;
}

  #business02 .business_inner .froat figure .size{
    margin: -2em auto 2em;
}

  #business03 .business_inner .inner01 figure, #business04 .business_inner .inner01 figure, #business05 .business_inner .inner01 figure, #business06 .business_inner .inner01 figure{
    width: 58%;
}
  #business03 .business_inner .inner01 dl, #business04 .business_inner .inner01 dl, #business05 .business_inner .inner01 dl, #business06 .business_inner .inner01 dl{
    width: 38%;
}
    #business03 .business_inner .inner01 dl dd, #business04 .business_inner .inner01 dl dd, #business05 .business_inner .inner01 dl dd, #business06 .business_inner .inner01 dl dd{
      margin: 0;
}

  /*フッター*/
  footer #footer_inner table tr th{
    width: 30%;
}
  footer #footer_inner table tr td{
    width: 62%;
} }
/* tablet2  */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  /*基本設定*/
  html{
    font-size: 85%;
    position: relative;
}

  /*ヘッダー*/
  header #header_inner{
    width: 100%;
}
    header #header_inner #h_top{
      width: 90%;
      font-size: 250%;
}
      header #header_inner #h_top br{
        display: none;
}
    header #header_inner #top_image{
      width: 90%;
}
    header #header_inner h1{
      font-size: 300%;
}
      header #header_inner h1 figure{
        position: absolute;
        top: -1.4em;
        left: 10%;
        width: 55%;
}
    header #header_inner #b_top{
      font-size: 200%;
}

  /*メイン*/
  .pc{
    display: none;
}

  #service #m_top{
    width: 90%;
}
  #service #info #i_menu{
    width: 90%;
}
  #service #info #work{
    width: 90%;
}
  #service #info .text01{
    width: 90%;
    font-size: 200%;
}
  #service #info nav ul{
    width: 90%;
}
  #service #info .botan a{
    width: 80%;
    margin: 1em auto 0;
    font-size: 200%;
}

  #botans{
    width: 90%;
}

  #price h2{
    width: 90%;
    margin: 0 auto 0;
    font-size: 200%;
}
  #price table{
    width: 86%;
}
    #price table tr{
      font-size: 110%;
}
      #price table tr:last-child{
        border-bottom: none;
}
      #price table tr th{
        width: 26%;
}
      #price table tr td{
        width: 66%;
}
        #price table tr td .map a{
          display: block;
          width: 150px;
}

  #mitsumori{
    width: 90%;
}

  #mi_inner figure{
    width: 90%;
}

  #beforeafter{
    width: 90%;
    margin: 5em auto 0;
}
    #beforeafter ul{
      margin: 2em 0 0;
}
      #beforeafter ul li:nth-child(n+2){
        margin: 2em 0 0;
}

  #support #s_top{
    width: 90%;
}
    #support #s_top #inner{
      width: 61%;
}
    #support #s_top .i_right{
      width: 35%;
}
  #support p{
    width: 90%;
    font-size: 150%;
}
  #support ul{
    width: 90%;
}

  #business01 .business_inner{
    width: 90%;
}
    #business01 .business_inner h2{
      font-size: 200%;
}
    #business01 .business_inner .inner01 dl dt{
      font-size: 150%;
}
    #business01 .business_inner .inner01 dl dd{
      font-size: 130%;
      font-weight: bold;
}
    #business01 .business_inner .inner02{
      margin: 0;
}
      #business01 .business_inner .inner02 dl dt{
        font-size: 150%;
}
      #business01 .business_inner .inner02 dl dd{
        font-size: 130%;
}
    #business01 .business_inner .point{
      font-size: 120%;
}
    #business01 .business_inner .froat{
      font-size: 130%;
}

  #business02 .business_inner{
    width: 90%;
}
    #business02 .business_inner h2{
      font-size: 200%;
}
    #business02 .business_inner .inner01 dl dt{
      font-size: 150%;
}
    #business02 .business_inner .inner01 dl dd{
      font-size: 130%;
}
    #business02 .business_inner .froat{
      font-size: 130%;
}
      #business02 .business_inner .froat figure .size{
        width: 60%;
        margin: 0 auto 2em;
}

  #business03 .business_inner, #business04 .business_inner, #business05 .business_inner, #business06 .business_inner{
    width: 90%;
}
    #business03 .business_inner h2, #business04 .business_inner h2, #business05 .business_inner h2, #business06 .business_inner h2{
      font-size: 200%;
}
    #business03 .business_inner .inner01, #business04 .business_inner .inner01, #business05 .business_inner .inner01, #business06 .business_inner .inner01{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: top;
      justify-content: space-between;
}
      #business03 .business_inner .inner01 figure, #business04 .business_inner .inner01 figure, #business05 .business_inner .inner01 figure, #business06 .business_inner .inner01 figure{
        width: 63%;
}
      #business03 .business_inner .inner01 dl, #business04 .business_inner .inner01 dl, #business05 .business_inner .inner01 dl, #business06 .business_inner .inner01 dl{
        width: 33%;
}
        #business03 .business_inner .inner01 dl dt, #business04 .business_inner .inner01 dl dt, #business05 .business_inner .inner01 dl dt, #business06 .business_inner .inner01 dl dt{
          font-size: 150%;
}
        #business03 .business_inner .inner01 dl dd, #business04 .business_inner .inner01 dl dd, #business05 .business_inner .inner01 dl dd, #business06 .business_inner .inner01 dl dd{
          font-size: 130%;
          margin: 0;
}
    #business03 .business_inner .froat, #business04 .business_inner .froat, #business05 .business_inner .froat, #business06 .business_inner .froat{
      font-size: 130%;
}

  #bottom{
    width: 90%;
    margin: 2.5em auto 0;
}
    #bottom .botan a{
      width: 80%;
      font-size: 200%;
}

  /*フッター*/
  footer #footer_inner{
    width: 90%;
}
    footer #footer_inner h2{
      width: 30%;
      margin: 0 auto;
}
    footer #footer_inner table{
      width: 86%;
}
      footer #footer_inner table tr th{
        width: 26%;
}
      footer #footer_inner table tr td{
        width: 66%;
} }
/* tablet3  */
@media only screen and (max-width: 767px) {
  /*基本設定*/
  html{
    font-size: 85%;
    position: relative;
}

  /*ヘッダー*/
  header #h_top{
    padding: 3em 0 1em;
}
    header #h_top #h_top_inner{
      width: 90%;
      padding: 2em 5% 1em;
}
      header #h_top #h_top_inner p{
        width: 230px;
        top: -2.5em;
        left: 5%;
}
      header #h_top #h_top_inner h1{
        font-size: 150%;
}
  header #before_after{
    width: 90%;
    padding: 1em 5%;
}
    header #before_after h2{
      margin: 0 auto;
      width: 90%;
}
    header #before_after #b_inner{
      padding: 1em 2%;
}
      header #before_after #b_inner figure{
        width: 46%;
}
      header #before_after #b_inner .ya{
        width: 13px;
}
    header #before_after p{
      font-size: 110%;
}
  header #area{
    width: 100%;
}
    header #area h3{
      background: linear-gradient(to right, #fbc926, white, #fbc926);
      padding: 0.5em 0;
}
      header #area h3 img{
        display: block;
        width: 35%;
        margin: 0 auto;
}
    header #area p{
      width: 90%;
      font-size: 120%;
      border-radius: 5px;
      margin: 0.5em auto 0;
}
    header #area #btn{
      width: 90%;
      margin: 0.5em auto 0;
}
      header #area #btn figure{
        width: 49%;
}
  header #area02{
    width: 100%;
    margin: 0.5em 0 0;
}
    header #area02 h3{
      padding: 0.5em 0;
}
      header #area02 h3 img{
        width: 90%;
}
    header #area02 p{
      font-size: 120%;
}
    header #area02 #inner02{
      width: 90%;
      margin: 3.5em 0 0;
      padding: 2em 5% 1em;
      align-items: center;
      background-size: cover;
}
      header #area02 #inner02 h4{
        width: 80%;
        top: -3em;
}
      header #area02 #inner02 #tel{
        width: 60%;
        align-items: center;
}
        header #area02 #inner02 #tel i{
          display: block;
          width: 40px;
}
        header #area02 #inner02 #tel span {
          width: calc(100% - 50px); }
      header #area02 #inner02 figure{
        width: 35%;
}
  header #b_top{
    width: 90%;
    padding: 0.5em 5%;
    font-size: 120%;
}

  /*メイン*/
  #service{
    margin: 2.5em 0 0;
}
    #service #m_top{
      width: 90%;
      margin: 2.5em auto 0;
}
    #service #info{
      padding: 0 0 0em;
}
      #service #info h2{
        width: 86%;
        margin: 1em auto 0;
        font-size: 120%;
        border-radius: 5px;
}
      #service #info #i_menu{
        width: 90%;
        margin: -1em auto 0;
}
      #service #info #work{
        width: 90%;
        margin: 1em auto 0;
}
        #service #info #work li{
          width: 48%;
}
          #service #info #work li:nth-child(n+3){
            margin: 1em 0 0;
}
      #service #info .text01{
        width: 90%;
        font-size: 150%;
        color: #679725;
        -webkit-text-stroke: 0px #fff;
        text-shadow: 0px 4px 4px #fff;
}
      #service #info nav ul{
        width: 90%;
        margin: 1em auto 0;
}
      #service #info .botan{
        width: 80%;
        margin: 1em auto 0;
        font-size: 120%;
        border-radius: 12px;
}
      #service #info #s_image{
        width: 90%;
        margin: 1em auto 0;
}

  #botans{
    width: 90%;
    margin: 2em auto 0;
}

  #price{
    padding: 1.5em 0;
}
    #price h2{
      width: 90%;
      font-size: 150%;
}
    #price table{
      width: 86%;
}
      #price table tr{
        border-bottom: 3px solid #e8f0dd;
        font-size: 120%;
}
        #price table tr:last-child{
          border-bottom: none;
}
        #price table tr th{
          display: block;
          width: 96%;
          vertical-align: top;
}
        #price table tr td{
          display: block;
          width: 96%;
          padding: 0em 2% 0.5em;
          text-align: center;
}
          #price table tr td .map a{
            width: 200px;
            display: block;
            margin: 0 auto;
}

  #mitsumori{
    width: 90%;
    margin: 2.5em auto 0;
}

  #mi_inner{
    padding: 1.5em 0;
}
    #mi_inner figure{
      width: 90%;
}

  #beforeafter{
    width: 90%;
    margin: 2.5em auto 0;
}
    #beforeafter ul{
      margin: 1em 0 0;
}

  #support{
    margin: 2.5em 0 0;
    padding: 1em 0;
}
    #support #s_top{
      width: 90%;
      margin: 0 auto 0;
}
      #support #s_top #inner{
        width: 61%;
}
      #support #s_top .i_right{
        width: 35%;
}
    #support p{
      width: 90%;
      font-size: 120%;
}
    #support ul{
      width: 90%;
      margin: 1.5em auto 0;
}

  #business01{
    width: 100%;
    padding: 1.5em 0;
}
    #business01 .business_inner{
      padding: 0;
      width: 90%;
}
      #business01 .business_inner h2{
        width: 96%;
        font-size: 200%;
}
      #business01 .business_inner .inner01{
        width: 100%;
        display: block;
}
        #business01 .business_inner .inner01 figure{
          width: 100%;
}
        #business01 .business_inner .inner01 dl{
          width: 96%;
          margin: 1em auto 0;
          padding: 0;
}
          #business01 .business_inner .inner01 dl dt{
            font-size: 150%;
}
          #business01 .business_inner .inner01 dl dd{
            font-size: 130%;
}
      #business01 .business_inner .inner02{
        flex-direction: column-reverse;
        margin: 0;
}
        #business01 .business_inner .inner02 dl{
          width: 96%;
          padding: 0;
          margin: 0 auto;
}
          #business01 .business_inner .inner02 dl dt{
            font-size: 150%;
}
          #business01 .business_inner .inner02 dl dd{
            font-size: 130%;
}
        #business01 .business_inner .inner02 figure{
          display: none;
}
      #business01 .business_inner .point{
        font-size: 110%;
}
      #business01 .business_inner .froat{
        margin: 1em auto 0;
        font-size: 130%;
        line-height: 2;
}
        #business01 .business_inner .froat figure{
          float: right;
          margin: 0;
          width: 100%;
}
      #business01 .business_inner .bottom_botan{
        margin: 0;
        flex-direction: column;
}
        #business01 .business_inner .bottom_botan figure{
          width: 90%;
          margin: 0.5em auto 0;
}

  #business02{
    padding: 1.5em 0;
}
    #business02 .business_inner{
      width: 90%;
      padding: 0;
}
      #business02 .business_inner h2{
        font-size: 200%;
}
      #business02 .business_inner .inner01{
        width: 100%;
        flex-direction: column;
}
        #business02 .business_inner .inner01 figure{
          width: 100%;
}
        #business02 .business_inner .inner01 dl{
          width: 96%;
          padding: 0;
          margin: 1em auto 0;
}
          #business02 .business_inner .inner01 dl dt{
            font-size: 150%;
}
          #business02 .business_inner .inner01 dl dd{
            font-size: 130%;
}
            #business02 .business_inner .inner01 dl dd span{
              font-size: 80%;
}
      #business02 .business_inner .point{
        font-size: 110%;
}
      #business02 .business_inner .froat{
        width: 96%;
        margin: 1em auto 0;
        font-size: 130%;
        font-weight: bold;
        line-height: 2;
}
        #business02 .business_inner .froat figure{
          float: right;
          margin: 0 0 1em 1em;
          width: 100%;
}
          #business02 .business_inner .froat figure .size{
            width: 70%;
            display: block;
            margin: 0 auto 1em;
}
          #business02 .business_inner .froat figure i{
            display: none;
}
      #business02 .business_inner .bottom_botan{
        margin: 0;
        flex-direction: column;
}
        #business02 .business_inner .bottom_botan figure{
          width: 90%;
          margin: 0.5em auto 0;
}

  #business03, #business04, #business05{
    padding: 1.5em 0;
}
    #business03 .business_inner, #business04 .business_inner, #business05 .business_inner{
      width: 90%;
      margin: 0 auto;
      padding: 0;
}
      #business03 .business_inner h2, #business04 .business_inner h2, #business05 .business_inner h2{
        font-size: 200%;
}
      #business03 .business_inner .inner01, #business04 .business_inner .inner01, #business05 .business_inner .inner01{
        width: 100%;
        flex-direction: column;
}
        #business03 .business_inner .inner01 figure, #business04 .business_inner .inner01 figure, #business05 .business_inner .inner01 figure{
          width: 100%;
}
        #business03 .business_inner .inner01 dl, #business04 .business_inner .inner01 dl, #business05 .business_inner .inner01 dl{
          width: 96%;
          margin: 1em auto 0;
          padding: 0;
}
          #business03 .business_inner .inner01 dl dt, #business04 .business_inner .inner01 dl dt, #business05 .business_inner .inner01 dl dt{
            font-size: 150%;
}
          #business03 .business_inner .inner01 dl dd, #business04 .business_inner .inner01 dl dd, #business05 .business_inner .inner01 dl dd{
            font-size: 130%;
            margin: 1em 0 0;
}
            #business03 .business_inner .inner01 dl dd img, #business04 .business_inner .inner01 dl dd img, #business05 .business_inner .inner01 dl dd img{
              display: none;
}
      #business03 .business_inner .point, #business04 .business_inner .point, #business05 .business_inner .point{
        font-size: 110%;
}
      #business03 .business_inner .froat, #business04 .business_inner .froat, #business05 .business_inner .froat{
        width: 96%;
        margin: 1em auto 0;
        font-size: 130%;
}
        #business03 .business_inner .froat p span, #business04 .business_inner .froat p span, #business05 .business_inner .froat p span{
          color: #f57c2c;
}
        #business03 .business_inner .froat figure, #business04 .business_inner .froat figure, #business05 .business_inner .froat figure{
          float: right;
          margin: 0 0 0 0;
          width: 100%;
}
      #business03 .business_inner .bottom_botan, #business04 .business_inner .bottom_botan, #business05 .business_inner .bottom_botan{
        margin: 0;
        flex-direction: column;
}
        #business03 .business_inner .bottom_botan figure, #business04 .business_inner .bottom_botan figure, #business05 .business_inner .bottom_botan figure{
          width: 90%;
          margin: 0.5em auto 0;
}

  #business06{
    padding: 1.5em 0;
}
    #business06 .business_inner{
      width: 90%;
      margin: 0 auto;
      padding: 0;
}
      #business06 .business_inner h2{
        font-size: 200%;
}
      #business06 .business_inner .inner01{
        width: 100%;
        flex-direction: column;
}
        #business06 .business_inner .inner01 figure{
          width: 100%;
}
        #business06 .business_inner .inner01 dl{
          width: 96%;
          margin: 1em auto 0;
          padding: 0;
}
          #business06 .business_inner .inner01 dl dt{
            font-size: 150%;
}
          #business06 .business_inner .inner01 dl dd{
            font-size: 130%;
            margin: 1em 0 0;
}
      #business06 .business_inner .point{
        font-size: 110%;
}
      #business06 .business_inner .froat{
        width: 96%;
        margin: 1em auto 0;
        font-size: 130%;
}
        #business06 .business_inner .froat p span{
          color: #f57c2c;
}
        #business06 .business_inner .froat figure{
          float: right;
          margin: 0 0 0 0;
          width: 100%;
}
      #business06 .business_inner .bottom_botan{
        margin: 0;
        flex-direction: column;
}
        #business06 .business_inner .bottom_botan figure{
          width: 90%;
          margin: 0.5em auto 0;
}

  #bottom{
    width: 90%;
    margin: 1em auto 0;
}
    #bottom .botan{
      width: 80%;
      margin: 0 auto 1em;
      font-size: 120%;
      border-radius: 12px;
}

  /*フッター*/
  footer{
    margin: 3.5em 0 0;
    padding: 1.5em 0;
}
    footer #footer_inner{
      width: 90%;
}
      footer #footer_inner h2{
        width: 50%;
}
      footer #footer_inner table{
        width: 86%;
}
        footer #footer_inner table tr{
          border-bottom: 3px solid #e8f0dd;
          font-size: 120%;
}
          footer #footer_inner table tr:last-child{
            border-bottom: none;
}
          footer #footer_inner table tr th{
            display: block;
            width: 96%;
            vertical-align: top;
}
          footer #footer_inner table tr td{
            display: block;
            width: 96%;
            padding: 0em 2% 0.5em;
            text-align: center;
}
            footer #footer_inner table tr td .map a{
              width: 200px;
              display: block;
              margin: 0 auto;
} }
/* smartPhone1 */
@media only screen and (max-width: 499px) {
  /*基本設定*/
  html{
    font-size: 80%;
}

  /*ヘッダー*/
  #message{
    width: 200px;
}

  /*メイン*/
  /*フッター*/ }