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

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

	.purpose_container,
	.logo_box {
		width: calc(100% - 40px);
	}

	.logo_box {
		padding-left: 40px;
		padding-right: 40px;
	}

	.logo_visual {
		padding-right: 30px;
	}
		.safety_section {
		width: calc(100% - 40px);
	}

	.safety_row {
		gap: 25px;
	}

	.safety_certification {
		padding-left: 20px;
		padding-right: 20px;
	}

	.safety_certification_inner {
		gap: 20px;
	}

	.allergy_panel {
		padding-left: 25px;
		padding-right: 25px;
	}

	.allergy_icons {
		grid-template-columns: repeat(4, 1fr);
	}

}

@media screen and (max-width: 767px) {
/**
     共通
     */
	body{
		min-width: 100%;
	}
		html,
	body {
		width: 100%;
		max-width: 100%;
		overflow-x: clip;
	}
.head-contact {
	display: none;
}
	.sp-img-50{
		width: 50% !important;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.heading03 {
    position: relative;
    padding: 0 0 10px;
    margin: 50px 0 15px;
    color: #374048;
    border-bottom: solid 1px #000;
    font-size: 1.45rem !important;
}
	.two_column2 {
    grid-template-columns: 1fr !important;
		    grid-template-columns: minmax(0, 1fr) minmax(100%);
    gap: 20px;
}
	.two_column_s{
	gap:10px;
	padding-left: 0px;
}
	.left70{
	width: 100%;
}
.right30{
	width: 108%;
}
.left60{
	width: 100%;
}
.right40{
	width:100%;
}
	.sp_left{
		text-align: left !important;
	}
.inner {
	width: 100%;
}
	.short_width {
    width: 100% !important;
    margin: auto;
}
	.end_product{
		margin-bottom: 135px;
	}
	.product_item_name{
		font-size: 11px;
	}
	.product_gallery img{
/*		width: 100% !important;*/
	}
	  .second_slider {
    width: 100%;
    max-width: 80vw;
    min-width: 0;
    overflow: hidden;
  }
	.product_slider_box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
.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;
	}
.width60, .width70, .width80, .width90 {
	width: 100%;
}
.pagetitle {
	margin: 0;
}
.pagetitle span {
	font-size: 16px;
}
	.page_title{
		    padding: 120px 20px 60px;
		
	}
	.page_title h1{
		font-size: 48px;
	}
	.page_title p {
    margin: 14px 0 0;
    font-size: 16px;
	}
.t4-component {
	padding: 40px 5%;
}

.item-361 .container {
	padding: 0 5% !important;
}
	
.item-257 .container {
	padding: 0 10% !important;
}
	

	.ft-150{
		margin-bottom: 135px;
	}
.t4-component .container {
	padding: 0;
}
.t4-header .container {
	padding: 0;
}
.align-full {
	margin-left: 0;
	margin-right: 0;
}
.p20 {
	line-height: 1.6;
}
.t4-content {
	margin-top: 0px;
}
	.pchidden{
		display: block !important;
	}
	.sphidden{
		display: none;
	}
	.w90{
		width: 90%;
		margin: auto;
	}
	
	.circle_btn{
		width: 120px;
		height: 120px;
		font-size: 10px !important
	}
	.circle_btn_text{
		font-size: 11px;
	}
	.mb50{
		margin-bottom: 30px !important;
	}
	.mt90{
		margin-top: 45px !important;
	}
	.mt100{
		margin-top: 55px !important;
	}
/**
     モバイルメニュー
     */
.t4-offcanvas {
	z-index: 99999;
}
.c-offcanvas.is-closed * {
	display: none;
}
.t4-offcanvas .t4-off-canvas-body .navbar.drilldown-effect .navbar-nav .btn-toggle {
	margin-top: 12px;
}

	.navbar-toggler i{
		color: #fff;
	}

	.c-offcanvas--left{
		width: 100%;
	}
	.t4-offcanvas{
		background-color: #D80421;
	}
/**
     問い合わせ /contact
     */
.heading01 {
	font-size: 2rem !important;
}

strong.formRequired {
	display: inline-block;
	padding: 2px 8px;
	line-height: 1.4;
	margin-left: 0;
}



/**
     会社案内
     */
table.gaiyo-table th {
	display: block;
	width: 100%;
	padding: 10px 0;
}
table.gaiyo-table td {
	display: block;
	width: 100%;
	padding: 10px;
	border-bottom: none;
}
/**
     ヘッダー
     */
header {
	position: fixed;
	top: 0;
	z-index: 9999;
}
#t4-megamenu-mainmenu {
	display: none;
}
.header-wrap {
	height: 70px;
	min-height: 60px;
}
.head-contact {
	display: none;
}
.head-mail {
	display: none;
}
.logo-image img {
	height: 50px;
}
  .t4-header-r {
      border-radius: 50%;
           height: 50px;
        padding: 0px;
    margin-right: 18px !important;
  }
	.item-613 .t4-header-r{
		  margin-right: 28px !important;
	}
