@charset "utf-8";

/* ==========================================================
 body
========================================================== */

:root {
    --win-l: calc(100vw * 1280 / 1400);
    --win-m: calc(100vw * 900 / 1400);
    --win-s: calc(100vw * 620 / 1400);
    --f-family-ja: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
    --f-family-en: "Outfit", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  
	/*fotsize変数 （1400px時のサイズを基準 , 最大値を指定） */
	--f-size-18: min(calc(100vw * 18 / 1400) , 20px);
    --f-size-17: min(calc(100vw * 17 / 1400) , 19px);
    --f-size-16: min(calc(100vw * 16 / 1400) , 18px);
    --f-size-15: min(calc(100vw * 15 / 1400) , 17px);
    --f-size-14: min(calc(100vw * 14 / 1400) , 16px);
    --f-size-13: min(calc(100vw * 13 / 1400) , 15px);
    --f-size-12: min(calc(100vw * 12 / 1400) , 14px);
    --f-size-11: min(calc(100vw * 11 / 1400) , 13px);
    --f-size-10: min(calc(100vw * 10 / 1400) , 12px);

    --f-weight-bold: 700;
    --f-weight-db: 600;
    --color-wh: #ffffff;
    --color-gy: #151616;
    --color-be: #fbfaf5;
    --color-lgy: #eeeeee;
	--border-s: #eeeeee 1px solid;
	--border-l: #151616 3px solid;
	--radius: 10px;
	--scroll-gap: 20px;
}

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	text-align: justify;
	background-color: var(--color-wh);
	font-size: var(--f-size-18);
	font-weight: 500;
	line-height: 1.8;
	color: var(--color-gy);
	overflow: hidden;
	overflow-x: hidden;
	max-width: 100%;
}

@media screen and (max-width: 799px) {
	.only-pc, .no-sp
	{ display: none !important; }
	.only-sp, .no-pc
	{ display: block !important; }
	img.only-sp, img.no-pc
	{ display: inline-block !important; }
}

/* nav-path
----------------------------------------------------*/
.nav-path {
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	max-width: calc(100vw * 1260 / 1400);
	margin: 30px auto 50px;
}
.nav-path .list {
	display: flex;
    justify-content: flex-start;
}
.nav-path .list .item::before {
	margin: 0 8px;
}
.nav-path .list .item + .item::before {
	content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-top: 1px solid var(--color-gy);
    border-right: 1px solid var(--color-gy);
    transform: rotate(45deg);
	vertical-align: middle;
}
/* slide（共通）
----------------------------------------------------*/
.slide {
  display: flex;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.slide > li {
  flex-shrink: 0;
}

/* トップ */
#home .slide.is-ready {
  animation: scroll 30s linear infinite;
}

/* サステナビリティ */
#sec-sustaina .slide.is-ready {
  animation: scroll-02 40s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-50% - var(--scroll-gap) / 2));
  }
}

