@charset "utf-8";
/* CSS Document */
body{
	color:#696969;
}

a{
	text-decoration:none;
}

a,a:hover,a:visited{
    color: inherit;
}


li{
	list-style:none;
}

h1,h2{
	font-weight:500;
}
.main h4{
	padding:0.2rem 1rem;
	margin:10px 0;
}

section{
	margin-bottom:40px;
}

.annotation{
	font-size: 14px;
	padding-left: 1em;
    text-indent: -1em;
	margin-bottom:20px;
	font-weight:normal;
}

.linethrough{
	text-decoration:line-through;
}

/* ヘッダーナビ */
.logo{
	width:100%;
	margin:0
}
.logo img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
.logo{
	width:60%;
	margin:10px auto;
}
.logo img{
	width:100%;
}
}
.logo p{
	text-align:center;
	font-size: 2em;
}
.recruit_nav{
	width:100%;
}
.recruit_nav ul{
	width:100%;
}

nav {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav ul {
    width: 100%;
    position: relative;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    z-index: 99;
}

nav ul li {
    padding: 0 10px;
}

.hamburger {
        display: none; 
        font-size: 30px; 
        cursor: pointer;
        position: relative; 
        width: 30px; /* アイコンの幅 */
        height: 30px; /* アイコンの高さ */
}

.icon-bar {
        position: absolute;
        top: 0;
        left: 0;
        line-height: 1; /* アイコンの垂直位置調整 */
}
    
.hidden {
        display: none; /* 初期状態ではクローズアイコンを非表示 */
}
.hamburger.active .bar1 {
        display: none; /* ハンバーガーアイコンを非表示 */
}

.hamburger.active .bar2 {
        display: block; /* クローズアイコンを表示 */
}
/* Media query for responsive design */
@media (max-width: 768px) {
        nav {
             /* nav が持っていた justify-content: space-between; は不要になります */
             width: 100%;
             display: flex;
             align-items: center;
             /* 💡 追加: メニューが展開されていない場合の nav ul を画面外に出す */
             justify-content: flex-end; 
        }
        nav ul {
            display: none; /* Hide the menu initially */
            flex-direction: column; /* Stack items vertically */
            background-color: white; /* Background for dropdown */
            position: absolute; /* Position as needed */
            top: 80px; /* Position below the hamburger */
            width: 100%; /* Full width */
            left: 0;
        }
        
        .hamburger {
            display: block; 
            font-size: 30px; 
            cursor: pointer;
            position: fixed; /* 画面に固定 */
            top: 15px; /* 上端から15px */
            right: 15px; /* 右端から15px */
            z-index: 100; /* メニュー (z-index: 99) より上に表示 */
            /* ... その他のスタイル ... */
        }
		nav ul {
            display: none; 
            flex-direction: column; 
            background-color: white; 
            position: fixed; /* 固定に変更 */
            top: 0; /* 画面上端から */
            width: 100%; 
            height: 100vh; /* 画面全体を覆う */
            left: 0;
        }
        nav ul.show {
            display: flex; 
            /* メニュー表示時の調整: 画面全体を覆い、メニュー項目を上部に寄せるなど */
            justify-content: flex-start;
            padding-top: 80px; /* アイコンのスペースを空ける */
        }
        
        /* 💡 追記: メニュー展開時もハンバーガーアイコンは常に表示されるように */
        .hamburger.active {
            display: block; 
        }
    }

/* Show the menu when toggled */
.show {
    display: flex; /* Show the menu */
}


/* index */
.main{
	width:100%;
}

/*.mainvisual{
	background-image:url("../image/main_pc.jpg");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:0 0;
	position: relative;
	height:400px;
	margin-bottom:300px;
}

@media screen and (max-width:767px) {
	.mainvisual{
		height:300px;
	}
} */
.mainvisual_text{
	top:100%;
	font-family: "Hiragino Mincho Pro", "Yu Mincho", "MORISAWA Mincho", serif;
	width:100%;
	text-align:center;
	left:0px;
}
.mainvisual_img{
	width:100%;
}
.mainvisual_img img{
	width:100%;
}
h1{

	font-size:28px;
	text-align:center;
	margin:1em 0;
}

h1 img{
	width:100%;
}

.concept,.menu_contents{
	width:90%;
	margin:auto;
}
.concept h3{
	font-size:18px;
	margin-bottom:10px;
	text-align:center;
}
.text{
	margin:20px auto 40px;
	width:90%;
}

.text p{
	margin-bottom:10px;
}
.text ol {
  list-style: none;
  counter-reset: number;
}
.text li {
  position: relative;
  padding-left: 1.5em;
  padding-bottom:10px;
}
.text li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  top: 5px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 10px;
  text-align: center;
  line-height: 1.2;
}
.bg_gray{
	background-color:#f5f5f5;
	padding:14px 5px;
}

