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

@font-face {
    font-family: 'novecento_sans_wide_bookbold';
    src: url('novecentosans/Novecentosanswide-Bold-webfont.eot');
    src: url('novecentosans/Novecentosanswide-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('novecentosans/Novecentosanswide-Bold-webfont.woff2') format('woff2'),
         url('novecentosans/Novecentosanswide-Bold-webfont.woff') format('woff'),
         url('novecentosans/Novecentosanswide-Bold-webfont.ttf') format('truetype'),
         url('novecentosans/Novecentosanswide-Bold-webfont.svg#novecento_sans_wide_bookbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'novecento_sans_widemedium';
    src: url('novecentosans/Novecentosanswide-Medium-webfont.eot');
    src: url('novecentosans/Novecentosanswide-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('novecentosans/Novecentosanswide-Medium-webfont.woff2') format('woff2'),
         url('novecentosans/Novecentosanswide-Medium-webfont.woff') format('woff'),
         url('novecentosans/Novecentosanswide-Medium-webfont.ttf') format('truetype'),
         url('novecentosans/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium') format('svg');
    font-weight: normal;
    font-style: normal;
}


html{
	height:100%;
	overflow-y:scroll;
}

body {
	height:100%;
	font: 12px/1.231 Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	*font-size: small;
	*font: x-small;
	letter-spacing: 1px;
	color:#333333;
	line-height: 200%;
	background: #E7E9EC;
}
a {	text-decoration: none; color: #393939;}
a:hover { color: #393939; }
ol, ul {	list-style: none;}
img {	vertical-align: bottom;}

.fltLft {	float: left;}
.fltRgt {	float: right;}
.fltClr {	clear: both;}

.fltList {	overflow: hidden;}
.fltList li {	float: left;}

.tRgt {	text-align:right;}
.tCtr {	text-align:center;}

.mgT100 { margin-top: 100px;}
.mgB25 { margin-bottom: 25px;}

.mgC { margin:0 auto;}

.big {
	font-size: 158%;
}
.small {
	font-size: 70%;
	}
	
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix { display: inline-table; }



/*--------------------------------------------------------
 for WP editer
--------------------------------------------------------*/

strong { font-weight: bold; }
em { font-style: italic; }
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
.aligncenter {
    display: block;
    margin: 0 auto;
}
.alignright { float: right; }
.alignleft { float: left; }

/*--------------------------------------------------------
 header
--------------------------------------------------------*/
header{
	background: none;
	padding: 0;
	overflow: hidden;
/*	height: 39px;
	position: fixed; */
	z-index: 210;
	box-sizing: border-box;
	left: 20%;
	top: 20%;
}

.topNav {
  display: none;
}

.btA {
  cursor: pointer;
}

.topNav li {
  cursor: pointer;
}


/*--------------------------------------------------------
article
--------------------------------------------------------*/

/* 共通
------------------------------------ */
.chapterTtl {
	text-align: center;
	padding: 8px 0;
}
.mgnBtm140 {
	padding-bottom: 140px;
}
.inner {
	width: 980px;
	margin: 0 auto;
}
.gryBk {
	background: #f2efef;
}
.tabList .current {
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
.tabList a {
	padding: 2px 41px 0;
	font-size: 86%;
	display: block;
	text-decoration: none;
	color: #000;
}

#toppage {
	position: relative;
	z-index: 10;
/*	background:  url(../images/bg_stock.jpg) 0 0  no-repeat;
*/	background-size: 100% auto;
	text-align: center;
}

/* top
------------------------------------ */

#maximage {
  position: fixed;
  z-index: 0;
}

#top {
	position: relative;
	z-index: 10;
	height: 100%;
	color: #fff;
	text-align: center;
	border-bottom: solid 1px #bfb5ab;
	background: #3CF;
}
.topLogo {
margin: -51px 0 0 -85px;
position: absolute;
top: 50%;
left: 50%;
}
.topTxt {
font-family: 'novecento_sans_wide_bookbold';
font-size: 400%;
margin: 0;
position: absolute;
bottom: 10%;
left: 15%;
text-transform: uppercase;
text-align: left;
line-height: 0.8em;
}
#socialBtn {
	position: absolute;
	bottom: 30%;
	left: 50%;
	margin-left: -213px;
}
#socialBtn dt,
#socialBtn dd {
	float: left;
}
#socialBtn dt {
	margin: 0 6px;
}
#socialBtn dd {
	margin: 8px;
	width: 55px;
}
#socialBtn dd a img {
	width: 32px;
	height: auto;
}
#socialBtn p {
	font-size: 80%;
	line-height: 1.2em;
	padding-top: 10px;
}


