@charset "UTF-8";

/* ==================================================
Page Base
================================================== */
:root {
	--font-jp: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	--font-en: "neuhan", sans-serif;
	--font-mix: "neuhan", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

/* Wrapper
------------------------------ */
.edit-format {
	font-family: var(--font-jp);
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.08em;
	color: #000;
	background: #fff;
	text-align: center;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-feature-settings: "palt" 1;
	font-feature-settings: "palt" 1;
	overscroll-behavior: none;
	overscroll-behavior-y: none;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

.edit-format img,
.edit-format svg {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.edit-format i,
.edit-format em {
	display: inline-block;
	font-style: inherit;
}


/* Font
------------------------------ */
.edit-format .font-jp {
	font-family: var(--font-jp);
	font-weight: 400;
	text-transform: initial;
}

.edit-format .font-en {
	font-family: var(--font-en);
	font-weight: 300;
	text-transform: initial;
	letter-spacing: 0.2em;
}


/* Links
------------------------------ */
.edit-format a {
	font-size: inherit;
}

.edit-format a img {
	/*transition: all 0.4s ease-out 0s;*/
	transition: var(--transition-def);
}

.edit-format a:hover img {
	opacity: 0.7;
}

.edit-format a:link { text-decoration: none; color: #444; }
.edit-format a:visited { text-decoration: none; color: #444; }
.edit-format a:hover { text-decoration: none; color: #444; }
.edit-format a:active { text-decoration: none; color: #444; }
.edit-format :focus { outline: 0; }

.edit-format a.link-txt:link { text-decoration: underline; color: #444; }
.edit-format a.link-txt:visited { text-decoration: underline; color: #444; }
.edit-format a.link-txt:hover { text-decoration: none; color: #444; }
.edit-format a.link-txt:active { text-decoration: none; color: #444; }
.edit-format .link-txt:focus { outline: 0; }


/* Reset
------------------------------ */
.edit-format {
	position: relative;
	/*width: 1080px;*/
	/* max-width: 1080px; */
	min-width: 320px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	.edit-format {
		max-width: 768px;
	}
}

/*html[data-browse-mode="S"] #edit-wrap {
	max-width: 640px;
}*/

/* Edit Sauce 編集用 ※サーバー上では無効 */
html:not([data-browse-mode="P"]) .pane-contents--container {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
}
/**/


.edit-format h1,
.edit-format h2,
.edit-format h3 {
	font-size: inherit;
	line-height: inherit;
	border: none;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: center;
	background: transparent;
	position: relative;
}


.edit-format .price {
	color: inherit;
	font-weight: inherit;
}


.bread li {
	/*display: inline-block;*/
	margin-bottom: 0.6em;
}


/* ==================================================
Page Head
================================================== */

/* Sample Code

<section id="page-head" class="mb-8">

<div id="head-visual" class="mb-6">
<img src="./yymmdd/a_main_pc.jpg" alt="" class="pc-only">
<img src="./yymmdd/b_main_sp.jpg" alt="" class="sp-only">
</div>

<div id="head-title">
<h2 class="txt-titel fz-regular fw600 mb-2">PAGE TITLE</h2>
<div class="txt-update font-en fz-xsmall mb-6">20YY.MM.DD. WEEK. UPDATE</div>

<p class="fz-regular">リード文</p>
</div>

</section>

*/

/* #page-head */
#page-head {
}


/* #head-visual  */
#head-visual {
}

#head-visual img {
}


/* #head-title */
#head-title {
	padding: 0 3%;
}

#head-title .txt-titel {
	line-height: 1.6;
	letter-spacing: 0.2em;
}

#head-title .txt-update {
	line-height: 1.2;
	letter-spacing: 0.24em;
}

#head-title p {
	line-height: 2;
}

@media screen and (max-width: 768px) {
	#head-title p {
		line-height: 1.6;
	}
}


/* ==================================================
Page Body
================================================== */
#page-body {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
    /* max-width: 800px; */
}

.page-title {
    font-family: neuhan, Yu Gothic, 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, sans-serif;
    font-size: 20px;
    font-weight: 400;
	letter-spacing: .3em;
    line-height: 2;
}
.page-title-sub {
	font-family: Yu Gothic, 游ゴシック, YuGothic, 游ゴシック体, メイリオ, Meiryo, sans-serif;
    text-align: center;
	display: block;
    font-size: 10px;
    letter-spacing: .1em;
}


/* ==================================================
Page Foot
================================================== */
#page-foot {
}


/* Banner Area
------------------------------ */
#banner-area {
	/*padding: 0 3%;*/
}

