@charset "utf-8";

/* ===============================
! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/* ===============================
My Normalize */
h1,h2,h3,h4,h5,h6,p { margin-top: 0;}
h1,h2 { margin-bottom: 1.5em;}
h3,h4,h5,h6 { margin-bottom: 1em}
p { margin-bottom: 1em;}
h1,h2,h3,h4,h5,h6,th { font-weight: normal;}
*, *:before, *:after { box-sizing: border-box;}
a { color: #766557; text-decoration: underline;}
a:hover { text-decoration: none;}
.listreset { list-style: none; margin: 0; padding: 0;}
.dl.listreset dd,
figure { margin: 0;}
address { font-style: normal; font-size: .813rem; line-height: 1.2;}
.reset { margin-bottom: 0;}
.areset a { text-decoration: none; display: block;}

/* =============================
Clearfix */
.cf::after {
 content: "";
 display: block;
 clear: both;
}
    
/* =================================
   オブジェクトフィット */
.ofi { object-fit: cover;}
    

/* ===============================-
   アイコンフォント */

@font-face {
font-family: 'general';
src:  url('fonts/general.eot?6h5jum');
src:  url('fonts/general.eot?6h5jum#iefix') format('embedded-opentype'),
   url('fonts/general.ttf?6h5jum') format('truetype'),
   url('fonts/general.woff?6h5jum') format('woff'),
   url('fonts/general.svg?6h5jum#general') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'general' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-exlink:before {content: "\e900";}
.icon-mail:before {content: "\e901";}
.icon-pc:before {content: "\e902";}
.icon-sp:before {content: "\e903";}
.icon-tel:before {content: "\e904";}
.icon-arrow:before { content: "\e905";}
 

.mincho { font-family: "YuMincho", "Yu Mincho"; font-weight: 700;}
.en_body .mincho {
   font-family: ui-serif, "Times New Roman", Times, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
   font-weight: 700;
   font-size-adjust: 0.55;
}


/**************************************
   基本設定・汎用スタイル
**************************************/
html { font-size: 100%;}

body {
 margin: 0;
 padding: 0;
 font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem);
 text-align: center;
 color: #fff;
 line-height: 1.8;
 word-wrap: break-word;
 font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue",HelveticaNeue,YuGothic,"Yu Gothic Medium","Yu Gothic",Verdana,Meiryo,sans-serif;
 background: #181818;
}

.en_body {
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
   line-height: 1.6;
}

b, strong, .bold{
 font-weight: bold;
}

img { width: 100%; display: block;}

      
/* ================================
   汎用セレクタ */

@media only screen and (max-width: 767px){.pcOnly { display: none !important;}}
@media print, screen and (min-width: 768px){.spOnly { display: none !important;}}
@media only screen and (max-width: 1024px){.pcOnly2 { display: none !important;}}
@media print, screen and (min-width: 1025px){.spOnly2 { display: none !important;}}
@media only screen and (max-width: 1259px){ .pcOnly3 { display: none !important;} }
@media print, screen and (min-width: 1260px){ .spOnly3 { display: none !important;} }

.sectionbloc { padding-top: 3em; padding-bottom: 3em;}
@media print, screen and (min-width: 1025px){.sectionbloc { padding-top: 6em; padding-bottom: 6em;}}

.wrap {
 width: 100%;
 padding-left: 3%;
 padding-right: 3%;
 margin-right: auto;
 margin-left: auto;
}
.wrap1440 {
 width: 100%;
 padding-left: 3%;
 padding-right: 3%;
 max-width: 1440px;
 margin-right: auto;
 margin-left: auto;
}
.wrap1260 {
 width: 100%;
 padding-left: 3%;
 padding-right: 3%;
 max-width: 1260px;
 margin-right: auto;
 margin-left: auto;
}
.wrap870 {
   width: 100%;
   padding-left: 3%;
   padding-right: 3%;
   max-width: 870px;
   margin-right: auto;
   margin-left: auto;
  }
      
.txC { text-align: center;}
.txL { text-align: left;}
.txR { text-align: right;}

.main { text-align: left;}

.prose {
  max-width: 60ch;
}


/* ================================
   ボタン */

.btn { margin: 2em auto 0;}
.btn a {
   display: inline-block;
   background: #fff;
   color: #766557;
   text-decoration: none;
   padding: .7em 4em;
   position: relative;
   text-align: center;
   transition: all .2s ease;
}
.btn a::before {
   content: "";
   display: block;
   pointer-events: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: calc(100% - .5em);
   height: calc(100% - .5em);
   border: 1px solid #766557;
   z-index: 10;
}
.btn a::after {
   font-family: 'general';
   content: "\e905";
   position: absolute;
   right: 1em;
   top: 50%;
   margin-top: -.9em;
   color: #766557;
   transform: rotate(270deg);
   font-weight: 400;
}
.btn a:hover { opacity: .7;}
      
/* ====================================
   ヘッダー */

@keyframes HeaderPlay {
0% { transform: translateY(-100%);}
100% {  transform: translateY(0); background: #fff;}
}

header {
   position: fixed;
   z-index: 100;
   width: 100%;
   top: 0;
   left: 0;
   transition: .3s all ease;
}
.js-animation {
   animation-name: HeaderPlay;
   animation-duration: .5s;
   animation-delay: 0;
   background: #181818 !important;
  }
.h_header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1em 3%;
   color: #fff;
}
.h_logo_area { width: 80%;}

.logo {
   margin: 0;
   line-height: 1;
   display: flex;
   align-items: center;
}
.logo img { width: 100%; height: auto; width: 100%; display: block;}
.logo a { width: 180px;}

@media print, screen and (min-width: 1260px){
.h_logo_area { width: 250px;}
.SlideMenu { width: 50%;}
}
@media print, screen and (min-width: 1260px){
.logo { width: 100%;}
.logo a,
.logo img { width: 230px; height: auto; margin: 0; display: block}
.headernav { width: calc(100% - 250px);}
}


/*スマホ時ヘッダーアイコン */
.btnarea_sp {
 display: flex;
 justify-content: flex-end;
}
.btnarea_sp li { margin-left: 1.5em;}
.btnarea_sp a { cursor: pointer; line-height: 1; display: block; text-decoration: none;}
.btnarea_sp i { color: #fff; margin-left: 1em;}
.btnarea_sp .icon-cart { font-size: 2rem;}
.spnav_menu { margin-top: .3em;}

.btnarea_sp__cart { position: relative;}
.header_p_count {
 position: absolute;
 top: -.5em;
 left: .5em;
 color: #fff;
 background: #ec9200;
 border-radius: 50%;
 width: 1.5em;
 height: 1.5em;
 text-align: center;
 vertical-align: middle;
 display: inline-block;
 line-height: 1.5em;
 font-size: 1em;
}


@media only screen and (max-width: 1259px) {
/* ハンバーガーメニュー */
#nav-toggle {
 height: 30px;
 cursor: pointer;
}
#nav-toggle > div {
 position: relative;
 width: 30px;
}
#nav-toggle span {
 width: 100%;
 height: 2px;
 left: 0;
 display: block;
 background: #fff;
 position: absolute;
 transition: transform 0.6s ease-in-out, top 0.5s ease;
}
.js-animation #nav-toggle span { background: #fff;}
#nav-toggle span:nth-child(1) { top: 5px;}
#nav-toggle span:nth-child(2) { top: 15px;}
#nav-toggle span:nth-child(3) { top: 25px;}
#nav-toggle:hover span:nth-child(1) { top: 7px;}
#nav-toggle:hover span:nth-child(3) { top: 23px;}
.open #nav-toggle {
 position: fixed;
 top: 1em;
 right: 2em;
}
/* オープン時 */
.open #nav-toggle { top: 1em; right: 2em;}
.open #nav-toggle span { background: #232531;}
.open #nav-toggle span:nth-child(1) {
 top: 15px;
 transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
 top: 15px;
 width: 0;
 left: 50%;
}
.open #nav-toggle span:nth-child(3) {
 top: 15px;
 transform: rotate(-45deg);
}
/* z-index */
#nav-toggle { z-index: 1000;}
.main { z-index: 2;}
}      
/* ======================================
   ドロワー */

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