/* #works
------------------------------------ */
#works {
	background: #42494E;
}
#works h2 {
	padding-top: 133px;
}
#works .worksfoot img {
	width: 100%;
}
.worksarea {
	margin: 67px 0;
}
.worktopics {
    width: 960px;
    margin: 0 auto;
}
.worktopics li{
    float: left;
    width: 240px;
    height: 240px;
    position: relative;
    overflow: hidden;
}
.worktopics li a {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1000%;
    height: 2000px;/* 縦は用途応じて改変 */
    line-height: 2000px;
    margin:-1000px 0 0 -500%;
    text-align: center;
}
.worktopics li a img{
    min-height: 260px;
    min-width: 10%;
    vertical-align: middle;
	max-height: 300px;
	max-width: 300px;
}
.worktopics li img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
.worktopics li img:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
.worktopics img.catttl{
position: relative;
top: 160px;
}


/* #content
------------------------------------ */
.secttl img {
	max-width: 80%;
}
.contentarea {
	margin: 67px auto;
}
.textarea {
	width: 80%;
	max-width: 600px;
	margin: 0 auto 30px;
}
.textarea p {
	text-align: left;
}


/* #quality
------------------------------------ */
#quality .contentarea img {
position: relative;
top: -100px;
z-index: -1;
}



/* #flow
------------------------------------ */
.flowarea {
	max-width: 835px;
	margin: 15px auto;
}
.flowarea .flowleft {
	text-align: left;
	width: 296px;
	float: left;
	padding-top: 75px;
}
.flowarea .flowright {
	text-align: left;
	width: 296px;
	float: right;
	padding-top: 75px;
}
.contactbt {
	position: relative;
	top: 20px;
}

/* #contactus
------------------------------------ */
#contactus .textarea {
	width: 80%;
	max-width: 342px;
	margin: -20px auto 30px;
}
#contactus .textarea p {
	margin: 0 0 10px;
}
#contactus input {
	width: 100%;
	background: #42494E;
	color: white;
	padding: 5px 0;
}
#contactus textarea {
	width: 100%;
	background: #42494E;
	color: white;
	padding: 5px 0;
}
.sendbt {
	position: relative;
	top: -60px;
	left: 132px;
	width: 80px !important;
	height: 80px;
	background: #3CF !important;
	border: 0;
	border-radius: 40px;        /* CSS3草案 */  
    -webkit-border-radius: 40px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 40px;
	cursor: pointer;
}
div.wpcf7-validation-errors {
	border: 2px solid #3CF;
}
div.wpcf7-sent-ok {
	border: 2px solid #3CF;
}



/* #aboutus
------------------------------------ */
.aboutttl {
	margin: 80px auto 0;
}
.aboutttl img {
	width: 300px;
}

#aboutus {
	background: #fff;
	overflow: hidden;
}
#map_wrapper {
	width: 100%;
	height: auto;
	border-top: solid #ADABA9 2px;
	-webkit-box-shadow: 0 2px 22px #FFF;
	-moz-box-shadow: 0 2px 22px #FFF;
	box-shadow: 0 2px 22px #FFF;
	margin: 0 auto;
}
#map_container {
	padding-bottom: 20%;
	height: 50px;
}
#campanyInfo {
	margin: 30px auto 100px;
}
#campanyInfo tr {
	display: block;
	margin: 2em 0 2em 2em;
}
#campanyInfo th {
	width: 110px;
	text-align: left;
	vertical-align: top;
	color: #3CF;
	font-size: 0.9em;
}
#campanyInfo td {
	line-height: 2em;
}



/* #aboutus
------------------------------------ */
#blog {
	background: #E7E9EC;
}
.blogtopics {
	width: 570px;
	margin: 0 auto;
	padding: 80px 0;
	overflow: hidden;
}
.blogtopics .secttl {
	margin: 0 0 50px;
}
.blogtopics li {
	float: left;
	width: 150px;
	margin: 20px;
}
.circle-trim {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
}
.blogtopics img {
	max-width: 200px;
	max-height: 200px;
}
.blogtopics p {
	padding: 20px 10px;
	line-height: 1.2em;
}