.t4-navbar {
 display: none;
}
	.t4-header-r .search{
		display: none !important;
	}
	.t4-off-canvas-body search{
		display: block !important;
	}
	.t4-off-canvas-body .head-contact{
			display: block !important;
		background-color: #D80421;
	}
	.t4-offcanvas .t4-off-canvas-body .navbar .nav-link, .t4-offcanvas .t4-off-canvas-body .navbar .separator{
		color: #Fff;
	}
		.t4-off-canvas-body .input-group{
		justify-content: center;
	}
	
	.sitemap{
		padding-top: 60px;
		padding-bottom: 65px;
	}


/**
     フッター（サイトマップ）
     */
.ft-sitemap {
	display: none;
}
.ft-sitemap .profile {
	width: 100%;
}
.ft-sitemap .sitemap {
	margin-top: 40px;
	width: 100%;
}
.ft-sitemap .sitemap div {
	padding: 0;
}
.ft-sitemap .sitemap ul li {
	padding: 0 10px 10px 0;
}

/**
     お知らせ
     */
.page-header h2, .page-header .h2, .categories-list h2, .categories-list .h2 {
	margin-top: 20px;
	margin-bottom: 20px;
}
.news .system-unpublished h2 {
	position: relative;
	left: 0;
	top: 0;
	margin: 20px 0;
}
.news .news-col2 {
	flex-wrap: wrap;
}
.news .news-col2 div:first-child {
	width: 100%
}
.news .news-col2 div:last-child {
	width: 100%;
	padding-top: 0;
}
.news .system-unpublished {
	padding: 0 0 20px 0;
}
.article-info dd {
	display: none;
}
	.item-257 .article-info dd{
		display: block;
	}
/**
     お問い合わせフォーム
     */
#userForm .rsform-block>label {
	display: block;
	padding: 10px 0;
	width: 100%;
}
#userForm .rsform-block .formControls {
	display: block;
	border-top: medium none;
	padding: initial;
	width: 100%;
}
strong.formRequired {
	margin-left: 10px;
}
#checkbox-list-grouplbl, #checkbox-grouplbl, #radio-grouplbl {
  display: block;
  padding: 10px 0;
  width: 100%;
}
#userForm .rsform-block .formControls label.checkbox, 
#userForm .rsform-block .formControls label.radio {
  display: block;
}
.rsfp-fieldset {
  display: inline-block;
}
textarea, .rsform-input-box {
  width: 100%;
}
.rsfp-visually-hidden {
  display: none !important;
}

/*Youtubeの埋め込み　レスポンシブ*/
.yt{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.yt iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}
	
