@charset "UTF-8";

/*--------------------------------------------------------
　プラグインやテンプレートパーツ等の自作パーツ系のスタイル
--------------------------------------------------------*/


/* =======================================
　見出し系
======================================= */

/*----- h1スタイル -----*/
/* サブタイトル */
.wp-block-group.hgroup-stack.h1-style p.outfit.h1-sub-name {
  font-weight: 200;
  font-size: 16px;
  line-height: 1;
}

/* ショップパターン */
.wp-block-group.hgroup-stack.h1-style.shop {
  gap: 16px;
}



/*----- h2スタイル1 -----*/
.wp-block-heading.h2-style-1 {
  position: relative;
  padding-bottom: 15px;
}

.wp-block-heading.h2-style-1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right,
      var(--wp--preset--color--possweb-color-17) 0%,
      var(--wp--preset--color--possweb-color-17) 20%,
      var(--wp--preset--color--possweb-color-8) 20%,
      var(--wp--preset--color--possweb-color-8) 100%);
}



/*----- h2スタイル2(英語付き) -----*/
p.h2style-2en.outfit {
  font-size: 56px;
  font-weight: 100 !important;
  padding-bottom: 0;
  line-height: 1;
}

/*h2スタイル2のアンダーライン*/
.wp-block-group.h2-style-2-stack {
  position: relative;
  padding-bottom: 20px;
}

.wp-block-group.h2-style-2-stack::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 3px;
  background-color: #e60012;
}


/*----- h3スタイル -----*/
h3.wp-block-heading.h3-style {
  font-size: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 12px;
}

h3.wp-block-heading.h3-style.gold {
  border-left: 2px solid var(--wp--preset--color--possweb-color-17);
}

h3.wp-block-heading.h3-style.red {
  border-left: 2px solid var(--wp--preset--color--possweb-color-1);
}




/* =======================================
　ボタン系
======================================= */

/*----- テキストボタン -----*/
.wp-block-snow-monkey-blocks-btn.smb-btn-wrapper.is-style-text.text-btn-style a.smb-btn {
  padding: 0;
}


/* 矢印（インライン画像） */
.wp-block-snow-monkey-blocks-btn.smb-btn-wrapper.text-btn-style a.smb-btn img {
  vertical-align: -4px;
  margin-left: 8px;
}

.wp-block-snow-monkey-blocks-btn.smb-btn-wrapper.text-btn-style.wh a.smb-btn img {
  vertical-align: -3px;
}

/*----- ポップアップボタン -----*/
.wp-block-snow-monkey-blocks-buttons.smb-buttons.popup-btn a.smb-btn.smb-btn--little-wider {
  padding-top: 8px;
  padding-bottom: 10px;
}

/* ズームアイコン */
.wp-block-snow-monkey-blocks-btn.smb-btn-wrapper.zoom-icon img {
  vertical-align: -4px;
  margin-left: 8px;
}


/*----- お問い合わせフォームボタン -----*/
.wp-block-snow-monkey-blocks-btn.smb-btn-wrapper.text-btn-style-mail a.smb-btn {
  padding-top: 8px;
  padding-bottom: 8px;
}

.wp-block-snow-monkey-blocks-btn.smb-btn-wrapper.text-btn-style-mail img {
  vertical-align: -2px;
  margin-left: 8px;
}


/*----- ページリンクボタン -----*/
.wp-block-snow-monkey-blocks-buttons.smb-buttons.page-link-btn .wp-block-snow-monkey-blocks-btn.smb-btn-wrapper.is-style-ghost {
  font-size: 18px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.wp-block-snow-monkey-blocks-buttons.smb-buttons.page-link-btn .smb-btn-wrapper.is-style-ghost .smb-btn {
  border: 2px solid var(--smb-btn--style--ghost--border-color);
}



/* =======================================
　オンラインショップボタン（Amazon、楽天、Yahoo!ショッピング）
======================================= */
.wp-block-group.online-btn-group a.smb-btn {
  border: 3px solid;
}

.wp-block-group.online-btn-group p {
  padding-bottom: 0;
}



/* =======================================
　ショップ案内バナー
======================================= */
/*----- ロゴ名（赤） -----*/
figure.wp-block-image.size-full.is-resized.logo-name-red img {
  width: 100% !important;
  max-width: 100px;
}



/* =======================================
　セクション系
======================================= */
/*----- グレー背景画像セクション -----*/
/* 背景画像 */
.wp-block-snow-monkey-blocks-section-with-bgimage.smb-section.smb-section-with-bgimage.section-bg-mono-image .smb-section-with-bgimage__bgimage img {
  filter: grayscale(100%);
}



/*----- 店舗案内セクション -----*/
.wp-block-snow-monkey-blocks-section.stores-section h2.wp-block-heading {
  margin-bottom: 32px;
}

.wp-block-snow-monkey-blocks-section.stores-section .wp-block-snow-monkey-blocks-box.smb-box {
  margin-top: 0;
}




/* =======================================
　ギャラリー系
======================================= */
/*----- ショップギャラリー -----*/
.shop-gallery figure.wp-block-gallery {
  gap: 0;
}


/* =======================================
　マップ系
======================================= */

/*----- Googleマップ -----*/
.wp-block-group.google-map {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.wp-block-group.google-map .wp-block-group__inner-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  /* 2:1の比率 (1/2 = 0.5) */
}

.wp-block-group.google-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* スマホ対応（1:2の比率） */
@media screen and (max-width: 768px) {
  .wp-block-group.google-map .wp-block-group__inner-container {
    padding-bottom: 200%;
    /* 1:2の比率 (2/1 = 2.0) */
  }
}


/* =======================================
　ポップアップ系
======================================= */
#sgpb-popup-dialog-main-div {
  padding: 0 !important;
}



