@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* 全般のリセット */
* {
  box-sizing: border-box;
}


/*** フォントサイズ、位置 **********************************************/
html {
  font-size: 62.5%;
}

	h1 {
		font-size: 2.4rem;
	}

	p, a {
		font-size: 1.6rem;
	}

body, h1, p {
  margin: 0;
}


/* スマートフォン向けの文字サイズとフォント指定 */
@media only screen and (max-width: 600px) {

  h1 {
    font-size: 2.4rem; /* 適切なサイズに調整してください */
  }
	
	p {
    font-size: 1.6rem; /* 適切なサイズに調整してください */
  }

}

/*** ヘッダー **********************************************/
	#header {
	  display: flex;
	  justify-content: space-between; /* 要素を両端に配置 */
	  align-items: center; /* 中央揃えにする */
	  padding: 20px 20px;
	  position: fixed; /* ヘッダーを上部に固定 */
	  top: 0;
	  left: 0;
	  width: 100%; /* ヘッダーの幅を画面幅いっぱいに */
	  background-color: transparent;
	  z-index: 100;
	}

	.menu-icon, .cart-icon {
	  flex-grow: 0;
	}

	/* ハンバーガーメニューアイコン */
	.menu-icon {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  width: 21px; /* アイコンの幅を固定 */
	  height: 16px; /* アイコンの高さを固定 */
	  flex: 0 0 auto; /* 伸縮せず、固定サイズを保持する */
	}

	.menu-icon span {
		background-color: #fff;
		height: 2px;
		width: 100%;
		transition: background-color 0.3s; /* 色の変更にアニメーションを設定 */
	   cursor: pointer;
	}

	.menu-icon:hover {
	  cursor: pointer;
	}

	/* スライドインメニュー */
	.menu-links {
	  position: fixed;
	  top: 0;
	  left: -100%; /* メニューを左に隠す */
	  width: 250px; /* メニューの幅 */
	  height: 100%; /* 画面の高さに合わせる */
	  background-color: #fff;
	  transition: left 0.3s; /* スライドインアニメーション */
	  z-index: 1001;
	}

	.menu-links.show {
	  left: 0; /* メニューを表示 */
	}

	.menu-links a {
	  display: block;
	  padding: 10px 20px;
	  color: #333;
	  text-decoration: none;
	  border-bottom: 1px solid #eaeaea;
	}

	.menu-links a:hover,
	.menu-links a:focus {
	  background-color: #f5f5f5;
	}

	/* ブランドロゴ */
.brand-logo {
  flex-grow: 1;
  display: flex;
  justify-content: center; /* 中央寄せに */
  top: -13px; /* 上に少し移動 */
  align-items: center;
  position: relative; /* 位置の基準点として設定 */
}

	/* ブランドロゴ共通スタイル */
	.brand-logo img {
	  max-height: 30px;
	  width: auto;
	  position: absolute; /* ロゴを重ねて配置 */
	  top: 0; /* 親要素の上端に合わせる */
	  left: 50%; /* 親要素の中央に合わせる */
	  transform: translateX(-50%); /* X軸方向に-50%ずらして中央揃えにする */
	  opacity: 0; /* 初期状態では透明 */
	  transition: opacity 0.3s; /* 透明度の変更にアニメーションを設定 */
	}

	/* 白字ロゴ：初期表示 */
	.brand-logo .logo-default {
	  opacity: 1; /* 初期状態で表示 */
	}

	/* 黒字ロゴ：初期非表示 */
	.brand-logo .logo-scrolled {
	  opacity: 0; /* 初期状態では透明 */
	}

	/* スクロール時のブランドロゴ */
	#header.scrolled .brand-logo .logo-default {
	  opacity: 0; /* 透明にすることで非表示 */
	}
	#header.scrolled .brand-logo .logo-scrolled {
	  opacity: 1; /* 不透明にすることで表示 */
	}

	/* 言語切替ボタン */
	.language-switcher {
		color: #ffffff; /* テキストの色を設定 */
		position: absolute; /* 絶対位置に配置 */
		top: 50%; /* 上端を中央に配置 */
		right: 20px; /*右端から50pxの位置に配置（調整が必要かもしれません） */
		transform: translate(0, -50%); /* 上下中央揃え */
		transition: color 0.3s; /* 色の変化にトランジションを適用 */
		font-size: 1.2rem;
	}

	.language-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #fff;
		border: 1px solid #ccc;
		z-index: 1; /* 他の要素の上に表示 */
	}

	.language-switcher.active .language-menu {
		display: block;
	}

	.language-menu a { /* リンクに対するスタイル */
		display: block;
		padding: 10px;
		text-decoration: none;
		color: #333;
	}

