@charset "utf-8";

/*
@media screen and (max-width: 599px){} phone-only
@media screen and (min-width: 600px){} tablet-portrait-up
@media screen and (min-width: 900px){} tablet-landscape-up
@media screen and (min-width: 1200px){} desktop-up
@media screen and (min-width: 1800px){} big-desktop-up
*/

/* Layout */

ul,ol{
	list-style: none;
}

img{
	vertical-align: top;
}

header{
	width: 100%;
	margin: 0;
	position: relative;
}

#fixed-header{
	width: 100%;
	height: 100px;
	margin: 0;
	margin-bottom: 0;
	padding: 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	z-index: 999;
	background: none;
}

@media screen and (max-width: 300px){
	#fixed-header{
		padding: 15px;
	}
}

.logo-mark{
	width: 160px;
	height: 39.71px;
}

@media screen and (max-width: 300px){
	.logo-mark{
		width: 141.01px;
		height: 35px;
	}
}

.header-right{
	width: 15%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
}

@media screen and (min-width: 1024px){
	.header-right{
		gap: 30px;
	}
}

/* nav */
#nav-toggle{
	height: 25px;
	cursor: pointer;
}

#nav-toggle span{
	width: 70px;
	height: 3px;
	right: 3%;
	display: block;
	background: var(--main-color);
	position: absolute;
	z-index: 999;
	transition: transform .5s ease-in-out, top .5s ease;
}

#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 15px; }

.open #nav-toggle span{ background: var(--sub-color); }

.open #nav-toggle span:nth-child(1){
	top: 10px;
}
.open #nav-toggle span:nth-child(2){
	top: 7.5px;
}

.open #nav-toggle span:nth-child(1){ transform: rotate(20deg); }
.open #nav-toggle span:nth-child(2){ transform: rotate(-20deg); }

.open #logo{
	position: relative;
	z-index: 99999;
}	

#nav-toggle div > span{
	position: relative;
	width: 45px;
}

#gloval-nav{
	width: 100%;
	height: auto;
	background-color:var(--main-color);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: 888;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	visibility: hidden;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity .5s ease, visibility .5s ease;
}

#gloval-nav a{
	display: inline-block;
	font-family: "fot-cezanne-pron";
	color: var(--sub-color);
	font-size: 120%;
	font-weight: 555;
	text-decoration: none;
	transition: .3s;
	-webkit-transform: scale(1);
	transform: scale(1);
	position: relative;
}

@media screen and (min-width: 1024px){
	#gloval-nav a{
		font-size: 24px;
	}
}

#gloval-nav a:hover{
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	color: #fff;
}

#gloval-nav a:hover::after{
	width: 100%;
}

#gloval-nav ul{
		width: 100%;
		height: auto;
		margin: 0 auto;
		text-align: center;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content:space-between; 
		gap: 30px;
}

@media screen and (min-width: 1024px){
	#gloval-nav ul{
		width: 65%;
		flex-direction: row;
		gap: 35px;
	}
}

@media screen and (max-width: 1024px) and (orientation: landscape){
	#gloval-nav ul{
		width: 65%;
		flex-direction: row;
		gap: 20px;
	}
}
	
#gloval-nav ul li {
		width: 100%;
		flex-grow: 1;
		opacity: 0;
		transform: translateY(25px);
		transition: transform .5s ease, opacity .5s ease;
}

@media screen and (min-width: 1024px){
	#gloval-nav ul li {
		width: 48%;
	}
}

#gloval-nav ul li:nth-child(2) { transition-delay: .1s; }
#gloval-nav ul li:nth-child(3) { transition-delay: .15s; }
#gloval-nav ul li:nth-child(4) { transition-delay: .2s; }
#gloval-nav ul li:nth-child(5) { transition-delay: .25s; }
#gloval-nav ul li:nth-child(6) { transition-delay: .3s; }
#gloval-nav ul li:nth-child(7) { transition-delay: .35s; }
#gloval-nav ul li:nth-child(8) { transition-delay: .4s; }
#gloval-nav ul li:nth-child(9) { transition-delay: .45s; }

