@charset "UTF-8";

/*
Theme Name:株式会社MRCのテーマ
Author: sugimedical
Description: シンプルでカスタマイズ性に優れたテーマです
Version: 01
*/

:root {
   --color_primary: #288FD8;
   --color_text: #2E2E2E;
   --color_surface: #EDF6FC;
   --color_surface_muted: #F6F6F6;
   --color_surface_blue: #E1F1FB;
   --color_secondary: #5CBCE4;
   --color_secondary_light: #8BD2F0;
   --color_accent_yellow: #EBD232;
   --color_accent_yellow_alt: #E5D633;
   --color_accent_red: #E64C29;
   --color_accent_orange: #F2971D;
   --color_accent_teal: #154447;
   --color_border: #CCCCCC;
   --color_white: #FFFFFF;
   --color_primary_shadow: rgba(139, 210, 240, 0.25);
   --font_family_base: "Yu Gothic", YuGothic, 游ゴシック, 游ゴシック体, sans-serif;
   --font_family_accent: "Roboto", sans-serif;
   --fontsize_12: 1.2rem;
   --fontsize_14: 1.4rem;
   --fontsize_16: 1.6rem;
   --fontsize_18: 1.8rem;
   --fontsize_20: 2rem;
   --fontsize_22: 2.2rem;
   --fontsize_24: 2.4rem;
   --fontsize_26: 2.6rem;
   --fontsize_28: 2.8rem;
   --fontsize_32: 3.2rem;
   --fontweight_bold: 700;
}


/* 文字の大きさ */
.fontweight_bold {
   font-weight: var(--fontweight_bold);
}

.fontweight_normal {
   font-weight: normal;
}

/* 文字の太さ */
.fontsize_big {
   font-size: var(--fontsize_20);
}

.fontsize_bigger {
   font-size: var(--fontsize_22);
}

.fontsize_biggest {
   font-size: var(--fontsize_26);
}

/* シャドウ */
/* ホバー */
.hover_opacity {
   transition: 0.2s;

   &:hover {
      opacity: 0.8;
   }
}

/* border-width */
/* letter-spacing */
/* border-radius */
/* 点滅アニメーションの定義 */
@keyframes blinking {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

/* 点滅アニメーションを適用 */
.blink {
   animation: blinking 1s ease-in-out infinite alternate;
}

/* 余白 */
.inner0_20 {
   margin: 0 20px;

   @media (min-width: 768px) {
      margin: 0 40px;
   }

   @media (min-width: 1024px) {
      margin: 0 60px;
   }

   @media (min-width: 1280px) {
      width: 1200px;
      margin: 0 auto;
   }
}

.in_inner {
   margin: 0 20px;

   @media (min-width: 768px) {
      margin: 0 30px;
   }

   @media (min-width: 1024px) {
      margin: 0 40px;
   }

   @media (min-width: 1280px) {
      margin: 0 50px;
   }
}

.mblock10_0 {
   margin: 10px 0;
}

.mblock20_0 {
   margin: 20px 0;
}

.mblock30_0 {
   margin: 30px 0;
}

.mblock40_0 {
   margin: 40px 0;
}

.mblock50_0 {
   margin: 50px 0;
}

.mblock60_0 {
   margin: 60px 0;
}

.mblock70_0 {
   margin: 70px 0;
}

.mblock80_0 {
   margin: 80px 0;
}

.mblock90_0 {
   margin: 90px 0;
}

.mblock100_0 {
   margin: 100px 0;
}

.pblock10_0 {
   padding: 10px 0;
}

.pblock20_0 {
   padding: 20px 0;
}

.pblock30_0 {
   padding: 30px 0;
}

.pblock40_0 {
   padding: 40px 0;
}

.pblock50_0 {
   padding: 50px 0;
}

.pblock60_0 {
   padding: 60px 0;
}

.pblock70_0 {
   padding: 70px 0;
}

.pblock80_0 {
   padding: 80px 0;
}

.pblock90_0 {
   padding: 90px 0;
}

.pblock100_0 {
   padding: 100px 0;
}

/* 見出し　ここから */
html {
   font-family: var(--font_family_base);
   color: var(--color_text);
   text-align: justify;
}

h1 {
   margin-bottom: 30px;
}

h2,
h3,
h4 {
   display: flex;
   justify-content: center;
}

h2 {
   margin-bottom: 30px;
}

/* 二段の英語の見出し */
.en_title {
   display: block;
   text-align: center;

   p {
      margin-top: 0;
      font-family: var(--font_family_accent);
   }
}

h3 {
   margin-bottom: 20px;
}

h4 {
   margin-bottom: 15px;
}

.p_heading2 {
   color: var(--color_primary);
}

/*　立体感のあるバーの見出し　*/
.p_heading3 {
   padding: 0.4em 0.5em;
   background: #ebebeb;
   border-left: solid 5px var(--color_secondary);
   border-bottom: solid 3px #cfcfcf;
   justify-content: left;
}

/*　上下線の見出し　*/
.p_heading4 {
   padding: 0.5em 0;
   border-top: solid 3px var(--color_secondary_light);
   border-bottom: solid 3px var(--color_secondary_light);
   justify-content: left;
}

/*　文字の位置　*/
.txt_left {
   text-align: left;
}

.txt_center {
   text-align: center;
}

.txt_right {
   text-align: right;
}

/*　※　注意の時など　*/
.caution {
   color: var(--color_accent_red);
}

a {
   color: var(--color_text);
}

/*　リンクの下線を引く　*/
.link {
   text-decoration: underline 1px var(--color_text);
}

/*　マーカー　*/
.markerunder {
   background: linear-gradient(transparent 70%, var(--color_accent_yellow) 0%);
   display: inline;
   padding: 0 1px 0px;
   font-size: var(--fontsize_20);
}

/*　影ありの画像 */
.img,
.img_box_shadow_blue {
   margin: 30px 0;

   img {
      box-shadow: 0 10px 20px rgba(46, 46, 46, 0.25);
   }
}

/*　ブルーの影ありの画像 */
.img_box_shadow_blue {
   img {
      box-shadow: 10px 10px var(--color_primary_shadow);
   }
}

/*　影なしの画像 */
.img_box_shadow_none {
   box-shadow: none;
}

/*　ポイントなど目立たせたい場所に　*/
.box {
   display: inline-block;
   width: 50px;
   height: 50px;
   background: var(--color_primary);
   color: var(--color_white);
   font-size: var(--fontsize_20);
   text-align: center;
   line-height: 50px;
   margin-right: 10px;
}

/*　下矢印のブロック　*/
.arrow_box {
   position: relative;
   background: #88b7d5;
   border: 4px solid var(--color_secondary_light);

   &::after,
   &::before {
      top: 100%;
      left: 50%;
      border: solid transparent;
      content: "";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
   }

   &::after {
      border-color: rgba(136, 183, 213, 0);
      border-top-color: var(--color_secondary_light);
      border-width: 30px;
      margin-left: -30px;
   }

   &::before {
      border-color: rgba(194, 225, 245, 0);
      border-top-color: var(--color_secondary_light);
      border-width: 36px;
      margin-left: -36px;
   }
}

/*　見出しが青のテーブル　*/
.blue_table {
   border: 1px solid var(--color_text);
}

.blue_table {
   .tr_first th {
      background-color: var(--color_primary);
      color: var(--color_white);
      padding: 10px;

   }
}

.blue_table {
   .tr_first .th_first {
      border-right: 1px solid var(--color_white);

   }
}

.blue_table {
   .tr_first .th_last {
      text-align: left;

   }
}

.blue_table {
   td {
      background-color: var(--color_white);
      padding: 5px;

   }
}

.blue_table {

   .tr_second .td_first,
   .tr_third .td_first,
   .tr_fourth .td_first {
      border-right: 1px solid var(--color_text);
      border-bottom: 1px solid var(--color_text);
      text-align: center;

   }
}

.blue_table {

   .tr_second .td_second,
   .tr_third .td_second,
   .tr_fourth .td_second {
      border-bottom: 1px solid var(--color_text);

   }
}

.blue_table {
   .tr_last .td_first {
      border-right: 1px solid var(--color_text);
      text-align: center;

   }
}

/*　ulリスト　*/
/*　チェックボックスのリスト　*/
.index_support_record_ul {
   font-size: var(--fontsize_20);
}

.index_support_record_ul {
   li {
      display: flex;
      align-items: center;
      margin: 10px 0;

   }
}

.index_support_record_ul {
   li img {
      width: 25px;
      margin-right: 5px;

   }
}

/*　青い丸のリスト　*/
.blue_circle_unorder {
   font-size: var(--fontsize_20);
}

.blue_circle_unorder {
   li {
      position: relative;
      padding-left: 30px;

   }
}

.blue_circle_unorder {
   li:before {
      position: absolute;
      content: "●";
      color: var(--color_primary);
      font-size: var(--fontsize_20);
      left: 5px;

   }
}

/*　数字振りリスト　*/
.number_block_unorder {
   font-size: var(--fontsize_18);
}

.number_block_unorder {
   [class^="list"] {
      position: relative;
      display: flex;
      align-items: center;
      padding-left: 50px;
      margin: 10px 0;

   }
}

.number_block_unorder {
   [class^="list"]:before {
      position: absolute;
      content: var(--num);
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background-color: var(--color_primary);
      color: var(--color_white);
      left: 10px;
      font-size: var(--fontsize_22);

   }
}

.number_block_unorder {
   .list1 {
      --num: "1";

   }
}

.number_block_unorder {
   .list2 {
      --num: "2";

   }
}

.number_block_unorder {
   .list3 {
      --num: "3";

   }
}

.number_block_unorder {
   .list4 {
      --num: "4";

   }
}

/*　〇の中に数字振りリスト　*/
.number_order_list {
   /* デフォルトのリストマークを非表示 */
   list-style: none;
   background-color: var(--color_white);
   border: 1px solid var(--color_primary);
   padding: 30px;
   /* カウントしたい要素の親要素で、カウンターをリセットさせる。
  値は任意の名前をつける（ここでは「sample」）。 */
   counter-reset: num;
}

.number_order_list {
   li {
      margin: 5px 0;
      text-indent: -1em;
      padding-left: 1em;

   }
}

.number_order_list {
   li::before {
      /* 先ほど名前をつけたカウンター（ここでは「num」）のカウントを開始 */
      counter-increment: num;
      text-indent: 0em;
      /* カウンターの番号を表示させる */
      content: counter(num);
      /* 以下、番号のスタイル */
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 1.4em;
      height: 1.4em;
      background-color: var(--color_primary);
      color: var(--color_white);
      border-radius: 100%;
      margin-right: 3px;

   }
}

/*　dlリスト　*/
.definition_list {
   background-color: var(--color_white);
   padding: 30px;
}

.definition_list {
   .definition_list_block {
      font-size: var(--fontsize_20);

   }
}

.definition_list {
   .definition_list_block dt {
      background-color: var(--color_secondary);
      color: var(--color_white);
      display: inline-block;
      padding: 0 8px;

   }
}

.definition_list {
   .definition_list_block dd {
      margin-top: 10px;

   }
}

/*　黄色の下線　*/
.border_bottom_yellow {
   border-bottom: 4px solid var(--color_accent_yellow);
}

/*　お問い合わせ　*/
.index_inquiry_txt_block {
   .index_inquiry_txt_block_inner p {
      text-align: center;
   }

   .index_inquiry {
      background-color: #3BA3CF;

      h2 {
         color: var(--color_white);
      }

      .columns {
         @media (min-width: 1024px) {
            display: flex;
            justify-content: center;
         }

         .zoom_block {
            position: relative;

            p {
               position: absolute;
               content: "";
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               color: var(--color_white);
               font-weight: var(--fontweight_bold);
               font-size: var(--fontsize_26);
            }
         }

         .zoom-box {
            overflow: hidden;
         }

         .zoom_banner.zoom {
            display: block;
            transition-duration: 0.5s;

            &:hover {
               transform: scale(1.2);
            }
         }
      }
   }
}

/*　PCの時だけ改行　*/
.pconly {
   display: none;

   @media (min-width: 1280px) {
      display: block;
   }
}

/*　下三角形矢印　*/
.triangle {
   width: 0;
   height: 0;
   border-style: solid;
   border-right: 38px solid transparent;
   border-left: 38px solid transparent;
   border-top: 35px solid var(--color_primary);
   border-bottom: 0;
   margin: 30px auto;
}

/* Topへ戻るボタン　ここから */
#pagetop {
   position: fixed;
   right: 20px;
   bottom: 60px;
   text-indent: -9999px;
   margin: 0;
   z-index: 2;

   @media (min-width: 1024px) {
      bottom: 30px;
   }
}

