@charset "UTF-8";
/* CSS Document */

body main {
	font-family: var(--font_serif);
	font-weight: 500;
	letter-spacing: -0.03em;
	font-feature-settings: 'palt';
}
footer#mainFooter {
	margin-bottom: 130px;
	padding-top: 30px;
}

/*------------------------------------------------*/
#sec-mv {
	height: 152vw;
	background: url("/assets/images/sabaki/top_bg_sp.png") no-repeat center bottom #fff5e0;
	background-size:100% auto;
}
#sec-mv .wrapper {
	padding:0;
}

#sec-mv .heading {
	width:100%;
	flex: 1;
	background: url("/assets/images/sabaki/mv_bg.png") no-repeat center top;
	background-size:cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

#sec-mv .heading .outer {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	max-width: 100%;
	height: 71vw;

}
#sec-mv .heading .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 51vw;
	height: 71vw;
	transform: translateX(0);
}
#sec-mv .heading .inner img {
	display: block;
	margin: 0 auto;
}
#sec-mv .heading .inner img.t1 {
	width: 46vw;
	margin-top:10vw;
}
#sec-mv .heading .inner img.t2 {
	margin: 0.8vw 0 0 4vw;
	width: 50vw;
}
#sec-mv .heading .inner h2 img {
	margin: -1vw 0 0 5vw;
	width: 47vw;
}
#sec-mv .bg {
	position: relative;
	height: 67vw;
}

#sec-mv .bg img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
#sec-mv img.product {
	position: absolute;
	z-index: 10;
	left: 2vw;
	bottom: 3vw;
	margin: 0 auto;
	width: 77vw;
}

#sec-mv #waku_sp{
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:10;
}

#sec-mv #waku_sp img{
	width:100%;
}

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

.pc{
	display:none;
}

.sp{
	display:block;
	line-height:0;
}

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

#needs{
	width:100%;
	min-width:100%;
	margin:0 auto;
	padding:16vw 0;
	background-image: url(/assets/images/sabaki/repeat_img.png),
		url(/assets/images/sabaki/sp_gradation.png);
  background-repeat: repeat, no-repeat;
  background-position:
    center top,
    center top;
	position:relative;
	overflow:hidden;
  background-size: 25vw 25vw, cover;
}

.contents{
	width:92%;
	margin:0 auto;
	position:relative;
	line-height:0;
}
.bg_top img,
.bg_bottom img{
	width:100%;
}

.contents .contents_inner{
	width:100%;
	margin:0 auto;
	position:relative;
	background: url("/assets/images/sabaki/bg_center_sp.png") repeat-y center top;
	background-size:100% auto;
	line-height:1.6;
}

#needs .contents .title{
	width:76vw;
	height:26vw;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:-14vw;
	background: url("/assets/images/sabaki/title_bg_sp.png") no-repeat center center;
	background-size:100% auto;
	line-height:1.3;
	color:#fff5e0;
	font-size:6.0vw;
	font-weight:700;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	text-align:center;
}

.contents .catch{
	font-size:4.6vw;
	text-align:center;
	font-weight:700;
	padding-top:15vw;
}

.contents ul.needs1{
	width:100%;
	margin:4vw auto 0;
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

.contents ul.needs1 li:nth-child(1){
	width:88%;
	position:relative;
	margin:0 auto;
}

.contents ul.needs1 li:nth-child(2){
	width:88%;
	position:relative;
	margin:5vw auto 0;
}

.contents ul.needs1 li:nth-child(2) img{
	width:100%;
}

.contents ul.needs1 li:nth-child(1) p{
	width:100%;
	font-size:4.0vw;
	font-family: var(--font_sans);
	padding-bottom:3vw;
	text-align: justify;
}

.contents ul.needs1 li:nth-child(1) span{
	display:block;
	width:100%;
}

.contents ul.needs1 li:nth-child(1) span img{
	width:100%;
}

#needs div.contents:nth-child(2){
	margin-top:18vw;
}

div.needs2 {
	width:100%;
	margin:3vw auto 0;
  display: flex;
  flex-wrap: wrap;
	position:relative;
}

div.needs2 .needs2_text,
div.needs2 .needs2_image {
  box-sizing: border-box;
	flex: 1;
}

div.needs2 {
	display: flex;
  flex-direction: column-reverse;
}

div.needs2 .needs2_text {
	width: 100%;
	margin-left:0;
}

div.needs2 .needs2_image {
	width:88%;
	margin:3vw auto 0;
}

div.needs2 .needs2_image img{
	width:100%;
}

div.needs2 .needs2_text p{
	width:88%;
	position:relative;
	font-size:4.0vw;
	font-family: var(--font_sans);
	margin:0 auto;
	text-align: justify;
}

div.needs2 .needs2_text p:nth-child(2){
	margin-top:5vw;
}

div.needs2 .needs2_text span{
	color:#ff0000;
}

#needs img{
	width:100%;
}

#needs .cloud1{
	width:34vw;
	position:absolute;
	left:-18vw;
	top:30vw;
	z-index:10;
}