.open { overflow: hidden; }
.open #gloval-nav {
	visibility: visible;
	opacity: 1;
}
.open #gloval-nav li {
	opacity: 1;
	transform: translateX(0);
	transition: transform 1s ease, opacity .9s ease;
}

/*  */

.instagram-mark{
	width: 35px;
	height: 35px;
}

#back{
	width: 100%;
	height: 100vh;
	position: relative;
}

#back img{
	width: 150px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
	z-index: 99;
}

@media screen and (min-width: 1024px){
	#back img{
		width: 240px;
	}
}

#slider01 div {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	height: 100vh;
	margin: 0;
}
#slider01 div.img01 {
	background-image: url(../img/top_sp_1.jpg);
}
#slider01 div.img02 {
	background-image: url(../img/top_sp_2.jpg?=ver4);
}
#slider01 div.img03 {
	background-image: url(../img/top_sp_3.jpg);
}
#slider01 div.img04 {
	background-image: url(../img/top_sp_4.jpg);
}
#slider01 div.img05 {
	background-image: url(../img/top_sp_5.jpg?=ver2);
}
#slider01 div.img06 {
	background-image: url(../img/top_sp_6.jpg);
}
@media screen and (min-width: 1024px){
	#slider01 div.img01 {
		background-image: url(../img/top1.jpg);
	}
	#slider01 div.img02 {
		background-image: url(../img/top2.jpg?=ver3);
	}
	#slider01 div.img03 {
		background-image: url(../img/top3.jpg);
	}
	#slider01 div.img04 {
		background-image: url(../img/top4.jpg);
	}
	#slider01 div.img05 {
		background-image: url(../img/top5.jpg?=ver2);
	}
	#slider01 div.img06 {
		background-image: url(../img/top6.jpg);
	}
}

/*  */

#tap{
	margin: 0 auto;
	bottom: 15px;
	right: 15px;
	color: var(--main-color);
	font-size: 14px;
	font-weight: 700;
	text-align: center;
	position: fixed;
	z-index: 3;
}

@media screen and (min-width: 1024px){
	#tap{
		bottom: 30px;
		right: 30px;
	}
}

#tag p{
	text-shadow: 2px 2px 12px rgba(0, 0, 0, .65);
}

#tap a{
	display: inline-block;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	background: var(--main-color);
	/* background: #EA524A; */
	text-align:	center;
	line-height: 90px;
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
	transition: .3s;
}

#tap a:hover{
	background-color: #EA524A;
	/* background: var(--main-color); */
}

#tap a:link,
#tap a:visited{
	color: var(--sub-color);
}
	
/*  */

main{
	width: 100%;
	margin: 0 auto;	
}

main section{
	width: 100%;
	margin: 0 auto; 
	text-align: center;
}

main section h1{
	margin-bottom: 60px;
}

@media screen and (min-width: 1024px){
	main section h1{
		letter-spacing: 1.5px;
	}
}

@media screen and (max-width: 932px) and (orientation: landscape){
	main section h1{
		letter-spacing: 1.5px;
	}
}

@media screen and (min-width: 600px){
	main section h1{
		letter-spacing: 1.5px;
	}
}

#about-warpper{
	width: 90%;
	max-width: 900px;
	margin: 100px auto;
}

#about-warpper h1{
	color: var(--main-color);
}

main section h2{
	margin: 0 auto 40px;
	font-size: 20px;
}

.text-detail{
	margin: 0 auto;
	margin-bottom: 80px;
}

.text-detail-2{
	margin: 0 auto;
	margin-bottom: 40px;
}


.text-detail p,.text-detail-2 p{
	margin-bottom: 10px;
	font-size: 14px;
	text-align: left;
}

@media screen and (min-width: 1024px){
	.text-detail p,.text-detail-2 p{
		font-size: 16px;
		text-align: center;
	}
}

.map{
	width: 580px;
	max-width: 100%;
	margin: 0 auto;
}

#cafe-warpper{
	padding: 120px 0;
	background-image: url(../img/ramen_back.jpg);
	background-repeat: repeat;
	background-position: left;
}