#pagetop {
   a {
      position: relative;
      display: block;
      width: 65px;
      height: 65px;
      border-radius: 5px;
      background: #c7c7c7;
      transition: opacity 0.6s ease;

      &:hover {
         opacity: 0.3;
      }

      &::before {
         position: absolute;
         top: 7px;
         right: 0;
         bottom: 0;
         left: 0;
         display: block;
         width: 14px;
         height: 14px;
         margin: auto;
         content: "";
         transform: rotate(-45deg);
         border-top: 4px solid var(--color_white);
         border-right: 4px solid var(--color_white);
      }
   }
}

#pagetop {
   a {
      @media (max-width: 767px) {
         width: 45px;
         height: 45px;
      }

   }
}

#pagetop {
   a::before {
      @media (max-width: 767px) {
         top: 5px;
         width: 10px;
         height: 10px;
      }

   }
}

/* Topへ戻るボタン　ここまで */
/*メニューをページ下部に固定*/
#fixed_menu {
   position: fixed;
   width: 100%;
   bottom: 0px;
   opacity: 0.95;
   font-size: var(--fontsize_12);
   color: var(--color_white);
   z-index: 2;

   @media (min-width: 1024px) {
      display: none;
   }
}

#fixed_menu {
   img {
      width: 20px;
      text-align: center;
      margin-right: 5px;

   }
}

/*メニューを横並びにする*/
#fixed_menu {
   ul {
      display: flex;
      list-style: none;
      padding-top: 0;
      margin: 0 auto;
      width: 95%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
      background-color: var(--color_primary);
      border-radius: 5px 5px 0 0;

   }
}

#fixed_menu {
   ul li {
      width: 50%;
      padding: 0;
      margin: 0;
      text-align: center;

      &:first-of-type {
         border-right: 1px solid var(--color_white);
      }
   }
}

#fixed_menu {
   ul a {
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--color_white);
      padding: 8px;

   }
}

/*青塗りベースボタン　ここから */
/* ボタンの基本スタイル */
.btn {
   a {
      position: relative;
      display: block;
      padding: 15px 0;
      background-color: var(--color_primary);
      font-weight: var(--fontweight_bold);
      color: var(--color_white);
      line-height: 1.6;
      text-decoration: none;
      text-align: center;
      transition: 0.2s;
      box-sizing: border-box;
      border-radius: 50px;
      margin: 30px 0;

      @media (min-width: 768px) {
         width: 280px;
      }

      &::after {
         content: "";
         position: absolute;
         top: 0;
         bottom: 0;
         right: 25px;
         width: 9px;
         height: 9px;
         margin: auto;
         border-top: 2px solid var(--color_white);
         border-right: 2px solid var(--color_white);
         transform: rotate(45deg);
         transition: 0.2s;
         box-sizing: border-box;
      }

   }
}

/* ホバー時のスタイル */
.btn-color-change {
   a {
      background-color: var(--color_primary);
      border: 3px solid var(--color_primary);

      &:hover {
         background-color: var(--color_white);
         color: var(--color_primary);

         &::after {
            border-color: var(--color_primary);
         }
      }

   }
}

/*青塗りベースボタン　ここまで */
/*青線ボタン　ここから */
/* ボタンの基本スタイル */
.btn_line {
   a {
      position: relative;
      display: block;
      padding: 15px 0;
      background-color: var(--color_white);
      font-weight: var(--fontweight_bold);
      color: var(--color_primary);
      line-height: 1.6;
      text-decoration: none;
      text-align: center;
      transition: 0.2s;
      box-sizing: border-box;
      border-radius: 50px;
      margin: 30px 0;

      @media (min-width: 768px) {
         width: 280px;
      }

      &::after {
         content: "";
         position: absolute;
         top: 0;
         bottom: 0;
         right: 25px;
         width: 9px;
         height: 9px;
         margin: auto;
         border-top: 2px solid var(--color_primary);
         border-right: 2px solid var(--color_primary);
         transform: rotate(45deg);
         transition: 0.2s;
         box-sizing: border-box;
      }

   }
}

/* ホバー時のスタイル */
.btn-line-color-change {
   a {
      background-color: var(--color_white);
      border: 3px solid var(--color_primary);

      &:hover {
         background-color: var(--color_primary);
         color: var(--color_white);

         &::after {
            border-color: var(--color_white);
         }
      }

   }
}

/*青線ボタン　ここまで */
.menu-toggle {
   cursor: pointer;
   display: none;
   /* Initially hidden */
   padding: 10px;
   position: fixed;
   top: 4px;
   right: 10px;
   z-index: 5;
}

.menu-toggle {
   span {
      display: block;
      width: 35px;
      height: 3px;
      margin: 7px 0;
      background-color: var(--color_text);
      transition: 0.4s;

   }
}

.menu-toggle.open {
   span:nth-child(1) {
      transform: rotate(-45deg) translate(-6px, 6px);

   }
}

.menu-toggle.open {
   span:nth-child(2) {
      opacity: 0;

   }
}

.menu-toggle.open {
   span:nth-child(3) {
      transform: rotate(45deg) translate(-8px, -8px);

   }
}

.menu {
   display: flex;
   flex-direction: column;
   position: fixed;
   top: 0;
   right: -100%;
   /* Initially hidden off-screen */
   width: 250px;
   height: 100%;
   background-color: var(--color_surface);
   /* Blue background */
   border-left: 1px solid var(--color_border);
   transition: right 0.4s ease;
   z-index: 4;
   margin: 0;
   text-align: left;
   overflow-y: auto;
}

.menu {
   img {
      width: 20px;
      margin-right: 5px;

   }
}

.menu.open {
   right: 0;
   /* Slide in from the right */
}

.menu {
   ul {
      list-style-type: none;
      padding: 0;
      margin-top: 40px;
      display: block;

   }
}

.menu {
   li {
      border-bottom: 1px solid var(--color_text);
      border-left: none;
      border-right: none !important;
      padding: 0 5px;
      position: relative;

   }
}

.menu {
   a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: var(--color_text);
      transition: 0.2s;

   }
}

.submenu {
   display: none;
   padding-left: 20px;
   margin-top: 0 !important;
}

.submenu {
   li {
      border: none;

   }
}

.accordion-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
}

.accordion-icon {
   font-size: var(--fontsize_18);
   transition: transform 0.4s;
   color: var(--color_text);
   position: absolute;
   top: 8px;
   right: 15px;
   padding: 0 10px;
   border: 1px solid var(--color_text);
   z-index: 1;
}

.menu {
   .news_li {
      position: relative;

   }
}

.menu {
   .news_li .new {
      position: absolute;
      top: 11px;
      left: 90px;
      padding: 0 4px;
      font-size: var(--fontsize_14);
      color: var(--color_white);
      font-weight: var(--fontweight_bold);
      background-color: var(--color_accent_red);
      z-index: 1;

   }
}

.menu {
   .telbtn {
      display: flex;
      align-items: center;

   }
}

.menu {
   .telbtn img {
      margin-right: 5px;

   }
}

.menu {
   .mailbtn {
      display: flex;
      align-items: center;

   }
}

.menu {
   .mailbtn img {
      margin-right: 5px;

   }
}

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   /* Dark overlay */
   z-index: 3;
   display: none;
   transition: opacity 0.4s;
}

.overlay.open {
   display: block;
   opacity: 1;
}

.accordion-toggle.active {
   .accordion-icon {
      transform: rotate(0deg);

   }
}

.global-menu {
   display: none;
}

.menu-toggle {
   @media (min-width: 1024px) {
      display: none;
      /* Hide on larger screens */
   }
}

.global-menu {
   @media (min-width: 1024px) {
      display: block;
      /* Show on larger screens */
   }
}

.menu {
   @media (min-width: 1024px) {
      display: none;
      /* Hide mobile menu on larger screens */
   }
}

.menu-toggle {
   @media (max-width: 1025px) {
      display: block;
      /* Show on smaller screens */
   }
}

.header_top_columns {
   .stress_check_banner_block_sp {
      max-width: 370px;
      margin: 20px auto 10px;

      @media (min-width: 1280px) {
         display: none;
      }

   }
}

.header_top_columns {
   .stress_check_banner_block_sp .attention {
      position: relative;
      padding: 0.7rem 0.7rem 0.7rem 1.5rem;
      border-radius: 30px;
      background-color: var(--color_accent_red);
      color: var(--color_white);
      font-weight: var(--fontweight_bold);
      left: 10px;

   }
}

.header_top_columns {
   .stress_check_banner_block_sp .attention:before {
      position: absolute;
      content: "";
      top: 100%;
      left: 30px;
      height: 0;
      width: 0;
      border-style: solid;
      border-color: transparent;
      border-top-color: var(--color_accent_red);
      border-width: 8px;

   }
}

.header_top_columns {
   .stress_check_banner_block_sp .stress_check_banner {
      background-color: var(--color_accent_orange);
      display: flex;
      justify-content: center;
      border-radius: 10px;
      font-size: var(--fontsize_18);
      text-align: center;
      padding: 10px;

   }
}

.header_top_columns {
   .stress_check_banner_block_sp .stress_check_banner a {
      width: 100%;

   }
}

.header_top_columns {
   .stress_check_banner_block_sp .stress_check_banner a .txt_color {
      color: var(--color_white);

   }
}

.header_top_columns_inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 10px;

   @media (min-width: 1024px) {
      justify-content: space-between;
      margin: 10px 20px;
   }
}

.header_top_columns_inner {
   .left {
      width: 120px;

   }
}

.header_top_columns_inner {
   .left h1 {
      margin-bottom: 0;

   }
}

