@charset "UTF-8";

/* =========================================
   Google Fonts 読み込み (Urbanist・Noto Sans Japanese用)
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Train+One&display=swap');

/* =========================================
   1. 変数定義（PC: 768px以上を基準）
========================================= */
:root {
	/* --- カラー（色） --- */
	--color-black: #1F1D1D;     /* 見出し */
	--color-green: #54B6C0;  /* サブ見出し */
	--color-gray: #6E6E73;;   /* 本文 */
	--color-text-product1:#6E6E73;
	
  --color-heading: #1F1D1D;     /* 見出し */
  --color-subheading: #54B6C0;  /* サブ見出し */
  --color-text-body: rgb(110, 110, 115);   /* 本文 */
  --color-text-product1:#6E6E73;

  /* --- フォントファミリー --- */
/*  --font-yugothic: "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;*/
/*  --font-yugothic: "Hiragino Kaku Gothic ProN", "hiragino-kaku-gothic-pron", sans-serif;*/
  --font-yugothic: "Noto Sans JP", sans-serif;
  --font-urbanist: 'Urbanist', sans-serif;

	/* --- フォントサイズ（PC用） --- */
	--72-32:72px;
	--56-32:56px;
	--48-32:48px;
	--48-32w:48px;
	--32-24:32px;
	--28-21:28px;
	--28-17:28px;
	--21-17button:17px;
	--28-17en:28px;
	--21-17:19px;
	--21-17w:19px;
	--21-14:19px;
	--14-12:14px;
	--17-14:17px;
	
	
  --fz-heading: 52px;
  --fz-heading2: 45px;
  --fz-heading3: 32px;
  --fz-topheading: 52px;
  --fz-subheading: 28px;
  --fz-body0: 28px;
  --fz-body-en: 28px;
  --fz-body: 19px;
  --fz-body2: 19px;
/* --- フォントサイズ（PC用商品ページ） --- */
  --fz-product0: 72px;
  --fz-product1: 45px;
  --fz-product2: 17px;
  /* --- 余白（PC用商品ページ） --- */
  --space-bottom-96: 96px; 
  --space-bottom-80: 80px; 
  --space-bottom-64: 64px; 
  --space-bottom-48: 48px; 
  --space-bottom-40: 40px; 

  /* --- 余白（PC用） --- */
  --space-bottom-lg: 128px;     /* 大きな余白（見出し下・セクション下） */
}

/* =========================================
   2. 変数定義（スマホ: 768px未満で上書き）
========================================= */
@media screen and (max-width: 767px) {
  :root {
    /* --- フォントサイズ（スマホ用） --- */
	
	--72-32:32px;
	--56-32:32px;
	--48-32:32px;
	--48-32w:32px;
	--32-24:24px;
	--28-21:20px;
	--28-17:15px;
	--28-17en:16px;
	--21-17:15px;
	--21-17button:13px;
	--21-17w:15px;
	--21-14:14px;
	--17-14:14px;
	--14-12:12px;
	
  --fz-topheading: 32px;
  --fz-heading: 32px;
  --fz-heading2: 28px;
  --fz-heading3: 20px;
  --fz-subheading: 20px;
  --fz-body0: 20px;
  --fz-body-en: 15px;
  --fz-body: 15px;
  --fz-body2: 15px;
  /* --- 余白（スマホ用） --- */
  --space-bottom-lg: 70px; 


  /* --- フォントサイズ（スマホ用商品ページ） --- */
  --fz-product0: 32px;
  --fz-product1: 32px;
  --fz-product2: 15px;
  /* --- 余白（スマホ用商品ページ） --- */
  --space-bottom-96: 96px; 
  --space-bottom-80: 80px; 
  --space-bottom-64: 64px; 
  --space-bottom-48: 48px; 
  --space-bottom-40: 40px; 
	}
}

/* =========================================
   3. 全体（ベース）スタイル
========================================= */
body {
  font-family: var(--font-yugothic);
  color: var(--color-text-body);
  font-size: var(--fz-body);
  line-height: 1.6; /* 可読性を担保する標準的な行間 */
  margin: 0;
}

/* リンクのデフォルト色リセット（必要に応じて） */
a {
  color: inherit;
  text-decoration: none;
}

/* 余白設定 */

