@charset "UTF-8";


body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo, sans-serif;
  background: #ffffff;
  color: #2F2F2F;
}

/* ================================
   about ファーストビュー
================================ */
.about_hero {
  position: relative;
  overflow: hidden;
}

.about_hero_inner {
  position: relative;
  margin: 0 auto;
}

.about_hero_image {
  display: block;
  width: 100%;
  height: auto;
}

.about_hero_content {
  position: absolute;
  left: 20%;
  top: 36%;
  transform: translateY(-50%);
}

.about_hero_title {
  max-width: 232px;
  margin: 0 0 24px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: bold;
  font-size: 54px;
  line-height: 1;
  letter-spacing: 1.6px;
  color: #2f2f2f;
}

.about_hero_box {
  display: block;
  padding: 5px 4px;
  background: rgba(255, 255, 255, 0.6);
}

.about_hero_box--1 {
  display: inline-block;
  margin-bottom: 18px;
}

.about_hero_box--2 {
  display: inline-block;
  white-space: nowrap;
}

.about_hero_line--3{
  display: inline-block;
}

.about_hero_line {
  display: inline;
  line-height: 1;
}

.about_hero_lead {
  display: inline-block;
  margin: 0;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.6);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #2f2f2f;
}

.about_hero_highlight {
  color: #F21D4B;
}

@media (max-width: 1914px){
  .about_hero_title {
    font-size: 2.82vw;   /* 1914px のとき 54px になるよう計算 */
  }
  .about_hero_lead {
    font-size: 1.254vw;  /* 1914px のとき約 19px */
  }
}

@media (max-width: 820px){
  .about_hero_box--1{
    margin-bottom: 8px;
  }
  .about_hero_title {
    margin-bottom: 20px;
  }
}

@media (max-width: 440px) {
  .about_hero_content {
    left: 6%;
    top: 30%;
    transform: translateY(0);
  }

  .about_hero_line {
    display: table-caption;    
    font-size: 1.875rem;   
    white-space: nowrap;  
    line-height: 1.3;
  }

  .about_hero_box--1 {
    font-size: 1.875rem;
    display: inline-block;
    padding: 4px 8px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.6);
  }

  .about_hero_box--2 {
    display: block;
    padding: 0;
    margin: 0;
    background: none;
  }

  .about_hero_line--2 {
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
  }

  .about_hero_line--3 {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: 0;
  }

  .about_hero_lead {
    font-size: 1.125rem;
    padding: 0;
    background: none;
  }

  .about_hero_lead .point {
    display: inline-block;
    margin: 2px 0;
    padding: 8px 10px;
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 550;
    letter-spacing: 0.06em;
    color: #2f2f2f;
    background: rgba(255, 255, 255, 0.6);
  }
}



/* ================================
   サービス概要
================================ */
.about_section{
  margin-top: 80px;
}

.about_intro_section {
  padding: 40px 20px 0;
}

.about_intro_inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.about_intro_image img {
  display: block;
  max-width: 416px;
  width: 90%;
  height: auto;
}

.about_intro_text {
  font-family:sans-serif ;
  font-weight: 500;
}

.about_intro_caption{
  font-size: 1.5rem;
  line-height: 1;
  color: #2F2F2F;
  margin: 20px 0;
}

.about_intro_caption_jp {
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  display: inline-block;
  margin-bottom: 1px; 
}

.about_intro_main {
  margin: 0;
  font-size: 1.25rem;
  line-height: 2;
  color: #2F2F2F;
}

.about_intro_highlight_blue {
  display: inline-block;
  line-height: 1;
  padding: 0.2em ;
  background-color: #3178ff;
  color: #fff;
}

.about_intro_highlight_yellow {
  display: inline-block;
  line-height: 1;
  padding: 0.2em;
  background-color: #FFD700;
  font-weight: 700;
}

.about_section__label {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: 0.45em;
  margin-bottom: 10px;
  text-align: center;
}

