/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
  color: #333;

}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* PC/SP切り替え用クラス */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
  
  .sp-only {
    display: block !important;
  }
}

/* ========== PC版スタイル ========== */

/* コンテナ */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.top-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* TOPセクション */
.top-section {
  padding: 60px 0 180px 0;
}

.solution-section .container {
  transform: translateX(60px);
}

.top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.about-section .full-image {
  max-width: 1100px;
  transform: scale(1.2);
  margin-left: 30px;
}

.top-left {
  flex: 1;
  margin-top: 70px;
  transform: scale(0.9);
}

.top-right {
  flex: 1;
  transform: scale(1.25);
  margin-top: 70px;
}

/* アルレポとは */
.about-section {
  background-color: #eef8fc;
  padding: 120px 0 140px 0;
}

.about-section .full-image {
  max-width: 1100px;
}

/* こんな課題ありませんか */
.problem-section {
  padding: 80px 0 120px 0;
}

.problem-section .full-image {
  max-width: 800px;
}

/* アルレポで解決できます */
.solution-section {
  background-color: #FFFFFF;
  padding: 80px 0;
}

/* 機能セクション共通 */
.feature-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.feature-section .container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.feature-number {
  font-size: 85px;
  font-weight: bold;
  color: #007ab7;
  position: absolute;
  z-index: 1;
}

.feature-box {
  background-color: #FFFFFF;
  border-radius: 20px;
  padding: 70px;
  box-shadow: 0 4px 20px #D0E9F7;
  position: relative;
  max-width: 2200px;
}

.feature-box img {
  max-width: 700px;
  display: block;
}

.feature-img--01 {
  position: relative;
  top: 20px;
}

.feature-img--04 {
  position: relative;
  top: -20px;
}

.feature-img--03 {
  position: relative;
  top: 20px;
}

.feature-left .container {
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
}

.feature-left .feature-number {
  left: calc(50% - 500px + 20px);
  top: -60px;
}

.feature-left .feature-box {
  margin-left: auto;
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 600px;
  padding-right: 70px;
}

.feature-left .feature-box img {
  margin-left: -430px;
  margin-right: 400px;
}

/* 右寄せ機能 - 左側が画面端まで */
.feature-right {
  background-color: #FFFFFF;
}

.feature-right .container {
  display: flex;
  justify-content: flex-start;
  padding-left: 0;
}

.trial-section .trial-img {
  max-width: 1200px;
  transform: scale(1.2);
}

.feature-right .feature-number {
  right: calc(50% + 20px);
  top: -60px;
}

.feature-right .feature-box {
  margin-left: 0;
  margin-right: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-right: 200px;
  padding-left: 500px;
}

.feature-right .feature-box img {
  margin-right: -70px;
  margin-left: auto;
  transform: scale(0.9);
}

/* 安心サポート */
.support-section {
  background-color: #fff;
  padding: 120px 0 60px 0;
}

.solution-section .full-image {
  transform: scale(0.85);
  margin-right: -10px;
  margin-top: 0px;
  margin-bottom: -40px;
}

/* 2週間トライアル */
.trial-section {
  background-color: #EEF8FB;
  padding: 80px 0;
}

.trial-section .full-image {
  max-width: 1400px;
}

.trial-section {
  background: linear-gradient(
    to bottom,
    #Fff 0%,
    #Fff 10%,
    #eef8fb 10%,
    #eef8fb 100%
  );
  padding: 80px 0;
}

.trial-container {
  position: relative;
}

.trial-over-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-75%);
  letter-spacing: 0.08em;
  background: #e9395e;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  padding: 12px 90px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(120, 20, 35, 0.2);
  transition: 0.3s ease;
  z-index: 10;
}

.trial-over-btn:hover {
  background: #d43254;
}

/* CTAボタン */
.cta-section {
  background-color: #0384c6;
  padding: 150px 0;
  text-align: center;
}

.footer .full-image {
  max-width: 850px;
  margin: 0 auto;
}

.top-left img {
  max-width: 100%;
  height: auto;
}

/* フッター */
.footer {
  background-color: #FFFFFF;
  padding: 40px 0 0;
}

/* 画像共通 */
.full-image {
  width: 100%;
  margin: 0 auto;
}

.top-left img {
  max-width: 120%;
  height: auto;
}

/* 01〜04 の feature-box 高さを個別に変更できる */
.feature-box--01 {
  padding-top: 130px;
  padding-bottom: 160px;
}

.feature-box--02 {
  padding-top: 120px;
  padding-bottom: 140px;
}

.feature-box--03 {
  padding-top: 120px;
  padding-bottom: 160px;
}

.feature-box--04 {
  padding-top: 180px;
  padding-bottom: 130px;
  position: relative;
}

