@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

 /* 全体のレイアウト */
.clinic-header {
    display: flex;
    justify-content: center;
  }
  
  .header-image {
    width: 100%;
    max-width: 1960px;
    height: auto;
  }
  
  /* プラン全体 */
  .plans-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .plans-title {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 2rem;
  }
  
  .title-image {
    width: 100%;
    height: auto;
    max-width: 960px;
  }
  
  /* プランセクション */
  .plan-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    width: 1200px;
    max-width: 960px;
  }
  
  .plan-content {
    display: flex;
    align-items: center;
    gap: 2rem; /* 画像とテキストの間隔 */
  }
  
  .plan-image {
    /* 画像のサイズを柔軟に調整 */
    flex-basis: auto;   /* 35%固定をやめる */
    flex-shrink: 0;
    display: flex;
    justify-content: center;
  }
  
  .clickable-image {
    max-width: 520px;   /* 固定幅よりも max-width の方が自然 */
    width: 100%;
    height: auto;
  }
  
  .plan-text {
    /* テキストのレイアウト */
    flex-basis: 65%; /* テキストがコンテナの約65%を占めるようにする */
    font-size: 1.1rem;
  }
  
  .plan-heading {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .plan-text ul {
    list-style: disc;
    padding-left: 1.5rem;
  }
  
  .plan-text ul li {
    margin-bottom: 0.3rem;
  }
  
  /* 見本セクション */
  .visual-sample {
    width: 100%;
    max-width: 940px;
    text-align: center;
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 2rem auto; /* 中央寄せ */
  }
  
  /* 下部の画像リンク部分 */
  .extra-section {
    margin-top: 1.5rem;
  }
  
  .campaign-title-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .campaign-register-image {
    display: block;
    margin: 1rem auto;  /* 左右をautoにすると中央揃え */
    width: 100%;
    max-width: 1620px;   /* 大きくなりすぎないように制限 */
    height: auto;
  }

  .campaign-register-link {
    display: block;
    margin: auto;
    max-width: 750px;
    width: 100%;
  }
  
  /* バナー */
  .banner-wrapper {
    margin-top: 2.5rem;
  }

  .campaign-toiawase {
    text-align: center;
    width: 920px;
  }

  @media screen and (max-width: 768px) {
    /* プランセクション全体をスマホ幅に */
    .plan-section {
      width: 100%;
      max-width: 95%;
      margin-bottom: 1.5rem;
    }
  
    /* プランの画像と文章を縦並びに */
    .plan-content {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  
    /* ボタン画像 */
    .plan-image {
      width: 100%;
      max-width: 320px; /* 適度なサイズに制限 */
      display: flex;
      justify-content: center;
      margin-bottom: 0.5rem;
    }
  
    .clickable-image {
      width: 100%;
      height: auto;
      max-width: 100%;
    }
  
    /* テキストも中央揃え */
    .plan-text {
      text-align: center;
      width: 100%;
    }
  
    /* キャンペーンボタン */
    .campaign-register-image {
      width: 90%;
      max-width: 520px;
    }
  
    /* 問い合わせ画像 */
    .campaign-toiawase {
      width: 95%;
    }
  }