@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--primary: #d80421;
}

.circle_btn {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 150px;
  height: 150px;

  border: 2px solid var(--primary);
  border-radius: 50%;

  color: var(--primary);
  text-decoration: none;

  overflow: hidden;

  transition: color .4s ease;
}
.item-257 .page-link:focus,.item-257 .page-link:hover,.item-257 .page-link{
	 color: var(--primary) !important;
}
.page-link.active, .active>.page-link {
    z-index: 3;
color: #fff !important;
    background-color: var(--primary);
    border-color: var(--primary);
}
.t4-megamenu .dropdown-toggle .item-caret::before{
	    border-top: 4px solid #fff;
}
.t4-megamenu .dropdown-menu{
	background-color: rgba(255,255,255,0.90);
	border-radius: 0 0 10px 10px;
	box-shadow: none;
}
.dropdown-menu{
	font-size: 0.85rem;
}

#wafers,#bp-big,#bp-6p,#bp-mini,#other{
	
}
[id] {
  scroll-margin-top: 120px;
}
.txt_s{
	font-size: 0.8rem;
	line-height: 1.5;
}
.txt_ss{
	font-size: 0.75rem;
	line-height: 1.8;
}
.btn.btn-primary[type="submit"] {
  width: 41px;
  height: 32px;

  padding: 0;

  border: none;
  background: transparent;

  font-size: 0!important;

  position: relative;
}

/* 既存アイコンを非表示 */
.btn.btn-primary[type="submit"] .icon-search {
  display: none;
}

/* zoom_ic.png */
.btn.btn-primary[type="submit"]::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 12px;
  height: 12px;

  background-image: url("../../../../images/stories/header/zoom_ic.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;

  transform: translate(-50%, -50%);
}

/* 真ん中から広がる背景 */
.circle_btn::before {
  content: "";
  position: absolute;
  z-index: -1;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 100%;

  background: var(--primary);
  border-radius: 50%;

  transform: translate(-50%, -50%) scale(0);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.circle_btn:hover::before {
  transform: translate(-50%, -50%) scale(1.05);
}


/* テキスト */
.circle_btn_text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
}


/* 矢印 */
.circle_btn_arrow {
  position: relative;

  width: 23px;
  height: 5px;

  margin-top: 28px;
}


/* 横線 */
.circle_btn_arrow::before {
  content: "";
  position: absolute;

  left: 0;
  bottom: 2px;

  width: 23px;
  height: 2px;

  background: currentColor;
}


/* 斜め線 */
.circle_btn_arrow::after {
  content: "";
  position: absolute;

  right: 0;
  bottom: 2px;

  width: 8px;
  height: 2px;

  background: currentColor;

  transform-origin: right center;
  transform: rotate(40deg);
}


/* hover */
.circle_btn:hover {
  color: #fff;
	text-decoration: none;
}

.page_title {
  display: flex;
  align-items: center;
  justify-content: center;
padding: 160px 20px 60px;
  width: 100%;
  background: #fff;
}

.page_title_inner {
  text-align: center;
}

.page_title h1 {
  margin: 0;

  color: #333;

  font-size: clamp(54px, 5vw, 80px);
  line-height: 1;

  font-weight: 400;
  letter-spacing: 0;
}

.page_title p {
  margin: 24px 0 0;

  color: #555;

  font-size: 18px;
  line-height: 1;

  font-weight: 400;
  letter-spacing: .22em;
}
.teaser{
	position: relative;
	height: 750px;
	border: none;
	margin-top: 90px;
}
.teaser .swiper{
	position: absolute;
	left: 50%;
	top:50px;
	width: 635px;
	transform: translateX(-50%);
}
.teaser_waku{
	position: absolute;
	width: 640px;
	left: 50%;
	top:50px;
	z-index: 3;
	  transform: translateX(-50%)
}
.teaser_img{
	position: absolute;
}
/* ========================
   左上
======================== */

.teaser_img1 {
  left: 25%;
  top: 4.5%;
  width: 7%;
  aspect-ratio: 1;
}


/* ========================
   左中央 子ども
======================== */

.teaser_img2 {
  left: 7.5%;
  top: 53%;
  width: 8%;
  aspect-ratio: 1;
}


/* ========================
   左下 お菓子
======================== */

.teaser_img3 {
  left: 18%;
  bottom: 0%;
  width: 13%;
  aspect-ratio: 1;
}


/* ========================
   右上 高齢者
======================== */

.teaser_img4 {
  left: 73%;
  top: 5.5%;
  width: 14%;
  aspect-ratio: 1;
}


/* ========================
   右中央 学生
======================== */

.teaser_img5 {
  right: 6%;
  top: 34%;
  width: 11%;
  aspect-ratio: 1;
}


/* ========================
   右下
======================== */

.teaser_img6 {
  right: 7.5%;
  bottom: 5%;
  width: 20%;
  aspect-ratio: 1;
}
/* ========================
   縦コピー
======================== */

.teaser_copy {
  position: absolute;
  left: 15.5%;
  top: 6%;
	width: 115px;
  z-index: 10;
}


:root {
	scroll-behavior: auto;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	color: #333;
	height: 100%;
	-webkit-text-size-adjust: 100%;
	background: #FFF;
/*	scroll-behavior: smooth;*/
	position: relative;
	height: 100%;
	font-weight: 400;
	line-height: 2em;
	background-color: #f8f7ed;
	scroll-padding-top: 100px;
	min-width: min(1100px, 100%);
}
a {
	color: #D60000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:hover img {
	opacity: 0.8;
 -webk it-opacity: 0.8;
	-moz-opacity: 0.8;
	filter: alpha(opacity=80);
	/* IE lt 8 */
	-ms-filter: “alpha(opacity=80)”;/* IE 8 */
}
a img {
	-webkit-transition: opacity 0.2s ease-out;
	-moz-transition: opacity 0.2s ease-out;
	-ms-transition: opacity 0.2s ease-out;
	transition: opacity 0.2s ease-out;
}
h2, h3, h4, h5 {
	font-weight: 500;
	font-family: "Noto Sans JP", sans-serif;
}

.page-header h1 {
  font-size: var(--h1-font-size);
}

/*ニュースフラッシュ　whole-link*/
.whole-link{
        display: block;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
}
.whole-link:hover{
background-color: #fff;
opacity: 0.4;
}
.mod-articlesnews-horizontal.newsflash-horiz.mod-list li {
  position: relative;
}
.newsflash-item {
  position: relative;
}

/**************************************
見出し
*************************************/
.heading01 {
	text-align: center;
	position: relative;
	padding: 0;
	margin: 0 0 80px 0;
	font-size: 2.8rem !important;
	color: #374048;
}
.heading02 {
	position: relative;
	padding: 0;
	margin: 20px 0;
	color: #374048;
	font-size: 2.0rem !important;
	line-height: 1.6em;
}
.heading03 {
	position: relative;
	padding: 0 0 20px;
	margin: 50px 0 25px;
	color: #374048;
	border-bottom: solid 1px #000;
	font-size: 1.4rem !important;
}

.heading04 {
	color: #374048;
	font-size: 20px;
	margin: 20px 0;
	padding: 0 0 0 40px;
	position: relative;
	
}
.heading04::before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background-color: var(--primary);
	position: absolute;
	left: 0;
	top: 3px;
}
.heading05 {
	position: relative;
	font-size: 1.4rem !important;
	padding: 0 0 20px 0;
	margin: 0 0 20px 0;
	color: #374048;
}
.heading05:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	content: '';
	background-image: -webkit-repeating-linear-gradient(135deg, #2E363D, #2E363D 1px, transparent 2px, transparent 5px);
	background-image: repeating-linear-gradient(-45deg, #2E363D, #2E363D 1px, transparent 2px, transparent 5px);
	background-size: 7px 7px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.heading06{
	position: relative;
	font-size: clamp(20px , 1.5vw,26px);
	color: var(--primary);
	border-bottom: solid 1px  var(--primary);
	padding: 0 0 20px 0;
	margin: 3.5rem 0 20px 0;
	font-weight: 500;
}

.p14 {
	font-size: 14px;
	line-height: 1.8em;
	margin: 0;
}
.p18 {
	font-size: 18px;
	line-height: 2.4em;
	margin: 0;
}
.p20 {
	font-size: 20px;
	line-height: 2.6em;
	margin: 0;
}

/*上部余白*/
.top10 {
	margin-top: 10px !important;
}
.top20 {
	margin-top: 20px !important;
}
.top30 {
	margin-top: 30px !important;
}
.top40 {
	margin-top: 40px !important;
}
.top50 {
	margin-top: 50px !important;
}
.top60 {
	margin-top: 60px !important;
}
.top70 {
	margin-top: 70px !important;
}
.top80 {
	margin-top: 80px !important;
}
.top90 {
	margin-top: 90px !important;
}
.top100 {
	margin-top: 100px !important;
}
.top110 {
	margin-top: 110px !important;
}
.top120 {
	margin-top: 120px !important;
}
.btm0 {
	margin-bottom: 0 !important;
}


/*system-readmore「続きを読む」*/
#tinymce hr#system-readmore {
  background-color: #f473ab;
  border: medium none;
  height: 22px;
  text-align: center;
}
#tinymce hr#system-readmore::before {
  color: #fff;
  content: "▼続きを読む▼";
}

.inner {
	width: 1280px;
	margin: 0 auto;
}
.header-wrap {
	position: relative;
	background-color: rgba(255,255,255,0);
	/*position: fixed;*/
	width: 100%;
	z-index: 99;
	/*left: 0;*/
	/*top: 40px;*/
	padding: 10px 0;
	border-bottom: 0px solid #ddd;
}
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container, .t4-masthead .t4-masthead-detail {
	width: 100%;
	max-width: 100%;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.container {
	width: 100%;
	max-width: 100%;
	padding: 0 10%;
	box-sizing: border-box;
	overflow: hidden;
}

.navbar-brand.logo-control img.logo-img {
	max-height: 55px;
	width: 168px;
}
.head-contact {
	/*position: fixed;*/
	/*left: 0;*/
	/*top: 0;*/
	z-index: 99;
	width: 100%;
	background-color: rgba(55,65,73,0.9);
	text-align: right;
}
.head-contact ul {
	padding: 3px 10px 5px 0;
	margin: 0;
	letter-spacing: -0.4em;
}
.head-contact ul li {
	display: inline-block;
	letter-spacing: normal;
	margin: 0 0 0 20px;
	font-size: 0.9em;
	color: #fff;
	font-weight: 500;
	position: relative;
}
.head-contact ul li span {
	border-left: 1px solid #ddd;
	margin-left: 10px;
	padding-left: 28px;
	position: relative;
}
.head-contact ul li span::before {
	content: "";
	display: inline-flex;
	width: 13px;
	height: 20px;
	background-image: url("../../../../images/icon/icon_tel.png");
	background-repeat: no-repeat;
	background-origin: left top;
	background-size: contain;
	position: absolute;
	left: 10px;
	top: 5px;
}
.t4-megamenu .nav>.dropdown>.nav-link .item-caret, .t4-megamenu .nav>.dropdown>.dropdown-toggle .item-caret {
	/* border-top: 4px solid #E80000; */
}
.t4-megamenu .navbar-nav>li>a, .t4-megamenu .navbar-nav>li>.nav-link {
	font-weight: 600;
	color: #222;
	font-size: 17px;
}
.t4-megamenu .navbar-nav > li.active > a, .t4-megamenu .navbar-nav > li.active > .nav-link {
	color: #E80000;
}
.t4-megamenu .navbar-nav>li.show>a, .t4-megamenu .navbar-nav>li.show>.nav-link {
	color: #E80000;
	text-decoration: none;
}
.t4-megamenu .navbar-nav>li>a:hover .item-caret, .t4-megamenu .navbar-nav>li>a:focus .item-caret, .t4-megamenu .navbar-nav>li>a:active .item-caret, .t4-megamenu .navbar-nav>li>.nav-link:hover .item-caret, .t4-megamenu .navbar-nav>li>.nav-link:focus .item-caret, .t4-megamenu .navbar-nav>li>.nav-link:active .item-caret {
	color: #E80000;
}
.t4-megamenu .navbar-nav>li>a:hover, .t4-megamenu .navbar-nav>li>a:focus, .t4-megamenu .navbar-nav>li>a:active, .t4-megamenu .navbar-nav>li>.nav-link:hover, .t4-megamenu .navbar-nav>li>.nav-link:focus, .t4-megamenu .navbar-nav>li>.nav-link:active {
	color: #E80000;
	text-decoration: none;
}
.t4-megamenu .navbar-nav>li>a:hover, .t4-megamenu .navbar-nav>li>a:focus, .t4-megamenu .navbar-nav>li>a:active, .t4-megamenu .navbar-nav>li>.nav-link:hover, .t4-megamenu .navbar-nav>li>.nav-link:focus, .t4-megamenu .navbar-nav>li>.nav-link:active{
	color: #fff !important;
opacity: 0.6;
}
.t4-megamenu .navbar-nav>li.show>a, .t4-megamenu .navbar-nav>li.show>.nav-link {
	color: #fff;
}
.t4-megamenu .navbar-nav>li.show>a .item-caret, .t4-megamenu .navbar-nav>li.show>.nav-link .item-caret {
	border-top-color: #E80000;
}
.t4-megamenu .navbar-nav>li.active>a, .t4-megamenu .navbar-nav>li.active>.nav-link {
	color: #fff;
}
.t4-megamenu .navbar-nav>li.active>a .item-caret, .t4-megamenu .navbar-nav>li.active>.nav-link .item-caret {
	border-top-color: #E80000;
}

/*ヘッダー　お問い合わせボタン
（【モジュール】ヘッダー：お問い合わせ）*/
.head-mail {
	padding: 0;
	margin: 0;
}
.head-mail ul {
	padding: 0;
	margin: 0;
}
.head-mail ul li {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
.head-mail ul li a {
	display: block;
	background-color: #EC2230;
	border: 2px solid #EC2230;
	color: #fff;
	padding: 8px 30px 8px 55px;
}
.head-mail ul li a::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 20px;
	background-image: url("../../../../images/icon/icon_mail.png");
	background-repeat: no-repeat;
	background-origin: left top;
	background-size: contain;
	position: absolute;
	left: 20px;
	top: 16px;
}
.head-mail ul li a:hover {
	background-color: #fff;
	color: #EC2230;
	text-decoration: none;
}
.head-mail ul li a:hover::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 20px;
	background-image: url("../../../../images/icon/icon_mail_red.png");
	background-repeat: no-repeat;
	background-origin: left top;
	background-size: contain;
	position: absolute;
	left: 20px;
	top: 16px;
}

