@charset "UTF-8";

/*====================================================================
リセット
====================================================================*/
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
dl,
dd,
dt,
ol{
     margin: 0;
     padding: 0;
}
body {
	min-width: 280px;
}
ul {
     list-style: none;
}
ul, dl, ol {
 	list-style-position: inside;
}
a {
 	color: inherit;
 	text-decoration: none;
}
img {
	height: auto;
	max-width: 100%;
}
.center {
	text-align: center;
}
*{
	box-sizing: border-box;
}
html {
	box-sizing: border-box;
	overflow-x: hidden;
}

/*====================================================================
共通
====================================================================*/
body{
	background: #fedacd;
	color: #333;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 16px;
	line-height: 1.7;
}
span.bold {
	font-weight: bold;
}
span.small {
	font-size: 85%;
}
.pcOnly {
	display: block!important;
}
.spOnly {
	display: none!important;
}
.pcOnly600 {
	display: block!important;
}
.spOnly600 {
	display: none!important;
}
.vertical-text {
	writing-mode: vertical-rl;
}
.underline {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mb10 {
	margin-bottom: 10px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb30 {
	margin-bottom: 30px;
}

/* header
--------------------------------------------------------*/
header {
	width: 100vw;
    min-width: 280px;
	height: 118px;
    display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: fixed;
	z-index: 999;
	transition: all .3s;
}
header nav {
	width: 100%;
	height: 118px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
	align-items: center;
	position: relative;
	background: rgba(254, 218, 205, 0);
}
header.scrolled nav {
    background: rgba(254, 218, 205, 0.8);
}
header nav::after {
	height: 20px;
    content: "";
    position: absolute;
    top: 118px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(254, 218, 205, 0), rgba(254, 218, 205, 0));
    pointer-events: none;
}
header.scrolled nav::after {
    background: linear-gradient(to bottom, rgba(254, 218, 205, 0.8), rgba(254, 218, 205, 0));
}
header nav .menu_box {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
    justify-content: space-between;
}
header nav .menu_box h1 {
	white-space: nowrap;
	color: #333;
}
header nav .menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 0.05em;
}
header nav .menu a {
	margin-right: 5px;
	padding: 7px 30px 10px;
	transition: 0.3s;
	font-size: 16px;
	white-space: nowrap;
	height: 58px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	color: #5d3e1a;
}
header .appear {
	display: none;
}
header.HeightMin {
	position: fixed;
	z-index: 999;
	height: 100px;
}
header.HeightMin nav {
	height: 100px;
}
header.HeightMin .appear {
	display: block;
	cursor: pointer;
	margin-left: 10px;
}

/*====================================================================
ハンバーガーメニュー
====================================================================*/
.hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 150;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.hamburger.is-active span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
}
.hamburger.is-active span:nth-child(2) {
    opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-135deg);
}
.hamburger span {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: transform .3s;
}
.hamburger.is-active span {
    background-color: #fff;
}
.hamburger span:nth-child(1) {
    top: 30%;
}
.hamburger span:nth-child(2) {
    top: 60%;
}
.hamburger span:nth-child(3) {
    top: 90%;
}
.drawer {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    width: 100%;
    height: calc(100vh + 10%);
    background-color: #333;
    transition: opacity .3s, visibility .3s;
}
.drawer.is-active {
    visibility: visible;
    opacity: 1;
}
.drawer-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 20px;
	position: relative;
}
.drawer__nav {
	position: absolute;
	top: 60px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
	padding-bottom: 60px;
}
.drawer__list {
    display: flex;
    flex-direction: column;
    /* gap: 50px; */
}
.drawer__item {
	margin-bottom: 20px;
}
.drawer__link {
    color: #ffffff;
}
.drawer__sublist {
    display: none;
	padding-left: 20px;
}
.drawer__sublist .drawer__item {
	padding-left: 20px;
}
.drawer__item.active > .drawer__sublist {
    display: block;
}
.drawer__item.mate {
    padding-left: 20px;
}
.js-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
}
.js-drawer.is-active {
    transform: translateX(0);
}

