/*
Theme Name:HIDEOUT2023
Author: yasunori iwakiri
Description: HIDEOUTのテーマ
tags: hideout
Version: 1.0
*/
@charset "utf-8";
* {
   box-sizing: border-box;
}
body {
   margin: 0;
   padding: 0;
   font-family: 'Noto Sans JP', sans-serif;
   background-color: #232832;
   letter-spacing : 0.2em;
   color: #d2d2d2
}
header {
   padding: 30px 4% 10px;
   position: fixed;
   top: 0;
   width: 100%;
   background-color: transparent;
   display: flex;
   align-items: center;
   z-index: 1;
}
h1 {
   margin: 0; padding: 0;
}
a {	
   text-decoration: none;
   color: #d2d2d2;
}
a:hover{
   color: #f7931e;
}
nav {
   margin: 0 0 0 auto;
}
header ul {
   list-style: none;
   margin: 0;
   display: flex;
   text-shadow: 0 0 4px black;
}
li {
   margin: 0 0 0 30px;
   font-size: 16px;
   list-style-type: none;
}
.main-visual {
   display: flex;
   justify-content: flex-end;
   align-items: center;
   height: 100vh;
   background: url('img/main_image.jpg') top center / cover no-repeat;
}
@media screen and (max-width:920px) {
   .main-visual {
      justify-content: center;
   }
   
}   

h2 {
   margin: 0;
   font-size: 64px;
   font-weight: bold;
   color: #d2d2d2;
   font-family: 'Noto Serif JP', serif;
   background-color: rgba(35,40,50,0.8);
   padding-top: 30px;
   padding-bottom: 30px;
   padding-left: 50px;
   text-shadow: 4px 4px 10px rgba(0, 0, 0, .5);
}
@media screen and (min-width:1790px) {
   h2 {
      font-size: 90px;
      padding-top: 30px;
      padding-bottom: 30px;
      padding-left: 50px;
   }
   } 
@media screen and (max-width:920px) {
   h2 {
      font-size: 282%;
      padding-left: 20px;
   }
   
}   

h3{
   font-size: 64px;
   font-weight: bold;
   letter-spacing: 0.2em;
   margin-block-start: auto;
   margin-block-end: auto;
   font-family: 'Montserrat', sans-serif;
}
#content{
   width: 1199px;
   margin: 0 auto;
}

@media screen and (max-width:920px) {
   main #content {
      width: auto;
      margin: 0 20px;
   }
   
   #content img{
      width: 100%;
      height: auto;
   }
   h3{
      font-size: 250%;
   }
}   

.fadein {
	opacity: 0;
	transform: translateY(30px);
	transition-property: transform, opacity;
	transition-duration: 1.5s;
	transition-delay: 0s;
   z-index: 0;
}

.fadein.is-active {
	opacity: 1;
	transform: translateY(0);
}

/******   about   *****/

.about{
   display: flex;
   margin-top: 200px;
}
.about01{
   width: 60%;
}
.about1-1{
   width: auto;
   text-align: center;
   margin-bottom: 50px;
}
.about1-1 p{
   margin-block-start: 0em;
}

@media screen and (max-width:920px) {
   .about {
      display: block;
      text-align: center;
   }
   
   .about01 {
      width: auto;
   }

}   

/*****  DRINKMENU  *****/
.drinkmenu{
   margin-top: 200px;
}
.d_menu04{
   display: flex;
   justify-content: space-between;
}
.drinkmenu02 h3{
   text-align: center;
}
.drinkmenu02 p{
   text-align: center;
   margin-block-start: 0em;
}
.drinkmenu02 ul{
   display: inline;
   list-style: none;
   padding-left: 0rem;
}
.drinkmenu02 li{
   margin-left: 0px;
}
.d_ul{
   margin: 50px auto 0;
   width: 17em;
   display: block;
}
.drinkmenu03{
   width: 994px;
   margin: 0 auto;
}
.d_h4{
   font-size: 24px;
   font-weight: 400;
   margin-block-start: 80px;
   margin-block-end: 0em;
}
.drinkmenu03 p{
   margin-bottom: 40px;
}

@media screen and (max-width:920px) {
   .d_menu04 {
      display: block;
      text-align: center;
   }
   
   .drinkmenu03 {
      width: auto;
   }
   

}   

/*****  ACCESS  *****/

.access{
   margin-top: 200px;
   display: flex;
   justify-content: space-between;
}
.access01{
   display: block;
}
.access01 p{
   margin-block-start: 0em;
}
.access01 dl{
   margin-block-start: 50px;
}
.access02{
   display: block;
   width: 45%;
}
.access01 h3,.access01 p{
   text-align: center;
}
.access_dl{
   display: flex;
   justify-content: flex-start;
}
.access01 dt{
   width: 7em;
}

.iframe-wrapper{
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
}
.iframe-wrapper iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
@media screen and (max-width:920px) {
   .access {
      display: block;
      text-align: center;
   }
   
   .access01 dl {
      width: fit-content;
      margin: 0 auto;
   }
   
   .access02{
      width: auto;
   }
}   

