@charset "UTF-8";
/* CSS Document */
/*全体設定*/
*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
max-width: 100%;
height: auto;
vertical-align: middle;
transition: all 0.5s ease-in-out; /* なめらかに変化 */
}
body{
background-color: #51567A;
background-image: url("../images/haikei.jpg");
background-repeat: repeat-y;
background-position: center;
background-size: cover;
font-family: "M PLUS 1p",sans-serif;
font-weight: 700;
font-style: normal;
line-height: 2.2;
color: #24296b;/*紺色*/
text-align: left;
font-size: 20px;
}

ruby rt {
  font-size: 0.5em; /* 親の 50% にする */
  line-height: 1;
}

/*サイト幅*/
.container{
width: 90%;
margin: 0 auto;
}

/*ヘッダー*/
header {
background: #130e46;
display: flex;
align-items: center;
justify-content: space-between; /* 左右の要素を分ける */
padding: 30px; /* 余白を適宜追加 */
position: relative;
}	
header p{
line-height: 1;
}
h1{
line-height: 1;
position: absolute;
left: 50%;
transform: translateX(-50%); /* 中央配置 */
}

/*ハンバーガーメニュー*/	
.g_nav{
list-style-type: none;
display: block;/*たてならべ*/
width: 100%;/*画面いっぱい*/
height: 100vh;
background-color: #51597e;
background-image: url("../images/haikei.jpg");
filter: brightness(1.1);
background-size: cover;
position: fixed;/*固定配置*/
top: 0;
left: 100%;/*右の画面外に追い出す*/
transition: left 200ms;
z-index: 9999;
text-align: center;
}
.g_nav a{
display: block;/*ボタン化*/
line-height: 100px;/*上下中央　文字が１行の時限定*/
padding: 0 16px;
text-decoration: none;
color: #69cefc;
text-shadow: 0 0 5px rgb(13 32 44);
font-size: 28px;
font-weight: 700;
}
.g_nav a:hover{
background-color: rgba(255,255,255,0.1);
}
/*くっつけて書く*/
.g_nav.is_open{/*この２つを同時に持っている要素の意味*/
left: 0;
}
/*ハンバーガーボタン内画像*/
.g_nav_img{
padding: 100px 0;
display: flex;
justify-content: space-evenly;
align-items: center;
max-width: 100%;
width: 100%;
height: auto;
}
.g_nav_img_1,.g_nav_img_2,.g_nav_img_3{
max-width: 300px;
display: block;
width: 31%;
padding: 10px;
transition: transform 1s;
}
/*ロケット*/
.g_nav_img_3{
animation: g_navMove 3s infinite ease-in-out;
}
@keyframes g_navMove {
  0% {transform: translateY(0);}
  50% {transform: translateY(10px);}
  100% {transform: translateY(0);}
}
/*こんぺいとう*/
.g_nav_img_1:hover{
transform: rotate(20deg);
filter: drop-shadow(0 0 8px #69cefc);
}
/*こども*/
.g_nav_img_2:hover{
animation: g_nav-jump 1s infinite ease;
}
@keyframes g_nav-jump {
  0%, 100% {transform: translateY(0);}
  30% {transform: translateY(-12px);}
  50% {transform: translateY(0);}
  70% {transform: translateY(-6px);}
}

/*企業ロゴ*/
header p img{
width: 90px;
height: auto;
}
/*商品ロゴ*/
h1 img{
line-height: 1;
height: 80px;
width: auto;
}	

/*メイン*/

/*ファーストビュー・画面幅背景*/
.mv{
width: 100%;
height: 100vh;
background: url("../images/lp/mv_bg.jpg") no-repeat center center / cover;
overflow: hidden;
}
/*ファーストビューの最大幅*/
.mv_top{
max-width: 60vw;
margin: 0 auto;
height: auto;
text-align: center;
}
/*h2*/
.top_title{
width: 100%;
height: auto;
margin: 30px auto 0;
position: relative;/*キーチェーンが後ろになるように*/
z-index: 10;
}
/*ファーストビューの中身の囲い*/
.inner_top{
position: absolute;
top: 55%;
left: 48%;
transform: translate(-50%, -50%);
width: 80%;
display: flex;
justify-content: center;
align-items: center;
}
/*商品パッケージ*/
.top_package{
width: 30%;
transform: translateX(-16%);
height: auto;
}
/*アクリルキーホルダー*/
.top_img{
transform: translateX(-50%);
width: 29%;
height: auto;
}
/*左こんぺいとう*/
.left_deco{
max-width: 300px;
height: auto;
position: absolute;
top: 82%;
left: 15%;
transform: rotate(9deg);
animation: fuwafuwa 3s ease-in-out infinite alternate;
transition: 1.5s ease-in-out;
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(2deg);
  }
  50% {
    transform:translate(0, -7px) rotate(9deg);
  }
  100% {
    transform:translate(0, 0) rotate(16deg);
  }
}
/*右こんぺいとう*/
.right_deco{
max-width: 300px;
height: auto;
position: absolute;
top: 8%;
right: -5%;
filter: brightness(1.1);
transform: rotate(207deg);
animation: fuuwafuuwa 2s ease-in-out infinite alternate;
transition: 1.5s ease-in-out;
}
@keyframes fuuwafuuwa {
  0% {
    transform:translate(0, 0) rotate(200deg);
  }
  50% {
    transform:translate(0, -7px) rotate(207deg);
  }
  100% {
    transform:translate(0, 0) rotate(214deg);
  }
}