/*====================================================================
コンテンツ
====================================================================*/

/* contents
----------------------------------*/
main {
	min-height: 100vh;
	padding-top: 118px;
}
@keyframes blurAnimation {
  0% {
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
.blur_content {
	opacity: 0;
	filter: blur(10px);
}
.blur {
	animation: blurAnimation 0.75s linear forwards;
}
.blur.delay1 {
	animation-delay: 0.5s;
}
.blur.delay2 {
	animation-delay: 1s;
}
.blur.delay3 {
	animation-delay: 1.5s;
}
.contents {
	width: 100%;
	padding: 0;
	margin: 0 auto;
	margin-top: -118px; /* ヘッダー分 */
	position: relative;
	z-index: 1;
}
section {
	width: 100%;
	padding: 0;
	text-align: center;
}
section:last-child {
	margin-bottom: 0;
}
#particles-js {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 100vh;
	left: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity 1s ease, top 1s ease;
}

/* mv
----------------------------------*/
#mv {
	width: 100%;
	background-color: #fedacd;
	position: relative;
}
#mv::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
    height: 50px;
    background: linear-gradient(to bottom, rgba(254, 218, 205, 0.8), rgba(254, 218, 205, 0));
    pointer-events: none;
}
.mv_box {
	width: 1600px;
	height: 778px;
	margin: 0 auto;
	position: relative;
	overflow: visible;
}
.mv_box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1600px;
	height: 1480px;
	background-image: url(../img/img_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	filter: blur(10px);
	opacity: 0;
	transition: filter 1s ease-out, opacity 1s ease-out;
}
.mv_box.blur::before {
	filter: blur(0);
	opacity: 1;
}
.mv {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
    justify-content: center;
	position: relative;
	z-index: 1;
}
.mv img:first-child {
	position: absolute;
    left: 248px;
    top: 238px;
}
.mv img:last-child {
    position: absolute;
    right: 152px;
    top: 313px;
}
.tag {
	position: absolute;
	top: 445px;
    left: 300px;
	z-index: 1;
}
.mv img,
.tag img {
	filter: blur(10px);
	opacity: 0;
	transition: filter 1s ease-out, opacity 1s ease-out;
}
.mv img.blur,
.tag img.blur {
	filter: blur(0);
	opacity: 1;
}

/* concept
----------------------------------*/
.concept_box {
	width: 1086px;
	height: 700px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../img/img_bg2.png);
	background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
	z-index: 1;
    position: relative;
}
.concept_box img {
	margin-top: -100px;
}

/* product
----------------------------------*/
.product_box {
	position: relative;
}
.product_box_inner {
	position: relative;
	width: 100%;
	height: auto;
	margin: 160px 0 0 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.product_box_inner img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
}
.product_box_inner img:last-child {
	margin-top: 40px;
	max-width: 202px;
}
.product_box_inner2 {
	position: relative;
	width: 100%;
	max-width: 1280px;
    margin: 0 auto;
}
.product_box_inner2 .portable,
.product_box_inner2 .hydrating,
.product_box_inner2 .guard {
  position: absolute;
}
.portable {
	left: 0;
    top: 0;
    transform: translateY(-100%);
	z-index: -1;
}
.hydrating {
    right: -50px;
    top: -770px;
}
.guard {
    right: 10px;
    bottom: -50px;
}

