@charset "UTF-8";
/*==================================================
 * 変数・mixin・関数（共通基盤）
 * NUVIA テーマの共通基盤から移植
 *================================================*/
/*==================================================
 * カラー
 * Figma にカラー変数が定義されていないため、各ノードの実値をここへ集約する
 * セクションを実装するたびに追記していく
 *================================================*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");
:root {
  --mainColor: #da3832;
  --subColor: #002e4e;
  --accentColor: #ee7205;
  --grayColor: #f7f7f7;
  --fontColor: #2a2a2a;
  --bgDark: #000000;
  --bgDark2: #000000;
  --bgLight: #f5f3ef;
  --bgLight2: #ffffff;
  --borderColor: #e5dfd3;
}

.mainColor {
  color: var(--mainColor);
}

.bgMainColor {
  background-color: var(--mainColor);
}

.subColor {
  color: var(--subColor);
}

.bgsubColor {
  background-color: var(--subColor);
}

.grayColor {
  color: var(--grayColor);
}

.bgGrayColor {
  background-color: var(--grayColor);
}

.bgDark {
  background-color: var(--bgDark);
}

.bgDark2 {
  background-color: var(--bgDark2);
}

.bgLight {
  background-color: var(--bgLight);
}

.bgLight2 {
  background-color: var(--bgLight2);
}

/*==================================================
 * 汎用 mixin
 *================================================*/
/*==================================================
 * フォント
 * 和文: Zen Kaku Gothic New / 欧文: Poppins（Figma のテキストスタイルより）
 *================================================*/
:root {
  --fontJp: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック体", "Yu Gothic",
    "メイリオ", Meiryo, sans-serif;
  --fontEn: "Poppins", "Zen Kaku Gothic New", sans-serif;
}

.fontJp {
  font-family: var(--fontJp);
}

.fontEn {
  font-family: var(--fontEn);
}

.serif {
  font-family: "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

body {
  font-family: var(--fontJp);
  color: var(--fontColor);
}

/*==================================================
 * ブレイクポイント（モバイルファースト）
 *================================================*/
/*==================================================
 * 関数
 *================================================*/
/*==================================================
 * リセットcss
 *================================================*/
/* a modern css reset*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

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

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input,
select {
  vertical-align: middle;
}

li {
  list-style-type: none;
}

/*==================================================
 * フォント
 *================================================*/
.italic {
  font-style: italic;
}

html {
  font-size: 16px;
}

html,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
  line-height: 1.8;
  font-weight: 500;
}

.lh_xxl {
  line-height: 2.5;
}
.lh_xxl * {
  line-height: 2.5;
}

.lh_xl {
  line-height: 2;
}
.lh_xl * {
  line-height: 2;
}
@media only screen and (max-width: 767px) {
  .lh_xl {
    line-height: 1.8;
  }
  .lh_xl * {
    line-height: 1.8;
  }
}

.lh_l {
  line-height: 1.8;
}
.lh_l * {
  line-height: 1.8;
}

.lh_m {
  line-height: 1.5;
}
.lh_m * {
  line-height: 1.5;
}

.lh_m2 {
  line-height: 1.25;
}
.lh_m2 * {
  line-height: 1.25;
}

.lh_s {
  line-height: 1.1;
}
.lh_s * {
  line-height: 1.1;
}

.lh_xs {
  line-height: 0.7;
}
.lh_xs * {
  line-height: 0.7;
}

.ls_xl {
  letter-spacing: 0.2em;
}

.ls_l {
  letter-spacing: 0.15em;
}

.ls_m {
  letter-spacing: 0.1em;
}

.ls_s {
  letter-spacing: 0.05em;
}

.ls_xs {
  letter-spacing: 0.01em;
}

.ls_0 {
  letter-spacing: 0;
}

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

.thin {
  font-weight: 100;
}

.normal {
  font-weight: 400;
}

.ave {
  font-weight: 500 !important;
}

.medium {
  font-weight: 500 !important;
}

.bold {
  font-weight: 700 !important;
}

.bold800 {
  font-weight: 800 !important;
}

.black {
  font-weight: 900;
}

.bold900 {
  font-weight: 900 !important;
}

.nowrap {
  white-space: nowrap;
}

.white {
  color: #fff;
}

.black {
  color: #333;
}

.gray {
  color: #686868;
}

.red {
  color: #ec462f !important;
}

