@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width: 100%;
}
header {
	position: relative;
}
header h1 {
	position: absolute;
	left: 0%;
	top: 3%;
	right: 0%;
	bottom: 0%;
	width: 100%;
}
/* モバイルレイアウト : 480 px およびそれ以下. */

header p.image {
	margin: auto;
	z-index: 0;
}
section {
	position: relative;
}
section h2 {
	z-index: 50;
	margin: -10% auto auto;
}
/* モバイルレイアウト : 480 px およびそれ以下. */

section p.image {
	margin: auto;
	z-index: 0;
}
body {
	background-image: url(/img/top/bg.gif);
	background-repeat: repeat-y;
	background-position: center top;
	background-color: #d3f7eb;
}

#sec_Header {
}
#sec_Header div {
	background-color: #0070c0;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	padding: 8.333% 8.333% 16.666%;
	background-image: url(/img/top/dot_w.png);
	background-size: 3.333% 3.333%;
	background-repeat: repeat;
}
#sec_Appearance {
	margin-top: -15%;
}
#sec_Appearance .p_tap {
	position: absolute;
	z-index: 50;
	right: 0px;
	bottom: 25%;
	width: 20%;
}
#sec_Appearance div {
	background-color: #ffff00;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	padding: 16.666% 8.333% 8.333%;
	background-image: url(/img/top/dot_w.png);
	background-size: 3.333% 3.333%;
	background-repeat: repeat;
}
#sec_Kitchen {
	margin-top: 2%;
}
#sec_Kitchen .p_tap {
	position: absolute;
	z-index: 50;
	right: 5%;
	width: 20%;
	top: 15%;
}
#sec_Kitchen div {
	background-color: #00b050;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	padding: 8.333% 8.333% 16.666%;
	background-image: url(/img/top/stripe_k.png);
	background-size: 1.111% 1.111%;
	background-repeat: repeat;
}
#sec_Void {
	margin-top: -15%;
}
#sec_Void .p_tap {
	position: absolute;
	z-index: 50;
	right: 5%;
	bottom: 5%;
	width: 20%;
}
#sec_Void div {
	background-color: #ff0000;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
	clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	padding: 16.666% 8.333% 8.333%;
	background-image: url(/img/top/stripe2_k.png);
	background-size: 1.111% 3.333%;
	background-repeat: repeat;
}
#sec_Entrance {
	margin-top: 2%;
}
#sec_Entrance .p_tap {
	position: absolute;
	z-index: 50;
	right: 6%;
	bottom: 30%;
	width: 20%;
}
#sec_Entrance div {
	background-color: #7030a0;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
	padding: 8.333% 8.333% 16.666%;
	background-image: url(/img/top/stripe_w.png);
	background-size: 1.111% 1.111%;
	background-repeat: repeat;
}
#sec_CoveredPorch {
	margin-top: -15%;
}
#sec_CoveredPorch .p_tap {
	position: absolute;
	z-index: 50;
	right: 5%;
	bottom: 40%;
	width: 20%;
}
#sec_CoveredPorch div {
	background-color: #ffc000;
	-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
	padding: 16.666% 8.333% 8.333%;
	background-image: url(/img/top/dot_w.png);
	background-size: 3.333% 3.333%;
	background-repeat: repeat;
}
#p_surfgirl {
	position: absolute;
	z-index: 99;
	bottom: 5%;
	left: 2%;
	width: 20%;
}
#p_surfboy {
	position: absolute;
	z-index: 99;
	right: 0px;
	width: 20%;
	top: 25%;
}
#p_wow {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 99;
	width: 40%;
}
#p_lagunabeach {
	position: absolute;
	z-index: 99;
	top: -15%;
	right: 2%;
	width: 40%;
}
#p_surfboard {
	position: absolute;
	left: 0px;
	top: -10%;
	z-index: 99;
	width: 40%;
}
#p_island {
	position: absolute;
	z-index: 99;
	top: 42%;
	right: 2%;
	width: 40%;
}
#p_itscool {
	position: absolute;
	left: 5%;
	top: 10%;
	z-index: 99;
	width: 40%;
}
#p_xoxo {
	position: absolute;
	z-index: 99;
	top: 10%;
	right: 0%;
	width: 35%;
}
#p_largespace {
	position: absolute;
	z-index: 99;
	top: 20%;
	right: 2%;
	width: 40%;
}
#p_usa {
	position: absolute;
	z-index: 20;
	bottom: 20%;
	right: 2%;
	width: 20%;
}
footer {
	background-image: url(/img/top/ftrimg_CaliforniaRepublic.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(255,255,255,0.8);
	background-blend-mode: lighten;
	height: auto;
	padding-top: 55.555%;
}
footer h2 {
	margin: auto;
	width: 66.666%;
}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {
}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media print, screen and (min-width: 769px) {
header {
	position: relative;
	width: 1080px;
	margin: auto;
	padding: 0px;
	height: 840px;
}
header h1 {
	position: absolute;
	left: 0px;
	top: 30px;
	right: 180px;
	bottom: 0%;
	/* [disabled]width: 720px; */
}
header p.image {
	margin: auto;
	z-index: 0;
	width: 900px;
}
section {
	position: relative;
	width: 1080px;
	margin: auto;
	padding: 0px;
	height: 540px;
}
section h2 {
	z-index: 50;
	margin: -10% auto auto;
}
section p.image {
	margin: auto;
	z-index: 0;
	width: 600px;
}
body {
	/* [disabled]background-color: #000; */
}
#sec_Header {


}
#sec_Header div {
	background-color: #0070c0;
	-webkit-clip-path: polygon(0 0, 1080px 0,1080px 690px, 0 840px);
	clip-path: polygon(0 0, 1080px 0,1080px 690px, 0 840px);
	padding: 90px 0%;
	background-image: url(/img/top/dot_w.png);
	background-size: 3.333% 3.333%;
	background-repeat: repeat;
	height: 720px;
	width: 1080px;
}
#sec_Appearance {
	margin-top: -120px;
}
#sec_Appearance .p_tap {
	position: absolute;
	z-index: 50;
	right: 15%;
	bottom: 1%;
	width: 20%;
}

