/* 
  * フロントページ用のスタイル
 */
:root {
  --design-width: 1440; /* PCデザインの基準幅 */
  --root-font-size: 16; /* ルートフォントサイズ */
  --design-width-sp: 375; /* スマホデザインの基準幅 */
}

.section-title {
  margin: 0 auto;
}
.section-title._flow {
  width: min(59vw, 852px);
}
.s .section-title._flow {
  width: min(90vw, 852px);
}

.flow-list {
  gap: 60px;
  margin-top: 60px !important;
  padding-bottom: 120px;
  overflow: hidden;
}
.s .flow-list {
  padding-bottom: 17% !important;
}
.flow-item {
  gap: 20px;
}
.s .flow-item {
  flex-direction: column;
  gap: 0px;
}
.s .flow-item._imgRight {
  flex-direction: column-reverse;
}
.s .flow-imgs {
  /* width: 95%; */
  transform: translate(-5%, 0);
}
.s .flow-item._imgRight .flow-imgs {
  transform: translate(5%, 0);
}
.flow-item._imgRight {
}

.flow-item._imgLeft {
}
.flow-itemImg {
}
.flow-itemInfo {
  flex: 1;
}

.flow-item._imgRight .flow-itemInfo {
  width: clamp(
    calc(150 / var(--root-font-size) * 1rem),
    calc(530 / var(--design-width) * 100vw),
    calc(530 / var(--root-font-size) * 1rem)
  );
}
.s .flow-itemInfo {
  width: 100%;
  gap: 0;
  /* transform: translate(0, -10%); */
  margin-top: -10%;
}
.s .flow-item._imgRight .flow-itemInfo {
  width: 100%;
  align-items: flex-end;
}

figure {
  margin: 0;
  display: block;
}
.flow-itemImg._large {
  width: clamp(
    calc(200 / var(--root-font-size) * 1rem),
    calc(460 / var(--design-width) * 100vw),
    calc(460 / var(--root-font-size) * 1rem)
  );
  height: auto;
}
.flow-itemImg._medium {
  width: clamp(
    calc(110 / var(--root-font-size) * 1rem),
    calc(297 / var(--design-width) * 100vw),
    calc(297 / var(--root-font-size) * 1rem)
  );
  height: auto;
}

.flow-item._imgRight .flow-itemImg._large {
  width: clamp(
    calc(200 / var(--root-font-size) * 1rem),
    calc(396 / var(--design-width) * 100vw),
    calc(396 / var(--root-font-size) * 1rem)
  );
  height: auto;
}
.flow-item._imgRight .flow-itemImg._medium {
  width: clamp(
    calc(110 / var(--root-font-size) * 1rem),
    calc(255 / var(--design-width) * 100vw),
    calc(255 / var(--root-font-size) * 1rem)
  );
  height: auto;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}
.s .container {
  padding: 0 20px;
}

.flow-itemNum {
  font-size: clamp(
    calc(64 / var(--root-font-size) * 1rem),
    calc(128 / var(--design-width) * 100vw),
    calc(128 / var(--root-font-size) * 1rem)
  );
  line-height: 1;
  font-weight: 400;
}
.flow-itemTtl {
  position: relative;
  font-size: clamp(
    calc(58 / var(--root-font-size) * 1rem),
    calc(80 / var(--design-width) * 100vw),
    calc(80 / var(--root-font-size) * 1rem)
  );
  color: #000000;
  line-height: 1.2;
  padding-bottom: 70px;
  font-weight: 400;
}
.flow-itemTtl span.ls-12 {
  letter-spacing: -12px;
}
.s .flow-itemTtl span.ls-12 {
  letter-spacing: -8px;
}
.s .flow-itemTtl {
  width: 100%;
}
.s .flow-item._imgRight .flow-itemTtl {
  text-align: right;
  white-space: nowrap;
}

