body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header h1{
    font-size: clamp(12px, 2.1vw, 28px);
    font-weight: 550;
    text-align: center;
    margin: 1.5% 0;
}

.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center; /* 水平方向中央 */
    align-items: center; /* 垂直方向中央 */
}

.header {
    background: #005acd;
    color: white;
    padding: 2% 0 2% 0;
    text-align: center;
}

p{
    color: #333333;
}

img#logo{
    width: 12%;
}

/* アニメーションの定義 */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px); /* 下から上に浮き上がる */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 468px) {

    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .container{
        width:  100%;
        overflow-x: hidden;
    }

    img, video, iframe, .content {
        max-width: 100%;
        height: auto;
    }

    .header {
        padding: 0 0 2% 0;
    }

    header img#logo{
        width: 20%;
        margin: 2.5% 0 0 0;
    }

}

    @media screen and (max-width: 480px) {

        html, body {
          overflow-x: hidden;
          max-width: 100%;
        }

        .container{
            width:  100%;
            overflow-x: hidden;
        }

        header img#logo{
            width: 17%;
        }

        header h1{
            margin: 2% 0 2% 0;
            font-size: clamp(11px, 3.3vw, 16vw);
        }
    }


/*ーーーーーーーーーーーーーーー*/
section#erea1{
  padding-top: 2%;
  width: 100%;
  height: 100%;
  background-image: url("image/23106309.jpg");
  background-color:rgba(255,255,255,0.4);
  background-blend-mode:lighten;
  background-size: cover;
  background-position: center;
  margin-top: -2%;
}

section#erea1 div#s1{
  display: flex;  /* 横並びにする */
  justify-content: center; /* 水平方向の中央揃え */
  align-items: center; /* 垂直方向の中央揃え */
  gap: 10px; /* 画像と文字の間隔を調整 */
  text-align: center;
}

section#erea1 div#s1 h2{
    color: #333333;
    font-size: clamp(16px, 2.2vw, 30px);
    font-weight: 600;
}

section#erea1 div#s1 h2.underline-text {
  display: inline-block;
  position: relative;
  z-index: 1; /* 文字を前面に配置 */
}

section#erea1 div#s1 h2.underline-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10%; /* 文字の下1/3にかぶるように調整 */
  width: 100%;
  height: 10px; /* アンダーラインの太さ */
  background-color: rgba(252, 203, 126); /* 半透明のアンダーライン */
  z-index: -1; /* 文字の背面に配置 */
}

section#erea1 div#s1 img.leaf{
    width: 2.5%;
}

.centered-svg-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin: 0% auto;
  text-align: center;
  margin-top: -1%;
  margin-bottom: 1%;
}

.centered-svg-wrapper svg {
  max-width: 90%;
  height: auto;
}

.animation{
    opacity: 0; /* 初期状態で透明 */
    animation: fadeUp 1.9s ease-out forwards; /* アニメーション適用 */
    animation-delay: 0.11s;
    margin-top: 0;
    margin-top: -5%;
}

section#erea1 div#s4 p{
    font-size: clamp(14px, 1.3vw, 18px);
    justify-content: center; /* 水平方向の中央揃え */
    text-align: center;
}

section#erea1 div#s4 img{
    width: 64%;
    max-width: 1300px; /* 必要なら最大幅を設定 */
    padding-bottom: 2%;
    padding-left: 1%;
}

@media screen and (min-width: 1441px) {

    section#erea1 div.container{
        margin-top: -0.7%;
        padding-bottom: 1%;
    }

    section#erea1 div#s1 h2{
        font-size: clamp(16px, 2.3vw, 33px);
    }

    section#erea1 div#s3 p {
        font-size: clamp(27px, 5vw, 73px);
    }

    section#erea1 div#s3 span{
        font-size: clamp(32px, 6vw, 85px);
    }

    section#erea1 div#s3{
      margin-top: 0%;
    }

    .centered-svg-wrapper svg {
      max-width: 100%;
    }

    section#erea1 div#s3 p.outline-text {
       -webkit-text-stroke: 11px white;
      text-stroke: 8px white;
      paint-order: stroke;
    }

    section#erea1 div#s4 img{
        width: 140%;
        max-width: 890px; /* 必要なら最大幅を設定 */
        margin-bottom: -2%;
    }
}

@media screen and (max-width: 670px) {

    section#erea1 div.centered-svg-wrapper svg{
        min-width: 600px; /* これで縮みすぎを防ぐ */
        margin-top: 1%;
    }
}

@media screen and (max-width: 600px) {

    section#erea1 div.container{
        margin-top: 1%;
    }

    section#erea1 div#s1{
        gap: 2px;
    }

    section#erea1 div#s1 img.leaf{
        width: 4%;
    }

    section#erea1 div#s1 h2.underline-text::after {
      bottom: 5%; /* 文字の下1/3にかぶるように調整 */
      height: 5px; /* アンダーラインの太さ */
    }

    section#erea1 div#s1 h2{
        font-size: clamp(14px, 2.2vw, 16px);
    }

    section#erea1 div.centered-svg-wrapper svg{
        min-width: 500px; /* これで縮みすぎを防ぐ */
    }

    section#erea1 div#s4 p{
       font-size: clamp(7.6px, 1.4vw, 14px);
    }

    section#erea1 div#s4 img{
        width: 72%;
    }

    section#erea1 div#s4{
        padding-bottom: 3%;
    }

    section#erea1 div#s3 p.outline-text {
      -webkit-text-stroke: 4px white;
      text-stroke: 4px white;
      paint-order: stroke;
    }
}

@media screen and (max-width: 550px) {
    section#erea1 div.centered-svg-wrapper svg{
        min-width: 450px;
    }
}

@media screen and (max-width: 480px) {
    section#erea1 div#s1 h2 {
        font-size: clamp(12px, 3.5vw, 7vw); /* スマホ向け：vwで可変 */
        white-space: nowrap; /* 改行させたくない場合 */
    }

    section#erea1 div.centered-svg-wrapper{
        z-index: 1000;
        margin-top: 0.4%;
    }

    section#erea1 div#s4{
        margin-left: 4%;
    }

    section#erea1 div#s4 img{
        width: 100%;
        padding-top: 4%;
    }
}

@media screen and (max-width: 440px) {
    section#erea1 div.centered-svg-wrapper{
        margin-bottom: -1%;
    }
}

@media screen and (max-width: 420px) {
    section#erea1 div.centered-svg-wrapper{
        margin-bottom: -2%;
    }
}

@media screen and (max-width: 400px) {
    section#erea1 div.centered-svg-wrapper{
        margin-bottom: -3%;
    }
}

@media screen and (max-width: 380px) {
    section#erea1 div.centered-svg-wrapper{
        margin-bottom: -5%;
    }
}

@media screen and (max-width: 355px) {
    section#erea1 div.centered-svg-wrapper{
        margin-bottom: -6%;
    }
}

@media screen and (max-width: 320px) {
    section#erea1 div.centered-svg-wrapper{
        margin-bottom: -8%;
    }
}

/*ーーーーーーーーーーーーーーー*/
section#erea2{
    padding-top: 2%;
    width: 100%;
    height: 100%;
    background-image: url("image/354862.jpg");
    background-size: cover;
    background-position: 0% 0%;
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
}

section#erea2 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center; /* 水平方向中央 */
    align-items: center; /* 垂直方向中央 */
    margin-top: 2%;
}

/* スクロール時に適用されるクラス */
section#erea2.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea2.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}

section#erea2 div#s1{
    text-align: center;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 2%;
    padding: 3.5% 4.5% 20% 4.5%;
    font-family: "dnp-shuei-mgothic-std", sans-serif;
}

section#erea2 div#s1 p{
    margin: 0;  /* デフォルトの余白を削除 */
    padding: 0; /* 不要なパディングも削除 */
    position: relative; /* 疑似要素の基準にする */
    font-size: clamp(16px, 2.3vw, 30px);
    font-weight: bold;
    color: #188aeb;
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */
    gap: 15px; /* 文字と棒線の間隔 */
    font-family: "dnp-shuei-mgothic-std", sans-serif;
}

section#erea2 div#s1 p.outline-text2::before,
section#erea2 div#s1 p.outline-text2::after {
  content: "";
  display: inline-block;
  width: 60px; /* 棒線の長さ */
  height: 2px; /* 棒線の太さ */
  background-color: #188aeb; /* 棒線の色 */
  vertical-align: middle; /* 行の中央に配置 */
}

section#erea2 div#s1 aside{
    font-size: clamp(9.5px, 1.5vw, 18.5px);
    line-height: 3.4vw;
    color: #333333;
    margin-top: 2%;
    font-weight: 500;
    font-family: "dnp-shuei-mgothic-std", sans-serif;
}

section#erea2 div#s2{
    display: flex;
    justify-content: center; /* 水平方向中央 */
    align-items: center; /* 垂直方向中央 */
    margin-top: -20%;
}

section#erea2 img{
    width: 32%;
    max-width: 1000px; /* 必要なら最大幅を設定 */
    z-index: 200;
    margin-top: -1%;
}

section#erea2 p{
    font-size: clamp(6px, 1vw, 12px);
    font-family: "dnp-shuei-mgothic-std", sans-serif;
}

section#erea2 span{
    font-size: clamp(9px, 1.8vw, 20px);
    font-family: "dnp-shuei-mgothic-std", sans-serif;
    margin-top: -2%;
}

section#erea2 p.round-img-left {
    background-color: #c0e2f7;
    width: 12em; /* 丸い画像の大きさ */
    height: 12em; /* 丸い画像の大きさ */
    border-radius: 50%; /* 丸くする */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 横方向中央揃え */
    align-items: center; /* 縦方向中央揃え */
    text-align: center; /* テキストの中央揃え */
    flex-direction: column; /* テキストを縦並びに */
    margin-right: -7.2%;
    margin-top: -8%;
}

section#erea2 p.round-img-right {
    background-color: #ffd9ea;
    width: 12em; /* 丸い画像の大きさ */
    height: 12em; /* 丸い画像の大きさ */
    border-radius: 50%; /* 丸くする */
    display: flex; /* フレックスボックスを使用 */
    justify-content: center; /* 横方向中央揃え */
    align-items: center; /* 縦方向中央揃え */
    text-align: center; /* テキストの中央揃え */
    flex-direction: column; /* テキストを縦並びに */
    margin-left: -5.8%;
    z-index: 100;
    margin-top: -8%;
}

.animation{
    opacity: 0; /* 初期状態で透明 */
    animation: fadeUp 1.9s ease-out forwards; /* アニメーション適用 */
    animation-delay: 0.11s;
}

@media screen and (min-width: 1441px) {

    section#erea2 div.container {
        margin-top: 1%;
    }

    section#erea2 div#s1{
        padding: 3.5% 8% 20% 8%;
    }

    section#erea2 div#s1 aside{
        line-height: 2.6vw;
        margin-top: 4%;
    }
}

@media screen and (max-width: 620px) {

    section#erea2 div#s1 aside{
        line-height: 22px;
    }
}

@media screen and (max-width: 480px) {

    section#erea2 div.container {
        margin: 3% 0 0 0;
    }

    section#erea2 div#s1{
        padding: 3.5% 1% 25% 1%;
        width: 80%;
    }

    section#erea2 div#s1 p.outline-text2::before,
    section#erea2 div#s1 p.outline-text2::after {
      width: 60px; /* 棒線の長さ */
      height:  1px; /* 棒線の太さ */
    }

    section#erea2 div#s1 p{
        font-size: clamp(14px, 3.1vw, 18px);
        margin-top: 3%;
    }

    section#erea2 div#s1 h2{
        font-size: clamp(11px, 2.6vw, 18px);
        line-height: 20px;
    }

    section#erea2 div#s1 p::after {
        bottom: 7px; /* テキストの下端に線を配置 */
        height: 7px; /* 線の太さ（調整可能） */
    }

    section#erea2 div#s1 aside{
        font-size: clamp(10px, 1.5vw, 15px);
        line-height: 25px;
        margin-top: 3%;
        width: 100%;
        margin-left: 1%;
    }

    section#erea2 div#s2 img{
        width: 43%;
        margin-top: -7%;
    }

    section#erea2 p.round-img-left {
        width: 80px; /* 丸い画像の大きさ */
        height: 80px; /* 丸い画像の大きさ */
        margin-right: -10.2%;
        margin-top: -15%;
    }

    section#erea2 p.round-img-right {
        width: 80px; /* 丸い画像の大きさ */
        height: 80px; /* 丸い画像の大きさ */
        margin-left: -8.8%;
        margin-top: -15%;
    }

    section#erea2 div#s2 p{
        font-size: clamp(7.5px, 1vw, 12px);
        font-family: "dnp-shuei-mgothic-std", sans-serif;
    }

    section#erea2 div#s2 span{
        font-size: clamp(11px, 1.8vw, 20px);
        font-family: "dnp-shuei-mgothic-std", sans-serif;
        margin-top: -2%;
    }
}

