@charset "UTF-8";

/* =====================================================================
 *  normalize.css v7.0.0
 *  MIT License | github.com/necolas/normalize.css
 * ===================================================================== */
html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0;}
article,aside,footer,header,nav,section {  display: block;}
h1 {  font-size: 2em;  margin: 0.67em 0;}
main {  display: block;}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
b,strong {
  font-weight: inherit;
  font-weight: bolder;
}
img {  border-style: none;}
svg:not(:root) {  overflow: hidden;}
[hidden] {  display: none;}

/* =====================================================================
 *    ＸＹＺ
 * ===================================================================== */

html{
	overflow-y: scroll;
}

body{
	font-family: "メイリオ", Meiryo, Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	letter-spacing: 0.02em;
}

a{
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	text-decoration: none;
}

a:hover,
a:active,
a:focus{
	text-decoration: underline;
}

h1{
	font-size: 2.5em;
	font-weight: bold;
	text-align: center;
}

h3{
	margin: 60px 0 30px;
	padding: 14px 0px;
	font-size: 1.85em;
	font-weight: normal;
	margin-top: 0;
}

h1 a:hover, h2 a:hover, h3 a:hover {
	text-decoration: underline;
}

img{
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
	background   : #ffffff;
}

* {
	word-wrap: break-word;
}

p{
	margin: 0 0 1em;
}

li {
	list-style:none;
}


.midashi{
	margin-right: auto;
	margin-left: auto;
}

.wrap{
	width:100%;
	overflow: hidden;
}

.al-l{
	text-align: left;
}

.al-r{
	text-align: right;
}

.al-c{
	text-align: center;
}

.item {
	overflow: auto;
	overflow-x:hidden;
	margin: 0 0 1.5em;
	padding: 1.5em 1em 1em 1.5em;
}

.kakolink_item {
	background: #ffffff;
	padding: 1em;
}

.kakolink_item ul{
	padding: 0;
}



/* --------------------------------
 *  Framework
 * -------------------------------- */
#menu{
	height: 20px;
	position: fixed;
	z-index: 10;
	width: 100vw;
	padding: 10px 30px;
	font-size: 20px;
	top: 0;
	text-align:left;
}

#header {
	position: fixd;
	z-index: 8;
	top:0;
	height: 100vh;
	width: 100vw;
}

#main {
	position: relative;
	z-index: 9;
	top:100vh;
	width: 90vw;
	max-width: 1200px;
	margin: 0 auto 120vh;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: 1.8;
	padding-top:60px;
}

#footer{
	height: 20px;
	position: fixed;
	z-index: 10;
	width: 100vw;
	padding: 10px 0px;
	font-size: 14px;
	bottom:0;
	text-align:center;
}


/* --------------------------------
 *  Site Title
 * -------------------------------- */
#header .txt {
	position: fixed;
	font-weight: bold;
  width:100%;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#header h1 {
	background: rgba(0,0,0,0.5);
	position: relative;
	border-top: 1px #ffffff solid;
	border-bottom: 2px #ffffff solid;
	padding: 15vh 0;
}

#header h2 {
	text-align: center;
}

#to_list {
	text-align: center;
}

#to_list a, #to_list a:hover{
	color: #ffffff;
	font-size: 100px;
	opacity: 0.6;
}

#to_list a:hover{
	opacity: 1;
}


