@charset "UTF-8";



a {
  text-decoration: none; /* 下線を削除 */
  color: inherit; /* 親要素の色に合わせる */
  cursor: default; /* マウスカーソルを通常のままにする */
}



.example {
  position: relative;
  }

.example a {/*aタグを画像の真ん中に*/
  position: absolute;
  top: 85%;
  left: 23%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  /*以下装飾*/
  margin:0;/*余計な隙間を除く*/
  font-size: 35px;/*文字サイズ*/
  border: solid #EF810F 3px; /*線で囲う*/
  padding: 14px;/*文字と線の間の余白*/
  color: white;/*文字色*/
  text-decoration: none;/*下線を表示させない*/
  background:#EF810F;
  border-radius:7px;
  }

.example a:hover{/*カーソルを当てたとき*/
    opacity: 0.7;/*背景を半透明に*/
  }

.example img {
  width: 100%;
  }




.custom1-text {
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.8rem;
    color: rgb(51, 51, 51);
    text-align: left; /* 左揃え */
}
.image-container {
    text-align: center; /* 画像を中央に寄せる */
    width: 100%; 
}
@media (max-width: 768px) {
.image-container {
    position: relative;  /* 必要に応じて位置を相対的にする */
    width: 98vw;        /* 画面幅いっぱいに設定 */
    height: auto;        /* 高さはアスペクト比を保持 */
    left: 50%;           /* 横方向の中央に配置 */
    transform: translateX(-50%);  /* 位置調整（中央寄せ） */
    margin: 0;           /* 余白をなくす */
}
}

@media (max-width: 480px) {
    position: relative;  /* 必要に応じて位置を相対的にする */
    width: 98vw;        /* 画面幅いっぱいに設定 */
    height: auto;        /* 高さはアスペクト比を保持 */
    left: 50%;           /* 横方向の中央に配置 */
    transform: translateX(-50%);  /* 位置調整（中央寄せ） */
    margin: 0;           /* 余白をなくす */
}
}



.custom-image {
    width: 50%; /* 親要素いっぱいに画像を広げる */
    height: auto; /* 画像の縦横比を維持 */
}
.text1-container {
  margin: 0 auto; /* 中央揃え */
}

.text1-container p {
  font-family: "Yu Gothic", sans-serif;
  font-size: 1.75rem;
  color: rgb(51, 51, 51);
  text-align: center;
}
.centered-text {
    font-family: "Yu Gothic", sans-serif;
    font-size: 2.4rem;
    color: rgb(235, 0, 0);
    text-align: center;
    margin-bottom: 0px; /* 下の余白を5pxに設定 */
}
.centeredh2-text {
    font-family: 'Yu Gothic', YuGothic, sans-serif;
    font-size: 3.5rem;
    color: rgb(0, 0, 0);
    text-align: center;
    margin-top: -10px; /* 上の余白を5pxに設定 */
}
.image2 {
    position: relative; /* 相対位置を設定 */
    width: 100%; /* 幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    overflow: hidden; /* はみ出た部分を隠す */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 影をつけて浮き出し効果 */
}

.image2 img {
    display: block; /* ブロック要素として表示 */
    width: 100%; /* 幅を100%に設定 */
    height: auto; /* 高さを自動調整 */
    object-fit: cover; /* 画像を親要素にフィットさせる */
}




.max-con {
    max-width: 1200px; /* 最大幅を1200pxに制限 */
   margin: 0 auto; /* 中央に配置 */
}

.container1 {
    display: flex;
    justify-content: space-between;
    gap: 5px; /* ブロック間の間隔 */
    max-width: 100%;
    flex-wrap: wrap;
}

.block1 {
    flex-basis: calc(33.33% - 20px); /* 3つのブロックを均等に表示 */
    box-sizing: border-box;
    padding: 0.1px;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 要素を均等に揃える */
    height: auto;
    min-height: 100%; /* 3つのブロックで高さを揃える */
}

.block1 img {
    width: 100%;
    height: auto;
}

.title1 {
    font-family: "Yu Gothic", sans-serif;
    font-size: 2.4rem;
    font-weight: bold;
    color: red;
    margin-bottom: 10px;
    text-align: left;
line-height: 1.4;
}

.description1 {
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.8rem;
    color: rgb(51, 51, 51);
    text-align: left;
    line-height: 1.5;
    flex-grow: 1; /* 説明文ブロックの高さを均等に保つ */
}
.description2 {
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.8rem;
    color: rgb(51, 51, 51);
    text-align: center;
    line-height: 1.5;
    flex-grow: 1; /* 説明文ブロックの高さを均等に保つ */
}

.button-container {
    display: flex;
    justify-content: center;
    margin-top: auto; /* ボタンをブロックの下部に配置 */
}

.detail-button1 {
    background-color: transparent;
    color: #666666;
    border: 1px solid gray;
    padding: 10px 40px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center;
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.8rem;
    width: 200px; /* ボタンの固定幅 */
}

.detail-button1:hover {
    background-color: blue;
    color: white;
}

@media screen and (max-width: 768px) {
    .container1 {
        flex-direction: column;
    }

    .block1 {
        flex-basis: 100%;
    }
}

.title2 {
    font-family: "Yu Gothic", sans-serif;
    font-size: 2.3rem;
    font-weight: bold;
    color: rgb(51, 51, 51);
    margin-bottom: 10px;
    text-align: left;
line-height: 1.4;
}

.title2-2 {
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.9rem;
    font-weight: bold;
    color: rgb(51, 51, 51);
    margin-bottom: 10px;
    text-align: left;
}

.custom-list {
    list-style: none; /* デフォルトのリストスタイルを無効化 */
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}

