@import url("./tablet.css");
@import url("./mobil.css");
/*========================================================

@media screen and (max-width:359px){} ////// 360px以下　android
@media screen and (max-width:767px){} ////// 768px以下　mobil
===========================================================*/

/*####################### 768px 以下　 ##########################*/
/*====================
- iPad
- drawermenu(mobile only)
====================*/

/****************************************

drawermenu(mobile only)

*****************************************/

@media screen and (max-width: 767px) {
  /* swiper */
  .swiper-container {
    display: none;
  }
  /* header */
  /* .tweet{
	position: absolute;
	bottom: -470px;
	left:0px!important;
} */
  /* .hero-image {
    position: relative;
    width: 100%;
    padding: 0;
  } */

  .hero-image .section {
    width: 100%;
 
  }
  .hero {
    display: flex;
    flex-direction: column;

  }

  .recruit-bg {
    display: none;
  }

  /* hiro */
  .hero {
    position: absolute;
    top: 0px;
    left: 0;
    width: 600px;
    /* サイズしていないとPCサイズ崩れる */
    height: auto;
  }

  /* card	 */
  main .top-card {
    display: none;
  }
  /* main .top-card {
    position: absolute;
    top: 1350px !important;
    left: 0px !important;
    width: 90%;
    height: auto;
    z-index: 5;
  } */
  /* main .top-card {
    position: absolute;
    top: 1350px !important;
    left: 0px !important;
    width: 90%;
    height: auto;
    z-index: 5;
  } */

  /* main .top-card p {
    text-align: center;
    font-size: 13px;
    color: #bfaf70;
    line-height: 2;
    position: absolute;
    top: 30px;
    left: 30px !important;
    z-index: 6;
    transform: rotate(-9deg);
  } */

 /* topic */
.topic {
  margin-top: 100px;
}
.about {
  margin-top: 100px;
}
  .about p {
    font-size: 16px;
  }
  .section_inner p{
    font-size: 14px;
    letter-spacing:0px;

  }
  .section {
    border: #896f22 1px solid;
    background: rgb(68, 0, 5, 0.7);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 20px 10px 20px;
    margin: 20px 20px 30px;
  }

  .section_inner {
    text-shadow: 1px 2px 3px #000;
  }
  .section .section_inner ul li {
    line-height: 2;
    letter-spacing: 2px;
  }

  /* system */
  #system{
  
    margin-top: 100px;
  }
  
  .section .section_inner_fontstyle01 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    color: #bfaf70;
    letter-spacing: 2px;
    line-height: 2.6;
    text-align: left;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: -50px !important;
  }

  .section .section_inner_fontstyle02 {
    /* border: 1px solid white; */
    font-family: "Noto Sans JP", sans-serif;
    font-size: 14px;
    /* margin: 50px 0; */
    color: #bfaf70;
    letter-spacing: 2px;
    line-height: 2.6;
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .section h3 {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 8px;
    line-height: 6px;
    text-align: center;
    font-family: "Oranienbaum", serif;
    color: #d3c587;
    margin-top: 30px;
    width: 100%;
    height: 13px;
    background-color: #000;
    margin-left: auto;
    margin-right: auto;
  }
  /********** birthday ************/
  .birthday img {
    width: 120px !important;
    height: auto;
    /* width: 50px!important;
	height: auto;
	position: absolute;
	left: 50px!important;
	top: 120px; */
  }
  /********** santa ************/

  .imgmain img {
    width: 300px;
    height: auto;
    margin: 0 auto;
  }

  /* instagram----------------------------------- */

  .section-insta {
    /* background-color: rgba(29, 0, 0, 0.8); */
    margin-left: 0px;
    width: 300px;
    height: auto;
    position: relative;
  }

  .section-insta p {
    position: absolute;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    font-family: "Roboto Mono", monospace;
    top: -25px;
    left: 10px;
  }

  .section-insta .mei-plus {
    display: none;
  }

  .set-insta {
    padding-left: 0px;
    width: 100%;
    height: auto;
  }
  /* ========================
* logo
* ======================== */

  .salon-logo {
    width: 130px;
    height: auto;
    position: fixed;
    top: -5px;
    left: 20px;
  }

  /* logo height */
  .page-header > .inner img {
    /* margin-top: -30px; */
  }
  /* ========================
* Navigation Circle BG
* ======================== */
  #nav-circle-bg {
    position: fixed;
    background: rgba(29, 0, 0, 0.8);
    width: 600px;
    height: 600px;
    top: 50%;
    right: -600px;
    margin-top: -300px;
    border-radius: 50%;
    transition: transform 0.5s ease;
    transition-delay: 0.6s;
  }
  .open #nav-circle-bg {
    transform: matrix(2.7, 0, 0, 2.7, 0, 0);
    transition-delay: 0s;
  }

  /* ========================
* Navigation(mobile only)
* ======================== */

  #nav {
    position: fixed;
    font-size: 32px;
    height: 100%;
    width: 500px;
    right: -600px;
    display: flex;
    align-items: center;
  }
  #nav ul {
    width: 100%;
    list-style: none;
    font-family: "Cinzel", serif;
    font-size: 20px;
    color: rgb(70, 68, 68);
  }
}
/* ========================
* nav-toggle (mobile only)
* ======================== */