/*	TOP*/
	.teaser_waku{
		width: 85%
	}
	.teaser .swiper{
		width: 84%
	}
	.teaser{
		height: 60vh;
		    margin-top: 70px;
	}
	.teaser_copy {
    left: 10.0%;
    top: 2%;
    width: 62px;
}
	.teaser_img1 {
    left: 28%;
    top: 0%;
    width: 42px;
}
	.teaser_img4 {
    left: auto;
    top: 1.5%;
    right: -1%;
    width: 84px;
}
	.teaser_img2 {
    left: -2%;
    top: 73%;
    width: 55px;
}
	.teaser_img3 {
    left: 18%;
    top: 84%;
    width: 90px;
}
	.teaser_img5 {
    right: -1%;
    top: 64%;
    width: 60px;
}
	.teaser_img6 {
    right: 7.5%;
    bottom: -2%;
    width: 120px;
    aspect-ratio: 1;
}
	.product_name h3,.product_name_en{
		text-align: center;
	}
	.product_packages{
		justify-content: center;
		position: relative;
		top:-7px;
	}
	.product_arrow {
    position: relative;
    right: auto;
    top: 0%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
		transform: translate(-50%,0) !important;

}
	.table-wrap {
  width: 100%;
  overflow-x: auto; /* 横スクロール */
}
	.table-style2 table,.table-style2 tr,.table-style2 tbody{
		display: block;
	}
	.table-style2 th,.table-style2 td{
	padding: 11px 10px;
		width: 100%;
display: block;
}
	
	.shop_list {
		display: block;
		border-top: 1px solid #ccc;
	}

	.shop_column {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
	}

	.shop_heading {
		padding: 10px 13px;
		border-bottom: 1px solid #ccc;
	}

	.shop_names {
		padding: 10px;
	}

	.shop_names p {
		margin-bottom: 5px;
	}
	.item-618 #t4-main-body .t4-section-inner {
		padding: 0 5%;
	}
	.faq_outer{
		margin-bottom: 135px;
	}
	.faq-table{
	width: 700px;
	  border-collapse: collapse; 
	
}
	.faq-table2{
		width: 100%;
	}
	.faq_btn {
    top: 43px;
    left: auto;
    right: -10px;
    width: 90px;
    height:90px;
}
	.list_3clm li{
	width: 100%;
}
	.item-257 .t4-col{
		padding: 20px;
		margin-top: 10px;
	}
	.item-257 .sidebar-r{
		margin-bottom: 135px;
	}
	.nutrition-nav{
		margin-bottom: 5rem;
		margin-top: 40px;
		width: 100%;
	}
	.nutrition_content {
    position: relative;
    left: auto;
    top: 100%;
    z-index: 2;
    text-align: center;
}
	.nutrition{
		background-image: none;
		margin-top: 2rem;
	}
	.nutrition_inner{
		height: auto;
	}
	.nutrition_content .circle_btn{
		margin: auto;
	}
	.nutrition-title::before{
		height: 33px;
	}
	.nutrition-title span{
		font-size: 13px;
		padding: 0 10px;
	}
	.product_section {
    margin: 0 auto;
    padding: 50px 20px 50px;
    background: #fff;
    border-radius: 70px;
}
	.product_grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;
}
	.company{
		margin-bottom: 115px;
	}
	.company_grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    margin-top: 25px;
		width: 100%;
}
	.company_lead p{
		font-size: 14px;
	}
	.company_card_text h3{
		font-size: 18px;
	}
	.company_card_text p{
		font-size: 13px;
	}
	.company_section {
    padding: 70px 0px 70px;
}
	.company_lead {
    margin-top: 25px;
}
	.product_heading > span{
		margin-top: 5px;
	}
	.news_section {
    padding: 40px 20px 40px;
    background: #f7f5eb;
}
	.news_scroll {
    position: relative;
    margin-top: 35px;
    height: 280px;
    padding-right: 0px;
}
	.footer_txt15{
	font-size: 14px;
}
	.t4-footer .t4-section-inner {
    overflow: visible;
}
	.site_footer {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: auto;
    padding-bottom: 0;
    overflow: visible;
    background: transparent;
}
	.footer_red_bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    transform: none;
    overflow: hidden;
    background: none;
    border-radius: 0 !important;
}
	.footer_red_bg::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 197.9%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--primary);
}
	.footer_red_bg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 13.562vw;
    bottom: 0;
    background: var(--primary);
}
	.footer_child,
	body.item-142 .footer_child {
    display: none;
}
	.footer_inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    box-sizing: border-box;
    width: calc(375 * var(--hfx-mk));
    max-width: 100%;
    margin: 0 auto;
    padding: calc(58.7 * var(--hfx-mk)) calc(40 * var(--hfx-mk)) 0;
    color: #fff;
}
	.footer_company {
    display: contents;
}
	.footer_nav {
    order: 1;
    display: block;
    grid-template-columns: none;
    margin: 0 calc(3.6 * var(--hfx-mk)) 0 calc(4.1 * var(--hfx-mk));
    padding: 0;
}
	.footer_nav ul{
		padding-left: 10px;
	}
	.footer_nav_col {
    position: relative;
}
/*
	.footer_nav_col--2 ul,
	.footer_nav_col--3 ul,
*/
	.footer_nav_col--4 .footer_nav_head {
    display: none;
}
	.footer_nav_col--3 ul::before {
    display: none;
}
	.footer_nav_col--4 {
    margin-top: 0;
}
	.footer_nav_col--4 ul {
    display: block;
    margin: 0;
    padding: 0 0 calc(9 * var(--hfx-mk));
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
	.footer_nav_col--2{
		margin-top: 17px;
		border-top: 1px solid rgba(255, 255, 255, 0.45);
	}
	.footer_nav_head,
	.footer_nav_col--4 li:nth-child(1) {
    display: flex;
    align-items: center;
    height: calc(44.4 * var(--hfx-mk));
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    font-size: calc(13 * var(--hfx-mk));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.08em;
}
	.footer_nav_col--1 .footer_nav_head {
    padding-top: calc(5.4 * var(--hfx-mk));
}
	.footer_nav a {
    font-size: inherit;
    letter-spacing: inherit;
}
	.footer_nav_col--4 li:nth-child(n+2) {
    display: flex;
    align-items: center;
    order: 0;
    height: calc(30.8 * var(--hfx-mk));
    margin: 0;
    font-size: calc(10.2 * var(--hfx-mk));
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
	.footer_nav_col--4 li:nth-child(2) {
    margin-top: calc(7.9 * var(--hfx-mk));
}
	.footer_buttons {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(9.1 * var(--hfx-mk));
    margin: calc(28.1 * var(--hfx-mk)) 0 0 calc(0.5 * var(--hfx-mk));
}
	.footer_btn {
    box-sizing: border-box;
    width: calc(193 * var(--hfx-mk));
    min-width: 0;
    max-width: none;
    height: calc(35.5 * var(--hfx-mk));
    padding: 0 calc(27.4 * var(--hfx-mk)) 0 calc(52 * var(--hfx-mk));
    justify-content: flex-start;
    border-radius: calc(17.75 * var(--hfx-mk));
    font-size: calc(11.5 * var(--hfx-mk));
    font-weight: 400;
    letter-spacing: 0.05em;
}
	.footer_btn span {
    flex: 0 1 auto;
    text-align: left;
}
	.footer_btn_sp {
    display: none;
}
	.footer_arrow {
    width: calc(19.3 * var(--hfx-mk));
    height: calc(9 * var(--hfx-mk));
    margin-left: auto;
}
	.footer_arrow::before {
    bottom: calc(4 * var(--hfx-mk));
    width: calc(19.3 * var(--hfx-mk));
    height: 1px;
}
	.footer_arrow::after {
    bottom: calc(4 * var(--hfx-mk));
    width: calc(7 * var(--hfx-mk));
    height: 1px;
}
	.footer_logo {
    display: block;
    order: 3;
    width: calc(179.4 * var(--hfx-mk));
    max-width: 100%;
    margin: calc(42.6 * var(--hfx-mk)) 0 0;
}
	.footer_address {
    order: 4;
    margin: calc(15 * var(--hfx-mk)) 0 0;
    padding-left: calc(5.5 * var(--hfx-mk));
    text-align: left;
}
	.footer_address p {
    display: block;
    margin: 0;
    font-size: calc(10.7 * var(--hfx-mk));
    line-height: calc(17.25 * var(--hfx-mk));
    font-weight: 400;
    letter-spacing: 0.06em;
}
	.footer_address p + p::before {
    content: none;
}
	.copyright{
	box-sizing: border-box;
	width: calc(375 * var(--hfx-mk));
	max-width: 100%;
	position: relative;
	bottom: auto;
	left: auto;
	transform: none;
	margin: 0 auto;
	padding: calc(24.3 * var(--hfx-mk)) calc(20 * var(--hfx-mk)) calc(51.6 * var(--hfx-mk)) calc(45.5 * var(--hfx-mk));
	z-index: 2;
}
	.copyright p{
		margin: 0;
		font-size: calc(10.5 * var(--hfx-mk));
		line-height: 1.4;
		letter-spacing: 0.01em;
		text-align: left !important;
	}
	.copyright br.pchidden{
		display: none !important;
	}
/*	ハマダの栄養菓子*/
	
	.about_teaser{
		padding-top: 94px;
		background: linear-gradient(#fff 0 94px, #cca578 94px);
	}
	.about_teaser .swiper-slide img{
		border-radius: 0 0 24.53% 24.53% / 0 0 39.83% 39.83%;
	}
	.nutrition_intro_title {
    margin: 0 0 25px;
	
}
	.about_teaser_copy{
		width: auto;
		margin-top: 0;
		top: calc(94px + 22.92vw);
	}
	.about_teaser_copy img{
		width: 39.47vw;
		max-width: none;
	}
	.item-613 #t4-slideshow::after{
		 content: '';
  display: inline-block;
  height: 94px;
		position: absolute;
		width: 100%;
		background-color: #fff;
			top:0;
	}
	.nutrition_intro_text p {
    margin: 0 0 5px;
}
	.nutrition_intro_text{
		font-size: 15px;
	}
	.nutrition_loop {
    position: relative;
    left: 0;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
}
	.nutrition_loop_item {
    flex-shrink: 0;
    height: 90px;
    padding: 0;
    margin-right: 46px;
}
	.nutrition_loop_track { animation-duration: 29s; }
	.nutrition_loop_item[data-sweet="01"] { width: 88px; }
	.nutrition_loop_item[data-sweet="02"] { width: 90px; }
	.nutrition_loop_item[data-sweet="03"] { width: 89px; }
	.nutrition_loop_item[data-sweet="04"] { width: 87px; }
	.nutrition_loop_item[data-sweet="05"] { width: 89px; }
	.nutrition_loop_item[data-sweet="06"] { width: 90px; }
	.hfx-loop .nutrition_loop_item img { width: 115px; }
	.nutrition_intro{
		min-height: 100px;
	}
	.promise_inner {
    padding: 70px 30px 110px;
    background: #f7f6ed;
    border-radius: 80px 80px 0 0;
}
	.promise_slide {
    flex-direction: column;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 30px;
    width: 100%;
}
	.promise_visual{
		width: min(100%, 292px);
	}
	.promise_text{
		width: 100%;
		max-width: none;
	}
	.promise_circle{
		width: 90%;
	}
	.promise_initial{
		width: 100px;
	}
	.promise_text h3{
		font-size: 26px;
	}
	.promise_bottom_text{
		font-size: 17px;
	}
	.promise_bottom{
		margin-top: 25px;
	}
	.promise_nvp {
    margin-top: 20px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
	.promise_label{
		font-size: 16px;
	}
	.promise_label{
		font-size: 24ps;
	}
	
	/* =========================================
   PRODUCT TAB - SP
   PC用CSSの最後に追加
========================================= */

  /* -----------------------------
     タブ全体
  ----------------------------- */

  [data-rlta-id="1"] [data-rlta-element="button-list"] {
    display: block !important;

    width: 100% !important;

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

    overflow: visible !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;
    height: 80px !important;

    margin: 0 0 32px !important;
    padding: 15px 20px !important;

    box-sizing: border-box !important;

    background: #fff !important;

    border: 2px solid #e60020 !important;
    border-radius: 15px !important;

    color: #333 !important;

    overflow: visible !important;
  }


  /* タブ文字 */

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

    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;

    text-align: center !important;

    color: #333 !important;
  }


  /* -----------------------------
     全タブの下三角
  ----------------------------- */

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

    position: absolute;

    left: 50%;
    bottom: -20px;

    width: 0;
    height: 0;

    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
    border-top: 20px solid #e60020;

    transform: translateX(-50%);

    z-index: 2;
  }


  /* =====================================
     1グループ目
     気になる栄養素を補給
  ===================================== */

  #rlta-uehasu {
    margin-bottom: 105px !important;
  }


  /* 上の赤い囲み線 */

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

    position: absolute;

    left: 0;
    top: -65px;

    width: 100%;
    height: 27px;

    box-sizing: border-box;

    border-top: 1px solid #e60020;
    border-left: 1px solid #e60020;
    border-right: 1px solid #e60020;

    border-radius: 12px 12px 0 0;

    pointer-events: none;
  }


  /* 見出し文字 */

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

    position: absolute;

    left: 50%;
    top: -76px;

    padding: 0 18px;

    background: #f7f5eb;

    color: #e60020;

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

    letter-spacing: .04em;

    white-space: nowrap;

    transform: translateX(-50%);

    z-index: 3;
  }


  /* =====================================
     2グループ目
     バランスよく栄養を摂りたい方には
  ===================================== */

  #rlta-baransupawa-biggu-xiang::before {
    content: "";

    position: absolute;

    left: 0;
    top: -80px;

    width: 100%;
    height: 47px;

    box-sizing: border-box;

    border-top: 1px solid #e60020;
    border-left: 1px solid #e60020;
    border-right: 1px solid #e60020;

    border-radius: 12px 12px 0 0;

    pointer-events: none;
  }


  #rlta-baransupawa-biggu-xiang
  [data-rlta-element="heading"]::before {
    content: "バランスよく栄養を摂りたい方には";

    position: absolute;

    left: 50%;
    top: -96px;

    padding: 0 18px;

    background: #f7f5eb;

    color: #e60020;

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

    letter-spacing: .04em;

    white-space: nowrap;

    transform: translateX(-50%);

    z-index: 3;
  }


  /* -----------------------------
     「その他」の前を広めに空ける
  ----------------------------- */

  #rlta-baransupawa-mini {
    margin-bottom: 130px !important;
  }


  /* 最後は余白なし */

  #rlta-sono-ta {
    margin-bottom: 0 !important;
  }


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

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


  /* Regular Labsの横スクロールUI */
  [data-rlta-id="1"] [data-rlta-element="button-scroller"] {
    display: none !important;
  }

