/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.linkStyle{
	color:var(--color3);
}
.linkStyle:hover{
	color:var(--color2);
	opacity: 0.7;
	transition: all 0.5s;
}

#logo img{
    max-width: 180px;
}
#header.active #logo img {
    max-width: 150px;
}
#footer{
    background-color:var(--black);
}
#footer #logo2{
    max-width: 240px;
}
#footer .info_txt{
    color:#fff;
}
#footer .tel_bt .bg_color1{
    background-color: var(--color2)!important;
}
.map{
    display: none;
}
.bottom_wrap{
    background-color:var(--color4)!important;
}
#pc_nav{
    z-index:15;
}
.shop_link a .posi_center{
    white-space: nowrap;
}

/* メニュー */
.menu_box .tel_bt a{
    color:var(--color3);
}
.menu_box .tel_bt a:hover{
    opacity: 0.4;
}


/* ページタイトル */
#page_title h2 .anim{
    font-weight: 700;
    color:var(--color3);
}
#page_title .bg_color1{
    background-color:var(--color3);
}
#page_title h2 span.font_anim{
    height: 70px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #logo{
        padding: 10px 20px!important;
    }
    #logo img {
        max-width: 80px;
    }
    #header.active #logo img {
        max-width: 90px;
    }
    .overlay .sns_links li {
        height: 30px;
        max-width: 30px;
    }
}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#main_img{
     background-image: url(/Files/img/fv_bg.png);
     background-size:cover;
     background-position:center top;
    max-height: 1000px;
    position: relative;
    z-index: 0;
}

.fv_item01_sp, .fv_item02_sp{
    display: none;
}
.fv_item01{
    position: absolute;
    z-index: 0;
    width: 52%;
    bottom: 0;
    right: 25%;
    min-width: 900px;
}
.fv_item02{
    position: absolute;
    z-index: 10;
    width: 60%;
    bottom: 3%;
    left: 1%;
}

/* ペンギン */
.fv_item03 {
    position: absolute;
    z-index: 8; /* 一番上 */
    width: 8%;
    top: 11%;
    left: 45%;
    animation: penguinDown 5s ease-out forwards;
    transform-origin: center center;
}

 @keyframes penguinDown {
    0% { transform: scale(0.4) translateY(80px); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: scale(2.8) translateY(160px); }
} 

/* ドの画像 */
/* .fv_item04 {
    position: absolute;
    z-index: 7; .fv_item03 の下
    bottom: 34%;
    left: 0;
    width: 40px;
    height: 40px;
    background-image: url('/Files/img/fv_item04.png');
    background-size: contain;
    background-repeat: no-repeat;
} */
.fv_item04 {
    position: absolute;
    z-index: 7;
    bottom: 34%;
    left: 0;
    width: 4vw;                 /* ←レスポンシブ幅 */
    height: 4vw;
    max-width: 50px;           /* 最大値 */
    max-height: 50px;
    min-width: 25px;           /* 最小値 */
    min-height: 25px;
    background-image: url('/Files/img/fv_item04.png');
    background-size: contain;
    background-repeat: no-repeat;
}

/* 複製された「ド」のアニメーション用クラス */
.fv_item04.clone {
    animation: pop 2s ease-in-out infinite;
    position: absolute;
    bottom: 34%;
    z-index: 7; /* 複製も同じ */
}