#banner-area ul {
	width: min(70%, 480px);
	margin: 0 auto;
}

#banner-area ul li {
}

#banner-area ul li:not(:first-child) {
	/*margin-top: clamp(24px, 12.571px + 3.571vw, 40px);*/
	margin-top: var(--clamp4);
}

#banner-area ul li a {
	display: block;
}

#banner-area ul li a img {
}


/* Topics Area
------------------------------ */

/* Sample Code

<div id="topics-area" class="">

<h3><span>other topics</span></h3>

<ul>
<li class="border"><a href="#"><img src="#" alt=""></a></li>
<li class="border"><a href="#"><img src="#" alt=""></a></li>
<li class="border"><a href="#"><img src="#" alt=""></a></li>
<li class="border"><a href="#"><img src="#" alt=""></a></li>
</ul>

</div>

*/

#topics-area {
	padding: 0 3%;
}

#topics-area h3 {
	width: min(100%, 800px);
	margin: 0 auto var(--clamp4);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

#topics-area h3::before,
#topics-area h3::after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #000;
}

#topics-area h3 > span {
	font-family: 'neuhan', sans-serif;
	font-size: 15px;
	line-height: 1.2;
	/*font-weight: 600;*/
	font-weight: 400;
	letter-spacing: 0.2em;
	padding: 0 4em;
	transform: translateY(-2px);
}


#topics-area ul {
	width: min(100%, 840px);
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
}

#topics-area ul li {
	width: 49%;
	margin-bottom: 2%;
	border: 1px solid #e2e2e2;
}

#topics-area ul li a {
	display: block;
}

#topics-area ul li a img {
}



/* Button Archives

※ページ下部に必ず設置

<div class="btn-archives">
<a href="https://etretokyo.jp/shop/pages/topics_index.aspx" class="type-archives">
<span class="font-en fz-small">CHECK ARCHIVES</span>
</a>
</div>
------------------------------ */
#btn-archives {
	margin-top: var(--clamp18);
	margin-bottom: var(--clamp8);
	margin-left: auto;
	margin-right: auto;
}

#btn-archives a.type-archives {
	text-decoration: none;
	line-height: 1.2;
	letter-spacing: 0.2em;
	display: block;
	padding: 14px 12px;
	border: 1px solid #000;
	width: clamp(200px, 80%, 280px);
	/* width: clamp(200px, 70%, 280px); */
	margin-left: auto;
	margin-right: auto;
	position: relative;
	transition: all 0.3s ease-in-out 0s;
	color: #000;
	background: #fff;
}

#btn-archives a.type-archives::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 12px;
	margin: auto 0;
	width: 6px;
	height: 6px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(-45deg);
	transition: all 0.3s ease-in-out 0s;
}

#btn-archives a.type-archives span {
	display: inline-block;
	position: relative;
}

#btn-archives a.type-archives:hover {
	color: #fff;
	background: #000;
}

#btn-archives a.type-archives:hover::after {
	border-color: #fff;
}


/* Button Normal

<div class="btn-block">
<a href="#" class="type-rectangle">
<span class="font-en fz-small">TEXT</span>
</a>
</div>
------------------------------ */
.edit-format .btn-block a,
.edit-format .btn-block a.type-rectangle {
	text-decoration: none;
	line-height: 1.2;
	letter-spacing: 0.2em;
	display: block;
	padding: 14px 12px;
	border: 1px solid #000;
	width: clamp(200px, 80%, 280px);
	margin-left: auto;
	margin-right: auto;
	position: relative;
	transition: all 0.3s ease-in-out 0s;
	color: #000;
	background: #fff;
	text-align: center;
}

