/*
Theme Name: onedesignGTP
Theme URI: https://onedesign.blue/
Author: One Design
Author URI: https://onedesign.blue/
Description: Lightweight WordPress theme for corporate, shop, and local business websites.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: onedesign
*/
/* ==========================================================================
   Base
   ========================================================================== */ 
:root {
  /* カラー */
  --primary-color: #000080; /*Navy*/
  --primary-light: #4169e1; /*RoyalBlue*/
  --secondary-color: #f0ffff; /*Aqua*/
  --accent-color: #ffa500; /*Orange*/
  --text-color: #333;
  --light-text: #777;
  --dark-bg: #223a70;
  --light-bg: #fffff0; /*Ivory*/
  --border-color: #eee;
  --success-color: #0e9f6e; /*Green*/
  --warning-color: #ffd700; /*Gold*/
  --arert-color: #ff8c00; /*DarkOrange*/
  --error-color: #ff0000; /*Red*/
  --transition: all 0.3s ease;
  --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  /* フォントサイズ */
  --font-xs: 0.75rem; /* 12px */
  --font-sm: 0.875rem; /* 14px */
  --font-base: 1rem; /* 16px */
  --font-lg: 1.125rem; /* 18px */
  --font-xl: 1.25rem; /* 20px */
  --font-2xl: 1.5rem; /* 24px */
  --font-3xl: 1.875rem; /* 30px */
  --font-4xl: 2.25rem; /* 36px */
  /* スペーシング */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-16: 4rem; /* 64px */
}
html {
  font-size: 100%;
}
body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans KR", sans-serif;
}
.mobile-hide {
  display: block;
}
br.mobile-br {
  display: none;
}
h1, h2, h3, h4 {
  text-align: center;
  color: var(--primary-color);
}
h1.left, h2.left, h3.left, h4.left, p.left, .text-left {
  text-align: left;
}
h1.line, h2.line, h3.line, h4.line {
  border-bottom: 1px solid #dcdcdc;
  padding-bottom: 0.2em;
}
hr.no-border {
  border: 0;
  border-top: 1px solid #ffffff;
  margin: 1.5em 0;
}
hr.space {
  border: 0;
  border-top: 1px solid #ffffff;
  margin: 3em 0;
}
/* WordPress Alignment
========================================================================== */
.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}
.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}
.aligncenter {
  display: block;
  margin: 0 auto 1.5rem;
}
/* WordPress Image Caption
========================================================================== */
.wp-caption {
  max-width: 100%;
}
.wp-caption img {
  display: block;
  width: 100%;
  height: auto;
}
.wp-caption-text {
  margin-top: .5rem;
  font-size: .875rem;
  text-align: center;
}
/* WordPress Gallery
========================================================================== */
.gallery {
  margin-bottom: 2rem;
}
.gallery img {
  max-width: 100%;
  height: auto;
}
/* Screen Reader
========================================================================== */
.screen-reader-text {
  position: absolute;
  left: -9999px;
}
/* Container
========================================================================== */
.main {
  margin: 2em auto 4em auto;
}
.box-center, .block-center {
  margin-right: auto;
  margin-left: auto;
}


@media (max-width: 768px) {
	
}
/* Header
========================================================================== */
.header-container {
  padding: 0 8px 15px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  gap: 11px;
}

.header-left {
  display: flex;
  flex-direction: column;
	/*justify-content:flex-start;*/
}

