@charset "utf-8";
:root {
	--colFont:#313131;
	--colLink:#477C57;
	--colLinkHover:#629d74;
}
/* CSS Document */
body{
	font: 13px/1.3846 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
	margin:0;
	color: var(--colFont);
	display: block;
}

img{
	outline:none;
	border-style:none;
}

a{
	color: var(--colLink);
	text-decoration: none;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}
a:visited{
	/*color:blue;*/
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}
a:hover {
	color: var(--colLinkHover);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.icnSVG {
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

ul,li {
	list-style: none;
}

.b {
	font-weight: bold;
}

.small {
	font-size: 60%;
	font-weight: normal;
}
.bold {
	font-weight: bold;
	font-size: 1.1em;
}

.txt-c {
	text-align: center;
}
.txt-l {
	text-align: left;
}
.txt-r {
	text-align: right;
}

.st0{fill:#759F4B;}
.st1{fill:#414B41;}


dl.gaiyou {
	line-height: 1.8em;
	margin: 1em 0;
}

dl.gaiyou dt{
	font-size: .8em;
	font-weight: 500;
}

dl.gaiyou dd{
	margin-bottom: 1.6em;
}

ul.list-dot {
	margin-left: 1.4em;
	margin-bottom: .4em;
}
ul.list-dot li {
	list-style: disc;
}

/*
h2.h2 {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 32px;
	font-family: 'Georgia', serif;
	font-weight: bold;
	font-size: 23px;
	letter-spacing: 0.02em;
	line-height: 28px;
	color: #414b41;
}
h2.h2:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -10px;
	display: inline-block;
	width: 32px;
	height: 3px;
	background-color: #759F4B;
}

.wf-active h2.h2 {
	font-family: 'Zilla Slab', serif;
	
}
*/
.Font-serif {
	font-family: 'Georgia', serif;
	font-weight: bold;
	letter-spacing: 0.02em;
}
.wf-active .Font-serif {
	font-family: 'Vollkorn', serif;
}

.icon {
	font: normal bold 14px/1.5 'Georgia', serif;
	letter-spacing: -30;
	color: #fff;
	text-align: center;
	vertical-align: bottom;
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	margin-right: 2px;
}
.wf-active .icon {
	font-family: 'Zilla Slab', serif;
	
}

.icnSVG {
	display: block;
	width: 24px;
	height: 24px;
	fill:#fff;
	float: left;
	margin-right: 12px;
}
.icnSVG.logo_line {
	width: 62px;
	height: 24px;
}

/****inner****/
.inner {
	box-sizing: border-box;
	padding: 2.5% 2.5% 8%;	/*余白の指定 2.5%*/
	overflow: hidden;	/*おまじない*/
	max-width: 1200px;
	margin: 0 auto;
}


.sec .inner {
	padding: 64px 24px 80px;
}

#sec-companyinfo .inner {
    max-width: 800px;
	padding: 2.5% 4% 8%;	/*余白の指定 2.5%*/
}


/*****HEADER*****/
header{
	display: block;
	width:100%;
	overflow: hidden;
	position: fixed;
	padding: 16px;
	background: rgba(255, 255, 255,.98);
	z-index: 10;
	text-align: center;
}
header h1 {
	line-height: .8;
}
header h1 .logo-OWLTY{
	width: 94px;
	height: 33px;
}
header p{
	font-size:100%;
	color:#313131;
	float: left;
}


/*****BRANDING*****/
#branding{
	width: 60%;	/*横幅指定*/
	margin-left: 20%; /*左端から20%右側に動かす*/
	background-color: #313131; /*背景色の指定*/
	margin-bottom: 20px;
	overflow: hidden; /*おまじない*/
}
#branding p{
	color: #fff; /*文字色の変更*/
	font-size: 120%; /*フォントサイズの調整*/
	letter-spacing: 10px; /*文字と文字の間隔をあける*/
	line-height: 300px; /*行間の指定（ブランディングの高さを決める）*/
	padding-left: 3%; /*文字の左側に余白をあける*/
}

/*****NAV*****/
nav{
	display: block;
	overflow: hidden;
}
nav ul{
	margin: auto;
	list-style: none;
}
nav a{
	text-decoration: none;	/*ブラウザ標準のリンク装飾をオフに*/
	color:#313131;
	/*font-size: 110%;*/
	font-weight: 500;
}

#mainMenu {
	/*
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	*/
}
#mainMenu.on {
	/*height: auto;
	/*height: calc(100vh - 139px);*/
}
#mainMenu ul.nav-menu{
	display: none;
	padding: 24px 0;
	font-size: 1.3em;
	overflow: hidden;
}
#mainMenu.on ul.nav-menu{
	display: block;
}
#mainMenu ul li {
	margin: 20px 0;
	line-height: 1.2em;
}
#mainMenu ul.BrandList {
	font-style: italic;
}
#mainMenu ul.BrandList li{
	font-size: .9em;
	margin: 12px 0;
}
#mainMenu ul.BrandList li a {
	color: #888;
}
#mainMenu ul.BrandList li a:hover {
}
#menuButton{
	position: absolute;
	top: 20px;
	left: 16px;
	cursor: pointer;
	/*z-index: 10;*/
	display: block;
	line-height: 0;
	/*margin: 33px 6px 0 0;*/
}