.t4-header {
	min-height: auto;
	background-color: inherit;
}
.t4-offcanvas-toggle i {
	display: none;
}
.t4-section.sec-spacing-lg .t4-section-inner {
	padding: 0;
	margin: 0;
}


.t4-footer {
	border: medium none;
}
.t4-footer .container, .t4-footer .t4-masthead .t4-masthead-detail, .t4-masthead .t4-footer .t4-masthead-detail {
	padding: 0;
	margin: 0 auto;
	background-color: #f8f7ed;
	border: medium none;
}
.col-md-10 {
	width: 100%;
}

.ft-content {
	width: 80%;
	margin: 0 auto;
	padding: 3% 0;
}
.ft-content img {
	margin: 0 0 20px 0;
}
.ft-sitemap {
	margin: 0 auto;
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.ft-sitemap .profile {
	width: 50%;
	padding: 0;
	line-height: 1.8em;
}
.ft-sitemap .profile table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}
.ft-sitemap .profile table th {
	text-align: left;
	vertical-align: top;
	padding: 10px 20px 0 0;
}
.ft-sitemap .profile table td {
	text-align: left;
	vertical-align: top;
	padding: 10px 0 0 0;
}
.ft-sitemap .sitemap {
	width: 47%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}
.ft-sitemap .sitemap div {
	padding-left: 60px;
}
.ft-sitemap .sitemap ul {
	padding: 0;
	margin: 0;
}
.ft-sitemap .sitemap ul li {
	padding: 0 0 10px 0;
	list-style: none;
	line-height: 1.4em;
	position: relative;
}
.ft-sitemap .sitemap ul li>ul {
	margin-top: 10px;
}
.ft-sitemap .sitemap ul li>ul li {
	padding-left: 15px;
}
.ft-sitemap .sitemap ul li>ul li::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 1px;
	background-color: #333;
	position: absolute;
	left: 0;
	top: 10px;
}


.pagetitle {
  margin: 0;
  padding: 5%;
  font-size: 1.4rem;
  position: relative;
  color: #374048;
  font-family: 'Montserrat', "Noto Sans JP", sans-serif;
  background-color: #f7f7f7;
}
.pagetitle span {
	font-size: 4rem;
	display: block;
}

/*会社概要*/
.gaiyo-table {
	border-collapse: collapse;
	width: 100%;
	margin: 0;
}
.gaiyo-table th {
	border-bottom: 2px solid #000;
	padding: 40px 10px;
	font-weight: 900;
	text-align: left;
	vertical-align: top;
}
.gaiyo-table td {
	border-bottom: 2px solid #ddd;
	padding: 40px;
	font-weight: 900;
	text-align: left;
	vertical-align: top;
}
.googlemap {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 75%;
}
.googlemap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


#back-to-top {
	z-index: 98;
}

/*メールフォーム*/

strong.formRequired {
	color: #fff;
	font-weight: normal!important;
	font-size: 11px;
	background-color: #ff002a;
	padding: 6px 8px;
	border-radius: 4px;
	margin-left: 15px;
}
#userForm .rsform-block>label {
	display: table-cell;
	padding: 40px 0;
	vertical-align: top;
	width: 20%;
}
#userForm .rsform-block .formControls {
	display: table;
	vertical-align: top;
	padding: 40px 0 40px 20px;
	width: 80%;
	margin-left: initial;
}
form:not(.form-no-margin) .control-group {
  border-bottom: solid 1px #ddd;
}
#checkbox-list-grouplbl, #checkbox-grouplbl, #radio-grouplbl {
  padding: 40px 0;
  width: 20%;
}
#userForm .rsform-block-submit .formControls {
  margin: auto;
  text-align: center;
}




/*グローバルメニュー　子メニューを表示*/
.header-block.header-block-2 .container-xxl {
  overflow: initial;
}

/*グローバルメニュー調整*/
.t4-megamenu .navbar-nav > li > a, .t4-megamenu .navbar-nav > li > .nav-link {
  font-size: 14px;
  padding: 20px 10px;
}
/*「/html/mod_custom/h1-title.php」「/html/mod_custom/h1-title-sitename.php」利用時のヘッダー部分CSS*/
#h1title {
  font-size: 14px;
  font-weight: normal;
  margin: 0;
}
/*「/html/mod_custom/site-title-h1-2025.php」利用時のH1部分CSS h1タグ非表示*/
#h1title {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

/*swiper*/
.swiper {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.swiper-slide span {
  position: absolute;
  top: 50px;
  left: 100px;
  color: #fff;
  font-size: 32px;
}

/*トップページお知らせ*/
.news-box {
  border: 1px solid #CCCCCC;
  max-height: 300px;
  overflow: auto;
  padding: 7px;
}
.news-box table {
  width: 100%;
}
.news-box table th {
  border-bottom: 1px dotted #ccc;
  font-weight: normal;
  padding: 5px;
  text-align: left;
  vertical-align: top;
}
.news-box table td {
  border-bottom: 1px dotted #ccc;
  padding: 5px;
  vertical-align: top;
}
.news-box table th::before, .news-box ul li::before {
  color: #999;
  content: "\f0da";
  font-family: FontAwesome;
  margin-right: 5px;
}


.news-box ul li {
  border-bottom: 1px dotted #cccccc;
  color: #333333;
  font-size: 1em;
  list-style: none outside none;
  margin: 0 0 5px;
  padding: 0 0 5px 10px;
}
.news-box .category-module li a {
  display: inline-block;
}

.kiji-box01 td:nth-child(1) {
  width: 60%;
}
.kiji-box02 td:nth-child(1) {
  width: 40%;
}
.kiji-box01 td,.kiji-box02 td {
  vertical-align: top;
}

/*Youtubeの埋め込み*/
.yt iframe {
    display: block;
    margin: auto;
}
.yt  {
text-align: center;
}
/*プロファイルの編集非表示*/
#post .profile {display: none;}

/*モジュール　記事カテゴリー*/
.category-module li a::before {
  display: none;
}
.category-module li a {
  padding-left: 0;
}

/*スクロールヒントの調整*/
.scroll-hint-text {
  line-height: initial;
}

/*グローバルメニュー　右寄せ*/
.mx-auto {
  margin-right: initial !important;
}

/*PCの時には表示しない*/
.pchidden {
  display: none !important;
}

/*latestnews-item調整*/
.latestnews-item {
  position: relative; 
}

/*編集アイコン　公開記事　黄色*/ 
.icon-edit::before {
  content: "\f044";
  /* background-color: #ffff7f; */
  /* padding: 5px; */
  /* border: 1px #ffd700 solid; */
  /* border-radius: 3px; */
} 
/*編集アイコン　未公開記事　灰色*/
.icon-eye-slash::before {
  content: "\f070";
  background-color: #ccc;
  padding: 5px;
  border: 1px #bbb solid;
  border-radius: 3px;
}
/*編集ボタン位置　右*/
.float-end {
  float: none !important;
  text-align: right;
} 


.edit-link {
    position: relative;
}
.edit-link a {
    position: absolute;
    background: tomato;
    padding: 2px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    z-index: 1;
    transition:.3s;
  min-width:80px;
}
.edit-link a:hover{
    filter: grayscale(0.3);
}
.item-content {
    position: relative;
}
.item-content:has(.edit-link)::after {
    content: '';
    display: block;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    outline: dashed 2px tomato;
    opacity: 0;
    z-index: 1000;
    position: absolute;
    pointer-events: none;
    transition:.5s;
}
.item-content:has(.edit-link):hover::after {
    opacity: 1;
}

/**************************************
非公開記事の場合 
*************************************/
.item-content:has(.system-unpublished),
.item-page:has(.edit-link):has(.icon-eye-slash) .article-aside {
  position: relative;
  transition: .3s;
}
/* 通常時にぼかしレイヤーを重ねる */
.item-content:has(.system-unpublished)::before,
.item-page:has(.edit-link):has(.icon-eye-slash) .article-body::before {
  content: "";
  position: absolute;
  inset: 0; /* 親要素いっぱいに広げる */
  backdrop-filter: blur(3px);
  background-color: rgba(220,220,220,0.4);
  pointer-events: none;
  transition: .3s;
  z-index: 60;
}
/* hover時にぼかし解除 */
.item-content:has(.system-unpublished):hover::before,
.item-page:has(.edit-link):has(.icon-eye-slash) .article-body:hover::before {
  backdrop-filter: none;
  background-color: transparent;
}
/* 非公開ボタン,編集ボタンはぼかしなし */
.system-unpublished .page-header {
  position: relative;
  z-index: 120;
}
.edit-link:has(.icon-eye-slash) {
  z-index: 120;
  position: absolute;
}

/* ==============================
   Margin
============================== */

/* margin-top */
.mt0   { margin-top: 0 !important; }
.mt10  { margin-top: 10px !important; }
.mt20  { margin-top: 20px !important; }
.mt30  { margin-top: 30px !important; }
.mt40  { margin-top: 40px !important; }
.mt50  { margin-top: 50px !important; }
.mt60  { margin-top: 60px !important; }
.mt70  { margin-top: 70px !important; }
.mt80  { margin-top: 80px !important; }
.mt90  { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }

/* margin-bottom */
.mb0   { margin-bottom: 0 !important; }
.mb10  { margin-bottom: 10px !important; }
.mb20  { margin-bottom: 20px !important; }
.mb30  { margin-bottom: 30px !important; }
.mb40  { margin-bottom: 40px !important; }
.mb50  { margin-bottom: 50px !important; }
.mb60  { margin-bottom: 60px !important; }
.mb70  { margin-bottom: 70px !important; }
.mb80  { margin-bottom: 80px !important; }
.mb90  { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }

/* margin-left */
.ml0  { margin-left: 0 !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }

/* margin-right */
.mr0  { margin-right: 0 !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }

/* 左右auto */
.mla { margin-left: auto !important; }
.mra { margin-right: auto !important; }
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

/*ヘッダー*/
.t4-navbar{
	background-color: #d80421;
	border-radius: 50px 0 0 50px;
	height: 50px;
	padding-left: 30px;
	margin-right: 0 !important;
}
.t4-header{
	padding: 0 2vw;
	position: fixed;
	top:0;
	width: 100%;
	z-index: 99;
}
.t4-header-r{
	background-color: #d80421;
	border-radius: 0 50px 50px 0;
	height: 50px;
	padding-right: 20px;
}
.t4-megamenu .navbar-nav>li>a, .t4-megamenu .navbar-nav>li>.nav-link{
	height: 50px;
	color: #fff;
}
.t4-megamenu .navbar-nav>li.active>a, .t4-megamenu .navbar-nav>li.active>.nav-link{
	color: #fff;
}
.t4-header-r .form-control{
	border: none;
	border-radius: 50px;
	font-size: 0.8rem;
	height: 32px;
	 background-image: url(../../../../images/stories/header/zoom_ic.png);
	background-position: right 12px center;
	 background-size: 12px 12px;
	background-repeat: no-repeat;
}




.t4-header-r .btn.btn-primary{
	background-color: #fff;
	border-radius: 0 50px 50px 0;
	color:  #d80421;
	border: none;
	font-size: 0.8rem;
}
.t4-header{
	border: none;
}
#t4-slideshow,.t4-section.t4-breadcrumbs{
	border: none !important;
}
.full_width {
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

.short_width{
	max-width: 1100px !important;
		margin: auto;
	}
/*TOPページ*/
.nutrition {
  position: relative;
  width: 100%;

  /* 背景画像 */
  background-image: url("../../../../images/stories/top/top_about_bg.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  /* 元画像が約 1790 × 863 なので近い比率 */
  aspect-ratio: 1790 / 863;
}

.nutrition_inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
}


/* 左側コンテンツ
-------------------------------- */

.nutrition_content {
  position: absolute;
  left: 7%;
  top: 38%;
  z-index: 2;
}

.nutrition_title {
  margin: 0 0 20px;

  color:var(--primary);
  font-size: clamp(24px, 1.9vw, 30px);
  font-weight:500;
  letter-spacing: .08em;
}


/* 本文
-------------------------------- */

.nutrition_text {
  font-size: clamp(14px, 0.9vw, 15px);
  font-weight: 400;
  line-height: 2.8;
  letter-spacing: .08em;
  color: #333;
	margin-bottom: 20px;
}

.nutrition_text p {
  margin: 0;
}


/* 丸ボタン
-------------------------------- */

.nutrition_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 150px;
  aspect-ratio: 1;

  margin-top: 25px;

  border: 2px solid var(--primary);
  border-radius: 50%;

  color: var(--primary);;
  text-decoration: none;

  font-size: 16px;
  font-weight: 700;

  transition:
    background-color .3s ease,
    color .3s ease;
}

.nutrition_arrow {
  margin-top: 12px;
  font-size: 24px;
  font-weight: 400;
}

.nutrition_btn:hover {
  background: var(--primary);;
  color: #fff;
}

/* =========================================
   PRODUCT SECTION
========================================= */

.product_section {

  margin: 0 auto;

  padding: 100px 20px 100px;

  background: #fff;

  border-radius: 180px;
}

.product_inner {
  width: 100%;
  max-width: 1050px;
  margin: 0 auto;
}


/* =========================================
   HEAD
========================================= */

