@charset "utf-8";

/* CSS Document */

/* ======================================================
	[small]
	@import"../css/test_line.css";
====================================================== */


:root
{
	--font				: 3.5vw;

	--logo_h		: 2em;
	--gap			: 1.5em;
	--padding_tb	: 3em;
}


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

/*
	スライドメニュー表示
	→library.php UA判定へ
*/

/* 行き来するボタン */
.SwitchingBtnPC
{
}

.SwitchingBtnSP
{
	display: none;
}

.Drawer
{
	display: block;
}

:is(.WrapM, .WrapS)
{
	max-width: initial;
	padding-left: var(--padding);
	padding-right: var(--padding);
}

.WrapM .WrapM
{
	padding: 0;
}

/* ------------------------------------------------------------------------------------------------------------
	組版　解除 */


/* ------------------------------------------------------------------------------------------------------------
	固定幅・最低幅　解除 */


/* ------------------------------------------------------------------------------------------------------------
	削除 */
.GlobalMenu,
.Header .Access
{
	display: none;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}


/* ============================================================================================================
	<txt>
------------------------------------------------------------------------------------------------------------ */
/* [160910] PC以外で余白にゴーストが出るのを防ぐ ※fixed非対応 */
body
{
	background-attachment: scroll;
}


h2
{
}

h2>b
{
	font-size: 1.5em;
}

h3
{
}

h3>b
{
	font-size: 1.2em;
}

h4
{
}

h4>b
{
	font-size: 1.2em;
}


:is(h2, h3, h4, h5, h6):is(.plain, .small, .mini)>b
{
	font-size: 1.2em;
}

/* ============================================================================================================
	<box>
------------------------------------------------------------------------------------------------------------ */
.ColorBtn
{
	min-width: initial;
	width: 100%;
}

iframe
{
	aspect-ratio: 1;
}


/* ============================================================================================================
	<table>
------------------------------------------------------------------------------------------------------------ */
table, thead, tbody, tfoot, tr, th, td
{
	display: block;
}

thead, tbody, tfoot, tr, th, td
{
	width: 100%;
}

table
{
}

th
{
}

td
{
}

tbody th
{
	max-width: initial;
	min-width: initial;
	width: auto;
}


/* ------------------------------------------------------
	<table> 横スクロール */
.table_scroll
{
	overflow-x: scroll;
}

.table_scroll table
{
	display: table;
	width: 200vw;
}
/*
	-webkit-overflow-scrolling: touch;
	table-layout: fixed;
	width: 100%;
	white-space: nowrap;
	word-break: break-all;
*/

.table_scroll tr
{
	display: table-row;
}

.table_scroll :where(th, td)
{
	display: table-cell;
}

.table_scroll th
{
	max-width: 20vw;
}

.table_scroll td
{
	max-width: 40vw;
}


/* ============================================================================================================
	<form>
------------------------------------------------------------------------------------------------------------ */
select,
textarea,
input:is([type="text"], [type="tel"], [type="email"], [type="date"])
{
	font-size: 16px;
}
/*
	font-size: var(--font);
*/
	
input:is([type="text"], [type="tel"], [type="email"])
{
	padding: 0 0.25em;
}

input[type="date"]
{
	padding: 0em;
}

select
{
	max-width: calc(100vw - (var(--padding) * 2));
}

td select:not([class*="Width"])
{
	width: 100%;
}

option
{
	font-size: 0.8em;
	white-space: inherit;
}

/*
.BtnBg
{
	display: grid;
	justify-content: initial;
}

.BtnBg>button[class*="Back"]
{
	justify-self: start;
}
.BtnBg>button[class*="OK"]
{
	justify-self: end;
}
*/

.form table .list
{
	grid-template-columns: 1fr;
}
.form table .list label
{
	display: flex;
}

/* その他 */
.form table .list .hoka,
.form table .list .hoka_box
{
	grid-column: initial;
}

.form table .list .hoka_box
{
	margin-top: -0.5em;
}

/* 日付選択 */
.form table .day_box
{
	display: grid;
	grid-template-columns: repeat(2, auto);
}
.form table .day_box>input[type="date"]
{
	grid-column: span 2;
}


/* ------------------------------------------------------
	<input>装飾
*/
/*
label.input_btn .title:before,
label.input_btn .title:after
{
	font-size: 2em;
}

label.input_btn .title:after
{
	margin-top: -0.6em;
}

label.input_btn.checkbox input:checked ~ .title:after
{
}
*/

/* ============================================================================================================
	SNS
------------------------------------------------------------------------------------------------------------ */
.SNS
{
}