@media screen and (max-width: 424px) {
    section#erea2 div#s1 aside{
            font-size: clamp(9px, 1.5vw, 15px);
        }

    section#erea2 p.round-img-left {
        width: 75px; /* 丸い画像の大きさ */
        height: 75px; /* 丸い画像の大きさ */
        margin-right: -10.2%;
        margin-top: -15%;
    }

    section#erea2 p.round-img-right {
        width: 75px; /* 丸い画像の大きさ */
        height: 75px; /* 丸い画像の大きさ */
        margin-left: -8.8%;
        margin-top: -15%;
    }

    section#erea2 div#s1 aside{
        line-height: 20px;
    }
}

@media screen and (max-width: 382px) {
    section#erea2 div#s1 aside{
            font-size: clamp(8.2px, 1.5vw, 15px);
        }

    section#erea2 p.round-img-left {
        width: 70px; /* 丸い画像の大きさ */
        height: 70px; /* 丸い画像の大きさ */
        margin-right: -10.2%;
        margin-top: -15%;
    }

    section#erea2 p.round-img-right {
        width: 70px; /* 丸い画像の大きさ */
        height: 70px; /* 丸い画像の大きさ */
        margin-left: -8.8%;
        margin-top: -15%;
    }
}

@media screen and (max-width: 348px) {
    section#erea2 div#s1 aside{
            font-size: clamp(7.2px, 1.5vw, 15px);
            line-height: 18px;
        }

    section#erea2 p.round-img-left {
        width: 65px; /* 丸い画像の大きさ */
        height: 65px; /* 丸い画像の大きさ */
        margin-right: -10.2%;
        margin-top: -15%;
    }

    section#erea2 p.round-img-right {
        width: 65px; /* 丸い画像の大きさ */
        height: 65px; /* 丸い画像の大きさ */
        margin-left: -8.8%;
        margin-top: -15%;
    }

    section#erea2 div#s2 p{
        font-size: clamp(7.2px, 1vw, 12px);
        font-family: "dnp-shuei-mgothic-std", sans-serif;
    }

    section#erea2 div#s2 span{
        font-size: clamp(10px, 1.8vw, 20px);
        font-family: "dnp-shuei-mgothic-std", sans-serif;
        margin-top: -2%;
    }

    section#erea2 div#s1 aside{
        line-height: 18px;
    }
}

/*ーーーーーーーーーーーーーーー*/
section#erea4{
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
}

section#erea4 div.container {
    width: 100%;
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin-top: 2%;
}

/* スクロール時に適用されるクラス */
section#erea4.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea4.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}

section#erea4 aside{
    margin-left: 10%;
    display: flex;
    flex-direction: column;
}

section#erea4 aside p{
  position: relative; /* 疑似要素の配置基準 */
  display: inline-block;
  line-height: 1.4;
  font-size: clamp(16px, 2.6vw, 30px);
  font-weight: 600;
  z-index: 1;
  white-space: nowrap;
  text-align: left;
  color: #333333;
}

section#erea4 div#e1{
    display: flex;
    justify-content: center; /* 横方向中央揃え */
    align-items: center; /* 縦方向中央揃え */
    text-align: left; /* テキストの中央揃え */
    margin-left: -6%;
}

section#erea4 div#e1 h2{
    color: #ed3024;
    font-weight: bold;
    font-size: clamp(16px, 2.6vw, 30px);
    z-index: 1;
    margin-right: 0%;
    margin-top: -1%;
    white-space: nowrap;
}
/* 置換: H2 -> p.lead-catch */
section#erea4 div#e1 .lead-catch{
    color: #ed3024;
    font-weight: bold;
    font-size: clamp(16px, 2.6vw, 30px);
    z-index: 1;
    margin-right: 0%;
    margin-top: -1%;
    white-space: nowrap;
}

section#erea4 div#man{
    width: 30%;
    min-width: 170px;
    margin-right: -7%;
    margin-top: 2%;
    margin-left: -3%;
}

section#erea4 div#e1 img{
    width: 60%;
    margin-left: 7%;
}

section#erea4 div#e1 img.leaf2{
    width:  5.5%;
}

section#erea4 div#e1 img#leaf3{
    margin-left: -3%;
}

section#erea4 div#s2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%; /* ボタンの幅を内容に合わせる */
    margin-top: -0.5%;
}

section#erea4 div#s2 a:first-child{
    margin-right: 5%;
}

section#erea4 a.btn_01 {
    text-align: center;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid #ed610d;
    background: #ed610d;
    color: #fff;
    transition: 0.5s;
    border-radius:10px;
    white-space: nowrap;
    width: auto;            /* 固定幅を解除して内容に合わせる */
    font-size: clamp(16px, 3.5vw, 21px);
    margin: 0; /* 余分な余白をなくす */
    padding: 0 20px;
    animation: none;
    display: block;
    position: relative;
    overflow: hidden;
}

section#erea4 .btn_01.start-animation::before {
    animation: btn_01 3s ease-in-out 1s 2; /* 3秒後に2回実行 */
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
}

@keyframes btn_01 {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }
    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }
    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

section#erea4 a#b1{
    display: flex; /* フレックスボックスを使用 */
    width: 40%;
    height: 65px;
    font-size: clamp(15px, 2.6vw, 28px);
}

section#erea4 a#b2{
    width: 60%;
    height: 65px;
    padding: 0px 40px 0px 40px;
    margin-left: 3%;
    font-size: clamp(15px, 2.6vw, 28px);
    text-align: center;
    align-items: center;
    justify-content: center;
}

section#erea4 a#b2 span{
   font-size: clamp(10px, 1.4vw, 20px);
}

section#erea4 a.btn_01:hover {
    opacity: 65%;
}

section#erea4 div#s2 a:first-child{
    margin-right: 0%;
}

section#erea4 p{
    font-size: clamp(10px, 1.3vw, 17px);
    text-align: center;
    margin-bottom: 3%;
}

@media screen and (min-width: 940px) {

    section#erea4 a#b1{
        display: flex; /* フレックスボックスを使用 */
        width: 40%;
        height: 70px;
        font-size: clamp(15px, 2.5vw, 28px);
    }

    section#erea4 a#b2{
        width: 60%;
        height: 70px;
        padding: 0px 40px 0px 40px;
        margin-left: 3%;
        font-size: clamp(15px, 2.5vw, 28px);
        text-align: center;
        align-items: center;
        justify-content: center;
    }
}

@media screen and (min-width: 1140px) {

    section#erea4 a#b1{
        width: 250px;
        height: 75px;
    }

    section#erea4 a#b2{
        width: 400px;
        height: 75px;
    }
}

@media screen and (min-width: 2001px) {
    section#erea4 div#woman img{
        width: 180%;
    }

    section#erea4 a#b1{
        width: 300px;
        height: 98px;
        font-size: 35px;
        padding: 0x 0px 0px 0px;
        max-width: 300px;
    }

    section#erea4 a#b2{
        width: 450px;
        height: 90px;
        padding: 0px 10px 5px 10px;
        font-size: 35px;
        margin-left: 5%;
        max-width: 400px;
    }
}

@media screen and (min-width: 1100px) {
    section#erea4 a#b1{
        display: flex; /* フレックスボックスを使用 */
        width: 40%;
        height: 80px;
        font-size: clamp(15px, 2.3vw, 28px);
    }

    section#erea4 a#b2{
        width: 60%;
        height: 80px;
        padding: 0px 40px 0px 40px;
        margin-left: 3%;
        font-size: clamp(15px, 2.3vw, 28px);
    }
}

@media screen and (min-width: 1441px) {

    section#erea4 div.container{
        padding-bottom: 1.5%;
    }

    section#erea4 div#e1{
        margin-left: -8%;
    }

    section#erea4 div#s1 img#logo2{
        width: 23%;
        margin-top: 7%;
        margin-left: 0%;
    }

    section#erea4 div#s1{
        width: 100%;
    }

    section#erea4 div#e1 h2{
      font-size: clamp(16px, 2.3vw, 30px);
    }

    section#erea4 div#e1 p{
      font-size: clamp(16px, 2.3vw, 30px);
    }

    section#erea4 aside p::before,section#erea4 aside p::after {
      width: 2px;
      font-size: inherit; /* p のフォントサイズと同じにする */
    }

    section#erea4 div#e1 img{
        width: 65%;
    }

    section#erea4 div#s2{
        margin-top: -0.5%;
    }

    section#erea4 div#s2 a:first-child{
        margin-right: 0%;
    }

    section#erea4 a.btn_01 {
        text-align: center;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 600;
        border: 2px solid #ed610d;
        background: #ed610d;
        color: #fff;
        transition: 0.5s;
        border-radius:10px;
        white-space: nowrap;
        width: auto;            /* 固定幅を解除して内容に合わせる */
        height: 70px;
        font-size: clamp(16px, 4vw, 22px);
        margin: 0; /* 余分な余白をなくす */
        padding: 0 20px;
    }

    section#erea4 a#b1{
        width: 300px;
        height: 100px;
        font-size: 35px;
        padding: 0x 0px 0px 0px;
        max-width: 300px;
    }

    section#erea4 a#b2{
        width: 450px;
        height: 100px;
        padding: 0px 10px 5px 10px;
        font-size: 35px;
        margin-left: 5%;
        max-width: 400px;
    }

    section#erea4 a#b2 span{
        font-size: 20px;
    }

    section#erea4 p{
        font-size: clamp(8px, 1.3vw, 18px);
    }

    section#erea4 div#e1 img#leaf3{
        margin-left: -1.5%;
    }

    section#erea4 aside p {
        font-size: clamp(16px, 2.3vw, 30px);
        font-weight: bold;
        white-space: nowrap;
        text-align: left;
    }
}

@media screen and (min-width: 1600px) {
    section#erea4 a#b1{
        width: 250px;
        height: 100px;
        font-size: 35px;
        padding: 0x 0px 0px 0px;
        max-width: 300px;
    }

    section#erea4 a#b2{
        width: 450px;
        height: 100px;
        padding: 0px 10px 0px 10px;
        font-size: 35px;
        margin-left: 5%;
        max-width: 400px;
    }
}
@media screen and (max-width: 774px) {
    section#erea4 a#b1{
        height: 50px;
        font-size: clamp(15px, 2.5vw, 28px);
    }

    section#erea4 a#b2{
        height: 50px;
        font-size: clamp(15px, 2.5vw, 28px);
    }

    section#erea4 p {
        font-size: clamp(11px, 1.3vw, 17px);
    }
}

@media screen and (max-width: 650px) {
    section#erea4 a#b1{
        height: 50px;
        font-size: clamp(15px, 2.7vw, 28px);
    }

    section#erea4 a#b2{
        height: 50px;
        font-size: clamp(15px, 2.7vw, 28px);
    }

    section#erea4 p {
        font-size: clamp(11px, 1.3vw, 17px);
    }
}

