@charset "utf-8";

/*=========== 12/25 G1 で制作した　=========================================*/
/*============レスポンシブ 1360px　を　1560px に変更した　===================*/

/*===========================================================*/
  /*レスポンシブ
/*===========================================================*/
@media screen and (max-width:1560px)
{
body{background: black}
main{width: 350px;}
/*====　　イメージ　　=====================================*/
.img_happy_a,.img_happy_b{width: 350px;}
.img_mikan{width: 40px;}
.happy_a_fluts{top:110px;left: 25px;width: 300px;}
.happy_b_mikan{top:240px;left: 229px;width: 40px;}

/*====　　　●   はつはる「表」　みけねこ「裏」===========*/
/* ----- はつはる「表」● 大きさ -----*/
.maru_omote,.maru_ura{top:400px;left: 38px;width: 38px;height: 38px;}
.maru_omote h3,.maru_ura h3{font-size: 20px;margin-top: 2px;}
/*====　　下の文字　「裏」「表」　　=============================================*/
/*====　　ページ移動　　indexに戻る　　================*/
.rink{position: absolute;top:450px;left: 75px;}
.in_img{width: 38px;margin-top: -9px;}/* ← 白の矢印*/
.modoru_img{width: 38px;height: 38px;margin-left: 44px;}

.moji_omote h3,.moji_ura h3{position: absolute;top:450px;left: 38px;
width: 38px;height: 38px;font-size: 20px;padding-top: 2px;}
/*========= 「裏」 の内容 ===============*/
#data-nav{top:-150%;left:0;width:350px;height: 350px;/*ナビの高さ*/}
#data-nav.panelactive #data-nav-list{width: 350px;}
}

/*===========================================================*/
@media screen and (max-width:400px)
{
body{background: black}
main{width: 350px;}
/*====　　イメージ　　=========================================*/
.img_happy_a,.img_happy_b{width: 350px;}
.img_mikan{width: 40px;}
.happy_a_fluts{top:110px;left: 25px;width: 300px;}
.happy_b_mikan{top:240px;left: 229px;width: 40px;}

/*====　　ボタン   はつはる「▼」　みけねこ「▼」」===============*/
/* ----- はつはる「▼」ボタン 大きさ -----*/
.maru_omote,.maru_ura{top:400px;left: 38px;width: 38px;height: 38px;}
.maru_omote h3,.maru_ura h3{font-size: 20px;margin-top: 2px;}
/*====　　ページ移動　　indexに戻る　　================*/
.rink{position: absolute;top:450px;left: 75px;}
.in_img{width: 38px;margin-top: -9px;}/* ← 白の矢印*/
.modoru_img{width: 38px;height: 38px;margin-left: 43px;}

/*========= 「裏」 の内容 ======================================*/
#data-nav{top:-150%;left:0;width:350px;height: 350px;/*ナビの高さ*/}
#data-nav.panelactive #data-nav-list{
        position: fixed;
        z-index: 999;
        width: 350px;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;}
}
/*===========================================================*/
@media screen and (max-width:321px)
{
body{background: red}
main{width: 300px;}
/*====　　イメージ　　=========================================*/
.img_happy_a,.img_happy_b{width: 300px;}
.img_mikan{width: 20px;}
.happy_a_fluts{top:105px;left: 24px;width: 250px;}
.happy_b_mikan{top:195px;left: 195px;width: 40px;}

.maru_omote,.maru_ura{top:340px;left: 38px;width: 30px;height: 30px;}
.maru_omote h3,.maru_ura h3{font-size: 18px;margin-top: 2px;}

/*====　　ページ移動　　indexに戻る　　================*/
.rink{position: absolute;top:388px;left: 65px;}
.in_img{width: 30px;margin-top: -9px;}/* ← 白の矢印*/
.modoru_img{width: 30px;height: 30px;margin-left: 39px;}

.moji_omote h3,.moji_ura h3{position: absolute;top:388px;left: 38px;
width: 30px;height: 30px;font-size: 18px;padding-top: 2px;}

/*========= 「裏」 の内容 ======================================*/
#data-nav{top:-150%;left:0;width:300px;height: 305px;/*ナビの高さ*/}
#data-nav.panelactive #data-nav-list{
        position: fixed;
        z-index: 999;
        width: 300px;
        height: 100vh;/*表示する高さ*/
        overflow: auto;
        -webkit-overflow-scrolling: touch;}
}