.fsL {
  font-size: 6.25rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL {
    font-size: 4rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsL {
    font-size: 2.625rem;
  }
}

.fsL15 {
  font-size: 4.5rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL15 {
    font-size: 3.375rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsL15 {
    font-size: 2.625rem;
  }
}

.fsL2 {
  font-size: 4rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL2 {
    font-size: 2.625rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsL2 {
    font-size: 2.25rem;
  }
}

.fsL3 {
  font-size: 3.5rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL3 {
    font-size: 2.625rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsL3 {
    font-size: 2.25rem;
  }
}

.fsL35 {
  font-size: 3rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL35 {
    font-size: 2.375rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsL35 {
    font-size: 2rem;
  }
}

.fsL4 {
  font-size: 2.625rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL4 {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsL4 {
    font-size: 1.5rem;
  }
}

.fsL5 {
  font-size: 2.5rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsL5 {
    font-size: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsL5 {
    font-size: 1.375rem;
  }
}

.fsM {
  font-size: 2.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM {
    font-size: 1.3125rem;
  }
}

.fsM15 {
  font-size: 2rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM15 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM15 {
    font-size: 1.3125rem;
  }
}

.fsM2 {
  font-size: 1.75rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM2 {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM2 {
    font-size: 1.25rem;
  }
}

.fsM3 {
  font-size: 1.5rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM3 {
    font-size: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM3 {
    font-size: 1.125rem;
  }
}

.fsM35 {
  font-size: 1.3125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM35 {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM35 {
    font-size: 1rem;
  }
}

.fsM38 {
  font-size: 1.25rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM38 {
    font-size: 1.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM38 {
    font-size: 1rem;
  }
}

.fsM4 {
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM4 {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM4 {
    font-size: 0.875rem;
  }
}

.fsM5 {
  font-size: 1rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsM5 {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsM5 {
    font-size: 0.875rem;
  }
}

.fsS {
  font-size: 0.875rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS {
    font-size: 0.8125rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsS {
    font-size: 0.75rem;
  }
}

.fsS2 {
  font-size: 0.8125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS2 {
    font-size: 0.75rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsS2 {
    font-size: 0.75rem;
  }
}

.fsS3 {
  font-size: 0.75rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS3 {
    font-size: 0.6875rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsS3 {
    font-size: 0.6875rem;
  }
}

.fsS4 {
  font-size: 0.625rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .fsS4 {
    font-size: 0.5625rem;
  }
}
@media only screen and (max-width: 767px) {
  .fsS4 {
    font-size: 0.5625rem;
  }
}

@media only screen and (max-width: 767px) {
  .fsSpM5 {
    font-size: 0.875rem;
  }
}

@media only screen and (max-width: 767px) {
  .fsSpS {
    font-size: 0.75rem;
  }
}

.h000 {
  font-size: 100px;
}

.h00 {
  font-size: 64px;
}

.h0 {
  font-size: 42px;
}

.h1 {
  font-size: 32px;
}

.h2 {
  font-size: 28px;
}

.h3 {
  font-size: 24px;
}

.h4 {
  font-size: 18px;
}

.h5 {
  font-size: 16px;
}

.text_m {
  font-size: 14px;
}

.text_sm {
  font-size: 13px;
}

.text_s {
  font-size: 12px;
}

.text_ss {
  font-size: 10px;
}

@media screen and (min-width: 768px) and (max-width: 959px) {
  body {
    font-size: 14px;
  }
  .h000 {
    font-size: 64px;
  }
  .h00 {
    font-size: 36px;
  }
  .h0 {
    font-size: 25px;
  }
  .h1 {
    font-size: 24px;
  }
  .h2 {
    font-size: 24px;
  }
  .h3 {
    font-size: 20px;
  }
  .h4 {
    font-size: 15px;
  }
  .h5 {
    font-size: 14px;
  }
  .text_m {
    font-size: 13px;
  }
  .text_s {
    font-size: 11px;
  }
}
@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
  .h000 {
    font-size: 42px;
  }
  .h00 {
    font-size: 36px;
  }
  .h0 {
    font-size: 24px;
  }
  .h1 {
    font-size: 22px;
  }
  .h2 {
    font-size: 20px;
  }
  .h3 {
    font-size: 17px;
  }
  .h4 {
    font-size: 15px;
  }
  .h5 {
    font-size: 15px;
  }
  .text_m {
    font-size: 13px;
  }
  .text_s {
    font-size: 11px;
  }
}
/*==================================================
 * 独自リセット
 *================================================*/
/*リセット関係*/
*,
*:before,
*:after {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
}

ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 0;
  font-weight: 100;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

hr {
  margin: 10px auto;
}

a:hover {
  text-decoration: none;
  color: inherit;
}

/*==================================================
 * 独自クラス（どのサイトでも）
 *================================================*/
.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.remove {
  text-indent: -9999px;
  overflow: hidden;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  height: 0;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relapadding {
  padding-right: 80px;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

.inlineBlock {
  display: inline-block;
}

.inlineFlex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.inlineBlockUl li {
  display: inline-block;
}

.disNone {
  display: none !important;
}

.bgCenter {
  background-position: center center;
  background-size: cover;
}

.opa {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 1;
}

a:hover .opa {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0.7;
}

.overHidden {
  overflow: hidden;
}

.tra,
.tra:hover {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.verticalMiddle {
  vertical-align: middle;
}

.verticalBottom {
  vertical-align: bottom;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-justify {
  text-align: justify;
}

@media only screen and (max-width: 767px) {
  .text-center-sp {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .text-right-sp {
    text-align: right;
  }
}

@media only screen and (max-width: 767px) {
  .text-left-sp {
    text-align: left;
  }
}

.linkA {
  text-decoration: underline;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: var(--mainColor);
}
.linkA:hover {
  color: var(--mainColor);
  text-decoration: underline;
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .notTab {
    display: none !important;
  }
}
@media screen and (min-width: 960px) {
  .tab {
    display: none !important;
  }
}
/*余白*/
.m0 {
  margin: 0;
}

.p0 {
  padding: 0;
}

.mtAuto {
  margin-top: auto;
}

.mrAuto {
  margin-right: auto;
}

.mbAuto {
  margin-bottom: auto;
}

.mlAuto {
  margin-left: auto;
}

.mt0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb30 {
  margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .mb30 {
    margin-bottom: 20px;
  }
}

.mb40 {
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .mb40 {
    margin-bottom: 30px;
  }
}

.mb50 {
  margin-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .mb50 {
    margin-bottom: 30px;
  }
}

.mb60 {
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .mb60 {
    margin-bottom: 40px;
  }
}

.mb70 {
  margin-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  .mb70 {
    margin-bottom: 40px;
  }
}

.mb80 {
  margin-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .mb80 {
    margin-bottom: 40px;
  }
}

.mb90 {
  margin-bottom: 90px;
}
@media only screen and (max-width: 767px) {
  .mb90 {
    margin-bottom: 50px;
  }
}

.mb100 {
  margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .mb100 {
    margin-bottom: 50px;
  }
}

.mb200 {
  margin-bottom: 200px;
}
@media only screen and (max-width: 767px) {
  .mb200 {
    margin-bottom: 70px;
  }
}

.ml0 {
  margin-left: 0 !important;
}

.ml05 {
  margin-left: 0.5em;
}

.ml1 {
  margin-left: 1em;
}

.ml2 {
  margin-left: 2em;
}

.ml3 {
  margin-left: 3em;
}

@media only screen and (max-width: 767px) {
  .mlSp0 {
    margin-left: 0;
  }
  .mlSp1 {
    margin-left: 1em;
  }
  .mlSp2 {
    margin-left: 2em;
  }
  .mlSp3 {
    margin-left: 3em;
  }
}
.mtL {
  margin-top: 30%;
}

.mtL2 {
  margin-top: 25%;
}

.mtL3 {
  margin-top: 20%;
}

.mtL4 {
  margin-top: 15%;
}

.mtM {
  margin-top: 10%;
}

.mtM2 {
  margin-top: 7.5%;
}

.mtM3 {
  margin-top: 5%;
}

.mtS {
  margin-top: 3.5%;
}

.mtS2 {
  margin-top: 2%;
}

.mtS3 {
  margin-top: 1%;
}

@media only screen and (max-width: 767px) {
  .mtSpL {
    margin-top: 30%;
  }
  .mtSpL2 {
    margin-top: 25%;
  }
  .mtSpL3 {
    margin-top: 20%;
  }
  .mtSpL4 {
    margin-top: 15%;
  }
  .mtSpM {
    margin-top: 10%;
  }
  .mtSpM2 {
    margin-top: 7.5%;
  }
  .mtSpM3 {
    margin-top: 5%;
  }
  .mtSpS {
    margin-top: 3.5%;
  }
  .mtSpS2 {
    margin-top: 2%;
  }
  .mtSpS3 {
    margin-top: 1%;
  }
}
.mbL {
  margin-bottom: 30%;
}

.mbL2 {
  margin-bottom: 25%;
}

.mbL3 {
  margin-bottom: 20%;
}

.mbL4 {
  margin-bottom: 15%;
}

.mbM {
  margin-bottom: 10%;
}

.mbM2 {
  margin-bottom: 7.5%;
}

.mbM3 {
  margin-bottom: 5%;
}

.mbS {
  margin-bottom: 3.5%;
}

.mbS2 {
  margin-bottom: 2%;
}

.mbS3 {
  margin-bottom: 1%;
}

@media only screen and (max-width: 767px) {
  .mbSpL {
    margin-bottom: 30%;
  }
  .mbSpL2 {
    margin-bottom: 25%;
  }
  .mbSpL3 {
    margin-bottom: 20%;
  }
  .mbSpL4 {
    margin-bottom: 15%;
  }
  .mbSpM {
    margin-bottom: 10%;
  }
  .mbSpM2 {
    margin-bottom: 7.5%;
  }
  .mbSpM3 {
    margin-bottom: 5%;
  }
  .mbSpS {
    margin-bottom: 3.5%;
  }
  .mbSpS2 {
    margin-bottom: 2%;
  }
  .mbSpS3 {
    margin-bottom: 1%;
  }
  .mbSp0 {
    margin-bottom: 0;
  }
}
.pt0 {
  padding-top: 0 !important;
}

.pt5 {
  padding-top: 5px;
}

.pt10 {
  padding-top: 10px;
}

.pt20 {
  padding-top: 20px;
}

.pt30 {
  padding-top: 30px;
}
@media only screen and (max-width: 767px) {
  .pt30 {
    padding-top: 20px;
  }
}

.pt40 {
  padding-top: 40px;
}
@media only screen and (max-width: 767px) {
  .pt40 {
    padding-top: 30px;
  }
}

.pt50 {
  padding-top: 50px;
}
@media only screen and (max-width: 767px) {
  .pt50 {
    padding-top: 30px;
  }
}

.pt60 {
  padding-top: 60px;
}
@media only screen and (max-width: 767px) {
  .pt60 {
    padding-top: 40px;
  }
}

.pt70 {
  padding-top: 70px;
}
@media only screen and (max-width: 767px) {
  .pt70 {
    padding-top: 40px;
  }
}

.pt80 {
  padding-top: 80px;
}
@media only screen and (max-width: 767px) {
  .pt80 {
    padding-top: 40px;
  }
}

.pt90 {
  padding-top: 90px;
}
@media only screen and (max-width: 767px) {
  .pt90 {
    padding-top: 50px;
  }
}

.pt100 {
  padding-top: 100px;
}
@media only screen and (max-width: 767px) {
  .pt100 {
    padding-top: 50px;
  }
}

.pt200 {
  padding-top: 200px;
}
@media only screen and (max-width: 767px) {
  .pt200 {
    padding-top: 70px;
  }
}

.pb0 {
  padding-bottom: 0 !important;
}

.pb5 {
  padding-bottom: 5px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb30 {
  padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
  .pb30 {
    padding-bottom: 20px;
  }
}

.pb40 {
  padding-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .pb40 {
    padding-bottom: 30px;
  }
}

.pb50 {
  padding-bottom: 50px;
}
@media only screen and (max-width: 767px) {
  .pb50 {
    padding-bottom: 30px;
  }
}

.pb60 {
  padding-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .pb60 {
    padding-bottom: 40px;
  }
}

.pb70 {
  padding-bottom: 70px;
}
@media only screen and (max-width: 767px) {
  .pb70 {
    padding-bottom: 40px;
  }
}

.pb80 {
  padding-bottom: 80px;
}
@media only screen and (max-width: 767px) {
  .pb80 {
    padding-bottom: 40px;
  }
}

.pb90 {
  padding-bottom: 90px;
}
@media only screen and (max-width: 767px) {
  .pb90 {
    padding-bottom: 50px;
  }
}

.pb100 {
  padding-bottom: 100px;
}
@media only screen and (max-width: 767px) {
  .pb100 {
    padding-bottom: 50px;
  }
}

.pb200 {
  padding-bottom: 200px;
}
@media only screen and (max-width: 767px) {
  .pb200 {
    padding-bottom: 70px;
  }
}

.pl0 {
  padding-left: 0 !important;
}

.pl1 {
  padding-left: 1em;
}

.pl2 {
  padding-left: 2em;
}

.pl3 {
  padding-left: 3em;
}

@media only screen and (max-width: 767px) {
  .pbSp0 {
    padding-bottom: 0;
  }
  .plSp0 {
    padding-left: 0;
  }
  .plSp1 {
    padding-left: 1em;
  }
  .plSp2 {
    padding-left: 2em;
  }
  .plSp3 {
    padding-left: 3em;
  }
}
.pbL {
  padding-bottom: 30%;
}

.pbL2 {
  padding-bottom: 25%;
}

.pbL3 {
  padding-bottom: 20%;
}

.pbL4 {
  padding-bottom: 15%;
}

.pbM {
  padding-bottom: 10%;
}

.pbM2 {
  padding-bottom: 7.5%;
}

.pbM3 {
  padding-bottom: 5%;
}

.pbS {
  padding-bottom: 3.5%;
}

.pbS2 {
  padding-bottom: 2%;
}

.pbS3 {
  padding-bottom: 1%;
}

@media only screen and (max-width: 767px) {
  .pbSpL {
    padding-bottom: 30%;
  }
  .pbSpL2 {
    padding-bottom: 25%;
  }
  .pbSpL3 {
    padding-bottom: 20%;
  }
  .pbSpL4 {
    padding-bottom: 15%;
  }
  .pbSpM {
    padding-bottom: 10%;
  }
  .pbSpM2 {
    padding-bottom: 7.5%;
  }
  .pbSpM3 {
    padding-bottom: 5%;
  }
  .pbSpS {
    padding-bottom: 3.5%;
  }
  .pbSpS2 {
    padding-bottom: 2%;
  }
  .pbSpS3 {
    padding-bottom: 1%;
  }
}
/*flex・グリッド系*/
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.justCenter {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.justEnd {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.justBetween {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media only screen and (max-width: 767px) {
  .justBetweenSp {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

.alignCenter {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.alignStart {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.alignEnd {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.flexReverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-flow: row-reverse;
  flex-flow: row-reverse;
}

.flexWrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  padding-left: 15px;
  padding-right: 15px;
}

.flexCol {
  width: 100%;
}

.col1 {
  width: 100%;
}

.col2 {
  width: 50%;
}

.col3 {
  width: 33.3333%;
}

.col-3 {
  width: 66.6666%;
}

.col4 {
  width: 25%;
}

.col-4 {
  width: 75%;
}

.col5 {
  width: 20%;
}

.col-5 {
  width: 80%;
}

.col6 {
  width: 16.666%;
}

.col-6 {
  width: 83.333%;
}

.col3-2 {
  width: 60%;
}

.col-3-2 {
  width: 40%;
}

@media screen and (max-width: 767px) {
  .flexSplit {
    width: 100%;
  }
  .flexPc {
    display: block;
  }
  .flexWrapSp {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .bgFixed {
    background-attachment: unset;
  }
  .flexReverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
  }
  .flexSp {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .colSp1 {
    width: 100%;
  }
  .colSp2 {
    width: 50%;
  }
  .colSp3 {
    width: 33.3333%;
  }
  .colSp-3 {
    width: 66.6666%;
  }
  .colSp4 {
    width: 25%;
  }
  .colSp-4 {
    width: 75%;
  }
  .colSp5 {
    width: 20%;
  }
  .colSp-5 {
    width: 80%;
  }
  .colSp6 {
    width: 16.666%;
  }
  .colSp-6 {
    width: 83.333%;
  }
  .colSp3-2 {
    width: 60%;
  }
  .colSp-3-2 {
    width: 40%;
  }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  .colMd1 {
    width: 100%;
  }
  .colMd2 {
    width: 50%;
  }
  .colMd3 {
    width: 33.3333%;
  }
  .colMd-3 {
    width: 66.6666%;
  }
  .colMd4 {
    width: 25%;
  }
  .colMd-4 {
    width: 75%;
  }
  .colMd5 {
    width: 20%;
  }
  .colMd-5 {
    width: 80%;
  }
  .colMd6 {
    width: 16.666%;
  }
  .colMd-6 {
    width: 83.333%;
  }
  .colMd3-2 {
    width: 60%;
  }
  .colMd-3-2 {
    width: 40%;
  }
}
.grid {
  display: -ms-grid;
  display: grid;
}

.grid-colum-2 {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}

.grid-colum-3 {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}

.grid-colum-4 {
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 767px) {
  .grid-colum-1s-sp {
    -ms-grid-columns: 0.85fr;
    grid-template-columns: 0.85fr;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .grid-colum-1-sp {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
  .grid-colum-2-sp {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-colum-3-sp {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-colum-4-sp {
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
  }
}
.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-x-10 {
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
}

.gap-y-10 {
  row-gap: 10px;
}

@media only screen and (max-width: 959px) {
  .gap-10 {
    gap: 5px;
  }
  .gap-x-10 {
    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
  }
  .gap-y-10 {
    row-gap: 5px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-20 {
  gap: 20px;
}

.gap-x-20 {
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

.gap-y-20 {
  row-gap: 20px;
}

@media only screen and (max-width: 959px) {
  .gap-20 {
    gap: 10px;
  }
  .gap-x-20 {
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
  }
  .gap-y-20 {
    row-gap: 10px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-30 {
  gap: 30px;
}

.gap-x-30 {
  -webkit-column-gap: 30px;
  -moz-column-gap: 30px;
  column-gap: 30px;
}

.gap-y-30 {
  row-gap: 30px;
}

@media only screen and (max-width: 959px) {
  .gap-30 {
    gap: 15px;
  }
  .gap-x-30 {
    -webkit-column-gap: 15px;
    -moz-column-gap: 15px;
    column-gap: 15px;
  }
  .gap-y-30 {
    row-gap: 15px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-40 {
  gap: 40px;
}

.gap-x-40 {
  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}

.gap-y-40 {
  row-gap: 40px;
}

@media only screen and (max-width: 959px) {
  .gap-40 {
    gap: 20px;
  }
  .gap-x-40 {
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
  .gap-y-40 {
    row-gap: 20px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-50 {
  gap: 50px;
}

.gap-x-50 {
  -webkit-column-gap: 50px;
  -moz-column-gap: 50px;
  column-gap: 50px;
}

.gap-y-50 {
  row-gap: 50px;
}

@media only screen and (max-width: 959px) {
  .gap-50 {
    gap: 25px;
  }
  .gap-x-50 {
    -webkit-column-gap: 25px;
    -moz-column-gap: 25px;
    column-gap: 25px;
  }
  .gap-y-50 {
    row-gap: 25px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-60 {
  gap: 60px;
}

.gap-x-60 {
  -webkit-column-gap: 60px;
  -moz-column-gap: 60px;
  column-gap: 60px;
}

.gap-y-60 {
  row-gap: 60px;
}

@media only screen and (max-width: 959px) {
  .gap-60 {
    gap: 30px;
  }
  .gap-x-60 {
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    column-gap: 30px;
  }
  .gap-y-60 {
    row-gap: 30px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-70 {
  gap: 70px;
}

.gap-x-70 {
  -webkit-column-gap: 70px;
  -moz-column-gap: 70px;
  column-gap: 70px;
}

.gap-y-70 {
  row-gap: 70px;
}

@media only screen and (max-width: 959px) {
  .gap-70 {
    gap: 35px;
  }
  .gap-x-70 {
    -webkit-column-gap: 35px;
    -moz-column-gap: 35px;
    column-gap: 35px;
  }
  .gap-y-70 {
    row-gap: 35px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-80 {
  gap: 80px;
}

.gap-x-80 {
  -webkit-column-gap: 80px;
  -moz-column-gap: 80px;
  column-gap: 80px;
}

.gap-y-80 {
  row-gap: 80px;
}

@media only screen and (max-width: 959px) {
  .gap-80 {
    gap: 40px;
  }
  .gap-x-80 {
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
  }
  .gap-y-80 {
    row-gap: 40px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-90 {
  gap: 90px;
}

.gap-x-90 {
  -webkit-column-gap: 90px;
  -moz-column-gap: 90px;
  column-gap: 90px;
}

.gap-y-90 {
  row-gap: 90px;
}

@media only screen and (max-width: 959px) {
  .gap-90 {
    gap: 45px;
  }
  .gap-x-90 {
    -webkit-column-gap: 45px;
    -moz-column-gap: 45px;
    column-gap: 45px;
  }
  .gap-y-90 {
    row-gap: 45px;
  }
}
.gap-5 {
  gap: 5px;
}

.gap-100 {
  gap: 100px;
}

.gap-x-100 {
  -webkit-column-gap: 100px;
  -moz-column-gap: 100px;
  column-gap: 100px;
}

.gap-y-100 {
  row-gap: 100px;
}

@media only screen and (max-width: 959px) {
  .gap-100 {
    gap: 50px;
  }
  .gap-x-100 {
    -webkit-column-gap: 50px;
    -moz-column-gap: 50px;
    column-gap: 50px;
  }
  .gap-y-100 {
    row-gap: 50px;
  }
}
/*横幅*/
@media only screen and (max-width: 767px) {
  .spPadding {
    padding-inline: 15px;
  }
}

.w100 {
  width: 100%;
}

:root {
  --cnt: 1280px;
  --interval: 60px;
}

.cnt {
  width: 100%;
  padding-inline: 15px;
  margin-inline: auto;
}
@media only screen and (max-width: 767px) {
  .cnt {
    padding-inline: 5.1282051282vw;
  }
}

.cntS {
  max-width: 600px;
  margin-inline: auto;
}

.cntM2 {
  max-width: 1040px;
  margin-inline: auto;
}

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

.cntL {
  max-width: 1230px;
  margin-inline: auto;
}

.cntML {
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 15px;
}

.cntXl {
  max-width: 1280px;
  margin-right: 2%;
  margin-left: 2%;
}
@media screen and (min-width: 1740px) {
  .cntXl {
    margin-inline: auto;
  }
}

.cntWide {
  max-width: 1280px;
  margin-inline: auto;
}

.cntWideL {
  max-width: 1920px;
  margin-inline: auto;
}

.paNone {
  padding: 0;
}

.rw {
  margin-inline: -15px;
}

:root {
  --spaceSizeS: clamp(25px, 10vw, 50px);
  --spaceSize: clamp(80px, 10vw, 140px);
  --spaceSizeWide: clamp(90px, 15vw, 180px);
}

.padding {
  padding-top: var(--spaceSize);
  padding-bottom: var(--spaceSize);
}
@media only screen and (max-width: 767px) {
  .padding {
    padding-top: 20.5128205128vw;
    padding-bottom: 20.5128205128vw;
  }
}

.paddingS {
  padding-top: var(--spaceSizeS);
  padding-bottom: var(--spaceSizeS);
}

.paddingW {
  padding-top: var(--spaceSizeWide);
  padding-bottom: var(--spaceSizeWide);
}

.margin {
  margin-top: var(--spaceSize);
  margin-bottom: var(--spaceSize);
}

.marginS {
  margin-top: var(--spaceSizeS);
  margin-bottom: var(--spaceSizeS);
}

.marginW {
  margin-top: var(--spaceSizeWide);
  margin-bottom: var(--spaceSizeWide);
}

.marginInlineNone {
  margin-inline: 0 !important;
}

.marginCenter {
  margin-inline: auto;
}

@media only screen and (max-width: 767px) {
  .spMargin {
    margin-block: 100px;
  }
}

/*背景系*/
.bgImg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.bgImgHeight {
  padding-bottom: 67%;
}

.bgImgParallax {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.bgFixed {
  background-attachment: fixed;
}
@media only screen and (max-width: 767px) {
  .bgFixed {
    background-attachment: inherit;
  }
}

.bgImgCircle {
  border-radius: 50%;
  padding-bottom: 100%;
}

.bgBlur {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.bgBlur:before {
  content: "";
  background: inherit;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
}

.bgWhite {
  background-color: #ffffff;
}

.bgZoom {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.bgZoomImg {
  position: absolute;
  width: 100%;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  will-change: transform;
  height: 100%;
  top: 0;
  left: 0;
}

a:hover .bgZoomImg {
  -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9);
}

.bgZoomText {
  position: relative;
  pointer-events: none;
  width: 100%;
  z-index: 1;
}

/*テーブルboostrap*/
table {
  border-collapse: collapse;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #212529;
}
.table th {
  text-align: inherit;
  font-weight: normal;
}
.table td,
.table th {
  padding: 1.2rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}
.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #e8edf0;
}

.table-bordered {
  border: 1px solid #dee2e6;
}
.table-bordered td,
.table-bordered th {
  border: 1px solid #dee2e6;
}

/*マスクアニメーション*/
.maskCenter .maskWrap {
  margin-left: auto;
  margin-right: auto;
}

.maskWrap {
  display: table;
  overflow: hidden;
}

.maskWrap .mask {
  display: table;
  position: relative;
  margin-bottom: 0.25em;
  left: -100%;
  overflow: hidden;
}

.maskWrap .maskBg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ae9373;
}

/*角丸*/
.radiusS {
  border-radius: 10px;
}

.radiusM {
  border-radius: 16px;
}
@media only screen and (max-width: 767px) {
  .radiusM {
    border-radius: 8px;
  }
}

.radiusL {
  border-radius: 20px;
}

.radiusXl {
  border-radius: 30px;
}

.radiusCircle {
  border-radius: 50%;
}

/*影*/
.shadowS {
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
}
@media only screen and (max-width: 767px) {
  .shadowS {
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
  }
}

.shadowM {
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}
@media only screen and (max-width: 767px) {
  .shadowM {
    -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  }
}

.shadowL {
  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
@media only screen and (max-width: 767px) {
  .shadowL {
    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 90px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 90px;
  }
}

.shadowLL {
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
}

/*マウスストーカー*/
/*==================================================
 * 独自クラス（このサイトだけ）
 *================================================*/
/*==================================================
 * header
 *================================================*/
/*オーバーレイメニュー（開閉の土台のみ。見た目は _style.scss）*/
@media only screen and (max-width: 959px) {
  .overRayBox {
    padding-left: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    visibility: hidden;
    opacity: 0;
    z-index: 999;
  }
  .open .overRayBox {
    visibility: visible;
    opacity: 1;
  }
}

html.open {
  overflow-y: hidden;
}

/*ハンバーガーメニュー*/
@media only screen and (max-width: 959px) {
  .menu-btn {
    background: transparent;
    border: none;
    padding: 0.3em;
    border-radius: 0.3em;
    z-index: 1000;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-inline: 6px;
  }
  .menu-btn .text {
    margin-left: 0.5em;
    font-size: 16px;
  }
}

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --menuTrigeHeight: 22px;
}

.menu-trigger {
  position: relative;
  height: var(--menuTrigeHeight);
  width: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.menu-trigger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: var(--fontColor);
}
.menu-trigger span:nth-of-type(1) {
  top: 5px;
}
.menu-trigger span:nth-of-type(2) {
  bottom: 5px;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(6px) rotate(-25deg);
  transform: translateY(6px) rotate(-25deg);
}
.menu-trigger.active span:nth-of-type(2) {
  bottom: 1px;
  -webkit-transform: translateY(-7px) rotate(25deg);
  transform: translateY(-7px) rotate(25deg);
}

/*==================================================
 * footer
 *================================================*/
/*==================================================
 * 当サイト共通
 *================================================*/
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  font-size: 15px;
}
@media only screen and (max-width: 767px) {
  body {
    font-size: 3.8461538462vw;
  }
}
body {
  background-color: var(--bgLight);
}

main {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  background-color: var(--bgLight);
}

.spBr {
  display: none;
}
@media only screen and (max-width: 767px) {
  .spBr {
    display: inline;
  }
}

.pcBr {
  display: inline;
}
@media only screen and (max-width: 767px) {
  .pcBr {
    display: none;
  }
}

/*--------------------------------------------------
 * JS共通フックの初期値
 * main.js が付けるクラスの受け手。docs/coding-rules.md の対応表と対で管理する
 *------------------------------------------------*/
[data-fadein] {
  opacity: 0;
  -webkit-transition: opacity 1.2s ease-out;
  transition: opacity 1.2s ease-out;
}

[data-fadein].is-fadein {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-fadein] {
    opacity: 1;
    -webkit-transition: none;
    transition: none;
  }
}
.scrollAnime {
  opacity: 0;
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  -webkit-transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
  transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out, -webkit-transform 0.8s ease-out;
}
.scrollAnime.isAnimated {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scrollAnime {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    transition: none;
  }
}
@media only screen and (max-width: 767px) {
  .scrollAnime,
  [data-fadein] {
    -webkit-transition-delay: 0s !important;
    transition-delay: 0s !important;
    -webkit-animation-delay: 0s !important;
    animation-delay: 0s !important;
  }
}
@media only screen and (max-width: 767px) {
  .acdBlock {
    display: none;
  }
}

/*==================================================
 * 共通パーツ
 * Figma で各セクションに繰り返し出てくる部品
 *================================================*/
/*--------------------------------------------------
 * セクションラベル（ドット＋英字）／セクション見出し
 *------------------------------------------------*/
.secLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .secLabel {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .secLabel {
    font-size: 0.875rem;
  }
}
.secLabel {
  font-weight: 600;
  line-height: 1.5;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .secLabel {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}
.secLabel.isWhite {
  color: var(--bgLight2);
}
.secLabel::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: currentColor;
}

.secTtl {
  font-size: 2rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .secTtl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .secTtl {
    font-size: 1.3125rem;
  }
}
.secTtl {
  font-weight: 700 !important;
  line-height: 1.2;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .secTtl {
    font-size: 7.4358974359vw;
  }
}

/*--------------------------------------------------
 * ボタン（紺の角丸＋白丸の矢印）
 * Figma: Button_01_pc / Button
 *------------------------------------------------*/
.btn01 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 1.6667em;
  -moz-column-gap: 1.6667em;
  column-gap: 1.6667em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0.6667em 0.6667em 0.6667em 2em;
  border-radius: 100px;
  background-color: var(--subColor);
  color: var(--bgLight2);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .btn01 {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .btn01 {
    font-size: 0.875rem;
  }
}
.btn01 {
  font-weight: 700 !important;
  line-height: 1.5;
  -webkit-box-shadow: inset 0 0 0 1.5px var(--subColor);
  box-shadow: inset 0 0 0 1.5px var(--subColor);
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .btn01 {
    -webkit-column-gap: 5.8974358974vw;
    -moz-column-gap: 5.8974358974vw;
    column-gap: 5.8974358974vw;
    padding: 2.5641025641vw 2.5641025641vw 2.5641025641vw 6.4102564103vw;
    font-size: 3.8461538462vw;
  }
}
.btn01 > span {
  line-height: 1.5;
}
.btn01 svg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: block;
  width: 2.6667em;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .btn01 svg {
    width: 7.6923076923vw;
  }
}
.btn01 svg rect {
  fill: currentColor;
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
}
.btn01 svg path {
  fill: var(--subColor);
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
}
.btn01:hover {
  background-color: var(--mainColor);
  color: var(--bgLight2);
  -webkit-box-shadow: inset 0 0 0 1.5px var(--mainColor);
  box-shadow: inset 0 0 0 1.5px var(--mainColor);
}
.btn01:hover svg path {
  fill: var(--mainColor);
}

.btn01Invert {
  background-color: var(--bgLight2);
  color: var(--subColor);
  -webkit-box-shadow: inset 0 0 0 1.5px var(--bgLight2);
  box-shadow: inset 0 0 0 1.5px var(--bgLight2);
}
.btn01Invert svg path {
  fill: var(--bgLight2);
}
.btn01Invert:hover {
  background-color: var(--subColor);
  color: var(--bgLight2);
  -webkit-box-shadow: inset 0 0 0 1.5px var(--subColor);
  box-shadow: inset 0 0 0 1.5px var(--subColor);
}
.btn01Invert:hover svg path {
  fill: var(--subColor);
}

/*--------------------------------------------------
 * ページヘッダー（下層8ページ共通）
 * Figma: PC 10550:11451 ほか / SP 10550:11188 ほか
 * PC は赤帯に写真を重ね、SP は赤帯の下に写真を置く
 *------------------------------------------------*/
.pageHead {
  position: relative;
}

.pageHeadBar {
  position: relative;
  height: 20.5333em;
  overflow: hidden;
  background-color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .pageHeadBar {
    height: 51.2820512821vw;
  }
}

.pageHeadPattern {
  position: absolute;
  top: 0;
  display: block;
  height: 100%;
  width: auto;
}

.pageHeadPatternPc {
  left: 0;
}
@media only screen and (max-width: 767px) {
  .pageHeadPatternPc {
    display: none;
  }
}
.pageHeadPatternPc.isRight {
  left: auto;
  right: 0;
}

.pageHeadCatch {
  position: absolute;
  top: 8.6em;
  left: 48.681%;
  z-index: 1;
  font-size: 1.3333em;
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pageHeadCatch {
    position: static;
    padding: 5.1282051282vw 5.1282051282vw 0;
    font-size: 3.8461538462vw;
  }
}

.pageHeadPatternSp {
  right: 0;
  display: none;
}
@media only screen and (max-width: 767px) {
  .pageHeadPatternSp {
    display: block;
  }
}

.pageHeadTtlBlock {
  position: absolute;
  top: 7.4em;
  left: 8em;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 1.3333em;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pageHeadTtlBlock {
    top: 18.2051282051vw;
    left: 5.1282051282vw;
    row-gap: 2.5641025641vw;
  }
}

.pageHeadEn {
  font-family: var(--fontEn);
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .pageHeadEn {
    font-size: 3.8461538462vw;
  }
}
.pageHeadEn.isJa {
  font-family: var(--fontJp);
  font-weight: 700 !important;
}

.pageHeadTtl {
  font-size: 3.2em;
  font-weight: 700 !important;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .pageHeadTtl {
    font-size: 8.2051282051vw;
  }
}

/* パンくず（PCは左下／SPは右下） */
.pageHeadBreadcrumb {
  position: absolute;
  top: 20.5385em;
  left: 9.2308em;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 1.0769em;
  -moz-column-gap: 1.0769em;
  column-gap: 1.0769em;
  font-size: 0.8667em;
  font-weight: 500 !important;
  line-height: 1.6;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pageHeadBreadcrumb {
    top: 42.0512820513vw;
    left: auto;
    right: 5.1282051282vw;
    -webkit-column-gap: 3.5897435897vw;
    -moz-column-gap: 3.5897435897vw;
    column-gap: 3.5897435897vw;
    font-size: 3.3333333333vw;
  }
}
.pageHeadBreadcrumb a {
  color: inherit;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.pageHeadBreadcrumb a:hover {
  opacity: 0.6;
}

.pageHeadBreadcrumbDot {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--bgLight2);
}

/* キャッチコピーが入るページ（小口径推進工事）の SP。
   帯が 265px に伸び、タイトル・キャッチ・パンくずは全部 absolute で置く。
   花りんは .pageHeadHanarin 側でさらに上書きするのでここでは対象外にする */
@media only screen and (max-width: 767px) {
  .pageHeadWide:not(.pageHeadHanarin) .pageHeadBar {
    height: 67.9487179487vw;
  }
  .pageHeadWide:not(.pageHeadHanarin) .pageHeadEn {
    display: none;
  }
  .pageHeadWide:not(.pageHeadHanarin) .pageHeadTtlBlock {
    top: 24.1025641026vw;
  }
  .pageHeadWide:not(.pageHeadHanarin) .pageHeadCatch {
    position: absolute;
    top: 37.6923076923vw;
    left: 5.1282051282vw;
    width: 89.7435897436vw;
    padding: 0;
    line-height: 1.6;
  }
  .pageHeadWide:not(.pageHeadHanarin) .pageHeadBreadcrumb {
    top: 58.7179487179vw;
  }
}

.pageHeadImg {
  position: absolute;
  top: 3.2em;
  bottom: 0;
  right: 0;
  width: 44.444%;
  border-radius: 8px 0 0 0;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .pageHeadImg {
    position: static;
    width: 100%;
    aspect-ratio: 390/140;
    border-radius: 0;
  }
}
.pageHeadImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

/* 花りんのページヘッダー（帯がオレンジ・写真が左端で帯からはみ出す） */
.pageHeadHanarin .pageHeadBar {
  height: 30.6667em;
  background-color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .pageHeadHanarin .pageHeadBar {
    height: 94.358974359vw;
  }
}
.pageHeadHanarin .pageHeadTtlBlock {
  top: 9.0667em;
}
@media only screen and (max-width: 767px) {
  .pageHeadHanarin .pageHeadTtlBlock {
    top: 24.1025641026vw;
  }
}
.pageHeadHanarin .pageHeadBreadcrumb {
  top: 18.7692em;
}
@media only screen and (max-width: 767px) {
  .pageHeadHanarin .pageHeadBreadcrumb {
    top: 58.7179487179vw;
  }
}
.pageHeadHanarin .pageHeadCatch {
  top: 14.6957em;
  left: auto;
  right: 5.2174em;
  width: 15em;
  font-size: 1.5333em;
}
@media only screen and (max-width: 767px) {
  .pageHeadHanarin .pageHeadCatch {
    position: absolute;
    top: 43.8461538462vw;
    left: 5.1282051282vw;
    right: auto;
    width: 89.7435897436vw;
    padding: 0;
    font-size: 3.8461538462vw;
    line-height: 1.6;
  }
}
.pageHeadHanarin .pageHeadImg {
  top: 19em;
  bottom: auto;
  left: 0;
  right: auto;
  z-index: 2;
  width: var(--karinFvW);
  height: auto;
  aspect-ratio: 890/350;
  border-radius: 0 8px 8px 0;
}
@media only screen and (max-width: 767px) {
  .pageHeadHanarin .pageHeadImg {
    position: absolute;
    top: 67.9487179487vw;
    width: 82.0512820513vw;
    max-width: none;
    height: auto;
    aspect-ratio: 320/200;
    border-radius: 0 8px 8px 0;
  }
}
.pageHeadHanarin .pageHeadPatternSp {
  width: 69.2307692308vw;
  height: 67.9487179487vw;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left top;
  object-position: left top;
}

/* 花りんのページヘッダー写真の実寸。帯からのはみ出し量を下のセクションと共有する。
   em を混ぜると :root の 16px 基準になるので px で持つ */
:root {
  --karinFvW: min(61.806%, calc(100% - 525px), 1025px);
  --karinFvH: calc(var(--karinFvW) * 350 / 890);
  --karinFvOver: max(0px, calc(285px + var(--karinFvH) - 460px));
}

/*--------------------------------------------------
 * 下層: 一覧ページの白いボックス
 *------------------------------------------------*/
.newsArchive {
  padding-block: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .newsArchive {
    padding-block: 15.3846153846vw;
  }
}

.newsArchiveInner {
  padding: 5.3333em 6em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .newsArchiveInner {
    padding: 15.3846153846vw 5.1282051282vw;
  }
}

.newsEmpty {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .newsEmpty {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .newsEmpty {
    font-size: 0.875rem;
  }
}
.newsEmpty {
  font-weight: 500 !important;
  line-height: 1.6;
  color: var(--subColor);
  text-align: center;
}

/*--------------------------------------------------
 * お問い合わせ
 * Figma: PC 10550:12252 / SP 10550:10966
 *------------------------------------------------*/
.contact {
  padding-block: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .contact {
    padding-block: 15.3846153846vw;
  }
}

.contactLead {
  width: 83.333%;
  margin-inline: auto;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .contactLead {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contactLead {
    font-size: 0.875rem;
  }
}
.contactLead {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .contactLead {
    width: 100%;
    font-size: 3.8461538462vw;
  }
}
.contactLead p {
  font-weight: 500;
}
.contactLead p + p {
  margin-top: 1.8em;
}

/* 事業部ごとの案内カード */
.contactCards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
  width: 83.333%;
  margin: 5.8667em auto 0;
}
@media only screen and (max-width: 767px) {
  .contactCards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 5.1282051282vw;
    width: 100%;
    margin-top: 10.2564102564vw;
  }
}

.contactCard {
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  row-gap: 0.6667em;
  aspect-ratio: 490/210;
  padding: 2.6667em 5.8667em;
  border-radius: 8px;
  background-color: #ebe8e0;
  color: var(--subColor);
  text-align: center;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .contactCard {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    aspect-ratio: auto;
    row-gap: 2.5641025641vw;
    padding: 7.6923076923vw 5.1282051282vw 15.3846153846vw;
  }
}
.contactCard:hover {
  background-color: #e3e0d8;
}
.contactCard:hover .contactCardTtl {
  color: var(--mainColor);
}

.contactCardTtl {
  font-size: 1.5333em;
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--subColor);
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .contactCardTtl {
    font-size: 5.1282051282vw;
  }
}

.contactCardText {
  font-size: 0.8667em;
  font-weight: 400;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .contactCardText {
    font-size: 3.3333333333vw;
  }
}

.contactCardArrow {
  position: absolute;
  right: 4.082%;
  bottom: 1.3333em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 2.6667em;
  height: 2.6667em;
  border-radius: 50%;
  background-color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .contactCardArrow {
    right: 5.1282051282vw;
    bottom: 5.1282051282vw;
    width: 10.2564102564vw;
    height: 10.2564102564vw;
  }
}
.contactCardArrow::before {
  content: "";
  width: 0.5333em;
  height: 0.5333em;
  border-right: 2px solid var(--bgLight2);
  border-bottom: 2px solid var(--bgLight2);
  -webkit-transform: translateY(-25%) rotate(45deg);
  transform: translateY(-25%) rotate(45deg);
}

/* フォーム */
.contactForm {
  width: 83.333%;
  margin: 6.6667em auto 0;
}
@media only screen and (max-width: 767px) {
  .contactForm {
    width: 100%;
    margin-top: 15.3846153846vw;
  }
}

.contactRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.9333em;
}
@media only screen and (max-width: 767px) {
  .contactRow {
    row-gap: 3.5897435897vw;
  }
}
.contactRow + .contactRow {
  margin-top: 1.6667em;
}
@media only screen and (max-width: 767px) {
  .contactRow + .contactRow {
    margin-top: 6.4102564103vw;
  }
}

.contactLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .contactLabel {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contactLabel {
    font-size: 0.875rem;
  }
}
.contactLabel {
  font-weight: 500 !important;
  line-height: 1.5;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .contactLabel {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}

.contactBadge {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 1px 0.6154em 3px;
  border-radius: 100px;
  background-color: var(--mainColor);
  font-size: 0.8667em;
  font-weight: 500 !important;
  line-height: 1.25;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .contactBadge {
    font-size: 3.3333333333vw;
  }
}
.contactBadge.isOptional {
  background-color: #a1a1a1;
}

.contactForm input[type=text],
.contactForm input[type=email],
.contactForm input[type=tel],
.contactForm textarea {
  width: 25.7333em;
  padding: 1.1333em 1.0667em;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  background-color: var(--bgLight2);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .contactForm input[type=text],
  .contactForm input[type=email],
  .contactForm input[type=tel],
  .contactForm textarea {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contactForm input[type=text],
  .contactForm input[type=email],
  .contactForm input[type=tel],
  .contactForm textarea {
    font-size: 0.875rem;
  }
}
.contactForm input[type=text],
.contactForm input[type=email],
.contactForm input[type=tel],
.contactForm textarea {
  font-weight: 500 !important;
  line-height: 1.5;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .contactForm input[type=text],
  .contactForm input[type=email],
  .contactForm input[type=tel],
  .contactForm textarea {
    width: 100%;
    padding: 4.358974359vw 4.1025641026vw;
    font-size: 3.8461538462vw;
  }
}
.contactForm input[type=text]::-webkit-input-placeholder, .contactForm input[type=email]::-webkit-input-placeholder, .contactForm input[type=tel]::-webkit-input-placeholder, .contactForm textarea::-webkit-input-placeholder {
  color: #a1a1a1;
}
.contactForm input[type=text]::-moz-placeholder, .contactForm input[type=email]::-moz-placeholder, .contactForm input[type=tel]::-moz-placeholder, .contactForm textarea::-moz-placeholder {
  color: #a1a1a1;
}
.contactForm input[type=text]:-ms-input-placeholder, .contactForm input[type=email]:-ms-input-placeholder, .contactForm input[type=tel]:-ms-input-placeholder, .contactForm textarea:-ms-input-placeholder {
  color: #a1a1a1;
}
.contactForm input[type=text]::-ms-input-placeholder, .contactForm input[type=email]::-ms-input-placeholder, .contactForm input[type=tel]::-ms-input-placeholder, .contactForm textarea::-ms-input-placeholder {
  color: #a1a1a1;
}
.contactForm input[type=text]::placeholder,
.contactForm input[type=email]::placeholder,
.contactForm input[type=tel]::placeholder,
.contactForm textarea::placeholder {
  color: #a1a1a1;
}
.contactForm input[type=text]:focus,
.contactForm input[type=email]:focus,
.contactForm input[type=tel]:focus,
.contactForm textarea:focus {
  border-color: var(--subColor);
  outline: none;
}
.contactForm textarea {
  width: 100%;
  height: 23.3333em;
  resize: vertical;
}
@media only screen and (max-width: 767px) {
  .contactForm textarea {
    height: 89.7435897436vw;
  }
}
.contactForm .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* 同意チェック＋送信ボタン */
.contactSubmit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 2.6667em;
  margin-top: 4em;
}
@media only screen and (max-width: 767px) {
  .contactSubmit {
    row-gap: 7.6923076923vw;
    margin-top: 10.2564102564vw;
  }
}

.contactAgree {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 0.6667em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .contactAgree {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contactAgree {
    font-size: 0.875rem;
  }
}
.contactAgree {
  font-weight: 500 !important;
  line-height: 1.7;
  color: var(--subColor);
  text-align: left;
}
.contactAgree .wpcf7-form-control-wrap {
  text-align: center;
}
.contactAgree p {
  line-height: 1.7;
}
@media only screen and (max-width: 767px) {
  .contactAgree {
    row-gap: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}
.contactAgree a {
  color: var(--mainColor);
  text-decoration: underline;
}
.contactAgree a:hover {
  text-decoration: none;
}
.contactAgree .wpcf7-list-item {
  margin: 0;
}
.contactAgree input[type=checkbox] {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-right: 15px;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
  background-color: #f6f6f6;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  vertical-align: -0.2em;
}
@media only screen and (max-width: 767px) {
  .contactAgree input[type=checkbox] {
    width: 4.6153846154vw;
    height: 4.6153846154vw;
    margin-right: 3.8461538462vw;
  }
}
.contactAgree input[type=checkbox]:checked {
  border-color: var(--mainColor);
  background-color: var(--mainColor);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.5L4.5 9L10 3.5' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
}
.contactAgree .wpcf7-list-item-label {
  line-height: 1.7;
}

.contactSubmitBtn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 16.6667em;
  height: 4em;
  padding: 0.6667em 0.6667em 0.6667em 2em;
  border: none;
  border-radius: 100px;
  background-color: var(--subColor);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Crect width='40' height='40' rx='20' fill='white'/%3E%3Cpath d='M23.3359 20.8369C22.8454 21.1773 22.3261 21.6312 21.778 22.1844C21.2298 22.7376 20.7393 23.2908 20.321 23.8582L21.7924 24.6667C22.254 24.0851 22.7733 23.5035 23.3503 22.9362C23.9274 22.3688 24.5332 21.8298 25.1535 21.3333C25.7738 20.8369 26.3941 20.383 27 20C26.3941 19.617 25.7738 19.1773 25.1535 18.6667C24.5332 18.1702 23.9274 17.6312 23.3503 17.0638C22.7733 16.4965 22.254 15.9149 21.7924 15.3333L20.321 16.1418C20.7393 16.7092 21.2154 17.2766 21.778 17.8156C22.3261 18.3688 22.8454 18.8085 23.3359 19.1631L13 19.1631L13 20.8369L23.3359 20.8369Z' fill='%23002E4E'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6667em center;
  background-size: 2.6667em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .contactSubmitBtn {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .contactSubmitBtn {
    font-size: 0.875rem;
  }
}
.contactSubmitBtn {
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--bgLight2);
  text-align: left;
  cursor: pointer;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .contactSubmitBtn {
    width: 60.2564102564vw;
    height: 12.8205128205vw;
    min-height: 12.8205128205vw;
    padding: 2.5641025641vw 2.5641025641vw 2.5641025641vw 6.4102564103vw;
    background-position: right 2.5641025641vw center;
    background-size: 7.6923076923vw;
    font-size: 3.8461538462vw;
  }
}
.contactSubmitBtn:hover {
  background-color: var(--mainColor);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Crect width='40' height='40' rx='20' fill='white'/%3E%3Cpath d='M23.3359 20.8369C22.8454 21.1773 22.3261 21.6312 21.778 22.1844C21.2298 22.7376 20.7393 23.2908 20.321 23.8582L21.7924 24.6667C22.254 24.0851 22.7733 23.5035 23.3503 22.9362C23.9274 22.3688 24.5332 21.8298 25.1535 21.3333C25.7738 20.8369 26.3941 20.383 27 20C26.3941 19.617 25.7738 19.1773 25.1535 18.6667C24.5332 18.1702 23.9274 17.6312 23.3503 17.0638C22.7733 16.4965 22.254 15.9149 21.7924 15.3333L20.321 16.1418C20.7393 16.7092 21.2154 17.2766 21.778 17.8156C22.3261 18.3688 22.8454 18.8085 23.3359 19.1631L13 19.1631L13 20.8369L23.3359 20.8369Z' fill='%23DA3832'/%3E%3C/svg%3E");
}

/* CF7 のメッセージ */
.wpcf7-not-valid-tip {
  margin-top: 0.5em;
  font-size: 0.875rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .wpcf7-not-valid-tip {
    font-size: 0.8125rem;
  }
}
@media only screen and (max-width: 767px) {
  .wpcf7-not-valid-tip {
    font-size: 0.75rem;
  }
}
.wpcf7-not-valid-tip {
  color: var(--mainColor);
}

.wpcf7-response-output {
  margin: 2em 0 0 !important;
  padding: 1em !important;
  border-radius: 5px;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .wpcf7-response-output {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .wpcf7-response-output {
    font-size: 0.875rem;
  }
}
.wpcf7-response-output {
  text-align: center;
}

/*--------------------------------------------------
 * 小口径推進工事
 * Figma: PC 10533:1873 / SP 10644:8901
 *------------------------------------------------*/
.pipeVisual {
  width: 100%;
  aspect-ratio: 1440/350;
}
@media only screen and (max-width: 767px) {
  .pipeVisual {
    aspect-ratio: 390/140;
  }
}
.pipeVisual img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.pipeForte {
  padding-block: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .pipeForte {
    padding-block: 15.3846153846vw;
  }
}

.pipeForteHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .pipeForteHead {
    row-gap: 5.1282051282vw;
  }
}

.pipeForteEn {
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .pipeForteEn {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .pipeForteEn {
    font-size: 0.875rem;
  }
}
.pipeForteEn {
  font-weight: 600;
  line-height: 1.5;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .pipeForteEn {
    font-size: 3.8461538462vw;
  }
}

.pipeForteTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.4;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .pipeForteTtl {
    font-size: 7.4358974359vw;
    line-height: 1;
  }
  .pipeForteTtl .num,
  .pipeForteTtl .unit {
    line-height: 1;
  }
}
.pipeForteTtl .num {
  font-size: 1.5em;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .pipeForteTtl .num {
    font-size: 1.6552em;
  }
}
.pipeForteTtl .unit {
  color: var(--mainColor);
}

/* 5つの強みカード（上段3枚・下段2枚を中央寄せ） */
.pipeForteCards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1em;
  margin-top: 2.6667em;
}
@media only screen and (max-width: 767px) {
  .pipeForteCards {
    gap: 3.8461538462vw;
    margin-top: 7.6923076923vw;
  }
}

.pipeForteCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1em;
}
.pipeForteCard:nth-child(2), .pipeForteCard:nth-child(5) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.pipeForteCard:nth-child(3) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.pipeForteCard {
  width: 32.5%;
  padding: 1.7333em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pipeForteCard {
    width: 100%;
    row-gap: 3.8461538462vw;
    padding: 5.1282051282vw;
  }
}

.pipeForteCardImg {
  width: 100%;
  aspect-ratio: 338/240;
  border-radius: 8px;
  overflow: hidden;
}
.pipeForteCardImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.pipeForteCardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.8em;
  padding-block: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .pipeForteCardBody {
    row-gap: 3.0769230769vw;
    padding-block: 2.5641025641vw;
  }
}

.pipeForteCardHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 0.4em;
}
@media only screen and (max-width: 767px) {
  .pipeForteCardHead {
    row-gap: 1.5384615385vw;
  }
}

.pipeForteCardNo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .pipeForteCardNo {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .pipeForteCardNo {
    font-size: 0.875rem;
  }
}
.pipeForteCardNo {
  font-weight: 600;
  line-height: 1.5;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .pipeForteCardNo {
    font-size: 3.8461538462vw;
  }
}

.pipeForteCardLine {
  display: block;
  width: 2.5333em;
  height: 3px;
  border-radius: 50px;
  background-color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .pipeForteCardLine {
    width: 9.7435897436vw;
  }
}

.pipeForteCardTtl {
  font-size: 1.5333em;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--mainColor);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .pipeForteCardTtl {
    font-size: 5.8974358974vw;
  }
}

.pipeForteCardText {
  padding-top: 0.3333em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .pipeForteCardText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .pipeForteCardText {
    font-size: 0.875rem;
  }
}
.pipeForteCardText {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .pipeForteCardText {
    font-size: 3.8461538462vw;
  }
}
.pipeForteCardText p {
  font-weight: 500;
}

/* 施工実績テーブル */
.pipeWorks {
  padding-block: 6.6667em;
  background-color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .pipeWorks {
    padding-block: 15.3846153846vw;
  }
}

/* 施工写真（12枚グリッド） */
@media only screen and (max-width: 767px) {
  .pipeGallery {
    margin-top: 10.2564102564vw;
  }
}

.pipeGalleryTtl {
  padding-left: 1.2em;
  font-family: var(--fontEn);
  font-size: 6.6667em;
  font-weight: 500;
  line-height: 1;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pipeGalleryTtl {
    padding-left: 0;
    font-size: 17.4358974359vw;
    line-height: 0.9;
    text-align: center;
  }
}

.pipeGallerySlider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.5333em;
  margin-top: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .pipeGallerySlider {
    row-gap: 2.0512820513vw;
    margin-top: 5.1282051282vw;
  }
}

.pipeGalleryRow {
  overflow: hidden;
}

.pipeGalleryTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: pipeGalleryScrollLeft 40s linear infinite;
  animation: pipeGalleryScrollLeft 40s linear infinite;
}

.pipeGalleryRow.isReverse .pipeGalleryTrack {
  -webkit-animation-name: pipeGalleryScrollRight;
  animation-name: pipeGalleryScrollRight;
}

.pipeGalleryItem {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 23.6em;
  margin-right: 0.5333em;
  aspect-ratio: 354/240;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .pipeGalleryItem {
    width: 48.9743589744vw;
    margin-right: 2.0512820513vw;
    aspect-ratio: 191/159;
  }
}
.pipeGalleryItem img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

@-webkit-keyframes pipeGalleryScrollLeft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes pipeGalleryScrollLeft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@-webkit-keyframes pipeGalleryScrollRight {
  from {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes pipeGalleryScrollRight {
  from {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pipeGalleryTrack {
    -webkit-animation: none;
    animation: none;
  }
}
/* CTA（赤背景） */
.pipeCta {
  padding-block: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .pipeCta {
    padding-block: 15.3846153846vw;
  }
}

.pipeCtaInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 2.6667em;
  padding: 4.6667em 6.6667em;
  border-radius: 8px;
  background-color: var(--mainColor);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .pipeCtaInner {
    row-gap: 10.2564102564vw;
    padding: 15.3846153846vw 5.1282051282vw;
  }
}

.pipeCtaHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 2em;
}
@media only screen and (max-width: 767px) {
  .pipeCtaHead {
    row-gap: 7.6923076923vw;
  }
}

.pipeCtaTtlBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .pipeCtaTtlBlock {
    row-gap: 2.5641025641vw;
  }
}

.pipeCtaEn {
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .pipeCtaEn {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .pipeCtaEn {
    font-size: 0.875rem;
  }
}
.pipeCtaEn {
  font-weight: 600;
  line-height: 1.5;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pipeCtaEn {
    font-size: 3.8461538462vw;
  }
}

.pipeCtaTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.2;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pipeCtaTtl {
    font-size: 8.2051282051vw;
  }
}

.pipeCtaText {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .pipeCtaText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .pipeCtaText {
    font-size: 0.875rem;
  }
}
.pipeCtaText {
  font-weight: 500 !important;
  line-height: 1.5;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .pipeCtaText {
    font-size: 3.8461538462vw;
  }
}

/*--------------------------------------------------
 * お問い合わせ完了
 * Figma: PC 10550:12341 / SP 10550:10812
 *------------------------------------------------*/
.thanks {
  padding-block: 6.6667em;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .thanks {
    padding-block: 15.3846153846vw;
  }
}

.thanksTtl {
  font-size: 1.3333em;
  font-weight: 700 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .thanksTtl {
    font-size: 5.1282051282vw;
  }
}

.thanksText {
  margin-top: 1.3333em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .thanksText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .thanksText {
    font-size: 0.875rem;
  }
}
.thanksText {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .thanksText {
    margin-top: 5.1282051282vw;
    font-size: 3.8461538462vw;
  }
}
.thanksText p {
  font-weight: 500;
}

.thanksBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 4em;
}
@media only screen and (max-width: 767px) {
  .thanksBtn {
    margin-top: 10.2564102564vw;
  }
}
.thanksBtn .btn01 {
  width: 13em;
}
@media only screen and (max-width: 767px) {
  .thanksBtn .btn01 {
    width: 60.2564102564vw;
  }
}

/*--------------------------------------------------
 * 会社概要
 * Figma: PC 10550:11487 / SP 10550:11263
 *------------------------------------------------*/
.company {
  padding-block: 6.6667em 0;
}
@media only screen and (max-width: 767px) {
  .company {
    padding-block: 15.3846153846vw 0;
  }
}

.companyVisual {
  width: 100%;
  aspect-ratio: 1200/460;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .companyVisual {
    aspect-ratio: 350/360;
  }
}
.companyVisual img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

/* 代表あいさつ */
.companyGreeting {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2.6667em;
  width: 83.333%;
  margin: 5.3333em auto 0;
}
@media only screen and (max-width: 767px) {
  .companyGreeting {
    row-gap: 10.2564102564vw;
    width: 100%;
    margin-top: 15.3846153846vw;
  }
}

.companyGreetingHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .companyGreetingHead {
    row-gap: 2.5641025641vw;
  }
}

.companyLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .companyLabel {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .companyLabel {
    font-size: 0.875rem;
  }
}
.companyLabel {
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .companyLabel {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}
.companyLabel.isWhite {
  color: var(--bgLight2);
}
.companyLabel::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: currentColor;
}

.companyLabelEn {
  font-family: var(--fontEn);
  font-weight: 600;
}

.companyGreetingTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .companyGreetingTtl {
    font-size: 6.6666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .companyGreetingTtl br {
    display: none;
  }
}

.companyGreetingBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .companyGreetingBody {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .companyGreetingBody {
    font-size: 0.875rem;
  }
}
.companyGreetingBody {
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .companyGreetingBody {
    row-gap: 7.6923076923vw;
    font-size: 3.8461538462vw;
  }
}
.companyGreetingBody p {
  font-weight: 400;
}
.companyGreetingBody .companyGreetingText p + p {
  margin-top: 1.8em;
}

.companyGreetingSign {
  font-weight: 500 !important;
}
.companyGreetingSign p {
  font-weight: 500;
}

.companyGreetingName {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .companyGreetingName {
    -webkit-column-gap: 5.1282051282vw;
    -moz-column-gap: 5.1282051282vw;
    column-gap: 5.1282051282vw;
  }
}
.companyGreetingName .companyGreetingSignImg {
  display: block;
  width: 12.4167em;
  height: auto;
  margin: 0;
}
@media only screen and (max-width: 767px) {
  .companyGreetingName .companyGreetingSignImg {
    width: 38.4615384615vw;
  }
}
.companyGreetingName span:last-child {
  font-size: 1.3333em;
  font-weight: 700 !important;
}
@media only screen and (max-width: 767px) {
  .companyGreetingName span:last-child {
    font-size: 5.1282051282vw;
  }
}

/* 会社概要一覧（Figma Frame 819：背景が白の全幅セクション） */
.companyOutline {
  margin-top: 8em;
  padding-block: 6.6667em 7.4667em;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .companyOutline {
    margin-top: 20.5128205128vw;
    padding-block: 20.5128205128vw;
  }
}

.companyOutlineHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .companyOutlineHead {
    row-gap: 2.5641025641vw;
  }
}

.companyOutlineTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .companyOutlineTtl {
    font-size: 7.4358974359vw;
  }
}

.companyTable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1.7333em;
  padding: 4em;
  border-radius: 8px;
  background-color: var(--bgLight);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .companyTable {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .companyTable {
    font-size: 0.875rem;
  }
}
.companyTable {
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .companyTable {
    row-gap: 7.6923076923vw;
    margin-top: 5.1282051282vw;
    padding: 10.2564102564vw 5.1282051282vw;
    font-size: 3.8461538462vw;
  }
}

.companyRow {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 3.3333em;
  -moz-column-gap: 3.3333em;
  column-gap: 3.3333em;
  padding-block: 1.6667em;
}
@media only screen and (max-width: 767px) {
  .companyRow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 2.5641025641vw;
    padding-block: 2.5641025641vw 0;
  }
}
.companyRow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: -webkit-linear-gradient(left, var(--mainColor) 0 62px, #ebe8e0 62px);
  background: linear-gradient(to right, var(--mainColor) 0 62px, #ebe8e0 62px);
}
@media only screen and (max-width: 767px) {
  .companyRow::before {
    background: var(--mainColor);
  }
}
.companyRow:first-child {
  padding-top: 0;
}
.companyRow:first-child::before {
  display: none;
}
@media only screen and (max-width: 767px) {
  .companyRow:first-child::before {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .companyRow:first-child {
    padding-top: 2.5641025641vw;
  }
}

.companyRowLabel {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 6em;
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .companyRowLabel {
    width: 100%;
    padding-bottom: 2.5641025641vw;
    border-bottom: 1px solid #ebe8e0;
  }
}

.companyRowValue {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  line-height: 1.6;
  font-weight: 400;
  color: var(--subColor);
}
.companyRowValue p,
.companyRowValue span,
.companyRowValue div {
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .companyRowValue {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}
.companyRowValue p {
  font-weight: 400;
}

.companyAddress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .companyAddress {
    row-gap: 5.1282051282vw;
  }
}

.companyAddressBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.1333em;
}

.companyAddressTtl {
  font-weight: 500 !important;
  color: var(--subColor);
}

.companyAddressTel {
  color: var(--subColor);
  font-weight: 400;
}

.companyAddressRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .companyAddressRow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
  }
}

.companyMapLink {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
  font-weight: 500 !important;
  color: var(--mainColor);
  text-decoration: underline;
}
.companyMapLink:hover {
  text-decoration: none;
}
.companyMapLink img {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.7333em;
  height: auto;
}

/* Googleマップ */
.companyMap {
  width: 100%;
  aspect-ratio: 1200/580;
  margin-top: 0.6667em;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .companyMap {
    aspect-ratio: 350/360;
    margin-top: 2.5641025641vw;
  }
}
.companyMap iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*--------------------------------------------------
 * プライバシーポリシー
 * Figma: PC 10550:12382 / SP 10550:10933
 *------------------------------------------------*/
.privacy {
  padding-block: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .privacy {
    padding-block: 15.3846153846vw;
  }
}

.privacyInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 5.3333em;
  width: 83.333%;
  margin-inline: auto;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .privacyInner {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .privacyInner {
    font-size: 0.875rem;
  }
}
.privacyInner {
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .privacyInner {
    row-gap: 15.3846153846vw;
    width: 100%;
    font-size: 3.8461538462vw;
  }
}
.privacyInner p,
.privacyInner li {
  font-weight: 400;
}

.privacyBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 3.3333em;
}
@media only screen and (max-width: 767px) {
  .privacyBody {
    row-gap: 10.2564102564vw;
  }
}

.privacySection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .privacySection {
    row-gap: 2.5641025641vw;
  }
}

.privacyTtl {
  font-size: 1.5333em;
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .privacyTtl {
    font-size: 4.6153846154vw;
  }
}

.privacyText {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1em;
}
@media only screen and (max-width: 767px) {
  .privacyText {
    row-gap: 3.8461538462vw;
  }
}
.privacyText ul {
  padding-left: 2.8333em;
}
@media only screen and (max-width: 767px) {
  .privacyText ul {
    padding-left: 5.7692307692vw;
  }
}
.privacyText ul li {
  list-style-type: disc;
}

.privacyContact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.9333em;
  padding: 2.6667em;
  border-radius: 8px;
  background-color: #ebe8e0;
}
@media only screen and (max-width: 767px) {
  .privacyContact {
    row-gap: 2.5641025641vw;
    padding: 6.4102564103vw;
  }
}
.privacyContact ul {
  padding-left: 2.8333em;
}
@media only screen and (max-width: 767px) {
  .privacyContact ul {
    padding-left: 5.7692307692vw;
  }
}
.privacyContact ul li {
  list-style-type: disc;
}

.privacyContactTtl {
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .privacyContactTtl {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .privacyContactTtl {
    font-size: 0.875rem;
  }
}
.privacyContactTtl {
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .privacyContactTtl {
    font-size: 3.8461538462vw;
  }
}

/*--------------------------------------------------
 * 記事詳細
 * Figma: PC 10550:12452 / SP 10550:11142
 *------------------------------------------------*/
.postDetail {
  padding-block: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .postDetail {
    padding-block: 15.3846153846vw;
  }
}

.postDetailInner {
  padding: 5.3333em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .postDetailInner {
    padding: 15.3846153846vw 5.1282051282vw;
  }
}

.postDetailHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
  padding-bottom: 2em;
  border-bottom: 1.5px solid var(--bgLight);
}
@media only screen and (max-width: 767px) {
  .postDetailHead {
    row-gap: 2.5641025641vw;
    padding-bottom: 7.6923076923vw;
  }
}

.postDetailDate {
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .postDetailDate {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .postDetailDate {
    font-size: 0.875rem;
  }
}
.postDetailDate {
  font-weight: 600;
  line-height: 1.6;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .postDetailDate {
    font-size: 3.8461538462vw;
  }
}

.postDetailTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .postDetailTtl {
    font-size: 6.6666666667vw;
  }
}

/*--------------------------------------------------
 * 本文（投稿エディタの出力にスタイルを当てる）
 *------------------------------------------------*/
.postContent {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .postContent {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .postContent {
    font-size: 0.875rem;
  }
}
.postContent {
  font-weight: 400;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .postContent {
    font-size: 3.8461538462vw;
  }
}
.postContent p,
.postContent li {
  font-weight: 400;
}
.postContent p {
  padding-block: 1.3333em;
}
.postContent p:has(> img:only-child) {
  padding-block: 0;
}
.postContent h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6923em;
  -moz-column-gap: 0.6923em;
  column-gap: 0.6923em;
  padding-block: 2.3077em 1.5385em;
  font-size: 1.7333em;
  font-weight: 700 !important;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .postContent h2 {
    -webkit-column-gap: 4.6153846154vw;
    -moz-column-gap: 4.6153846154vw;
    column-gap: 4.6153846154vw;
    padding-block: 10.2564102564vw 5.1282051282vw;
    font-size: 5.8974358974vw;
  }
}
.postContent h2::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 4px;
  height: 1.0769em;
  border-radius: 50px;
  background-color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .postContent h2::before {
    height: 7.1794871795vw;
  }
}
.postContent h3 {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.9em;
  -moz-column-gap: 0.9em;
  column-gap: 0.9em;
  margin-bottom: 1em;
  padding-block: 2em 0.4em;
  font-size: 1.3333em;
  font-weight: 700 !important;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .postContent h3 {
    -webkit-column-gap: 4.6153846154vw;
    -moz-column-gap: 4.6153846154vw;
    column-gap: 4.6153846154vw;
    margin-bottom: 5.1282051282vw;
    padding-block: 5.1282051282vw 2.0512820513vw;
    font-size: 4.6153846154vw;
  }
}
.postContent h3::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.3em;
  height: 0.3em;
  border-radius: 50%;
  background-color: var(--mainColor);
}
.postContent h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--mainColor);
}
.postContent img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 1.3333em;
  border-radius: 8px;
}
@media only screen and (max-width: 767px) {
  .postContent img {
    margin-bottom: 5.1282051282vw;
  }
}
.postContent ul,
.postContent ol {
  padding-block: 1.3333em;
  padding-left: 1.5em;
}
@media only screen and (max-width: 767px) {
  .postContent ul,
  .postContent ol {
    padding-block: 5.1282051282vw;
    padding-left: 5.7692307692vw;
  }
}
.postContent ul li {
  list-style-type: disc;
}
.postContent ol li {
  list-style-type: decimal;
}
.postContent a {
  color: var(--mainColor);
  text-decoration: underline;
}
.postContent a:hover {
  text-decoration: none;
}
.postContent h4 {
  padding-top: 2em;
  padding-bottom: 0.6667em;
  font-size: 1.2em;
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .postContent h4 {
    padding-top: 7.6923076923vw;
    padding-bottom: 2.5641025641vw;
    font-size: 4.358974359vw;
  }
}
.postContent h5 {
  padding-top: 1.6667em;
  padding-bottom: 0.5333em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .postContent h5 {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .postContent h5 {
    font-size: 0.875rem;
  }
}
.postContent h5 {
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .postContent h5 {
    padding-top: 6.4102564103vw;
    padding-bottom: 2.0512820513vw;
    font-size: 3.8461538462vw;
  }
}
.postContent table {
  width: 100%;
  margin-block: 1.6667em;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .postContent table {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .postContent table {
    font-size: 0.875rem;
  }
}
.postContent table {
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .postContent table {
    margin-block: 5.1282051282vw;
    font-size: 3.3333333333vw;
  }
}
.postContent table th,
.postContent table td {
  padding: 1em 1.3333em;
  border: 1px solid var(--borderColor);
  text-align: left;
  vertical-align: top;
}
@media only screen and (max-width: 767px) {
  .postContent table th,
  .postContent table td {
    padding: 2.5641025641vw;
  }
}
.postContent table th {
  background-color: var(--bgLight);
  font-weight: 700 !important;
  color: var(--subColor);
}
.postContent table td {
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .postContent table {
    min-width: 153.8461538462vw;
    white-space: nowrap;
  }
}
.postContent .js-scrollable {
  margin-block: 1.6667em;
}
@media only screen and (max-width: 767px) {
  .postContent .js-scrollable {
    overflow-x: auto;
    margin-block: 5.1282051282vw;
  }
}
.postContent .js-scrollable table {
  margin-block: 0;
}
.postContent blockquote {
  margin-block: 1.6667em;
  padding: 1.6667em 2em;
  border-left: 3px solid var(--mainColor);
  background-color: var(--bgLight);
}
@media only screen and (max-width: 767px) {
  .postContent blockquote {
    margin-block: 5.1282051282vw;
    padding: 5.1282051282vw;
  }
}
.postContent blockquote p {
  padding-block: 0;
  font-weight: 400;
}
.postContent blockquote p + p {
  padding-top: 1em;
}
.postContent figure {
  margin-block: 1.6667em;
}
@media only screen and (max-width: 767px) {
  .postContent figure {
    margin-block: 5.1282051282vw;
  }
}
.postContent figure img {
  padding-block: 0;
}
.postContent figcaption {
  padding-top: 0.6667em;
  font-size: 0.8667em;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .postContent figcaption {
    padding-top: 2.5641025641vw;
    font-size: 3.0769230769vw;
  }
}
.postContent dl {
  margin-block: 1.6667em;
}
@media only screen and (max-width: 767px) {
  .postContent dl {
    margin-block: 5.1282051282vw;
  }
}
.postContent dt {
  padding-top: 1em;
  font-weight: 700 !important;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .postContent dt {
    padding-top: 3.8461538462vw;
  }
}
.postContent dd {
  padding-top: 0.3333em;
  padding-left: 1em;
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .postContent dd {
    padding-top: 1.2820512821vw;
    padding-left: 3.8461538462vw;
  }
}
.postContent hr {
  margin-block: 2.6667em;
  border: none;
  border-top: 1px solid var(--borderColor);
}
@media only screen and (max-width: 767px) {
  .postContent hr {
    margin-block: 7.6923076923vw;
  }
}
.postContent strong {
  font-weight: 700 !important;
}

.postDetailBack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 4em;
}
@media only screen and (max-width: 767px) {
  .postDetailBack {
    margin-top: 12.8205128205vw;
  }
}

/*--------------------------------------------------
 * 記事リスト（下層の一覧ページ用）
 * TOP の .topNewsList とは余白が違うため別クラスにする
 *------------------------------------------------*/
.newsItem {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  padding-block: 2em;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .newsItem {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 1.2820512821vw;
    padding-block: 6.4102564103vw;
  }
}
.newsItem::before, .newsItem:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--bgLight);
}
.newsItem::before {
  top: 0;
}
.newsItem:last-child::after {
  bottom: 0;
}
.newsItem:hover {
  opacity: 0.6;
}

.newsDate {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .newsDate {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .newsDate {
    font-size: 0.875rem;
  }
}
.newsDate {
  font-weight: 600;
  line-height: 1.6;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .newsDate {
    font-size: 3.8461538462vw;
  }
}

.newsTtl {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .newsTtl {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .newsTtl {
    font-size: 0.875rem;
  }
}
.newsTtl {
  font-weight: 500 !important;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .newsTtl {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    font-size: 3.8461538462vw;
  }
}

/*--------------------------------------------------
 * ページネーション（paginate_links の出力をスタイリング）
 * Figma: PC 10550:11437 / SP 10550:11249
 *------------------------------------------------*/
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 4em;
}
@media only screen and (max-width: 767px) {
  .pagination {
    margin-top: 15.3846153846vw;
  }
}
.pagination li > .page-numbers {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border: 1px solid var(--borderColor);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .pagination li > .page-numbers {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .pagination li > .page-numbers {
    font-size: 0.875rem;
  }
}
.pagination li > .page-numbers {
  font-weight: 500 !important;
  line-height: 1.6;
  color: var(--subColor);
  -webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .pagination li > .page-numbers {
    width: 7.6923076923vw;
    height: 7.6923076923vw;
    font-size: 3.8461538462vw;
  }
}
.pagination li > .page-numbers.current {
  border-color: transparent;
  background-color: var(--borderColor);
}
.pagination li > .page-numbers.dots {
  border-color: transparent;
}
.pagination li > .page-numbers:hover:not(.current):not(.dots) {
  background-color: var(--borderColor);
}
.pagination .prev svg,
.pagination .next svg {
  display: block;
  width: 0.6667em;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .pagination .prev svg,
  .pagination .next svg {
    width: 2.5641025641vw;
  }
}
.pagination .next svg {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.pagination ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .pagination ul {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
  }
}

/*==================================================
 * キーフレーム
 *================================================*/
/*==================================================
 * ヘッダー
 * Figma: PC 10550:13245 / SP 10550:12985
 *================================================*/
#header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background-color: var(--bgLight2);
}

.headLayout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  padding: 0.8667em 3em 0.8667em 2.3333em;
}
@media only screen and (max-width: 767px) {
  .headLayout {
    padding: 3.8461538462vw 5.1282051282vw;
  }
}

/*--------------------------------------------------
 * ロゴ
 *------------------------------------------------*/
.headLogo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.7333em;
  -moz-column-gap: 0.7333em;
  column-gap: 0.7333em;
}
@media only screen and (max-width: 767px) {
  .headLogo a {
    -webkit-column-gap: 2.1358974359vw;
    -moz-column-gap: 2.1358974359vw;
    column-gap: 2.1358974359vw;
  }
}

.headLogoMark {
  display: block;
  width: 3.0667em;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .headLogoMark {
    width: 8.6197435897vw;
  }
}

.headLogoText {
  display: block;
  width: 11.8933em;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .headLogoText {
    width: 33.4279487179vw;
  }
}

/*--------------------------------------------------
 * グローバルナビ
 *------------------------------------------------*/
.headNavList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 1.6667em;
  -moz-column-gap: 1.6667em;
  column-gap: 1.6667em;
}
@media only screen and (max-width: 959px) {
  .headNavList {
    display: none;
  }
}

.headNavItem a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.5333em;
  -moz-column-gap: 0.5333em;
  column-gap: 0.5333em;
  color: var(--subColor);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .headNavItem a {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .headNavItem a {
    font-size: 0.875rem;
  }
}
.headNavItem a {
  font-weight: 500 !important;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.headNavItem a::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: var(--mainColor);
}
.headNavItem a:hover {
  opacity: 0.6;
}

/*--------------------------------------------------
 * ハンバーガーボタン（SPのみ）
 * Figma: 40x40 の赤円 + 白線 3本（14x10・線幅1.5px・間隔5px）
 *------------------------------------------------*/
@media print, screen and (min-width: 768px) {
  .menu-btn {
    display: none;
  }
}
@media only screen and (max-width: 959px) {
  .menu-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: inherit;
    width: 2.6667em;
    height: 2.6667em;
    padding: 0;
    border-radius: 50%;
    background-color: var(--mainColor);
  }
}
@media only screen and (max-width: 767px) {
  .menu-btn {
    width: 10.2564102564vw;
    height: 10.2564102564vw;
  }
}

@media only screen and (max-width: 767px) {
  .menu-trigger {
    width: 3.5897435897vw;
    height: 2.5641025641vw;
  }
}
@media only screen and (max-width: 959px) {
  .menu-trigger {
    width: 0.9333em;
    height: 0.6667em;
  }
  .menu-trigger span {
    height: 1.5px;
    border-radius: 1px;
    background-color: #fff;
  }
  .menu-trigger span:nth-of-type(1) {
    top: 0;
  }
  .menu-trigger span:nth-of-type(2) {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .menu-trigger span:nth-of-type(3) {
    top: auto;
    bottom: 0;
  }
  .menu-trigger.active span:nth-of-type(1) {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }
  .menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-trigger.active span:nth-of-type(3) {
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
  }
}

/*--------------------------------------------------
 * ドロワー
 * 開閉の土台は _main.scss（.overRayBox / .menu-trigger）
 * ここは最低限の見た目のみ。TODO: Figma 確定後に作り込む
 *------------------------------------------------*/
@media print, screen and (min-width: 768px) {
  .overRayBox {
    display: none;
  }
}
@media only screen and (max-width: 959px) {
  .overRayBox {
    display: block;
    background-color: var(--mainColor);
    overflow-y: auto;
    padding: 10.5333em 2.6667em 5.3333em;
  }
}
@media only screen and (max-width: 767px) {
  .overRayBox {
    padding: calc(17.9487179487vw + 20.5128205128vw) 10.2564102564vw 20.5128205128vw;
  }
}

@media only screen and (max-width: 959px) {
  .overRayBlock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 2.6667em;
  }
}
@media only screen and (max-width: 767px) {
  .overRayBlock {
    row-gap: 10.2564102564vw;
  }
}

.headerListMenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.0667em;
}
@media only screen and (max-width: 767px) {
  .headerListMenu {
    gap: 4.1025641026vw;
  }
}
.headerListMenu a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.5333em;
  -moz-column-gap: 0.5333em;
  column-gap: 0.5333em;
  color: var(--bgLight2);
  font-size: 1em;
  font-weight: 500 !important;
}
@media only screen and (max-width: 767px) {
  .headerListMenu a {
    -webkit-column-gap: 2.0512820513vw;
    -moz-column-gap: 2.0512820513vw;
    column-gap: 2.0512820513vw;
    font-size: 3.8461538462vw;
  }
}
.headerListMenu a::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .headerListMenu a::before {
    width: 1.5384615385vw;
    height: 1.5384615385vw;
  }
}

.headerListPrivacy a {
  font-size: 0.8667em;
  font-weight: 500 !important;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .headerListPrivacy a {
    font-size: 3.3333333333vw;
  }
}

/*==================================================
 * フッター
 * Figma: PC 10550:13244 / SP 10550:13005
 *================================================*/
#footer {
  position: relative;
  z-index: 1;
  padding-top: 1.3333em;
  background-color: var(--bgLight);
}
@media only screen and (max-width: 767px) {
  #footer {
    padding-top: 5.1282051282vw;
  }
}
.page-karin #footer {
  background-color: #ebe8e0;
}

/*--------------------------------------------------
 * ページトップボタン
 *------------------------------------------------*/
.pageTop {
  position: absolute;
  top: 0;
  right: 8em;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background-color: var(--mainColor);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .pageTop {
    right: 4.8717948718vw;
    width: 10.2564102564vw;
    height: 10.2564102564vw;
  }
}
.pageTop svg {
  display: block;
  width: 0.6em;
  height: auto;
  -webkit-transform: rotate(45deg) scaleY(-1);
  transform: rotate(45deg) scaleY(-1);
}
@media only screen and (max-width: 767px) {
  .pageTop svg {
    width: 2.3076923077vw;
  }
}
.pageTop:hover {
  opacity: 0.8;
}

/*--------------------------------------------------
 * 白い帯（ロゴ・ナビ・SNS）
 *------------------------------------------------*/
.footerMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  row-gap: 1.6em;
  padding: 1.6em 8em;
}
@media only screen and (max-width: 1200px) {
  .footerMain {
    padding-inline: 2.6667em;
  }
}
.footerMain {
  border-top: 1px solid var(--bgLight);
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .footerMain {
    padding: 5.1282051282vw;
    border-top: none;
  }
}

.footerLogo {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.footerLogo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.5333em;
  -moz-column-gap: 0.5333em;
  column-gap: 0.5333em;
}
@media only screen and (max-width: 767px) {
  .footerLogo a {
    -webkit-column-gap: 1.7948717949vw;
    -moz-column-gap: 1.7948717949vw;
    column-gap: 1.7948717949vw;
  }
}

.footerLogoMark {
  display: block;
  width: 2.1333em;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .footerLogoMark {
    width: 6.8376923077vw;
  }
}

.footerLogoText {
  display: block;
  width: 13.2421em;
  height: auto;
}
@media only screen and (max-width: 767px) {
  .footerLogoText {
    width: 36.3628205128vw;
  }
}

.footerRight {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}
@media only screen and (max-width: 767px) {
  .footerRight {
    display: none;
  }
}

.footerNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.9333em;
  -moz-column-gap: 0.9333em;
  column-gap: 0.9333em;
}

.footerNavItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.9333em;
  -moz-column-gap: 0.9333em;
  column-gap: 0.9333em;
}
.footerNavItem a {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .footerNavItem a {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .footerNavItem a {
    font-size: 0.875rem;
  }
}
.footerNavItem a {
  font-weight: 500 !important;
  white-space: nowrap;
  color: var(--subColor);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.footerNavItem a:hover {
  opacity: 0.6;
}
.footerNavItem:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 0.8em;
  background-color: var(--subColor);
}

.footerSns {
  display: block;
  width: 1.4667em;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
.footerSns svg {
  display: block;
  width: 100%;
  height: auto;
}
.footerSns:hover {
  opacity: 0.6;
}

/*--------------------------------------------------
 * 赤い帯（コピーライト）
 *------------------------------------------------*/
.footerCopy {
  padding-block: 1.6667em;
  background-color: var(--mainColor);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .footerCopy {
    padding-block: 2.5641025641vw;
  }
}
.footerCopy p {
  font-size: 0.8667em;
  font-weight: 400;
  line-height: normal;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .footerCopy p {
    font-size: 3.3333333333vw;
  }
}

/* ==========================================================================
   手づくり弁当「花りん」（page-hanarin.php）
   数値は Figma PC 10550:11622 / SP 10644:8306 の実データ
   ========================================================================== */
.hanarinLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinLabel {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinLabel {
    font-size: 0.875rem;
  }
}
.hanarinLabel {
  line-height: 1.5;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .hanarinLabel {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}
.hanarinLabel::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
}
.hanarinLabel.hanarinLabelWhite {
  color: var(--bgLight2);
}

.hanarinLabelEn {
  font-family: var(--fontEn);
  font-weight: 600;
  line-height: 1.5 !important;
}

.hanarinLabelJa {
  font-weight: 700 !important;
  line-height: 1.5 !important;
}

/* --- 花りんの想い --------------------------------------------------------- */
.hanarinAbout {
  position: relative;
  z-index: 0;
  padding-block: calc(var(--karinFvOver) + 6.6667em) 15em;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .hanarinAbout {
    padding-block: 38.4615384615vw 22.5641025641vw;
  }
}

.hanarinAboutInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-column-gap: 5.3333em;
  -moz-column-gap: 5.3333em;
  column-gap: 5.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinAboutInner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 5.1282051282vw;
  }
}

.hanarinAboutBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2.6667em;
  width: 47.5%;
}
@media only screen and (max-width: 767px) {
  .hanarinAboutBody {
    row-gap: 5.1282051282vw;
    width: 100%;
  }
}

.hanarinAboutHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinAboutHead {
    row-gap: 2.5641025641vw;
  }
}

.hanarinAboutTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinAboutTtl {
    font-size: 7.4358974359vw;
  }
}

.hanarinAboutText {
  font-size: 1.2em;
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinAboutText {
    font-size: 4.6153846154vw;
  }
}
.hanarinAboutText p {
  font-weight: 500;
}

.hanarinAboutImg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 45.833%;
  aspect-ratio: 550/380;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .hanarinAboutImg {
    width: 100%;
    aspect-ratio: 350/242;
  }
}
.hanarinAboutImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- こだわりの人気弁当 5選 ------------------------------------------------ */
.hanarinPopular {
  position: relative;
  z-index: 1;
  margin-top: -1.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinPopular {
    margin-top: 13.3333333333vw;
  }
}

.hanarinPopularBg {
  position: absolute;
  top: -6.6667em;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 22.6667em;
  background-color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .hanarinPopularBg {
    top: -15.3846153846vw;
    height: 87.1794871795vw;
  }
}

.hanarinPopularHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 2em;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularHead {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    row-gap: 7.6923076923vw;
    margin-bottom: 7.6923076923vw;
  }
}

.hanarinPopularTtlBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularTtlBlock {
    row-gap: 2.5641025641vw;
  }
}

.hanarinPopularTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .hanarinPopularTtl {
    font-size: 7.4358974359vw;
  }
}

.hanarinPopularNav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularNav {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-column-gap: 5.1282051282vw;
    -moz-column-gap: 5.1282051282vw;
    column-gap: 5.1282051282vw;
  }
}

.hanarinPopularBtn {
  width: 3.2em;
  height: 3.2em;
  border: none;
  border-radius: 50%;
  background-color: var(--bgLight2);
  cursor: pointer;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularBtn {
    width: 12.3076923077vw;
    height: 12.3076923077vw;
  }
}
.hanarinPopularBtn:hover {
  opacity: 0.7;
}
.hanarinPopularBtn.isPrev svg {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.hanarinPopularBtn svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hanarinPopularBtn svg path {
  fill: var(--accentColor);
}

.hanarinPopularTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 4em;
  -moz-column-gap: 4em;
  column-gap: 4em;
  padding-inline: max(0.9375em, (100% - 80em) / 2);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularTrack {
    -webkit-column-gap: 5.1282051282vw;
    -moz-column-gap: 5.1282051282vw;
    column-gap: 5.1282051282vw;
    padding-inline: 5.1282051282vw;
  }
}
.hanarinPopularTrack::-webkit-scrollbar {
  display: none;
}

.hanarinPopularItem {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.8em;
  width: 25.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularItem {
    row-gap: 3.0769230769vw;
    width: 89.7435897436vw;
  }
}

.hanarinPopularImg {
  width: 100%;
  aspect-ratio: 380/235;
  border-radius: 8px;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularImg {
    aspect-ratio: 380/258;
  }
}
.hanarinPopularImg {
  overflow: hidden;
}
.hanarinPopularImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
  object-fit: contain;
}

.hanarinPopularBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.8em;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinPopularBody {
    row-gap: 3.0769230769vw;
  }
}

.hanarinPopularName {
  font-size: 1.3333em;
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularName {
    font-size: 5.1282051282vw;
  }
}

.hanarinPopularPrice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
  padding-top: 0.8em;
  border-top: 1px solid rgba(0, 46, 78, 0.2);
}
@media only screen and (max-width: 767px) {
  .hanarinPopularPrice {
    -webkit-column-gap: 1.2820512821vw;
    -moz-column-gap: 1.2820512821vw;
    column-gap: 1.2820512821vw;
    padding-top: 3.0769230769vw;
  }
}

.hanarinPopularNum {
  font-family: var(--fontEn);
  font-size: 1.3333em;
  font-weight: 500;
  line-height: 1.3;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularNum {
    font-size: 5.1282051282vw;
  }
}

.hanarinPopularUnit {
  font-size: 0.8667em;
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularUnit {
    font-size: 3.3333333333vw;
  }
}

.hanarinPopularText {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinPopularText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinPopularText {
    font-size: 0.875rem;
  }
}
.hanarinPopularText {
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .hanarinPopularText {
    font-size: 3.8461538462vw;
  }
}

/* --- お弁当メニュー -------------------------------------------------------- */
.hanarinMenu {
  padding-top: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenu {
    padding-top: 20.5128205128vw;
  }
}

.hanarinMenuHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
  margin-bottom: 2em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuHead {
    row-gap: 2.5641025641vw;
    margin-bottom: 7.6923076923vw;
  }
}

.hanarinMenuTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinMenuTtl {
    font-size: 7.4358974359vw;
  }
}

.hanarinMenuCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 4em;
  padding: 4em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .hanarinMenuCard {
    row-gap: 10.2564102564vw;
    padding: 10.2564102564vw 5.1282051282vw;
  }
}

.hanarinMenuGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuGroup {
    row-gap: 5.1282051282vw;
  }
}

.hanarinMenuGroupTtl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 16px;
  -moz-column-gap: 16px;
  column-gap: 16px;
  font-size: 1.5333em;
  font-weight: 700 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinMenuGroupTtl {
    -webkit-column-gap: 4.1025641026vw;
    -moz-column-gap: 4.1025641026vw;
    column-gap: 4.1025641026vw;
    font-size: 4.6153846154vw;
    line-height: 1.6;
  }
}
.hanarinMenuGroupTtl::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 4px;
  height: 1.2174em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuGroupTtl::before {
    height: 5.8974358974vw;
  }
}
.hanarinMenuGroupTtl::before {
  border-radius: 50px;
  background-color: var(--accentColor);
}

.hanarinMenuList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.2em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuList {
    row-gap: 4.6153846154vw;
  }
}

.hanarinMenuRow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
}
.hanarinMenuRow.isNoLarge .hanarinMenuPrice {
  padding-right: 20.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuRow.isNoLarge .hanarinMenuPrice {
    padding-right: 0;
  }
}
.hanarinMenuRow {
  padding-bottom: 1.2em;
  border-bottom: 1px solid rgba(0, 46, 78, 0.15);
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinMenuRow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 2.0512820513vw;
    padding-bottom: 4.6153846154vw;
  }
}
.hanarinMenuRow:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.hanarinMenuName {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinMenuName {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinMenuName {
    font-size: 0.875rem;
  }
}
.hanarinMenuName {
  font-weight: 500 !important;
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuName {
    font-size: 3.8461538462vw;
  }
}

.hanarinMenuPrice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  white-space: nowrap;
  height: 1.6em;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinMenuPrice {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinMenuPrice {
    font-size: 0.875rem;
  }
}
.hanarinMenuPrice {
  font-weight: 500 !important;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuPrice {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: auto;
    -webkit-column-gap: 1.2820512821vw;
    -moz-column-gap: 1.2820512821vw;
    column-gap: 1.2820512821vw;
    row-gap: 0;
    line-height: 5.8974358974vw;
    font-size: 3.8461538462vw;
  }
  .hanarinMenuPrice span {
    line-height: 5.8974358974vw;
  }
}

.hanarinMenuSet {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuSet {
    -webkit-column-gap: 1.2820512821vw;
    -moz-column-gap: 1.2820512821vw;
    column-gap: 1.2820512821vw;
  }
}

.hanarinMenuNum {
  font-family: var(--fontEn);
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.05;
  margin-right: 0.1111em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuNum {
    font-size: 4.6153846154vw;
  }
}

.hanarinMenuLarge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuLarge {
    -webkit-column-gap: 1.2820512821vw;
    -moz-column-gap: 1.2820512821vw;
    column-gap: 1.2820512821vw;
  }
}

