@charset "UTF-8";
@import url("smoothness/jquery-ui-1.8.4.custom.css"); 

/*=================================================================
共通処理
=================================================================*/
#header *,
#footer * {box-sizing: border-box; margin: 0; padding: 0;}
#header li,
#footer li {list-style-type: none;}
#header img,
#footer img {border: 0;}
#header,
#footer {line-height: 1.5; word-wrap: break-word; font-size: 14px; font-weight: 400;}
#header a:link,
#header a:visited,
#footer a:link,
#footer a:visited {color: #000;}
#header a,
#footer a {text-decoration: none;}
#header a.button,
#header .button,
#footer a.button,
#footer .button {background-color: #817676; margin: 3px; color: #fff; display: block; text-align: center; padding: 12px; position: relative; transition: 0.2s; border-style: none; cursor: pointer; width: 100%; max-width: 320px;}

#header .sp,
#footer .sp {display: none;}
#header .pc,
#footer .pc {display: block;}

/*-- 共通パーツ --*/
#header .link_list,
#footer .link_list {display: flex; flex-direction: column; gap: 8px;}
#header .link_list a,
#footer .link_list a {position: relative; padding: 0 0 0 25px; display: block;}
#header .link_list a::before,
#footer .link_list a::before {content:""; background: url(../images/icon/link_arrow.svg) no-repeat center/contain; display: block; height: 14px; width: 14px; position: absolute; top: 4px; transition: 0.2s; left: 0;}

/*=================================================================
header - ヘッダ
=================================================================*/
#header {position: fixed; top: 0; left: 0; width: 100%; height: auto; font-family: "Zen Maru Gothic","ＭＳ ゴシック","ＭＳ Ｐゴシック","MS PGothic","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;}
#header, 
#header .inner, 
#header .header_info, 
#header .header_info .guide, 
#header .header_link {display: contents !important;}
#header .is-hide {transform: translateX(50px); opacity: 0;}
#header a {color: #FFFFFF;}
#header .header_overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgb(255 255 255 / 60%);; z-index: 996; opacity: 0; visibility: hidden; transition: 0.3s; pointer-events: none;}
#header .header_overlay.is-active {opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer;}
#header .inner {position: relative; margin: auto; padding: 40px 20px; display: flex; align-items: flex-start;; justify-content: space-between; gap: 40px; width: 100%;}

#header .header_logo {position: fixed; overflow: hidden; width: 155px; top: 20px; left: 20px; opacity: 0; transform: translateX(-100px); transition: all 0.3s ease; z-index: 1000;}
#header .header_logo.is-show {opacity: 1; transform: translateY(0); pointer-events: auto;}
#header .header_logo a {display: block; width: 100%; max-width: 155px; height: 155px; background: url(../images/logo_main.png) no-repeat center/contain; text-indent: -9999px;}