.about_section__title {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 2.625rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #3178FF;
  text-align: center;
  padding-bottom: 12px;
}

.about_section__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 150px;
  height: 4px;
  background: url('../../images/about/h1_bk.svg') no-repeat;
  background-size: 100% auto;
  background-position: left bottom;
  left: 50%;
  transform: translateX(-50%);
}

.about_flow_section {
  padding: 30px 20px 40px;
}

.about_flow_inner {
  max-width: 1165px;
  margin: 0 auto;
  position: relative;
}

.about_flow_bg {
  position: absolute;
  left: 50%;
  top: 40px;         
  width: 100%;
  max-width: 760px;   
  height: 250px;     
  transform: translateX(-50%);
  background-image: url("../../images/about/about_point_bg.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  pointer-events: none;
}

.about_flow_list {
  max-width: 1165px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2vw, 40px);
  align-items: flex-start;
  position: relative;
  z-index: 1;    
}

.about_flow_item {
  flex: 0 1 auto;
}

.about_flow_item img {
  display: block;
  max-height: 280px;
  width: clamp(140px, 18vw, 100%); 
  height: auto;
}

.about_flow_arrow {
  position: absolute;
  left: 50%;
  bottom: -70%;
  margin-top: 40px;
  text-align: center;
}

.about_flow_arrow img {
  display: inline-block;
  max-width: 40px;  
  width: 100%;
  height: auto;
}

.about_intro_sp_br {
  display: inline;   /* ← デフォルトはただの空インライン */
}

@media (max-width: 1043px) {
  .about_support_inner{
    margin: 0 20px !important;
  }
}

@media (max-width: 768px) {
    .about_intro_highlight_blue,.about_intro_highlight_yellow{
    margin: 7px 0;
  }

.about_flow_bg {
    top: 20px;
    max-width: 600px;
    height: 150px;
}

    .about_flow_arrow {
        margin: 40px 0 60px;
        left: 50%;
        transform: translateX(-50%);
        bottom: -230px;
        text-align: center;
    }
}

@media (max-width: 440px) {
  .about_section__label{
    font-size: 0.875rem;
  }

  .about_section__title{
    font-size: 1.75rem;
  }

  .about_section__title::after{
  width: 125px;
  }

  .about_intro_image img {
    margin: 0 auto;
  }

  .about_intro_text {
    text-align: center;
  }

  .about_intro_highlight_blue,.about_intro_highlight_yellow{
    margin: 7px 0;
  }

  .about_intro_sp_br {
    display: block;    /* 行を分ける */
    height: 0;
  }

  .about_flow_inner {
    position: relative;
  }
  
    .about_flow_list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .about_flow_item img {
    width: auto;
    height: 280px;
  }

  .about_flow_bg {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top:260px;
    bottom: 0;       
    width: 100%;
    max-width: 60px;   
    height: 670px;

    background-image: url("../../images/about/cta_bg_sp.webp");
    background-repeat: no-repeat;
    background-position: center;
  }

  .about_intro_inner {
    flex-direction: column;
    gap: 24px;
  }

  /* .about_intro_image img{
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  } */

  .about_intro_main {
    font-size: 1.0625rem;
  }
}