.hanarinMenuNote {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinMenuNote {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinMenuNote {
    font-size: 0.875rem;
  }
}
.hanarinMenuNote {
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinMenuNote {
    font-size: 3.8461538462vw;
    line-height: 1.6;
  }
}
.hanarinMenuNote p {
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .hanarinMenuNote p {
    line-height: 1.6;
  }
}
.hanarinMenuNote strong {
  font-weight: 700 !important;
}

/* --- オーダーメニュー（Figma 10774:1870） ---------------------------------- */
.hanarinOrder {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2.6667em;
  margin-top: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinOrder {
    row-gap: 10.2564102564vw;
    margin-top: 15.3846153846vw;
  }
}

@media only screen and (max-width: 767px) {
  .hanarinOrder > .hanarinMenuGroupTtl,
  .hanarinSozai > .hanarinMenuGroupTtl {
    font-size: 5.8974358974vw;
    line-height: 1.8;
  }
  .hanarinOrder > .hanarinMenuGroupTtl::before,
  .hanarinSozai > .hanarinMenuGroupTtl::before {
    height: 7.1794871795vw;
  }
}

.hanarinOrderList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-column-gap: 4em;
  -moz-column-gap: 4em;
  column-gap: 4em;
}
@media only screen and (max-width: 767px) {
  .hanarinOrderList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 10.2564102564vw;
  }
}

.hanarinOrderItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .hanarinOrderItem {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    row-gap: 5.1282051282vw;
  }
}

.hanarinOrderImg {
  width: 100%;
  aspect-ratio: 570/380;
  border-radius: 8px;
}
@media only screen and (max-width: 767px) {
  .hanarinOrderImg {
    aspect-ratio: 350/243;
  }
}
.hanarinOrderImg {
  overflow: hidden;
}
.hanarinOrderImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}
.hanarinOrderImg img[src*=".png"] {
  -o-object-fit: contain;
  object-fit: contain;
}

.hanarinOrderBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.8em;
}
@media only screen and (max-width: 767px) {
  .hanarinOrderBody {
    row-gap: 3.0769230769vw;
  }
}

.hanarinOrderName {
  font-size: 1.5333em;
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinOrderName {
    font-size: 5.1282051282vw;
  }
}

.hanarinOrderPriceBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0;
}

.hanarinOrderPrice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
  padding-top: 0.8em;
  border-top: 1.5px solid rgba(0, 46, 78, 0.2);
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinOrderPrice {
    -webkit-column-gap: 1.2820512821vw;
    -moz-column-gap: 1.2820512821vw;
    column-gap: 1.2820512821vw;
    padding-top: 3.0769230769vw;
  }
}
.hanarinOrderPriceBlock .hanarinOrderPrice {
  padding-top: 0;
  border-top: none;
}

