/* Hero */
.hero {
  position: static;
}
.ribbon {
  position: relative;
  top: calc(100vw * -0.045);
  left:0;
  display: flex;
  justify-content: flex-start;
  z-index:3;
}
@media (min-width: 1800px) {
  .ribbon {
    top: calc(100vw * -0.07);
  }
}

.ribbon .bar, .ribbon_sp .bar  {
  background:#c91b1b;
  color:#fff;
  padding: 22rem 102rem 24rem 186rem;
  border-radius: 1rem;
  font-weight:700;
  letter-spacing: 3.6rem;
  font-size: 38rem;
}
.ribbon_sp {
  display: none;
}



@media (max-width: 768px) {
  .ribbon {
    display: none;
  }
  .ribbon_sp {
    position: relative;
    top: calc( 3vw );
    left:0;
    display: block;
    z-index:3;
    margin-bottom: 0rem;
  }
  .ribbon_sp .bar {
    letter-spacing: 2.0rem;
  }
  .ribbon_sp .bar1 {
    display: block;
    width: 12.5em;
    padding: 8rem 9rem 8rem 13rem;
    font-size: 22rem;
  }
  .ribbon_sp .bar2 {
    display: block;
    width: 8.0em;
    margin-top: 15rem;
    margin-left: 7em;
    padding: 8rem 9rem 8rem 13rem;
    font-size: 22rem;
    font-weight: 500;
  }
}


/* Main */
main {
  font-size: 20rem;
}


/* 変数定義（画像から推測される色を再設定） */
:root {
    --color-primary: #e3001a;    /* メインカラー（赤） */
    --color-text: #333333;       /* 標準テキストの色 */
    --color-section-bg: #D9DFEE; /* 青っぽい灰色 (画像中のセクション背景色を推測) */
    --color-white: #ffffff;      /* 白 */
    --color-voicephoto-bg: #BCC1CA;  /** ボイスセクションの写真背景色 **/
}

/* 共通コンテナ */
/* 画面中央に配置しつつ、内部の要素は左寄せを基本とする */
.site-main {
    margin: 60rem auto 0 auto;
    background-color: var(--color-white); /* サイト全体の背景は白 */
}

.section {
    margin-bottom: 60rem;
    background-color: var(--color-section-bg); 
}
.section:nth-child(n+2) {
    margin-top: 160rem;
    margin-bottom: 60rem;
}
@media (max-width: 768px) {
    .section:nth-child(n+2) {
        margin-top: 110rem;
        margin-bottom: 20rem;
        padding-bottom: 30rem;
    }
}
.section-inner {
    max-width: 1150rem;
    margin: 0 auto;
    padding: 0 0rem 0 20rem;
    position: relative;
}
.section-title {
    position: relative;
    top: -44rem;
    left: -100rem;
    margin-bottom: 0rem;
}
.section-title img {
    max-height: 88rem;
    width: max-content;
}
@media (max-width: 768px) {
  .section-title {
      top: -30rem;
      left: -28rem;
      margin-bottom: 0rem;
      max-height: 70px;
  }
  .section-title img {
      max-height: 55rem;
      width: max-content;
  }
}

.about-section {
    margin: 160rem 370rem 60rem 0;
    padding: 0rem 0 80rem 15%;
    text-align: left;
}
/* ELEMENT: about-section__title */
.about-section__title {
    position: relative;
    left: -60rem;
}
@media (max-width: 768px) {
  .about-section {
      margin: 15rem 0 0rem 0;
      padding: 0rem 0 30rem 10rem;
  }
  .about-section__title {
      left: -15rem;
  }
}


.about-section__title-image {
    position: relative;
}

/* ELEMENT: about-section__lead */
.about-section__lead-wrap {
    display: flex;
}
.about-section__lead {
    font-size: 23rem;
    font-weight: bold;
    color: var(--color-secondary);
    margin-bottom: 40rem;
    line-height: 1.6;
}
.about-section__lead-image {
  display: none;
}
@media (max-width: 768px) {
  .about-section__lead {
    display: block;
    flex: 0 0 64%;
    font-size: 18rem;
    line-height: 1.8;
  }
  .about-section__lead-image {
    position: relative;
    right: 0;
    display: block;
    flex: 0 0 36%;
  }
}