.header_top_columns_inner {
   .left {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

.header_top_columns_inner {
   .left img {
      width: 120px;

      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

.header_top_columns_inner {
   .stress_check_banner_block_pc {
      width: 660px;

      @media (max-width: 1280px) {
         display: none;
      }

   }
}

.header_top_columns_inner {
   .stress_check_banner_block_pc .attention {
      position: relative;
      padding: 1rem 1rem 1rem 1.5rem;
      border-radius: 30px;
      background-color: var(--color_accent_red);
      color: var(--color_white);
      font-weight: var(--fontweight_bold);
      left: 10px;
      bottom: 0px;
      font-size: var(--fontsize_18);

   }
}

.header_top_columns_inner {
   .stress_check_banner_block_pc .attention:before {
      position: absolute;
      content: "";
      top: 100%;
      left: 30px;
      height: 0;
      width: 0;
      border-style: solid;
      border-color: transparent;
      border-top-color: var(--color_accent_red);
      border-width: 8px;

   }
}

.header_top_columns_inner {
   .stress_check_banner_block_pc .stress_check_banner {
      background-color: var(--color_accent_orange);
      display: flex;
      justify-content: center;
      border-radius: 10px;
      width: 90%;
      margin: 0px auto 10px;
      font-size: var(--fontsize_18);
      text-align: center;
      padding: 5px;

   }
}

.header_top_columns_inner {
   .stress_check_banner_block_pc .stress_check_banner a {
      width: 100%;
      color: var(--color_text);
      font-size: var(--fontsize_22);

   }
}

.header_top_columns_inner {
   .stress_check_banner_block_pc .stress_check_banner a .txt_color {
      color: var(--color_white);

   }
}

.header_top_columns_inner {
   .inquiry_block_right {
      width: 200px;
      margin-right: 50px;
      font-size: var(--fontsize_12);

      @media (min-width: 1024px) {
         width: 350px;
         margin-right: 0;
      }

   }
}

.header_top_columns_inner {
   .inquiry_block_right .telbtn {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--color_primary);
      padding: 2px 15px;
      color: var(--color_white);
      border-radius: 5px;
      margin: 5px;

   }
}

.header_top_columns_inner {
   .inquiry_block_right .telbtn img {
      width: 20px;
      margin-right: 5px;

      @media (min-width: 1024px) {
         width: 30px;
      }

   }
}

.header_top_columns_inner {
   .inquiry_block_right .telbtn {
      @media (min-width: 1024px) {
         padding: 8px 15px;
         font-size: var(--fontsize_20);
         font-weight: var(--fontweight_bold);
      }

   }
}

.header_top_columns_inner {
   .inquiry_block_right .mailbtn {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--color_primary);
      padding: 2px 15px;
      color: var(--color_white);
      border-radius: 5px;
      margin: 5px;

   }
}

.header_top_columns_inner {
   .inquiry_block_right .mailbtn img {
      width: 18px;
      margin-right: 5px;

      @media (min-width: 1024px) {
         width: 30px;
      }

   }
}

.header_top_columns_inner {
   .inquiry_block_right .mailbtn {
      @media (min-width: 1024px) {
         padding: 8px 15px;
         font-size: var(--fontsize_20);
         font-weight: var(--fontweight_bold);
      }

   }
}

/*==================================================
スライダーのためのcss　ここから
===================================*/
.slider {
   position: relative;
   z-index: 1;
   /*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
   height: 60vh;
   /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
   margin: 0;

   @media (min-width: 768px) {
      height: 70vh;
   }

   @media (min-width: 1280px) {
      /* height: 50vh; */
      margin: 0;
   }
}

/*　背景画像設定　*/
.slider-item01 {
   background-image: url(../mrc-renewal/assets/img/mv_img1.webp);
   background-position: right !important;

   @media (min-width: 1280px) {
      background-position: 0 -40px !important;
   }
}

.slider-item02 {
   background: url(../mrc-renewal/assets/img/mv_img3.webp);
}

.slider-item {
   width: 100%;
   /*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
   height: 60vh;
   /*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
   background-repeat: no-repeat;
   /*背景画像をリピートしない*/
   background-position: center;
   /*背景画像の位置を中央に*/
   background-size: cover;

   /*背景画像が.slider-item全体を覆い表示*/
   @media (min-width: 768px) {
      height: 70vh;
   }
}

/* @media (min-width: 1280px) {
   .slider-item{
      height: 50vh;
   }
} */
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
   position: absolute;
   /*絶対配置にする*/
   z-index: 3;
   top: 42%;
   cursor: pointer;
   /*マウスカーソルを指マークに*/
   outline: none;
   /*クリックをしたら出てくる枠線を消す*/
   /*border-top: 2px solid var(--color_border); /*矢印の色*/
   /*border-right: 2px solid var(--color_border); /*矢印の色*/
   height: 25px;
   width: 25px;
}

.slick-prev {
   /*戻る矢印の位置と形状*/
   left: 2.5%;
   transform: rotate(-135deg);
}

.slick-next {
   /*次へ矢印の位置と形状*/
   right: 2.5%;
   transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
   position: relative;
   z-index: 3;
   text-align: center;
   margin: -50px 0 0 0;
}

.slick-dots {
   li {
      display: inline-block;
      margin: 0 5px;

   }
}

.slick-dots {
   button {
      color: transparent;
      outline: none;
      width: 8px;
      /*ドットボタンのサイズ*/
      height: 8px;
      /*ドットボタンのサイズ*/
      display: block;
      border-radius: 50%;
      background: var(--color_border);
      /*ドットボタンの色*/

   }
}

.slick-dots {
   .slick-active button {
      background: #333;
      /*ドットボタンの現在地表示の色*/

   }
}

/* スライダー　ここまで */
/* mv　ここから */
#mv {
   position: relative;
}

#mv {
   .slider_catchcopyblock {
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      text-align: center;

   }
}

#mv {
   .slider_catchcopyblock .catchcopy1_1 {
      background-color: rgba(255, 255, 255, 0.95);
      font-weight: var(--fontweight_bold);
      font-size: var(--fontsize_20);
      display: inline-block;
      width: 300px;
      margin-bottom: 10px;

      @media (min-width: 768px) {
         font-size: var(--fontsize_28);
         width: 590px;
      }

      @media (min-width: 1024px) {
         font-size: var(--fontsize_32);
      }

      @media (min-width: 1280px) {
         font-size: 4.2rem;
         width: 630px;
      }

   }
}

#mv {
   .slider_subcatchcopyblock {
      @media (min-width: 768px) {
         display: flex;
         flex-direction: column;
      }

   }
}

#mv {
   .slider_subcatchcopyblock .subcatchcopy1_1p {
      margin-top: 2px;

   }
}

#mv {
   .slider_subcatchcopyblock .subcatchcopy1_1p .subcatchcopy1_1span {
      background-color: rgba(255, 255, 255, 0.9);
      font-weight: var(--fontweight_bold);
      font-size: var(--fontsize_12);
      display: inline-block;
      width: 310px;

      @media (min-width: 768px) {
         font-size: var(--fontsize_18);
         width: 610px;
      }

      @media (min-width: 1024px) {
         font-size: var(--fontsize_22);
      }

      @media (min-width: 1024px) {
         width: 770px;
         font-size: var(--fontsize_32);
      }

   }
}

/*========= PC ナビゲーションドロップダウンメニュー ===============*/
/*==ナビゲーション全体の設定*/
.header_nav {

   text-align: center;
   margin: 30px 0;
   display: none;

   @media (min-width: 1024px) {
      display: block;
   }
}

.header_nav {
   .news_li {
      position: relative;

   }
}

.header_nav {
   .news_li .new {
      position: absolute;
      content: "";
      top: -26px;
      left: 50%;
      transform: translateX(-50%);
      font-size: var(--fontsize_14);
      color: var(--color_white);
      font-weight: var(--fontweight_bold);
      background-color: var(--color_accent_red);
      width: 80%;

   }
}

.header_nav {
   ul {
      list-style: none;
      display: flex;
      justify-content: center;

   }
}

.header_nav {
   ul span {
      font-size: var(--fontsize_14);
      color: #757575;
   }
}

.header_nav {
   ul ul {
      display: block;

   }
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
.header_nav {
   ul li {
      position: relative;
      border-left: 1px solid var(--color_primary);
      padding: 0px 30px;
      transition: all 0.2s;

      @media (min-width: 1280px) {
         padding: 0px 30px;
      }

   }
}

.header_nav {
   ul li:last-of-type {
      border-right: 1px solid var(--color_primary);

   }
}

/*ナビゲーションのリンク設定*/
.header_nav {
   ul li a {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-decoration: none;
      font-size: 1.7rem;
      font-weight: var(--fontweight_bold);
   }
}

.header_nav {
   ul li li a {
      padding: 10px 35px;

   }
}

.header_nav {
   ul li:nth-of-type(2) a:hover {
      opacity: 1;

   }
}

/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
.header_nav {
   ul li.has-child::before {
      content: "";
      position: absolute;
      left: 12px;
      top: 15px;
      width: 6px;
      height: 6px;
      transform: rotate(135deg);

      @media (min-width: 1024px) {
         left: 7px;
         top: 15px;
         display: none;
      }

   }
}

/*3階層目を持つliの矢印の設定*/
/* .header_nav ul ul li.has-child::before {
   content: "";
   position: absolute;
   left: 6px;
   top: 17px;
   width: 6px;
   height: 6px;
   border-top: 2px solid var(--color_white);
   border-right: 2px solid var(--color_white);
   transform: rotate(45deg);
} */
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
.header_nav {
   li.has-child ul {
      position: absolute;
      left: 0;
      top: 45px;
      z-index: 4;
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s;
      width: 100%;
      background-color: var(--color_primary);
      color: var(--color_white);
      width: 300px;

   }
}

.header_nav {
   li.has-child ul li {
      margin: 0;
      padding: 0;
      border: none;

   }
}

.header_nav {
   li.has-child ul li a {
      padding: 5px 0;
      font-weight: var(--fontweight_normal);
   }
}

/*hoverしたら表示*/
.header_nav {

   li.has-child:hover>ul,
   li.has-child ul li:hover>ul,
   li.has-child:active>ul,
   li.has-child ul li:active>ul {
      visibility: visible;
      opacity: 1;

   }
}

/*ナビゲーションaタグの形状*/
.header_nav {
   li.has-child ul li a {
      color: var(--color_white);
      border-bottom: 1px solid var(--color_white);
      border-right: 1px solid var(--color_white);
      border-left: 1px solid var(--color_white);
      line-height: 1.6;

   }
}

.header_nav {

   li.has-child ul li a:hover,
   li.has-child ul li a:active {
      opacity: 0.8;

   }
}

/*==3階層目*/
/*3階層目の位置*/
/* .header_nav li.has-child ul ul {
   top: 0;
   left: 182px;
   background: #66adf5;
}
.header_nav li.has-child ul ul li a:hover,
.header_nav li.has-child ul ul li a:active {
   background: #448ed3;
} */
/*========= PC ナビゲーションドロップダウンメニュー　ここまで ===============*/
.p_hero_block {
   background-color: var(--color_surface);
   height: 200px;
   position: relative;
}

.p_hero_block {
   h1 {
      position: absolute;
      content: "";
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      text-align: center;

   }
}

.p_hero_block {
   .pageh1.p_eap {
      @media (min-width: 1280px) {
         width: 730px;
      }

   }
}

/* パンくずリスト　ここから */
.breadcrumbs {
   margin: 10px;
}

/* パンくずリスト　ここまで */
/* フッターここから */
footer {
   background-image: url(../mrc-renewal/assets/img/background_img1.webp);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   padding: 10px 10px;

   @media (min-width: 1024px) {
      padding: 10px 20px;
   }

   .footer_top .logo {
      @media (min-width: 1024px) {
         width: 300px;
      }
   }

   .footer_middle {
      @media (min-width: 1024px) {
         display: flex;
         justify-content: space-between;
      }

      .left {
         @media (min-width: 1024px) {
            width: 50%;
            margin-right: 30px;
         }

         .inquiry_block {
            .telbtn {
               display: flex;
               justify-content: center;
               align-items: center;
               background-color: var(--color_primary);
               padding: 10px;
               color: var(--color_white);
               border-radius: 10px;
               margin: 10px;

               @media (min-width: 1024px) {
                  width: 300px;
                  margin: 10px auto;
               }

               img {
                  width: 20px;
                  margin-right: 5px;
               }
            }

            .mailbtn {
               display: flex;
               justify-content: center;
               align-items: center;
               background-color: var(--color_primary);
               padding: 10px;
               color: var(--color_white);
               border-radius: 10px;
               margin: 10px;

               @media (min-width: 1024px) {
                  width: 300px;
                  margin: 10px auto;
               }

               img {
                  width: 18px;
                  margin-right: 5px;
               }
            }
         }
      }

      .right {
         @media (min-width: 1024px) {
            width: 50%;
         }
      }
   }

   .footer_bottom {
      margin: 30px 0 50px;

      .columns {
         @media (min-width: 1024px) {
            display: flex;
            justify-content: space-between;
         }

         @media (min-width: 1280px) {
            flex-direction: column;
         }

         .banner_block {
            @media (min-width: 1024px) {
               width: 500px;
            }

            @media (min-width: 1280px) {
               width: 100%;
            }

            ul {
               display: flex;
               flex-wrap: wrap;
               justify-content: space-around;

               @media (min-width: 1024px) {
                  justify-content: end;
               }

               @media (min-width: 1280px) {
                  justify-content: center;
                  gap: 8px;
               }

               li {
                  width: 45.4545454545%;
                  margin: 5px;

                  @media (min-width: 1024px) {
                     width: 47.619047619%;
                  }

                  @media (min-width: 1280px) {
                     flex: 0 0 200px;
                     width: 200px;
                     margin: 0;
                  }
               }
            }
         }
      }

      .footer_menu {
         @media (min-width: 1024px) {
            margin-top: 0;
         }

         @media (min-width: 1280px) {
            display: flex;
            width: 100%;
         }

         li {
            margin: 2px 0;

            @media (min-width: 1280px) {
               margin: 2px 8px;
            }

            a {
               font-weight: var(--fontweight_bold);
            }

            .arrow {
               a {
                  font-weight: var(--fontweight_normal);
               }
            }


            .columns .footer_menu>li:nth-child(5) {
               @media (min-width: 1280px) {
                  margin-left: 18px;
               }
            }

            .footerbottomcolumns_ul_child {
               padding-left: 30px;
               margin: 10px 0;

               .arrow {
                  position: relative;

                  &:before,
                  &:after {
                     content: "";
                     position: absolute;
                     top: calc(50% - 1px);
                     left: -20px;
                     width: 10px;
                     height: 2px;
                     border-radius: 9999px;
                     background-color: var(--color_primary);
                     transform-origin: calc(100% - 1px) 50%;
                  }

                  &:before {
                     transform: rotate(45deg);
                  }

                  &:after {
                     transform: rotate(-45deg);
                  }
               }
            }
         }
      }

      .copyright_block {
         margin-top: 30px;

         ul {
            @media (min-width: 1024px) {
               display: flex;
               justify-content: center;
            }
         }

         .copyright {
            font-size: var(--fontsize_14);
            text-align: center;

            @media (min-width: 1024px) {
               margin-top: 0 !important;
               margin-right: 10px;
            }
         }

         .privacy_policy_block {
            font-size: var(--fontsize_14);
            display: flex;
            justify-content: center;

            .privacy {
               border-right: 1px solid var(--color_text);
               padding: 0 5px;
            }

            .policy {
               padding: 0 5px;
            }
         }
      }
   }

   .holiday {
      background-color: var(--color_primary);
      padding: 0 8px;
      color: var(--color_white);
   }

   .table1 {
      border: 1px solid var(--color_text);
   }

   .table1 {
      .trfirst {
         background-color: var(--color_primary);
         color: var(--color_white);

      }
   }

   .table1 {

      th,
      td {
         padding: 5px;
         text-align: center;

      }
   }

   .table1 {
      td {
         background-color: var(--color_white);

      }
   }
}

/* アーカイブページ　ここから */
#archive {
   margin-bottom: 60px;

   @media (min-width: 1024px) {
      margin-bottom: 0;
   }
}