#header .header_info {position: fixed; top: 40px; right: 20px; align-items: center; transition: transform 0.35s ease, opacity 0.35s ease; opacity: 1;}
#header .header_info .guide {display: flex; align-items: center; justify-content: flex-end; flex-flow: column; gap: 10px;}
#header .header_info .guide #menuBtn, 
#header .header_info .guide img, 
#header .header_info .guide .header_link .header_link_text, 
#header .header_info .guide .cart .cart_item_count {transition: all 0.35s ease;}
#header .header_info .guide #menuBtn,
#header .header_info .guide .header_link img {position: fixed; z-index: 999; cursor: pointer; border: none; background: none; /*filter: drop-shadow(0 0 4px rgba(242, 242, 242, 0.8));*/}
#header .header_info .guide #menuBtn,
#header .header_info .guide #menuBtnClose,
#header .header_info .guide #searchBtnClose {padding: 0; width: 44px; height: 44px; background-color: unset; background-repeat: no-repeat; background-position: center; text-indent: -9999px; overflow: hidden; white-space: nowrap; border: 0; display: flex; justify-content: center; align-items: center;}
#header .header_info .guide #menuBtn {top: 50px; right: 20px; width: 44px; color: transparent;}	
#header .header_info .guide #menuBtn,
#header .header_info .guide #menuSearchBtn,
#header .header_info .guide #searchBtnClose,
#header .header_info .guide #menuBtnClose {cursor: pointer;}
#header .header_info .guide #menuBtn::before {content: ""; display: block; background: url(../images/icon/menu.svg) no-repeat center / 100%; width: 44px; height: 44px; position: absolute;}
#header .header_info .guide #menuBtn.is-menu_open::before {background: url(../images/icon/menu_open.svg) no-repeat center / 100%;}
#header .header_info .guide #searchBtnClose,
#header .header_info .guide #menuBtnClose {background: url(../images/icon/close.svg) center top / contain no-repeat; right: 10px; top: 10px; width: 20px; height: 20px; position: fixed; z-index: 1;}
#header .header_info .guide .menu_block,
#header .header_info .guide .search_block {content: ""; position: fixed; top: 0; right: 0; background: rgb(242 242 242 / 80%); width: 430px; height: 100vh; opacity: 1; visibility: visible; transform: translateX(100%); transition: transform 0.45s ease; pointer-events: none; z-index: 997;}
#header .header_info .guide .menu_block {padding: 50px 40px 40px 100px;}
#header .header_info .guide .search_block {padding: 104px 40px 40px 100px;}
#header .header_info .guide .menu_block::before,
#header .header_info .guide .search_block::before {content: ""; position: absolute; background: #fff; opacity: 0; visibility: hidden; transform: scaleX(0); transform-origin: right center; transition: transform 0.5s ease-out, opacity 0.2s;}
#header .header_info .guide .menu_block::before {top: 50px; left: 26px; width: 364px; height: 44px; border-radius: 44px;}
#header .header_info .guide .search_block::before {top: 104px; left: 16px; width: 374px; height: 62px; border-radius: 10px;}
#header .header_info .guide .menu_block.open,
#header .header_info .guide .search_block.open {transform: translateX(0); pointer-events: auto;}
#header .header_info .guide .search_block_inner_wrapper {padding: 0 0 300px; position: relative; overflow-y: auto; height: 100vh; border-radius: 10px; background-image: linear-gradient(#fff 30%, transparent 30%);}
#header .header_info .guide .menu_block .menu_block_inner,
#header .header_info .guide .search_block .search_block_inner {padding: 10px; border-radius: 10px; background-color: #fff;}
#header .header_info .guide .menu_block .menu_block_inner {opacity: 0; transform: translateX(20px); transition: all 0.3s ease 0.15s;}
#header .header_info .guide .menu_block.open .menu_block_inner {opacity: 1; transform: translateX(0);}
#header .header_info .guide .search_block input [type="submit"] {position: absolute; top: 50%; transform: translateY(-50%); right: 0; text-indent: -9999px;}
#header .header_info .guide .search_block .search_form_area {margin-bottom: 10px;}
#header .header_info .guide .search_block .search_form_area form {position: relative; width: 100%; max-width: none;}
#header .header_info .guide .search_block .search_form_area input {border-radius: 20px; color: #817676; background-color: #fff; border: 1px solid #817676; padding: 8px 10px; width: 100%; height: 36px; font-size: 14px; font-family: "Zen Maru Gothic","ＭＳ ゴシック","ＭＳ Ｐゴシック","MS PGothic","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Osaka", sans-serif;}
#header .header_info .guide .search_block .search_form_area .search_button {position: absolute; right: 10px; content: ""; background: url(../images/icon/search_brown.svg) no-repeat center/contain; width: 20px; height: 20px; border: none; top: 50%; transform: translateY(-50%);}