.product_head {
  position: relative;

  display: flex;
  justify-content: center;
  align-items: flex-start;

  margin-bottom: 55px;
}

.product_heading {
  text-align: center;
}

.product_heading h2 {
  margin: 0;
 font-family: "Montserrat", sans-serif;
  font-size: clamp(48px, 5vw, 70px);
  line-height: 1;
  font-weight: 500;

  letter-spacing: .01em;
  color: #333;
}

.product_heading-sub h2{
	 font-size: clamp(38px, 5vw, 55px);
}

.product_heading > span {
  display: block;

  margin-top: 4px;

  font-size: 15px;
  font-weight: 400;
  letter-spacing: .25em;

  color: #333;
}

.product_heading p {
  margin: 30px 0 0;

  font-size: 15px;
  line-height: 2;
  letter-spacing: .12em;

  color: #333;
}

a:hover, a:focus, a:active{
	text-decoration: none;
}
/* =========================================
   FAQ
========================================= */
.table-style2{
	width: 100%;
}
.table-style2 th,.table-style2 td{
	padding: 11px 10px;width: 20%;
	border: solid 1px #ccc;
	vertical-align: top;
	font-size: 0.85rem;
	background-color: rgba(255,255,255,0.92)
}
.faq_btn {
  position: absolute;
  top: 20px;
  left: min(calc(50% + 310px), calc(100% - 200px));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 200px;
  height: 200px;

  border-radius: 50%;
  background: #fff;

  text-decoration: none;

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.list_3clm{
	display: flex;
	flex-wrap: wrap;
}
.list_3clm li{
	width: 33.33%;
}



.faq_btn:hover {
  transform: scale(1.07);

}
/* =========================
   SHOP LIST
========================= */

.shop_list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);

	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}


/* 1列 */
.shop_column {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background-color: #fff;
}


/* 見出し */
.shop_heading {
	margin: 0;
	padding: 12px 12px;
font-size: 0.9rem;
	border-bottom: 1px solid #ccc;
	    background: #b88c5b;
	color: #fff;
}


/* 店名部分 */
.shop_names {
	padding: 12px 12px 12px;
	font-size: 0.85rem;
	
}

.shop_names p {
	margin: 0 0 5px;
	line-height: 1.5;
}

.shop_names p:last-child {
	margin-bottom: 0;
}



/* =========================================
   GRID
========================================= */

.product_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 65px;
}


/* =========================================
   CARD
========================================= */

.product_card {
  display: block;

  background: #fff;

  color: #333;
  text-decoration: none;

  box-shadow:
    5px 7px 18px rgba(0, 0, 0, .12);

  overflow: hidden;

  transform: scale(1);

  transition:
    transform .4s cubic-bezier(.2, .7, .3, 1),
    box-shadow .4s ease;
}


/* カード全体を拡大 */
.product_card:hover {
  transform: scale(1.035);

  box-shadow:
    8px 12px 28px rgba(0, 0, 0, .17);
}


/* =========================================
   CARD IMAGE
========================================= */

.product_card_image {
  width: 100%;
  aspect-ratio: 1.48 / 1;

  overflow: hidden;
}

.product_card_image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .6s ease;
}


/* 写真も少し拡大 */
.product_card:hover .product_card_image img {
  transform: scale(1.04);
}


/* =========================================
   CARD BODY
========================================= */

.product_card_body {
  position: relative;

  min-height: 190px;

  padding: 25px 60px;
}

.product_name_en {
  display: block;

  margin-bottom: 5px;

  font-size: 14px;
  line-height: 1;

  letter-spacing: .02em;
}

.product_name h3 {
  margin: 0;

  font-size: 24px;
  line-height: 1.2;

  font-weight: 400;

  letter-spacing: .03em;
}


/* =========================================
   PACKAGE
========================================= */

.product_packages {
  display: flex;
  align-items: flex-end;

  gap: 12px;

  margin-top: 18px;
}

.product_packages img {
  display: block;

  width: auto;
  height: 150px;

  object-fit: contain;
}


/* =========================================
   CARD ARROW
========================================= */

.product_arrow {
  position: absolute;

  right: 28px;
  top: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  border: 1.5px solid var(--primary);
  border-radius: 50%;

  color:var(--primary);

  transform: translateY(-50%);

  transition:
    background-color .35s ease,
    color .35s ease;
}


/* 矢印 */
.product_arrow > span {
  position: relative;

  display: block;

  width: 24px;
  height: 12px;
}


/* 横線 */
.product_arrow > span::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 24px;
  height: 1.5px;

  background: currentColor;
}


/* 斜線 */
.product_arrow > span::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 2px;

  width: 9px;
  height: 1.5px;

  background: currentColor;

  transform-origin: right center;
  transform: rotate(40deg);
}


/* hoverで反転 */
.product_card:hover .product_arrow {
  background: var(--primary);
  color: #fff;
}


/* =========================================
   MORE BUTTON
========================================= */

.product_more {
  display: flex;
  justify-content: center;

  margin-top: 50px;
}

.circle_btn {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 140px;
  height: 140px;

  border: 1.5px solid var(--primary);
  border-radius: 50%;

  overflow: hidden;

  color: var(--primary);
  text-decoration: none;

/*  font-size: 14px;*/

  transition: color .4s ease;
}


/* 中心から赤背景 */
.circle_btn::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: var(--primary);

  transform:
    translate(-50%, -50%)
    scale(0);

  transition:
    transform .45s cubic-bezier(.4, 0, .2, 1);
}

.circle_btn:hover::before {
  transform:
    translate(-50%, -50%)
    scale(1.05);
}

.circle_btn:hover {
  color: #fff;
}


/* =========================================
   MORE ARROW
========================================= */

.circle_arrow {
  position: relative;

  display: block;

  width: 25px;
  height: 12px;

  margin-top: 17px;
}

.circle_arrow::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 25px;
  height: 1.5px;

  background: currentColor;
}

.circle_arrow::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 2px;

  width: 9px;
  height: 1.5px;

  background: currentColor;

  transform-origin: right center;
  transform: rotate(40deg);
}


/* =====================================
   OUR COMPANY
===================================== */

.company_section {
  padding: 140px 0px 60px;
}

.company_inner {
  width: 100%;
  max-width: 1450px;
  margin: 0 auto;
}


/* =====================================
   LEAD
===================================== */

.company_lead {
  margin-top: 45px;
  text-align: center;
}

.company_lead p {
  margin: 0;

  font-size: 15px;
  line-height: 2;
  letter-spacing: .08em;

}


/* =====================================
   GRID
===================================== */

.company_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 32px;

    margin-top: 45px;
    width: 83%;
    margin-left: auto;
    margin-right: auto;
}


/* =====================================
   CARD
===================================== */

.company_card {
  position: relative;

  display: block;

  aspect-ratio: 1.13 / 1;

  overflow: hidden;

  color: #fff;
  text-decoration: none;
}


/* 写真 */
.company_card_img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.company_card_img img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .6s cubic-bezier(.2, .7, .3, 1);
}


/* 少し暗くする */
.company_card_overlay {
  position: absolute;
  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, .18);

  transition:
    background-color .4s ease;
}


/* =====================================
   TEXT
===================================== */

.company_card_text {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 2;

  width: 90%;

  text-align: center;

  transform: translate(-50%, -50%);
}

.company_card_text h3 {
  margin: 0 0 8px;

  color: #fff;

  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.4;

  font-weight: 500;

  letter-spacing: .08em;
}

.company_card_text p {
  margin: 0;

  color: #fff;

  font-size: clamp(10px, .95vw, 13px);
  line-height: 1.5;

  font-weight: 500;

  letter-spacing: .08em;
}


/* =====================================
   HOVER
===================================== */

.company_card:hover .company_card_img img {
  transform: scale(1.07);
}

.company_card:hover .company_card_overlay {
  background: rgba(0, 0, 0, .27);
}


/* =====================================
   NEWS
===================================== */

.news_section {
  padding: 90px 40px 0px;
}

.news_inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}


/* =====================================
   NEWS SCROLL
===================================== */

.news_scroll {
  position: relative;

  margin-top: 45px;

  height: 300px;

  overflow-y: auto;
  overflow-x: hidden;

  padding-right: 55px;


  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}


/* Chrome / Safari / Edge */
.news_scroll::-webkit-scrollbar {
  width: 5px;
}

.news_scroll::-webkit-scrollbar-track {
  background: transparent;
}

.news_scroll::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 0;
}


/* =====================================
   LIST
===================================== */

.news_list {
  width: 100%;
}

.news_item {
  display: block;

  padding: 0 0 18px;
  margin-bottom: 22px;

  border-bottom: 1px solid #ccc;

  color: #333;
  text-decoration: none;
}


/* 日付 */
.news_item time {
  display: block;

  margin-bottom: 6px;

  color: #aaa;

  font-size: 16px;
  line-height: 1.4;

  font-weight: 400;
  letter-spacing: .07em;
}


/* タイトル */
.news_item p {
  margin: 0;

  color: #333;

  font-size: 17px;
  line-height: 1.6;

  font-weight: 600;
  letter-spacing: .04em;

  transition: color .3s ease;
}

.news_item:hover p {
  color: var(--primary);
}


/* =====================================
   一覧ボタン
===================================== */

.news_more {
  display: flex;
  justify-content: center;

  margin-top: 65px;
}


/* 前回の丸ボタンを流用できます */
.circle_btn {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 150px;
  height: 150px;

  border: 1.5px solid var(--primary);
  border-radius: 50%;

  overflow: hidden;

  color: var(--primary);
  text-decoration: none;

  font-size: 15px;


  transition: color .4s ease;
}


/* 中央から赤が広がる */
.circle_btn::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  background: var(--primary);

  transform:
    translate(-50%, -50%)
    scale(0);

  transition:
    transform .45s cubic-bezier(.4, 0, .2, 1);
}

.circle_btn:hover::before {
  transform:
    translate(-50%, -50%)
    scale(1.05);
}

.circle_btn:hover {
  color: #fff;
}


/* 矢印 */
.circle_arrow {
  position: relative;

  display: block;

  width: 26px;
  height: 12px;

  margin-top: 18px;
}

.circle_arrow::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 26px;
  height: 1.5px;

  background: currentColor;
}

.circle_arrow::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 2px;

  width: 9px;
  height: 1.5px;

  background: currentColor;

  transform-origin: right center;
  transform: rotate(40deg);
}

/* ===============================
   NEWS 一覧
================================ */

/* 各記事 */
.news_list li {
  padding: 0 0 18px;
  margin-bottom: 22px;

  border-bottom: 1px solid #ccc;

  list-style: none;
}


/* 日付 */
/* 実際の日付のclass名に合わせてください */
.mod-articles-category-date {
  display: block;

  margin-bottom: 6px;

  color: #aaa;

  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;

  letter-spacing: .07em;
}


/* タイトル */
.mod-articles-category-title {
  display: block;

  color: #333;
  text-decoration: none;

  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;

  letter-spacing: .04em;

  transition: color .3s ease;
}

.mod-articles-category-title:hover {
  color: var(--primary);
}
ul.mod-articlescategory.category-module.mod-list li{display: block !important;
margin-bottom: 10px;
}
.category-module a:hover, .category-module a:focus, .category-module a:active{
	color: var(--primary);
}

/* ========================================
   FOOTER
======================================== */

.site_footer {
  position: relative;

  /* コンテンツ幅から画面いっぱいに */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 582px;
  overflow: hidden;

}

.t4-main-body{
	padding-bottom: 0;
}

.copyright{
	position: absolute;
	bottom: 30.2px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	z-index: 2;
}
.copyright p{
	margin: 0;
	color: #fff;
	font-size: 11.21px;
	line-height: 1.2;
	font-weight: 300;
	letter-spacing: 0.55px;
	text-align: center;
}
/* ========================================
   大きな赤い背景
======================================== */

.footer_red_bg {
  position: absolute;

  left: 50%;
  top: 171.5px;
  width: 299.5%;
  aspect-ratio: 1;
  transform: translateX(-50%);

  background: var(--primary);

  /*
   * 上部を巨大な円弧にする
   */
  border-radius: 50%;
}
#t4-footer{
	  background: var(--primary);
}

/* ========================================
   子どもの丸写真
======================================== */

.footer_child {
  display: none;
  position: absolute;
  left: max(10px, calc(50% - min(497px, 50% - 30px) - 94px));
  top: 0;
  width: 192px;
  z-index: 3;
}
body.item-142 .footer_child {
  display: block;
}


/* 写真 */
.footer_child img {
  display: block;
  width: 100%;
  height: auto;
}


/* ========================================
   INNER
======================================== */

.footer_inner {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 380.5px 1fr;
  align-items: start;
  width: min(994px, 100% - 60px);
  margin: 0 auto;
  padding-top: 265px;
  color: #fff;
}


/* ========================================
   COMPANY
======================================== */

.footer_logo {
  display: block;
  width: 190px;
  max-width: 100%;
}

.footer_logo img {
  display: block;

  width: 100%;
  height: auto;
}


/* 住所 */

.footer_address {
  margin-top: 16.5px;
  padding-left: 5px;
}

.footer_address p {
  margin: 0;
  color: #fff;
  font-size: 12px;
  line-height: 19px;
  font-weight: 400;
  letter-spacing: 0;
}


/* ========================================
   NAV
======================================== */

.footer_nav {
  display: grid;
/*  grid-template-columns: 155.5fr 184fr 170fr 104fr;*/
	 grid-template-columns: 500fr 500fr;
  padding-top: 5.5px;
}
.footer_nav_col {
  position: relative;
}
.footer_nav_col + .footer_nav_col::before {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  background: rgba(255,255,255,.19);
}
.footer_nav_col--2::before {
  left: -96px;
  height: 198px;
}
.ft-0{
	margin-bottom: 10px !important;
}
.footer_nav_col--3::before {
  left: -23.5px;
  height: 162px;
}
.footer_nav_col--4::before {
  left: -22px;
  height: 162px;
}
.footer_nav_head {
  margin: 0 0 20.5px;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 1.1px;
  white-space: nowrap;
}
.footer_nav_head a {
  color: #fff;
  text-decoration: none;
}
.footer_nav ul {
  margin: 0;
  padding: 0 0 0 12px;

  list-style: none;
}