@media screen and (max-width: 600px) {

    section#erea4 a.btn_01 {
        border-radius: 5px;
    }

    section#erea4 div#s2{
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto; /* ボタンの幅を内容に合わせる */
        margin-top: -1%;
    }

    section#erea4 div#s2 a:first-child{
        margin-right: 0%;
    }

    section#erea4 a.btn_01 {
        text-align: center;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 600;
        border: 2px solid #ed610d;
        background: #ed610d;
        color: #fff;
        transition: 0.5s;
        border-radius: 4px;
        white-space: nowrap;
        width: auto;            /* 固定幅を解除して内容に合わせる */
        margin: 0; /* 余分な余白をなくす */
        padding: 0 20px;
    }

    section#erea4 a#b1{
        width: 70px;
        height: 37px;
        font-size: clamp(13px, 1.5vw, 18px);
        padding: 0x 0px 0px 0px;
    }

    section#erea4 a#b2{
        width: 140px;
        height: 37px;
        padding: 0px 10px 0px 10px;
        font-size: clamp(13px, 1.5vw, 18px);
        margin-left: 3%;
    }

    section#erea4 a#b2 span{
        font-size: clamp(9px, 1.3vw, 12px);
        padding-left: 0%;
    }

    section#erea4 p{
        font-size: clamp(6px, 1.5vw, 10px);
    }
}


@media screen and (max-width: 480px) {

    section#erea4 div#s1{
        margin-left: 7%;
    }

    section#erea4 aside{
        margin-left: 8%;
    }

    section#erea4 aside p{
        font-size: 3.8vw;
    }

    section#erea4 div#e1 h2{
      font-size: 4.2vw;
    }

    section#erea4 div#e1 img{
        width: 70%;
        margin-left: -1%;
    }

    section#erea4 div#man{
        margin-left: 0%;
        margin-top: 3%;
    }

    section#erea4 div#e1 img.leaf2{
        width:  8.5%;
    }

    section#erea4 div#e1 img#leaf3{
        margin-left: -5%;
    }

    section#erea4 a.btn_01 {
        border-radius: 5px;
    }

    section#erea4 div#s2{
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto; /* ボタンの幅を内容に合わせる */
        margin-top: -1%;
    }

    section#erea4 div#s2 a:first-child{
        margin-right: 0%;
    }

    section#erea4 a.btn_01 {
        text-align: center;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 600;
        border: 2px solid #ed610d;
        background: #ed610d;
        color: #fff;
        transition: 0.5s;
        border-radius: 4px;
        white-space: nowrap;
        width: auto;            /* 固定幅を解除して内容に合わせる */
        margin: 0; /* 余分な余白をなくす */
        padding: 0 20px;
    }

    section#erea4 a#b1{
        width: 120px;
        height: 43px;
        font-size: clamp(9.5px, 3.6vw, 16px);
        padding: 0x 0px 0px 0px;
    }

    section#erea4 a#b2{
        width: 190px;
        height: 43px;
        padding: 0px 10px 0px 10px;
        font-size: clamp(9.5px, 3.6vw, 16px);
        margin-left: 3%;
    }

    section#erea4 a#b2 span{
        font-size: clamp(6.5px, 2.3vw, 20px);
        padding-left: 0%;
    }

    section#erea4 p{
        font-size: clamp(7.3px, 2vw, 10px);
        padding-bottom: 1%;
    }
}

@media screen and (max-width: 410px) {

    section#erea4 div#e1 img#leaf3{
        margin-left: -6%;
    }

    section#erea4 a#b1{
        width: 100px;
        height: 40px;
    }

    section#erea4 a#b2{
        width: 170px;
        height: 40px;
    }
}

@media screen and (max-width: 410px) and (min-width: 375px) {
    section#erea4 div#e1 img{
        margin-left: -1%;
        width: 60%;
    }

    section#erea4 div#e1 img#leaf3{
        margin-left: -11%;
    }
}

@media screen and (max-width: 375px) {

    section#erea4 div#e1 img{
        width: 55%;
    }

    section#erea4 div#e1 img#leaf3{
        margin-left: -14%;
    }

    section#erea4 a#b1{
        width: 90px;
        height: 40px;
        font-size: clamp(9.5px, 3.6vw, 35px);
        padding: 0x 0px 0px 0px;
    }

    section#erea4 a#b2{
        width: 160px;
        height: 40px;
        padding: 0px 10px 0px 10px;
        font-size: clamp(9.5px, 3.6vw, 35px);
        margin-left: 3%;
    }

    section#erea4 a#b2 span{
        font-size: clamp(6.5px, 2.3vw, 20px);
        padding-left: 0%;
    }

}

@media screen and (max-width: 350px) {
    section#erea4 div#e1 img{
        width: 50%;
    }

    section#erea4 div#e1 img#leaf3{
        margin-left: -18%;
    }

     section#erea4 a#b1{
        width: 80px;
        height: 35px;
    }

    section#erea4 a#b2{
        width: 150px;
        height: 35px;
    }
}

/*ーーーーーーーーーーーーーーー*/
section#erea5{
  width: 100%;
  height: 100%;
  background-image: url("image/2525852.jpg");
  background-color:rgba(255,255,255,0.3);
  background-blend-mode:lighten;
  background-size: cover;
  background-position: top;
  padding: 30px 0; /* 余白の調整（必要に応じて変更） */
  text-align: center;
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
  padding-top: 2.5%;
}

section#erea5 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* スクロール時に適用されるクラス */
section#erea5.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea5.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}

section#erea5 .wave-title{
  align-items: center;         /* 中央揃え */
  justify-content: center;     /* 必要なら縦方向の中央揃えも */
  padding: 20px 0;             /* 上下の余白 */
  text-align: center;
}

section#erea5 .wave-title img{
  width: 40%;
  max-width: 500px;            /* 最大幅を指定（任意） */
  height: auto;
}

section#erea5 .wave-title h1,
section#erea5 .wave-title h2 {
  color: #188aeb;        /* テキストの色（背景に合わせて変更） */
  font-size: clamp(20px, 2.7vw, 35px);
  font-weight: 600;   /* 太字 */
  pointer-events: none;   /* 画像クリックへの影響を防止（任意） */
  align-items: center;         /* 中央揃え */
  justify-content: center;
  margin: 3% 0;
}

.wave-title h1 span{
  color: #f15a24;
}

section#erea5 div#s1{
    display: flex;
    justify-content: center; /* 横方向の中央揃え */
    align-items: flex-start; /* 縦方向の上揃え */
    gap: 2%; /* 要素間の余白調整 */
    margin-top: 1.5%;
}

section#erea5 div#s1 .list {
    display: flex;
    flex-direction: column;
    align-items: center; /* h2 を中央揃え */
    width: 33%; /* 均等幅 */
}

section#erea5 .list2 p {
    text-align: left !important;
}

section#erea5 div#s1 img{
    width: 85%;
}

section#erea5 div#s1 h2,
section#erea5 div#s1 h3{
    font-size: clamp(15px, 2.3vw, 27px);
    color: #188aeb;
    font-weight: 600;
    text-align: center;
    min-height: 60px; /* h2 の高さを統一 */
    display: flex;
    align-items: center;
    justify-content: center;
}

section#erea5 div#s1 p{
    font-size: clamp(9.5px, 1.5vw, 20px);
    text-align: center;
    align-self: flex-start; /* 上揃え */
}

section#erea5 div#s1 div#left h2,
section#erea5 div#s1 div#left h3{
    margin-top: 6%;
    height: 35px;
    margin-bottom: -7%;
}

section#erea5 div#s1 div#middle h2,
section#erea5 div#s1 div#middle h3{
    margin-top: 6%;
    height: 35px;
    margin-bottom: -7%;
}

section#erea5 div#s1 div#right h2,
section#erea5 div#s1 div#right h3{
    margin-bottom: -6%;
    height: 60px;
}

section#erea5 div#s1 div#right p{
    margin-bottom: -6%;
}

section#erea5 div#s1 div#left p{
    width: 79%;
    text-align: center;
    margin: 10% auto 0 auto;
}

section#erea5 div#s1 div#middle p{
    width: 75%;
    text-align: center;
    margin: 10% auto 0 auto;
}

section#erea5 div#s1 div#right p{
    width: 74%;
    text-align: center;
    margin: 9% auto 0 auto;
    line-break: anywhere;
}

@media screen and (min-width: 1441px) {

    section#erea5 .wave-title img{
        width: 60%;
    }

    section#erea5 .wave-title h1,
    section#erea5 .wave-title h2{
        padding: 15px 0;
    }

    section#erea5 div#s1 div#left p{
        margin: 13% auto 0 auto;
    }

    section#erea5 div#s1 div#middle p{
        margin: 13% auto 0 auto;
    }

    section#erea5 div#s1 div#right p{
        margin: 12% auto 0 auto;
    }

    section#erea5 div#s1{
        margin-bottom: 3%;
    }
}

@media screen and (max-width: 480px){
    section#erea5{
        background-image: url("image/cloudback.png");
        background-color:rgba(255,255,255,0);
    }

    section#erea5 div.container {
        margin-top: -2%;
        margin-bottom: -3%;
    }

    section#erea5 .wave-title img{
      width: 37%;
    }

    section#erea5 .wave-title h1 {
      font-size: 4.1vw;
      font-weight: bold;
      margin: 2.5% 0 1% 0;
    }

    section#erea5 div#s1 {
        display: flex;
        flex-direction: column; /* 縦並びに変更 */
        align-items: center; /* 中央揃え */
    }

    section#erea5 div#s1 .list {
        display: flex;
        flex-direction: row; /* 横並び */
        align-items: center;
        justify-content: center;
        width: 80%;
        gap: 3px; /* 画像とテキストの間隔 */
        margin-bottom: 3%;
    }

    section#erea5 div#s1 h2,
    section#erea5 div#s1 h3,
    section#erea5 div#s1 p {
        margin: 0 !important;
        padding: 0 !important;
        text-align: left; /* テキストを左揃え */
    }

    section#erea5 div#s1 .list div {
        text-align: left; /* 左揃え */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* 左寄せ */
        padding-left: 5%;
    }

    section#erea5 div#s1 h2,
    section#erea5 div#s1 h3 {
        margin-left: 6%;
        min-height: 4px; /* h2 の高さを統一 */
        font-size: 3.4vw;
        font-weight: bold;
        white-space: nowrap;
    }

    section#erea5 div#s1 p{
        font-size: 2.4vw;
    }

    section#erea5 div#s1 div#left p {
        width: 75%;
    }

    section#erea5 div#s1 div#middle p {
        width: 95%;
        line-break: anywhere;
    }

    section#erea5 div#s1 div#right p {
        width: 80%;
    }

    section#erea5 div#s1 .list img {
        width: 45%; /* 画像の幅を調整 */
        max-width: 150px; /* 画像の最大幅 */
    }

    section#erea5 div#s1 .list div {
        width: 55%; /* テキスト部分の幅を調整 */
    }

    /* 左右の配置を交互に変更 */
    section#erea5 div#s1 #left {
        flex-direction: row-reverse; /* 画像を右に */
    }

    section#erea5 div#s1 #middle {
        flex-direction: row; /* 画像を左に */
    }

    section#erea5 div#s1 #right {
        flex-direction: row-reverse; /* 画像を右に */
    }

    section#erea5 div#s1 #middle-detail{
        margin-left: 12%;
    }
}

@media screen and (max-width: 450px){
    section#erea5 div#s1 #middle-detail{
        margin-left: 8%;
    }

    section#erea5 div#s1 h2,
    section#erea5 div#s1 h3 {
        min-height: 5px;
        font-size: 3.6vw;
    }

    section#erea5 div#s1 p{
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 410px){

    section#erea5 div#s1 h2,
    section#erea5 div#s1 h3 {
        min-height: 5px;
        font-size: 3.8vw;
    }

    section#erea5 div#s1 p{
        font-size: 2.6vw;
    }

    section#erea5 div#s1 div#left p {
        width: 85%;
    }

    section#erea5 div#s1 div#middle p {
        width: 99%;
    }

    section#erea5 div#s1 div#right p {
        width: 85%;
    }

    section#erea5 div#s1 #middle-detail{
        margin-left: 4%;
    }
}