/* =======================================
	ClearFixElements
======================================= */
.wideslider ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.wideslider ul {
	display: inline-block;
	overflow: hidden;
}


/* #access
------------------------------------ */
#access {
	text-align: left;
	clear: both;
}
#accessBg {
/*	background: #000  url(../images/bg_access.jpg) 50% 50% no-repeat;	*/
	background-color: #3CF;
	background-size: cover;
	color: #fff;
	padding: 230px 0 130px;
}

#accessLogo {
	float: right;
	text-align: right;
}


.accessInfo {
	float: right;
	margin: 0 60px 0 0;
	width: 380px;
}

#access .chapterTtl {
	text-align: left;
}
#access h2 {
	font-family: 'novecento_sans_wide_bookbold';
	font-size: 120%;
	letter-spacing: -0.03em;
}
#access .tStxt {
	font-family: Georgia, "ＭＳ 明朝", serif;
	width: 80%;
	font-size: 90%;
	font-weight: bold;
	font-style: italic;
	color: #ccc;
	letter-spacing: -0.01em;
}
#access .tSpace {
	font-family: 'novecento_sans_widemedium';
	width: 80%;
	margin: 3px 0;
	font-size: 70%;
	color: #999;
}
#access .moreBt {
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
	font-style: normal;
	letter-spacing: 0;
}

#accessLogo h2 {
	font-family: Georgia, "ＭＳ 明朝", serif;
	color: #394C39;
	font-style: italic;
	font-size: 100%;
	padding: 0 0 20px 0;
}
#accessLogo h3 {
	padding: 0 0 20px 0;
}
#accessLogo p {
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
	color: #394C39;
	font-size: 90%;
	padding: 0;
	font-weight: bold;
}
#accessLogo a {
	color: #ccc;
}
#accessLogo a:hover {
	color: #ED1B23;
}



/*--------------------------------------------------------
footer
--------------------------------------------------------*/
footer {
	color: #666;
	background: #3CF;
	font-size: 72%;
	position: relative;
	z-index: 10;
}
footer p {
	text-align: center;
}



/*--------------------------------------------------------
page
--------------------------------------------------------*/
.noTop {
	top: 0;
	left: 0;
	width: 100%;
	height: 90px;
	background: #666;
	filter:alpha(opacity=90);
    -moz-opacity: 0.9;
    opacity: 0.9;
}
.noTop h2 {
	float: left;
	margin: 5px 20px;
}
.noTop h2 img {
	width: 80px;
}
.noTop h3 {
	float: left;
	line-height: 90px;
	font-family: Georgia, "ＭＳ 明朝", serif;
	font-family: Varela Round,arial,sans-serif;
	color: #fff;
	font-style: italic;
	padding: 0 20px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.noTop h3 a {
	color: #fff;
}
.noTop h3 a:hover {
	color: #fff;
}
.noTop ul {
	float: right;
	line-height: 90px;
	margin-right: 90px;
}
.noTop ul li {
	float: left;
	line-height: 90px;
	padding-left: 20px;
	font-family: 'novecento_sans_wide_bookbold';
	font-family: Varela Round,arial,sans-serif;
	text-transform: uppercase;
}
.noTop ul li a {
	color: #fff;
}
.noTop ul li a:hover {
	color: #ccc;
}
.page #fixedpage {
	width: 990px;
	margin: 50px auto 100px;
	max-width: 90%;
}
.page #fixedpage img {
	width: 100%;
	height: auto;
	padding: 0 0 30px;
	border:0;
}

#post-header {
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: 30px;
	margin-top: 40px;
}
#post-header h1 {
	padding: 15px 0;
	color: #393939;
	font-family: 'novecento_sans_wide_bookbold';
	font-size: 250%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	padding-left: 25px;
}


.page #access {
	padding-top: 0;
}
.page #fixedpage article.entryblog {
	padding: 25px;
	font-size: 9pt;
	line-height: 1.5em;
}
.page #fixedpage article.entryblog img {
	width: auto;
	max-width: 100%;
}
.page #fixedpage article.entryblog img.alignright {
	padding-left: 20px;
	padding-bottom: 20px;
	max-width: 47%;
}
.page #fixedpage article.entryblog img.alignleft {
	padding-right: 20px;
	padding-bottom: 20px;
	max-width: 47%;
}
.page #fixedpage article.entryblog img.size-medium {
	max-width: 50%;
}