#archive {
   article {
      margin: 10px 0;
      border-bottom: 1px solid var(--color_text);

   }
}

/*wp-pagenavi 17*/
.wp-pagenavi {
   clear: both;
   text-align: center;
   margin: 20px 0;
}

.wp-pagenavi {

   a,
   span {
      color: var(--color_primary);
      background-color: var(--color_white)FFF;
      padding: 8px 15px;
      margin: 0 2px;
      white-space: nowrap;
      -webkit-transition: 0.2s ease-in-out;
      -moz-transition: 0.2s ease-in-out;
      -o-transition: 0.2s ease-in-out;
      transition: 0.2s ease-in-out;
      text-align: center;
      text-decoration: none;
      border: thin dotted var(--color_primary);

   }
}

.wp-pagenavi {
   a:hover {
      color: var(--color_white);
      background-color: var(--color_primary);

   }
}

.wp-pagenavi {
   span.current {
      color: var(--color_white);
      background-color: var(--color_primary);

   }
}

/* アーカイブページ　ここまで */
/* シングルページ　ここから */
.post_block {
   position: relative;
}

.post_block {
   .columns {
      @media (min-width: 1280px) {
         display: flex;
      }

   }
}

.post_block {
   .columns main {
      @media (min-width: 1280px) {
         width: 900px;
         padding-right: 30px;
      }

   }
}

.post_block {
   .columns #sidebar {
      @media (min-width: 1280px) {
         width: 300px;
      }

   }
}

.post_block {
   .columns #sidebar #new_article .title_list li {
      margin: 5px 0;

   }
}

.previous_next_post {
   display: flex;
   justify-content: space-between;
   margin: 20px 0;
}

.previous_next_post {
   .post_link {
      text-decoration: underline;

   }
}

/* シングルページ　ここまで */
#p_eap {
   .worries_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: space-between;
      }

   }
}

#p_eap {
   .worries_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin-left: 30px;
      }

   }
}

#p_eap {
   .worries_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_eap {
   .leave_it_to_me_block {
      font-size: var(--fontsize_20);

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block1 dt {
      position: relative;
      padding-left: 40px;
      border-bottom: 3px solid var(--color_accent_yellow);

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block1 dt:before {
      position: absolute;
      content: "1. ";
      left: 10px;
      top: 0px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block1 dd {
      margin-top: 10px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block2 dt {
      position: relative;
      padding-left: 40px;
      border-bottom: 3px solid var(--color_accent_yellow);

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block2 dt:before {
      position: absolute;
      content: "2. ";
      left: 10px;
      top: 0px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block2 dd {
      margin-top: 10px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block3 dt {
      position: relative;
      padding-left: 40px;
      border-bottom: 3px solid var(--color_accent_yellow);

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block3 dt:before {
      position: absolute;
      content: "3. ";
      left: 10px;
      top: 0px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block3 dd {
      margin-top: 10px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block4 dt {
      position: relative;
      padding-left: 40px;
      border-bottom: 3px solid var(--color_accent_yellow);

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block4 dt:before {
      position: absolute;
      content: "4. ";
      left: 10px;
      top: 0px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block4 dd {
      margin-top: 10px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block5 dt {
      position: relative;
      padding-left: 40px;
      border-bottom: 3px solid var(--color_accent_yellow);

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block5 dt:before {
      position: absolute;
      content: "5. ";
      left: 10px;
      top: 0px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block5 dd {
      margin-top: 10px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block6 dt {
      position: relative;
      padding-left: 40px;
      border-bottom: 3px solid var(--color_accent_yellow);

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block6 dt:before {
      position: absolute;
      content: "6. ";
      left: 10px;
      top: 0px;

   }
}

#p_eap {
   .leave_it_to_me_block .definition_list1 .definition_list_block6 dd {
      margin-top: 10px;

   }
}

#p_eap {
   .about_the_service_block {
      background-color: var(--color_surface);

   }
}

#p_eap {
   .about_the_service_block .about_the_eap_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#p_eap {
   .about_the_service_block .about_the_eap_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin-left: 30px;
      }

   }
}

#p_eap {
   .about_the_service_block .about_the_eap_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_eap {
   .about_the_service_block .zero_prevention_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#p_eap {
   .about_the_service_block .zero_prevention_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin-left: 30px;
      }

   }
}

#p_eap {
   .about_the_service_block .zero_prevention_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_eap {
   .about_the_service_block .merit_block {
      background-color: var(--color_surface_blue);

   }
}

#p_eap {
   .about_the_service_block .merit_block .p_heading2 {
      background-color: var(--color_white);
      padding: 10px;
      margin-bottom: 10px;

   }
}

#p_eap {
   .about_the_service_block .merit_block .index_support_record_ul {
      padding: 5px 20px;

   }
}

#p_eap {
   .about_the_service_block .point_paragraph {
      font-size: var(--fontsize_24);
      text-align: center;

   }
}

#p_eap {
   .about_the_service_block .point_paragraph span {
      border-bottom: 4px solid var(--color_accent_yellow);

   }
}

#p_eap {
   .about_the_service_block .point_paragraph img {
      width: 120px;
      margin: 60px auto 10px;

   }
}

#p_eap {
   .about_the_service_block .table_box {
      overflow-x: auto;
      width: 90%;
      -webkit-overflow-scrolling: touch;

      @media (min-width: 1024px) {
         width: 100%;
      }

   }
}

#p_eap {
   .about_the_service_block table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;

   }
}

#p_eap {

   .about_the_service_block th,
   .about_the_service_block td {
      vertical-align: middle;
      padding: 20px;
      border: 1px solid var(--color_text);
      color: var(--color_text);
      text-align: center;
      white-space: nowrap;

   }
}

#p_eap {
   .about_the_service_block th {
      background: var(--color_text);

   }
}

#p_eap {
   .about_the_service_block td {
      background: var(--color_white);

   }
}

#p_eap {
   .about_the_service_block .sticky {
      position: sticky;
      top: 0;
      left: 0;
      background: none;
      border-left: none;
      border-right: none;

   }
}

#p_eap {
   .about_the_service_block .sticky::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-left: 1px solid var(--color_text);
      border-right: 1px solid var(--color_text);
      background: var(--color_surface_blue);
      z-index: -1;

   }
}

#p_eap {
   .about_the_service_block .course_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#p_eap {
   .about_the_service_block .course_block .columns table {
      @media (min-width: 1024px) {
         width: 500px;
         margin-right: 30px;
      }

   }
}

#p_eap {
   .introduction_image_block {
      background-color: var(--color_surface_muted);

   }
}

#p_eap {
   .introduction_image_block .price {
      background-color: var(--color_primary);
      color: var(--color_white);
      padding: 5px 10px;
      display: inline-block;
      font-size: var(--fontsize_20);

   }
}

#p_eap {
   .introduction_image_block .definition_list {
      background-color: var(--color_white);
      padding: 30px;

   }
}

#p_eap {
   .introduction_image_block .definition_list .definition_list_block {
      font-size: var(--fontsize_20);
      margin: 20px 0;

      @media (min-width: 1280px) {
         display: flex;
         align-items: center;
         margin: 10px 0;
      }

   }
}

#p_eap {
   .introduction_image_block .definition_list .definition_list_block dt {
      background-color: var(--color_secondary);
      color: var(--color_white);
      display: flex;
      justify-content: center;
      padding: 0 8px;
      text-align: center;

      @media (min-width: 1280px) {
         margin-right: 10px;
      }

   }
}

#p_eap {
   .introduction_image_block .definition_list .definition_list_block dd {
      margin-top: 10px;

   }
}

#p_eap {
   .gaze_block p {
      text-align: center;

   }
}

#p_eap {
   .awareness_block {
      background-color: var(--color_surface);
      position: relative;

   }
}

#p_eap {
   .awareness_block:before {
      position: absolute;
      content: "";
      background: url(../mrc-renewal/assets/img/mrc_logo_only.svg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      width: 300px;
      height: 300px;
      top: 0;
      right: 0;
      opacity: 0.1;

      @media (min-width: 1024px) {
         width: 500px;
         height: 500px;
      }

   }
}

