@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 {
	padding-top: 24px;
	margin-bottom: 120px;
}

/*------------------------------------------------*/
#sec-mv {
	height: 600px;
	background: url("/assets/images/sabaki/top_bg.png") no-repeat center bottom #fff5e0;
	background-size:100% auto;
}
#sec-mv .wrapper {
	max-width: none;
	padding: 0;
	height: 520px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

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

#sec-mv .heading .outer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 673px;
}
#sec-mv .heading .inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 487px;
	height: 409px;
	transform: translateX(-30px);
}
#sec-mv .heading .inner img {
	display: block;
	margin: 0 auto;
}
#sec-mv .heading .inner img.t1 {
	width: 300px;
}
#sec-mv .heading .inner img.t2 {
	margin-top:10px;
	width: 370px;
}
#sec-mv .heading .inner h2 img {
	width: 300px;
}

#sec-mv .bg {
	width: 50%;
	height: 100%;
	position: relative;
}

#sec-mv .bg img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#sec-mv #waku {
	position: absolute;
	width: 100%;
	height:520px;
	z-index: 10;
	left: 0;
	top: 0;
}

#sec-mv #waku #waku_left{
	position: absolute;
	width: 80px;
	height:520px;
	left: 0;
	top: 0;
}

#sec-mv #waku #waku_right{
	position: absolute;
	width: 80px;
	height:520px;
	right: 0;
	top: 0;
}

#sec-mv #waku #waku_center{
	position: absolute;
	width: 220px;
	height:520px;
	left:0;
	right: 0;
	top: 0;
	margin:auto;
}

#sec-mv #waku #waku_expand_left{
	position: absolute;
	width: calc((100% - 380px) / 2);
	height:520px;
	left:80px;
	top: 0;
	background: url(/assets/images/sabaki/waku_expand_left.png) no-repeat left top;
	background-size:100% 520px;
}

#sec-mv #waku #waku_expand_right{
	position: absolute;
	width: calc((100% - 380px) / 2);
	height:520px;
	right:80px;
	top: 0;
	background: url(/assets/images/sabaki/waku_expand_right.png) no-repeat right top;
	background-size:100% 520px;
}

#sec-mv img.product {
	position: absolute;
	z-index: 20;
	left: calc(50% - 145px);
	bottom: 20px;
	margin: 0 auto;
	width: 440px;
}

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

.pc{
	display:block;
}

.sp{
	display: none;
}

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

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

.contents{
	width:1000px;
	margin:0 auto;
	position:relative;
	line-height:0;
}

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

#needs .contents .title{
	width:835px;
	height:112px;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:-100px;
	background: url("/assets/images/sabaki/title_bg.png") no-repeat center center;
	line-height:112px;
	color:#fff5e0;
	font-size:44px;
	text-align:center;
	font-weight:700;
}

.contents .catch{
	font-size:28px;
	text-align:center;
	font-weight:700;
	padding-top:40px;
}

.contents ul.needs1{
	width:850px;
	margin:40px auto 0;
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

.contents ul.needs1 li:nth-child(1){
	width:450px;
	position:relative;
}

.contents ul.needs1 li:nth-child(2){
	width:350px;
	position:relative;
}

.contents ul.needs1 li:nth-child(1) p{
	width:400px;
	font-size:22px;
	font-family: var(--font_sans);
	text-align: justify;
}

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

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

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

div.needs2 {
	width:850px;
	margin:40px auto 0;
  display: flex;
  flex-wrap: wrap;
	position:relative;
}

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

div.needs2 {
	flex-direction: row;
}

div.needs2 .needs2_text {
	width:420px;
	margin-left:50px;
}

div.needs2 .image {
	width:380px;
}

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

div.needs2 .needs2_text p{
	font-size:22px;
	font-family: var(--font_sans);
	text-align: justify;
}

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

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

#needs .cloud1{
	width:310px;
	position:absolute;
	left:calc(50% - 750px);
	top:80px;
	z-index:10;
}

#needs .cloud2{
	width:516px;
	position:absolute;
	right:calc(50% - 860px);
	top:700px;
	z-index:10;
}

#needs .butterfly1{
	width:238px;
	position:absolute;
	left:calc(50% - 680px);
	bottom:480px;
	z-index:10;
}

#needs .cloud3{
	width:294px;
	position:absolute;
	right:calc(50% - 710px);
	bottom:70px;
	z-index:10;
}

