@charset "utf-8";

/* ベース */
html,body{
font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HiraKakuPro-W3","ＭＳ Ｐゴシック","MS PGothic",Arial, Helvetica,sans-serif;
line-height:1.5;
letter-spacing:1.5px;
height: 100%;
background:rgba(0,0,0,1.0);
}

body{
background:rgba(0,0,0,1.0);
margin:0;
width:100%;
text-align:center;   /* 下記のautoに未対応用のセンタリング */
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* 各スクロール */

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background:rgba(0,0,0,1.0);

}


/* 全体 */
.box{
    height: calc(100% - 62px);/*footer*/
	width:auto;
	aspect-ratio: 1920/1319;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	background:rgba(255,255,255,1.0);
}


/*  */
.box_main{
	background:rgba(0,0,0,1.0);
	background-size: 100% auto;
}

.box_text{
	background:rgba(0,0,0,1.0);
	background-size: 100% auto;
}


a:hover{
filter:alpha(opacity=70);
-moz-opacity:0.5;
opacity:0.5;
}

li{
  list-style: none;
}

a.none{
  pointer-events: none;
  cursor: default;
  opacity: 30%;
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* ページ全体中央 */
.index_all{
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	background:rgba(0,0,0,1.0);
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* メインビジュアル */

.main{
	width:100%;
	height:100%;
	margin-right:auto;
	margin-left:auto;
	background-size: 100% auto;
	background:rgba(0,0,0,1.0);
	z-index:0;
}

.mainbg{
	width:100%;
	height:100%;
	margin-top:0%;
	padding-top:0%;
	padding-bottom:0%;
	background-size: 100% auto;
	z-index:50;
}


.text01{
	margin-bottom:0%;
}

.text02{
	margin-bottom:0%;
}

.text03{
	margin-bottom:0%;
}

.text04{
	margin-bottom:20%;
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* 画像表示 */

/* 大きな画像表示 */
.main_image_area{
	width:100%;
	margin-top:2%;
	background:rgba(0,255,0,0.0);
	padding-top:55%;
	padding-bottom:0%;
}

.main_image{
	width:39%;
	height:44%;
	margin-top:-54%;
	margin-left:4%;
	margin-right:auto;
	background:rgba(0,0,0,1.0);
	border: double 8px #00655d;
	list-style: none;
}





#gallerythumb{
	margin-top:0%;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	background:rgba(0,0,255,0.0);
	padding-top:1%;
	z-index:1000;
}

#gallerythumb li{
	margin-right:auto;
	margin-left:auto;
	width: calc(100%/3);/*←画像を横に*つ並べる場合*/
	padding:10px 10px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	background:rgba(0,255,0,0.0);
}



.cgthumb{
	display: flex;
	flex-wrap:wrap;
	background:rgba(255,0,0,0.0);
}


.cgthumb li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	box-shadow: 0 0 0 4px #00655d, 0 0 0 5px #fff, 0 0 0 0px #fff;
}

.thsize {
	width:100%;
	background:rgba(255,0,0,0.0);
	padding-top:3%;
	padding-bottom:3%;
}

    .display-none{
	 display:none;
	}

.graphic{
	width:100%;
	height:100%;
	margin:0 auto;
	text-align:center;
	background:rgba(0,255,0,0.0);
	padding-top:5%;
	padding-bottom:5%;
}


.viewer01{
	margin-top:3%;
	margin-right:auto;
	margin-left:-80%;
	
}


.viewer01 img{
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .5);
}


.cgviewe:hover{
filter:alpha(opacity=70);
-moz-opacity:0.5;
opacity:0.5;
}



.viewer02:hover{
filter:alpha(opacity=70);
-moz-opacity:0.5;
opacity:0.5;
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* ロゴ・背景・WaffleSTOREバナー */

.logo_info{
	width:100%;
	margin-right:auto;
	margin-left:auto;
	z-index: 10;	
	position:relative;
}

.logo_banner{
	width:100%;
	margin-top:-18%;
	margin-left:25%;
	margin-right:auto;
	position:absolute;
}



.bg_info{
	width:100%;
	margin-right:auto;
	margin-left:auto;
	z-index: 10;	
	position:relative;
}

.bg_banner{
	width:100%;
	margin-top:-25%;
	margin-left:-25%;
	margin-right:auto;
	position:absolute;
}


.spec_info{
	width:100%;
	margin-right:auto;
	margin-left:auto;
	z-index: 10;	
	position:relative;
}

.wafflestore_banner{
	width:100%;
	margin-top:-65%;
	margin-left:30%;
	margin-right:auto;
	position:absolute;
}


/*////////////////////////////////////////////////////////////////////////////////////////*/
/* バナー */
.banner_area{
	margin-top:0%;
	margin-left:auto;
	margin-right:auto;
	width:90%;
	background:rgba(0,0,255,0.0);
	padding-top:1%;
	padding-bottom:20%;
	}

.bnimg{
	display: flex;
	flex-wrap:wrap;
	background:rgba(0,255,0,0.0);
}
.bnimg li {
	margin-right:auto;
	margin-left:auto;
	width: calc(100%/3);/*←画像を横に*つ並べる場合*/
	padding:8px 8px;/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing:border-box;
	background:rgba(0,255,0,0.0);
	overflow: hidden;
	cursor: pointer;
}

.bnimg li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}


/*////////////////////////////////////////////////////////////////////////////////////////*/

#footer{
height:62px;
width:100%;
padding-bottom:10px;
padding-top:20px;
background:rgba(255,255,255,1.0);
z-index:1000;
position: fixed;
bottom: 0; /*下に固定*/
}

#footer p{
color:#000000;
font-size:10px;
text-align:center;
letter-spacing:4px;
margin-bottom:10px;
}

#footer ul{
font-size:10px;
text-align:center;
letter-spacing:-.40em;
margin-bottom:15px;
}

#footer ul li{
display:inline-block;
vertical-align:middle;
letter-spacing:normal;
}

#footer ul li a{
display:block;
letter-spacing:4px;
width:100px;
padding-top:5px;
padding-bottom:5px;
border-right:1px dashed rgba(0,0,0,0.6);
}

#footer li a:hover{
background:rgba(0,0,0,0.1);
}

#footer a:link{color:#FFFFFF;}
#footer a:visited{color:#FFFFFF;}
#footer a:hover{color:#FFF;}

#footer p a:hover{color:#FFF;}

/*////////////////////////////////////////////////////////////////////////////////////////*/


.page-back {
 position: fixed;
 bottom: 5px;
 right: 50px;
 z-index:2000;
}