:is(.Header, .Footer) .SNS
{
	gap: calc(var(--font) / 1);
}


/* ============================================================================================================
	logo
------------------------------------------------------------------------------------------------------------ */
.Logo
{
}

.Footer .Logo
{
	align-items: center;
}


.Catch
{
}

.Catch br
{
	display: none;
}


/* ============================================================================================================
	電話
------------------------------------------------------------------------------------------------------------ */
a[href^="tel:"].anchor
{
}
/*
	flex-direction: row;
	align-items: baseline;
	gap: 0;
*/

.ClassTel
{
}

.footer_contact .ClassTel
{
}

.footer_contact .ClassTel .phone
{
	font-size: 2em;
	margin-bottom: 0.5em;
}

.footer_contact .ClassTel .facsimile
{
	font-size: 1.2em;
}


/* ============================================================================================================
	お問い合わせ
------------------------------------------------------------------------------------------------------------ */
.ClassContact
{
}

.ContactTxt .number
{
	font-size: 7vw;
}

.Header .ClassContact
{
}

.Header .ClassContact a
{
	padding: 0.5em;
}

.Header .ClassContact .title_set
{
	display: none;
}


.Contact .form .main .table_toiawase .list
{
	column-count: 1;
}


/* ============================================================================================================
	地図
------------------------------------------------------------------------------------------------------------ */
.MapNaviBtn
{
	flex-direction: column;
	gap: 1em;
}

/* [index]	地図・店舗情報 */
.Index .Map
{
}

.Index .AccessMap
{
	flex-direction: column;
	gap: 0;
}

.Index .AccessMap .data>.Wrap
{
	padding-top: var(--padding_tb);
	padding-bottom: var(--padding_tb);
}


/* ===========================================================================================================
	流れ
------------------------------------------------------------------------------------------------------------ */
.Step
{
	--step_padding	: 1em;
	--step_icon		: 5em;
}

.Step ol>li>.Wrap
{
	gap: 1em;
}

.Step .step_body
{
	flex-direction: column;
}

.Step .step_main
{
	margin-left: 0;
}


/* ============================================================================================================
	開け閉め
------------------------------------------------------------------------------------------------------------ */
.Change
{
	--change_btn_padding	: 1.5em;
}

.Change .details .detail,
.Change .details label ~ .detail
{
	width: calc(100% - var(--change_btn_padding));
}


/* ============================================================================================================
	calendar
------------------------------------------------------------------------------------------------------------ */
.Calendar>*:not(.CalMark)
{
	flex-wrap: wrap;
	gap: 2em 1em;
}
/*
	flex-direction: column;
*/

.Calendar>*:not(.CalMark)>*
{
	width: calc((100% - 1em) / 2);
}


/* ============================================================================================================
	<header>
------------------------------------------------------------------------------------------------------------ */
.Header
{

}


#Header>.Wrap
{
	margin-right: calc(var(--drawer_toggle_size) + (0.5em * 2));
}


.Header .Navi>*
{
	flex-direction: column;
	gap: calc(var(--font) / 1.5);
}

.pagetitle
{
	height: 25vw;
}

.pagetitle .title
{
}

.pagetitle .title .name
{
	font-size: 2em;
}


/* ============================================================================================================
	<global menu>
------------------------------------------------------------------------------------------------------------ */
.Header .GlobalMenu
{
	display: none;
	opacity: 0;
}


/* ============================================================================================================
	side・固定
------------------------------------------------------------------------------------------------------------ */
/*
.sideArea
{
	top: initial;
	left: 0;
	bottom: 0;
	opacity: 0;
}

.sideArea>.Wrap
{
	flex-direction: row;
	width: 100%;
}

.sideArea>.Wrap>*
{
	width: 100%;
}


.scroll .sideArea
{
	opacity: 1.0;
}
*/



/* ============================================================================================================
	<footer>
------------------------------------------------------------------------------------------------------------ */
.scroll_btn
{
}


.footer_contact
{
}

.footer_contact a:not([href^="tel:"])
{
}
/*
	pointer-events: none;
*/

.footer_contact .body>.Wrap
{
	flex-direction: column;
}

.footer_contact .main
{
	padding-left: var(--padding);
	padding-right: var(--padding);
}


.Footer
{
}


.Footer .Info
{
	text-align: center;
}

.Footer .Info>.Wrap
{
	display: flex;
	flex-direction: column;
	align-items: center;
}
/*
*/

.Footer .Info .head
{
}

.Footer .Info .head .Navi
{
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}

.Footer .Info .head .Navi :is(.tel, .fax)
{
	justify-content: center;
}