#sec_Appearance div {
	background-color: #ffff00;
	-webkit-clip-path: polygon(0 150px, 1080px 0, 1080px 540px, 0 540px);
	clip-path: polygon(0 150px, 1080px 0, 1080px 540px, 0 540px);
	padding: 120px 90px 60px;
	background-image: url(/img/top/dot_w.png);
	background-size: 3.333% 3.333%;
	background-repeat: repeat;
	height: 360px;
	width: 900px;
}
#sec_Kitchen {
	margin-top: 30px;
}
#sec_Kitchen .p_tap {
	position: absolute;
	z-index: 50;
	right: 25%;
	width: 20%;
	top: 10%;
}
#sec_Kitchen div {
	background-color: #00b050;
	-webkit-clip-path: polygon(0 0, 1080px 0, 1080px 390px, 0 540px);
	clip-path: polygon(0 0, 1080px 0, 1080px 390px, 0 540px);
	padding: 60px 360px 120px 120px;
	background-image: url(/img/top/stripe_k.png);
	background-size: 1.111% 1.111%;
	background-repeat: repeat;
	height: 480px;
	width: 600px;
}
#sec_Void {
	margin-top: -120px;
}
#sec_Void .p_tap {
	position: absolute;
	z-index: 50;
	right: 2%;
	bottom: 2%;
	width: 20%;
}
#sec_Void div {
	background-color: #ff0000;
	-webkit-clip-path: polygon(0 150px, 1080px 0, 1080px 540px, 0 540px);
	clip-path: polygon(0 150px, 1080px 0, 1080px 540px, 0 540px);
	padding: 90px 90px 90px 390px;
	background-image: url(/img/top/stripe2_k.png);
	background-size: 1.111% 3.333%;
	background-repeat: repeat;
	height: 480px;
	width: 600px;
}
#sec_Entrance {
	margin-top: 30px;
}
#sec_Entrance .p_tap {
	position: absolute;
	z-index: 50;
	right: 15%;
	bottom: 26%;
	width: 20%;
}
#sec_Entrance div {
	background-color: #7030a0;
	-webkit-clip-path: polygon(0 0, 1080px 0, 1080px 540px, 0 390px);
	clip-path: polygon(0 0, 1080px 0, 1080px 540px, 0 390px);
	background-image: url(/img/top/stripe_w.png);
	background-size: 1.111% 1.111%;
	background-repeat: repeat;
	height: 480px;
	width: 600px;
	padding: 30px 270px 150px 210px;
}
#sec_CoveredPorch {
	margin-top: -120px;
}
#sec_CoveredPorch .p_tap {
	position: absolute;
	z-index: 50;
	right: 30%;
	bottom: 22%;
	width: 20%;
}
#sec_CoveredPorch div {
	background-color: #ffc000;
	-webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
	clip-path: polygon(0 0, 1080px 150px, 1080px 540px, 0 540px);
	padding: 90px 390px 90px 90px;
	background-image: url(/img/top/dot_w.png);
	background-size: 3.333% 3.333%;
	background-repeat: repeat;
	height: 480px;
	width: 600px;
}
#p_wow {
	position: absolute;
	left: 0px;
	top: 100px;
	z-index: 99;
	width: 371px;
	height: 309px;
}
#p_lagunabeach {
	position: absolute;
	z-index: 99;
	top: 0%;
	right: 0%;
	width: 311px;
}
#p_surfboard {
	position: absolute;
	left: 0px;
	top: -10%;
	z-index: 99;
	width: 40%;
}
#p_island {
	position: absolute;
	z-index: 99;
	top: 150px;
	right: 2%;
	width: 409px;
	height: 185px;
}
#p_itscool {
	position: absolute;
	left: 5%;
	top: 20%;
	z-index: 99;
	width: 472px;
	height: 392px;
}
#p_xoxo {
	position: absolute;
	z-index: 99;
	top: 60px;
	right: 60px;
	width: 300px;
	height: 226px;
}
#p_largespace {
	position: absolute;
	z-index: 99;
	top: 50px;
	right: 150px;
	width: 456px;
	height: 168px;
}
#p_usa {
	position: absolute;
	z-index: 20;
	bottom: 50px;
	right: 10%;
	width: 220px;
	height: 168px;
}
footer {
	background-image: url(/img/top/ftrimg_CaliforniaRepublic.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-color: rgba(255,255,255,0.8);
	background-blend-mode: lighten;
	height: 120px;
	padding-top: 600px;
	margin: 30px auto auto;
	width: 1080px;
}
footer h2 {
	margin: auto;
	width: 720px;
	height: 120px;
}
}