/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

html {
	font-size: 14px;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #232323;
}

/*a {
	color: #000;
	-webkit-transition: color .3s ease-out;
	   -moz-transition: color .3s ease-out;
	    -ms-transition: color .3s ease-out;
	        transition: color .3s ease-out;
}
a:hover {
	color: #35BBAF;
}*/

img {
	max-width: 100%;
	vertical-align: bottom;
}

.wrapper {
	box-shadow: 0 0 30px #000;
}


.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after { clear:both; }
/* For IE 6/7 */
.cf { zoom:1; }


.wrapper {
	max-width: 600px;
	margin: 0 auto;
	background-color: #fff;
}

.title-s {
	width: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 50;
	opacity: 0;
	transition: opacity .35s ease-out;
}
.title-s.active {
	opacity: 1;
}
.story1 .title-s img { width: 135px; }
.story2 .title-s img { width: 126px; }
.story3 .title-s img { width: 125px; }

.title-s .inner {
	max-width: 600px;
	margin: 0 auto;
	padding: 15px 15px 0;
	box-sizing: border-box;
	text-align: right;
}

.slider .slide {
	position: relative;
	background-size: cover;
}
.slider .slide-s1 {
	background-image: url("img/s1/s1_main.jpg");
	background-position: 50% 20%;
}
.slider .slide-s2 {
	background-image: url("img/s2/s2_main.jpg");
	background-position: 50% 65%;
}
.slider .slide-s3 {
	background-image: url("img/s3/s3_main.jpg");
	background-position: 50% 5%;
}

.slider .slide a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}

.slider .title-container {
	position: relative;
	background-color: rgba(255,255,255,.5);
	/*padding: 1.429rem 0;*/
	height: 180px;
}
	.slider .title-container .title {
		/*display: inline-block;*/
		/*margin: 0 65px;*/
		height: 100%;
		vertical-align: middle;
		text-align: center;
	}
	.slider .title-container .title:after {
		content: "";
		display: inline-block;
		height: 100%;
		width: 1px;
		vertical-align: middle;
		/*background-color: red;*/
	}
	.slider .title-container .title img {
		display: inline-block !important;
		width: 66.6666vw;
		max-width: 250px;
		vertical-align: middle;
	}
	.slider .pager .next,
	.slider .pager .back {
		width: 18px;
		padding: 15px;
		position: absolute;
		top: 50%;
		margin-top: -32px;
		z-index: 100;
		cursor: pointer;
	}
	.slider .pager .next { right: 0; }
	.slider .pager .back { left: 0; }


	.slide-s1 .title-container {
		top: 52.5%;
	}
	.slide-s2 .title-container {
		top: 9%;
	}
	.slide-s3 .title-container {
		top: 50%;
		margin-top: -90px;
	}


section {
	margin: 1rem 0;
	text-align: center;
}

section .style {
	margin: 3.071rem 0;
}

.style .photo,
.style .price {
	margin: 0 3.464rem;
}
.style .photo {
	margin-bottom: .8rem;
}
.style .photo-wide {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}

.style .price {
	text-align: left;
}
	.style .price dl {
		letter-spacing: .1em;
		clear: both;
		margin: 0.22rem auto 0.1rem;
		max-width: 556px; /* 写真のサイズ */
	}
		.style .price dl dt,
		.style .price dl dd {
			float: right;
		}
		.style .price dl dt {
			/*font-weight: bold;*/
			font-size: .55rem;
			color: #444;
			margin-right: 0;
			background:url(https://aqua-garage.jp/shop/item/aquagarage/design/img02/f_yyaji_2.png) left no-repeat;line-height:2;
			padding-left: 0.786rem;
			/*width: 6rem;*/
		}
		.style .price dl dt a{
			text-decoration: none;
			color: #444;
		}
			.buy-button a {
				font-size: .85rem;
				display: block;
				background-color: #000;
				border-radius: 10px;
				color: #fff;
				padding: .35rem .85rem;
				margin-top: -.35rem;
				margin-left: .5rem;
				text-decoration: none;
				-webkit-transition: background-color .75s ease-out;
				-moz-transition: background-color .75s ease-out;
				-ms-transition: background-color .75s ease-out;
				transition: background-color .75s ease-out;
			}
			.buy-button a:hover {
				background-color: #000;
			}

/* clearfix */
.style .price dl:before,
.style .price dl:after { content:""; display:table; }
.style .price dl:after { clear:both; }
.style .price dl { zoom:1; } /* For IE 6/7 */


.story-nav {
	margin-bottom: 2.571rem;
}
	.story-nav ul li {
		margin-bottom: 1.071rem;
		text-align: center
	}

/* clearfix */
.story-nav:before,
.story-nav:after { content:""; display:table; }
.story-nav:after { clear:both; }
.story-nav { zoom:1; } /* For IE 6/7 */


footer {
	text-align: center;
	padding: 2.429rem;
}
	footer h3 {
		text-align: center;
		margin: 0 5.143rem 2.75rem;
	}
		footer h3 img {
			width: 16.5rem;
		}

.concept {
	margin-top: -.75rem;
	margin-bottom: 5rem;
}
	.concept img {
		width: 19.6429rem;
	}


.external-link {
	margin-bottom: 2.5714rem;
}
	.external-link ul li {
		text-align: left;
		margin-bottom: 2.5rem;
	}
	.external-link ul li img { height: 17px;width: auto;}
	/*.external-link ul li:nth-child(1) img { width: 90px;}
	.external-link ul li:nth-child(2) img { width: 141px;}
	.external-link ul li:nth-child(3) img { width: 87px;}
	.external-link ul li:nth-child(4) img { width: 93px;}*/


.icons {
	margin-bottom: 4.643rem;
}
	.icons ul {
		margin-right: -1rem;
		margin-left: -1rem;
	}
	.icons ul li {
		float: left;
		width: 25%;
		box-sizing: border-box;
		padding: 1rem;
		text-align: center;
	}
	.icons ul li a {
		display: inline-block;
		width: 55px;
	}

	.page-top {
		opacity: 0;
		transition: opacity .35s ease-out;
	}
	.page-top.active {
		opacity: 1;
	}

/* clearfix */
.icons:before,
.icons:after { content:""; display:table; }
.icons:after { clear:both; }
.icons { zoom:1; } /* For IE 6/7 */


.copyright {
	text-align: left;
	font-size: 0.714rem;
}
	.copyright span {
		display: block;
		transform-origin: 0 100%;
		transform: scale(.9);
	}




.fade {
	opacity: 0;
	transition: opacity 1.5s ease-out;
}
.fade.fadein {
	opacity: 1;
}





@media screen and (min-width: 40em) {

	html {
		font-size: 16px;
	}

	.story-nav {
		/*margin-bottom: 2.571rem;*/
	}
		.story-nav ul {
			margin-left: .5rem;
			margin-right: .5rem;
		}
			.story-nav ul li {
				float: left;
				width: 50%;
				padding: .5rem;
				box-sizing: border-box;
			}

	section {
		margin-top: 6.2rem;
		margin-bottom: 6.2rem;
	}

	.icons {
		margin-bottom: 2rem;
	}
	.icons ul li {
		max-width: 55px;
		box-sizing: content-box;
	}
	.icons ul li.page-top {
		float: right;
	}

}