/* ============================================================================================================
	SliderGallery・共通
------------------------------------------------------------------------------------------------------------ */
.Gallery.Slider
{
	max-width: 100vw !important;
}

.Gallery.Slider .slick-dots
{
	gap: 0.5em 1em;
	flex-wrap: wrap;
}


/* ============================================================================================================
	index
------------------------------------------------------------------------------------------------------------ */
/* [ - sp] */
.Index .Top .Lead .Catch
{
	font-size: 6vw;
}


.Index .Ct
{
}

.Index .Ct :is(a, .a):not(.ColorBtn)
{
	gap: var(--gap);
}

.Index .Ct.contents_list
{
}

.Index .Ct.contents_list .Flex
{
}

.Index .Ct.contents_list .Flex>*
{
	flex-direction: column;
}


/* ============================================================================================================
	お知らせ
------------------------------------------------------------------------------------------------------------ */
.News
{
}

.News .List
{
	display: block;
	min-width: initial;
}

.News .List a
{
	flex-direction: column;
	gap: 1em;
}

.News .List .data
{
	flex-direction: column;
	gap: 0;
}

.News .List .data :is(.Time, .list_main)
{
	width: auto;
}

.News .List .data .title
{
	width: auto;
}

.News .list_footer
{
	margin-left: auto;
	margin-right: 0;
}


.NewsDetail article .Gallery>ul
{
	grid-template-columns: repeat(2, 1fr);
}


/* ============================================================================================================
	メニュー
	menu.php
------------------------------------------------------------------------------------------------------------ */
.Menu
{
}

.Menu .grand_menu
{
}

.Menu .grand_menu .Gallery
{
}

.Menu .grand_menu .Gallery>*
{
	flex-direction: column;
}

.Menu .grand_menu .Gallery>*>*
{
	width: 100% !important;
}


/* ============================================================================================================
	店内紹介
	floor.php
------------------------------------------------------------------------------------------------------------ */
.Floor
{
}

.Floor .gallery
{
	--floor_gallery_img_w			: 100%;
	--floor_gallery_main_padding	: 3em;
}

.Floor .gallery .Item .Img
{
	margin-bottom: -3.5em;
}

.Floor .gallery .Item:nth-of-type(odd) .main,
.Floor .gallery .Item:nth-of-type(even) .main
{
	left: initial;
	right: initial;
	padding: 1.5em 1.5em 0 1.5em;
}

.Floor .gallery .Item .main
{
	position: relative;
	top: initial;
	width: auto;
	transform: none;
	margin-left: var(--padding);
	margin-right: var(--padding);
}


/* ============================================================================================================
	会社概要
	aboutus.php
------------------------------------------------------------------------------------------------------------ */
.Aisatsu
{
}

.Aboutus .Aisatsu
{
	--aisatu_gap	: calc(var(--font) * 3);
	--owner_img_w	: 10em;
}

.Aboutus .Img.Owner
{
}

.Aboutus .Img.Owner img
{
	float: left;
	shape-outside: margin-box;
	margin-right: 1.5em;
	margin-bottom: 0.5em;
}

.Aboutus .Img.Owner+.Data
{
	width: auto;
}

.Aboutus .Aisatsu .main
{
}

.Aboutus .Aisatsu .main>.Wrap
{
	display: block;
}

.Aboutus .Data
{
	display: block;
}


.info_address>*>.Wrap
{
	flex-direction: column;
	gap: 0em;
}


/* ============================================================================================================
	プライバシーポリシー
	privacy.php
------------------------------------------------------------------------------------------------------------ */
.Privacy
{
}

.Privacy dl
{
}

.Privacy dt
{
}

.Privacy dd
{
	margin-left: 0;
}


/* ============================================================================================================
	サイトマップ
------------------------------------------------------------------------------------------------------------ */
.Sitemap
{
}

.Sitemap .body
{
	flex-direction: column;
}




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



/* ============================================================================================================
	<br>表示・非表示
*/
.pc,
.SuBR
{
	display: none;
	opacity: 0;
}

.sp,
.SBR
{
	display: block;
	opacity: 1.0;
}

.pc,
.SuDsp,
:is(th, td).SuDsp,
.TableBlock :is(th, td).SuDsp,
.kara
{
	display: none;
	opacity: 0;
}

.sp,
.SDsp
{
	display: inherit;
	opacity: 1.0;
}

/*
.SuBR
{
	display: none;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	border-width: 0;
	overflow: hidden;
}

.SBR
{
	display: block;
}

.SuDsp,
:is(th, td).SuDsp,
.TableBlock :is(th, td).SuDsp,
.kara
{
	display: none;
}

.SDsp
{
	display: inherit;
}
*/