@charset utf-8;
/******************************
 スマートフォン対応用追加CSS
 新規 20250703
 768px以下の場合にレスポンシブ化
 極力、元のHTMLやスタイルなどのソースを変更せずに対応
 表形式のエリアは極端に文字を小さくして画面内に収まるようにする
******************************/

/********
 サイトを強制的に横幅1300pxに固定している箇所をリセットさせる
 Javascript内の制御部分の改修も必要！
********/
@media screen and (max-width: 768px) {
  html, body {
    min-width: auto !important;
    width: 100% !important;
    overflow-x: hidden;
  }

  .header-container,
  .footer-content,
  .main-visual-container,
  .service-about,
  .about-section,
  .contact-section,
  .contact-page-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 15px;
    box-sizing: border-box;
  }
  
  /*body {
    -webkit-text-size-adjust: 100%;
  }*/
}

/********
 スマートフォンでの改行
 例：<br class="spbr">
********/
/* PC表示時は非表示 */
.spbr {
  display: none;
}
@media (max-width: 768px) {
  .spbr {
    display: block;
  }
}

/********
 PCでの改行
 例：<br class="pcbr">
********/
/* PC表示時は非表示 */
.pcbr {
  display: block;
}
@media (max-width: 768px) {
  .pcbr {
    display: none;
  }
}


/********
 ヘッダー部
********/
@media screen and (max-width: 768px) {
  .site-header {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.95);
  }

  .site-header .header-right {
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: 78px;
    right: 0px;
    width: 100%;
    padding: 20px;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .site-header .header-right.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }  
  .site-header .header-right a {
    margin-bottom: 15px;
    margin-right: 0 !important;
    font-size: 16px;
  }

  /* ハンバーガーメニュー */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1000;
    padding: 10px;
  }
  .hamburger-menu span {
    width: 25px;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  .hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  .hamburger-menu.active span:nth-child(2) {
    opacity: 0;
  }
  .hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
  }

}

