@charset "UTF-8";

/****************************
  GLOBAL SETTING
*****************************/

* { margin: 0; padding: 0; line-height: 1; }
ul, ol { list-style: none; }
fieldset, img { border: none; }
table { border-collapse: collapse; }

body {
	margin:  0;
	padding: 0;
	font-family: Avenir, 'Helvetica Neue', 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
	color: #666;
	font-size: 14px;
	line-height: 1;
	background-color: #fff;
	-webkit-text-size-adjust: 100%; /* for iPhone */
}

a, :focus, :active {
	outline: none;
}

a:link, 
a:visited {
	text-decoration: none;
	color: #08c;
}
a:hover, 
a:active {
	text-decoration: underline;
}

a#scroll-to-top {
	position: fixed;
	right:  15px;
	bottom: 60px;
	width:  35px;
	height: 35px;
	text-indent: -9999px;
	font-size: 0;
	outline: 0;
	cursor: pointer;
	background: url(../images/common/arrow.png) no-repeat center center;
	background-size: 35px 35px;
}

/****************************
  header
*****************************/

#header {
	display: table;
	width: 100%;
	min-height: 480px;
	background-position: center bottom;
	background-repeat: no-repeat;
	position: relative;
	background-image: url(../images/contents/intro-background-small.jpg);
}
@media screen and (min-width: 768px) {
	#header {
		height: 100vh;
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		        background-size: cover;
		background-image: url(../images/contents/intro-background-medium.jpg);
	}
}
@media screen and (min-width: 1300px) {
	#header {
		background-image: url(../images/contents/intro-background-large.jpg);
	}
}

.wrapper_header_title {
	position: absolute;
	top:  5%;
	left: 5%;
}

@media screen and (min-width: 768px) { /* over 768 */
	.wrapper_header_title {
		top:  35%;
		left: 20%;
	}
	.header_title:first-of-type {margin-right: 24px}
}

h1.h1_header {
	margin:  0;
	padding: 0;
	font-weight: normal;
	font-size: 28px;
	line-height: 1;
}
h1.h1_header, 
h1.h1_header a {
	text-decoration: none;
	color: #edf2f5;
}

p.p_header {
	margin:  0;
	padding: 0;
	font-size: 20px;
	line-height: 1.2;
	color: rgba(232,218,208,0.5);
}
@media screen and (min-width: 768px) {
	h1.h1_header {
		font-size: 38px;
	}
	p.p_header {
		font-size: 30px;
	}
}

.wrapper_header_btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 20px;
	text-align: center;
}
@media screen and (min-width: 768px) {
	.wrapper_header_btn {
		padding-bottom: 40px;
	}
}

.circle-button-info {
	display: inline-block;
	width:  51px;
	height: 51px;
	vertical-align: middle;
	text-align: center;
	border: 2px solid rgba(255,255,255,0.4);
	border-radius: 50%;
	-webkit-transition: border-color 200ms ease-in-out;
	   -moz-transition: border-color 200ms ease-in-out;
	        transition: border-color 200ms ease-in-out;
}
.circle-button-info:hover {
	border-color: #fff;
}
.circle-button-info:active {
	-webkit-transform: translateY(1px);
	   -moz-transform: translateY(1px);
	    -ms-transform: translateY(1px);
	     -o-transform: translateY(1px);
	        transform: translateY(1px);
}

.circle-button-info .fa {
	font-size:   32px;
	line-height: 51px;
	color: rgba(255,255,255,0.6);
}

@-webkit-keyframes small-bounce {
	  0% {-webkit-transform: translateY(0px)}
	 25% {-webkit-transform: translateY(3px)}
	 50% {-webkit-transform: translateY(0px)}
	 75% {-webkit-transform: translateY(-1px)}
	100% {-webkit-transform: translateY(0px)}
}
@-moz-keyframes small-bounce {
	  0% {-moz-transform: translateY(0px)}
	 25% {-moz-transform: translateY(3px)}
	 50% {-moz-transform: translateY(0px)}
	 75% {-moz-transform: translateY(-1px)}
	100% {-moz-transform: translateY(0px)}
}
@keyframes small-bounce {
	  0% {transform: translateY(0px)}
	 25% {transform: translateY(3px)}
	 50% {transform: translateY(0px)}
	 75% {transform: translateY(-1px)}
	100% {transform: translateY(0px)}
}