#menuButton,
.menuIcon {
	display: inline-block;
	box-sizing: border-box;
}

#menuButton .menuIcon {
	position: relative;
	width: 30px;/*24px*/
	height: 30px;/*24px*/
}

#menuButton .menuIcon span{
	position: absolute;
	width: 30px;/*21px*/
	height: 3px;
	background: #333;
	top: 0;
	left: 0;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

#menuButton:hover .menuIcon span {
	background: #7f8080;
}
#menuButton:hover .menuIcon span:nth-of-type(3){
	width: 24px;
	left: 6px;
}
#menuButton.on:hover .menuIcon span:nth-of-type(1),
#menuButton.on:hover .menuIcon span:nth-of-type(2){
	width: 22px;
	left: 1px;
}

#menuButton.on .menuIcon span {
	top: 10px;
}
#menuButton.on .menuIcon span:nth-of-type(1) {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}
#menuButton.on .menuIcon span:nth-of-type(2) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
#menuButton.on .menuIcon span:nth-of-type(3) {
	opacity:0;
}
#menuButton .menuIcon span:nth-of-type(2) {
	top: 10px;
}
#menuButton .menuIcon span:nth-of-type(3) {
	top: 20px;
}
#baseMenu > ul > li a {
	background-color: transparent;
	    border-radius: 0px;
	    box-shadow: none;
	    cursor: pointer;
	    display: inline;
	    -webkit-font-smoothing: antialiased;
	    margin: 1px 0 0;
	    padding: 0;
	    text-decoration: none;
	    -webkit-transition-duration: 0.2s;
	    -moz-transition-duration: 0.2s;
	    -o-transition-duration: 0.2s;
	    transition-duration: 0.2s;
	    border: none;
}

/* unit link */
.unit-link {
    padding: 0 1%;
	/*
	position: relative;
    z-index: 1;*/
}

.unit-link a {
	color: var(--colFont);
}
.unit-link a:hover {
	color: var(--colLinkHover);
}
/*
.unit-link a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent:-999px;
    z-index: 2; 
}
*/

.unit-link img {
	width: 100%;
}


/*
#nav {
	position: fixed;
	top: -100vh;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	overflow: hidden;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, .9);
	pointer-events: auto;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: ease-in-out 0.25s;
	-moz-transition: ease-in-out 0.25s;
	transition: ease-in-out 0.25s;
	
}
body.notScroll #nav {
	top: 0;
	opacity: 1;
	visibility: visible;
}
#nav .inner {
	position: static;
	text-align: center;
}
#nav .menuList li {
	font-size: 1.846em;
}
#nav .menuList li a {
	font-weight: bold;
	line-height: 1.75em;
}
#nav .reserveList, #nav .snsList {
	margin: 32px auto;
}
#nav .snsList li {
	display: inline-block;
}
#menuButton{
	position: fixed;
	top: 20px;
	right: 24px;
	cursor: pointer;
	z-index: 100;
}
*/

