@charset "utf-8";
/* CSS Document */

/*リンクの下線を非表示*/

/*
a:link{
	color :;
	text-decoration : none;
}

a:visited{
	color : ;
	text-decoration : none;
}


a:active{
	color : #0e9101;
	text-decoration : underline;
}
*/








/* ----------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
    common＋
★★　スマホ/sm(～767px)　★★

(320px以下。モバイルファースト。メディアクエリ使わないで制作。これがベースになり、これ以外のスクリーンサイズをメディアクエリにする。)
( ※htmlで、ロゴ(h1)とタイトル(h2)(グロナビ前の領域)を<hgroup>で内包しておく。グロナビは<nav>。)

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




/* -------------------------------------------------------
　　　　　　　　　　 @group Reset(リセット)
---------------------------------------------------------- */
/*すべての要素のmarginとpaddingを削除。*/
*{
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
	/*
	color :;
	*/
}

/*hover時、文字色薄く*/
a:hover{
  opacity:0.5;
}

/*ビュレット「・」を非表示*/
ul, ol{ list-style: none;}

img {
	padding: 0;
	/*画像の枠線を非表示*/
	border : none;
	/*img要素のディセンダーを削除。場合によってはtopへ(上付き)。*/
	vertical-align: middle;
}

html{
/*CSSのみでスムーズスクロール 2020年4月23日、GoogleChrome(バージョン: 81.0.4044.122)にてscroll-behaviorが無効になっているバグが発生中*/
  scroll-behavior: smooth;
}



/* -------------------------------------------------------
========================= /@end group Reset
---------------------------------------------------------- */











/* -------------------------------------------------------
　　　　　　　　　　@group Fluid-img(フルードイメージ)
---------------------------------------------------------- */
/*フルードイメージ*/
img{max-width:100%;}
/* -------------------------------------------------------
========================= /@end　group Fluid-img
---------------------------------------------------------- */










/* ====================================================================================

								   ＜ベース>スマホ(～767px)
　　　　　　　　　　   	    	         @group html
　　　　　　　　　　　　	             (メディアクエリなし)

======================================================================================= */

/*1---レスポンシブタイプセッティングの指定_p99*/


html{
	/* 日本語のfont-familyへの対応(1.ヒラギノ角ゴシック 2.遊ゴシック　3.メイリオ_p120) */
    font-family: "Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo",sans-serif;
	/*スマホのhtnlのfont-sizeは12px_p98 12pxを%に変換(12px/16px × 100＝75) つまり本文が12pxの指定。見出しレベルは下記に指定*/
	font-size: 75%;
	line-height: 1.5;
}

/* ------------------------------------------------------------------------------------
  =================================== /@end html_スマホ(～767px)
---------------------------------------------------------------------------------------- */










/* --------------------------------------------------------------
　　　　　　               　@group Heading
                   (つまり本文以外。見出しレベルを指定)
----------------------------------------------------------------- */
/*1---各見出しレベルには、margin-bottomで24pxつける。ベースグリッド(1行の高さ24px)を基準にし一定の感覚で要素が配置されるようにする。ベースグリッドに沿って規則正しくレイアウトする考え方をバーティカルリズムという_p47)*/
/*2---h1とh2の「要素の高さ」を2行分の高さ(48px)に。h3～h6は1行分の高さ(24px)に。_p46   (※倍率(line-height)は、要素の高さ(〇px)からfont-sizeで割る。)*/
/*3---レスポンシブタイプセッティング②*/


/*<hgroup>で内包する。<h1>はロゴ。*/
h1{
	/*h1=48px・要素の高さ=48px / 16px =3rem*/
	font-size: 3rem;
	/*48px(要素の高さ)/48px(font-size)*/
	line-height: 1;
	/*24px/16px =1.5rem*/
	margin-bottom: 1.5rem;
}

/*<hgroup>で内包する。<h2>はロゴ横のタイトル。*/
h2{
	/*h2=36px・要素の高さ=48px / 36px/16px=2.25rem*/
	font-size: 2.25rem;
	/*48px/36px=1.333333…*/
	line-height: 1.3333;
	/*24px/16px=1.5rem*/
	margin-ottom:1.5rem;
}

/*本文と差別化した大きさで使う最後の見出しレベル。lin-heightは徐々に狭めてる。*/
h3{
	/*h3=24px・要素の高さ=24px 24px/16px=1.5rem*/
	font-size: 1.5rem;
	/*24px/24px*/
	line-height: 1;
	/*24px/16px=1.5rem*/
	margin-bottom:1.5rem;
}

/*<hgroup>に内包している、つまりヘッダーの中のh2だけ(それ以外の<h2>には上の設定36pxが適用。ヘッダーの中の文字は小さいということで16px)と、h4～h6をfont-size16pxに。見出しレベルだけど、見出しの大きさで使うことない見出しレベルなので本文と同じline-height。*/
hgroup h2,h4,h5,h6{
	/*h4,h5,h5=16px・要素の高さ=24px 16px/16px=1rem*/
	font-size:1rem;
	/*24px/16*/
	line-height:1.5;
	/*24px/16px=1.5rem*/
	margin-bottom: 1.5rem;
}

p{
	font-size:1rem;
}

/* -------------------------------------------------------
========================= /@end group Heading
---------------------------------------------------------- */















/* -------------------------------------------------------
　　　　　　　　　　　　@group Header
---------------------------------------------------------- */
#header{
	display: none;
}

.sp_header_logo{
	padding-top: 13px;
}

header{
	/*テキスト中央揃えに*/
	text-align: center;
	
	/*ヘッダーの背景色*/
	background-color: #FF3049;
	display: block;
	width:100%;
	height: 80px;
}
	

/*ヘッダー内ロゴ*/
.header_logo img{
	width: 160px;
}

/*pcのグロナビを非表示*/
.pc_header nav{
	display: none;
}

/*PCのみある右側の画像を非表示*/
.pc_right_logo img{
	display: none;
}



/*ハンバーガーメニュー*/
.menu-btn {
    position: absolute;/*default fixed　ここをabsoluteにするとスクロールしてもナビ位置固定*/
    top: 30px;/*メニューアイコンの上の余白(位置調整)*/
    right: 10px;
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #FF3049;/*ハンバーガーボタン背景*/
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}


/*3本線*/
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

/*チェックボックスを隠す*/
#menu-btn-check {
    display: none;
}

/*メニュー部分の装飾*/
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;/*default fixed*/
    top: 0;
    left: 0;
    z-index: 80;
	/*メニューの背景ベタ色*/
    background-color: #FF3049;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

/*メニューを画面の外へ*/
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
	/*画面の外に出た後の背景色ベタ*/
    background-color: #FF3049;
    transition: all 0.5s;/*アニメーション設定*/
}

/*ボタンがタップされたとき、すなわちチェックボックスにチェックがついたとき、メニューが画面に表示されるように*/
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}





	/*sp_みるハコ画像の上に、リンクボタン*/
	.sp_miruhako_a {
		position: relative;
	}
	
	
	.sp_miruhako_a span img{
		position: absolute;
		width:80%;
		height: auto;
		text-align: center;
		right: 10%;
		bottom: 30px;
	}


/*スライド部分、プレースホルダー仮
.slide{
	background-color: beige;
	width: 100%;
	height: 200px;
	margin: 20px auto;/*スライド上下に余白
}*/






/*_背景色ベタ用*/
.background-color_1{
	background-color: #F3E4E6;
}

/*背景_1色ベタ*/
.background-color_1{
	padding-top: 50px;/*背景_1色ベタの上、スライドのボタンの余白を設ける*/
}
.background-color_2{
	background-color: #FFF5ED;
}

.background-color_rentaru{
	background-color: #FF3049;
	height: 390px;/*色ベタの縦領域確保*/
	margin-top: -12px;
}

.background-color_3{
	background-color: #8B8A8A;
}

/*googlemapの次の色ベタ背景、.background-color_1を少しの高さ追加*/
.hp_background-color_1{
	height: 70px;
}

/*会員登録アプリ_色ベタ背景*/
.background-color_4{
	background-color: #F0FE68;
	height: 1100px;/*色ベタの縦領域確保*/
}