/* 跳ねるアニメーション */
@keyframes pop {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    20%  { opacity: 1; transform: translateY(-20px) scale(1); }
    50%  { transform: translateY(-40px) scale(1.2); }
    80%  { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(0) scale(0.5); }
}
.fv_item05{
    position: absolute;
    z-index: 5;
    width: 31%;
    top: 10%;
    left: 12%;
}
 .fv_item06{
    position: absolute;
    z-index: 5;
    width: 25%;
    bottom: 20%;
    right: 3%;
} 
.fv_item06 .demo_item{
	width: 150px;
    height: 105px;
    border-radius: 10px;
    background-image: url("/Files/img/fv_item06.png");
    background-size: contain;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
}
.fv_item06 .demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(2);
    transition-duration: .3s;
    transition-property: transform;
}
.fv_item06 .demo_stage{
    position: relative;
    width: 100%;
    height: 65px;
    top: 0px;
    display: block;
}
.fv_item06 .demo_wrap{
	display: block;
    position: absolute;
    top: 0;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: 1;
	margin-right: -25px;
}
.fv_item06 .demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.fv_item06 .demo_wrap[data-order="right"] {
    animation-name: GoRight;
}
[data-order="left"] >  .demo_item {
    transform: rotateY(180deg);
}
@keyframes GoLeft {
	0% {right: 10%;}
	100% {right: 90%;}
}
@keyframes GoRight {
	0% {right: 90%;}
	100% {right: 10%;}
}
@keyframes upDown {
	0% {top: 0;}
	100% {top: 3px;}
}
 .fv_item07{
    position: absolute;
    z-index: 5;
    width: 5%;
    bottom: 27%;
    left: 22%;
} 
.fv_item07 .demo_item{
	width: 100px;
    height: 90px;
    border-radius: 10px;
    background-image: url("/Files/img/fv_item06.png");
    background-size: contain;
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    position: relative;
}
.fv_item07 .demo_item.anime{
    animation-name: upDown;
    animation-iteration-count: infinite;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-timing-function: steps(4);
    transition-duration: .1s;
    transition-property: transform;
}
.fv_item07 .demo_stage{
    position: relative;
    width: 100%;
    height: 65px;
    top: 0px;
    display: block;
}
.fv_item07 .demo_wrap{
	display: block;
    position: absolute;
    top: 0;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 3s;
    animation-iteration-count: 1;
	margin-right: -25px;
}
.fv_item07 .demo_wrap[data-order="left"] {
    animation-name: GoLeft;
}
.fv_item07 .demo_wrap[data-order="right"] {
    animation-name: GoRight;
}

@media screen and (max-width: 1600px){
    .fv_item02 {
    width: 45%;
    }
    .fv_item03{
        left: 42%;
    }
}
@media screen and (max-width: 1400px){
    .fv_item02{
    width: 62%;
    bottom: 13%;
    }
    .fv_item07 {
    position: absolute;
    z-index: 5;
    width: 5%;
    bottom: 5%;
    left: 22%;
}
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    #main_img {
        height: 80vh !important;
    }
    .fv_bg{
        height: 70vh;
        width: auto;
    }
    .fv_item01 {
    display: none;
    }
    .fv_item01_sp{
        display: block;
        position: absolute;
        z-index: 0;
        width: 92%;
        bottom: -44%;
        right: 2%;
    }
    .fv_item02{
        width: 100%;
        bottom: 2%;
    }
    .fv_item03{
        width: 14%;
        top: 14%;
        left: 43%;
    }
    .fv_item04.clone {
    bottom: 28%;
    }
    .fv_item05{
        width: 43%;
        top: 10%;
        left: 0%;
    }
    .fv_item07 {
        bottom: 32%;
        left: 20%;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #main_img {
        height: 90dvh !important;
    }
    .fv_bg{
        height: 80vh!important;
    }
    .fv_item02,.fv_item06, .fv_item07 {
        display: none;
    }
    .fv_item01_sp{
        width: 110%;
        bottom: -28%;
        right: -5%;
    }
    .fv_item02_sp{
        display: block;
        position: absolute;
        z-index: 10;
        width: 95%;
        bottom: 2%;
        right: 2%;
    }
    .fv_item03 {
        width: 14%;
        top: 28%;
        left: 43%;
    }
   @keyframes penguinDown {
    0% { transform: scale(0.4) translateY(10px); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: scale(3.0) translateY(50px); }
} 
    .fv_item05 {
        width: 54%;
        top: -4%;
        left: -4%;
    }
}

@media screen and (max-width: 380px){
    #main_img {
        height: 90dvh !important;
    }
    .fv_bg{
        height: 80vh!important;
    }
    .fv_item02,.fv_item06, .fv_item07 {
        display: none;
    }
    .fv_item01_sp{
        width: 110%;
        bottom: -36%;
        right: -5%;
    }
    .fv_item02_sp{
        display: block;
        position: absolute;
        z-index: 10;
        width: 95%;
        bottom: 2%;
        right: 2%;
    }
    .fv_item03 {
        width: 14%;
        top: 24%;
        left: 43%;
    }
   @keyframes penguinDown {
    0% { transform: scale(0.4) translateY(10px); opacity: 0; }
    40% { opacity: 1; }
    100% { transform: scale(3.0) translateY(50px); }
} 
    .fv_item05 {
        width: 48%;
        top: -9%;
        left: -4%;
    }
}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* intro */
.intro_item01 {
    position: absolute;
    top: 6%;
    left: 14%;
    width: 30%;
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-20vw);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.slide-in-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* コンテンツリンク */
#contents_links h3{
    color: var(--color3);
    font-weight: 800;
    opacity: 1!important;
    letter-spacing:3px!important;
}
#contents_links .box_wrap .box a h4 {
    position: relative;
    background-color: var(--color1);
    padding: 10px 25px 14px;
    border-radius: 50px;
    border: 2px solid;
}