#mainContent {
	font-size: 15px;
}
.sub #mainContent {
	padding-top: 65px;
}
#mainContent h2 {
	margin: 32px 0 48px;
}

.sub #mainContent h2 {
	font-size: 2em;
	letter-spacing: .05em;
	font-style: italic;
}
.sub .category-title {
	font-size: .865em;
}
.sub .category-title .small {
	font-size: .8em;
	font-weight: normal;
	margin-left: 8px;
}
/*
#menuButton,
#menuCloseButton {
	position: fixed;
	top: 24px;
	right: 24px;
	cursor: pointer;
}
*/

#menuButton,
#menuCloseButton,
.menuIcon {
	display: inline-block;
	/*transition: all .4s;*/
	box-sizing: border-box;
}

#menuButton .menuIcon,
#menuCloseButton .menuIcon {
	position: relative;
	width: 24px;
	height: 24px;
	/*
	float: left;
	margin: -16px 0 0;*/
}

#menuButton .menuIcon span,
#menuCloseButton .menuIcon span {
	position: absolute;
	width: 24px;
	height: 3px;
	background: #333;
	top: 0;
	left: 0;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
	/*
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	*/
}

#menuButton:hover .menuIcon span {
	background: #7f8080;
}
#menuButton:hover .menuIcon span:nth-of-type(3){
	width: 16px;
	left: 0;
}

#menuButton.on .menuIcon span {
	top: 10px;
}
#menuButton.on .menuIcon span:nth-of-type(1) {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}
#menuButton.on .menuIcon span:nth-of-type(2) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}
#menuButton.on .menuIcon span:nth-of-type(3) {
	opacity:0;
}

#menuButton .menuIcon span:nth-of-type(2) {
	top: 10px;
}
#menuButton .menuIcon span:nth-of-type(3) {
	top: 20px;
}
#menuCloseButton .menuIcon span {
	top: 10px;
}
#menuCloseButton .menuIcon span:nth-of-type(1) {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}
#menuCloseButton .menuIcon span:nth-of-type(2) {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

/*
body.notScroll{
	overflow: hidden;
	height: 100vh;
	overscroll-behavior: none;
}
*/

/*
#menuButton .menuIcon:before {
	content: "";
	display: block;
	position: absolute;
	top: -14px;
    left: -10px;
    width: 52px;
    height: 52px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-ms-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	background-color: rgba(255,255,255,.98);
}
*/
/*****WRAPPER*****/
#mainContent .wrapper {
	background: #fff;
}
#mainContent .wrapper:nth-child(2n+1) {
	background: #F7F6F4;
}
/*****ARTICLE*****/
section{
	display: block;
	overflow: hidden;
}
article{
	/*width: calc(50% - 15px);*/
	/*padding: 2.5% 2.5% 8%;	/*余白の指定 2.5%*/
	overflow: hidden;	/*おまじない*/
	/*
	max-width: 1200px;
	margin: 0 auto;
	*/
}

article h3 {
	
}
article .btn{
}
article .btn:hover{
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
	overflow: hidden;
}


.articleContet {
	width: 80%;
	float: right;
}


/* company info */

#sec-companyinfo .unit-txt{
	font-weight: 500;
	line-height: 2.6;
} 

#sec-companyinfo .unit-txt a {
	text-decoration: underline;
}

#sec-companyinfo .unit-txt img{
	width: 100%;
	height: auto;
	margin-bottom: 16px;
}

dl.stockist {
	margin: 32px 0;
}

.stockist dt {
	font-size: 1.3em;
	font-weight: 500;
}

.stockist .shopname {
	font-weight: 500;
	margin-right: 8px;
}

.stockist .phonenumber {
	font-weight: 400;
	font-style: italic;
}
/* contact */
#sec-contact .mailto {
    font-size: 130%;
    font-weight: bold;
    letter-spacing: .1em;
    text-decoration: underline;
}

/* footer */
footer{
	color: #959EA7;
	width: 100%;
	background-color: #fff;
}
footer a {
	color: #858c93;
}
footer a:hover {
	color: #555;
}
footer .inner {
	padding: 32px 16px;
	display: -webkit-flex;
	display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
}
footer h3 {
	margin-bottom: 24px;
	color: #414B41;
}
footer address{
	color: #fff;
	font-style: normal;
}