/*お支払い_色ベタ背景*/
.background-color_5{
	background-color: #fff;
	height: 720px;/*色ベタの縦領域確保*/
}






/*セクションタイトル帯(w1920×h55pxの画像配置)とテキスト*/
.room h3,.order h3,.access-aria h3{
	background-image: url("../image/h3_bg_780×55.png");
	color:white;
	text-align: center;
	/*background-color: #F60E2A;*/
	height: 35px;/*帯の高さを決める*/
	padding-top: 20px;
	width: 100%;
	letter-spacing: 2px;
	font-weight: bold;
}

/*余白の調整だけ一つだけ上書き*/
.access-aria h3{
	margin: 0px;
}

/*セクションタイトル画像*/
.contents .title{
	height: 25px;
	background-repeat: no-repeat ;
	background-position: center;
	margin: 0 auto;
	display: block;
}

.title_1{
	background: url("../image/title_1.png") no-repeat;
}

.title_2{
	background: url("../image/title_2.png") no-repeat;
	margin-top: 20px;
}

.title_3{
	background: url("../image/title_3.png") no-repeat;
}

/*ご予約・お問い合わせ(タイトル画像)*/
.title_4 img{
	margin:0 auto;
	width: 229px;
	height: 25px;
	display: block;
	margin-top:40px;/*上部のsectionとの余白確保*/
	margin-bottom: 0px;
}


/*おすすめルーム画像3つを中央揃え(上部に余白)_767pxまで*/
.room_1 img,.room_2 img,.route_map img {
	display: block;
	margin: 0 auto;
	margin-top: 12px;
}

/*pc用のプロジェクタールーム画像を非表示*/
.room_1_pc img{
	display: none;
	}

/*pc用のスゴオトルーム画像を非表示*/
.room_2_pc img{
	display: none;
	}





/*211029_ミラーリング追加*/
.mirroring_pc{
	display: none;
}
/*ミラーリングのコンテンツ(ul)自体を丸ごと中央*/
.mirroring_sp{
	display: block;
	background-color: #fff;
	text-align: center;
	margin: 0 auto;
	/*フォントサイズ14に*/
	font-size: 14px;
	padding: 0;
	padding-bottom: 1%
}

/*ポイントごとの説明テキスト*/
.point_text{
	width: 80%;
	text-align: center;
	margin: 0 auto;
	/*テキスト上の余白*/
	margin-top: 5%;
}

/*ポイントのアイコン*/
.point{
	width:20%;
	margin: 0 auto;
	display: block;
	/*アイコン上の余白*/
	margin-top: 5%;
}
.sp_mirrorin_mv{
	/*ポイントごとの画像上の余白*/
	padding-top: 5%;
}

/*ポイント2の画像の幅調整*/
.p2 img{
	width: 90%;
}


.point_text_4{
	width: 100%;
	/*文字上の余白*/
	margin-top: 9px;
}

/*文字色赤*/
.red{
	color:red;
	font-weight: 500;
	line-height: 1.8;
}

/*ミラーリングのフローの見出しテキスト画像*/
.sp_mirroring_flow_title{
	margin: 0 auto;
	width: 80%;
	margin-bottom: 4%;
}

/*フロー画像とテキスト(ul)をdivで囲ってそれをrelativeにして*/
/*内包するdiv*/
.sp_mirroring_flow_contents{
	position: relative;
	margin: 0 auto;
	text-align: center;
	max-width: 320px;
}

.fllow_text_bg{
	max-width: 320px;
	margin: 0 auto;
}

/*テキスト(ul)*/
.fllow_text{
	position: absolute;
	top:5px;
	left:5px;
	color: #fff;
	width: 88%;
	font-weight: 600;
	letter-spacing: 1.8;
	font-size:1.4rem;
	max-width: 320px;
}

/*テキストの中の1つ1つの<li>*/
.fllow1{
	margin-top:12%;
	margin-left: 19%;
}

.fllow2{
	margin-top:62%;
	margin-left: 16%;
}

.fllow3{
	margin-top:70%;
	margin-left: 14%;
	color: #000;
}





/*「お電話にてご予約はこちらから」の文字*/
.coll{
	letter-spacing: 2px;
	font-weight: 600;
	margin-top: 7%;
	margin-bottom: 2%;
}


/*問い合わせ_リンクボタン*/
.toiawase_btn {
	display: block;
	margin: 0 auto;
	/*角丸*/
	border-radius: 30px;
	/*枠線*/
    border: solid 2px #F60E2A;
	/*ボタン内のテキスト中央*/
    text-align: center;
    letter-spacing: 2px;
    font-weight: 700;
	min-width:200px;
	max-width: 80%;
	margin-bottom: 10%;
}

/*ボタンの文字色*/
.toiawase_btn a{
	color: #F60E2A;
	font-weight: 700;
	/*枠線内の上下の余白*/
	padding-top: 10px;
	padding-bottom: 10px;
	display:block;
	margin: 0 auto;
		
}

.toiawase p{
	margin: 0 auto;
	text-align: center;
}

.toiawase a:hover{
	border-radius: 20px;
    background-color: #ef5869;
    color: #fff;
}

.toiawase ul{
	margin: 0 auto;
}

/*ボタン内三角の画像*/
.triangle img{
	width: 10px;
	height: auto;
	/*▶の位置調整*/
	margin-top: -4px;
}

.route_map_title_pc{
	background-color: #F60E2A;
	padding:12px 0;
	color:#fff;
	margin:0 auto;
	text-align: center;
		
}






















/*pc用の経路図画像を非表示*/
.route_map_pc img{
	display: none;
	}


/*section内本文*/
section p{
	margin-top: 12px 12px;
	padding: 20px 27px;
	text-align: center;
	letter-spacing: 1px;
}

/*wifiと喫煙室_横並び*/
ul.flex_box_1{
	margin: 0 auto;/*ul自体を中央配置に*/
	margin-top: 20px;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;/*左右中央に配置*/
	justify-content: center;/*li内容を縦方向にセンタリング*/
	max-width:320px;/*ul自体の幅を350pxに*/
	height: 97px;
	/*background-color: aqua;*/
	/*align-items: stretch;高さをそろえる*/
}

/*FREE WiFiと喫煙室_画像*/
li.flex_item_wifi{
	background:url("../image/sp_wifi@3x.png") no-repeat ;
	background-size: cover;
	width: 97px;/*実寸通りのpx値*/
	height:97px;/*実寸通りのpx値*/
	/*background-color: green;*/
}

/*pc用Wi-Fi画像を非表示*/
li.flex_item_wifi_pc{
	display: none;
}

/*pc用喫煙室画像を非表示*/
li.flex_item_smookingroom_pc{
	display: none;
}


li.flex_item_smookingroom{
	background:url("../image/sp_smoking@3x.png") no-repeat;
	background-size: cover;
	margin-left: 30px;
	width: 194px;/*実寸通りのpx値*/
	height:97px;/*実寸通りのpx値*/
	/*background-color: red;*/
}

/*sp_コロナエリアの大枠*/
.corona_area{
	margin-top: 20px;
	miin-width: 320px;
}

.pc_corona_area{
	display: none;
}

/*フル幅の背景色ベタ(グラデ画像)*/
.background-color_image{
	background-image:url("../image/corona_bg_pc_1920×650.png");/*コロナグラデ画像(背景色ベタ)*/
	background-repeat: no-repeat ;
	background-size: cover;
	margin: 0 auto;
	width: 100%;/*フル幅に*/
}

/*コロナ_上のテキスト画像*/
.background-color_image img{
	width: 100%;
	max-width: 500px;/*大きくなりすぎないように、tbで見たときにw500pxまでを最大とする*/
	margin: 0 auto;
	margin-bottom: 20px;/*常に下部に一定の余白*/
}




/*モバイル注文_イラスト画像要素全体*/
.mobile_order{
	padding-top: 50px;
	margin: 0 auto;
	display: block;
	width: 320px;
}

/*モバイル注文_「簡裁カラオケ店初導入」画像追加*/
.tsuika{
	margin:0 auto;
	margin-bottom: 45px;
}

/*モバイル注文_画像*/
.mobile_sp_illust img{
	margin: 0 auto;
	padding-left: 150px;
}