/* =======================================
　ループスライダー
======================================= */
figure.wp-block-gallery.has-nested-images.columns-6.is-cropped.loop-slider.slick-slider {
  margin: 0 !important;
}



/* =======================================
　マスクパターン
======================================= */

/*----- 上部マスク -----*/
/* 共通 */
.wp-block-group.mask.top::before {
  content: "";
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 24vw;
  z-index: 1;
}

/* 超薄グレー */
.wp-block-group.mask.top.super-light-gray::before {
  background-image: url(../../images/common/common-mask-top-super-light-gray.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/* グリーン */
.wp-block-group.mask.top.green::before {
  background-image: url(../../images/common/common-mask-top-light-green.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}



/*----- 下部マスク -----*/
/* 共通 */
.wp-block-group.mask.bottom::after {
  content: "";
  position: relative;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 24vw;
  z-index: 1;
}

/* 超薄グレー */
.wp-block-group.mask.bottom.super-light-gray::after {
  background-image: url(../../images/common/common-mask-bottom-super-light-gray.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

/* グリーン */
.wp-block-group.mask.bottom.green::after {
  background-image: url(../../images/common/common-mask-bottom-light-green.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}



/* =======================================
　段落
======================================= */
/*----- 見出しタグスタイル -----*/
.wp-block-group.heading-tag p {
  padding: 4px 24px !important;
  line-height: 1.35;
  margin-bottom: 4px;
}


/* =======================================
　Contact Form 7 メールフォーム
======================================= */

/*----- フォーム全体 -----*/
.wpcf7 {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0;
}

.wpcf7-form {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

form.wpcf7-form.init {
  margin-top: 0 !important;
}

/*----- ラベル -----*/
.wpcf7-form label {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

/*----- 入力フィールド -----*/
.wpcf7-form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.5;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.wpcf7-form-control:focus {
  outline: none;
  border-color: var(--wp--preset--color--possweb-color-17);
  box-shadow: 0 0 0 3px rgba(230, 0, 18, 0.1);
}

/* テキストエリア */
.wpcf7-textarea {
  min-height: 120px;
  resize: vertical;
}

/*----- 必須項目のマーク -----*/
.wpcf7-form-control-wrap[data-name*="required"] label::after {
  content: " *";
  color: var(--wp--preset--color--possweb-color-1);
  font-weight: bold;
}

/*----- 送信ボタン -----*/
.wpcf7-submit {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 16px 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 200px;
}

.wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.wpcf7-submit:active {
  transform: translateY(0);
}

/*----- スピナー -----*/
.wpcf7-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--wp--preset--color--possweb-color-1);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px;
  vertical-align: middle;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*----- エラーメッセージ -----*/
.wpcf7-not-valid-tip {
  color: var(--wp--preset--color--possweb-color-1);
  font-size: 14px;
  margin-top: 4px;
  display: block;
}

.wpcf7-form-control.wpcf7-not-valid {
  border-color: var(--wp--preset--color--possweb-color-1);
}

/*----- レスポンスメッセージ -----*/
.wpcf7-response-output {
  margin: 20px 0 0 0;
  padding: 16px;
  border-radius: 6px;
  font-weight: 600;
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.wpcf7-response-output.wpcf7-validation-errors {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.wpcf7-response-output.wpcf7-mail-sent-ng {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/*----- スマートフォン対応 -----*/
@media screen and (max-width: 768px) {
  .wpcf7 {
    padding: 20px 10px;
  }
  
  .wpcf7-form {
    padding: 20px;
  }
  
  .wpcf7-submit {
    width: 100%;
    min-width: auto;
    padding: 14px 24px;
    font-size: 16px;
  }
  
  .wpcf7-form-control {
    font-size: 16px; /* iOSでズームを防ぐ */
  }
}