.concept img ,.text img{
	width:100%;
}

.review {
	display: block;
		}

.review p {
	width: 100%;
    }

.reasons, .notes, .flow,.reservationflow,.commitment,.yokuaru{
	text-align:center;
	font-size:20px;
	margin-bottom:16px;
	border-bottom:solid 1px #c0c0c0;
	
}

.points{
	font-family: serif;
	font-size:34px;
	font-weight:bold;
}

.reasons_list dt{
	font-size:18px;
	font-weight:bold;
	text-align:center;
	line-height:1.2;
	margin-bottom:10px;
}
.reasons_list .num,.flow_list .num,.reservation_list .num{
	color:#c0c0c0;
	font-family: serif;
	font-style: italic;
	font-size:34px;
	margin-right:10px;
}

.reasons_list dd{
	margin-bottom:16px;
}

.flow_list dt,.reservation_list dt{
	font-size:18px;
	font-weight:bold;
	line-height:1.2;
	margin:20px 0 10px;
}
.flow_list dd,.reservation_list dd{
	margin-bottom:10px;
}

.links{
	width:90%;
	margin:0 auto 50px;;
	font-weight:bold;
	text-align:center;
	display:flex;
	justify-content:space-around;
	flex-wrap:wrap;
}

.links div{
	width:48%;
	margin-bottom:20px;
}

.links div a{
	display:block;
	width:100%;
	background-color:#f5f5f5;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	padding:20px 0;
}

/* menu */
.menu_contents h3{
	color:#c0c0c0;
	padding: 1rem;
 	border-bottom: 1px solid #c0c0c0;
	margin:10px 0;
}
.menu_mainvisual{
	height:40vh;
	background-image:url("../../image/menu.jpg");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:0 0;
	position: relative;
}
.menu_mainvisual h2{
	text-shadow: 2px 2px 10px #fff ,
	-2px 2px 10px #fff ,
	2px -2px 10px #fff ,
	-2px -2px 10px #fff;
	position: absolute;
	top:50%;
	width:100%;
	text-align:center;
}
.menu_contents dl,.menu_contents ul{
	width:80%;
	margin:auto;
}
.menu_contents dt,.menu_contents ul li{
	width:100%;
	display:flex;
}
.menu_contents ul li{
	margin-bottom:5px;
}
.menu_contents dd{
	margin:10px 0 25px 0;
}
.menu_contents .menuitem{
	width:75%;
}
.menu_contents .price{
	width:25%;
	text-align:right;
}
.fullorder_ex{
	width:80%;
	margin:20px auto;
	padding:10px;
	border:1px solid #c0c0c0;
}
.full_150{
	font-weight:bold;
}
.fullorder_ex p{
	margin-bottom:10px;
	text-align:center;
}
.plus{
	width:100%;
	text-align:center;
}

/* staff */
.staff_mainvisual h2{
	text-shadow: 2px 2px 10px #fff ,
	-2px 2px 10px #fff ,
	2px -2px 10px #fff ,
	-2px -2px 10px #fff;
	position: absolute;
	top:50%;
	width:100%;
	text-align:center;
}

.staff_mainvisual{
	height:40vh;
	background-image:url("../../image/staff.jpg");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:0 0;
	position: relative;
}
.staff_contents{
	width:90%;
	margin:auto;
}
.staff_contents h3{
	text-align:center;
	margin:20px 0;
}
.staff_contents h4{
	font-size:18px;
	color: #c0c0c0;
    padding: 1rem;
    border-left: 6px double #c0c0c0;
    margin-bottom: 10px;
}
.staff_contents img{
	width:100%;
}
.staff_contents .insta{
	width:40px;
	padding:10px;
	margin:0 auto 10px;
}
.staffimg{
	width:80%;
	margin:auto;
}
.ename{
	font-size:30px;
}
.names{
	border-top:solid 1px #c0c0c0;
	padding-top:10px;
	font-weight:normal;
}

.reservation_list dd img{
	padding:10px 20px;
}

/* product */
.product_mainvisual{
	height:40vh;
	background-image:url("../../image/product.jpg");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:0 0;
	position: relative;
}
.product_mainvisual h2{
	text-shadow: 2px 2px 10px #fff ,
	-2px 2px 10px #fff ,
	2px -2px 10px #fff ,
	-2px -2px 10px #fff;
	position: absolute;
	top:50%;
	width:100%;
	text-align:center;
}
.product_contents{
	width:90%;
	margin:auto;
}
.product_contents h3{
	color:#c0c0c0;
	padding: 1rem;
 	border-bottom: 1px solid #c0c0c0;
	margin:10px 0;
}
.product_contents dl{
	width:90%;
	margin:auto;
}
.product_contents dt{
	width:100%;
	display:flex;
}
.product_contents dd{
	margin:10px 0 15px 0;
}
.product_contents .menuitem{
	width:55%;
}
.product_contents .price{
	width:45%;
	text-align:right;
}
.product_contents img{
	width:100%;
}
.product_contents .itemimg{
	margin-bottom:50px;
}