/********
 フッター部
********/
/* トップページ専用フッター */
@media screen and (max-width: 768px) {
  .site-footer {
    padding-bottom: 0;
  }
  .footer-content {
    display: block; /* 横並びを解除する */
  }
  .footer-left, .footer-right {
    width: 100%;
  }
  .footer-divider {
    display: none;
  }
  .footer-left {
    padding-bottom: 30px;
    border-bottom: 1px solid #D9D9D9;
    margin-bottom: 30px;
  }
  .footer-menu-wrapper {
    gap: 15px
  }
  .footer-menu-col a,
  .company-info-row div {
    font-size: 0.85rem;
  }
}
/* 下層ページ用フッター */
@media screen and (max-width: 768px) {
  .service-footer-container {
    display: block; /* 横並びを解除する */
  }
  .service-footer-left, .service-footer-right {
    width: 100%;
    text-align: center;
  }
  .service-footer-left {
    padding-bottom: 30px;
    border-bottom: 1px solid #D9D9D9;
    margin-bottom: 30px;
  }
  .service-footer-right {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
  .service-footer-right a {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
    font-size: 16px;
  }
  .service-footer-right a:before {
    content: "・";
  }
  .service-footer-right a.service-footer-contact-btn {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .service-footer-right a.service-footer-contact-btn:before {
    content: "";
  }
}

/********
 トップページ
********/
/* サービス */
@media screen and (max-width: 768px) {
  .service-detail-wrapper {
    padding-left: 3%;
    padding-right: 3%;
    flex-direction: column;
  }

  .service-detail-card {
    padding: 15px;
  }

  .service-link {
    width: 100%;
    margin-bottom: 20px;
  }

  .service-link-text p {
    font-size: 15px;
    text-align: center;
  }

  h4.cis-header, h4.tdm-header {
    font-size: 22px;
  }

  h5.cis-header, h5.tdm-header {
    font-size: 18px;
  }

  .bpoplan-section {
    padding: 40px 15px;
  }

  /*.bpoplan-section table {
    font-size: 14px;
    overflow-x: auto;
    display: block;
  }*/
}

/* about */
@media screen and (max-width: 768px) {
  .about-section h2 {
    font-size: 20px;
  }
  .about-section h3 {
    font-size: 24px;
  }
  .about-content {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  .about-detail-wrapper {
    display: block !important; /* 横並びを解除する */
  }
  .about-left {
    margin-bottom: 30px;
  }
  .about-left figure {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* お問い合わせ */
@media screen and (max-width: 768px) {
  .contact-section {
    padding: 0 5px;
  }
  .contact-content {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .contact-content p {
    font-size: 16px;
  }
  .contact-detail-wrapper {
    /*display: block;*/
    gap: 1%;
  }
  .contact-box {
    /*width: auto;*/
    width: 32%;
    padding: 20px 0;
    height: 220px;
  }
  .contact-box p {
    font-size: 14px;
    line-height: 1.4;
  }
  .contact-box .contact-btn {
    width: auto;
    padding: 0 3px;
    font-size: 11px;
  }
  .contact-box .contact-tel {
    font-size: 16px;
    font-weight: bold;
  }
}

/********
 下層ページ
********/
/* サービス説明部 */
@media screen and (max-width: 768px) {

  /* 注釈など
     - has-small-font-size は、 */
  small, sup,
  p small,
  #popup-overlay p,             /* safari？で文字が小さくならないため設定 */
  #popup-overlay p.power-small, /* safari？で文字が小さくならないため設定 */
  .has-small-font-size {
    font-size: 11px !important;
    line-height: 1.5;
  }

  /* 最初のイメージ画像 */
  .service-main-visual-container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .service-main-visual-container .main-visual-btn {
    width: 300px;
    height: 60px;
  }

  .service-about {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .service-about h2,
  .plan-area h2 {
    font-size: 28px !important;
    line-height: 1.4;
  }
  .service-about h3,
  .plan-area h3 {
    font-size: 24px !important;
    line-height: 1.2;
  }
  .service-about-box .service-about-box-right h4 {
    font-size: 26px;
  }
  .plan-area h4 {
    font-size: 16px !important;
  }
  .service-about-box {
    display: block !important;
    padding: 15px;
  }
  .service-about-box .service-about-box-right p {
    font-size: 15px;
    line-height: 1.4;
  }
  /* 改行コントロール */
  .service-about-box .service-about-box-right p {
    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /
  }

  .service-about-box-left figure {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .service-about-pr {
    gap: 5px;
  }
  .service-about-pr-box {
    width: 80%;
  }
  /* 以下、吹き出しの表示 */
  .bubble {
    padding: 15px 10px;
    min-height: auto;
  }
  .bubble h4 {
    font-size: 18px;
  }
  .bubble p {
    font-size: 15px;
    line-height: 1.5;
  }

  .service-about-pr-image {
    width: 40%;
  }
  .bubble-arrow, .bubble-arrow2 {
    right: -20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #FFF;
  }
  .bubble-arrow2 {
    left: -20px;
  }

}

/* 表部分の設定　顧客管理システムページ用
   - ピンチアウトで拡大して閲覧させたいため最初から小さく全体を表示 */
@media screen and (max-width: 768px) {
  .unique-plan-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
  }

  .unique-plan-block,
  .choice-of-options {
    width: 100%;
    min-width: 100%;
  }

  .unique-plan-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 2px;
  }

  .unique-plan-col {
    box-sizing: border-box;
    padding: 2px;  /* 間隔詰め */
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    margin: 0; /* 念のため */
    font-size: 7px !important; /* 極小サイズ */
  }

  /* 最初の列（左側）を広くとる */
  .unique-plan-col:nth-child(1) {
    width: 32% !important;
    flex: 0 0 32%;
    text-align: left;
  }

  /* 2列目以降（例：4列） */
  .unique-plan-col:nth-child(n+2) {
    width: 17% !important;
    flex: 0 0 17%;
    text-align: left;
  }

  /* 表の最初（プラン名） */
  .plan-row-1 {
    background-color: white;
    height: 40px;
  }
  /* 表の見出し部 */
  .plan-row-1 .unique-plan-col:nth-child(1) {
    font-size: 10px !important;
  }
  .plan-row-43,
  .plan-row-48 {
    height: auto;
  }
  .plan-row-43 .unique-plan-col:nth-child(1),
  .plan-row-48 .unique-plan-col:nth-child(1) {
    font-size: 16px !important;
    width: 80% !important;
    flex:auto;
  }
  .plan-row-4 .unique-plan-col:nth-child(1) {
      font-size: 8px !important;
  }
  .plan-row-4 .unique-plan-col:nth-child(n+2) {
      font-size: 8px !important;
  }
  .plan-row-42 .unique-plan-col:nth-child(n+2) {
      font-size: 8px !important;
  }
  /* 2列の要素 */
  .plan-row-44,
  .plan-row-45,
  .plan-row-46,
  .plan-row-47,
  .plan-row-49 {
    padding: 10px 0 0px;
  }
  .plan-row-44 .unique-plan-col:nth-child(1),
  .plan-row-45 .unique-plan-col:nth-child(1),
  .plan-row-46 .unique-plan-col:nth-child(1),
  .plan-row-47 .unique-plan-col:nth-child(1),
  .plan-row-49 .unique-plan-col:nth-child(1) {
    width: 46% !important;
    flex: 0 0 46%;
  }
  .plan-row-44 .unique-plan-col:nth-child(n+2),
  .plan-row-45 .unique-plan-col:nth-child(n+2),
  .plan-row-46 .unique-plan-col:nth-child(n+2),
  .plan-row-47 .unique-plan-col:nth-child(n+2),
  .plan-row-49 .unique-plan-col:nth-child(n+2) {
    width: auto !important;
    flex: auto;
  }

  .pricing-item .small-text {
    font-size: 8px !important;
  }

  .unique-plan-col .small-text {
    font-size: 7px !important;
  }

  .unique-plan-col i {
    font-size: 9px !important;
  }
}

/* 表形式表示部　顧客管理システムページ用
   - 託送・発電管理システムやBPOまるっとのページでも共通で使用する
   廃止 上記のピンチイン・ピンチアウトで対応するため */
@media screen and (max-width: 768px) {

  /* 左右のスワイプ用　スワイプで表示させたい表の要素をこのクラスで囲むこと！ <div class="unique-plan-wrapper"> */
  /*.unique-plan-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    margin-bottom: 30px;
  }*/

  /* 内部の要素を1200pxで維持させる */
  /*.unique-plan-wrapper > div {
    width: 1200px;
    min-width: 1200px !important;
  }*/

  /* BPOまるっとの場合はコンテンツを最大化 */
  /*.unique-plan-wrapper > table {
    width: max-content;
  }*/

  /* スクロールヒント */
  /*.unique-plan-wrapper::before,
  .unique-plan-wrapper::after {
    content: "← スクロールできます →";
    display: block;
    text-align: center;
    font-size: 13px;
    color:crimson;
    margin-bottom: 8px;
    animation: scrollhint-blink 1.5s ease-in-out infinite;
  }

  @keyframes scrollhint-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }*/

  /*.unique-plan-block {
    max-width: 100%;
  }*/

  /*[class$="plan-row-"] {
    font-size: 20%;
  }*/
  
  /* 下記のクラス設定をリセットさせる
     ※左端を空けるのをリセット！ */
  /*.unique-plan-wrapper .unique-plan-col:nth-child(2) {
    padding-left: 0;
  }*/

  /* 2カラムの表では、2カラム目を下に配置するので、可読性を上げるために左端を空ける */
  /*.unique-plan-col:nth-child(2) {
    padding-left: 10px;
  }*/

  /* 表のタイトルが窮屈なため高さを自由に */
  /*.plan-row-50 {
    height: auto;
  }*/

}

/* 表部分の設定　顧客管理システムページ用
   - ピンチアウトで拡大して閲覧させたいため最初から小さく全体を表示 */
@media screen and (max-width: 768px) {

  /* 選べるオプション */
  .choice-of-options {
    width: 100%;
    min-width: 100%;
    margin-top: 20px;
  }
  .choice-of-options h3 {
    font-size: 10px !important;
  }
  #tokusou-services .unique-plan-row {
    gap:unset;
  }
  /* 最初の列（左側）を広くとる */
  #tokusou-services .unique-plan-col:nth-child(1) {
    width: 38% !important;
    flex: 0 0 38%;
    text-align: left;
  }

  /* 2列目以降（例：4列） */
  #tokusou-services .unique-plan-col:nth-child(n+2) {
    width: 20% !important;
    flex: 0 0 20%;
    text-align: left;
  }

  /* 表の最初（プラン名） */
  #tokusou-services .plan-row-1 {
    background-color: white;
    height: 40px;
  }

  /* 表の見出し部 */
  #tokusou-services .plan-row-36,
  #tokusou-services .plan-row-41,
  #tokusou-services .plan-row-61 {
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  #tokusou-services .plan-row-36 .unique-plan-col:nth-child(1),
  #tokusou-services .plan-row-41 .unique-plan-col:nth-child(1),
  #tokusou-services .plan-row-61 .unique-plan-col:nth-child(1) {
    font-size: 16px !important;
    width: 80% !important;
    flex: auto;
  }

  /* オプションサービス料金部分 */
  #tokusou-services .plan-row-43 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-45 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-47 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-49 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-51 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-53 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-55 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-57 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-59 .unique-plan-col:nth-child(1) {
    width: 100%;
    flex: auto;
  }
  #tokusou-services .plan-row-43 hr, 
  #tokusou-services .plan-row-45 hr, 
  #tokusou-services .plan-row-47 hr, 
  #tokusou-services .plan-row-49 hr, 
  #tokusou-services .plan-row-51 hr, 
  #tokusou-services .plan-row-53 hr, 
  #tokusou-services .plan-row-55 hr, 
  #tokusou-services .plan-row-57 hr, 
  #tokusou-services .plan-row-59 hr {
    width: 100%;
    flex:auto;
  }
  #tokusou-services .plan-row-42, 
  #tokusou-services .plan-row-44, 
  #tokusou-services .plan-row-46, 
  #tokusou-services .plan-row-48, 
  #tokusou-services .plan-row-50, 
  #tokusou-services .plan-row-52, 
  #tokusou-services .plan-row-54, 
  #tokusou-services .plan-row-56, 
  #tokusou-services .plan-row-58, 
  #tokusou-services .plan-row-60 {
    gap: 5px;
    justify-content: space-between;
  }  
  #tokusou-services .plan-row-42 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-44 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-46 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-48 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-50 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-52 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-54 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-56 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-58 .unique-plan-col:nth-child(1), 
  #tokusou-services .plan-row-60 .unique-plan-col:nth-child(1) {
    width: 26% !important;
    flex: 0 0 26%;
    font-size: 7px !important;
  }
  #tokusou-services .plan-row-42 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-44 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-46 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-48 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-50 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-52 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-54 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-56 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-58 .unique-plan-col:nth-child(2), 
  #tokusou-services .plan-row-60 .unique-plan-col:nth-child(2) {
    width: 56% !important;
    flex: 0 0 56%;
    padding: 0;
  }
  #tokusou-services .plan-row-42 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-44 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-46 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-48 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-50 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-52 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-54 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-56 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-58 .unique-plan-col:nth-child(3), 
  #tokusou-services .plan-row-60 .unique-plan-col:nth-child(3) {
    width: 14% !important;
    flex: 0 0 14%;
    padding: 0;
  }

  /* 顧客管理システムページ用の設定をリセットさせる */
  /*#tokusou-services .plan-row-48 .unique-plan-col:nth-child(1),
  #tokusou-services .plan-row-50 .unique-plan-col:nth-child(1) {
    width: 38% !important;
    flex: 0 0 38%;
    text-align: left;
    font-size: 7px !important;
  }*/

  /* 2列の要素 */
  #tokusou-services .plan-row-37,
  #tokusou-services .plan-row-38,
  #tokusou-services .plan-row-39,
  #tokusou-services .plan-row-40 {
    padding: 10px 0 0px;
  }
  #tokusou-services .plan-row-37 .unique-plan-col:nth-child(n+2),
  #tokusou-services .plan-row-38 .unique-plan-col:nth-child(n+2),
  #tokusou-services .plan-row-39 .unique-plan-col:nth-child(n+2),
  #tokusou-services .plan-row-40 .unique-plan-col:nth-child(n+2) {
    width: auto !important;
    flex: auto;
  }

  /* 託送・発電管理システムご利用について */
  #tokusou-services .plan-row-62 .unique-plan-col:nth-child(1),
  #tokusou-services .plan-row-67 .unique-plan-col:nth-child(1) {
    width: 100% !important;
    flex: auto;
  }

  #tokusou-services .electronic-certificate .unique-plan-col:nth-child(1) {
    width: 28% !important;
    flex: 0 0 28%;
  } 
  #tokusou-services .electronic-certificate .unique-plan-col:nth-child(2) {
    width: 60% !important;
    flex: 0 0 60%;
  }

}