/* スクロール時のヘッダーの背景 */
	#header.scrolled {
	  background-color: rgba(255, 255, 255, 0.9); /* 半透明の白色 */
	}

/* スクロール時のヘッダーのテキストとアイコンの色 */
	#header.scrolled .menu-icon span,
	#header.scrolled .cart-icon .fas,
	#header.scrolled .menu-links a,
	#header.scrolled .language-switcher {
	  color: #000; /* 黒色 */
	}

	#header.scrolled .menu-icon span {
	  background-color: #000; /* 黒色 */
	}

	html, body {
	  width: 100%;
	  margin: 0;
	  font-family: 'Jost', sans-serif;
	  min-height: 100vh;   /* 重要：画面の高さを最低保証 */
	}

	body {
	  display: flex;       /* 重要：PCでも有効にする */
	  flex-direction: column;
	  background: #1a1a1a;
	}


/*** 背景画像エリア **********************************************/
	.top-background{
	  background-image:
		linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.25)),
		url('https://gts-demo1.woodbox-lab.com/wp-content/uploads/tokyohinoki-picture/tokyohinoki-top.jpg');

	  background-size: contain;
	  background-repeat: no-repeat;
	  background-position: center;
	  background-color: #1a1a1a;

	  flex: 1;
	  min-height: 70vh;
	  padding: 50px 0;
	}

	.top-background p {
		text-align: center; /* テキストを中央に寄せる */
		color: #ffffff; /* テキストの色を設定 */
		  margin-bottom: 0 !important;
		  padding-bottom: 0;   /* 50pxが残ってるなら消す */
	}


	.track-form h1, .track-form form {
		text-align: center; /* テキストを中央に寄せる */
		color: #ffffff; /* テキストの色を設定 */
		margin-bottom: 20px;
	}

	.track-form input[type="text"] {
		border: none;
		border-bottom: 2px solid white;
		background: transparent;
		color: white;
		margin-bottom: 20px;
		font-size: 2rem;
	}

	.track-form button {
		border: none;
		background: transparent;
		cursor: pointer;
	}

	.track-form img {
		width: 2em; /* 文字と同じサイズに調整 */
		height: auto;
		vertical-align: middle;
	}

	.track-form input[type="submit"] {
		background: transparent;
		border: none;
		color: white;
		font-size: 2rem;
	}

	.track-form input[type="text"]:focus, .track-form input[type="submit"]:focus {
		outline: none;
	}

/*** エラーメッセージ **************************************/

.error-message {
    background-color: #006400; /* 深緑色の背景色を設定 */
    /*border: 1px solid #003300;  深緑色の枠線を設定 */
    padding: 10px;
    margin-top: 50px;
    text-align: center;
    font-size: 16px;
    color: #ffffff; /* 深緑色のテキストの色を設定 */
}


/*** フッター **********************************************/
	#footer {
	  background-color: black;
	  color: white;

	  position: static;   /* ← absoluteをやめる */
	  bottom: auto;
	  width: 100%;
	  text-align: left;
	  margin-top: auto;
	}

	#footer .footer-content {
    width: 80vw; /* ページ全体の幅の80%に設定 */
    margin: auto; /* 中央寄せのため */
    text-align: left; /* テキストを左揃えに設定 */
	}

	#footer .footer-contact {
	 padding-top: 60px;
	 padding-bottom: 20px;
	}

	#footer a {
		color: white; /* リンク色：白 */
		text-decoration: none; /* 下線を消す */
		display: block; /* リンクをブロック要素として表示 */
	}

	#footer a:hover {
		text-decoration: underline; /* ホバー時に下線を表示 */
	}

	.footer-links p {
		margin: 20px 0; /* 上下にマージンを設定 */
	}

	.footer-small-text {
		font-size: 0.5em; /* フォントサイズを小さく */
		color: gray; /* テキスト色：灰色 */
	 	padding-top: 20px;
	 	padding-bottom: 20px;
	}

	/* ビューポートの幅が800px以上の場合のスタイル */
	@media (min-width: 800px) {
		#footer {
			padding-left: 60px;
			padding-right: 60px; 
			padding-bottom: 20px; 
		}
	}