/* ポイント */
#contents_wrap .bg_container {
    padding: 6vh 0;
}
.point_item01{
    position: absolute;
    bottom:0;
    z-index: 5;
    width: 100%;
}
.point_item02{
    position: absolute;
    bottom: 4%;
    left: 28%;
    z-index: 7;
    width: 17%;
}

/* タイトル */
.top_cms_title p{
    font-weight: 800;
    margin-bottom: 10px;
    text-align: center;
    opacity: 1!important;
}
.top_cms_title h3{
    transform: translateY(35px)!important;
    font-weight:800!important;
    letter-spacing: 3px!important;
    opacity: 1!important;
}

/* moreボタン */
.more_bt{
background-color: var(--color1);
    border-radius: 50px;
    border: solid 2px var(--black);
    padding-top:4px;
    padding-bottom:2px;
}

.more_bt a{
    color:var(--black);
    border: none;
}

/* フッター */
#footer .more_bt{
    background-color:var(--black);
}
#footer .more_bt a{
    color:white;
    border-bottom: solid 2px #fff;
}

footer .sns_links li {
    max-width: 40px;
    width: 40px;
    height: 40px;
}

#footer .info_txt  .width_300-max{
    max-width: 250px;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .intro_title{
        margin-top:-4%;
        margin-bottom:3%;
    }
    .intro_item01 {
        position: absolute;
        top: 17%;
        left: 46%;
        width: 30%;
    }
    #contents_links{
        margin-bottom: 30px!important;
    }
    .point_item01{
        display: none;
    }
    .point_item02 {
        position: relative;
        left: 6%;
        width: 24%;
    }
    #top_cms2{
        padding-bottom: 0px!important;
    }
#contents_wrap .bg_container {
    padding: 6vh 0 14vh 0;
}
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){
    #intro{
        padding-top: 50px;
    }
    .intro_item01 {
        top: 12%;
        left: 42%;
        width: 42%;
    }
    .top_cms_title h3 {
        transform: translateY(-30px) !important;
    }
    #contents1 .title_wrap, #contents2 .title_wrap, #contents3 .title_wrap{
        padding-top:0;
    }
    #contents_wrap .bg_container {
        padding: 6vh 0 10vh 0;
    }
    #footer .info_txt .width_300-max {
        max-width: 170px;
    }
}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* page9 */
#page9 h3{
    color:var(--color3)!important;
}
#page9 h3 span{
    border-color:var(--color3)!important;
}

/* page8 */
.contact_type1 .left, .contact_type1 .right {
    padding: 40px 27px 30px;
    background-color: #f7f7f7;
    margin: 1%;
    width: 48%!important;
    box-sizing: border-box;
}
.contact_type1 .cate_title {
    padding: 0;
    margin: 0;
    font-size: 19px;
    margin-bottom: 16px;
}
.contact_type1 .con_box1 a {
    display: block;
    max-width: 330px;
    margin: 0 auto 27px;
    transition: opacity .6s;
}
.contact_type1.con_box2 a{
    display: block;
    max-width: 450px;
    margin: 0 auto;
    transition: opacity .6s;
}
.contact_type1 .click_bt {
    cursor: pointer;
    padding: 10px 18px;
    background-color: #fff;
    box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
    border-radius: 5px;
    text-align: center;
}
.contact_type1 .txt_box{
     display: none
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
.contact_type1 .left, .contact_type1 .right {
    width: 80%!important;
}
}

/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.contact_type1 .left, .contact_type1 .right {
    padding: 30px 27px 30px;
    width: 100%!important;
    margin-bottom: 20px;
}
.contact_type1 .cate_title {
    font-size: 17px;
}
}

/* page10 */
#page10 .d_flex .border_color1{
    border-color:var(--color3);
}
#page10 .d_flex a:hover{
    color:var(--color3);
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}