@media screen and (max-width: 390px) {

    section#erea5 .wave-title h1,
    section#erea5 .wave-title h2 {
        font-size: 4.4vw;
    }

    section#erea5 div#s1 h2 {
        margin-left: 6%;
        font-size: 3.7vw;
    }

    section#erea5 div#s1 p{
        font-size: 2.7vw;
    }
}

@media screen and (max-width: 370px) {
    section#erea5 .wave-title h1,
    section#erea5 .wave-title h2 {
            font-size: 4.5vw;
        }
}

@media screen and (max-width: 350px) {
    section#erea5 .wave-title h1,
    section#erea5 .wave-title h2 {
            font-size: 4.6vw;
        }

    section#erea5 div#s1 h2,
    section#erea5 div#s1 h3 {
        font-size: 3.9vw;
    }

    section#erea5 div#s1 p{
        font-size: 2.9vw;
    }

    section#erea5 div#s1 #middle-detail{
        margin-left: 0%;
    }
}

@media screen and (max-width: 320px) {
    section#erea5 .wave-title h1,
    section#erea5 .wave-title h2 {
        font-size: 5vw;
    }

    section#erea5 div#s1 h2,
    section#erea5 div#s1 h3 {
        font-size: 4.1vw;
    }

    section#erea5 div#s1 p{
        font-size: 3.1vw;
    }

    section#erea5 div#s1 div#left p {
        width: 90%;
    }

    section#erea5 div#s1 div#middle p{
        width: 100%;
        line-break: anywhere;
    }
}

/*ーーーーーーーーーーーーーーー*/
section#erea6{
  width: 100%;
  height: 100%;
  background-image: url("image/24485983.png");
  background-size: cover;
  background-repeat: no-repeat; /* 繰り返し防止 */
  background-position: top;
  text-align: center;
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
}


section#erea6 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    padding-top: 3%;
    padding-bottom: 3%;
}

/* スクロール時に適用されるクラス */
section#erea6.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea6.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}


section#erea6 .wave-title{
  align-items: center;         /* 中央揃え */
  justify-content: center;     /* 必要なら縦方向の中央揃えも */
  padding: 20px 0;             /* 上下の余白 */
  text-align: center;
}

section#erea6 .wave-title img{
  width: 40%;
  max-width: 500px;            /* 最大幅を指定（任意） */
  height: auto;
}

section#erea6 .wave-title h1,
section#erea6 .wave-title h2 {
  color: #188aeb;        /* テキストの色（背景に合わせて変更） */
  font-size: clamp(20px, 2.7vw, 35px);
  font-weight: 600;   /* 太字 */
  pointer-events: none;   /* 画像クリックへの影響を防止（任意） */
  align-items: center;         /* 中央揃え */
  justify-content: center;
  margin: 3% 0;
}

section#erea6 .ss1 p{
    display: inline-block;
    font-size: clamp(9.5px, 1.5vw, 20px);
    line-height: 1.7;
    margin-top: 1%;
}

section#erea6 .detail{
    display: flex;
    text-align: left !important;
}

section#erea6 .banner {
    font-size: clamp(11.2px, 2.2vw, 26px);
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #3399FF 50%, #287ed4 50%); /* 上半分 青, 下半分 濃い青 */
    color: white;
    font-weight: bold;
    padding: 0.5em 0.2em;
    border-radius: 30px 0 30px 0;
    position: relative;
    width: 70%;
    margin-left: 6.5%;
}

section#erea6 div#japanese .banner::before {
    content: "01";
    background: white;
    color: #0057D9;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 85%;  /* 青背景の上下いっぱいに */
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
    position: absolute;
    left: 20;
    top: -0.1;
    width: 10%;
}

section#erea6 div#jobchange .banner::before {
    content: "02";
    background: white;
    color: #0057D9;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 85%;  /* 青背景の上下いっぱいに */
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
    position: absolute;
    top: -0.1;
    width: 10%;
}

section#erea6 div#culture .banner::before {
    content: "03";
    background: white;
    color: #0057D9;
    padding: 5px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 85%;  /* 青背景の上下いっぱいに */
    clip-path: polygon(30% 0, 100% 0, 70% 100%, 0% 100%);
    position: absolute;
    top: -0.1;
    width: 10%;
}

section#erea6 div#japanese{
    margin-bottom: 5%;
}

section#erea6 div#jobchange{
    margin-bottom: 5%;
}

section#erea6 div.ss2{
    width: 77%;
}

section#erea6 div.ss2 p{
    font-size: clamp(9.5px, 1.5vw, 20px);
    line-height: 1.9;
    margin: 2% 3% 0 6%;
    width: 60%;
}

section#erea6 img.bannerimg{
    width: 34%;
    height: 34%;
}

section#erea6 div#japanese-detail p{
    padding-left: 4%;
}

section#erea6 div#jobchange-detail {
    flex-direction: row-reverse; /* 要素の順番を逆にする */
    margin-left: -9%;
}

section#erea6 div#jobchange-detail p{
    margin: 2% 5% 0 3%;
    width: 50%;
}

section#erea6 div#jobchange .banner{
    margin-left: 22%;
}

section#erea6 div#culture .banner{
    white-space: nowrap;
}

section#erea6 div#jobchange-detail p{
    padding-right: 2%;
}

section#erea6 div#jobchange-detail img{
    width: 32%;
}

section#erea6 div#culture-detail p{
    padding-left: 4%;
}


@media screen and (min-width: 1201px) {

    section#erea6 .wave-title img{
        width:60% ;
    }

    section#erea6 .wave-title h1{
        padding: 15px 0;
    }

    section#erea6 .banner {
        display: flex;
        align-items: center;
        padding-left: 0px; /* ここで「01」との間にスペースを作る */
        font-size: clamp(9.5px, 1.7vw, 28px);
        width: 70%;
    }

    section#erea6 .banner::before {
        position: absolute;
        left: 10px; /* 「01」の位置を固定 */
    }

}

@media screen and (max-width: 480px) {

    section#erea6 div.container {
        margin-top: -2%;
        padding-bottom: 6%;
    }

    section#erea6 .wave-title h1,
    section#erea6 .wave-title h2 {
      font-size: 4.1vw;
      margin-top: 2.5%;
      font-weight: 600;
      margin: 2.5% 0 1% 0;
    }

    section#erea6 .wave-title img{
      width: 37%;
      margin-top: -7%;
    }

    section#erea6 .ss1 p{
        font-size: clamp(11px, 1.7vw, 16px);
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: -2%;
    }

    section#erea6 div.ss2{
        width: 85%;
        margin-left: -5%;
    }

    section#erea6 .banner{
        width: 100%;
        font-size: clamp(11px, 3.1vw, 20px);
        line-height: 1.2;
        padding: 0.8em 0.9em;
        border-radius: 15px 0 15px 0;
        margin-left: 0%;
    }

    section#erea6 .banner {
        display: flex;
        align-items: center;
    }

    section#erea6 div#japanese .banner::before {
        padding: 2.5px 10px;
    }

    section#erea6 div#jobchange .banner::before {
        padding: 2.5px 10px;
    }

    section#erea6 div#culture .banner::before {
        padding: 2.5px 10px;
    }

    section#erea6 div#japanese{
        margin-bottom: 7%;
    }

    section#erea6 div#jobchange{
        margin-bottom: 7%;
    }

    section#erea6 .banner::before {
        position: absolute;
        left: 3px; /* 「01」の位置を固定 */
    }

    section#erea6 div#jobchange .banner{
        margin-left: 0%;
    }

    section#erea6 .detail{
        display: inline-block;
    }

    section#erea6 div.ss2 p{
        font-size: clamp(11px, 1.6vw, 16px);
        line-height: 2.2;
        margin: 0% auto;
        width: 90%;
        padding-bottom: 2%;
        margin-top: 2%;
        margin-left: 5%;
    }

    section#erea6 div.ss2 div#jobchange img{
        width: 42%;
        margin-left: 37.5%;
    }

    section#erea6 div#japanese img{
        margin-top: 0%;
    }

    section#erea6 div.ss2 div#jobchange p{
        width: 83%;
        margin-left: 16.5%;
    }

    section#erea6 div#jobchange-detail p{
        margin:0% auto;
    }

    section#erea6 img.bannerimg{
        width: 45%;
        height: 45%;
        margin-left: 32%;
    }
}

@media screen and (max-width: 420px) {
    section#erea6 .ss1 p{
        font-size: clamp(10.5px, 1.7vw, 16px);
    }

    section#erea6 div.ss2 p{
        font-size: clamp(10.5px, 1.6vw, 16px);
    }
}

@media screen and (max-width: 394px) {
    section#erea6 .ss1 p{
        font-size: clamp(9.8px, 1.7vw, 16px);
    }

    section#erea6 div.ss2 p{
        font-size: clamp(9.8px, 1.6vw, 16px);
    }
}

@media screen and (max-width: 390px) {
    section#erea6 .wave-title h1,
    section#erea6 .wave-title h2 {
        font-size: 4.4vw;
    }
}

@media screen and (max-width: 370px) {
    section#erea6 .wave-title h1,
    section#erea6 .wave-title h2 {
            font-size: 4.5vw;
        }
}

@media screen and (max-width: 360px) {

    section#erea6 .ss1 p{
        font-size: clamp(8.5px, 1.7vw, 16px);
    }

    section#erea6 div.ss2 p{
        font-size: clamp(9px, 1.6vw, 16px);
    }
}

@media screen and (max-width: 350px) {
    section#erea6 .wave-title h1,
    section#erea6 .wave-title h2 {
            font-size: 4.6vw;
        }
}

@media screen and (max-width: 320px) {
    section#erea6 .wave-title h1,
    section#erea6 .wave-title h2 {
            font-size: 5vw;
        }
}

/*ーーーーーーーーーーーーーーー*/
section#erea7{
  width: 100%;
  height: 100%;
  background-image: url("image/015928.jpg");
  background-color:rgba(255,255,255,0.6);
  background-blend-mode:lighten;
  background-repeat: no-repeat; /* 繰り返し防止 */
  background-size: cover;
  background-position: top;
  padding: 30px 0; /* 余白の調整（必要に応じて変更） */
  text-align: center;
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
  padding-top: 3%;
}

section#erea7 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* スクロール時に適用されるクラス */
section#erea7.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea7.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}

section#erea7 .wave-title{
  align-items: center;         /* 中央揃え */
  justify-content: center;     /* 必要なら縦方向の中央揃えも */
  padding: 20px 0;             /* 上下の余白 */
  text-align: center;
}

section#erea7 .wave-title img{
  width: 40%;
  max-width: 500px;            /* 最大幅を指定（任意） */
  height: auto;
}

section#erea7 .wave-title h1,
section#erea7 .wave-title h2 {
  color: #188aeb;        /* テキストの色（背景に合わせて変更） */
  font-size: clamp(20px, 2.7vw, 35px);
  font-weight: 600;   /* 太字 */
  pointer-events: none;   /* 画像クリックへの影響を防止（任意） */
  white-space: nowrap;
  align-items: center;         /* 中央揃え */
  justify-content: center;
  margin: 3% 0;
}

section#erea7 .wave-title span {
  font-size: clamp(20px, 2.7vw, 37px);
}

section#erea7 ul{
   list-style:none;
   width: 50%;
   margin:0 auto;
   padding-left: 14%;
   margin-top: 1%;
}

section#erea7 ul li{
  display: flex;
  align-items: center; /* アイコンとテキストを中央揃え */
  background:url(image/check.png) no-repeat left center;
  background-size: 5%;
  margin-bottom: 1%;
  font-weight: 600;
  font-size: clamp(11px, 1.85vw, 22px);
  line-height: clamp(1.7, 2, 2.6);
  text-align:left;
  padding-left: 8%;
  white-space: nowrap;
  color: #333333;
}

section#erea7 img#woman{
    width: 55%;
    border-radius: 20px;
    margin-bottom: 1.6%;
    margin-top: 2%;
}

