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

body { background: url(../img/common/bg.png);}

.modal{
    display: none;
    position:fixed;
    justify-content: center;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    z-index:9999;
}
.modal #iframes{
    position:fixed;
    opacity:1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width:300px;
    height;300px;
    border:none;
    overflow: hidden;
    z-index:99999;
}
.modal .close{
    position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width:60px;
    z-index:999999;
    margin-top:-300px;
    margin-left:380px;
}
.modal .close img{
    width:100%;
}

.modal .text{
    position:fixed;
	top: 30%;
    width:800px;
    z-index:999999;
    font-size:15px;
    font-weight:bold;
    color:#fff;
}
.modal .title{
    font-size:25px;
}


/*ページ設定
----------------------------------------------*/
#page { width: 100%;}
#pageIn { display: flex; width:1366px;margin:auto;}
.gototop{display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;}
/*メニュー
----------------------------------------------*/
nav { width: 260px; height: 70vh; background: url(../img/common/bg.png); }
h1 { width: 691px; height: 157px; background: url(../img/common/logo_s.png) no-repeat; background-size:100%; 
position: relative; z-index: 999; margin-top:20px;}
.s_logo{position: relative;left:1250px;top:-150px;z-index: 999;}
.sp_logo{display:none;}
h1 a { display: block; width: 100%; height: 100px; text-indent: -9999px; }
nav ul { width: 100%; margin: 0 auto 150px; font-size: 30px; letter-spacing: 2px; line-height: 1.5; color: #808080;text-align:right;}
nav ul li:first-letter { font-size: 33px;}
nav ul li:first-child { margin-top: 250px; }
nav p { text-align: center; font-size: 10px; }

/*トップ画像
----------------------------------------------*/
#mainImg li { width: 100%; max-width: 100%; height: 860px; position: relative; font-family:fieldwork, sans-serif; text-align: left;font-style: normal;font-weight: 100; }

#mainA { background: #000 url(../img/index/main_limit.jpg) 100% 0 no-repeat; }
#mainA p { width: 100%; height: 860px; background: url(../img/index/name_bh.svg); background-repeat: no-repeat; background-position: left 0 top 640px; background-size: 100%; text-indent: -9999px; }
#ugajin1 { background: #000 url(../img/index/nayuta.jpg) 100% 0 no-repeat; }
#ugajin2 { background: #000 url(../img/index/t_nayuta.jpg) 100% 0 no-repeat; }
#ugajin1 p , #ugajin2 p { width: 100%; height: 860px; background: url(../img/index/name_nayuta.svg); background-repeat: no-repeat; background-position: left 0 top 480px; background-size: contain; text-indent: -9999px; }
#kisaki1 { background: #000 url(../img/index/haruma.jpg) 100% 0 no-repeat; }
#kisaki2 { background: #000 url(../img/index/t_haruma.jpg) 100% 0 no-repeat; }
#kisaki1 p , #kisaki2 p { width: 100%; height: 860px; background: url(../img/index/name_haruma.svg); background-repeat: no-repeat; background-position: left 0 top 475px; background-size: contain; text-indent: -9999px; }
#shiiba1 { background: #000 url(../img/index/noa.jpg) 100% 0 no-repeat; }
#shiiba2 { background: #000 url(../img/index/t_noa.jpg) 100% 0 no-repeat; }
#shiiba1 p , #shiiba2 p { width: 100%; height: 860px; background: url(../img/index/name_noa.svg); background-repeat: no-repeat; background-position: left 0 top 480px; background-size: contain; text-indent: -9999px; }
#kuze1 { background: #000 url(../img/index/sera.jpg) 100% 0 no-repeat; }
#kuze2 { background: #000 url(../img/index/t_sera.jpg) 100% 0 no-repeat; }
#kuze1 p , #kuze2 p { width: 100%; height: 860px; background: url(../img/index/name_sera.svg); background-repeat: no-repeat; background-position: left 0 top 480px; background-size: contain; text-indent: -9999px; }
#kasumi1 { background: #000 url(../img/index/yue.jpg) 100% 0 no-repeat; }
#kasumi2 { background: #000 url(../img/index/t_yue.jpg) 100% 0 no-repeat; }
#kasumi1 p , #kasumi2 p { width: 100%; height: 860px; background: url(../img/index/name_yue.svg); background-repeat: no-repeat; background-position: left 0 top 480px; background-size: contain; text-indent: -9999px; }





.bx-wrapper { width: 100%; max-width: 1200px; }

/*コンテンツ
----------------------------------------------*/
#contents{display:flex;color:#fff;width:1366px;margin:20px auto;}
#contents .l_box{width:55%;padding:5px;}
#contents .r_box{width:45%;padding:5px;}
#contents .inbox{border:solid 1px #0030FF;padding:5px;text-align:left;}
#contents .inbox .button_area{display:flex;padding:5px;margin-top:20px;}
#contents .inbox .button_area a{width:50%;background:#0030FF;font-size:20px;padding:10px;margin:5px;text-align:center;}
#contents .inbox .button_area a:hover{background:#fff;}
#contents .product_area{display:flex;padding:5px;margin-top:20px;}
#contents .product_area .package{padding:5px;width:30%;}
#contents .product_area .package img{width:100%;}
#contents .product_area .list{padding:5px;width:63%;}
#contents .product_area .list li{display:flex;background:#333;height:20px;padding:15px;width:100%}
#contents .product_area .list .pleft{width:30%;}
#contents .product_area .list .pright{width:70%;}
#contents .product_area .list .ret{margin-top:-10px;}
#contents .product_area .list li:nth-child(even){background:#555;}

@media screen and (min-width: 721px) {
	#contents .product_area .list li.price_row{height:auto;align-items:center;}
}

#contents .inbox .news{padding:5px;margin-top:25px;height:200px;font-size:12px;}
#contents .inbox_s .sns{background:#0030FF;height:330px;margin-top:10px;padding:5px;}
.twitter-timeline{margin:auto;}
#contents .inbox_s .sns .title{text-align:left;margin-bottom:20px;}

/*動画
----------------------------------------------*/
#youtube {width:1345px;margin:20px auto;border:solid 1px #0030FF;padding:5px;text-align:left;}

/*バナー
----------------------------------------------*/
#banner {width:900px;display:flex;margin:20px auto;}
#banner .box{width:50%;}
#banner .box li{margin:30px auto;width:80%;}
#banner .box li img{width:100%;}

/*更新履歴
----------------------------------------------*/
#info { width: 100%; background: url(../img/index/bg_info.png); position: absolute; bottom: 0; z-index: 9999; }
#info dl { height: 80px; text-align: left; display: flex; align-items: center; color: #FFF; }
#info dt { font-family: "Roboto", sans-serif; font-size: 20px; width: 200px; text-align: center; border-right: 1px solid #FFF; }
#info dd { padding-left: 15px; }


#contents .inbox .pcb{display:flex}
#contents .inbox .spb{display:none}

.brsp{display:none;}

/*
カウントダウン
*/
#jp_container_1 {  position: absolute; z-index: 99998; right: 5%; bottom: 150px; width: 300px; height: 300px; }

/*=============================
#btn08
=============================*/
#btn08{
	position:fixed;
	top:10px;
	right:10px;
	z-index:99999;
}
#btn08.active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(-315deg);
  transform: translateY(20px) rotate(-315deg);
}
#btn08.active span:nth-of-type(2) {
  opacity: 0;
}
#btn08.active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) rotate(315deg);
  transform: translateY(-20px) rotate(315deg);
}
/*=============================
.btn-trigger
=============================*/

