@charset "Shift_JIS";


/************************************************************
  ▼▼▼▼▼▼▼▼▼▼▼▼  PC用（共通設定）  ▼▼▼▼▼▼▼▼▼▼▼▼
************************************************************/

/* ---------- 基本 ---------- */
.ts_wrapper {
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: 100%;
}
:where(.ts_wrapper) a { color: inherit; text-decoration: none; }
:where(.ts_wrapper) a:hover { opacity: 0.8; } /* マウスを乗せたとき少し薄くする */
:where(.ts_wrapper) img { border: 0; vertical-align: bottom; }
.ts_clear { clear: both; }


/* ---------- ページ全体の幅 ---------- */
.ts_wrapper { width: 100%; overflow: hidden; }
.ts_wrap_content { width: 100%; }              /* 外枠：画面幅いっぱい（トップ画像を横幅100%にするため） */
.ts_item01 { width: 100%; padding-bottom: 6%; } /* いちばん下の余白 */

.ts_Ttl_top img { display: block; width: 100%; height: auto; } /* トップ画像：横幅100% */

.ts_bk_1, .ts_bk_2, .ts_bk_3, .ts_bk_4 {
	width: 100%;
	max-width: 1000px;  /* ★PCのコンテンツ幅（トップ画像より下） */
	margin-left: auto;
	margin-right: auto;
}


/* ---------- 文字サイズ（PC） ---------- */
.ts_ttl-en    { font-size: 22px; }   /* 英語の見出し（DECORATE FOR CHRISTMAS など） */
.ts_Lead_top  { font-size: 12px; }   /* 説明文 */
.ts_lead-sub  { font-size: 12px; }   /* HOLIDAY AT HOME の説明文 */
.ts_btn-txt   { font-size: 15px; }   /* リンク（HOLIDAY SWEETS ALL など） */


/* ---------- 文字のデザイン ---------- */
.ts_ttl-en {
	margin: 0;
	font-family: 'Century Gothic', 'Futura', 'Avenir', 'Poppins', sans-serif;
	font-weight: 800;       /* 太さ */
	line-height: 1.3;       /* 行の高さ */
	letter-spacing: 0.01em; /* 字間 */
	color: #000;
}
.ts_Lead_top {
	margin: 0;
	font-family: 'Century Gothic', 'Futura', 'Avenir', 'Poppins', sans-serif;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: #000;
}
.ts_lead-sub {
	font-weight: normal;
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: #000;
	text-wrap: balance; /* 折り返したとき行の長さをそろえる */
}

/* リンク（テキスト＋右に線） */
.ts_btn-txt, .ts_area .ts_btn-txt {
	display: flex;
	align-items: center;
	justify-content: flex-end;
font-family: 'Century Gothic', 'Futura', 'Avenir', 'Poppins', sans-serif;
	font-weight: 800;
	letter-spacing: 0.05em;
	line-height: 1;
	color: #000;
	white-space: nowrap;
}
.ts_btn-txt::after {
	content: "";
	display: block;
	width: 2.8em;         /* 線の長さ */
	height: 1px;          /* 線の太さ */
	background: #000;
	margin-left: 0.9em;   /* 文字と線のすき間 */
}


/* ---------- 画像の置き方（共通） ---------- */
.ts_pic { display: block; width: 100%; }
.ts_pic img { width: 100%; height: auto; display: block; }
.ts_area { position: relative; width: 100%; }               /* 画像を重ねて置くエリア */
.ts_area .ts_pos { position: absolute; display: block; }        /* エリア内の画像・文字 */
.ts_area .ts_pos img { width: 100%; height: auto; display: block; }
.ts_area .ts_pos.ts_btn-txt { display: flex; }                  /* エリア内のリンク（MUG ALL など）は文字と線を横並びにする */


/************************************************************
              1
************************************************************/
.ts_bk_1 { margin-top: 0; }
.ts_bk_1 .ts_ttl-en { margin: 3.9% 0 0 7.6%; }  /* 上・右・下・左 */
.ts_bk_1 .ts_Lead_top { margin: 1.3% 0 0 7.6%; }
.ts_bk_1 .ts_btn-ornament { margin: -4.2% 5.7% 0 0; }  /* HOLIDAY SWEETS ALL */

.ts_area-1 { aspect-ratio: 1080 / 575; } /* エリアの縦横比（幅 / 高さ） */
.ts_pos-wreath1 { left: 5.185%; top: 24.348%; width: 27.5%; }
.ts_pos-wreath2 { left: 17.222%; top: 58.783%; width: 27.5%; }
.ts_pos-orn-r   { left: 51.389%; top: 10.435%; width: 43.241%; }
.ts_pos-copy-1  { left: 51.4%;   top: 75.652%; width: 47.5%; }
.ts_pos-copy-1 .ts_ttl-en { margin: 0 0 3.5%; }
.ts_pos-copy-1 .ts_ttl-en { font-size: 23px; } /* HOLIDAY AT HOME の見出しだけ +1px（PC） */