@media screen and (min-width: 1441px) {

    section#erea7{
        padding-top: 3.5%
    }


    section#erea7 .wave-title img{
        width:55% ;
    }

    section#erea7 .wave-title h1{
        padding: 5px 0;
    }

    section#erea7 ul{
        margin-top: 2%;
        padding-left: 5%;
    }

    section#erea7 ul li{
      background:url(image/check.png) no-repeat left center;
      background-size: 5.3%;
      font-size: clamp(18px, 2vw, 25px);
      line-height: clamp(1.7, 2, 2.6);
      color: #333333;
      font-weight: 600;
      margin-left: 6%;
    }

    section#erea7 img#woman{
        margin-bottom: 3%;
        margin-top: 3%;
    }
}

@media screen and (max-width: 480px) {

    section#erea7 div.container {
        margin-top: -3%;
        margin-bottom: -5%;
    }

    section#erea7 .wave-title h1,
    section#erea7 .wave-title h2 {
      font-size: 4.1vw;
      margin-top: 2.5%;
      font-weight: 600;   /* 太字 */
      margin: 2.5% 0 1% 0;
    }

    section#erea7 .wave-title span {
      font-size: 4.3vw;
    }

    section#erea7 .wave-title img{
      width: 37%;
      margin-top: -7%;
    }

    section#erea7 ul{
        width: 71%;
        margin-left: 10%;
        margin-bottom: 2%;
    }

    section#erea7 ul li{
        font-size: clamp(9.7px, 2.8vw, 18px);
    }

    section#erea7 img#woman{
        width: 70%;
        padding-bottom: 3%;
    }
}

@media screen and (max-width: 390px) {

    section#erea7 .wave-title h1,
    section#erea7 .wave-title h2 {
        font-size: 4.4vw;
    }

    section#erea7 .wave-title span {
      font-size: 4.8vw;
    }
}

@media screen and (max-width: 370px) {
    section#erea7 .wave-title h1,
    section#erea7 .wave-title h2 {
            font-size: 4.5vw;
        }

    section#erea7 .wave-title span {
      font-size: 4.9vw;
    }
}

@media screen and (max-width: 350px) {
    section#erea7 .wave-title h1,
    section#erea7 .wave-title h2 {
            font-size: 4.6vw;
        }

    section#erea7 .wave-title span {
      font-size: 5vw;
    }
}

@media screen and (max-width: 320px) {
    section#erea7 .wave-title h1,
    section#erea7 .wave-title h2 {
            font-size: 5vw;
        }

    section#erea7 .wave-title span {
      font-size: 5.4vw;
    }
}

/*ーーーーーーーーーーーーーーー*/
section#erea8{
  width: 100%;
  height: 100%;
  background-image: url("image/389313.jpg");
  background-size: cover;
  background-position: center;
  padding: 30px 0; /* 余白の調整（必要に応じて変更） */
  text-align: center;
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
}

section#erea8 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    padding-bottom: 3%;
}

/* スクロール時に適用されるクラス */
section#erea8.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea8.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}

section#erea8 .wave-title{
  align-items: center;         /* 中央揃え */
  justify-content: center;     /* 必要なら縦方向の中央揃えも */
  padding: 20px 0;             /* 上下の余白 */
  text-align: center;
}

section#erea8 .wave-title img{
  width: 40%;
  max-width: 400px;            /* 最大幅を指定（任意） */
  height: auto;
}

section#erea8 .wave-title h1,
section#erea8 .wave-title h2 {
  color: white;        /* テキストの色（背景に合わせて変更） */
  font-size: clamp(20px, 2.7vw, 35px);
  font-weight: 600;   /* 太字 */
  pointer-events: none;   /* 画像クリックへの影響を防止（任意） */
  white-space: nowrap;
  align-items: center;         /* 中央揃え */
  justify-content: center;
  margin: 2% 0;
}

/*--------*/

section#erea8 img#gb2{
        display: none;
}

section#erea8 div#comment{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    align-items: flex-start; /* 上揃えにする */
}

section#erea8 div#comment h2,
section#erea8 div#comment .person-title{
    margin-top: 11%;
    font-size: clamp(11px, 2.3vw, 28px);
    line-height: 1.4;
    color: #188aeb;
    text-align: center!important;
}

section#erea8 div#comment h2 span,
section#erea8 div#comment .person-title span{
    font-size: clamp(8px, 1.7vw, 20px);
    font-weight: 600;
    display: block;
}

section#erea8 div#comment p{
    font-size: clamp(7px, 1.4vw, 16.5px);
    line-height: 1.8;
    width: 52%;
    margin: 0 auto;
    margin-top: 0%;
}

section#erea8 div#girl{
    margin-right: -15%;
}

section#erea8 div#comment img{
    width: 65%;
    margin-left: -15%;
}

section#erea8 div#girldetail{
    position: absolute;
    top: 44%;
    left: 32.5%;
    transform: translateX(-50%);
    border-radius: 15px;
    padding: 10px;
    width: 45%;
    text-align: center;
}

section#erea8 div#boydetail{
    position: absolute;
    top: 44%;
    left: 68.5%;
    transform: translateX(-50%);
    border-radius: 15px;
    padding: 10px;
    width: 45%;
    text-align: center;
}

section#erea8 div#girldetail p{
    text-align: left !important;
}

section#erea8 div#boydetail p{
    text-align: left !important;
}

section#erea8 img.pc{
    margin-left: 17%;
}

@media screen and (min-width: 1200px) {

    section#erea8 .wave-title img{
      width: 55%;
      max-width: 500px;
    }

    section#erea8 .wave-title h1 {
      font-size: clamp(20px, 2.7vw, 35px);
      margin: 3% 0;
    }

    section#erea8 div#girldetail{
    position: absolute;
    top: 45%;
    left: 32.5%;
    transform: translateX(-50%);
    border-radius: 15px;
    padding: 10px;
    width: 42%;
    text-align: center;
}

section#erea8 div#boydetail{
        position: absolute;
        top: 45%;
        left: 68%;
        transform: translateX(-50%);
        border-radius: 15px;
        padding: 10px;
        width: 42%;
        text-align: center;
    }

    section#erea8 div#comment p{
        width: 60%;
    }
}

@media screen and (min-width: 1000px) {
     section#erea8 div#girldetail{
        top: 43%;
    }

section#erea8 div#boydetail{
        top: 43%;
    }
}

@media screen and (max-width: 850px) {

    section#erea8 div#comment p{
        font-size: clamp(7px, 1.4vw, 16.5px);
       line-height: 1.6;
    }

    section#erea8 div#girldetail{
        top: 46%;
    }

section#erea8 div#boydetail{
        top: 46%;
    }
}

@media screen and (max-width: 700px) {
    section#erea8 div#girldetail{
        top: 48%;
    }

section#erea8 div#boydetail{
        top: 48%;
    }
}

@media screen and (max-width: 600px) {
     section#erea8 div#girldetail{
        top: 51%;
    }

    section#erea8 div#boydetail{
        top: 51%;
    }

    section#erea8 div#comment h2{
        margin-top: 8%;
    }

    section#erea8 div#comment p{
        width: 55%;
    }

    section#erea8 div#comment p{
        font-size: clamp(7.8px, 1.45vw, 16.5px);
        line-height: 1.6;
        width: 52%;
        margin: 0 auto;
        margin-top: 0%;
    }
}

@media screen and (max-width: 500px) {

    section#erea8 div.container {
        width: 90%;
        margin-top: -5%;
        width: 90%;
        overflow: hidden;
    }

    section#erea8 .wave-title h1,
    section#erea8 .wave-title h2 {
      font-size: clamp(15px, 3.3vw, 30px);
      font-weight: 600;
      margin: 2.5% 0 1% 0;
    }

    section#erea8 .wave-title img{
      width: 33%;
      margin-top: -7%;
    }

    section#erea8 img.pc{
        display: none;
    }

    section#erea8 div#girl{
        margin-right: -4%;
    }

    section#erea8 div#girldetail,
    section#erea8 div#boydetail {
        top: 32%;
    }

    section#erea8 div#girldetail p,
    section#erea8 div#boydetail p{
        margin-top: -2%;
    }

    section#erea8 div#girldetail{
    position: absolute;
    top: 51%;
    left: 27%;
    transform: translateX(-50%);
    border-radius: 15px;
    padding: 10px;
    width: 50%;
    text-align: center;
}

section#erea8 div#boydetail{
    position: absolute;
    top: 51%;
    left: 75.5%;
    transform: translateX(-50%);
    border-radius: 15px;
    padding: 10px;
    width: 50%;
    text-align: center;
}

section#erea8 div#comment img{
        width: 100%;
    }

    section#erea8 div#comment h2,
    section#erea8 div#comment .person-title{
        font-size: clamp(10px, 2.6vw, 28px);
    }

    section#erea8 div#comment h2 span,
    section#erea8 div#comment .person-title span{
        font-size: clamp(9px, 2.2vw, 20px);
    }

    section#erea8 div#comment p{
        font-size: clamp(8.2px, 1.955vw, 16px);
        width: 65%;
    }

    section#erea8 div#comment{
        margin-left: 12%;
    }
  }

@media screen and (max-width: 480px) {

    section#erea8 .wave-title h1,
    section#erea8 .wave-title h2 {
        font-size: 4.1vw;
    }

    section#erea8 div#comment img {
        width: 105%;
    }

    section#erea8 img#gb{
        display: none;
    }

    section#erea8 img#gb2{
        display: block;
    }

    section#erea8 div#comment h2{
        font-size: clamp(12px, 3.4vw, 28px);

    }

    section#erea8 div#comment span{
        font-size: clamp(9px, 2.4vw, 20px);
    }

    section#erea8 div#comment p{
        font-size: clamp(7.5px, 2vw, 16px);
        width: 67%;
        line-break: anywhere;
        line-height: 3.7vw;
    }

    section#erea8 div#girldetail{
        left: 26.5%;
    }
}

@media screen and (max-width: 468px) {
    section#erea8 div#girldetail{
        left: 28%;
    }
}

  @media screen and (max-width: 413px) {
    section#erea8{
      padding: 15px 0 30px 0;
    }

    section#erea8 div#girl{
        margin-right: -3%;
    }

    section#erea8 div#girldetail{
        left: 27.5%;
    }

    section#erea8 div#boydetail{
        left: 74.8%;
    }

    section#erea8 div#girldetail,
    section#erea8 div#boydetail {
        top: 51%;
    }

    section#erea8 div#girldetail p,
    section#erea8 div#boydetail p{
        margin-top: -5%;
    }

    section#erea8 div#comment{
        margin-top: -3%;
    }

    section#erea8 div#comment h2{
        margin-top: 7%;
        line-height: 1.4;
        color: #188aeb;
    }

    section#erea8 div#comment span{
        font-weight: 500;
    }

    section#erea8 div#comment p{
        margin-top: -3%;
        width: 67%;
    }
  }

  @media screen and (max-width: 390px) {

    section#erea8 .wave-title h1,
    section#erea8 .wave-title h2 {
        font-size: 4.4vw;
    }
}

@media screen and (max-width: 370px) {
    section#erea8 .wave-title h1,
    section#erea8 .wave-title h2 {
            font-size: 4.5vw;
        }
}

@media screen and (max-width: 350px) {
    section#erea8 .wave-title h1,
    section#erea8 .wave-title h2 {
            font-size: 4.6vw;
        }

    section#erea8 div#comment h2{
        font-size: clamp(11px, 3.4vw, 28px);
        margin-top: 8%;
    }

    section#erea8 div#comment p{
        font-size: clamp(7px, 2vw, 16px);
    }
}

@media screen and (max-width: 320px) {
    section#erea8 .wave-title h1,
    section#erea8 .wave-title h2 {
        font-size: 5vw;
    }

    section#erea8 div#comment img {
        width: 115%;
    }

    section#erea8 div#comment h2{
        font-size: clamp(11px, 3.4vw, 28px);
        margin-top: 10%;
    }

    section#erea8 div#comment p{
        font-size: clamp(6.6px, 2vw, 16px);
        width: 69%;
    }
}

