@charset "UTF-8";

/* ==========================================================================
   layout.css — UIkit 2.27 置き換え用レイアウトユーティリティ

   temp_202005 で UIkit に依存していた以下のクラスを自前で実装したもの。
   UIkit 本体（uikit.min.css / uikit.min.js）は読み込まない。

     UIkit 2                        →  本ファイル
     ---------------------------------------------------------------
     .uk-container                  →  .container
     .uk-container-center           →  .container（margin:auto を内包）
     .uk-clearfix                   →  .clearfix
     .uk-list                       →  .list-plain
     .uk-hidden-small               →  .hide-sp
     .uk-visible-small              →  .only-sp
     .uk-offcanvas                  →  .drawer
     .uk-offcanvas-bar              →  .drawer-panel
     .uk-offcanvas-bar-flip         →  .drawer-panel-right
     .uk-offcanvas-page（html側）   →  .drawer-open（html側）
     data-uk-sticky / .uk-active    →  .sticky / .is-sticky
     .uk-touch（html側）            →  .is-touch（html側）

   数値は UIkit 2.27.2 の実装値をそのまま踏襲している（既存 style.css /
   products2020.css が前提にしているため、勝手に変えないこと）。
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. 基本スタイル（UIkit 2.27.2 base 相当）

   temp_202005 は uikit.min.css を {app_link_tag}（cmr.css / base.css）より
   後に読んでおり、段落・見出しの余白やリンク色などは UIkit の値が効いていた。
   UIkit を外した結果これらが抜け、行間・余白が詰まったため、値を移植する。
   本ファイルも {app_link_tag} より後・style.css より前に読まれるので優先順位は同じ。
   -------------------------------------------------------------------------- */