.hanarinOrderPriceBlock {
  padding-top: 0.8em;
  border-top: 1.5px solid rgba(0, 46, 78, 0.2);
}
@media only screen and (max-width: 767px) {
  .hanarinOrderPriceBlock {
    padding-top: 3.0769230769vw;
  }
}

.hanarinOrderNum {
  font-family: var(--fontEn);
  font-size: 1.7333em;
  font-weight: 500;
  line-height: 1.3;
}
@media only screen and (max-width: 767px) {
  .hanarinOrderNum {
    font-size: 5.8974358974vw;
  }
}

.hanarinOrderUnit,
.hanarinOrderSlash {
  font-size: 1.2em;
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .hanarinOrderUnit,
  .hanarinOrderSlash {
    font-size: 3.8461538462vw;
  }
}

.hanarinOrderNote {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinOrderNote {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinOrderNote {
    font-size: 0.875rem;
  }
}
.hanarinOrderNote {
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinOrderNote {
    font-size: 3.3333333333vw;
  }
}

.hanarinOrderText {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinOrderText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinOrderText {
    font-size: 0.875rem;
  }
}
.hanarinOrderText {
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinOrderText {
    font-size: 3.8461538462vw;
  }
}
.hanarinOrderText p {
  font-weight: 400;
  line-height: 1.8;
}

/* --- 手作りお惣菜・一品料理（Figma 10774:1907） ---------------------------- */
.hanarinSozai {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2.6667em;
  margin-top: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinSozai {
    row-gap: 10.2564102564vw;
    margin-top: 15.3846153846vw;
  }
}

.hanarinSozaiLayout {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
  row-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiLayout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 10.2564102564vw;
  }
}

.hanarinSozaiGrid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.6667em 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6667em;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 25.0667em;
  flex: 0 1 25.0667em;
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiGrid {
    gap: 2.5641025641vw;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}

.hanarinSozaiThumb {
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
}
.hanarinSozaiThumb img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.hanarinSozaiBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 28.6667em;
  flex: 1 1 28.6667em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiBody {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    row-gap: 5.1282051282vw;
  }
}

.hanarinSozaiText {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinSozaiText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiText {
    font-size: 0.875rem;
  }
}
.hanarinSozaiText {
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiText {
    font-size: 3.8461538462vw;
  }
}
.hanarinSozaiText p {
  font-weight: 400;
  line-height: 1.8;
}

.hanarinSozaiPhotos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiPhotos {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
  }
}

.hanarinSozaiPhoto {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 210/167;
  border-radius: 8px;
  overflow: hidden;
}
.hanarinSozaiPhoto img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.hanarinSozaiCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 22.6667em;
  flex: 0 1 22.6667em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  row-gap: 0.6667em;
  height: 25.0667em;
  padding: 1.3333em;
  border-radius: 9px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiCard {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    height: auto;
    row-gap: 2.5641025641vw;
    padding: 5.1282051282vw;
  }
}

.hanarinSozaiBadge {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  padding-block: 0.3333em;
  border-radius: 4px;
  background-color: var(--accentColor);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinSozaiBadge {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiBadge {
    font-size: 0.875rem;
  }
}
.hanarinSozaiBadge {
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiBadge {
    padding-block: 1.2820512821vw;
    font-size: 3.8461538462vw;
  }
}

.hanarinSozaiCardHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.5333em;
  -moz-column-gap: 0.5333em;
  column-gap: 0.5333em;
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiCardHead {
    -webkit-column-gap: 2.0512820513vw;
    -moz-column-gap: 2.0512820513vw;
    column-gap: 2.0512820513vw;
  }
}

.hanarinSozaiCardTtl {
  font-size: 1.5333em;
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiCardTtl {
    font-size: 5.8974358974vw;
  }
}

.hanarinSozaiCardTag {
  padding: 0.4em 0.8em;
  border-radius: 100px;
  background-color: #ebe8e0;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinSozaiCardTag {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiCardTag {
    font-size: 0.875rem;
  }
}
.hanarinSozaiCardTag {
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiCardTag {
    padding: 1.5384615385vw 3.0769230769vw;
    font-size: 3.8461538462vw;
  }
}

.hanarinSozaiCardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.hanarinSozaiCardImg {
  width: 100%;
  aspect-ratio: 300/220;
  border-radius: 8px;
  overflow: hidden;
}
.hanarinSozaiCardImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.hanarinSozaiCardNote {
  font-size: 0.8667em;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinSozaiCardNote {
    font-size: 3.3333333333vw;
  }
}

/* --- 特製花りん弁当 / 行楽弁当 --------------------------------------------- */
.hanarinTokusei {
  padding-block: 6.6667em 0;
}
@media only screen and (max-width: 767px) {
  .hanarinTokusei {
    padding-top: 20.5128205128vw;
  }
}

.hanarinTokuseiHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2em;
  margin-bottom: 4em;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiHead {
    row-gap: 7.6923076923vw;
    margin-bottom: 10.2564102564vw;
  }
}

.hanarinTokuseiTtlBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiTtlBlock {
    row-gap: 2.5641025641vw;
  }
}

.hanarinTokuseiTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiTtl {
    font-size: 7.4358974359vw;
  }
}

.hanarinTokuseiLead {
  font-size: 1.2em;
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiLead {
    font-size: 4.6153846154vw;
  }
}

.hanarinTokuseiList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiList {
    row-gap: 5.1282051282vw;
  }
}

.hanarinTokuseiItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 6em;
  -moz-column-gap: 6em;
  column-gap: 6em;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiItem {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 3.0769230769vw;
  }
}
.hanarinTokuseiItem.isReverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiItem.isReverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}
.hanarinTokuseiItem:last-child {
  margin-top: 2.6667em;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiItem:last-child {
    margin-top: 5.1282051282vw;
  }
}

.hanarinTokuseiImg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 48.333%;
  aspect-ratio: 580/420;
  border-radius: 8px;
  overflow: hidden;
}
.hanarinTokuseiImg img[src*=".png"] {
  -o-object-fit: contain;
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiImg {
    width: 100%;
    aspect-ratio: 350/243;
  }
}
.hanarinTokuseiImg.isSquare {
  width: 31.667%;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiImg.isSquare {
    width: 100%;
    aspect-ratio: 350/243;
  }
}
.hanarinTokuseiImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.hanarinTokuseiBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.8em;
  min-width: 0;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiBody {
    row-gap: 3.0769230769vw;
    width: 100%;
  }
}