/*ーーーーーーーーーーーーーーー*/
section#erea10{
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative; /* 子要素の位置調整に必要 */
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
}

section#erea10 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin-bottom: 15%;
    padding-left: 5%;
    max-height: 100%; /* 親要素の高さを超えないようにする */
    overflow: hidden; /* はみ出た部分を隠す */
}

/* スクロール時に適用されるクラス */
section#erea10.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea10.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
    width: 80%;
}

#cloudbar img#cloudbar2{
    display: none;
}

#cloudbar {
  position: relative;
  width: 100%;
  text-align: center;
}

#cloudbar img {
  width: 100%; /* 画面幅にフィット */
  height: auto; /* 高さは自動 */
  display: block; /* 余白を防ぐ */
}

#cloudbar h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 中央揃え */
  font-size: clamp(15px, 2.7vw, 38px); /* 画面に応じたフォントサイズ */
  color: #fff; /* 必要に応じて色調整 */
  margin: 0;
  padding: 0 1em;
  white-space: nowrap;
  margin-left: 1%;
}

section#erea10 .container h2,
section#erea10 .container .flow-intro{
    margin: 6% 0 4% 0%;
    font-size: clamp(11px, 1.5vw, 21px);
    color: #333333;
    font-weight: 500;
    text-align: center;
    line-height: 1.9;
}

section#erea10 div#s1{
    display: flex;
    position: relative;
    margin-left: -5%;
}

section#erea10 div#stepall{
    margin-left: 11%;
}

section#erea10 div.stepdetail{
    display: flex;
    align-items: flex-start; /* 上揃え */
    text-align: center;
    align-items: center;
    justify-content: center;
}

section#erea10 div.stepdetail h3,
section#erea10 div.stepdetail .step-title{
    width: 18%;
    text-align: left;
    font-size: clamp(11.5px, 1.5vw, 21px);
    color: #0b53b9;
    margin-left: -0.5%;
}

section#erea10 div.stepdetail p{
    width: 95%;
    text-align: left;
    margin-left: 3%;
    font-size: clamp(10px, 1.35vw, 20px);
    height: 5%;
}

section#erea10 div.stepdetail span{
    color: #ff1600;
    font-weight: 600;
}

section#erea10 div.stepdetail a{
    text-decoration: none;
}

section#erea10 img.border1{
    width: 83%;
    margin-left: -9%;
}

section#erea10 img.border2{
    width: 77.7%;
    margin-left: -5%;
}

section#erea10 img#border3{
    margin-bottom: 1%;
}

section#erea10 img.step{
    width: 5.5%;
    height: 5.5%;
    margin-right: 4%;
    max-width: 70px;
    margin-left: 2%;
    min-width: 20px;
}

section#erea10 img#people1{
    width: 100%;
    height: 100%;
    margin-top: -11%;
    margin-bottom: -0.5%;
}

@media screen and (max-width: 660px) {

    section#erea10 img.border1{
        width: 90%;
        margin-left: -4%;
    }

    section#erea10 img.border2{
        width: 85%;
        margin-left: 0.5%;
    }

    section#erea10 div.stepdetail{
        margin-left: -10%;
    }

    section#erea10 div.stepdetail p{
            width: 59%;
            margin-left: 0%;
        }

    section#erea10 div.stepdetail p br{
        display: none;
    }
}

@media screen and (max-width: 480px) {

    #cloudbar img#cloudbar{
        display: none;
    }

    #cloudbar img#cloudbar2{
        display: block;
    }

    section#erea10 div#cloudbar h2{
        font-size: clamp(10px, 4.2vw, 20px);
        margin-left: 1%;
    }

    section#erea10.show div.container {
        width: 95%;
    }

    section#erea10 .container{
        width: 95%;
        text-align: center;
        align-items: center;
        justify-content: center;
        max-width: none;
    }

    section#erea10 div#s1{
        margin-top: -2%;
    }

    section#erea10 .container h2,
    section#erea10 .container .flow-intro{
        font-size: clamp(8.5px, 2.4vw, 22px);
    }

    section#erea10 div#stepall{
        margin-left: 16%;
    }

    section#erea10 div.stepdetail h3,
    section#erea10 div.stepdetail .step-title{
        width: 18%;
        text-align: left;
        font-size: clamp(9.5px, 2.4vw, 16px);
        color: #0b53b9;
        margin-left: -1%;
    }

    section#erea10 div.stepdetail p{
        width: 59%;
        font-size: clamp(7.9px, 1.95vw, 12px);
        margin-left: 1%;
    }

    section#erea10 div.stepdetail p br{
        display: block;
    }

    section#erea10 img.border1{
        width: 93%;
        margin-left: -5.5%;
    }

    section#erea10 img.border2{
        width: 88%;
        margin-left: -0.8%;
    }

    section#erea10 img.step{
        width: 5.5%;
        margin-left: 0%;
    }

    div#step1,div#step2,div#step3,div#step4,div#step5,div#step6,div#step7,div#step8{
        margin-left: -8%;
    }

    section#erea10 img#people1{
        margin-bottom: -1.1%;
    }
}

/*ーーーーーーーーーーーーーーー*/
section#erea11{
  width: 100%;
  height: 100%;
  background-image: url("image/1108708.jpg");
  background-color:rgba(255,255,255,0.4);
  background-blend-mode:lighten;
  background-size: cover;
  background-position: top;
  padding: 20px 0; /* 余白の調整（必要に応じて変更） */
  text-align: center;
  position: relative; /* 子要素の位置調整に必要 */
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
}

section#erea11 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    width: 65%;
    margin: 0% auto;
    margin-top: 1%;
}

/* スクロール時に適用されるクラス */
section#erea11.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea11.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
    margin-bottom: 1%;
}

/*上部*/
section#erea11 div#s0{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/*leaf*/
section#erea11 div#s0 img.leaf{
    width: 10%;
    height: 10%;
    max-width: 130px;
}

/*スカイインターナショナルにお任せください*/
section#erea11 div#s0 h2{
    font-size: clamp(10px, 2vw, 43px);
}

/*日本で働く外国籍人材のお悩みを解決します！*/
section#erea11 div#s0 p{
    font-size: clamp(13px, 2.3vw, 46px);
    color: #ed3024;
    font-weight: 600;
    margin-top: -3%;
}

/*　ーーーーーーー　枠の全体　　ーーーーーーー　*/
section#erea11 div#container2{
    width: 95%;
    max-width: 100vw; /* 画面幅を超えないようにする */
    overflow-x: hidden; /* はみ出しを防ぐ */
    overflow-y: hidden; /* はみ出しを防ぐ */
    box-sizing: border-box; /* padding を含めた計算にする */
    z-index: 1000;
    position: relative;
}

/*履歴書カンタン作成フォーム*/
section#erea11 div#e0{
    z-index: 2000;
    width: 100%;
}

section#erea11 div#s1 h2{
    color: white;
    font-size: clamp(13px, 2.55vw, 44px);
    font-weight: 600;
    z-index: 1000;
    margin-top: 2%;
}

section#erea11 div#e0 img{
    width: 100%;
}

/*　ーーーーーーー　枠の中身　　ーーーーーーー　*/

section#erea11 div#s1{
    position: absolute;
    top:-1.5%;
}

section#erea11 div#e1{
    display: flex;
    margin-top: 5%;
}

section#erea11 div#e1 img#sample{
    width: 30%;
    height: 30%;
    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.1),/* 左下 */
                 5px 5px 10px rgba(0, 0, 0, 0.1);  /* 右下 */
    margin-left: 7%;
}

section#erea11 div#e1 .balloon2 img{
    width: 100%;
}

/*ーーー右側ーーーー*/
section#erea11 div#e2 {
    width: 52%;
    margin-left: 3%;
}

section#erea11 div#e2 h1{
    color: #ed3024;
    white-space: nowrap;
    font-size: clamp(13px, 2.2vw, 40px);
    font-weight: 600;
    margin-top: -47%;
    margin-left: 8%;
}
/* 置換: H1 -> p.balloon-title */
section#erea11 div#e2 .balloon-title{
    color: #ed3024;
    white-space: nowrap;
    font-size: clamp(13px, 2.2vw, 40px);
    font-weight: 600;
    margin-top: -47%;
    margin-left: 8%;
    text-align: center;
}

section#erea11 div#e2 h1 span,
section#erea11 div#e2 .balloon-title span{
    color: #333333;
    font-size: clamp(9.5px, 1.5vw, 30px);
    font-weight: 500;
    display: block;
    margin-top: 2%;
}

section#erea11 div#e2 p{
    font-size: clamp(7.6px, 1.2vw, 28px);
    text-align:left;
    margin-left: 17%;
    margin-top: 9%;
}

/*？ーーーーボタンーーーーー*/

section#erea11 div#s2{
    display: flex;
    margin-top: -21%;
    width: 90%;
    margin-left: 4%;
}

section#erea11 a{
    text-decoration: none;
}

section#erea11 div#otoiawase,
section#erea11 div#rirekisho {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* 縦方向に配置 */
}

section#erea11 div#otoiawase a,
section#erea11 div#rirekisho a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
}

section#erea11 img#btn1,
section#erea11 img#btn2 {
    display: block;
    width: 100%;
    height: auto; /* 画像の縦横比を保持 */
}

section#erea11 div#otoiawase{
    width: 40%;
}

section#erea11 img#btn1,img#btn2{
   width: 95%;
}

section#erea11 div#otoiawase a{
    margin-top: -20%;
    font-size: clamp(8.5px, 2vw, 35px);
    color: #fff;
    top: 40%;
}

section#erea11 div#rirekisho{
    width: 60%;
}

/*無料</p>履歴書カンタン作成*/
section#erea11 a#b2 span{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: clamp(8.5px, 2vw, 35px);
    color: white;
    margin-bottom: 4%;
}

/*無料*/
section#erea11 a#b2 p#s2{
    font-size: clamp(7.5px, 1.6vw, 25px);
    transform: rotate(-13deg);
    background-color: white;
    color: #ed3024;
    padding: 0% 1%;
    border-radius: 5px;
    margin-right: 2%;
}

/*＼すぐに働き始めたい方／*/
section#erea11 a#b2 p#s1{
    font-size: clamp(6.5px, 1.4vw, 20px);
    color: white;
    margin-bottom: -6%;
}

section#erea11 a.btn_01:hover {
    opacity: 65%;
}

section#erea11 .btn_01 {
    position: relative; /* これが必要！ */
    overflow: hidden;   /* はみ出し防止 */
}
/* スクロールでボタンが表示されたらアニメーションを開始 */
section#erea11 .btn_01.start-animation::before {
    animation: btn_01 3s ease-in-out 1s 2; /* 3秒後に2回実行 */
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
}

/* 光るエフェクト */
@keyframes btn_01 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

section#erea11 p#s3{
    font-size: clamp(5px, 1.5vw, 20px);
    margin-top: -1%;
    margin-bottom: 5%;
}

@media screen and (min-width: 1700px) {

    section#erea11 div#container2{
        max-width: 35vw; /* 画面幅を超えないようにする */
    }

    section#erea11 div#s1 h2{
        margin-top: 3.6%;
        font-size: clamp(13px, 2.5vw, 48px);
    }

    section#erea11 div#e1{
        margin-top: 1%;
    }

    section#erea11 div#e2 h1{
        margin-top: -46%;
    }

    section#erea11 div#e2 p{
        margin-top: 11%;
    }
}

@media screen and (min-width: 1600px) {

    section#erea11 div#container2{
        max-width: 50vw; /* 画面幅を超えないようにする */
        margin-top: 3%;
    }

    section#erea11 div#s1 h2{
        font-size: clamp(13px, 2.3vw, 44px);
    }

    section#erea11 div#e2 h1{
        color: #ed3024;
        white-space: nowrap;
        font-size: clamp(13px, 1.8vw, 40px);
        font-weight: 600;
        margin-top: -47%;
        margin-left: 8%;
    }

    section#erea11 div#e2 h1 span{
        color: #333333;
        font-size: clamp(9.5px, 1.2vw, 30px);
        font-weight: 500;
        display: block;
        margin-top: 2%;
    }

    section#erea11 div#e2 p{
        font-size: clamp(9px, 1.1vw, 28px);
        margin-top: 8.5%;
    }

    section#erea11 div#e2 p br{
        display: none;
    }

    section#erea11 p#s3{
        font-size: clamp(9px, 1.1vw, 28px);
    }
}