#cafe-warpper h1 img{
	width: 69.37px;
}

@media screen and (min-width: 1024px){
	#cafe-warpper h1 img{
		width: 100px;
	}
}

.with-bcolor{
	width: 90%;
	max-width: 900px;
	margin: 0 auto;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

#slider02,#slider03,#slider04{
	width: 100%;
	overflow: hidden;
}

#slider02 img,#slider03 img,#slider04 img{
	width: auto;
	height: 80vw;
	object-fit: cover;
}

@media screen and (min-width: 1024px){
	#slider02 img,#slider03 img,#slider04 img{
		height: 35vw;
	}
}

@media screen and (max-width: 932px) and (orientation: landscape){
	#slider02 img,#slider03 img,#slider04 img{
		height: 35vw;
	}
}/* スマホ 横のみ */

#slider02 .slick-slide,
#slider03 .slick-slide,
#slider04 .slick-slide{
	margin: 0 10px;/*スライド左右の余白調整*/
}

#ramen-warpper{
	padding: 120px 0;
	background-image: url(../img/nami.png?=ver2);
	background-position: top center;
	background-repeat: repeat-x;
	background-color: var(--background-main-color);
}

#ramen-warpper h1 img{
	width: 95px;
}

@media screen and (min-width: 1024px){
	#ramen-warpper h1 img{
		width: 136.94px;
	}
}

.menu-btn{
	margin-bottom: 80px;
	padding: 9px 70px;
	display: inline-block;
	text-decoration: none;
	vertical-align: middle;
	text-align: center;
	border-radius: 100vw;
	outline: none;
	color: #fff !important;
	background: #48AAD8;
}

.menu-btn:hover{
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: shadmenu 1.5s infinite;
	color: #fff;
}

@keyframes shadmenu{
	0% {box-shadow: 0 0 0 0 #48AAD8;}
	70% {box-shadow: 0 0 0 10px rgb(72 170 216 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(72 170 216 / 0%);}
}

.menu-test,
.Official-hp{
	font-size: 1.8rem;
	font-weight: 700;
}

/*  */

#marche-warpper{
	width: 100%;
	padding: 120px 0;
}

#marche-warpper h1 img{
	width: 113.44px;
}

@media screen and (min-width: 1024px){
	#marche-warpper h1 img{
		width: 163.52px;
	}
}

.under{
	background:linear-gradient(transparent 50%, var(--background-main-color) 0%);
}

#factory-warpper{
	padding: 120px 0;
	background:var(--background-sub-color);
}

#factory-warpper ul{
	width: 100%;
	max-width: 1040px;
	margin-bottom: 40px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 10px;
}

@media screen and (min-width: 1024px){
	#factory-warpper ul{
		gap: 20px;
	}
}

#factory-warpper h1 img{
	width: 200px;
}

@media screen and (min-width: 1024px){
	#factory-warpper h1 img{
		width: 250px;
	}
}

@media screen and (max-width: 932px) and (orientation: landscape){
	#factory-warpper h1 img{
		width: 226px;
	}
}

#factory-warpper .text-detail p{
	text-align: center;
}

@media screen and (max-width: 599px){
	#factory-warpper .text-detail p{
		text-align: left;
	}
} 

.factory-btn{
	/*アニメーションの起点とするためrelativeを指定*/
	position: relative;
	overflow: hidden;
	/*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	border: 1.5px solid #555;/* ボーダーの色と太さ */
	padding: 9px 90px;
	text-align: center;
	outline: none;
	border-radius: 100vw;
	/*アニメーションの指定*/   
	transition: ease .2s;
}

.factory-btn span{
	position: relative;
	z-index: 2;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: var(--key-font-color);
}

.factory-btn:hover span{
	color: #fff;
}

.bgskew::before {
	content: '';
	/*絶対配置で位置を指定*/
	position: absolute;
	top: 0;
	left: -130%;
	/*色や形状*/
	background: #333;
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}

/*hoverした時のアニメーション*/
.bgskew:hover::before {
	animation: skewanime .5s forwards;/*アニメーションの名前と速度を定義*/
}

