@charset "UTF-8";
/* CSS Document */
	

#mainvis {width:100%;display:table;text-align:center;}
#mainvis .inner {padding:20px 0;display:table-cell;background:url(../img/img_main.jpg) no-repeat center center;background-size:cover;width:100%;height:100%;vertical-align:middle;}

section {
	padding-top:50px;
	}
	
/*ボタン*/
.button {
	display:inline-block;
	background:#697700;
	text-align:center;
	padding:10px 25px;
	color:#fff;
	line-height:1em;
	}
.button span {vertical-align:middle;}
.button:before {
	content:"";
	background:url(../img/arrow.png) no-repeat;
	width:17px;
	height:17px;
	display:inline-block;
	vertical-align:middle;
	margin-right:0.5em;
	}
.button:hover {
	text-decoration:none;
	background:#5C6700;
	color:#fff;
	}

/*セクション タイトル*/
section h2.secTit {
	font-size:36px;
	color:#662C67;
	text-align:center;
	margin-bottom:30px;
	}
section h2.secTit:before {
	content:"";
	background:url(../img/icon_circle.png) no-repeat;
	width:30px;
	height:27px;
	display:inline-block;
	}
	
section .bgTit {
	font-size:15px;
	color:#fff;
	background:url(../img/bg_tit.png) no-repeat;
	background-size:cover;
	line-height:1em;
	padding:10px;
	display:inline-block;
	margin-bottom:15px;
	}

/*ボックス padding55*/
section .paddingBox {
	padding:0 55px;
	}

/*左右レイアウト*/
section .fig {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	}

/*テキスト縦書き*/
section .vrl.active span {
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
	display: inline-block;
     position: relative;
	}
section .vrl.active span.alpha {
	letterSpacing: 0.14em;
	}
section .vrl.active span.punc1 {
	position: absolute;
	margin-top: -0.7em;
	margin-left: -0.5em;
	}
section .vrl.active span.punc2 {
	position: absolute;
	margin-top: -0.7em;
	margin-left: -0.5em;
	}
section .vrl.active span.punc3, section .vrl.active span.punc4 {
	-webkit-transform:rotate(0deg) !important;
	transform:rotate(0deg) !important;
	}
section .vrl:not(.active) .inner {
	transform:none !important;
	width:auto !important;
	}



section h3 {font-size:30px;margin-bottom:10px;}
section h4 {font-size:20px;margin-bottom:10px;}
section .tableLayout .textArea {
	padding:55px;
	}
	
.defTextArea p:nth-of-type(n+2) {
	margin-top:1em;
	}
	
/*うみたまの特徴*/
#features .article01 .fig {
	background-image:url(../img/img_sea.jpg);
	}
#features .article01 .textArea {
	width:260px;
	}
#features .article01 .vrl {
	width:253px;
	}
#features .article01 .vrl.active {
	height:455px;
	-webkit-transform:translateX(-90px);
	transform:translateX(-90px);
	}


#features .article02 {margin-bottom:40px;}
#features .article02 .textArea {
	width:367px;
	}
#features .article02 .fig {background-image:url(../img/img_salt01.jpg);}

/*開発秘話*/
#secret .article01 {
	color:#fff;
	background:#000 url(../img/secret_bg_01.jpg) no-repeat right;
	background-size:auto cover;
	}
#secret .article01 .inner {max-width:555px;padding:55px;}
#secret .article02 {margin-bottom:40px;}
#secret .article02 .fig {background-image:url(../img/img_salt02.jpg);}
#secret .article02 .textArea {
	width:353px;
	}
#secret .article02 .vrl {
	width:350px;
	}
#secret .article02 .vrl.active {
	height:350px;
	-webkit-transform:translateY(-90px);;
	transform:translateY(-90px);
	}
#secret .article03 img.right {margin-left:30px;}

/*使い方*/
#howtouse .article01 dl {
	padding-top:30px;
	padding-bottom:20px;
	background:url(../img/icon_square.png) no-repeat center top;
	}
#howtouse .article01 dl dt {font-size:20px;}
#howtouse .article01 dl dd {
	padding:15px 0 30px;
	}