/* making
----------------------------------*/
#making {
	padding: 40px 0 100px;
	margin: 0 auto;
	background-color: #fff;
}
#making p {
	font-family: 'Noto Sans JP', "Meiryo", sans-serif;
	font-size: 16px;
	color: #5d3e1a;
	text-align: left;
}
#making .making_box {
	margin: 0 auto;
	width: 1200px;
	max-width: 100%;
}
#making .making_box.first .making_box_main .making_box_main_left div:first-child,
#making .making_box.second .making_box_main .making_box_main_right div:first-child,
#making .making_box.third .making_box_main .making_box_main_left div:first-child {
	margin-bottom: 30px;
	text-align: left;
}
#making .making_box.first .making_box_main .making_box_main_left div:nth-child(2),
#making .making_box.second .making_box_main .making_box_main_right div:nth-child(2),
#making .making_box.third .making_box_main .making_box_main_left div:nth-child(2) {
	margin-bottom: 20px;
	text-align: left;
}
#making .making_box_top {
	background-color: #fedacd;
	padding: 20px 70px;
	position: relative;
	text-align: left;
}
#making .making_box .making_box_top .triangle {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 16px solid #fedacd;
    position: absolute;
    bottom: -17px;
    left: 13.5%;
    transform: translateX(-50%);
}
#making .making_box .making_box_main {
	border: #fedacd solid 2px;
	padding: 20px 70px;
	display: flex;
	flex-wrap: nowrap;
}
#making .making_box .making_box_main .making_box_main_left,
#making .making_box .making_box_main .making_box_main_right {
	width: 50%;
}
#making .making_box.first .making_box_main .making_box_main_left,
#making .making_box.second .making_box_main .making_box_main_right,
#making .making_box.third .making_box_main .making_box_main_left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
}
#making .making_box.second .making_box_main .making_box_main_left {
	width: 456px;
}
#making .making_box.second .making_box_main .making_box_main_right {
	flex-grow: 1;
}
#making .making_box .making_box_main .making_box_main_left > div,
#making .making_box .making_box_main .making_box_main_right > div {
	width: 100%;
}
#making .making_box.first .making_box_main .making_box_main_right img,
#making .making_box.second .making_box_main .making_box_main_right {
	margin-left: 20px;
	text-align: left;
}
/* #making .making_box.first .making_box_main .making_box_main_right img {
	max-width: 380px;
} */
#making .line {
	width: 100%;
	text-align: center;
}
#making .line > div {
	background-color: #fedacd;
	width: 2px;
	height: 60px;
	margin: 0 auto;
}
#making .making_box.second .making_box_main {
	padding: 20px;
}
#making .making_box.second .making_box_main .making_box_main_left > div {
	/* position: relative;
	height: 248px; */
}
#making .making_box.second .making_box_main .making_box_main_left > div img:first-child {
	/* max-width: 240px; */
}
#making .making_box.second .making_box_main .making_box_main_left > div img:last-child {
	/* max-width: 240px;
	position: absolute;
	top: 67px;
    left: 216px; */
}
#making .thumbnail {
    transition: opacity 0.1s ease;
}
#making a:hover .thumbnail {
    opacity: 0.7;
}

/* point
----------------------------------*/
#point {
	margin-top: 200px;
	position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
	flex-direction: column;
	z-index: 0;
}
#point::before {
	content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
	opacity: 0.5;
    background-color: white;
    transform: translateX(-50%);
}
#point .point1 img:first-child,
#point .point2 img:first-child,
#point .point3 img:first-child,
#point .point4 img:first-child {
	position: relative;
    left: -47px;
}
#point .point1 img:nth-child(2),
#point .point3 img:nth-child(2) {
	position: relative;
	transform: translateX(-260px);
}
#point .point2 img:nth-child(2),
#point .point4 img:nth-child(2) {
	position: relative;
	transform: translateX(260px);
}
#point .point1,
#point .point2,
#point .point3,
#point .point4 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