.margin-title {
  margin:0 0 15px 0;
}
.margin-title2 {
  margin:0 0 15px 0;
}
.margin-title3 {
  margin:0 0 5px 0;
}
.margin-title4 {
  margin:0 0 85px 0;
}
.margin-subtitle {
  margin:0 0 35px 0;
}
.margin-body {
  margin:0 0 40px 0;
}
.margin-96 {
  margin-bottom:96px;
}
.margin-80 {
  margin-bottom:80px;
}
.margin-64 {
  margin-bottom:64px;
}
.margin-48 {
  margin-bottom:48px;
}
.margin-40 {
  margin-bottom:40px;
}
	.margin-280-160 {
		margin-bottom:280px;
	}
	.margin-152-96 {
		margin-bottom:152px;
	}
	.margin-152-96top {
		margin-top:152px;
	}
	.margin-104-80top {
		margin-top:104px;
	}
	.margin-104-80 {
		margin-bottom:104px;
	}
	.margin-104-40 {
		margin-bottom:104px;
	}
	.margin-128-96 {
		margin-bottom:128px;
	}
	.margin-128-40 {
		margin-bottom:128px;
	}
	.margin-128-80 {
	margin-bottom:128px;
	}

	.margin-128-72 {
		margin-bottom:128px;
	}
	
	.margin-104-72 {
		margin-bottom:104px;
	}
	
	.margin-56-48 {
		margin-bottom:56px;
	}
	
	.margin-56-40 {
		margin-bottom:56px;
	}
		.margin-32 {
		margin-bottom:32px;
	}
	.margin-24 {
		margin-bottom:24px;
}
	.margin-16 {
		margin-bottom:2px;
}
	.margin-18 {
		margin-bottom:18px;
	}
.height-900-350 {
	height:700px;
}
	.pading-152-96 {
	padding:152px 20px 128px 20px;
	}
.pading-128-56radius {
	padding:128px 20px 128px 20px;
}



/* スマホ（767px以下）：余白設定 */
@media screen and (max-width: 767px) {
.margin-title {
  margin:0 0 15px 0;
}
.margin-title2 {
  margin:0 0 25px 0;
}
.margin-title3 {
  margin:0 0 5px 0;
}
.margin-title4 {
  margin:0 0 55px 0;
}
.margin-subtitle {
  margin:0 0 15px 0;
}
.margin-body {
  margin:0 0 15px 0;
}

.margin-96 {
  margin-bottom:96px;
}
.margin-80 {
  margin-bottom:80px;
}
.margin-64 {
  margin-bottom:64px;
}
.margin-48 {
  margin-bottom:48px;
}
.margin-40 {
  margin-bottom:40px;
	}
	.margin-280-160 {
		margin-bottom:160px;
	}
	.margin-152-96 {
		margin-bottom:96px;
	}
	.margin-152-80 {
		margin-bottom:80px;
	}
	.margin-152-96top {
		margin-top:96px;
	}
	
	.margin-128-96 {
		margin-bottom:96px;
	}
	
	.margin-128-80 {
		margin-bottom:80px;
	}
	.margin-128-40 {
		margin-bottom:40px;
	}
	.margin-104-80top {
		margin-top:80px;
	}
	.margin-104-80 {
		margin-bottom:80px;
	}
	.margin-104-40 {
		margin-bottom:40px;
	}
	.margin-128-72 {
		margin-bottom:72px;
	}
	.margin-104-72 {
		margin-bottom:72px;
	}
	
	.margin-56-48 {
		margin-bottom:48px;
	}
	
	.margin-56-40 {
		margin-bottom:40px;
	}
	.margin-32 {
		margin-bottom:32px;
	}
	.margin-24 {
		margin-bottom:24px;
	}
	.margin-18 {
		margin-bottom:18px;
	}
	.margin-16 {
		margin-bottom:2px;
	}
	.pading-128-56radius {
	padding:56px 20px 40px 20px;
	}
	.pading-152-96 {
	padding:96px 20px 40px 20px;
	}
	.height-900-350 {
	height:150px;
}
}




/* =========================================
   4. 文字コンポーネント（見た目のルール）
========================================= */


/* 72px 32px */
.font-jp-72-32 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--72-32);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 56px 32px */
.font-jp-56-32 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--56-32);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 56px 32px */
.font-en-56-32 {
  font-family: var(--font-urbanist);
  color: var(--color-heading);
  font-size: var(--56-32);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 48px 32px */
.font-jp-48-32 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--48-32);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}