@media screen and (max-width: 767px) {
  /* koushin----------------- */

  .hero-image .section {
    
    /* border: 1px solid #bf70a5; */
    /* 	
	　　background-image: url(../img/top/august.png);
		background-repeat: no-repeat;
		background-size: 25%;
		background-position-y: 65%; */
  }
  /* koushin----------------- */

  .top-nav li {
    padding-top: 40px;
  }

  .top-nav a:hover {
    border-bottom: 3px #bfaf70 solid;
    background-size: 5px;
    color: #bfaf70;
    height: 50px;
    /* padding-top: 40px; */
  }

  #nav-toggle {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 56px;
    height: 56px;
    padding: 19px 17px 0;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
  }
  #nav-toggle > div {
    position: relative;
  }

  #nav-toggle span {
    width: 100%;
    height: 2px;
    left: 0;
    display: block;
    background: #896f22;
    position: absolute;
    transition: 0.35s ease-in-out;
  }
  #nav-toggle span:nth-child(1) {
    top: 0;
  }
  #nav-toggle span:nth-child(2) {
    top: 7px;
  }
  #nav-toggle span:nth-child(3) {
    top: 14px;
  }
  .open #nav-toggle span:nth-child(1) {
    top: 7px;
    transform: rotate(45deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 7px;
    transform: rotate(-45deg);
  }

  /* --------phone------------------ */
  .phone {
    color: #bfaf70;
    margin-top: 10px;
  }

  .phone span {
    margin-left: 10px;
    font-size: 32px;
    font-family: "Vidaloka", serif;
  }

  /* --------audio------------------ */

  audio {
    margin-left: -30px;
    /* width: 200px;
	height: auto; */
  }

  /* top-card--------------------------- */
  main .top-card img {
    width: 80%;
    height: auto;
  }

  main .top-card {
    position: absolute;
    top: 780px;
    left: -60px;
    width: 430px;
    height: 200px;
    z-index: 5;
  }

  main .top-card p {
    font-family: "Sawarabi Mincho", serif;
    text-align: center;
    font-size: 12px;
    line-height: 2;
    position: absolute;
    top: 40px;
    left: 90px;
    z-index: 6;
    transform: rotate(-9deg);
  }

  #about {
    margin-top: 120px;
  }
  /* topcard挿入のため */

  /* -------------header-swiper--------- */

  .hero {
    margin-top: 100px;
    /* position: absolute; */
    margin-left: 0px;
    width: 380px; /* サイズしていないとPCサイズ崩れる */
    /* height: auto; */
  }

  .hero-image .swiper-container {
    display: none;
  }

  .hero-image {
    width: 100%;
    height: 1900px !important;
    background-size: cover;
    background-position: center;
    /* display: flex; */
    justify-content: center;
    background-color: rgb(68, 0, 5, 0.4);
    margin-left: auto;
    margin-right: auto;
  }

  /****************************************

table

*****************************************/
  #customers {
    font-family: "Sawarabi Mincho", serif;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: 2px;
  }

  #customers td,
  #customers th {
    /* border: 1px solid #ddd; */
    padding: 15px;
    font-size: 13px;
    background-color: rgb(68, 0, 5);
  }

  #customers tr:nth-child(even) {
    color: #fff;
  }

  /*title-----------------------*/
  #customers th {
    padding: 12px 3px;
    text-align: left;
    color: white;
    font-size: 14px;
    letter-spacing: 0px;
  }

  #customers .width400 {
    width: 400px;
    height: 40px;
    font-size: 14px;
    text-align: center;
    color: #fffaf0;
    background-color: rgba(146, 70, 83, 0.4);
    padding: 12px 3px;
  }

  #customers .width400side {
    width: 400px;
    height: 40px;
    font-size: 14px;
    text-align: center;
    color: #fffaf0;
    background-color: rgba(191, 175, 112, 0.4);
    line-height: 2;
    padding: 12px 3px;
  }

  /* cast-------------------- */

  .cast-style {
    display: flex;
    justify-content: center;
  }

  /* event-------------------- */
  .event-style02 {
    display: flex;
    justify-content: center;
    margin-left: 20px;
  }
}
/* max767 for sp */

