html {
  font-size : calc(100vw / 19.20);
  margin : 0;
  padding : 0;
}

body {
  font-size : .16rem;
  border : .23rem solid #b39e85;
  font-family : -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  margin : 0;
  padding : 0;
}

b,
strong,
.bold {
  font-family : -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
  font-weight : 600;
}

a:hover {
  opacity : .5;
}

body.test {
  /* background-image : url(../img/background.jpg); */
  background-size : 100% auto;
  /* overflow: hidden; */
}

header.header {
  padding : .65rem .89rem;
  position : relative;
  height : 10rem;
  background-size : 15.97rem auto;
  background-repeat : no-repeat;
  background-position : 1rem 2rem;
}

.top_logo {
  width : 2.72rem;
}

.top_logo img {
  width : 100%;
  height : auto;
}

.top_desc {
  position : absolute;
  top : .7rem;
  left : 4.4rem;
  width : 6.08rem;
}

.top_desc img:first-child {
  width : 2.84rem;
  height : auto;
}

.top_desc img:nth-child(2) {
  width : 2.54rem;
  padding-left : .04rem;
}

h1.top_title {
  margin : 0;
  padding : .44rem .13rem;
  width : 2.58rem;
}

h1.top_title img {
  width : 100%;
  height : auto;
}


nav.header_nav {
  position : absolute;
  /* right: 0.5rem; */
  top : .48rem;
  left : 10.4rem;
}

nav.header_nav ul {
  margin : 0;
  padding : 0;
  list-style : none;
  display : flex;
  align-items : center;
  overflow : auto;
  -webkit-overflow-scrolling : touch;
  height : 100%;
}

nav.header_nav ul li {
  font-family : georgia;
  font-size : .2rem;
  /* padding : .13rem; */
  line-height : 1;
  letter-spacing : .01rem;
}

nav.header_nav ul li a {
  text-decoration : none;
  color : #000000;
  padding : .2rem .22rem;
  display : block;
  text-align : center;
}

li.nav_home_icon {
  display : none;
}

li.gouf img {
  height : .32rem;
}

li.sns img {
  width : .32rem;
}

nav.header_nav ul li.nav_quality {
  letter-spacing : .015rem;
}

nav.header_nav ul li.nav_service {
  letter-spacing : .015rem;
}

nav.header_nav ul li.nav_instagram {
  display : none;
}

nav.header_nav ul li.gouf a {
  padding : 0;
}

nav.header_nav ul li.gouf {
  margin-right : .29rem;
}

.top_text {
  position : absolute;
  right : 1.1rem;
  width : 1.15rem;
  top : 2.2rem;
}

.top_text img {
  width : 100%;
  height : auto;
}

.top_url {
  position : absolute;
  top : 5.27rem;
  left : .4rem;
}

.top_url img {
  width : .13rem;
  height : auto;
}

/*main*/
main {
  padding : .27rem 0 0 0;
}

h2.header_text {
  width : 3.33rem;
  margin : 0 auto;
}

h2.header_text img {
  width : 100%;
  height : auto;
}

.point_1 {
  padding : 1.2rem 1.6rem 1.2rem 1.6rem;
  position : relative;
}

.point_2 {
  padding : .65rem 1.1rem 1.2rem 6.77rem;
  width : 100%;
  box-sizing : border-box;
  position : relative;
}

.number_point {
  width : 1.31rem;
  float : left;
  margin : 0 .5rem 0 0;
}

.number_point img {
  width : 100%;
  height : auto;
}

.point_1 .text_point {
  width : 8.54rem;
  float : left;
}

.point_2 .text_point {
  width : 6.67rem;
  float : left;
}

.text_point img {
  width : 100%;
  height : auto;
  margin : 0;
  padding : 0;
}

.point_1 p {
  float : left;
  width : 8.5rem;
  line-height : 2.0;
  margin : .3rem 0;
  letter-spacing : .0rem;
  font-family : YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}

.point_2 p {
  float : left;
  width : 8.5rem;
  line-height : 2;
  margin : .3rem 0;
  letter-spacing : .0rem;
  font-family : YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
}

.image_point {
  position : absolute;
  width : 4.41rem;
}

.point_1 .image_point {
  right : 1.33rem;
  top : .32rem;
}