/*--------------------------------------------------------
page
--------------------------------------------------------*/
.pageLineup {
	background: #000  url(../images/bg_lineup.jpg) no-repeat;
	background-size: cover;
	margin-top: -90px;
}
.pageLineup #fixedpage {
	width: 100%;
	margin: 0 auto 100px;
	padding: 90px 0 0;
}
.pageLineup #fixedpage #stock {
	min-height: 1260px;
	padding: 100px 0 0 60px;
}

#post-header-blog {
	border-top: 1px solid #e4e4e4;
	border-bottom: 1px solid #e4e4e4;
	margin-bottom: 30px;
	margin-top: 40px;
}
#post-header-blog h1 {
	padding: 15px 0;
	color: #393939;
	font-size: 200%;
	letter-spacing: -0.03em;
	padding-left: 25px;
}
.page #fixedpage article.entryPage {
	padding: 25px;
}
.pageBlog {
	background: #fff  url(../images/bg_top_04.jpg) no-repeat;
	background-size: cover;
	margin-top: -90px;
	background-attachment: fixed;
}
.pageBlog #fixedpage {
	width: auto;
	margin: 0 auto 100px;
	padding: 90px 0 0;
}
.pageBlog #fixedpage #blog {
	padding-top: 50px
}
.pageBlog #fixedpage img {
	padding: 0;
}

#single_navi {
	clear: both;
	padding-top: 80px;
}
.post_previous {
	float: left;
}
.post_next {
	float: right;
}

/*--------------------------------------------------------
board
--------------------------------------------------------*/
#modal {
	position: absolute;
	left:-9999px;
}
.jpnTxt {
	color: #555;
	font-size: 95%;
}
.brandProfile {
	width:630px;
	height: 450px;
	padding: 50px;
}
.brandProfile .txtArea {
	padding-bottom: 50px;
}
.brandProfile .txtArea img {
	width: 100%;
	height: auto;
}
.brandProfile #post-header {
	margin-top: 15px;
}
.brandProfile h4 {
	padding: 15px 0;
	color: #fff;
	font-family: 'novecento_sans_wide_bookbold';
	font-family: Varela Round,arial,sans-serif;
	font-size: 150%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	font-weight: bold;
}
.brandProfile p {
	margin-bottom: 20px;
}

#ipd {
	height: 80%;
}
#ipd ul li {
	list-style: circle inside;
}

.waveTxt {
	width: 25%;
	position: relative;
	left: 70%;
	top: 20%;
}
.waveTxt p {
	padding: 0 0 15px;
}
.waveTxt .ttlTxt {
	font-family: Varela Round,arial,sans-serif;
	color: #333;
	font-weight: bold;
	padding-top: 20px;
	text-transform: uppercase;
	font-size: 120%;
}
.waveTxt p .sTxt {
	font-size: 80%;
}
.waveTxt .halfTxt {
	padding: 15px 0;
}
.waveTxt span.name {
	position: absolute;
	bottom: -28px;
	left:0;
	width: 100%;
	color: #333;
}

.boardTxt {
	width: 55%;
	position: relative;
	left: 40%;
	top: 10%;
	background-color: rgba(255, 255, 255, 0.4);
	padding: 5px 20px;
}
.boardTxt p {
	padding: 0 0 15px;
}
.boardTxt .ttlTxt {
	font-family: Varela Round,arial,sans-serif;
	color: #333;
	font-weight: bold;
	padding-top: 20px;
	text-transform: uppercase;
	font-size: 120%;
}
.boardTxt p .sTxt {
	font-size: 80%;
}
.boardTxt .halfTxt {
	padding: 15px 0;
	width: 49%;
	float: left;
}
.boardTxt ul {
	height: 123px;
}
.boardTxt ul li {
	float: left;
	text-align: center;
	width: 33.333%;
	position: relative;
}
.boardTxt span.name {
	position: absolute;
	bottom: -28px;
	left:0;
	width: 100%;
	color: #333;
}