.order_pc{
	display: none;
}

/*pc_フード画像非表示*/
.pc_food_img_sp{
	display: none;
}


.menu_pdf_btn img{
	margin-bottom: 50px;
}





/*充電機器レンタル_テキスト本文*/
/*画像*/
.sp_rentaru img{
	width: 229px;
	display: block;
	margin: 0 auto;
	padding-top: 50px;
}

.sp_rentaru p{
	color: white;
	width: 250px;
	margin: 0 auto;
	margin-top: 20px;
}

/*pc_レンタルエリア非表示*/
.pc_rentaru{
	display: none;
}


/*ご料金_画像*/
.plice img{
	width:300px;
	margin: 0 auto;
	display: block;
	margin-top: 35px;
	margin-bottom: 15px;
}

/*pc用表示*/
.pc_plice{
	display: none;
}

.sp{
	display: block;
}

.this a{
		color:red !important;
		font-weight: 700;
		font-size: 1.2em;
	}

.padding{
	padding-top: 10px;
	width: 60%;
	margin: 0 auto;
}

.padding_bottom{
	padding-bottom: 0px;
}

.pdf_btn menu_pdf_btn_food{
	margn:0px;
}





/*PDFボタン画像(共通指定)*/
.pdf_btn{
	width:300px;
	margin: 0 auto;
	display: block;
}

/*PDFボタン画像(料金)*/
.plice_pdf_btn{
	margin-top: 35px;
	margin-bottom: 11px;
}

/*PDFボタン画像(フードとドリンク、お問い合わせ)*/
.menu_pdf_btn{
	margin-top: 12px;
	margin-bottom: 12px;
}


/*フード、ドリンクの_画像*/
.menu img{
	margin: 0 auto;
	display: block;
	margin-top: 35px;
	margin-bottom: 15px;
}

/*========フード=======*/
	/*フード画像の下部_sp用エリア非表示*/
	.sp_food_bottom{
		display: block;
	}

.sp_food_bottom p{
	margin: 0 auto;
	max-width: 767px;
}
	
	/*フード画像の下部_pc用エリア非示*/
	.pc_food_bottom{
			display: none;
	}

/*pc用のギャラリーを非表示*/
.pc_garally{
	display: none;
}




/*ご予約・お問い合わせボタンのみ*/
.tell_btn{
	margin-top: 25px;
	margin-bottom:15px;
}


/*ソフトクリーム画像の余白調整*/
.soft_cream_1 img{
}

/*pc用メニューソフトクリーム画像非表示*/
.soft_cream_pc{
	display: none;
}


/*pc用フード画像の下、非表示*/
.pc_food_bottom{
	display: none;
}


/*pc用メニュー画像非表示*/
.pc_menu_img img{
	display: none;
}

/*お問い合わせ_pc用、ロゴとテキストエリア非非表示表示*/
.pc_tell__logotext{
	display: none;
}

.inner_logo img{
	display: block;
	margin: 0 auto;
	width: 63px;
}

.tell_aria span{
	font-weight: bold;
}

/*提携駐車場の場所説明画像*/
.parking-image img{
	display: block;
	margin: 0 auto;
	margin-top: 20px;
}

/*駐車場_アイコン画像*/
.parking_icon img{
	display: block;
	margin: 0 auto;
	width: 46px;
	padding-top: 50px;
}

.parking-aria h3{
	color:white;
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 4px;
}

.parking-aria p{
	color: white;
	padding-bottom: 70px;
	text-align: center;
	letter-spacing: 1px;
	
}

.parking-aria span{
	text-decoration-line: underline;
	font-weight: bold;
	letter-spacing: 3px;
}

.pc_parking-image{
	display: none;
}

/*=====sp_ギャラリー========*/
/*sp用のギャラリーを表示*/
.sp_garally{
display: block;
min-width: 320px;
max-width: 1024px;
}
	
/*pc用のギャラリーを非表示*/
.pc_garally{
display:none;
}


/*=====sp_会員登録アプリ========*/

/*pc_アプリ会員_非表示*/
.pc_app{
	display: none;
}

/*sp_会員登録アプリ_大枠*/
.sp_app{
	display: block;
	margin: 0 auto;
	position: relative;
	width:310px;/*画像サイズ*/
	margin-bottom: 30px;
}


/*会員登録アプリ_画像*/
.sp_app_img {
	width:310px;/*画像サイズ*/
	display: block;
	padding-top: 50px;
}

/*sp_会員登録アプリ_サブタイトルテキスト*/
.sp_app_text_1{
	font-weight: bold;
	position: absolute;
	top:480px;
	left:48px;
}

/*会員登録アプリ_本文*/
.sp_app_text_2{
	width: 200px;/*文字エリアの幅を240に*/
	position: absolute;
	top:520px;
	left:30px;
}



/*DLタイトル画像*/
.app_dl_title{
	width: 270px;
	display: block;
	margin: 0 auto;	
}

.pc_app_dl_title{
	display: none;
}



/*お支払い*/

.pc_payment{
		display: none;
	}

.sp_payment_blandlogo{
text-align: center;
}
.sp_payment_blandlogo li:first-child{
	margin-bottom: 20px;
}

/*お支払い_画像*/
.sp_payment_img img{
	width:190px;
	display: block;
	margin: 0 auto;	
	margin-top: 30px;
}


/*お支払い_タイトル画像*/
.sp_payment_title{
	width:101px;
	display: block;
	margin: 0 auto;
	padding-top: 50px;
}

.sp_payment p{
	display: block;
	margin: 0 auto;	
	margin-top: 20px;
}

.sp_payment p span{
	font-weight: bold;
}


















.pc_access-aria{
	display: none;
}


/*アクセス_文字を太く、時間広く、余白*/
.access_strong{
	font-weight: bold;
	letter-spacing: 2px;
	margin-top: -30px;/*文字上、H3帯間の余白*/
}

.access_p1{
	padding-top: 0;
	padding-bottom: 12px;
}

/*文字色赤く。*/
.access_strong2{
	padding-top:40px;/*赤字テキスト上の余白*/
	color: #F60E2A;
	padding-bottom: 50px;
}




/*グーグルマップの設置*/
.google-map iframe{
	width: 100%;/*レスポンシブ*/
	height: 300px;/*sp_任意の高さ指定*/
	margin: 0px auto;
	filter:hue-rotate(150deg);-webkit-filter:hue-rotate(150deg);
}



/*211025_求人情報追加*/
/*背景色*/
#recruit{
	background-color: #fff;
	height:auto;
	/*背景色内の下の余白*/
	padding-bottom: 35px;
	/*背景色内の上の余白*/
	padding-top:20px;
}

.pc{
	display: none;
}
.sp{
	display: block;
}

/*「カラオケK-1で一緒に働いてみませんか？」の画像*/
.recruit_title img{
	min-width: 300px;
	max-width: 80%;
	display: block;
	margin: 0 auto;
}

/*sp_リクルート女性画像*/
.recruit_img{
	min-width: 300px;
	max-width: 70%;
	display: block;
	margin: 0 auto;
}

/*「お仕事内容」*/
.recruit_title2{
	/*枠外、上の余白*/
	margin-top: 20px;
}

/*「お仕事内容」の文字にspan←枠線つける*/
.recruit_title2 strong{
	border: solid 1px;
	padding: 2px;
	letter-spacing: 2px;
	/*枠内の余白*/
	padding-left: 12px;
	padding-right:12px;
	/*枠線の色*/
	border-color: #707070;
}

/*リクルートのテキストエリア内のテキスト*/
.sp_recruit p{
	padding-bottom:10px;
	padding: 0;/*共通で設定しているpadding-top20pxを打ち消し*/
	padding-bottom: 10px;
}

.recruit_text_read{
	text-align: center;
}

.recruit_text_read span{
	padding-top: 5px;
}

.text{
	padding: 0;
	width: 90%;
	display: block;
	margin: 0 auto;
}


/*文字の下に破線*/
.top_dash{
	background-size: 8px 1px;
	background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);
	background-repeat: repeat-x;
	width: 90%;
	padding-top: 10px;
	margin: 0 auto;
	margin-bottom: 10px;
}