/* recruit */
.recruit_main{
	width:100%;
	top:0;
}

.recruit_main h3{
	color:#c0c0c0;
	padding: 1rem;
 	border-left: 6px double #c0c0c0;
	margin-bottom:10px;
}

.recruit_mainvisual{
	height:90vh;
	background-image:url("../../image/recruit_sp.jpg");
	background-repeat:no-repeat;
	background-size:cover;
	background-position:0 0;
	position: relative;
}
.recruit_mainvisual h1{
	text-shadow:none;
	top: 40%;
}
.recruit_mainvisual h1 img{
	width:200px;
}

.message .insta{
	width:40px;
	padding:10px;
	margin:0 auto 10px;
}
.message .insta img{
	width:100%;
}
.ownerimage{
	width:80%;
	margin:auto;
}
.ownerimage img{
	width:100%;
}
.ownername{
	text-align:center;
}
.message,.recruit_flow, .dream,.interiorview,.merit,.voice,.work,.workhours,.salary,.welfare,.holiday,.training,.dailyflow,.persona,.qanda{
	width:90%;
	margin:auto;
}

.message p,.recruit_flow p,.dream p,.interiorview p,.merit p,.voice p,.work p,.workhours p,.salary p,.welfare p,.holiday p,.training p,.dailyflow p,.persona p,.qanda p{
	padding:0 10px;
	margin-bottom: 20px;
}
.message h2{
	text-align:center;
	margin-bottom:20px;
}
.message ul,.merit ul{
	padding:12px;
	border:solid #696969 1px;
	font-size:14px;
	margin-bottom: 20px;
}

.message ul li,.merit ul li,.worklist li,.salary ul li,.welfare ul li,.holidaylist li,.persona li{
	list-style-type:circle;
	list-style-position:inside;
	padding-left: 1.2em;
	text-indent: -1.4em;
	margin-bottom: 5px;
}

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

.recruit_flow h3{
	border:none;
	text-align:center;
}
.about_mainvisual{
	height:40vh;
	background-image:url("../../image/about.jpg");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:0 0;
	position: relative;
}

.about_mainvisual h2,.jobdescription_mainvisual h2,.question_mainvisual h2{
	position: absolute;
	bottom:50px;
	left:50px;
}

.content_link{
	padding:20px;
	width:320px;
	margin:auto;
	border:solid #696969 1px;
}
.content_link li {
    display: flex;
    align-items: center;
    gap: 0 10px;
    position: relative;
    padding: .3em .3em .3em 1.5em;
}

.content_link li::before,
.content_link li::after {
    position: absolute;
    content: '';
}

.content_link li::before {
    left: 0;
    width: 1.2em;
    height: 1.2em;
    border-radius: 50%;
    background-color: #696969;
}

.content_link li::after {
    left: .6em;
    transform: translateX(-75%) rotate(-45deg);
    width: .3em;
    height: .3em;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
}

.jobdescription_mainvisual{
	height:40vh;
	background-image:url("../../image/jobdescription.jpg");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:0 0;
	position: relative;
}

.workhours h4,.salary h4,.welfare h4,.training h4,.dailyflow h4,.persona h4{
	background-color:#696969;
	color:#fff;
	padding:5px 0 5px 10px;
	margin-bottom:20px;
}

.merit h4 {
	margin-bottom:20px;
	border-bottom:solid 1px;
}
.salary h5,.welfare h5,.training h5,.dailyflow h5,.persona h5{
	background-color:#f5f5f5;
	padding:5px 0 5px 10px;
	font-size:16px;
}
.table{
	margin:20px auto;
	padding:10px;
	width:280px;
	border:solid 1px #696969;
	text-indent:0;
	text-align:center;
}
.table p{
	margin-bottom:5px;
}

.welfare h5,.training h5,.persona h5{
	margin-bottom:20px;
}

.salary ul,.welfare ul,.holidaylist,.persona ul{
	padding:12px;
	margin-bottom: 20px;
	font-weight:bold;
}

.about,.jobdescription,.qa,.top{
	width:48%;
	background-color:#f5f5f5;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	padding:20px 0;
}
.qa{
	margin:auto;
}