.about-section__content {
  display: flex;
}
/* ELEMENT: about-section__text */
.about-section__text {
    max-width: none; /* 幅の制限を解除 */
    margin: 0 9% 60rem 4%;
    font-size: 18rem;
    line-height: 1.8;
    color: var(--color-text);
}

/* ELEMENT: about-section__checklist */
.about-section__checklist {
    list-style: none;
    padding: 0;
    margin: 60rem 0;
    max-width: 800rem; 
}

/* CHECKLIST ITEM: li要素 */
.about-section__checklist li {
    width: 100%; 
    margin-bottom: 12rem;
    position: relative;
    font-size: 19rem;
    font-weight: 500;
    padding-left: 40rem; 
    line-height: 1.5;
}
@media (max-width: 768px) {
  .about-section__checklist li {
      width: 100%; 
      margin-bottom: 12rem;
      position: relative;
      font-size: 18rem;
      font-weight: 500;
      padding-left: 37rem; 
      line-height: 1.5;
  }
}
.about-section__checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2rem;
    width: 34rem;
    height: 34rem;
    
    background-image: url('/wp-content/themes/flareworks/assets/image/checkmark.png');
    background-size: 20rem;
    background-repeat: no-repeat;
    background-position: center;
}
@media (max-width: 768px) {
  .about-section__checklist li::before {
    left: -3rem;
    margin-right: -3rem;
  }
}

.about-section__image-wrapper {
  position: relative;
  left: 80rem;
  margin: 0 auto;
  height: auto;
  width: 1000rem;
}
.about-section__image-container {
  position: relative;
  top: -550rem;
  left: 100rem;
  width: 80%;
  height: auto;
  margin: 0 auto;
  text-align: right;
}
.about-section__image-container img {
  position: relative;
  left: 7%;
  max-width: 450rem;
}

@media (max-width: 768px) {
  .about-section__image-wrapper {
    display: none;
  }
  .about-section__image-container {
    position: relative;
    top: 0rem;
    left: 0rem;
    width: 100%;
    height: auto;
  }
}




/* ─────────────────────────────
   CEO
────────────────────────────── */

.ceo-section {
    background-color: var(--color-section-bg);
    padding: 0rem 15% 120rem 0;
    margin: 160rem 0 60rem 24%;
    position: relative;
}
.ceo-inner {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
}
@media (max-width: 768px) {
  .ceo-section {
      background-color: var(--color-section-bg);
      padding: 0rem 0 20rem 5%;
      margin: 160rem 6% 60rem 0;
      position: relative;
  }
  .ceo-inner {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    width: 100%;
    gap: 10rem;
  }
}

.ceo-section__title {
  left: -10rem;
}

.ceo-section__inner {
  position: relative;
  left: -190rem;
  max-width: 1200px;
}
.ceo-section__inner.container {
  width: 70vw;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 768px) {
  .ceo-section__inner {
    position: relative;
    left: -0rem;
    max-width: 100vw;
  }
  .ceo-section__inner.container {
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0 0px;
  }
}

.ceo-text {
  width: 95%;
}
.ceo-text-highlight {
  display: block;
  font-size: 24rem;
  font-weight: bold;
  margin-bottom: 35rem;
}
.ceo-sign {
  text-align: right;
  padding-right: 8rem;
}
.ceo-sign-sp {
  display: none;
}
.ceo-photo {
  position: static;
  width: 250rem;
  margin-right: 40rem;
}
.ceo-photo img {
  position: relative;
  z-index: 3;
  width: 240rem;
  height: auto;
}
@media (max-width: 768px) {
  .ceo-text {
    width: 95%;
    padding-left: 6%;
  }
  .ceo-text-highlight {
    display: block;
    width: 72%;
    margin-top: 15rem;
    margin-bottom: 25rem;
    font-size: 20rem;
  }
  .ceo-sign-sp {
    display: block;
    width: 72%;
    margin-bottom: 3em;
    padding-right: 8rem;
    text-align: right;
    font-size: 16rem;;
    font-weight: 500;
  }
  .ceo-sign {
    display: none;
  }
  .ceo-photo {
    position: relative;
    right: 10rem;
    width: 0rem;
    margin-right: 30rem;
  }
  .ceo-photo img {
    width: 130rem;
    max-width: 125rem;
    top: -10rem;
    left: -70rem;
  }

}