.flow-itemTtl::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: url('../img/ttl_line.png') no-repeat;
  display: block;
  height: auto;
  aspect-ratio: 361 / 37;
  background-size: cover;
  width: clamp(
    calc(180 / var(--root-font-size) * 1rem),
    calc(361 / var(--design-width) * 100vw),
    calc(361 / var(--root-font-size) * 1rem)
  );
  margin-bottom: 20px;
}
.s .flow-itemTtl::before {
  width: 100%;
}

.flow-itemTxt {
  font-size: clamp(
    calc(20 / var(--root-font-size) * 1rem),
    calc(22 / var(--design-width) * 100vw),
    calc(22 / var(--root-font-size) * 1rem)
  );
  color: #222222;
  line-height: 2;
}
.s .flow-itemTxt {
  font-size: calc(18 / var(--root-font-size) * 1rem);
}
.s .flow-item._imgRight .flow-itemTxt {
  text-align: left;
  width: 100%;
}

.prejudice {
  padding: 120px 0;
}
.s .prejudice {
  padding-top: 100px;
  padding-bottom: 80px;
}
.section-title._prejudice {
  width: min(calc(673 / var(--design-width) * 100vw), 673px);
  margin: 0 auto;
}
.s .section-title._prejudice {
  width: 70vw;
}

.prejudice-grid {
  display: grid;
  grid-template-columns: repeat(2, auto) !important; /* 中身サイズに合わせる */
  grid-template-rows: repeat(2, auto) !important;
  gap: 24px;
  justify-content: center; /* グリッド全体をページ中央に */
  margin-top: 60px;
}

.s .prejudice-grid {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  justify-items: center;
  margin-top: 30px;
}

.prejudice-item {
  width: clamp(
    calc(335 / var(--root-font-size) * 1rem),
    calc(570 / var(--design-width) * 100vw),
    calc(570 / var(--root-font-size) * 1rem)
  );
  gap: 0;
}
.prejudice-textArea {
  /* background-color: #192e57;
  color: #fff; */
  width: clamp(
    calc(295 / var(--root-font-size) * 1rem),
    calc(450 / var(--design-width) * 100vw),
    calc(450 / var(--root-font-size) * 1rem)
  );
  padding: 15px;
  margin-top: -46px !important;
}
.prejudice-img {
}

.prejudice-title {
  font-weight: 300;
  gap: 0;
}
.prejudice-title > p {
  line-height: 1.5;
}
.prejudice-title > p:first-child {
  font-size: clamp(
    calc(16 / var(--root-font-size) * 1rem),
    calc(26 / var(--design-width) * 100vw),
    calc(26 / var(--root-font-size) * 1rem)
  );
}

.prejudice-title > p:last-child {
  font-size: clamp(
    calc(24 / var(--root-font-size) * 1rem),
    calc(40 / var(--design-width) * 100vw),
    calc(40 / var(--root-font-size) * 1rem)
  );
}

.prejudice-text {
  font-size: clamp(
    calc(10 / var(--root-font-size) * 1rem),
    calc(18 / var(--design-width) * 100vw),
    calc(18 / var(--root-font-size) * 1rem)
  );
  line-height: 1.8;
}
.s .prejudice-text {
  font-size: calc(16 / var(--design-width-sp) * 100vw);
  line-height: 1.5;
}

.store {
  padding: 100px 0;
}
.s .store {
  padding: 15% 0;
}

.store-title {
  font-size: clamp(
    calc(52 / var(--root-font-size) * 1rem),
    calc(72 / var(--design-width) * 100vw),
    calc(72 / var(--root-font-size) * 1rem)
  );
}
.store-box {
  margin-top: 80px;
}
.s .store-box {
  margin-top: 8%;
}
.s .store-box > .wp-block-media-text__content {
  padding: 8% 0 0;
}