@keyframes scroll-02 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
/* pagenation
----------------------------------------------------*/
.page-numbers {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
ul.page-numbers {
	margin-top: 70px;
}
a.page-numbers ,
span.page-numbers {
	background-color: var(--color-be);
	color: var(--color-gy);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: var(--f-weight-bold);
	line-height: 1;
}
.page-numbers span.current {
	background-color: var(--color-wh);
	color: var(--color-lgy);
	border: var(--border-s);
}
.page-numbers span.arrow {
	width: 9px;
	height: 9px;
	rotate: -90deg;
}
.prev span.arrow {
	rotate: 90deg;
}
/* ==========================================================
 header / footer
========================================================== */
/* common
----------------------------------------------------*/
.header-sp {
	display: none;
}
.header-pc, 
.footer {
	width: 100%;
	line-height: 1;
}
.nav-sub > ul ,
.nav-main > ul  {
	display: flex;
	align-items: center;
}
.box-sns {
	display: flex;
	align-items: center;
	justify-content: center;
	border-left: var(--border-s);
	padding: 0 6%;
}
.box-sns img {
	width: min(calc(100vw * 15 / 1400), 25px);
	height: min(calc(100vw * 15 / 1400), 25px);
}
.box-sns .ico-x img {
	width: min(calc(100vw * 13 / 1400), 23px);
	height: min(calc(100vw * 13 / 1400), 23px);
}
.box-sns .ico-line img {
	width: min(calc(100vw * 18 / 1400), 30px);
	height: auto;
}
.box-sns .ico-yt img {
	width: min(calc(100vw * 20 / 1400), 33px);
	height: min(calc(100vw * 20 / 1400), 33px);
}
/* header-pc
----------------------------------------------------*/
.header-pc .nav-sub > ul ,
.header-pc .nav-main > ul {
	padding: 0 3%;
	gap: max(2vw , 20px);
}
.header-pc .nav-main > ul {
	justify-content: center;
}
.header-pc .nav-sub > ul {
	justify-content: flex-end;
}
.header-pc .logo ,
.header-sp .logo {
	width: min(15vw , 280px);
	aspect-ratio: 210 / 120;
	height: auto;
	background-color: #fff;
	border-radius: 0 0 10px 10px;
	border: var(--border-s);
	border-top: none;
	margin: 0 15px;
}
.header-pc .logo a {
	display: block;
	padding: 10px;
}
.header-in {
	display: flex;
	height: min(calc(100vw * 120 / 1400), 150px);
}
.header-pc .box-nav > div {
	width: 100%;
	height: 100%;
}
.header-pc .box-nav {
	display: flex;
	align-items: center;
	border-bottom: var(--border-s);
	width: 100%;
}
.header-pc .nav-main ,
.header-pc .nav-sub  {
	height: 50%;
}
.header-pc .nav-sub {
	display: flex;
	justify-content: flex-end;
	border-bottom: var(--border-s);
	font-size: min(0.8vw, 18px);
}

.header-pc .nav-main {
	justify-content: space-between;
	font-size: min(1vw, 20px);
}
.header-pc .nav-main > ul {
	height: 100%;
}
.header-pc .nav-others {
	display: flex;
	width: clamp(120px, 30vw, 700px);
	text-align: center;
	line-height: 1.5;
	font-size: min(calc(100vw * 12 / 1400), 18px);
	height: 100%;
}
.header-pc .nav-others > a {
	display: block;
	width: 50%;
	border-left: var(--border-s);
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-pc .nav-others a span {
	display: block;
}
.header-pc .nav-others a span:before {
	content: '';
	display: block;
	width: calc(100vw * 20 / 1400);
	height: calc(100vw * 18 / 1400);
	margin: 0 auto calc(100vw * 10 / 1400);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.header-pc .nav-others .link-media span:before {
	background-image: url(../img/ico_media.svg);
}
.header-pc .nav-others .link-b2b span:before {
	background-image: url(../img/ico_b2b.svg);
}
.overlay {
	display: none;
}

html:has(body.is-open) {
	overflow: hidden;
}
body.is-open {
	overflow: hidden;
	overscroll-behavior: none;
}
	
/* footer
----------------------------------------------------*/
.footer {
	padding-top: calc(100vw * 140 / 1400);
}
.footer ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(100vw * 20 / 1400);
}
.footer .logo {
	width: min(calc(100vw * 240 / 1400), 300px);
	margin: 0 auto calc(100vw * 10 / 1400);
}
.footer .box-nav {
	height: 160px;
	border-top: var(--border-s);
}
.footer .nav-main , 
.footer .nav-sub {
	height: 50%;
	padding-left: calc(100vw * 70 / 1400);
}
.footer .nav-main {
	position: relative;
	display: flex;
	border-bottom: var(--border-s);
	font-size: min(calc(100vw * 12 / 1400), 18px);
}
.footer .nav-main .link-top::after {
	position: absolute;
	content: "";
	display: block;
	background: url(../img/ico_arrow_02.svg) no-repeat;
	right: calc(100vw * 70 / 1400);
	top: 50%;
	transform: translateY(-50%);
	width: calc(100vw * 12 / 1400);
	height: calc(100vw * 12 / 1400);
	background-size: contain;
}
.footer .nav-sub {
	display: flex;
	justify-content: space-between;
	font-size: min(0.8vw, 16px)
}
.footer .nav-sub ul:first-of-type {
	padding-right: calc(100vw * 30 / 1400);
}
.footer .nav-sub .box-sns {
	gap: calc(100vw * 20 / 1400);
	padding-left: calc(100vw * 40 / 1400);
	padding-right: calc(100vw * 70 / 1400);
}
.footer .copy {
	font-size: var(--f-size-11);
	display: flex;
	align-items: center;
	letter-spacing: normal;
	margin-right: calc(100vw * 70 / 1400);
}


/* ==========================================================
 min-width: 1600px
========================================================== */
@media screen and (min-width: 1600px) {
	:root {
		--win-l: 85vw;
		--win-m: 50vw;
	}
	#about inner 
	#safety inner 
	#healthy inner {
		max-width: 	70vw;
	}
	/* .header-pc .nav-sub > ul {
		padding: 0 3%;
	} */
	.header-pc .nav-main > ul {
		justify-content: space-between;
		padding: 0 6%;
	}
}
/* ==========================================================
 max-width: 800px
========================================================== */
@media screen and (max-width: 800px) {
	:root {
		--win-l: auto;
		--win-m: auto;
		--win-s: auto;
		--radius: 5px;
		--scroll-gap: 10px;
	}

	body {
		font-size: 14px;
	}

/* ==========================================================
 header / footer
========================================================== */
/* header
----------------------------------------------------*/
	.header-pc {
		display: none;
	}
	.header-sp {
		position: relative;
		display: block;
		justify-content: flex-end;
	}
	.header-sp .logo {
		width: 190px;
		margin: 0 auto;
		border: none;
	}
	header-sp .logo a {
		padding: 5px;
	}
	.nav-btn {
		position: relative;
		width: min(calc(100vw * 50 / 400), 80px);
		height: min(calc(100vw * 50 / 400), 80px);
		margin-right: 15px;
	}
	.nav-btn span {
		display: block;
        position: absolute;
        background-color: var(--color-gy);
        width: 50%;
        height: 1px;
        transform: translate(-50%, -50%);
        bottom: 50%;
        left: 50%;
	}
	.nav-btn span::before, 
	.nav-btn span::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: var(--color-gy);
		left: 0;
	}
	.nav-btn span:before {
		transform: translateY(-8px);
	}
	.nav-btn span:after {
		transform: translateY(8px);
	}
	.nav-btn.open-btn {
		position: absolute;
		top: 20px;
		right: 0;
	}
	.header-sp .nav {
		position: fixed;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		right: 0;
		top: 0;
		transform: translateX(100vw);
		background-color: var(--color-wh);
		width: calc(100% - calc(100vw * 20 / 400));
		height: 100svh;
		border-left: var(--border-s);
		padding: calc(100vw * 15 / 400) calc(100vw * 30 / 400);
		padding-bottom: calc(100vw * 50 / 400);
		font-size: min(calc(100vw * 14 / 400), 20px);
		line-height: 1;
		transition: all 0.3s ease-in-out;
		z-index: 50;
	}
	.header-sp .nav.is-open {
		transform: translateX(0);
	}
	.header-sp .nav .main {
		border-top: var(--border-s);
		border-bottom: var(--border-s);
		margin: 50px 0 80px;
	}
	.header-sp .nav .main li {
		position: relative;
	}
	.header-sp .nav .main li a ,
	.header-sp .nav .main .list-in > p {
		display: block;
		padding: min(calc(100vw * 20 / 400), 30px) 0;
	}
	.header-sp .nav .main li:not(.list-in.aco)::after ,
	.header-sp .nav .main li.list-in > p::after {
		content: '';
		position: absolute;
		right: calc(100vw * 5 / 400);
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
		display: inline-block;
		width: min(calc(100vw * 6 / 400), 10px);
        height: min(calc(100vw * 6 / 400), 10px);
        border-top: 1px solid var(--color-gy);
        border-right: 1px solid var(--color-gy);
		vertical-align: middle;
	}
	.header-sp .nav .main li.list-in.aco > p {
		position: relative;
	}
	.header-sp .nav .main li.list-in.aco.is-open > p {
		border-bottom: var(--border-s);
	}
	.header-sp .nav .main li.list-in.aco.is-open > p::after {
		transform: translateY(-50%) rotate(-45deg);
	}
	.header-sp .nav .main li + li {
		border-top: var(--border-s);
	}
	.header-sp .nav .main .list-in > ul {
		display: none;
		margin-left: calc(100vw * 30 / 400);
	}
	.header-sp .nav .sub {
		font-size: min(calc(100vw * 12 / 400), 16px);
		display: flex;
		flex-direction: column;
		gap: 25px;
		margin-bottom: 80px;
	}
	.header-sp .sub .link-ex::after {
		width: min(calc(100vw * 10 / 400), 15px);
		height: min(calc(100vw * 10 / 400), 15px);
	}
	.header-sp .nav .close-btn {
		margin-right: 0;
		width: 50px;
		height: 50px;
		border: var(--border-s);
		border-radius: 50%;
	}
	.header-sp .nav .close-btn span::before ,
	.header-sp .nav .close-btn span::after {
		width: 20px;
		transform: translateX(50%) rotate(45deg);
		left: auto;
		right: 50%;
	}
	.header-sp .nav .close-btn span::after {
		transform: translateX(50%) rotate(-45deg);
	}
	.header-sp .nav .close-btn span {
		background-color: transparent;
	}
	.header-sp .nav .wrap {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
	}
	.header-sp .nav .home {
		display: flex;
		align-items: center;
	}
	.header-sp .nav .home::before {
		content: '';
		display: block;
		width: calc(100vw * 14 / 400);
		height: calc(100vw * 16 / 400);
		background-image: url(../img/ico_home.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
		margin-right: calc(100vw * 10 / 400);
	}
	.header-sp .box-sns {
		display: block;
		border: none;
		padding: 0;
		font-size: min(calc(100vw * 10 / 400), 14px);
	}
	.header-sp .box-sns ul {
		display: flex;
		gap: 10px;
		margin-top: 20px;
	}
	.header-sp .box-sns img {
		width: min(calc(100vw * 40 / 400), 50px);
		height: min(calc(100vw * 40 / 400), 50px);
	}
	.overlay.is-open {
		display: block;
		background-color: rgba(245, 245, 245, 0.9);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 40;
	}
/* footer
----------------------------------------------------*/
.footer {
	padding-top: 80px;
}
.footer .box-nav {
	display: none;
}
.footer .logo {
	width: 200px;
}
.footer-in {
	padding-bottom: 20px;
}
.footer .copy {
	text-align: center;
	font-size: 11px;
	margin-right: 0;
}
}