@charset "utf-8";
/* ----------------------------------------------------------------
  共通
----------------------------------------------------------------- */

/*-------------------トップページ-------------------*/
body{font-family: "EB Garamond", "しっぽり明朝"; color: white; background-color: black;}
.pc { display: inline-block;}
.sp { display: none;}
a{transition: 0.5s;}
a:hover{opacity: 0.7;}
p{line-height: 180%;}
dt{font-weight: 300;}
th{font-weight: 300;}
h3{text-align: center; display: inline-block;margin: 0px auto 100px;font-size: 32px;letter-spacing: 0.1em;}
h3::before{content: ""; display: block; background-image: url(../img/whiteline.png);height:2px;max-width: 1000px; width: 80vw;background-size: contain;background-repeat: no-repeat;margin:0 auto 15px;}
h3::after{content: ""; display: block; background-image: url(../img/whiteline.png);height:2px;max-width: 1000px; width: 80vw;background-size: contain;background-repeat: no-repeat;margin: 15px auto 0;}
h4{font-size: 20px;}
.element {opacity: 0;visibility: hidden;transform: translateY(30px); transition: opacity 1s, visibility 1s, transform 1s;}
/* フェードイン時に入るクラス */
.is-fadein { opacity: 1; visibility: visible; transform: translateX(0);}
h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, a, span {transform: rotate(0.05deg);}
/*-------------------ヘッダー-------------------*/
h1 img{width:220px;}
h1{display: inline;}
header {display: flex; justify-content: space-between; width: 100%; padding: 20px; align-items: center;position:absolute}
header .pc ul{display: flex;}
header li{margin-left: 30px;transition: color 0.2s; font-weight: 500; letter-spacing: 0.1em;font-size: 18px;}
header li:hover { color: gray;}
header li img{width: 25px;}
/*-------------------メインビジュアル　PC版-------------------*/
.mv_wrap h2{position: absolute; width:30vw;height: auto; top: 33vw; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
.mv_wrap{background-image: url(../img/bg_mv.png);height: 100vh;background-size: cover;}
/*-------------------information-------------------*/
.information_wrap{max-width: 1000px; margin: auto; padding-top: 50px; text-align: center;}
.information_wrap dl{margin-bottom: 20px;}
.information_wrap dt{display: inline-block;margin: 0 30px 10px 0;}
.information_wrap dd{display: inline-block;}
.bg_information{background-image: url(../img/bg_information.png);background-size: contain;background-repeat: no-repeat;padding: 200px 0;background-size: cover;}
/*-------------------menu-------------------*/
.menu_wrap{max-width: 1000px; margin: auto; padding: 50px 0 100px; text-align: center;}
.menu_wrap .bg_menu{background: url("../img/bg_menu.jpg") no-repeat;background-size: cover;padding: 50px 0;}
.menu_wrap .bg_menu ul{background-color: rgba(0,0,0,0.7);max-width: 300px;margin: auto;padding: 10px 0;}
.menu_wrap .bg_menu li{padding: 40px 0;}
.menu_wrap .bg_menu hr{color: white;width: 30px;margin: auto;}

/*-------------------time-------------------*/
.time_wrap{max-width: 1000px; margin: auto; padding: 350px 0; text-align: center;background: url("../img/bg_table.png") no-repeat;background-size: cover;}
.time_wrap h4{font-size: 36px;line-height: 200%;text-shadow:2px 2px 10px gray;}


/*-------------------shop-------------------*/
.shop_wrap{max-width: 1000px; margin: auto; padding-top: 250px; text-align: center;}
.shop_wrap .left{width: 600px;}
.shop_wrap .right img{width: 150px;}
.shop_wrap .wrap_shop{display: flex;gap: 50px;text-align: left;}
.shop_wrap .right h4{font-size: 28px;margin: 40px 0;}
.shop_wrap .right p{margin-bottom: 23px;}
.shop_wrap .map{margin: 80px 0 55px;}
.shop_wrap .googlemap{width:100%;}
.shop_wrap .access{text-align: left;}

/*-------------------contact-------------------*/
.contact_wrap{max-width: 1000px; margin: auto; text-align: center;padding-top: 250px;}
.contact_wrap .link_wrap{display: flex;justify-content: space-between;max-width: 860px; margin: 0 auto 100px;}
.contact_wrap .link_wrap li{background-color: white;color: black;border: solid 1px black;width: 100%;height: 100px;}
/* .contact_wrap li .phone::before{content: ""; display: block; background-image: url(../img/phone.png);height:25px; width: 25px;background-size: contain;background-repeat: no-repeat;margin: auto;} */
.contact_wrap .link_wrap li .phone_img{width: 25px;}
.contact_wrap .must{border: solid 1px white;padding: 2px 7px;margin-left: 10px;}
.contact_wrap .link_wrap li img{max-width: 50px;display: table-cell;text-align: center;vertical-align: middle;margin: auto;}
.contact_wrap .link_wrap li p{font-size: 20px;display: table-cell;text-align: center;vertical-align: middle;line-height: 100%;}
.contact_wrap .link_wrap li .phone{font-size: 28px;display: table-cell;text-align: center;vertical-align: middle;}
.contact_wrap .link_wrap li a{display: table; width: 100%;height: 100%;}
.contact_wrap input{max-width:860px; width: 100%; height: 70px;border: solid 1px #C0C0C0;padding: 0 10px 0 10px;background-color: white; color: black;}
.contact_wrap .item_wrap{max-width: 860px;margin: auto;}
.contact_wrap .item_wrap li{margin-bottom: 30px;}
.contact_wrap .item_wrap li:last-child{margin-bottom: 0;}
.contact_wrap form{text-align: left;}
.contact_wrap .checkbox .check{width: 20px; height: 20px;background-color: black;margin-right: 30px;}
.contact_wrap .checkbox{text-align: center;margin-top: 100px;}
.contact_wrap .label{display: block;margin-bottom: 10px;text-align: left;}
.contact_wrap textarea{max-width:860px;width: 100%; height: 300px;border: solid 1px #C0C0C0;padding:20px 10px;background-color: white;color: black;}
.contact_wrap .personal{overflow: scroll; padding: 25px;border: solid 1px #C0C0C0;height: 200px;font-size: 14px;margin-top: 70px;}
.button_wrap{text-align: center;}
.button_wrap input{ max-width: 400px;  background-color: white; display: block;margin: 50px auto;color: black;transition: 0.2s;}
.button_wrap input:hover{opacity: 0.7;}
/* .contact_wrap button:hover{color: white;background-color: black;border: solid 1px white;} */
iframe{height: 300px;}
.robot{display: flex;justify-content: center;margin-top: 50px;}
.formerror{color: #C9171E;}

/*-------------------入力内容確認ページ-------------------*/
.contact_wrap form p{display: inline-block;}
.contact_wrap p{text-align: left;}
.contact_wrap .ask{vertical-align: top;padding-top: 15px;}
.under_form{max-width: 700px;}
.under_form button{margin: 0 50px 0 0; display: inline-block;padding: 20px;}
.under_form button:last-child{margin: 0;}
.under_form h3{width: 300px;}
.under_form .label{width:300px;}
.under_form .under_read{margin-bottom: 50px;}
.under_form .item{margin-bottom: 15px;}
.under_form .button{text-align: center; margin: 50px 0 100px 0;}
.complete_form p{margin-bottom: 100px;}
.complete_form{max-width: 700px;}
.comp .button{padding: 30px 0;}
.contact_wrap .button{ max-width: 400px; background-color: white; display: block;margin: 50px auto;color: black;transition: 0.2s;}
.contact_wrap .button:hover{opacity: 0.7;}
  /* -------------------共通フッター------------------- */
main{margin-bottom: 50px;}
.footer_wrap {margin: auto; padding:120px 0 20px; text-align: center;}
.footer_wrap div img{width: 165px;}
.footer_wrap ul img{width: 25px;}
.footer_wrap ul{display: flex;justify-content: space-between; margin:38px auto 32px; width: 100%; gap: 20px 0;max-width: 600px;text-align: center;}
.footer_wrap .sns{max-width: 90px;}

/* ----------------------------------------------------------------
  タブレット
----------------------------------------------------------------- */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
  /* br { display: none; } */
  .pc { display: none; }
  .sp { display: inline-block; }
  .ipad{display: inline-block;}
  dt{font-size: 14px;}
  dd{font-size: 14px;}
  th{font-size: 14px;}
  td{font-size: 14px;}
  p{font-size: 14px;}
  h3{margin: 0px auto 50px;}
  .mv_wrap h2{position: absolute; width: 50vw; height: auto; top: 65vw; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}

  /*-------------------ハンバーガーメニュー-------------------*/
#hamburger .btn-gNav { position: fixed; top: 30px; right: 30px; width: 35px; height: 24px; z-index: 3; box-sizing: border-box; cursor: pointer; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span { position: absolute; width: 100%; height: 2px; background: white; border-radius: 1px; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span:nth-child(1) { top: 0;}
#hamburger .btn-gNav span:nth-child(2) { top: 10px;}
#hamburger .btn-gNav span:nth-child(3) { top: 20px;}
#hamburger .btn-gNav.open span:nth-child(1) { background: #fff; top: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
#hamburger .btn-gNav.open span:nth-child(2),
#hamburger .btn-gNav.open span:nth-child(3) { top: 6px; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
#gNav { position: fixed; top: 0; right: -100%; width: 50%; height: 100%; background: black; font-size: 16px; box-sizing: border-box; z-index: 2; padding-top: 50px; transition: 0.3s;}
#gNav.open { right: 0px;}
#gNav .gNav-menu { width: 90%; margin: auto; font-size: 2vw; border-bottom: solid 1px white; padding-bottom: 50px;}
#gNav .gNav-menu li { display: block; padding: 20px 30px; line-height: 100%;}
#gNav .gNav-menu li a { color: white; text-decoration: none;}
#gNav .hamburger_footer { text-align: center; padding-top: 20px;}
#gNav small { color: white;}

/*-------------------トップページ-------------------*/
  .bg_information{padding: 100px 0;}
  .information_wrap{max-width: 90%;}
  .shop_wrap{max-width: 90%; padding-top: 150px;}
  .shop_wrap .left{max-width: 500px;}
  .shop_wrap .right h4{margin: 20px 0;}
  .shop_wrap .right p{margin-bottom: 10px;}
  .shop_wrap .map{ margin: 40px 0 25px;}
  .contact_wrap .link_wrap{margin-bottom: 50px;}
  .contact_wrap .personal{margin-top: 40px;}
  .contact_wrap .checkbox{margin-top: 50px;}
  .contact_wrap button{ margin: 20px auto 60px;padding: 25px 100px;}
  .contact_wrap{max-width: 90%;}
  .contact_wrap input{width: 100%;}
  .contact_wrap textarea{width: 100%;}
  .contact_wrap .label{font-size: 14px;margin-bottom: 10px;width:100%;}

}
/* ----------------------------------------------------------------
  SP
----------------------------------------------------------------- */

/*-------------------共通-------------------*/
@media screen and (max-width: 767px) {
p{font-size: 14px;}
dt{font-size: 14px;}
dd{font-size: 14px;}
h3{margin:0 auto 30px; font-size: 20px;}
th{font-size: 14px;}
td{font-size: 14px;}

/*-------------------ヘッダー-------------------*/
header{display: block;}
h1{display: block;}
h1 img{position: initial !important; margin: 20px 0 0 20px;}

/*-------------------ハンバーガーメニュー-------------------*/
#hamburger .btn-gNav { position: fixed; top: 30px; right: 30px; width: 35px; height: 24px; z-index: 3; box-sizing: border-box; cursor: pointer; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span { position: absolute; width: 100%; height: 2px; background: white; border-radius: 1px; -webkit-transition: all 400ms; transition: all 400ms;}
#hamburger .btn-gNav span:nth-child(1) { top: 0;}
#hamburger .btn-gNav span:nth-child(2) { top: 10px;}
#hamburger .btn-gNav span:nth-child(3) { top: 20px;}
#hamburger .btn-gNav.open span:nth-child(1) { background: white; top: 6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}
#hamburger .btn-gNav.open span:nth-child(2),
#hamburger .btn-gNav.open span:nth-child(3) { top: 6px; background: white; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
#gNav { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background: black; font-size: 16px; box-sizing: border-box; z-index: 2; padding-top: 50px; transition: 0.3s;}
#gNav.open { right: 0px;}
#gNav .gNav-menu { width: 90%; margin: auto; font-size: 2vw; border-bottom: solid 1px white; padding-bottom: 50px;}
#gNav .gNav-menu li { display: block; padding: 20px 30px; line-height: 100%;}
#gNav .gNav-menu li a { color: white; text-decoration: none;}
#gNav .hamburger_footer { text-align: center; padding-top: 20px;}
#gNav small { color: white;}

/*-------------------トップページ-------------------*/
.pc { display: none; }
.sp { display: inline-block; }
#gNav .gNav-menu { font-size: 5vw; text-align: left;}
#gNav .gNav-menu li {font-size: 24px;}
header{padding: 0;border-top: none;}
h1 img{width:140px;position: absolute;top: 30px; left: 30px;}
h2 img{width:60vw;top: 170vw;}
.mv_wrap h2{position: absolute; width: 300px; height: auto; top: 85vw; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);text-align: center;}
.bg_information{padding: 50px 0;}
.information_wrap{max-width: 90%; padding-top: 65px;}
.menu_wrap .bg_menu li{ padding: 20px 0px;}
.menu_wrap .bg_menu{padding: 30px 0;}
.menu_wrap{ padding: 50px 0 50px;}
.time_wrap{padding: 100px 0;}
.time_wrap h4{font-size: 20px;}
.shop_wrap{padding-top: 100px;max-width: 90%; }
.shop_wrap .wrap_shop{flex-direction: column;gap: 25px;}
.shop_wrap .left{max-width: 100%;}
.shop_wrap .right img{width: 70px;}
.shop_wrap .right h4{display: inline-block;margin: 0 0 0 20px;}
.shop_wrap .right p{margin: 10px 0;}
.skill_wrap{max-width: 90%;padding-top: 65px;}
.skill_wrap .design_img img{max-width:25%;}
.shop_wrap .map{margin: 40px 0 20px;}

.contact_wrap .link_wrap li .phone{font-size: 16px;}
.contact_wrap .link_wrap li:hover{opacity: 0.7;}
.contact_wrap .link_wrap li p{font-size: 14px;}
.contact_wrap{max-width: 90%;padding-top: 100px;}
.contact_wrap input{width: 100%;height: 40px; color: black;}
.contact_wrap textarea{width: 100%;}
.contact_wrap .label{font-size: 14px;margin-bottom: 10px;width:100%;}
.contact_wrap .link_wrap{margin-bottom: 50px;}
.contact_wrap textarea{height: 150px;}
.contact_wrap .personal{margin-top: 30px;padding: 15px;line-height: 180%;}
.contact_wrap .checkbox{margin-top: 40px;}
.contact_wrap .checkbox .check{margin-right: 15px;}
.contact_wrap button{padding: 20px 100px;margin: 30px auto 60px;padding: 30px;}
.contact_wrap .button{height: 70px;padding: 0;}
.comp .button{padding: 25px 0;}


.footer_wrap {max-width: 90%;padding: 60px 0 20px;}
.footer_wrap div img{width: 100px;}
.footer_wrap ul{flex-wrap: wrap;gap: 20px;}


}