/* 託送・発電管理システムページ専用
   廃止 上記のピンチイン・ピンチアウトで対応するため */
/*@media screen and (max-width: 768px) {
  .choice-of-options {
    padding: 20px 0;
    font-size: unset;
  }

  .basic-setup-fee {
    margin-bottom: 30px;
  }

  #tokusou-services .plan-row-41 {
    margin-top: 0;
  }
  
  .terms-of-use .unique-plan-row .unique-plan-col:not(:first-child) {
    padding-left: 10px;
    padding-right: 10px;
  }

  #tokusou-services .plan-row-61,
  #tokusou-services .plan-row-68 {
    height: auto;
  }
}*/

/* ポップアップ表示部
   - 顧客管理システムページ用 「料金表を見る →」クリック時 */
@media screen and (max-width: 768px) {

  .popup-content {
    overflow-x: scroll;
    padding: 15px;
    width: 90%;
    height: 90%;
    -webkit-text-size-adjust: 100%; /* safariでフォントサイズが機能しないことがあるため記述 */
  }
  /* popup-content の中の要素をこのクラスで囲む！ <div class="popup-content-inner"> */
  .popup-content-inner {
    width: 900px;
    min-width: 900px;
    padding: 15px;
  }

  /* ポップアップの閉じるボタン
     - 他のポップアップでも共通で使用 */
  .popup-content .close-button,
  .longterm-popup-overlay .close-button,
  #takuso-storage-popup-overlay .close-button {
    position: fixed;
    color: white;
    font-size: 40px;
    background-color: black;
    width: 60px;
    text-align: center;
    border-radius: 10px
  }

  /* スクロールヒント */
  .popup-content::before,
  .popup-content::after {
    content: "← スクロールできます →";
    display: block;
    text-align: center;
    font-size: 13px;
    color:crimson;
    margin-bottom: 8px;
    animation: scrollhint-blink 1.5s ease-in-out infinite;
  }
  /* スクロールヒントを表示しない箇所用
     - ■各種請求書等の長期保存機能のポップアップ */
  .no-scroll::before, 
  .no-scroll::after {
    content: "" !important;
  }

}