.animation-small-bounce {
	-webkit-animation: small-bounce 850ms linear infinite;
	   -moz-animation: small-bounce 850ms linear infinite;
	        animation: small-bounce 850ms linear infinite;
}

/****************************
  nav
*****************************/

#nav {
	width:  100%;
	height: 60px;
	margin:  0;
	padding: 0;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
}

ul.ul_nav {
	margin:  0 auto;
	padding: 0;
	text-align: center;
}
ul.ul_nav li {
	display: inline-block;
	margin:  0;
	padding: 0;
	font-size: 16px;
}
ul.ul_nav li span {
	font-size: 20px;
}
ul.ul_nav li a {
	display: block;
	margin:  0 15px;
	padding: 20px 0;
	line-height: 18px;
	text-decoration: none;
}
ul.ul_nav li a:link, 
ul.ul_nav li a:visited {
	color: #000;
}
ul.ul_nav li a:hover, 
ul.ul_nav li a:active, 
ul.ul_nav li a.active {
	color: #f44d0b;
	border-bottom: 1px solid #f44d0b;
}

.fixed {
	position: fixed;
	z-index: 9999;
	top:  0;
	left: 0;
}

@media screen and (max-width: 800px) { /* under 800 */
	ul.ul_nav li      {font-size: 14px;}
	ul.ul_nav li span {font-size: 16px;}
	ul.ul_nav {
		padding: 5px 0 0;
	}
	ul.ul_nav li a {
		margin:  0 3px;
		padding: 5px 0 0;
	}
	ul.ul_nav li a:hover, 
	ul.ul_nav li a:active, 
	ul.ul_nav li a.active {
		border-bottom: none;
	}
}
@media screen and (max-width: 480px) {
	#nav {
		display: none;
	}
}

/****************************
  footer
*****************************/

#footer {
	clear: both;
	margin:  50px auto 0;
	padding: 30px 15px;
	text-align: center;
	font-size:   12px;
	line-height: 12px;
	border-top: 1px solid #ccc;
}
#footer, 
#footer a {
	color: #000;
}

/****************************
  contents
*****************************/

.container {
	clear: both;
	max-width: 930px;
	margin:  0 auto;
	padding: 15px 15px;
}
.container:before,
.container:after {
	display: table;
	line-height: 0;
	content: "";
}
.container:after {
	clear: both;
}

.container.pt {
	padding-top: 110px;
}

h2.h2_title {
	margin:  0;
	padding: 0;
	font-weight: normal;
	font-size: 22px;
	line-height: 1;
	color: #000;
}
h2.h2_title span {
	font-size: 28px;
}
h2.h2_title.white {
	color: #fff;
}

p.p_summary {
	margin:  20px 0 0;
	padding: 0;
	line-height: 2;
}
p.p_summary.white {
	color: #fff;
}

/****************************
  information
*****************************/

ul.ul_info {
	clear: both;
	margin:  0;
	padding: 10px 0 0;
}
ul.ul_info li {
	margin:  0;
	padding: 15px 0 0;
	line-height: 1.4;
}
ul.ul_info li span {
	padding-left: 10px;
	color: #999;
}

/****************************
  visual
*****************************/

.wrapper_visual {
	clear: both;
	width: 100%;
	min-height: 700px;
	margin:  0;
	padding: 0;
	background-repeat: no-repeat;
}
.wrapper_visual.vinta {
	background-position: center center;
}
.wrapper_visual.elf {
	background-position: center 61px;
}

.wrapper_visual.vinta {
	background-image: url(../images/contents/vinta-small.jpg);
}
@media screen and (min-width: 768px) {
	.wrapper_visual.vinta {
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		        background-size: cover;
		background-image: url(../images/contents/vinta-medium.jpg);
	}
}
@media screen and (min-width: 1300px) {
	.wrapper_visual.vinta {
		background-image: url(../images/contents/vinta-large.jpg);
	}
}

