@charset "UTF-8";

.img4{
 width : 100% ;
}

.button1{
  background:#4d4d4d;
 width:385px;
 height:56px;
  border-radius:7px;

text-decoration: none!important;
 font-size:1.5em;
 text-align:center;
 color:#fff;
 display: flex;
 justify-content: center;
 align-items: center;
            cursor: pointer; /* カーソルをポインターに変更 */
margin-left: auto;
margin-right: auto;
}
.button:hover{
    opacity: 0.7;
}

.buttonA{
  background:#ff0000;
 width:385px;
 height:56px;
  border-radius:7px;

text-decoration: none!important;
 font-size:1.5em;
 text-align:center;
 color:#fff;
 display: flex;
 justify-content: center;
 align-items: center;
            cursor: pointer; /* カーソルをポインターに変更 */
margin-left: auto;
margin-right: auto;
}
.buttonA:hover{
    opacity: 0.7;
}


        .logo-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo-item {
            flex: 1 1 22%; /* ロゴの幅を22%に設定、スペースを確保 */
            margin: 10px;
            text-align: center;
        }

        .logo-item img {
            width: 100%; /* ロゴの幅を調整する場合はこのプロパティを変更 */
            height: auto;
            max-width: 150px; /* 変更可能な最大幅 */
        }








.speech_bubble {
    position: relative;
    width: 100%; /* 親要素に対する割合 */
    max-width: 768px; /* 最大幅を設定 */
    background: #1A7BBF;
    padding: 15px 0;
    text-align: center;
    color: #FFFFFF;
        font-size: 1.2em;
    font-weight: bold;
         border-radius: 5px;
    margin: 0 auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 影を追加 */
}
.speech_bubble:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #1A7BBF;
}
.img-full_new {
    width: 100%;
    height: auto;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), 4px 4px 10px rgba(0, 0, 0, 0.1); /* 複数の影 */
  cursor: pointer; /* カーソルをポインタに設定 */
  opacity: 1; /* 初期の透明度（100%） */
  transition: opacity 0.3s ease; /* アニメーションを滑らかにする */
}
.img-full_new:hover {
  opacity: 0.7; /* ホバー時の透明度（70%） */
}

/* コンテナ全体のスタイル */
.container_ctf {
  display: flex; /* 横並びにする */
  justify-content: space-between; /* 均等に配置 */
  align-items: stretch; /* 高さを揃える */
  width: 100%;
  max-width: 1200px; /* コンテナの最大幅 */
  margin: 0 auto; /* 中央揃え */
  gap: 20px; /* 左右の間隔 */
  padding: 20px;
  box-sizing: border-box; /* パディングを含めて幅を計算 */
}

/* 左ブロック（テキストとボタン） */
.left_ctf {
  flex: 1; /* 幅を5:5に分割 */
  background: #f4f4f4; /* 背景色（必要に応じて） */
  padding: 10px;
  display: flex;
  flex-direction: column; /* 縦並びにする */
 display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 水平方向で中央揃え */
  justify-content: center; /* 必要に応じて縦方向も中央揃え */
  text-align: center;      /* テキストの中央揃え */
}

/* 上部から5%の位置に配置するテキスト */
.left_ctf_p {

  font-size: 1.2em; /* やや大きめの文字サイズ */
  font-weight: bold; /* 強調 */
  text-align: center;

}

/* 左ブロック（テキストとボタン） */
.left_ctf2 {
  flex: 1; /* 幅を5:5に分割 */
  background: #fffff; /* 背景色（必要に応じて） */
  padding: 10px;
  display: flex;
  flex-direction: column; /* 縦並びにする */
 display: flex;
  flex-direction: column; /* 縦方向に並べる */
  align-items: center;    /* 水平方向で中央揃え */
  justify-content: center; /* 必要に応じて縦方向も中央揃え */
  text-align: center;      /* テキストの中央揃え */
}

.left_ctf2_p {

  font-size: 1.2em; /* やや大きめの文字サイズ */
  font-weight: bold; /* 強調 */
  text-align: center;

}


/* ボタンのスタイル */
.btn_ctf {

  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.btn_ctf:hover {
  background-color: #0056b3;
}

.left_txt {
  font-size: 1.0em; /* やや大きめの文字サイズ */
  text-align: left;

}

/* 右ブロック（画像） */
.right_ctf {
  flex: 1; /* 幅を5:5に分割 */
  display: flex;
  justify-content: center;
  align-items: center;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), 4px 4px 10px rgba(0, 0, 0, 0.1); /* 複数の影 */
}

.right_ctf img {
  max-width: 100%; /* 画像の幅をブロック内に収める */
  max-height: 100%; /* 高さをブロック内に収める */
  object-fit: cover; /* 画像をブロック内で適切に配置 */
}
/* 右ブロック（画像） */
.right_ctf2 {
  flex: 1; /* 幅を5:5に分割 */
  display: flex;
  justify-content: center;
  align-items: center;
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), 4px 4px 10px rgba(0, 0, 0, 0.1); /* 複数の影 */
}

.right_ctf2 img {
  max-width: 100%; /* 画像の幅をブロック内に収める */
  max-height: 100%; /* 高さをブロック内に収める */
  object-fit: cover; /* 画像をブロック内で適切に配置 */
}



.btn3,
a.btn3,
button.btn3 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.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;
 
}

a.btn3-svg {
  font-weight: 700;
  line-height: 54px;

  width: 204px;
  height: 54px;
  padding: 0;

  cursor: pointer;
  text-decoration: none;

  background-color: transparent;
}

a.btn3-svg svg {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
}

a.btn3-svg svg rect {
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;

  stroke: #000;
  stroke-width: 2;
  stroke-dasharray: 200px, 16px;
  stroke-dashoffset: 70px;
}

a.btn3-svg:hover svg rect {
  stroke-dashoffset: 284px;
}

a.btn3-svg span {
  color: #000;
}
.parent_ctf {
  text-align: center; /* 親要素内のインライン要素を中央揃え */
}






/* レスポンシブ対応 */
@media (max-width: 768px) {
  .container_ctf {
    flex-direction: column; /* 縦並びにする */
  }

  .left_ctf, .right_ctf {
    flex: none;
    width: 100%;
  }

  /* 左ブロック（テキストとボタン）の順番を上に変更 */
  .left_ctf {
    order: 2; /* テキストとボタンを上に持ってくる */
  }

  /* 右ブロック（画像）の順番を下に変更 */
  .right_ctf {
    order: 1; /* 画像を下に持ってくる */
  }

  .left_ctf p {
    font-size: 1.2em; /* 狭い画面では文字サイズを調整 */
  }

  .btn_ctf {
    margin-top: 10px;
  }
.left_txt {
  font-size: 0.4em; /* やや大きめの文字サイズ */
  text-align: left;
}


  .left_ctf2, .right_ctf2 {
    flex: none;
    width: 100%;
  }

  /* 左ブロック（テキストとボタン）の順番を上に変更 */
  .left_ctf2 {
    order: 2; /* テキストとボタンを上に持ってくる */
  }

  /* 右ブロック（画像）の順番を下に変更 */
  .right_ctf2 {
    order: 1; /* 画像を下に持ってくる */
  }

  .left_ctf2 p {
    font-size: 1.2em; /* 狭い画面では文字サイズを調整 */
  }

}