.footer_nav li {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 23.5px;
  letter-spacing: 0;
  white-space: nowrap;
}




/* ========================================
   SUB NAV
======================================== */

.footer_nav_sub {
  position: relative;

  margin-top: 35px !important;
  padding-left: 30px !important;
}


/* 左の縦線 */
.footer_nav_sub::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 2px;
  height: 100%;

  background: rgba(255,255,255,.8);
}


/* ========================================
   BUTTON
======================================== */

.footer_buttons {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 17.2px;
}

.footer_btn {
  display: flex;

  align-items: center;
  justify-content: space-between;
  width: 192.5px;
  max-width: 100%;
  height: 35px;
  padding: 0 28px 0 51px;
  border-radius: 100px;

  background: #fff;
  color: var(--primary) !important;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.6px;
  transition:
    background-color .3s ease,
    color .3s ease;
}
.footer_btn span {
  flex-shrink: 0;
  white-space: nowrap;
}
.footer_btn_sp {
  display: none;
}


/* hover反転 */
.footer_btn:hover {
  background: #b9001a;
  color: #fff !important;
	text-decoration: none;
}

@media screen and (max-width: 768px) {
  .footer_nav_col + .footer_nav_col::before {
    display: none;
  }
}

@media screen and (min-width: 769px) and (max-width: 991px) {
  #t4-megamenu-mainmenu {
    display: none !important;
  }

  .navbar-toggler,
  .navbar-toggler i,
  .t4-header-r .navbar-toggler i {
    color: #fff;
  }

  .t4-offcanvas {
    z-index: 99999;
  }

  .t4-offcanvas .t4-off-canvas-body .navbar .nav-link,
  .t4-offcanvas .t4-off-canvas-body .navbar .separator {
    color: #fff;
  }

  .t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .nav-link,
  .t4-offcanvas .t4-off-canvas-body .navbar .nav-item.active > .separator {
    color: #fff;
  }

  .t4-off-canvas-body search,
  .t4-off-canvas-body .search,
  .t4-off-canvas-header .search,
  .t4-off-canvas-body .head-contact {
    display: none !important;
  }

  .t4-offcanvas.c-offcanvas {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) transparent;
  }

  .t4-offcanvas.c-offcanvas::-webkit-scrollbar {
    width: 5px;
  }

  .t4-offcanvas.c-offcanvas::-webkit-scrollbar-track {
    background: transparent;
  }

  .t4-offcanvas.c-offcanvas::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 0;
  }

  .t4-offcanvas .t4-off-canvas-body {
    display: block !important;
    padding: 60px 18px 40px 18px !important;
  }

  .t4-offcanvas .t4-off-canvas-header {
    padding: 0 !important;
  }

  .t4-offcanvas .t4-off-canvas-body .navbar,
  .t4-offcanvas .t4-off-canvas-body .navbar-collapse,
  .t4-offcanvas .t4-off-canvas-body .navbar-nav,
  .t4-offcanvas .t4-off-canvas-body .nav {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }

  .t4-offcanvas .t4-off-canvas-body .nav-item {
    position: relative;
    margin: 0;
  }

  /* 見え方は SP メニュー（260902 の指示）に合わせる */
  .t4-offcanvas.c-offcanvas .t4-off-canvas-body .navbar-nav > .nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
  }

  .t4-offcanvas.c-offcanvas .t4-off-canvas-body .navbar-nav .dropdown-menu > .nav-item {
    padding: 0;
    margin: 0;
    border: 0;
  }

  .t4-offcanvas .t4-off-canvas-body .navbar-nav > .nav-item > .nav-link,
  .t4-offcanvas .t4-off-canvas-body .navbar-nav > .nav-item > .separator {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 59.3px;
    padding: 0 34px 0 0 !important;
    font-size: 17.3px;
    font-weight: 400 !important;
    line-height: 1.2;
    letter-spacing: .13em;
  }

  .t4-offcanvas .t4-off-canvas-body .nav-link:hover,
  .t4-offcanvas .t4-off-canvas-body .nav-link:focus,
  .t4-offcanvas .t4-off-canvas-body .nav-link:active,
  .t4-offcanvas .t4-off-canvas-body a:hover,
  .t4-offcanvas .t4-off-canvas-body a:focus,
  .t4-offcanvas .t4-off-canvas-body a:active {
    color: #fff !important;
    opacity: .7;
    text-decoration: none;
  }

  .t4-offcanvas .t4-off-canvas-body .dropdown-menu {
    position: static;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .t4-offcanvas .t4-off-canvas-body .dropdown-menu .nav-link,
  .t4-offcanvas .t4-off-canvas-body .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 30.7px;
    padding: 0 !important;
    font-size: 11px;
    font-weight: 400 !important;
    line-height: 1.2;
    letter-spacing: .05em;
  }

  .t4-offcanvas .t4-off-canvas-body .nav-item.parent > .dropdown-menu {
    display: none;
  }

  .t4-offcanvas .t4-off-canvas-body .nav-item.parent.hfx-oc-open > .dropdown-menu {
    display: block;
  }

  .hfx-oc-toggle {
    position: absolute;
    right: 0;
    top: 17.2px;
    width: 24.9px;
    height: 24.9px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    z-index: 2;
  }

  .hfx-oc-toggle::before,
  .hfx-oc-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--primary);
  }

  .hfx-oc-toggle::before {
    width: 10.6px;
    height: 1.6px;
    margin: -0.8px 0 0 -5.3px;
  }

  .hfx-oc-toggle::after {
    width: 1.6px;
    height: 10.6px;
    margin: -5.3px 0 0 -0.8px;
  }

  .nav-item.hfx-oc-open > .hfx-oc-toggle::after {
    opacity: 0;
  }
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
  .site_footer {
    height: auto;
    padding-bottom: 40px;
  }

  .footer_red_bg {
    top: 171.5px;
  }

  .footer_inner {
    grid-template-columns: minmax(0, 240px) 1fr;
    gap: 0 50px;
    padding-top: 265px;
  }

  .footer_nav {
    display: block;
    column-count: 2;
    column-gap: 40px;
    padding-top: 4px;
  }

  .footer_nav_col {
    break-inside: avoid;
    margin-bottom: 30px;
  }

  .footer_nav_col:last-child {
    margin-bottom: 0;
  }

  .footer_nav_col + .footer_nav_col::before {
    display: none;
  }

  .copyright {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    width: min(994px, 100% - 60px);
    margin: 40px auto 0;
  }
}


/* ========================================
   ARROW
======================================== */

.footer_arrow {
  position: relative;

  display: block;

  width: 19.7px;
  height: 11px;

  flex-shrink: 0;

  margin-left: 0;
}


/* 横線 */
.footer_arrow::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 4.5px;

  width: 19.7px;
  height: 1.92px;

  background: currentColor;
}


/* 斜め線 */
.footer_arrow::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 4.5px;

  width: 7.9px;
  height: 1.92px;

  background: currentColor;

  transform-origin: right center;

  transform: rotate(42deg);
}

/* ========================================
栄養菓子とは
======================================== */

.about_teaser{
	position: relative;
}
.about_teaser .swiper-slide img{
	border-radius: 0 0 10.42% 10.42% / 0 0 21.05% 21.05%;
}
.about_teaser_copy{
	position: absolute;
	z-index: 3;
	top: 47.37%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.about_teaser_copy img{
	width: 16.67vw;
	max-width: 320px;
	height: auto;
	filter: drop-shadow(0 0 18px rgba(70, 50, 30, .22));
}

.item-613 #t4-slideshow{
background-color: #cca578;
}
.item-613 #t4-main-body{
	padding-top: 0;
}

/* =========================================
   栄養菓子
========================================= */

.nutrition_intro {
  position: relative;

  /* コンテンツ幅を無視して画面いっぱい */
  width: 100vw;
  margin-left: calc(50% - 50vw);

  min-height: 620px;

  padding-top: 90px;

  background: #cda678;

  overflow: hidden;
}


/* =========================================
   TEXT
========================================= */

.nutrition_intro_inner {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  text-align: center;

  color: #fff;
}


.nutrition_intro_title {
  margin: 0 0 35px;

  color: #fff;

  font-size: clamp(28px, 3vw, 45px);
  line-height: 1.4;

  font-weight: 500;

  letter-spacing: .08em;
}


.nutrition_intro_text {
  color: #fff;

  font-size: 20px;
  line-height: 2;

  font-weight: 500;

  letter-spacing: .1em;
}


.nutrition_intro_text p {
  margin: 0 0 10px;
}


/* =========================================
   LOOP
========================================= */

.nutrition_loop {
  position: absolute;

  left: 0;
  bottom: 55px;

  width: 100%;

  overflow: hidden;
}


.nutrition_loop_track {
  display: flex;

  width: max-content;

  animation:
    nutritionLoop 28s linear infinite;

  will-change: transform;
}


/* 1セット */
.nutrition_loop_group {
  display: flex;
  align-items: center;

  flex-shrink: 0;
}


/* 商品1個 */
.nutrition_loop_item {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  height: 160px;

  padding: 0;
  margin-right: 108px;
}

.nutrition_loop_item[data-sweet="01"] { width: 161px; }
.nutrition_loop_item[data-sweet="02"] { width: 165px; }
.nutrition_loop_item[data-sweet="03"] { width: 162px; }
.nutrition_loop_item[data-sweet="04"] { width: 158px; }
.nutrition_loop_item[data-sweet="05"] { width: 163px; }
.nutrition_loop_item[data-sweet="06"] { width: 164px; }


.nutrition_loop_item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.ul2clm{
/*
	display: flex;
	flex-wrap: wrap;
*/
column-count: 2;
column-gap: 10px;
	padding: 0;
	list-style: none;
	
}
.ul2clm li{
/*	width: 50%;*/
}
.latestnews li a{
	color: #000;
}

.pr_2clm{
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 15px;
}
.pr_2clm_inner{
	width: 50%;
}
.pr_2clm_inner ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.shop_3clm{
	display: flex;
	flex-wrap: wrap;
}
.shop_3clm ul{
		list-style: none;
	padding: 0;
	margin: 0;
}
.shop_3clm_inner{
	width: 33.33%
}

/* =========================================
   無限ループ
========================================= */

@keyframes nutritionLoop {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }

}


/* =========================================
   SECTION
========================================= */

.promise_section {
  background: #cda679;
	padding-bottom: 0 !important
}

.promise_inner {



  padding: 90px 40px 45px;

  background: #f7f6ed;

  border-radius: 120px 120px 0 0;
}
.promise_slider {
  position: relative;
  display: block;

  width: 100%;
  max-width: 1100px;

  margin: 65px auto 0;
  padding: 0 0 45px;

  overflow: hidden;

  z-index: 1;
}

/* =========================
   上部
========================= */

.promise_head {
  text-align: center;
}

.promise_label {
  display: inline-block;

  margin: 0 0 28px;
  padding: 10px 28px;

  background: #b88c5b;

  border-radius: 50px;

  color: #fff;

  font-size: 20px;
  font-weight: 500;

  letter-spacing: .08em;
}

.promise_title {
  margin: 0;

  color: #333;

  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.5;

  font-weight: 500;

  letter-spacing: .08em;
}


/* =========================
   Swiper
========================= */

.promise_slider {
  width: 100%;
  max-width: 1100px;

  margin: 65px auto 0;

  overflow: hidden;

  padding-bottom: 45px;
}

.promise_slider .swiper-wrapper {
  align-items: center;
}

.promise_slider .swiper-slide {
  width: 100%;
  height: auto;
}


/* =========================
   1スライド
========================= */

.promise_slide {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: clamp(32px, 5vw, 96px);

  width: 100%;
}


/* =========================
   左の丸画像
========================= */

.promise_visual {
  position: relative;

  flex: 0 0 auto;

  width: min(40vw, 550px);
  max-width: none;

  aspect-ratio: 1;

  margin: 0;
}


/* 後ろの色円 */
.promise_circle {
  position: absolute;
  left: 0;
  top: 0;

  width: 90.9%;
  aspect-ratio: 1;

  border-radius: 50%;
}


/* 写真 */
.promise_photo {
  position: absolute;

 
top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
  width: 90.9%;
  aspect-ratio: 1;

  border-radius: 50%;

  overflow: hidden;
}

.promise_photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* 色 */

.promise_green .promise_circle {
  background: #46a174;
    top: 0px;
    left: 0px;
}

.promise_orange .promise_circle {
  background: #f5a01b;
	 top:auto;
	bottom: 0;
    left: 0px;
}

.promise_blue .promise_circle {
  background: #078bd0;
	 top:auto;
	bottom: 0;
    left: auto;
	right: 0;
}


/* =========================
   右テキスト
========================= */

.promise_text {
  flex: 0 1 auto;

  width: auto;
  max-width: min(38vw, 460px);

  text-align: center;
}

.promise_initial {
  margin-bottom: 25px;
	width: 130px;
	margin-left: auto;
	margin-right: auto;
}
.promise_initial-s{
	width: 88px;
}

.promise_text h3 {
  margin: 36px 0 14px;

  font-size: 30px;
  line-height: 1.5;

  font-weight: 500;

  letter-spacing: .1em;
}

.promise_text p {
  margin: 0;

  color: #333;

  font-size: 20px;
  line-height: 1.65;

  font-weight: 400;

  letter-spacing: .08em;
}


/* 色 */

.promise_text.green {
  color: #46a174;
}

.promise_text.orange {
  color: #f5a01b;
}

.promise_text.blue {
  color: #078bd0;
}


/* =========================
   ページネーション
========================= */

.promise_pagination {
  position: static !important;
text-align: center;
  margin-top: 28px;
}