@media screen and (min-width: 1300px) {

    section#erea11 div#container2{
        width: 90%;
        margin-top: 3%;
    }

    section#erea11 div#s1 h2{
        margin-top: 3.6%;
        font-size: clamp(13px, 2.5vw, 48px);
    }

    section#erea11 div#s1{
        margin-top: -2%;
    }

    section#erea11 div#e2 p{
        margin-top: 6.5%;
        font-size: clamp(9px, 1vw, 28px);
    }

    section#erea11 p#s3{
        font-size: clamp(10px, 1vw, 30px) !important;
        margin-top: -1%;
        margin-bottom: 5%;
    }

}

@media screen and (max-width: 1200px) {
    section#erea11 div#container2{
        margin-top: 3%;
    }
}

@media screen and (max-width: 695px) {

    section#erea11 div#container2{
        width: 100%;
        margin-top: 3%;
    }

    section#erea11 div#s1 h2{
        font-size: clamp(13px, 2.8vw, 40px);
        margin-top: 2%;
    }

    section#erea11 div#e2{
        width: 53%;
    }

    section#erea11 div#e1{
        margin-top: 4%;
    }

    section#erea11 div#e1 img#sample{
        width: 30%;
        height: 30%;
        max-width: 127px;
    }

    section#erea11 div#s0 h2{
        font-size: clamp(12.5px, 2.3vw, 22px);
    }

    section#erea11 div#s0 p{
        font-size: clamp(15px, 2.8vw, 28px);
    }

    section#erea11 div#s1 h1,
    section#erea11 div#s1 .balloon-title{
        font-size: clamp(10.2px, 2.3vw, 24px);
    }

    section#erea11 div#s1 h1 span,
    section#erea11 div#s1 .balloon-title span{
        font-size: clamp(8px, 1.4vw, 22px);
    }

    section#erea11 div#s1 p:not(.balloon-title){
        font-size: clamp(6.8px, 1.2vw, 12px);
        margin-top: 9%;
    }

    section#erea11 div#s1 p:not(.balloon-title) br{
        display: none;
    }

    section#erea11 div#s2{
        margin-top: -23%;
    }
}

@media screen and (max-width: 480px) {
    section#erea11 div.container {
        width: 88%;
    }

    section#erea11 div#s0 h2{
        font-size: clamp(11px, 3.5vw, 22px);
    }

    section#erea11 div#s0 p{
        font-size: clamp(14px, 4.3vw, 28px);
    }

    section#erea11 div#container2 {
        margin-top: 1.8%;
    }

    section#erea11 div#s1 h2{
        font-size: clamp(12px, 3.7vw, 40px);
        margin-top: 2%;
    }

    section#erea11 div#s1 h1,
    section#erea11 div#s1 .balloon-title {
        font-size: clamp(10.5px, 3.3vw, 24px);
        margin-top: -48%;
        text-align: left;
        white-space: normal !important;
    }

    section#erea11 div#s1 h1 span,
    section#erea11 div#s1 .balloon-title span {
        font-size: clamp(7px, 2.2vw, 22px);
    }

    section#erea11 div#s1 p:not(.balloon-title) {
        font-size: clamp(6.7px, 1.9vw, 12px);
        margin-left: 10%;
        margin-top: 15%;
        width: 86%;
    }

    section#erea11 div#otoiawase a {
        font-size: clamp(8.5px, 3.4vw, 35px);
    }

    section#erea11 a#b2 p#s1 {
        font-size: clamp(6.5px, 2.3vw, 20px);
    }

    section#erea11 a#b2 p#s2 {
        font-size: clamp(7.5px, 2.7vw, 25px);
    }

    section#erea11 a#b2 span {
        font-size: clamp(8.5px, 3.4vw, 35px);
    }

    section#erea11 p#s3 {
        font-size: clamp(6px, 1.9vw, 20px);
    }
}

@media screen and (max-width: 429px) {

    section#erea11 div#container2{
        width: 100%;
    }

    section#erea11 div#s2{
        margin-top: -25%;
    }

    section#erea11 div#s2{
        margin-top: -23%;
    }
}

@media screen and (max-width: 350px) {
    section#erea11 div#s1 p:not(.balloon-title){
        margin-top: 5%;
    }

    section#erea11 div#e2 h1{
        margin-top: -48%;
    }

    section#erea11 div#e2 p{
        margin-top: 9.2%;
    }
}

@media screen and (max-width: 340px) {
    section#erea11 div#e2 h1{
        margin-top: -49%;
    }

    section#erea11 div#e2 p{
        margin-top: 10%;
    }
}

@media screen and (max-width: 320px) {

    section#erea11 div#e2 h1{
        margin-top: -50%;
    }
}


/*ーーーーーーーーーーーーーーー*/
section#erea12{
  width: 100%;
  height: 100%;
  background-image: url("image/23091852.jpg");
  background-color:rgba(255,255,255,0.3);
  background-blend-mode:lighten;
  background-repeat: no-repeat; /* 繰り返し防止 */
  background-size: cover;
  background-position: top;
  padding: 1px 0; /* 余白の調整（必要に応じて変更） */
  text-align: center;
  position: relative; /* 子要素の位置調整に必要 */
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
}

section#erea12 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin: 5% auto;
    width: 90%;
    max-width: 800px;
}

/* スクロール時に適用されるクラス */
section#erea12.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea12.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}

section#erea12 div#round{
  position: relative;
  background-image: url("image/round.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 65%;
  margin: 0 auto;
  padding: 3% 5%;
}

section#erea12 div#round1,section#erea12 div#round2,section#erea12 div#round3{
    width: 35%;
    position: relative;/* 画像上に配置するため */
    z-index: 2;
}

section#erea12 div#roundflex{
    display: flex;
    justify-content: space-around;/* 横並びの間隔調整 */
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 25%;
    margin-left: -5%;
}

section#erea12 div#round h1,
section#erea12 div#round h2{
    background-color: #188aeb;
    color: white;
    border-radius: 20px;
    font-size: clamp(14px, 2.3vw, 25px);
    padding: 5px 20px;
    text-align: center;
    white-space: nowrap;
    display: inline-block;     /* 背景色をテキスト全体に適用 */
    width: 125%;               /* 端から端まで広げる */
}

section#erea12 div#round p{
    font-size: clamp(9px, 1.6vw, 16px);
    white-space: nowrap;
    margin-top: -3%;
    flex-wrap: wrap;
}

section#erea12 div#round1{
    margin-left: 28%;
}

section#erea12 div#round1 h1,
section#erea12 div#round1 h2{
    margin-left: -10%;
}

section#erea12 div#round1 p{
    margin-left: -7%;
    line-height: 2.3em;
}

section#erea12 div#round1 p#p2{
    margin-top: -25%!important;
}

section#erea12 div#round2 h1,
section#erea12 div#round2 h2{
    margin-left: -15%;
}

section#erea12 div#round2 p{
    margin-left: 25%;
    text-align: left;
}

section#erea12 div#round3 p{
    margin-left: 5%;
    text-align: left;
}

section#erea12 img{
    width: 38%;
    margin-top: 3%;
    z-index: 1;
}

@media screen and (min-width: 1441px) {

    section#erea12 div#round{
      width: 130%;
      margin-left: -20%;
    }

    section#erea12 div#round h1,
    section#erea12 div#round h2{
        font-size: 1.7vw;
        border-radius: 30px;
        margin-left: 1%;
    }

    section#erea12 div#round p{
        font-size: 1vw;
        padding-left: 2%;
        text-align: left;
    }

    section#erea12 div#round1{
        width: 30%;
        margin-left: 40%;
        position: relative;
    }

    section#erea12 div#round1 h1,
    section#erea12 div#round1 h2{
        margin-left: -35%;
        font-size: clamp(20px, 7vw, 32px);
        padding: 0%;
    }

    section#erea12 div#round1 p#p1{
        font-size: clamp(17px, 6vw, 20px);
        margin-top: -5%;
        position: absolute;
        left: -10%;
        top: 100%;
    }

    section#erea12 div#round1 p#p2{
        font-size: clamp(17px, 6vw, 20px);
        margin-top: -5%;
        position: absolute;
        left: -10%;
        top: 205%;
    }

    section#erea12 div#round2{
        width: 27%;
        margin-left: 0%;
    }

    section#erea12 div#round2 h1,
    section#erea12 div#round2 h2{
        margin-left: -45%;
        font-size: clamp(24px, 9vw, 32px);
        padding: 0%;
    }

    section#erea12 div#round2 p{
        margin-left: -6%;
        font-size: clamp(17px, 6vw, 20px);
        margin-top: -5%;
        line-height: 35px;
    }

    section#erea12 div#round3{
        width: 27%;
        margin-left: -70%;

    }
    section#erea12 div#round3 h1,
    section#erea12 div#round3 h2{
        margin-left: 43%;
        font-size: clamp(24px, 9vw, 32px);
        padding: 0%;
    }

    section#erea12 div#round3 p{
        margin-left: 45%;
        font-size: clamp(17px, 6vw, 20px);
        margin-top: -5%;
        line-height: 35px;
    }

    section#erea12 img{
        width: 52%;
    }
}

@media screen and (min-width: 1141px){
    section#erea12 div#round1 p{
        margin-left: -16%;
    }

}

@media screen and (max-width: 650px) {
    section#erea12 div#round h1{
        padding: 5px 10px;
    }
}

@media screen and (max-width: 480px) {
    section#erea12 {
        margin-top: -1%;
        padding-top: 1%;
    }

    section#erea12 div.container {
        width: 100%;
        max-width: 1600px;
    }

    section#erea12 h2{
        font-size:  clamp(15px, 3vw, 22px);
    }

    section#erea12 div#round{
      position: relative;
      background-image: url("image/round.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      width: 80%;
      margin-left: 5%;
      max-width: 1600px;
    }

    section#erea12 div#round1 {
        margin-left: 30%;
    }

    section#erea12 div#round1 h1,
    section#erea12 div#round1 h2{
        font-size: clamp(9px, 3.3vw, 22px);
        padding: 1.5px 5px;
        display: flex;
        align-items: center;        /* 縦方向中央寄せ */
        justify-content: center;    /* 横方向中央寄せ */
        line-height: normal;        /* Safari特有の line-height 問題を回避 */
    }

    section#erea12 div#round1 p{
        margin-left: -5%;
        font-size: clamp(6px, 1.9vw, 22px);
    }

    section#erea12 div#round2{
        margin-top: -5%;
    }

    section#erea12 div#round2 h1,
    section#erea12 div#round2 h2{
        font-size: clamp(9px, 3.3vw, 22px);
        padding: 1.5px 5px;
        margin-left: -6%;
    }

    section#erea12 div#round2 p{
        margin-left: 40%;
        font-size: clamp(6px, 1.9vw, 22px);
    }

    section#erea12 div#round3{
        margin-top: -5%;
        margin-left: -5%;
    }

    section#erea12 div#round3 h1,
    section#erea12 div#round3 h2{
        font-size: clamp(9px, 3.3vw, 22px);
        padding: 1.5px 5px;
    }

    section#erea12 div#round3 p{
        font-size: clamp(6px, 1.9vw, 22px);
    }
}

@media screen and (max-width: 400px) {
    section#erea12 div#round1 p{
            line-height: 1.8em;
        }
}

@media screen and (max-width: 360px) {
    section#erea12 div#round1 p{
            line-height: 1.4em;
        }
}