/* 48px 32px W */
.font-jp-48-32w {
  font-family: var(--font-yugothic);
  color: #FFFFFF;
  font-size: var(--48-32w);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 32px 24px */
.font-jp-32-24 {
  font-family: var(--font-yugothic);
  color: var(--color-black);
  font-size: var(--32-24);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 28px 21px */
.font-jp-28-21 {
  font-family: var(--font-yugothic);
  color: var(--color-black);
  font-size: var(--28-21);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 28px 21px */
.font-jp-28-21g {
  font-family: var(--font-yugothic);
  color: var(--color-gray);
  font-size: var(--28-21);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 28px 17px */
.font-jp-28-17 {
  font-family: var(--font-yugothic);
  color: var(--color-gray);
  font-size: var(--28-17);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}


/* 21px 17px */
.font-jp-21-17 {
  font-family: var(--font-yugothic);
  color: var(--color-gray);
  font-size: var(--21-17);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}


/* 21px 17px W */
.font-jp-21-17w {
  font-family: var(--font-yugothic);
  color: #FFFFFF;
  font-size: var(--21-17w);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 21px 14px */
.font-jp-21-17b {
  font-family: var(--font-yugothic);
  color: var(--color-black);
  font-size: var(--21-17);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 21px 14px */
.font-en-28-17b {
  font-family: var(--font-urbanist);
  color: var(--color-green);
  font-size: var(--28-17en);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 14px 12px */
.font-jp-17-14 {
  font-family: var(--font-yugothic);
  color: var(--color-gray);
  font-size: var(--17-14);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 14px 12px */
.font-jp-14-12 {
  font-family: var(--font-yugothic);
  color: var(--color-gray);
  font-size: var(--14-12);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 14px 12px */
.font-jp-14-12footer {
  font-family: var(--font-yugothic);
  color: var(--color-gray);
  font-size: var(--14-12);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}


/* トップページ見出し英語 */
.top-heading {
  font-family: var(--font-urbanist);
  color: var(--color-heading);
  font-size: var(--fz-topheading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 3px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}


/* トップページ見出し日本語 */
.top-heading-jp {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--fz-heading2);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* トップページ見出し日本語 */
.top-heading-jp2 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--fz-heading3);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* productページ見出し日本語 */
.top-product0 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--fz-product0);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* productページ見出し日本語 */
.top-product1 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--fz-product1);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: 0px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* productページ見出し日本語 */
.top-product2 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--fz-product2);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  letter-spacing: 2px;
/*  margin-bottom: 5px;*/ /* 余白はユーティリティで制御するため初期化 */
}

.top-heading2 {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--fz-subheading);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
/*  margin-bottom: 0;*/ /* 余白はユーティリティで制御するため初期化 */
}

.top-subheading-en {
  color: #54B6C0;
  font-size: var(--fz-body-en);
  font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-weight: 600;
  letter-spacing: 0px;
}

/* メイン見出し */
.c-heading {
  font-family: var(--font-yugothic);
  color: var(--color-heading);
  font-size: var(--fz-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
/*  margin-bottom: 0;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* サブ見出し */
.c-subheading {
  font-family: var(--font-urbanist);
  color: var(--color-subheading);
  font-size: var(--fz-subheading);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
/*  margin-bottom: 0;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 本文 */
.c-body {
  font-family: var(--font-yugothic);
  color: var(--color-text-body);
  font-size: var(--fz-body);
  font-weight: 600;
  line-height: 1.6;
  margin-top: 0;
/*  margin-bottom: 0;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 本文 */
.c-body0 {
  font-family: var(--font-yugothic);
  color: var(--color-text-body);
  font-size: var(--fz-body0);
  font-weight: 600;
  line-height: 1.6;
  margin-top: 0;
/*  margin-bottom: 0;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 本文 */
.c-body2 {
  font-family: var(--font-yugothic);
  color: var(--color-text-body);
  font-size: var(--fz-body2);
  font-weight: 600;
  line-height: 1.6;
  margin-top: 0;
/*  margin-bottom: 0;*/ /* 余白はユーティリティで制御するため初期化 */
}

/* 本文用の段落（pタグ自体にデフォルトを適用する場合） */
p {
  margin-top: 0;
  margin-bottom: 1em; /* 段落同士の自然な隙間 */
}
p:last-child {
  margin-bottom: 0;
}

/* =========================================
   5. ユーティリティ（余白・レイアウトのルール）
========================================= */

/* 下部余白：大（PC:128px / スマホ:46px）を強制適用するクラス */
.u-mb-lg {
  margin-bottom: var(--space-bottom-lg) !important;
}

/* セクション自体に共通の余白ルールを敷く場合 */
.p-section {
  margin-bottom: var(--space-bottom-lg);
}
.p-section:last-child {
  margin-bottom: 0; /* 最下部の余分な余白を排除 */
}




/* カスタムLiquidの枠を突破して画面幅・高さいっぱいに広げる設定 */
.custom-video-hero {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw); /* 画面幅いっぱいに広げるための調整 */
}

.custom-video-hero video {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
object-fit: cover;
z-index: 1;
pointer-events: none; /* 動画へのクリックを無効化 */
}

/* テキストを見やすくするためのオーバーレイ（黒の半透明） */
.custom-video-hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0); /* 0.3の部分で暗さを調整（0で透明） */
z-index: 2;
}

/* =========================================
   ヒーロー動画の出し分け制御（PC/スマホ）
========================================= */
/* 基本設定（PC環境） */
.u-video-pc {
  display: block;
}
.u-video-sp {
  display: none;
}

/* スマホ環境（767px以下）での反転 */
@media screen and (max-width: 767px) {
  .u-video-pc {
    display: none;
  }
  .u-video-sp {
    display: block;
  }
}

/* 動画の上に乗せるコンテンツのスタイル */
.custom-video-content {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
text-align: center;
padding: 20px;
box-sizing: border-box;
}



@media screen and (min-width: 768px) {
.sppage {
display:none;
  }
}


@media screen and (max-width: 767px) {
.pcpage {
display:none;
  }
}


/* =========================================
   テキスト配置の切り替え用ユーティリティ
========================================= */

/* PC（基本設定）：中央揃え */
.u-text-switch {
  text-align: center;
}

/* スマホ（767px以下）：左揃えで上書き */
@media screen and (max-width: 767px) {
  .u-text-switch {
    text-align: left;
  }
}


.gray-radius980 {
width: 100%;
max-width:980px;
margin: 23px auto;
background-color: #F5F5F7;
border-radius: 80px;
}

.gray-radius1280 {
width: 100%;
max-width:1280px;
margin: 23px auto;
background-color: #F5F5F7;
border-radius: 80px;
}

.gray-radius {
width: 95%;
max-width:1280px;
margin: 23px auto;
background-color: #F5F5F7;
border-radius: 80px;
}

.white-radius980 {
	width: 95%;
	max-width:980px;
	text-align: center;
	margin: 60px auto;
	background-color: #FFFFFF;
	border-radius: 80px;
}

.white-radius {
	width: 95%;
	max-width:1280px;
	text-align: center;
	margin: auto;
	background-color: #FFFFFF;
	border-radius: 80px;
}

.taste-radius {
width: 95%;
max-width:1800px;
margin: 23px auto;
background-image: url(https://kwvxxp-at.myshopify.com/cdn/shop/files/istockphoto-1143641238-2048x2048_1.png?v=1777716313&width=2400);
background-repeat:no-repeat;
background-size:cover;
background-position:right;
border-radius: 80px;
}

/* スマホ（767px以下）：角丸調整 */
@media screen and (max-width: 767px) {
.gray-radius {
width: 100%;
background-color: #F5F5F7;
border-radius: 40px;
}
.white-radius {
width: 100%;
background-color: #FFFFFF;
border-radius: 40px;
}
.taste-radius {
width: 95%;
margin: auto;
background-image: url(https://kwvxxp-at.myshopify.com/cdn/shop/files/istockphoto-1143641238-2048x2048_1.png?v=1777716313&width=2400);
background-repeat:no-repeat;
background-size:cover;
background-position:right;
border-radius: 40px;
}

}


.gray-padding {
		padding:110px 30px 110px 30px;
}

.white-padding {
		padding:70px 30px 70px 30px;
}

/* スマホ（767px以下）：左揃えで上書き */
@media screen and (max-width: 767px) {
.gray-padding {
padding:30px 30px 1px 30px;
}
.white-padding {
padding:30px 30px 1px 30px;
}
}

.original-box-shadow {
font-size: var(--21-17button);
width: fit-content;
align-items: center;
justify-content: center;
color: #1F1D1D;
background-color: #FFFFFF;
font-weight: 600;
font-family: var(--font-yugothic);
letter-spacing: -1px;
padding: 12px 80px 12px 80px;
border-radius: 50px;
box-shadow: 2px 2px 8px 0px rgba(129, 129, 129, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
/*margin: 30px 0 0px 0;*/
}


/* =========================================
   横スクロールコンポーネント
========================================= */
.c-horizontal-scroll {
  width: 100%;
  max-width: fit-content;
  margin: 0 auto;
  position: relative; 
  overflow: hidden;   
}

.c-horizontal-scroll__list {
  display: flex;
  justify-content: flex-start; 
  gap: 20px; /* ★画像と画像の余白を20pxに統一 */
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;            
  -webkit-overflow-scrolling: touch; 
  padding-bottom: 20px; 
  scroll-behavior: smooth; 
}

.c-horizontal-scroll__list::-webkit-scrollbar {
  display: none;
}

/* =========================================
   アイテムと画像の設定（高さ基準に変更）
========================================= */
.c-horizontal-scroll__item {
  /* auto を min-content に変更します */
  width: min-content; 
  flex-shrink: 0; 
}

.c-horizontal-scroll__item img {
  /* 高さは拡張クラスで指定するためここでは削除 */
  width: auto;
  max-width: none;
  vertical-align: bottom;
}

/* =========================================
   高さ指定用の拡張クラス
========================================= */
/* 300px用の設定 */
.c-horizontal-scroll--300 .c-horizontal-scroll__item img {
  height: 300px;
}
/* 360px用の設定 */
.c-horizontal-scroll--380 .c-horizontal-scroll__item img {
  height: 380px;
}
/* 420px用の設定 */
.c-horizontal-scroll--420 .c-horizontal-scroll__item img {
  height: 420px;
}

/* 560px用の設定 */
.c-horizontal-scroll--560 .c-horizontal-scroll__item img {
  height: 560px;
}

/* 660px用の設定 */
.c-horizontal-scroll--660 .c-horizontal-scroll__item img {
  height: 660px;
}

/* 660px用の設定 */
.c-horizontal-scroll--650 .c-horizontal-scroll__item img {
  height: 650px;
}

/* スマホ（767px以下）：左揃えで上書き */
@media screen and (max-width: 767px) {
	/* 300px用の設定 */
.c-horizontal-scroll--300 .c-horizontal-scroll__item img {
  height: 300px;
}
/* 360px用の設定 */
.c-horizontal-scroll--380 .c-horizontal-scroll__item img {
  height: 380px;
}
/* 420px用の設定 */
.c-horizontal-scroll--420 .c-horizontal-scroll__item img {
  height: 388px;
}

/* 560px用の設定 */
.c-horizontal-scroll--560 .c-horizontal-scroll__item img {
  height: 560px;
}

/* 660px用の設定 */
.c-horizontal-scroll--660 .c-horizontal-scroll__item img {
  height: 330px;
	}
	
/* 660px用の設定 */
.c-horizontal-scroll--650 .c-horizontal-scroll__item img {
  height: 650px;
}	
	
}

/* =========================================
   横スクロールを示唆・操作する矢印
========================================= */
.c-horizontal-scroll__indicator {
  position: absolute;
  top: calc(50% - 10px); 
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(31, 31, 29, 0.7); 
  border: none;
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.c-horizontal-scroll__indicator.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.c-horizontal-scroll__indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.c-horizontal-scroll__indicator--right {
  right: 10px;
  animation: swipeSuggestRight 1.5s ease-in-out infinite;
}
.c-horizontal-scroll__indicator--right::after {
  left: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.c-horizontal-scroll__indicator--left {
  left: 10px;
  animation: swipeSuggestLeft 1.5s ease-in-out infinite;
}
.c-horizontal-scroll__indicator--left::after {
  left: 55%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

@keyframes swipeSuggestRight {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(-5px); }
}
@keyframes swipeSuggestLeft {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(5px); }
}

/* =========================================
   スマホ環境（767px以下）の上書き
========================================= */
@media screen and (max-width: 767px) {
  /* 300px版のスマホ表示（例：240pxに縮小） */
  .c-horizontal-scroll--300 .c-horizontal-scroll__item img {
    height: 240px; 
  }

  /* 560px版のスマホ表示（見切れ防止のため画面縦幅の60%を上限とする） */
  .c-horizontal-scroll--560 .c-horizontal-scroll__item img {
    max-height: 40vh; 
  }
}

/* =========================================
   スライダー全体枠の最大幅（max-width）を指定する拡張クラス
========================================= */

/* 1280px（明示的に指定したい場合用） */
.c-horizontal-scroll.c-horizontal-scroll--mw-1280 {
  max-width: 1280px;
}

/* 1080px */
.c-horizontal-scroll.c-horizontal-scroll--mw-1080 {
  max-width: 1080px;
}

/* 980px */
.c-horizontal-scroll.c-horizontal-scroll--mw-980 {
  max-width: 980px;
}

/* 800px */
.c-horizontal-scroll.c-horizontal-scroll--mw-800 {
  max-width: 800px;
}

/* =========================================
   背景画像コンポーネント（フィルター追加版）
========================================= */
.c-bg-content {
  /* 
    カンマ区切りで複数の背景を指定します。
    上に記述したもの（linear-gradient）が前面に重なります。
    rgba(0, 0, 0, 0.5) の 0.5 の数値を変更することで暗さを調整できます。
  */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), 
    url('https://kwvxxp-at.myshopify.com/cdn/shop/files/top5pc.jpg?v=1777974934');
  background-repeat: no-repeat; 
  background-size: cover;       
  background-position: center;  

  /* 以下のレイアウト設定は変更なし */
  width: 100%;
  padding:  80px 0px 120px 0px; 
/*  height: 500px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
/*  text-align: center;*/
}

/* スマホ（767px以下）*/
@media screen and (max-width: 767px) {


.c-bg-content {
  /* 
    カンマ区切りで複数の背景を指定します。
    上に記述したもの（linear-gradient）が前面に重なります。
    rgba(0, 0, 0, 0.5) の 0.5 の数値を変更することで暗さを調整できます。
  */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
    url('https://kwvxxp-at.myshopify.com/cdn/shop/files/top5pc.jpg?v=1777974934');
  background-repeat: no-repeat; 
  background-size: cover;       
  background-position: center;  

  /* 以下のレイアウト設定は変更なし */
  width: 100%;
  padding:  80px 0px 120px 0px; 
/*  height: 500px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
/*  text-align: center;*/
}


}
	
.c-bg-content2 {
  /* 
    カンマ区切りで複数の背景を指定します。
    上に記述したもの（linear-gradient）が前面に重なります。
    rgba(0, 0, 0, 0.5) の 0.5 の数値を変更することで暗さを調整できます。
  */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), 
    url('https://kwvxxp-at.myshopify.com/cdn/shop/files/top5pc_4cbb1d1d-d35d-40ba-983f-460f5f7549a3.jpg?v=1777982391');
  background-repeat: no-repeat; 
  background-size: cover;       
  background-position: center;  

  /* 以下のレイアウト設定は変更なし */
  width: 100%;
  padding: 80px 0px 120px 0px; 
  display: flex;
  justify-content: flex-end; /* 要素全体を「右寄せ」にする */
  align-items: center;
}


.c-full-bg {
  /* 背景画像・フィルターの設定 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0)), 
    url('https://cdn.shopify.com/s/files/1/0672/5327/2635/files/taste-bg2.jpg?v=1785814631');
  background-repeat: no-repeat; 
  background-size: cover;       
  background-position: center;  

  width: 100%;
/*  height: 500px;*/
  /* 上下左右の余白。左右の20pxはスマホ等で画面端に文字がくっつくのを防ぐため */
  display: flex;
  padding: 80px 0px 120px 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



/* スマホ（767px以下）*/
@media screen and (max-width: 767px) {

.c-full-bg {
  /* 背景画像・フィルターの設定 */
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), 
    url('https://cdn.shopify.com/s/files/1/0672/5327/2635/files/taste-bg2.jpg?v=1785814631');
  background-repeat: no-repeat; 
  background-size: cover;       
  background-position: center;  

  width: 100%;
/*  height: 500px;*/
  /* 上下左右の余白。左右の20pxはスマホ等で画面端に文字がくっつくのを防ぐため */
  display: flex;
  padding: 80px 0px 120px 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

}


/* =========================================
   2層目：最大幅1280pxと中央配置、右寄せの設定
========================================= */
.c-full-bg__container {
  width: 100%;
  max-width: 1280px; /* コンテンツの最大幅を1280pxに制限 */
  margin: 0 auto;    /* 左右の余白を自動計算し、中央に配置する */

  /* 中の要素（3層目）を右端に配置するためのFlexbox設定 */
  display: flex;
  justify-content: flex-end; 
}

/* =========================================
   3層目：テキストエリア（左揃え）の設定
========================================= */
.c-full-bg__content {
  text-align: left; /* テキストを左揃えにする */
  
  /* テキストエリア自体の幅制限
     ※これを指定しないと、文章が長い場合に1280pxの幅をすべて使い切ってしまい、
     結果的に右に寄っているように見えなくなります。 */
  width: 100%;
  max-width: 550px; 
}


/* =========================================
   中のテキスト・ボタンの装飾（見た目の調整用）
========================================= */
.c-bg-content__title {
  font-family: var(--font-urbanist);
  color: #ffffff; /* 背景が暗い画像の場合は白文字にするなど調整 */
  font-size:  var(--fz-topheading);
  font-weight: bold;
  margin: 0 0 0px 0;
  letter-spacing: 3px;
}

.c-bg-content__title2 {
  font-family: var(--font-yugothic);
  color: #FFFFFF;
  font-size: var(--fz-subheading);
  font-weight: bold;
  margin: 0 0 16px 0;
}

.c-bg-content__text {
  color: #ffffff;
  font-size: var(--21-17w);
  line-height: 1.6;
  font-weight: 600;
  margin: 30px 0 50px 0;
}

.c-bg-content__btn:hover {
  opacity: 0.8;
}


.top_news {
    background: #F6F6F6;
    padding: 140px 0 130px;
}

.content {
    width: 100%;
    /* max-width: 1100px; */
    margin: 0 auto;
    padding: 0px;
}

.taste_title {
  font-family: var(--font-yugothic);
  color: #ffffff; /* 背景が暗い画像の場合は白文字にするなど調整 */
  font-size:  var(--fz-topheading);
  font-weight: bold;
}

.taste_title2 {
  font-family: var(--font-yugothic);
  color: #FFFFFF;
  font-size: var(--fz-subheading);
  font-weight: bold;
}

.taste_text {
  color: #ffffff;
  font-size: var(--fz-body);
  line-height: 1.6;
  font-weight: 600;
}

/* =========================================
   ボタンの基本設定
========================================= */
.c-btn {
  position: relative; /* 矢印を絶対配置するための基準点 */
  display: inline-block;
  
  /* 矢印が入る右側の余白（padding-right）を少し広めにとる */
/*  padding: 16px 50px 16px 40px; */
  
  border-radius: 30px;
  font-weight: bold;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-btn:hover {
  opacity: 0.8;
}

/* =========================================
   「>」マーク（矢印）の描画
========================================= */
.c-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 24px; /* ボタン右端からの位置 */
  
  /* 矢印のサイズと太さ */
  width: 6px;
  height: 6px;
  border-top: 2px solid #1F1D1D;   /* 矢印の色 */
  border-right: 2px solid #1F1D1D; /* 矢印の色 */
  
  /* 上下中央に配置し、45度回転させて「>」の形にする */
  transform: translateY(-50%) rotate(45deg);
  
  /* ホバーアニメーション用のトランジション */
  transition: transform 0.3s ease;
}

/* =========================================
   【オプション】ホバー時に矢印を少し右へ動かす
========================================= */
.c-btn:hover::after {
  /* translateX(4px) を追加し、右へ4px移動させる */
  transform: translateY(-50%) translateX(4px) rotate(45deg);
}



  /* カスタムLiquidの枠を突破して画面幅・高さいっぱいに広げる設定 */
  .custom-video-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw); /* 画面幅いっぱいに広げるための調整 */
  }


.custom-video-hero2 {
    position: relative;
    width: 100vw;
    max-width: 1480px;
    margin-left: calc(50% - 50vw);
    justify-self: center;
}

.custom-video-hero1280 {
    position: relative;
    width: 100vw;
    max-width: 1280px;
    margin-left: calc(50% - 50vw);
    justify-self: center;
}

  .custom-video-hero video {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 1;
    pointer-events: none; /* 動画へのクリックを無効化 */
  }

  .custom-video-hero2 video {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 1;
    pointer-events: none; /* 動画へのクリックを無効化 */
}
  .custom-video-hero1280 video {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: 1;
    pointer-events: none; /* 動画へのクリックを無効化 */
  }

  /* テキストを見やすくするためのオーバーレイ（黒の半透明） */
  .custom-video-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* 0.3の部分で暗さを調整（0で透明） */
    z-index: 2;
  }

  /* テキストを見やすくするためのオーバーレイ（黒の半透明） */
  .custom-video-hero2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0); /* 0.3の部分で暗さを調整（0で透明） */
    z-index: 2;
  }

  /* 動画の上に乗せるコンテンツのスタイル */
  .custom-video-content {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

  /* 動画の上に乗せるコンテンツのスタイル */
  .custom-video-content2 {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}


/* =========================================
   アコーディオン全体枠の設定
========================================= */
.c-accordion {
  width: 95%; /* 画面幅に対する割合 */
  max-width: 1000px; /* 最大幅 */
  margin: 0 auto; /* 中央寄せ */
}

/* 各項目の枠 */
.c-accordion__item {
  background-color: #ffffff; /* 白背景 */
  border: 1px solid #eeeeee; /* 区切り線 */
  border-radius: 10px;
/*  margin-bottom: 16px;*/
}

/* =========================================
   クリック（タップ）領域と矢印の設定
========================================= */
.c-accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px;
  background-color: transparent;
  border: none;
  font-size: 19px;
  font-weight: bold;
  color: #1F1F1D;
  cursor: pointer;
}

/* 右側の矢印（初期：下向き） */
.c-accordion__header::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #1F1F1D;
  border-bottom: 2px solid #1F1F1D;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s ease;
}

/* 開いた後の矢印（上向きへ反転） */
.c-accordion__item.is-active .c-accordion__header::after {
  transform: translateY(2px) rotate(-135deg);
}

/* =========================================
   展開コンテンツの設定（CSS Gridによる開閉）
========================================= */
.c-accordion__content {
  display: grid;
  grid-template-rows: 0fr; /* 初期状態は高さ0 */
  transition: grid-template-rows 0.3s ease;
}

.c-accordion__item.is-active .c-accordion__content {
  grid-template-rows: 1fr; /* 展開状態で高さを自動計算 */
}

.c-accordion__inner {
  overflow: hidden; /* はみ出した中身を隠す */
  padding: 0 20px;  /* 左右の余白をヘッダーと合わせる */
}

/* 中身の上下の余白（開いた時だけ余白を持たせるための調整） */
.c-accordion__inner > :first-child {
  margin-top: 0;
}
.c-accordion__inner > :last-child {
  margin-bottom: 20px;
}



@charset "UTF-8";

/* =========================================
   1. サムネイル画像（トリガー）の設定
========================================= */
.c-video-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px; /* 必要に応じてサイズを調整してください */
  padding: 0;
  border: none;
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden; /* ホバー時の画像拡大を枠内に収める */
}

.c-video-thumbnail img {
/*  width: 100%;
  height: auto;*/
  vertical-align: bottom;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.c-video-thumbnail:hover img {
  opacity: 0.8;
  transform: scale(1.05);
}

/* 画像中央の再生マーク（▶︎） */
.c-video-thumbnail__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* アイコン自体がクリック判定を妨げないようにする */
}

.c-video-thumbnail__icon::after {
  content: "";
  display: block;
  margin-left: 4px; /* 三角形を視覚的な中央に寄せる調整 */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #ffffff;
}

/* =========================================
   2. モーダル全体と背景オーバーレイ
========================================= */
.c-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* モーダル表示時のクラス */
.c-modal.is-active {
  opacity: 1;
  visibility: visible;
}

/* 背面の暗い背景（クリックで閉じる領域） */
.c-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

/* =========================================
   3. モーダル内のコンテンツ枠と閉じるボタン
========================================= */
.c-modal__content {
  position: relative;
  
  /* 枠のサイズを固定値ではなく「中身（動画）のサイズ」に合わせる */
  width: fit-content; 
  
  /* 画面幅・高さに対して大きくなりすぎないように上限を設定 */
  max-width: 95vw;  
  max-height: 85vh; 
  z-index: 1;
}

/* 右上の×ボタン */
.c-modal__close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.c-modal__close-btn::before,
.c-modal__close-btn::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ffffff;
}

.c-modal__close-btn::before { transform: rotate(45deg); }
.c-modal__close-btn::after { transform: rotate(-45deg); }

/* =========================================
   4. 動画プレイヤー（比率フリー設定）
========================================= */
.c-modal__video-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-modal__video-wrapper video {
  /* 動画自身の縦横比を維持したまま、親枠の上限に合わせて自動縮小する */
  max-width: 95vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: bottom; /* 動画下部の不要な隙間を消す */
}


/* =========================================
   縦幅準拠の画像スライダー（追加コンポーネント）
========================================= */
.c-slider {
  position: relative;
  width: 100%;
  overflow: hidden; 
  background-color: #f5f5f5; 
}

.c-slider__track {
  display: flex;
  height: 100%; 
}

.c-slider__slide {
  height: 100%; 
  flex-shrink: 0; 
}

.c-slider__slide img {
  display: block;
  height: 100%;  
  width: auto;   
  object-fit: cover; 
}

/* --- 高さ指定用の拡張クラス --- */
.c-slider--300 {
  height: 300px;
}

.c-slider--560 {
  height: 560px;
}

/* --- スマホ環境での高さ上限設定 --- */
@media screen and (max-width: 767px) {
  .c-slider--560 {
    height: auto; 
    max-height: 60vh; /* スマホ画面縦幅の60%を上限とする */
  }
  
  .c-slider__slide img {
    height: 100%;
    max-height: 60vh;
  }
}


.textgrad {
  font-size: 45px;
  font-weight: 600; /* フォント指定の整理（游ゴシックを最優先、次にヒラギノ、メイリオ） */
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; /* 1. 非対応環境向けの代替色 */
  color: #0eb7bf;
  background: linear-gradient(
    90deg,
    #0093e9 10%,
    #26aebe 44%,
    #0eb7bf 80%
  ); /* 2. ベンダープレフィックスと標準プロパティの併記 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.textgradsp {
  font-size: 32px;
  font-weight: 600; /* フォント指定の整理（游ゴシックを最優先、次にヒラギノ、メイリオ） */
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; /* 1. 非対応環境向けの代替色 */
  color: #0eb7bf;
  background: linear-gradient(
    90deg,
    #0093e9 10%,
    #26aebe 44%,
    #0eb7bf 80%
  ); /* 2. ベンダープレフィックスと標準プロパティの併記 */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* =========================================
   ヒーロー動画の出し分け制御（iOSバグ回避版）
========================================= */

/* スマホ用動画の初期状態（画面外に隠して1pxにする） */
.u-video-sp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

@media screen and (max-width: 767px) {
  /* スマホ幅になったら、PC用を隠す */
  .u-video-pc {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  
  /* スマホ幅になったら、スマホ用を通常表示に戻す */
  .u-video-sp {
    position: static;
    width: 100%;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}


    .original-box-shadow3 {
        width: fit-content;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        background-color: #54B6C0;
        font-weight: 600;
        font-size: 13px;
        font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
        letter-spacing: -1px;
        padding: 5px 12px 5px 12px;
        border-radius: 25px;
        /* box-shadow: 2px 2px 8px 0px rgba(129, 129, 129, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3); */
    }

@media screen and (max-width: 768px) {
    .original-box-shadow3 {
        width: fit-content;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        background-color: #54B6C0;
        font-weight: 600;
        font-size: 13px;
        font-family: "Yu Gothic", "YuGothic", "游ゴシック体", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
        letter-spacing: -1px;
        padding: 5px 12px 5px 12px;
        border-radius: 25px;
        /* box-shadow: 2px 2px 8px 0px rgba(129, 129, 129, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3); */
    }
}