@charset "utf-8";
@import 'https://fonts.googleapis.com/css?family=Roboto|Noto+Serif';
@import 'http://fonts.googleapis.com/earlyaccess/notosansjp.css';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css';



/*スタイルリセット*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	font-size: 100%;
}
.clear{ clear:both;}
li {list-style-type: none;}
/*clearfix*/
.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	visibility: hidden;
	clear: both;
}
.clearfix {display:inline-table;}

/* Hides from IE-mac ¥*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

body {
	font:13px/1.5 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "Osaka", sans-serif ;
	*font-size:small;
	*font:x-small;
	font/*\**/: 13px/1.5\9;
	vertical-align:baseline;
	font-style: normal;
	letter-spacing: normal;
	color: #3f3c3c;
	}

html,body{
    width:100%;
    height:100%;
}

/* リンク指定
----------------------------------------------- */
a:link {color: #2D2D2D; text-decoration: none;}
a:visited {color: #2D2D2D;text-decoration: none;}
a:hover {color: #a21950; text-decoration: none;}
a img{ border: none;}
.new{font-family: 'Fjalla One', sans-serif; font-size: 11px; color: #E12499;}
.todetail{ text-align: right; padding: 3px}

.en{ font-size: 1.08em;}

/* ナビゲーション
----------------------------------------------- */
#logo{ margin: 48px 0 24px 0px; text-align: center; }
#logo img{ width: 200px; height: auto;fill: #FFFFFF;}
#logo .logo-svg{width: 200px; height: auto;fill: #FFFFFF;}
nav{font-family: 'Roboto', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.1em; ;}
nav a:link,nav a:hover,nav a:visited{ color: #FFFFFF; text-decoration: none;}
nav ul{  padding: 0 0 0 0; margin: 24px 0 0 ;display: flex; justify-content: center}
nav ul::after,nav::after{ clear: both; display: block; content: ""; height: 0;}
nav ul li{  margin: 0 2.0em 0 2.0em; position: relative;}
nav ul li:last-child{}
nav ul li a:hover{ color: #DDDDDD; -moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;-ms-transition: .3s;transition: .3s;}

nav ul li ul { padding: 0 0 0 0;position: absolute;z-index: 999;  left: 0; top: 100%; margin: 12px 0 0 12px;display: block; }
nav ul li ul li{margin: 0; float: none; padding: 0 0.6em;height: 0;overflow:hidden; -moz-transition: .3s;-webkit-transition: .3s;-o-transition: .3s;-ms-transition: .3s;transition: .3s;}
nav ul .drop::before{content: "\f107";font-family: FontAwesome; margin: 0 0.1em 0 0;color: #FFFFFF;}
/*nav ul li.drop:hover::before{content: "\f106";font-family: FontAwesome; margin: 0 0.1em 0 0;}*/
nav ul li:hover ul li{overflow: visible; height: 24px;}

.active{}
.active #logo .logo-svg{fill: #2D2D2D;}
.active nav a:link,.active nav a:hover,.active nav a:visited{ color: #2D2D2D; text-decoration: none;}

#menu_clyde,#menu_clyde ul li{width: 4.5em; }
#menu_clyde ul li{width: 4.0em; }
#menu_clydesports{width: 9.5em; }
#menu_clydesports ul li{width: 8.0em; }
#menu_hudson ul li,#menu_galway ul li{width: 11.0em; }
#menu_georgia ul li{width: 8.0em; }


/* レイアウト
----------------------------------------------- */
header{position: absolute; top: 0; width: 100%; z-index: 9999; background: rgba(255, 255, 255, 0.0); padding: 0 0 24px;}
header.active{background: rgba(255, 255, 255, 1.0)}
header.product{ border-bottom: 1px solid #000;}
#main{ margin-top: 200px;}
.top+#main{ margin-top: 0px;}
.content{ max-width: 1125px; width: 98%; margin: auto; }
.content920{ max-width: 920px; width: 98%; margin: auto; }
.content720{ max-width: 680px; width: 92%; margin: auto; }
.wrap{max-width: 1240px; width: 100%;margin: auto;background: #FFF; }
footer{ background:#eaeaea; padding: 60px 0 0 0; font-family: 'Roboto', sans-serif; }
footer::after{clear: both; display: block; content: ""; height: 0;}
footer ul li{ float: left; margin: 0 1.0em 0 0;}
#findus{ padding: 36px 0;}
#findus ul{float: right; padding: 0 1.0em 0.6em 0;}
#findus::after{clear: both; display: block; content: ""; height: 0;}
#findus ul li{float: left; margin: 0 0.5em;}
#findus ul li a:link,#findus ul li a:visited,#findus ul li a:hover{ color: #3f3c3c;}
#page-top{ position: fixed; bottom: 24px; right: 24px; color: #FFF; z-index: 999;}
.footerinfo{font-size: 0.9em; margin-bottom: 1.0em }


/* TOP
----------------------------------------------- */
#topvideo{overflow: hidden; text-align: center; position: relative; margin: auto; height: 768px; width: 100%;background: url(../img/hero_ver01.jpg) no-repeat center center #3f3c3c;background-size: cover; opacity: 0;}
/*#topvideo.ver1{ }
#topvideo.ver2{background: url(../img/hero_ver02.jpg) no-repeat center center; background-size: cover; }
#topvideo.ver3{background: url(../img/hero_ver03.jpg) no-repeat center center; background-size: cover; }
#topvideo.ver4{background: url(../img/hero_ver04.jpg) no-repeat center center; background-size: cover; }*/
#main video{  max-width: 1240px;  width:100%; height: auto !important;width: auto !important;}
#main video source{width: 100%; margin: 0; background: none; }

#polina { position: absolute; top:0; right: 0; padding: 0 1% 0 0; }

#top-about {max-width: 1240px; width: 100%;margin: 20px auto;background: url(../img/aboutus_bg.jpg) no-repeat;  background-size: cover; padding: 100px 0;  z-index: 10; position: relative;  }

#top-about h2{ float: left;margin: 0 0 0 24px;}
#top-about .summary{ color: #FFF; font-size: 1.1em; line-height: 2.2em; width: 56%; float: right; }
#top-about .summary p.jp{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif; letter-spacing: 0.1em; }
#top-about .summary p{ margin-bottom: 2.6em; text-shadow: #000 1px 1px 1px;font-family: 'Noto Serif',serif; }
#top-about::after{clear: both; display: block; content: ""; height: 0;}
#top-about h3{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif; letter-spacing: 0.2em;  margin-top: 100px; font-size: 1.2em; border-top: 1px solid #FFF; padding: 20px 0 24px;}
#top-feed { font-size: 0.9em;}
#top-feed a:link,#top-feed a:hover,#top-feed a:visited{color: #FFF;}
#top-feed li{ line-height: 1.3em; margin: 0 0 1.8em 0;}
#top-feed .date{padding: 0 0 0 0.8em; font-size: 0.9em;}

#top-products{ font-family: 'Roboto', sans-serif;  }
#top-products .content{ background: #FFF;  }
#top-products .content::after{clear: both; display: block; content: ""; height: 0;}
#top-products h2,#top-products h3,#top-products h4{font-weight: 400; letter-spacing: 0.05em;text-align: center;}
#top-products h2{font-size: 2.4em;   }
#top-products h3{font-size: 1.6em; }
#top-products h4{font-size: 1.2em;}
#top-products::after{clear: both; display: block; content: ""; height: 0;}
#top-products .category{margin: 2.0em auto 8.0em; }
.product h3{ font-weight: 400; text-align: center;}
.product img{ width: 100%; height: auto;}
.product{ width: 30%; margin: 0 1.5% 6.0em; float: left;}


.copyright{ float: right; color: #121212; text-align: right; font-size: 0.8em; padding-bottom: 1.6em;}

/* about
----------------------------------------------- */
.about{ font-family: serif; background: url(../img/about-background.jpg) no-repeat; background-size: cover; padding: 6.0em 5%; color: #FFF; }
.about h1{font-size: 1.8em; margin: 0 0 2.0em}
.about p{ margin-bottom: 4.0em; line-height: 2.0em; font-size: 1.6em;}

/* garments
----------------------------------------------- */

.garments{ width: 100%; background: #FFF; min-height: 70vh;min-height: -webkit-calc(100vh - 340px); margin: 60px 0 0 0 ;}
.garments .left{ width: 50%; max-width: 450px; float: left;}
.garments .right{float: right; text-align: left;width: 50%;}
.garments::after{clear: both; display: block; content: ""; height: 0;}

#mainphoto{ width: 100%; max-width: 446px; } 
#mainphoto img,#thumbnail img{ max-width: 100%; width:100%; height: auto;}
#thumbnail img{border: 1px solid #DDD; }
#thumbnail{ margin: 8px 0 0 0;}
/*#thumbnail li{ width: 12%; padding:0; float: left; margin: 0 1.32% 3px;}
#thumbnail li:first-child,#thumbnail li:nth-child(8n){margin-left: 0; }
#thumbnail li:nth-child(7n){margin-right: 0;}*/
.garments .right h1{ margin: 24px 0 0 8px; font-size: 1.6em; letter-spacing: 0.1em; font-family: 'Roboto', sans-serif;font-weight: normal; }
.garments .right h3{ font-weight: normal; font-size: 0.96em;margin: 8px 0 0 16px;}
.garments .right h4{ float: left; font-weight: normal;margin: 0 3px 0 0;}
.garments .right h4::after{content: ":"; margin: 0 0.3em;}
.garments .right .made h4::after{content: ""; margin: 0 0;}
.garments .right .materiallist{clear: both; margin: 0 0 0.6em 0.6em; }
.garments .right .materiallist li{margin: 0;}
.garments .right .materiallist::after,.garments .right .made::after,.garments .right .sizelist::before{clear: both; display: block; content: ""; height: 0;}
.garments .right .caution h3{margin: 0;}
.caution{ font-size: 0.86em; margin: 1.0em 0.8em;}
.garments .price{margin: 0px 0 0 8px; font-weight: bold; display: none;}
.garments .info{ margin: 24px 0 0 8px;font-size: 0.96em;}
.garments .right .sizelist{ }
.garments .right .made{ margin-top:0.6em; }
.garments .info h3{ float: left; margin: 0 1.0em 0 0;}
.garments .sizeguide{margin: 24px 0 0 0px;}
.garments .sizeguide h3{ font-weight: normal;font-size: 0.96em;margin: 0 0 0 8px;}
.garments .sizeguide h3::after{content: "\f107";font-family: FontAwesome; margin-left: 2px;}
.garments .sizeguide > ul{ background: #EFEFEF; padding: 18px; font-size: 0.9em; display: none;clear: both; content: ""; }
.garments .sizeguide > ul > li{ margin-bottom: 1.0em;}
.garments .sizeguide ul li h5{font-size: 0.96em;}
.garments .sizeguide .sizenote{ margin-top: 1.0em;}
.garments .sizeguide .sizenote h5{margin-bottom: 0.6em;}
.garments .sizeguide .sizenote .imgleft{ float: left;  margin: 0 1.0em 0 0;}
.garments .sizeguide .sizenote ul{ margin: 0 0 0 0; overflow: hidden;}
.garments .sizeguide .sizenote ul li span{font-family: 'Roboto', sans-serif;font-weight: bold; padding: 0 0.8em 0 0;}

.garments .actions{}
.garments .actions::before{clear: both; display: block; content: ""; height: 0;}
.garments .actions{margin:60px 0 0 0;}
.garments .button a,.garments .button_buy a{display: block;  padding: 0.6em 1.0em;  color: #FFF; text-align: center; width: 200px;  font-family: 'Roboto', sans-serif; margin: 0 0 12px;}
.garments .button_buy a{ background: #1361CA;}
.garments .button a{ background: #000000;}
.garments .button a:hover,.garments .button_buy a:hover{ opacity: 0.6;}


.flex-control-thumbs{width: 100%; max-width: 446px;margin: 8px 0 0 0; clear: both;}
.flex-control-thumbs li{ width: 12%; height:auto; padding:0; float: left; margin: 0 1.32% 6px;}
.flex-control-thumbs li:first-child,.flex-control-thumbs li:nth-child(8n){margin-left: 0; }
.flex-control-thumbs li:nth-child(7n){margin-right: 0;}
.flex-control-thumbs li img{max-width: 100%; width:100%; height: auto;border: 1px solid #DDD;}

.overseas{ clear: both;  font-size: 0.84em;  color: #777; margin: 48px 0 72px 0;}
.overseas .paypallogo{float: left; margin: 0 1.0em 0 0; } 
.overseas h5{  font-weight: normal;}
.overseas ul { overflow: hidden;}
.overseas ul li{ margin-bottom: 1.0em;}

/* contact & privacypolicy
----------------------------------------------- */
.contact,.privacypolicy{width: 100%; background: #FFF; min-height: 70vh;min-height: -webkit-calc(100vh - 340px); margin: 60px 0 0 0 ;}
.contact textarea,.contact input[type="text"]{ border: 1px solid #DDD; padding: 0.3em; min-width:  16.0em; margin: 0 1.0em 0 0;}
.contact input[type="submit"],.contact input[type="reset"]{background: #000000; color: #FFF; text-align: center; width: 100px;  font-family: 'Roboto', sans-serif; padding: 0.4em; border: none; cursor: pointer;}
.contact input[type="reset"] {background: #999999;}
.button_submit{ text-align: center; margin: 1.0em auto;}
.privacypolicy{ padding: 0 0 100px 0 ;}
.privacypolicy h1,.privacypolicy h2{ letter-spacing: 0.1em; font-family: 'Roboto', sans-serif;font-weight: 500; font-size: 1.2em; margin-bottom: 1.0em;}
.privacypolicy ol{ margin: 1.0em 2.0em;}
.privacypolicy ol li{list-style: decimal; margin-bottom: 2.0em;}
.privacypolicy ol li ul{margin: 1.0em 2.0em;}
.privacypolicy ol li ul li{list-style:circle;}
.privacypolicy ol li ul li,.privacypolicy ol li ol li{margin-bottom: 0.0em;}

.contact h1{ font-size: 2.1em; margin-bottom: 1.0em; font-family: 'Roboto', sans-serif;font-weight: 500; }
.contact .lead{margin-bottom: 1.0em;}
.contact .caution{ font-size: 0.8em; margin: 0 0 1.0rem 0;}
.contact .mailform{ margin-top: 1.6em;}
.contact .requirekome{color: #CC0000; font-size: 0.8em;}
.contact .cautiontext{font-size: 0.8em;}



@media screen and (max-width : 768px){
	img{ max-width: 100%; height: auto;display:block}
	div,section,article{max-width: 100%;}
	.content{width: 100%; margin: auto; }
	.onlypc{ display: none;}
	footer .content{ width: 96%; margin: auto;}
	
	#logo{ margin: 24px 0 24px 0; }
	#logo .logo-svg{ display: block; margin: auto ; width: 140px; height: auto;}
	.open #logo{z-index: 9999; }
	.open #logo .logo-svg{fill: #000000;}
	#topvideo{ background: url(../img/video_bg.jpg) center top; background-size: cover; height: 70vh;}
	#main{ margin-top: 0;}
	/**/
	.hamburger-menu {
	display: inline-block;
	height: 100px;
	padding: 18px 18px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	z-index: 999;
	position: absolute;  top: 0; right: 0;
	}
	.hamburger-menu:hover {
	cursor: pointer;
	}
	.hamburger-menu .menu-item {
	background: #FFFFFF;
	display: block;
	height: 2px;
	margin: 0 0 10px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	width: 40px;
	}
	.active .hamburger-menu .menu-item{
		background: #000000;
	}
	.hamburger-menu.open .menu-item {
	margin: 0 0 6px;
	background: #000000;
	}
	
	.hamburger-menu.open .menu-item:first-child {
	-webkit-transform: rotate(45deg);
	      transform: rotate(45deg);
	-webkit-transform-origin: 8px;
	      transform-origin: 8px;
	}
	.hamburger-menu.open .menu-item:nth-child(2) {
	opacity: 0;
	}
	.hamburger-menu.open .menu-item:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	 transform: rotate(-45deg);
	-webkit-transform-origin: 6px;
	transform-origin: 8px;
	}
	/**/
	nav a:link, nav a:hover, nav a:visited{color: #2D2D2D}
	nav ul{display: block; }
	nav ul::before{ }
	nav ul li,nav ul li ul li{line-height: 2.0em; font-size: 1.00rem;}
	nav ul li a{color: }
	nav ul,nav ul li{ float: none;margin: 0; position: static; margin: 0;padding: 0;}
	nav ul li ul { position: static; z-index: 1; text-align: center;margin: 0;}
	nav ul li ul li{height: auto;padding: 0 ;position: static; margin: 0; }
	nav ul .drop::before{ margin: 0 0.1em 0 -1.2em;}
	#menu_clyde,#menu_clyde ul li,#menu_clyde ul li,#menu_clydesports,#menu_clydesports ul li,#menu_clydesports ul li,#menu_hudson ul li,#menu_galway ul li,#menu_georgia ul li{ width: auto;}
	nav ul li:hover ul li{overflow: visible; height: auto;}
	.mobile-header-nav{ z-index: 999; background: rgba(255,255,255,0.99); width: 100%; position: absolute; margin: 0; display: none; top: 0; padding: 80px 0 0 0;height: 100vh;}
	.mobile-header-nav li{ text-align: center; height: auto; padding-bottom: 1.0em;}
	.mobile-header-nav li ul li{padding-bottom: 0.0em;}
	.mobile-header-nav.open span{background: #2D2D2D;}
	
	/**/
	
	#top-about h2{ float: none;margin: 0 0 48px 0; text-align: center;}
	#top-about h2 img{ margin: auto;width: 260px; height: auto;}
	#top-about .summary{ width: 90%; float: none; margin: auto; }
	.product{ width: 90%; margin: 0 auto 6.0em; float: none;}
	
	/*garments*/
	.wrap{ padding: 0;}
	.garments{ margin: 20px 0 0 0 ; padding: 0 0 100px 0;}
	.garments .content{ width: 96%; margin: auto;}
	.garments .left{ width: 100%; float: none;max-width: none;}
	#mainphoto, .flex-control-thumbs{width: 100%; max-width: none;}
	.garments .right{float: none; text-align: left;width: 100%;}
	#mainphoto,#thumbnail,.flex-control-thumbs{ width: 100%; } 
	.garments .button a,.garments .button_buy a{ margin:0 auto 12px; padding:1.0em 1.0em; }
	.overseas{margin-bottom: 0;}
	#thumbnail{ margin-top: 80px;}
	
	.about{padding-top: 140px; }
	
	/*contact*/
	.contact .mailform{ margin-top:2.6em; }
	.mailform{ }
	.mailform th{ }
	.mailform th,.mailform td{ display: block;padding: 0;}
	.contact textarea,.contact input[type="text"]{  padding: 0.3em 0.3em 0.6em; width: 10.0em; max-width: 100%; margin: 0 0 0.2em 0; font-size: 1.3em;-webkit-appearance: none; }
	.contact input[type="submit"],.contact input[type="reset"]{ border-radius: 0;  -webkit-appearance: none;}
	
	
}