#p_eap {
   .awareness_block h2 {
      position: relative;

   }
}

#p_eap {
   .awareness_block .columns {
      position: relative;

      @media (min-width: 1024px) {
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
      }

   }
}

#p_eap {
   .awareness_block .columns p {
      background-color: var(--color_secondary_light);
      padding: 20px;
      margin: 20px;
      border-radius: 10px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: var(--fontsize_20);

      @media (min-width: 1024px) {
         width: 25%;
         margin: 10px;
      }

   }
}

#p_eap {
   .consultation_method_block .columns {
      @media (min-width: 1024px) {
         display: flex;
      }

   }
}

#p_eap {
   .consultation_method_block .columns .consultation_method_icon_block {
      text-align: center;

      @media (min-width: 1024px) {
         margin: 20px;
         width: 18.1818181818%;
      }

   }
}

#p_eap {
   .consultation_method_block .columns .consultation_method_icon_block .img_box_shadow_none {
      width: 120px;
      margin: 30px auto 10px;

      @media (min-width: 1024px) {
         width: 150px;
      }

   }
}

#p_eap {
   .consultation_method_block .columns .consultation_method_icon_block .img_box_shadow_none img {
      width: 120px;

      @media (min-width: 1024px) {
         width: 150px;
      }

   }
}

#p_eap {
   .consultation_method_block .columns .consultation_method_icon_block span {
      color: var(--color_primary);

   }
}

#p_stresscheck {
   .stresscheck_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: flex-start;
         justify-content: center;
      }

   }
}

#p_stresscheck {
   .stresscheck_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_stresscheck {
   .stresscheck_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_stresscheck {
   .stresscheck_merit_block {
      background-color: var(--color_surface);

   }
}

#p_stresscheck {
   .stresscheck_merit_block .columns {
      @media (min-width: 1024px) {
         display: flex;
      }

   }
}

#p_stresscheck {
   .stresscheck_merit_block .columns .stresscheck_icon_block {
      text-align: center;

      @media (min-width: 1024px) {
         margin: 20px;
         width: 18.1818181818%;
      }

   }
}

#p_stresscheck {
   .stresscheck_merit_block .columns .stresscheck_icon_block .img_box_shadow_none {
      width: 120px;
      margin: 30px auto 10px;

      @media (min-width: 1024px) {
         width: 150px;
      }

   }
}

#p_stresscheck {
   .stresscheck_merit_block .columns .stresscheck_icon_block .img_box_shadow_none img {
      width: 120px;

      @media (min-width: 1024px) {
         width: 150px;
      }

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions h3,
   .stresscheck_price_block .eighty_questions h3 {
      background-color: var(--color_surface_blue);
      padding: 20px;
      display: block;

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .plan h3,
   .stresscheck_price_block .eighty_questions .plan h3 {
      background-color: var(--color_white);
      border: 1px solid var(--color_secondary_light);
      padding: 0;

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns,
   .stresscheck_price_block .eighty_questions .columns {
      @media (min-width: 1024px) {
         display: flex;
         justify-content: center;
      }

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .plan_block,
   .stresscheck_price_block .eighty_questions .columns .plan_block {
      text-align: center;

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .left,
   .stresscheck_price_block .eighty_questions .columns .left {
      background-color: var(--color_surface);
      padding: 20px;
      padding: 20px;

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .left,
   .stresscheck_price_block .eighty_questions .columns .left {
      @media (min-width: 1024px) {
         padding: 20px;
         margin: 10px;
         width: 50%;
      }

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .right,
   .stresscheck_price_block .eighty_questions .columns .right {
      background-color: var(--color_surface);
      padding: 20px;

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .right,
   .stresscheck_price_block .eighty_questions .columns .right {
      @media (min-width: 1024px) {
         padding: 20px;
         margin: 10px;
         width: 50%;
      }

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .border_bottom_yellow span,
   .stresscheck_price_block .eighty_questions .columns .border_bottom_yellow span {
      @media (min-width: 1280px) {
         margin-left: 20px;
      }

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .pconly,
   .stresscheck_price_block .eighty_questions .columns .pconly {
      display: block;

   }
}

#p_stresscheck {

   .stresscheck_price_block .fifty_seven_questions .columns .pconly,
   .stresscheck_price_block .eighty_questions .columns .pconly {
      @media (min-width: 1280px) {
         display: none;
      }

   }
}

#p_stresscheck {
   .stresscheck_price_block .eighty_questions h3 {
      background-color: var(--color_secondary_light);

   }
}

#p_stresscheck {
   .highstress_interviews_block {
      background-color: var(--color_surface_muted);

   }
}

#p_stresscheck {
   .highstress_interviews_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_stresscheck {
   .highstress_interviews_block .columns .right .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin-left: 30px;
      }

   }
}

#p_stresscheck {
   .highstress_interviews_block .columns .right .img_box_shadow_none img {
      @media (min-width: 1024px) and (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_small_business_services {
   .small_business_services_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_small_business_services {
   .small_business_services_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_small_business_services {
   .small_business_services_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_small_business_services {
   .peace_of_mind_block {
      background-color: var(--color_surface);

   }
}

#p_small_business_services {
   .peace_of_mind_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_small_business_services {
   .peace_of_mind_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 30px 0 0;
      }

   }
}

#p_small_business_services {
   .peace_of_mind_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_small_business_services {
   .service_feature_block li {
      display: block;

      @media (min-width: 1024px) {
         padding-left: 80px;
      }

   }
}

#p_small_business_services {
   .service_feature_block li:before {
      top: 50%;
      transform: translateY(-50%);

      @media (min-width: 1024px) {
         width: 50px;
         height: 50px;
         line-height: 50px;
      }

   }
}

#p_small_business_services {
   .service_feature_block span {
      font-size: var(--fontsize_22);

   }
}

#p_small_business_services {
   .introduction_merit_block {
      background-color: var(--color_surface);

   }
}

#p_small_business_services {
   .introduction_merit_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_small_business_services {
   .introduction_merit_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_small_business_services {
   .introduction_merit_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_small_business_services {
   .small_business_services_price_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_small_business_services {
   .small_business_services_price_block .columns .left {
      @media (min-width: 1024px) {
         flex-grow: 1;
      }

   }
}

#p_small_business_services {
   .small_business_services_price_block .columns .left .price {
      background-color: var(--color_secondary_light);
      padding: 20px;
      font-size: var(--fontsize_20);

      @media (min-width: 1024px) {
         font-size: var(--fontsize_26);
      }

   }
}

#p_small_business_services {
   .small_business_services_price_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_small_business_services {
   .small_business_services_price_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_sangyoui {
   .sangyoui_general_affairs_worries_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_sangyoui {
   .sangyoui_general_affairs_worries_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_sangyoui {
   .sangyoui_general_affairs_worries_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_sangyoui {
   .sangyoui_worries_check_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_sangyoui {
   .sangyoui_worries_check_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_sangyoui {
   .sangyoui_worries_check_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_sangyoui {
   .service_feature_block li {
      display: block;

      @media (min-width: 1024px) {
         padding-left: 80px;
      }

   }
}

#p_sangyoui {
   .service_feature_block li:before {
      top: 50%;
      transform: translateY(-50%);

      @media (min-width: 1024px) {
         width: 50px;
         height: 50px;
         line-height: 50px;
      }

   }
}

#p_sangyoui {
   .service_feature_block span {
      font-size: var(--fontsize_22);

   }
}

#p_sangyoui {
   .introduction_merit_block {
      background-color: var(--color_surface);

   }
}

#p_sangyoui {
   .introduction_merit_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_sangyoui {
   .introduction_merit_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_sangyoui {
   .introduction_merit_block .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#p_sangyoui {
   .sangyoui_price_block .price_block .price_table {
      border: 1px solid var(--color_primary);

   }
}

#p_sangyoui {
   .sangyoui_price_block .price_block .price_table th {
      padding: 10px;
      background-color: var(--color_secondary_light);
      width: 180px;

      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_sangyoui {
   .sangyoui_price_block .price_block .price_table td {
      padding: 10px;
      background-color: var(--color_surface);
      text-align: right;

   }
}

#p_reason {
   .img_box_shadow_none img {
      object-fit: cover;
      height: 300px;

   }
}

#p_reason {
   .reason_block1 h2 {
      position: relative;

   }
}

#p_reason {
   .reason_block1 h2:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface);
      width: 80%;
      height: 600px;
      top: -20px;
      left: -20px;
      z-index: -1;

      @media (min-width: 768px) {
         left: -40px;
      }

      @media (min-width: 1024px) {
         width: 85%;
         height: 350px;
      }

   }
}

#p_reason {
   .reason_block1 h2:after {
      position: absolute;
      content: "REASON1";
      color: var(--color_white);
      font-size: 5rem;
      font-family: var(--font_family_accent);
      top: 0;
      left: -20px;
      z-index: -1;

      @media (min-width: 1024px) {
         font-size: 10rem;
         top: -20px;
      }

   }
}

#p_reason {
   .reason_block1 .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_reason {
   .reason_block1 .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_reason {
   .reason_block1 .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_reason {
   .reason_block2 h2 {
      position: relative;

   }
}

#p_reason {
   .reason_block2 h2:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface);
      width: 80%;
      height: 600px;
      top: -20px;
      right: -20px;
      z-index: -1;

      @media (min-width: 768px) {
         right: -40px;
      }

      @media (min-width: 1024px) {
         width: 85%;
         height: 350px;
      }

   }
}

#p_reason {
   .reason_block2 h2:after {
      position: absolute;
      content: "REASON2";
      color: var(--color_white);
      font-size: 5rem;
      font-family: var(--font_family_accent);
      top: 0;
      right: -20px;
      z-index: -1;

      @media (min-width: 1024px) {
         font-size: 10rem;
         top: -20px;
      }

   }
}

#p_reason {
   .reason_block2 .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_reason {
   .reason_block2 .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 30px 0 0;
      }

   }
}

#p_reason {
   .reason_block2 .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_reason {
   .reason_block3 h2 {
      position: relative;

   }
}

#p_reason {
   .reason_block3 h2:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface);
      width: 80%;
      height: 600px;
      top: -20px;
      left: -20px;
      z-index: -1;

      @media (min-width: 768px) {
         left: -40px;
      }

      @media (min-width: 1024px) {
         width: 85%;
         height: 350px;
      }

   }
}

#p_reason {
   .reason_block3 h2:after {
      position: absolute;
      content: "REASON3";
      color: var(--color_white);
      font-size: 5rem;
      font-family: var(--font_family_accent);
      top: 0;
      left: -20px;
      z-index: -1;

      @media (min-width: 1024px) {
         font-size: 10rem;
         top: -20px;
      }

   }
}

#p_reason {
   .reason_block3 .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_reason {
   .reason_block3 .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_reason {
   .reason_block3 .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_reason {
   .reason_block4 h2 {
      position: relative;

   }
}

#p_reason {
   .reason_block4 h2:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface);
      width: 80%;
      height: 600px;
      top: -20px;
      right: -20px;
      z-index: -1;

      @media (min-width: 768px) {
         right: -40px;
      }

      @media (min-width: 1024px) {
         width: 85%;
         height: 350px;
      }

   }
}

#p_reason {
   .reason_block4 h2:after {
      position: absolute;
      content: "REASON4";
      color: var(--color_white);
      font-size: 5rem;
      font-family: var(--font_family_accent);
      top: 0;
      right: -20px;
      z-index: -1;

      @media (min-width: 1024px) {
         font-size: 10rem;
         top: -20px;
      }

   }
}

