@charset "UTF-8";

/* ===============================================
Initializr Styles
=============================================== */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

/* ===============================================
Reset
=============================================== */
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure {margin:0; padding:0;}
ul,ol {list-style:none;}

/* ===============================================
Web Font
=============================================== */
/* Noto Sans CJK JP */
@font-face {
	font-family:'NotoSansCJKjp';
	font-style:normal;
	font-weight:400;
	src:local('Noto Sans CJK JP Regular'),
		url(../fonts/NotoSansCJKjp-Regular_sub.woff) format('woff');
}
@font-face {
	font-family:'NotoSansCJKjp';
	font-style:normal;
	font-weight:500;
	src:local('Noto Sans CJK JP Medium'),
		url(../fonts/NotoSansCJKjp-Medium_subset.woff) format('woff');
}
@font-face {
	font-family:'NotoSansCJKjp';
	font-style:normal;
	font-weight:700;
	src:local('Noto Sans CJK JP Bold'),
		url(../fonts/NotoSansCJKjp-Bold_sub.woff) format('woff');
}
@font-face {
	font-family:'Lato';
	font-style:normal;
	font-weight:300;
	src:local('Lato Light'),
		url(../fonts/Lato-Light_sub.woff) format('woff');
}
.fontLato{font-family:"Lato", sans-serif; font-weight: 300;}