/* PC版 04セクションのオーバーレイリンク */
.overlay-link {
  position: absolute;
  display: block;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}

/* 対応機種を確認するボタンの位置（上のボタン） */
.overlay-link--device {
  left: 45%;
  top: 32%;
  width: 52%;
  height: 7%;

}

/* セットプラン資料のダウンロードボタンの位置（下のボタン） */
.overlay-link--plan {
  left: 40%;
  top: 83%;
  width: 45%;
  height: 7%;

}

.footer {
  padding: 120px 0;
  background-color: #0384C6;
}

.solution-section,
.feature-section {
  background-color: #ECF7FC !important;
}

.mv-cv-wrapper {
  position: relative;
  width: 100%;
  height: 0;
}

/* ボタンのデザイン */
.hero-btn {
  margin-top: 35px;
  display: inline-block;
  background-color: #e9395e;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 20px;
  padding: 15px 100px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(160, 30, 50, 0.3);
  transition: all 0.3s ease;
  text-align: center;
}

.hero-btn:hover {
  background: #d43254;
}

.top-left img {
  margin-bottom: 0;
  display: block;
}

.footer-container {
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-btn {
  position: absolute;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  background-color: #e9395e;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  padding: 12px 140px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(120, 20, 35, 0.2);
  transition: 0.3s ease;
  letter-spacing: 0.08em;
  z-index: 10;
}

.footer-btn:hover {
  background: #d43254;
}


@media screen and (min-width: 1025px) {
  /* セクション1〜4の画像だけ拡大 */
  .feature-img--01,
  .feature-img--03,
  .feature-img--04 {
      transform: scale(1.2) !important;
      transform-origin: center center;
  }

  .feature-img--02 {
      transform: scale(1.1) !important;
      transform-origin: center center;
  }


  /* 左寄せ機能 - 右側が画面端まで */
.feature-left .container {
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
}

.feature-left .feature-number {
  left: 50%;
  margin-left: -300px;
  top: -80px;
}

.feature-left .feature-box {
  margin-left: auto;
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 600px;
  padding-right: 70px;
}

.feature-left .feature-box img {
  margin-left: -430px;
  margin-right: 400px;
}

/* 右寄せ機能 - 左側が画面端まで */
.feature-right {
  background-color: #FFFFFF;
}

.feature-right .container {
  display: flex;
  justify-content: flex-start;
  padding-left: 0;
}

.trial-section .trial-img {
  max-width: 1200px;
  transform: scale(1.2);
}

.feature-right .feature-number {
  right: 50%;
  margin-right: 370px;
  top: -80px;
}

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
  color: #333;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* PC/SP切り替え用クラス */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
  
  .sp-only {
    display: block !important;
  }
}

/* ========== PC版スタイル ========== */

/* コンテナ */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.top-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* TOPセクション */
.top-section {
  padding: 60px 0 180px 0;
}

.top-section.pc-only {
  position: relative;
  overflow: hidden;
}

.top-section.pc-only::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: 50px;
  width: 700px;
  height: 700px;
  background-image: url('images/dot-pattern.png');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.solution-section .container {
  transform: translateX(60px);
}

.top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.about-section .full-image {
  max-width: 1100px;
  transform: scale(1.2);
  margin-left: 30px;
}

.top-left {
  flex: 1;
  margin-top: 70px;
  transform: scale(0.9);
}

.top-right {
  flex: 1;
  transform: scale(1.25);
  margin-top: 70px;
}

/* アルレポとは */
.about-section {
  background-color: #eef8fc;
  padding: 120px 0 140px 0;
}

.about-section .full-image {
  max-width: 1100px;
}

/* こんな課題ありませんか */
.problem-section {
  padding: 80px 0 120px 0;
}

.problem-section .full-image {
  max-width: 800px;
}

/* アルレポで解決できます */
.solution-section {
  background-color: #FFFFFF;
  padding: 80px 0;
}

/* 機能セクション共通 */
.feature-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.feature-section .container {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.feature-number {
  font-size: 85px;
  font-weight: bold;
  color: #007ab7;
  position: absolute;
  z-index: 1;
}

.feature-box {
  background-color: #FFFFFF;
  border-radius: 20px;
  padding: 70px;
  box-shadow: 0 4px 20px #D0E9F7;
  position: relative;
  max-width: 2200px;
}

.feature-box img {
  max-width: 700px;
  display: block;
}

.feature-img--01 {
  position: relative;
  top: 20px;
}

.feature-img--04 {
  position: relative;
  top: -20px;
}

.feature-img--03 {
  position: relative;
  top: 20px;
}

.feature-left .container {
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
}

.feature-left .feature-number {
  left: 50%;
  margin-left: -480px;
  top: -60px;
}

.feature-left .feature-box {
  margin-left: auto;
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 600px;
  padding-right: 70px;
}

.feature-left .feature-box img {
  margin-left: -430px;
  margin-right: 400px;
}

/* 右寄せ機能 - 左側が画面端まで */
.feature-right {
  background-color: #FFFFFF;
}

.feature-right .container {
  display: flex;
  justify-content: flex-start;
  padding-left: 0;
}

.trial-section .trial-img {
  max-width: 1200px;
  transform: scale(1.2);
}

.feature-right .feature-number {
  right: 50%;
  margin-right: -480px;
  top: -60px;
}

.feature-right .feature-box {
  margin-left: 0;
  margin-right: auto;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-right: 200px;
  padding-left: 500px;
}

.feature-right .feature-box img {
  margin-right: -70px;
  margin-left: auto;
  transform: scale(0.9);
}

/* 安心サポート */
.support-section {
  background-color: #fff;
  padding: 120px 0 60px 0;
}

.solution-section .full-image {
  transform: scale(0.85);
  margin-right: -10px;
  margin-top: 0px;
  margin-bottom: -40px;
}

/* 2週間トライアル */
.trial-section {
  background-color: #EEF8FB;
  padding: 80px 0;
}

.trial-section .full-image {
  max-width: 1400px;
}

.trial-section {
  background: linear-gradient(
    to bottom,
    #Fff 0%,
    #Fff 10%,
    #eef8fb 10%,
    #eef8fb 100%
  );
  padding: 80px 0;
}

.trial-container {
  position: relative;
}

.trial-over-btn {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-75%);
  letter-spacing: 0.08em;
  background: #e9395e;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  padding: 12px 90px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(120, 20, 35, 0.2);
  transition: 0.3s ease;
  z-index: 10;
}

.trial-over-btn:hover {
  background: #d43254;
}

/* CTAボタン */
.cta-section {
  background-color: #0384c6;
  padding: 150px 0;
  text-align: center;
}

.footer .full-image {
  max-width: 850px;
  margin: 0 auto;
}

.top-left img {
  max-width: 100%;
  height: auto;
}

/* フッター */
.footer {
  background-color: #FFFFFF;
  padding: 40px 0 0;
}

/* 画像共通 */
.full-image {
  width: 100%;
  margin: 0 auto;
}

.top-left img {
  max-width: 120%;
  height: auto;
}

/* 01～04 の feature-box 高さを個別に変更できる */
.feature-box--01 {
  padding-top: 130px;
  padding-bottom: 160px;
}

.feature-box--02 {
  padding-top: 120px;
  padding-bottom: 140px;
}

.feature-box--03 {
  padding-top: 120px;
  padding-bottom: 160px;
}

.feature-box--04 {
  padding-top: 180px;
  padding-bottom: 130px;
  position: relative;
}

/* PC版 04セクションのオーバーレイリンク */
.overlay-link {
  position: absolute;
  display: block;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}

/* 対応機種を確認するボタンの位置（上のボタン） */
.overlay-link--device {
  left: 45%;
  top: 32%;
  width: 52%;
  height: 7%;
}

/* セットプラン資料のダウンロードボタンの位置（下のボタン） */
.overlay-link--plan {
  left: 40%;
  top: 83%;
  width: 45%;
  height: 7%;
}

.footer {
  padding: 120px 0;
  background-color: #0384C6;
}

.solution-section,
.feature-section {
  background-color: #ECF7FC !important;
}

.mv-cv-wrapper {
  position: relative;
  width: 100%;
  height: 0;
}

/* ボタンのデザイン */
.hero-btn {
  margin-top: 35px;
  display: inline-block;
  background-color: #e9395e;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 20px;
  padding: 15px 100px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(160, 30, 50, 0.3);
  transition: all 0.3s ease;
  text-align: center;
}

.hero-btn:hover {
  background: #d43254;
}

.top-left img {
  margin-bottom: 0;
  display: block;
}

.footer-container {
  position: relative;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-btn {
  position: absolute;
  left: 50%;
  top: 70px;
  transform: translateX(-50%);
  background-color: #e9395e;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  padding: 12px 140px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  box-shadow: 0 6px 18px rgba(120, 20, 35, 0.2);
  transition: 0.3s ease;
  letter-spacing: 0.08em;
  z-index: 10;
}

.footer-btn:hover {
  background: #d43254;
}

@media screen and (min-width: 1025px) {
  /* セクション1～4の画像だけ拡大 */
  .feature-img--01,
  .feature-img--03,
  .feature-img--04 {
      transform: scale(1.2) !important;
      transform-origin: center center;
  }

  .feature-img--02 {
      transform: scale(1.1) !important;
      transform-origin: center center;
  }
}

/* ========== SP版スタイル ========== */
@media (max-width: 768px) {
  /* SP版 共通画像スタイル */
  .sp-only .full-image {
    width: 100%;
    display: block;
  }

  /* SP版 共通ボタンスタイル */
  .cv-btn,
  .device-btn,
  .plan-btn,
  .trial-btn,
  .footer-cv-btn {
    display: block;
    width: 90%;
    max-width: 320px;
    margin: 0 auto;
    padding: 16px 20px;
    background-color: #e9395e;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(120, 20, 35, 0.2);
    transition: background-color 0.3s ease;
    letter-spacing: 0.08em;
  }

  .trial-btn{
    margin-top: 30px;
  }

  .cv-btn:hover,
  .device-btn:hover,
  .plan-btn:hover,
  .trial-btn:hover,
  .footer-cv-btn:hover {
    background-color: #d43254;
  }

  /* MVセクション */
  .mv-section {
    position: relative;
    padding-bottom: 30px;
    background-color: #fff;
  }

  .mv-section .cv-btn {
    margin-top: 0px;
    margin-bottom: 20px;
  }

  /* メインコンテンツセクション */
  .main-content-section {
    position: relative;
    background-color: #eef8fc;
  }

  .main-content-section .cta-link {
    display: block;
    text-decoration: none;
    margin: 0;
  }

  .main-content-section .cta-image {
    width: 100%;
    height: auto;
    display: block;
  }

  /* セットプランセクション */
  .plan-section {
    position: relative;
    background-color: #fff;
  }

  .plan-section .cta-link {
    display: block;
    text-decoration: none;
    margin: 0;
  }

  .plan-section .cta-image {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 安心サポートセクション */
  .support-section-sp {
    background-color: #eef8fc;
  }

  /* トライアルセクション */
  .trial-section-sp {
    background-color: #f5fbfd;
    padding-bottom: 40px;
  }

  /* フッター */
  .footer-sp {
    position: relative;
    background-color: #0384c6;
    padding-bottom: 40px;
  }

  .footer-sp .footer-cv-btn {
    margin-top: 24px;
    margin-bottom: 20px;
  }

  /* 小さい画面用の調整 */
  @media (max-width: 375px) {
    .cv-btn,
    .device-btn,
    .plan-btn,
    .footer-cv-btn {
      font-size: 16px;
      padding: 14px 18px;
    }
  }
}

}





/* ========== SP版スタイル ========== */
@media (max-width: 768px) {
  /* SP版 共通画像スタイル */
  .sp-only .full-image {
    width: 100%;
    display: block;
  }

  /* SP版 共通ボタンスタイル */
  .cv-btn,
  .device-btn,
  .plan-btn,
  .trial-btn,
  .footer-cv-btn {
    display: block;
    width: 90%;
    max-width: 320px;
    margin: 0 auto;
    padding: 16px 20px;
    background-color: #e9395e;
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(120, 20, 35, 0.2);
    transition: background-color 0.3s ease;
    letter-spacing: 0.08em;
  }

  .trial-btn{

  margin-top: 30px;
  }

  .cv-btn:hover,
  .device-btn:hover,
  .plan-btn:hover,
  .trial-btn:hover,
  .footer-cv-btn:hover {
    background-color: #d43254;
  }

  /* MVセクション */
  .mv-section {
    position: relative;
    padding-bottom: 30px;
    background-color: #fff;
  }

  .mv-section .cv-btn {
    margin-top: 0px;
    margin-bottom: 20px;
  }

  /* メインコンテンツセクション */
  .main-content-section {
    position: relative;
    background-color: #eef8fc;
  }

  .main-content-section .cta-link {
    display: block;
    text-decoration: none;
    margin: 0;
  }

  .main-content-section .cta-image {
    width: 100%;
    height: auto;
    display: block;
  }

  /* セットプランセクション */
  .plan-section {
    position: relative;
    background-color: #fff;
  }

  .plan-section .cta-link {
    display: block;
    text-decoration: none;
    margin: 0;
  }

  .plan-section .cta-image {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 安心サポートセクション */
  .support-section-sp {
    background-color: #eef8fc;
  }

  /* トライアルセクション */
  .trial-section-sp {
    background-color: #f5fbfd;
    padding-bottom: 40px;
  }

  /* フッター */
  .footer-sp {
    position: relative;
    background-color: #0384c6;
    padding-bottom: 40px;
  }

  .footer-sp .footer-cv-btn {
    margin-top: 24px;
    margin-bottom: 20px;
  }

  /* 小さい画面用の調整 */
  @media (max-width: 375px) {
    .cv-btn,
    .device-btn,
    .plan-btn,
    .footer-cv-btn {
      font-size: 16px;
      padding: 14px 18px;
    }
  }
}