/* ############################
GROWUP Ver1.0 CSS
############################ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* ############################
リセットCSS START
############################ */

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

/* マージン、パディング、ボーダーをリセット */
body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, figure, figcaption, blockquote, dl, dd {
margin: 0;
padding: 0;
border: 0;
}

/* リストスタイルをリセット */
ol, ul {
list-style: none;
}

/* フォント継承をリセット */
html {
font-family: "Noto Sans JP", sans-serif;
}

/* リンクのスタイルをリセット */
a {
text-decoration: none;
color: inherit;
}

/* 画像のスケーリングを防ぐ */
img {
max-width: 100%;
height: auto;
display:block;
}

/* テーブルのボーダースパイシングとボーダーコラプスをリセット */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* その他の基本的なスタイルリセット */
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}

/* ############################
リセットCSS END
############################ */


/* contents */

body{
max-width:1600px;
margin:0 auto!important;
position: relative;
}

.container{
max-width:800px;
margin:0 auto!important;
}

.section-border {
width: 70%;
height: 2px;
background: #003154;
margin: 30px auto 0;
}

img{
margin:0 auto;
}

/* margin */

.mt-10{
margin-top:10px;
}

.mt-20{
margin-top:20px;
}

.mt-30{
margin-top:30px;
}

.mt-40{
margin-top:40px;
}

.mt-50{
margin-top:50px;
}

.mt-60{
margin-top:60px;
}

.mt-70{
margin-top:70px;
}

.mt-80{
margin-top:80px;
}

.mt-90{
margin-top:90px;
}

.mt-100{
margin-top:100px;
}

.mt-180{
margin-top:180px;
}

.mb-10{
margin-bottom:10px;
}

.mb-20{
margin-bottom:20px;
}

.mb-30{
margin-bottom:30px;
}

.mb-40{
margin-bottom:40px;
}

.mb-50{
margin-bottom:50px;
}

.mb-60{
margin-bottom:60px;
}

.mb-70{
margin-bottom:70px;
}

.mb-80{
margin-bottom:80px;
}

.mb-90{
margin-bottom:90px;
}

.mb-100{
margin-bottom:100px;
}

/* pc sp change */

.sp-only{
display:none;
}

/* btn */

.btn-area{
position: relative;
}

.btn1,.btn2,.btn3,.btn4,.btn5,.btn6,.btn7{
position: absolute;
left: 10%;
width:80%;
animation: zoom 1s alternate infinite;
z-index:1;
}

.form-btn{
animation: zoom 1s alternate infinite;
}

@keyframes zoom {
0% {
transform: scale(1); /* 初期サイズ */
}
100% {
transform: scale(1.1); /* 1.2倍に拡大 */
}
}
.btn1{
bottom: -3%;
}

.btn2{
bottom:-84%;
}

.btn3{
bottom:6%;
}

.btn4{
bottom:-36%;
}

.btn5{
bottom:-1%;
}

.btn6{
bottom:-36%;
}

.btn7{
bottom:-36%;
}

#cta{
padding-top:80px;
}

.n-btn-area img{
width:50%;
margin:0 auto;
}

/* header */

header{
position: relative;
}

header .btn1{
max-width:720px;
left: 27%;

}

.media-wrap{
position: relative;
width: 100%;
max-width: 1600px; /* 必要なら調整 */
margin: 0 auto;
}

.overlay-video{
position: absolute;
top: 31%;
left: 50%;
width: 40%; /* 動画の大きさ（%で画像に合わせて縮小） */
transform: translate(-50%, -50%);
height: auto;
}

/* section */

.sec01{
background-image: url("../img/khlp_bg_01.png");
background-size: 100% auto;
background-position: center;
padding:120px 0;
}

.sec02{
background:#ffe133;
min-height: 500px;
padding: 40px 0;
}

.sec03{
background-image: url("../img/khlp_bg_01.png");
background-size: 100% auto;
background-position: center;
padding:120px 0;
}

.sec04{
background:#ffe133;
min-height: 800px;
padding: 40px 0;
}

.sec05{
background-image: url("../img/khlp_bg_01.png");
background-size: 100% auto;
background-position: center;
padding:120px 0;
}

.sec06{
background:#ffe133;
padding: 120px 0;
}

.cta-headline{
background:#003154;
}

/* flex */

.flex-box-wrapper{
display:flex;
gap: 20px;
justify-content: center;
}

