@charset 'utf-8';
/*
Project:		Hot Coffee HTML
Version:		1.0.1
Last change:	20/12/2017
Assigned to:	Themerex
Primary use:	Corporate
*/


/* TABLE OF CONTENTS:

1. Reset tags
2. Default tag's settings
3. Form fields settings
4. WP styles and Screen readers
5. Theme grid
6. Page layouts
7. Section's decorations
   7.1 Header
   7.2 Main Slider
   7.3 Page top: page title and breadcrumbs
   7.4 Main content wrapper
   7.5 Post Formats
   7.6 Post Layouts
   7.7 Paginations
8. Single page parts
   8.1 Attachment and Portfolio post navigation
   8.2 Reviews block
   8.3 Post author
   8.4 Comments
   8.5 Page 404
   8.8 Team member
9. Sidebars
10. Footer areas
11. Utils
12. Registration and Login popups
13. Third part plugins
14. Predefined classes for users

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




/* 1. Reset tags
-------------------------------------------------------------- */
html, body, div, span, h2, h3, h4, p, a, strong, ul, li, form, input, button, article, section {
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	line-height:inherit;
	border: 0;
	outline: 0;
	-webkit-font-smoothing: antialiased;
	-ms-word-wrap: break-word;
	    word-wrap: break-word;
}
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	line-height:150%;
}
html {
	height: 100%;
	font-size: 100%;	/*62.5%;*/		/* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
	overflow-y: scroll;		 			/* Keeps page centred in all browsers regardless of content height */
	-webkit-text-size-adjust: 100%; 	/* Prevents iOS text size adjust after orientation change, without disabling user zoom */
	    -ms-text-size-adjust: 100%; 	/* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
	/* height: 100%; */					/* Commented, because it conflict with overflow-x: hidden - appear second scrollbar while tooltip is display in the Booked plugin */
}



/* 2. Default tag's settings
-------------------------------------------------------------- */
body { 	text-rendering: optimizeLegibility; }

article, figure, footer, header, nav, section {	display: block; }

h2, h3, h4 { line-height:120%; }
h2, h3, h4, p, ul { margin: 0; }
strong {	font-weight: 500; }
p, ul { margin-bottom: 1.3em; }
ul>li { margin-bottom:0.5em; }

ul {
	padding-left:1.5em;
}


/* Links */
a {
	text-decoration:none;
	background:transparent;
}
a,
a:hover,
a:focus,
a:active {
	outline: 0;
}
a img { border: none; }