@keyframes skewanime {
	100% {
		left:-10%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}
/*  */

#global-footer{
	padding: 100px 0;
	border-top: solid 1px var(--background-main-color);
	background:var(--background-main-color);
}

.footer-inner{
	width: 90%;
	max-width: 900px;
	margin:  0 auto;
	font-size: 14px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: left;
	gap: 60px;
}

@media screen and (min-width: 1024px){
	.footer-inner{
		flex-direction: row;
		align-items: center;
	}
}

@media screen and (max-width: 932px) and (orientation: landscape){
	.footer-inner{
		flex-direction: row;
		align-items: center;
	}
}

@media screen and (min-width: 600px){
	.footer-inner{
		flex-direction: row;
		align-items: center;
		gap: 40px;
	}
} 

.footer-inner li{
	margin-bottom: 4px;
}

.footer-logo{
	text-align: center;
}

.footer-inner ul:nth-child(2) li:nth-child(4){
	margin-bottom: 10px;
}

.footer-inner ul:last-child{
	padding: 10px 15px;
	border-top: 1px solid var(--line-color);
	border-bottom:  1px solid var(--line-color);
}

.footer-inner li img{
	width: 125px;
}

.smallbox{
	line-height: 1.2em;
}

/*  */

.map-btn a{
	display: inline-block;
	background: #333;
	color: #fff;
	padding: 4px 20px;
	text-decoration: none;
	outline: none;
	transition:.3s ease-out;
}

.map-btn a:hover{
	background: var(--main-color);
	border-top-left-radius: 10px;	
}

/*  */

.contact-wrap #back{
	width: 100%;
	height: 100vh;
	background-image: url(../img/mainimg_contact_02.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.contact-wrap #back img{
	width: 150px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	position: absolute;
}

@media screen and (min-width: 1024px){
	.contact-wrap #back img{
		width: 260px;
	}
}

.contact-warpper{
	width: 90%;
	max-width: 600px;
	padding: 120px 0 0;
	font-size: 16px;
}

.contact-warpper h1{
	color: var(--main-color);
}

.contact-warpper h2{
	margin: 0 auto 10px;
}

.contact-wrap aside{
	width: 90%;
	max-width: 600px;
	margin: 0 auto;
}

/*  */

.thank-wrap main{
	width: 90%;
	max-width: 600px;
	padding: 200px 0;
}

.thank-wrap main p{
	margin-bottom: 15px;
	font-size: 14px;
}

/*  */

#ffffish{
	width: 90%;
	position: fixed;
	z-index: 5;
	right: 50px;
	top: 50px;
}

@keyframes move{
	from{
		offset-distance: 0%;
		/* visibility: visible; */
	}
	to{
		offset-distance: 100%;
	}
}

@keyframes float {
	from {
		transform: translateY(10%);
	}
	to {
		transform: translateY(-10%);
	}
}

#offsetElement{
	width: 260px;
	height: 100px;
	background-image: url(../img/fish_sp.png);
	background-repeat: no-repeat;
	offset-path: path("M523.264 378.748C509.822 346.568 494.342 295.242 461.347 261.839C419.861 219.841 390.061 18.2438 208.79 60.6081C27.5193 102.973 25.0752 256.543 27.5193 310.314C29.9634 364.084 78.4381 565.315 245.859 659.005C413.28 752.695 538.336 846.386 592.106 752.695C645.876 659.005 654.838 395.45 609.215 310.314C563.592 225.177 322.441 -140.623 49.9236 60.6081C-222.593 261.839 739.305 984.713 700.054 713.183C670.317 507.471 592.106 579.979 523.264 378.748Z");
	offset-distance: 0%;
	transition: offset-distance 2s ease-in-out;
	animation: move 35000ms linear infinite;
	/* animation-delay: 7s; */
	animation-timing-function: ease, step-start, cubic-bezier(0.42, 0, 0.58, 1.0);
	animation-play-state: running;
	offset-rotate: reverse;
}
	