/* campaign
----------------------------------*/
#campaign {
	padding: 40px 0;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	background-color: #fedacd;
}
#campaign .campaign_box {
	width: 100%;
	max-width: 820px;
	margin: 0 auto;
	color: #5d3e1a;
	line-height: 1.8;
	background-color: #fff;
	text-align: center;
	border-radius: 15px;
	font-size: 16px;
	border: double 15px #fedacd;
	transition: all .3s;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#campaign .campaign_box img {
	margin-bottom: 10px;
}
#campaign .campaign_link {
	transition: all .5s;
	max-width: 820px;
	display: block;
	padding: 35px 30px 30px 30px;
}
#campaign .campaign_link:hover {
	opacity: .7;
}
#campaign .campaign_box:hover {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-4px);
}
#campaign .campaign_box:active {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

/* j-kakaku
----------------------------------*/
section#j-kakaku {
	background-color: #fff;
	position: relative;
	z-index: 1;
    box-sizing: border-box;
	padding-top: 60px;
}
@media (min-width: 768px) {
    .rettle-1e22rw0 {
        width: 1050px;
        margin-top: 120px;
        padding: 60px 125px;
    }
}
.rettle-1e22rw0 {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: -40px;
	margin-top: 0;
    background-color: #fff;
    border-radius: 20px;
    border: solid 4px #000;
}
.rettle-1o5j2u5 {
    margin-right: auto;
    margin-left: auto;
}
.rettle-4ns9vs.in-view {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
@media (min-width: 768px) {
    .rettle-4ns9vs {
        margin-top: 40px;
		display: flex;
        justify-content: space-between;
    }
}
.rettle-4ns9vs {
    opacity: 0;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    -ms-transform: scale(.6);
    transform: scale(.6);
    -webkit-transition: opacity .3s 0s cubic-bezier(1,-.69,.2,2.03), -webkit-transform .3s 0s cubic-bezier(1,-.69,.2,2.03);
    transition: opacity .3s 0s cubic-bezier(1,-.69,.2,2.03), transform .3s 0s cubic-bezier(1,-.69,.2,2.03);
    margin-right: auto;
    margin-left: auto;
}
.rettle-1tvr4yo {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
}
@media (min-width: 768px) {
    .rettle-10ijm0k {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform .2s cubic-bezier(0,.76,.81,1.47);
        transition: transform .2s cubic-bezier(0,.76,.81,1.47);
    }
}
@media (min-width: 768px) {
    .rettle-10ijm0k:hover {
        transform: scale(1.1);
    }
}
.rettle-10ijm0k {
    display: block;
	width: 375px;
}
@media (min-width: 768px) {
    .rettle-63n08n {
        padding-top: 342px;
    }
}
.rettle-63n08n {
    position: relative;
    width: 100%;
}
@media (min-width: 768px) {
    .rettle-tnobln {
        top: -26px;
        -webkit-transform: translateX(266px);
        -moz-transform: translateX(266px);
        -ms-transform: translateX(266px);
        transform: translate(266px);
        width: 187px;
    }
}
.rettle-tnobln {
    position: absolute;
    left: 49%;
}
@media (min-width: 768px) {
    .rettle-i3i9r8 {
        padding-top: 105px;
        padding-bottom: 105px;
    }
}
.rettle-i3i9r8 {
    width: 100%;
    background-color: #f6be02;
	position: relative;
    top: -155px;
    margin-bottom: -155px;
}
@media (min-width: 768px) {
    .rettle-1um2wn8 {
        padding-top: 18px;
        padding-bottom: 15px;
    }
}
.rettle-1um2wn8 {
    width: 100%;
    background-color: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
}
@media (min-width: 768px) {
    .rettle-6zt70q {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-column-gap: 25px;
        column-gap: 25px;
    }
}
.rettle-6zt70q {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
@media (min-width: 768px) {
    .rettle-1q2z3c0 {
        width: 246px;
    }
}
@media (min-width: 768px) {
    .rettle-1q2z3c0 {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform .2s cubic-bezier(0,.76,.81,1.47);
        transition: transform .2s cubic-bezier(0,.76,.81,1.47);
    }
}
@media (min-width: 768px) {
    .rettle-1q2z3c0:hover {
        transform: scale(1.1);
    }
}
@media (min-width: 768px) {
    .display-sp {
        display: none !important;
    }
}
footer {
	background-color: #fff;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
    top: 40px;
}

/* pagetop
----------------------------------*/
#pagetop {
    position: fixed;
    bottom: 50px;
    right: 30px;
	z-index: 999;
}

/* =========================================================
   レスポンシブ
========================================================= */
@media screen and (max-width: 1600px) {
	.mv_box {
		width: 100%;
	}
	.mv_box::before {
		width: 100%;
	}
	#point .point1 img:last-child, #point .point3 img:last-child {
		position: relative;
		transform: translateX(-230px);
	}
	#point .point2 img:last-child, #point .point4 img:last-child {
		position: relative;
		transform: translateX(230px);
	}
}
@media screen and (max-width: 1500px) {
	.mv img:first-child {
		width: 379px;
		position: absolute;
		left: 217px;
		top: 208px;
	}
	.mv img:last-child {
		width: 879px;
		position: absolute;
		right: 133px;
		top: 274px;
	}
	.tag {
		width: 66px;
		position: absolute;
		top: 390px;
    	left: 260px;
		bottom: inherit!important;
		right: inherit!important;
		z-index: 1;
	}
}