.custom-list li {
    font-family: "Yu Gothic", sans-serif;
    font-size: 1.8rem;
    color: rgb(51, 51, 51);
    text-align: left;
    line-height: 1.5;
    position: relative;
    padding-left: 30px; /* チェックアイコン分のスペースを確保 */
}

.custom-list li::before {
    content: '\f00c'; /* Font Awesomeのチェックアイコン (fa-check) */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 1.8rem;
    color: blue; /* アイコンの色を青に設定 */
    position: absolute;
    left: 0;
    top: 0; /* アイコンを最初の行に揃える */
    transform: translateY(0); /* アイコンの垂直位置を調整 */
    line-height: 1.45; /* アイコンとテキストの高さを一致させる */
}









.container3 {
    display: flex;
    width: 100%;            
    margin: 0 auto;          /* コンテナを中央揃え */
    height: 28vh;
    flex-direction: row;     /* デフォルトは横並び */
}

.text-block3 {
    flex: 6;             
    background-color: #f0f0f0; /* 任意の背景色 */
    padding: 20px;
    display: flex;
    align-items: center;     /* テキストを垂直方向に中央揃え */
}

.image-block3 {
    flex: 4;              
}

.image-block3 img {
    width: 100%;             /* 画像を親要素の幅いっぱいに設定 */
    height: 100%;            /* 画像を親要素の高さいっぱいに設定 */
    object-fit: cover;       /* 画像の縦横比を崩さずに親要素に合わせて表示 */
}

/* 768px以下の時のスタイル */
@media (max-width: 768px) {
    .container3 {
        flex-direction: column;  /* 縦並びに変更 */
        height: auto;            /* 高さを自動調整 */
    }

    .image-block3 {
        order: -1;               /* 画像を上に表示 */
        width: 100%;             /* 幅を100%に設定 */
    }

    .text-block3 {
        order: 1;                /* テキストを下に表示 */
        width: 100%;             /* 幅を100%に設定 */
    }

    .image-block3 img {
        height: auto;            /* 画像の高さを自動調整 */
    }

    .text-block3, .image-block3 {
        padding: 0;              /* 間隔をなくす */
    }
}


.text-block3 {
    flex: 6;              
    background-color: #ffffff; /* 任意の背景色 */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;    /* テキストを縦方向中央揃え */
    align-items: flex-start;    /* テキストを左揃え */
    padding-left: 20px;         /* 左に間隔を空ける */
}

.step-title {
    font-size: 1.5em;           /* 説明文より大きなフォントサイズ */
    font-weight: bold;          /* 太字 */
    margin: 0;                  /* 不要な余白を削除 */
}

.step-number {
    color: red;                 /* STEP1を赤に設定 */
}

.description3 {
    font-size: 1em;             /* 説明文のフォントサイズを通常に設定 */
    margin-top: 10px;           /* タイトルとの間に少し余白を追加 */
    line-height: 1.5;           /* 読みやすい行間を設定 */
}



.triangle {
    display: block;
    width: 0;
    height: 0;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 25px;
    border-style: solid;
    border-width: 22px 22px 0;
    border-color: #eb0000 transparent transparent;

}





.logoh2-text {
    font-family: 'Yu Gothic', YuGothic, sans-serif;
    font-size:2.6rem;
    color: rgb(52, 52, 52);
    text-align: center;
    margin-top: -10px; /* 上の余白を5pxに設定 */
}

         .logo-container {
            width: 100%;             /* コンテナの幅を100% */
            height: 110px;            /* 高さを150pxに設定 */
            background-color: white;  /* 背景を白に */
            overflow: hidden;         /* コンテナの外に出た要素を隠す */
            position: relative;
   margin-top: -20px;
        }

        .logo-slide {
            display: flex;
            width: max-content;       /* コンテンツ幅を必要に応じて自動調整 */
            animation: scroll 35s linear infinite; /* 無限にスクロール */
        }

        .logo-slide img {
            width: 260px;             /* ロゴの幅を300pxに設定 */
            height: 130px;            /* ロゴの高さを150pxに設定 */
            object-fit: contain;      /* アスペクト比を保持 */
            margin-right: 25px;       /* ロゴ間の間隔 */
        }

        @keyframes scroll {
            0% {
                transform: translateX(0); /* 最初は元の位置 */
            }
            100% {
                transform: translateX(-50%); /* 半分流れた位置まで動く */
            }
        }


 


.gray-background {
  background-color: #f0f0f0; /* 薄いグレー */
}

.center-text {
 text-align: center;
}




.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* 影をつけて浮き出し効果 */
}

.btn-wrap {
  display: block;
  max-width: 435px;
  margin: 0 auto 20px;
}

a.btn-c {
  font-size: 1.8rem;

  display: block;
  overflow: hidden;

  padding: 1.5rem 0 1.5rem 3rem;

  border-bottom: 5px solid #e6d900;
  background: #fff100;
}

a.btn-c:before {
  font-size: 1.2rem;
  font-weight: bold;

  position: absolute;
  top: 1.2rem;
  left: -3.2rem;

  padding: 0 3rem;

  content: "無料!";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: top;
  transform-origin: top;

  color: #fff;
  background: #eb6100;
  -webkit-box-shadow: 0 3px 3px #e6d900;
  box-shadow: 0 3px 3px #e6d900;
}

a.btn-c:hover {
  transform: translateY(3px);

  border-bottom: 2px solid #e6d900;
  background: #fff21a;
}




  .custom-link {
    color: blue;
    font-weight: bold;
    transition: opacity 0.3s ease; /* スムーズな透明度の変化 */
  }
  
  .custom-link:hover {
    opacity: 0.7; /* カーソルが合うと透明度を変える */
  }