.promise_pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;

  margin: 0 6px !important;

  background: #ccc;

  opacity: 1;
}

.promise_pagination .swiper-pagination-bullet-active {
  background: #46a174;
}

/* N */
.promise_pagination .swiper-pagination-bullet-active:nth-child(1) {
  background: #46a174;
}

/* V */
.promise_pagination .swiper-pagination-bullet-active:nth-child(2) {
  background: #f5a01b;
}

/* P */
.promise_pagination .swiper-pagination-bullet-active:nth-child(3) {
  background: #078bd0;
}
/* =========================
   下部固定
========================= */

.promise_bottom {
  margin-top: 55px;

  text-align: center;
}

.promise_bottom_text {
  margin: 0;

  color: #333;

  font-size: clamp(22px, 1.7vw, 27px);
  line-height: 1.9;

  font-weight: 400;

  letter-spacing: .08em;
}

.promise_nvp {
  margin-top: 25px;
}

.promise_nvp img {
  display: block;

  width: 310px;
  max-width: 100%;

  height: auto;

  margin: 0 auto;
}


/* ==================================================
   PRODUCT TAB
   Regular Labs Tabs
================================================== */

[data-rlta-id="1"] {
  --tab-red: #D80421;
  --tab-bg: #f7f5eb;
}


/* --------------------------------------------------
   タブ一覧
-------------------------------------------------- */

[data-rlta-id="1"] [data-rlta-element="button-list"] {
  position: relative;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 65px 0 0 !important;

  overflow: visible !important;

  border: 0 !important;
  background: transparent !important;
}


/* --------------------------------------------------
   各タブ
-------------------------------------------------- */

[data-rlta-id="1"] [data-rlta-element="button"] {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-width: 0 !important;
/*  height: 96px !important;*/

  margin: 0 !important;
  padding: 10px 20px !important;

  box-sizing: border-box !important;

  background: #fff !important;

  border: 2px solid var(--tab-red) !important;
  border-radius: 16px !important;

  color: #333 !important;

  cursor: pointer;

  overflow: visible !important;

  box-shadow: none !important;

  transition:
    background-color .3s ease,
    color .3s ease;
}


/* open / closed の既存デザインをリセット */

[data-rlta-id="1"]
[data-rlta-element="button"][data-rlta-state="open"],

[data-rlta-id="1"]
[data-rlta-element="button"][data-rlta-state="closed"] {
  background: #fff !important;
  color: #333 !important;
}


/* --------------------------------------------------
   タブ文字
-------------------------------------------------- */

[data-rlta-id="1"] [data-rlta-element="heading"] {
  position: static !important;

  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;

  letter-spacing: .03em !important;

  text-align: center !important;

  border: 0 !important;
  background: none !important;
}


/* --------------------------------------------------
   下の赤三角
-------------------------------------------------- */

[data-rlta-id="1"] [data-rlta-element="button"]::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -17px;

  width: 0;
  height: 0;

  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 17px solid var(--tab-red);

  transform: translateX(-50%);

  z-index: 5;
}


/* ==================================================
   上のグループ囲み
================================================== */


/* --------------------------------------------------
   1個目
   気になる栄養素を補給
-------------------------------------------------- */

#rlta-uehasu::before {
  content: "";

  position: absolute;

  left: 0;
  top: -58px;

  width: 100%;
  height: 35px;

  box-sizing: border-box;

  border-top: 1px solid var(--tab-red);
  border-left: 1px solid var(--tab-red);
  border-right: 1px solid var(--tab-red);

  border-radius: 10px 10px 0 0;

  pointer-events: none;
}


#rlta-uehasu [data-rlta-element="heading"]::before {
  content: "気になる栄養素を補給";

  position: absolute;

  left: 50%;
  top: -70px;

  padding: 0 15px;

  background: var(--tab-bg);

  color: var(--tab-red);

  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;

  letter-spacing: .04em;

  white-space: nowrap;

  transform: translateX(-50%);

  z-index: 3;
}


/* --------------------------------------------------
   2〜4個目
   バランスよく栄養を摂りたい方には
-------------------------------------------------- */

#rlta-baransupawabiggu-xiang::before {
  content: "";

  position: absolute;

  left: 0;
  top: -58px;

  /*
   * 3タブ分 + gap 2個分
   */
  width: calc(300% + 24px);
  height: 35px;

  box-sizing: border-box;

  border-top: 1px solid var(--tab-red);
  border-left: 1px solid var(--tab-red);
  border-right: 1px solid var(--tab-red);

  border-radius: 10px 10px 0 0;

  pointer-events: none;
}


#rlta-baransupawabiggu-xiang
[data-rlta-element="heading"]::before {

  content: "バランスよく栄養を摂りたい方には";

  position: absolute;

  /*
   * 2〜4番タブをまとめた中心
   */
  left: calc(150% + 12px);
  top: -70px;

  padding: 0 20px;

  background: var(--tab-bg);

  color: var(--tab-red);

  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;

  letter-spacing: .04em;

  white-space: nowrap;

  transform: translateX(-50%);

  z-index: 3;
}


/* ==================================================
   hover
================================================== */

[data-rlta-id="1"] [data-rlta-element="button"]:hover {
  background: var(--tab-red) !important;
  color: #fff !important;
}


/* ==================================================
   Regular Labs の横スクロールボタンを非表示
================================================== */

[data-rlta-id="1"] [data-rlta-element="button-scroller"] {
  display: none !important;
}


/* ==================================================
   タブコンテンツ
================================================== */

[data-rlta-id="1"] [data-rlta-element="panels"] {
  margin-top: 160px !important;

  border: 0 !important;
  background: transparent !important;
}


[data-rlta-id="1"] [data-rlta-element="panel"] {
  border: 0 !important;
  background: transparent !important;
}


[data-rlta-id="1"] [data-rlta-element="panel-content"] {
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
}

/* ===================================
   TABS
=================================== */

.product_tabs {
  width: 100%;
  margin-bottom: 100px;
}


/* ===================================
   上部ガイド
=================================== */

.product_tab_guides {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;

  margin-bottom: 25px;
}


/* ウエハース */
.product_tab_guide.guide01 {
  grid-column: 1 / 2;
}


/* バランスパワー */
.product_tab_guide.guide02 {
  grid-column: 2 / 5;
}


.product_tab_guide {
  position: relative;

  height: 35px;

  border-top: 1px solid var(--primary);
  border-left: 1px solid var(--primary);
  border-right: 1px solid var(--primary);

  border-radius: 10px 10px 0 0;

  text-align: center;
}


/* 線の上に文字 */
.product_tab_guide span {
  position: relative;

  display: inline-block;

  padding: 0 18px;

  background: #f7f5eb;

  color: var(--primary);

  font-size: 18px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: .05em;

  transform: translateY(-10px);
}


/* ===================================
   TAB
=================================== */

.product_tab_nav {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 12px;
}


.product_tab {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 95px;

  padding: 10px 15px;

  background: transparent;

  border: 2px solid var(--primary);
  border-radius: 16px;

  color: #333;

  font-family: inherit;

  font-size: 16px;
  line-height: 1.35;

  font-weight: 700;

  text-align: center;

  cursor: pointer;

  transition:
    background-color .3s ease,
    color .3s ease;
}


.product_tab small {
  font-size: .85em;
}


/* ===================================
   下三角
=================================== */

.product_tab::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -17px;

  width: 0;
  height: 0;

  border-left: 22px solid transparent;
  border-right: 22px solid transparent;
  border-top: 17px solid var(--primary);

  transform: translateX(-50%);

  opacity: 0;
}


.product_tab.active::after {
  opacity: 1;
}


/* hover */
.product_tab:hover {
  background: var(--primary);
  color: #fff;
}


/* ===================================
   Joomla既存記事
=================================== */

.product_contents {
  margin: 0;
  padding: 0;

  list-style: none;
}


/* 全部非表示 */
.product_contents > .product_tab_content {
  display: none;
}


/* 選択中だけ表示 */
.product_contents > .product_tab_content.is-active {
  display: block;
}


/* =========================================
   商品カテゴリ 見出し部分
========================================= */

.product-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  width: 100%;

  padding-bottom: 16px;
  margin-bottom: 38px;
margin-top: 5.5rem;
  border-bottom: 1px solid #333;
}


/* ウエハース */
.product-category-title {
  margin: 0;

  color: #333;

  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;

  letter-spacing: .04em;

  white-space: nowrap;
}
.product-category-title span{
	font-size: 16px;
}

/* =========================================
   栄養素タグ
========================================= */

.product-category-tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.product-category-tags li {
  display: flex;
  align-items: center;
  justify-content: center;

  min-width: 95px;
  height: 28px;

  padding: 0 16px;

  border-radius: 999px;

  background: #f2ad43;

  color: #fff;

  font-size: 12px;
  line-height: 1;
  font-weight: 500;

  letter-spacing: .02em;

  white-space: nowrap;
}


/* =========================================
   イントロ文章
========================================= */

.product-category-intro {
  margin-top: 0;

  color: #333;
margin-bottom: 2rem;
  font-size: 16px;
  line-height: 2.1;

  letter-spacing: .12em;
}


.product-category-intro p {
  margin: 0 0 8px;
}



/* =========================================
   PRODUCT CARD
========================================= */

.product_item {
  display: flex;
  flex-direction: column;

  width: 44%;
  height: 100%;
    justify-content: flex-end;
    margin-left: 15%;
	padding-bottom: 15px;
  background: #fff;

  color: #333;
  text-decoration: none;

  overflow: hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}
.product_item img{

}

/* =========================================
   商品画像エリア
========================================= */

.product_item_img {
  position: relative;

  width: 100%;
/*  height: 290px;*/
  aspect-ratio: 1 / 1;
  box-sizing: border-box;

  background: #fff;

  overflow: hidden;
}


/* 商品本体画像 */
.product_item_img > img{
  position: absolute;

  left: 50%;
  bottom: 0px;
transform: translateX(-50%);
  display: block;

  width: 100%;

/*	max-height: 240px;*/
  object-fit: contain;
  object-position: center bottom;



  transition: transform .4s ease;
}


/* =========================================
   右上バッジ
========================================= */

.product_item_badge {
  position: absolute !important;

  top: 22px;
  right: 22px;
left: auto !important;
  width: 75px !important;
  height: 75px !important;
transform: translateX(0%) !important;
  object-fit: contain;

  z-index: 2;
}


/* =========================================
   下部
========================================= */

.product_item_bottom {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 90px;

  padding: 15px 25px;

  box-sizing: border-box;

  border-top:2px solid #f7f5eb;

  background: #fff;
}


/* 商品名 */
.product_item_name {
  margin: 0;

  color: #333;

  font-size: 15px;
  line-height: 1.6;

  font-weight: 400;

  letter-spacing: .08em;
}

.product_item_name a{
	color: #333;
}

/* =========================================
   右矢印
========================================= */

.product_item_arrow {
  position: relative;

  display: block;

  width: 22px;
  height: 34px;

  flex-shrink: 0;

  margin-left: 30px;
}


.product_item_arrow::before,
.product_item_arrow::after {
  content: "";

  position: absolute;

  right: 0;

  width: 24px;
  height: 3px;

  background: var(--primary);

  transform-origin: right center;

  transition: transform .3s ease;
}


.product_item_arrow::before {
  top: 16px;

  transform: rotate(45deg);
}


.product_item_arrow::after {
  bottom: 16px;

  transform: rotate(-45deg);
}


/* =========================================
   HOVER
========================================= */

.product_item:hover {
  transform: translateY(-5px);

  box-shadow:
    0 10px 25px rgba(0, 0, 0, .08);
}


/* 商品だけ少し拡大 */
.product_item:hover
.product_item_img > img:first-child {
  transform:
    translateX(-50%)
    scale(1.04);
}


/* =========================================
   商品一覧
========================================= */

.product_list {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 50px;

  align-items: stretch;
}


.product_list .product_item {
  height: 100%;
}


/* =========================================
   TABLET
========================================= */

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

  .product_list {
    grid-template-columns: repeat(2, 1fr);

    gap: 30px;
  }


  .product_item_img {
    height: 380px;
  }


  .product_item_badge {
    width: 95px !important;
    height: 95px !important;
  }

}


/* =========================================
   SP
========================================= */

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

  .product_list {
    grid-template-columns: 1fr;

    gap: 25px;
  }


  .product_item_img {
    height: 340px;
  }


  .product_item_img > img:first-child {
    bottom: 25px;

    width: 75%;
    height: 75%;
  }


  .product_item_badge {
    top: 18px;
    right: 18px;

    width: 85px !important;
    height: 85px !important;
  }


  .product_item_bottom {
    min-height: 110px;

    padding: 22px 30px;
  }


  .product_item_name {
    font-size: 16px;
  }


  .product_item_arrow {
    margin-left: 20px;
  }

}