#SlideMenu {
 overflow: auto;
 background: rgba(255, 255, 255, 1);
 color: #232531;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 990;
 text-align: left;
 visibility: hidden;
 opacity: 0;
 transition: opacity .2s ease, visibility .2s ease;
 height: 100vh;
}

/* open */
.open {  overflow: hidden;}
.open #SlideMenu {  visibility: visible;  opacity: 1;}
.open #SlideMenu li,
.open .drw_tel {  opacity: 1;  transform: translateY(0);}

/* ==============================
   ドロワーロゴ */
.sp_nav_logo {
 margin: 1.5em 0 0 0;
}
.sp_nav_logo .logo {
 margin: auto;
 width: 75%;
 max-width: 200px;
 text-align: center;
}

/* =====================================-
 ナビゲーション */

#SlideMenu div,
#SlideMenu ul {
 opacity: 0;
 transform: translateY(50px);
 transition: transform 0.6s ease, opacity 0.2s ease;
 transition-delay: .15s;
}
.open #SlideMenu div,
.open #SlideMenu ul { opacity: 1; transform: translateY(0);}

/* ドロワーボタンナビ*/

.drw_sysnav {
 margin: 2em 3% 0 3%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.drw_sysnav li { width: 48%; margin-bottom: 1em;}
.drw_sysnav li a {
 line-height: 1;
 color: #766557;
 text-decoration: none;
 padding: 1em;
 display: block;
 border: 1px #766557 solid;
 border-radius: 4px;
 text-align: center;
 font-size: 80%;
}


/* グローバルナビ・ヘルプナビ*/

.gnv li a {
 display: block;
 border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
 color: #232531;
 padding: 1em 7%;
 text-align: left;
 text-decoration: none;
} 

.gnvsub li a { padding-left: 10%;}
.gnvsub li a::before {
   content: "-";
   margin-right: 1em;
}

.helpnav { margin: 1em 0 4em 0;}
.helpnav li a {
 display: block;
 color: #232531;
 text-decoration: none;
 padding: 1em 7%;
}
.helpnav li a::before {
   content: "■";
   color: #766557;
   margin-right:.5em;
}
.helpnav .icon-exlink { margin-left: .5em;}
.gnv .icon-exlink { margin-left: .5em;}
}