#howtouse #recipeArea > *{
	vertical-align:middle;
	}
	
#howtouse #cockFlow {
	max-width:805px;
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	}
#howtouse #cockFlow > li {
	padding-left:40px;
	padding-right:30px;
	background-position:left top;
	background-repeat:no-repeat;
	text-align:left;
	}
#howtouse #cockFlow li:nth-of-type(1) {
	background-image:url(../img/step01.png);
	}
#howtouse #cockFlow li:nth-of-type(2) {
	background-image:url(../img/step02.png);
	}
#howtouse #cockFlow li:nth-of-type(3) {
	background-image:url(../img/step03.png);
	}
	
/*うみたまの購入*/
#buy .article01 {margin-bottom:40px;}
#buy .article01 .tableLayout .textArea {
	width:393px;
	}
#buy .article01 .tableLayout .fig {
	background-image:url(../img/img_salt03.jpg);
	}

#buy .article02 .item:nth-of-type(n+2) {margin-top:30px;}
#buy .article02 .item .imgArea {padding-right:3%;width:48%;}
#buy .article02 .item .detailArea {vertical-align:top;}
#buy .article02 .item h4 span.only {font-size:13px;}
#buy .article02 .thumbArea {margin-top:15px;}
#buy .article02 .thumbArea a {
	display:inline-block;
	width:18%;
	margin-left:2.33%;
	}
#buy .article02 .thumbArea a:first-child {margin-left:0;}

/*お問い合わせ*/
#contact h4 {
	margin-bottom:20px;
	}
#contact h4:nth-of-type(n+2) {
	margin-top:４0px;
	}
#contact table {
	border-collapse:collapse;
	width:100%;
	margin-bottom:30px;
	}
#contact table td {
	border:1px solid #DDDDDD;
	padding:1em 1.5em;
	}
	
@media (max-width:728px){
.constBox {padding-left:4%;padding-right:4%;}

section h2.secTit {font-size:20px;}
section h2.secTit::before {background-size:20px auto;width:20px;height:18px;}

section h3 {font-size:20px;margin-bottom:10px;}
section h4 {font-size:17px;margin-bottom:10px;}

section .paddingBox {
	padding:0;
	}

.vrl {width:auto !important;}
section .tableLayout .textArea {padding:20px 4%; width:60% !important;}

#secret .article01 .inner {
	
	}
#secret .article03 img.right {
	margin-right:1em;
	width:40%;
	}

#howtouse #cockFlow {
	max-width:none;
	}
#howtouse #cockFlow > li {padding-right:2%;}
}
@media screen and (max-width:520px) {
section .tableLayout .textArea{
	width:70% !important;
	}

#secret .article01 .inner {
	padding:20px 4%;
	background:rgba(0, 0, 0, 0.5);
	}
	
#howtouse .article01 dl dd {text-align:left;padding-left:8%;padding-right:8%;}

#buy .article02 .item .imgArea {
	width:35%;
	}

#buy .article02 .item .imgArea figure {display:none;}
#buy .article02 .item .imgArea .thumbArea {margin-top:0;}
#buy .article02 .item .imgArea .thumbArea a {
	width:100%;
	display:block;
	margin:0 0 5px;
	}
#buy .article02 .item .imgArea .thumbArea a:nth-of-type(n+3) {display:none;}
#buy .article02 .item h4 span.only {font-size:11px;}
}
@media screen and (max-width:460px) {
#mainvis img {
	width:40%;
	}

#howtouse #recipeArea > figure {width:30%;}
#howtouse #cockFlow {display:block;padding:0 8%;width:auto;}
#howtouse #cockFlow li {
	display:block;
	background-size:20px auto;
	background-position:center top;
	padding:40px 0 0;
	margin-bottom:1em;
	text-align:center;
	}
	
#contact table,
#contact table tbody,
#contact table tr,
#contact table td {display:block;}
#contact table tr {padding:5px 0;}
#contact table td {padding:5px;}
#contact table td:nth-of-type(n+2) {
	border-top:none;
	}
}