/* ===============================================
Common Styles
=============================================== */
body {background:#fff; font-size:13px; color:#000; font-family: "NotoSansCJKjp", 'Noto Sans JP', "Noto Sans CJK JP", sans-serif;}
* {
-webkit-backface-visibility:hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/* img */
img {max-width:100%; height:auto;}
/* a:link */
a:link {text-decoration:none; color:inherit;}
a:visited {color:inherit;}
a:hover {color:inherit;}
a:active {color:inherit;}
/* color */
.colorWhite {color:#fff !important;}
.colorBlack {color:#555 !important;}
.colorGray {color:#666 !important;}
.colorRed {color:#c00 !important;}
/* background */
.bgClr {background-color:transparent !important;}
.bgWhite {background-color:#fff !important;}
.bgBlack{background-color:#000 !important;}
.bgGray {background-color:#f1f0e9 !important;}
.bgCccc{background:#ccc; padding:5px;}
/* sup/sub */
sub, sup {font-size:80%; line-height:0; position:relative;}
sup {top:-0.5em;}
sub {bottom:-0.25em;}
/* font-size */
.size30 {font-size:30px !important;}
.size28 {font-size:28px !important;}
.size26 {font-size:26px !important;}
.size24 {font-size:24px !important;}
.size22 {font-size:22px !important;}
.size20 {font-size:20px !important;}
.size18 {font-size:18px !important;}
.size16 {font-size:16px !important;}
.size15 {font-size:15px !important;}
.size14 {font-size:14px !important;}
.size13 {font-size:13px !important;}
.size12 {font-size:12px !important;}
.size11 {font-size:11px !important;}
.size10 {font-size:10px !important;}
/* margin */
.mg0 {margin:0 !important;}
.mt0 {margin-top:0 !important;}
.mb0 {margin-bottom:0 !important;}
.ml0 {margin-left:0 !important;}
.mr0 {margin-right:0 !important;}
/* add margin */
.mt50 {margin-top:50px !important;}
.mt40 {margin-top:40px !important;}
.mt30 {margin-top:30px !important;}
.mt20 {margin-top:20px !important;}
.mt10 {margin-top:10px !important;}
.mt05 {margin-top:5px !important;}
.mb50 {margin-bottom:50px !important;}
.mb40 {margin-bottom:40px !important;}
.mb30 {margin-bottom:30px !important;}
.mb20 {margin-bottom:20px !important;}
.mb10 {margin-bottom:10px !important;}
.mb05 {margin-bottom:5px !important;}
.ml30 {margin-left:30px !important;}
.ml20 {margin-left:20px !important;}
.ml10 {margin-left:10px !important;}
/* padding */
.pd0 {padding:0 !important;}
.pt0 {padding-top:0 !important;}
.pb0 {padding-bottom:0 !important;}
.pl0 {padding-left:0 !important;}
.pr0 {padding-right:0 !important;}
/* add padding */
.pt50 {padding-top:50px !important;}
.pt40 {padding-top:40px !important;}
.pt30 {padding-top:30px !important;}
.pt20 {padding-top:20px !important;}
.pt10 {padding-top:10px !important;}
.pt05 {padding-top:5px !important;}
.pb50 {padding-bottom:50px !important;}
.pb40 {padding-bottom:40px !important;}
.pb30 {padding-bottom:30px !important;}
.pb20 {padding-bottom:20px !important;}
.pb10 {padding-bottom:10px !important;}
.pb05 {padding-bottom:5px !important;}
/* width */
.wAuto {width:auto !important;}
.w100p {width:100% !important;}
.w95p {width:95% !important;}
.w90p {width:90% !important;}
.w85p {width:85% !important;}
.w80p {width:80% !important;}
.w75p {width:75% !important;}
.w70p {width:70% !important;}
.w65p {width:65% !important;}
.w60p {width:60% !important;}
.w55p {width:55% !important;}
.w50p {width:50% !important;}
.w45p {width:45% !important;}
.w40p {width:40% !important;}
.w35p {width:35% !important;}
.w30p {width:30% !important;}
.w25p {width:25% !important;}
.w20p {width:20% !important;}
.w15p {width:15% !important;}
.w10p {width:10% !important;}
.w05p {width:5% !important;}
/* text-align */
.alignL {text-align:left !important;}
.alignC {text-align:center !important;}
.alignR {text-align:right !important;}
/* list-style */
.listDisc {padding-left:1.5em;}
.listDisc > li {list-style:disc;}
.listDecimal {padding-left:2.0em;}
.listDecimal > li {list-style:decimal;}
.listlowerAlpha {padding-left:2.0em;}
.listlowerAlpha > li {list-style:lower-alpha;}
/* notes */
.notes_01 {padding-left:1em; text-indent:-1em !important;}
.notes_01_5 {padding-left:1.5em; text-indent:-1.5em !important;}
.notes_02_5 {padding-left:2.5em; text-indent:-2.5em !important;}
.notes_03 {padding-left:3em; text-indent:-3em !important;}
.notesClr {padding:0; text-indent:0 !important;}
/* float */
.clearB {clear:both !important;}
/* Other */
.clearfix:before,
.clearfix:after {content:" "; display:table;}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
::-moz-selection {background:#b3d4fc; text-shadow:none;}
::selection {background:#b3d4fc; text-shadow:none;}
hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}
audio,canvas,iframe,img,svg,video {vertical-align:middle;}
fieldset {border:0; margin:0; padding:0;}
textarea {resize:vertical;}
/* display */
/* .viewL-B,.viewL-I,.viewL-Ib {display:none !important;} */
/* .viewM-B,.viewM-I,.viewM-Ib {display:none !important;} */
.viewS-B,.viewS-I,.viewS-Ib {display:none !important;}
/* Form */
input,select {vertical-align:middle;}
input[type="text"],button,textarea {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
border:none; margin:0; padding:0; 
}
select {position:relative; top:-0.1em;}
/* placeholder */
:placeholder-shown {font-weight:normal; color:#bbb;}
::-webkit-input-placeholder {font-weight:normal; color:#bbb;}
:-moz-placeholder {font-weight:normal; color:#bbb;}
::-moz-placeholder {font-weight:normal; color:#bbb;}
:-ms-input-placeholder {font-weight:normal; color:#bbb;}
button:hover{opacity: 0.8;}

/* 装飾付きselectbox */
select{box-shadow: none; -webkit-appearance: none; appearance: none; border-radius:4px; border:solid 1px #ddd; padding:5px; width:100%; background:#fbfbfb; color:#787878;}
select option{color:#000;}
.slctWrap{position:relative; width:100%; max-width:200px; background:#fbfbfb;}
.slctWrap.min{width:30%; min-width:5em;}
.slctWrap::before{content:""; pointer-events:none; width:8px; height:8px; border:solid 4px #000; border-width:0 1px 1px 0; position:absolute; top:8px; right:12px; -webkit-transform:rotate(45deg); transform:rotate(45deg); z-index:5;}

/* 装飾付きチェックボタン */
.formCheck{position:relative; display:block;}
.formCheck .check{position:absolute; top:3px; left:1px; z-index:1;}
.formCheck::before{content:""; border-radius:4px; border:solid 1px #ddd; width:16px; height:16px; position:absolute; top:2px; left:0; z-index:2; background:#fff;}
.formCheck span{position:relative; display:block; padding-left:20px;}
.formCheck .check:checked + span::after{content:""; width:6px; height:13px; border:solid 1px #000; border-width:0 2px 2px 0; position:absolute; top:1px; left:4px; z-index:5; -webkit-transform:rotate(45deg); transform:rotate(45deg);}

/* 装飾付きradioボタン */
.formRadio input[type="radio"]{position:absolute; top:5px; left:1px; z-index:1;}
.formRadio{position:relative; margin:0 36px 0 0;}
.formRadio span::after, .formRadio span::before{content:""; border-radius:100%; position:absolute;}
.formRadio span{position:relative; padding-left:20px;}
.formRadio span::before{width:10px; height:10px; background:#fff; top:5px; left:3px; z-index:5; }
.formRadio span::after{width:14px; height:14px; border:solid 1px #707070; top:2px; left:0; background:#fff; z-index:3;}
.formRadio input[type="radio"]:checked + span::before{background:#3A8FFF;}
.formRadio input[type="radio"]:checked + span::after{border-color:#3A8FFF;}


/* ===============================================
All Styles (PC Size)
=============================================== */
/* Layout
----------------------------------------------- */
/* ----- common ----- */
#wrapper {position:relative; width:100%; margin:0 auto; background: #fff center 38px url(../img/ptn_koushi01.png); background-size: auto;}
.wrap {width:100%; margin:0 auto; max-width:1020px;}
.wrap.wrapS{width:85%; max-width: 840px;}
#wrapper.siteIndex{background-image: none;}

/* ----- header ----- */
#header {position:sticky; z-index:999; top:0; right:0; width: 100%; display: flex;}
#header.view{pointer-events: none;}
.siteIndex #header:not(.view){display: none;}
#header .headMenu{background: no-repeat transparent center top url(../img/common/subkv_01.jpg); width:100%; padding:25px 0 25px 30px; background-size: cover; height: 200px;}
/*.siteIndex #header .headMenu{background: none;}*/
#header.view .headMenu{background: none; padding:0 30px; pointer-events: none;}
#header.view .headMenu > *{pointer-events: auto;}
#header .logo{width: 150px; display: block;}
#header.view .logo{width: 120px; padding: 10px;}
#header #spMenuOpen{border:solid 3px #000; width: 40px; height: 40px; background: #fff; margin-left: auto; margin-right: 0; display: none;}
#header.view #spMenuOpen{display: block; position: absolute; top:10px; right: 10px;}
#header #spMenuOpen span, 
#header #spMenuOpen span::before, 
#header #spMenuOpen span::after{display: block; width: 24px; height: 2px; background-color: #000; border-radius: 50px;}
#header #spMenuOpen span{margin: auto; position: relative; }
#header #spMenuOpen span::before, #header #spMenuOpen span::after{content: ""; position: absolute; left:50%; transform:translateX(-50%);}
#header #spMenuOpen span::before{top:-6px;}
#header #spMenuOpen span::after{top:6px;}
#header #spMenuOpen.opened span{background-color: #fff;}
#header #spMenuOpen.opened span::before,
#header #spMenuOpen.opened span::after{top:50%; left:50%}
#header #spMenuOpen.opened span::before{transform: translate(-50%, -50%)rotate(45deg);}
#header #spMenuOpen.opened span::after{transform: translate(-50%, -50%)rotate(-45deg);}
#header #spMenu{display: flex; margin-left: auto; margin-right: 123px;}
#header.view #spMenu{display: none; border:solid 3px #000; position: absolute; top:47px; right: 10px; background-color: #fff; margin:0;}
#header #spMenu li{list-style: none; position: relative; width: 200px;}
#header:not(.view) #spMenu li:nth-child(1){z-index:3; top:30px; left:125px;}
#header:not(.view) #spMenu li:nth-child(2){top:-40px; left:50px; z-index:2;}
#header:not(.view) #spMenu li:nth-child(3){top:20px; z-index:1;}
#header #spMenu:hover li:nth-child(1){z-index:1}
#header #spMenu li:hover{z-index:5 !important;}
#header.view #spMenu li:hover{opacity: 0.8;}
#header #spMenu li a{display: block; padding:24px 15px; background-color: #fff; border: solid 3px #000; min-width: 142px; text-align: center; font-size: 19px;}
#header.view #spMenu li a{padding:10px 15px; border-width: 0; font-size: 16px;}
#header #spMenu li a:hover{opacity: 1;}
#header #spMenu .viewBlock{display: none;}
#header.view #spMenu .viewBlock{display: block;}

/* ----- topKv ----- */
#topKv {position:relative; width:100%;}
#topKv .kvBox{width: 100%; margin-bottom: 0;}
#topKv .kvBox picture{display: block;}
#topKv .kvBox picture img{width: 100%;}
#topKv .kvBox .kvImgBox:nth-child(n+2){display: none;}
#topKv .kvBox.slick-slider .kvImgBox:nth-child(n+2){display: block;}
#topKv .slick-dots{bottom:20px;}
#topKv .slick-dots li{width: 15px; height: 15px; margin:0 8px}
#topKv .slick-dots li button{width: 100%; height: 100%; border:solid 1px #ea5514; border-radius: 100%; background-color: transparent;}
#topKv .slick-dots li.slick-active button{background-color: #ea5514;}
#topKv .slick-dots li button::before{display: none;}
#topKv .menu{position: absolute; top:55px; left:56px}
#topKv .menu .box{width:200px; padding: 20px 5px; background-color: #fff; border:solid 5px #000; display: block; text-align: center; position: relative; font-size: 19px;}
#topKv .menu .box:nth-child(1){left:70px; z-index: 3;}
#topKv .menu .box:nth-child(2){top:-16px; z-index: 2;}
#topKv .menu .box:nth-child(3){top:-30px; left:40px; z-index: 1;}
#topKv .menu:hover .box:nth-child(1){z-index: 1;}
#topKv .menu .box:hover{z-index:5 !important; opacity: 1;}
#topKv .logo{position: absolute; bottom:50px; right: 40px; width: 28%; display: block; max-width: 250px;}
/* ----- #subKv ----- */
#subKv{}

/* ----- contents ----- */
#contents {min-height:300px;}
#contents.product{border:solid 3px #000; border-width: 4px 0; padding:0 0 40px;}
#wrapper:not(.siteIndex) #contents{padding: 10px 0;}
#wrapper #contents.product{background-color: transparent; border-bottom: none;}
#wrapper.siteIndex #contents{background: #fff center top url(../img/ptn_koushi01.png); padding:100px 0}
.bgWrap{padding:0.5px 0; margin:100px auto 0; padding-bottom: 50px; border:solid 4px #000; border-width: 4px 0;}

/* ----- footer ----- */
#footer{padding:0 0 95px; position: relative; border:solid 10px #000; border-width: 4px 0 10px; margin: 100px auto 0; background-color: #fff;}
#footer.topline{margin-top: 40px; background-color: #fff4f5;}
.siteIndex #footer.topline{margin-top:0;}
#footer .footermenu1{margin:50px auto 20px;}
#footer .footermenu1 li + li::before{content: "|"; margin:0 1em}
#footer .footermenu2{margin:40px auto 20px;}
#footer .footermenu2 li + li{margin-left:30px}
#footer .footermenu2 a{display: block; padding:25px 5px; width: 145px; background-color: #fff; border:solid 3px #000; text-align: center; font-weight: 500;}
#footer .logo{display: block; text-align: center;}

/* ----- pageTop ----- */
#pageTop {display:none; position:fixed; right:0; bottom:0; z-index:999;}
#pageTop span {display:none;}
#pageTop a {display:block; background:url(../img/btn_pagetop.png) no-repeat; background-size:41px; width:41px; height:41px; opacity:1;}
#pageTop a:hover {opacity:.7;}

/* ----- page - top ----- */
.topline{position: relative; margin: 100px auto; background-color: #fff4f5; padding:0 0 90px; border:solid 4px #000; border-width: 4px 0;}
.siteIndex #about{padding-bottom: 60px; margin-top:0}
/*.siteIndex #disasterInformation{padding-bottom: 65px;}*/
/*.topline::before{content: ""; display: block; width:100%; height: 115px; background: #fff center top repeat-x; background-size: contain; display: none;}
.siteIndex #about::before{height: 105px; background-image: url(../img/line01.jpg);}
.siteIndex #lineup::before {background-image: url(../img/line02.jpg);}
.siteIndex #disasterInformation::before {background-image: url(../img/line03.jpg);}
.siteIndex #shop::before {background-image: url(../img/line04.jpg);}
#footer.topline::before{background-image: url(../img/line05.png);}*/
/* #about */
#about .catch{font-size: 24px; line-height: 48px; text-align: center; margin: -20px auto 20px;}
#about .txtBox{font-size: 19px; line-height: 36px;}
#about .txtBox::before{content: ""; width: 95px; height: 50px; background: transparent center center no-repeat url(../img/img_glasses.png); background-size: contain; position: absolute; left:10%; top:40%; transform:translateY(-50%)}
/* #lineup */
#lineup{}
/* #shop */
#shop{margin-bottom: 0;}
#shop .map{width: 100%; max-width: 600px; height: 400px; margin: 20px auto;}
#shop .map iframe{width: 100%; height: 100%;}
#shop .bnr{position: relative; text-align: center; margin:30px auto 0;}
#shop .bnr img{max-width: 204px;}
#shop .bnr::before{content:""; width: 101px; height: 54px; position: absolute; background: no-repeat center center transparent url(../img/img_glasses2.png); top:50%; left: 24%; transform: translateY(-50%); background-size: contain;}
#shop .shopname{font-weight: 700; font-size:20px;}

/* ----- page - product ----- */
#productKv{margin:0 auto 40px;}
#productKv .kvImgBox{display: block;}
#productKv .kvImgBox:nth-child(n+2){display: none;}
#productKv .kvImgBox img{width: 100%;}
#productKv.slick-slider .kvImgBox:nth-child(n+2){display: block;}
#productKv.slick-slider .slick-dots{bottom: 10px;}
#productKv.slick-slider .slick-dots li button{width: 8px; height: 8px; border: solid 1px #ea5514; background-color: transparent; border-radius: 100%;}
#productKv.slick-slider .slick-dots li.slick-active button{background-color: #ea5514;}
#productKv.slick-slider .slick-dots li button::before{display: none;}
.txtBox01{font-size:19px; line-height: 36px; text-align: center;}
.txtBox01 .bold{font-weight: 700;}
.txtBox01 .sizeM{font-size: 20px;}
.txtBox01 .sizeS{font-size: 16px;}
.productDetail{margin:50px auto 0;}
.productDetail.bgBlue01{background-color: #d0edf0;}
.productDetail .pages{padding: 90px 0 90px; background-color: inherit; position: sticky; top:0; min-height: calc(100vh - 200px); top:200px}
.productDetail .imgBox{display: block; width: 100%; max-width: 700px; margin:0 auto 40px; position: relative; border-radius: 35px; border:solid 2px #000; overflow: hidden; border:solid 2px #000}
.productDetail .imgBox .count{font-size: 19px; position: absolute; bottom: 30px; right: 30px; text-align: right; color: #ea5514;}
.productDetail .imgBox img{width: 100%; height: 100%; object-fit: cover;}
.product #sec03, #lineup{position: relative; z-index: 1;}
.product #sec01{position: relative;}
.product #sec01::after{content: ""; width: 95px; height: 108px; position: absolute; bottom: -20px; right: 20%; background: transparent center center no-repeat url(../img/img_sonaeteFingerL.png); background-size: contain}
.product #sec03.itemList .h2Ptn01{position: relative;}
.product #sec03.itemList .h2Ptn01::before{content: ""; width: 95px; height: 50px; position: absolute; top: 12px; left: 38%; background: transparent center center no-repeat url(../img/img_glasses.png); background-size: contain; transform: translateX(-50%);}
/**/
.productDetail .pages.wide{display: flex; justify-content: center; padding:25px 0 50px; top:50px}
.productDetail .pages.wide .imgBox{width: 48%; margin:0;}
.productDetail .pages.wide .txtBox01{width:50%; padding:0 20px; font-size: 17px;}

/* ----- contacts ----- */
.contactBox.wrap {margin-bottom: 20px !important;}
.contactBox input[type="text"], .contactBox textarea {padding: 5px;border: solid 1px #ccc;width: 100%;}
.contactBox .form {position: relative;display: block;background: #000;padding: 8px;text-align: center;line-height: 1.2;color: #fff;width: 210px; font-size: 16px;margin: auto;}
.contactBox .back{padding: 5px;width: 150px;margin: 0 10px;border: solid 1px #000;background: #fff;}
.contactBox .send {padding: 5px;width: 150px;margin: 0 10px;border: solid 1px #000; background: #000;color: #fff;}
.contactBox .inframe{padding:3px 8px; height: 128px; overflow-y: auto; border:solid 1px #ccc; font-size: 14px;}
.contactBox .inframe .h3Ptn01 ~ .h3Ptn01{margin-top:25px;}
.contactBox .key::after{content: "※"; display: inline-block; margin:0 5px; font-size: 12px;}
.contactBox .error{font-size: 12px; color: #B70000;}

/* Contents Parts
----------------------------------------------- */
/* ----- btnPtn ----- */
.btnPtn01{position:relative; display:block; background:#fff; text-align:center; line-height:1em; padding: 10px 3px; width: 350px; border-radius: 6px; margin: auto; border:solid 1px #000; font-size: 17px; }/*width:200px*/

/* ----- hPtn ----- */
.h2Ptn01{text-align: center; margin:50px auto 40px; position: relative;}
.h2Ptn01 .langEn{font-family: "Lato", sans-serif; font-weight: 300; font-size: 24px; line-height: 1em;}
.h2Ptn01 .langJp{font-weight: 400; font-size:28px; display: block;;}
[class*=icon].h2Ptn01::before, [class*=icon].h2Ptn01::after{content: ""; position: absolute; background:transparent no-repeat center center; background-size: contain; pointer-events: none;}
.h2Ptn01.iconFingerL::after{width: 95px; height: 110px; top:20px; left:79%;background-image:url(../img/img_sonaeteFingerL.png);}
.h2Ptn01.iconThunder::before{width: 100%; height: 66px; top:0; left:-10px;background-image:url(../img/img_thunder.png);}
.h2Ptn01.iconFingerR::after{width: 94px; height: 108px; top:50%; left:20%;background-image:url(../img/img_sonaeteFingerR.png);}/*left:27%*/
.h2Ptn01.iconSonaete::after{width: 128px; height: 94px; top:-16px; left:59%; background-image:url(../img/img_sonaete.png);}
.h2Ptn01 .catch{font-weight: 300; font-size: 19px; margin-top:20px; text-align: center;}
.h3Ptn01{font-size: 15px; font-weight: 500;}
.h3Ptn01 .langEn, .h3Ptn01 .num{display: block; font-size: 16px; font-family: "Lato", sans-serif; font-weight: 300;}
.h3Ptn01 .num{font-size: 12px;}

/* ----- tblPtn ----- */
.tblPtn01{background:#fff; width:100%;}
.tblPtn01 th, .tblPtn01 td{padding:5px 10px; font-size:14px;}
.tblPtn01 th{width:130px; font-weight:normal; text-align:left; white-space: nowrap;}
.tblPtn01 td{}
.tblPtn01.sizeL th, .wrap .tblPtn01.sizeL td{font-size:16px; padding:10px;}
.tblPtn01.auto{width:auto; margin:auto;}
.tblPtn01.nonebrd, .tblPtn01.nonebrd th, .tblPtn01.nonebrd td{border:none; vertical-align:top;}
.tblPtn01 a{text-decoration:underline;}
.tblPtn01.ttlL th {width: 250px;}

/* ----- listPtn ----- */
.listPtn01{text-align: center;}
.listPtn01 .box{max-width: 320px; width: calc(100% / 3 - 20px);}
.listPtn01 .box .tmbBox{width: 100%; height: 240px; border-radius: 13px; border:solid 1px #000; display: flex; justify-content: center; align-items: center; font-size: 15px; overflow: hidden; position: relative;}
.listPtn01 .box .tmbBox a{width: 100%; height: 100%; display: block;}
.listPtn01 .box .tmbBox img{width: 100%; height: 100%; object-fit: cover;}
.listPtn01 .box .price{font-size: 9px; font-weight: 300;}
.listPtn01 .box .price strong{font-size: 13px; font-weight: 300;}
.listPtn01 .box.current .tmbBox, .listPtn01 .box.current .h3Ptn01{pointer-events: none;}
.listPtn01 .box.current .tmbBox:after{content: ""; width: 100%; height: 100%; opacity:0.41; position: absolute; top:0; left: 0;}/*background-color:#8f8580;*/
.listPtn02{}
.listPtn02 .btn{margin:0 5px; width: 27px;}
.listPtn03{}
.listPtn03 li + li{margin-top:20px}
.listPtn04{display: flex; flex-wrap: wrap;}
.listPtn04 li{width: calc(25% - 30px);}
.listPtn04 li + li{margin-left:40px}
.listPtn04 li:nth-child(4n + 1){margin-left: 0;}
.listPtn04 li:nth-child(n + 5){margin-top: 70px;}
.listPtn04 .img{border:solid 1px #000; border-radius:10px; width: 100%; height: 135px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.listPtn04 .img img{width: 100%; height: 100%; object-fit: cover;}
.listPtn04 .item{margin-top:10px; font-size: 15px; text-align: center;}

/* flex */
.flexBox{display: -webkit-box; display: -ms-flexbox; display:flex; margin:auto;}
.flexBox.wr{-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}
.flexBox.sb{justify-content:space-between;}
.flexBox.sa{justify-content:space-around;}
.flexBox.cn{justify-content:center;}
.flexBox.fe{justify-content:flex-end;}
.flexBox.fs, .flexBox.fs-10{justify-content:flex-start;}
.flexBox.ai-fls{align-items:flex-start;}
.flexBox.ai-cnt{align-items:center;}
.flexBox.ai-end{align-items:flex-end;}

.txtBox{line-height: 2em; position: relative;}

/* Common Parts
----------------------------------------------- */
/* ----- pre ----- */
.pre:after {content:"\A"; white-space:pre;}
.preRsv:after {content:""; white-space:normal;}

/* ----- Effect ----- */
a,.btnEase {
-moz-transition:all .3s ease;
transition:all .3s ease;
}
a:hover,.btnEase:hover {opacity:.7;}


/* ===============================================
Media Queries
=============================================== */
/* ===== Max Size ===== */
@media print, screen and (min-width:1920px) {
	/* ----- common ----- */
	#wrapper {}
}
@media print, screen and (max-width:1230px) {
	.wrap {padding:0 15px;}
}

/* ===== TB(PC) Layout ===== */
@media print, screen and (max-width:999px) {
	#wrapper {}
	.wrap {margin:0 auto;}
}

/* ===== TB Size 768-979px ===== */
@media screen and (max-width:979px) {
	/* ----- header ----- */
	.siteIndex #header:not(.view) {display: none;}
	.siteIndex #header .headMenu{background: none;}
	#header #spMenu .viewBlock{display: block;}
	#header .headMenu{padding: 10px 0 10px 20px; height: auto;}
	#header.view .headMenu{padding: 0;}
	#header .logo{width: 80px !important;}
	#header #spMenuOpen{display: block; position: absolute; top:10px; right: 10px;}
	#header #spMenu{display: none; width:auto; background-color: #fff; position: absolute; top:50px; right: 10px; margin:0; border:solid 1px #000}
	#header #spMenu li{top:auto !important; left: auto !important;}
	#header #spMenu li a{display: block; padding:5px 15px; border:none; min-width: 0;}

	.h2Ptn01.iconFingerL::after{left:calc(100% - 120px)}
	#header #spMenu{margin-right: 20px;}

	.productDetail .imgBox{max-width: 600px; max-height: 450px;}
}

/* ===== SP Size 0-767px ===== */
@media screen and (max-width:834px) {
	/* Layout
	--------------------------------------------- */
	/* a:link */
	a:hover {text-decoration:none;}
	/* ----- common ----- */
	#wrapper {width:100%; background-size: 520px; background-position-y: 40px;}
	.wrap {width:100%; padding:0 10px;}
	.wrap.wrapS{width: 100%;}
	.bgWrap{margin-top: 40px;}
	.viewS-B {display:block !important;}
	.viewS-I {display:inline !important;}
	.viewS-Ib {display:inline-block !important;}
	.viewL-B,.viewL-I,.viewL-Ib {display:none !important;}
	.viewS-alignL{text-align: left;}

	/* ----- header ----- */
	.siteIndex #header:not(.view) {display: block;}
	.siteIndex #header .headMenu{background: none;}
	#header #spMenu .viewBlock{display: block;}
	#header .headMenu{padding: 10px 0 10px 20px; height: auto;}
	#header.view .headMenu{padding: 0;}
	#header .logo{width: 80px !important;}
	#header #spMenuOpen{display: block; position: absolute; top:10px; right: 10px;}
	#header #spMenu{display: none; width:auto; background-color: #fff; position: absolute; top:50px; right: 10px; margin:0; border:solid 1px #000}
	#header #spMenu li{top:auto !important; left: auto !important;}
	#header #spMenu li a{display: block; padding:5px 15px; border:none; min-width: 0;}
	
	/* ----- kvArea ----- */
	#topKv .menu{display: none;}
	#wrapper.siteIndex #header + #topKv{margin-top:-100px}
	#wrapper.siteIndex #header + #topKv .logo{display: none;}

	/* ----- panList ----- */
	.panList {display:none;}

	/* ----- contents ----- */
	#wrapper.siteIndex #contents{background-size: 520px; padding:50px 0;}

	/* ----- footer ----- */
	#footer{padding-bottom: 20px; margin-top: 50px;}
	#footer .footermenu1{margin-top:40px;}
	#footer .footermenu2 li + li{margin-left:0; margin-top: 20px;}
	#footer .footermenu2 a{display: block; padding:10px 5px; width: 150px; background-color: #fff; border:solid 2px #000; margin:auto}

	/* ----- pageTop ----- */
	#pageTop {right:0; bottom:0;}
	
	/* ----- page - top ----- */
	.topline{margin:50px auto;}
	/*.topline::before{background-size: cover; height: 60px;}
	.siteIndex #about::before{height: 55px;}*/
	/* #about */
	#about .txtBox::before{width: 43px; height: 21px; top:42%; left:0;}
	/* #shop */
	#shop .map{padding: 0 20px;}
	#shop .bnr img{max-width: 180px;}
	#shop .bnr::before{width: 60px; height: 40px; left:10px}

	/* ----- page - product ----- */
	.productDetail .pages{padding:50px 15px; top: 30px; min-height: calc(100vh - 100px);}
	.productDetail .pages.wide .imgBox{margin-left: auto;}
	.productDetail .imgBox{max-width: 100%; max-height: none;}
	.productDetail .imgBox .count{bottom: 5%; right: 5%;}
	.product #sec01::after{width: 60px; height: 70px; bottom: 40px; right: 20px;}
	.product #sec03.itemList .h2Ptn01::before{width: 60px; height: 40px; left: 20%; top: 20px; transform: translateX(0);}
	.txtBox01{font-size: 16px; line-height: 2em; max-width: 600px; margin-left:auto; margin-right: auto;}

	/* ----- contacts ----- */
	.contactBox .send {margin: 10px 10px 0;}

	/* Contents Parts
	----------------------------------------------- */
	/* ----- btnPtn ----- */
	.btnPtn01{width:100%; padding:15px 5px; margin-bottom:10px; max-width: 320px; font-size: 15px;}/*max-width: 265px;*/
	
	/* ----- hPtn ----- */
	.h2Ptn01{}
	.h2Ptn01 .langEn{font-size: 16px;}
	.h2Ptn01 .langJp{font-size: 21px;}
	.h2Ptn01.iconFingerL::after{width: 48px; height: 55px; left:80%; top:10px;}
	.h2Ptn01.iconThunder::before{height: 40px; top:10px;}
	.h2Ptn01.iconFingerR::after{width: 45px; height: 54px; top: 30px; left:5%;}
	.h2Ptn01.iconSonaete::after{width: 63px; height: 46px; top: 10px; left: 66%;}
	.h3Ptn01{font-size: 16px;}

	/* ----- tblPtn ----- */
	.tblPtn01{width:100%; display: block;}
	.tblPtn01 th, .tblPtn01 td{padding:5px 5px; display: block; width: 100%;}
	.tblPtn01 th{padding-bottom:0 !important; white-space: initial;}
	.tblPtn01.sizeL th, .wrap .tblPtn01.sizeL td{font-size:14px;}
	.tblPtn01.ttlL th {width: auto;}

	/* ----- listPtn ----- */
	.listPtn01{padding: 0 10px; font-size: 14px;}
	.listPtn01 .box{width: 100%; max-width: 300px; margin: auto;}
	.listPtn01 .box + .box{margin-top:50px}
	/*.listPtn01 .box .price{font-size: 12px;}
	.listPtn01 .box .price strong{font-size: 16px;}*/
	.listPtn02 .btn{width: 40px; margin:0 7px;}
	.listPtn04 li{width: calc(50% - 15px); margin:0 auto;}
	.listPtn04 li + li{margin-left:auto;}
	.listPtn04 li:nth-child(3n + 1), .listPtn04 li:nth-child(4n + 1){margin-left: auto;}
	.listPtn04 li:nth-child(n + 3), .listPtn04 li:nth-child(n + 5){margin-top: 30px;}
	.listPtn04 .img{width: 100%; height: auto;}

	
	/* flex */
	.flexBox.sp-blck{display:block;}
	.flexBox.sp-wr{-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;}

	/* Common Parts
	----------------------------------------------- */
	/* ----- Effect ----- */
	a:hover,.btnEase:hover {opacity:1;}
}


/* CSS End
------------------------------------------------------ */