.store-name {
  font-size: clamp(
    calc(20 / var(--root-font-size) * 1rem),
    calc(36 / var(--design-width) * 100vw),
    calc(36 / var(--root-font-size) * 1rem)
  );
}
.s .store-name {
  font-size: calc(36 / var(--design-width-sp) * 100vw);
}
.store-info {
  margin-top: 48px;
}
.store-infoItem {
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.17);
  width: 100%;
}
.store-infoHead {
  font-size: clamp(
    calc(10 / var(--root-font-size) * 1rem),
    calc(20 / var(--design-width) * 100vw),
    calc(20 / var(--root-font-size) * 1rem)
  );
  min-width: clamp(
    calc(50 / var(--root-font-size) * 1rem),
    calc(100 / var(--design-width) * 100vw),
    calc(100 / var(--root-font-size) * 1rem)
  );
}
.s .store-infoHead {
  font-size: calc(20 / var(--design-width-sp) * 100vw);
  min-width: calc(100 / var(--design-width-sp) * 100vw);
}

.store-infoContent {
  font-size: clamp(
    calc(10 / var(--root-font-size) * 1rem),
    calc(20 / var(--design-width) * 100vw),
    calc(20 / var(--root-font-size) * 1rem)
  );
}
.s .store-infoContent {
  font-size: calc(18 / var(--design-width-sp) * 100vw);
}

.store-infoBtn > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
}
.s .store-infoBtn {
  font-size: calc(14 / var(--design-width-sp) * 100vw);
}

.store-infoBtn > a > img {
  width: 12px;
  height: 16px;
}

.topNews {
  padding: 120px 80px;
  box-sizing: content-box;
}
.s .topNews {
  padding-top: 15%;
  padding-bottom: 20%;
}

.topNews-box {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 40px 40px 60px 40px;
  justify-content: space-between;
  gap: 60px;
}
.s .topNews-box {
  flex-direction: column;
  padding: 8% 10%;
  gap: 30px;
  align-items: flex-start;
}

.s .topNews-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topNews-header > .topNews-title {
  font-size: clamp(
    calc(30 / var(--root-font-size) * 1rem),
    calc(58 / var(--design-width) * 100vw),
    calc(58 / var(--root-font-size) * 1rem)
  );
}

.topNews-more > a {
  display: flex;
  font-size: 16px;
  text-decoration: none;
  color: #841b2a;
  justify-content: flex-end;
  gap: 5px;
  align-items: center;
}
.topNews-more > a > img {
  width: 22px;
  height: 22px;
}

.topNews-list {
  width: 69%;
}
.s .topNews-list {
  width: 100%;
}
/* .topNews-item {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}
.topNews-item > a {
  text-decoration: none;
  color: #222222;
} */

.topNews-item {
  /* margin-top: 15px; */
  /* box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); */
  transition: opacity 0.2s ease;
  border-bottom: #ebebeb 1px solid;
}
.topNews-item:last-child {
  border-bottom: none;
}

.topNews-item:hover {
  opacity: 0.8;
}

.topNews-item a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  text-decoration: none;
  color: #000;
}

.topNews-item .topNews-meta {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.topNews-item a::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('../img/text-arrow.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-left: 24px;
  vertical-align: middle;
}
.menu {
  padding: 120px 0;
}
.s .menu {
  padding: 22% 0 20%;
}
.section-title._menu {
  width: min(calc(669 / var(--design-width) * 100vw), 669px);
}
.s .section-title._menu {
  width: min(80vw, 669px);
}
.menu-btnArea {
  margin-top: 60px;
  gap: 30px;
}
.s .menu-btnArea {
  margin-top: 40px;
  gap: 20px;
}
.s .menu-btnArea > .menu-btn {
  width: 100%;
}
.menu-btn {
  width: 370px;
}
.menu-btn > a {
  padding: 28px 64px 28px 30px;
  position: relative;
  font-size: 20px;
}

.menu-btn > a > img {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
}
.s .menu-btn > a {
  justify-content: center;
  padding: 20px 68px 20px 10px;
  font-size: 18px;
}
.menu-samePrice {
  margin-top: 100px;
}

.s .menu-samePrice {
  margin-top: 20%;
}