.mod-articlesnews-horizontal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media screen and (max-width: 991px) {
  .mod-articlesnews-horizontal {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .mod-articlesnews-horizontal {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   PRODUCT DETAIL
========================================= */

.product_detail {
  width: 100%;
  max-width: 1050px;

  margin: 3rem auto 0;
  padding: 60px 60px 80px;

  box-sizing: border-box;

  background: #fff;

  color: #333;
}


/* =========================================
   TOP
========================================= */

.product_detail_top {
  display: grid;

  grid-template-columns:
    minmax(300px, 380px)
    minmax(0, 1fr);

  gap: 50px;

  align-items: start;
}


/* =========================================
   PRODUCT IMAGE
========================================= */

.product_gallery {
  width: 100%;
}


/*
 * 商品画像を入れる「箱」は常に同じサイズ
 */
.product_gallery_main {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1 / 1;

/*  padding: 30px;*/

  box-sizing: border-box;

  border: 1px solid #ddd;

  background: #fff;
}


/*
 * 元画像のサイズ・縦横比が変わっても
 * この中に収める
 */
.product_gallery_main img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center center;
}


/* =========================================
   DOT
========================================= */

.product_gallery_dots {
  display: flex;
  justify-content: center;

  gap: 12px;

  margin-top: 15px;
}

.product_gallery_dots button {
  width: 11px;
  height: 11px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #bbb;

  cursor: pointer;
}

.product_gallery_dots button.is-active {
  background: #f39800;
}

.second_slider {
	position: relative;
}

/* 左右ボタン */
.second_prev,
.second_next {
	position: absolute;
	top: 50%;
	z-index: 20;

	width: 56px;
	height: 56px;

	padding: 0;
	border: none;
	border-radius: 50%;
	background:rgba(192,192,192,0.35);

	transform: translateY(-50%);
	cursor: pointer;

	transition: background .3s ease;
}

/* 半分だけ見せる */
.second_prev {
	left: -28px;
}

.second_next {
	right: -28px;
}


/* 矢印共通 */
.second_prev::before,
.second_next::before {
	content: "";
	position: absolute;
	top: 50%;

	width: 13px;
	height: 13px;

	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
}


/* 左矢印 */
.second_prev::before {
	right: 9px;
	transform: translateY(-50%) rotate(-135deg);
}


/* 右矢印 */
.second_next::before {
	left: 9px;
	transform: translateY(-50%) rotate(45deg);
}


/* hover */
.second_prev:hover,
.second_next:hover {
	background: #999;
}
/* =========================================
   INTRO
========================================= */

.product_detail_intro {
  min-width: 0;
}

.product_detail_title {
  margin: 0 0 20px;

  color: #333;

  font-size: 28px;
  line-height: 1.5;

  font-weight: 500;

  letter-spacing: .04em;
}


.product_detail_description {
  margin: 0;

  font-size: 15px;
  line-height: 1.65;


  letter-spacing: .04em;
}


/* =========================================
   SERIES
========================================= */

.product_series {
  margin-top: 35px;

  padding: 22px 30px;

  background: #f2f2f2;

  border-radius: 20px;

  text-align: center;
}

.product_series h2 {
  margin: 0 0 7px;

  color: #777;

  font-size: 18px;
  line-height: 1.5;


  letter-spacing: .05em;
}

.product_series p {
  margin: 0;

  color: #777;

  font-size: 14px;
  line-height: 1.7;


}


/* =========================================
   ALLERGY
========================================= */

.product_allergy {
  display: grid;

  grid-template-columns: 160px 1fr;

  gap: 30px;

  align-items: center;

  max-width: 700px;

  margin: 75px auto 0;
  padding-top: 30px;

  border-top: 1px solid #ccc;
}
.product_allergy-left{
	margin-left: 0;
	border: none;
}

.product_allergy_title {
  font-size: 14px;
  line-height: 1.5;

  font-weight: 500;
}


.product_allergy_items {
  display: flex;
flex-wrap: wrap;
  align-items: flex-start;

  gap: 10px;
}


.product_allergy_item {
  width: 75px;

  text-align: center;
}


.product_allergy_item img {
  display: block;

  width: 82px;
  height: 82px;

  margin: 0 auto 7px;

  object-fit: contain;
}


.product_allergy_item span {
  display: block;

  font-size: 12px;
  font-weight: 600;
}


.product_allergy_note {


  margin: 0px auto 0;

  text-align: left;
width: 100%;
  font-size: 13px;
  line-height: 1.6;

  font-weight: 500;
}

.product_gallery .swiper-pagination-bullet-active{
	background: #f39800;
}
.product_gallery .swiper-pagination-bullet{
	width: 10px;
	height: 10px;
}
.product_gallery .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{
	text-align: center;
}
/* =========================================
   SPEC
========================================= */

.product_specs {
  max-width: 700px;

  margin: 30px auto 0;

  border-top: 1px solid #ccc;
}


.product_spec {
  display: grid;

  grid-template-columns: 160px 1fr;

  gap: 25px;

  padding: 28px 0;

  border-bottom: 1px solid #ccc;
}


.product_spec h2 {
  margin: 0;

  color: #333;

  font-size: 14px;
  line-height: 1.5;
}


.product_spec > div {
  min-width: 0;

  font-size: 14px;
  line-height: 1.55;

  font-weight: 400;

  overflow-wrap: anywhere;
}


/* =========================================
   MORE
========================================= */

.product_detail_more {
  display: flex;
  justify-content: center;

  margin-top: 60px;
}


/* 前に作った丸ボタン */
.circle_btn {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 145px;
  height: 145px;

  border: 1.5px solid var(--primary);
  border-radius: 50%;

  overflow: hidden;

  color: var(--primary);
  text-decoration: none;

/*  font-size: 14px;*/


  transition: color .4s ease;
}


.circle_btn::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 100%;

  background: var(--primary);

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    scale(0);

  transition:
    transform .45s cubic-bezier(.4, 0, .2, 1);
}


.circle_btn:hover::before {
  transform:
    translate(-50%, -50%)
    scale(1.05);
}

.circle_btn:hover {
  color: #fff;
}


/* 矢印 */
.circle_arrow {
  position: relative;

  display: block;

  width: 26px;
  height: 12px;

  margin-top: 17px;
}

.circle_arrow::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 26px;
  height: 1.5px;

  background: currentColor;
}

.circle_arrow::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 2px;

  width: 9px;
  height: 1.5px;

  background: currentColor;

  transform-origin: right center;
  transform: rotate(40deg);
}

/*会社情報*/
.table-style1{
	width: 100%;
}
.table-style1 th{
	font-weight: 400;
}
.table-style1 th,.table-style1 td{
	padding: 20px 10px;
	border-bottom: solid 1px #ccc;
	borer-top: solid 1px #ccc;
}
.item-257 .table-style1 th,.item-257 .table-style1 td{
	font-size: 14px;
}
.two_column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

.two_column_s{
	gap:10px;
	padding-left: 20px;
}

.two_column_left,
.two_column_right {
  min-width: 0;
}

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

  .two_column {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .two_column2 {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}


.two_column2 {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 380px);

  gap: 30px;

  align-items: start;
}

.two_column3{
	display: flex;
	flex-wrap: wrap;
	gap:25px;
}
.left70{
	width: 70%;
}
.right30{
	width:calc(30% - 25px);
}
.left60{
	width: 60%;
}
.right40{
	width:calc(40% - 25px);
}

/* 左 */
.two_column_main {
  min-width: 0;
}


/* 右画像 */
.two_column_img {
  width: 100%;
}

.two_column_img img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}




/* =========================================
   PAGE
========================================= */

.promise_page {
  padding: 70px 0px 50px;
}

.promise_page_inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}


/* =========================================
   MESSAGE
========================================= */

.promise_message {
  text-align: center;
}

.promise_message h2 {
  margin: 0 0 15px;

  font-size: 28px;
  line-height: 1.45;
  font-weight: 700;

  letter-spacing: .04em;
}

.promise_message p {
  margin: 0;

  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;

  letter-spacing: .025em;
}


/* =========================================
   CHALLENGE
========================================= */

.promise_challenge {
  margin-top: 65px;
  text-align: center;
}

.promise_challenge h2 {
  margin: 0 0 15px;

  font-size: 27px;
  line-height: 1.4;
  font-weight: 700;

  letter-spacing: .04em;
}

.promise_challenge > p {
  margin: 0;

  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}


/* =========================================
   MORE BUTTON
========================================= */

.promise_more {
  display: flex;
  justify-content: center;

  margin-top: 40px;
}

.circle_btn {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 141.6px;
  height: 141.6px;

  border: 1.5px solid var(--primary);
  border-radius: 50%;

  box-sizing: border-box;
  padding-top: 14.2px;

  overflow: hidden;

  color: var(--primary);
  text-decoration: none;

/*  font-size: 12px;*/
  line-height: 1.5;


  transition: color .35s ease;
}


/* 中央から赤が広がる */
.circle_btn::before {
  content: "";

  position: absolute;
  z-index: -1;

  left: 50%;
  top: 50%;

  width: 100%;
  height: 100%;

  background: var(--primary);
  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    scale(0);

  transition:
    transform .45s cubic-bezier(.4, 0, .2, 1);
}

.circle_btn:hover::before {
  transform:
    translate(-50%, -50%)
    scale(1.05);
}

.circle_btn:hover {
  color: #fff;
}


/* 矢印 */

.circle_arrow {
  position: relative;

  display: block;

  width: 25px;
  height: 12px;

  margin-top: 9.6px;
}

.circle_arrow::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 2px;

  width: 25px;
  height: 1.5px;

  background: currentColor;
}

.circle_arrow::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 2px;

  width: 9px;
  height: 1.5px;

  background: currentColor;

  transform-origin: right center;
  transform: rotate(40deg);
}


/* =========================================
   LOGO INTRO
========================================= */

.promise_logo_intro {
  margin-top: 110px;

  text-align: center;
}

.promise_logo_intro p {
  margin: 0;

  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;

  letter-spacing: .02em;
}


/* =========================================
   LOGO DETAIL
========================================= */

.logo_detail {
  display: grid;

  grid-template-columns:
    250px
    minmax(0, 1fr);

  gap: 70px;

  align-items: center;

  max-width: 1000px;

  margin: 25px auto 0;
}


/* 左 */
.logo_detail_visual{
	text-align: center;
}
.logo_detail_visual h3 {
  margin: 0 0 25px;

  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
}


/* =========================================
   LOGO IMAGE
========================================= */

.logo_detail_image {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-height: 140px;
	margin-left: auto;
	margin-right: auto;
}


.logo_detail_image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* コーポレートロゴ */

.corporate_logo {
  width: 200px;

}


/* ブランドロゴ */

.brand_logo {
  width: 150px;

}


/* =========================================
   RIGHT TEXT
========================================= */

.logo_detail_text h3 {
  margin: 0 0 15px;

  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;

  letter-spacing: .03em;
}

.logo_detail_text p {
  margin: 0;

  font-size: 15px;
  line-height: 1.7;
  font-weight: 500;

  letter-spacing: .02em;
}


/* =========================================
   TABLET
========================================= */

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

  .promise_page_inner {
    max-width: 800px;
  }

  .logo_detail {
    grid-template-columns:
      240px
      minmax(0, 1fr);

    gap: 45px;
  }

}


/* =========================================
   SP
========================================= */

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

  .promise_page {
    padding: 50px 20px 70px;
  }


  .promise_message h2,
  .promise_challenge h2 {
    font-size: 22px;
  }


  .promise_message p,
  .promise_challenge > p,
  .promise_logo_intro p {
    font-size: 14px;
    line-height: 1.8;
  }


  .promise_challenge {
    margin-top: 50px;
  }


  .promise_logo_intro {
    margin-top: 75px;
  }


  /* ロゴ説明を縦並び */
  .logo_detail {
    grid-template-columns: 1fr;

    gap: 30px;

    margin-top: 50px;
  }


  .logo_detail_visual {
    text-align: center;
  }


  .logo_detail_visual h3 {
    font-size: 20px;
  }


  .corporate_logo,
  .brand_logo {
    margin: 0 auto;
  }


  .corporate_logo {
    width: 240px;
  }

  .brand_logo {
    width: 160px;
    height: 160px;
  }


  .logo_detail_text h3 {
    font-size: 20px;
  }


  .logo_detail_text p {
    font-size: 14px;
    line-height: 1.8;
  }

}


/* =========================================
   FAQ
========================================= */

.faq {
  --faq-red: var(--primary);
  --faq-bg: #f7f5eb;

  width: 100%;
  color: #222;
}

.faq-table{
	width: 100%;
	  border-collapse: collapse; 
	
}
	.faq-table th{
		background-color: rgba(255,255,255,1.00);
		padding: 10px;
		text-align: center;
		font-weight: 600;
		border: solid 1px #ccc;
		font-size: 15px;
		color: var(--primary);
	}
	.faq-table td{
		background-color: rgba(255,255,255,0.70);
		padding: 10px;
		border: solid 1px #ccc;
		font-size: 15px;
	}
/* =========================================
   Q：質問ボックス
========================================= */

.faq [data-rlta-element="button"] {
  position: relative !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 16px 28px !important;

  box-sizing: border-box !important;

  background: #fff !important;

  border: 2px solid var(--faq-red) !important;
  border-radius: 20px !important;

  box-shadow: none !important;

  color: var(--faq-red) !important;

  cursor: pointer;
}


/* open / closed どちらも同じ見た目 */

.faq [data-rlta-element="button"][data-rlta-state="open"],
.faq [data-rlta-element="button"][data-rlta-state="closed"] {
  background: #fff !important;
  border-color: var(--faq-red) !important;
  color: var(--faq-red) !important;
	transition: 0.3s;
}
.faq [data-rlta-element="button"]:hover{
	background-color: var(--faq-red) !important;
	color: #fff!important;
}

/* 質問タイトル */

.faq [data-rlta-element="heading"] {
  display: flex !important;
  align-items: center !important;

  gap: 20px;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;

  color: inherit !important;

  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;

  letter-spacing: .03em !important;
}


/* Q */

.faq [data-rlta-element="heading"]::before {
  content: "Q";

  flex-shrink: 0;

  color: var(--faq-red);
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 500;

  letter-spacing: 0;
	transition: 0.3s;
}

.faq [data-rlta-element="button"]:hover [data-rlta-element="heading"]::before{
	color: #fff;
}
/* =========================================
   A：回答部分
========================================= */

.faq [data-rlta-element="panel"] {
  margin: 0 !important;

  border: 0 !important;
  background: transparent !important;

  box-shadow: none !important;
}


.faq [data-rlta-element="panel-content"] {
position: relative;
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    column-gap: 10px;
    width: 100%;
    box-sizing: border-box;
    padding: 30px 20px 20px !important;
    border: 0 !important;
    background: transparent !important;
}


/* A */

.faq [data-rlta-element="panel-content"]::before {
  content: "A";

  color: var(--faq-red);
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  line-height: 1;
  font-weight: 500;

  letter-spacing: 0;
}
.faq [data-rlta-id="1"] [data-rlta-element="button"]::after{
	display: none;
}