.product-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 28px;
    border-bottom: 1px solid #333;
	margin-top: 2.3rem;
}
	.product-category-tags li {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    height: 35px;
    padding: 0 12px;
    border-radius: 999px;
    background: #f2ad43;
    color: #fff;
    font-size: 10px;
	}
	.product-category-intro {
    margin-top: 0;
    color: #333;
    margin-bottom: 2rem;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: .12em;
}
	    .product_item_badge {
        top: 10px;
        right: 10px;
        width: 35px !important;
        height: 35px !important;
    }
	.mod-articlesnews-horizontal{
		gap:0.5rem;
		grid-template-columns: 1fr 1fr;
	}
	    .product_item_img {
/*        height: 180px;*/
			height: auto;
    }
	.product_item_bottom {
        min-height: 50px;
        padding: 12px 10px;
    }
	.product_item_img > img:first-child {
        bottom: 0px;
        width: 100%;
        height: 100%;
    }
	.product_item_arrow{
	    position: relative;
    width: 5px;
    height: 15px;
    margin-left: 10px ;
}
	.product_item_arrow::before, .product_item_arrow::after {

    width: 12px;
    height: 2px;
}
	.product_item_arrow::before {
    top: 7px;
    transform: rotate(-45deg);
}
	.product_item_arrow::after {
    bottom: 6px;
    transform: rotate(45deg);
}
	.product_tab_top{
		margin-top: 0px;
	}
	#rlta-baransupawabiggu-xiang::before{
		width: 100%;
	}
	#rlta-baransupawabiggu-xiang [data-rlta-element="heading"]::before {
    content: "バランスよく栄養を摂りたい方には";
    position: absolute;
    left: calc(50% + 12px);
    top: -67px;
    padding: 0 20px;
    background: var(--tab-bg);
    color: var(--tab-red);
    font-size: 15px;
	}
	[data-rlta-id="1"] [data-rlta-element="button"]::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -15px;
        width: 0;
        height: 0;
        border-left: 22px solid transparent;
        border-right: 22px solid transparent;
        border-top: 15px solid #e60020;
        transform: translateX(-50%);
        z-index: 2;
    }
	[data-rlta-element=container][data-rlta-state=ready][data-rlta-theme=neutral][data-rlta-type=accordions]>[data-rlta-element=panel]{
		margin-bottom: 3rem;
	}
	.product_detail{
		padding: 20px;
		margin-top: 65px;
		margin-bottom: 135px;
	}
	.product_detail_top {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}
	.product_detail_title {
    margin: 0 0 20px;
    font-size: 24px;
}
	.product_series {
    margin-top: 35px;
    padding: 22px 20px;
}
	.product_allergy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    margin: 45px auto 0;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}
	.product_allergy_title{
		text-align: center;
	}
	.product_allergy_items {
    display: flex;
    align-items: flex-start;
    gap: 5px;
	margin-bottom: 10px;
    /* justify-content: center; */
}
	.product_allergy_item {
    width: 20%;
    text-align: center;
}
	.product_allergy_note{
		text-align: left !important
	}
	.product_spec h2{
		text-align: center;
	}
	.product_spec {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 28px 0;
}
	.product_detail_more{
		margin-top: 30px;
		margin-bottom: 30px;
	}
	.history_year{
		font-size: 15px;
	}
	.history_text{
		padding-top: 5px;
	}
	.history_image{
		position: relative;
	}
	.history_2024 .history_media {
    width: 160px;
    top: 125px;
    left: 200px;
}
	.history_1977 .history_media {
    width: 125px;
    top: -5px;
    left: 140px;
}
	.history_1995 .history_media {
    width: 140px;
    top: -3px;
    left: 185px;
}
	.history_1980 .history_media {
    width: 160px;
    top: 5px;
    left: 115px;
}
	.history_1988 .history_media {
    width: 225px;
    top: 12px;
    left: 170px;
    position: relative;
}
	.history_1992 .history_media {
    width: 140px;
    top: -5px;
    left: 190px;
}
	.history_1994 .history_media {
    width: 125px;
    top: -25px;
    left: 225px;
}
	.history_2006 .history_media {
    width: 135px;
    top: 80px;
    left: 215px;
}
	
	.history_2010 .history_media {
    width: 155px;
    top: -5px;
    left: 165px;
}
	.history_2011 .history_media {
    width: 155px;
    top: -5px;
    left: 200px;
}
	.history_2020 .history_media {
    width: 135px;
    top: -3px;
    height: 80px;
    left: 220px;
}
	.history_2025 .history_media{
		top:5px;
	}.history_2026 .history_media {
    width: 220px;
    top: -30px;
    left: 145px;
}
	.history_media{
		position: relative;
		    top: 7px !important;
    left: 0 !important;
	}
	.history_1980 .history_media_multi img:last-child{
		margin-left: 0;
	}
	.history_timeline_last::before{
		height: calc(100% - 145px);
	}
	.history_row {
        grid-template-columns: 15px minmax(0, 1fr);
        gap: 15px;
        padding: 15px 0;
    }
	.history_image-mn{
	top:0px;
}
	.table-style1 th{
		width: 30%;
	}
	.table-style1 th, .table-style1 td{
		font-size: 15px;
	}
	
	.history_section{
		padding-top: 8px;
	}
	.history_section-top{
		padding-top: 58px;
	}
	.faq_category_btn{
		        min-height: 45px;
        padding: 14px 7px 10px;
        border-radius: 45px;
        font-size: 12px;
	}
	 .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: #fff !important;
    color: var(--faq-red) !important;
}
	.faq [data-rlta-element="button"]:hover [data-rlta-element="heading"]::before{
		 color: var(--faq-red) !important;
	}
	.faq [data-rlta-id="1"] [data-rlta-element="heading"]{
		color: var(--faq-red) !important;
		text-align: left !important
	}
	.faq [data-rlta-element="button"]{
		      position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
      height: auto !important;
		   min-height: 80px !important;
        margin: 0 0 0px !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 2px solid #e60020 !important;
        border-radius: 15px !important;
      color: var(--faq-red) !important;
        overflow: visible !important;
	}
	   .faq  [data-rlta-id="1"] [data-rlta-element="button"],.faq [data-rlta-element="button"][data-rlta-state="closed"] {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start!important;
        width: 100% !important;
        height: auto !important;
		   min-height: 80px !important;
        margin: 0 0 0px !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
        background: #fff !important;
        border: 2px solid #e60020 !important;
        border-radius: 15px !important;
      color: var(--faq-red) !important;
        overflow: visible !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: 16px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
}
	.faq [data-rlta-element="panel-content"] > p{
		font-size: 15px;
	}
	.faq [data-rlta-element="panel-content"] {
    position: relative;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    column-gap: 0px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0px 20px !important;
    border: 0 !important;
    background: transparent !important;
}
	.product-category-title {
    font-size: 22px;
    white-space: wrap;
		width: 100%;
}
/*
	.ul2clm li{
	width: 50%;
}
*/
	.scroll-table{
		overflow-x: auto;
	}
	.scroll-table table{
		min-width: 650px;
	}
	.scroll-table th,.scroll-table td{
		padding: 10px;
		font-size: 15px !important;
	}
	.scroll-table th:first-child{
		width: 50px;
	}
	.scroll-table th{
		white-space: nowrap;
	}
	.scroll-table th:nth-child(2){
		width: 50%;
	}
	
	.pr_2clm_inner{
	width: 100%;
}
	.shop_3clm_inner{
	width:100%;
}
	/* 安心安全の取り組み > アレルギーアイコン */