a,
button {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

:active, :focus { outline:0; }


/* Tables */
strong {	font-weight: bold; }

/* Images */
img {
	max-width: 100%;
	height: auto;
	vertical-align:top;
}

figure {
	border: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	max-width:100%;
}



/* Audio and Video */

/* Media Elements player hook */			/* Media elements hook for Safary */

/* Fontello icons */
[class*=" icon-"]:before {
	line-height: inherit;
	font-weight: inherit;
	font-size: inherit;
	width:auto;
	margin:0;
}




/* 3. Form fields settings
-------------------------------------------------------------- */
button, input {
	font-family: inherit;
	font-size: 1em;				/* Corrects font size not being inherited in all browsers */
	line-height: 1.2857em;
	margin: 0;					/* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline;	/* Improves appearance and consistency in all browsers */
}
button, input {
	line-height: normal;	
}
button {
	overflow: visible; 
}
button {
	-webkit-appearance: button;
	cursor: pointer;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input[type="email"] {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;	/* Addresses box sizing set to content-box in IE8/9 */
}
button::-moz-focus-inner,
input::-moz-focus-inner {			/* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}
input[type="email"] {
	-webkit-appearance: none;
	outline: none;
	resize: none;
	padding: 0.45em 0.5em;
	border:none;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	-webkit-transition: all ease .3s;
	   -moz-transition: all ease .3s;
	    -ms-transition: all ease .3s;
	     -o-transition: all ease .3s;
	        transition: all ease .3s;
}

button::-moz-focus-inner { 
	border: 0;
}
button:focus,
input[type="email"]:focus {
	outline: none;
}

/* 4. WP styles and Screen readers
-------------------------------------------------------------- */
.aligncenter {
	clear: both;
	display: block !important;
	margin-left: auto !important;
	margin-right:auto !important;
	margin-top: 1em;
	margin-bottom: 1em;
	text-align:center;
}





/* 5. Theme grid
-------------------------------------------------------------- */
.columns_wrap {
  margin-left: 0px;		/* -15px; */
  margin-right: -30px;	/* -15px; */
}
.columns_wrap > [class*="column-"] {

  /* Old way: floating columns */
  /* float: left;*/

  /* New way: inline blocks */
  /* Warning: remove spaces between columns tags:
		Right:															Wrong:
		<div class="columns_wrap"><div class="column-1_2">				<div class="columns_wrap">
																			<div class="column-1_2">
			...																	...
  		</div><div class="column-1_2">										</div
																			<div class="column-1_2">
			...																	...
		</div></div>														</div>
																		</div>
  */
  display:inline-block;
  vertical-align:top;

  position: relative;
  min-height: 1px;
  padding-left: 0px;	/* 15px; */
  padding-right: 30px;	/* 15px; */
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/* Columns width */
.column-1_2	{ width:50%; margin-right: -4px;}
/* Push columns */
/* Pull columns */
/* Margin for the columns */

/* Utils */
.columns_wrap:before,
.columns_wrap:after {
  content: " ";
  display: table;
}
.columns_wrap:after {
  clear: both;
  width:1300px;
  height:0;
  display:block;
}







/* 6. Page layouts
-------------------------------------------------------------- */
.page_wrap,
.content_wrap {
	margin:0 auto;
}
.content_wrap {
	width:100%;
	margin:0 auto;
}

.content_wrap:after {
	content:" ";
	display:block;
	width:100%;
	height:0;
	clear:both;
}
.content {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}

/* Content and Sidebar */

/* Fullwide or Fullscreen with sidebar */

/* Transparent body */


/* Boxed style for articles and sidebar */
.page_content_wrap {
	padding: 5.5em 0 0em;
}
html {
    overflow-x: hidden;
}

/* With video Background */


/* 7. Section's decorations
-------------------------------------------------------------- */


/* 7.1 Header
-------------------------------------------------------------- */

/* Top panel */
.top_panel_wrap {
	position:relative;
}
.top_panel_wrap [class*=" icon-"]::before {
	margin-right:0.5em;
}


/* Fixed panel */
.top_panel_fixed_wrap {
	display:none;
}


/* Top panel (top area) */
.top_panel_style_3 .top_panel_middle {
	background-repeat:repeat;
	background-position:center top;
}

.top_panel_wrap ul {
	margin:0;
	padding:0;
	list-style-type:none;
}
.top_panel_wrap li {
	margin-bottom: 0;
	position:relative;
}

/* User menu */

/* Main and user menu */
.menu_main_nav_area {
	position:relative;
	z-index:1000;
	display:none;
}

.menu_main_nav > li {
	position:relative;
	float:left;
	z-index:20;
}
.menu_main_nav > li+li { z-index:19; }
.menu_main_nav > li+li+li { z-index:18; }
.menu_main_nav > li+li+li+li { z-index:17; }
.menu_main_nav > li+li+li+li+li { z-index:16; }
.menu_main_nav > li+li+li+li+li+li { z-index:15; }
.menu_main_nav > li+li+li+li+li+li+li { z-index:14; }
.menu_main_nav > li a {
    letter-spacing: 0.03em;
}
.menu_main_nav > li > a {
	display: block;
	padding:1.3em 0.1em 0.1em;
    margin: 0 1.8em;
    letter-spacing: 0.09em;
    border-bottom: 2px solid transparent;
}
.menu_main_nav li a:before {
	margin-right:0.5em;
}

/* Main menu slider */

/* Currency */

/* Bookmarks */

/* Cart button */


/* Logo in the header */
.top_panel_wrap .logo {
	margin: 10px 0 5px 40px;
	overflow:hidden;
}
.top_panel_wrap .logo_main {
	max-height:200px;
	width:auto;
}
.logo a {
	display:block;
}
.logo img {
	float:left;
	/*margin: 0 0.7857em 0.7857em 0;*/
	margin: 0;
    width: auto;
}
.top_panel_wrap .logo_fixed {
	display:none;
	max-height:47px;
	width:auto;
}

.top_panel_style_3 .content_wrap {
	position:relative;
}
.top_panel_style_3 .menu_main_wrap {
	float: right;
}
.top_panel_style_3 .contact_logo {
    float: left;
}

/* Featured image in the header 7 */

/* Relayout menu */
/*
.menu_relayout .top_panel_style_1 .menu_main_nav_area:after,
.menu_relayout .top_panel_style_2 .menu_main_nav_area:after,
*/


/* Responsive menu */
.menu_main_responsive_button {
	display:none;
}
.menu_main_responsive_button:before {
	font-size:3em;
	vertical-align:top;
}


/* Contact fields */
.top_panel_middle .menu_main_wrap {
	text-align:right;
    margin: 2.5em 0;
}
.top_panel_middle .menu_main_nav_area {
	display:inline-block;
	text-align:left;
}


/* Search field */
/*
.menu_relayout .top_panel_style_1 .search_wrap,
.menu_relayout .top_panel_style_2 .search_wrap,
*/



/* Search results */



/* Search field inside content */


/* Header 8 - dropdown menu */

/* Push panel */


/* 7.2 Main Slider
-------------------------------------------------------------- */





/* 7.3 Page info: page title and breadcrumbs
-------------------------------------------------------------- */



/* 7.4 Main content wrapper
-------------------------------------------------------------- */

/* Post featured block */


/* Post info block */





/* 7.5 Post Formats
-------------------------------------------------------------- */

/* Quote */


/* Link */


/* Status */


/* Aside */



/* 7.6 Post Layouts
-------------------------------------------------------------- */

/* Layout Excerpt */




/* Related posts */


/* Masonry and Portfolio */
.post_item_short .info-back {
    text-align: center;
}
.post_item_short .post_title {
	overflow: hidden;
    font-size: 1.333em;
    font-weight: 600;
    margin: 0.5em 0 0;
    padding: 0 1em;
}
.post_item_short .post_date {
    font-size: 13px;
    font-weight: 400;
    color: #a6a19f;
}

/* Isotope layout */
.isotope_wrap {
	margin-right:-30px;
}
.isotope_wrap .isotope_item {
	padding-right:30px;
	padding-bottom:30px;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	opacity: 0;
	filter: alpha(opacity=0);
}
.isotope_wrap .isotope_column_4 {	width:100%;}

/* Isotope item decoration */
.isotope_wrap .isotope_item .post_item {
	overflow:hidden;
}

/* Portfolio items */


/* Isotope filters */

/* Isotope transitions */


/* Style "Colored" */


/* Colored excerpt */




/* 7.7 Paginations
-------------------------------------------------------------- */

/* Blog pagination */


/* Pagination single page parts */

/* Style 'Pages' and 'Slider' */


/* Style 'Load more' */

/* Style 'Infinite' */

/* Loader picture */




/* 8. Single page parts
-------------------------------------------------------------- */

/* 8.1 Attachment and Portfolio post navigation
------------------------------------------------------------ */

/* Info block */


/* 8.2 Reviews block
-------------------------------------------------------------- */

/* Summary */

/* Summary stars in the post item (under the title) */



/* 8.3 Post author
------------------------------------------------------ */


/* 8.4 Comments
-------------------------------------------------------- */


/* Trackbacks and pingbacks */

/* Comment list */


/* Comments form */

/* Submit button */




/* 8.5 Page 404
-------------------------------------------------------------- */




/* 8.8 Team member
-------------------------------------------------------------- */

/* Share block */




/* 9. Sidebars
-------------------------------------------------------------- */

/* Sidebar outer */

/* Side menu */

/* Responsive side menu */


/* Common rules */
/* Tabs in widgets */


/* Widget: Search */
/* Widget: Calendar */

/* Widget: RSS */

/* Widget: Tag Cloud */

/* Widget: Hot Coffee Advertisement */


/* Widget: Hot Coffee Flickr */


/* Widget: Hot Coffee Logo and Socials */


/* Widget: Hot Coffee Twitter */



/* 10. Footer areas
-------------------------------------------------------------- */

/* Footer widgets */


/* Contacts */
.contacts_wrap_inner {
	padding:5.5em 0 2.25em;
	text-align:center;
}
.contacts_wrap .logo {
	text-align:center;
	margin-bottom: 2em;
    display: inline-block;
}
.contacts_wrap .logo img {
	vertical-align:middle;
	display:inline-block;
}
.contacts_wrap .contacts_address {
	overflow:hidden;
	font-size:0.889em;
	margin-bottom:1.1em;
}
.contacts_wrap .contacts_address .about_company {
    width: 80%;
    margin: 0 auto 2.2em;
    line-height: 1.4em;
}


/* Testimonials and Twitter area */


/* Copyright area */
.copyright_wrap_inner {
	padding: 4.4em 0;
	overflow:hidden;
}
.copyright_style_text {
	text-align:center;
    font-size: 0.889em;
}



/* 11. Utils
-------------------------------------------------------------- */

/* Table of contents */


/* Hovers for images and videos */


/* Scroll to top */
.scroll_to_top {
	display:block;
	position: fixed;
	width: 3em;
	height: 3em;
	line-height: 3em;
	text-align:center;
	bottom: -4em;
	right: 2em;
	background: #fff;
	border: 1px solid #ddd;
	cursor: pointer;
	z-index: 100001;
	-webkit-transition: all ease 1.5s;
	   -moz-transition: all ease 1.5s;
	    -ms-transition: all ease 1.5s;
	     -o-transition: all ease 1.5s;
	        transition: all ease 1.5s;
	filter: alpha(opacity=0);
	opacity: 0;
}


/* Debug window */

/* Customizer */

/* Profiler */




/* 12. Registration and Login popups
-------------------------------------------------------------- */


/* 13. Third part plugins
------------------------------------------------------------------------------------ */


/* 13.1 Media player
------------------------------------------------------- */

/* 13.2 Magnific popup 
-------------------------------------------------------- */


/* 13.3 Google conversion 
---------------------------------------------------------- */


/* 13.4 Visual Composer 
-------------------------------------------------------- */
.wpb_row,
.wpb_text_column,
.wpb_content_element {
	margin-bottom:0 !important;
}


/* 14. Predefined classes for users
-------------------------------------------------------------- */

/* Predefined classes for the background texture and/or image */

/* Predefined Theme Margins */
.margin_top_tiny {		margin-top:0.5rem !important;}
.margin_top_small {		margin-top:1.5rem !important; }
.margin_top_medium {	margin-top:3rem !important;}
.margin_top_huge {		margin-top:6rem !important;}

.margin_bottom_null {	margin-bottom:0 !important; }
.margin_bottom_small {	margin-bottom:1.5rem !important;}
.margin_bottom_large {	margin-bottom:4rem !important;}
.margin_bottom_huge {	margin-bottom:6rem !important; }





/* Menu Items */


/* Popup menuitem */





/* ess grid */

/* slider rev */



/* Header mobile
---------------------------------------------------------------- */
.header_mobile .logo a {
    display: inline-block;
}
.header_mobile {
    position: relative;
    z-index: 10003;
    display: none;
}
.header_mobile .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 1001;
    background-color: rgba(0,0,0,0.6);
}

/* content wrap */
.header_mobile .content_wrap{
    text-align: center;
}
.header_mobile .logo {
    padding-bottom: 15px;
    padding-top: 25px;
}
.header_mobile .logo_main{
    max-height: 100px;
}
.header_mobile .menu_button {
    position: absolute;
    left: 30px;
    top: 50%;
    margin-top: -13px;
}
.header_mobile .menu_button {
    background-color: transparent !important;
    font-size: 36px;
    height: auto;
    width: auto;
    line-height: 36px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}


/* side wrap */
.header_mobile .side_wrap {
    display: block;
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    height: auto;
    bottom: 0;
    overflow: hidden;
    overflow-y: scroll;
    z-index: 10003;
    padding: 0px;
    transition: left 0.3s linear;
    -moz-transition: left .3s linear;
    -webkit-transition: left 0.3s linear;
    -o-transition: left .3s linear;
}
.header_mobile .side_wrap .close {
    position: absolute;
    top: 15px;
    right: 20px;
    text-transform: uppercase;
    cursor: pointer;
    display: none;
}


/* panels */
.panel_top{
    padding: 0px;
    position: relative;
    display: block;
}


/* menu */
.header_mobile .menu_main_nav_area{
    display: block;
	margin-top: 20px;
}
.header_mobile .menu_main_nav{
    padding-left: 0;
    margin: 0;
}
.header_mobile .menu_main_nav li{
    margin: 0;
}
.header_mobile .menu_main_nav > li {
    float: none;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.header_mobile .menu_main_nav > li > a {
    padding: 17px 35px;
    padding-right: 54px;
    margin: 0;
    font-size: 13px;
    line-height: 16px;
}
.header_mobile .side_wrap .menu_main_nav li > a:hover{
    background-color: rgba(0,0,0,0.1) !important;
}
.header_mobile .side_wrap .menu_main_nav > li.current-menu-item > a {
    background-color: rgba(0,0,0,0.2);
}


/* search and menu */


/* search */


/* contact info */

/* socials */

/* woo */


/* magnific popup fix */


/* 追加css */

/* === Products Slider === */
.products-hero { background:#151313; color:#eee; }
.products-slider { position:relative; overflow:hidden; max-width:1400px; margin:0 auto; }
.products-track { display:flex; transition:transform .6s ease; }
.product-slide { min-width:100%; padding:72px 0px; display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center; }
.product-visual { text-align:center; }
.product-visual img { max-width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.product-copy h3 { font:700 68px/1.05 "Droid Serif", serif; margin:0 0 18px; color:#fff; letter-spacing:.02em; }
.product-copy .kicker { font-weight:700; letter-spacing:.18em; color:#cbb496; margin-bottom:18px; }
.product-copy p { color:#dcdcdc; line-height:1.6; }
.product-copy .btn {
  display:inline-block; margin-top:28px; padding:14px 24px; border:2px solid #cbb496; color:#e6d7be;
  text-transform:uppercase; letter-spacing:.14em; font-weight:800;
}
.products-nav { position:absolute; inset-block:0; inset-inline:0; }
.products-prev, .products-next {
  position:absolute; top:50%; transform:translateY(-50%); pointer-events:auto; width:46px; height:46px; border:0; cursor:pointer;
  background:rgba(255,255,255,.08);
}
.products-prev { left:14px; } .products-next { right:14px; }
.products-prev:before, .products-next:before {
  content:""; display:block; width:46px; height:46px; background: no-repeat center/22px url('images/chevron-left.svg');
}
.products-next:before { background-image:url('images/chevron-right.svg'); }
@media (max-width: 980px){
  .product-slide{ grid-template-columns:1fr; padding:50px 0px; gap:24px; }
  .product-copy h3{ font-size:42px; }
}
 /* 既存ベースを崩さない最小追記 */

    /* --- 栄養素の丸枠（1枚目の“丸×9”の見た目に寄せる） --- */
    .nutrients_wrap { margin: 0 auto; max-width: 1100px; }
    .nutri_grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px 28px;
      align-items: start;
      justify-items: center;
    }
    @media (max-width: 960px){
      .nutri_grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px){
      .nutri_grid { grid-template-columns:repeat(2, 1fr); }
    }

    .nutri_item { text-align: center; }
    .nutri_circle {
      width: 170px; height: 170px;
      border-radius: 50%;
      background: #1e1e1e; /* 1枚目の黒丸トーン */
      border: 2px solid rgba(255,255,255,0.12);
      box-shadow: 0 10px 24px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.06);
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .nutri_circle:before {
      content:""; position:absolute; top:22px; left:50%; transform:translateX(-50%);
      width: 36px; height: 36px; opacity:.18;
      background: url('images/logo_txmk_wh.svg') center/contain no-repeat;
    }
    .nutri_label {
      color: #fff; font-weight: 700; line-height: 1.25;
      font-size: 16px; letter-spacing: .03em;
    }
    .nutri_caption { margin-top: 10px; color: #a3a3a3; font-size: 13px; font-style: italic; }

    /* ===== RevSlider フォールバック =====
       外部拡張が読めなくても見出し一式を表示する保険 */
    /* キャプションを普通に並べる（位置はざっくり） */
/* スマホフリック */
	.products-track { user-select: none; -webkit-user-drag: none; }
.products-slider .products-track { cursor: grab; }
 /* ヒーローを静的表示（RevSliderなし） */

 /* ===== Hero Video ===== */
.hero-video {
  position: relative;
  width: 100%;
  min-height: clamp(460px, 88vh, 980px);
  overflow: hidden;
}

.hero-video .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 画面全体にトリミングしてフィット */
  object-position: center;
}

/* --- SPレイアウト --- */
@media (max-width: 767px){
  .hero-video { min-height: 100dvh; }
}

/* 動きの少ない環境配慮：動画オフ→ポスター/背景静止画へ */
@media (prefers-reduced-motion: reduce){
  .hero-video { background: center/cover no-repeat url("images/hero-acai-img.jpg"); }
  .hero-video .hero-bg { display: none; }
}
  /* キャプションの位置（元レイアウトを目視で再現） */

  /* 念のため、RevSliderが吐くエラーメッセージ要素を全消し */

  /* ===== Products slider: 矢印（PC/タブレットのみ） ===== */
  .products-hero{ position:relative; }
  .products-slider{ position:relative; overflow:hidden; }
  .products-track{ display:flex; transition:transform .6s cubic-bezier(.22,.61,.36,1); will-change:transform; }
  .product-slide{ flex:0 0 100%; display:grid; align-items:center; grid-template-columns: 1fr 1fr; padding:0px ; }
  .product-visual img{ display:block; max-width:100%; height:auto; }
  .product-copy .btn{ display:inline-block; margin-top:8px; }
  @media (max-width:960px){ .product-slide{ grid-template-columns:1fr; } }

  .products-prev,.products-next{
    pointer-events:auto;
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:5; width:44px; height:44px; display:grid; place-items:center;
    border-radius:999px !important;
    backdrop-filter:blur(2px);
    padding:0 !important; margin:0 !important; line-height:1 !important; font-size:0 !important; text-transform:none !important;
  }
  .products-prev{ left:12px; }
  .products-next{ right:12px; }
  .products-prev::before,.products-next::before{
    content:''; display:block; width:12px; height:12px;
    border-top:2px solid #ffffff; border-right:2px solid #ffffff;
  }
  .products-prev::before{ transform:rotate(-135deg); }
  .products-next::before{ transform:rotate(45deg); }
  .products-prev:hover::before,.products-next:hover::before,.products-prev:focus-visible::before,.products-next:focus-visible::before{ border-color:#fff; }
  .products-prev:active,.products-next:active{ transform:translateY(-50%) scale(.96); }

  /* === スマホ幅は矢印を完全に非表示 === */
  @media (max-width:768px){
    .products-prev,.products-next{ display:none !important; }
  }
  /* 緑枠消す */
  button:after, .sc_button:after{
	border-color: transparent!important;
  }

  @media (max-width: 767px){
  .nutrients_wrap .nutri_circle{
    /* 既存サイズから一回り小さく。数値はお好みで */
    width: clamp(96px, 36vw, 128px);
    height: clamp(96px, 36vw, 128px);
  }}


   /* Feature split */
  .feature-split {
    max-width: 1120px; margin: 0 auto; padding: 48px 20px;
    display: grid; gap: 36px; align-items: center;
    grid-template-columns: 1.1fr 1fr;
  }
  .feature-copy .eyebrow {
    font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7;
  }
  .feature-copy h3 {
    font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; margin: .3em 0 .6em;
  }
  .feature-copy p { margin: 0 0 1.1em; line-height: 1.9; }

  .feature-photo {
    position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
  }
  .feature-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.02);
  }
  /* 背景と区切り */
  #feature .wrap {
    background: linear-gradient(180deg,#fff, #fff 60%, #faf7fb);
    border-top: 1px solid #f0e7f1; border-bottom: 1px solid #f0e7f1;
  }
  @media (max-width: 767px){
    .feature-split { grid-template-columns: 1fr; padding: 36px 16px; }
    .feature-photo { aspect-ratio: 16 / 10; }
  }
  /* ===== SP限定：右側写真を本当にフルスクリーンに（横も縦も） ===== */
@media (max-width: 767px) {
  /* セクション自体をコンテンツ幅から“はみ出させて”フル幅に */

  /* 内側のレイアウト制約を解除（テーマの余白や幅指定を無効化） */

  /* 右カラムの写真を全面敷き（トリミングしてフィット） */

  /* グラデを全面に */

  /* テキストを前面に（読みやすいよう白文字＆下寄せ） */

  /* タイポ微調整（任意） */
}


/* ハンバーガー */
/* ===== Mobile header toggle ===== */

/* まず、モバイル幅ではヘッダーを切り替え */
@media (max-width: 959px){
  .top_panel_wrap { display: none; }   /* PCヘッダー隠す */
  .header_mobile { display: block; }   /* モバイルヘッダー表示 */
}

/* マスクはデフォ非表示にして、開いた時だけ出す */
.header_mobile .mask { display: none; }

/* 開状態のスタイル（.is-open をJSで付与） */

/* 開いている間は本体をスクロールさせない */

/* iOS での慣性スクロールを滑らかに */
.header_mobile .side_wrap { -webkit-overflow-scrolling: touch; }

/* アクセシビリティ向上：フォーカス時のアウトライン */
.header_mobile .menu_main_nav a:focus { outline: 2px solid rgba(0,0,0,.35); outline-offset: 2px; }

/* ===== Mobile side menu: hide scrollbar ===== */
.header_mobile .side_wrap{
  overflow-y: auto;                 /* スクロールは維持 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge レガシー */
}

/* WebKit系（Chrome/Safari） */
.header_mobile .side_wrap::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}


/* === lead セクションを常時表示（アニメーション初期状態を無効化） === */
#lead,
#lead .wpb_wrapper,
#lead .sc_section,
#lead [data-animation] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* 念のため表示・重なりを保証 */
#lead { display: block !important; position: relative; z-index: 1; background: #fff; }

/* 余白が潰れていた場合の保険（空白しか無い見え方になるのを防ぐ） */
#lead .vc_empty_space { height: 0 !important; }
#lead .sc_section.aligncenter.w80 { max-width: 960px; margin: 0 auto; }

/* モバイル */
@media (max-width: 959px){
 .product-copy{padding:0 40px 70px;}
}