/*求人_リンクボタン*/
.recruit_btn {
	display: block;
	margin: 0 auto;
	border-radius: 30px;
    border: solid 2px #F60E2A;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 700;
	min-width:200px;
	max-width: 80%;
}

/*ボタンの文字色*/
.recruit_btn a{
	color: #F60E2A;
	font-weight: 700;
	/*枠線内の上下の余白*/
	padding-top: 16px;
	padding-bottom: 16px;
	display:block;
	margin: 0 auto;
		
}

.recruit_btn p{
	margin: 0 auto;
	text-align: center;
}

.recruit_btn a:hover{
	border-radius: 20px;
    background-color: #ef5869;
    color: #fff;
}

.recruit_btn ul{
	margin: 0 auto;
}

.triangle img{
	width: 10px;
	height: auto;
}

/*
/*さんかく描画
.triangle{
width: 30px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #F60E2A;
}*/

/*フレックスコンテナ*/
.flex_recruit_btn{
	display: flex;
	margin: 0 auto;
	justify-content: center;
}


.triangle_aftertext{
	margin-left: 10px;
}

/*pc----画像とテキストを横並びに*/
.recruit_text_img_flex{
	display: flex;
}








/*スマホ_twitter*/

.pc_twitter-aria{
	display: none;
}
.pc_twitter_color{
	display: none;
}

/*twitter自体*/
.sp_twitter-aria{
	display: block;
	margin: 0 auto;/*中央揃え*/
	max-width: 600px;/*最大幅を指定*/
	padding: 0 13px;/*左右はpaddingで余白を作る*/
}

/*twitterを覆う背景色ベタ*/
.sp_twitter_color{
	background-color: #F3E4E6;
	padding: 50px 0;/*背景色ベタとtwitter自体間に余白*/
}







/*フッターの背景色ベタ*/
footer{
	background-color: #FF3049;
	display: block;
	width:100%;
	height:180px;
}

.footer_logo img{
	display: block;
	margin: 0 auto;
	width: 130px;
	margin-top: 20px;
	margin-bottom:20px;
}


footer ul{
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}


footer ul li{
	width: 35px;
	margin-left: 10px;
}

footer ul li:first-child{
	margin-left: 0px;
}





footer p small{
	color:white;
	letter-spacing: 3px;
}



/* -------------------------------------------------------
=========================/@end group Header
---------------------------------------------------------- */















/* -------------------------------------------------------
　　　　　　　　　　　　@group Nav
---------------------------------------------------------- */

nav{
	/*24pxつける。24px/16px=1.5rem*/
	margin-bottom:1.5rem;
	/*グロナビに背景色つける場合。*/
	/*
	background-color: #〇〇〇;
	*/
}

/*子要素にfloatを指定している要素の親要素は高さが算出されないので、このままではnav要素に背景色など指定しても表示されない。高さをつくる。
nav ul{
	overflow: hidden;
}*/

/*グロナビの<li>
nav ul li{
	/*<li>のwidthを%で指定。画面幅(100%)/<li>の個数*/
	/*
	width:〇%;
	*/
	/*グロナビを横並びに
	float:left;
}*/

/*グロナビの<li>のaに*/
nav ul li a{
	display: block;
	/*ほかの要素と同じく24pxの高さしかない状態。スマホではタップしづらいのでpaddingでリンク領域を広げる
    上下に12pxずつ設けることで、「48px」になり、24px単位でのレイアウト(バーティカルリズム)を維持できる*/
	/*12px/16px=0.75rem*/
	padding: 0.75rem 0;
	/*
		color:#〇〇〇;
	*/
}

/*グロナビ、各<li>のリンクにhover時の設定*/
/*
nav ul li a:hover{
	color :#〇〇〇;
	text-decoration : underline;
	background-color:#〇〇〇;
}
*/

/* -------------------------------------------------------
========================= /@end group Nav
---------------------------------------------------------- */















/* -------------------------------------------------------
　　　　　　　　　　　　@group Contents
---------------------------------------------------------- */

/*コンテンツは画面いっぱいに表示するとスマホの場合スクロールバーと重なり誤作動を招く可能性があるため、コンテンツ幅を90%にする*/
#contents{
	width:90%;
	/*コンテンツ全体に対して要素を中央揃え*/
	margin:0 auto;
	/*コンテンツに内包するすべてのテキストを中央揃えに( ※<p>は個別に左揃えに指定。↓)*/
	text-align: center;
}

/*本文、見出し、画像の間に適切な余白を設けるためコンテンツに内包する<p>要素と<img>要素に対して指定。
この際の余白もバーティカルリズムに乗っ取って1行分の24px。*/
#contents p{
	/*24px/16px=1.5rem*/
	margin-bottom: 1.5rem;
	/*コンテンツエリアの中の<p>は左揃え*/
	text-align: left;
}

#contents img{
	/*24px/16px=1.5rem*/
	margin-bottom: 1.5rem;
}

/* -------------------------------------------------------
========================= /@end group Contents
---------------------------------------------------------- */


















/* -------------------------------------------------------
　　　　　　　　　　　　@group Footer
---------------------------------------------------------- */

footer{
	/*フッターには画像(background)なり背景色なり、付くことが多いので文字色は白とか指定するかな*/
	/*
	color:white;
	*/
	/*フッター内のテキスト。一応、スマホだから中央揃えにしてる。場合によってはleftに変更*/
	text-align: center;
	/*背景に画像か色がある前提で、テキスト領域の上下に24pxずつ余白をつくる。24px/16px=1.5rem*/
	padding: 1.5rem 0;
	/*背景に画像入れる場合*/
	/*
　　 background:url(相対パス);
	*/
	/*任意で下記有効に*/
	/*
	background-size: cover;
	*/
}

/* -------------------------------------------------------
========================= /@end group Footer
---------------------------------------------------------- */
















/* =================================================================================
　　　 
                            ★★　タブレット/md(768px～(1023px))　★★
                                　 (最小幅768px以上の指定_p74)
　　                                --メディアクエリ①--

==================================================================================== */

@media screen and (min-width:768px){
	
	/*1---レスポンシブタイプセッティングの指定_p99*/
	html{
	/*タブレットのhtml要素のfont-sizeは14pxが目安_p99。 %に変換すると、14px/16px ×100=87.5% */
	font-size: 87.5%;
	line-height: 1.5;}
	
	.contents{
	/*タブレットはコンテンツに内包するすべてのテキストを左揃えに*/
	text-align: center;}
	
}/* / @media screen and (min-width:768px)*/


/* ------------------------------------------------------------------------------------
  ========================= /@end タブレット/md(768px～1023px)
---------------------------------------------------------------------------------------- */


















/* =================================================================================

                             ★★　デスクトップ/lg(1024px～)　★★

==================================================================================== */
@media screen and (min-width:1024px){
	
	/*1---レスポンシブタイプセッティングの指定_p99*/
	html{
	/*PCのhtml要素のfont-sizeは16pxが目安_p99。 %に変換すると、16px/16px ×100=100% */
	font-size: 100%;
	line-height: 1.5;}
	
/* -------------------------------------------------------
　　　　　　　　　　　   　 Nav
---------------------------------------------------------- */

	/*スライド_幅*/	
	.slick_wrap{
		width: 100%;
	}
	.sp_header_logo {
    padding-top: 13px;
}
	
	#header{
		display: block;
	}

	/*みるハコ画像の上に、リンクボタン*/
	.miruhako_a {
		position: relative;
	}
	
	
	.miruhako_a span{
		position: absolute;
		width:40%;
		height: auto;
		right: 30px;
		bottom: 30px;
	}
	
	
	
	
	
	/*ハンバーガーメニューを非表示に*/
	.hamburger-menu{
		visibility: hidden;
	}
	
	/*ヘッダー(ルート)自体のpcのレイアウト調整に合わせて設定を修正*/
	header{
		height:130px;/*ヘッダー領域(高さ)を広げる*/
		text-align: right;/*中央揃えを右揃えに変更*/
		position: relative;/*内包する要素をabsoluteで可変にするために指定*/
	}
	
	/*ヘッダー内のロゴの一を調整*/
	.header_logo img{
		/*
		margin-left: 2%;
		margin-top:1%;*/
		display: block;
		position: absolute;
		left:5%;
		top:30%;
	}

	/*pcのグロナビを表示*/
	.pc_header nav{
		display: block;
		margin: 0 auto;
	}
	
	