.page #lineuppage {
	width: 100%;
	margin: 0 auto 20px;
}
.bSection {
	height: 680px;
	width: 100%;
	margin-top: 20px;
	background-size: cover;
	background-position:center;
}
.bSection .text {
	width: 55%;
	margin: 0;
	position: relative;
	left: 40%;
	top: 20%;
}
.bSection .text p {
	padding: 0 0 15px;
}
.section1 h2 {
	font-family: Varela Round,arial,sans-serif;
	margin-bottom: 40px;
	font-size: 30px;
	line-height: 33px;
	color: #393939;
}
.bSection.section5 {
	height: 800px;
}
.bSection.section6 {
	height: 800px;
	width: 100%;
	margin-top: 100px;
	background-size: cover;
	background-position:center;
}
.bSection.section7 {
	height: 350px;
	width: 100%;
	margin-top: 100px;
	background: #eee;
	margin-bottom: -20px;
}
.lSection {
	width: 100%;
	margin-top: 20px;
	background-size: cover;
	background-position:center;
}
.lSection .text {
	width: 55%;
	margin: 0;
	position: relative;
	left: 40%;
	top: 20%;
	padding: 2%;
	background-color: rgba(255, 255, 255, 0.6);
	
}
.lSection.section6 {
	width: 100%;
	margin-top: 60px;
	background-size: cover;
	background-position:center;
}
.btArea {
	clear: both;
	padding-top: 20px;
}
.section6 button {
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
	float: none;
	display: block;
	margin: 20px auto;
	background-color: #ED1B23;
	color: white;
	border: none;
	padding: 14px 0;
	text-align: center;
	width: 200px;
	text-transform: uppercase;
	cursor: pointer;
	font-size: 110%;
}
.section6 button.store {
	background-color: #999;
}

.boardImg {
	text-align: center;
}
.boardImg h5 {
	font-family: Varela Round,arial,sans-serif;
	margin-bottom: 40px;
	font-size: 30px;
	line-height: 33px;
	color: #393939;
}
.boardImg p {
	float: left;
	width: 330px;
	overflow: hidden;
}
.boardImg .imageArea {
	width: 660px;
	margin: 0 auto;
}
.boardImg img {
	width: 400px;
	position: relative;
	left: -30px;
}

#moresurfboards {
	text-align: center;
	padding: 50px 0;
}
#moresurfboards .span12 div {
	display: inline-block;
	vertical-align: bottom;
	position: relative;
	width: 90px;
	text-align: center;
}
#moresurfboards .span12 div .name {
	font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; 
	position: absolute;
	font-size: 12px;
	color: #393939;
	bottom: -50px;
	left:0;
	width: 90px;
	line-height: 1.2em;
	text-align: center;
	font-size: 110%;
}





/*--------------------------------------------------------
Top menu
-----------------------------------------------------*/
label {
    color: #fff;
    padding: 0 1px 6px 0px;
    display: block;
    margin: 0;
    border: 1px solid #ccc;
	font-size: 300%;
	width: 0.8em;
}

input[type="checkbox"].on-off{
    display: none;
}
.tMenu {
    position: fixed;
	top: 5%;
	left: 5%;
	z-index: 20;
}
.tMenu ul {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tMenu li {
    padding: 5px 15px;
	background: #fff;
	text-align: left;
	text-transform: uppercase;
	margin-top: 1px;
}
.tMenu li a {
	color: #666;
}
.tMenu li a:hover {
	color: #3CF;
}

input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].on-off:checked + ul{
    height: 800px;
}

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

.noTop h3 {
	display: none;
}
.noTop ul {
	margin-right: 20px;
}
.tTxtarea .tSpace {
	margin: 0 auto;
}
#about .tTxtarea {
	width: 100%;
	margin: 0 auto 0;
	top: 5%;
}
#stock {
	max-width: 840px;
}
.pageLineup #fixedpage #stock {
	min-width: 840px;
}
#access .inner {
	width: 840px;
}

}

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

.topLogo {
	zoom: 2;
}
#socialBtn {
	zoom: 2;
}

/*--------------------------------------------------------
Top menu
-----------------------------------------------------*/
label {
    padding: 30px 10px;
	font-size: 600%;
	width: 0.8em;
}
.tMenu li {
    padding: 30px 15px;
	font-size: 200%;
}

.tBlogArea .tBlogDate {
	display: none;
}
.tBlogArea .tBlogDate + p {
	display: none;
}
.tBlogArea .chapterTtl {
	font-size: 150%;
	margin-top: 30%;
	padding: 0 5%;
}
.page #fixedpage article img.size-medium {
	width: 100%;
}
}