#needs .cloud2{
	width:55vw;
	position:absolute;
	right:-35vw;
	top:185vw;
	z-index:10;
}

#needs .butterfly1{
	width:26vw;
	position:absolute;
	left:-9vw;
	bottom:130vw;
	z-index:10;
}

#needs .cloud3{
	display:none;
}

/*------------------------------------------------*/
#catch_block{
	width:100%;
	min-width:100%;
	height:60vw;
	margin:0 auto;
	background: url("/assets/images/sabaki/catch_bg_sp.png") no-repeat center top;
	background-size:cover;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#catch_block h3{
	font-size:7vw;
	font-weight:700;
	text-align:center;
	line-height:1.4;
}

#catch_block h3 span{
	margin-left:-3vw;
}

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

#point{
	width:100%;
	min-width:100%;
	margin:0 auto;
	padding:10vw 0;
	background-image: url(/assets/images/sabaki/repeat_img.png),
		url(/assets/images/sabaki/sp_gradation.png);
  background-repeat: repeat, no-repeat;
  background-position:
    center top,
    center top;
	position:relative;
	overflow:hidden;
  background-size: 25vw 25vw, cover;
}

#point img{
	width:100%;
}

#point .contents .point_icon{
	width:24vw;
	position:absolute;
	left:-2vw;
	top:-5vw;
	z-index:10;
}

#point .contents .title{
	position:relative;
	text-align:center;
	font-size:4.5vw;
	line-height:1.3;
	text-align:center;
	font-weight:700;
	padding-top:5vw;
}

#point .contents .title p{
	position:relative;
	display:inline-block;
	padding:0 13vw;
}

.point2 .title p,
.point3 .title p{
	position:relative;
	display:inline-block;
	padding:0 17vw !important;
}

#point .contents .title p span{
	color:#ff0000;
}

#point .contents .title p:before{
  position: absolute;
  top: calc(50% - 7.5vw);
  left: 0;
  content: '';
	width:15vw;
	height:15vw;
	background: url("/assets/images/sabaki/point_title_left.png") no-repeat center top;
	background-size:100% auto;
}

#point .contents .title p:after{
  position: absolute;
  top: calc(50% - 7.5vw);
  right: 0;
  content: '';
	width:15vw;
	height:15vw;
	background: url("/assets/images/sabaki/point_title_right.png") no-repeat center top;
	background-size:100% auto;
}

#point .point1{
	position:relative;
	z-index:10 !important;
}

#point .point1 ul{
	width:78%;
	margin:5vw auto 0;
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

#point .point1 ul li:nth-child(1){
	width:100%;
	position:relative;
}

#point .point1 ul li:nth-child(2){
	width:100%;
	position:relative;
	margin-top:5vw;
}

#point p.txt{
	width:88%;
	margin:3vw auto 0;
	position:relative;
	font-size:4vw;
	font-weight:500;
	font-family: var(--font_sans);
	padding-bottom:1vw;
	text-align: justify;
}

#point div.contents:nth-child(2),
#point div.contents:nth-child(3){
	margin-top:8vw;
}

.video-wrapper {
  width: 88%;
  margin: 5vw auto 0;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 アスペクト比 */
  overflow: hidden;
	box-sizing:border-box;
	border-radius:20px;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play_button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
	width:12vw;
}

.play-button img {
  width: 100%;
  height: auto;
}

#point h4{
	width:88%;
	margin:3vw auto 0;
	font-size:4.6vw;
	font-weight:700;
	text-align:center;
}

#point .point2 p.txt{
	margin:3vw auto 0;
}

#point .use{
	width:88%;
	margin:5vw auto 0;
	position:relative;
}

#point .use .use_title{
	font-size:4.6vw;
	font-weight:700;
	height:20vw;
	background: url("/assets/images/sabaki/point_title_bg.png") no-repeat left top;
	background-size:29vw 20vw;
	box-sizing:border-box;
	padding-left:32vw;
	padding-top:0;
	position:relative;
	top:0;
	left:0;
	z-index:10;
	line-height:1.4;
}

#point .use .use_title span{
	width:29vw;
	height:20vw;
	position:absolute;
	left:0;
	top:0;
	font-size:4.0vw;
	line-height:1.3;
	font-weight:500;
	text-align:center;
	font-family: var(--font_sans);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	color:#fff;
}

#point .use ul{
	width:100%;
	padding-top:3vw;
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

#point .use ul li:nth-child(1){
	width:100%;
	position:relative;
	margin-bottom:2vw;
}

#point .use ul li:nth-child(1) img{
	width:100%;
}

#point .use ul li:nth-child(2){
	width:100%;
	position:relative;
}

.grid {
	display: grid;
  grid-template-columns: 27% 46% 27%;
  grid-template-rows: auto auto;
	font-size:3.4vw;
	font-weight:500;
	font-family: var(--font_sans);
	text-align:center;
	gap:1px;
	margin-bottom:2vw;
}

.grid .item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
	padding:2vw 0;
}