#header .header_info .guide .header_link {position: relative;}
#header .header_info .guide .header_link > a {width: 55px; position: relative; display: flex; justify-content: center; align-items: center; color: #000; flex-wrap: wrap;}
#header .header_info .guide .header_link.menu,
#header .header_info .guide .header_link.search {position: relative; overflow: visible;}
#header .header_info .guide .header_link .header_link_text {position: fixed; right: 16px; width: 50px; text-align: center; font-size: 9px; color: #fff; mix-blend-mode: difference; z-index: 999; line-height: 1;}
#header .header_info .guide .header_link .search img{top: 114px; right: 26px;}
#header .header_info .guide .header_link .search .header_link_text {top: 147px; }
#header .header_info .guide .header_link .cart img {top: 175px; right: 24px; width: 35px;}
#header .header_info .guide .header_link .cart .header_link_text {top: 222px;}
#header .header_info .guide .header_link .cart .cart_item_count {position: fixed; color: #fff; background: #E85513; width: 14px; height: 14px; font-size: 10px; top: 208px; right: 16px; border-radius: 9999px; text-align: center; line-height: 14px; text-indent: 0; z-index: 999;}
#header .header_info .guide .header_link .mypage img  {top: 247px; right: 24px; width: 35px;}
#header .header_info .guide .header_link .mypage .header_link_text {top: 288px;}
#header .header_info .guide .header_link .insta img  {top: 324px; right: 25px; width: 34px;}
#header .header_info .guide .header_link .x img  {top: 368px; right: 25px; width: 34px;}

#header .header_info .guide .links_area li a::after {display: none;}
#header .header_info .guide .links_area > li {width: 100%;}
#header .header_info .guide .links_area > li > a {display: block; position: relative; padding: 0 4px 0 30px; margin: 6px 0; font-size: 18px;}
#header .header_info .guide .links_area > li > a::before {content:""; display: block; position: absolute; top: 6px; left: 8px; width: 16px; height: 16px; background: url(../images/icon/link_arrow.svg) no-repeat center/contain;}

body.menu_open #header .header_info .guide .menu_block::before,
body.menu_search_open #header .header_info .guide .search_block::before {opacity: 1; visibility: visible; transform: scaleX(1);}
body.menu_open #header .header_info .guide #menuBtn,
body.menu_open #header .header_info .guide .header_link img,
body.menu_open #header .header_info .guide .header_link .header_link_text,
body.menu_open #header .header_info .guide .cart .cart_item_count,
body.menu_search_open #header .header_info .guide #menuBtn,
body.menu_search_open #header .header_info .guide .header_link img,
body.menu_search_open #header .header_info .guide .header_link .header_link_text,
body.menu_search_open #header .header_info .guide .cart .cart_item_count {transform: translateX(-340px); transition: transform 0.45s ease;}

/*-- アコーディオン --*/
#header .header_info .guide .accordion_block {border-bottom: 1px dotted #aea5a5;}
#header .header_info .guide .accordion_inner {border-top: 1px dotted #aea5a5;}
#header .header_info .guide .accordion_head {position: relative; display: block; padding: 8px 4px 8px 30px; background: #fff; text-decoration: none; transition: background 0.3s ease; font-size: 18px;}
#header .header_info .guide .accordion_head.is-open { background: #f6f6f6;}
#header .header_info .guide .accordion_head::before {content: ""; position: absolute; left: 8px; top: 14px; width: 16px; height: 16px; background: url(../images/icon/link_arrow_below-o.svg) no-repeat center / contain; transition: transform 0.3s ease;}
#header .header_info .guide .accordion_head::after {display: none;}
#header .header_info .guide .accordion_head.is-open::before {background-image: url("../images/icon/link_arrow_above-o.svg");}
#header .header_info .guide .accordion_body {display: none; background: #fff; border-top: 1px dotted #aea5a5; font-size: 14px; padding: 4px 0;}
#header .header_info .guide .accordion_body_inner a {display:block; position: relative; padding: 4px 4px 4px 30px;}
#header .header_info .guide .accordion_body_inner a::before {content: ""; position: absolute; left: 8px; top: 7px; width: 16px; height: 16px; background: url(../images/icon/link_arrow_brown-w.svg) no-repeat center / contain;}