/* 回答本文 */

.faq [data-rlta-element="panel-content"] > p {
  margin: 0 !important;

  color: #222;

  font-size: 16px;
  line-height: 1.9;
  font-weight: 400;

  letter-spacing: .02em;
}


/* リンク */

.faq [data-rlta-element="panel-content"] a {
  color: #222;
  text-decoration: none;
}

.faq [data-rlta-element="panel-content"] a:hover {
  color: var(--faq-red);
}


/* =========================================
   Regular Labs 標準装飾をリセット
========================================= */

.faq [data-rlta-element="container"],
.faq [data-rlta-element="panels"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* 標準の開閉アイコンが表示される場合 */
.faq [data-rlta-element="button"] > span,
.faq [data-rlta-element="button"] .rlta-icon {
  display: none !important;
}


/* =========================================
   FAQ CATEGORY
========================================= */

.faq_category {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  gap: 20px;

  width: 100%;
}


/* ボタン */
.faq_category_btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 65px;

  padding: 15px 12px 10px;

  box-sizing: border-box;

  background:var(--primary);

  border-radius: 60px;

  color: #fff;
  text-decoration: none;

  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;

  text-align: center;

  transition:
    background-color .3s ease,
    transform .3s ease;
}


/* 下向き矢印 */
.faq_category_btn i {
  position: relative;

  display: block;

  width: 18px;
  height: 10px;

  margin-top: 15px;
}


.faq_category_btn i::before,
.faq_category_btn i::after {
  content: "";

  position: absolute;

  top: 2px;

  width: 12px;
  height: 3px;

  background: #fff;

  border-radius: 2px;
}


.faq_category_btn i::before {
  left: 0;

  transform: rotate(45deg);
}


.faq_category_btn i::after {
  right: 0;

  transform: rotate(-45deg);
}


/* hover */
.faq_category_btn:hover {
  background: #c90016;
color: #fff;
	text-decoration: none;
  transform: translateY(-3px);
}
.faq_category_btn:focus{
	color: #fff !important;
}

/* =========================================
   SP：2列
========================================= */

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

  .faq_category {
    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
  }


  .faq_category_btn {
    min-height: 85px;

    padding: 14px 10px 10px;

    border-radius: 45px;

    font-size: 15px;
  }


  .faq_category_btn i {
    width: 16px;
    height: 9px;

    margin-top: 10px;
  }


  .faq_category_btn i::before,
  .faq_category_btn i::after {
    width: 10px;
    height: 2px;
  }

}

.item-237     .t4-main-body{
  margin-top: 10rem;
}
.item-237 #t4-main-bottom .btn.btn-primary[type="submit"]::before{
  display:none;
}

.item-237 #t4-main-bottom .btn.btn-primary[type="submit"]{
      padding: 10px;
    border: none;
    width: 150px!important;
    background:var(--primary);
   height:auto;
    font-size: 15px !important;
   margin-bottom: 20px;
}
.item-237 .mod-login__username {
  margin-bottom: 10px;
  }


/* =========================================
   SITEMAP
========================================= */

.sitemap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 55px;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding: 55px 30px;
}


/* 各ブロック */
.sitemap_block {
  margin-bottom: 48px;
}


/* =========================================
   見出し
========================================= */

.sitemap_title {
  position: relative;

  margin: 0 0 24px;

  padding-left: 26px;

  color: #111;

  font-size: 21px;
  line-height: 1.4;
  font-weight: 700;

  letter-spacing: .02em;
}
.sitemap_title a{
	 color: #111;
	transition: 0.3s;
}
.sitemap_title a:hover{
	color:  var(--primary);
}


/* 左の赤線 */
.sitemap_title::before {
  content: "";

  position: absolute;

  left: 0;
  top: 50%;

  width: 7px;
  height: 40px;

  background: var(--primary);

  transform: translateY(-50%);
}


/* =========================================
   リスト
========================================= */

.sitemap_list {
  margin: 0;
  padding: 0 0 0 28px;

  list-style: none;
}


.sitemap_list li {
  margin-bottom: 15px;
}


.sitemap_list a {
  color: #111;

  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;

  text-decoration: none;

  transition: color .3s ease;
}


.sitemap_list a:hover {
  color: var(--primary);
}


/* =========================================
   SP
========================================= */

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

  .sitemap {
    grid-template-columns: 1fr;

    gap: 0;

    padding: 40px 20px;
  }


  .sitemap_block {
    margin-bottom: 38px;
  }


  .sitemap_title {
    margin-bottom: 18px;

    padding-left: 22px;

    font-size: 18px;
  }


  .sitemap_title::before {
    width: 5px;
    height: 32px;
  }


  .sitemap_list {
    padding-left: 22px;
  }


  .sitemap_list li {
    margin-bottom: 12px;
  }


  .sitemap_list a {
    font-size: 14px;
  }

}

/* =========================
   商品情報
========================= */
.item-361 #t4-main-body .t4-section-inner,.item-618 #t4-main-body .t4-section-inner{
	max-width: 1100px !important;
	padding: 0;
}

/* =========================
   栄養カテゴリナビ
========================= */

.nutrition-nav {
	--nav-red: #D80421;
	--nav-text: #333;
	--nav-bg: #f8f7ef;
	--nav-gap: 16px;

	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--nav-gap);
	width: 100%;
	margin: 15px auto 0;
	background: var(--nav-bg);
}


/* グループ配置 */
.nutrition-group {
	min-width: 0;
}

.nutrition-group--pickup {
	grid-column: 1;
}

.nutrition-group--balance {
	grid-column: 2 / 5;
}

.nutrition-group--other {
	grid-column: 5;
}


/* =========================
   見出し
========================= */

.nutrition-title {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	height: 68px;
	margin: 0;
	padding: 22px 20px 0;
	color: var(--nav-red);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .04em;
	text-align: center;
}


/* 上線＋左右の縦線 */
.nutrition-title::before {
	content: "";
	position: absolute;
	top: 42px;
	left: 0;
	right: 0;
	height: 22px;
	border-top: 1px solid var(--nav-red);
	border-left: 1px solid var(--nav-red);
	border-right: 1px solid var(--nav-red);
	border-radius: 0px 0px 0 0;
	pointer-events: none;
}


/* タイトル文字で線を隠す */
.nutrition-title span {
	position: relative;
	z-index: 1;
	display: inline-block;
	padding: 0 14px;
	background: var(--nav-bg);
	top:11px;
}


/* その他は見出しがないので高さだけ合わせる */
.nutrition-group--other {
	padding-top: 68px;
}


/* =========================
   ボタンエリア
========================= */

.nutrition-buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--nav-gap);
}


/* バランスパワーはPCで3列 */
.nutrition-group--balance .nutrition-buttons {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}


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

.nutrition-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 57px;
	padding: 10px 15px;
	border: 2px solid var(--nav-red);
	background: #fff;
	color: var(--nav-text);
	text-decoration: none;
	text-align: center;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .02em;
	flex-wrap: wrap;

	transition:
		background-color .3s ease,
		color .3s ease,
		transform .3s ease,
		box-shadow .3s ease;
}
.nutrition-btn small{
	font-size: 10px;
	display: block;
	width: 100%;
}

/* 三角 */
.nutrition-btn::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -15px;
	width: 31px;
	height: 15px;
	background: var(--nav-red);
	transform: translateX(-50%);
	clip-path: polygon(0 0, 100% 0, 50% 100%);

	transition:
		bottom .3s ease,
		transform .3s ease;
}


/* 2段目 */



/* =========================
   hover
========================= */

@media (hover: hover) {

	.nutrition-btn:hover {
		background: var(--nav-red);
		color: #fff;

	}

}


/* キーボード操作 */
.nutrition-btn:focus-visible {
	outline: 3px solid rgba(230, 0, 29, .3);
	outline-offset: 5px;
}


/* =========================
   スマホ
========================= */

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

	.nutrition-nav {
		display: block;
		width: calc(100% - 40px);
		max-width: 670px;
		margin: 0 auto;
	}


	/* グループ */
	.nutrition-group {
		width: 100%;
	}


	/* 2つ目のグループ */
	.nutrition-group--balance {
		margin-top: 32px;
	}


	/* その他 */
	.nutrition-group--other {
		margin-top: 55px;
		padding-top: 0;
	}


	/* =====================
	   見出し
	===================== */

	.nutrition-title {
		height: 84px;
		padding: 15px 15px 0;
		white-space: nowrap;
	}


	.nutrition-title::before {
		top: 37px;
		height: 48px;
		border-width: 2px;
	}


	.nutrition-title span {
		padding: 0 20px;
	}


	/* =====================
	   ボタン縦積み
	===================== */

	.nutrition-buttons,
	.nutrition-group--balance .nutrition-buttons {
		display: grid;
		grid-template-columns: 1fr;
		gap: 28px;
	}


	.nutrition-btn {
		min-height: 70px;
		padding: 20px;
		border-radius: 0;
	}


	/* スマホではバランスパワーを1行表示 */
	.nutrition-btn small {
		display: inline;
		margin: 0;
		font-size: 1em;
	}


}


/* お知らせ > 丸付数字 */
ol.circle_number_list {
  list-style: none;
  counter-reset: number;
  padding-left: 0;
}

ol.circle_number_list li {
  counter-increment: number;
  position: relative;
  padding-left: 28px;
  margin-bottom: 15px;
}

ol.circle_number_list li::before {
  content: counter(number);
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border: 1px solid #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  box-sizing: border-box;
}

/*お知らせ*/
.news_list_check li::marker {
  color: var(--primary);
}
.news_list_check li{
	margin-bottom: 5px;
}
.tags.list-inline{
	display: none;
}
.item-257 .t4-content-inner p,.item-257 .t4-content-inner,.item-257 .t4-content-inner li{
	line-height: 1.6;
}
.item-257 .row{
	gap:20px;
	align-items: flex-start;
}
.item-257 .t4-col {
		background-color: #fff;
		border-radius: 30px;
		padding: 35px;
	margin-bottom: 2rem;
}
.item-257 .sidebar-r{
		background-color: #fff;
		border-radius: 30px;
		padding: 25px;
}

	.item-257 .page-header h2{
		font-size:clamp(22px ,2.5vw ,30px) !important;
	}
	.item-257 .blog-items .page-header h2{
		font-size:clamp(18px ,1.5vw ,24px) !important;
	}


	.item-257 .item-content{
		border-bottom: solid 1px #ccc;
	}
.item-257 .item-page{
	margin-bottom: 3rem;
}
.jmodinside a{
	color: #000 !important;
}
.jmodinside a:hover{
		color:  #e6001d; !important;
}

	.item-257 .t4-main-body{
	margin-top: 3rem;
}


.footer_nav a {
  position: relative;

  color: #fff !important;

  font-size: inherit;
  line-height: inherit;

  font-weight: inherit;

  letter-spacing: inherit;

  text-decoration: none;

  transition: opacity .3s ease;
}

.footer_nav a:hover {
  opacity: .65 !important;
}
.footer_txt15{
	font-size: 15px;
}
.com_legacy_search .t4-main-body{
	padding: 10rem 0 4rem;
}

/* 検索結果 > 検索条件・順序・検索範囲 を非表示 */
.com-legacy-search .phrases,
.com-legacy-search .only{
display: none;
}


/* =========================================
   PURPOSE PAGE
========================================= */

.purpose_page {
	--purpose-red: #d80421;
	--purpose-width: 1050px;
}


/* =========================================
   COMMON
========================================= */

.purpose_container {
	width: min(calc(100% - 32px), var(--purpose-width));
	margin: 0 auto;
}

.purpose_en {
	margin: 0;
	color: var(--purpose-red);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: .06em;
}

.purpose_line {
	width: 30px;
	height: 1px;
	margin: 18px 0 25px;
	background: var(--purpose-red);
}

.purpose_title {
	margin: 0 0 22px;
	color: var(--purpose-red);
	font-size: 26px;
	line-height: 1.75;
	letter-spacing: .04em;
}

.purpose_text {
	line-height: 2.05;
	letter-spacing: .04em;
}

.purpose_text p {
	margin: 0 0 5px;
}

.purpose_text p:last-child {
	margin-bottom: 0;
}


/* =========================================
   PURPOSE
========================================= */

.purpose_section {
	padding: 50px 0 50px;
}


/* -------------------------
   ROW COMMON
------------------------- */

.purpose_row {
	display: grid;
	align-items: start;
}


/* -------------------------
   TOP
------------------------- */

.purpose_row_top {
	grid-template-columns: 1.28fr 1fr;
	gap: 36px;
}

.purpose_row_top .purpose_content {
	padding-top: 2px;
}


/* -------------------------
   IMAGE
------------------------- */

.purpose_image {
	overflow: hidden;
}

.purpose_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* 上段画像 */

.purpose_image_family {
	aspect-ratio: 340 / 295;
}


/* =========================================
   CHALLENGE
========================================= */

.purpose_row_challenge {
	grid-template-columns: 1.45fr 1fr;
	gap: 34px;

	margin-top: 72px;
}

.purpose_image_sweets {
	aspect-ratio: 450 / 330;
}

.purpose_challenge_content {
	padding-top: 2px;
}


/* =========================================
   BUTTON
========================================= */

.purpose_button_wrap {
	display: flex;
	justify-content: center;
	margin-top: 70px;
}

.purpose_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 17px;

	width: 315px;
	min-height: 54px;

	padding: 10px 25px;

	border: 1px solid var(--primary);
	border-radius: 999px;

	background: #fff;
	color: var(--primary);

	text-decoration: none;

	transition:
		background .3s ease,
		color .3s ease;
}

.purpose_arrow {
	position: relative;
	display: block;
	width: 22px;
	height: 7px;
}

.purpose_arrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;

	width: 22px;
	height: 1px;

	background: currentColor;
}

