@charset "utf-8";
/* ************************************************************************************************
   font
　************************************************************************************************ */
@font-face{font-family:themify;src:url(../font/themify/themify.eot?-fvbane);src:url(../font/themify/themify.eot?#iefix-fvbane) format('embedded-opentype'),url(../font/themify/themify.woff?-fvbane) format('woff'),url(../font/themify/themify.ttf?-fvbane) format('truetype'),url(../font/themify/themify.svg?-fvbane#themify) format('svg');font-weight:400;font-style:normal}[class*=" ti-"],[class^=ti-]{font-family:themify;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ti-star:before{content:"\e60a"}.ti-search:before{content:"\e610"}.ti-zoom-in:before{content:"\e611"}.ti-zoom-out:before{content:"\e612"}.ti-mobile:before{content:"\e621"}.ti-minus:before{content:"\e622"}.ti-link:before{content:"\e62d"}.ti-layers:before{content:"\e62f"}.ti-layers-alt:before{content:"\e630"}.ti-heart:before{content:"\e634"}.ti-flag-alt:before{content:"\e63b"}.ti-close:before{content:"\e646"}.ti-clip:before{content:"\e647"}.ti-angle-up:before{content:"\e648"}.ti-angle-right:before{content:"\e649"}.ti-angle-left:before{content:"\e64a"}.ti-angle-down:before{content:"\e64b"}.ti-check:before{content:"\e64c"}.ti-check-box:before{content:"\e64d"}.ti-bolt-alt:before{content:"\e653"}.ti-arrows-vertical:before{content:"\e657"}.ti-arrows-horizontal:before{content:"\e658"}.ti-fullscreen:before{content:"\e659"}.ti-arrow-top-right:before{content:"\e65a"}.ti-arrow-top-left:before{content:"\e65b"}.ti-arrow-circle-up:before{content:"\e65c"}.ti-arrow-circle-right:before{content:"\e65d"}.ti-arrow-circle-left:before{content:"\e65e"}.ti-arrow-circle-down:before{content:"\e65f"}.ti-angle-double-up:before{content:"\e660"}.ti-angle-double-right:before{content:"\e661"}.ti-angle-double-left:before{content:"\e662"}.ti-angle-double-down:before{content:"\e663"}.ti-thumb-up:before{content:"\e670"}.ti-quote-right:before{content:"\e67e"}.ti-quote-left:before{content:"\e67f"}.ti-control-play:before{content:"\e6ad"}.ti-control-forward:before{content:"\e6af"}.ti-book:before{content:"\e6b7"}.ti-back-right:before{content:"\e6bc"}.ti-back-left:before{content:"\e6bd"}.ti-arrows-corner:before{content:"\e6be"}.ti-alert:before{content:"\e6c5"}.ti-alarm-clock:before{content:"\e6c6"}.ti-window:before{content:"\e6c9"}.ti-video-clapper:before{content:"\e6ce"}.ti-video-camera:before{content:"\e6cf"}.ti-shift-right-alt:before{content:"\e6d9"}.ti-pin2:before{content:"\e6dd"}.ti-pin-alt:before{content:"\e6de"}.ti-palette:before{content:"\e6e0"}.ti-more:before{content:"\e6e1"}.ti-more-alt:before{content:"\e6e2"}.ti-hand-point-up:before{content:"\e71a"}.ti-hand-point-right:before{content:"\e71b"}.ti-hand-point-left:before{content:"\e71c"}.ti-hand-point-down:before{content:"\e71d"}.ti-gallery:before{content:"\e71e"}.ti-face-smile:before{content:"\e71f"}.ti-youtube:before{content:"\e728"}.ti-twitter:before{content:"\e72a"}.ti-time:before{content:"\e72b"}.ti-share:before{content:"\e72e"}.ti-share-alt:before{content:"\e72f"}.ti-pinterest:before{content:"\e731"}.ti-new-window:before{content:"\e732"}.ti-instagram:before{content:"\e73d"}.ti-facebook:before{content:"\e741"}.ti-twitter-alt:before{content:"\e74b"}.ti-sharethis:before{content:"\e750"}.ti-sharethis-alt:before{content:"\e751"}.ti-email:before{content:"\e75a"}
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
 @font-face{font-family:'FontAwesome';src:url('../font/FontAwesome4/fontawesome-webfont.eot?v=4.7.0');src:url('../font/FontAwesome4/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../font/FontAwesome4/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../font/FontAwesome4/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../font/FontAwesome4/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../font/FontAwesome4/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}
.fa-instagram:before{content:"\f16d"}.fa-facebook-official:before{content:"\f230"}.fa-facebook-square:before{content:"\f082"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}

@font-face{font-family:courier_prime_sansbold;src:url(../font/courier_prime_sans/courier_prime_sans_bold-webfont.woff2) format('woff2'),url(../font/courier_prime_sans/courier_prime_sans_bold-webfont.woff) format('woff');font-weight:400;font-style:normal}@font-face{font-family:courier_prime_sansregular;src:url(../font/courier_prime_sans/courier_prime_sans-webfont.woff2) format('woff2'),url(../font/courier_prime_sans/courier_prime_sans-webfont.woff) format('woff');font-weight:400;font-style:normal}

/* ************************************************************************************************
   Base
   ************************************************************************************************ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* remember: box-sizing is not supported by IE7 :( */ outline: none; vertical-align: top; }
html { width: 100%; }
html,
body { font: normal 1em/2em "Source Serif 4","Inter Tight" ,"Noto Sans JP","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; margin: 0; padding: 0; width: 100%; color: #111; background: #fefefe; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-overflow-scrolling: auto;font-weight:400; vertical-align: top; }
html {height: 100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;}
body {height: 100%;margin: 0;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;font-weight:400}
p { margin: 0; padding: 0; font-weight: normal; }
a { color: inherit; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
a:focus { outline: none; }
button { text-decoration:none; border:none;}
/* ----- *::selection ----- */ 
*::-moz-selection {background: #111;color:#fefefe;}
*::selection { background: #111; color: #fefefe; }

/* ----- h1,h2,h3,h4,h5 ----- */ 
h1,h2,h3,h4,h5{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; margin: 0; padding: 0;}

/* ----- .cf ----- */ 
.cf:before,
.cf:after { content: ""; display: block; overflow: hidden; }
.cf:after { clear: both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom: 1; }

/* ----- .transition03 ----- */ 
.transition03 { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.transition05 { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

/* ----- img----- */ 
img { width: 100%; height:auto;}

/* ----- a ----- */ 
a { color: inherit; outline: none; text-decoration: none; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-tap-highlight-color: rgba(0,0,0,0); }
a:focus,
*:focus { outline: none; text-decoration: none; }
a:hover { text-decoration: none; outline: none; }
/* ----- p ----- */ 
p { margin: 0; padding: 0; font-size: 15.5px;font-weight:400;line-height: 2.1; letter-spacing: 0.05em;letter-spacing: 0.025em;  line-height: 1.9;}
p a { border-bottom: #111 1px dotted; }

@media (min-width: 961px) and (hover: hover) {
p a:hover { color: #fefefe; background:#111; border-bottom: #111 1px solid;}    
}
@media only screen and (max-width: 960px) {
p { line-height: 1.85; }
}
@media only screen and (max-width: 738px) {
p {font-size: 16px;/*font-size: 15.5px;*/ line-height: 1.85; }
}
@media only screen and (max-width: 640px) {
p { line-height: 1.85;  line-height: 1.8;}
}


/* ************************************************************************************************
   #page
   ************************************************************************************************ */
#page { height:100%; background:#fefefe; position:relative; z-index:4; }  

/* -------------------------------------------------------------------------------------------

   #preloader

   ------------------------------------------------------------------------------------------- */

#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fefefe; z-index: 99999; }

/* .spinner */
.spinner{position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;-webkit-border-radius:100%;border-radius:100%;width:40px;height:40px;opacity: 0.8;text-indent:-9999px;border-top:1px solid #f9f9f9;border-right:1px solid #ccc;border-bottom:1px solid #999;border-left:1px solid #999;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-animation:spin .75s linear infinite;animation:spin .75s linear infinite}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

@media screen and (max-width: 738px) {
.spinner{opacity: 0.7;width:35px;height:35px;}
}

/* ---------------------------------------------------------------------------------------------------   

　.object-fit_cover

   --------------------------------------------------------------------------------------------------- */

.object-fit_cover { object-fit: cover; font-family: 'object-fit: cover;' }


/* -------------------------------------------------------------------------------------------

   #header

   ------------------------------------------------------------------------------------------- */

#header { position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: 99; background: #fefefe; -moz-box-sizing: border-box; box-sizing: border-box;}
#header:after { position: absolute; bottom: -1px; left: 3.5%; right: 3.5%; display: block; height: 1px; background: transparent; content: ""; z-index:2;-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
#header.fixed:after { background: #111; left: 0; right: 0;}


/* -----------------------------------------------------------
   .logoArea
   ----------------------------------------------------------- */   

#header .logoArea { position: absolute; top: 0; left: 50%; width: 180px; height: 60px; margin-left: -90px; z-index: 3; overflow: hidden; }

/* h1.logo */
#header h1.logo a { width: 180px; height: 60px; display: block; position: relative; z-index:1; font-size:0;background: url("../images/common/logo2020.png") center center no-repeat; background-size:115px 29px;}
#header h1.logo a:before { position:absolute; top:0; left:0; content:""; width:180px; height: 60px; background: url("../images/common/logo2020_hover.png") center center no-repeat; background-size:115px 29px; z-index:2; opacity: 0;-webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#header h1.logo a:after { position: absolute; top: 0; bottom: 0; width: 100%; left: 0; margin-bottom:-4px; background: #111; content: ""; z-index: -1; 
-webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}

@media only screen and (max-width: 1100px) {
#header .logoArea { width: 160px; margin-left: -80px;}
#header h1.logo a { width: 160px; }
#header h1.logo a:before { width:160px;}
}
@media only screen and (max-width: 1024px) {
#header .logoArea { width: 140px; margin-left: -70px;}
#header h1.logo a { width: 140px; }
#header h1.logo a:before { width:140px;}
}
@media (min-width: 961px) and (hover: hover) {
#header h1.logo a:hover:before { opacity: 1; }
#header h1.logo a:hover:after { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1);}
}

/* -----------------------------------------------------------
   .navArea
   ----------------------------------------------------------- */  

#header .navArea { position: absolute; top: 0; right: 3.5%; left: 3.5%; display: block; text-align: left; z-index: 1;}

@media only screen and (max-width: 960px) {
#header .navArea {display: none;}
}

/* -----------------------------------------------------------
   .sf-menu
   ----------------------------------------------------------- */  

.sf-menu{width:100%;position:relative;margin:0;padding:0;list-style:none; font-size: 0;}
.sf-menu .sf-mega{position:absolute;display:none;top:100%;left:0;width:100%;background: #fefefe; border: #111 1px solid;z-index:99;max-height: calc(100vh - 60px); overflow-y: auto;-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);}
.sf-menu li{display: inline-block; margin: 0 20px 0 0;}
.sf-menu li:hover>.sf-mega,
.sf-menu li.sfHover>.sf-mega{display:block}
.sf-menu li a{display: block; position: relative; z-index: 1; font-size: 16px;font-size: 15.75px; font-family: 'courier_prime_sansregular'; font-weight: normal;letter-spacing: .03em; line-height: 60px;}
.sf-menu li a:before { position: absolute; bottom: 17px; left: 0; width: 100%; display: block; border-bottom: #111 1px solid; content: ""; z-index: 2; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}
.sf-menu li:hover a:before { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1);}

@media only screen and (max-width: 1200px) {
.sf-menu li{display: inline-block; margin: 0 1.25vw 0 0;}
.sf-menu li a{ font-size: 15px;font-size:min(1.4vw,15px);}
}

/* .inner_area */
#header .navArea .inner_area { padding: 25px 3.5% 35px; overflow: hidden; font-size: 0;}

/* .t_ttl_nav */
#header .navArea .t_ttl_nav { font-size: 13px; font-family: 'Libre Baskerville','Shippori Mincho B1',serif; font-weight: 400;text-align: center;letter-spacing: 0.075em; line-height: 1; }

/* .product_area */
#header .navArea .product_area {display: flex; flex-wrap: wrap; justify-content: space-between; }
#header .navArea .product_area .product_box {text-align: center;width: 72.5%;}
#header .navArea .product_area .product_box+.product_box {width: 24%; }

/* ul.list_product (OPTICAL LINE) */
#header .navArea ul.list_product { margin-top: 20px; display: flex; flex-wrap: wrap; gap:0;}
#header .navArea ul.list_product li { width: 33.333%; margin: 0; padding: 0; position: relative; z-index: 0; text-align: center;}
#header .navArea ul.list_product li:after { position: absolute; top: 0; bottom: 0; right: 0; left: 0; content: ""; border-right: #333 1px dotted; border-bottom: #333 1px dotted;z-index: -1;}
#header .navArea ul.list_product li:nth-child(1):after,
#header .navArea ul.list_product li:nth-child(2):after,
#header .navArea ul.list_product li:nth-child(3):after{ border-top: #333 1px dotted;}
#header .navArea ul.list_product li:nth-child(3n+1):after{ border-left: #333 1px dotted;}

/* ul.list_product (FLEXI LINE) */
#header .navArea .product_box+.product_box ul.list_product li { width: 100%;}
#header .navArea .product_box+.product_box ul.list_product li:after {border-left:#333 1px dotted; }
#header .navArea .product_box+.product_box ul.list_product li:nth-child(2):after,
#header .navArea .product_box+.product_box ul.list_product li:nth-child(3):after{ border-top: none;}

#header .navArea ul.list_product li a { position: relative; z-index: 0; height: 80px; }
#header .navArea ul.list_product li a:before { display: none;}
#header .navArea ul.list_product li a .thumb_area { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index:1; opacity: 0;-webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .navArea ul.list_product li:hover .thumb_area { opacity: 1;}
#header .navArea ul.list_product li .thumb_area img { width: auto; height: 42.5%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index:1; }
#header .navArea ul.list_product .txt_area { position: absolute; display: inline-block; top: 50%; left:10px; right: 10px; text-align: center; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);z-index:0; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .navArea ul.list_product li:hover .txt_area {opacity: 0;}
#header .navArea ul.list_product li a .txt_area .txt_name_en {font-size: 12px;font-family: 'Libre Baskerville', serif; font-weight: 400;letter-spacing: 0.075em; line-height:1.45; }
#header .navArea ul.list_product li a .txt_area .txt_name_jp { margin: 3px 0 0; font-size:min(1.1vw,13px); font-family: 'Shippori Mincho B1', serif;font-weight: 400;letter-spacing: 0.025em;line-height: 1;}
#header .navArea ul.list_product li a .txt_area .t_cat_craftman {margin-bottom: 2px; font-size: 10px;font-family: 'Libre Baskerville', serif; font-weight: 400;letter-spacing: 0.075em; line-height:1.45; }

/* .feature_box */
#header .navArea .feature_box { margin: 25px 0 0;}

/* ul.list_feature */
#header .navArea ul.list_feature { margin: 20px 0 0; font-size: 0; text-align: left}
#header .navArea ul.list_feature li { display: block; margin: 0; padding: 0;}
#header .navArea ul.list_feature li+li {margin: 8px 0 0;}
#header .navArea ul.list_feature li a { display: block flex; flex-wrap: wrap; align-items: center; justify-content: space-between; position: relative; z-index: 0; line-height: 1;}
#header .navArea ul.list_feature li a:before { display: none;}
#header .navArea ul.list_feature li a .thumb_area { width: 25%;-webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .navArea ul.list_feature li a:hover .thumb_area { background: #111;}
#header .navArea ul.list_feature li a .thumb_area img {-webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
#header .navArea ul.list_feature li a:hover .thumb_area img {opacity: 0.7;}
#header .navArea ul.list_feature li a .txt_area { width: 69%;}
#header .navArea ul.list_feature li a .txt_area .txt_ttl {font-size:min(1vw,13px); font-family: 'Shippori Mincho B1', serif;font-weight: 500; letter-spacing: .01em; line-height: 1.5; }

/* .btn_all_area */
#header .navArea .btn_all_area { margin: 35px 0 0; text-align: center;}
#header .navArea .btn_all_area .btn_nav_all { margin: 0 auto; display: block; width: 50%; border: #111 1px solid; background: #111; color: #fefefe; line-height: 55px; text-align: center;position: relative; z-index: 0;}
#header .navArea .btn_all_area .btn_nav_all:before {position:absolute; top:0; left: auto; right:12px; bottom:0; width: auto; border: none; font-size:13px; font-family:themify;content:"\e649";font-weight:normal; z-index:1;}
#header .navArea .btn_all_area .btn_nav_all:after { position: absolute; top: 0; bottom: 0; left: 0; right:0; display: block; background: #fefefe; content: ""; z-index: -1; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}
#header .navArea .btn_all_area .btn_nav_all:hover { color: #111;}
#header .navArea .btn_all_area .btn_nav_all:hover:after { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}

@media only screen and (max-width: 1200px) {
#header .navArea .btn_all_area { margin: 30px 0 0; }
}



/* -----------------------------------------------------------
   .navSubArea
   ----------------------------------------------------------- */  

#header .navSubArea { position: absolute; top: 0; left: 50%; right: 3.5%; padding-right: 42px;display: block; text-align: right; z-index: 2;}
@media only screen and (max-width: 960px) {
#header .navSubArea {display: none;}
}
/* ul */
#header .navSubArea ul { list-style: none; padding: 0; margin: 0; width: 100%; font-size: 0; position: relative; z-index: 1;}
#header .navSubArea ul li { margin: 0 0 0 20px; position: relative;}
#header .navSubArea .sf-menu li ul li a:before {display: none}
#header .navSubArea .sf-inset{position:absolute;display:none;top:100%;left:0;z-index:99;width: 215px; text-align: left; background: #fefefe; border: #111 1px solid; -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);}
#header .navSubArea .sf-inset li {display: block; position: relative; z-index: 0; margin: 0; }
#header .navSubArea .sf-inset li:after { position: absolute; bottom: 0; left: 0; right: 0; height: 0; content: "";border-bottom: #111 1px dotted; z-index: -1;}
#header .navSubArea .sf-inset li:last-child:after { display: none;}
#header .navSubArea li:hover>.sf-inset,
#header .navSubArea li.sfHover>.sf-inset{display:block}
#header .navSubArea .sf-inset li a{ padding: 0 20px; height: 55px; font-size: 15px; line-height: 55px; }
#header .navSubArea .sf-inset li a span.und_line{ position: relative;z-index: 0;}
#header .navSubArea .sf-inset li a span.und_line:after { position: absolute; bottom: -3px; left: 0; right: 0; display: block; border-bottom: #111 1px solid; content: ""; z-index: 2; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}
#header .navSubArea .sf-inset li a:hover span.und_line:after { webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}

@media only screen and (max-width: 1200px) {
#header .navSubArea ul li{margin: 0 0 0 1.25vw;}
#header .navSubArea ul li a{font-size:min(1.4vw,15px);}
}

#header span.space { display: inline-block;width: 5px;}


/* -----------------------------------------------------------
   .langArea
   ----------------------------------------------------------- */  

#header .langArea { position: absolute; top: 0; right:3.5%; width: 30px; z-index: 3;}
@media only screen and (max-width: 960px) {
#header .langArea {display: none;}
}
#header .langArea ul { list-style: none; padding: 0; margin: 0; width: 100%; font-size: 0; text-align: center;position: relative; z-index: 1;}
#header .langArea ul li { margin: 0; position: relative;}
#header .langArea ul li a {width: 30px;display: block; letter-spacing: 0;}
#header .langArea ul li a:before { left: 5px; width: auto; right: 5px; }
#header .langArea .sf-menu li ul li a:before {display: none}
#header .langArea .sf-lang{position:absolute;display:none;top:100%;left:0;z-index:99;width:30px;  text-align: left; background: #fefefe; border: #111 1px solid; -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); overflow: hidden;}
#header .langArea .sf-lang li {display: block; position: relative; z-index: 0; margin: 0; }
#header .langArea .sf-lang li:after { position: absolute; bottom: 0; left: 0; right: 0; height: 0; content: "";border-bottom: #111 1px dotted; z-index: -1;}
#header .langArea .sf-lang li:last-child:after { display: none;}
#header .langArea li:hover>.sf-lang,
#header .langArea li.sfHover>.sf-lang{display:block}
#header .langArea .sf-lang li a{ padding: 0; height: 30px; font-size: 12px; line-height: 30px; text-align: center;}
#header .langArea ul li a span.und_line{ position: relative;z-index: 0;}
#header .langArea ul li a span.und_line:after { position: absolute; bottom: 0px; left: 0; right: 0; display: block; border-bottom: #111 1px solid; content: ""; z-index: 2; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}
#header .langArea ul li a:hover span.und_line:after { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}


/* -----------------------------------------------------------   
   .logoMarkArea
   ----------------------------------------------------------- */

#header .logoMarkArea { position: absolute; top:0; left:2.5%; z-index:1002; display: none; }
#header .logoMarkArea h2 { width:80px; height:60px; line-height:0; font-size:0; margin:0; }
#header .logoMarkArea h2 a { position: relative; display: block; width:70px; height:60px; background: url(../images/common/logo_bird.png) center center no-repeat; background-size:70px 21px;overflow: hidden; text-indent:-999px; z-index:1003; }

@media only screen and (max-width: 960px) {
#header .logoMarkArea { display: block; }
}
@media only screen and (max-width: 738px) {
#header .logoMarkArea h2 { width:66px; height:60px; }
#header .logoMarkArea h2 a { width:66px; background-size:66px 20px; }
}




/* -------------------------------------------------------------------------------------------

   .nav_area_sp

   ------------------------------------------------------------------------------------------- */

.nav_area_sp { position: fixed; top: 0; right: 0; z-index: 103; display: none; }

@media only screen and (max-width:960px) {
.nav_area_sp  {display: block;}
}

/* -----------------------------------------------------------   
   .menu_btn
   ----------------------------------------------------------- */

.nav_area_sp .menu_btn { width: 70px; height: 60px;cursor: pointer; position: relative; transition: all 0.4s ease; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 1003;}
.nav_area_sp .menu_btn:after { position: absolute; top: 50%; right: 0; left: 0; z-index: -1; height: 50px; content: ""; -webkit-transform: translate(0, -50%); transform: translate(0, -50%);}
.nav_area_sp .menu_btn .txt { font-size: 10px;font-weight: 400; letter-spacing: .1em; line-height: 1;}
.menu_btn .txt {position: relative; display: block;height: 1em; overflow: hidden;width: 100%;text-align: center;}
.menu_btn .txt .label {display: block; line-height: 1; transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); /*transition: transform 0.3s ease; */font-size: inherit;}

/* MENUを表示 */
.menu_btn .txt .label-menu { transform: translateY(0%); letter-spacing: .15em; text-indent: .15em;}
.menu_btn .txt .label-close { position: absolute; top: 0; left: 0; right: 0; transform: translateY(100%);text-indent: .1em;}

/* CLOSEを表示 */
.menu_btn.open .txt .label-menu {transform: translateY(-100%);}
.menu_btn.open .txt .label-close { transform: translateY(0%);}
.menu_btn .txt { margin:-10px 0 15px; transition: all 0s ease;}

/* .hamburger */
.menu_btn .hamburger { position: relative; z-index: 0; width: 35px; height: 1px;  background: var(--color-black); background: #111; -webkit-transform: translate( 0, -50%); transform: translate( 0, -50%); transition: all 0.3s; margin-top: -1px;}
.menu_btn .hamburger:before,
.menu_btn .hamburger:after { position: absolute; width: 35px; height: 1px; background: var(--color-black); background: #111;  z-index: 0; content: "";transition: all 0.3s; }
.menu_btn .hamburger:before { top: -6px; }
.menu_btn .hamburger:after { bottom: -6px;}
.menu_btn .hamburger.close {background: transparent;}
.menu_btn .hamburger.close:before { top: 0px;left: -1px;transform: rotate(27deg); width: 37px;}
.menu_btn .hamburger.close:after { bottom: 0px;left: -1px;transform: rotate(-27deg);width:37px;}

@media only screen and (max-width:640px) {
.menu_btn .hamburger { width: 33px;}
.menu_btn .hamburger:before,
.menu_btn .hamburger:after { width: 33px;  }
.menu_btn .hamburger.close:before { width: 35px;}
.menu_btn .hamburger.close:after { width:35px;}
}


/* --------------------------------------------------------------------------------------   

   mobile-nav

   -------------------------------------------------------------------------------------- */

/* -----------------------------------------------------------   
   .mobile-nav-bg
   ----------------------------------------------------------- */

.mobile-nav-bg { position: fixed; z-index: 1001;z-index: 101; top: 0; left: 0; width: 100%; height: 0; opacity: 0; transition: opacity 0.5s ease, height 0s 0.4s linear;pointer-events: none;  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);}
.mobile-nav-bg.open { height: 100%; height: 100vh; opacity: 1;transition: opacity 0.3s ease, height 0s linear;pointer-events:inherit;}

@media screen and (max-width: 738px) {
.mobile-nav-bg { top: 0; height: 100vh;height: 100dvh;}
}

/* -----------------------------------------------------------   
   .mobile-nav
   ----------------------------------------------------------- */

.mobile-nav { position: fixed; z-index: 102; top: 0; right: 0;width: 50%; height: 100%; height: 100vh; background: #fefefe;transform: translateX(100%);overflow: hidden;opacity: 1;pointer-events: none; transition: opacity 0.45s ease, transform 0.45s ease;-webkit-overflow-scrolling: touch;}
.mobile-nav.open {opacity: 1;transform: translateX(0);pointer-events: auto;}

@media only screen and (max-width: 640px) {
.mobile-nav {height: 100vh;height: 100dvh;}
}

@media screen and (max-width: 960px) {
.mobile-nav { width: 60%; max-width: 500px;padding: 60px 0 0; }
}
@media screen and (max-width: 768px) {
.mobile-nav { width: 80%; }
}
@media screen and (max-width: 640px) {
.mobile-nav { width: 90%; }
}

/* .top */
.mobile-nav .top { position: absolute; top: 60px; left: 0; z-index: 1; width: 100%; height: 0px; border-bottom: #dedede 1px solid;}

/* .nav_inner */
.mobile-nav .nav_inner { width: 100%; height: 100%; padding: 0 0 50px; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.mobile-nav .sub_item { margin-top: 25px;}
.t_sub_ttl_mobile_series { display: block; padding: 15px 25px; color: #555;  font-size: 13px; font-family: 'Libre Baskerville', serif; font-weight: 400; line-height: 1.5;letter-spacing:0.02em;}
.t_sub_ttl_mobile_nav { display: block; padding: 12px 25px; color: #555; font-size: 13px; font-family: 'Libre Baskerville', serif; font-weight: 400; line-height: 1.5; font-style: italic;letter-spacing:0.01em;}

/* .mobile_nav_list */
.mobile_nav_list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 0;}
.mobile_nav_list:before { position: absolute; top: 0; left: 25px; right: 0; height: 0; content: "";border-top: 1px solid #ededed; z-index: 0;}
.mobile_nav_list li { position: relative; z-index: 0;}
.mobile_nav_list li:after { position: absolute; bottom: 0; left: 25px; right: 0; height: 0; content: ""; border-bottom: 1px solid #ededed; z-index: -1;}
.mobile_nav_list li a {display: block; padding: 10px 25px 10px; font-size: 17px; font-family: 'courier_prime_sansregular',"Noto Sans JP"; font-weight: normal;letter-spacing: 0.02em; position: relative; z-index: 0; line-height: 35px;}
.mobile_nav_list li a.t_all_series {font-size: 16px; letter-spacing: 0;}
.mobile_nav_list li a.t_jp {font-size: 15px; font-weight: 400;}
.mobile_nav_list li a:after {position: absolute; top: 12px; right: 25px;color: #999; font-size: 15px; font-family:themify;content:"\e649"; z-index: 0; }

/* .submenu */
.mobile_nav_list .submenu {display: none; list-style: none; position: relative; z-index: 0; }
.mobile_nav_list .submenu:after {position: absolute; top: 0; left: 0; bottom: 0; right: 0; content: "";background: #f8f8f8; z-index: -2; }
.mobile_nav_list .submenu_toggle { display: block;position: relative; text-decoration: none;transition: all 0.3s ease;}
.mobile_nav_list .has-submenu > .submenu_toggle:before { position: absolute; top: 100%; right: 0; bottom: 0; left: 0; content: ""; background: #f8f8f8;transition: all 0.3s ease; z-index: -2;}
.mobile_nav_list .has-submenu.open > .submenu_toggle::before {top: 0; bottom: 0;}
.mobile_nav_list .submenu_toggle:after { content:"\e64b"; color: #333; transition: transform 0.3s ease;}
.mobile_nav_list .has-submenu.open > .submenu_toggle:after{ content:"\e646"; transform: rotate(180deg); }
.mobile_nav_list .submenu li:first-child:after { height: auto; top: 0; left: 25px; border-top: 1px solid #ededed;}

/* .lineup */
.mobile_nav_list .submenu a.lineup { display: block flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 12px 25px 12px; }
.mobile_nav_list .submenu a.lineup:after { display: none;}
.mobile_nav_list .submenu a.lineup .thumb {width: 60px;}
.mobile_nav_list .submenu a.lineup .txt {width: calc(100% - 80px);}
.mobile_nav_list .submenu a.lineup .t_cat_craftman,
.mobile_nav_list .submenu a.lineup .t_cat_en,
.mobile_nav_list .submenu a.lineup .t_cat_jp { line-height: 1;}
.mobile_nav_list .submenu a.lineup .t_cat_craftman {margin-bottom: 6px;font-size: 10px;font-family: 'Libre Baskerville', serif; font-weight: 400;letter-spacing: 0.05em;}
.mobile_nav_list .submenu a.lineup .t_cat_en {  font-size: 12px;font-family: 'Libre Baskerville', serif; font-weight: 400;letter-spacing: 0.05em;}
.mobile_nav_list .submenu a.lineup .t_cat_jp {margin-top: 5px; font-size: 13px;font-family: 'Shippori Mincho B1', serif; font-weight: 500; letter-spacing: 0.05em;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;}

/* .feature */
.mobile_nav_list .submenu a.feature{display: block flex; flex-wrap: wrap; justify-content: space-between; align-items: center;;}
.mobile_nav_list .submenu a.feature:after { display: none;}
.mobile_nav_list .submenu a.feature .thumb {width: 60px;}
.mobile_nav_list .submenu a.feature .txt {width: calc(100% - 80px);}
.mobile_nav_list .submenu a.feature .t_ttl_feature { font-size: 13px;font-family: 'Shippori Mincho B1', serif; font-weight: 500; line-height: 1.5; letter-spacing: 0.05em;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;}

/* .mobile_sns_list */
.mobile_sns_list li a { font-size: 15px; font-family: "Inter Tight"; font-weight: 360;}
.mobile_sns_list li a.sns_icon {padding-left: 55px; letter-spacing: 0;letter-spacing: 0.05em;}
.mobile_sns_list li a.sns_icon:before {position: absolute; top: 12px; left: 25px; height:auto; border-top:none; font-size: 1em; font-family: 'FontAwesome'; font-weight: normal; text-align:center;}
.mobile_sns_list li a.sns_instagram:before {content:"\f16d"}
.mobile_sns_list li a.sns_youtube:before {width:16px; height:35px;content:"";background:url("../images/common/logo_youtube_b.png") center center no-repeat; background-size:16px 16px;}
.mobile_sns_list li a.sns_x:before {width:14px; height:35px; border-top:none; content:"";background:url("../images/common/logo_x_b.png") center center no-repeat; background-size:14px 14px;}
.mobile_sns_list li a.sns_facebook:before {content:"\f09a"; left: 27px;}
.mobile_sns_list li a.sns_note:before {width:14px; height:35px; border-top:none; content:"";background:url("../images/common/logo_note_b.png") center center no-repeat; background-size:14px 14px;}
.mobile_sns_list li a.sns_icon:after { display: none;}

@media only screen and (max-width: 640px) {
.mobile_nav_list li a { font-size: 18px;}
.mobile_sns_list li a { font-size: 16px;}
}






/* -------------------------------------------------------------------------------------------

   footer

   ------------------------------------------------------------------------------------------- */

footer { margin: 0 auto; padding:0 5%; width: 100%; position:relative; z-index:2; text-align: center; overflow: hidden; }

@media only screen and (max-width:738px) {	
footer {  margin-top: -25px;}
}

/* ------------------------------------------------
   .logoArea
   ------------------------------------------------ */  
footer .logoArea { margin: 0 auto; height: 180px; background: url(../images/common/logo_footer.png) center center no-repeat; background-size: contain; position: relative; z-index: 2; overflow: hidden;}
footer .logoArea:before { position: absolute; top: 50%; right: 50%; left: 0; height: 3px; margin-right: 180px; content: ""; border-top: #111 2px solid; border-bottom: #111 1px solid;z-index: -2;}
footer .logoArea:after { position: absolute; top: 50%; right: 0; left: 50%; height: 3px; margin-left: 180px; content: ""; border-top: #111 2px solid; border-bottom: #111 1px solid; z-index: -2;}

@media only screen and (max-width: 960px) {	
footer .logoArea { height: 150px;}
footer .logoArea:before { margin-right: 150px;}
footer .logoArea:after { margin-left: 150px;}
}
@media only screen and (max-width: 738px) {
footer .logoArea { height: 120px; overflow:visible;}
footer .logoArea:before { margin-right: 100px; left: -100%;}
footer .logoArea:after { margin-left: 100px; right: -100%;}
}

/* ------------------------------------------------
   .inner
   ------------------------------------------------ */  
footer .inner { position: relative; z-index: 1; font-size: 0; padding: 25px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}

/* .innerLeft, .innerRight */
footer .innerLeft,
footer .innerRight { width: calc(50% - 100px); display: flex; flex-wrap: wrap;justify-content: center;}
/* .innerBox */
footer .innerBox { width: 35%; }

@media only screen and (max-width: 1100px) {
footer .innerBox { width: 42.5%; } 
}
@media only screen and (max-width: 960px) {
footer .innerLeft,
footer .innerRight { width: calc(50% - 100px); width: 50%; }
footer .innerBox { width: 50%;}
}
@media only screen and (max-width: 738px) {
footer .inner { padding: 25px 0 30px; }
footer .innerLeft,
footer .innerRight { width: 100%; padding:0;}
footer .innerBox { width: 100%; }
}
@media only screen and (max-width: 640px) {
footer .inner { padding: 5px 0 25px; }
}

/* ul */
footer .innerBox ul {list-style: none; font-size: 0; width: 100%; margin: 0 auto; }
footer .innerBox ul li{ display: block; margin: 10px 0 0; }
footer .innerBox ul li a{ display: inline-block; font-size: 15px;font-family: 'courier_prime_sansregular'; font-weight: normal; line-height: 25px; position: relative; z-index: 1;letter-spacing: 0.02em;}
footer .innerBox ul li a:before { position: absolute; bottom: 0; left: 0; width: 100%; display: block; border-bottom: #111 1px solid; content: ""; z-index: 2; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}

@media (min-width: 961px) and (hover: hover) {
footer .innerBox ul li a:hover:before {-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}
}
@media only screen and (max-width: 738px) {
footer .innerBox ul{display: flex; flex-wrap: wrap; text-align: left; gap:0 6px;}	
footer .innerBox ul li{width: calc((100% - 2 * 6px) / 3);  text-align: center; margin: 3px 0;}
footer .innerBox ul li.essay { width: calc((100% - 1 * 6px) / 2); }
footer .innerLeft .innerBox:first-child ul li:first-child,
footer .innerLeft .innerBox:first-child ul li:nth-child(n){width: calc((100% - 1 * 6px) / 2);}
footer .innerBox ul li a{ display: block; border: #ededed 1px solid; font-size:min(2.4vw,14px); line-height: 35px;}
footer .innerBox ul.sitemap,
footer .innerBox ul.language{width: 100%; margin: 30px auto 0; }
footer .innerBox ul.sitemap:before,
footer .innerBox ul.language:before{ display: block; width: 100%; height: auto; font-size: 12px; font-family: 'Libre Baskerville', serif; font-weight: 400; font-style: italic;text-align: center;letter-spacing:1px; content: "Language"; line-height: 20px; margin-bottom: 10px; }
footer .innerBox ul.sitemap { margin-top: 0;}
footer .innerBox ul.sitemap:before { content: "Site Map"}
footer .innerBox ul.language{ justify-content: center; }
footer .innerBox ul.language:before { content: "Language"; }
footer .innerBox ul.language li{ width: calc((100% - 1 * 6px) / 2);}
}
@media only screen and (max-width: 640px) {
footer .innerBox ul{gap:0 4px;}	
footer .innerBox ul li{width: calc((100% - 2 * 4px) / 3); margin: 2px 0;}
footer .innerLeft .innerBox:first-child ul li:first-child,
footer .innerLeft .innerBox:first-child ul li:nth-child(n){width: calc((100% - 1 * 5px) / 2);}
footer .innerBox ul li.essay { width: calc((100% - 1 * 4px) / 2); }
footer .innerBox ul li a{ font-size:min(3.5vw,14px);}
footer .innerBox ul.sitemap,
footer .innerBox ul.language{width: 100%; margin: 25px auto 0; }
footer .innerBox ul.language li{ width: calc((100% - 1 * 4px) / 2);}
}

/* ------------------------------------------------
   .snsArea
   ------------------------------------------------ */  
footer .snsArea { width: 300px; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index:2; text-align:center;}
footer .snsArea h3 { font-size: 13px; font-family: 'Libre Baskerville', serif; font-weight: 400; font-style: italic;letter-spacing: 1px; line-height: 1;}
footer .snsArea ul {list-style: none; font-size: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap:6px; }
footer .snsArea ul li a { display: block; width: 30px; height: 30px; color: #fefefe; background: #111; text-align: center; position: relative; z-index: 1;-webkit-border-radius: 100%;border-radius: 100%;}
footer .snsArea ul li a:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size:14px; line-height: 30px; font-family: 'FontAwesome'; z-index: 0;}
footer .snsArea ul li.facebook a:before {content:"\f09a"}
footer .snsArea ul li.instagram a:before { content:"\f16d";}
footer .snsArea ul li.twitter a:before { content:""; background:url("../images/common/logo_x_w.png") center center no-repeat; background-size:13px 13px;}
footer .snsArea ul li.youtube a:before { content:""; background:url("../images/common/logo_youtube_w.png") center center no-repeat; background-size:15px 15px;}
footer .snsArea ul li.note a:before { content:""; background:url("../images/common/logo_note.png") center center no-repeat; background-size:13px 13px; }

@media (min-width: 961px) and (hover: hover) {
footer .snsArea ul li a:hover {-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}
}
@media only screen and (max-width: 960px) {
footer .snsArea { width: 100%;margin-top: 35px; display: block; position: static; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@media only screen and (max-width: 738px) {
footer .snsArea { margin-top: 30px; }
footer .snsArea h3 { font-size: 12px; line-height: 1; line-height: 20px;}
footer .snsArea ul { margin: 15px 0 0;}
footer .snsArea ul li a { width: 35px; height: 35px;}
footer .snsArea ul li a:before { font-size:16px; line-height: 35px; }
}
@media only screen and (max-width: 640px) {
footer .snsArea { margin-top: 25px; }
}


/* ------------------------------------------------
   .groupArea
   ------------------------------------------------ */  
footer .groupArea { margin:-12px 0 0;}
footer .groupArea h3 { font-size: 13px; font-family: 'Libre Baskerville', serif; font-weight: 400; font-style: italic;letter-spacing: 1px; line-height: 1;}
/* .footer_nav_list */
footer .groupArea ul{ margin: 12px 0 0; text-align: center;}	
footer .groupArea ul li{ display: inline-block; margin: 0; width: auto;text-align: center; }
footer .groupArea ul li a{ display: inline-block;font-size: 13px; font-family: 'Libre Baskerville', serif; font-weight: 700; letter-spacing: 0.05em;line-height: 25px; position: relative; z-index: 1;}
footer .groupArea ul li a:after { position: absolute; top:-1px; right:-16px; font-size: 0.75em; font-family:'themify';content:"\e62f"; font-weight: normal;z-index:0;}

@media (min-width: 961px) and (hover: hover) {
footer .groupArea ul li a:before { position: absolute; bottom: 0; left: 0; width: 100%; display: block; border-bottom: #111 1px solid; content: ""; z-index: 2; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}
footer .groupArea ul li a:hover:before { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);;transform:scale(1,1)}
}
@media only screen and (max-width: 960px) {
footer .groupArea { margin:5px 0 0;} 
}
@media only screen and (max-width: 738px) {
footer .groupArea { margin:0 0 15px;}
footer .groupArea h3 { font-size: 12px;  line-height: 20px; }
/* .footer_nav_list */
footer .groupArea ul{ margin: 5px 0 0; text-align: center;}	
footer .groupArea ul li{ display: inline-block; margin: 0; width: auto;text-align: center; }
footer .groupArea ul li a{font-size: 14px;}
}
@media only screen and (max-width: 640px) {
footer .groupArea { margin:0 0 13px;}
}

/* ------------------------------------------------
   .catchArea
   ------------------------------------------------ */  
footer .catchArea { margin-top: 25px; text-align: center;}
footer .catchArea .txt_copy {font-size: 13px;font-family: 'Libre Baskerville', serif; font-weight: 700;line-height:1.7; letter-spacing: 0.05em;}

@media only screen and (max-width: 960px) {	
footer .catchArea { margin-top: 10px;}
footer .catchArea .txt_copy {font-size: 12px; line-height:1.7;}
}
@media only screen and (max-width: 738px) {
footer .catchArea .txt_copy {  margin: 0 auto; width: 92.5%; line-height:1.6; }
footer .catchArea .txt_copy br {display: none;}
}

/* ------------------------------------------------
   .banner_area
   ------------------------------------------------ */  
footer .banner_area { margin-top: 40px; text-align: center;}
footer .banner_area ul.list_banner { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; font-size: 0; gap:0 4%; max-width: 1150px; margin: 0 auto;text-align: center;}
footer .banner_area ul.list_banner li { width: calc((100% - 2 * 4%) / 3); }
footer .banner_area ul.list_banner li a { display: block;position: relative; z-index: 1;}
footer .banner_area ul.list_banner li a:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background-color: transparent; opacity: 0.6; z-index: 0;-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}

@media (min-width: 961px) and (hover: hover) {
footer .banner_area ul.list_banner li a:hover { cursor: pointer;}
footer .banner_area ul.list_banner li a:hover:after { background: #111; }    
}
@media only screen and (max-width: 960px) {
footer .banner_area ul.list_banner {  gap:4vw 4%;}
footer .banner_area ul.list_banner li { width: calc((100% - 1 * 4%) / 2); }
footer .banner_area ul.list_banner li a:after { display: none;}
}
@media only screen and (max-width: 738px) {
footer .banner_area { margin-top: 30px;}
}
@media only screen and (max-width: 640px) {
footer .banner_area ul.list_banner {flex-direction: column; gap:15px 0;}
footer .banner_area ul.list_banner li { display: block; margin:0 auto; width: 100%; max-width: 350px; }
footer .banner_area ul.list_banner li:first-child { margin: auto;}
}

/* ------------------------------------------------
   .zaiko_area
   ------------------------------------------------ */  
footer .zaiko_area { margin: 40px 0 -10px; text-align: center;position:relative; z-index:1; }
footer .zaiko_area .banner_zaiko { display: block; margin: 15px auto 0; max-width: 500px; padding: 0 0 1px; border: #555 1px solid; position: relative; z-index: 0;}
footer .zaiko_area p { font-size:11px; line-height:1; letter-spacing:1px;}
footer .zaiko_area .t_for { font-size: 13px; font-family: 'Libre Baskerville', serif; font-weight: 400; font-style: italic;letter-spacing: 1px; line-height: 1;}
footer .zaiko_area .t_for b {font-style: normal; font-weight: 700; letter-spacing: .05em;}
footer .zaiko_area p.t_pass { margin: 10px 0 0;}

@media (min-width: 961px) and (hover: hover) {
footer .zaiko_area .banner_zaiko:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background-color: transparent; opacity: 0.6; z-index: 0;-webkit-transition: all 0.7s ease;transition: all 0.7s ease;}
footer .zaiko_area .banner_zaiko:hover { cursor: pointer;}
footer .zaiko_area .banner_zaiko:hover:after { background-color: #111; }
}
@media only screen and (max-width: 900px) {
footer .zaiko_area { margin: 40px 0 0px; }
}
@media only screen and (max-width: 738px) {
footer .zaiko_area { margin: 35px auto 0;}
footer .zaiko_area .banner_zaiko { margin: 15px auto 0; max-width: 400px;}
footer .zaiko_area p { font-size:11px; }
footer .zaiko_area .t_for { font-size: 12px;}    
footer .zaiko_area p.t_pass { margin: 7px 0 0;}
}

/* ------------------------------------------------
   .copyrightArea
   ------------------------------------------------ */  
footer .copyrightArea { margin-top: 70px; position:relative; z-index:1; }
footer .copyrightArea:before { position: absolute; top: 0; left: 0; right: 0; height: 3px; content: ""; border-top: #111 1px solid; border-bottom: #111 2px solid; z-index: -1;}
footer .copyrightArea p { font-size:11px; font-family:'Libre Baskerville',serif; font-weight:400; line-height:100px; letter-spacing:0.02em;}

@media only screen and (max-width: 900px) {
footer .copyrightArea { margin-top: 60px; }
}
@media only screen and (max-width: 738px) {
footer .copyrightArea { margin-top: 40px; }
footer .copyrightArea p { font-size:10px; line-height:80px;}
}




/* --------------------------------------------------------------------------------------   

   .linkArea

   -------------------------------------------------------------------------------------- */

.linkArea { margin-top:70px; text-align:center; }

@media only screen and (max-width: 960px) {
.linkArea { margin-top:60px; }	
}
@media only screen and (max-width: 738px) {
.linkArea { margin-top:50px; }	
}
@media only screen and (max-width: 640px) {
.linkArea { margin-top:45px; }	
}

/* a.btn */
.linkArea a.btn { display: inline-block; margin:0; width:100%; max-width:280px; color: #fefefe; background: #111; border:#111 2px solid; text-decoration: none;  line-height: 60px;text-align: center; position: relative; z-index:1; overflow: hidden; font-size: 16px;font-family: 'courier_prime_sansregular'; font-weight: normal; letter-spacing: 0;}
.linkArea a.btn:before { position:absolute; top:0; right:10px; bottom:0; font-size:.9em; font-family:themify;content:"\e649";font-weight:normal; z-index:0;}
.linkArea a.btn:after { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: block; background: #fefefe; content: ""; z-index: -1; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}

/* a.btnBorder */
.linkArea a.btnBorder { color: #111; background: none; }
.linkArea a.btnBorder:after { background: #111; }

/* a.btnWhite */
.linkArea a.btnBorderWhite { color: #fefefe; border-color: #fefefe; background: none;}
.linkArea a.btnBorderWhite:after { background: #fefefe; border-color: #fefefe; }

/* a.btnSmall */
.linkArea a.btnSmall { max-width:200px; font-size:15px;line-height:45px; }

/* a.btnSmallMore */
.linkArea a.btnSmallMore { max-width:200px; font-size:15px;line-height:40px;}

/* a.btn_underline */
.linkArea a.btn_underline { display: inline-block; margin:0; max-width:200px; color: #111; border:none; border-bottom:#111 2px solid; font-size:14px; line-height: 50px; }

@media (min-width: 961px) and (hover: hover) {
.linkArea a.btn:hover { color: #111;}
.linkArea a.btn:hover:after {-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}
.linkArea a.btnBorder:hover { color: #fefefe;}
.linkArea a.btnBorderWhite:hover { color: #111;}
}
@media only screen and (max-width: 960px) {
.linkArea a.btn { line-height: 55px; }
.linkArea a.btn:before{ font-size:14px;}
.linkArea a.btn:after { display: none;}
}
@media only screen and (max-width: 738px) {
.linkArea a.btn { font-size:15px;line-height: 50px; }	
.linkArea a.btnSmall { line-height:40px; }
.linkArea a.btnSmallMore { font-size:12px; letter-spacing: 1px;}
}

/* a.btn_brand_link */
a.btn_brand_link { display: block; margin:30px 0 0; width:100%; max-width:220px; color: #fefefe; background: #111; border:#111 2px solid; text-decoration: none;text-align: center; position: relative; z-index:1; overflow: hidden; font-size: 15px;font-family: 'courier_prime_sansregular'; font-weight: normal;  letter-spacing: 0; line-height: 50px;}
a.btn_brand_link:before { position:absolute; top:0; right:15px;font-size: 0.85em;font-family:'themify';content:"\e62f";font-weight:normal; z-index:1;}
a.btn_brand_link:after { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; display: block; background: #fefefe; content: ""; z-index: -1; -webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}

@media (min-width: 961px) and (hover: hover) {
a.btn_brand_link:hover { color: #111;border:#111 2px solid; border-bottom: #111 2px solid;}  
a.btn_brand_link:hover:after { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}
}
@media only screen and (max-width: 960px) {
a.btn_brand_link { margin:30px auto 0; width:100%; max-width:210px;}
a.btn_brand_link:after {display: none;}
}
@media only screen and (max-width: 738px) {
a.btn_brand_link { font-size: 13px;margin:30px auto 0; width:100%; max-width:200px; line-height: 45px;}
}




/* --------------------------------------------------------------------------------------   

   #headline

   -------------------------------------------------------------------------------------- */
  
#headline { height:250px; margin:60px 0 0; position:relative; z-index:0;} 
#headline:after { position:absolute; bottom:0; right:5%; left:5%; height: 3px; content:""; border-top: #111 2px solid; border-bottom: #111 1px solid; z-index:-1; margin-bottom: -2px; }
#headline .inner { position: absolute; top: 50%; left: 50%; width:90%; max-width: 100%; display: inline-block; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index:4; margin-top: -10px;}

/* h1 */
#headline h1 { font-size: 55px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: 2px; line-height:1;}
#headline h1.small { font-size: 20px; letter-spacing: 2px; margin-top: 20px;}
#headline h1.no { font-size: 20px; letter-spacing: 2px; margin-top: 12px;font-family: "Source Serif 4", serif; font-weight: 700;}

@media only screen and (max-width: 738px) {
#headline { height:130px; margin:50px 0 0; position:relative; z-index:0; } 
#headline:after { right:0; left:0; }
#headline h1 { margin-top: 10px; font-size: 30px; }
#headline h1.small { font-size: 12px; margin-top: 8px;}
#headline h1.no { font-size: 12px; margin-top: 8px;}
}
@media only screen and (max-width: 320px) {
#headline h1 { font-size: 27px; }
}

@media only screen and (max-width: 738px) {
#headline.headline_sub {height: 15px}   
 #headline.headline_sub .t_ttl_page_sub {font-size: 0;}
}



/* --------------------------------------------------------------------------------------   

   .central

   -------------------------------------------------------------------------------------- */

.central { max-width:1300px; margin: 0 auto; position: relative; z-index: 1;}



/* --------------------------------------------------------------------------------------   

   #breadcrumb

   -------------------------------------------------------------------------------------- */
   
#breadcrumb { margin: -14px 5% 0; position:relative; z-index:1; }
/* ol */
#breadcrumb ol { font-size: 0; margin: 0; padding: 0; }
#breadcrumb li { display: inline-block; list-style: none; font-size: 11px; font-family:"Source Serif 4", serif; font-weight: 600;margin: 0 10px 0 0; padding: 0 10px; letter-spacing: 1px; height:25px; line-height:25px; background: #fefefe; font-feature-settings : "palt" 1; }
#breadcrumb li:first-child { margin-left: -10px;}
#breadcrumb li:last-child {overflow: hidden;text-overflow: ellipsis; white-space: nowrap; max-width:20em;}
#breadcrumb li a { display: inline-block; position:relative; font-weight: 400; z-index:1; line-height:25px;}
#breadcrumb li a+a:before { display: inline-block; content: "/"; margin: 0 .5em 0 .25em; }

#breadcrumb li a:after { position: absolute; bottom: 0; right: 0; left: 0; height: 0; content: ""; border-bottom: #111 1px solid; z-index: 1;-webkit-transform-origin:right top;transform-origin:right top;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transition:transform .5s ease;transition:transform .5s ease}
#breadcrumb li a+a:after { left: 1.15em;}

@media (min-width: 961px) and (hover: hover) {
#breadcrumb li a:hover:after { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}
}
@media only screen and (max-width: 738px) {
#breadcrumb { margin: 0; padding: 18px 5% 20px; border-bottom: #111 1px solid; overflow: hidden; line-height: 1;}
#breadcrumb li { margin: 2px 0 0; padding: 0 8px 0 15px; letter-spacing: 1px; font-size: 11px; height:20px; line-height:20px; position: relative; z-index: 1;}
#breadcrumb li:before { position: absolute; top: 0; left: 0; bottom: 0; width: 5px; font-size: 8px; font-family: 'themify'; content: "\e649"; font-weight: normal;  height:20px; line-height:20px; text-align: center; vertical-align: 0; }
#breadcrumb li:first-child { margin-left: 0; padding: 0 8px 0 0; }
#breadcrumb li:first-child:before { display:none;}
#breadcrumb li a { position:relative; font-weight: 400; z-index:1; line-height:20px;}
}




/* --------------------------------------------------------------------------------------   

   #content

   -------------------------------------------------------------------------------------- */
   
#content { padding-top:65px; }

@media only screen and (max-width: 960px) {
#content { padding-top:65px; }
}
@media only screen and (max-width: 738px) {
#content { padding-top:55px; }
}


/* --------------------------------------------------------------------------------------   

   .headline

   -------------------------------------------------------------------------------------- */

.headline { margin-bottom: 70px; text-align: center;}
.headline .title{ position: relative; margin: 0 auto; font-size: 40px; font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: 1.5px; line-height:1.3; text-align: center; z-index:1; }
.headline .jp { margin-top: 10px; font-size: 16px; font-family: 'Shippori Mincho B1', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif; font-weight: 400; letter-spacing: 1px; line-height: 1.5;}
.headline .logo { position: relative; margin: 0 auto; font-size: 0; z-index: 1;}
.headline .stitle { margin-bottom: 15px; font-size: 16px;font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: .05em; line-height: 1.3;}

@media only screen and (max-width: 960px) {
.headline { margin-bottom: 60px; }
.headline .title{ font-size: 35px;}
.headline .jp { font-size: 14px;}
.headline .stitle { margin-bottom: 12px; font-size: 15px;}
}
@media only screen and (max-width: 738px) {
.headline { margin-bottom: 50px; }
.headline .title{ font-size: 25px;}
.headline .jp { font-size: 13px;}
.headline .stitle { margin-bottom: 12px; font-size: 13px;}
}
@media only screen and (max-width: 640px) {
.headline .stitle { margin-bottom: 12px; font-size: 12px;} 
}
@media only screen and (max-width: 414px) {
.headline { margin-bottom: 45px; }
.headline .title{ font-size: 23px;}
}
@media only screen and (max-width: 320px) {
.headline .title{ font-size: 21px;}
}




/* --------------------------------------------------------------------------------------   

   ul.circle

   -------------------------------------------------------------------------------------- */

ul.circle { margin: 0; padding: 0 0 0 1em; list-style: circle; font-size: 15px;text-align: left; }
ul.circle li { margin-top: 3px; font-size: 15px; font-weight: 400; letter-spacing: 0.05em; line-height: 2; }

@media only screen and (max-width: 960px) {
ul.circle li {line-height: 1.9;}
}
@media only screen and (max-width: 738px) {
ul.circle li {line-height: 1.8;}
}




/* --------------------------------------------------------------------------------------   

   #scrollUp

   -------------------------------------------------------------------------------------- */
   
#scrollUp { position: fixed; bottom: 25px; right: 2.55%; z-index: 3;}
#scrollUp a { width: 50px; height: 50px; display: block; color: #fefefe; background: #111; border:none; text-align: center; -webkit-border-radius: 100%; border-radius: 100%; position:relative; z-index:1; }
#scrollUp a:before { position:absolute; top:0; left:0; right:0; bottom:0; font-family:themify; content:"\e648"; font-size: 16px; line-height:50px;  }

@media (min-width: 961px) and (hover: hover) {
#scrollUp a:hover { -webkit-transform: translate(0px, -5px);transform: translate(0px, -5px); }
}
@media only screen and (max-width: 738px) {
#scrollUp { position: fixed; bottom: 12px; right: 5%; }
#scrollUp a { width: 50px; height: 50px; }
#scrollUp a:before { font-size: 16px; line-height:48px;  }
}




/* --------------------------------------------------------------------------------------   

   .slick-slider

   -------------------------------------------------------------------------------------- */

.slick-slider{position:relative;display:block;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;-webkit-tap-highlight-color:transparent}
/*.slick-slider{touch-action: pan-y;}*/
.slick-slider{-ms-touch-action:pan-y;touch-action:pan-y;}
.slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-loading .slick-list{background:white}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-track,.slick-slide,.slick-slide img{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;left:0;top:0;display:block;zoom:1}
.slick-track:before,.slick-track:after{content:"";display:table}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{float:left;height:100%;min-height:1px;display:none}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated { -webkit-animation-duration: .7s; animation-duration: .7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }
 
@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(40px);-ms-transform:translateY(40px);transform:translateY(40px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}




/* --------------------------------------------------------------------------------------   

   #page_404

   -------------------------------------------------------------------------------------- */
	 
#page_404 { padding: 90px 5%; position: relative; z-index: 1;}

@media only screen and (max-width: 960px) {	
#page_404 { padding: 80px 5%;}
}
@media only screen and (max-width: 738px) {	
#page_404 { padding: 70px 5%;}
}
.headline h2.txt404 { font-size: 22px; font-family: 'Shippori Mincho B1', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", Verdana, serif;  font-weight: 400; letter-spacing: 1px; line-height: 1.5;}

@media only screen and (max-width: 960px) {	
.headline h2.txt404 { font-size: 18px;}
}

#page_404 .page_404 { text-align: center;}

@media only screen and (max-width: 738px) {	
#page_404 .page_404 { text-align: left; padding: 0 2.5%;}
}





/* --------------------------------------------------------------------------------------   

   .product_archive
    PRODUCT アーカイブ

   -------------------------------------------------------------------------------------- */

/* .product_archive */
.product_archive { font-size: 0; margin-top: 70px; display: flex; flex-wrap: wrap; gap:70px 5%}
.product_archive .product_item { width: calc((100% - 2 * 5%) / 3);position: relative; z-index: 0;}

@media only screen and (max-width: 960px) {	
.product_archive { margin-top: 60px; gap:60px 5% }
.product_archive .product_item { width: calc((100% - 1 * 5%) / 2);}
}
@media only screen and (max-width: 738px) {	
.product_archive { margin-top: 50px; gap:50px 5%}
.product_archive .product_item { width: calc((100% - 1 * 5%) / 2);}
}
@media only screen and (max-width: 640px) {	
.product_archive { gap:40px 5%}
}
@media only screen and (max-width: 414px) {	
.product_archive { gap:35px 5%}
}
/* .imgArea */
.product_archive .imgArea { position: relative; z-index: 1; }
.product_archive .imgArea a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5;}
.product_archive .imgArea img {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}

/* .new */
.product_archive .product_item .new { position: absolute; top: 0; right: 0; left: 0; color: #fe831f;font-size: 15px;font-family: 'courier_prime_sansregular'; font-weight: normal;line-height:1; text-align: center;letter-spacing: 0; z-index: 2; text-indent:0.5em;}

@media (min-width: 961px) and (hover: hover) {
.product_archive .imgArea:hover img {opacity: 0.3;}
}

/* .txtArea */
.product_archive .product_item .txtArea { text-align: center;}
.product_archive .product_item .stitle { margin-bottom: 1px; font-size: 10px;font-family: 'Libre Baskerville', serif; font-weight: 400; letter-spacing: .05em; line-height: 1.6;}
.product_archive .product_item h3.name {font-size: 13px;font-family: 'Libre Baskerville', serif;font-weight: 400;letter-spacing: 0.05em; line-height:1.8;}
.product_archive .product_item h3.no {font-size: 15px;font-family: 'courier_prime_sansregular'; font-weight: normal;line-height:1.8;letter-spacing: 0.015em;}
.product_archive .product_item h4.size { font-size: 11px; font-weight: 400; line-height: 1.8; letter-spacing:  0.2em;}
.product_archive .product_item .sub_no { margin: -2px 0 5px; font-size: 13px; font-size: 12px; font-weight: 400;line-height:1.55;letter-spacing: 0.05em;}

/* .productBox .btn_underline */
.product_archive .product_item .btn_underline { margin: 8px 0 0; display: inline-block;border-bottom: #111 1px solid; font-size: 12px;font-family: 'courier_prime_sansregular'; font-weight: normal; line-height: 20px; letter-spacing: 0;text-align: center; position: relative; z-index: 0; }
.product_archive .product_item .btn_underline:after { position: absolute; top: -1px; bottom: -1px; left: -4px; right:-4px; display: block; background: transparent; content: ""; z-index: -1; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

@media (min-width: 961px) and (hover: hover) {
.product_archive .product_item .btn_underline:hover { color: #fefefe;}
.product_archive .product_item .btn_underline:hover:after { background: #111;}
}
@media only screen and (max-width: 738px) {	
.product_archive .product_item .new { font-size: 14px; margin-top: -5px;}
.product_archive .product_item h3.name {font-size: 12px; line-height:1.5;}
.product_archive .product_item h3.no {font-size: 14px; line-height:1.4; margin-top: 2px;}
.product_archive .product_item h4.size { font-size: 9px; line-height: 1.4; margin-top: 2px; }
.product_archive .product_item .sub_no { margin: 4px 0 5px; font-size: 11.5px;line-height:1.4;}
.product_archive .product_item .btn_underline { display: inline;margin: 3px 0 0; font-size: 12px; line-height: 25px; }
}
@media only screen and (max-width: 640px) {	
.product_archive .product_item .btn_underline {font-size: 11px; }
.product_archive .product_item .sub_no { font-size: 11px;}
}
@media only screen and (max-width: 320px) {	
.product_archive .product_item h3.no {font-size: 13px; } 
}



/* --------------------------------------------------------------------------------------   

   .flow_area
    WORKFLOW アーカイブ

   -------------------------------------------------------------------------------------- */

/* .flow_area */
.flow_area{ position: relative; z-index: 1;}
.flow_area .flow_item { margin-top: 80px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: relative; z-index: 1;}
.flow_area .flow_item:first-child { margin: 0;}

/* .img_area */
.flow_area .flow_item .img_area { width: 47.5%; position: relative; z-index: 1; overflow: hidden;background: #111;}
.flow_area .flow_item .img_area img {-webkit-transition: all 0.7s ease; transition: all 0.7s ease;}

/* a */
.flow_area .flow_item .img_area a { display: block; position: relative; z-index: 4;}
.flow_area .flow_item .img_area .time_area {position: absolute; bottom: 20px; left: 20px; z-index: 1; color: #fefefe; font-size: 14px;font-family: 'courier_prime_sansregular'; font-weight: normal;line-height:1;letter-spacing: 0;}

/* .txt_area */
.flow_area .flow_item .txt_area { width: 45%; }
.flow_area .flow_item .txt_area .ttl_area h3{ font-size: 24px;font-family: 'Libre Baskerville', serif;font-weight: 500; letter-spacing: 0.025em; line-height: 1.7;font-feature-settings: "palt";font-size: 22px;  font-family: 'Libre Baskerville', serif; line-height: 1.6;}
.flow_area .flow_item .txt_area .ttl_area h3 span { display: block; font-size: 14px; letter-spacing: 0.02em;}
.flow_area .flow_item .txt_area .descrption_area { margin: 15px 0 0; padding-right: 5%;}
.flow_area .flow_item .txt_area p { font-size: 15px; line-height: 1.65;}
/* .linkArea */
.flow_area .flow_item .linkArea {margin-top:30px; display: flex; gap:0 10px;}

@media (min-width: 961px) and (hover: hover) {
.flow_area .flow_item .img_area:hover img {opacity: 0.3;}
}
@media only screen and (max-width: 960px) {
.flow_area .flow_item { margin-top: 80px; flex-direction: column;}
.flow_area .flow_item:first-child { margin: 0;}
.flow_area .flow_item .img_area { width: 85%;}
.flow_area .flow_item .txt_area { width: 80%; margin-top: 30px; }
.flow_area .flow_item .txt_area .ttl_area {text-align: center;}
.flow_area .flow_item .txt_area .ttl_area h3{ font-size: 24px; line-height: 1.65;}
.flow_area .flow_item .txt_area .ttl_area h3 span { font-size: 15px;}
.flow_area .flow_item .txt_area .descrption_area { margin: 15px 0 0; padding: 0 5%;}
.flow_area .flow_item .txt_area p { font-size: 15px; line-height: 1.85;}
.flow_area .flow_item .linkArea {margin-top:30px; display: flex; justify-content: center; gap:0 10px;}
}
@media only screen and (max-width: 738px) {	
.flow_area .flow_item { margin-top: 70px;}
.flow_area .flow_item .img_area { width: 100%;}
.flow_area .flow_item .txt_area { width: 100%; margin-top: 25px; }
.flow_area .flow_item .txt_area .ttl_area {text-align: center;}
.flow_area .flow_item .txt_area .ttl_area h3{ font-size: 20px; line-height: 1.8;}
.flow_area .flow_item .txt_area .ttl_area h3 span { font-size: 13px; letter-spacing: 0;}
.flow_area .flow_item .txt_area .descrption_area { margin: 15px 0 0; padding: 0 2.5%;}
.flow_area .flow_item .txt_area p { font-size: 15px; line-height: 1.85;}
.flow_area .flow_item .linkArea {margin-top:25px; }
}
@media only screen and (max-width: 640px) {
.flow_area .flow_item .txt_area .descrption_area { padding: 0 2.5%;}
.flow_area .flow_item .txt_area .ttl_area h3{ font-size: 18px; line-height: 1.7;}
.flow_area .flow_item .txt_area p { line-height: 1.8;}
.flow_area .flow_item .linkArea {margin-top:25px; display: flex; flex-direction: column; width: 100%; justify-content: center; gap:10px 0; }
.linkArea a.btn_workflow { margin: 0 auto;}
}

/* --------------------------------------------------------------------------------------   

   .popup_youtube for Movie of WORKFLOW

   -------------------------------------------------------------------------------------- */

.popup_youtube { display: block; font-size: 0; position: relative;z-index: 1;}
.popup_youtube:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 70px; height: 70px; margin: auto; font-size: 25px;text-align: center; line-height: 71px; text-indent: 3px; color: #fefefe; content:"\025b6"; border:#fefefe 2px solid;z-index: 1; -webkit-border-radius: 100%; border-radius: 100%; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
.popup_youtube:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; background: #111; opacity: 0.4; z-index: 0; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; }

@media (min-width: 961px) and (hover: hover) {
.popup_youtube:hover:before {-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1); }
.popup_youtube:hover:after { opacity: 0.7;}
}
@media only screen and (max-width: 738px) {
.popup_youtube:before {width: 60px; height: 60px; font-size: 22px;line-height: 61px; }
}


/*
    Name: YouTubePopUp
    Description: jQuery plugin to display YouTube or Vimeo video in PopUp, responsive and retina, easy to use.
    Version: 1.0.1
    Plugin URL: http://wp-time.com/youtube-popup-jquery-plugin/
    Written By: Qassim Hassan
    Twitter: @QQQHZ
    Websites: wp-time.com | qass.im | wp-plugins.in
    Dual licensed under the MIT and GPL licenses:
        http://www.opensource.org/licenses/mit-license.php
        http://www.gnu.org/licenses/gpl.html
    Copyright (c) 2016 - Qassim Hassan
*/

.YouTubePopUp-Wrap{position:fixed;top:0;width:100%;height:100%;background-color:#000;background-color:rgba(0,0,0,0.9);left:0;z-index:9999999999999;}
.YouTubePopUp-animation{opacity: 0;-webkit-animation-duration: 0.5s;animation-duration: 0.5s; -webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: YouTubePopUp; animation-name: YouTubePopUp;}

@-webkit-keyframes YouTubePopUp { 0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes YouTubePopUp {0% {opacity: 0; } 100% {opacity: 1; }}

body.logged-in .YouTubePopUp-Wrap{ /* For WordPress */top:32px; top: 0; z-index:99998;}
.YouTubePopUp-Content{max-width:800px;display:block;margin:0 auto;height:100%;position:relative; }
.YouTubePopUp-Content iframe{max-width:100% !important; width:100% !important;display:block !important;height:480px !important;border:none !important; position:absolute; top: 0;bottom: 0;margin: auto 0;}
.YouTubePopUp-Hide{-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-name: YouTubePopUpHide; animation-name: YouTubePopUpHide;}
@-webkit-keyframes YouTubePopUpHide {0% {opacity: 1; } 100% {opacity: 0;}}
@keyframes YouTubePopUpHide {0% {opacity: 1;} 100% {opacity: 0; }}

@media all and (max-width: 768px) and (min-width: 10px){
.YouTubePopUp-Content{max-width:100%;}
}
@media all and (max-width: 600px) and (min-width: 10px){
.YouTubePopUp-Content iframe{height:320px !important;}
}
@media all and (max-width: 480px) and (min-width: 10px){
.YouTubePopUp-Content iframe{height:220px !important; }
}

.YouTubePopUp-Close { position: absolute; top: 15px; right: 15px; width:50px; height:50px; cursor:pointer;border: #fefefe 1px solid;z-index:100;-webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;}
.YouTubePopUp-Close:before { position: absolute; top:0; right:0; left:0; bottom:0; color: #fefefe; font-family:'themify'; content:"\e646"; font-size:18px; line-height:50px; text-align: center; text-indent:0; z-index:1; }

@media only screen and (max-width: 738px) {
.YouTubePopUp-Close { top: 10px; right: 10px;width:40px; height:40px; }
.YouTubePopUp-Close:before { font-size:14px; line-height: 39px;  }
}






/* -----------------------------------------------------------

   .block_product_feature
   特集欄 OTHER用

   ----------------------------------------------------------- */

.block_product_feature { padding: 100px 5%; position: relative; z-index: 1;}
.block_product_feature:after { position: absolute; top: 0; left: 5%; right: 5%; height: 0; content: ""; border-top: #111 1px solid; z-index: -1;}

@media only screen and (max-width: 960px) {	
.block_product_feature { padding: 80px 5%;}
}
@media only screen and (max-width: 738px) {	
.block_product_feature { padding: 70px 5% 80px;}
}

/* .headline */
.block_product_feature .headline .t_ttl_en { font-size: 16px;font-family: 'Libre Baskerville', serif;font-weight: 400; line-height: 1; letter-spacing: .05em; text-indent: .1em;}
.block_product_feature .headline .t_ttl_jp { margin: 20px 0 0; font-size: 35px; font-family: 'Droid Serif','Shippori Mincho B1', serif; font-weight: 600; letter-spacing: .1em; line-height: 1;}

@media only screen and (max-width: 960px) {	
.block_product_feature .headline .t_ttl_en {font-size: 20px;letter-spacing: .1em; text-indent: 0}
.block_product_feature .headline .t_ttl_jp { margin: 15px 0 0; font-size: 30px;}
}
@media only screen and (max-width: 738px) {	
.block_product_feature .headline .t_ttl_en {font-size: 15px;}
.block_product_feature .headline .t_ttl_jp { margin: 12px 0 0; font-size: 25px;}
}

/* .feature_area */
.feature_area { position: relative ;z-index: 1; display: flex; flex-wrap: wrap;gap:70px 5%;}
.feature_area .feature_box { width: calc((100% - 2 * 5%) / 3); position: relative; z-index: 0;}

@media only screen and (max-width: 960px) {	
.feature_area { gap:50px 5%;}
.feature_area .feature_box { width: calc((100% - 1 * 5%) / 2);}
}
@media only screen and (max-width: 738px) {	
.feature_area { gap:45px 5%;}
}

/* .t_cat */
.feature_area .feature_box .t_cat { font-size: 12px;font-family: 'Libre Baskerville', serif;font-weight: 700;letter-spacing: 0.05em; line-height:1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;overflow: hidden;} 

/* .img_area */
.feature_area .feature_box .img_area { margin: 15px 0 0; position: relative; z-index: 1; overflow: hidden;background: #111;}
.feature_area .feature_box .img_area img { -webkit-transition: all 0.7s ease; transition: all 0.7s ease;}

/* .txt_area */
.feature_area .feature_box .txt_area { margin-top: 20px; padding: 0 2.5% 0 0;}
.feature_area .feature_box .txt_area .t_ttl_feature { font-size: 14px; font-family: 'Droid Serif', 'Shippori Mincho B1', serif; font-weight: 500; letter-spacing: .05em; line-height: 1.75; }

@media (min-width: 961px) and (hover: hover) {
.feature_area .feature_box .img_area:hover img { opacity: 0.3;}
.feature_area .feature_box .img_area:hover:before { -webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}
.feature_area .feature_box .img_area:hover:after { webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:scale(1,1);transform:scale(1,1)}
}
@media only screen and (max-width: 960px) {	
    .feature_area .feature_box .img_area { margin: 10px 0 0;}
.feature_area .feature_box .txt_area { margin-top: 20px; padding: 0 5% 0 0;}
.feature_area .feature_box .txt_area .t_ttl_feature { font-size: 15px;letter-spacing: .05em; line-height: 1.8;}
}
@media only screen and (max-width: 738px) {	
.feature_area .feature_box .txt_area { margin-top: 15px; padding: 0 2.5% 0 0;}
.feature_area .feature_box .txt_area .t_ttl_feature { font-size: 13px; letter-spacing: .025em; line-height: 1.7;}
}
@media only screen and (max-width: 640px) {	
.feature_area .feature_box .t_cat { font-size: 10px; line-height:1.3; letter-spacing: .05em; } 
.feature_area .feature_box .txt_area { padding: 0;}
.feature_area .feature_box .txt_area .t_ttl_feature {line-height: 1.55}
}

/* .feature_box .btn_underline */
.feature_area .feature_box .btn_underline { margin: 10px 0 0; display: inline-block;border-bottom: #111 1px solid; font-size: 13px;font-family: 'courier_prime_sansregular'; font-weight: normal; line-height: 20px; letter-spacing: 0;text-align: center; position: relative; z-index: 0; }

@media (min-width: 961px) and (hover: hover) {
.feature_area .feature_box .btn_underline:hover { color: #fefefe;background: #111;}
}
@media only screen and (max-width: 738px) {
.feature_area .feature_box .btn_underline { margin: 8px 0 0; font-size: 12px; }
}