.point_2 .image_point {
  left : 1.96rem;
  top : .7rem;
}

.image_point img {
  width : 100%;
  height : auto;
}

.service {
  padding : 1rem;
}

.service_desc h3 img {
  width : 100%;
  height : auto;
}

.service_1 .service_desc h3 img {
  width : 2.74rem;
  height : auto;
}

.service_2 .service_desc h3 img {
  width : 6.72rem;
}

.service_3 .service_desc h3 img {
  width : 3.41rem;
}

.service_1,
.service_3 {
  display : flex;
  flex-direction : row-reverse;
  justify-content : space-between;
  padding : 1.27rem .24rem 1rem .61rem;
}

.service_2 {
  display : flex;
  flex-direction : row;
  justify-content : space-between;
  padding : 1.59rem .24rem 1.49rem .1rem;
}

.service_photo {
  width : 8.52rem;
  height : 7.43rem;
  background-color : rgba(200, 0, 0, .1);
  position : relative;
}

.service_photo::before {
  /* content : ""; */
  width : 100%;
  height : 100%;
  display : block;
  position : absolute;
  left : -.25rem;
  bottom : -.25rem;
  background : repeating-linear-gradient(-45deg, #4d4d4d 0, #4d4d4d .01rem, transparent .01rem, transparent .16rem);
  z-index : -1;
}

.service_photo img {
  width : 100%;
  position : absolute;
  top : .15rem;
  right : .25rem;
  z-index : -1;
}

.service_2 .service_photo img {
  right : initial;
  left : .25rem;
}

.service_2 .service_photo::before {
  left : initial;
  right : -.25rem;
}

.bg_photo {
  width : 100%;
  height : 100%;
  background-size : cover;
  position : relative;
  z-index : 2;
}

.service_desc {
  width : 6.55rem;
  position : relative;
}

.service_desc h3 {
  margin : .18rem 0;
}

.service_2 .service_desc h3 {
  margin : .05rem 0 .18rem;
}

.service_desc p {
  margin : .55rem 0;
  width : 5.9rem;
  line-height : 2.12;
  letter-spacing : -.01rem;
}

.box {
  border : .01rem solid #333333;
}

.desc_add.bottom figure {
  /* float: left; */
  margin-block-end : 0;
  margin-block-start : 0;
  margin-inline-end : 0;
  margin-inline-start : 0;
  padding : .16rem .16rem;
  margin : 0;
  width : auto;
}

.desc_add.bottom figure img {
  width : 1.5rem;
  height : auto;
  margin : 0;
  padding : 0;
}

.desc_add.bottom {
  display : flex;
  justify-content : space-between;
  width : 6rem;
  position : relative;
  bottom : 0;
  margin : .7rem 0 0 0;
}

.desc_add.bottom figure figcaption {
  font-size : .22rem;
  text-align : center;
  padding : .2rem 0 .05rem;
  line-height : 1.5;
}

.desc_add .box {
  padding : .1rem 0;
  font-size : .23rem;
  margin : .24rem 0;
  width : 2.6rem;
  text-align : center;
}

.desc_add {
  margin : 1.1rem 0 0 0;
}

/*footer*/
.instagram_area {
  padding : .43rem 1rem 2rem;
}


footer .contact {
  background-color : #b39f86;
  padding : .62rem 1.38rem 0;
}

.phone_number a {
  display : block;
  width : 4.85rem;
  margin : auto;
  padding : .54rem 0 .51rem 0;
}

.phone_number img {
  width : 100%;
  height : auto;
}

.phone_number {
  border-bottom : .02rem solid #000000;
  /* padding: 0 .2rem; */
}

.fax_number {
  width : 50%;
  height : 3.2rem;
  text-align : center;
  border-right : .01rem solid #000000;
  margin : .5rem 0;
  float : left;
  box-sizing : border-box;
}

.fax_number img {
  width : 4.48rem;
  height : auto;
  padding : .61rem 0 .73rem;
}

.line {
  width : 50%;
  height : 3.2rem;
  text-align : center;
  border-left : .01rem solid #000000;
  margin : .5rem 0;
  float : left;
  box-sizing : border-box;
}

.line a img {
  width : 3.87rem;
  padding-right : .25rem;
}

.line img {
  width : 1.05rem;
  height : auto;
  padding : 1rem 0;
}

.email {
  clear : both;
  border-top : .02rem solid #000000;
}

.email a {
  display : block;
  text-align : center;
  padding : 1rem 0;
}

.email a img:nth-child(1) {
  width : 3.89rem;
  margin : 0 0 .3rem 0;
}

.email a img {
  width : 6.62rem;
  max-width : 100%;
}

.gotogouf {
  display : none;
  clear : both;
}

footer .sns {
  display : none;
}

.footer_address {
  clear : both;
  display : flex;
  padding : .91rem 0 .4rem;
  font-size : .18rem;
  font-family : YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  margin : 0;
}

.footer_logo {
  box-sizing : border-box;
  width : 50%;
  /* text-align: right; */
  position : relative;
}

.footer_logo .logo {
  width : 1rem;
  right : 3.32rem;
}

.footer_address .address {
  box-sizing : border-box;
  width : 50%;
  display : flex;
  line-height : 1.5;
}

.footer_logo .text {
  width : 2.58rem;
  height : auto;
  right : .55rem;
}

.footer_logo img {
  position : absolute;
  top : 0;
  bottom : 0;
  margin : auto;
}

.address dl {
  margin-block-start : 0;
  margin-block-end : 0;
  display : flex;
}

.address dl dd {
  margin-inline-start : .1rem;
}

.address .f_left dl {
  justify-content : space-between;
}

.f_left {
  padding : 0 .4rem 0 .1rem;
}

.f_right {
  /* padding : .25rem 0 0 0; */
}

.footer nav.header_nav.footer {
  position : relative;
  top : 0;
  left : 0;
  margin : 0 auto;
  text-align : center;
}

.footer nav.header_nav ul {
  justify-content : center;
}

.footer .header_nav .sns {
  display : block;
}

.footer nav.header_nav ul li.gouf {
  margin-left : .29rem;
}

.copyright {
  padding : .7rem 0 .5rem;
  text-align : center;
  font-size : .14rem;
}

.scrollanime {
  opacity : 0;
}

.fadeInDown {
  animation-name : fade-in5;
  animation-duration : 1s;
  animation-timing-function : ease-out;
  animation-delay : 0;
  animation-iteration-count : 1;
  animation-direction : normal;
  animation-fill-mode : forwards;
}

@keyframes fade-in5 {
  0% {
    opacity : 0;
    transform : translate3d(0, 1rem, 0);
  }

  100% {
    opacity : 1;
    transform : translate3d(0, 0, 0);
  }
}

.slider_area {
  /* height : 5rem; */
  padding : 1rem 0 0;
  width : 100%;
  overflow : hidden;
}

.bx-viewport {
  overflow : visible !important;
}

#sb_instagram {
  max-width : 100% !important;
  width : 100% !important;
}

