@charset "utf-8";

html,body,h1,h2,h3,h4,p,ul,li,dl,dt,dd{
  margin: 0;
  padding: 0;
  line-height:1;
}


a{text-decoration: none;}
ul{list-style:none;}
body{font-size: 16px;}
img{
  vertical-align: bottom;
  max-width:100%;
}



/* -----------------------------------------
layout-- */

body{
  background-color: #faf8ed;
}

.container{
  margin: 0 auto;
  max-width: 1400px;
  box-sizing: border-box;
  padding:0 16px;
}

.header .container{
  padding-top: 2vh;
}

.main.container{
  margin-bottom:100px;
}


.footer .container{
  padding-top: 120px;
}


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

.header{
  background:url(../../img/05.jpg) no-repeat center center/ cover;
  width:100%;
  height:30vh;
  margin-bottom: 60px;
}

.header h1{
  width:150px;
  height:140px;

  background:url(../../img/logo_goshatei.svg) no-repeat center center / contain;
  text-align: center;
  margin:0 auto;

  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}



/* ------------------------------------
nav- */

.g-nav{
  display:flex;
  justify-content: center;
}

.g-nav li{
  position:relative;
  margin:0 10px;
}

.g-nav li a{
display:block;

color:#fff;
font-weight: bold;

font-family: 'Cinzel', serif; 
letter-spacing: 2px;
}

/* .g-nav li:nth-of-type(n+2)>a{
  margin-left: 10px;
} */


.g-nav li a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	/* background-color: rgba(185,155,0,0.5); */
  background-color:rgba(7, 245, 205, 0.5) ;
	border-radius: 50%;
	transition: 0.5s;
}

.g-nav li a:hover::after {
	width: 65px;
	height: 65px;
}


/* --------------------------------------- 
top*/

.top{
  position: fixed;
  right:30px;
  bottom:50px;
  width:50px;
  height:50px;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
  background:/* linear-gradient( #730f0f, #440707) */#ecaf54 ;
  color:#fff;
  font-weight: 700;
  font-family: 'Cinzel', serif; 
  letter-spacing: 1px;
}
.top:hover{
  border-radius: 50%;
  background: #e6b1b1;
  color:#730f0f;
  cursor:pointer;
}




/* ----------------------------------------------
main */

.main h2{
  margin-bottom: 20px;
  text-align: center;

  font-size: 30px;
  font-family: 'Cinzel Decorative', cursive;
  font-weight: 400;
}

.main .text{
  margin-bottom: 50px;
  line-height: 1.65;
  text-align: center;

  font-family: 'New Tegomin', serif;
}


/* ----------------------------------------
original cocktails */

.main h3{
    margin-bottom: 30px;
    text-align: center;

    font-size: 24px;
    font-family: 'Playfair Display SC', serif;
    font-weight: bold;
}

.main h4{
  margin-bottom: 30px;
  font-family: 'Playfair Display SC', serif;
}

.main .org_cocktails p{
    max-width:220px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 5px;
}

.main .org_cocktails p span{
  display: block;
}

/* hover用 */
.main .org_cocktails p a{
  display: block;
  max-width:220px;
  max-height: 220px;
    background: #000;
  overflow: hidden;
}

/* hover用 */
.main .org_cocktails p img{
  transition-duration: 0.3s;
}
/* hover用 */
.main .org_cocktails p img:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
  opacity: 0.6;
}

/* ---------------------
和素材・ハーブ */

.main .wrapper .box p{
  max-width:220px;
    text-align: center;
    margin-bottom: 5px;
}

/* hover用 */
.main .wrapper .box p a{
  display: block;
  max-width:220px;
  max-height: 220px;
    background: #000;
  overflow: hidden;
}

/* hover用 */
.main .wrapper .box p img{
  transition-duration: 0.3s;  
}
/* hover用 */
.main .wrapper .box p img:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
  opacity: 0.6;
}


.main .org_cocktails a, .main .wrapper .other_cocktails a{
    margin-bottom: 10px;
}

.main .org_cocktails {
    margin-bottom: 60px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap:16px;

  font-family: 'New Tegomin', serif;
}



/* ------------------------------ */



.main .wrapper{
  margin-bottom: 80px;
  font-family: 'New Tegomin', serif;
}

.main .wrapper .box{
  margin-bottom: 30px;
}

.main .wrapper .other_cocktails{
  display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap:5px;
}

.main .wrapper .other_cocktails p{
  font-size: 15px;
  line-height: 1.2;
}

.main .wrapper .box .other_cocktails .small_txt{
  display:block;
  padding-top: 3px;
  font-size: 12px;
}

.main .wrapper .box .other_cocktails .brake{
  display:block;
}


/* -------------------------------
tab panel text*/

.panel h3{
  margin-bottom:40px ;
  line-height: 1.8;
}

.panel dl dt, .panel dl dd, .panel ul li, .panel p{
  line-height: 1.65;
  text-align: center;
  font-size: 14.8px;

  font-family: 'New Tegomin', serif;
}

.panel ul {
  margin-bottom: 40px;
}

.main .panel h4{
  font-size: 20px;
  font-weight:700;
  font-family: 'Playfair Display SC', serif;

  margin-bottom: 40px;
}

.panel ul li{
  margin-bottom: 10px;
}

#menu3 span, #menu8 span{
  font-size: 12px;
  display: block;
}


/* .panel span{
  display:block;
} */

.panel h3 span{
  font-size: 15px;
  display: block;
}

.panel dl {
  display: flex;
  flex-wrap: wrap;
  max-width:500px;
  margin: 0 auto 40px;
}