/*ーーーーーーーーーーーーーーー*/
section#erea13{
  width: 100%;
  height: 100%;
  background-color:rgba(255,255,255,0.1);
  background-blend-mode:lighten;
  background-repeat: no-repeat; /* 繰り返し防止 */
  background-size: cover;
  background-position: top;
  padding: 10px 0; /* 余白の調整（必要に応じて変更） */
  text-align: center;
  position: relative; /* 子要素の位置調整に必要 */
  z-index: 2;
  justify-content: center;          /* 水平方向の中央揃え */
  align-items: center;              /* 垂直方向の中央揃え */
  padding-bottom: 20px;   /* ✅ 余白を追加して、cloud2と余裕を持たせる */
  box-sizing: border-box;
  opacity: 0; /* 初期状態は透明 */
  transition: opacity 2.5s ease-out; /* 徐々に透明度を上げる */
  padding-top: 3%;
}

section#erea13 div.container {
    opacity: 0; /* 初期状態は透明 */
    transform: translateY(40px); /* 下から浮き上がる */
    transition: opacity 1s ease-out, transform 1s ease-out;
    max-width: 800px;                  /* 最大幅を設定 */
    width: 80%;                        /* 画面サイズに応じて可変 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
    margin-bottom: 4%;
}

/* スクロール時に適用されるクラス */
section#erea13.show {
    opacity: 1; /* 背景画像の透明度を100%に */
}

section#erea13.show div.container {
    opacity: 1; /* コンテンツの透明度を100%に */
    transform: translateY(0); /* 浮き上がり完了 */
}

section#erea13 h1,
section#erea13 h2{
  text-align: center;
  color: #188aeb;
  margin-bottom: 10px;
  font-size: clamp(22px, 2.8vw, 45px);
}

section#erea13 h1::after,
section#erea13 h2::after{
  content: 'Company';
  display: block;
  font-size: clamp(10px, 1.3vw, 18px);
  color: #808080;
  font-weight: 500;
}

section#erea13 div#table{
    background-color: white;
    border-radius: 20px;
    padding: 4%;
    width: 80%;
    max-width: 800px;  /* テーブルの最大幅 */
    margin: 0 auto;    /* 水平方向の中央揃え */
    pointer-events: auto; /* これを追加してクリックを有効化 */
    box-sizing: border-box;
    overflow-wrap: break-word; /* ✅ はみ出し防止 */
}

section#erea13 table{
  border-collapse: collapse;
  width: 100%;                /* テーブルの横幅を揃える */
  table-layout: fixed;
}

section#erea13 table, section#erea13 th,section#erea13 td{
  border-top: 1px solid #2c79a9;  /* 上側の線のみ表示 */
  border-left: none;              /* 左側の線を非表示 */
  border-right: none;             /* 右側の線を非表示 */
  border-bottom: 1px solid #2c79a9;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;    /* 境界線とパディングを含めたサイズ計算 */
}

section#erea13 th, section#erea13 td {
  padding: 0;
  text-align: left;
  vertical-align: middle;    /* テキストの中央揃え（縦方向） */
  word-break: break-word;     /* ✅ セル内での強制改行 */
  box-sizing: border-box;     /* ✅ 境界線とパディングを含めた計算 */
  white-space: normal;        /* ✅ テキストの通常の折り返し */
  overflow: hidden;           /* ✅ はみ出し部分を隠す */
  text-overflow: ellipsis;    /* ✅ 長すぎるテキストは省略記号に */
}

section#erea13 th{
  background-color: #e6f4ff;
  width: 20%;
  color:  #0071bc;
  display: table-cell;        /* セルとして正しく表示 */
  text-align: center;
  font-size: clamp(11px, 1.4vw, 20px);
  overflow: hidden;           /* ✅ はみ出し防止 */
}

section#erea13 td {
  font-size: clamp(12px, 1.4vw, 20px);
  padding-left: 5%;
  overflow: hidden;          /* ✅ はみ出し防止 */
  padding: 2% 0 2% 5%;
  text-decoration: none;
  font-weight: 400 !important;
  color: #333333;
}

section#erea13 a {
    color: #0071bc;          /* リンクの色を設定 */
    text-decoration: underline; /* 下線を追加してリンクっぽくする */
    pointer-events: auto;    /* クリック可能にする */
    display: inline-block;   /* クリック領域を確保 */
}

@media screen and (min-width: 1441px) {
    section#erea13 th{
     font-size: clamp(14px, 1.4vw, 20px);
    }

    section#erea13 td {
      font-size: clamp(14px, 1.4vw, 20px);
    }

    section#erea13 div#table{
        width: 200%;
        max-width: 800px;
    }
}

@media screen and (max-width: 480px) {

    section#erea13 div.container{
        margin-top: -1%;
        width: 100%;
    }

    section#erea13 h1,
    section#erea13 h2{
      font-size:  clamp(14px, 2.6vw, 22px);
    }

    section#erea13 h1::after,
    section#erea13 h2::after{
      font-size:  clamp(8px, 1.3vw, 22px);
    }

    section#erea13 div#table{
        background-color: white;
        border-radius: 10px;
        padding: 4%;
        width: 90%;
    }

    section#erea13 table, section#erea13 th,section#erea13 td{
      border-top: 0.5px solid #2c79a9;  /* 上側の線のみ表示 */
      border-bottom: 0.5px solid #2c79a9;
    }

    section#erea13 th{
      font-size:  clamp(8.5px, 1.4vw, 22px);
    }

    section#erea13 td {
      font-size:  clamp(9px, 1.4vw, 22px);
    }
}

/*ーーーーーーーーーーーーーーー*/
   div#cloud2{
      width: 100%;
      height: 25vw; /* 高さを調整 */
      background-image: url("image/cloud2.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative; /* section#erea13とfooterの間に表示 */
      z-index: 100;         /* section#erea13 より後ろに配置 */
      pointer-events: none;  /* ✅ 透明部分をクリック無効にする */
      margin-top: -10%;
    }


/*ーーーーーーーーーーーーーーー*/
    div.footer1 {
      width: 100%;
      height: 100%;
      color: #555;
      text-align: center;
      display: flex;                  /* 中央揃えのためのflex */
      justify-content: center;        /* 横方向の中央揃え */
      align-items: center;            /* 縦方向の中央揃え */
      text-align: left;               /* テキストは左寄せ */
      padding: 20px;                  /* 余白の確保 */
      box-sizing: border-box;
      z-index: 100;
      position: relative;
      margin-top: -13%;
    }

    div.footer1 div.container{
      display: flex;
      flex-direction: row; /* 横並び */
      align-items: center;            /* ロゴとテキストを縦中央揃え */
      padding: 10px 20px;
      border-radius: 10px;
      width: 80%;
      margin: 0 auto;    /* 左右自動で中央寄せ */
      text-align: center; /* テキストやインライン要素も中央寄せ */
    }

    div.footer1 div.contact{
        width: 40%;
    }

    div.footer1 div.contact img{
        width: 50%;
        margin-left: -50%;
    }

    div.footer1 div.contact-info{
        white-space: nowrap;
        width: 70%;
        text-align: left;
        margin-left: -15%;
    }

    div.footer1 div.contact-info p{
        font-size: clamp(14px, 2vw, 30px);
        font-weight: 500;
    }

    div.footer1 div.contact-info img{
        width: 100%;
        margin-top: -4%;
        margin-left: -0.5%;
    }

    div.footer1 div.contact-info span {
      background-color: rgba(255,0,255,0.4);
    }

    @media screen and (max-width: 650px) {

    div.footer1 div.container{
        width: 100%;
        padding: 30px 20px 30px 0; /* 横方向に余白を持たせるなど */
    }

    div.footer1 div.contact{
        width: 30%;
    }

    div.footer1 div.contact img{
        width: 65%;
        margin-left: 10%;
    }

    div.footer1 div.contact-info{
        width: 70%;
        margin-left: 0%;
    }

    div.footer1 div.contact-info p{
        font-size: clamp(8px, 2vw, 22px);
        margin-bottom: 0;  /* 下の余白をなくす */
        margin-top: -0.2%;
    }

    div.footer1 div.contact-info img{
        margin-left: -1%;
        padding-top: -10%;
        margin-top: 0;  /* 上の余白をなくす */
    }
}

@media screen and (min-width: 1441px) {

    div.footer1 div.contact img{
        width: 43%;
        margin-left: -36%;
    }

    div.footer1 div.contact-info img{
        width: 100%;
    }
}

/*ーーーーーーーーーーーーーーー*/
    footer.footer2{
      text-align: center;
      margin-top: 30px;
    }

    footer.footer2 div.contact-buttons{
      position: fixed;
      bottom: 3%;
      right: -0.5%;
      z-index: 200;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: opacity 0.3s ease-in-out;
    }

    footer.footer2 div.contact-buttons a.btn_01{
      display: block;
      background-color: #ed610d;
      color: white;
      border: 2px solid white;
/*      padding: 2% 12%;*/
/*      margin-right: 2%;*/
      border-radius: 40px;
      cursor: pointer;
      font-size: clamp(14px, 2vw, 24px);
      font-weight: 600;
      transition: 0.5s;
      text-decoration: none;
      white-space: nowrap;
      text-align: center;
      width: 100%;
      padding: 10px 20px;
      margin: 5px 0;
      cursor: pointer;
      display: block;
      position: relative;
      overflow: hidden;
    }

footer.footer2 div.contact-buttons .btn_01.start-animation::before {
    animation: btn_01 3s ease-in-out 1s 2;
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    animation: btn_01 3s ease-in-out 1s 2; /* 3秒後に2回実行 */
}

/* 光るエフェクト */
@keyframes btn_01 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

    footer.footer2 a#b2{
        margin-top: 2%;
    }

     /* ✖️ ボタン */
    .close-btn {
        position: absolute;
        top: 2%;
        right: -8%;
        z-index: 60000;
    }

    .close-btn img{
        width: 60%;
        max-width: 100px;
    }


    #b1:hover ~ .close-btn {
        opacity: 0.1;
    }

    @media screen and (min-width: 1201px) {
    .close-btn {
        position: absolute;
        top: -5%;
        right: -8%;
    }

    .close-btn img{
        width: 70%;
        max-width: 120px;
    }
}

@media screen and (min-width: 1501px) {
    .close-btn {
        position: absolute;
        top: -5%;
        right: 2%;
    }

    .close-btn img{
        width: 90%;
        max-width: 100px;
    }
}

@media screen and (min-width:2200px) {
    .close-btn {
        position: absolute;
        top: -5%;
        right: 5%;
    }

    .close-btn img{
        width: 100%;
        max-width: 100px;
    }
}


    @media screen and (max-width: 480px) {

    footer.footer2 div.contact-buttons{
      display: flex;
      flex-direction: row; /* 縦並びから横並びに変更 */
      bottom: 5.5%;
      left: 50%;
      z-index: 1000;
      transform: translateX(-50%);
      justify-content: center;
      align-items: center;
      gap: 10px;  /* ボタン間の隙間（お好みで調整） */
      height: 50px; /* ボタンの高さを固定 */
      width: 90%; /* ボタンの幅を内容に合わせる */
      position: fixed;
    }

    footer.footer2 div.contact-buttons a.btn_01{
        width: auto;            /* 固定幅を解除して内容に合わせる */
        font-size: clamp(15px, 4vw, 22px);
        text-decoration: none;
        box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
        height: 35px;  /* 高さを統一 */
        display: flex;
        align-items: center;
        justify-content: center;
        top: 10px;
        position: relative;
    }

    footer.footer2 a#b1{
        width: 40%;
        height: 10px;
        font-size: 12px;
        padding: 0x 10px 0px 10px;
        margin-top: 5px;
        text-align: center;
    }

    footer.footer2 a#b2{
        width: 60%;
        height: 25px;
        padding: 4px 0px 3px 0px;
        font-size: 12px;
        margin-left: 3%;
        text-align: center;
    }

    footer.footer2 .contact-buttons a.btn_01:hover {
        opacity: 65%;
    }

    .close-btn {
        position: absolute;
        top: -21%;
        right: -10%;
        z-index: 4000;
    }

    .close-btn img{
        width: 60%;
        max-width: 100px;
    }

}/*
@media screen and (max-width: 480px) {
  p {
    font-size: 2.2vw !important;
  }
}*/