@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}

/*====================
basic
====================*/
body{
position: relative;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
.l-container{
color: #231815;
line-height: 1.8;
-webkit-text-size-adjust: 100%;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
transition: ease .4s;
}
p.note, ul.note > li{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
.moveit{
visibility: hidden;
}

/*====================
コンテンツ
====================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
font-size: 2.6vw;
letter-spacing: 0.5px;
border: solid 15px;
border-image: repeating-linear-gradient(-45deg, #15b4ab, #15b4ab 15px, #feebbb 15px, #feebbb 30px, #ebaa35 30px, #ebaa35 45px, #feebbb 45px, #feebbb 60px, #ea510c 60px, #ea510c 75px, #feebbb 75px, #feebbb 90px, #562f1f 90px, #562f1f 105px, #feebbb 105px, #feebbb 120px) 15;
background-color: white;
}
#content_wrap > section,
#base_main > section{
text-align: center;
}
#content_wrap a{
color: #e50012;
text-decoration: underline;
}

/* ▽ SP ▽======================================================================================================================================================== */
/*====================
base
====================*/
#content_wrap p,
#content_wrap a{
font-family: 游ゴシック体, YuGothic, 游ゴシック Medium, Yu Gothic Medium, 游ゴシック, Yu Gothic, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif;
font-weight: 600;
}
.information,
.information p{
font-size: 2vw;
}
.txt_midium,
.txt_midium p{
font-size: 2.2vw;
}
.txt_small,
.txt_small p{
font-size: 1.8vw;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: url("/products/brand/okashihappy/kousaku/fukkoku-retro/images/base_main.jpg");
background-repeat: repeat;
}
.loading {
position: absolute;
top: calc(50% - 10vw);
left: calc(50% - 12.8vw);
}
.loading-bar {
display: inline-block;
width: 4vw;
height: 4.4vw;
animation: loading 1s ease-in-out infinite;
margin: 0 1vw;
}
.loading-bar:nth-child(1) {
background-color: #15b4ab;
animation-delay: 0;
}
.loading-bar:nth-child(2) {
background-color: #562f1f;
animation-delay: 0.09s;
}
.loading-bar:nth-child(3) {
background-color: #ea510c;
animation-delay: .18s;
}
.loading-bar:nth-child(4) {
background-color: #ebaa35;
animation-delay: .27s;
}
@keyframes loading {
0% {
transform: scale(1);
}
20% {
transform: scale(1, 2.2);
}
40% {
transform: scale(1);
}
}

/*====================
メインコンテンツ背景設定
====================*/
#base_main{
background: url("/products/brand/okashihappy/kousaku/fukkoku-retro/images/base_main.jpg");
background-position: center top;
background-repeat: repeat;
background-size: auto;
position: relative;
}

/*====================
タイトルエリア
====================*/
#mainvisual{
position: relative;
padding: 8.1vw 0 6.2vw;
}
.label_fukkoku{
position: absolute;
width: 22.4vw;
left: 4.2vw;
top: -2vw;
}
h1{
width: 65.6vw;
margin: 0 auto;
}
.txt_outline{
width: 82.4vw;
margin: 5.2vw auto 4.2vw;
}
.mv_slider{
width: 88vw;
margin: 0 auto;
}

/*====================
アイテム紹介
====================*/
#item{
padding-bottom: 8.2vw;
position: relative;
}
#item:after{
content: "";
display: block;
width: 100%;
height: 0.4vw;
background: url(/products/brand/okashihappy/kousaku/fukkoku-retro/images/jaggy.png) repeat-x center bottom /auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
#item .inner{
padding: 0 1.8vw;
}
.item_list{
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}
.item_list li{
width: calc(100% / 2);
margin-bottom: 4.6vw;
}
.item_list li:nth-child(n+5){
margin-bottom: 0;
}
.item_list li:last-child{
margin-bottom: 0;
}
.item_list li img{
width: 41.6vw;
}
.btn_item:hover {
animation-name: heartBeat;
animation-duration: 1.3s;
}

/*====================
工作名人紹介
====================*/
#kousaku_info{
background: url("/products/brand/okashihappy/kousaku/fukkoku-retro/images/base_info.jpg");
background-position: center top;
background-repeat: repeat;
background-size: auto;
position: relative;
padding: 7.4vw 0 8vw;
}
#kousaku_info .inner{
padding: 0 3vw;
}
.kousaku{
position: relative;
}
.btn_detail{
width: 29.8vw;
position: absolute;
bottom: 0.8vw;
left: calc(50% - 14.8vw);
}
.deco_tape{
width: 9.7vw;
position: absolute;
top: 0;
left: 10vw;
}
.deco_scissors{
width: 12.6vw;
position: absolute;
top: 0.4vw;
right: 9.7vw;
}
.deco_bond{
width: 12vw;
position: absolute;
bottom: 1.3vw;
left: 13.6vw;
}
.deco_cellophanetape{
width: 11vw;
position: absolute;
bottom: 1.8vw;
right: 15.1vw;
}
.btn_detail:hover{
animation-name: pulse;
animation-duration: 0.8s;
}