/*==================================================
　5-3-1 中心から外に線が伸びる（下部）
===================================*/

.gnavi li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
  color:#fff;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 25%;
    /*線の形状*/
    width:50%;
    height: 2px;
    background:#fff;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}

/*==================================================
　//5-3-1 中心から外に線が伸びる（下部）
===================================*/
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*li内の文字*/
	nav a{
		text-decoration: none;
		color:white;
		font-weight: bold;
		text-align: center;/*li内で中央揃え*/
		margin-top: -2px;/*li内の文字を左線に合わせて縦方向の位置調整*/
	}
	
	
	/*グロナビの設定_flexコンテナ*/
	.pc_header nav ul{
	width: 70.5729166%;/*1355px(グロナビul自体のコンテンツ幅)　1355/1920×100*/
	display: flex;/*横並び*/
	justify-content: center;/*グロナビ全体の、水平方向揃え　ulの1355pxの中で中央揃えに*/
	position: absolute;/*ul自体をheaderを起点に動かす*/
	top:40%;
	left:10%;
	margin-left: 50px;/*PC最小幅(1240px)にしたときの左ロゴとの余白確保*/
	}
	

	/*グロナビの設定_flexアイテム*/
	.pc_header li{
		width:14.0221402%; /*li(一つ一つの幅)は190px　190/1355×100*/
		color:white;
		letter-spacing: 2px;
		border-left: 2px solid #fff;/*左側にタテ線表示*/
		height: 40px;/*タテ線の高さ*/

	}
	
	.pc_header li:last-child{
		border-right: 2px solid #fff;/*右側にタテ線表示*/
	}
	
		

	/*PCのみある右側の画像*/
	.pc_right_logo img{
		display: inline;
		width:15%;/**/
		min-width: 200px;
		margin-left: auto;/*右揃えに*/
		margin-top: 1%;
		margin-right: 30px;

	}
	

	
	