@media screen and (max-width: 1400px) {
	.mv img:first-child {
		width: 351px;
		position: absolute;
		left: 215px;
        top: 190px;
	}
	.mv img:last-child {
		width: 815px;
		position: absolute;
		right: 123px;
        top: 254px;
	}
	.tag {
		width: 61px;
		position: absolute;
		bottom: inherit!important;
        right: inherit!important;
		top: 360px;
		z-index: 1;
	}
	#point .point1 img:last-child, #point .point3 img:last-child {
		position: relative;
		transform: translateX(-200px);
	}
	#point .point2 img:last-child, #point .point4 img:last-child {
		position: relative;
		transform: translateX(200px);
	}
}

@media screen and (max-width: 1200px) {
	header nav .menu_box {
		padding: 0 20px;
	}
	.mv img:first-child {
        left: 100px;
        top: 200px;
    }
	.mv img:last-child {
        right: 20px;
        top: 320px;
    }
    .tag {
        bottom: 100px;
		left: 140px;
    }
	.concept_box img {
		width: 60%;
	}
	#point .point1 img:last-child, #point .point3 img:last-child {
		position: relative;
		transform: translateX(0);
	}
	#point .point2 img:last-child, #point .point4 img:last-child {
		position: relative;
		transform: translateX(0);
	}
	#making {
		padding: 40px 30px 100px;
	}
	.portable {
		left: 86px;
    	top: -67px;	
	}
	.hydrating {
		right: 83px;
    	top: -662px;
	}
	.guard {
		right: 130px;
    	bottom: 46px;
	}
	.portable img {
		width: 482px;
		height: 335px;		
	}
	.hydrating img {
		width: 474px;
		height: 320px;
	}
	.guard img {
		width: 437px;
		height: 320px;
	}
}