.item1 { grid-column: 1; grid-row: 1; background-color:#facccc;}
.item2 { grid-column: 1; grid-row: 2; background-color:#facccc;}
.item3 { grid-column: 2; grid-row: 1; background-color:#f9bfbf;}
.item4 { grid-column: 2; grid-row: 2; background-color:#f9bfbf;}
.item5 { grid-column: 3; grid-row: 1; background-color:#f8b2b2;}
.item6 { grid-column: 3; grid-row: 2; background-color:#f8b2b2;}


#point .cloud1{
	width:40vw;
	position:absolute;
	left:-13vw;
	top:2vw;
	z-index:1;
}

#point .cloud2{
	width:40vw;
	position:absolute;
	right:-20vw;
	top:120vw;
	z-index:10;
}

#point .butterfly1{
	width:26vw;
	position:absolute;
	left:-15vw;
	top:218vw;
	z-index:10;
}

#point .cloud3{
	width:40vw;
	position:absolute;
	right:-14vw;
	bottom:2vw;
	z-index:10;
}

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

#efficiency{
	width:100%;
	min-width:100%;
	margin:0 auto;
	padding:8vw 0;
	background-color:#fff5e1;
}

#efficiency .title{
	width:78%;
	height:42vw;
	margin:0 auto;
	background: url("/assets/images/sabaki/title_bg2_sp.png") no-repeat center top;
	background-size:cover;
	font-size:6.0vw;
	color:#fff5e0;
	text-align:center;
	font-weight:600;
	line-height:1.3;
	box-sizing:border-box;
	padding:5vw 0 0;
}

#efficiency .title span{
	display:inline;
	margin-left:-2vw;
}

#efficiency .title span:nth-child(2){
	margin-left:-3vw;
}

div.efficiency_block {
	width:88%;
	margin:5vw auto 0;
  display: flex;
  flex-wrap: wrap;
	position:relative;
}

.efficiency_block .text,
.efficiency_block .image {
  box-sizing: border-box;
  padding: 0;
}

.efficiency_block {
	/*flex-direction: row;*/
	flex-direction: column;
}

.efficiency_block .text {
	width:100%;
	padding:0;
}

.efficiency_block .image {
	width:100%;
	margin-top:5vw;
}

.efficiency_block .image img{
	width: 100%;
}

.efficiency_block .text p{
	width:100%;
	font-size:4.6vw;
	color:#ff0000;
	font-weight:700;
	line-height:1.4;
}

.efficiency_block .text span{
	display:block;
	width:100%;
	font-size:4.0vw;
	font-weight:500;
	font-family: var(--font_sans);
	line-height:1.6;
	margin-top:2vw;
	text-align: justify;
}

div.block2 .text{
	order: 1 !important;
}

div.block2 .image{
	order: 2 !important;
}


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

#cooking{
	width:100%;
	min-width:100%;
	height:162vw;
	margin:0 auto;
	background: url("/assets/images/sabaki/cooking_bg.png") no-repeat center top;
	background-size:cover;
	padding-bottom:0;
}

#cooking:after {
  position: absolute;
  left: 0;
	bottom:0;
  content: '';
	width:100%;
	height:0;
	background: none;
}

#cooking img{
	width:100%;
}

#cooking #line_top{
	display:none;
}

#cooking h3{
	color:#fff5e0;
	font-size:6.0vw;
	font-weight:700;
	text-align:center;
	text-shadow: 3px 3px 3px #7d8a8e;
	margin-top:15vw;
	line-height:1.2;
}

#cooking h3 span{
	margin-right:-3vw;
}

#cooking h4{
	width:90%;
	height:15vw;
	margin:5vw auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	color:#ff0000;
	font-size:4.2vw;
	line-height:1.4;
	font-weight:700;
	text-align:center;
	background: url("/assets/images/sabaki/cooking_title_sp.png") no-repeat center top;
	background-size:100% auto;
}

#cooking ul{
	width:90%;
	height:83vw;
	margin:6vw auto 0;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
	position:relative;
	z-index:10;
}

#cooking ul li{
	width:48%;
	position:relative;
}

#cooking ul li:nth-child(1),
#cooking ul li:nth-child(2){
	margin-bottom:11vw;
}

#cooking ul:before {
  position: absolute;
  top: 7vw;
  left: 0;
	right:0;
	margin:auto;
  content: '';
	width:70vw;
	height:70vw;
	background: url("/assets/images/sabaki/mark.png") no-repeat center center;
	background-size:100% auto;
}

#cooking ul:after {
  position: absolute;
  top: 20vw;
  left: 0;
	right:0;
	margin:auto;
  content: '';
	width:44vw;
	height:43vw;
	background: url("/assets/images/sabaki/mv_img1.png") no-repeat center top;
	background-size:100% auto;
}

#cooking .cloud1{
	width:32vw;
	position:absolute;
	left:-10vw;
	top:8vw;
	z-index:10;
}

#cooking .butterfly1{
	display:none;
}

#cooking .cloud2{
	width:40vw;
	position:absolute;
	left:-14vw;
	bottom:6vw;
	z-index:1;
}