/* -------------------------------------------------------
　　　　　　　　　　　   　@group Contents
---------------------------------------------------------- */
/*960pxのグリッドを敷いてる場合は、実際のところグリッド(カラム)は940pxで、左右両端に10pxを含めた960pxなのでグリッドに合わせて配置している場合は、#contents内に入れる親にはmargin:0 10px;を付けるのを忘れない。_p65～67
ちなみに記述の際は、「pxを%に変換」する(p76)ので、10px/960px ×100px=1.04166667%と記述する。*/
	.contens{
	/*カラム幅の変更。
	1110px/1024px ×100=108.3984375*/
	width: 960px;
	}


	/*セクションタイトル帯(w1920×h55pxの画像配置)とテキスト*/
	.room h3,.order h3,.access-aria h3{
		background-image: none;
		background-color: #FF3049;
		width:960px;
		margin: 0 auto;
		margin-top: 50px;
		margin-bottom:20px;
	}

	/*背景_1色ベタ*/
	.background-color_1{
		padding-top: 35px;/*<h3>の帯と背景色ベタの間に余白*/
	}


	/*セクションタイトル画像*/
	.contents .title{
		margin-bottom: 24px;
		}



	.contents .title_2{
		margin-top: 30px;
	}


	/*本文のフォントサイズを指定*/
	p{
		font-size:1.2rem;
	}



	/*スマホ用の画像を非表示*/	
	.room_1 img,.room_2 img,.route_map img{
		display: none;	
	}
	
	
	

	/*pc用の画像(幅1110px)を表示*/
	.room_1_pc img,.room_2_pc img, .route_map_pc img {
	display: block;
	margin: 0 auto;
		width: 960px;
	margin-top: 12px;
}
	
	
	h3.route_map_title_pc{
		margin-top:50px;
	}
	

	/*=========Wi-fi画像と喫煙室画像の並び=========*/
	/*wifiと喫煙室_横並び*/
	ul.flex_box_1{
		min-width:700px;/*コンテナの幅を1700pxに。この数値は、 space-betweenを設定した上でのアイテム同士の間隔で決める*/
		height:300px;/*コンテナの高さを指定*/
		justify-content: space-between;/*水平方向に、widthに幅内で中央揃えしながら(コンテナーの中で)均等に配置されます。隣接するアイテム同士の間隔は同じになります*/
		/*background-color: aqua;*/
		/*align-items: stretch;高さをそろえる*/
	}
	
	
	
	/*=======Wi-Fi画像=======*/
	/*sp用Wi-Fi画像を非表示*/
	li.flex_item_wifi{
		display: none;
	}

	/*pc用Wi-Fi画像を表示*/ 
	li.flex_item_wifi_pc{
		display:block;
		background:url("../image/wifi_pc.png") no-repeat ;
		background-size: cover;
		width: 200px;
		height: 200px;
		/*background-color: green;*/
	}


	/*=======喫煙室画像=======*/
	/*sp用喫煙室画像を非表示*/
	li.flex_item_smookingroom{
			display: none;
	}

	/*pc用喫煙室画像を非表示*/
	li.flex_item_smookingroom_pc{
		display:block;
		background:url("../image/smooking_pc2.png") no-repeat ;
		background-size: cover;
		width: 400px;
		height: 200px;
		/*background-color: green;*/
	}

	
	
	
	/*=======コロナ=======*/
	/*spコロナ_テキスト画像を非表示*/
	.corona{
		display: none;
	}
	
	/*pcコロナ_テキスト画像を表示*/
	.corona_pc{
		background-image:url("../image/pc_corona_981×443.png");/*pc_コロナ画像(テキスト)*/
		background-repeat: no-repeat ;
		background-size: cover;
		margin: 0 auto;
		width:900px;/*幅と高さは1024px時の左右が切れない数値に目で見て調整*/
		height: 400px;
	}
	
	
	.background-color_image{
		padding-top: 150px;/*グラ背景上の余白作る*/
	}
	
	

	/*=======モバイル注文=======*/
	/*spモバイル注文をまるごとすべて非表示*/
	.order_sp{
		display: none;
	}
	

	.background-color_2{
		padding-top:100px;	/*モバイル注文_色ベタ背景の上部の余白を確保*/
	}

	/*pc_モバイル注文作成*/
	/*flexコンテナ*/
	.order_pc{
		display: flex;
		justify-content: center;/*コンテナ全体を中央揃え*/
		margin-bottom: 80px;/*コンテナ全体の下部に余白*/
	}
	
	.mobile_order_illust_pc{
		margin-right: 40px;/*横並びアイテム間の余白*/
	}
	
	
	.mobile_order_text_right_pc{
		margin-top: 20px;/*横並び右エリアの上部、余白調整*/
		margin-left: -30px;
	}
	
	
	/*モバイル注文_右側の本文の幅を狭める*/
	.mobile_order_pc_read{
		width:400px;
		font-size: 1.3rem;
		line-height: 2;
		margin-top:-30px;
		margin-left: 10px;
	}
	
	/*モバイル注文_pc_テキスト本文*/
	.mobile_order_text_right_pc p{
	text-align: left;
	}
	
	
	
	/*========料金=======*/
	/*料金_sp用エリア非表示*/
	.sp_plice{
		display: none;
	}
	
	/*h3の帯テキスト(spのみのもの)非表示*/
	h3.plice_title_h3{
		display: none;
	}
	

	
	
	.tsuika_pc{
	width:80%;
	margin:0 auto;
	margin-top:50px;
	margin-bottom: 30px;
}
	
	/*料金_pc用表示*/
	/*flexコンテナ*/
	ul.pc_plice{
		display: flex;
		margin: 0 auto;/*コンテナそのものの中央揃え_必須！*/
		justify-content: space-between;
		width:850px;/*space-betweenさせる幅*/
		margin-top:0px;/*flexコンテナに上下の余白*/
		margin-bottom: 30px;
	}
	
	/*flexアイテム_左(女性と表)*/
	.pc_plice_left{
		width:600px;/*画像のサイズ決定*/
		height: auto;
		margin-left: 5px;/*space-betweenだけで足りない余白の微調整*/
	}
	
	/*flexアイテム_右(丸ボタン)*/
	.pc_plice_right{
		width: 160px;/*画像のサイズ決定*/
		height: auto;
		margin-top: 60px;/*画像の上に余白*/
	}
	
	.this p{
		line-height: 2;
	}
	
	 .this a{
		color:red !important;
		font-weight: 700;
		font-size: 1.2em;
	}
	
	.pc{
		display: block;
	}
	

	
	
	/*========フード=======*/
	/*フード画像の下部_sp用エリア非表示*/
	.sp_food_bottom{
		display: none;
	}
	
	/*フード画像の下部_pc用エリア非示*/
	.pc_food_bottom{
		display: block;
	}
	
	.pc_food_bottom p{
		margin: 0 auto;
	}
			
	
	/*pc用フード表示*/
	/*flexコンテナ*/
	.pc_food_bottom{
		display: flex;
		margin: 0 auto;/*コンテナそのものの中央揃え_必須！*/
		justify-content: space-between;
		width: 900px;/*space-betweenさせる幅*/
		margin-top:0px;/*flexコンテナに上下の余白*/
		margin-bottom: 40px;	
	}
	
	/*flexアイテム_左(テキスト)*/
	.pc_food_bottom_left{
		width:600px;/*テキストの幅決定*/
		height: auto;
		margin-left: -27px;
	}
	/*flexアイテム_左(テキスト)_左揃えを指定*/
	.pc_food_bottom_left p{
		text-align: left;
	}
	
	
	/*flexアイテム_右(ボタン)*/
	.pc_food_bottom_right{
		width:250px;/*ボタンのサイズ決定*/
		height: auto;
		margin-top: 17px;/*space-betweenだけで足りない余白の微調整*/
	}
	
	
	
	/*メニュー画像*/
	/*sp用のメニュー画像非表示*/
	.sp_menu_img img{
		display: none;
	}
	
	/*pc用のメニュー画像*/
	.pc_menu_img img{
	width: 960px;
	margin: 0 auto;
	display: block;
	margin-top: 35px;
	margin-bottom: 15px;
}
	
	/*ドリンク画像上の余白*/
	.pc_menu_img_drink img{
		margin-top:60px;
	}
	
	
	/*sp_ソフトクリーム画像を非表示*/
	.soft_cream_sp img{
		display: none;
	}
	
	/*pc_ソフトクリーム画像を表示*/
	.soft_cream_pc{
		display: block;
		width: 960px;
		margin: 0 auto;
		margin-top: 70px;/*画像上余余白白*/
		padding-bottom: 50px;/*背景色ベタ下部に余白*/
	}


	
	
	

	
	/*pc用のギャラリーを表示*/
	.pc_garally{
	display: block;
	}
	/*sp用のギャラリーを非表示*/
	.sp_garally{
	display: none;
	}

	
	
	/*==========pcレンタル==========*/
	/*spレンタル_非表示*/
	.sp_rentaru{
		display: none;
	}
	
	
	/*pcレンタル_表示*/
	/*色ベタ背景*/
	.background-color_rentaru{
		height: 310px;/*色ベタ背景の高さ*/
	}
	
	
	/*flexコンテナ*/
	.pc_rentaru{
		display: flex;
		margin: 0 auto;
		width:700px;/*space-betweenさせる幅、つまり各要素間の余白の幅をここで決める*/
		justify-content: space-between;
	}
	
	
	
	
	
	/*flexアイテム_左(充電機イラスト)*/
	.pc_rentaru_left{
		width:90px;/*画像のサイズ決定*/
		height: auto;	
		margin-top: 100px;
	}
	
	
	
	
	
	
	
	/*flexアイテム_中央(テキストエリア)*/
	.pc_rentaru_center{
		height: auto;
		width: 450px;/*テキストエリア(大枠)の幅決定 ★内包する<p>の幅はここの値ということになる*/
		margin: 0 auto;
		margin-top:40px;/*テキストエリア(大枠)上部に余白*/
	}
	
	/*flexアイテム_中央(タイトル)*/
	.pc_rentaru_center_title{
		width: 270px;/*画像のサイズ決定*/
		height: auto;
		display: block;
		margin: 0 auto;/*タイトル画像をテキストエリア(大枠)、で、中央揃え*/
	}
	

	/*flexアイテム_中央(本文)*/
	.pc_rentaru_read{
		text-align:left;
		color: white;
		line-height: 2.5rem;/*行間を少し余裕つける*/
		letter-spacing:1px;
		margin-top: -10px;
	}
	
	
	
	
	/*flexアイテム_右(マイクイラスト)*/
	.pc_rentaru_right{
		width:70px;/*画像の幅決定*/
		display: block;
		margin-top: 110px;
	}
	
	
	
	/*======お問い合わせ======*/
	/*sp_お問い合わせ_ロゴとテキストエリアを非表示*/
	.sp_tell__logotext{
		display: none;
	}
	
	
	/*pc_お問い合わせ_ロゴとテキストエリア*/
	/*flexコンテナ*/
	.pc_tell__logotext{
		display: flex;
		justify-content: center;
		width: 800px;
		margin: 0 auto;
		margin-top: 40px;
		margin-bottom: 40px;
	}
	
	/*flexコアイテム_左(ロゴ画像)*/
	.pc_tell__logotext li img{
		width: 90px;
		height: auto;
		margin-top: 8px;
		margin-left: 30px;
	}
	
	/*flexコアイテム_右(テキスト)*/
	.pc_tell__logotext li p{
		width:350px;
		height: auto;
		text-align: left;
	}
	
	
	
	/*=====駐車場=====*/
	/*駐車場の地図画像を非表示*/
	.parking-image{
		display: none;
	}
	/*駐車場の説明エリアを非表示*/
	.background-color_3{
		display: none;
	}
	
	
	.pc_parking-image{
		margin: 0 auto;
		display: block;
		width: 960px;;
		height: auto;
		position: relative;
		margin-bottom: 70px;
	}
	
	/*pc_駐車場_タイトルテキスト*/
	.pc_parking-image h3{
		color: white;
		position: absolute;
		top:117px;
		left:650px;
		font-size: 1.5rem;
		letter-spacing: 4px;
	}
	
	/*pc_駐車場_本文*/
	.pc_parking-image p{
		color: white;
		position: absolute;
		top:132px;
		left:629px;
		font-size: 1.1rem;
		letter-spacing: 2px;
		line-height: 1.7;
	}
	
	.pc_parking-image p span{
		font-weight: bold;
		font-size: 1.2rem;
		text-decoration: underline;
	}
	
	
	
	/*======pc_アプリ会員_画像======*/
	/*sp_アプリ会員_画像非表示*/
	.sp_app{display: none;}

	/*pc_アプリ会員＿大枠*/
	.pc_app{
		display: block;
		margin: 0 auto;
		width: 800px;
		position: relative;
		margin-bottom: 50px;
	}
	
	/*pc_アプリ会員_画像*/
	.pc_app_img {
		display: block;
		width: 800px;/*画像サイズ*/
		padding-top: 70px;/*背景色ベタ上部に余白*/
	}
	
	/*pc_アプリ会員_タイトルテキスト*/
	.pc_app_title{
		width: 225px;
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
		font-weight: bold;
		font-size: 1.7rem;
		color: red;
		position: absolute;
		top:130px;
		left:360px;
		width: 300px;
	}
	
	
	/*pc_アプリ会員_サブタイトルテキスト*/
	.pc_app_text_1{
		position: absolute;
		font-weight: bold;
		top:190px;
		left:420px;
	}
	
	/*pc_アプリ会員_本文*/

	.pc_app_text_2{
		position: absolute;
		width: 290px;
		top:220px;
		left:375px;
		text-align: left;
		line-height: 1.8;
		letter-spacing: 1.4;
		line-brak:strict;/*厳格な禁則処理*/
	}
	
	.app_dl_title{
		display: none;
	}
	
	
	.pc_app_dl_title{
		display: block;
		width: 300px;
		margin: 0 auto;
	}
	
		
	.background-color_4{
		display: none;
	}
	
	/*pc会員登録アプリ_色ベタ背景*/
	.pc_background-color_4{
		display: block;
		background-color: #F0FE68;
		height: 700px;
	}
	
	
	
	/*お支払い*/
	/*sp_お支払い非表示*/
	.sp_payment{
		display: none;
	}
	
	
	/*お支払い_色ベタ背景*/