.product_allergy_items.safety-allergie .product_allergy_item {
        width: 18%;
}
	.c-offcanvas.hfx-oc *{
		color: #fff!important
	}
	.c-offcanvas.hfx-oc input{
		color: #333!important
	}



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

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

	.purpose_container {
		width: calc(100% - 40px);
	}

	.purpose_title {
		font-size: 26px;
		line-height: 1.6;
	}

	.purpose_line {
		margin-top: 14px;
		margin-bottom: 20px;
	}


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

	.purpose_row_top {
		display: flex;
		flex-direction: column;
		gap: 30px;
	}

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


	/* -------------------------
	   CHALLENGE
	------------------------- */

	.purpose_row_challenge {
		display: flex;
		flex-direction: column-reverse;

		gap: 30px;
		margin-top: 60px;
	}

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

	.purpose_challenge_content {
		padding-top: 0;
	}


	/* -------------------------
	   BUTTON
	------------------------- */

	.purpose_button_wrap {
		margin-top: 50px;
	}

	.purpose_button {
		width: min(100%, 315px);
	}


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

	.logo_section {
		padding: 25px 0 110px;
	}

	.logo_intro {
		width: calc(100% - 0px);
		margin-bottom: 35px;

		text-align: left;
	}

	.logo_intro p + p {
		margin-top: 8px;
	}


	/* -------------------------
	   WHITE BOX
	------------------------- */

	.logo_box {
		width: calc(100% - 0px);

		padding:
			55px
			25px
			60px;
	}


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

	.logo_row {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

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


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

	.logo_visual {
		justify-content: center;

		padding: 0;
		margin-bottom: 45px;
	}

	.logo_visual img {
		width: min(75%, 235px);
	}

	.logo_visual_brand img {
		width: min(60%, 185px);
		margin-left: 0;
	}


	/* -------------------------
	   TEXT
	------------------------- */

	.logo_content .purpose_title {
		font-size: 26px;
	}
	.safety_section {
		width: calc(100% - 30px);
		padding: 50px 0 110px;
	}


	/* -------------------------
	   TITLE
	------------------------- */

	.safety_line {
		margin-bottom: 28px;
	}


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

	.safety_row {
		display: flex;
		flex-direction: column;
		gap: 25px;
	}

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


	/* -------------------------
	   TEXT
	------------------------- */

	.safety_text {
		line-height: 2;
	}


	/* -------------------------
	   FSSC
	------------------------- */

	.safety_certification {
		width: 100%;
		padding: 25px 20px;
	}

	.safety_certification_inner {
		min-height: auto;
	}

	.safety_fssc {
		width: 90px;
	}


	/* -------------------------
	   FACTORY
	------------------------- */

	.safety_image {
		width: 100%;
	}


	/* -------------------------
	   ALLERGY
	------------------------- */

	.allergy_block {
		margin-top: 75px;
	}

	.allergy_panel {
		width: 100%;
		padding: 20px 15px 25px;
	}

	.allergy_icons {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px 10px;
	}

	.allergy_item img {
		width: 58px;
	}
	.history_section {
		padding-bottom: 60px;
	}

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


	/* 見出し */

	.history_heading {
		margin-bottom: 30px;

		padding: 15px 15px;

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

		text-align: left;
	}


	/* 左右 → 縦並び */

	.history_body {
		display: block;
	}


	/* 説明文 */

	.history_intro {
		margin-bottom: 45px;

		line-height: 2;
	}


	/* タイムライン */

	.history_timeline {
		width: 100%;
	}


	/* アイテム */

	.history_item {
		padding-left: 27px;
		padding-bottom: 40px;
	}


	/* 縦線 */

	.history_timeline::before {
		left: 5px;
	}


	/* 丸 */

	.history_item::before {
		left: 0;

		width: 11px;
		height: 11px;
	}


	/* 内容 */

	.history_item_inner {
		grid-template-columns: 1fr;
		gap: 18px;
	}


	/* 年号 */

	.history_year {
		font-size: 18px;
		margin-bottom: 8px;
	}


	/* テキスト */

	.history_text {
		font-size: 13px;
		line-height: 1.9;
	}


	/* 画像 */

	.history_media {
		justify-content: flex-start;
	}

	.history_media img {
		width: auto;
		max-width: min(180px, 70%);
		max-height: 160px;
	}


	.history_media_small img {
		max-width: 75px;
	}


	.history_media_multi {
		align-items: flex-start;
	}


	.history_media_horizontal {
		display: flex;
		justify-content: flex-start;
		gap: 12px;
	}

	.history_media_horizontal img {
		width: auto;
		max-width: 100px;
		max-height: 110px;
	}

	.c-offcanvas.hfx-oc .close.js-offcanvas-close{
		height: 46px !important;
        width: 46px !important;
        top: 23px !important;
        right: 13px !important;
	}
	.c-offcanvas.hfx-oc .close.js-offcanvas-close::before, .c-offcanvas.hfx-oc .close.js-offcanvas-close::after{
		width: 25px !important;
	}
	nav .item-658{
		display: none !important;
	}
	.c-offcanvas.hfx-oc .navbar-nav{
		padding-top: 85px !important;
	}
	.ft-0{
		border-bottom: 0px;
		padding-bottom: 0;
		margin-bottom: 0 !important;
		height: 30px;
        margin-top: 10px;
	}
}





/* =========================================
   SMALL SMARTPHONE
========================================= */

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

	.purpose_container {
		width: calc(100% - 0px);
	}

	.purpose_title br {
		display: none;
	}

	.logo_box {
		width: calc(100% - 0px);
		padding-left: 20px;
		padding-right: 20px;
	}

}



/* =========================================
   SMALL SMARTPHONE
========================================= */

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

	.safety_certification_inner {
		flex-direction: column;
		text-align: center;
	}

	.allergy_icons {
		grid-template-columns: repeat(3, 1fr);
	}

	.allergy_item img {
		width: 62px;
	}

}

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

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

	.history_heading {
		font-size: 23px;
	}

	.history_item {
		padding-bottom: 35px;
	}

}