#sb_instagram #sbi_images {
  height : 2rem;
  float : none;
}

.bx-viewport {
  overflow : visible !important;
}

.flickity-viewport {
  overflow : visible !important;
}

.sbi_item {
  width : 2rem !important;
  /*height : 2rem !important;*/
  float : none !important;
}

.sbi_photo {
  /*  width : 2rem !important;*/
  height : 2rem !important;
}

div#topbanner {
  text-align : center;
  padding : 0 0 2rem;
}

div#topbanner img {
  width : 8.46rem;
  height : auto;
  max-width : 90%;
}

@media only screen and (max-width: 768px) {
  body.test {
    /* background-image : url(../img/background_sm.jpg); */
    background-size : 100% auto;
    background-position : 0 1.08rem;
    background-repeat : no-repeat;
  }

  html {
    font-size : calc(100vw / 7.45);
  }

  body {
    border : .09rem solid #b39e85;
  }

  /* チェックボックスは非表示に */
  .drawer-hidden {
    display : none;
  }

  /* ハンバーガーアイコンの設置スペース */
  .drawer-open {
    display : flex;
    height : .7rem;
    width : 1.2rem;
    justify-content : center;
    align-items : center;
    position : absolute;
    z-index : 100;
    /* 重なり順を一番上に */
    cursor : pointer;
    top : .4rem;
    right : .4rem;
  }

  /* ハンバーガーメニューのアイコン */
  .drawer-open span,
  .drawer-open span:before,
  .drawer-open span:after {
    content : "";
    display : block;
    height : .02rem;
    width : .79rem;
    border-radius : 0;
    background : #000000;
    transition : .5s;
    position : absolute;
  }

  /* 三本線のうち一番上の棒の位置調整 */
  .drawer-open span:before {
    bottom : .14rem;
  }

  /* 三本線のうち一番下の棒の位置調整 */
  .drawer-open span:after {
    top : .14rem;
  }

  /* アイコンがクリックされたら真ん中の線を透明にする */
  #drawer-check:checked ~.drawer-open span {
    background : rgba(255, 255, 255, 0);
  }

  /* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
  #drawer-check:checked ~.drawer-open span::before {
    bottom : 0;
    transform : rotate(45deg);
  }

  #drawer-check:checked ~.drawer-open span::after {
    top : 0;
    transform : rotate(-45deg);
  }

  /* メニューのデザイン*/
  #drawer-content {
    width : 100%;
    height : 100%;
    position : fixed;
    top : 0;
    left : 100%;
    /* メニューを画面の外に飛ばす */
    z-index : 99;
    background : #ffffff;
    transition : .5s;
  }

  /* アイコンがクリックされたらメニューを表示 */
  #drawer-check:checked ~#drawer-content {
    left : 0;
    /* メニューを画面に入れる */
  }

  #drawer-check:checked ~.drawer-open {
    position : fixed;
  }

  header.header {
    padding : .7rem .63rem;
    background-size : 6.46rem;
    background-position : .51rem 4.66rem;
    height : 8rem;
  }

  .top_logo {
    width : 2.50rem;
  }

  h1.top_title {
    padding : .22rem .03rem;
  }

  .header .top_desc img {
    display : block;
    margin : 0 auto;
    padding : 0 0 .18rem;
  }

  .top_desc {
    top : 8rem;
    left : 0;
    width : 100%;
  }

  .top_text {
    width : 1.53rem;
    right : 1.3rem;
    top : 1.6rem;
  }

  .top_url {
    display : none;
  }

  .drawer-open span span {
    top : .28rem;
  }

  .drawer-open span span:before,
  .drawer-open span span:after {
    content : none;
  }

  .image_point {
    width : 2.75rem;
  }

  .point_1.clearfix {
    padding : .8rem .7rem .1rem;
  }

  .point_1 .image_point {
    right : .64rem;
    top : .8rem;
  }

  .point_1 .text_point {
    width : 4.24rem;
    float : none;
    padding : .64rem 0 .4rem;
  }

  .img_pc {
    display : none;
  }

  .img_sm {
    display : inline;
  }

  .number_point {
    float : none;
    padding : 0;
  }

  .point_1 p {
    float : none;
    width : 100%;
    margin : 0;
    font-size : .2rem;
    line-height : 1.9;
  }

  .point_2 {
    padding : .8rem .7rem .2rem;
  }

  .point_2 .image_point {
    left : .7rem;
    top : .79rem;
  }

  .point_2 .text_point {
    width : 3.27rem;
    float : none;
    padding : .65rem 0 .39rem;
  }

  .point_2 p {
    width : 100%;
    margin : 0;
    font-size : .2rem;
    line-height : 1.9;
  }

  .service {
    padding : .92rem 0 0;
  }

  .service_1,
  .service_2,
  .service_3 {
    display : block;
    padding : .74rem 0 .25rem;
  }

  .service_2 .service_photo::before {
    left : -.25rem;
    right : initial;
  }

  .service_2 .service_photo img {
    left : initial;
    right : .25rem;
  }

  .service_photo {
    width : 6rem;
    height : 5.29rem;
    margin : 0 auto;
  }

  .service_1 .service_desc h3 img {
    width : 2.09rem;
  }

  .service_desc {
    width : 100%;
    padding : .5rem .7rem;
    box-sizing : border-box;
  }

  .service_desc p {
    margin : .44rem 0;
  }

  .desc_add.bottom {
    position : relative;
    margin : .5rem 0 0 0;
  }

  .service_2 .service_desc h3 img {
    width : 5.1rem;
  }

  .service_3 .service_desc h3 img {
    width : 4.65rem;
  }

  .slider_area {
    height : auto;
    padding : .84rem 0;
  }

  .instagram_area {
    padding : .43rem 1rem 0rem;
  }

  footer.footer {
    background-color : #b39e85;
    position : relative;
  }

  footer.footer:before {
    content : "";
    position : absolute;
    display : block;
    width : 100%;
    height : 100%;
    background-color : #b39e85;
    z-index : -1;
    left : -1px;
  }

  footer.footer:after {
    content : "";
    position : absolute;
    display : block;
    width : 100%;
    height : 100%;
    background-color : #b39e85;
    z-index : -1;
    right : -1px;
    top : 0;
  }

  footer .contact {
    padding : .62rem .68rem 0;
    background-color : transparent;
  }

  .phone_number a {
    padding : .55rem 0 .67rem 0;
  }

  .fax_number {
    float : none;
    width : 100%;
    margin : 0;
    border-right : 0;
    border-bottom : .02rem solid #000000;
    padding : 0;
    height : auto;
  }

  .line {
    float : none;
    width : 100%;
    margin : 0;
    padding : 0;
    border-left : 0;
    border-bottom : .02rem solid #000000;
    height : auto;
  }

  .email {
    border-top : none;
    border-bottom : .02rem solid #000000;
  }

  .email a {
    padding : .6rem;
  }

  .point_2 .number_point {
    padding : 0 0 0 4.58rem;
  }

  .desc_add {
    margin : .5rem 0 0 0;
  }

  .line a img {
    padding : .56rem 0 .43rem 0;
  }

  .gotogouf {
    display : block;
    text-align : center;
    padding : .37rem 0 .39rem 0;
    border-bottom : .02rem solid #000000;
  }

  .gotogouf a img {
    width : 2.44rem;
  }

  .gotogouf img.text {
    width : 4.5rem;
    margin : 0 0 .27rem 0;
  }

  footer .sns {
    display : block;
    text-align : center;
    border-bottom : .02rem solid #000000;
  }

  footer .sns a {
    display : inline-block;
    padding : .4rem .4rem .3rem .4rem;
  }

  footer .sns a img {
  }

  .footer_address {
    display : block;
    padding : .47rem 0 0;
  }

  .footer_logo {
    width : 100%;
    text-align : center;
  }

  .footer_logo img {
    position : relative;
  }

  .footer_logo .logo {
    width : 1.21rem;
    right : initial;
  }

  .footer_logo .text {
    width : 3.1rem;
    right : initial;
    padding : 0 0 0 .25rem;
  }

  .footer_address .address {
    width : 100%;
    justify-content : center;
    padding : .5rem 0;
  }

  .footer nav.header_nav.footer {
    display : none;
  }

  .copyright {
    padding : 0 0 .6rem;
  }

  nav.header_nav ul {
    display : block;
  }

  nav.header_nav ul li.nav_home_icon {
    display : block;
    height : auto;
    padding : .3rem 0 0;
    text-align : center;
    border-bottom : none;
  }

  nav.header_nav ul li.nav_home_icon img {
    width : 2.28rem;
  }

  nav.header_nav ul li {
    height : 1.38rem;
    font-family : "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
    font-size : .45rem;
    letter-spacing : 0;
    position : relative;
    border-bottom : .02rem solid #999999;
  }

  nav.header_nav ul li a {
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    width : 100%;
    /* padding: 0; */
    line-height : 1.38rem;
    padding : 0;
  }

  nav.header_nav ul li a:hover,
  nav.header_nav ul li a:active {
    background-color : #b39e85;
  }

  nav.header_nav ul li.nav_quality {
    letter-spacing : 0;
  }

  nav.header_nav ul li.sns {
    display : none;
  }

  nav.header_nav ul li.gouf {
    margin : 0;
    background-color : #231815;
  }

  nav.header_nav ul li.gouf img {
    width : 3.2rem;
    height : auto;
  }



  nav.header_nav ul li.nav_instagram {
    display : block;
  }
}

@media(min-width: 769px) {
  a[href^="tel:"] {
    pointer-events : none;
  }

  .line a {
    pointer-events : none;
  }

  .drawer-hidden {
    display : none;
  }

  .img_pc {
    display : inline;
  }

  .img_sm {
    display : none;
  }
}