/* ポップアップ表示部
   - 顧客管理システムページ用 「需要家数による変動料金」クリック時 */
@media screen and (max-width: 768px) {
  .longterm-popup-content {
    overflow: scroll;
    padding: 15px;
    width: 90%;
    height: 90%;;
  }
  .longterm-popup-cell {
    width: 40%;
    min-width: 40%;
  }
}

/* ポップアップ表示部
   - 託送・発電管理システムページ用 「変動料金表を見る →」クリック時 */
@media screen and (max-width: 768px) {
  #tokusou-popup-overlay .popup-table {
    width: 800px;
  }
  #takuso-storage-popup-overlay .popup-title {
    font-size: 20px !important;
  }
  #tokusou-popup-overlay .popup-table .td-popup-column {
    width: 33.33333%;
  }
}

/* BPOまるっと 事務支援サービスページ用
   - 料金プランの表
   ※ 高度な設定で unique-plan-wrapper のクラスを追加すること */
/*@media screen and (max-width: 768px) {
  .unique-plan-wrapper table {
    margin-bottom: 10px !important;
  }
  .unique-plan-wrapper table tbody {
    width: 100%;
  }
  .unique-plan-wrapper table tbody td {
    width: auto;
  }
}*/

@media screen and (max-width: 768px) {
  .bpoplan-section table {
    font-size: 7px;
    margin-bottom: 20px;
  }
  .bpoplan-section .tbl-col3 td:first-child {
    width: 24%;
  }
  .bpoplan-section td:last-child {
    width: 22%;
  }
  .bpoplan-section td {
    padding: 0.25rem !important;
  } 
}