.background-color_5{
	/*background-color: #EEE8E4;*/
	background-color: #fff;
	height: 570px;/*色ベタの縦領域確保*/
}
	
	/*pc_お支払い_全体*/
	.pc_payment{
		display: block;
		margin-bottom: 20px;/*210927*/
	}
	
	
	/*pc_お支払い_タイトル画像*/
	.pc_payment_title{
		margin: 0 auto;
		width: 100px;
		padding-top: 50px;
	}
	
	/*pc_お支払い_アイコン横並び*/
	.pc_payment_imege_flex{
		margin: 0 auto;
		display: flex;
		width: 300px;/*210927変更*/
		justify-content:space-between;
		margin-top: 20px;
		padding-bottom:10px;
	}
	
	/*pc_お支払い_支払い方法複数画像横並び*/
	.pc_payment_imege2_flex{
		margin: 0 auto;
		display: flex;
		width: 710px;
		justify-content:space-between;
		margin-top: 30px;
	}
	
	
	/*強調*/
	.pc_payment span{
		font-weight: bold;
	}
	.pc_payment_imege_flex img{
		width: 140px;/*210924変更*/
	}
	
	.pc_payment_imege_flex li{
		position: relative;
	}
		
	.payment_1_text{
		position: absolute;
		top: 5px;
		left: 26px;/*210924変更*/
		color: white;
		letter-spacing: 5px;
	}	
		
		
	.payment_2_text{
		position: absolute;
		top: 5px;
		left: 14px;/*210924変更*/
		color: white;
		font-size: 1.1rem;
		letter-spacing:2px;
	}	
		
	.payment_3_text{
		position: absolute;
		top: 5px;
		left:1px;
		color: white;
		font-size: 1.1rem;
		letter-spacing:2px;
		line-height: 1.2;
	}	
	
	/*210924変更*/
	.payment_4_text{
		position: absolute;
		top: 5px;
		left:22px;
		color: white;
		font-size: 1.1rem;
		letter-spacing:2px;
		line-height: 1.2;
	}	
		

	
	/*アクセス*/
	/*アクセス_sp非表示*/		
	.sp_access-aria{
		display: none;
	}
	
	.pc_access-aria{
		display: block;
		margin-bottom: 30px;
		margin-top: 30px;
	}
	
	
	.pc_access-aria img{
		width: 100px;
	}
	
	.access_p1 span{
		font-weight: bold;
	}
	
	.google-map {
		margin-bottom: 50px;/*マップ下に余白*/
		min-height: 400px;/*pcは、最低でも400の高さは確保。(spはheight300px)*/
	}
	
		
	.google-map iframe{
		min-height: 420px;/*pcは、最低でも400の高さは確保。(spはheight300px)*/
	}
	
	
	
	/*211025_求人情報追加*/
	.sp{
		display: none;
	}
	.pc{
		display: block;
	}
	

/*背景色*/
#recruit{
	background-color: #fff;
	height:auto;
	/*背景色内の下の余白*/
	padding-bottom: 50px;
	/*背景色内の上の余白*/
	padding-top:20px;
}

/*「カラオケK-1で一緒に働いてみませんか？」の画像*/
.recruit_title img{
	min-width: 600px;
	max-width: 35%;
	display: block;
	margin: 0 auto;
}
	
	
/*--------pc_テキストと女性画像を横並びに--------*/
.recruit_text_img_flex{
	display: flex;	
	margin: 0 auto;
	width: 980px;
	justify-content: space-between;
}
/*横並びにした「テキスト・画像」の右div(女性画像)側*/
.recruit_img{
	width:40%;
}
/*横並びにした「テキスト・画像」の左div(テキスト)側*/
.text{
	text-align: left;
	width:60%;/*右側の横幅領域。%で。左側と併せて100%以内で決める。*/
	}
	

/*「お仕事内容」*/
.recruit_title2{
	/*枠外、上の余白*/
	margin-top: 20px;
	font-size: 16px;
	margin-bottom: 20px;
}

/*「お仕事内容」の文字にspan←枠線つける*/
.recruit_title2 strong{
	border: solid 1px;
	padding: 2px;
	letter-spacing: 2px;
	/*枠内の余白*/
	padding-left: 12px;
	padding-right:12px;
	/*枠線の色*/
	border-color: #707070;
	/*「お仕事内容」を左揃えに*/
	text-align: left;
	margin-bottom: 5px;
}
	



/*リクルートのテキストエリア内のテキスト*/
.recruit p{
	padding-bottom:10px;
	padding: 0;/*共通で設定しているpadding-top20pxを打ち消し*/
	padding-bottom: 10px;
}

.recruit_text_read p{
	text-align: left;
	padding: 0;
}

.recruit_text_read span{
	padding-top: 5px;
}




