/*@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 100;
  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-ExtraLight.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 200;
  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 400;
  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Regular.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 500;
  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Medium.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 600;
  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-SemiBold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Serif Japanese';
   font-style: normal;
   font-weight: 700;
  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Bold.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Serif Japanese';
  font-style: normal;
  font-weight: 900;
  src: url(../../fonts/NotoSerifCJKjp/NotoSerifCJKjp-Black.otf) format('opentype');
 }
*/

div#content {
  background-color: #FFFEFD;
  text-align: center;
}

div#name_container {
  position: absolute;
  font-family: 'Noto Serif Japanese';

  z-index: 10;
  text-shadow: 0 0 10px #000,0 0 15px #000;
  opacity: 0;
}

div.t_name {
  font-weight: bold;
}

div.t_name_en {
  font-size: 100%;
  font-family: 'Lato', sans-serif;
}

.img {
  position: relative;
  height: 100%;
  min-height: 300px;
  background-repeat: no-repeat;
  background-position: center 0%;
  background-attachment: fixed;
  background-size: cover;
  /*border-bottom: 3px solid white;*/
  text-align: center;
  /*padding: 1% 4% 3% 4%;*/
  padding: 0;
  /*font-family: 'Open Sans', sans-serif;*/
  font-family: "Noto Sans Japanese";
  font-size: 18px;
  font-weight: bold;
  /*letter-spacing: -2px;*/
  color: rgba(255,255,255,0.7);
  text-stroke: 2px rgba(0,0,0,0.7);
  cursor: default;
  opacity: 0;
}

.img div.scr {
  position: absolute;
  bottom: 16%;
  left: 45%;
  text-align: center;  
  font-size: 90%;
}
.img div.scr a:link,
.img div.scr a:visited {
  color: #FFFFFF;
  text-shadow: 1px 1px 8px;
  text-decoration: none;
  font-weight: normal;
}

.img div.scr a:hover {
  color: #d44b4b;
}

.img div.scr a span {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
}
@-webkit-keyframes sdb {
 0% {
  -webkit-transform: rotate(-45deg) translate(0, 0);
  opacity: 0;
	}
    50% {
	opacity: 1;
	}
    100% {
	-webkit-transform: rotate(-45deg) translate(-20px, 20px);
	opacity: 0;
	}
}
@keyframes sdb {
    0% {
	transform: rotate(-45deg) translate(0, 0);
	opacity: 0;
	}
    50% {
	opacity: 1;
	}
    100% {
	transform: rotate(-45deg) translate(-20px, 20px);
	opacity: 0;
	}
}

div.memo {
  position: absolute;
  bottom: 0;
  color: #FFF;
  /*height: 45px;*/
  text-align: center;
  /*font-family: 'Sans', serif;*/
  font-size: 80%;
  background-color: rgba(0,0,0,0.4);
  /*padding: 0.5% 0% 0.5% 0%;*/
  width: 100%;
  opacity: 0;
  /*margin-bottom: 10%;*/
  /*text-shadow: 1px 1px 8px #000; */
}

.memo_wrap {
  position: relative;
  top: 25%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.des {
  position: relative;
  min-height: 100%;
  /*background-color: rgba(0,0,0,1);
  color: rgba(255,255,255,0.7);*/
  background-color: rgba(235,235,235,1);
  color: #000;
  text-align: center;
  padding: 5%;
  vertical-align: top;
  text-stroke: 2px rgba(0,0,0,0.7);
}

.img:last-of-type {
  border-bottom: none;
}

.img:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
}

.des:before {
  display: inline-block;
  vertical-align: top;
  height: 100%;
}

.multiline {
  display: inline-block;
}
.max {
  display: block;
  font-size: 60px;
  letter-spacing: 1px;
}

div.d_en {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 3%;
  font-family: 'Lato', sans-serif;
}

div.d_name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 4%;
}

div.d_description {
  line-height: 2em;
  margin-bottom: 4%;
}

div.d_price {
  font-size: 18px;
  font-weight: bold;
}

.d_shoplink {
  width: 25%;
  height: 40px;
  margin: auto;
  position: relative;
  border: 1px solid #000;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

.d_shoplink:hover {
  background-color: #222;
  border: 1px solid #BCBCBC;
}

.d_shoplink a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px 0px 8px 0px;
}

div.d_shoplink a:link,
div.d_shoplink a:visited  {
  /*font-family: 'Open Sans', sans-serif;*/
  color: #000;
  text-decoration: none;
}

div.d_shoplink a:hover {
  color: #FFF;
}

@media screen and (max-width: 900px) {

    div#content {
	margin-top: 45px;
    }

    div#name_container {
    }

    div.t_name {
	font-size: 110%;
    }

    div.t_name_en {
	font-size: 70%;
    }

    div.img {
	height: 60%;
	background-attachment: scroll;
    }

    div.img div.scr {
	display: none;
    }

    div.memo {
	/*position: relative;*/
	font-size: 70%
	padding: 2% 0% 2% 0%;
	/*bottom: 12%;*/
    }

    div.d_description {
	text-align: left;
    }

    .d_shoplink {
	width: 80%;
	margin: 2% auto 2% auto;
    }

    .des {
	height: auto;
    }
}