/*購入エリア*/
.btn_area{
display: block;
width: 600px;
height: 130px;
text-align: center;
position: absolute;
bottom: 100px;
right: 100px;
border-radius: 50px;
}
/*白文字*/
.white_txt{
text-align: center;
font-size: 100%;
color: #fff;
font-weight: 400;
filter: drop-shadow(0 0 6px #fff);
}
/*黄色のボタン*/
.btn_buy{
width: 600px;
color: #131310;/*ほぼ黒*/
display: inline-block;
background-color: #fced21;/*黄色*/
font-weight: 900;
border-radius: 20px;
font-size: 180%;
box-shadow: 5px 5px 12px 0px #69cefc;
text-align: right;
}
/* キャラ画像をbeforeで表示 */
.btn_buy::before{
content: "";
display: inline-block;
background-image: url(../images/chara/kodomo.png);
background-size: contain;
background-repeat: no-repeat;
width: 70px;
height: 70px;
margin: 14px 10px 0;
vertical-align: middle;
opacity: 1;
}
.btn_buy:hover::before{
transform: rotate(342deg);
}
.btn_buy:hover{
color: #0771fe;
}
.btn_buy:active{
color: #131310;
background-color: #fc21c8;
}
/*afterでこんぺいとうのimgを表示*/
.btn_buy::after{
content: "";
display: inline-block;
background-image: url("../images/decoration/kirinuki.png");
background-size: contain;
background-repeat: no-repeat;
filter: drop-shadow(0 0 3px #fff);
width: 60px;
height: 40px;
transform: rotate(335deg);
position: relative;
top: 34px;
right: 7px;
}

/*h3_title*/
.h3_img{
width: calc(90vw - 200px);
height: auto;
margin: 150px auto 50px;
display: block;
}


/*父さんをゲットしよう*/
.get_tousan{
width: 100%;
height: auto;
}
.flex_how_to{
display: flex;
justify-content: center;
align-items: flex-start;
gap: 60px;
flex-wrap: wrap; /* スマホ対策に折り返し */
}
/*青枠リスト*/
.bg_blue{
width: 500px;
height: 720px;
background-color: rgba(90,125,198,0.55);
border: solid 2px #fff;
border-radius: 20px;
text-align: center;
position: relative;
}
/*矢印*/
.bg_blue:first-child::after{
content: "";
position: absolute;
top: 50%;
right: -53px;
transform: translateY(-50%);
width: 40px;
height: 85px;
background: #fff;
clip-path: polygon(100% 50%,0% 0%,0% 100%);
}
/*白い文字*/
.how_to_txt{
margin: 40px;
text-align: center;
font-size: 25px;
color: #fff;
font-weight: 400;
}
/*画像*/
.get_img{
max-width: 100%;
width: auto;
height: 410px;
margin: 0 auto 40px;
display: block;
}




/*父さんアクキーの魅力全体*/
.flex_miryoku{
display: flex;
justify-content: center;
align-items: center;
}
/*アクキーの詳細*/
.flex_charm{
max-width: 663px;
height: auto;
margin: 30px;
}
/*スライダー＋テキスト*/
.flex_small_charm{
max-width: 100%;
display: block;
width: 510px;
height: auto;
}
/*テキスト*/
.flex_small_charm p{
text-align: center;
font-size: 40px;
font-weight: 900;
text-shadow: 0 0 15px #fffaf2;
}
/*スライダー*/
.slider{
width: 500px;
height: auto;
display: flex;
justify-content: center;
margin: 50px auto;
}
.slider img{
padding: 10px;
}
/*白枠テキスト*/
.charm_txt{
width: 500px;
max-height: 500px;
background-color: rgba(255,255,255,0.51);
border-radius: 20px;
box-shadow: 0 0 5px 1px #fff;
list-style-type: disc;
padding: 50px;
font-size: 23px;
line-height: 3;
margin: 0 auto;
}


/*キャンペーン概要*/
.campaign_txt{
max-width: 1100px;
height: auto;
background-color: rgba(255,255,255,0.51);
border-radius: 20px;
box-shadow: 0 0 5px 1px #fff;
padding: 85px;
margin: 0 auto;
margin-bottom: 100px;
}


/*fixed購入ボタンエリア*/
.fixed_btn_area{
display: flex;
justify-content: center;
width: 100%;
height: 230px;
background: url("../images/mv/bg/mv_bg.jpg") right top / cover;
position: fixed;
bottom: -100%;
left: 0;
z-index: 9996;
transition: 0.5s;
}
/*スクロールで出てくるよ*/
.fixed_btn_area.sac{
bottom: 0;
}
/*購入ボタンの囲い*/
.fixed_banner{
max-width: 90vw;
height: auto;
display: flex;
justify-content: center;
align-items: flex-start;
}
/*購入ボタン*/
.btn_link{
width: 470px;
height: fit-content;
padding-bottom: 21px;
background-color: #3fa9f5;
border-radius: 20px;
color: #fff;
text-align: center;
margin: 30px 10px 0;
}
/*文字:小*/
.txt_small{
display: inline-block;
font-size: 18px;
margin-left: 68px;
position: relative;
top: 13%;
left: 34px;
}
/*::afterでこんぺいとうの画像*/
.txt_small::after{
content: "";
display: inline-block;
background-image: url("../images/decoration/kirinuki.png");
background-size: contain;
background-repeat: no-repeat;
filter: drop-shadow(0 0 3px #fff);
width: 68px;
height: 40px;
transform: rotate(230deg);
position: relative;
top: 11px;
right: -25px;
}
/*文字:大*/
.txt_big{
display: flex;/*アイコンを横並びにするため*/
justify-content: center;
align-items: stretch;
font-size: 45px;
}
/*カートアイコン*/
.txt_big::before{
content: "";
display: inline-block;
width: 100px;
height: 100px;
background-image: url("../images/lp/cart.png");
background-size: contain;
background-repeat: no-repeat;
margin-right: 15px; /* テキストとアイコンの間に余白 */
}
/*三角マーク*/
.txt_big::after{
content: "";
display: inline-block;
width: 25px;
height: 50px;
margin-left: 15px; /* テキストとの間に余白 */
background: #fff;
clip-path: polygon(100% 50%,0% 0%,0% 100%);
transform: translateY(56%);
}
/*デコキャラ*/
.deco_kaasan,
.deco_kodomo {
max-width: 224px;
height: auto;
position: relative;
bottom: -35%;}
/*母さんの左余白*/
.deco_kaasan{
margin-right: 45px;
}
/*こどもの余白*/
.deco_kodomo{
margin-left: 45px;
}
/*ホバーアクション*/
.btn_link:hover{
filter: brightness(1.5);
filter: drop-shadow(0 0 20px #94ebff);
}
.btn_link:active{
transform: scale(0.9); /* クリック時に少し縮む */
transition: transform 0.1s;
}



/*いちばん上に戻るボタン*/
.back_to_top{
position: relative;
/*transition: cubic-bezier(.82,.16,.61,1.89);*/
easings-ease-in-out-sine: cubic-bezier(.37, 0, .63, 1);
}
.back_img{
width: 150px;
margin: 20px;
position: fixed;
bottom: 0;
right: -50px;
transform: rotate(67deg);
transition: 300ms all cubic-bezier(.07,.74,.29,.94) 90ms;
z-index: 9998;
}
.back_txt{
width: 50px;
padding: 20px;
position: fixed;
bottom: 60px;
right: 23px;
transition: 300ms all cubic-bezier(.07,.74,.29,.94) 90ms;
z-index: 9997;
}
/*いちばん上に戻るボタンホバーした時*/
/* 親要素をホバーしたら両方の画像が反応 */
.back_to_top:hover .back_img {
 bottom: 77px;
}
.back_to_top:hover .back_txt {
width: 150px;
bottom: 180px;
right: -21px;
}


/*フッター*/
footer{
color: #fff;
background-color: #383564;
text-align: center;
padding: 20px 0;
position: relative;
margin-bottom: 230px;
}

.footer_nav ul{
list-style: none;
display: flex;/*横並び*/
justify-content: center;/*中央揃え*/
}

.footer_nav a{
display: block;
text-decoration: none;
padding: 14px;
color: #FFF;
font-weight: 400;
font-size: 12px;
margin-bottom: 50px;
}
	
footer p,a{
font-size: 10px;
color: #fff;
text-decoration: none;
}

footer img{
width: 80px;
margin-bottom: 10px;
}


/* 画面幅が1177px以下のとき */
@media (max-width: 1177px){
    body{
    background-size: contain;
    }
    /*mv*/
    .top_package {
    width: 39%;
    transform: translateX(-5%);
    }
    .top_img {
    transform: translateX(-34%);
    width: 44%;
    }
    .left_deco {
    max-width: 250px;
    }
    .right_deco{
    max-width: 250px;
    }
    .btn_area{
    width: 360px;
    }
    .white_txt{
    font-size: 64%;
    }
    .btn_buy{
    padding: 0 5px 10px;
    font-size: 100%;
	width: 360px;
    }
    .btn_buy::before {
    width: 40px;
    height: 40px;
	margin: 0 5px;
    }
    .btn_buy::after{
    width: 40px;
    top: 24px;
    right: -3px;
    }
    /*手に入れよう*/
    .h3_img {
    width: 800px;
    }
    .bg_blue{
    height: 400px;
    }
    .get_img {
    max-width: 100%;
    max-height: 200px;
    height: auto;
    margin: 10px auto;
    display: block;
    }
    .how_to_txt {
    margin: 20px;
    font-size: 22px;
    }
    .bg_blue:first-child::after{
    content: "";
    position: absolute;
    top: 105%;
    right: 37%;
    transform: translateX(-50%);
    width: 65px;
    height: 25px;
    background: #fff;
    clip-path: polygon(0% 0%,100% 0%,50% 100%);
    }
    
    /*魅力*/
    .flex_miryoku{
    display: block;
    margin: 0 auto;
    }
    .flex_charm {
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    }
    .flex_small_charm {
    max-width: 100%;
    display: block;
    width: 510px;
    height: auto;
    margin: 0 auto;
    }
    .flex_small_charm p {
    font-size: 30px;
    font-weight: 700;
    margin-top: 10px;
    }
    .slider{
    margin: 0 0 40px;
    }
    .charm_txt {
    width: 500px;
    max-height: 250px;
    list-style-type: none;
    font-size: 20px;
    margin: 0 auto;
    line-height: 2;
    text-align: center;
    padding: 10px;
    }
    /*購入ボタン*/
    .deco_kaasan, .deco_kodomo {
    max-width: 150px;
    height: auto;
    position: relative;
    bottom: -6.5em;
    margin-right: 0;
    }
    .deco_kodomo{
    margin-left: 0;
    }
    .txt_small {
    display: inline-block;
    font-size: 15px;
    margin-left: 0;
    top: 36px;
    left: 45px;
    }
    .txt_small::after {
    width: 3em;
    transform: rotate(331deg);
    position: absolute;
    top: 5.5em;
    right: -6em;
    }
    .txt_big{
    font-size: 30px;
    align-items: center;
    } 
    .txt_big::after {
    width: 14px;
    height: 33px;
    transform: translateY(6%);
    }
}



/* 画面幅が768px以下のとき */
@media (max-width: 768px) {
	
    /*ハンバーガーボタン*/
    .g_nav{
    text-align: left;
    }
	.g_nav a{
	font-size: 21px;
	}
    header{
	height: 50px;
	}
	header p img{
	width: 45px;
	margin: 0 5px 0 0;
	}
	h1 img{
	width: auto;
	height: 35px;
	}
    /*mv*/
    .mv_top {
    max-width: 95vw;
    margin: 0 auto;
    height: auto;
    text-align: center;
    }
    .top_title{
    z-index: 10;
	margin: 0 auto;
    }
    .inner_top{
    width: 80%;
    }
    .top_img {
    width: 95%;
    transform: translate(-26%, -14%);
    }
    .top_package {
    width: 49%;
    transform: translate(38%, -53%);
    }
	.left_deco {
    max-width: 100px;
    z-index: -1;
    top: 63%;
    left: 0;
    animation: none;
    }
    .right_deco {
    max-width: 100px;
    animation: none;
    top: 19%;
    right: -3%;
    }
    /*黄色ボタン*/
    .btn_area {
	width: 300px;
    height: 90px;
    padding-right: 0;
    bottom: 15px;
    right: 50%;
    transform: translateX(50%);
    }
    .white_txt{
    color: #e9ff00;
    filter: drop-shadow(0 0 6px #000);
    }
    .btn_buy {
    font-weight: 700;
	padding: 10px;
	text-align: center;
	width: 300px;
    }
    .btn_buy::before {
    display: none;
    }
    .btn_buy::after {
    display: none;
    }
    /*h3*/
    .h3_img {
    margin: 100px auto 50px;
    }
    /*ゲットしよう*/
    .how_to_txt {
    font-size: 17px;
    }
    .bg_blue:first-child::after {
    right: 50%;
    transform: translateX(50%);
    }
    .flex_how_to {
    flex-direction: column;
    align-items: center;
    }
    .bg_blue {
    width: 90%;
    height: auto;
    }
    .bg_blue:last-child {
    margin-bottom: 40px;
    }
    /*魅力*/
    .flex_small_charm {
    width: 90%;
    }
    .flex_small_charm p {
    font-size: 22px;
     margin-top: 15px;
    }
    .slider {
    width: 100%;
    }
    .charm_txt {
    width: 100%;
    text-align: left;
    list-style-type: disc;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
    padding: 10px 0 10px 20px;
    }
    /*キャンペーン*/
    .campaign_txt {
    max-width: 100%;
    height: auto;
    font-size: 17px;
    line-height: 2;
    padding: 10px;
    }
    /*fixed購入ボタン*/
	.fixed_btn_area {
	height: 110px;
	transition: 0.7s;
	}
    .fixed_banner {
    max-width: 100vw;
	height: 100px;
    }
    .deco_kaasan, .deco_kodomo {
    max-width: 70px;
    transform: rotate(180deg);
    bottom: 0px;
    }
	.deco_kodomo{
    bottom: 0px;
    left: 0;
	}
    .btn_link {
    width: 220px;
	height: 92px;
    border-radius: 10px;
    margin: 10px auto;
    text-align: center;
    }
    .txt_small {
    display: block;
    font-size: 12px;
    position: static;
    text-align: center;
	margin-top: 5px;
    }
    .txt_small::after {
    display: none;
    }
    .txt_big {
    font-size: 18px;
    align-items: start;
    }
    .txt_big::before {
    width: 53px;
    height: 45px;
    margin-right: 0;
    margin-left: 0;
    }
    .txt_big::after {
    width: 8px;
    height: 20px;
    transform: translateY(60%);
    margin-right: 0;
    margin-left: 10px;
    }
    /*フッターナビ*/
	footer{
	margin-bottom: 108px;
	}
    .footer_nav ul{
    flex-wrap: wrap;
    max-width: 440px;
    margin: 0 auto;
    }
	.footer_nav a{
	padding: 0 10px;
    margin-bottom: 15px;
	}
    footer img{
    width: 40px;
    margin: 15px 0;
    }
    
	/*上に戻るボタン*/
	.back_txt {
    display: none; /* back_txt を非表示 */
    }
	.back_img {
	width: 110px;
	transform: rotate(66deg);
	bottom: -8px;
	right: -42px;		
	}
	
}