footer ul {
	margin-bottom:24px;
}
footer li{
	font-size: .846em;;
	line-height: 1.818em;
}
footer li a {
	font-weight: bold
}
footer .snsList li {
	display: inline-block;
}
footer .copyright {
	line-height: 32px;
}
footer .logo-Insta {
	height: 32px;
	width: 32px;
}

.icon-window {
	height: 23px;
	width: 20px;
	vertical-align: text-bottom;
}

a .icon-window {
	fill: var(--colLink);
}
a:hover .icon-window {
	fill: var(--colLinkHover);
}
/*****SECTION****/
/* Photo */

.swiper-container {
    width: 100%;
    height: 100vh;
}
.swiper-container .swiper-wrapper .swiper-slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
	color: #fff;
}

/*
#sec-photo {
	padding-top: 59px;
	background: #000;
}
#div-photo {
	overflow: auto;
	scroll-snap-type: y mandatory;
	height: calc(100vh - 59px);
	background: url(../img/hp.JPG) no-repeat center/cover #fff;
}
*/
/* pricelist */
/*dl.table,
.table dt,
.table dd {
  box-sizing: border-box;
}
dl.table {
}
.table dt,
.table dd {
  padding: 10px 10px 0 10px;
}
.table dt {
  width: 40%;
  float: left;
}
.table dd {
	margin-left: 40%;
	padding-bottom: 10px;
}
.table dd:after {
  content: '';
  display: block;
  clear: both;
}*/

.flex-conteiner {
	display: -webkit-flex;
	display:flex;
}

.unit-brand {
}

.unit-brand h3{
	font-style: italic;
	margin: 24px 0;
}


dl.table,dl.contactList{
  display: -webkit-flex;
  display:flex;
  flex-wrap: wrap;
  line-height: 1.538em;
  margin-bottom: 24px;
  color: #414B41;
}
.table dt{
  width: 65%;
  padding: 6px 8px 6px 0;
}
.table dd{
  padding: 6px 8px;
  margin: 0;
  width: 35%;
  box-sizing: border-box;
  text-align: right;
}
.iconList {
	margin-left: 4px;
}
.expIcon{
	color: #9FA795;
}
.expIcon li {
	margin-bottom: .769em;
}
.expIcon li i {
	margin-right: .769em;
}
.shopInfo {
	color: #414B41;
	margin-bottom: 40px;
}
.shopInfo dt{
	font-weight: bold;
	font-size: 11px;
	line-height: 1.636em;
}
.shopInfo dd {
	margin-bottom: 1.3846em;
}
.shopInfo li {
	margin-bottom: 2px;
}
dl.contactList {
	margin-bottom: 16px;
}

#map {
    position: relative;
    width: 100%;
	margin-top: 40px;
}
#map:before {
    content:"";
    display: block;
    padding-top: 120%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
#contentMap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

dl.contactList {
	font-weight: bold;
}
.contactList dt{
  width: 20%;
  padding: 4px 0;
}
.contactList dd{
  padding: 4px 0 4px 16px;
  margin: 0;
  width: 80%;
  box-sizing: border-box;
}
.reserveList {
	margin-bottom: 16px;
}
.btnReserve {
	letter-spacing: .16em;
	color: #fff;
	font-weight: bold;
	line-height: 24px;
	/*vertical-align: middle;*/
	display: inline-block;
	border-radius: 32px;
	/*margin-right: 2px;*/
	overflow: hidden;
	padding: 8px 16px;
	background: #477C57;
	margin-bottom: 8px;
}
.btnReserve:hover{
	color: #fff;
	background: #629d74;
}
.snsList .icnSVG {
	fill: #000;
}
.snsList .icnSVG:hover {
	fill: #477C57;
}
.snsList .icnSVG.logo_Insta,.snsList .icnSVG.logo_line {
	fill-rule:evenodd;clip-rule:evenodd;
}

/* recruit */
#sec-recruit p {
	line-height: 1.846em;
}