.hanarinTokuseiName {
  font-size: 1.5333em;
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiName {
    font-size: 5.8974358974vw;
  }
}
.hanarinTokuseiItem:first-child .hanarinTokuseiName {
  font-size: 1.7333em;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiItem:first-child .hanarinTokuseiName {
    font-size: 5.8974358974vw;
  }
}

.hanarinTokuseiPrice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
  padding-top: 0.8em;
  border-top: 1.5px solid rgba(0, 46, 78, 0.2);
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiPrice {
    -webkit-column-gap: 1.2820512821vw;
    -moz-column-gap: 1.2820512821vw;
    column-gap: 1.2820512821vw;
    padding-top: 3.0769230769vw;
  }
}

.hanarinTokuseiNum {
  font-family: var(--fontEn);
  font-size: 2.1333em;
  font-weight: 500;
  line-height: 1.3;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiNum {
    font-size: 5.8974358974vw;
  }
}
.hanarinTokuseiNum.isSmall {
  font-size: 1.7333em;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiNum.isSmall {
    font-size: 6.6666666667vw;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiNum.isSmall + .hanarinTokuseiUnit {
    font-size: 4.6153846154vw;
  }
}

.hanarinTokuseiUnit {
  font-size: 1.2em;
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiUnit {
    font-size: 3.3333333333vw;
  }
}

.hanarinTokuseiText {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinTokuseiText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiText {
    font-size: 0.875rem;
  }
}
.hanarinTokuseiText {
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .hanarinTokuseiText {
    font-size: 3.8461538462vw;
  }
}
.hanarinTokuseiText p {
  font-weight: 400;
}

/* --- 店舗情報 ------------------------------------------------------------- */
.hanarinShop {
  margin-top: 6.6667em;
  padding-block: 6.6667em;
  background-color: #ebe8e0;
}
@media only screen and (max-width: 767px) {
  .hanarinShop {
    margin-top: 20.5128205128vw;
    padding-block: 15.3846153846vw;
  }
}

.hanarinShopHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
  margin-bottom: 2em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopHead {
    row-gap: 2.5641025641vw;
    margin-bottom: 7.6923076923vw;
  }
}

.hanarinShopTtl {
  font-size: 2.1333em;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .hanarinShopTtl {
    font-size: 7.4358974359vw;
  }
}

.hanarinShopCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 2.6667em;
  -moz-column-gap: 2.6667em;
  column-gap: 2.6667em;
  row-gap: 2.6667em;
  padding: 4em;
  background-color: var(--bgLight2);
  border-radius: 8px;
}
@media only screen and (max-width: 767px) {
  .hanarinShopCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 10.2564102564vw;
    padding: 10.2564102564vw 5.1282051282vw;
  }
}

.hanarinShopTable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 31.9333em;
}
@media only screen and (max-width: 1200px) {
  .hanarinShopTable {
    width: 100%;
  }
}
.hanarinShopTable {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinShopTable {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinShopTable {
    font-size: 0.875rem;
  }
}
.hanarinShopTable {
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .hanarinShopTable {
    row-gap: 7.6923076923vw;
    width: 100%;
    font-size: 3.8461538462vw;
  }
}

.hanarinShopRow {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopRow {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    row-gap: 2.5641025641vw;
  }
}
.hanarinShopRow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: -webkit-linear-gradient(left, var(--accentColor) 0 68px, #f5f3ef 68px);
  background: linear-gradient(to right, var(--accentColor) 0 68px, #f5f3ef 68px);
}
@media only screen and (max-width: 767px) {
  .hanarinShopRow::before {
    background: var(--accentColor);
  }
}
.hanarinShopRow:first-child::before {
  display: none;
}
@media only screen and (max-width: 767px) {
  .hanarinShopRow:first-child::before {
    display: block;
  }
}
.hanarinShopRow + .hanarinShopRow {
  padding-top: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopRow + .hanarinShopRow {
    padding-top: 2.5641025641vw;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinShopRow:first-child {
    padding-top: 2.5641025641vw;
  }
}
.hanarinShopRow dt {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 4em;
  font-weight: 700 !important;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .hanarinShopRow dt {
    width: 100%;
    padding-bottom: 2.5641025641vw;
    border-bottom: 1px solid #f5f3ef;
  }
}
.hanarinShopRow dd {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  font-weight: 400;
  color: var(--subColor);
}
.hanarinShopRow dt,
.hanarinShopRow dd,
.hanarinShopRow dd span {
  line-height: 1.6;
}

.hanarinShopAddress {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopAddress {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
  }
}

.hanarinShopAddressNote {
  display: block;
  color: var(--subColor);
}

.hanarinShopMapLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.3333em;
  -moz-column-gap: 0.3333em;
  column-gap: 0.3333em;
  font-weight: 500 !important;
  color: var(--accentColor);
  text-decoration: underline;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .hanarinShopMapLink {
    -webkit-column-gap: 1.2820512821vw;
    -moz-column-gap: 1.2820512821vw;
    column-gap: 1.2820512821vw;
  }
}
.hanarinShopMapLink:hover {
  opacity: 0.7;
}
.hanarinShopMapLink img {
  width: 0.7333em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopMapLink img {
    width: 2.8205128205vw;
  }
}

.hanarinShopPhotos {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 35.3333em;
  height: 21.6em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopPhotos {
    width: 100%;
    height: 44.2820512821vw;
  }
}

.hanarinShopPhoto01,
.hanarinShopPhoto02 {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
}
.hanarinShopPhoto01 img,
.hanarinShopPhoto02 img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.hanarinShopPhoto01 {
  top: 0;
  left: 0;
  width: 21.8667em;
  height: 17.6em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopPhoto01 {
    width: 49.2820512821vw;
    height: 39.5128205128vw;
  }
}

.hanarinShopPhoto02 {
  top: 6.5333em;
  left: 20.2em;
  width: 15.1333em;
  height: 15.0667em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopPhoto02 {
    top: 10.4358974359vw;
    left: auto;
    right: 0;
    width: 34.2820512821vw;
    height: 33.8461538462vw;
  }
}

.hanarinShopMap {
  margin-top: 0.6667em;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .hanarinShopMap {
    margin-top: 2.5641025641vw;
  }
}
.hanarinShopMap iframe {
  display: block;
  width: 100%;
  height: 24.2667em;
  border: none;
}
@media only screen and (max-width: 767px) {
  .hanarinShopMap iframe {
    height: 92.3076923077vw;
  }
}

.hanarinShopCta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-column-gap: 5.3333em;
  -moz-column-gap: 5.3333em;
  column-gap: 5.3333em;
  row-gap: 2.6667em;
  margin-top: 0.6667em;
  padding: 4.6667em 6.6667em;
  border-radius: 8px;
  background-color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .hanarinShopCta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 10.2564102564vw;
    margin-top: 2.5641025641vw;
    padding: 10.2564102564vw 5.1282051282vw;
  }
}

.hanarinShopCtaBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 24em;
  flex: 1 1 24em;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2em;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .hanarinShopCtaBody {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    row-gap: 7.6923076923vw;
    width: 100%;
  }
}

.hanarinShopCtaTtl {
  font-size: 1.7333em;
  font-weight: 700 !important;
  line-height: 1.2;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .hanarinShopCtaTtl {
    font-size: 6.6666666667vw;
  }
}

.hanarinShopCtaText {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .hanarinShopCtaText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinShopCtaText {
    font-size: 0.875rem;
  }
}
.hanarinShopCtaText {
  font-weight: 500 !important;
  line-height: 1.5;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .hanarinShopCtaText {
    font-size: 3.8461538462vw;
  }
}
.hanarinShopCtaText p {
  font-weight: 500;
  line-height: 1.5;
}

.hanarinShopCtaBtns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 2em;
}
@media only screen and (max-width: 767px) {
  .hanarinShopCtaBtns {
    row-gap: 3.8461538462vw;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .hanarinShopCtaBtns .btn02 {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    padding: 2.5641025641vw 2.5641025641vw 2.5641025641vw 7.6923076923vw;
  }
  .hanarinShopCtaBtns .btn02 svg {
    width: 7.6923076923vw;
    height: 7.6923076923vw;
  }
}

/* 白いピル型ボタン（Figma: Button_02_pc） */
.btn02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
  width: 32.6667em;
  padding: 0.6667em 0.6667em 0.6667em 2em;
  border-radius: 100px;
  background-color: var(--bgLight2);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .btn02 {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .btn02 {
    font-size: 0.875rem;
  }
}
.btn02 {
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--subColor);
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .btn02 {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-column-gap: 2.0512820513vw;
    -moz-column-gap: 2.0512820513vw;
    column-gap: 2.0512820513vw;
    width: auto;
    max-width: 100%;
    padding: 2.5641025641vw 2.5641025641vw 2.5641025641vw 7.6923076923vw;
    font-size: 3.8461538462vw;
  }
}
.btn02 > span {
  white-space: nowrap;
  line-height: 1.5;
}
.btn02 svg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 2.6667em;
  height: 2.6667em;
}
@media only screen and (max-width: 767px) {
  .btn02 svg {
    width: 10.2564102564vw;
    height: 10.2564102564vw;
  }
}
.btn02 svg rect {
  fill: var(--subColor);
}
.btn02 svg path {
  fill: var(--bgLight2);
}
.btn02:hover {
  background-color: var(--subColor);
  color: var(--bgLight2);
}
.btn02:hover svg rect {
  fill: var(--bgLight2);
}
.btn02:hover svg path {
  fill: var(--subColor);
}

/*==================================================
 * トップページ
 *================================================*/
/*==================================================
 * メインビジュアル（ヘッダーより上）
 * Figma: PC 10550:13037 / SP 10550:13037 と同構造の 10550:12784
 *================================================*/
.topMv {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 900px;
  overflow: hidden;
}
@media only screen and (max-width: 959px) {
  .topMv {
    height: calc(100vh - 17.9487179487vw);
    height: calc(100dvh - 17.9487179487vw);
  }
}
@media only screen and (min-width: 960px) {
  .topMv {
    height: calc(100vh - 5.2em);
    height: calc(100dvh - 5.2em);
  }
}

.topMvMedia {
  width: 100%;
  height: 100%;
}
.topMvMedia img,
.topMvMedia video {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topMvMedia img,
    .topMvMedia video {
      -webkit-animation: topMvZoom linear both;
      animation: topMvZoom linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 900px;
    }
  }
  @media only screen and (prefers-reduced-motion: no-preference) and (max-width: 959px) {
    .topMvMedia img,
    .topMvMedia video {
      animation-range: 0 calc(100dvh - 17.9487179487vw);
    }
  }
  @media only screen and (prefers-reduced-motion: no-preference) and (min-width: 960px) {
    .topMvMedia img,
    .topMvMedia video {
      animation-range: 0 calc(100dvh - 5.2em);
    }
  }
}
.topMvMedia::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #d2d2d2;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@-webkit-keyframes topMvZoom {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}