:root {
  --color-white: #ffffff;          /* 白 */
  --color-border: #cccccc;         /* テーブル/リストの罫線色 */
  --color-header-bg: #f7f7f7;      /* 会社概要の項目名（左側）の背景色 */
}


/* ==================================================== */
/* SECTION: Company (会社概要) スタイル */
/* ==================================================== */

.company-section {
  padding: 60px 0;
  background-color: #fff;
}

.company-section__title {
  left: 0;
  margin: 0rem auto;
  text-align: center;
}

/* H2直後のリードテキスト */
.company-section__lead {
  text-align: center; /* 中央寄せ */
  font-size: 1.1em;
  margin: 10px auto 40px;
  max-width: 600px;
}


/* ---------------------------------------------------- */
/* PC表示（テーブル形式）: デフォルトのスタイル */
/* ---------------------------------------------------- */

.company-list {
    width: 100%;
    max-width: 800px; /* テーブルの最大幅を制限 */
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-collapse: collapse;
}

.company-row {
    display: flex; /* Flexboxで行を作成 */
    border-bottom: 1px solid var(--color-border);
}

.company-row:last-of-type {
    border-bottom: none;
}
@media (max-width: 768px) {    
  .company-row:last-of-type {
    border-bottom: 1px solid var(--color-border);
  }
}

/* 項目名（左側） */
.company-row__header {
    display: flex; 
    justify-content: center;
    align-items: center;
    width: 250rem;
    padding: 15px 20px;
    font-weight: bold;
    color: var(--color-text);
    border-right: 1px solid var(--color-border);
    text-align: center;
}

/* 内容（右側） */
.company-row__data {
    flex-grow: 1;
    padding: 15px 20px;
}

/* 所在地セクション内の小見出し */
.company-row__data-subheading {
    margin: 0 0 1em 0;
}


/* ---------------------------------------------------- */
/* SP表示（テーブル解除、縦積み）: @media query */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    
    .company-list {
        border: none;
    }

    .company-row {
        display: block; /* 縦積み */
        border: 1px solid var(--color-border); /* 項目ごとの枠線 */
        margin-bottom: 15px;
    }

    /* 項目名（上部配置） */
    .company-row__header {
        width: auto;
        padding: 10px 15px;
        background-color: var(--color-header-bg);
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    /* 内容（下部配置） */
    .company-row__data {
        padding: 10px 15px;
    }
    
    /* 所在地（ヘッダーが空の行）の罫線調整 */
    .company-row--location .company-row__header {
    }
}


.maps-section {
    padding: 50rem 0;
}
.maps-section__inner {
    max-width:600px;
    margin: 0 auto;
    padding: 0 20px;
}

.maps-section__inner {
    margin: 40rem auto;
}
.maps-section__access {
    margin: 30rem auto;
}

.maps-section__content_header {
    margin: 60rem 30rem 20rem 30rem;
    text-align: center;
    font-size: 22rem;
}

.iframe__access_google_map {
  height: 400px;
}
@media (max-width: 768px) {
  .iframe__access_google_map {
    height: 300px;
  }
}

/* 問合せフォーム */
.contact-section {
  background-color: #fff;
}
.contact-section__inner.container  {
  width: 90%;
  max-width: 900rem;
  margin: 0 auto;
}
.contact-section__title {
  top: -20rem;
  left: -20rem;
}
.contactForm__body {
  margin: 0 auto;
}
.contact-section__text {
  font-size: 14rem;
}
.content-section-h3 {
  margin-bottom: 15rem;
  padding: 5rem 0rem;
  background-color: #CA191D;
  font-size: 22rem;
  color: #fff;
  text-align: center;
}

.contactForm__body input {
  max-width: 100%;
}
.contactForm__list {
  border: 1px solid #ECCAC9;
}
.contactForm__list .contactForm__ttl  {
  padding: 14rem 14rem;
  background-color: #ECCAC9;
  font-weight: 400;
}

.contactForm__list .contactForm__data {
  margin: 0;
  padding: 14rem 14rem 18rem 18rem;
  font-weight: 400;
}