/* PC用グローバルナビ */
@media print, screen and (min-width: 1260px){
.gnv {
   display: flex;
   justify-content: flex-end;
   border-top: none;
   align-items: center;
}
.gnv li { margin-left: 2em;}
.gnv li a {
   text-decoration: none;
   color: #fff;
   transition: all .2s ease;
   font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}
.gnv .en_btn a {
   border: solid 1px #fff;
   padding: .3em .5em;
   font-size: 80%;
   line-height: 1.4;
}
.gnv li a:hover { opacity: .7;}
}

      
/* ===================================
   Footer */

footer {
   background: #181818;
   color: #fff;
}

/* ページトップ */
.pagetop {
 position: fixed;
 bottom: 4em;
 right: 1em;
 display: none;
 transition: all .2s ease;
 z-index: 99;
 width: 70px;
 height: auto;
}
@media print, screen and (min-width: 1025px){
.pagetop { width: 100px; bottom: 1em; right: 1em;}
.pagetop:hover { padding-bottom: 1em;}
}

/* インフォエリア */
.footerinfoarea_inner {
 padding: 3em 0 1em 0;
}
@media print, screen and (min-width: 1360px){
.footerinfoarea_inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 4em 0 2em 0;
}
}
.footerinfo { width: 100%; text-align: center;}

.flogo {
 font-weight: 700;
 font-size: 90%;
 margin-bottom: 3em;
}
.flogo img {
 width: 80%;
 height: auto;
 max-width: 250px;
 display: block;
 margin: 0 auto 1.5em auto;
}
@media print, screen and (min-width: 1360px){
 .flogo { margin: 0 auto 5em auto;}
 .flogo img {
  width: 100%;
  height:auto;
  max-width: 400px;
  margin: 0 auto 1.5em auto;
  display: block;
 }
 }

.address {
 display: block;
 font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
 line-height: 1.6;
 margin-bottom: 0;
}
.address span { display: inline-block;}
      
      
      
/* コピーライト */

.copyright small {
 padding: .7em 0 .7em 0;
 display: block;
 color: #fff;
 text-align: center;
 background: #181818;
}
@media print, screen and (min-width: 1025px){
.copyright small { padding: .7em 0;}
}



/* htanks */
.thanks_cont {
   padding-top: 6em;
   background: #F0F0F0;
}
@media print, screen and (min-width: 1025px){
.thanks_cont { padding-top: 8em;}
}
.thanks_txt { margin-bottom: 2em;}