@media screen and (max-width: 1100px) {
	.concept_box {
    	width: 100%;
	}
	.product_box_inner {
		margin: 70px 0 0 0;
	}
	.hydrating {
        right: -13px;
	}
	.guard {
        right: 32px;
	}
	.portable {
        left: 0px;
	}
	#making .making_box .making_box_main {
		padding: 30px 40px;
	}
	#making .making_box_top {
		padding: 20px 40px;
	}
	#making .making_box.second .making_box_main .making_box_main_left > div img:first-child {
		/* max-width: 240px;
		position: absolute;
		left: 0; */
	}
	#making .making_box.second .making_box_main .making_box_main_left > div img:last-child {
		top: 67px;
		left: 190px;
	}
	#campaign {
    	padding: 40px;
	}
	#campaign .campaign_box {
    	max-width: 100%;
	}
	section#j-kakaku {
		padding: 25px 0 40px;
	}
	.rettle-1e22rw0 {
		width: 100%;
	}
	.rettle-10ijm0k {
		width: 330px;
	}
	footer {
		top: 0;
	}
	.rettle-1q2z3c0 {
        width: 220px;
    }
	.rettle-i3i9r8 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 900px){
	.pcOnly {
		display: none!important;
	}
	.spOnly {
		display: block!important;
	}
	header nav .menu a {
		color: #fedacd;
	}
	.concept_box {
		height: auto;
		padding-top: 100px;
	}
	.concept_box img {
        width: 70%;
        max-width: 400px;
        padding: 60px 0;
    }
	.portable img,
	.hydrating img,
	.guard img {
		width: 277px;
		height: 260px;
	}
	.portable {
		left: 88px;
		top: -65px;
	}
	.hydrating {
		right: 30px;
		top: -565px;
	}
	.guard {
		right: 64px;
		bottom: 16px;
	}
	#point .point1 img:last-child,
	#point .point2 img:last-child,
	#point .point3 img:last-child,
	#point .point4 img:last-child {
		width: 80%;
	}
	#making .making_box.second .making_box_main .making_box_main_left > div img:first-child,
	#making .making_box.second .making_box_main .making_box_main_left > div img:last-child {
        /* max-width: 200px; */
    }
	.rettle-10ijm0k {
        width: 290px;
    }
	.rettle-1q2z3c0 {
        width: 180px;
    }
	.rettle-tnobln {
		left: 44%;
	}
	.mv img:last-child {
        right: 0px;
        top: 350px;
    }
}

@media screen and (max-width: 800px){
	.submenu {
		display: none;
	}
	.hamburger {
		right: 40px;
	}
    .mv img:first-child {
        left: 50px;
        top: 200px;
    }
	.mv img:last-child {
        right: -10px;
        top: 350px;
    }
	.tag {
        bottom: inherit!important;
        right: inherit!important;
		top: 360px;
        left: 90px;
    }
	.portable {
        left: 45px;
        top: -65px;
    }
	.hydrating {
        right: 20px;
        top: -560px;
    }
    .guard {
        right: 20px;
        bottom: -10px;
    }
	.rettle-10ijm0k {
        width: 260px;
    }
	.rettle-tnobln {
		position: absolute;
		left: 40%;
	}
	.rettle-tnobln img {
		width: 80%;
	}
    .rettle-1q2z3c0 {
        width: 170px;
    }
    section#j-kakaku {
        padding: 25px 20px 40px;
    }
    .rettle-1e22rw0 {
        padding: 60px 100px;
    }
	.rettle-i3i9r8 {
		top: -198px;
	    margin-bottom: -198px;
        padding-bottom: 40px;
	}
}

@media screen and (max-width: 767px) {
	.rettle-1e22rw0 {
        width: 100%;
        margin-top: 20px;
        padding: 45px 32px;
    }
    .rettle-6zt70q {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        row-gap: 15px;
        width: 285px;
        margin-right: auto;
        margin-left: auto;
    }
    .rettle-1q2z3c0 {
        width: 100%;
    }
	.rettle-tnobln {
		position: static;
		width: 100%;
        text-align: right;
	}
	.rettle-tnobln img {
        width: 137px;
    }
	.rettle-i3i9r8 {
		position: static;
		margin-bottom: 0;
	}
	.rettle-10ijm0k {
        width: 100%;
    }
	.rettle-4ns9vs.in-view {
		margin-top: 20px;
	}
}