/*****  new  *****/

.new{
   margin-top: 200px;
}
.new h3,.new p{
   text-align: center;
}
.new p{
   margin-block-start: 0em;
}
.new ul{
   margin-block-start: 50px;
   padding-left: 0rem;
}
.new_ul{
   margin: 0 auto;
   width: fit-content;
}
.new_ul a{
   margin-left: 3em;
}
.new_ul>ul>li{
   border-bottom: #5b5b5b solid 1px;
}

.new-readmore{
   padding: 10px 50px;
   background-color: #f7931e;
   box-shadow: #b06815 0 2px 0;
   border-radius: 20px;
   color: #232832;
   width: fit-content;
   margin: 0 auto;
}

/*****  contact  *****/

.contact{
   margin-top: 200px;
}
.contact h3,.contact .sub_title{
   text-align: center;
}
.contact p{
   margin-block-start: 0em;
   margin-block-end: 5opx;
}
input[type=text],input[type=email],textarea {
	padding: 5px 10px;
	font-size: 86%;
	border: none;
	border-radius: 3px;
	background: #ddf0ff;
}

textarea{
   width: -webkit-fill-available;
}

input[name=btn_confirm],
input[name=btn_submit],
input[name=btn_back] {
	margin-top: 10px;
	padding: 5px 20px;
	font-size: 100%;
	color: #fff;
	cursor: pointer;
	border: none;
	border-radius: 3px;
	box-shadow: 0 3px 0 #b06815;
	background: #f7931e;
}

input[name=btn_back] {
	margin-right: 20px;
	box-shadow: 0 3px 0 #777;
	background: #999;
}

form {
   margin: 0 auto;
   width: fit-content;
}

.contact_btn{
   background-color: #f7931e;
   border-radius: 3px;
   border: none;
   padding: 5px 10px;
   margin-top: 50px;

}

label {
	display: inline-block;
	margin-bottom: 10px;
	font-weight: bold;
	width: 250px;
   vertical-align: top;
}

.btn{
   display: block;
   margin: 0 auto;
}

.contact_p{
   padding-top: 50px;
}

.mw_wp_form_complete{
   padding-top: 50px;
}

@media screen and (max-width:920px) {
   input[type=text],input[type=email],textarea {
      width: 99%;
   }
   
}   

/*  footer  */

footer{
   margin-top: 200px;
   padding: 20px 4% 10px;
   background-color: #171a21;
   width: 100%;
}
footer ul{
   list-style: none;
}
.f_02{
   display: flex;
   align-items: center;
}
.f_01{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.f_03{
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 40%;
}
.copyright{
   text-align: center;
}

@media screen and (max-width:920px) {
   .f_01,.f_02,.f_03 {
      display: block;
      text-align: center;
   }
   .f_03{
      width: auto;
   }
   
   .f_03 ul{
      padding-left: 0rem;
   }

}   

/*****  single.php  *****/
.main_post{
   padding-top: 200px;
   width: 994px;
   margin: 0 auto;
}

/*****  archive.php  *****/
.blog-list__list-item{
   width: 994px;
   margin: 0 auto;
   padding-bottom: 100px;
}

.blog-list{
   margin-top: 200px;
}

/*  スマホナビゲーション  */
.sp-nav {
   display: none;
}

@media screen and (max-width: 920px) {
   .pc-nav {
      display: none;
   }
   .sp-nav {
      z-index: 1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      display: block;
      width: 100%;
      background: rgba(0, 0, 0, .8);
      opacity: 0;
      transform: translateY(-100%);
      transition: all .2s ease-in-out;
   }
   #hamburger {
      position: relative;
      display: block;
      width: 30px;
      height: 25px;
      margin: 0 0 0 auto;
   }
   #hamburger span {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background-color: #d2d2d2;
      transform: translateY(-50%);
   }
   #hamburger::before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #d2d2d2;
   }
   #hamburger::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 70%;
      height: 2px;
      background-color: #d2d2d2;
   }
   /*スマホメニュー*/
   .sp-nav ul {
      padding: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
   }
   .sp-nav li {
      margin: 0;
      padding: 0;
   }
   .sp-nav li span {
      font-size: 15px;
      color: #d2d2d2;
   }
   .sp-nav li a, .sp-nav li span {
      display: block;
      padding: 20px 0;
   }
   /*-閉じるアイコンー*/
   .sp-nav .close {
      position: relative;
      padding-left: 20px;
   }
   .sp-nav .close::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #d2d2d2;
      transform: rotate( 45deg );
   }
   .sp-nav .close::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 16px;
      height: 1px;
      background: #d2d2d2;
      transform: rotate( -45deg );
   }
   .toggle {
      transform: translateY( 0 );
      opacity: 1;
   }
   .main-visual {
      padding: 0 4%;
   }
   h2 {
      line-height: 1.6;
      text-align: center;
   }
}