#p_reason {
   .reason_block4 .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_reason {
   .reason_block4 .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 30px 0 0;
      }

   }
}

#p_reason {
   .reason_block4 .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_reason {
   .reason_block5 h2 {
      position: relative;

   }
}

#p_reason {
   .reason_block5 h2:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface);
      width: 80%;
      height: 600px;
      top: -20px;
      left: -20px;
      z-index: -1;

      @media (min-width: 768px) {
         left: -40px;
      }

      @media (min-width: 1024px) {
         width: 85%;
         height: 350px;
      }

   }
}

#p_reason {
   .reason_block5 h2:after {
      position: absolute;
      content: "REASON5";
      color: var(--color_white);
      font-size: 5rem;
      font-family: var(--font_family_accent);
      top: 0;
      left: -20px;
      z-index: -1;

      @media (min-width: 1024px) {
         font-size: 10rem;
         top: -20px;
      }

   }
}

#p_reason {
   .reason_block5 .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         justify-content: center;
      }

   }
}

#p_reason {
   .reason_block5 .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 0 0 0 30px;
      }

   }
}

#p_reason {
   .reason_block5 .columns .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_company {
   .company_access_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#p_company {
   .company_access_block .columns .left {
      @media (min-width: 1024px) {
         flex-grow: 1;
      }

   }
}

#p_company {
   .company_access_block .columns .right {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_company {
   .company_access_block .columns .right .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 30px 0 30px 30px;
      }

   }
}

#p_company {
   .company_access_block .columns .right .img_box_shadow_none img {
      object-fit: cover;
      height: 300px;

   }
}

#p_company {
   .company_outline_block .definition_list {
      padding: 0;

   }
}

#p_company {
   .company_outline_block .definition_list .definition_list_block {
      margin: 20px 0;

   }
}

#p_company {
   .company_outline_block .definition_list .definition_list_block dt {
      text-align: center;
      display: block;

      @media (min-width: 1024px) {
         margin-bottom: 10px;
      }

   }
}

#p_company {
   .company_outline_block .definition_list .definition_list_block dd {
      @media (min-width: 1024px) {
         margin-top: 0;
      }

   }
}

#p_company {
   .company_outline_block .definition_list .definition_list_block span {
      font-size: var(--fontsize_22);

   }
}

#p_company {
   .greeting_block .float_block {
      @media (min-width: 1024px) {
         overflow: hidden;
      }

   }
}

#p_company {
   .greeting_block .float_block .left {
      @media (min-width: 1024px) {
         float: left;
      }

   }
}

#p_company {
   .greeting_block .float_block .left .img {
      @media (min-width: 1024px) and (min-width: 1024px) {
         margin: 0 30px 0 0;
      }

   }
}

#p_company {
   .greeting_block .float_block .left .img img {
      box-shadow: 10px 10px var(--color_primary_shadow);

      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#p_company {
   .greeting_block .float_block .right .border_bottom_yellow {
      padding-bottom: 5px;

   }
}

#p_company {
   .greeting_block .float_block .right .markerunder {
      font-size: var(--fontsize_16);

   }
}

#p_company {
   .greeting_block .columns {
      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#p_company {
   .greeting_block .columns .left {
      @media (min-width: 1024px) {
         margin-right: 30px;
      }

   }
}

#p_company {
   .greeting_block .columns .right .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin: 30px 0 10px;
      }

   }
}

#p_company {
   .greeting_block .columns .right .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 200px;
      }

   }
}

#p_company {
   .greeting_block .columns .chiefname {
      font-size: var(--fontsize_20);

   }
}

#p_privacy {
   .blue_circle_unorder {
      font-size: var(--fontsize_16);

   }
}

#p_privacy {
   .blue_circle_unorder li:before {
      font-size: var(--fontsize_16);

   }
}

#p_policy {
   .blue_circle_unorder {
      font-size: var(--fontsize_16);

   }
}

#p_policy {
   .blue_circle_unorder li:before {
      font-size: var(--fontsize_16);

   }
}


/* ==========================================================
   Hero Section
   ========================================================== */

.sdgs_hero {
   background: #fdfbf4;
   isolation: isolate;
   min-height: 610px;
   overflow: hidden;
   padding: 72px 20px 56px;
   position: relative;

   @media (min-width: 768px) {
      min-height: 660px;
      padding: 80px 40px 72px;
   }

   @media (min-width: 1024px) {
      min-height: 690px;
      padding: 80px 60px;
   }

   @media (min-width: 1280px) {
      min-height: 721px;
      padding: 80px 0;
   }


   &:before {
      background-image: url("../mrc-renewal/assets/img/sdgs_hero_bg.webp");
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      content: "";
      inset: 0;
      opacity: 0.25;
      position: absolute;
      transform: scaleX(-1);
      z-index: -1;
   }


   .sdgs_hero_inner {
      margin: 0 auto;
      max-width: 870px;

      @media (min-width: 1024px) {
         align-items: center;
         display: flex;
         flex-direction: column;
         gap: 60px;
      }
   }

   .sdgs_hero_heading {
      margin: 0 auto 40px;
      max-width: 626px;
      text-align: center;

      @media (min-width: 768px) {
         margin-bottom: 60px;
      }

      @media (min-width: 1024px) {
         margin: 0;
      }
   }

   .sdgs_hero_title {
      font-size: 3rem;
      font-weight: var(--fontweight_bold);
      letter-spacing: 0.05em;
      line-height: 1.35;
      margin: 0;
      overflow-wrap: anywhere;
      white-space: normal;

      @media (min-width: 768px) {
         font-size: 3.8rem;
      }

      @media (min-width: 1024px) {
         font-size: 4.4rem;
      }

      @media (min-width: 1280px) {
         font-size: 4.8rem;
      }
   }

   .sdgs_hero_subtitle {
      font-size: 1.7rem;
      line-height: 1.65;
      margin-top: 20px;
      overflow-wrap: anywhere;
      text-align: center;
      white-space: normal;

      @media (min-width: 768px) {
         font-size: var(--fontsize_20);
      }

      @media (min-width: 1024px) {
         font-size: var(--fontsize_22);
      }

      @media (min-width: 1280px) {
         font-size: var(--fontsize_24);
      }
   }

   .sdgs_hero_intro {
      font-size: 1.5rem;
      line-height: 1.8;
      overflow-wrap: anywhere;

      @media (min-width: 768px) {
         font-size: var(--fontsize_16);
      }

      @media (min-width: 1024px) {
         width: 100%;
      }
   }

   .sdgs_hero_principles {
      background: rgba(255, 255, 255, 0.92);
      margin: 22px 0;
      padding: 20px;
   }

   .sdgs_hero_principles {
      p+p {
         margin-top: 9px;

      }
   }

   .sdgs_hero_principles {
      @media (min-width: 768px) {
         padding: 26px 34px;
      }

      @media (min-width: 1280px) {
         min-height: 152px;
         padding: 30px 45px;
      }
   }
}

/* ==========================================================
   Activity Section
   ========================================================== */
.sdgs_activity {
   isolation: isolate;
   overflow: hidden;
   padding: 76px 20px 100px;
   margin-bottom: 100px;
   position: relative;

   @media (min-width: 768px) {
      padding: 86px 40px 100px;
      margin-bottom: 120px;
   }

   @media (min-width: 1024px) {
      padding: 96px 60px 100px;
   }

   @media (min-width: 1280px) {
      padding: 100px 0 130px;
   }
}

.sdgs_activity::before {
   position: absolute;
   content: "";
   background-image: url("../mrc-renewal/assets/img/sdgs_activity_bg.webp");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   inset: 0;
   opacity: 0.25;
   top: 180px;
   left: 70px;
   z-index: -1;

   @media (min-width: 768px) {
      left: 180px;
   }

   @media (min-width: 1280px) {
      left: 500px;
   }
}


.sdgs_activity_inner {
   margin: 0 auto;
   max-width: 874px;
}

.sdgs_activity_title {
   display: inline-block;
   position: relative;
   font-size: var(--fontsize_22);
   line-height: 1.55;
   margin-bottom: 34px;
   max-width: 100%;
   min-height: 69px;
   padding: 23px 0 0 20px;
   width: fit-content;
}

.sdgs_activity_title::before {
   background: url("../mrc-renewal/assets/img/sdgs_heading_brush.svg") left top / 161px 69px no-repeat;
   position: absolute;
   content: "";
   width: 161px;
   height: 69px;
   left: 0;
   top: 0;
   z-index: 0;
}

.sdgs_activity_title {
   span {
      display: block;
      position: relative;
      z-index: 1;
   }
}

.sdgs_activity_title {
   @media (min-width: 768px) {
      font-size: var(--fontsize_24);
   }

   @media (min-width: 1024px) {
      margin-bottom: 40px;
   }
}

.sdgs_activity_content {
   font-size: 1.5rem;
   line-height: 1.8;
   overflow-wrap: anywhere;
   margin-top: 24px;

   @media (min-width: 768px) {
      font-size: var(--fontsize_16);
   }

   @media (min-width: 1024px) {
      line-height: 1.63;
   }
}

.sdgs_activity_copy {
   p+p {
      margin-top: 8px;

   }
}

.sdgs_activity_copy {
   strong {
      font-weight: var(--fontweight_bold);

   }
}

.sdgs_activity_teams {
   align-items: stretch;
   display: flex;
   gap: 24px;
   margin: 34px 0;

   @media (min-width: 1024px) {
      margin: 58px 0;
   }
}

.sdgs_activity_teams::before {
   background: #90dd14;
   content: "";
   flex: 0 0 3px;
   width: 3px;
}

.sdgs_activity_teams {
   ul {
      display: grid;
      gap: 11px;
      list-style: none;
      padding: 0;

   }
}

.sdgs_activity_teams {
   li {
      font-size: var(--fontsize_20);
      line-height: 1.35;

      @media (min-width: 768px) {
         font-size: 2.3rem;
      }

      @media (min-width: 1024px) {
         font-size: 2.617rem;
      }

   }
}

/* ==========================================================
   Intro Banner Section
   ========================================================== */
.sdgs_intro_banner {
   margin: 0;
   padding: 0 0 50px;

}

.sdgs_intro_banner_visual {
   height: 220px;
   overflow: visible;
   position: relative;
   width: min(88%, 1015px);
}

.sdgs_intro_banner_visual::after {
   background: linear-gradient(90deg, rgba(7, 37, 50, 0.05), rgba(7, 37, 50, 0.58));
   content: "";
   inset: 0;
   pointer-events: none;
   position: absolute;
}

.sdgs_intro_banner_visual {
   @media (min-width: 768px) {
      height: 199px;
      width: min(90%, 1015px);
   }

   @media (min-width: 1024px) {
      margin-left: max(0px, (100vw - 1440px) / 2);
      width: min(70.5vw, 1015px);
   }
}

.sdgs_intro_banner_photo {
   height: 100%;
   object-fit: cover;
   object-position: center;
   width: 100%;
}

.sdgs_intro_banner_title {
   color: var(--color_white);
   font-size: var(--fontsize_22);
   font-weight: var(--fontweight_bold);
   line-height: 1.45;
   margin: 0;
   position: absolute;
   right: 7%;
   text-align: left;
   top: 50%;
   transform: translateY(-50%);
   z-index: 1;
}

.sdgs_intro_banner_title::before {
   background: url("../mrc-renewal/assets/img/sdgs_activity_corner_start.svg") left top / 96px 47px no-repeat;
   content: "";
   height: 47px;
   pointer-events: none;
   position: absolute;
   top: -48px;
   left: -40px;
   width: 96px;
   z-index: 0;

   @media (min-width: 1024px) {
      top: -68px;
   }
}