.panel dl dt{
  width:81%;
  text-align: left;

  margin-bottom:10px ;
}

.panel dl dd{
  width:19%;
  text-align: right;
  margin-bottom:10px ;
}



/* ---------------------- 
panel dt line*/

.panel h4, .main h4{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	text-align: center;
}


.panel h4::before,
.panel h4::after, .main h4::before, .main h4::after{
	content: '';
	width: 70px;
	height: 2px;
	background-color: #e3bf00;
}

.panel h4::before, .main h4::before{
	margin-right: 20px;
}
.panel h4::after, .main h4::after {
	margin-left: 20px;
}

/* #menu2 dt, #menu2 dd{
  margin-bottom: 8px;
} */


/* ------------------------------ 
tab nav*/

#tab{
  display:flex;
  flex-wrap: wrap;

  margin-bottom: 60px;
}

#tab li{
  width:50%;
}

.tab_panel #tab .current>a{
  background:linear-gradient( #730f0f, #440707);
  color:#fff;

}

.tab_panel #tab li a{
  display: block;
  height:50px;
  line-height: 50px;

  background: #e6b1b1;
  color:#730f0f;

  font-size: 18px;
  font-family: 'Crimson Text', serif;

  text-align: center;
  
}

.tab_panel #tab li a:hover{
  background: #865151;
  color:#fff;
}


.tab_panel #tab li:nth-of-type(n+3)>a{
  border-top: 1px solid #fff;
}

.tab_panel #tab li:nth-of-type(even)>a{
  border-left: 1px solid #fff;
}




/* ----------------------------------
panel */

.panel{
  /* background-color:#fff;
  padding:10px; */
  display:none;/* 非表示にする */
}

.panel.current{
  display:block;/* 表示 */
}





/* ---------------------------------- 
footer*/


.footer .copy_right{
 text-align: center;

}

.footer{
 height:250px;
 background-color: #2e1e02;

 color:#fff;

 font-family: 'New Tegomin', serif;
}

/* ------------------- 
sns*/

.footer .sns{
  max-width:150px;
  margin: 0 auto 30px;
  display: flex;
  justify-content: space-between;
}

.footer .sns a{
  width:28%;
  display: block;
}


/* ------------------------------- 
PC site*/


@media (min-width:768px){

 /* -------------------------
  layout- */

  .container{
    padding:0 10px;
  }
  
  .main.container{
    margin-bottom: 150px;
  }
  
  
  /* ----------------------------
  header */
  
  .header{
    height:300px;
    margin-bottom: 120px;
  }
  
  .header .container{
    padding-top: 100px;
  }
  
  .header h1{
    width:150px;
    height:140px;
  
    margin:0;
  }
  
  .g-nav{
    display:flex;
    justify-content: flex-start;
  }
  
   .header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
  } 
  
  /* -----------------------------------
  main */
  
  .main h2{
    margin-bottom: 60px;
    font-size: 60px;
    letter-spacing: 12px;
  }
  
  
  .main .text{
    line-height: 2;
    font-size: 20px;
    max-width: 650px;
    margin:0 auto;
    margin-bottom: 80px;
    
  }

  .main h3{
    margin-bottom: 40px;

    font-size: 32px;
    letter-spacing: 2px;
  }

  .main h4{
  margin-bottom: 40px;

  font-size: 22px;
  }
  
  /* ------------------------------------ 
  main*/


  /* --------------------------- */

  .main .org_cocktails {
    max-width: 916px;
    margin: 0 auto 110px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:/* calc(500px / 3); */ 12px;

}

  

.main .wrapper .box p{
  font-size: 16px;
}


.main .wrapper .box .other_cocktails .small_txt{
  font-size: 15px;
}

.main .wrapper .box .other_cocktails .brake{
  display:inline;
}


.main .wrapper{
  max-width: 684px;
  margin: 0 auto 120px;
}

.main .wrapper .box{
  margin-bottom: 110px;
}


.main .wrapper .other_cocktails{
grid-gap:12px;
}

/* --------------------------------- 
tab nav*/
.tab_panel #tab{
  /* flex-wrap: nowrap; */
  width:85%;
  margin:0 auto 100px;
}

.tab_panel #tab li{
  width:25%;
}

.tab_panel #tab li:nth-of-type(n+3)>a{
  border-top: 0;
}

.tab_panel #tab li:nth-of-type(odd)>a{
  border-left:1px solid #fff;
}

.tab_panel #tab li:nth-of-type(n+5)>a{
  border-top: 1px solid #fff;
}

.tab_panel #tab li:first-child>a, .tab_panel #tab li:nth-child(5)>a{
  border-left: 0;
}

/* ------------------------
tab panel*/

.tab_panel .panel h3{
  margin-bottom: 70px;
}

.tab_panel .panel{
  max-width: 750px;
  margin:0 auto;
}



.menu_wrapper{
  display: flex;
  justify-content: space-between;
}

.menu_box{
  width:48%;
}

#menu2 span{
  font-size: 12px;
  display: inline;
}

/* -------------------------------
tab panel text*/


.panel dl dt, .panel dl dd, .panel ul li, .panel p{
  font-size: 16px;
}

.panel dl, .panel ul{
  margin-bottom: 50px;
}

.panel ul li{
  margin-bottom: 30px;
}

.main .panel h4{
  font-size: 22px;

  margin-bottom: 50px;
}

.panel dl dt, .panel dl dd{
  margin-bottom: 16px;
}


.panel h3 span{
  font-size: 18px;
}


}

/* ---------------------- 
PC site tab nav*/
@media (min-width:960px){
  .tab_panel #tab{
    /* flex-wrap: nowrap; */
    width:60%;
  }



}