@media screen and (max-width: 700px) {
	.mv img:last-child {
		top: 375px;
	}
	#making .making_box .making_box_main {
		flex-wrap: wrap;
	}
	#making .making_box.second .making_box_main {
		padding: 30px 40px;
	}
	#making .making_box .making_box_main .making_box_main_left,
	#making .making_box .making_box_main .making_box_main_right {
		width: 100%;
	}
	#making .making_box.first .making_box_main .making_box_main_right img {
		margin: 40px 0 0 0;
	}
	#making .making_box.second .making_box_main .making_box_main_left > div {
		height: auto;
		display: flex;
		flex-wrap: wrap;
	}
	#making .making_box.second .making_box_main .making_box_main_right {
		margin: 0 0 20px 0;
	}
	#making .making_box.second .making_box_main .making_box_main_left > div img:first-child,
	#making .making_box.second .making_box_main .making_box_main_left > div img:last-child {
		/* width: 60%;
		max-width: 60%; */
		position: static;
		margin: 0 20px 40px 0;
	}
	#making .making_box.third .making_box_main .making_box_main_right {
		margin-top: 40px;
	}
}

@media screen and (max-width: 600px){
	.pcOnly600 {
		display: none!important;
	}
	.spOnly600 {
		display: block!important;
	}
	.mv img:first-child {
        width: 320px;
	}
	.mv_box {
		height: 646px;
	}
	.tag {
        top: 350px;
	}
    .portable {
        left: -5px;
        top: -65px;
    }
    .hydrating {
        right: -20px;
        top: -560px;
	}
    .guard {
        right: -20px;
        bottom: -10px;
    }
	.product_box_inner img:first-child {
		max-width: 140px;
	}
	#point .point1 img:last-child,
	#point .point2 img:last-child,
	#point .point3 img:last-child,
	#point .point4 img:last-child {
        width: 97%;
    }
	#making {
        padding: 40px 30px;
    }
	#making .making_box .making_box_main {
		padding: 30px;
	}
	#making .making_box.second .making_box_main .making_box_main_left > div img:first-child,
	#making .making_box.second .making_box_main .making_box_main_left > div img:last-child {
        width: 100%;
        max-width: 100%;
        margin: 0 0 20px 0;
    }
	#campaign .campaign_box p > br {
		display: none;
	}
}

@media screen and (max-width: 500px){
	.portable img,
	.hydrating img,
	.guard img {
		width: 193.9px;
		height: 182px;
	}
    .guard {
        right: 0;
        bottom: -10px;
    }
    .portable {
        left: 10px;
        top: -65px;
    }
}

@media screen and (max-width: 480px) {
	header nav .menu_box > img:first-child {
		max-width: 170px;
	}
	.mv img:first-child {
        width: 250px;
		left: 25px;
	}
	.mv img:last-child {
		top: 410px;
		right: 0px;
        width: 840px;
	}
	.tag {
		top: 320px;
		left: 50px;
		width: 50px;
	}
	.product_box_inner2 .portable,
	.product_box_inner2 .hydrating,
	.product_box_inner2 .guard {
		position: static;
		transform: none;
	}
	.product_box_inner2 .portable img,
	.product_box_inner2 .hydrating img,
	.product_box_inner2 .guard img {
		margin: 0 auto;
	}
	#point {
    	margin-top: 100px;
	}
    #point .point1 img:last-child,
	#point .point2 img:last-child,
	#point .point3 img:last-child,
	#point .point4 img:last-child {
        width: 100%;
    }
	#point .point2 img:last-child,
	#point .point3 img:last-child {
		margin-top: 20px;
	}
	#making {
        padding: 30px 15px;
    }
	#making .making_box .making_box_main {
        padding: 20px;
    }
	#making .making_box.second .making_box_main {
        padding: 30px 20px;
    }
	#making .making_box.first .making_box_main .making_box_main_right img {
        margin: 30px 0 0 0;
    }
	#campaign {
        padding: 20px;
    }
    section#j-kakaku {
        padding: 10px 20px 40px;
    }
}

@media screen and (max-width: 420px) {
	.hamburger {
		top: 26px;
		right: 15px;
		width: 20px;
		height: 20px;
	}
}