/* ----------mobile---------- */

@media screen and (max-width: 640px) {
  .page-header .inner {
    width: 100%;
    padding: 0;
  }
  .page-header {
    top: 0;
    position: fixed;
    margin-top: 0;
  }
  /* Fixed reset */
  .page-header.fixed {
    padding-top: 0;
    /* background: transparent; */
    background: rgba(29, 0, 0, 0.7);
  }
  #mobile-head {
    width: 100%;
    z-index: 999;
    position: relative;
  }
  .page-header.fixed .site-logo,
  .page-header .site-logo {
    position: absolute;
    left: 10px;
    top: -30px;
    font-size: 20px;
    letter-spacing: 4px;
  }
  .top-nav {
    position: absolute;
    /* 開いてないときは画面外に配置 */
    top: -500px;
    /* background: rgb(255, 255, 255); */
    width: 100%;
    text-align: left;
    /* margin-top: 40px; */
    margin-top: -20px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 0;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
  }
  .top-nav ul {
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -moz-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    list-style: none;
    flex-direction: column;
    font-size: 14px;
    font-family: "Cinzel", serif;
  }
  .top-nav ul li {
    height: 65px; /*drawer link height */
    width: auto;
    float: none;
    /* position: static; */
  }
  .page-header .top-nav ul li a,
  .page-header.fixed .top-nav ul li a {
    width: 100%;
    display: block;
    color: #fff;
    padding: 10px 0;
  }
  #nav-toggle {
    display: block;
  }
  /* #nav-toggle 切り替えアニメーション */
  .open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
  }
  /* #global-nav スライドアニメーション */
  .open .top-nav {
    -moz-transform: translateY(556px);
    -webkit-transform: translateY(556px);
    transform: translateY(556px);
  }
  /* }

@media screen and (max-width:767px) { */

  /* ---------hero-image------------- */

  /* .hero-image {
    border-bottom: rgb(190, 158, 15) 2px solid;
    position: relative;
    height: 700px;
    background-image: url(../img/top/floor02.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
  } */

  .hero {
    margin-top: 100px;
    background-color: rgb(68, 0, 5, 0.4);
    height: auto;
  }

  .hero-image .top-card {
    /* display: none; */
  }

  /* ---------sns (site-logo for style.css)------------- */

  #mobile-head .sns {
    position: relative;
    top: -80px;
    left: 70px;
  }
  .wrapper {
    overflow: hidden;
  }
  main {
    overflow: hidden;
    width: auto;
  }

  .hero-image .inner-featured {
    margin-top: 70px !important;
  }
  .concept .concept_inner {
    margin-top: 0px;
  }
  .concept .concept_inner p {
    font-family: "Hannari", serif;
    font-size: 14px;
    color: #333031;
    letter-spacing: 6px;
    line-height: 2.6em;
  }
  .commit .commit_inner p {
    font-family: "Hannari", serif;
    font-size: 14px;
    color: #333031;
    letter-spacing: 6px;
    line-height: 2.2em;
  }
  /* -------------common-------------- */
  .link {
    font-size: 18px;
    font-weight: bold;
    color: #333031;
    letter-spacing: 4px;
    line-height: 96px;
    font-family: "Cinzel", serif;
    text-align: center;
    position: relative;
    left: 0px;
    top: 30px;
  }
  footer .footer-flex .third li {
    font-size: 11px;
    line-height: 4.6;
    letter-spacing: 2px;
  }
  footer .footer-flex .third .add_task {
    line-height: 1.4;
    padding-top: 10px;
  }
} /*@media最後残す */

/*####################### 480px 以下　 ##########################*/

/* @media screen and(max-width:479px){

header .right .top-nav{	
	display:none!important;	
	}
} */

@media screen and (min-width: 480px) {
  #nav-open {
    display: none;
  }
}