/*=================================================================
footer - フッタ
=================================================================*/
#footer .link_list a{color: #444444;}
#footer .links_area {display: flex; flex-direction: column; align-items: flex-start;}
#footer .links_area a {padding: 16px 24px 16px 16px; display: block; position: relative; border-bottom: 1px solid #8A8A8A;}
#footer .links_area a::after {content:""; display: block; width: 8px; height: 12px; background: url(../images/icon/link_arrow.svg) no-repeat center/contain; position: absolute; top: 50%; right: 13px; transform: translateY(-50%);}

body.top #footer #scene{display: none;}
#footer {color: #444444; font-size: 14px; position: relative;}
#footer a {color: #444444;}
#footer .bnr_area {padding: 20px 25px; display: flex; justify-content: center; align-items: center; gap: 25px; background: #f8f8f8;}
#footer .bnr_area li {width: 100%; max-width: 173px;}
#footer .bnr_area img {width: 100%; display: block;}
#footer .footer_top {margin: 0 auto; padding: 0 25px; width: 100%; max-width: 1400px;}
#footer .footer_top .sns_area {margin: 24px 0 0; display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 10px;}
#footer .footer_top .sns_area img {width: 28px;}
#footer .footer_top .title {margin: 0 0 8px; padding: 0 4px; color: #444444; font-size: 16px; position: relative;}
#footer .footer_top .link_list {margin: 0 4px;}
#footer .footer_top .footer_menu {margin: 0 0 40px; padding: 32px 0 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;}
#footer .footer_top .footer_menu .site_menu_wrapper {display: flex; align-items: flex-start; justify-content: left; gap: 32px; width: 100%;}
#footer .footer_top .footer_menu .site_menu_wrapper .site_menu {width: calc((100% - 24px) / 4); }
#footer .footer_bottom { font-size: 12px; text-align: center;}
#footer .footer_bottom .copyright_top{padding: 25px 16px; color: #000000; font-size: 14px; font-family: "M PLUS Rounded 1c", sans-serif;}
#footer .footer_bottom .copyright_top .copyright_text img{width:100%;max-width:460px;}
#footer .footer_bottom .copyright_bottom{padding: 25px 16px; background: #000000;color: #FFFFFF;}
#footer.cart_footer {padding: 0 0 16px;}
#footer .footer_bottom .copyright_img img {margin: 0 auto 24px; width: 100%; max-width: 460px;}
#footer .sns{display: flex; align-items: center; justify-content: center; gap: 30px; margin: 10px 0 50px;}

/*=================================================================
ローディング
=================================================================*/
body:not(.finish) header,body:not(.finish) footer, body:not(.finish) #container  {opacity: 0;}
#loading_wrapper {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; background: #fff;}
#loading_wrapper #loading_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 99999; text-align: center; }
#loading_wrapper .loading_box {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px;}
#loading_wrapper .loading_txt {display: flex; flex-wrap: nowrap; color: #2B2B2B; font-size: 16px; letter-spacing: 4px;}
#loading_wrapper .loading_logo {width:60%;margin: 0;}
#loading_wrapper .loading_logo img {max-width: 100%;max-height: 70vh;width: auto;height: auto;}
#loading_wrapper .loading_img {display: none; opacity: 0; }
#loading_wrapper .loading_img img {display: none; opacity: 0; }
#loading_wrapper .loading_dots {display: flex; align-items: flex-end; margin-bottom: 5px; gap: 5px;}
#loading_wrapper .dot {width: 2px; height: 2px; background-color: #2B2B2B; border-radius: 50%; animation: bounce 1.35s infinite ease-in-out;}
#loading_wrapper .dot:nth-child(1) {animation-delay: -0.32s;}
#loading_wrapper .dot:nth-child(2) {animation-delay: -0.16s;}
@keyframes bounce {0%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);}}