.worklist{
	font-size: 16px;
	font-weight:bold;
	padding:20px 12px;
}
.workhours dl{
	display:flex;
	flex-wrap: wrap;
	width: 90%;
	margin:auto;
}

.workhours dt {
  width: 25%;
  margin-bottom: 10px;
}

.workhours dd {
  width: 75%;
  margin-bottom: 10px;
}

.example div{
	width:90%;
	margin:20px auto;
}

.example p{
	border-bottom:solid 1px #696969;
}

.example dl{
	display:flex;
	flex-wrap: wrap;
	width: 100%;
}

.example dt {
  width: 35%;
  margin-bottom: 10px;
}

.example dd {
  width: 65%;
  margin-bottom: 10px;
}

.question_mainvisual{
	height:40vh;
	background-image:url("../../image/qa.jpg");
	background-color:rgba(255,255,255,0.5);
	background-blend-mode:lighten;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:0 0;
	position: relative;
}
.question{
	background-color:#f5f5f5;
	padding:5px 0 5px 10px;
	font-size:16px;
	font-weight:bold;
}
.answer{
	padding-left:20px;
}
.point{
	padding:20px 10px 20px 40px;
	text-indent: -1em;
	border-top:solid 1px #696969;
	border-bottom:solid 1px #696969;
	margin-bottom:20px;
}
.small{
	font-weight:normal;
	font-size:14px;
}
.bold{
	font-weight:bold;
}
.click{
	font-weight:bold;
	color:#66cdaa;
	text-decoration:underline;
}
/*フッター*/
.line{
	font-weight:bold;
	font-size:20px;
	width:100%;
	text-align:center;
}
.line img{
	width:300px;
}
.slash {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.slash::before,
.slash::after {
  content: "";
  width: 25px;
  height: 1px;
  background-color: #696969;
  margin: 0px 4px 4px;
}
.slash::before {
  transform: rotate(45deg);
}
.slash::after {
  transform: rotate(-45deg);
}

.name{
	width:90%;
	margin:20px auto;
	font-weight:bold;
	text-align:center;
	border-bottom:solid 1px #696969;
}
.info .insta{
	width:40px;
	padding:10px;
	margin:auto;
}
.info .insta img{
	width:100%;
}
.access{
	width:70%;
	margin:auto;
	font-size:14px;
}
@media screen and (min-width:1200px) {
	.mainvisual_text{
		top:40%;
	}
}
@media screen and (min-width:900px) {
	.mainvisual{
		display:flex;
		flex-direction: row-reverse;
	}
	.mainvisual_img{
		width:70%;
	}
	.mainvisual_img img{
		width:100%;
	}
	.mainvisual div{
		width:50%;
	}
	.mainvisual_text{
		position: absolute;
		top:30%;
		text-align:start;
		left:20px;
	}
	h1{
	font-size:30px;
	text-align:start;
	left:10px;
	}
}
@media screen and (min-width:768px) {
	/* top */

		/*
	background-size:cover;
	height:70vh;
	background-image:url("../image/main_pc.jpg");
	background-position:right center;
	background-size:70% auto;
	margin-bottom:0px;
	}*/

	.review {
    display: flex;
    flex-wrap: wrap;  /* 子要素を折り返す */
    justify-content: space-between;  /* 要素のスペースを均等に分ける */
	}

	.review p {
    width: calc(50% - 10px);  /* 各<p>要素の幅を設定（マージンを考慮） */
    margin: 5px;  /* 上下左右にマージンを設定 */
	}
	/* menu */
	.menu_mainvisual{
	height:80vh;
	}
	
	/* staff */
	.staff_mainvisual{
	height:80vh;
	}
	
	/* product */
	.product_mainvisual{
	height:80vh;
	}
	
	/* recruit */
	.message,.recruit_flow, .dream,.interiorview,.merit,.voice,.work,.workhours,.salary,.welfare,.holiday,.training,.dailyflow,.persona,.qanda,.links{
		width:750px;
	}		
	
	.about_mainvisual,.jobdescription_mainvisual,.question_mainvisual{
		height:90vh;
		
	}
	.about_mainvisual h2,.jobdescription_mainvisual h2,.question_mainvisual h2{
	padding:0 10px;
	background-color: rgba(255,255,255,0.5);
	bottom:45vh;
	left:45vw;
	}
	/* common */
	.logo{
	}
	.access{
		width:300px;
	}
	.concept,.menu_contents,.staff_contents,.product_contents{
		width:750px;
	}
}


footer{
	text-align:center;
}
.cta{
	position:fixed;
	right:10px;
	bottom:20px;
	width:100px;
	z-index: 10;
	
}
.cta img{
	width:100%;
}