@charset "utf-8";
/* CSS Document */

*{
	box-sizing: border-box;
	font-size: 16px;
}

/*大きさの計算*/
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*iOSフォーム要素の初期化*/
input, button, textarea, select {
	-webkit-appearance: none;
	appearance: none;
}

body {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%; /*スマホ横向き時のフォントサイズ*/
	text-size-adjust: 100%; /*スマホ横向き時のフォントサイズ*/
	-webkit-font-feature-settings: 'palt';/*文字詰め*/
	font-feature-settings: 'palt';/*文字詰め*/
}

body *{
  box-sizing: inherit; /* box-sizingの値は継承されないので明示的に設定 */
}

/*画像の調整*/
img {
    max-width: 100%;
    height: auto;
	vertical-align: bottom;
	width: 100%;
}

a:hover {
    opacity: 0.8;
}

/*****LPコーディングここから*****/
.lp-content{
	max-width: 750px;
	margin: 0 auto;
}

.section01,.cta01{
    position: relative;
}

.btn_box_fv {
    position: absolute;
    z-index: 999;
    width: 93%;
    left: 0;
    right: 0;
    margin: auto;
    top: 82%;
    animation: poyon 5s infinite;
}
.btn_box01 {
    position: absolute;
    z-index: 999;    
    width: 93%;
    left: 0;
    right: 0;
    margin: auto;
    top: 0%;
    animation: poyon 5s infinite;
}



@keyframes poyon {
    0% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }

    15% {
        transform: scale(0.95, 0.95) translate(0%, 0%);
    }

    30% {
        transform: scale(1.05, 1.05) translate(0%, 0%);
    }

    50% {
        transform: scale(0.95, 0.95) translate(0%, 0%);
    }

    70% {
        transform: scale(1.05, 1.05) translate(0%, 0%);
    }

    100% {
        transform: scale(1.0, 1.0) translate(0%, 0%);
    }
}

/* フッター領域のコンテナ */
.footer_area {
    /* 親要素 (.lp-content) の幅いっぱいに広がり、中央配置されます */
    width: 100%;
    
    /* 既存のデザインに合わせてフッターの背景色や画像をCSSで設定 */
    background-color: #ffffff; /* 例: 薄いグレーの背景色 */
    
    /* 文字を中央寄せ */
    text-align: center;
    
    /* 上下の余白（padding）を調整 */
    padding: 20px 0; 
    
    /* 必要に応じて position: relative; を設定し、他の要素と重なり順を制御 */
    position: relative; 
}

/* リンク全体のスタイル */
.footer_links {
    /* フォントサイズを小さくし、背景色とのバランスをとる */
    font-size: 13px; 
    line-height: 1.5;
    
    /* リンクの色を調整（背景画像の色によって見やすい色を選択） */
    color: #333333; 
    margin-bottom: 5px; /* コピーライトとの間に少し隙間 */
}

/* 個別リンクのスタイル */
.footer_link {
    color: inherit; /* 親要素 (.footer_links) の文字色を継承 */
    text-decoration: none; /* 初期状態で下線を非表示 */
    padding: 0 10px; /* リンク間の左右の余白 */
    white-space: nowrap; /* リンクが途中で改行されるのを防ぐ */
}

.footer_link:hover {
    text-decoration: underline; /* ホバー時に下線を表示して、クリック可能であることを示す */
}

/* 区切り線のスタイル */
.separator {
    color: #999999;
}


/***背景を設定したいとき***/
/*背景に色を付ける*/
/*
.content01 {
    background: #fff7f8;
}
*/

/*背景を固定したいとき　例
.content01 {
    background-image: url("img/bg-content02.jpg");
	background-color: rgba(255, 255, 255, 0.5);
    background-blend-mode: lighten;
	background-size: contain;
}*/


/***メールフォーム こちらにメールフォームのコーディングを記述ください***/



/***フッター***/
.footer-section {
    background: lightgrey; /*好きな色を設定してください*/
    padding: 2rem;
}

ul.footer-menu {
    display: flex;
    justify-content: center;
}

ul.footer-menu li {
    list-style: none;
}

ul.footer-menu li a {
    color: black;
    margin-right: 10px;
    font-size: 1rem;
}

.logo {
    width: 50%;  /*ロゴにあわせて調整してください*/
    margin: 0 auto;
}


@media screen and (max-width:768px) {
	ul.footer-menu {
    display: block;
    text-align: center;   
        
}
	
	.logo {
    width: 90%;  /*ロゴにあわせて調整してください*/
}
	
	.footer-section {
    padding: 1rem;
}
    
  .cta {
    position: absolute;
    z-index: 999;
    width: 93%;
    left: 0;
    right: 0;
    margin: auto;
    top: 10%;
    animation: poyon 2s infinite;
}  
    
    
}