/* 1200px以下 - コンテンツ幅以下
-------------------------------------------------------------*/
@media screen and (max-width: 1200px) and (min-width: 769px) {

	/* -------------------------------------------------------------
	footer - フッタ
	-------------------------------------------------------------*/
	#footer .footer_top .footer_menu .site_menu_wrapper {gap: 8px;}
}

/* 769px以上 - スマホ以外
-------------------------------------------------------------*/
@media screen and (min-width: 769px){

	/*=================================================================
	共通処理
	=================================================================*/
	#header a.button:hover,
	#footer a.button:hover {background-color: #423636;}
	#header .button.positive:hover,
	#footer .button.positive:hover {background-color: #F2F2F2;}

	/* -------------------------------------------------------------
	header - ヘッダ
	-------------------------------------------------------------*/
	#footer .footer_top .footer_menu .site_menu.accordion .link_list{display: flex !important;;}
	#footer .footer_top .title{pointer-events: none;}
}

/* 768px以下 - スマホ向け
-------------------------------------------------------------*/
@media screen and (max-width: 769px) {

	/*=================================================================
	共通処理
	=================================================================*/
	#header .sp,
	#footer .sp {display: block;}
	#header .pc,
	#footer .pc {display: none;}

	/* -------------------------------------------------------------
	header - ヘッダ
	-------------------------------------------------------------*/
	#header {height: 124px;}
	#header .inner {padding: 20px 10px; font-size: 14px; gap: 8px;}

	#header .header_logo {width: 80px; top: 8px; left: 8px;}
	#header .header_logo a {height: 80px;}
	
	#header .header_info {top: 20px; right: 10px;}
	#header .header_info .guide #menuBtn {width: 45px; height: 45px; top: 17px; right: 10px;}
	#header .header_info .guide #menuBtn::before {width: 40px; height: 40px;}
	#header .header_info .guide .menu_block,
	#header .header_info .guide .search_block {width: 290px;}
	#header .header_info .guide .menu_block {padding: 20px 16px 20px 70px;}
	#header .header_info .guide .search_block {padding: 70px 16px 20px 70px;}
	#header .header_info .guide .menu_block::before {top: 20px; left: 16px; width: 258px; height: 40px;}
	#header .header_info .guide .search_block::before {top: 68px; left: 10px; width: 264px; height: 54px;}
	#header .header_info .guide .search_block.open {opacity: 1; visibility: visible;}
	#header .header_info .guide .search_block .search_form_area input {height: 34px; font-size: 12px;}
	#header .header_info .guide .search_block_inner_wrapper {padding: 0 0 200px; background-image: linear-gradient(#fff 250px, transparent 250px);}

	#header .header_info .guide .header_link > a {width: 45px;}
	#header .header_info .guide .header_link .header_link_text {right: 10px; width: 44px; font-size: 8px;}
	#header .header_info .guide .header_link .search img{top: 74px; right: 16px;}
	#header .header_info .guide .header_link .search .header_link_text {top: 107px;}
	#header .header_info .guide .header_link .cart img {top: 130px; right: 17px; width: 30px;}
	#header .header_info .guide .header_link .cart .header_link_text {top: 170px;}
	#header .header_info .guide .header_link .cart .cart_item_count {width: 13px; height: 13px; font-size: 9px; top: 158px; right: 10px; line-height: 12px;}
	#header .header_info .guide .header_link .mypage img {top: 188px; right: 17px; width: 30px;}
	#header .header_info .guide .header_link .mypage .header_link_text {top: 222px;}
	#header .header_info .guide .header_link .insta img {top: 248px; right: 17px; width: 30px;}
	#header .header_info .guide .header_link .x img {top: 284px; right: 17px; width: 30px;}

	#header .header_info .guide .links_area > li > a {padding: 0 4px 0 20px; font-size: 14px;}
	#header .header_info .guide .links_area > li > a::before {width: 12px; height: 12px; top: 5px; left: 4px;}

	body.menu_open #header .header_info .guide #menuBtn,
	body.menu_open #header .header_info .guide .header_link img,
	body.menu_open #header .header_info .guide .header_link .header_link_text,
	body.menu_open #header .header_info .guide .cart .cart_item_count,
	body.menu_search_open #header .header_info .guide #menuBtn,
	body.menu_search_open #header .header_info .guide .header_link img,
	body.menu_search_open #header .header_info .guide .header_link .header_link_text,
	body.menu_search_open #header .header_info .guide .cart .cart_item_count {transform: translateX(-222px);}

	/*-- アコーディオン --*/
	#header .header_info .guide .accordion_head {padding: 8px 4px 8px 20px; font-size: 14px;}
	#header .header_info .guide .accordion_head::before {left: 4px; top: 13px; width: 12px; height: 12px;}
	#header .header_info .guide .accordion_body {font-size: 12px; padding: 2px 0;}
	#header .header_info .guide .accordion_body_inner a {padding: 6px 4px 6px 20px;}
	#header .header_info .guide .accordion_body_inner a::before {left: 4px; top: 9px; width: 12px; height: 12px;}

	/* -------------------------------------------------------------
	footer - フッタ
	-------------------------------------------------------------*/
	#footer .link_list a{font-size: 12px;}
	#footer .link_list a::before{top: 2px;}
	#footer .bnr_area {gap: 14px; padding: 25px;}
	#footer .bnr_area li {max-width: none; width: calc((100% - 14px) / 2);}
	#footer .footer_top .title {margin: 0 0 10px; padding: 0 0 10px 0; font-size: 13px; border-bottom: 1px solid #b1b1b1;}
	#footer .footer_top .site_menu.accordion .title .title_arrow{position: relative; padding-right: 14px;}
	#footer .footer_top .site_menu.accordion .title .title_arrow::after{content: ""; background: url(../images/icon/footer_menu.svg) no-repeat center / contain; display: block; height: 14px; width: 14px; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
	#footer .footer_top .site_menu.accordion .title.is-open .title_arrow::after{transform: translate(0%, -50%) rotate(-180deg);}
	#footer .footer_top .footer_menu .site_menu_wrapper .site_menu.accordion{margin-top: 0;}
	#footer .footer_top .footer_menu .site_menu_wrapper .site_menu{width: 100%;max-width: unset; margin-top: 14px;}
	#footer .footer_top .footer_menu .site_menu.accordion .link_list{display: none; margin-bottom: 20px;}
	#footer .footer_top .footer_menu .site_menu.accordion .link_list li{margin: 8px 0;}
	#footer .footer_top .footer_menu .site_menu.accordion .link_list li:first-child{margin: 0;}
	#footer .footer_top .link_list{margin: 0;}
	#footer .footer_top .footer_menu .site_menu.accordion
	#footer .footer_top .footer_menu .site_menu a{font-size: 12px;}
	#footer .footer_top .footer_menu .site_menu.menu{background: #f8f8f8; border-radius: 16px; padding: 20px 10px;}
	#footer .footer_top .footer_menu .site_menu.menu .title{border-bottom: none;}
	#footer .footer_top dd {flex-direction: row; flex-wrap: wrap; gap: 12px 24px;}
	#footer .footer_top .footer_menu {margin: 0 0 30px; flex-direction: column-reverse; gap: 40px;}
	#footer .footer_top .sns_area {margin: 32px 0 0; flex-direction: column;}
	#footer .footer_top .footer_menu .site_menu_wrapper {flex-direction: column; gap: 0;}
	#footer .sns{margin-bottom: 30px;}
	#footer .footer_bottom{font-size: 10px;}
	#footer .footer_bottom .copyright_top{padding:15px; font-size: 10px;}
	#footer .footer_bottom .copyright_bottom{padding: 16px 25px;}

	/*=================================================================
	ローディング
	=================================================================*/
	#loading_wrapper .loading_box {gap: 15px;}
	#loading_wrapper .loading_txt {font-size: 14px;}
	#loading_wrapper .loading_logo {width:75%;}
}