/* --------------------------------
 *  Header
 * -------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Bitter);

.holder,.first,.second,.third {
  height: 100%;
  width: 100vw;
	position: fixed;
  z-index: 1;
	top: 0 ;
}
.first,.second,.third {
  position: absolute;
}
.second,.third {
  opacity: 0;
}

.first {
  animation: first 8s infinite;
  z-index: 10;
}
@keyframes first {
    0% {opacity: 0.5;}
   10% {opacity: 0.4;}
   20% {opacity: 0.3;}
   30% {opacity: 0.2;}
   40% {opacity: 0.1;}
   50% {opacity: 0.0;}
   60% {opacity: 0.1;}
   70% {opacity: 0.2;}
   80% {opacity: 0.3;}
   90% {opacity: 0.4;}
  100% {opacity: 0.5;}
}

.second {
  animation: second 8s infinite;
  animation-delay: 1.5s;
  z-index: 20;
}
@keyframes second {
    0% {opacity: 0.0;}
   10% {opacity: 0.1;}
   20% {opacity: 0.2;}
   30% {opacity: 0.3;}
   40% {opacity: 0.4;}
   50% {opacity: 0.5;}
   60% {opacity: 0.4;}
   70% {opacity: 0.3;}
   80% {opacity: 0.2;}
   90% {opacity: 0.1;}
  100% {opacity: 0.0;}
}

.third {
  animation: third 8s infinite;
  animation-delay: 2s;
  z-index: 30;
}
@keyframes third {
    0% {opacity: 0.0;}
   10% {opacity: 0.1;}
   20% {opacity: 0.2;}
   30% {opacity: 0.3;}
   40% {opacity: 0.4;}
   50% {opacity: 0.5;}
   60% {opacity: 0.4;}
   70% {opacity: 0.3;}
   80% {opacity: 0.2;}
   90% {opacity: 0.1;}
  100% {opacity: 0.0;}
}

.txt {
  margin-top: calc(5vh);
  position: absolute;
  width: 100%;
  z-index: 1000;
}

.holder:before {
	content:"";
	color: #ffffff;
	height: 100%;
	width: 100vw;
	z-index: -1;
	top     : 0 ;
	position: fixed;
	opacity: 0.5;
	padding: 0.3vh 0.3vw;
}

.holder:after {
	content:"";
	background: url("https://thumbnail.image.rakuten.co.jp/@0_mall/laboratory-berberjinr/cabinet/compass1620629393.jpg?_ex=700x700");
	height: 100%;
	width: 100vw;
	z-index: -2;
	background-size: cover;
	top     : 0       ;
	position: fixed;
}

/* --------------------------------
 * Item List , Item Info
 * -------------------------------- */
.item {
	display: flex;
	position: relative;
	overflow: hidden;
}

.item_page .item {
	flex-direction: column;
}

.item_image {
	min-height: 200px;
}

.item_image img {
	width: 200px;
}

.item_name {
	padding-left: 1em;
}

#ul_image {
	display: flex;
	justify-content:space-between;
	overflow:hidden;
	margin: 0 0 2em;
	padding: 10px;
	background: #000000;
}

#ul_image img {
	width: 96%;
}

#main h3 {
	background: #000000;
	padding: 1em;
}

.item_info {
	background: #ffffff;
	color: #000000;
	padding: 1em;
	position: relative;
}

#ul_info {
	font-size: 1.3em;
}




/* --------------------------------
 *  購入＆詳しくボタン
 * -------------------------------- */
.button_block {
	position: absolute;
	bottom: 1em;
	right: 1em;
}

.buy-button {
	transition: .6s all;
	display : block;
	padding : 10px 20px 6px;
	cursor : pointer;
	width : 200px;
	text-decoration : none !important;
	font-size : 1.5em;
	margin : 0 auto;
}



/* --------------------------------
 *  ページナビ
 * -------------------------------- */
#page-navi {
	margin: 50px 0 130px;
}

#page-navi a , #page-navi span{
	display : inline-block;
	padding : 10px;
	text-decoration : none !important;
	font-size : 1.5em;
	margin : 0 auto;
	border-radius: 8px;
}
#page-navi a:hover {
	opacity: 0.5;
	text-decoration : none !important;
}
#page-navi a:visited{
	text-decoration : none !important;
}
#page-navi .gray{
	opacity: 0.5;
}
#page-navi a {
	cursor : pointer;
}


/* --------------------------------
 *  画像ゆっくり半透明
 * -------------------------------- */
.fade{  
    -webkit-transition: 0.5s ease-in-out;  
       -moz-transition: 0.5s ease-in-out;  
         -o-transition: 0.5s ease-in-out;  
            transition: 0.5s ease-in-out;  
}