.header-left .items {
  text-align: left;
}
.header-right {
  display: flex;
  flex-direction: column;
  justify-content:center; 
  align-items:center;
}
@media (max-width: 768px) {
  .header-container {
    padding: 6px 1px 15px 1px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .header-left .items {
    text-align: center;
  }
  .header-right {
    /*justify-content:center; 
    align-items:center;*/
  }
}

h1.site-title {
  font-size: 16px;
  padding: 0;
  margin: 0;
}
/* Badge */
.badge a {
  padding: 6px 7px;
  color: #ffffff;
  text-align: center;
  background: rgba(25, 68, 142, 0.9);
  font-size: 0.9em;
}
.badge a.first {
  border-radius: 16px 0 0 16px;
  padding: 6px 7px 6px 20px;
}
.badge a.last {
  border-radius: 0 16px 16px 0;
  padding: 6px 20px 6px 7px;
}
.badge .red {
  color: #e95295;
  font-weight: bold;
}
.badge .large {
  font-size: 1.1em;
  font-weight: bold;
}
.star::before {
  content: "&#9733"; /*星マーク*/
  color: #f5b301;
  margin-right: .3em;
}
/* Global Nabi
========================================================================== */
/* Global Navi */
/* 下段：グローバルナビ */
.nav-line {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: var(--primary-light);
}
.global-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-evenly; /*すべての間隔を均等にする*/
  gap: 36px; /* 項目間の幅（少し広めに） */
}
.global-nav li {
  margin: 0;
  padding: 0;
  height: 2.8em;
  list-style: none;
  line-height: 2.5;
  text-align: center;
}
.global-nav a {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ffffff;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}
/* ホバー時にテーマカラーの紺色になり、下線がアニメーションする演出 */
.global-nav a:hover {
  color: yellow;
}
.global-nav ul li.mobile {
  display: none;
}
.global-nav a {
  
}
.global-nav a:hover {

}
/* WordPress Menu Integration */
.nav-list {
  list-style: none; /* Reset WP menu list style */
}
.hamburger {
  display: none;
  cursor: pointer;
}
.nav-close-wrapper {
  display: none;
  cursor: pointer;
}
/* Mobile Navi
========================================================================== */
@media (max-width: 768px) {
  .nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100vh;
    background-color: white;
    color: var(--primary-color);
    /* ▼ 横並びから縦並びに変更 */
    display: flex;
    flex-direction: column;
    /* ▼ 縦方向の中央揃えを上揃えに変更 */
    align-items: center;
    justify-content: flex-start;
    /* ▼ メニュー上部に適度な余白を作る（ハンバーガーボタンと被らないように） */
    padding-top: 60px;
    /* ▼ メニューが画面からはみ出たときにスクロールできるようにする */
    overflow-y: auto;
    transition: var(--transition);
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
  }
  .nav.active {
    left: 0;
  }
  .nav-list {
    flex-direction: column;
    align-items: center;
    width: 100%; /* 横幅いっぱいに広げる */
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav li {
    padding: 8px 11px;
    text-align: center; /* 文字を中央に */
    width: 100%; /* タップしやすくする */
  }
  .nav li a {
    color: var(--primary-color);
  }
  .nav li a:hover {
    color: var(--primary-light);
  }
  .nav-item {
    margin: 1px 0;
  } /*header*/
  .menu-item {
    margin: 1px 0;
  } /*footer*/
  /* --- ハンバーガーボタン全体の調整 --- */
  .hamburger {
    position: fixed;
    top: 1px;
    right: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 50px;
    height: 55px; /* ★文字のスペース分、全体の高さを少し広げました */
    z-index: 100;
  }
  /* 3本線が入る枠 */
  .hamburger-bars {
    display: block;
    height: 26px; /* ★20px から 24px に広げて、下の文字との衝突を防ぎます */
  }
  .hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: var(--transition);
  }
  /* 下に添える文字のスタイル */
  .hamburger-text {
    font-size: 10px;
    font-weight: bold;
    color: var(--text-color);
    margin-top: 4px; /* ★2px から 4px にして、線の領域と少し距離を置きます */
    line-height: 1;
    /*background-color: white;*/
  }
  /* --- メニューが開いたとき（.active）の動き --- */
  /* 3本線がX印になるアニメーション（位置調整を少し微調整しました） */
  .hamburger.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
  /* ★メニューが開いたら、ボタンの下の文字を「閉じる」に変える魔法 */
  .hamburger.active .hamburger-text::after {
    content: "Close";
    position: absolute;
    background-color: white; /* 背景と同じ色にして元の「Menu」を隠す */
    left: 0;
    right: 0;
    text-align: center;
  }
  .hamburger.active .hamburger-text {
    position: relative; /* 上記の絶対配置（absolute）の基準点 */
  }
  /* 閉じるボタンエリアのスタイル */
  .nav-close-wrapper {
    width: 100%;
    display: block;
    text-align: center;
    padding: 20px 0 40px;
    margin-top: auto; /* メニュー項目が少ない場合でも一番下に押し下げる */
  }
  /* 閉じるボタン自体のスタイル（お好みに合わせて調整してください） */
  .nav-close-btn {
    background: var(--primary-light); /* 背景色 */
    color: #fff; /* 文字色 */
    border: none;
    padding: 10px 30px;
    font-size: 16px;
    cursor: pointer;
    margin: 0 auto;
    border-radius: 8px;
    width: 80%; /* ボタンを押しやすいサイズに */
    max-width: 240px;
  }
}
/* Pages
========================================================================== */
h3 i.fa-solid {
  color: #ffd700;
  font-size: 1.5em;
  padding-left: 8px;
  padding-right: 8px;
	font-style: normal;
}






