@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Kaku+Gothic+New&display=swap');

/* ページ遷移をクロスフェードして「ちらつき/白い瞬断」を緩和する（同一オリジンMPA）。
   対応ブラウザ(Chrome等)のみ有効。非対応ブラウザは無視するため安全。
   prefers-reduced-motion 指定時はアニメーションを無効化。 */
@view-transition {
    navigation: auto;
}

/* 既定のクロスフェードは新旧スナップショットの不透明度が同時に下がるため、
   中間で背景が透けて「一瞬暗くなる／内容が薄く見える」現象が起きる。
   旧画面を不透明のまま維持し、新画面をその上にフェードインさせることで、
   常にどこかが不透明な状態を保ち、暗転・透けを防ぐ。 */
::view-transition-old(root) {
    animation: none;
}
::view-transition-new(root) {
    animation: hs-vt-fade-in 0.28s ease both;
    mix-blend-mode: normal;
}
@keyframes hs-vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* スクロールバーの有無でページ中央寄せが左右にずれるのを防ぐ。
   縦スクロールバー用の溝を常に確保し、スクロール有無に依らず表示幅を一定にする。 */
html {
    scrollbar-gutter: stable;
}

/* モーダル/ダイアログ表示時のスムーズなフェードイン。
   display:none → 表示(flex) に切り替わるとCSSアニメが再生される性質を利用するため、
   表示制御のJS(style.display)は一切変更せず、開閉ロジックは不変。
   背景オーバーレイ＋中身がふわっと出る（閉じる動作は従来どおり即時）。
   fill-mode は付けない（終了後は基底値=opacity:1へ戻り、ちらつかない）。 */
@keyframes hs-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#goodsSelectionModal,
#goodsSampleModal,
#deliveryInfoModal,
#vimeoPopupModal {
    animation: hs-modal-fade-in 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    #goodsSelectionModal,
    #goodsSampleModal,
    #deliveryInfoModal,
    #vimeoPopupModal {
        animation: none;
    }
}

h1{
    font-size: 48px;
    line-height: 1.4;
    font-weight: normal;
    text-align:center;
    margin: 30px 0 30px;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #fff !important;
  }
@media only screen and (max-width: 480px) {
h1{
	font-size: 32px;
}
}

h2{
	text-align: center;
	font-size: 30px;
	line-height: 1.6;
	font-family: "Zen Kaku Gothic New", sans-serif;
	color: #fff !important;
}
@media only screen and (max-width: 480px) {
	h2{
		font-size: 20px;
	}
}

h3.head, h3.head a {
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #fff !important;
  margin: 0px 0px 30px;
}

.logo {
  max-width: 500px;
  width: 90%;
  margin: -20px auto 40px;
  display: block;
}
#logo {
  transition: all 0.3s ease;
  transform: scale(1);
}
#logo:hover {
  transform: scale(1);
}
#logo:active {
  transform: scale(0.9);
}

@media only screen and (max-width: 480px) {
  .logo {
    display: none;
  }
}

.buttonIcon {
  font-size: 30px !important;
  transition: all 0.3s ease;
  transform: scale(1);
}
.buttonIcon:hover {
  transform: scale(1);
}
.buttonIcon:active {
  transform: scale(0.9);
}

.post-title h3 {
  font-size: 24px;
  font-family: "Libre Bodoni", "Noto Sans JP", sans-serif;
  margin: 15px 0;
  text-align: center;
  letter-spacing: 2px;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
    margin: 0px 5px;
  }
  .material-symbols-outlined.selected {
    font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
  }


	header{
		margin: 15px 0 0;
		padding-top: 10px;
		font-size: 17px;
	}
	header a{
		color:#333;
		text-decoration: none;
		font-family: "Inter", sans-serif;
	}
	header a:hover{
		text-decoration: underline;
	}
	.header-wrap{
		display:flex;
		max-width: 1300px;
		margin:0 auto;
		padding: 0px 20px;
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
	.header-title{
		font-weight: 500;
		margin: 0;
	}
	nav#header{
		display:flex;
		align-items: center;
		justify-content: end;
	}

	.header-menu{
		list-style:none;
		display:flex;
		margin: 0;
		padding: 0;
	}
	.header-menu li
	{
		padding-left: 20px;
	}
	.header-menu li a{
		padding: 0;
		margin: 0;
		height: 60px;
	}

	.brand_logo {
		max-height: 60px; width: auto; display: block;
	}

	
	@media screen and (max-width: 480px) {

		.header-wrap{
			margin-bottom:35px;
		}

		.brand_logo {
			max-height: 40px; width: auto; display: block;
		}
		.pc{
			display: none !important;
		}
		.buttonIcon{
		}
		.header-menu li a{
			height: 24px;
		}
		.header-menu li
		{
			padding-left: 10px;
		}
	}

/* 隠しファイル入力など、JS非干渉の静的な非表示要素用ユーティリティ。
   （labelやJSの.click()で起動し、display自体は切替えない要素に使用） */
.hidden-input {
	display: none;
}