.sdgs_intro_banner_title::after {
   background: url("../mrc-renewal/assets/img/sdgs_activity_corner_end.svg") left top / 96px 47px no-repeat;
   content: "";
   height: 47px;
   pointer-events: none;
   position: absolute;
   transform: rotate(180deg);
   bottom: -33px;
   right: -58px;
   width: 96px;
   z-index: 0;

   @media (min-width: 768px) {
      right: -68px;
   }

   @media (min-width: 1024px) {
      bottom: -68px;
      right: -58px;
   }
}

.sdgs_intro_banner_title {
   span {
      font-size: 4.4rem;
      font-weight: var(--fontweight_bold);
      margin-top: -26px;
      letter-spacing: 0.04em;

      @media (min-width: 768px) {
         font-size: 5.4rem;
      }

      @media (min-width: 1024px) {
         font-size: 6.4rem;
      }

   }
}

.sdgs_intro_banner_title {
   @media (min-width: 768px) {
      font-size: var(--fontsize_28);
   }

   @media (min-width: 1024px) {
      font-size: var(--fontsize_32);
      right: 10%;
   }
}

/* ==========================================================
   Gallery Section
   ========================================================== */
.sdgs_gallery {
   isolation: isolate;
   overflow: hidden;
   padding: 0px 20px 80px;
   position: relative;

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

   @media (min-width: 1024px) {
      padding: 0 60px 80px;
   }

   @media (min-width: 1280px) {
      padding-bottom: 100px;
   }
}

.sdgs_gallery::before {
   position: absolute;
   content: "";
   background-image: url("../mrc-renewal/assets/img/sdgs_gallery_bg.webp");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   inset: -40px 0 0;
   /* opacity: 0.1; */
   top: 200px;
   left: 50px;
   height: auto;
   z-index: -1;

   @media (min-width: 768px) {
      left: 20%;
      top: 250px;
   }

   @media (min-width: 1024px) {
      left: calc(50% - 358px);
      top: 290px;
   }
}


.sdgs_gallery_inner {
   margin: 0 auto;
   max-width: 874px;
}

.sdgs_gallery_title {
   align-items: center;
   background: #4da0e3;
   border-radius: 50px;
   color: var(--color_white)fff;
   display: flex;
   font-size: var(--fontsize_16);
   justify-content: center;
   line-height: 1.45;
   margin: 30px auto 54px !important;
   max-width: 100%;
   min-height: 55px;
   padding: 12px 22px 10px;
   position: relative;
   text-align: center;
   width: fit-content;
}

.sdgs_gallery_title {
   img {
      height: 88px;
      left: 50%;
      max-width: none;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 264px;
      z-index: -1;

   }
}

.sdgs_gallery_title {
   span {
      position: relative;
      color: var(--color_white);
   }
}

.sdgs_gallery_title {
   @media (min-width: 768px) {
      font-size: var(--fontsize_18);
   }

   @media (min-width: 1024px) {
      font-size: var(--fontsize_20);
      margin-bottom: 56px;
      min-width: 469px;
   }
}




.sdgs_gallery_row {
   display: grid;
   gap: 54px 36px;
   justify-items: center;
   list-style: none;
   margin: 0;
   padding: 0;
}

.sdgs_gallery_row {
   &+.sdgs_gallery_row {
      margin-top: 66px;

      @media (min-width: 1024px) {
         margin-top: 123px;
      }

   }
}

.sdgs_gallery_row {
   @media (min-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   @media (min-width: 1024px) {
      gap: 88px;
   }
}

.sdgs_gallery_row_upper {
   li:last-child {
      @media (min-width: 768px) {
         grid-column: 1/-1;
      }

   }
}

.sdgs_gallery_row_upper {
   @media (min-width: 1024px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

.sdgs_gallery_row_upper {
   li:last-child {
      @media (min-width: 1024px) {
         grid-column: auto;
      }

   }
}

.sdgs_gallery_row_lower {
   @media (min-width: 1024px) {
      grid-template-columns: repeat(2, 220px);
      justify-content: center;
   }
}

.sdgs_gallery_item {
   align-items: center;
   display: flex;
   flex-direction: column;
   margin: 0;
   max-width: 220px;
}

.sdgs_gallery_item {
   img {
      box-shadow: 4px 4px 10px rgba(155, 174, 177, 0.25);
      height: auto;
      width: min(220px, 68vw);

   }
}

.sdgs_gallery_item {
   figcaption {
      font-size: var(--fontsize_14);
      line-height: 1.6;
      margin-top: 20px;
      text-align: center;

      @media (min-width: 768px) {
         font-size: var(--fontsize_16);
      }

      @media (min-width: 1024px) {
         margin-top: 30px;
      }

   }
}



.sdgs_gallery_contact {
   font-size: var(--fontsize_14);
   line-height: 1.8;
   margin: 92px auto 0;
   max-width: 874px;
   overflow-wrap: anywhere;

   @media (min-width: 768px) {
      font-size: var(--fontsize_16);
   }

   @media (min-width: 1024px) {
      margin-top: 154px;
   }
}

.sdgs_gallery_contact {
   address {
      font-size: var(--fontsize_14);
      font-style: normal;
      line-height: 1.8;
      margin-top: 18px;

      @media (min-width: 768px) {
         font-size: var(--fontsize_16);
      }

   }
}

.sdgs_gallery_contact {
   address a {
      display: block;
      text-decoration: underline;
      text-underline-offset: 2px;
      width: fit-content;

   }
}


/* ==========================================================
   About Section
   ========================================================== */
.sdgs_about {
   background: var(--color_accent_teal);
   color: var(--color_white)fff;
   padding: 60px 20px;
   margin-top: 100px;

   @media (min-width: 768px) {
      padding: 70px 40px;
   }

   @media (min-width: 1024px) {
      padding: 60px;
   }

   @media (min-width: 1280px) {
      padding: 60px 0;
   }
}

.sdgs_about_inner {
   margin: 0 auto;
   max-width: 1100px;

   @media (min-width: 1024px) {
      align-items: center;
      display: grid;
      gap: 50px;
      grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr);
   }

   @media (min-width: 1280px) {
      gap: 74px;
      grid-template-columns: 474px 552px;
   }
}

.sdgs_about_copy {
   h2 {
      font-size: var(--fontsize_20);
      color: var(--color_white);
      font-weight: var(--fontweight_bold);
      line-height: 1.5;
      margin-bottom: 18px;

      @media (min-width: 768px) {
         font-size: var(--fontsize_20);
         /* Keep as is from original css */
      }

   }
}

.sdgs_about {
   blockquote {
      min-height: 126px;
      padding: 30px 20px 24px;
      position: relative;

   }
}

.sdgs_about {
   blockquote p {
      font-size: var(--fontsize_14);
      color: var(--color_white);
      font-style: italic;
      letter-spacing: 0.05em;
      line-height: 1.75;
      overflow-wrap: anywhere;
      text-align: justify;

      @media (min-width: 768px) {
         font-size: var(--fontsize_14);
      }

   }
}

.sdgs_about_quote {
   max-width: none;
   position: absolute;
   width: 24px;
}

.sdgs_about_quote_open {
   left: 0;
   top: 0;
   transform: rotate(180deg);
}

.sdgs_about_quote_close {
   bottom: 0;
   right: 0;
}

.sdgs_about_goals {
   margin: 38px auto 0;
   max-width: 552px;
   width: 100%;

   @media (min-width: 768px) {
      margin-top: 46px;
   }

   @media (min-width: 1024px) {
      margin: 0;
   }
}

/* ==========================================================
   SDGs Gallery Popup Modal
   ========================================================== */
.sdgs_gallery_slider_button,
.sdgs_gallery_modal_close {
   align-items: center;
   appearance: none;
   background: var(--color_primary);
   border: 0;
   border-radius: 0;
   box-shadow: none;
   color: var(--color_white);
   display: inline-flex;
   justify-content: center;
}

.sdgs_gallery_slider_button:focus-visible,
.sdgs_gallery_modal_close:focus-visible {
   outline: 3px solid var(--color_accent_yellow_alt);
   outline-offset: 3px;
}

.sdgs_gallery_trigger {
   background: transparent;
   border: 0;
   cursor: zoom-in;
   display: block;
   padding: 0;
}

.sdgs_gallery_trigger:focus-visible {
   outline: 3px solid var(--color_accent_teal);
   outline-offset: 5px;
}

body.sdgs_gallery_modal_open {
   overflow: hidden;
}

.sdgs_gallery_modal {
   align-items: center;
   background: rgba(0, 0, 0, 0.58);
   display: flex;
   inset: 0;
   justify-content: center;
   padding: 24px;
   position: fixed;
   z-index: 10000;
}

.sdgs_gallery_modal[hidden] {
   display: none;
}

.sdgs_gallery_modal {

   &,
   * {
      box-sizing: border-box;

   }
}

.sdgs_gallery_modal_panel {
   background: var(--color_white)fff;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
   display: grid;
   grid-template-rows: minmax(0, 1fr) auto;
   height: min(500px, 100dvh - 48px);
   max-width: 900px;
   padding: 48px 24px 22px;
   position: relative;
   width: min(900px, 100vw - 48px);

   @media (min-width: 768px) {
      padding: 48px 54px 22px;
   }
}

.sdgs_gallery_modal_title {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   position: absolute;
   white-space: nowrap;
   width: 1px;
}

.sdgs_gallery_modal_close {
   font-size: var(--fontsize_28);
   height: 36px;
   line-height: 1;
   position: absolute;
   right: 12px;
   top: 12px;
   width: 36px;
}

.sdgs_gallery_slider {
   align-items: center;
   display: grid;
   gap: 10px;
   grid-template-columns: 36px minmax(0, 1fr) 36px;
   min-height: 0;

   @media (min-width: 768px) {
      gap: 18px;
      grid-template-columns: 48px minmax(0, 1fr) 48px;
   }
}

.sdgs_gallery_slider_viewport {
   align-items: center;
   background: var(--color_white)fff;
   display: flex;
   height: 100%;
   justify-content: center;
   min-width: 0;
   overflow: hidden;
}

.sdgs_gallery_slider_image {
   display: block;
   height: auto;
   max-height: 100%;
   max-width: 100%;
   object-fit: contain;
   width: auto;
}

.sdgs_gallery_slider_button {
   font-size: 3rem;
   height: 36px;
   line-height: 1;
   padding: 0;
   width: 36px;
}

.sdgs_gallery_slider_button[hidden] {
   visibility: hidden;
}

.sdgs_gallery_slider_button {
   @media (min-width: 768px) {
      height: 48px;
      width: 48px;
   }
}

.sdgs_gallery_slider_counter {
   color: var(--color_text);
   font-size: var(--fontsize_14);
   line-height: 1;
   margin: 12px 0 0;
   min-height: 1em;
   text-align: center;
}

#index_service {
   background-color: var(--color_surface);
}

#index_service {
   h2 {
      justify-content: left;

   }
}

#index_service {
   .en_title {
      position: relative;
      padding: 5px 26px 5px 42px;
      background: var(--color_secondary);
      color: var(--color_white);
      margin-left: -33px;
      line-height: 1.3;
      border-bottom: solid 3px var(--color_primary);
      margin: 0 auto;
      text-align: center;
      font-size: var(--fontsize_26);
      margin-left: -10px;
      margin-bottom: 60px;

      @media (min-width: 768px) {
         margin: 0 auto 60px;
      }

   }
}

