@charset "UTF-8";
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
/**
 * 指定された要素キーに基づいて、レスポンシブなフォントサイズを適用するミックスイン
 * $font-sizes マップの 'desktop', 'tablet', 'mobile' キーに依存
 * ブレークポイントは lg-down (tablet), md-down (mobile) を想定
 *
 * @param {String} $element-key - $font-sizes マップのキー (例: 'h1', 'base')
 */
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
figure,
fieldset, legend,
table, th, td, caption {
  margin: 0;
  padding: 0;
}

body {
  background-color: #fff;
  text-rendering: optimizeLegibility;
}

ol,
ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: inherit;
}

blockquote,
q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.5;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: transparent;
  vertical-align: middle;
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
  border: none;
}

button[disabled],
html input[disabled] {
  cursor: default;
  opacity: 0.65;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid #eee;
  margin: 1em 0;
}

pre,
code,
kbd,
samp {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

:root {
  --primary-default: #6E921D;
  --primary-light: #C5D3A5;
  --primary-black: #203424;
  --primary-green: #004517;
  --primary-white: #fff;
  --color-red: #EA3800;
  --text-default: var(--primary-black);
  --text-primary: var(--primary-default);
  --text-white: var(--primary-white);
  --contents-padding-beside: 16px;
  --contents-padding-beside-md: 80px;
  --background-default: var(--primary-white);
  --background-secondary: #E2ECE4;
  --background-light: #F8FAF9;
  --border-default: #94A297;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
:where(body) {
  color: var(--text-default);
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;
}

main {
  overflow: hidden;
}

:where(.is-layout-flex) {
  gap: 16px;
}
@media screen and (min-width: 768px) {
  :where(.is-layout-flex) {
    gap: 32px;
  }
}

.js-fade-in {
  opacity: 0;
  filter: blur(8px);
  transition: 0.4s ease;
}
.js-fade-in.is-visible {
  opacity: 1;
  filter: blur(0);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: overlay;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: 100px;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.layout__inner {
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
  padding: 0 var(--contents-padding-beside);
}
@media (min-width: 768px) {
  .layout__inner {
    padding: 0 var(--contents-padding-beside-md);
  }
}

.layout__ContentsWrapper {
  margin-top: 40px;
}
@media (min-width: 768px) {
  .layout__ContentsWrapper {
    margin-top: 80px;
  }
}
.layout__ContentsWrapper.-single {
  margin-top: 24px;
}
@media (min-width: 768px) {
  .layout__ContentsWrapper.-single {
    margin-top: 40px;
  }
}
.layout__ContentsWrapper--width-thumbnail {
  margin-top: 0;
}

.layout__pageContents {
  margin-block-start: 40px;
  margin-block-end: 80px;
  font-size: 1.125rem;
}
@media (min-width: 768px) {
  .layout__pageContents {
    margin-block-start: 60px;
    margin-block-end: 120px;
  }
}

.layout__editorContents {
  margin-block-start: 32px;
  margin-block-end: 60px;
}
@media (min-width: 768px) {
  .layout__editorContents {
    margin-block-start: 56px;
    margin-block-end: 120px;
  }
}
.layout__editorContents :where(h1) {
  font-weight: bold;
  margin-block-start: 70px;
  font-size: 48px;
}
@media (max-width: 991px) {
  .layout__editorContents :where(h1) {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .layout__editorContents :where(h1) {
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  .layout__editorContents :where(h1) {
    margin-block-start: 100px;
  }
}
.layout__editorContents :where(h2) {
  font-weight: bold;
  margin-block-start: 63px;
  font-size: 32px;
}
@media (max-width: 991px) {
  .layout__editorContents :where(h2) {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .layout__editorContents :where(h2) {
    font-size: 24px;
  }
}
@media (min-width: 768px) {
  .layout__editorContents :where(h2) {
    margin-block-start: 90px;
  }
}
.layout__editorContents :where(h3) {
  font-weight: bold;
  margin-block-start: 50.4px;
  font-size: 28px;
}
@media (max-width: 991px) {
  .layout__editorContents :where(h3) {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .layout__editorContents :where(h3) {
    font-size: 20px;
  }
}
@media (min-width: 768px) {
  .layout__editorContents :where(h3) {
    margin-block-start: 72px;
  }
}
.layout__editorContents :where(h4) {
  font-weight: bold;
  margin-block-start: 33.6px;
  font-size: 24px;
}
@media (max-width: 991px) {
  .layout__editorContents :where(h4) {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .layout__editorContents :where(h4) {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .layout__editorContents :where(h4) {
    margin-block-start: 48px;
  }
}
.layout__editorContents :where(h5) {
  margin-block-start: 22.4px;
  font-size: 24px;
}
@media (max-width: 991px) {
  .layout__editorContents :where(h5) {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .layout__editorContents :where(h5) {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .layout__editorContents :where(h5) {
    margin-block-start: 32px;
  }
}
.layout__editorContents :where(h6) {
  font-size: 20px;
}
@media (max-width: 991px) {
  .layout__editorContents :where(h6) {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .layout__editorContents :where(h6) {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .layout__editorContents :where(h6) {
    margin-block-start: 16.8px;
    margin-block-start: 24px;
  }
}
.layout__editorContents :where(p) {
  font-weight: 400;
  margin-top: 16px;
}
.layout__editorContents ul, .layout__editorContents ol {
  padding-left: 1.5em;
  list-style: auto;
  margin-top: 16px;
}
.layout__editorContents li {
  margin: 0;
}
.layout__editorContents.-recruit-top {
  margin-bottom: 0;
}

.layout__articleTitleArea {
  display: grid;
  gap: 16px 0;
}
@media (min-width: 768px) {
  .layout__articleTitleArea {
    gap: 24px 0;
  }
}

.layout__postContents {
  margin-block-end: 80px;
}
@media (min-width: 768px) {
  .layout__postContents {
    margin-block-end: 120px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 101;
  width: 100%;
}
.site-header .logo-white {
  display: none;
}

.home .site-header {
  position: fixed;
  transition: background 0.2s ease;
}
.home .site-header .logo-normal {
  display: none;
}
.home .site-header .logo-white {
  display: block;
}
.home .site-header .primary-menu > li > a, .home .site-header .header__shopMenu {
  color: var(--text-white);
}
.home .site-header .primary-menu > li > a path, .home .site-header .header__shopMenu path {
  fill: var(--text-white);
}
.home .site-header.is-active .site-header__container {
  background: #F2F6F3;
}
.home .site-header.is-active .primary-menu > li > a, .home .site-header.is-active .header__shopMenu {
  color: var(--text-default);
}
.home .site-header.is-active .primary-menu > li > a path, .home .site-header.is-active .header__shopMenu path {
  fill: var(--text-default);
}
.home .site-header.is-active .logo-normal {
  display: block;
}
.home .site-header.is-active .logo-white {
  display: none;
}
.home .site-header .site-header__container {
  transition: background 0.2s ease;
  background: transparent;
}

.site-header__container.is-active .logo-normal {
  display: block;
}
.site-header__container.is-active .logo-white {
  display: none;
}

.header__shopMenu {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}
.header__shopMenu::before {
  display: inline;
  margin-right: 24px;
}
@media (min-width: 992px) {
  .header__shopMenu::before {
    content: "|";
  }
}

.site-header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: #F2F6F3;
}
@media (min-width: 992px) {
  .site-header__container {
    padding: 24px 40px;
  }
}
.site-header__container.is-active {
  background: #F2F6F3 !important;
}

.site-branding {
  width: 100px;
}
@media (min-width: 992px) {
  .site-branding {
    width: 150px;
  }
}
.site-branding a, .site-branding img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.main-navigation {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  width: 70%;
  height: 100vh;
  flex-direction: column;
  justify-content: flex-start;
  background: #F2F6F3;
  padding: 40px 16px 120px;
  transition: 0.2s ease;
  max-width: 320px;
}
@media (min-width: 992px) {
  .main-navigation {
    position: static;
    transform: unset;
    opacity: 1;
    visibility: visible;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0;
    max-width: unset;
    background: transparent;
    flex: 1;
    height: fit-content;
  }
}
.main-navigation.is-open {
  opacity: 1;
  visibility: visible;
}
.main-navigation.is-open .primary-menu > li > a, .main-navigation.is-open .header__shopMenu {
  color: var(--text-default);
}
.main-navigation.is-open .primary-menu > li > a path, .main-navigation.is-open .header__shopMenu path {
  fill: var(--text-default);
}
.main-navigation > .primary-menu {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  list-style: none;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media (min-width: 992px) {
  .main-navigation > .primary-menu {
    align-items: center;
    flex-direction: row;
  }
}
.main-navigation > .primary-menu > li {
  position: relative;
}
.main-navigation > .primary-menu > li > a {
  display: block;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--text-default);
  font-weight: 400;
  line-height: 1.4;
  font-size: 16px;
  border-bottom: 1px solid #C1C1C1;
}
@media (min-width: 992px) {
  .main-navigation > .primary-menu > li > a {
    display: inline-block;
    border: none;
  }
}
@media (max-width: 991px) {
  .main-navigation > .primary-menu > li.menu-item-has-children {
    display: grid;
    grid-template-columns: 1fr 44px;
    border-bottom: 1px solid #C1C1C1;
  }
  .main-navigation > .primary-menu > li.menu-item-has-children > a {
    border-bottom: none;
  }
  .main-navigation > .primary-menu > li.menu-item-has-children > .sub-menu {
    grid-column: 1/-1;
  }
}
.main-navigation > .primary-menu > li > .sub-menu-toggle {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-default);
  padding: 0;
}
.main-navigation > .primary-menu > li > .sub-menu-toggle svg {
  transition: transform 0.2s ease;
}
.main-navigation > .primary-menu > li > .sub-menu-toggle.is-open svg {
  transform: rotate(180deg);
}
@media (min-width: 992px) {
  .main-navigation > .primary-menu > li > .sub-menu-toggle {
    display: none;
  }
}
.main-navigation > .primary-menu > li > .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}
.main-navigation > .primary-menu > li > .sub-menu.is-open {
  display: block;
}
.main-navigation > .primary-menu > li > .sub-menu > li > a {
  display: block;
  padding: 8px 4px 8px 16px;
  text-decoration: none;
  color: var(--text-default);
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid #E5E5E5;
}
@media (min-width: 992px) {
  .main-navigation > .primary-menu > li > .sub-menu {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: 160px;
    background: #F2F6F3;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
  }
  .main-navigation > .primary-menu > li > .sub-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }
  .main-navigation > .primary-menu > li > .sub-menu > li > a {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(193, 193, 193, 0.5);
    font-size: 14px;
    white-space: nowrap;
    transition: color 0.2s ease;
  }
  .main-navigation > .primary-menu > li > .sub-menu > li > a:hover {
    color: var(--text-primary);
  }
  .main-navigation > .primary-menu > li > .sub-menu > li:last-child > a {
    border-bottom: none;
  }
}
@media (min-width: 992px) {
  .main-navigation > .primary-menu > li.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 5px;
    vertical-align: middle;
    transition: transform 0.2s ease;
  }
  .main-navigation > .primary-menu > li.menu-item-has-children:hover > a::after {
    transform: rotate(-135deg) translateY(2px);
  }
  .main-navigation > .primary-menu > li.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
  }
}
.main-navigation .socialList {
  margin-top: auto;
}
@media (min-width: 992px) {
  .main-navigation .socialList {
    display: none;
  }
}

.sidebar__button--contact {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #6E921D;
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}
.sidebar__button--contact:hover {
  background-color: #5a7b15;
}
.sidebar__button--contact__icon {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}
.sidebar__button--contact__icon svg {
  width: 20px;
  height: 20px;
}

.hamburger {
  display: block;
  position: relative;
  aspect-ratio: 1/1;
  padding: 5px;
  cursor: pointer;
  width: 40px;
  border: none;
  background: transparent;
  border-radius: 0;
}
@media (min-width: 992px) {
  .hamburger {
    display: none;
  }
}
.hamburger.is-opened + .p-header__logo {
  opacity: 0;
  visibility: hidden;
  filter: blur(6px);
  pointer-events: none;
}
.hamburger.is-opened .hamburger-bar:nth-of-type(1) {
  top: 50%;
  right: 5px;
  transform: rotate(-45deg);
}
.hamburger.is-opened .hamburger-bar:nth-of-type(2) {
  opacity: 0;
}
.hamburger.is-opened .hamburger-bar:nth-of-type(3) {
  top: 50%;
  right: 5px;
  transform: rotate(45deg);
}
.hamburger.is-opened .hamburger-text {
  opacity: 1;
  visibility: visible;
}

.hamburger-bar {
  height: 2px;
  background: var(--primary-black);
  display: block;
  --range-max: 30;
  --range-scale: 5;
  position: absolute;
  right: 5px;
  pointer-events: none;
  transform-origin: center center;
  transition: 0.2s ease;
  width: calc(100% - 10px);
}
.hamburger-bar:nth-of-type(1) {
  top: calc(50% - 9px);
}
.hamburger-bar:nth-of-type(2) {
  top: 50%;
}
.hamburger-bar:nth-of-type(3) {
  top: calc(50% + 9px);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s ease;
}
@media (min-width: 992px) {
  .overlay {
    display: none;
  }
}
.overlay.is-active {
  opacity: 1;
  visibility: visible;
}

@media (any-hover: hover) {
  .primary-menu > li a, .header__shopMenu {
    transition: 0.2s ease;
  }
  .primary-menu > li a path, .header__shopMenu path {
    transition: 0.2s ease;
  }
  .primary-menu > li a:hover, .header__shopMenu:hover {
    color: var(--text-primary);
  }
  .primary-menu > li a:hover path, .header__shopMenu:hover path {
    fill: var(--text-primary);
  }
  .home .site-header:not(.is-active) .primary-menu > li > a:hover, .home .site-header:not(.is-active) .header__shopMenu:hover {
    text-decoration: underline;
  }
  .home .site-header.is-active .primary-menu > li > a:hover, .home .site-header.is-active .header__shopMenu:hover {
    color: var(--text-primary);
  }
  .home .site-header.is-active .primary-menu > li > a:hover path, .home .site-header.is-active .header__shopMenu:hover path {
    fill: var(--text-primary);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.footer {
  background-color: #f2f6f3;
  padding: 80px 0 16px;
  position: relative;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.footer .footer__container {
  display: grid;
  width: 100%;
}
@media (min-width: 768px) {
  .footer .footer__container {
    grid-template-columns: 517fr 523fr;
  }
}

.footer__logo {
  max-width: 160px;
}
@media (min-width: 768px) {
  .footer__logo {
    max-width: 200px;
  }
}
.footer__logo img {
  width: 100%;
  vertical-align: bottom;
  height: auto;
}

.footer__menu-wrap {
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .footer__menu-wrap {
    margin-block-start: 72px;
  }
}

.footer-menu {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 16px;
}
@media (min-width: 768px) {
  .footer-menu {
    flex-direction: row;
    gap: 16px 40px;
  }
}
.footer-menu .footer-menu__listItem__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3888888889;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  text-transform: capitalize;
}
.footer-menu .footer-menu__listItem__title--ja {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4166666667;
}

@media (any-hover: hover) {
  .footer-menu__listItem a {
    transition: color 0.2s ease;
  }
  .footer-menu__listItem a:hover {
    color: var(--text-primary);
  }
}
.footer__snsLink-wrap {
  margin-block-start: 24px;
  grid-row: 9;
}
@media (min-width: 768px) {
  .footer__snsLink-wrap {
    margin-block-start: 32px;
  }
}

.footer__subMenu-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-block-start: 24px;
  grid-row: 10;
}
@media (min-width: 768px) {
  .footer__subMenu-wrap {
    align-items: center;
    margin-block-start: 40px;
    flex-direction: row;
  }
}
.footer__subMenu-wrap a {
  display: inline-block;
  padding: 2px 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

@media (any-hover: hover) {
  .footer__subMenu-wrap a {
    transition: color 0.2s ease;
  }
  .footer__subMenu-wrap a:hover {
    color: var(--text-primary);
  }
}
.footer__bottom {
  width: 100%;
  text-align: center;
  margin-block-start: 32px;
}
@media (min-width: 768px) {
  .footer__bottom {
    margin-block-start: 47px;
  }
}

.footer__copyright {
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}
@media (max-width: 991px) {
  .footer__copyright {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .footer__copyright {
    font-size: 12px;
  }
}

.footer__navContainer {
  display: contents;
}
@media (min-width: 768px) {
  .footer__navContainer {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
    padding-right: 24px;
  }
}
.footer__navContainer + .footer__informationSection {
  position: relative;
}
.footer__navContainer + .footer__informationSection::before {
  display: block;
  width: 3px;
  height: 83%;
  background: #B3BCB5;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .footer__navContainer + .footer__informationSection::before {
    content: "";
  }
}

.footer__informationSection {
  display: contents;
}
@media (min-width: 768px) {
  .footer__informationSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 24px;
  }
}

.footer__informationSection-inner {
  display: grid;
  gap: 8px 0;
  height: fit-content;
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .footer__informationSection-inner {
    margin-left: auto;
    gap: 24px 0;
    max-width: 386px;
    margin-block-start: 0;
  }
}

.footer__informationSection-titleArea {
  display: flex;
  align-items: center;
  gap: 24px;
  width: fit-content;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .footer__informationSection-titleArea {
    width: 100%;
  }
}

@media (any-hover: hover) {
  .footer__informationSection-titleArea .circleBtn {
    transition: transform 0.2s ease;
  }
  .footer__informationSection-titleArea:hover .circleBtn {
    transform: scale(1.25);
  }
}
.footer__informationSection-title {
  display: flex;
  flex-direction: column;
  position: relative;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
}
.footer__informationSection-title::before {
  content: attr(data-en);
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  font-size: 48px;
  line-height: 1.375;
  letter-spacing: 0.04em;
}
@media (max-width: 991px) {
  .footer__informationSection-title::before {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .footer__informationSection-title::before {
    font-size: 32px;
  }
}

.footer__informationSection-description p {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.02em;
}
@media (min-width: 768px) {
  .footer__informationSection-description p {
    font-size: 16px;
  }
}
.footer__informationSection-description p:nth-of-type(n+2) {
  margin-block-start: 0.5em;
}

.footer__associated-wrap {
  margin-block-start: 32px;
  grid-row: 8;
}

.footer__associated-heading {
  font-size: 12px;
  line-height: 1;
}

.footer__associated-list {
  display: grid;
  gap: 8px;
  margin-block-start: 8px;
}
.footer__associated-list a {
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 991px) {
  .footer__associated-list a {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .footer__associated-list a {
    font-size: 16px;
  }
}

@media (any-hover: hover) {
  .footer__associated-list a {
    transition: color 0.2s ease;
  }
  .footer__associated-list a:hover {
    color: var(--text-primary);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.icon-heading {
  color: #203424;
}
.icon-heading .icon-heading__iconWrapper {
  display: flex;
  align-items: center;
}
.icon-heading .icon-heading__symbol-logo {
  height: auto;
  margin-right: 4px;
}
.icon-heading .icon-heading__title-en {
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 991px) {
  .icon-heading .icon-heading__title-en {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .icon-heading .icon-heading__title-en {
    font-size: 14px;
  }
}
.icon-heading .icon-heading__title-jp {
  font-size: 28px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 991px) {
  .icon-heading .icon-heading__title-jp {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .icon-heading .icon-heading__title-jp {
    font-size: 20px;
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.page-header__title {
  display: grid;
  grid-template-columns: 1fr;
  font-size: 48px;
  font-weight: 500;
  font-family: "Poppins", "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  width: 100%;
}
@media (max-width: 991px) {
  .page-header__title {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .page-header__title {
    font-size: 32px;
  }
}

.page-header__iconWithText {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-header__iconWithText::after {
  content: attr(data-en);
  font-family: "Poppins", "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
}
@media (max-width: 991px) {
  .page-header__iconWithText::after {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .page-header__iconWithText::after {
    font-size: 16px;
  }
}

.page-header__anime {
  width: 100%;
  overflow: hidden;
}

.page-header__wrap--width-thumbnail {
  width: 100%;
  background: var(--background-light);
  position: relative;
  min-height: 200px;
  aspect-ratio: 120/56;
}
.page-header__wrap--width-thumbnail .page-header__thumbnail {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}
.page-header__wrap--width-thumbnail .page-header__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 1;
}
.page-header__wrap--width-thumbnail .page-header__title {
  color: var(--text-white);
  opacity: 0;
  transform: translateY(-100%);
  animation: dropIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: 0.9s;
  will-change: transform, opacity;
}
.page-header__wrap--width-thumbnail .page-header__title small {
  font-size: 24px;
}
@media (max-width: 991px) {
  .page-header__wrap--width-thumbnail .page-header__title small {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .page-header__wrap--width-thumbnail .page-header__title small {
    font-size: 18px;
  }
}
.page-header__wrap--width-thumbnail::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary-white);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  animation: default-overlay 1s ease-in-out forwards;
}
.page-header__wrap--width-thumbnail::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--primary-black);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  animation: slide-overlay 1s ease-in-out forwards;
}

@keyframes default-overlay {
  0% {
    transform: translateX(0); /* 左の外から登場 */
  }
  40% {
    transform: translateX(0); /* 左端に到達 */
  }
  50% {
    transform: translateX(0); /* 0.2s程度停止 */
  }
  100% {
    transform: translateX(100%); /* 右に抜けて消える */
  }
}
@keyframes slide-overlay {
  0% {
    transform: translateX(-100%); /* 左の外から登場 */
  }
  40% {
    transform: translateX(0); /* 左端に到達 */
  }
  50% {
    transform: translateX(0); /* 0.2s程度停止 */
  }
  100% {
    transform: translateX(100%); /* 右に抜けて消える */
  }
}
@keyframes dropIn {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }
  60% {
    transform: translateY(0%);
    opacity: 1;
  } /* 着地して見える */
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.section-header__title {
  font-size: 20px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 991px) {
  .section-header__title {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .section-header__title {
    font-size: 16px;
  }
}
.section-header__title::before {
  content: "";
  display: block;
  --section-header__circle-size: 12px;
  width: var(--section-header__circle-size);
  height: var(--section-header__circle-size);
  background: var(--primary-default);
  border-radius: 50%;
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.post__row {
  border-top: 1px solid #ABABAB;
  position: relative;
}
.post__row::before {
  content: "";
  display: block;
  width: 25px;
  height: 1px;
  background: var(--primary-black);
  position: absolute;
  top: -1px;
  left: 0;
}
.post__row:last-of-type {
  border-bottom: 1px solid #ABABAB;
}
.post__row:last-of-type::after {
  content: "";
  display: block;
  width: 25px;
  height: 1px;
  background: var(--primary-black);
  position: absolute;
  bottom: -1px;
  left: 0;
}

.post__anchor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 8px;
  padding: 20px 0;
}
@media (min-width: 768px) {
  .post__anchor {
    grid-template-columns: max-content 1fr;
    gap: 0 24px;
    padding: 28px 0;
  }
}
.post__anchor img {
  width: 100%;
  vertical-align: bottom;
  height: 100%;
  object-fit: cover;
}
.post__anchor img.post__thumbnail--logo {
  width: 40%;
  height: auto;
}

@media (any-hover: hover) {
  .post__anchor {
    transition: background 0.2s ease;
  }
  .post__anchor:hover {
    background: #F2F6F3;
  }
}
.post__date {
  writing-mode: vertical-rl;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-primary);
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (min-width: 768px) {
  .post__date {
    min-width: 50px;
    font-size: 14px;
  }
}

.post__meta {
  display: flex;
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) {
  .post__meta {
    grid-template-columns: 257fr 653fr;
    gap: 56px;
  }
}

.post__thumbnail {
  overflow: hidden;
  aspect-ratio: 257/142;
  background: linear-gradient(90deg, rgba(110, 146, 29, 0.5) 13.95%, rgba(0, 69, 23, 0.5) 67.69%, rgba(0, 69, 23, 0.5) 121.43%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.post__contents {
  flex: 1;
}

.post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.post__tag {
  font-weight: 500;
  font-size: 14px;
  color: #606060;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
}

.post__title {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 991px) {
  .post__title {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .post__title {
    font-size: 16px;
  }
}

.post__catWrapper {
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .post__catWrapper {
    margin-bottom: 40px;
  }
}

.post__catList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.post__catItem {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background: #F2F2F2;
}
.post__catItem.is-active {
  color: var(--text-white);
  background: var(--primary-default);
}

.post__catItem-anchor {
  padding: 6px 24px;
  font-weight: 500;
  font-size: 14px;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
}

@media (any-hover: hover) {
  .post__catItem:not(.is-active) {
    transition: background 0.2s ease;
  }
  .post__catItem:not(.is-active):hover {
    background: var(--primary-light);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.myPagination {
  margin-top: 40px;
}
@media (min-width: 768px) {
  .myPagination {
    margin-top: 72px;
  }
}

.myPagination__list {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  gap: 0 0.6em;
  list-style: none !important;
}
.myPagination__list .page-numbers {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #DADADA;
}
.myPagination__list .page-numbers[aria-current] {
  color: var(--primary-default);
}

.myPagination__prev, .myPagination__next {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background: var(--primary-default);
  --pagination-size: 42px;
  width: var(--pagination-size);
  height: var(--pagination-size);
  border: 1px solid var(--primary-white);
}
.myPagination__prev svg, .myPagination__next svg {
  width: 9px;
  height: auto;
}
.myPagination__prev.is-disabled, .myPagination__next.is-disabled {
  background: #DADADA;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
ul.shareBtns__list {
  display: grid;
  padding: 10px;
  gap: 10px;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}
@media (min-width: 768px) {
  ul.shareBtns__list {
    grid-template-columns: repeat(4, 119px);
  }
}

.shareBtns__btn {
  padding: 8px 12px;
  border-radius: 4px;
  background: #F2F2F2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 119/72;
}
@media (any-hover: hover) {
  .shareBtns__btn {
    transition: box-shadow 0.2s ease;
  }
  .shareBtns__btn:hover {
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1) inset;
  }
}
.shareBtns__icon {
  display: block;
  width: 32px;
  height: auto;
}
.shareBtns__icon img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
  max-width: 100%;
}

.shareBtns__info {
  font-size: 18px;
  font-weight: bold;
  display: none;
  padding: 1em 2em;
  color: var(--primary-white);
  border-radius: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary-black);
  opacity: 0.8;
  z-index: 2;
  pointer-events: none;
}
@media (max-width: 991px) {
  .shareBtns__info {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .shareBtns__info {
    font-size: 16px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.textWithBtn__container {
  width: fit-content;
  position: relative;
  display: flex;
  align-items: center;
}
.textWithBtn__container .circleBtn__text {
  z-index: 1;
}
.textWithBtn__container .circleBtn__text + a {
  margin-left: -5.75%;
  transition: transform 0.2s ease;
}

@media (any-hover: hover) {
  .circleBtn__text:hover + a {
    transform: scale(1.25);
  }
  .textWithBtn__container a:not(.circleBtn__text):hover {
    transform: scale(1.25);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.circleBtn {
  --circle-btn-size: 48px;
  width: var(--circle-btn-size);
  height: var(--circle-btn-size);
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
@media (min-width: 768px) {
  .circleBtn {
    --circle-btn-size: 64px;
  }
}
.circleBtn.-extraSmall {
  --circle-btn-size: 24px;
}
@media (min-width: 768px) {
  .circleBtn.-extraSmall {
    --circle-btn-size: 26px;
  }
}
.circleBtn.-small {
  --circle-btn-size: 28px;
}
@media (min-width: 768px) {
  .circleBtn.-small {
    --circle-btn-size: 32px;
  }
}
.circleBtn.-medium {
  --circle-btn-size: 56px;
}
@media (min-width: 768px) {
  .circleBtn.-medium {
    --circle-btn-size: 70px;
  }
}
.circleBtn.-large {
  --circle-btn-size: 60px;
}
@media (min-width: 768px) {
  .circleBtn.-large {
    --circle-btn-size: 92px;
  }
}

.circleBtn__text {
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
@media (max-width: 991px) {
  .circleBtn__text {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .circleBtn__text {
    font-size: 14px;
  }
}
.circleBtn__text::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--primary-black);
  margin-top: 8px;
  position: absolute;
  bottom: -8px;
  left: 0;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.breadcrumbs {
  background: #F8FAF9;
  padding: 8px 0;
}
@media (min-width: 768px) {
  .breadcrumbs {
    padding: 16px 0;
  }
}

.breadcrumbs__inner {
  padding: 0 16px;
}
@media (min-width: 768px) {
  .breadcrumbs__inner {
    padding: 0 40px;
  }
}

.breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  width: 100%;
}

.breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  overflow: hidden;
}
.breadcrumbs__item a, .breadcrumbs__item span:not(.breadcrumbs__arrow) {
  font-weight: 400;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.breadcrumbs__item:last-child {
  flex: 1;
}

@media (any-hover: hover) {
  .breadcrumbs__item a, .breadcrumbs__item .breadcrumbs__home-text {
    transition: 0.2s ease;
  }
  .breadcrumbs__item a path, .breadcrumbs__item .breadcrumbs__home-text path {
    transition: 0.2s ease;
  }
  .breadcrumbs__item a:hover, .breadcrumbs__item .breadcrumbs__home-text:hover {
    color: var(--text-primary);
  }
  .breadcrumbs__item a:hover path, .breadcrumbs__item .breadcrumbs__home-text:hover path {
    fill: var(--text-primary);
  }
}
.breadcrumbs__homeLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.socialList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 32px;
}

.socialList__item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.socialList__item a {
  display: inline-block;
  color: #203424;
}
.socialList__item a svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  transition: opacity 0.2s ease-in-out;
}
.socialList__item a:hover svg {
  opacity: 0.7;
}
.socialList__item img {
  width: 28px;
  height: auto;
}

@media (any-hover: hover) {
  .socialList__item a {
    transition: opacity 0.2s ease;
  }
  .socialList__item a:hover {
    opacity: 0.7;
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.headerBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: calc(infinity * 1px);
  background: var(--primary-default);
  padding: 16px 32px;
  flex: 0 0 auto;
}

.headerBtn__icon {
  width: 20px;
  height: auto;
}

.headerBtn__text {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--text-white);
  flex: 0 0 auto;
}

@media (any-hover: hover) {
  .headerBtn {
    transition: 0.2s ease;
  }
  .headerBtn:hover {
    background: var(--primary-green);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.slider {
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.swiper-wrapper {
  transition-timing-function: linear !important;
}

.slider__item {
  position: relative;
  aspect-ratio: 320/198;
  border-radius: 8px;
  margin-bottom: 4px;
}
@media (min-width: 768px) {
  .slider__item {
    border-radius: 16px;
    margin-bottom: 8px;
  }
}
.slider__item::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(110, 146, 29, 0.5) 13.95%, rgba(0, 69, 23, 0.5) 67.69%, rgba(0, 69, 23, 0.5) 121.43%);
  z-index: -1;
  border-radius: inherit;
}
@media (min-width: 768px) {
  .slider__item::after {
    top: 8px;
    right: 8px;
  }
}
.slider__item:nth-of-type(2n-1)::after {
  left: unset;
  right: 4px;
}
@media (min-width: 768px) {
  .slider__item:nth-of-type(2n-1)::after {
    right: 8px;
  }
}
.slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
  border-radius: inherit;
}

button.クラス {
  background: #ff6600;
  color: #fff;
  border: none;
  transition: 0.2s ease;
}

button.クラス:hover {
  background: #ff6600 !important;
  opacity: 0.7;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.commonBtn {
  color: var(--text-white);
  background: var(--primary-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 64px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 16px;
  position: relative;
  min-height: 72px;
  gap: 10px;
  width: fit-content;
}

@media (any-hover: hover) {
  .commonBtn {
    transition: opacity 0.2s ease;
  }
  .commonBtn:hover {
    opacity: 0.7;
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.boxCard {
  padding: 16px;
  background: var(--background-light);
  border-radius: 8px;
  margin: 0;
}
@media (min-width: 768px) {
  .boxCard {
    padding: 24px 32px;
  }
}
.boxCard * {
  margin: 0;
}

.boxCard__headline {
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
}
.boxCard__headline p {
  display: flex;
  gap: 16px;
  font-weight: 500;
  font-size: 24px;
  transition: color 0.2s ease;
}
@media (max-width: 991px) {
  .boxCard__headline p {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .boxCard__headline p {
    font-size: 18px;
  }
}
.boxCard__headline .circleBtn {
  flex-shrink: 0;
}
.boxCard__headline ~ p {
  margin-block-start: 16px;
  font-size: 18px;
}
@media (max-width: 991px) {
  .boxCard__headline ~ p {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .boxCard__headline ~ p {
    font-size: 16px;
  }
}
.boxCard__headline ~ p:not(.boxCard__announce) {
  margin-left: 28px;
}
.boxCard__headline ~ p.boxCard__announce {
  font-weight: 500;
  font-size: 16px;
  margin-block-start: 12px;
}
@media (max-width: 991px) {
  .boxCard__headline ~ p.boxCard__announce {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .boxCard__headline ~ p.boxCard__announce {
    font-size: 14px;
  }
}
.boxCard__headline ~ p.boxCard__announce--green {
  color: #04B801;
}
.boxCard__headline ~ p.boxCard__announce--red {
  color: var(--color-red);
}

.boxCard__headline:not(.-dots-none) p {
  position: relative;
  --circle-size: 12px;
}
.boxCard__headline:not(.-dots-none) p::after {
  font-size: 24px;
  content: "";
  position: absolute;
  top: 0.5em;
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: calc(infinity * 1px);
  background: var(--primary-default);
}
@media (max-width: 991px) {
  .boxCard__headline:not(.-dots-none) p::after {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .boxCard__headline:not(.-dots-none) p::after {
    font-size: 18px;
  }
}
.boxCard__headline:not(.-dots-none) p::before {
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  background: transparent;
  flex: 0 0 auto;
}

@media (any-hover: hover) {
  a.boxCard__headline .circleBtn {
    transition: 0.2s ease;
  }
  a.boxCard__headline:hover p {
    color: var(--text-primary);
  }
  a.boxCard__headline:hover .circleBtn {
    transform: scale(1.25);
  }
}
ul.boxCard__list {
  margin-block-start: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 56px;
  padding-left: 0;
  list-style: none;
}
@media (min-width: 768px) {
  ul.boxCard__list {
    margin-block-start: 24px;
  }
}

.boxCard__listItem {
  width: 100%;
}
.boxCard__listItem.-fit {
  width: fit-content;
}
.boxCard__listItem.-strong {
  flex: 1 1 100%;
}
.boxCard__listItem.-strong a {
  background: var(--primary-default);
  border-radius: calc(infinity * 1px);
  padding: 16px 18px;
  color: var(--text-white);
}
@media (any-hover: hover) {
  .boxCard__listItem.-strong a {
    transition: 0.2s ease;
  }
  .boxCard__listItem.-strong a:hover {
    background: var(--primary-green);
  }
}
.boxCard__listItem a {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
@media (max-width: 991px) {
  .boxCard__listItem a {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .boxCard__listItem a {
    font-size: 14px;
  }
}
.boxCard__listItem a span {
  flex: 0 0 auto;
}
.boxCard__listItem a span:has(svg) {
  flex: auto;
  display: flex;
  align-items: center;
  gap: 0 8px;
}

@media (any-hover: hover) {
  .boxCard__listItem {
    transition: color 0.2s ease;
  }
  .boxCard__listItem .circleBtn {
    transition: 0.2s ease;
  }
  .boxCard__listItem:hover {
    color: var(--text-primary);
  }
  .boxCard__listItem:hover .circleBtn {
    transform: scale(1.25);
  }
}
.gridBox {
  display: grid;
}
@media (min-width: 768px) {
  .gridBox.-col2 {
    grid-template-columns: repeat(2, 1fr);
  }
}
.gridBox.-gap14_40 {
  gap: 16px;
}
@media (min-width: 992px) {
  .gridBox.-gap14_40 {
    gap: 14px 40px;
  }
}

.boxCard__list.-grid2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
}

.service__boxCard:nth-of-type(n+2) {
  margin-block-start: 16px;
}
@media (min-width: 768px) {
  .service__boxCard:nth-of-type(n+2) {
    margin-block-start: 32px;
  }
}

.service__fixedContentsWrap {
  margin-block-start: 40px;
}

.boxCard__blockWrap {
  display: grid;
  gap: 16px 0;
  margin-block-start: 32px;
}
@media (min-width: 768px) {
  .boxCard__blockWrap {
    gap: 32px 0;
  }
}

.boxCard__blockInner {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .boxCard__blockInner {
    gap: 32px;
  }
}
.boxCard__blockInner .boxCard__blockInner-btn {
  flex-shrink: 0;
}

@media (any-hover: hover) {
  .boxCard__blockInner-btn {
    transition: transform 0.2s ease;
  }
  .boxCard__blockInner-btn:hover {
    transform: translateX(8px);
  }
}
.boxCard__shopTable {
  margin-block-start: 16px;
}
@media (min-width: 768px) {
  .boxCard__shopTable {
    margin-block-start: 38px;
  }
}
@media (min-width: 768px) {
  .boxCard__shopTable tbody {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
  }
}
.boxCard__shopTable tr {
  display: grid;
  text-align: left;
}
@media (min-width: 768px) {
  .boxCard__shopTable tr {
    display: contents;
  }
}
.boxCard__shopTable th {
  font-size: 16px;
  font-weight: 500;
  margin-block-start: 8px;
}
@media (max-width: 991px) {
  .boxCard__shopTable th {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .boxCard__shopTable th {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .boxCard__shopTable th {
    margin-block-start: 0;
  }
}
.boxCard__shopTable td {
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 991px) {
  .boxCard__shopTable td {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .boxCard__shopTable td {
    font-size: 14px;
  }
}

.boxCard__shopTable-anchor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
  border-bottom: 1px solid var(--text-default);
}

@media (any-hover: hover) {
  .boxCard__shopTable-anchor {
    transition: 0.2s ease;
  }
  .boxCard__shopTable-anchor path {
    transition: 0.2s ease;
  }
  .boxCard__shopTable-anchor:hover {
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-primary);
  }
  .boxCard__shopTable-anchor:hover path {
    stroke: var(--text-primary);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.col2Block__wrap {
  margin-block-start: 40px;
}
@media (min-width: 768px) {
  .col2Block__wrap {
    margin-block-start: 56px;
  }
}
.col2Block__wrap .col2Block:nth-of-type(n+2) {
  margin-block-start: 40px;
}
@media (min-width: 768px) {
  .col2Block__wrap .col2Block:nth-of-type(2n) {
    flex-direction: row-reverse;
  }
}

.col2Block {
  display: flex;
  gap: 24px 48px;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 768px) {
  .col2Block {
    flex-direction: row;
  }
}

.col2Block__title {
  width: fit-content;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  background: linear-gradient(to bottom, transparent calc(100% - 10px), var(--primary-light) calc(100% - 10px));
  display: inline;
}
@media (max-width: 991px) {
  .col2Block__title {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .col2Block__title {
    font-size: 20px;
  }
}
.col2Block__title + p {
  margin-block-start: 24px;
}
.col2Block__title + p ~ p {
  margin-block-start: 16px;
  font-weight: 400;
  font-size: 16px;
}
@media (max-width: 991px) {
  .col2Block__title + p ~ p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .col2Block__title + p ~ p {
    font-size: 14px;
  }
}

.col2Block__subTitle {
  font-weight: 500;
  font-size: 18px;
  display: flex;
  gap: 16px;
  position: relative;
  --circle-size: 12px;
}
@media (max-width: 991px) {
  .col2Block__subTitle {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .col2Block__subTitle {
    font-size: 16px;
  }
}
.col2Block__subTitle::before {
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  background: transparent;
  flex: 0 0 auto;
}
.col2Block__subTitle::after {
  content: "";
  position: absolute;
  top: 0.5em;
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: calc(infinity * 1px);
  background: var(--primary-default);
}

.col2Block__item {
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
}
.col2Block__item:has(img:not(.-arrow)) {
  max-width: 300px;
  aspect-ratio: 356/356;
}
@media (min-width: 992px) {
  .col2Block__item:has(img:not(.-arrow)) {
    max-width: 356px;
  }
}
.col2Block__item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.col2Block__item .textWithBtn__container {
  margin-block-start: 24px;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.withIconTitle {
  font-weight: 500;
  font-size: 20px;
  display: flex;
  gap: 16px;
  position: relative;
  --circle-size: 12px;
  margin-block-start: 32px;
}
@media (max-width: 991px) {
  .withIconTitle {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .withIconTitle {
    font-size: 16px;
  }
}
@media (min-width: 768px) {
  .withIconTitle {
    margin-block-start: 64px;
  }
}
.withIconTitle::before {
  content: "";
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  background: transparent;
  flex: 0 0 auto;
}
.withIconTitle::after {
  content: "";
  position: absolute;
  top: 0.5em;
  display: block;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: calc(infinity * 1px);
  background: var(--primary-default);
}
.withIconTitle + p {
  margin-block-start: 24px;
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 991px) {
  .withIconTitle + p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .withIconTitle + p {
    font-size: 14px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.wideImgBlock {
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.wideImgBlock img {
  width: 100%;
  height: auto;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.interviewList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
  margin-block-start: 32px;
}
@media (min-width: 768px) {
  .interviewList {
    gap: 40px;
  }
}

.interviewList__item {
  display: grid;
  gap: 8px;
  grid-template-rows: subgrid;
  grid-row: span 6;
}

.interviewList__index {
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  font-size: 18px;
}
@media (max-width: 991px) {
  .interviewList__index {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .interviewList__index {
    font-size: 16px;
  }
}

.interviewList__thumbnail {
  border-radius: 8px;
  aspect-ratio: 5/3;
  overflow: hidden;
  margin-block-start: 8px;
}
.interviewList__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.interviewList__category {
  border-radius: calc(infinity * 1px);
  background: var(--primary-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  padding: 4px 16px;
  font-weight: 500;
  letter-spacing: 0;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  margin: 0;
  width: fit-content;
  grid-row: 3;
  margin-block-start: 8px;
  font-size: 16px;
}
@media (max-width: 991px) {
  .interviewList__category {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .interviewList__category {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .interviewList__category {
    padding: 6px 24px;
  }
}

.interviewList__title {
  font-weight: 500;
  font-size: 20px;
  margin: 0;
  grid-row: 4;
}
@media (max-width: 991px) {
  .interviewList__title {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .interviewList__title {
    font-size: 16px;
  }
}

.interviewList__postField {
  font-weight: 500;
  font-size: 14px;
  margin: 0;
  color: #606060;
  grid-row: 5;
}
@media (max-width: 991px) {
  .interviewList__postField {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .interviewList__postField {
    font-size: 12px;
  }
}

.interviewList__btn {
  margin-block-start: 8px;
  grid-row: 6;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.recruitInformation {
  background: linear-gradient(180deg, #EBF3D8 0%, #A6FFAF 100%);
  padding: 40px 0;
}
@media (min-width: 768px) {
  .recruitInformation {
    padding: 80px 0;
  }
}

.recruitInformation__contents {
  display: grid;
  gap: 42px;
  margin-block-start: 32px;
}
@media (min-width: 768px) {
  .recruitInformation__contents {
    gap: 72px;
  }
}

.recruitInformation__title {
  text-align: center;
  font-weight: 500;
  font-size: 20px;
}
@media (max-width: 991px) {
  .recruitInformation__title {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .recruitInformation__title {
    font-size: 16px;
  }
}
.recruitInformation__title.-border {
  padding: 16px 0;
  border-top: 1px solid var(--primary-white);
  border-bottom: 1px solid var(--primary-white);
}

.recruitInformation__table-wrap {
  background: var(--background-default);
  border-radius: 16px;
  padding: 24px 16px;
  box-shadow: 0 4px 23px 0 rgba(110, 146, 29, 0.1019607843);
  display: grid;
  gap: 24px;
}
@media (min-width: 768px) {
  .recruitInformation__table-wrap {
    gap: 60px;
    padding: 48px 80px;
  }
}

.recruitInformation__table-container {
  background: var(--background-light);
  border-radius: 8px;
  padding: 24px 16px;
}
@media (min-width: 768px) {
  .recruitInformation__table-container {
    padding: 24px 32px;
  }
}

.recruitInformation__table {
  border-collapse: collapse;
}
.recruitInformation__table tr {
  padding: 24px 0;
  border-bottom: 1px solid var(--background-secondary);
  display: grid;
  align-items: center;
  gap: 8px;
}
@media (min-width: 768px) {
  .recruitInformation__table tr {
    grid-template-columns: 160fr 624fr;
    gap: 32px;
  }
}
.recruitInformation__table tr:last-of-type {
  border: none;
  padding-bottom: 0;
}
.recruitInformation__table tr:first-of-type {
  padding-top: 0;
}
.recruitInformation__table th {
  text-align: left;
  font-weight: 500;
  font-size: 16px;
}
@media (max-width: 991px) {
  .recruitInformation__table th {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .recruitInformation__table th {
    font-size: 14px;
  }
}
.recruitInformation__table td {
  font-size: 16px;
}
@media (max-width: 991px) {
  .recruitInformation__table td {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .recruitInformation__table td {
    font-size: 14px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.recruitFlow__wrap {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .recruitFlow__wrap {
    gap: 32px;
  }
}

.recruitFlow__list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 992px) {
  .recruitFlow__list {
    flex-direction: row;
    gap: 12px;
  }
}

.recruitFlow__item {
  background: var(--background-default);
  border-radius: 50px;
  padding: 6px 24px;
  box-shadow: 0 4px 23px 0 rgba(164, 222, 30, 0.1019607843);
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  font-size: 20px;
}
@media (max-width: 991px) {
  .recruitFlow__item {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .recruitFlow__item {
    font-size: 16px;
  }
}
@media (min-width: 992px) {
  .recruitFlow__item {
    min-height: 109px;
    padding: 16px 8px;
  }
}
.recruitFlow__item span {
  color: var(--text-primary);
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  text-transform: uppercase;
  font-size: 14px;
}
@media (max-width: 991px) {
  .recruitFlow__item span {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .recruitFlow__item span {
    font-size: 12px;
  }
}

.recruitFlow__arrow {
  aspect-ratio: 1/1;
  border-radius: calc(infinity * 1px);
  background: var(--background-default);
  box-shadow: 0 4px 23px 0 rgba(164, 222, 30, 0.1019607843);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(90deg);
}
@media (min-width: 992px) {
  .recruitFlow__arrow {
    transform: rotate(0);
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.recruitEntry {
  padding: 40px 0;
}
@media (min-width: 768px) {
  .recruitEntry {
    padding: 80px 0;
  }
}

.recruitEntry__contents {
  display: grid;
  gap: 32px;
}

.recruitEntry__logo {
  width: 150px;
  margin-inline: auto;
}
.recruitEntry__logo img {
  width: 100%;
  height: auto;
}

.recruitEntry__text p {
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
  font-size: 24px;
}
@media (max-width: 991px) {
  .recruitEntry__text p {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .recruitEntry__text p {
    font-size: 18px;
  }
}
.recruitEntry__text p br {
  display: none;
}
@media (min-width: 768px) {
  .recruitEntry__text p br {
    display: block;
  }
}

.recruitEntry__btn {
  margin-inline: auto;
  min-width: 280px;
}
@media (min-width: 768px) {
  .recruitEntry__btn {
    min-width: 480px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.recruitInterview {
  padding: 40px 0 60px;
}
@media (min-width: 768px) {
  .recruitInterview {
    padding: 80px 0 120px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.recruitTop {
  padding: 40px 0;
  display: grid;
  gap: 40px;
  background: url(./assets/images/bg_recruit-top.png) no-repeat center center/100% auto;
}
@media (min-width: 768px) {
  .recruitTop {
    padding: 80px 0;
    gap: 80px;
  }
}

@media (min-width: 768px) {
  .recruitTop__textArea {
    max-width: 880px;
  }
}

.recruitTop__heading {
  font-weight: 700;
  font-size: 48px;
}
@media (max-width: 991px) {
  .recruitTop__heading {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .recruitTop__heading {
    font-size: 32px;
  }
}
.recruitTop__heading img {
  width: 100%;
  height: auto;
}

.recruitTop__text {
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .recruitTop__text {
    margin-block-start: 48px;
  }
}
.recruitTop__text p {
  font-weight: 700;
  line-height: 2;
  font-size: 20px;
}
@media (max-width: 991px) {
  .recruitTop__text p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .recruitTop__text p {
    font-size: 16px;
  }
}
.recruitTop__text p:nth-of-type(n+2) {
  margin-block-start: 2em;
}

.recruitTop__fv {
  background: url(./assets/images/bg_recruit-fv.jpg) no-repeat center center/cover;
  padding: 40px 16px;
  min-height: 560px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 768px) {
  .recruitTop__fv {
    aspect-ratio: 1200/560;
    padding: 80px 24px 66px;
  }
}
.recruitTop__fv .page-header__wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 100%;
  max-width: 1040px;
  padding: 0;
  gap: 40px;
}
.recruitTop__fv .page-header__title {
  color: var(--text-white);
}
.recruitTop__fv .page-header__iconWithText {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.circleSlide__container {
  padding-top: 16vw;
  position: relative;
}
@media (min-width: 768px) {
  .circleSlide__container {
    padding-top: 186px;
  }
}

.circleSlide__archText {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 12vw;
}
@media (min-width: 768px) {
  .circleSlide__archText {
    width: fit-content;
    top: 60px;
  }
}
@media (min-width: 992px) {
  .circleSlide__archText {
    top: 36px;
  }
}
.circleSlide__archText img {
  width: 100%;
}

.circleSlide__ellipse {
  overflow: visible;
  position: relative;
  width: 114.75vw;
  max-width: 1377px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.circleSlide__ellipse::before {
  width: 140%;
  border-radius: 50%/100% 100% 0 0;
  content: "";
  display: block;
  height: 100%;
  background-color: var(--background-secondary);
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translateX(-50%);
}
@media (min-width: 768px) {
  .circleSlide__ellipse::before {
    width: 100%;
    left: 0;
    transform: translateX(0);
  }
}

.swiper.circleSlider {
  width: 114.25vw;
  max-width: 1371px;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  overflow: visible;
}

.circleSlider__item {
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  transform: scale(0.5) translateY(200%) !important;
  transform-origin: center bottom;
  position: relative;
  transition-property: all !important;
  height: fit-content !important;
  opacity: 0;
  transition: transform 0.4s linear, margin-top 0.4s linear, transform-origin 0.4s linear, opacity 0.2s linear !important;
  margin-top: 100px;
}
@media (min-width: 768px) {
  .circleSlider__item {
    margin-top: 240px;
  }
}
.circleSlider__item.swiper-slide-active {
  opacity: 1;
  transform: scale(1.38) !important;
  margin-top: 0;
  visibility: visible;
}
.circleSlider__item.swiper-slide-active .circleSlider__item-number {
  opacity: 1;
}
.circleSlider__item.is-right1 {
  transform-origin: right bottom;
}
.circleSlider__item.is-left1 {
  transform-origin: left bottom;
}
.circleSlider__item.is-right1, .circleSlider__item.is-left1 {
  opacity: 1;
  margin-top: 0;
  transform: scale(0.78) !important;
  visibility: visible;
}
.circleSlider__item.is-right2, .circleSlider__item.is-left2 {
  opacity: 1;
  margin-top: 80px;
  transform-origin: center 78%;
  visibility: visible;
  transform: scale(0.68) !important;
}
@media (min-width: 768px) {
  .circleSlider__item.is-right2, .circleSlider__item.is-left2 {
    margin-top: 160px;
  }
}
.circleSlider__item.is-right2 {
  left: -3.5vw;
}
.circleSlider__item.is-left2 {
  right: -3.5vw;
}
.circleSlider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

@media (any-hover: hover) {
  .circleSlider__item img {
    transition: 0.2s ease;
  }
  .circleSlider__item:hover img {
    transform: scale(1.1);
  }
}
.circleSlider__item-number {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  opacity: 0;
  transition: 0.2s linear;
  font-family: "Poppins", "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  mix-blend-mode: difference;
  color: #fff;
  z-index: 1;
}
@media (min-width: 768px) {
  .circleSlider__item-number {
    font-size: 44px;
  }
}

.circleSlider__button-next, .circleSlider__button-prev {
  width: clamp(40px, 8vw, 96px);
  height: clamp(40px, 8vw, 96px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1), 0 8px 32px 6px rgba(0, 0, 0, 0.05);
  z-index: 10;
  position: absolute;
  top: 11%;
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  cursor: pointer;
  overflow: hidden;
  background: var(--background-default);
}
.circleSlider__button-next::after, .circleSlider__button-prev::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 2.6vw;
  margin: 0;
  width: 2.6vw;
}

@media (any-hover: hover) {
  .circleSlider__button-next, .circleSlider__button-prev {
    transition: 0.2s ease;
  }
  .circleSlider__button-next:hover, .circleSlider__button-prev:hover {
    background: var(--background-secondary);
  }
}
.circleSlider__button-prev {
  left: 26%;
}
.circleSlider__button-prev::after {
  background-image: url(./assets/svg/icon-circleSlide-prev.svg);
}

.circleSlider__button-next {
  right: 26%;
}
.circleSlider__button-next::after {
  background-image: url(./assets/svg/icon-circleSlide-next.svg);
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.designSlider {
  display: flex;
  overflow: hidden;
  padding-bottom: 24px;
}
@media (min-width: 768px) {
  .designSlider {
    padding-bottom: 40px;
  }
}

.designSlider__contents {
  animation: scroll-left 50s infinite linear 0.5s both;
  display: flex;
}

.designSlider__item {
  position: relative;
  width: 28.5714285714vw;
  aspect-ratio: 320/198;
  border-radius: 8px;
  margin-bottom: 4px;
  max-width: 320px;
  margin-left: 16px;
}
@media (min-width: 768px) {
  .designSlider__item {
    margin-right: 48px;
    border-radius: 16px;
    margin-bottom: 8px;
  }
}
.designSlider__item::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(110, 146, 29, 0.5) 13.95%, rgba(0, 69, 23, 0.5) 67.69%, rgba(0, 69, 23, 0.5) 121.43%);
  z-index: -1;
  border-radius: inherit;
}
@media (min-width: 768px) {
  .designSlider__item::after {
    top: 8px;
    left: 8px;
  }
}
.designSlider__item:nth-of-type(2n) {
  top: 24px;
}
@media (min-width: 768px) {
  .designSlider__item:nth-of-type(2n) {
    top: 40px;
  }
}
.designSlider__item:nth-of-type(2n-1)::after {
  left: unset;
  right: 4px;
}
@media (min-width: 768px) {
  .designSlider__item:nth-of-type(2n-1)::after {
    right: 8px;
  }
}
.designSlider__item img {
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  border-radius: inherit;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.moreReadBtn {
  display: flex;
  align-items: center;
  gap: 0 16px;
  flex-wrap: wrap;
  font-weight: 500;
  margin: 0;
  font-size: 12px;
}
@media (min-width: 768px) {
  .moreReadBtn {
    font-size: 16px;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .moreReadBtn {
    font-size: 16px;
  }
}
@media (min-width: 768px) and (max-width: 767px) {
  .moreReadBtn {
    font-size: 14px;
  }
}

@media (any-hover: hover) {
  .moreReadBtn {
    transition: 0.2s ease;
  }
  .moreReadBtn .circleBtn {
    transition: 0.2s ease;
  }
  .moreReadBtn:hover {
    color: var(--text-primary);
  }
  .moreReadBtn:hover .circleBtn {
    transform: scale(1.25);
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.groupList {
  display: grid;
  gap: 24px;
}
@media (min-width: 768px) {
  .groupList {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

.groupList__item {
  display: grid;
  grid-template-columns: 1.5fr 3fr;
  gap: 16px;
  align-items: center;
}
@media (min-width: 768px) {
  .groupList__item {
    grid-template-columns: 1fr;
  }
}

.groupList__thumbnail {
  aspect-ratio: 5/3;
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  background: var(--background-secondary);
  border: 1px solid var(--background-secondary);
}
.groupList__thumbnail img {
  width: 100%;
  vertical-align: bottom;
}

@media (any-hover: hover) {
  .groupList__thumbnail img {
    transition: 0.2s ease;
  }
  .groupList__thumbnail:hover img {
    transform: scale(1.1);
  }
}
.groupList__headline {
  font-weight: 500;
  font-size: 20px;
}
@media (max-width: 991px) {
  .groupList__headline {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .groupList__headline {
    font-size: 16px;
  }
}

.groupList__text {
  font-size: 14px;
  color: #606060;
}
@media (max-width: 991px) {
  .groupList__text {
    font-size: 13px;
  }
}
@media (max-width: 767px) {
  .groupList__text {
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .groupList__text {
    margin-block-start: 8px;
  }
}

.interviewList__btn {
  margin-block-start: 16px;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.readBox__wrap {
  width: 100%;
  margin-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .readBox__wrap {
    padding-bottom: 80px;
    margin-top: 80px;
  }
}

.readBox__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .readBox__inner {
    gap: 32px;
  }
}
.readBox__inner * {
  margin: 0;
  padding: 0;
}

.readBox__icon {
  width: 24px;
  vertical-align: bottom;
  height: auto;
}
@media (min-width: 768px) {
  .readBox__icon {
    width: 42px;
  }
}

.readBox__headline {
  font-size: 28px;
  line-height: 2;
  font-weight: 700;
}
@media (max-width: 991px) {
  .readBox__headline {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .readBox__headline {
    font-size: 20px;
  }
}

.readBox__subHeadline {
  font-size: 20px;
  font-weight: 500;
}
@media (max-width: 991px) {
  .readBox__subHeadline {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .readBox__subHeadline {
    font-size: 16px;
  }
}

.readBox__description {
  font-size: 16px;
  margin-top: 8px;
}
@media (max-width: 991px) {
  .readBox__description {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .readBox__description {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .readBox__description {
    margin-top: 24px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.hero {
  height: 100vh;
}

.hero__inner {
  height: 100%;
  position: relative;
}
.hero__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: bottom;
}

.hero__contents {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .hero__contents p .-sp {
    display: none;
  }
}

.hero__logo {
  width: 71.4285714286%;
}
@media (min-width: 768px) {
  .hero__logo {
    width: 33.8333333333%;
  }
}
.hero__logo img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.hero__subCopy {
  color: var(--text-white);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 15px 30px rgba(0, 0, 0, 0.69), 0 0 3px rgba(0, 0, 0, 0.45);
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.company-support {
  position: relative;
  z-index: 2;
}
.company-support__container {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: 0;
}
.company-support__title {
  font-weight: 500;
  font-size: 14px;
  color: var(--text-white);
  text-align: center;
}
@media (min-width: 768px) {
  .company-support__title {
    font-size: 18px;
  }
}
@media (min-width: 992px) {
  .company-support__title {
    font-size: 28px;
  }
}
@media (min-width: 768px) {
  .company-support__title br {
    display: none;
  }
}
.company-support__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: calc(infinity * 1px);
  background: var(--primary-white);
  padding: 4px 32px;
}
@media (min-width: 768px) {
  .company-support__link {
    padding: 16px 32px;
  }
}
.company-support__link-text {
  font-size: 12px;
  font-weight: 500;
}
@media (min-width: 768px) {
  .company-support__link-text {
    font-size: 16px;
  }
}
.company-support__arrow {
  font-size: 16px;
  font-weight: bold;
}
.company-support__bg-image {
  width: 100%;
  height: auto;
}
.company-support__content {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
@media (min-width: 768px) {
  .company-support__content {
    gap: 16px;
    padding: 80px 16px;
  }
}

@media (any-hover: hover) {
  .company-support__bg-image, .company-support__link {
    transition: 0.3s ease;
  }
  .company-support__container:hover .company-support__bg-image {
    transform: scale(1.1);
  }
  .company-support__container:hover .company-support__link {
    background: var(--primary-light);
  }
}
.company-support__icons {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-white);
  font-size: 10px;
  font-weight: 400;
  text-transform: capitalize;
}
@media (min-width: 768px) {
  .company-support__icons {
    font-size: 16px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.company-info {
  position: relative;
  z-index: 1;
  background-image: url("/wp-content/themes/g-marche-theme/assets/images/page-front/page-front-company-info-cover.png");
  background-size: 70% auto;
  background-position: center right;
  background-repeat: no-repeat;
  padding: 60px 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .company-info {
    padding: 100px 0 40px;
    margin-top: -48px;
  }
}
.company-info .textWithBtn__container {
  grid-row: 10;
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .company-info .textWithBtn__container {
    margin-block-start: 40px;
  }
}
.company-info .company-info__container {
  display: grid;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-inline: auto;
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--contents-padding-beside);
}
@media (min-width: 768px) {
  .company-info .company-info__container {
    gap: 24px;
    grid-template-columns: 3fr 2fr;
    padding: 0 var(--contents-padding-beside-md);
  }
}
@media (min-width: 992px) {
  .company-info .company-info__container {
    gap: 64px;
    padding: 0 0 0 80px;
    grid-template-columns: 456fr 600fr;
  }
}
.company-info .company-info__content-left {
  display: contents;
}
@media (min-width: 768px) {
  .company-info .company-info__content-left {
    display: block;
  }
}
.company-info .company-info__catchphrase {
  font-size: 40px;
  font-weight: bold;
  margin-top: 24px;
}
@media (max-width: 991px) {
  .company-info .company-info__catchphrase {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .company-info .company-info__catchphrase {
    font-size: 28px;
  }
}
@media (min-width: 768px) {
  .company-info .company-info__catchphrase {
    margin-top: 0;
  }
}
.company-info .company-info__description {
  font-size: 16px;
  margin-top: 24px;
}
@media (max-width: 991px) {
  .company-info .company-info__description {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .company-info .company-info__description {
    font-size: 14px;
  }
}
.company-info .company-info__background-image-wrapper {
  border-radius: 16px;
  overflow: hidden;
  margin-block-start: 24px;
}
@media (min-width: 992px) {
  .company-info .company-info__background-image-wrapper {
    border-radius: 16px 0 0 16px;
    margin-block-start: 0;
  }
}
@media (min-width: 1200px) {
  .company-info .company-info__background-image-wrapper {
    border-radius: 16px;
  }
}
.company-info .company-info__background-image-wrapper img {
  width: 100%;
  vertical-align: bottom;
}

.company-info__inner {
  max-width: 1200px;
  margin-inline: auto;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.service {
  width: 100%;
  position: relative;
}
.service__background-ellipse {
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}
.service__container {
  width: 100%;
  height: 100%;
}
.service__content {
  display: flex;
  flex-direction: column;
  gap: 128px;
  width: 100%;
  height: 100%;
}
.service__ellipse {
  width: 100%;
  height: 750px;
  background-image: url("/wp-content/themes/g-marche-theme/assets/images/page-front/service/top_service_ellipse.svg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: all;
  position: relative;
}
.service__ellipse-image {
  width: 100%;
}
.service__images {
  height: 100%;
  width: 100%;
  display: flex;
  position: relative;
  justify-content: space-around;
}
.service__image {
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.3s ease-in-out;
}
.service__image__arrow-right {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  pointer-events: all;
  padding: 10px;
}
.service__image__arrow-right > img {
  width: 64px;
  height: 64px;
  transition: all 0.3s ease;
}
.service__image__arrow-right:hover img {
  transform: scale(1.25);
}
.service__image__arrow-left {
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  pointer-events: all;
  padding: 10px;
}
.service__image__arrow-left img {
  width: 64px;
  height: 64px;
  transition: all 0.3s ease;
}
.service__image__arrow-left:hover img {
  transform: scale(1.1);
}
.service__image > img {
  position: relative;
  transition: all 0.3s ease-in-out;
}
.service__image--main {
  gap: 24px;
}
.service__image--1 > img {
  top: 80%;
}
.service__image--2 > img {
  top: 40%;
}
.service__image--3 {
  z-index: 5;
}
.service__image--4 > img {
  top: 40%;
}
.service__image--5 > img {
  top: 80%;
}
.service__center-content {
  width: 100%;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.service__curved-text {
  position: absolute;
  bottom: 80%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 152px;
  height: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service__curved-text img {
  width: 100%;
  height: auto;
  max-width: 153px;
  max-height: 129px;
}
.service__info {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: flex-start;
}
.service__info-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  padding: 0 350px;
  width: 100%;
  text-align: center;
  color: #203424;
}
.service__title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 1.28px;
  margin: 0;
  width: 100%;
}
.service__description {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.64px;
  margin: 0;
  width: 100%;
}
.service__link-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  width: 187px;
  position: relative;
  cursor: pointer;
}
.service__link-content {
  position: absolute;
  top: 50%;
  left: calc(50% - 27.5px);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
}
.service__link-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.64px;
  color: #203424;
}
.service__link-underline {
  height: 1px;
  width: 100%;
  background-color: #203424;
}
.service__button {
  position: absolute;
  background-color: #c5d3a5;
  bottom: 0;
  left: 62.567%;
  right: 0;
  top: 0;
  border-radius: 349.67px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #203424;
  font-size: 16px;
  font-weight: bold;
}
@media (min-width: 1200px) {
  .service {
    height: auto;
    min-height: 700px;
  }
  .service__background-ellipse {
    opacity: 0.7;
  }
  .service__content {
    height: auto;
  }
  .service__background-circle {
    display: none;
  }
  .service__info {
    width: 100%;
  }
  .service__info-content {
    padding: 0 20px;
  }
  .service__description {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .service__background-ellipse {
    opacity: 0.5;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.recruit__contents {
  margin-block-start: 32px;
  display: grid;
  gap: 32px;
}
@media (min-width: 768px) {
  .recruit__contents {
    grid-template-columns: 373fr 517fr;
    gap: 78px;
    margin-block-start: 67px;
    align-items: center;
  }
}

.recruit__container {
  border-radius: 0 32px 32px 0;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .recruit__container {
    padding: 0 71px 0 80px;
  }
}

.recruit__inner {
  max-width: 1200px;
  position: relative;
  padding: 40px var(--contents-padding-beside) 24px;
  margin-inline: auto;
  margin-right: 24px;
}
@media (min-width: 768px) {
  .recruit__inner {
    padding: 80px 0 160px;
    margin-right: auto;
  }
}
.recruit__inner::before {
  content: "";
  display: block;
  width: 100vw;
  background: var(--background-default);
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 32px 32px 0;
}

.recruit__slider {
  margin-top: 24px;
}
@media (min-width: 768px) {
  .recruit__slider {
    margin-top: -80px;
  }
}

.recruit {
  background-color: var(--background-secondary);
  position: relative;
  overflow: hidden;
  padding-bottom: 32px;
}
.recruit .textWithBtn__container {
  margin-left: auto;
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .recruit .textWithBtn__container {
    margin-block-start: 40px;
  }
}
.recruit__image-main {
  width: 340px;
  aspect-ratio: 34/40;
  border-radius: 16px;
  position: relative;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .recruit__image-main {
    margin: 0;
  }
}
.recruit__image-main img {
  width: 100%;
  border-radius: inherit;
  height: 100%;
  object-fit: cover;
}
.recruit__image-main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-5deg);
  border-radius: inherit;
  background: linear-gradient(90.2443deg, rgba(110, 146, 29, 0.5) 13.951%, rgba(0, 69, 23, 0.5) 67.692%, rgba(0, 69, 23, 0.5) 121.43%);
  z-index: -1;
  transform-origin: center center;
}
.recruit__text-section {
  width: 517px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-end;
  justify-content: flex-start;
}
.recruit__text-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
}
.recruit__title {
  font-weight: 500;
  font-size: 40px;
  font-size: 40px;
}
@media (max-width: 991px) {
  .recruit__title {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .recruit__title {
    font-size: 28px;
  }
}
.recruit__description {
  font-size: 16px;
  margin-block-start: 16px;
}
@media (max-width: 991px) {
  .recruit__description {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .recruit__description {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .recruit__description {
    margin-block-start: 24px;
  }
}
.recruit__link-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  width: 206px;
  position: relative;
  cursor: pointer;
}
.recruit__link-content {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 190px;
  z-index: 1;
}
.recruit__link-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.64px;
  color: #203424;
}
.recruit__link-underline {
  height: 1px;
  width: 100%;
  background-color: #203424;
}
.recruit__button {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  height: 70px;
  background-color: #c5d3a5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #203424;
  font-size: 16px;
  font-weight: bold;
}
.recruit__background-images {
  height: 316px;
  margin-bottom: -128px;
  position: relative;
  width: 100%;
  margin-top: 64px;
}
.recruit__carousel-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.recruit__carousel-track {
  display: flex;
  gap: 32px;
  position: absolute;
  height: 100%;
  width: 2816px;
  animation: slide-infinite 24s linear infinite;
  will-change: transform;
  animation-play-state: paused;
}
.recruit__bg-image {
  position: relative;
  width: 320px;
  height: 198px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
}
.recruit__bg-image--1 {
  top: 30%;
}
.recruit__bg-image--3 {
  top: 30%;
}
.recruit__bg-image img {
  position: relative;
  top: 3%;
  left: 3%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.recruit__bg-image__bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(110, 146, 29, 0.5), rgba(0, 69, 23, 0.5), rgba(0, 69, 23, 0.5));
  border-radius: 16px;
  pointer-events: none;
}
@keyframes slide-infinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1408px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .recruit__carousel-track {
    animation: none !important;
  }
}
@media (max-width: 1199px) {
  .recruit__main-content {
    width: 100%;
    border-radius: 0;
  }
  .recruit__content-wrapper {
    padding: 60px 40px 100px;
  }
  .recruit__body {
    flex-direction: column;
    gap: 40px;
  }
  .recruit__text-section {
    width: 100%;
    align-items: center;
  }
  .recruit__text-content {
    align-items: center;
    text-align: center;
  }
  .recruit__title {
    font-size: 28px;
    white-space: normal;
  }
  .recruit__description {
    margin: 20px 0 0;
    width: 100%;
  }
  .recruit__background-images {
    display: none;
  }
}
@media (max-width: 767px) {
  .recruit__content-wrapper {
    padding: 40px 20px 80px;
  }
  .recruit__image-section {
    width: 250px;
    height: 300px;
  }
  .recruit__image-background {
    width: 250px;
    height: 300px;
  }
  .recruit__image-main {
    width: 220px;
    height: 280px;
  }
  .recruit__title {
    font-size: 24px;
  }
  .recruit__description {
    font-size: 14px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.news {
  padding: 40px 0;
  background-color: #ffffff;
  width: 100%;
  position: relative;
}
@media (min-width: 768px) {
  .news {
    padding: 80px 0 120px;
  }
}
.news__header {
  width: 100%;
  margin-bottom: 56px;
}
.news__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-end;
  justify-content: flex-end;
  width: 100%;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.topService__textItem {
  display: flex !important;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}

.topService__textItem-title {
  font-weight: 500;
  text-align: center;
  font-size: 32px;
}
@media (max-width: 991px) {
  .topService__textItem-title {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .topService__textItem-title {
    font-size: 24px;
  }
}

@media (any-hover: hover) {
  .topService__textItem-title {
    transition: 0.2s ease;
  }
  .topService__textItem-title:hover {
    color: var(--text-primary);
  }
}
.topService__textItem-text {
  font-size: 16px;
  text-align: center;
  max-width: 500px;
}
@media (max-width: 991px) {
  .topService__textItem-text {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .topService__textItem-text {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .topService__textItem-text br.-sp {
    display: none;
  }
}

.topService {
  position: relative;
  padding: 24px 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .topService {
    padding: 40px 0;
  }
}

.topService__textContainer {
  overflow: visible !important;
  width: 95%;
  max-width: 95vw;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .topService__textContainer {
    margin-top: -188px;
  }
}

.topService__btn {
  margin-inline: auto;
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .topService__btn {
    margin-block-start: 40px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.group {
  padding: 40px 0 80px;
}
@media (min-width: 768px) {
  .group {
    padding: 80px 0 120px;
  }
}

.group__list {
  margin-block-start: 32px;
}
@media (min-width: 768px) {
  .group__list {
    margin-block-start: 56px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.read {
  padding: 58px 0;
  background: var(--background-default);
}

.read__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}
.read__inner p {
  text-align: center;
  font-size: 28px;
  font-weight: 900;
}
@media (max-width: 991px) {
  .read__inner p {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .read__inner p {
    font-size: 20px;
  }
}
@media (min-width: 768px) {
  .read__inner p .sp {
    display: none;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.topFade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--primary-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 102;
  opacity: 1;
  visibility: visible;
  animation: topFade 1.5s ease 0.5s forwards;
}
.topFade img {
  width: 71.4285714286%;
}
@media (min-width: 768px) {
  .topFade img {
    width: 33.8333333333%;
  }
}

@keyframes topFade {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.company__pageHeader {
  padding: 0 0 0 var(--contents-padding-beside);
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .company__pageHeader {
    padding: 0 0 0 var(--contents-padding-beside-md);
  }
}
@media (min-width: 992px) {
  .company__pageHeader {
    grid-template-columns: 527fr 593fr;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.message__wrapper {
  position: relative;
  padding-bottom: 40px;
  padding-top: 24px;
}
@media (min-width: 768px) {
  .message__wrapper {
    padding-bottom: 60px;
    padding-top: 48px;
  }
}
@media (min-width: 992px) {
  .message__wrapper {
    padding-bottom: 5vw;
  }
}
@media (min-width: 1200px) {
  .message__wrapper {
    padding-bottom: 104px;
  }
}
.message__wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  left: calc((100% - 1200px) / 2 + 172px);
  height: 80%;
  background: var(--background-secondary);
  border-radius: 16px 0 0 16px;
  z-index: -1;
}
@media (max-width: 1200px) and (min-width: 768px) {
  .message__wrapper::after {
    left: 172px;
  }
}
@media (max-width: 767px) {
  .message__wrapper::after {
    left: 80px;
  }
}

.message__contents {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
}

.message__textArea {
  background: var(--background-default);
  padding: var(--contents-padding-beside) var(--contents-padding-beside) 40px;
  border-radius: 0 16px 16px 0;
  max-width: 752px;
}
@media (min-width: 768px) {
  .message__textArea {
    padding: 32px 157px 56px var(--contents-padding-beside-md);
  }
}

.message__textContents {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 0;
  margin-block-start: 8px;
}
@media (min-width: 768px) {
  .message__textContents {
    gap: 24px 0;
    margin-block-start: 16px;
  }
}

.message__text p {
  font-size: 16px;
  color: var(--text-default);
}
@media (max-width: 991px) {
  .message__text p {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .message__text p {
    font-size: 14px;
  }
}
.message__text p:nth-of-type(n+2) {
  margin-top: 1.5em;
}

.message__sign {
  font-size: 20px;
  color: var(--text-default);
}
@media (max-width: 991px) {
  .message__sign {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .message__sign {
    font-size: 16px;
  }
}

.message__heading {
  font-size: 32px;
  font-weight: 500;
}
@media (max-width: 991px) {
  .message__heading {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .message__heading {
    font-size: 24px;
  }
}

.message__imageArea {
  margin-left: auto;
  position: relative;
  width: 70%;
  max-height: 420px;
  overflow: hidden;
  border-radius: 16px 0 0 16px;
  margin-top: -32px;
  display: flex;
  align-items: center;
  padding-top: 60px;
}
@media (min-width: 768px) {
  .message__imageArea {
    padding-top: 100px;
    max-width: 560px;
    margin-top: -11vw;
  }
}
@media (min-width: 1200px) {
  .message__imageArea {
    max-width: 540px;
    margin-top: -708px;
    max-height: unset;
    aspect-ratio: unset;
    padding: 0;
    height: fit-content;
  }
}
.message__imageArea img {
  border-radius: 16px;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.philosophy__wrapper {
  padding: 40px 0 80px;
}

.philosophy__textContents {
  margin-block-start: 16px;
}
@media (min-width: 768px) {
  .philosophy__textContents {
    margin-block-start: 32px;
  }
}
.philosophy__textContents p {
  font-size: 18px;
  color: var(--text-default);
}
@media (max-width: 991px) {
  .philosophy__textContents p {
    font-size: 17px;
  }
}
@media (max-width: 767px) {
  .philosophy__textContents p {
    font-size: 16px;
  }
}
.philosophy__textContents p:nth-of-type(n+2) {
  margin-block-start: 1.5em;
}

.philosophy__list {
  margin-block-start: 24px;
  counter-reset: li;
}
.philosophy__listItem {
  position: relative;
  font-weight: 500;
  font-size: 24px;
  color: var(--text-default);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 16px;
}
@media (max-width: 991px) {
  .philosophy__listItem {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .philosophy__listItem {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .philosophy__listItem {
    gap: 0 32px;
  }
}
.philosophy__listItem:nth-of-type(n+2) {
  margin-block-start: 8px;
}
@media (min-width: 768px) {
  .philosophy__listItem:nth-of-type(n+2) {
    margin-block-start: 16px;
  }
}
.philosophy__listItem::before {
  font-weight: 800;
  color: var(--text-primary);
  counter-increment: li;
  line-height: inherit;
  display: block;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  font-size: 28px;
  content: "0" counter(li);
}
@media (max-width: 991px) {
  .philosophy__listItem::before {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  .philosophy__listItem::before {
    font-size: 20px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.history__wrapper {
  padding: 40px 0 80px;
}
@media (min-width: 768px) {
  .history__wrapper {
    padding: 40px 0 120px;
  }
}

.history__contents {
  margin-block-start: 16px;
}
@media (min-width: 768px) {
  .history__contents {
    margin-block-start: 32px;
  }
}

.history__list {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  position: relative;
}
.history__list::before {
  content: "〜";
  position: absolute;
  left: 20px;
  bottom: -8px;
  transform: rotate(90deg) translateX(-50%);
  color: var(--text-default);
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 991px) {
  .history__list::before {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .history__list::before {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .history__list::before {
    left: 24px;
  }
}
@media (min-width: 992px) {
  .history__list::before {
    left: 30px;
  }
}

.history__listItem {
  display: contents;
}
.history__listItem:last-of-type .history__text::after {
  display: none;
}
.history__listItem:last-of-type .history__text::before {
  content: "〜";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: rotate(90deg) translateX(-50%);
  color: var(--text-default);
  font-size: 16px;
  font-weight: 400;
}
@media (max-width: 991px) {
  .history__listItem:last-of-type .history__text::before {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .history__listItem:last-of-type .history__text::before {
    font-size: 14px;
  }
}

.history__year {
  color: var(--text-primary);
  font-weight: 800;
  grid-column: 1;
  font-size: 32px;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  padding-right: 16px;
  position: relative;
  display: flex;
  align-items: center;
}
@media (max-width: 991px) {
  .history__year {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .history__year {
    font-size: 24px;
  }
}
.history__year::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  right: 0;
  --dots--size: 13px;
  width: var(--dots--size);
  height: var(--dots--size);
  border-radius: 50%;
  background-color: var(--primary-default);
  outline: 10px solid #fff;
}
@media (min-width: 768px) {
  .history__year {
    padding-right: 62px;
  }
}

.history__text {
  font-size: 16px;
  color: var(--text-default);
  display: grid;
  align-items: baseline;
  grid-template-columns: 5ch 1fr;
  gap: 0 8px;
  grid-column: 2;
  position: relative;
  padding-left: 12px;
  padding-bottom: 24px;
  padding-top: 6px;
  width: 100%;
}
@media (max-width: 991px) {
  .history__text {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .history__text {
    font-size: 14px;
  }
}
@media (min-width: 768px) {
  .history__text {
    padding-top: 8px;
    padding-bottom: 54px;
    padding-left: 54px;
    gap: 0 28px;
  }
}
@media (min-width: 992px) {
  .history__text {
    padding-top: 11px;
  }
}
.history__text span {
  font-weight: 500;
  color: var(--text-primary);
  text-align: right;
}
.history__text span:nth-of-type(n+2) {
  margin-block-start: 1.5em;
}
.history__text::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #94A297;
  z-index: -1;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.overview__wrapper {
  background-color: var(--background-secondary);
  padding: 40px 0 80px;
}
@media (min-width: 768px) {
  .overview__wrapper {
    padding: 80px 0;
  }
}

.overview__table {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: 16px;
}
@media (min-width: 768px) {
  .overview__table {
    margin-block-start: 32px;
  }
}

.overview__tableRow {
  border-bottom: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
}
@media (min-width: 768px) {
  .overview__tableRow {
    flex-direction: row;
    align-items: flex-start;
    padding: 23px 0 26px;
    display: grid;
    grid-template-columns: 180fr 840fr;
    gap: 0 20px;
  }
}
.overview__tableRow:first-of-type {
  border-top: 1px solid var(--border-default);
}

.overview__tableHeader {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  text-align: left;
}

.overview__tableData {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-default);
  text-align: left;
  flex: 1;
  font-family: "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
}
.overview__tableData > *:nth-child(n+2) {
  margin-block-start: 16px;
}
@media (min-width: 768px) {
  .overview__tableData > *:nth-child(n+2) {
    margin-block-start: 26px;
  }
}

.overview__list {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .overview__list {
    column-gap: 40px;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
  }
}

.overview__tableImage {
  border-radius: 16px;
  width: 100%;
  vertical-align: bottom;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.form {
  margin-block-start: 32px;
}
@media (min-width: 768px) {
  .form {
    margin-block-start: 48px;
  }
}

.form__main .wpcf7-list-item {
  margin: 0;
}
.form__main input[type=checkbox] {
  display: none;
}
.form__main .wpcf7-list-item-label {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  font-size: 16px;
  color: var(--text-default);
}
.form__main .wpcf7-list-item-label::before {
  content: "";
  display: block;
  --check-box-size: 24px;
  width: var(--check-box-size);
  height: var(--check-box-size);
  background: #FDFDFD;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  box-sizing: border-box;
}
.form__main .wpcf7-list-item-label::after {
  position: absolute;
}
.form__main input[type=checkbox]:checked + .wpcf7-list-item-label::after {
  content: "";
  display: block;
  width: 18px;
  height: 10px;
  border-top: 3px solid var(--primary-white);
  border-right: 3px solid var(--primary-white);
  transform: rotate(135deg);
  position: absolute;
  left: 3px;
  top: 5px;
}
.form__main input[type=checkbox]:checked + .wpcf7-list-item-label::before {
  background: var(--primary-default);
  border: 1px solid var(--primary-default);
}
.form__main a {
  text-decoration: underline;
}

.form__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 768px) {
  .form__item {
    gap: 12px;
  }
}
.form__item:nth-of-type(n+2) {
  margin-top: 24px;
}
@media (min-width: 768px) {
  .form__item:nth-of-type(n+2) {
    margin-top: 32px;
  }
}

.form__label {
  font-weight: 500;
  color: var(--text-default);
  line-height: 1.6;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
}
@media (max-width: 991px) {
  .form__label {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .form__label {
    font-size: 14px;
  }
}
.form__label--2col {
  display: flex;
  align-items: center;
  gap: 24px;
}
.form__label--2col .form__input {
  width: 146px;
}
.form__label--row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.form__required {
  color: var(--text-white);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  text-align: center;
  border-radius: 50px;
  background: var(--color-red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  height: 20px;
  margin-left: 16px;
}

input.form__input, textarea.form__textarea, select.form__input {
  width: 100%;
  font-size: 16px;
  font-weight: 400;
  background: #F4F4F4;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
}
@media (min-width: 768px) {
  input.form__input, textarea.form__textarea, select.form__input {
    padding: 12px 16px;
  }
}
input.form__input::placeholder, textarea.form__textarea::placeholder, select.form__input::placeholder {
  color: #999999;
}
input.form__input:focus, textarea.form__textarea:focus, select.form__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary-default);
}

textarea.form__textarea {
  height: 207px;
}
@media (min-width: 768px) {
  textarea.form__textarea {
    height: 276px;
  }
}

@media (min-width: 768px) {
  .form__input--short {
    max-width: 304px;
  }
}

.form__input--check {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
  flex-wrap: wrap;
}
@media (min-width: 768px) {
  .form__input--check {
    flex-direction: row;
    gap: 16px 32px;
  }
}

.form__submitContainer {
  position: relative;
  width: fit-content;
  margin-inline: auto;
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .form__submitContainer {
    margin-block-start: 48px;
  }
}
.form__submitContainer input[type=submit][disabled], .form__submitContainer input[type=button][disabled] {
  background: #d9d9d9;
}
.form__submitContainer span.wpcf7-spinner {
  display: none;
}
.form__submitContainer span.wpcf7-spinner {
  display: none;
}

.form__submitBtn {
  color: var(--text-white);
  background: var(--primary-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24px 88px 24px 64px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 16px;
  position: relative;
  min-height: 72px;
}
@media (max-width: 991px) {
  .form__submitBtn {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .form__submitBtn {
    font-size: 14px;
  }
}
.form__submitBtn--back {
  padding: 24px 64px;
  border: 2px solid var(--primary-default) !important;
  background: var(--primary-white);
  color: var(--text-primary);
}

@media (any-hover: hover) {
  .form__submitBtn {
    transition: opacity 0.2s ease, background 0.2s ease;
  }
  .form__submitBtn:hover {
    opacity: 0.7;
  }
  .form__submitBtn--back:hover {
    background: var(--background-secondary);
    opacity: 1;
  }
}
.form-submitBtn-arrow {
  position: absolute;
  top: 50%;
  right: 64px;
  transform: translateY(-50%);
  z-index: 1;
  font-size: 14px;
  line-height: 1;
}
.form-submitBtn-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("/wp-content/themes/g-marche-theme/assets/images/icon/icon-navigate-next.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

.form__btnConteiner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-block-start: 24px;
  gap: 16px;
}
@media (min-width: 768px) {
  .form__btnConteiner {
    margin-block-start: 48px;
    flex-direction: row;
    gap: 48px;
  }
}
.form__btnConteiner .form__submitContainer {
  margin: 0;
}

.form__agree {
  margin-block-start: 24px;
}
@media (min-width: 768px) {
  .form__agree {
    margin-block-start: 32px;
  }
}

.form__agreeText {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.wpcf7-not-valid-tip {
  font-size: 14px;
  margin-block-start: 4px;
}

.form__output {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-default);
}

.form__item .form__output:last-of-type {
  padding-bottom: 8px;
  border-bottom: 1px solid #F4F4F4;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.article__head {
  display: grid;
  gap: 8px 0;
}

.article__date {
  font-size: 16px;
  font-weight: 500;
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  color: #606060;
}
@media (max-width: 991px) {
  .article__date {
    font-size: 16px;
  }
}
@media (max-width: 767px) {
  .article__date {
    font-size: 14px;
  }
}

.article__title {
  font-weight: 500;
  font-size: 32px;
  color: var(--text-default);
}
@media (max-width: 991px) {
  .article__title {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .article__title {
    font-size: 24px;
  }
}

.article__thumbnail img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.article__contents {
  text-indent: 0.04em;
  font-size: 1.125rem;
  margin-top: 32px;
  padding-bottom: calc(32px - 0.8em);
}
@media (min-width: 768px) {
  .article__contents {
    margin-top: 56px;
    padding-bottom: calc(56px - 0.8em);
  }
}
.article__contents ~ .article__foot {
  border-top: 1px solid #C1C1C1;
}

.article__foot {
  display: flex;
  flex-direction: column;
  padding: 24px 0 0;
  gap: 16px 0;
}
@media (min-width: 768px) {
  .article__foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 56px 0 0;
  }
}
.article__foot .textWithBtn__container {
  margin-left: auto;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.notFound__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 30vh;
}
.notFound__inner h1 {
  font-weight: 500;
  font-size: 40px;
  line-height: 1;
  font-family: "Poppins", "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  color: var(--primary-green);
  text-align: center;
}
@media (min-width: 768px) {
  .notFound__inner h1 {
    font-size: 80px;
  }
}
.notFound__inner p {
  font-weight: 500;
  font-size: 32px;
  text-align: center;
}
@media (max-width: 991px) {
  .notFound__inner p {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .notFound__inner p {
    font-size: 24px;
  }
}

.notFound__btn {
  margin-block-start: 40px;
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
.recruit-sectionTitle {
  display: flex;
  flex-direction: column;
  font-weight: 900;
  margin: 0;
  position: relative;
  gap: 8px;
  font-size: 32px;
}
@media (max-width: 991px) {
  .recruit-sectionTitle {
    font-size: 28px;
  }
}
@media (max-width: 767px) {
  .recruit-sectionTitle {
    font-size: 24px;
  }
}
.recruit-sectionTitle::before {
  content: attr(data-en);
  font-family: "Avenir", "Avenir Next", "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4285714286;
  color: var(--text-primary);
}

.recruit__btn {
  text-transform: uppercase;
  background: var(--primary-black);
  gap: 12px;
  font-weight: 700;
  font-family: "Poppins", "Inter", "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  padding: 16px 32px;
  min-height: unset;
  font-size: 24px;
}
@media (max-width: 991px) {
  .recruit__btn {
    font-size: 20px;
  }
}
@media (max-width: 767px) {
  .recruit__btn {
    font-size: 18px;
  }
}
@media (min-width: 768px) {
  .recruit__btn {
    width: fit-content;
  }
}
.recruit__btn svg path {
  fill: var(--primary-white);
}
.recruit__btn--header {
  font-size: 16px;
  line-height: 1;
}

.recruit__serviceSection {
  background: url(./assets/images/bg_rectuit-services.png) no-repeat center center/auto 100%;
  padding: 40px 0;
  width: 100vw;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
@media (min-width: 768px) {
  .recruit__serviceSection {
    padding: 80px 0 120px;
  }
}

/*
Theme Name: G Marche Theme
Theme URI: https://example.com/g-marche-theme/  (テーマの公式サイトやリポジトリのURL)
Author: Your Name or Company Name
Author URI: https://example.com/ (あなたのウェブサイトURL)
Description: G MarcheのオリジナルWordPressテーマです。Figmaのデザインを基に作成しています。(テーマの説明)
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: g-marche-theme (翻訳用のテキストドメイン)
Tags: custom-background, custom-logo, custom-menu, featured-images, responsive-layout, accessibility-ready, one-column, two-columns, e-commerce (テーマの特徴を表すタグ。任意だが推奨)
Requires at least: 5.8 (テーマが動作する最低WordPressバージョン。任意だが推奨)
Tested up to: 6.5 (テーマがテストされた最新のWordPressバージョン。任意だが推奨)
Requires PHP: 7.4 (テーマが動作する最低PHPバージョン。任意だが推奨)
Domain Path: /languages (翻訳ファイルを格納するディレクトリ。任意)
*/
/* 業務用卸ページ（食の未来を創造するパートナー） */
/* このページはヒーローを見出し代わりにするため、既定のタイトル帯を隠す（現在は下書きページ id:3054） */
.page-id-3054 .page-header__wrapper {
  display: none;
}
.page-id-3054 .layout__ContentsWrapper {
  margin-top: 0;
}
.page-id-3054 .layout__editorContents {
  margin-block-start: 0;
  margin-block-end: 0;
}
.page-id-3054 .wholesaleHero {
  margin-top: 0;
}

/* 画面幅いっぱいに広げるためのヘルパー（コンテナ内から脱出） */
.wholesale-fullbleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* 仮画像プレースホルダ（前田支給の画像が入るまでの代替表示） */
.is-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  background: repeating-linear-gradient(45deg, #e9ede6, #e9ede6 12px, #e1e7dd 12px, #e1e7dd 24px);
  color: #6b7a68;
  font-size: 0.75rem;
  text-align: center;
  padding: 12px;
}
.is-placeholder::after {
  content: attr(data-img);
}

/* セクション見出し（Item など）icon-heading 流用 */
.wholesaleHeading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wholesaleHeading__en {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--primary-default);
}
.wholesaleHeading__symbol {
  width: 22px;
  height: auto;
}
.wholesaleHeading__jp {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

/* =========================================================
   ① ヒーロー
   ========================================================= */
.wholesaleHero {
  margin-top: 8px;
}
.wholesaleHero img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   ② バナー（3つ）
   ========================================================= */
.wholesaleBanners {
  margin: 40px 0;
  gap: 10px;
  align-items: flex-start;
  /* モバイルでも縦積みせず比率を維持 */
}
@media (min-width: 768px) {
  .wholesaleBanners {
    gap: 20px;
  }
}
.wholesaleBanners.is-not-stacked-on-mobile > .wp-block-column {
  margin: 0;
}
.wholesaleBanners__img {
  margin: 0;
}
.wholesaleBanners__img img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}
.wholesaleBanners__img a {
  display: block;
  transition: opacity 0.2s ease;
}
@media (any-hover: hover) {
  .wholesaleBanners__img a:hover {
    opacity: 0.85;
  }
}

/* =========================================================
   ③ 緑帯（すべて揃います）
   ========================================================= */
.wholesaleBand__title {
  margin: 0;
  color: var(--text-white);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.5;
}
.wholesaleBand__title strong {
  font-size: 1.25em;
}

/* =========================================================
   ④ 30,000点（サポート訴求＋画像4枚）
   ========================================================= */
.wholesaleStock {
  text-align: center;
  margin: 56px 0;
}
.wholesaleStock__title {
  margin: 0 0 32px;
  font-size: clamp(1.25rem, 2.6vw, 1.875rem);
  font-weight: 700;
  line-height: 1.6;
}
.wholesaleStock__title strong {
  color: var(--primary-default);
  font-size: 1.5em;
}

.wholesaleStock__images {
  margin: 0;
}

.wholesaleStock__img {
  margin: 0;
}
.wholesaleStock__img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* =========================================================
   ⑤ 取り扱い商品（Item）
   ========================================================= */
.wholesaleItem {
  margin: 72px 0;
}
.wholesaleItem__group {
  margin-top: 40px;
}
.wholesaleItem__heading {
  margin: 64px 0 0;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
}
.wholesaleItem__groupHead {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border-default);
}
.wholesaleItem__groupTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.wholesaleItem__groupTitle::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-default);
}
.wholesaleItem__groupText {
  margin: 12px 0 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--text-default);
}

/* 商品カード（lazyblock product-cards 用）横型・2枚/行 */
.productCards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
}
@media (min-width: 768px) {
  .productCards {
    grid-template-columns: repeat(4, 1fr);
  }
}
.productCards__item {
  display: flex;
  flex-direction: column;
  background: var(--primary-white);
  border: 1px solid #dbe4dd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(32, 52, 36, 0.08);
}
.productCards__imgWrap {
  overflow: hidden;
  background: var(--background-light);
}
.productCards__img {
  width: 100%;
  height: auto;
  display: block;
}
.productCards__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px;
}
.productCards__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}
.productCards__text {
  margin: 8px 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-default);
}
.productCards__badge {
  margin-top: 12px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: var(--background-secondary);
  color: var(--primary-green);
  font-size: 0.6875rem;
  font-weight: 700;
}

/* =========================================================
   ⑥ 物流センター（lazyblock logistics 用）
   ========================================================= */
.wholesaleLogistics {
  background: var(--background-secondary);
  margin-top: 56px;
  padding: 64px 16px;
  text-align: center;
}
@media (min-width: 768px) {
  .wholesaleLogistics {
    margin-top: 80px;
    padding: 80px 16px;
  }
}
.wholesaleLogistics__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.wholesaleLogistics__symbol {
  width: 36px;
  height: auto;
  margin: 0 auto 20px;
}
.wholesaleLogistics__title {
  margin: 0 auto;
  max-width: 22em;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.6;
}
.wholesaleLogistics__text {
  margin: 24px auto 0;
  max-width: 50em;
  font-size: 0.9375rem;
  line-height: 2;
}
.wholesaleLogistics__images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .wholesaleLogistics__images {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px;
  }
}
.wholesaleLogistics__img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(32, 52, 36, 0.1));
}
.wholesaleLogistics__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #dfe6da, #dfe6da 12px, #d6ded0 12px, #d6ded0 24px);
  color: #6b7a68;
  font-size: 0.75rem;
  text-align: center;
  padding: 12px;
}
.wholesaleLogistics__img--placeholder::after {
  content: attr(data-img);
}

/* =========================================================
   ⑦ CTA（お問い合わせ）
   ========================================================= */
.wholesaleCta {
  position: relative;
  padding: 72px 16px;
  text-align: center;
  color: var(--text-white);
  background: var(--primary-green);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.wholesaleCta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: -1;
}
.wholesaleCta__text {
  margin: 0 auto 28px;
  max-width: 40em;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.8;
}
.wholesaleCta__btn {
  margin: 0 auto;
  transition: background-color 0.2s ease;
  /* ホバー色をヘッダーのお問い合わせボタン(.headerBtn)と同じに */
}
@media (any-hover: hover) {
  .wholesaleCta__btn:hover {
    background: var(--primary-green);
    opacity: 1;
  }
}