html {
	background: #fff;
	color: #444;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* 本文の行間。旧サイトは line-height 未指定（normal）だったが、
   フォールバックの游ゴシックでは normal ≒ 1.5 で表示されていた。
   Noto Sans JP の normal は約 1.45 と狭いため、明示的に 1.5 を指定する */
body {
	line-height: 1.5;
}

a {
	color: #ff7200;
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: #059;
	text-decoration: underline;
}

b,
strong {
	font-weight: 700;
}

em {
	color: #d05;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

audio,
canvas,
img,
svg,
video {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
}

iframe {
	border: 0;
}

blockquote,
figure {
	margin: 0;
}

address,
blockquote,
dl,
fieldset,
figure,
ol,
p,
pre,
ul {
	margin: 0 0 15px;
}

* + address,
* + blockquote,
* + dl,
* + fieldset,
* + figure,
* + ol,
* + p,
* + pre,
* + ul {
	margin-top: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 15px;
	font-weight: 400;
	color: #444;
	text-transform: none;
}

* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
	margin-top: 25px;
}

h1 { font-size: 36px; line-height: 42px; }
h2 { font-size: 24px; line-height: 30px; }
h3 { font-size: 18px; line-height: 24px; }
h4 { font-size: 16px; line-height: 22px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 18px; }

ol,
ul {
	padding-left: 30px;
}

ol > li > ol,
ol > li > ul,
ul > li > ol,
ul > li > ul {
	margin: 0;
}

dt {
	font-weight: 700;
}

dd {
	margin-left: 0;
}

hr {
	box-sizing: content-box;
	height: 0;
	margin: 15px 0;
	border: 0;
	border-top: 1px solid #ddd;
}

address {
	font-style: normal;
}

blockquote {
	padding-left: 15px;
	border-left: 5px solid #ddd;
	font-size: 16px;
	line-height: 22px;
	font-style: italic;
}

::selection {
	background: #39f;
	color: #fff;
	text-shadow: none;
}

[hidden],
template {
	display: none;
}


/* --------------------------------------------------------------------------
   1. コンテナ
   -------------------------------------------------------------------------- */
/* display: flow-root で中の float を内包する（旧 ::before / ::after の clearfix と同等）。
   中身の {$$ APP CONTENT $$} はシステム出力で float が残っているため必要。 */
.container {
	display: flow-root;
	box-sizing: border-box;
	width: auto; /* イージーマイショップ sys.css の .container{width:800px} を打ち消す */
	max-width: 980px;
	margin-inline: auto;
	padding-inline: 25px;
}

@media (min-width: 1220px) {
	.container {
		max-width: 1200px;
		padding-inline: 35px;
	}
}


/* --------------------------------------------------------------------------
   2. clearfix

   いずれも display: flow-root で float を内包する（疑似要素は使わない）。
   flex / grid を指定した要素に付いていても display が上書きされるだけで干渉しない。

   .cfx / .cf は公式テンプレート（c14-Cerulean）のペイン構造が使う clearfix。
   デザインフォルダ内のどの CSS にも定義がなく、
   イージーマイショップ側の共通CSSに依存していると思われるため、
   取りこぼしがないようここでも定義しておく。
   -------------------------------------------------------------------------- */
.clearfix,
.cfx,
.cf {
	display: flow-root;
}


/* --------------------------------------------------------------------------
   3. リスト（マーカー・余白のリセット）
   -------------------------------------------------------------------------- */
.list-plain {
	padding: 0;
	list-style: none;
}

.list-plain > li {
	display: flow-root;
}

.list-plain > li > :last-child {
	margin-bottom: 0;
}

.list-plain ul {
	margin: 0;
	padding-left: 20px;
	list-style: none;
}


/* --------------------------------------------------------------------------
   4. 表示切り替え（SP = 767px 以下。UIkit 2 の small と同じ境界）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.hide-sp {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.only-sp {
		display: none !important;
	}
}

/* ロゴ等の PC / SP 出し分け（{logo_pc_url} / {logo_sp_url} 用）

   公式テンプレート c14-Cerulean は .for_pc / .for_sp をヘッダーのロゴに使うが、
   デザインフォルダ内の CSS には .item_kind_table 配下のものしか定義がなく、
   グローバルな定義はイージーマイショップ側の共通CSSに依存している。
   見えない依存を避けるため、ここで明示的に定義する。
   境界は本テンプレートの他の指定（hide-sp / only-sp）と揃えて 767px とする。 */
@media (max-width: 767px) {
	.for_pc {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.for_sp {
		display: none !important;
	}
}


/* --------------------------------------------------------------------------
   5. ヘッダー固定（sticky）

   position:sticky は「親要素の領域内でしか固定されない」ため、
   高さが中身と同じ <header> の中では機能しない（スクロールで流れてしまう）。
   UIkit sticky と同じく position:fixed へ切り替え、
   抜けた分の高さをプレースホルダで補って表示のガタつきを防ぐ。
   切り替えは site.js が .is-sticky の付け外しで行う。
   -------------------------------------------------------------------------- */
.sticky {
	width: 100%;
}

.sticky.is-sticky {
	position: fixed;
	inset: 0 0 auto;
	z-index: 999;
}

/* 固定化した瞬間に本文がせり上がるのを防ぐ場所取り */
.sticky-placeholder {
	display: none;
}

.sticky-placeholder.is-active {
	display: block;
}

/* .is-sticky 時の見た目（背景・境界線・.hd-top 非表示）は
   style.css の「ヘッダー固定 active時」ブロックが持っている */


/* --------------------------------------------------------------------------
   6. ドロワー（SP メニュー / 旧 offcanvas）
   -------------------------------------------------------------------------- */
.drawer {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgb(0 0 0 / 0.1);
	touch-action: none;
}

.drawer.is-open {
	display: block;
}

.drawer-panel {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 1001;
	width: 270px;
	max-width: 100%;
	background: #333;
	overflow-y: auto;
	translate: -100% 0;
	transition: translate 0.3s ease-in-out;
}

.drawer-panel-right {
	inset: 0 0 0 auto;
	translate: 100% 0;
}

.drawer.is-open .drawer-panel {
	translate: 0 0;
}

/* ドロワーを開いている間は背面をスクロールさせない */
html.drawer-open,
html.drawer-open body {
	overflow: hidden;
}

/* アニメーションを嫌う環境では即時表示にする */
@media (prefers-reduced-motion: reduce) {
	.drawer-panel {
		transition: none;
	}
}


/* --------------------------------------------------------------------------
   7. アコーディオン
      フリーページ（#faq 等）の HTML は管理画面側にあり変更できないため、
      UIkit 由来の .uk-accordion-title / .uk-accordion-content という
      クラス名のみ互換維持する。開閉動作は site.js が担当する。
   -------------------------------------------------------------------------- */
.uk-accordion-title {
	cursor: pointer;
}

.uk-accordion-content[hidden] {
	display: none;
}


/* --------------------------------------------------------------------------
   8. 段組み（.cols / 旧 uk-grid・uk-width-*）

   使い方（フリーページ）:
     <div class="cols">
       <div class="w-md-2-5 w-lg-1-3">…</div>
       <div class="w-md-3-5 w-lg-2-3">…</div>
     </div>

   - 子要素は既定で 1 行全幅（100%）。w-md-* は 768px 以上、w-lg-* は 960px 以上で効く。
   - 幅は --f（割合）から「割合 × 100% −（1 − 割合）× 間隔」で計算するので、
     1行の割合の合計が 1 になる組み合わせ（1/3×3、2/5＋3/5 等）なら gap 込みでぴったり収まる。
   - 縦方向の間隔は付けない（旧 uk-grid と同じ）。
   - 間隔：.cols 25px（1220px 以上 35px）／.cols-small 10px／.cols-large 35px（1220px 以上 50px）
   - .cols-2 … 子要素を常に 2 列にする（旧 uk-grid-width-1-2）
   - .cols-divider … 960px 以上で 2 つ目以降の子に区切り線を引く（旧 uk-grid-divider）
   -------------------------------------------------------------------------- */
.cols {
	--cols-gap: 25px;
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--cols-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1220px) {
	.cols {
		--cols-gap: 35px;
	}
}

.cols-small {
	--cols-gap: 10px;
}

.cols-large {
	--cols-gap: 35px;
}

@media (min-width: 1220px) {
	.cols-large {
		--cols-gap: 50px;
	}
}

.cols > * {
	--f: 1;
	box-sizing: border-box;
	flex: 0 0 calc(var(--f) * 100% - (1 - var(--f)) * var(--cols-gap));
	min-width: 0;
	margin: 0;
}

.cols > * > :last-child {
	margin-bottom: 0;
}

.cols-2 > * { --f: 0.5; }

.w-1-1 { --f: 1; }
.w-1-2 { --f: 0.5; }

@media (min-width: 768px) {
	.w-md-1-1 { --f: 1; }
	.w-md-1-2 { --f: 0.5; }
	.w-md-1-3 { --f: calc(1 / 3); }
	.w-md-2-3 { --f: calc(2 / 3); }
	.w-md-2-5 { --f: 0.4; }
	.w-md-3-5 { --f: 0.6; }
}

@media (min-width: 960px) {
	.w-lg-1-1 { --f: 1; }
	.w-lg-1-3 { --f: calc(1 / 3); }
	.w-lg-2-3 { --f: calc(2 / 3); }
	.w-lg-1-4 { --f: 0.25; }
	.w-lg-2-5 { --f: 0.4; }
	.w-lg-3-5 { --f: 0.6; }

	.cols-divider > * + * {
		padding-left: var(--cols-gap);
		border-left: 1px solid #ddd;
	}
}


/* --------------------------------------------------------------------------
   9. パネル（旧 uk-panel）
   -------------------------------------------------------------------------- */
.panel {
	display: flow-root;
	position: relative;
}

.panel > :last-child {
	margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   10. タブ（旧 uk-tab / uk-tab-center / uk-switcher）

   使い方（フリーページ）:
     <ul class="tab-nav" data-tabs="#tab-content">
       <li class="is-active"><a href="#">タブ1</a></li>
       <li><a href="#">タブ2</a></li>
     </ul>
     <ul id="tab-content" class="tab-panels">
       <li class="is-active">中身1</li>
       <li>中身2</li>
     </ul>
   切り替えは site.js の initTabs()。見た目の数値は UIkit 2.27.2 の値を踏襲。
   -------------------------------------------------------------------------- */
.tab-nav {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #ddd;
}

.tab-nav > li {
	position: relative;
	margin-bottom: -1px;
}

.tab-nav > li > a {
	display: block;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-bottom-width: 0;
	color: #ff7200;
	text-align: center;
	text-decoration: none;
}

.tab-nav > li + li > a {
	margin-left: 5px;
}

.tab-nav > li > a:hover,
.tab-nav > li > a:focus-visible {
	border-color: #f5f5f5;
	background: #f5f5f5;
	color: #059;
	outline: 0;
}

.tab-nav > li:not(.is-active) > a:hover,
.tab-nav > li:not(.is-active) > a:focus-visible {
	margin-bottom: 1px;
	padding-bottom: 7px;
}

.tab-nav > li.is-active > a {
	border-color: #ddd;
	border-bottom-color: transparent;
	background: #fff;
	color: #444;
}

.tab-panels {
	margin: 15px 0;
	padding: 0;
	list-style: none;
}

.tab-panels > :not(.is-active) {
	display: none;
}