.fade:hover{
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.frame{
	position: relative;
	display: inline-block;
}

.frame:after,
.frame:before{
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* --------------------------------
 *  フェードアウトで画面遷移
 * -------------------------------- */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#000000;
  z-index: 99999999;
  pointer-events: none;  /* 他の要素にアクセス可能にするためにポインターイベントは無効に */
  opacity: 0;  /* 初期値 : 透過状態 */
  -webkit-transition: opacity 1.2s ease;
  transition: opacity 1.2 ease;
}

body.fadeout::after {
  opacity: 1;
}

body.fadeout article{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}



/* --------------------------------
 *  ヘッダのオーバーレイ
 * -------------------------------- */
.holder:before {
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKV2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wMy0xMFQxMzo0MDo1NiswOTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDMtMTZUMTA6MjY6NDUrMDk6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDMtMTZUMTA6MjY6NDUrMDk6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNlMjc5ZWQ0LTRkZDgtNzE0OC04M2JjLWZkOGY1ZGUwNWQ4OCIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjA5OTAzZTI0LWYwMzEtMzg0Yi1hMjUzLTQ3NDU3OTVlNzk1ZCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOmY5NWU5NDNhLTE5ZjktODY0My04ZWZmLTYwODhiODkyMjYwNSIgdGlmZjpPcmllbnRhdGlvbj0iMSIgdGlmZjpYUmVzb2x1dGlvbj0iNzIwMDAwLzEwMDAwIiB0aWZmOllSZXNvbHV0aW9uPSI3MjAwMDAvMTAwMDAiIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiIGV4aWY6Q29sb3JTcGFjZT0iNjU1MzUiIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSI4IiBleGlmOlBpeGVsWURpbWVuc2lvbj0iOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6Zjk1ZTk0M2EtMTlmOS04NjQzLThlZmYtNjA4OGI4OTIyNjA1IiBzdEV2dDp3aGVuPSIyMDE4LTAzLTEwVDEzOjQwOjU2KzA5OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpkN2U4ZjYwNy1hZTE0LTgxNGItOGY3Ni1jNTA1ZTQzNzI3NTMiIHN0RXZ0OndoZW49IjIwMTgtMDMtMTBUMTQ6MjA6MDMrMDk6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmVlMTdmOTk5LTIwOTAtYmE0MS05ZjEwLTVjODkzNGZiYTRiMCIgc3RFdnQ6d2hlbj0iMjAxOC0wMy0xNlQxMDoyNjo0NSswOTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6M2UyNzllZDQtNGRkOC03MTQ4LTgzYmMtZmQ4ZjVkZTA1ZDg4IiBzdEV2dDp3aGVuPSIyMDE4LTAzLTE2VDEwOjI2OjQ1KzA5OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDplZTE3Zjk5OS0yMDkwLWJhNDEtOWYxMC01Yzg5MzRmYmE0YjAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Zjk1ZTk0M2EtMTlmOS04NjQzLThlZmYtNjA4OGI4OTIyNjA1IiBzdFJlZjpvcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6Zjk1ZTk0M2EtMTlmOS04NjQzLThlZmYtNjA4OGI4OTIyNjA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+gLsoBQAAABZJREFUCJljdHBwcHBwYGhoaPj//z8AHVYF/zHzPd8AAAAASUVORK5CYII=");
}


/* --------------------------------
 *  配色設定
 * -------------------------------- */

.first {background: linear-gradient(#00a1f0, #aab7f8);}
.second{background: linear-gradient(#44D37E, #6EC4FF);}
.third {background: linear-gradient(#2b381d, #d5d52b);}

.item-1, .item-7 , .item-13, .item-19, .item-25 { background-color: #c7e2d5 ; color: #000000;}
.item-2, .item-8 , .item-14, .item-20, .item-26 { background-color: #bfd5aa ; color: #000000;}
.item-3, .item-9 , .item-15, .item-21, .item-27 { background-color: #e2e2c7 ; color: #000000;}
.item-4, .item-10, .item-16, .item-22, .item-28 { background-color: #e2d5c7; color: #000000;}
.item-5, .item-11, .item-17, .item-23, .item-29 { background-color: #d5aaaa; color: #000000;}
.item-6, .item-12, .item-18, .item-24, .item-30 { background-color: #f1e2ea; color: #000000;}

a                       {color: #2186bf;}
a:hover,a:active,a:focus{color: #ff6600;}

h1, h1 a, h2, h2 a, h3, h3 a,h1 a:hover, h2 a:hover, h3 a:hover {color: #ffffff;}

#menu  , #menu   a, #menu   a:hover, #footer, #footer a, #footer a:hover{
	background-color: #000000;
	color           : #ffffff;
}

.buy-button         {background-color: #727238; color: #FFFFFF;}
.buy-button:hover   {background      : #aaaa55; color: #727238;}
.button_block       {border-bottom   : #55552b 6px solid;}
.button_block:hover {border-bottom   : #55552b 4px solid;}

#page-navi a, #page-navi a:hover,#page-navi a:visited, #page-navi span{
	color           : #FFFFFF;
	background      : #727238;
	border: 4px solid #FFFFFF;
}
#page-navi .gray{border: 4px solid #727238;}



/* --------------------------------
 *  スマホ
 * -------------------------------- */
@media screen and (max-width: 800px){
	.buy-button {width: 80%;}
	#header h1 {	padding: 5vh 0;}
	.item_image img {	width: 98%;}
	.button_block {
		position: static;
		bottom: "";
		right: "";
		border-bottom: none;
		margin-top: 10px
	}
	.item {	flex-direction: column;}
	#main h3 {	font-size: 1.2em;}
	#ul_image li:not(:first-child){display:none;}
}