/* ================================
   外国人向けサポート
================================ */
.about_support_section {
  background-image: url(../../images/about/about_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding: 200px 0;
}

.about_support_inner {
  max-width: 1040px;
  margin: 0 auto;
}

.about_support_text {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  line-height: 2.2;
  color: #333;
  letter-spacing: 1.6px;
  font-weight: 500;
  margin-bottom: 40px;
}

.about_support_text_accent {
  color: #F21D4B; 
  font-weight: 700;
}

.about_support_card {
  max-width: 1000px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 32px 24px;
}

.about_support_card_inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* 左の青丸 */
.about_support_badge {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background-color: #3178FF;
  box-shadow: 0 4px 0 0 rgba(47, 47, 47, 0.1);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  text-align: center;
}

.about_support_badge_text_top {
  font-size: 1.875rem;
  line-height: 1;
}

.about_support_badge_text_bottom {
  font-size: 2.5rem;
  line-height: 1.3;
}

/* 右側のリスト */
.point_list {
  padding: 0 16px;
    li{
      display: grid;
      grid-template-columns: auto auto;
      column-gap: 6px;
      justify-content: start;
      align-items: center;
      margin-bottom: 8px;
        &:last-child{
            margin-bottom: 0;
        }
        &::before{
          content: "";
          display: block;
          width: 20px;
          height: 12px;
          border-left: 5px solid #F21D4B;
          border-bottom: 5px solid #F21D4B;
          transform: rotate(-45deg);
        }
    }
    @media screen and (max-width: 840px) {
      li{
        display: block;
          &::before{
            display: none;
          }
      }
    }
}

.point_list li dl {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  justify-items: start;
  align-items: center;
  font-weight: bold;
  @media screen and (max-width: 840px) {
      grid-template-columns: none;
      grid-template-rows: auto auto;
      gap: 8px 0;
      justify-items: start;
      align-items: center;
      font-weight: bold;
  }
}
.point_list li dl dt {
  font-size: clamp(1.125rem, 0.986rem + 0.57vw, 1.5rem);
  @media (min-resolution: 144dpi) {
      font-size: 1.125rem;
  }
  @media screen and (max-width: 840px) {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 6px;
    justify-content: start;
    align-items: center;
    &::before{            
      content: "";
      display: block;
      width: 20px;
      height: 12px;
      border-left: 5px solid #F21D4B;
      border-bottom: 5px solid #F21D4B;
      transform: rotate(-45deg);
    }
  }
}
.point_list li dl dd {
  display: block;
  width: 250px;
  background: #F21D4B;
  color: #fff;
  font-size: clamp(1.375rem, 1.282rem + 0.38vw, 1.625rem);
  text-align: center;
  @media (min-resolution: 144dpi) {
    width: auto;
    padding: 0 8px;                
    font-size: 1.375rem;
    text-align: left;
  }
  span.small {
    font-size: 1.125rem !important;
  }
}


/* .about_support_list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.about_support_list_item {
  display: flex;
  align-items: center;
  font-size: 1rem;
  color: #2F2F2F;
  margin-bottom: 14px;
}

.about_support_list_item:last-child {
  margin-bottom: 0;
}

.about_support_list_check {
  font-size: 2rem;
  color: #F21D4B;
}

.about_support_list_label {
  font-size: 1.625rem;
  font-weight: bold;
  margin: 0 10px;
}

.about_support_list_tag {
  display: block;
  width: 250px; 
  height: 40px;
  text-align: center;
  align-content: center;
  background-color: #F21D4B;
  color: #ffffff;
  line-height: 1;
  font-weight: 700;
  font-size: 1.875rem;
} */

@media (max-width: 630px) {
  .about_support_card_inner {
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width:440px) {
  .about_support_section {
  background-size: 940%;
  background-position: center -60px;
  padding: 200px 0;
  }

  .about_support_text{
    font-size: 1.125rem;
    line-height: 2.44;
    letter-spacing: 0;
  }

  .about_support_card{
    margin: 40px 10px 60px;
  }

  .about_support_badge_text_top{
    font-size: 1.625rem;
  }

  .about_support_badge_text_bottom{
    font-size: 2.25rem;
  }
  
  .about_support_list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .about_support_list_item {
    display: grid;                        /* ← flex ではなく grid にする */
    grid-template-columns: 26px 1fr;      /* 左に✔, 右にテキスト */
    column-gap: 8px;
    row-gap: 6px;
    align-items: center;
    margin-bottom: 14px;
    font-size: 1.125rem;
    color: #2F2F2F;
  }

  /* ✔ マーク：左の列で上下2行ぶんを占有 */
  .about_support_list_check {
    grid-column: 1 / 2;
    grid-row: 1 / 3;                      /* 1〜2行目にまたがる */
    font-size: 2.2rem;
    color: #F21D4B;
    align-self: flex-start;
  }

  /* 上の黒文字（ライフライン対応/母国語でサポート/…） */
  .about_support_list_label {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin-left: 0;
  }

  /* 下のピンク帯 */
  .about_support_list_tag {
    grid-column: 2 / 3;                   /* 常に右列 */
    grid-row: 2 / 3;
    justify-self: flex-start;

    display: inline-block;
    margin-top: 4px;
    padding: 6px 32px;
    background-color: #F21D4B;
    color: #fff;
    font-weight: 700;
    font-size: 1.875rem;
    text-align: center;
    min-width: 230px;                     /* 幅を揃えたい場合は調整 */
  }
}


/* ================================
   CTA
================================ */
/* ▼ 青い背景エリア全体 */
.about_cta_section {
  margin-top: 60px;
  background-image: url(../../images/about/cta_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding: 60px 0 100px;
  position: relative;
}

.about_cta_section a{
  text-decoration: none;
}
.about_cta_btn .about_cta_texts, .about_cta_btn .arrow{
  color: #fff;
  text-decoration: none;
}
/* ▼ 中央寄せ */
.about_cta_inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ▼ 白いカード */
.about_cta_card {
  box-sizing: border-box;             /* パディング込みで width を計算 */
  width: 100%;                        /* まずは親いっぱい */
  max-width: 1000px;                   /* でも広すぎないよう上限 */
  margin: 0 auto;                     /* 中央寄せ */
  background: #fff;
  border-radius: 20px;
  border: 2px solid #2F2F2F;
  box-shadow: 4px 4px 0 #FFEA7F;
  /* 画面幅に応じて滑らかに変わるパディング */
  padding: clamp(24px, 4vw, 44px)
           clamp(24px, 10vw, 80px);   /* 上下 / 左右 */
}

/* ▼ テキストとボタンの横並び */
.about_cta_text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
@media screen and (min-width: 631px) and (max-width: 668px) {
    .about_cta_card{
        padding: 40px 24px;
    }
    .about_cta_text{
        flex-direction: column;
    }
}
@media screen and (max-width: 630px) {
    .about_cta_card{
        padding: 40px 0px;
    }
    .about_cta_text{
        transform: scale(.8);
        flex-direction: column;
    }
}

/* ▼ 左のリンク（青文字） */
.about_cta_link_left {
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: 4px;
    justify-content: center;
    justify-items: center;
    align-items: center;
}
.about_cta_link_left::before,
.about_cta_link_left::after {
    display: none;
}
@media screen and (max-width: 668px) {
    .about_cta_link_left::before,
    .about_cta_link_left::after {
        content: "";
        display: block;
        width: 50px;
        height: 2px;
        background: #3178ff;
    }
    .about_cta_link_left::before {
        transform: rotate(60deg);
    }

    .about_cta_link_left::after {
        transform: rotate(-60deg);
    }
}

.about_cta_link_left .about_cta_main_wrap {
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 4px;
    justify-content: center;
    justify-items: center;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #3178ff;
    text-decoration: none;
    line-height: 1.2;
    text-align: center;
}

/* 1行目を「絶対折り返さない」
.about_cta_main {
  white-space: nowrap;
  display: inline-block;
} */

.about_cta_small{
  font-size: 1.125rem;
}

.about_cta_under {
  font-size: 1rem;
}

/* ▼ ▼ 赤いボタン本体 ▼ ▼ */
.about_cta_btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: #F21D4B;
  color: #fff;
  padding: 5px 25px 5px 70px; /* ←左側はアイコン分広めに */
  border-radius: 9999px; /* ← pill型 */
  text-decoration: none;
  box-shadow: 0 5px 0 0 rgba(47, 47, 47, 0.1);
}

/* ▼ ▼ メールアイコン ▼ ▼ */
.about_cta_mail {
  position: absolute;
  left: 16px;       /* ←少し外に飛び出させる */
  width: 48px;       /* 画像に近いサイズ */
  height: 48px;
  top: 53%;
  transform: translateY(-50%);
}

/* ▼ ▼ テキスト部分の縦並び ▼ ▼ */
.about_cta_texts {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* ▼ 上の太字テキスト */
.about_cta_main_text {
  font-size: 1.45rem;
  font-weight: 700;
}

/* ▼ 下の白背景タグ */
.about_cta_sub_text {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  color: #F21D4B;   /* ピンク文字 */
  white-space: nowrap;
}

/* ▼ 矢印 */
.about_cta_btn .arrow {
  font-size: 3rem;
}

/* hover時 */
.about_cta_btn:hover {
  /*background: #ff6082; うっすら色変化 */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(2.5px);      /* ふわっと浮く */
}





/* SERVICE */
#service {
    width: 100%;
    padding: 0 24px 160px;
    margin: 0 auto;
    background:
        url(../../images/top/sec_news_bg_nami_top.svg) center bottom / 100% no-repeat,
        url(../../images/top/bg_decoration_circle_blue.svg) left -100px top 50% / 600px no-repeat;
    .service_section_catch_box {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 900;
        .service_section_catch {
            display: grid;
            grid-template-rows: auto auto auto auto;
            justify-items: center;
            align-items: center;
            row-gap: 8px;
            margin-top: 40px;
        }
        .catch_txt {
            font-size: clamp(1rem, 0.814rem + 0.76vw, 1.5rem);
            line-height: 1.2;
        }
        strong {
            font-size: clamp(1.375rem, 1.236rem + 0.57vw, 1.75rem);
            line-height: 1.2;
            color: #fff;
        }
        .marker_blue {
    padding: 0 16px;
    background: #3178FF;
    clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%);
}
    }
    /* サービス内容 === */
    .service_main_content {
        display: grid;
        grid-template-columns: minmax(400px, 460px) minmax(400px, 460px);
        grid-template-rows: auto auto;
        gap: 40px;
        justify-content: center;
        justify-items: center;
        align-items: stretch;
        font-family: "Noto Sans JP", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
        @media screen and (max-width: 1024px) {
            grid-template-columns: minmax(300px, 440px);
            grid-template-rows: repeat(4, auto);
        }
        .service_conttent {            
            padding: 10px 10px 100px 10px;
            margin: 40px auto 0;
            background: #fff;
            border: 2px solid #333;
            border-radius: 20px;
            box-shadow: 4px 4px  #f3d75b;
            overflow: hidden;
            position: relative;
        }
        img {
            margin: 0 auto 20px;
        }
        h3 {
            display: grid;
            grid-template-columns: auto auto;
            grid-template-rows: auto auto;
            grid-template-areas:
                "areaA areaB"
                "areaA areaB";
            gap: 0 8px;
            justify-content: center;
            align-content: center;
            align-items: center;
            font-size: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
            font-weight: 900;
            color: #3178FF;
            height: 60px;
            padding: 0 20px;
            margin: 0 auto 20px;
            @media screen and (max-width: 767px) {
                padding: 0 10px;
            }
            span {
                display: block;
            }
            span:nth-child(1) {
                grid-area: areaB;
            }
            span:nth-child(2) {
                grid-area: areaC;
            }
        }
        h3.line_break {
            grid-template-areas:
                "areaA areaB"
                "areaA areaC";
        }
        h3::before{
            grid-area: areaA;
            content: "";
            display: block;
            width: 50px;
            height: 50px;
        }
        .advisor h3::before{
            background: url(../../images/top/sec_service_advisor_icon.svg) 0 0 /contain no-repeat;
        }
        .rental h3::before{
            background: url(../../images/top/sec_service_rental_icon.svg) 0 0 /contain no-repeat;
        }
        .mobilesim h3::before{
            background: url(../../images/top/sec_service_mobilesim_icon.svg) 0 0 /contain no-repeat;
        }
        .room h3::before{
            background: url(../../images/top/sec_service_room_icon.svg) 0 0 /contain no-repeat;
        }
        h4 {
            font-size: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);
            font-weight: bold;
            padding: 0 20px;
            margin: 0 auto 20px;
            text-align: left;
            @media screen and (max-width: 767px) {
                padding: 0 10px;
            }
        }
        .cmnt {
            padding: 0 20px;
            margin: 0 auto 20px;
            text-align: left;
            @media screen and (max-width: 767px) {
                padding: 0 10px;
            }
        }
        .tag {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 5px 10px;
            padding: 0 20px;
            margin: 0 auto;
            font-size: clamp(0.813rem, 0.789rem + 0.1vw, 0.875rem);
            @media screen and (max-width: 767px) {
                padding: 0 10px;
            }
            li {
                padding: 0 6px;
                border: 1px solid #2f2f2f;
                border-radius: 100px;
            }
        }
        .button_box {
            position: absolute;
            bottom: 20px;
            left: calc(50% - 140px);
        }
    }

/* button */
.button_box {
    display: inline-block;
    /* width: 220px; */
    width: 280px;
    height: 60px;
    margin: 0 auto;
    background: #3178FF;
    border-radius: 100px;
    line-height: 60px;
    box-shadow: 2.5px 2.5px 0px 0px rgba(123, 57, 11, 0.1);
    text-decoration: none;
    .button_link_name {
        margin: 0 auto;
        text-align: center;
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
        position: relative;
        &::after{
            content: "";
            display: block;
            width: 12px;
            height: 20px;
            background: url(../../images/top/arrow_white.svg) 0 0 / contain no-repeat;
            position: absolute;
            top: calc(50% - 10px);
            right: 16px;
        }
    }
    &:hover{
        box-shadow: none;
        transform: translateY(2.5px);
        @media screen and (max-width: 767px) {
            box-shadow: 2.5px 2.5px 0px 0px rgba(123, 57, 11, 0.1);
            transform: none;
        }
    }
}
}
@media screen and (max-width: 440px) {
    #service {
        padding: 80px 24px 160px;
        background-position:
            center bottom,        /* 1枚目はそのまま */
            left -150px top 0;   /* ←2枚目を小画面用に変更 */

        background-size:
            100%,                 /* 1枚目そのまま */
            340px;                /* ←2枚目を小さく */
    }
}


/* 多言語化 
.about_support_card.lang_en .about_support_badge_text_bottom{
  font-size: 1rem;
}*/

.about_support_card.lang_en .about_support_badge,
.about_support_card.lang_vi .about_support_badge {
  width: 190px;
  height: 190px;
  aspect-ratio: 1 / 1; /* 念のため */
  border-radius: 50%;
  background-color: #3178FF;
  box-shadow: 0 4px 0 0 rgba(47, 47, 47, 0.1);
  color: #ffffff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-weight: 700;
  text-align: center;

  line-height: 1.1;        /* ← 超重要 */
  box-sizing: border-box; /* ← 保険 */
}

/* .about_support_card.lang_en dd {
    display: block;
    width: 250px;
    background: #F21D4B;
    color: #fff;
    font-size: clamp(1.375rem, 1.282rem + 0.38vw, 1.625rem);
    text-align: left;
    padding: 0 16px;
    @media (min-resolution: 144dpi) {
        width: 200px;
        font-size: clamp(1.125rem, 0.986rem + 0.57vw, 1.5rem);
    }
}

.about_support_card.lang_vi .point_list dd{
  font-size: 1.4rem;
  line-height: 1.2;
} */