#index_service {
   .en_title:before {
      position: absolute;
      content: "";
      left: -2px;
      top: -2px;
      width: 0;
      height: 0;
      border: none;
      border-left: solid 40px var(--color_surface_muted);
      border-bottom: solid 89px transparent;

   }
}

#index_service {
   .en_title:after {
      position: absolute;
      content: "";
      right: -3px;
      top: -7px;
      width: 0;
      height: 0;
      border: none;
      border-left: solid 40px transparent;
      border-bottom: solid 89px var(--color_surface_muted);

   }
}

#index_service {
   .eap_columns {
      position: relative;
      z-index: 1;

      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#index_service {
   .eap_columns:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface_blue);
      width: 80%;
      height: 200px;
      top: -40px;
      left: -20px;
      z-index: 1;

      @media (min-width: 768px) {
         left: -40px;
      }

      @media (min-width: 1280px) {
         width: 50%;
         top: -10px;
         left: 80px;
      }

   }
}

#index_service {
   .eap_columns:after {
      position: absolute;
      content: "";
      background-color: var(--color_white);
      width: 100%;
      height: 250px;
      top: 120px;
      right: -20px;

      @media (min-width: 1024px) {
         height: 310px;
      }

      @media (min-width: 1280px) {
         width: 90%;
         right: -40px;
      }

   }
}

#index_service {
   .eap_columns .left {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .eap_columns .right {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .eap_columns .right .video video {
      width: 100%;
      height: auto;

      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#index_service {
   .eap_columns .img {
      margin-left: 40px;

      @media (min-width: 1024px) {
         margin: 40px;
      }

   }
}

#index_service {
   .eap_columns .img img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#index_service {
   .eap_columns p {
      text-shadow: 1px 1px 2px var(--color_white);
      font-size: var(--fontsize_20);

   }
}

#index_service {
   .stress_check_columns {
      position: relative;
      z-index: 1;

      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         flex-direction: row-reverse;
      }

   }
}

#index_service {
   .stress_check_columns:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface_blue);
      width: 80%;
      height: 200px;
      top: -40px;
      right: -20px;
      z-index: 1;

      @media (min-width: 768px) {
         right: -40px;
      }

      @media (min-width: 1280px) {
         width: 50%;
         top: -10px;
         right: 80px;
      }

   }
}

#index_service {
   .stress_check_columns:after {
      position: absolute;
      content: "";
      background-color: var(--color_white);
      width: 100%;
      height: 250px;
      top: 120px;
      left: -20px;

      @media (min-width: 1024px) {
         height: 310px;
      }

      @media (min-width: 1280px) {
         width: 90%;
         left: -40px;
      }

   }
}

#index_service {
   .stress_check_columns .left {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .stress_check_columns .right {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .stress_check_columns .img {
      margin-right: 40px;

      @media (min-width: 1024px) {
         margin: 40px;
      }

   }
}

#index_service {
   .stress_check_columns .img img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#index_service {
   .stress_check_columns p {
      text-shadow: 1px 1px 2px var(--color_white);
      font-size: var(--fontsize_20);

   }
}

#index_service {
   .small_business_services_columns {
      position: relative;
      z-index: 1;

      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#index_service {
   .small_business_services_columns:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface_blue);
      width: 80%;
      height: 200px;
      top: -40px;
      left: -20px;
      z-index: 1;

      @media (min-width: 768px) {
         left: -40px;
      }

      @media (min-width: 1280px) {
         width: 50%;
         top: -10px;
         left: 80px;
      }

   }
}

#index_service {
   .small_business_services_columns:after {
      position: absolute;
      content: "";
      background-color: var(--color_white);
      width: 100%;
      height: 250px;
      top: 120px;
      right: -20px;

      @media (min-width: 1024px) {
         height: 310px;
      }

      @media (min-width: 1280px) {
         width: 90%;
         right: -40px;
      }

   }
}

#index_service {
   .small_business_services_columns .left {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .small_business_services_columns .right {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .small_business_services_columns .img {
      margin-left: 40px;

      @media (min-width: 1024px) {
         margin: 40px;
      }

   }
}

#index_service {
   .small_business_services_columns .img img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#index_service {
   .small_business_services_columns p {
      text-shadow: 1px 1px 2px var(--color_white);
      font-size: var(--fontsize_20);

   }
}

#index_service {
   .sangyoui_columns {
      position: relative;
      z-index: 1;

      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
         flex-direction: row-reverse;
      }

   }
}

#index_service {
   .sangyoui_columns:before {
      position: absolute;
      content: "";
      background-color: var(--color_surface_blue);
      width: 80%;
      height: 200px;
      top: -40px;
      right: -20px;
      z-index: 1;

      @media (min-width: 768px) {
         right: -40px;
      }

      @media (min-width: 1280px) {
         width: 50%;
         top: -10px;
         right: 80px;
      }

   }
}

#index_service {
   .sangyoui_columns:after {
      position: absolute;
      content: "";
      background-color: var(--color_white);
      width: 100%;
      height: 250px;
      top: 120px;
      left: -20px;

      @media (min-width: 1024px) {
         height: 310px;
      }

      @media (min-width: 1280px) {
         width: 90%;
         right: -40px;
      }

   }
}

#index_service {
   .sangyoui_columns .left {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .sangyoui_columns .right {
      position: relative;
      z-index: 1;

   }
}

#index_service {
   .sangyoui_columns .img {
      margin-right: 40px;

      @media (min-width: 1024px) {
         margin: 40px;
      }

   }
}

#index_service {
   .sangyoui_columns .img img {
      @media (min-width: 1024px) {
         width: 500px;
      }

   }
}

#index_service {
   .sangyoui_columns p {
      text-shadow: 1px 1px 2px var(--color_white);
      font-size: var(--fontsize_20);

   }
}

#index_feature {
   background-color: var(--color_surface_muted);
   border-top: double var(--color_primary);
   border-bottom: double var(--color_primary);
}

#index_feature {
   .index_feature_columns {
      text-align: center;

      @media (min-width: 1024px) {
         display: flex;
         justify-content: center;
      }

   }
}

#index_feature {
   .index_feature_columns span {
      font-size: var(--fontsize_24);

   }
}

#index_feature {
   .index_feature_columns .feature_block {
      margin: 50px 0;

      @media (min-width: 1024px) {
         margin: 50px 20px;
      }

   }
}

#index_feature {
   .img_box_shadow_blue {
      margin: 10px 0 30px;

   }
}

#index_feature {
   .img_box_shadow_blue img {
      @media (min-width: 1024px) {
         width: 300px;
      }

   }
}

#index_introduction_example {
   background: var(--color_white)FFF;
   background: linear-gradient(105deg, var(--color_white) 20%, rgb(217, 240, 255) 100%);
}

#index_introduction_example {
   .en_title span {
      font-family: var(--font_family_base);

   }
}

#index_introduction_example {
   .index_introduction_example_block .columns {
      margin: 50px 0;

      @media (min-width: 1024px) {
         display: flex;
         align-items: center;
      }

   }
}

#index_introduction_example {
   .index_introduction_example_block .columns .img_box_shadow_none {
      @media (min-width: 1024px) {
         margin-right: 30px;
      }

   }
}

#index_introduction_example {
   .index_introduction_example_block .columns .img_box_shadow_none img {
      margin: 0 auto;
      border-radius: 100px;
      width: 200px;
      height: 200px;
      object-fit: cover;

   }
}

#index_introduction_example {
   .index_introduction_example_block .columns .example {
      font-weight: var(--fontweight_bold);

   }
}

#index_introduction_example {
   .btn_line a {
      @media (min-width: 1024px) {
         margin: 30px auto;
      }

   }
}

#index_support_record {
   .columns .index_support_record_ul {
      font-size: var(--fontsize_20);

   }
}

#index_support_record {
   .columns .index_support_record_ul li {
      margin: 5px 0;
      display: flex;
      justify-content: left;
      align-items: center;

   }
}

#index_support_record {
   .columns .index_support_record_ul li img {
      width: 30px;
      margin-right: 5px;

   }
}

#index_support_record {
   .img_box_shadow_none {
      @media (min-width: 1024px) {
         width: 600px;
         margin: 30px auto;
      }

   }
}

#index_support_record {
   .img_box_shadow_none img {
      @media (min-width: 1024px) {
         width: 600px;
      }

   }
}

#index_qa {
   background-color: var(--color_surface);
   position: relative;
}

#index_qa:before {
   position: absolute;
   content: "";
   background: url(../mrc-renewal/assets/img/mrc_logo_only.svg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   width: 300px;
   height: 300px;
   top: 0;
   right: 0;
   opacity: 0.1;

   @media (min-width: 1024px) {
      width: 500px;
      height: 500px;
   }
}

#index_qa {
   dl {
      margin: 30px 0;

   }
}

#index_qa {
   dl dt {
      position: relative;
      font-size: var(--fontsize_20);
      padding-left: 70px;
      margin: 10px 0;

   }
}

#index_qa {
   dl dt:before {
      position: absolute;
      content: "Q";
      font-family: var(--font_family_accent);
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50px;
      background: var(--color_primary);
      color: var(--color_white);
      font-size: var(--fontsize_20);
      text-align: center;
      line-height: 50px;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);

   }
}

#index_qa {
   dl dd {
      padding-left: 50px;
      margin: 10px 0;
      position: relative;
   }
}

#index_qa {
   dl dd:before {
      position: absolute;
      content: "";
      width: 12px;
      height: 2px;
      background-color: var(--color_primary);
      top: 14px;
      left: 30px;

   }
}

#index_qa {
   .btn_line a {
      @media (min-width: 768px) {
         margin: 20px auto;
      }

   }
}

#index_news {
   .index_news_block {
      background-color: var(--color_surface_muted);

      .notice {
         position: relative;
         padding: 5px 26px 5px 42px;
         background: var(--color_secondary);
         color: var(--color_white);
         margin-left: -33px;
         line-height: 1.3;
         border-bottom: solid 3px var(--color_primary);
         width: 85%;
         margin: 0 auto;
         text-align: center;
         font-size: var(--fontsize_16);
         margin-left: -10px;
         margin-bottom: 60px;

         @media (min-width: 768px) {
            margin: 0 auto 60px;
         }

         &:before {
            position: absolute;
            content: "";
            left: -2px;
            top: -2px;
            width: 0;
            height: 0;
            border: none;
            border-left: solid 40px var(--color_surface_muted);
            border-bottom: solid 79px transparent;
         }

         &:after {
            position: absolute;
            content: "";
            right: -3px;
            top: -7px;
            width: 0;
            height: 0;
            border: none;
            border-left: solid 40px transparent;
            border-bottom: solid 79px var(--color_surface_muted);
         }
      }

      .columns {
         @media (min-width: 1024px) {
            display: flex;
         }

         .left {
            @media (min-width: 1024px) {
               width: 30%;
            }
         }

         .news_article_block {
            @media (min-width: 1024px) {
               width: 70%;
            }

            .date_title {
               @media (min-width: 1024px) {
                  display: flex;
                  align-items: center;
               }

               .date {
                  @media (min-width: 1024px) {
                     margin: 0 10px 0 0;
                  }
               }

               .datetitle {
                  margin-top: 0;
               }
            }
         }
      }

      .index_heading2 {
         position: relative;
         margin-bottom: 40px;

         @media (min-width: 1024px) {
            margin-top: 50px;
         }

         &:before {
            position: absolute;
            content: "";
            width: 100px;
            height: 150px;
            background-image: url(../mrc-renewal/assets/img/mrc_logo_only.svg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            opacity: 0.1;
            top: -40px;
         }
      }
   }
}

#index_inquiry {
   .index_inquiry_txt_block_inner {
      display: none;

   }
}