/*------------------------------------------------*/
#catch_block{
	width:100%;
	min-width:1080px;
	height:456px;
	margin:0 auto;
	background-image: url(/assets/images/sabaki/catch_bg2.png), 
    url(/assets/images/sabaki/catch_bg1.png);
  background-repeat: no-repeat, repeat-x;
  background-position:
    center top,
    center top;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

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

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

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

#point .contents .point_icon{
	width:185px;
	position:absolute;
	left:-60px;
	top:-60px;
	z-index:10;
}


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

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

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

#point .contents .title p:before{
  position: absolute;
  top: calc(50% - 35px);
  left: 0;
  content: '';
	width:85px;
	height:75px;
	background: url("/assets/images/sabaki/point_title_left.png") no-repeat center center;
	background-size:cover;
}

#point .contents .title p:after{
  position: absolute;
  top: calc(50% - 35px);
  right: 0;
  content: '';
	width:85px;
	height:75px;
	background: url("/assets/images/sabaki/point_title_right.png") no-repeat center center;
	background-size:cover;
}

#point .point1 ul{
	width:840px;
	margin:50px auto 0;
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

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

#point .point1 ul li:nth-child(2){
	width:460px;
	position:relative;
}

#point p.txt{
	width:840px;
	margin:30px auto 0;
	position:relative;
	font-size:24px;
	font-weight:500;
	font-family: var(--font_sans);
	padding-bottom:20px;
	text-align: justify;
}

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

.video-wrapper {
  width: 660px;
  margin: 40px 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;
}

.play-button img {
  width: 85px;
  height: 85px;
}

#point h4{
	width:840px;
	margin:30px auto 0;
	font-size:27px;
	font-weight:700;
}

#point .point2 p.txt{
	margin:20px auto 0;
}

#point .use{
	width:840px;
	margin:50px auto 0;
	position:relative;
}

#point .use .use_title{
	font-size:26px;
	font-weight:700;
	height:115px;
	background: url("/assets/images/sabaki/point_title_bg.png") no-repeat left top;
	background-size:180px 110px;
	box-sizing:border-box;
	padding-left:205px;
	padding-top:5px;
	position:absolute;
	top:0;
	left:-30px;
	z-index:10;
}

#point .use .use_title span{
	width:180px;
	height:115px;
	position:absolute;
	left:0;
	top:0;
	font-size:22px;
	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:840px;
	padding-top:70px;
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

#point .use ul li:nth-child(1){
	width:440px;
	position:relative;
}

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

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

.grid {
  display: grid;
  gap: 1px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	font-size:20px;
	font-weight:500;
	font-family: var(--font_sans);
	text-align:center;
}

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

.item1 { grid-column: 1; grid-row: 1; width:135px; background-color:#facccc; height:70px;}
.item2 { grid-column: 2; grid-row: 1; width:234px; background-color:#facccc; height:70px;}
.item3 { grid-column: 1; grid-row: 2; width:135px; background-color:#f9bfbf; height:139px;}
.item4 { grid-column: 2; grid-row: 2; width:234px; background-color:#f9bfbf; height:139px;}
.item5 { grid-column: 1; grid-row: 3; width:135px; background-color:#f8b2b2; height:70px;}
.item6 { grid-column: 2; grid-row: 3; width:234px; background-color:#f8b2b2; height:70px;}



/*
SP
@media screen and (max-width: 767px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }

  .item1 { grid-column: 1; grid-row: 1; }
  .item3 { grid-column: 2; grid-row: 1; }
  .item5 { grid-column: 3; grid-row: 1; }
  .item2 { grid-column: 1; grid-row: 2; }
  .item4 { grid-column: 2; grid-row: 2; }
  .item6 { grid-column: 3; grid-row: 2; }
}
*/

#point .cloud1{
	width:454px;
	position:absolute;
	left:calc(50% - 910px);
	top:270px;
	z-index:10;
}

#point .cloud2{
	width:310px;
	position:absolute;
	right:calc(50% - 710px);
	top:790px;
	z-index:10;
}

#point .butterfly1{
	width:213px;
	position:absolute;
	left:calc(50% - 650px);
	top:1500px;
	z-index:10;
}

#point .cloud3{
	width:470px;
	position:absolute;
	right:calc(50% - 770px);
	top:1850px;
	z-index:10;
}

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

#efficiency{
	width:100%;
	min-width:1080px;
	margin:0 auto;
	padding:80px 0;
	background-color:#fff5e1;
}

#efficiency .title{
	width:830px;
	height:230px;
	margin:0 auto;
	background: url("/assets/images/sabaki/title_bg2_pc.png") no-repeat center top;
	font-size:44px;
	color:#fff5e0;
	text-align:center;
	font-weight:600;
	line-height:1.3;
	box-sizing:border-box;
	padding:30px 0 0;
}