@media screen and (min-width: 768px){
	#offsetElement{
		background-image: url(../img/fish.png?=ver2);
		offset-path: path("M1201 352.579C1142.92 293.401 1091.65 221.415 1021.51 176.502C964.489 139.994 889.692 133.592 825.792 130.798C753.702 127.647 680.416 132.44 611.038 148.415C535.002 165.923 473.588 202.104 411.343 247.335C352.258 290.269 293.998 334.714 239.338 383.317C199.591 418.658 158.724 457.283 131.022 503.93C116.122 529.021 114.988 557.032 110.651 585.827C106.443 613.766 99.6264 642.234 105.01 671.092C112.866 713.203 133.851 746.181 168.551 771.3C212.277 802.952 263.195 824.446 291.848 873.809C315.133 913.923 303.844 957.395 299.933 999.311C292.457 1079.45 317.626 1161.11 395.882 1198.09C479.515 1237.61 566.916 1206.98 652.495 1208.85C677.393 1209.4 701.675 1212.58 725.941 1206.61C777.731 1193.87 821.242 1155.55 855.944 1116.98C933.249 1031.06 970.695 917.737 1019.26 813.364C1037.81 773.491 1066.44 746.144 1090.32 709.85C1138.61 636.487 1174.08 576.471 1191.04 483.616C1210.96 374.556 1211.93 284.47 1132.47 192.596C1042.55 88.6295 920.608 104.876 807.489 111.355C755.214 114.349 730.51 120.674 681.631 99.7815C656.678 89.1161 631.101 63.9818 610.249 46.7641C578.312 20.3933 552.432 2.73256 511.032 1.58992C433.834 -0.540797 356.035 35.7686 291.417 71.147C220.972 109.716 150.805 156.47 92.1541 211.751C33.7485 266.801 0.848527 334.243 1.96072 418.927C2.88276 489.132 44.1222 564.446 93.4316 614.83C132.585 654.837 182.139 682.024 225.386 716.656C280.751 760.992 325.02 818.023 370.786 872.056C428.577 940.285 487.162 1000.88 569.909 1034.86C640.263 1063.76 710.059 1066.05 781.559 1054.14C818.984 1047.9 860.985 1044.17 895.444 1028.24C936.374 1009.31 969.035 974.482 1000.89 943.504C1017.68 927.174 1035.18 911.457 1051.44 894.566C1079.85 865.052 1103.58 831.941 1128.41 799.315C1153.71 766.079 1196.88 754.298 1216.25 714.168C1229.91 685.877 1225.01 640.015 1220.31 609.349C1213.2 562.942 1193.26 522.228 1197.48 474.839C1200.49 440.947 1222.35 423.384 1219.19 388.767C1217.76 373.134 1206.64 358.411 1201 352.579Z");
	}
}

/* form */

#checkpolicy{
	margin-top: 50px;
	text-align: center;
}

#checkpolicy a span{
	border-bottom: 1px solid #000;
}

.lastbox{
	margin-top: 50px;
	text-align: center;
}

.form-group input[type="submit"]{
	padding: 10px 100px;
	font-size: 16px;
	color: #000;
	background-color: #BDE9FB;
	border-radius: 0;
}

.form-imputarea input[type="text"], .form-imputarea input[type="email"], .form-imputarea input[type="date"], .form-imputarea input[type="tel"], .form-imputarea textarea, .form-imputarea select{
	border-radius: 0;
}

/* 2024-10-01 */

.recruiting-box{
	width: 90%;
	max-width: 750px;
	padding: 120px 0 0;
	font-size: 16px;
}

/* .recruiting-box h1{
	color: var(--main-color);
} */

.recruiting-box h2{
	margin-bottom: 60px;
}

.recruiting-box ul{
	margin-bottom: 40px;
	text-align: left;
}

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

.recruiting-box ul li span{
	padding: 2px 4px;
	font-weight: 700;
	color: #fff;
	background-color: var(--main-color);
}

.form-wrap {
	width: 100%;
	margin: 50px auto;
	padding: 5% 0 5%;
	text-align: left;
	font-size: var(--form-common-fontsize);
}