/* Button size variation */
.edit-format .btn-block a.size-extra,
.edit-format .btn-block a.type-rectangle.size-extra {
	width: clamp(280px, 80%, 640px);
}
.edit-format .btn-block a.size-large,
.edit-format .btn-block a.type-rectangle.size-large {
	width: clamp(200px, 7.143rem + 26.79vw, 320px);
}
/* .edit-format .btn-block a.type-rectangle.size-regular {
	width: clamp(200px, 80%, 280px);
} */
.edit-format .btn-block a.size-small,
.edit-format .btn-block a.type-rectangle.size-small {
	width: clamp(160px, 8.661rem + 6.7vw, 190px);
}
.edit-format .btn-block a.size-xsmall,
.edit-format .btn-block a.type-rectangle.size-xsmall {
	width: 160px;
	padding: 14px 12px;
	font-size: var(--fz-regular);/*14*/
}
.edit-format .btn-block a.size-xxsmall,
.edit-format .btn-block a.type-rectangle.size-xxsmall {
	width: 130px;
	padding: 10px 12px;
	font-size: var(--fz-xsmall);/*12*/
}

/* sp */
@media screen and (max-width: 768px) {
	.edit-format .btn-block a.size-xsmall,
	.edit-format .btn-block a.type-rectangle.size-xsmall {
		width: 100px;    
		padding: 14px 12px 14px 12px;
		font-size: var(--fz-xxsmall); /*11*/
	}
	.edit-format .btn-block a.size-xxsmall,
	.edit-format .btn-block a.type-rectangle.size-xxsmall {
		width: 80px;
		padding: 10px 5px;
		font-size: var(--fz-xxsmall);/*11*/
	}
	
}

.edit-format .btn-block a:hover,
.edit-format .btn-block a.type-rectangle:hover {
	color: #fff;
	background: #000;
}

.edit-format .btn-block a.type-rectangle span {
	display: inline-block;
	position: relative;	
}

.edit-format .btn-block a.type-rectangle::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 12px;
	margin: auto 0;
	width: 6px;
	height: 6px;
	border-bottom: 1px solid #000;
	border-right: 1px solid #000;
	transform: rotate(-45deg);
	transition: all 0.3s ease-in-out 0s;
}

/* sp */
@media screen and (max-width: 768px) {
	.edit-format .btn-block a.size-xxsmall::after,
	.edit-format .btn-block a.type-rectangle.size-xxsmall::after {
		right: 8px;
	}
	.edit-format .btn-block a.type-rectangle.size-xxsmall span {
		padding-right: 7px;
	}
}

.edit-format .btn-block a.type-rectangle:hover::after {
	border-color: #fff;
}

/* .color-reverse */
.edit-format .btn-block a.type-rectangle.color-reverse {
	color: #fff;
	background: #000;
}

.edit-format .btn-block a.type-rectangle.color-reverse:hover {
	color: #000;
	background: #fff;
}

.edit-format .btn-block a.type-rectangle.color-reverse::after {
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}

.edit-format .btn-block a.type-rectangle.color-reverse:hover::after {
	border-color: #000;
}

/* ======== Button-black ======== */
.edit-format .btn-black a {
	text-decoration: none;
	line-height: 1.2;
	letter-spacing: 0.2em;
	display: block;
	padding: 14px 12px;
	border: 1px solid #000;
	width: clamp(200px, 80%, 280px);
	margin-left: auto;
	margin-right: auto;
	position: relative;
	transition: all 0.3s ease-in-out 0s;
	color: #fff;
	background: #000;
}

/* Button size variation */

.edit-format .btn-black a.size-extra {
	width: clamp(280px, 80%, 640px);
}
.edit-format .btn-black a.size-large {
	width: clamp(200px, 7.143rem + 26.79vw, 320px);
}
.edit-format .btn-black a.size-regular {
	width: clamp(200px, 80%, 280px);
}
.edit-format .btn-black a.size-small {
	width: clamp(160px, 8.661rem + 6.7vw, 190px);
}
.edit-format .btn-black a.size-xsmall {
	width: 160px;
	padding: 14px 12px;
	font-size: var(--fz-regular);/*14*/
}

/* sp */
@media screen and (max-width: 768px) {
	.edit-format .btn-black a.size-xsmall {
		width: 100px;    
		padding: 10px 12px 14px 12px;
		font-size: var(--fz-xxsmall); /*11*/
	}
}