.btn-trigger {
  position: relative;
  width: 50px;
  height: 44px;
  cursor: pointer;
  transform: scale(0.7);
}
.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #0030FF;
  border-radius: 4px;
}
.btn-trigger, .btn-trigger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
  top: 0;
}
.btn-trigger span:nth-of-type(2) {
  top: 20px;
}
.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}



/*
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
対応頑張る！！＼(^o^)／
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/

@media screen and (max-width: 720px) {
	#page { height: auto; overflow-x:hidden;}
	#pageIn { display: block; width:100%;margin:auto;}
	.modal{
        display: none;
        position:fixed;
        justify-content: center;
        top:-100px;
        width:100%;
        height:120%;
        background:rgba(0,0,0,0.7);
        z-index:9999;
    }
	
	.modal #iframes{
        position:fixed;
        opacity:1;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
        width:100%;
        height:100vw;
        border:none;
        overflow: hidden;
        margin:auto;
    }
    .modal #iframes img{
        width:100%;
    }
    .modal .close{
        position:fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
        width:30px;
        margin-top:-70vw;
        margin-left:40vw;
    }
    .modal .close img{
        width:100%;
    }
    .modal .text{
        position:fixed;
    	top: 45vw;
        width:90%;
        margin:auto;
        z-index:999999;
        font-size:2vw;
        font-weight:bold;
        color:#fff;
    }
    .modal .title{
        font-size:3vw;
    }


	h1 { width: 70%; background-size:100%;height: 80px; position: relative;margin:auto; }
	.s_logo{display:none;}
	.sp_logo{display:block;position:relative;left:87vw;top:-1vw;width:12vw;z-index:999;margin-bottom:-15vw;}
	.sp_logo img{width:100%;}
	nav { width: 100%; height: auto; padding-bottom: 5px; }
	nav ul { position:fixed;top:0;width: 100%; margin: 0 auto; font-size: 12px; display: flex; flex-wrap: wrap; justify-content: left; z-index:9999;background:rgba(0,0,0,0.8);padding-top:50px;}
	nav ul li { padding: 5px 10px; }
	nav ul li:first-letter { font-size: 18px; }
	nav ul li:first-child { margin-top: 0px; }
	nav ul li img { width: 20px; }
	nav p { display: none; }
	
	#mainImg li { height: auto; }
	
	#mainA , #ugajin1 , #ugajin2 , #kisaki1, #kisaki2 , #shiiba1 , #shiiba2 , #kuze1 , #kuze2 ,#kasumi1 , #kasumi2{ background-size: cover; }
	#mainA p , #ugajin1 p , #ugajin2 p , #kisaki1 p , #kisaki2 p , #shiiba1 p , #shiiba2 p , #kuze1 p , #kuze2 p, #kasumi1 p , #kasumi2 p { height: 400px; background-position: 0 100%; }
	
	#info { position: relative; }
	
	#jp_container_1 { position: static; margin: 15px auto 0; }
	#info dl { height: 80px; text-align: left; display: block; align-items: center; color: #FFF;position:relative;top:0px;font-size:10px; }
	
	/*コンテンツ
	----------------------------------------------*/
	#contents{display:block;color:#fff;width:100%;margin:20px auto;}
	#contents .l_box{width:98%;padding:5px;}
	#contents .r_box{width:98%;padding:5px;}
	#contents .inbox{border:solid 1px #0030FF;padding:5px;text-align:left;}
	#contents .inbox .button_area{display: inline-block;}
	#contents .inbox .button_area a{display: inline-block;width:93%;background:#0030FF;font-size:20px;}
	#contents .inbox .button_area a:hover{background:#fff;}
	#contents .product_area{display:block;padding:5px;margin-top:20px;}
	#contents .product_area .package{padding:5px;width:50%;margin:auto;}
	#contents .product_area .package img{width:100%;}
	#contents .product_area .list .sret{margin-top:-10px;}
	#contents .product_area .list{padding:5px;width:90%;}
	#contents .product_area .list li{background:#333;height:20px;padding:15px;width:100%}
	#contents .product_area .list li.price_row{height:auto;align-items:center;}
	#contents .product_area .list li:nth-child(even){background:#555;}
	
	#contents .inbox .news{padding:5px;margin-top:25px;height:200px;font-size:12px;}
	#contents .inbox_s .sns{background:#0030FF;height:340px;margin-top:10px;}
	
	/*動画
	----------------------------------------------*/
	#youtube {width:94%;margin:20px auto;border:solid 1px #0030FF;padding:5px;text-align:center;}
	
	/*バナー
	----------------------------------------------*/
	#banner {width:94%;display:block;margin:10px auto;}
	#banner .box{width:70%;margin:auto;}
	#banner .box li{margin:30px auto;width:90%;}
	#banner .box li img{width:100%;}
	
	#contents .inbox .pcb{display:none}
	#contents .inbox .spb{display:block}
	#contents .inbox img{width:70%;}
	#contents .inbox_s .sns img{width:20%;}
	.brsp{display:block;}
	.gototop{display:none;position:fixed;bottom:20px;right:20px;cursor:pointer;width:50px;}
	.gototop img(width:100%;)

}
@media screen and (max-width: 380px) {
    .modal .text{
        position:fixed;
    	top: 30vw;
        width:90%;
        margin:auto;
        z-index:999999;
        font-size:2vw;
        font-weight:bold;
        color:#fff;
    }
    .modal .title{
        font-size:3vw;
    }
}