/* 動画表示部 */
@media screen and (max-width: 768px) {
  /* 見出し */
  .plan-row-50,
  #tokusou-services .plan-row-68 {
    height: auto;
  }
  .plan-row-50 .unique-plan-col:nth-child(1),
  #tokusou-services .plan-row-68 .unique-plan-col:nth-child(1) {
    width: 80% !important;
    font-size: 16px !important;
    flex:auto;
  }
  /* 動画 */
  .about-video-area, .about-video-area2 {
    max-width: 100% !important;
    width: 100% !important;
    padding: 30px 0 0;
  }
  .about-video-area iframe,
  .about-video-area video,
  .about-video-area2 iframe,
  .about-video-area2 video {
    display: block;
    width: 96% !important;
    height: auto !important;
    aspect-ratio: 16 / 9; /* modern CSS way */
    margin: 0 auto;;
  }
}

/* お問い合わせフォーム */
@media screen and (max-width: 768px) {
  .contact-page-container {
    display: block; /* 横並びを解除する */
  }
  .contact-page-left-content, .contact-page-right-content {
    max-width: 100% !important;
    width: 100% !important;
  }
  .contact-page-heading {
    font-size: 22px !important;
    text-align: center;
  }
  .contact-page-right-content {
    padding: 20px 10px;
  }
  /* 必須の文字を改行させない */
  .contact-page-right-content span.required,
  .contact-page-right-content span.required2 {
    white-space: nowrap;
  }
  .ponopono-contact-form .ponopono-form-label {
    display: block;
  }

  /* 送信ボタンの設定 */
  .contact-page-right-content input[type=submit] {
    width: 100%;
    height: 65px;
    background-position: center center;
    background-size: auto;
    border-radius: 20px;
  }
}