.wrapper_visual.elf {
	background-image: url(../images/contents/elf-small.jpg);
}
@media screen and (min-width: 768px) {
	.wrapper_visual.elf {
		-webkit-background-size: cover;
		   -moz-background-size: cover;
		        background-size: cover;
		background-image: url(../images/contents/elf-medium.jpg);
	}
}
@media screen and (min-width: 1300px) {
	.wrapper_visual.elf {
		background-image: url(../images/contents/elf-large.jpg);
	}
}

/****************************
  murakami
*****************************/

.column_left, 
.column_right {
	width: 100%;
	padding: 30px 0 0;
}
.column_left {
	float: left;
}
.column_right {
	float: right;
}
@media screen and (min-width: 768px) {
	.column_left, 
	.column_right {
		width: 48%;
	}
}
.column_left img {
	max-width: 100%;
	margin: 0 0 5px;
}

.wrapper_line {
	margin:  15px 0 0;
	padding: 10px 0 0;
	border-top:    1px solid #ccc;
/*
	margin:  15px 0;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
*/
}

h3.h3_detail {
	margin:  -2px 0 0;
	padding: 0;
	font-weight: normal;
	font-size: 20px;
	line-height: 1;
	color: #000;
}

h4.h4_detail {
	margin:  0;
	padding: 10px 0 0;
	font-weight: normal;
	font-size: 14px;
	line-height: 1;
}

p.p_detail {
	margin:  0;
	padding: 0;
	font-weight: normal;
	font-size: 13px;
	line-height: 1.5;
}

h5.h5_price {
	margin:  0;
	padding: 20px 0 0;
	font-weight: normal;
	font-size: 20px;
}
h5.h5_price span {
	font-weight: normal;
	font-size: 16px;
}

.wrapper_products {
	clear: both;
	margin:  0;
	padding: 0;
}
.wrapper_products img {
	padding: 3px 7px 0 0;
	cursor: pointer;
	vertical-align: bottom;
}
.wrapper_products img:hover {
	opacity: 0.9; 
}

/****************************
  shoplist
*****************************/

.pt60 {
	padding-top: 60px;
}
.wrapper_gray {
	padding: 30px 0;
	background-color: #eee;
}

dl.dl_shoplist {
	float: left;
	width: 100%;
}
@media screen and (min-width: 768px) {dl.dl_shoplist {width: 50%}}

dl.dl_shoplist dt {
	margin:  0;
	padding: 40px 0 0;
	font-weight: bold;
	font-size: 14px;
	color: #888;
}
dl.dl_shoplist dt:first-child {
	padding-top: 30px;
}
dl.dl_shoplist dd {
	margin:  0;
	padding: 10px 15px 0 0;
	font-size: 13px;
	line-height: 1.5;
}
dl.dl_shoplist dd.name {
	padding-top: 20px;
}

dl.dl_shoplist dd span {
	padding-left: 1em;
}

@media screen and (max-width: 480px) {
	dl.dl_shoplist dd span {
		display: block;
		padding-top:  10px;
		padding-left: 0;
	}
}

/****************************
  company
*****************************/

dl.dl_company {
	clear: both;
	margin:  0;
	padding: 10px 0 0;
}
dl.dl_company dt {
	clear: both;
	width: 100px; /* WIDTH */
	font-weight: normal;
}
dl.dl_company dt, 
dl.dl_company dd {
	float: left;
	margin:  0;
	padding: 15px 0 0;
	line-height: 1.7;
}
dl.dl_company dd span {
	padding-right: 0.5em;
}

@media screen and (max-width: 480px) {
	dl.dl_company dt, 
	dl.dl_company dd {
		clear: both;
		float: none;
	}
	dl.dl_company dd {
		clear: both;
		float: none;
		padding: 5px 0 0;
	}
	dl.dl_company dd span {
		display: block;
		padding-right: 0;
	}
}