@keyframes topMvZoom {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
/*--------------------------------------------------
 * スクロール誘導
 *------------------------------------------------*/
.topMvScroll {
  position: absolute;
  left: 50%;
  bottom: 2.6527em;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .topMvScroll {
    bottom: 9.1769230769vw;
  }
}

.topMvScrollText {
  font-family: var(--fontEn);
  font-size: 1em;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .topMvScrollText {
    font-size: 3.8461538462vw;
  }
}

.topMvScrollArrow {
  width: 1.4142em;
  height: 1.4142em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .topMvScrollArrow {
    width: 5.4392307692vw;
    height: 5.4392307692vw;
  }
}
.topMvScrollArrow img {
  display: block;
  width: 1em;
  height: auto;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media only screen and (max-width: 767px) {
  .topMvScrollArrow img {
    width: 3.8461538462vw;
  }
}

/*==================================================
 * 会社紹介
 * Figma: PC 10550:13053 ほか / SP 10550:12791 ほか
 *================================================*/
.topAbout {
  padding-block: 6.6667em;
}
@media only screen and (max-width: 767px) {
  .topAbout {
    padding-block: 7.6923076923vw 15.3846153846vw;
  }
}

/*--------------------------------------------------
 * メイン画像＋キャッチ（PCは画像の上に重ねる／SPは画像の下）
 *------------------------------------------------*/
.topAboutVisual {
  position: relative;
}

.topAboutMainImg {
  width: 100%;
  aspect-ratio: 1200/460;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topAboutMainImg {
    aspect-ratio: 350/360;
  }
}
.topAboutMainImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.topAboutCatch {
  position: absolute;
  top: 3.8667em;
  left: 3em;
}
@media only screen and (max-width: 767px) {
  .topAboutCatch {
    position: static;
    margin-top: 7.6923076923vw;
  }
}

.topAboutTtl span {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background-color: var(--bgLight2);
  padding-left: 0.3125em;
  font-size: 2rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topAboutTtl span {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .topAboutTtl span {
    font-size: 1.3125rem;
  }
}
.topAboutTtl span {
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topAboutTtl span {
    font-size: 6.6666666667vw;
    padding-left: 2.5641025641vw;
  }
}
.topAboutTtl span + span {
  margin-top: 0.25em;
}
@media only screen and (max-width: 767px) {
  .topAboutTtl span + span {
    margin-top: 1.2820512821vw;
  }
}

.topAboutSub {
  margin-top: 0.4444em;
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topAboutSub {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .topAboutSub {
    font-size: 0.875rem;
  }
}
.topAboutSub {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topAboutSub {
    margin-top: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}
.topAboutSub > span {
  display: inline;
  background-color: var(--bgLight2);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.2778em 0.2778em;
}
@media only screen and (max-width: 767px) {
  .topAboutSub > span {
    padding: 0 1.2820512821vw 1.2820512821vw;
  }
}

.topAboutSubNum {
  font-size: 1.2778em;
  color: var(--mainColor);
  font-weight: 700 !important;
}
@media only screen and (max-width: 767px) {
  .topAboutSubNum {
    font-size: 1.3333em;
  }
}

.topAboutSubUnit {
  color: var(--mainColor);
  font-weight: 700 !important;
}

/*--------------------------------------------------
 * リード文＋写真2枚
 *------------------------------------------------*/
.topAboutBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 4em;
  padding-inline: 8.333%;
}
@media only screen and (max-width: 767px) {
  .topAboutBody {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 10.2564102564vw;
    padding-inline: 0;
  }
}

.topAboutLead {
  width: 58%;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topAboutLead {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topAboutLead {
    font-size: 0.875rem;
  }
}
.topAboutLead {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topAboutLead {
    width: 100%;
    font-size: 3.8461538462vw;
  }
}
.topAboutLead p + p {
  margin-top: 1.8em;
}

.topAboutPhotos {
  position: relative;
  width: 34%;
  aspect-ratio: 340/336;
}
@media only screen and (max-width: 767px) {
  .topAboutPhotos {
    width: 100%;
    aspect-ratio: 350/345.88;
    margin-top: 15.3846153846vw;
  }
}
.topAboutPhotos .topAboutPhoto {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
}
.topAboutPhotos .topAboutPhoto img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.topAboutPhoto01 {
  top: 0;
  left: 0;
  width: 67.647%;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .topAboutPhoto01 {
    width: 67.646%;
  }
}

.topAboutPhoto02 {
  top: 43.452%;
  left: 44.118%;
  width: 55.882%;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .topAboutPhoto02 {
    top: 43.451%;
    left: 44.117%;
    width: 55.883%;
  }
}

/*==================================================
 * 最新情報
 * Figma: PC 10550:13081 / SP 10550:12803
 *================================================*/
.topNews {
  padding-bottom: 8em;
}
@media only screen and (max-width: 767px) {
  .topNews {
    padding-bottom: 20.5128205128vw;
  }
}

.topNewsInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-column-gap: 6.3333em;
  -moz-column-gap: 6.3333em;
  column-gap: 6.3333em;
  padding: 6.6667em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .topNewsInner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 7.6923076923vw;
    padding: 15.3846153846vw 5.1282051282vw;
  }
}

.topNewsHead {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 2em;
}
@media only screen and (max-width: 767px) {
  .topNewsHead {
    row-gap: 5.1282051282vw;
  }
}

.topNewsTtlBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topNewsTtlBlock {
    row-gap: 2.5641025641vw;
  }
}

/*--------------------------------------------------
 * 記事リスト（上下に区切り線）
 *------------------------------------------------*/
.topNewsList {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
}
@media only screen and (max-width: 767px) {
  .topNewsList {
    width: 100%;
  }
}

.topNewsItem {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  padding-block: 2em;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media only screen and (max-width: 767px) {
  .topNewsItem {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
    padding-block: 5.1282051282vw;
  }
}
.topNewsItem::before, .topNewsItem:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--bgLight);
}
.topNewsItem::before {
  top: 0;
}
.topNewsItem:last-child::after {
  bottom: 0;
}
.topNewsItem:hover {
  opacity: 0.6;
}

.topNewsDate {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topNewsDate {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topNewsDate {
    font-size: 0.875rem;
  }
}
.topNewsDate {
  font-weight: 600;
  line-height: 1.6;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .topNewsDate {
    font-size: 3.8461538462vw;
  }
}

.topNewsTtl {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topNewsTtl {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topNewsTtl {
    font-size: 0.875rem;
  }
}
.topNewsTtl {
  font-weight: 500 !important;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topNewsTtl {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    font-size: 3.8461538462vw;
  }
}

/*==================================================
 * 私たちができること（Service）
 * Figma: PC 10550:13141 / SP 10550:12821
 *================================================*/
.topService {
  padding-bottom: 9.3333em;
}
@media only screen and (max-width: 767px) {
  .topService {
    padding-bottom: 20.5128205128vw;
  }
}

/*--------------------------------------------------
 * 見出し（大きな英字に日本語を重ねる）
 *------------------------------------------------*/
.topServiceHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 1.3333em;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .topServiceHead {
    row-gap: 5.1282051282vw;
  }
}

.topServiceTtlWrap {
  display: -ms-inline-grid;
  display: inline-grid;
  place-items: start;
}

.topServiceEn,
.topServiceTtl {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: 1/1;
  white-space: nowrap;
}

.topServiceEn {
  font-family: var(--fontEn);
  font-size: 6.6667em;
  font-weight: 500;
  line-height: 1;
  color: #ebe8e0;
}
@media only screen and (max-width: 767px) {
  .topServiceEn {
    margin-left: 1.5384615385vw;
    font-size: 17.4358974359vw;
  }
}

.topServiceTtl {
  margin: 1.9063em 0 0 1.2188em;
  font-size: 2rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceTtl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceTtl {
    font-size: 1.3125rem;
  }
}
.topServiceTtl {
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .topServiceTtl {
    margin: 9.7435897436vw 0 0 0;
    font-size: 7.4358974359vw;
  }
}

.topServiceLead {
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceLead {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceLead {
    font-size: 0.875rem;
  }
}
.topServiceLead {
  font-weight: 500 !important;
  line-height: 1.6;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topServiceLead {
    font-size: 4.6153846154vw;
  }
}

/*--------------------------------------------------
 * 建設事業（赤いカード＋写真）
 *------------------------------------------------*/
.topServiceBody {
  margin-top: 4em;
}
@media only screen and (max-width: 767px) {
  .topServiceBody {
    margin-top: 10.2564102564vw;
  }
}

.topServiceMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topServiceMain {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 2.5641025641vw;
  }
}

.topServiceCard,
.topFoodCard {
  position: relative;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 44.167%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  background-color: var(--mainColor);
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topServiceCard,
  .topFoodCard {
    width: 100%;
    aspect-ratio: 350/510;
  }
}

.topServiceCardPattern {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 767px) {
  .topServiceCardPatternPc {
    display: none;
  }
}

.topServiceCardPatternSp {
  display: none;
}
@media only screen and (max-width: 767px) {
  .topServiceCardPatternSp {
    display: block;
  }
}

.topServiceCardInner {
  position: absolute;
  top: 17.736%;
  left: 14.151%;
  width: 71.698%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  row-gap: 1.3333em;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .topServiceCardInner {
    top: 8.455%;
    left: 10%;
    width: 80%;
    row-gap: 5.1282051282vw;
  }
}

.topServiceCardHead {
  text-align: center;
}

.topServiceCardTtl {
  font-size: 2rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceCardTtl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceCardTtl {
    font-size: 1.3125rem;
  }
}
.topServiceCardTtl {
  font-weight: 700 !important;
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .topServiceCardTtl {
    font-size: 7.4358974359vw;
  }
}

.topServiceCardSub {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceCardSub {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceCardSub {
    font-size: 0.875rem;
  }
}
.topServiceCardSub {
  font-weight: 500 !important;
  line-height: 1.97;
}
@media only screen and (max-width: 767px) {
  .topServiceCardSub {
    font-size: 3.8461538462vw;
  }
}

.topServiceCardLine {
  display: block;
  width: 2.5333em;
  height: 3px;
  border-radius: 50px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .topServiceCardLine {
    width: 9.7435897436vw;
  }
}

.topServiceCardBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .topServiceCardBody {
    row-gap: 5.1282051282vw;
  }
}

.topServiceCardCatch {
  font-size: 1.3333em;
  font-weight: 700 !important;
  line-height: 1.6;
}
@media only screen and (max-width: 767px) {
  .topServiceCardCatch {
    font-size: 5.1282051282vw;
  }
}

.topServiceCardText {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceCardText {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceCardText {
    font-size: 0.875rem;
  }
}
.topServiceCardText {
  font-weight: 500 !important;
  line-height: 1.8;
}
@media only screen and (max-width: 767px) {
  .topServiceCardText {
    font-size: 3.8461538462vw;
  }
}

.topServiceMainImg {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 660/530;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topServiceMainImg {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    aspect-ratio: 350/280;
  }
}
.topServiceMainImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

/*--------------------------------------------------
 * 下水道工事（白いカード：写真＋本文）
 *------------------------------------------------*/
.topServiceItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: 4em;
  -moz-column-gap: 4em;
  column-gap: 4em;
  margin-top: 0.6667em;
  padding: 1.7333em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .topServiceItem {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 3.8461538462vw;
    margin-top: 2.5641025641vw;
    padding: 5.1282051282vw;
  }
}

.topServiceItemImg {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 36.585%;
  aspect-ratio: 420/360;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topServiceItemImg {
    width: 100%;
    aspect-ratio: 310/240;
  }
}
.topServiceItemImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.topServiceItemBody {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1.3333em;
  padding-block: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topServiceItemBody {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    row-gap: 7.6923076923vw;
    padding-block: 2.5641025641vw;
  }
}

.topServiceItemHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0;
}
.topServiceItemHead > .topServiceItemLine,
.topServiceItemHead > .topServiceItemLead {
  margin-top: 0.8em;
}
@media only screen and (max-width: 767px) {
  .topServiceItemHead > .topServiceItemLine,
  .topServiceItemHead > .topServiceItemLead {
    margin-top: 3.0769230769vw;
  }
}

/* ラベル: 01 ● Service */
.topServiceItemLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceItemLabel {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceItemLabel {
    font-size: 0.875rem;
  }
}
.topServiceItemLabel {
  font-weight: 600;
  line-height: 1.5;
  color: var(--mainColor);
}
.topServiceItemLabel span {
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .topServiceItemLabel {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}

.topServiceItemLabelDot {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: var(--mainColor);
}

.topServiceItemTtl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  color: var(--subColor);
}

.topServiceItemTtlMain {
  font-size: 1.5333em;
  font-weight: 700 !important;
  line-height: 1.5;
}
@media only screen and (max-width: 767px) {
  .topServiceItemTtlMain {
    font-size: 5.8974358974vw;
  }
}

.topServiceItemTtlSub {
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceItemTtlSub {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceItemTtlSub {
    font-size: 0.875rem;
  }
}
.topServiceItemTtlSub {
  font-weight: 700 !important;
  line-height: 1.9;
}
@media only screen and (max-width: 767px) {
  .topServiceItemTtlSub {
    font-size: 3.8461538462vw;
  }
}

.topServiceItemLine {
  display: block;
  width: 2.5333em;
  height: 3px;
  border-radius: 50px;
  background-color: var(--mainColor);
}
@media only screen and (max-width: 767px) {
  .topServiceItemLine {
    width: 9.7435897436vw;
  }
}

.topServiceItemLead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-column-gap: 1.3333em;
  -moz-column-gap: 1.3333em;
  column-gap: 1.3333em;
  width: 100%;
  padding-top: 0.3333em;
}
@media only screen and (max-width: 767px) {
  .topServiceItemLead {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    row-gap: 5.1282051282vw;
    padding-top: 1.2820512821vw;
  }
}
.topServiceItemLead p {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceItemLead p {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceItemLead p {
    font-size: 0.875rem;
  }
}
.topServiceItemLead p {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topServiceItemLead p {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    font-size: 4.6153846154vw;
  }
}
.topServiceItemLead .btn01 {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.topServiceItemNote {
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceItemNote {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceItemNote {
    font-size: 0.875rem;
  }
}
.topServiceItemNote {
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topServiceItemNote {
    font-size: 3.8461538462vw;
  }
}
.topServiceItemNote p {
  font-weight: 400;
}

/*--------------------------------------------------
 * 3カラムカード（水道工事／建設・土木工事／不動産事業）
 *------------------------------------------------*/
.topServiceCards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  margin-top: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topServiceCards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 2.5641025641vw;
    margin-top: 2.5641025641vw;
  }
}
.topServiceCards .topServiceCardItem:nth-child(2) {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.topServiceCards .topServiceCardItem:nth-child(3) {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.topServiceCardItem {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 1em;
  padding: 1.7333em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .topServiceCardItem {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    row-gap: 3.8461538462vw;
    padding: 5.1282051282vw;
  }
}

.topServiceCardItemImg {
  width: 100%;
  aspect-ratio: 543/310;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topServiceCardItemImg {
    aspect-ratio: 310/240;
  }
}
.topServiceCardItemImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.topServiceCardItemBody {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0;
  padding-block: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topServiceCardItemBody {
    padding-block: 2.5641025641vw;
  }
}
.topServiceCardItemBody > .topServiceItemLine {
  margin-top: 0.8em;
}
@media only screen and (max-width: 767px) {
  .topServiceCardItemBody > .topServiceItemLine {
    margin-top: 3.0769230769vw;
  }
}
.topServiceCardItemBody > .topServiceCardItemText {
  margin-top: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topServiceCardItemBody > .topServiceCardItemText {
    margin-top: 3.0769230769vw;
  }
}

.topServiceCardItemTtl {
  font-size: 1.5333em;
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topServiceCardItemTtl {
    font-size: 5.8974358974vw;
  }
}

.topServiceCardItemText {
  width: 100%;
  padding-top: 0.2778em;
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topServiceCardItemText {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .topServiceCardItemText {
    font-size: 0.875rem;
  }
}
.topServiceCardItemText {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topServiceCardItemText {
    font-size: 4.6153846154vw;
  }
}

/*==================================================
 * 施工実績（PhotoGallery）
 * Figma: PC 10550:13099 / SP 10550:12955 ほか
 * 写真は Figma のグリッドから、上下2段の無限ループスライダーに変更（逆方向に流す）
 *================================================*/
.topGallery {
  padding-block: 8em 5.1333em;
  background-color: var(--mainColor);
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topGallery {
    padding-block: 15.3846153846vw 15.3846153846vw;
  }
}

/*--------------------------------------------------
 * 見出し
 *------------------------------------------------*/
.topGalleryTtlWrap {
  display: -ms-grid;
  display: grid;
  place-items: start center;
  text-align: center;
}

.topGalleryEn,
.topGalleryTtl {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: 1/1;
  white-space: nowrap;
}

.topGalleryEn {
  font-family: var(--fontEn);
  font-size: 6.6667em;
  font-weight: 500;
  line-height: 1;
  color: #e35852;
}
@media only screen and (max-width: 767px) {
  .topGalleryEn {
    font-size: 17.4358974359vw;
    line-height: 0.9;
  }
}

.topGalleryTtl {
  margin-top: 1.9063em;
  font-size: 2rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topGalleryTtl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .topGalleryTtl {
    font-size: 1.3125rem;
  }
}
.topGalleryTtl {
  font-weight: 700 !important;
  line-height: 1.6;
  color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .topGalleryTtl {
    margin-top: 23.5897435897vw;
    font-size: 7.4358974359vw;
  }
}

/*--------------------------------------------------
 * 無限ループスライダー（上段=左へ／下段=右へ）
 * 同じ並びを2セット並べ、1セット分ずらして繰り返す
 *------------------------------------------------*/
.topGallerySlider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 0.5333em;
  margin-top: 2.6667em;
}
@media only screen and (max-width: 767px) {
  .topGallerySlider {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2.0512820513vw 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.0512820513vw;
    margin-top: 7.6923076923vw;
  }
}

.topGalleryRow {
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topGalleryRow {
    display: contents;
  }
}

.topGalleryTrack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: topGalleryScrollLeft 40s linear infinite;
  animation: topGalleryScrollLeft 40s linear infinite;
}
@media only screen and (max-width: 767px) {
  .topGalleryTrack {
    display: contents;
    width: auto;
    -webkit-animation: none;
    animation: none;
  }
}

.topGalleryRowReverse .topGalleryTrack {
  -webkit-animation-name: topGalleryScrollRight;
  animation-name: topGalleryScrollRight;
}

.topGalleryItem {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 23.6em;
  margin-right: 0.5333em;
  aspect-ratio: 354/240;
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .topGalleryItem {
    width: auto;
    margin-right: 0;
    aspect-ratio: 191/159;
  }
}
@media only screen and (max-width: 767px) {
  .topGalleryItem:has(img[aria-hidden=true]) {
    display: none;
  }
}
.topGalleryItem img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

@-webkit-keyframes topGalleryScrollLeft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes topGalleryScrollLeft {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@-webkit-keyframes topGalleryScrollRight {
  from {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes topGalleryScrollRight {
  from {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topGalleryTrack {
    -webkit-animation: none;
    animation: none;
  }
}
.topGalleryBtn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 2.8667em;
}
@media only screen and (max-width: 767px) {
  .topGalleryBtn {
    margin-top: 10.2564102564vw;
  }
}

/*==================================================
 * 飲食事業
 * Figma: PC 10550:13063 / SP 10550:12915
 * 構造は建設事業と同じで、左右が逆・色がオレンジ
 *================================================*/
.topFood {
  padding-block: 8em 8.6em;
}
@media only screen and (max-width: 767px) {
  .topFood {
    padding-block: 20.5128205128vw 45.8974358974vw;
  }
}

.topFoodMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topFoodMain {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 2.5641025641vw;
  }
}

.topFoodCard {
  background-color: var(--accentColor);
}

.topFoodImg {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 0px;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 660/530;
  border-radius: 8px;
  overflow: hidden;
}
@media print, screen and (min-width: 768px) {
  .topFoodImg {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }
}
@media only screen and (max-width: 767px) {
  .topFoodImg {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    aspect-ratio: 350/280;
  }
}
.topFoodImg img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

/*--------------------------------------------------
 * 花りん弁当は毎日手作り（白カード＋斜めに重なる写真3枚）
 * Figma: PC 10550:13130 + 10550:13234 / SP 10550:12934 + 10550:12945
 *------------------------------------------------*/
.topHanarin {
  position: relative;
  margin-top: 0.6667em;
  padding: 4.6667em 6.6667em;
  border-radius: 8px;
  background-color: var(--bgLight2);
}
@media only screen and (max-width: 767px) {
  .topHanarin {
    margin-top: 2.5641025641vw;
    padding: 15.3846153846vw 5.1282051282vw 41.0256410256vw;
  }
}

.topHanarinBody {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 2.6667em;
}
@media only screen and (max-width: 767px) {
  .topHanarinBody {
    row-gap: 10.2564102564vw;
  }
}

.topHanarinHead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 1.3333em;
}
@media only screen and (max-width: 767px) {
  .topHanarinHead {
    row-gap: 5.1282051282vw;
  }
}

.topHanarinTtlBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  row-gap: 0.6667em;
}
@media only screen and (max-width: 767px) {
  .topHanarinTtlBlock {
    row-gap: 2.5641025641vw;
  }
}

.topHanarinLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-column-gap: 0.6667em;
  -moz-column-gap: 0.6667em;
  column-gap: 0.6667em;
  font-family: var(--fontEn);
  font-size: 0.9375rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topHanarinLabel {
    font-size: 0.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .topHanarinLabel {
    font-size: 0.875rem;
  }
}
.topHanarinLabel {
  font-weight: 600;
  line-height: 1.5;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .topHanarinLabel {
    -webkit-column-gap: 2.5641025641vw;
    -moz-column-gap: 2.5641025641vw;
    column-gap: 2.5641025641vw;
    font-size: 3.8461538462vw;
  }
}
.topHanarinLabel::before {
  content: "";
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: var(--accentColor);
}

.topHanarinTtl {
  font-size: 2rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topHanarinTtl {
    font-size: 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .topHanarinTtl {
    font-size: 1.3125rem;
  }
}
.topHanarinTtl {
  font-weight: 700 !important;
  line-height: 1.5;
  color: var(--accentColor);
}
@media only screen and (max-width: 767px) {
  .topHanarinTtl {
    font-size: 7.6923076923vw;
  }
}

.topHanarinText {
  width: 22em;
  font-size: 1.125rem;
}
@media only screen and (min-width: 767px) and (max-width: 959px) {
  .topHanarinText {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .topHanarinText {
    font-size: 0.875rem;
  }
}
.topHanarinText {
  font-weight: 500 !important;
  line-height: 1.8;
  color: var(--subColor);
}
@media only screen and (max-width: 767px) {
  .topHanarinText {
    width: 100%;
    font-size: 4.6153846154vw;
  }
}

/* 写真3枚：カードの右側に斜めに重なる（カード内に収まる） */
.topHanarinPhotos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.topHanarinPhotos .topHanarinPhoto {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
}
.topHanarinPhotos .topHanarinPhoto img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.topHanarinPhoto01 {
  top: 15.802%;
  left: 69.92%;
  width: 21.75%;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .topHanarinPhoto01 {
    top: 110vw;
    left: 45.0256410256vw;
    width: 39.5897435897vw;
  }
}

.topHanarinPhoto02 {
  top: 63.21%;
  left: 61.167%;
  width: 14.833%;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .topHanarinPhoto02 {
    top: 139.1230769231vw;
    left: 29.0948717949vw;
    width: 27vw;
  }
}

.topHanarinPhoto03 {
  top: 33.126%;
  left: 48%;
  width: 17.75%;
  aspect-ratio: 1/1;
}
@media only screen and (max-width: 767px) {
  .topHanarinPhoto03 {
    top: 120.641025641vw;
    left: 5.1282051282vw;
    width: 32.3076923077vw;
  }
}

/* ==========================================================================
   印刷用
   ========================================================================== */
/* -------------------------------------------------------------- 
 
 Hartija CSS Print Framework -MIT License
   * Version:   1.0
 
-------------------------------------------------------------- */
@media print {
  body {
    -webkit-print-color-adjust: exact;
    /*chrome用*/
    zoom: 0.8;
    border-top: none;
  }
  .bgImg {
    display: list-item; /* 該当箇所の表示方法をlist-itemに */
    list-style-image: url(print_bg.png); /* 表示させたい画像 */
    list-style-position: inside; /* マーカーの位置を内側に */
  }
  header {
    display: none;
  }
  footer {
    display: none;
  }
  .footerTelSp {
    display: none;
  }
  .menu-btn {
    display: none;
  }
  .fixBar {
    display: none !important;
  }
  .parallax-mirror {
    display: none;
    height: 0 !important;
  }
  .rellax {
    -webkit-transform: none !important;
    transform: none !important;
  }
  .PrintHidden {
    display: none;
  }
  .printArea {
    margin: 0;
    padding: 0;
  }
}