/* SNS
========================================================================== */
.sns li a {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-radius: 0.625em;
}
.sns li a svg {
  width: 50px;
  margin-right: 1.2rem;
}
.sns li a p {
  line-height: 1.4;
  font-weight: 700;
}
.insta-icon {
  /* Instaの赤紫を指定 */
  fill: rgb(225, 48, 108);
  transition: fill 0.3s ease;
}
.line-icon {
  /* LINEのグリーンを指定 */
  fill: rgb(6, 199, 85);
  transition: fill 0.3s ease;
}
.fb-icon {
  /* Facebookのブルーを指定 */
  fill: rgb(24, 119, 242);
  transition: fill 0.3s ease;
}
.x-icon {
  /* Xのブラックを指定 */
  fill: rgb(0, 0, 0);
  /* アニメーション */
  transition: fill 0.3s ease;
}

/* Button
========================================================================== */
button, .btn {
  background: var(--primary-light);
}
button:hover, .btn:hover {
  background: var(--primary-color);
  text-decoration: none;
}

/* Accordion
========================================================================== */

/* Form
========================================================================== */

/* Footer
========================================================================== */
footer {
  background-color: var(--primary-light);
  color: white;
  padding: 30px 0 10px 0;
}
.footer-content {
  text-align: center;
  display: flex; /* 幅の均等割り当て */
  flex-direction: column;
  gap: 1.5rem;
}
.footer-logo {
  font-size: 1.8rem;
  margin-bottom: 20px;
}
.footer-nav-list {
  display: flex; /* 幅の均等割り当て */
  justify-content: center;
  margin-bottom: 30px;
} /* wrap */
.footer-nav-list .menu-item {
  padding: 0 16px;
  border-right: 1px solid #ffffff;
}
.footer-nav-list .menu-item:first-child {
  border-left: 1px solid #ffffff;
}
.footer-nav-list .menu-item a {
  color: white;
  font-weight: 500;
}
.footer-nav-list a:hover {
  color: var(--primary-color);
}
.footer-copyright {
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  text-align: center;
}
@media (max-width: 768px) {
  .footer-content {
    flex: none; /* スマホ: 幅の均等割り当てを解除 */
    width: 100%; /* スマホ: 要素を親要素いっぱいに広げる */
    min-width: auto; /* スマホ: 最小幅を解除 */
  }
  .footer-nav-list {
    flex-wrap: wrap; /* 収まりきらないアイテムを次の行に折り返し */
  }
  .footer-nav-item {
    margin: 10px;
  }
  .footer-nav-item a {
    font-size: 0.9rem;
  }
  .mobile-hide {
    display: none;
  }
  br.mobile-br {
    display: block;
  }
}
/* ---------------------------------------------------------------------
	WooCommerce
--------------------------------------------------------------------- */
/* WooCommerce 共通コンテナ */
.woocommerce-page .content-area, .post-type-archive-product .content-area, .tax-product_cat .content-area {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 30px;
}
.content-area {
  background-color: rgba(1, 1, 1, 0.9);
}
.woocommerce-page .site-main {
  width: 100%;
}
/*ul.products {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 0;
    margin: 40px 0;
    list-style: none;
}
ul.products li.product {
    width: calc(33.333% - 20px);
    margin: 0;
}
ul.products li.product img {
    width: 100%;
    height: auto;
    display: block;
}*/
.woocommerce div.product {
  overflow: hidden;
}
.woocommerce div.product div.images {
  float: left;
  width: 48%;
}
.woocommerce div.product div.summary {
  float: right;
  width: 48%;
}
/* アラート欄の文字を黒く　*/
ul.woocommerce-error li {
  color: #111111 !important;
}
/* WooCommerceのエラー時の入力欄を強調 */
/*.woocommerce-invalid select,
.woocommerce-invalid input {
    border: 2px solid #ff4d4d !important;
    background-color: #fff9f9; 
}*/
.ppom-input-desc {
  font-size: 0.9em !important;
  color: #ff8c00 !important;/*darkorange*/
}
@media screen and (max-width:768px) {
  .woocommerce div.product div.images, .woocommerce div.product div.summary {
    float: none;
    width: 100%;
    margin: 0 0 2rem;
  }
}
@media screen and (max-width:768px) {
  .single-container {
    width: 100%;
    padding: 1rem 1.5rem;
  }
}
.woocommerce div.product::after, .woocommerce div.product::before {
  content: "";
  display: table;
}
/*フロートのclearfix*/
.woocommerce div.product::after {
  clear: both;
}
/*商品画像*/
.woocommerce img {
  max-width: 100%;
  height: auto;
}
/*価格表示*/
.price .amount {
  font-size: 1.6rem !important;
  font-weight: 700;
  color: #eebbcb;
}
.entry-summary .woocommerce-Price-currencySymbol {
  font-size: 0.8em !important;
}
/*ボタン*/
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce .button {
  border-radius: 6px;
  padding: .8em 1.5em;
  font-weight: 700;
  transition: .3s;
}
/*数量入力*/
.woocommerce .quantity .qty {
  width: 5em;
  min-height: 42px;
  text-align: center;
  margin-right: 0.5em;
  margin-left: 0.5em;
}
.single-product .quantity::after {
  content: "참가 인원을 숫자로 선택해 주세요.";
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #b44c97;
  font-weight: 400;
}
.products .product-type-simple::after {
  content: "원하시는 코스 버튼을 선택해 주세요.";
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #b44c97;
  font-weight: 400;
}
/*セレクトボックス*/
.woocommerce select {
  width: 15em;
  min-height: 42px;
  padding: .5rem .8rem;
  border-radius: 4px;
}
.form-row label .optional {
  display: none;
}
.select2-container--default .select2-selection--single {
  background: #fff !important;
  border: 1px solid #ccc;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #000 !important;
}
.select2-container--default .select2-results__option {
  color: #000 !important;
  background: #fff !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #0066cc !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
  background: #e8f2ff;
  color: #000;
}
.select2-container--default .select2-selection--single {
  background: #fff;
  border: 1px solid #666;
  border-radius: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #000;
}
/*テーブル*/
.woocommerce table {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce th, .woocommerce td {
  padding: .75rem;
}
.woocommerce {
  overflow-wrap: break-word;
}
/*長い韓国語・英語対策*/
.woocommerce p, .woocommerce td {
  word-break: keep-all;
}
/*フォーム部品*/
.woocommerce input[type=text], .woocommerce input[type=email], .woocommerce input[type=tel], .woocommerce textarea {
  width: 100%;
  min-height: 42px;
  padding: .6rem;
  border-radius: 4px;
}
.woocommerce input[type=date] {
  width: 220px;
  min-height: 42px;
  padding: .6rem;
  border-radius: 4px;
}
/*商品画像の余白*/
.woocommerce div.product div.images {
  margin-bottom: 2rem;
}
/*カート・チェックアウト*/
@media (max-width:768px) {
  .woocommerce table.shop_table {
    display: block;
    overflow-x: auto;
  }
}
dl.variation {
  text-align: left;
}
dl.variation dt {
  width: 100%;
  display: block;
}
dl.variation dd {
  width: 100%;
  display: block;
}
.woocommerce-result-count, .woocommerce-ordering {
  display: none;
}
/* ==========================================================
   jQuery UI (Datepicker)
   フォームのセレクト幅拡張に対応
========================================================== */
.ui-datepicker {
  min-width: 24em;
  width: auto;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
}