#efficiency .title span{
	display:inline;
	margin-left:-10px;
}

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

div.efficiency_block {
	width:1030px;
	margin:50px auto 0;
  display: flex;
  flex-wrap: wrap;
	position:relative;
}

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

.efficiency_block {
	flex-direction: row;
}

.efficiency_block .text {
	width: 460px;
	padding:0 15px;
}

.efficiency_block .image {
	width: 570px;
}

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

.efficiency_block .text p{
	width:400px;
	font-size:32px;
	color:#ff0000;
	font-weight:700;
	line-height:1.4;
}

.efficiency_block .text span{
	display:block;
	width:400px;
	font-size:24px;
	font-weight:500;
	font-family: var(--font_sans);
	line-height:1.6;
	margin-top:10px;
	text-align: justify;
}

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

#cooking{
	width:100%;
	min-width:1080px;
	margin:0 auto;
	background-image: url(/assets/images/sabaki/repeat_img.png),
		url(/assets/images/sabaki/gradation3.png);
  background-repeat: repeat, no-repeat;
  background-position:
    center top,
    center top;
	position:relative;
	overflow:hidden;
  background-size: 190px 190px, cover;
	padding-bottom:200px;
}

#cooking:after {
  position: absolute;
  left: 0;
	bottom:0;
  content: '';
	width:100%;
	height:40px;
	background: url("/assets/images/sabaki/line_bottom.png") no-repeat center center;
	background-size:100% 40px;
}

#cooking #line_top{
	width:100%;
	position:relative;
	height:75px;
}

#cooking #line_top p{
	width:200px;
	position:relative;
	margin:0 auto;
}

#cooking #line_top:before {
  position: absolute;
  top: 0;
  left: 0;
	width:calc(50% - 100px);
  content: '';
	height:75px;
	background: url("/assets/images/sabaki/line_left.png") no-repeat left top;
	background-size:100% 75px;
}

#cooking #line_top:after {
  position: absolute;
  top: 0;
  right: 0;
	width:calc(50% - 100px);
  content: '';
	height:75px;
	background: url("/assets/images/sabaki/line_right.png") no-repeat left top;
	background-size:100% 75px;
}

#cooking h3{
	color:#fff5e0;
	font-size:58px;
	font-weight:700;
	text-align:center;
	text-shadow: 3px 3px 3px #7d8a8e;
	margin-top:80px;
	line-height:1.4;
}

#cooking h3 span{
	margin-right:-30px;
}

#cooking h4{
	width:1000px;
	height:56px;
	margin:40px auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	color:#ff0000;
	font-size:29px;
	font-weight:700;
	text-align:center;
	background: url("/assets/images/sabaki/cooking_title.png") no-repeat center top;
}

#cooking ul{
	width:1000px;
	height:820px;
	margin:60px auto 0;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
	position:relative;
}

#cooking ul li{
	width:401px;
	position:relative;
}

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

#cooking ul:before {
  position: absolute;
  top: 35px;
  left: 0;
	right:0;
	margin:auto;
  content: '';
	width:751px;
	height:749px;
	background: url("/assets/images/sabaki/mark.png") no-repeat center center;
}

#cooking ul:after {
  position: absolute;
  top: 217px;
  left: 0;
	right:0;
	margin:auto;
  content: '';
	width:400px;
	height:386px;
	background: url("/assets/images/sabaki/mv_img1.png") no-repeat center center;
	background-size:400px 386px;
}

#cooking .cloud1{
	width:317px;
	position:absolute;
	left:calc(50% - 830px);
	top:80px;
	z-index:10;
}

#cooking .butterfly1{
	width:224px;
	position:absolute;
	right:calc(50% - 770px);
	top:330px;
	z-index:10;
}

#cooking .cloud2{
	width:403px;
	position:absolute;
	left:calc(50% - 900px);
	bottom:50px;
	z-index:10;
}