/*====================
特集内フッター
====================*/
#lp_footer{
background: url("/products/brand/okashihappy/kousaku/fukkoku-retro/images/base_info.jpg");
background-position: center top;
background-repeat: repeat;
background-size: auto;
position: relative;
padding-bottom: 10vw;
}
#lp_footer .inner{
padding: 0 8.5vw;
}
.sns {
display: flex;
justify-content: center;
margin-bottom: 8vw;
}
.sns li {
width: 11.6vw;
}
.sns li:not(:first-child) {
margin-left: 5.2vw;
}
.chara_jack{
position: absolute;
top: 22.6vw;
right: 0.5vw;
width: 23vw;
}
#lp_footer a:hover img{
opacity: 0.6;
}

/* ～767px For SP
====================================================*/
@media screen and (max-width: 767px){
.isPC{
display: none;
}
}

/* ▽ PC ▽======================================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
.isSP {
display: none;
}
.isPC {
display: block;
}
body{
min-width: 950px;
}
.inner{
margin: 0 auto;
padding: 0!important;
}
.information,
.information p{
font-size: 14px !important;		
}
.txt_midium,
.txt_midium p{
font-size: 15px !important;
}
.txt_small,
.txt_small p{
font-size: 12px !important;		
}
body{
min-width: 950px;
}

/*====================
コンテンツ
====================*/
#content_wrap{
border: solid 22px;
border-image: repeating-linear-gradient(-45deg, #15b4ab, #15b4ab 15px, #feebbb 15px, #feebbb 30px, #ebaa35 30px, #ebaa35 45px, #feebbb 45px, #feebbb 60px, #ea510c 60px, #ea510c 75px, #feebbb 75px, #feebbb 90px, #562f1f 90px, #562f1f 105px, #feebbb 105px, #feebbb 120px) 22;
}
#content_wrap,
#content_wrap p{
font-size: 16px;
}

/*====================
ローディング画面
====================*/
.loading {
position: absolute;
top: calc(50% - 64px);
left: calc(50% - 70px);
}
.loading-bar {
display: inline-block;
width: 20px;
height: 22px;
animation: loading 1s ease-in-out infinite;
margin: 0 6px;
}

/*====================
メインコンテンツ背景設定
====================*/
#base_main{
background-size: 512px;
}

/*====================
タイトルエリア
====================*/
#mainvisual{
padding: 52px 0 44px;
}
.label_fukkoku{
width: 163px;
left: calc(50% - 469px);
top: -16px;
}
h1{
width: 598px;
}
.txt_outline{
width: 796px;
margin: 39px auto 32px;
}
.mv_shateki{
width: 688px;
margin: 0 auto;
}
.illust_kaerujyanpu{
width: 205px;
position: absolute;
left: calc(50% - 631px);
top: 291px;
}
.illust_wanage{
width: 174px;
position: absolute;
left: calc(50% - 543px);
top: 612px;
}
.illust_tontonsumo{
width: 205px;
position: absolute;
right: calc(50% - 546px);
top: 74px;
}
.illust_mangekyo{
width: 135px;
position: absolute;
right: calc(50% - 629px);
top: 436px;
}
.illust_okashikuji{
width: 164px;
position: absolute;
right: calc(50% - 527px);
top: 616px;
}

/*====================
アイテム紹介
====================*/
#item{
padding-bottom: 56px;
}
#item:after{
width: 100%;
height: 3px;
}
#item .inner{
width: 892px;
}
.item_list{
display: flex;
flex-wrap: wrap;
justify-content:space-around;
}
.item_list li{
width: calc(100% / 3);
margin-bottom: 28px;
}
.item_list li:nth-child(n+4){
margin-bottom: 0;
}
.item_list li img{
width: 276px;
}

/*====================
工作名人紹介
====================*/
#kousaku_info{
padding: 52px 0 32px;
}
#kousaku_info .inner{
width: 873px;
}
.btn_detail{
width: 206px;
bottom: 18px;
left: calc(50% - 103px);
}
.deco_tape{
width: 78px;
top: 0;
left: 126px;
}
.deco_scissors{
width: 128px;
top: 3px;
right: 96px;
}
.deco_bond{
width: 99px;
bottom: 18px;
left: 136px;
}
.deco_cellophanetape{
width: 78px;
bottom: 23px;
right: 142px;
}

/*====================
特集内フッター
====================*/
#lp_footer{
padding-bottom: 70px;
}
#lp_footer .inner{
width: 540px;
}
.sns{
margin-bottom: 48px;
}
.sns li {
width: 60px;
}
.sns li:not(:first-child) {
margin-left: 40px;
}
.chara_jack{
top: 138px;
right: calc(50% - 392px);
width: 150px;
}
}