.ts_area-2 { aspect-ratio: 1080 / 430; }
.ts_pos-orn-l  { left: 12.778%; top: 20.233%; width: 43.241%; }
.ts_pos-advent { left: 70.185%; top: 8.605%;  width: 19.722%; }


/************************************************************
              2
************************************************************/
.ts_bk_2 { margin-top: 3.5%; }
.ts_bk_2 .ts_pic-sweets { margin: 0 0 0 7.6%; width: 84.8%; }
.ts_bk_2 .ts_ttl-en { margin: 5% 0 0 8.9%; }
.ts_bk_2 .ts_Lead_top { margin: 0.8% 0 0 8.9%; }
.ts_bk_2 .ts_btn-sweets { margin: 1.2% 5.7% 0 0; }  /* HOLIDAY SWEETS ALL */

.ts_area-3 { margin-top: 2.1%; aspect-ratio: 1080 / 820; }
.ts_pos-mug     { left: 63.519%; top: 7.317%;  width: 28.889%; }
.ts_pos-stollen { left: 34.074%; top: 35.61%;  width: 31.759%; }
.ts_pos-mug-all { right: 1.7%;   top: 67.317%; height: 10.244%; } /* MUG ALL */


/************************************************************
              3
************************************************************/
.ts_bk_3 { margin-top: 5.5%; }
.ts_bk_3 .ts_pic-table { margin: 0 0 0 6%; width: 87.4%; }
.ts_bk_3 .ts_ttl-en { margin: 4.5% 0 0 3.5%; }
.ts_bk_3 .ts_Lead_top { margin: 0.8% 0 0 3.5%; }
.ts_area-5 { margin-top: 5%; aspect-ratio: 451 / 171; }
.ts_pos-table-all-img { left: 3.5%; top: 0; width: 57.4%; }
.ts_pos-table-all { right: 3.1%; top: 89.7%; height: 10%; } /* TABLE WERE ALL */


/************************************************************
              4
************************************************************/
.ts_bk_4 { margin-top: 4.5%; }
.ts_area-6 { aspect-ratio: 1080 / 500; }
.ts_pos-gift1  { left: 64.537%; top: 3%;  width: 29.259%; }
.ts_pos-copy-4 { left: 9.1%;    top: 66%; width: 60%; }

.ts_area-7 { margin-top: 3%; aspect-ratio: 1080 / 940; }
.ts_pos-gift2     { left: 5.741%; top: 2.021%;  width: 92.13%; }
.ts_pos-all-items { right: 11.8%; top: 85.511%; height: 10.532%; } /* ALL ITEMS */


/* ---------- PC / SP 表示切り替え ---------- */
.pc { display: block; }
.sp { display: none; }


/************************************************************
  ▼▼▼▼▼▼▼▼▼▼▼▼  SP用（750px以下）  ▼▼▼▼▼▼▼▼▼▼▼▼
  PCと違う部分だけ、ここに書きます。
************************************************************/
@media only screen and (max-width:750px) {

	/* ---------- ページ全体の幅 ---------- */
	.ts_wrap_content { max-width: 650px; margin: 0 auto; } /* SPの外枠の最大幅 */

	/* ---------- 文字サイズ（SP） ----------
	   clamp(最小, 画面幅に合わせた値, 最大) の形です。
	   例）clamp(13px, 3vw, 19px) は、画面幅の3%（ただし13pxから19pxの間） */
	.ts_ttl-en    { font-size: clamp(15px, 3vw, 19px); }
	.ts_pos-copy-1 .ts_ttl-en { font-size: clamp(16px, calc(3vw + 1px), 20px); } /* HOLIDAY AT HOME の見出しだけ +1px（SP） */
	.ts_Lead_top  { font-size: clamp(10px, 1.85vw, 12px); line-height: 1.6;}
	.ts_lead-sub  { font-size: clamp(10px, 1.85vw, 12px); margin-top: -1%; line-height: 1.6;}
	.ts_btn-txt   { font-size: clamp(11px, 2.08vw, 12.8px); }
    .ts_bk_1 .ts_btn-ornament { margin: 1.7% 0% 0 0; }  /* HOLIDAY SWEETS ALL */	
	
    .ts_bk_2 .ts_btn-sweets { margin: 2.5% 5.7% 0 0; }  /* HOLIDAY SWEETS ALL */	
	
.ts_area-2 { margin-top: 5%;}	
	
.ts_pos-copy-4 { left: 4.1%;    top: 60%; width: 60%; }	

	/* ---------- 画像の位置（SPだけ変えたいもの） ---------- */
	.ts_pos-advent { top: 24%; } /* アドベントカレンダーの写真：説明文と重ならないよう下げる（PCは上の 8.605%） */
	.ts_pos-all-items { right: 11.8%; top: 86.511%; height: 10.532%; } /* ALL ITEMS */

	/* ---------- PC / SP 表示切り替え ---------- */
	.pc { display: none; }
	.sp { display: block; }

}