.change-img{
cursor: pointer;
}

.change-img-area{
position: relative;
}

.change-img-area .slider{
position: absolute;
bottom: -40%;
left: 50%;
transform: translateX(-50%);
}


/* form */

.form-container {
padding: 50px;
background:#FFF;
}

.form-group {
margin-bottom: 24px;
}

.form-group label {
display: block;
margin-bottom: 8px;
}

.label-text {
font-size: 1.1rem;
font-weight: bold;
color: #1a2c5b;
margin-right: 8px;
}

.required-tag {
font-size: 0.85rem;
font-weight: bold;
color: #e91e63;
}

input[type="text"],
input[type="tel"] {
width: 100%;
padding: 12px 16px;
font-size: 1rem;
border: 1.5px solid #1a2c5b; /* 画像のような紺色の枠線 */
border-radius: 8px;/* 角の丸み */
box-sizing: border-box;/* パディングを含めたサイズ計算 */
outline: none;
transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
border-color: #3f51b5;
box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.1);
}

/* ボタンのレイアウト（中央揃えなど） */
.form-button {
text-align: center; /* 左寄せにする場合は left に変更 */
margin-top: 32px;
}

/* 画像ボタン自体のスタイル */
.image-submit-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
outline: none;
display: inline-block;
width:80%;
}

/* ポップアップの背景 */
.popup-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}

/* 中身 */
.popup-content {
background: #fff;
width: 90%;
max-width: 700px;
border-radius: 18px;
position: relative;
border:solid 8px #F33250;
}

/* 閉じるボタン */
.popup-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 1rem;
cursor: pointer;
background: rgba(0, 0, 0, 0.6);
padding: 3px 7px;
border-radius: 50px;
color: #FFF;
}

/* フォーム */
.popup-content form {
display: flex;
flex-direction: column;
gap: 10px;
}

.popup-content input {
width: 100%;
padding: 12px;
font-size: 18px;
border: 1px solid #003154;
border-radius: 6px;
}

.popup-content label{
color:#003154;
font-weight:bold;
display: inline-block;
}

.form-input{
padding:20px 30px;
}

/* 送信ボタン（画像） */
.submit-btn {
background: none;
border: none;
cursor: pointer;
margin: 0;
padding: 0;
}

.submit-btn img {
width: 100%;
}


@media (max-width: 480px) {
.label-text {
font-size: 1rem;
}
input[type="text"],
input[type="tel"] {
padding: 10px 12px;
}
}

/* 追従 */

#follow-btn {
position: fixed;
bottom: 0px;
color: #fff;
border-radius: 8px;
transition: opacity .3s;
opacity: 1;
z-index:2;
}

#follow-btn.hide {
opacity: 0;
pointer-events: none;
}

footer{
background:#003154;
color:#FFF;
text-align:center;
padding:15px 0;
font-size:0.8rem;
}

footer p{
color:#FFF;
}

@media (max-width:1599px) {
header .btn1{
width:47vw;
}
}

@media (max-width:799px) {
.pc-only{
display:none;
}
.sp-only{
display:block;
}
.overlay-video{
width:80%;
}
header .btn1,.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7{
width: 96vw;
left:0%;
}
.image-submit-btn{
width: 96vw;
}
.btn2 {
bottom: -102%;
}
.btn3 {
bottom: 1%;
}
.btn4 {
bottom: -45%;
}
.btn5 {
bottom: -3.3%;
}
.slider img{
width:35vw;
}
.sec02{
min-height:auto;
height:69vw;
}
.sec04{
min-height:auto;
height:107vw;
}
.sec06,.sec01,.sec03,.sec05 {
padding: 40px 0;
}
.change-img-area{
padding: 0 15px;
}
.change-img-area .slider{
bottom:-50%;
}
}

@media (max-width:499px) {
img.mt-180{
margin-top:110px;
}
.popup-content{
border-radius:15px;
}
.cta-headline img{
width:45%;
}
}

/* ##########################################
特定商取引法に基づく表記|プライバシーポリシー
########################################## */

.law-content{
background-image: url("../img/tspp_bg-01.png");
background-size: 100% auto;
background-position: center;
padding:120px 10px;
}

#law-main header,#law-main footer{
max-width:1600px;
min-height:80px;
background:#003154;
}

@media (max-width:499px) {
.law-content{
padding:80px 0;
}
#law-main header,#law-main footer{
min-height:40px;
}
}