@charset "UTF-8";

/* -------------------------------------
初期スタイル調整
--------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

a {
    transition: .3s ease;
}

a:hover {
    opacity: .7;
}

body {
}


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



/* PC･SP切り替え
--------------------------------------*/

.sp {
    display: block;
}

.pc {
    display: none;
}

@media screen and (min-width: 768px) {
    .sp {
        display: none;
    }
    .pc {
        display: block;
    }
}


/* ボタン */
.cta-1 {
    position: relative;
    width: 100%;
    background: url('../img/03.jpg') no-repeat center top / contain;
    /* 画像の縦横比に合わせる（例: 1200×600） */
    aspect-ratio:  2800/ 971;
    display: flex;
}

.cta-btn-1 {
    position: absolute;
    bottom: 18%; /* ← 画像下からの距離（％で調整） */
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;
}

.cta-2 {
    position: relative;
    width: 100%;
    background: url('../img/07.jpg') no-repeat center top / contain;
    /* 画像の縦横比に合わせる（例: 1200×600） */
    aspect-ratio:  2800/ 4716;
    display: flex;
}

.cta-btn-2 {
    position: absolute;
    bottom: 2.5%; /* ← 画像下からの距離（％で調整） */
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    cursor: pointer;
    transition: opacity 0.3s;

}

.cta-3 {
    position: relative;
    width: 100%;
    background: url('../img/12.jpg') no-repeat center center / cover;
    /* 画像の縦横比に合わせる（例: 1200×600） */
    aspect-ratio:  2800/ 560;
    display: flex;
    justify-content: center; /* 横方向の中央 */
    align-items: center;     /* 縦方向の中央 */
}

.cta-btn-3 {
    cursor: pointer;
}


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

 /* ボタン */
.cta-1 {
    background: url('../img/03_sp.jpg') no-repeat center top / cover;
    /* 画像の縦横比に合わせる（例: 1200×600） */
    aspect-ratio:  750/ 639;
}

.cta-btn-1 {
    width: 73.6%;  /* ← スマホ用サイズを固定値で指定 */
    bottom: 20%; /* ← 画像下からの距離（％で調整） */
}


.cta-2 {
    background: url('../img/07_sp.jpg') no-repeat center top / cover;
  /* 画像の縦横比に合わせる（例: 1200×600） */
    aspect-ratio:  750/ 4850;
}

.cta-btn-2 {
    width: 73.6%;  /* ← スマホ用サイズを固定値で指定 */
    bottom: 3%; /* ← 画像下からの距離（％で調整） */
}

.cta-3 {
    position: relative;
    background: url('../img/12_sp.jpg') no-repeat center center / cover;
      /* 画像の縦横比に合わせる（例: 1200×600） */
    aspect-ratio:  750/ 360;
}

.cta-img {
  height: 27%;
  margin: 0 auto;
}
}





/*--------------------------------------
  メイン
--------------------------------------*/

.p02 {
    margin-bottom: -2px;
}

.p05 {
    margin-top: -24px;
}


@media screen and (max-width: 768px) {
    
.p02 {
    margin-bottom: -2px;
}

.p05 {
    margin-top: -14px;
}

}