/*文字の下に破線*/
.top_dash{
	background-size: 8px 1px;
	background-image: linear-gradient(to right, #000, #000 3px, transparent 3px, transparent 8px);
	background-repeat: repeat-x;
	width: 90%;
	padding-top: 15px;
	margin: 0;
	margin-top: 15px;
}

/*リード文の余計な左右のパディングを打ち消し*/
.top_dash p{
	padding-left:0px;
	padding-right: 0px;
	line-height: 2;
}
	
/*求人_リンクボタン*/
.recruit_btn {
	display: block;
	margin: 0 auto;
	border-radius: 30px;
    border: solid 2px #F60E2A;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 700;
	min-width:200px;
	max-width: 300px;
}

/*ボタンの文字色*/
.recruit_btn a{
	color: #F60E2A;
	font-weight: 700;
	/*枠線内の上下の余白*/
	padding-top: 16px;
	padding-bottom: 16px;
	display:block;
	margin: 0 auto;
		
}

.recruit_btn p{
	margin: 0 auto;
	text-align: center;
}

.recruit_btn a:hover{
	border-radius: 20px;
    background-color: #ef5869;
    color: #fff;
}

.recruit_btn ul{
	margin: 0 auto;
}

.triangle img{
	width: 10px;
	height: auto;
}


/*フレックスコンテナ*/
.flex_recruit_btn{
	display: flex;
	margin: 0 auto;
	justify-content: center;
}


.triangle_aftertext{
	margin-left: 10px;
}


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/*======PC_twitter=======*/
	/*sp_twitterエリアを非表示*/
	.sp_twitter-aria{
		display: none;
	}
	/*sp_twitterエリアの背景色ベタを非表示*/
	.sp_twitter_color{
		display: none;
	}

	/*pc_twitter自体を表示*/
	.pc_twitter-aria{
		display: block;
	}
	
	
	

	/*pc_twitterを覆う背景色ベタ*/
	.pc_twitter_color{
		display: block;
		background-color: #F3E4E6;
		padding: 70px 0;/*背景色ベタとtwitter自体間に余白*/
	}

	/*flexコンテナ*/
	.twitter_flex_container{
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		width: 960px;/*アイテムを内包するコンテナ自体の横幅*/
	}	
	
	/*左側_twitter自体*/
	.twitter_flex_items_1{
		width: 450px;
	}
	
	
	/*右側_スタッフさんの画像*/
	.twitter_flex_items_2 img{
		width: 450px;
		height: auto;
		margin-top: -20px;/*画像の上余白を詰める*/
	}
	
	/*右側_スタッフさんの画像の下、テキスト*/	
	.twitter_flex_items_2_text {
		line-height:1.9;
		margin-top: -30px;

	}
	/*右側_スタッフさんの画像の下、テキスト2行目*/
	.twitter_flex_items_2_text_bottom{
		margin-top: -20px;
	}
	
	
	
	
	/*211029_ミラーリング追加*/
	.mirroring_sp{
		display: none;
	}
	.mirroring_pc{
		display: block;
	}
	
	/*ミラーリングのコンテンツ(ul)自体を丸ごと中央*/
	.mirroring_pc{
	background-color: #fff;
	text-align: center;
	margin: 0 auto;
	/*画像の上に余白*/
	padding-top: 2%;
	padding-bottom: 1%
}
	.pc_mirrorin_mv{
		width: 80%;
		margin: 0 auto;
	}
	
	
	
	/*ポイント①と②(←の塊を内包するdivにflexする)を一列を横並びに*/
	.flexcontainer_point1set{
		display: flex;
		margin: 0 auto;
		justify-content: space-between;
		/*ポイント2つ分合わせた1列*/
		width: 840px;
	}
	
	
	/*ポイントのアイコンとテキストを横並び(flexコンテナ/ul)*/
	/*ポイントごとの塊*/
	.flexcontainer_point{
		display: flex;
		/*ポイントエリアごとの横幅*/
		width: 390px;
		justify-content: space-between;
	}
	
	/*ポイントアイコンの大きさ*/
	.pc_pointicon{
		width: 15%;
	}
	
	/*アイコン横のテキストをboldに*/
	.pc_pointtext{
		font-weight: bold;
		text-align: left;
		font-size: 13px;
	}

	/*ポイント4のアイコン横のテキスト*/
	.point4text_pc{
		margin-top: 8%;
	}
	
	/*ポイント4のテキストを赤字*/
	.red_text{
		text-align: left;
		color: red;
		font-weight: bold;
		width: 320px;
		padding: 0;
		margin-top: 6%;
	}
	
	/*ポイントの画像を横並び(ul)*/
	.point_pc_img_flexcontainer{
		display: flex;
		justify-content: space-between;
		/*ポイント画像2つ分合わせた幅*/
		align-items: center;
		width:800px;
		margin: 0 auto;
		/*画像の上に余白*/
		margin-top:1.2%;
	}
	/*ポイント1の画像の幅*/
	.pc_point1_img{
		width:47%;
	}
	
	.pc_point2_img{
		width:40%;
	}
	
	.pc_point3_img{
		width:48%;
	}
	
	.pc_point4_img{
		width:38%;
	}
	
	.pc_point_3_4set{
		margin-top:2%;
	}
	
	/*PC-フロー図タイトル(画像)*/
	.pc_mirroring_flow_title{
		width: 20%;
		margin:0 auto;
		margin-top: 2%;
	}
	
	/*PC_バラバラのフロー図(画像)を横並びに*/
	.pc_fllow_text_bg{
	display: flex;	
	width: 960px;
	margin: 0 auto;
	/*図の上に余白*/
	margin-top: 2%;
	}
	
	.pc_fllow_text_bg p{
	padding: 0;
	text-align: left;
	}
	
	/*PC_バラバラのフロー図(liの中に入れたテキスト)*/
	/*<li>(divで内包した<p>と画像を内包)をrelativeに*/
	.pc_fllow_text_bg li{
    color: #fff;
    font-size:15px;
    font-weight: 500;
    position: relative;
	}
	
	/*フロー1個目のテキスト*/
	.pc_fllowtext_1{
    position: absolute;
    width: 170px;
    top:30px;
    left:34px;
	}
	/*フロー2個目のテキスト*/
    .pc_fllowtext_2{
    position: absolute;
    width: 170px;
    top:30px;
    left:78px;
	}
	
	/*フロー3個目のテキスト*/
    .pc_fllowtext_3{
    position: absolute;
    width: 170px;
    top:30px;
    left:80px;
	color: #000;
	}
	
	
	
/*「お電話にてご予約はこちらから」の文字*/
.coll{
	letter-spacing: 2px;
	font-weight: 600;
	font-size:15px;
}
.coll p{
	padding: 0;
	/*「お電話にてご予約はこちらから」の文字の上の余白詰める*/
	margin-top: -5%;
}


/*問い合わせ_リンクボタン*/
.toiawase_btn {
	display: block;
	margin: 0 auto;
	/*角丸*/
	border-radius: 30px;
	/*枠線*/
    border: solid 2px #F60E2A;
	/*ボタン内のテキスト中央*/
    text-align: center;
    letter-spacing: 2px;
    font-weight: 700;
	min-width:200px;
	max-width: 320px;
	margin-bottom: 4%;
	/*ボタン上の余白詰める*/
	margin-top: -1%;
}

/*ボタンの文字色*/
.toiawase_btn a{
	color: #F60E2A;
	font-weight: 700;
	/*枠線内の上下の余白*/
	padding-top: 12px;
	padding-bottom: 12px;
	display:block;
	margin: 0 auto;
		
}
	
.toiawase_btn a:hover{
	border-radius: 20px;
    background-color: #ef5869;
    color: #fff;
	/*角丸*/
	border-radius: 30px;
	}
	
	
	
	
	
.triangle_aftertext{
	font-size:15px;	
}
	
.toiawase p{
	margin: 0 auto;
	text-align: center;
}

.toiawase a:hover{
	border-radius: 20px;
    background-color: #ef5869;
    color: #fff;
}

.toiawase ul{
	margin: 0 auto;
}

/*ボタン内三角の画像*/
.triangle img{
	width: 10px;
	height: auto;
	/*▶の位置調整*/
	margin-top: -1px;
}
	
	
	.pc_route_map_wifi{
		background-color: #FFF5ED;
		padding-top: 1%;
		margin-top: -1%;
		padding-bottom: 2%;
	}
	
	
	.sugooto_text_bottom{
		padding-bottom:2%;
	}
	
	
	
	
	
	
	
	
	
	
	
	/*フッターの背景色ベタ*/
	footer{
	background-color: #FF3049;
	height:230px;
	}

	
	

.footer_logo img{
	margin-top:40px;
	margin-bottom:60px;
}


footer ul{
	display: flex;
	justify-content: center;
}


footer ul li{
	width: 35px;
	margin-left: 10px;
}

footer ul li:first-child{
	margin-left: 0px;
}


footer p small{
	color:white;
	letter-spacing: 3px;
}
	

	
	
/*========= /*動き_モバイル注文以降のエリアの背景色ベタ===============*/

.background-color_2{
  animation: bgchange 5s ease infinite;/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
}

@keyframes bgchange{
      0%   {background:#FFF5ED;}/*変化させたい色*/
      25%  {background:#F5D3CF;}/*変化させたい色*/
      50%  {background:#FFF5ED;}/*変化させたい色*/
      75%  {background:##F5D3CF;}/*変化させたい色*/
      90%  {background:#FFF5ED;}/*変化させたい色*/
      100% {background:##F5D3CF;}/*変化させたい色*/
 }
	
	
/*=========動き_コロナ部分の背景グラデ ===============*/

.pc_corona_area{
  width: 100%;
  height: 500px;
  background:linear-gradient(30deg, #1396e1,#9fd4de,#02b2d2);/*グラデーションを定義*/
  background-size: 200% 200%;/*サイズを大きくひきのばす*/
  animation: bggradient 5s ease infinite;
  display: block;
 padding-top: 90px;
}

@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


	.corona_area{
		display: none;
	}
	.background-color_image{
		display: none;
	}

	
	
	
	}/* / @media screen and (min-width:1024px)*/

/* ------------------------------------------------------------------------------------
                                 /@end デスクトップ/lg(1024px～)
---------------------------------------------------------------------------------------- */





/*------------------------2025/6/27 モーニングサービス終了-------------------------*/



.morning_end {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 30px 80px;
	box-sizing: border-box;
	border: solid 1px #FF3049;
  }	

.morning_end p {
	margin-bottom: 10px;
	padding: 0;
	text-align: left !important;
  }	

  .morning_end_tit {
	text-align: center !important;
	font-size: 160%;
	font-weight: 500;
	padding: 20px 0 30px;
	color:#FF3049;
  }

  section.order {
    padding-bottom: 60px;
}

  /*768px以下*/
@media screen and (max-width: 768px){
  .morning_end {
	width: 90%;
	margin: 0 auto;
	padding: 30px 20px;
	box-sizing: border-box;
	border: solid 1px #FF3049;

  }

  .morning_end p {
	margin-bottom: 10px;
	padding: 0;
	text-align: left !important;
  }

  .morning_end_tit {
	text-align: center !important;
	font-size: 140%;
	font-weight: 500;
	padding: 20px 0 30px;
	color:#FF3049;
  }
}