.purpose_arrow::after {
	content: "";
	position: absolute;
	right: 0;
	top: 1px;

	width: 6px;
	height: 6px;

	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;

	transform: rotate(45deg);
}

.purpose_button:hover {
	background: var(--primary);
	color: #fff;
}


/* =========================================
   LOGO SECTION
========================================= */

.logo_section {
	padding: 72px 0 55px;
}


/* -------------------------
   INTRO
------------------------- */

.logo_intro {
	margin: 0 auto 45px;

	text-align: center;
	line-height: 2;
	letter-spacing: .04em;
}

.logo_intro p {
	margin: 0;
}


/* =========================================
   WHITE BOX
========================================= */

.logo_box {
	width: min(calc(100% - 16px), var(--purpose-width));
	margin: 0 auto;

	padding: 72px 55px 75px;

	background: #fff;
}


/* =========================================
   LOGO ROW
========================================= */

.logo_row {
	display: grid;
	grid-template-columns: 42% 58%;
	align-items: center;
}

.logo_row + .logo_row {
	margin-top: 105px;
}


/* -------------------------
   LOGO IMAGE
------------------------- */

.logo_visual {
	display: flex;
	align-items: center;
	justify-content: center;

	padding-right: 45px;
}

.logo_visual img {
	display: block;
	width: 100%;
	max-width: 235px;
	height: auto;
}

.logo_visual_brand img {
	max-width: 185px;
	margin-left: 40px;
}


/* -------------------------
   LOGO CONTENT
------------------------- */

.logo_content .purpose_line {
	margin-bottom: 23px;
}

.logo_content .purpose_title {
	margin-bottom: 18px;
	line-height: 1.65;
}

/* =========================================
   SAFETY
========================================= */

.safety_section {
	margin: 0 auto;
	padding: 50px 0 90px;
}


/* =========================================
   TITLE
========================================= */

.safety_section h2 {
	margin: 0 0 2rem;
}


/* 赤い罫線 */
.safety_line {
	width: 100%;
	height: 1px;
	margin: 15px 0 42px;
	background:var(--primary);
}


/* =========================================
   ROW
========================================= */

.safety_row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 35px;
	align-items: start;
}

.safety_row + .safety_row {
	margin-top: 45px;
}


/* =========================================
   TEXT
========================================= */

.safety_text {
	line-height: 2.15;
	letter-spacing: .04em;
}

.safety_text p {
	margin: 0 0 18px;
}

.safety_text p:last-child {
	margin-bottom: 0;
}


/* =========================================
   FSSC
========================================= */

.safety_certification {
	background: #fff;
	padding: 18px 30px;
}

.safety_certification_inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	min-height: 140px;
}

.safety_fssc {
	display: block;
	width: 110px;
	height: auto;
	flex-shrink: 0;
}

.safety_certification p {
	margin: 0;
	line-height: 1.8;
	font-size: 11px;
}


/* =========================================
   FACTORY
========================================= */

.safety_image img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================
   ALLERGY
========================================= */

.allergy_block {
	margin-top: 110px;
}


/* =========================================
   ALLERGY PANEL
========================================= */

.allergy_panel {
	background: #fff;
	padding: 22px 40px 28px;
}

.allergy_panel_title {
	margin: 0 0 22px;
	padding: 5px 10px;

	border: 1px solid #888;

	text-align: center;
	line-height: 1.5;
}


/* =========================================
   ALLERGY ICON GRID
========================================= */

.allergy_icons {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px 14px;
}

.allergy_item {
	text-align: center;
}

.allergy_item img {
	display: block;

	width: 64px;
	max-width: 100%;
	height: auto;

	margin: 0 auto 6px;
}

.allergy_item span {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	white-space: nowrap;
}

.allergy_note {
	margin: 20px 0 0;
	font-size: 11px;
	line-height: 1.6;
/
}

/* =========================================
   HISTORY
========================================= */



.history_section {
	padding: 3rem 0 0px;
}

.history_section + .history_section {
	margin-top: 40px;
}


/* =========================================
   HEADING
========================================= */

.history_heading {
	margin: 0 0 48px;
	padding: 17px 25px;

	background: var(--primary);
	color: #fff;

	font-size: 26px;
	line-height: 1.5;
	text-align: center;
	letter-spacing: .08em;
}


/* =========================================
   BODY
========================================= */

.history_body {
	display: grid;
	grid-template-columns: 42% 58%;
	gap: 55px;
	align-items: start;
}


/* =========================================
   INTRO
========================================= */

.history_intro {
	line-height: 2.15;
	letter-spacing: .05em;
}

.history_intro p {
	margin: 0 0 18px;
}

.history_intro p:last-child {
	margin-bottom: 0;
}


/* =========================================
   TIMELINE
========================================= */

.history_timeline {
	position: relative;
	padding-left: 0;
}




/* =========================================
   ITEM
========================================= */

.history_item {
	position: relative;

	padding-left: 30px;
	padding-bottom: 48px;
}

.history_item:last-child {
	padding-bottom: 5px;
}


/* 赤丸 */
.history_item::before {
	content: "";
	position: absolute;

	left: 0;
	top: 5px;

	width: 13px;
	height: 13px;

	border-radius: 50%;

	background: var(--primary);

	transform: translateX(0);
}


/* =========================================
   ITEM INNER
========================================= */
/*

.history_item_inner {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr)
		minmax(120px, 190px);

	gap: 20px;

	align-items: start;
}
*/


/* 画像がない場合 */
.history_item_inner:has(.history_content:only-child) {
	grid-template-columns: 1fr;
}

/* =========================================
   HISTORY PC
========================================= */

.history_body {
	display: grid;
	grid-template-columns: 40% 60%;
	gap: 55px;
	align-items: start;
}


/* =========================================
   TIMELINE
========================================= */

.history_timeline {
	position: relative;
}


/* 縦線 */

.history_timeline::before {
	content: "";
	position: absolute;

	left: 6px;
	top: 7px;
	bottom: 0;
	
	width: 1px;
	background: var(--primary);
}
.history_timeline_last::before{
	height: calc(100% - 135px);
}

/* =========================================
   ITEM
========================================= */

.history_item {
	position: relative;

	min-height: 92px;

	padding:
		0
		0
		36px
		30px;
}


/* 赤丸 */

.history_item::before {
	content: "";
	position: absolute;

	left: 0;
	top: 5px;

	width: 13px;
	height: 13px;

	border-radius: 50%;
	background: var(--primary);
}


/* =========================================
   CONTENT
========================================= */

.history_item_inner {
	position: relative;
	min-height: inherit;
}

.history_content {
	position: relative;
	z-index: 2;

	max-width:450px;
}

.history_year {
	margin: 0 0 9px;

	color: var(--primary);

	font-size: 18px;
	line-height: 1.3;
	letter-spacing: .12em;
}

.history_text {
	margin: 0;

	font-size: 13px;
	line-height: 2;
	letter-spacing: .04em;
}


/* =========================================
   IMAGE COMMON
========================================= */

.history_media {
	position: absolute;
	z-index: 1;
}

.history_media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}


/* =========================================
   第一章
========================================= */


/* 1977 タルト */

.history_1977 {
	min-height: 120px;
}

.history_1977 .history_media {
	width: 145px;

	top: -5px;
	left: 140px;
}


/* 1980 クリスマス・チョコ */

.history_1980 {
	min-height: 15px;
}

.history_1980 .history_media {
	width: 220px;

	top: -5px;
	left: 115px;
}

.history_1980 .history_media_multi {
	display: block;
}

.history_1980 .history_media_multi img:first-child {
	width: 145px;
	margin-left: 0;
}

.history_1980 .history_media_multi img:last-child {
	width: 220px;
	margin-top: -4px;
	margin-left: 75px;
}


/* 1988 ロゴ */

.history_1988 {
	min-height: 120px;
}

.history_1988 .history_media {
	width: 225px;

	top: -2px;
	left: 250px;
}


/* =========================================
   第二章
========================================= */


/* 1992 CA-200 */

.history_1992 {
	min-height: 135px;
}

.history_1992 .history_media {
	width: 190px;

	top: -5px;
	left: 260px;
}


/* 1994 骨にカルシウム */

.history_1994 {
	min-height: 140px;
}

.history_1994 .history_media {
	width: 145px;

    top: -25px;
    left: 265px;
}


/* 1995 バランスパワー */

.history_1995 {
	min-height: 115px;
}

.history_1995 .history_media {
	width: 190px;

	top: -3px;
	left: 175px;
}


/* 2006 鉄プラス */

.history_2006 {
	min-height: 175px;
}

.history_2006 .history_media {
    width: 185px;
    top: -10px;
    left: 285px;
}


/* =========================================
   第三章
========================================= */


/* 2010 商品2点 */

.history_2010 {
	min-height: 170px;
}

.history_2010 .history_media {
	width: 205px;

	top: -5px;
	left: 165px;
}


/* 2011 工場 */

.history_2011 {
	min-height: 115px;
}

.history_2011 .history_media {
	width: 215px;

	top: -5px;
	left: 220px;
}


/* 2020 FSSC */

.history_2020 {
	min-height: 120px;
}

.history_2020 .history_media {
	width: 275px;

	top: -3px;
	left: 180px;
}


/* 2024 商品 */

.history_2024 {
	min-height: 190px;
}

.history_2024 .history_media {
    width: 180px;
    top: 65px;
    left: 250px;
}


.history_2025 {
	min-height: 120px;
}

.history_2025 .history_media {
    width: 170px;
    top: -5px;
    left: 155px;
}


.history_2026 {
	min-height: 140px;
}

.history_2026 .history_media {
    width: 220px;
    top: 55px;
    left: 195px;
}
/* =========================================
   YEAR
========================================= */

.history_year {
	margin: 0 0 10px;

	color: var(--primary);

	font-size: 18px;
	line-height: 1.3;
	letter-spacing: .12em;
}


/* =========================================
   TEXT
========================================= */

.history_text {
	margin: 0;

	font-size: 13px;
	line-height: 2;
	letter-spacing: .04em;
}


/* =========================================
   IMAGE
========================================= */

.history_media {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.history_media img {
	display: block;

	width: 100%;
	max-width: 200px;
	height: auto;

	object-fit: contain;
}


/* 小さめの画像 */
.history_media_small img {
	max-width: 110px;
}


/* 複数画像・縦 */
.history_media_multi {
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.history_media_multi img {
	max-width: 180px;
}


/* 複数画像・横 */
.history_media_horizontal {

}

.history_media_horizontal img {
	width: 100%;
	max-width: 160px;
}


/* =========================================
   TABLET
========================================= */

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

	.history_body {
		grid-template-columns: 37% 63%;
		gap: 35px;
	}

	.history_item_inner {
		grid-template-columns:
			minmax(0, 1fr)
			minmax(100px, 150px);
	}

	.history_media img {
		max-width: 145px;
	}

}

.t4-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(clamp(140px, 16.67vw, 200px) * 109 / 338 + 14px);
	z-index: -1;
	background: rgba(255, 255, 255, .8);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

body.hfx-header-solid .t4-header::before {
	opacity: 1;
}

.t4-header .header-wrap {
	height: calc(clamp(22px, 1.484vw, 28.5px) * 2 + clamp(140px, 16.67vw, 200px) * 109 / 338 + 2px);
	padding-top: 0;
	padding-bottom: calc((clamp(22px, 1.484vw, 28.5px) - 6px) * 2);
}

@media screen and (max-width: 767px) {
	.t4-header::before {
		top: 0;
		height: calc(155.2px * 109 / 338 + 14px);
	}

	.t4-header .header-wrap {
		height: calc(19.8px * 2 + 155.2px * 109 / 338 + 2px);
		padding-bottom: 27.6px;
	}
}

.item-257 .blog-item .item-content {
	display: flex;
	flex-direction: column;
}

.item-257 .blog-item .article-info {
	order: -1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 14px;
	margin: 0 0 2px;
	padding: 0;
}

.item-257 .blog-item .article-info .article-info-term {
	display: none;
}

.item-257 .blog-item .article-info dd {
	display: block;
	margin: 0;
}

.item-257 .blog-item .article-info dd::after {
	content: none;
}

.item-257 .blog-item .article-info .published {
	order: 1;
}

.item-257 .blog-item .article-info .published .fa-calendar {
	display: none;
}

.item-257 .blog-item .article-info .category-name {
	order: 2;
	font-size: 0;
}

.item-257 .blog-item .article-info .category-name a {
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: .04em;
}

.item-257 .blog-item .article-info .category-name a[href*="/news/news-product"] {
	color: var(--primary);
}

.item-257 .blog-item .article-info .category-name a[href*="/news/news-company"] {
	color: var(--primary);
}

.news_list .mod-articles-category-date {
	display: inline-block;
	margin-right: 14px;
}

.news_list .mod-articles-category-category {
	display: inline-block;
	margin-bottom: 6px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: .04em;
}

.news_list li:has(a[href*="/news/news-product/"]) .mod-articles-category-category {
	color: var(--primary);
}

.news_list li:has(a[href*="/news/news-company/"]) .mod-articles-category-category {
	color:var(--primary);
}

.sidebar-r .mod-list > li > a {
	display: flex;
	gap: .6em;
	color: #000;
	text-decoration: none;
}

.sidebar-r .mod-list > li > a:hover {
	color: var(--primary);
}

.sidebar-r .mod-list > li > a::before {
	flex: none;
	align-self: flex-start;
	display: flex;
	align-items: center;
	height: 1.6em;
	height: 1lh;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

.sidebar-r .mod-articlescategories > li > a::before {
	content: "\f07b";
}

.sidebar-r .mod-articleslatest > li > a::before,
.sidebar-r .mod-articlesarchive > li > a::before {
	content: "\f054";
}

.sidebar-r .mod-articlesarchive > li.active > a {
	font-weight: 700;
}

@media screen and (max-width: 1145px) {
.item-361 #t4-main-body .t4-section-inner, .item-618 #t4-main-body .t4-section-inner{
    padding: 0% 5%;
}
}