.section_area {padding: 5vw 0;}
.section_area .area_title { position: relative; padding-bottom: .3em; letter-spacing: .1em; text-align: center; }
.section_area .area_title:before { position: absolute; width: 3em; height: .1em; background: var(--primary); display: block; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); content: ""; }
.section_area .sub_title { font-weight: 500; font-size: 1.1em; color: var(--primary); }
.section_area .more_btn {padding: 10px 15px 10px 30px;border: 1px #c0c0c0 solid;font-weight: 400;border-radius: 50px;display: inline-flex;gap: 60px;align-items: center;}
.section_area .more_btn:hover{background:var(--primary);color:white;}
.section_area .more_btn b{display: inline-flex;width:50px;aspect-ratio: 1/1;background: var(--primary);border-radius: 50%;align-items: center;justify-content: center;}
.section_area .more_btn svg{width:18px;height: 18px;fill: white;}
.section_area .list_box {margin-top: 4vmax;}
.section_area .list_box .item_row {margin: 0 1.5em;}
.section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; }

#wrap{
    position: relative;
    overflow: hidden;
}

/* news_list */
#news_area{position: relative;width: 36%;margin: 0 0 0 auto;display: grid;grid-template-columns: 18% 82%;align-items: center;padding: 37px 50px;}
#news_area *{color:white;font-weight: 300;}
#news_area .area_title{color:#f7f8fa}
#news_list .info_box {display:grid;grid-template-columns: 25% 75%;}
#news_list .info_box .time{font-size:15px;opacity:.6;font-family: "Heebo", sans-serif;}
#news_list .info_box .h3 {font-size: 16px;font-weight: 300;}

/* product_area */
#product_area{padding-top:30px;background-position: bottom;background-repeat: no-repeat;padding-bottom: 13vw;background-size: contain;}
#product_area .img_area_title {width: min(90%, 565px);margin-left: 25px;}
#product_list{display:flex;align-items: center;position: relative;}
#product_list .btn{position:absolute;padding: 0;width: 116%;left: -8%;display: flex;align-items: center;justify-content: space-between;}
#product_list .btn a{width:50px;aspect-ratio: 1/1;background: var(--primary);display: flex !important;align-items: center;justify-content: center;border-radius: 50px;}
#product_list .btn a svg{width: 15px;height: 15px;fill: white;}
#product_list .btn a#product_prev svg{transform:scaleX(-1);}
#product_list ul{width:100%;z-index: 2;}

/* story_area */
#story_area { height: 100vh; height: 100svh; min-height: 100vh; min-height: 100svh; width: 100%; display: flex; align-items: center; justify-content: center; background-color: #f6f6f6; overflow: hidden; position: relative; z-index: -2; }
#story_area.storyend{transform: translate(0px, 0) !important;position: absolute;top: unset !important;bottom: 0 !important;z-index: -1;}
#story_area .story-wrapper{margin-top: 60px;}
#story_area .storycontents{width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}
#story_area .story-text-group{display:flex;align-items: center;justify-content:center;white-space:nowrap;z-index:5;font-size: 45px;font-weight:700;color: #161616;transition:transform 0.5s}
#story_area .brand-name{display:inline-flex;overflow:hidden;white-space:nowrap;vertical-align:middle;justify-content:flex-start;height: 2.9em;}
#story_area .brand-name span{display:block;font-size: 37px;line-height: 1;}
#story_area .slogan-swap-container{position:relative;height: 3.5em;overflow:hidden;display:inline-flex;align-items:center;vertical-align:middle}
#story_area .slogan-1,#story_area .slogan-2{display:block;padding-left:10px;font-size: 37px;line-height: 1.46;}
#story_area .slogan-1{position:relative}
#story_area .slogan-2{position:absolute;top:100%;left:0;white-space:nowrap;line-height: 1.25;}
#story_area .story-media-container{width:100%;max-height:0;margin-top:0;z-index:4;display:flex;flex-direction:column;align-items:center;overflow:hidden}
#story_area .video-wrapper{width: 640px;height: 350px;overflow:hidden;filter:brightness(0.9);position:relative;margin-bottom: 40px;flex-shrink:0;border-radius: 45px;}
#story_area .video-wrapper video{width:100%;height:100%;object-fit:cover}
#story_area .story-caption{font-family:'Heebo',sans-serif;font-size:24px;font-weight:500;position:relative;display:inline-block;color:#c0c0c0}
#story_area .story-caption-fill{position:absolute;top:0;left:0;width:0%;height:100%;color:#000;overflow:hidden;white-space:nowrap;font-family: 'Heebo', sans-serif;font-size: 24px;font-weight: 500;}
#story_area:after{z-index: -1;content:url(/images/01/about-wave.png);position: absolute;bottom: -40px;}

/* about_area */
#about_area {margin-top: -30px;background: white;position: relative;padding-bottom: 10vw;padding-top: 3vw;}
#about_area:after{content:url(/images/01/img-a-right.png);position: absolute;right: -17%;bottom: -40px;animation: aboutSwing 6s ease-in-out infinite;z-index: 2;}
@keyframes aboutSwing{0%{transform:translate(0,0) rotate(-2deg);}50%{transform:translate(-12px,-8px) rotate(2deg);}100%{transform:translate(0,0) rotate(-2deg);}}
#about_area:before{content:url(/images/01/img-a-line.png);position: absolute;right: 0;bottom: 0;z-index: 0;}
#about_area .fixTxt{position:absolute;right: 12%;animation: floatFixTxt 3.6s ease-in-out infinite;will-change: transform;}
@keyframes floatFixTxt{0%{transform:translate(0,0) scale(1);}50%{transform:translate(6px,-12px) scale(1.02);}100%{transform:translate(0,0) scale(1);}}#about_area .workframe {display: grid;grid-template-columns: 53% 40%;justify-content: space-between;width: min(90%, 1400px);position: relative;}
#about_area .left{display:grid;grid-template-columns: 70% 15%;justify-content: space-between;}
#about_area .titleboxx{order:2;writing-mode: vertical-rl;margin-top: 40px;}
#about_area .titleboxx p{color:#4b4c4e;font-size: 20px;font-family: "Heebo", sans-serif;font-weight: 300;line-height: 1.3;margin-left: 20px;}
#about_area .titleboxx .about_title{font-size:25px;font-weight: 500;letter-spacing: 2px;}
#about_area .info_box {width:80%;margin-top: 150px;}
#about_area .info_box .pageh1{font-size:22px;font-weight: 400;letter-spacing: 2px;word-break: keep-all;}
#about_area .info_box .pageh1:after{content:'';display: block;width: 30px;height: 1px;background: #333;margin: 35px 0 30px;}
#about_area .img_box {position:relative;}
#about_area .img_box:before{content:url(/images/01/img-a-snack-bowl.png);position: absolute;bottom: -100px;left: -170px;}
#about_area .info_box p {text-align: justify;margin-bottom: 50px;line-height: 2;}

/* photo_area */
#photo_area .item_row { padding: 4% 6%; border: 2px var(--g_100) solid; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#photo_area .item_row .img_box img { width: 100px; aspect-ratio: 1/1; }
#photo_area .item_row .info_box { margin-left: 6%; width: 1%; flex: 1 1 auto; }
#photo_area .item_row .info_box h3 { margin-bottom: .5em; max-height: 3.2em; height: auto; -webkit-line-clamp: 2; }
#photo_area .item_row .info_box font { padding: .5em 1em; background: var(--primary); border-radius: 2em; display: inline-block; line-height: 1; font-weight: 300; font-size: .9em; color: white; }

@media screen and (min-width: 1161px){
	#photo_area .item_row:hover { border-color: var(--primary); }
}
@media screen and (max-width: 1680px){
    #about_area:after{zoom:80%}
    #product_list .btn{left: -5%;width: 110%;}
}
@media screen and (max-width: 1440px){
    #product_list .btn{left: 0;width: 100%;z-index: 2;}
    #news_area{width: 45%;}
    #product_area{background-position: 45% 100%;}
}
@media screen and (max-width: 1400px){
    #about_area:after{zoom:65%}
    #about_area{padding-top:8vw}
    #about_area .img_box:before{bottom: -50px;}
}
@media screen and (max-width: 1024px){
    #about_area:after{bottom: 32%;}
    #about_area .fixTxt{right: 4%;top: 0;z-index: 10;}
    #about_area .left{display:flex;justify-content: center;gap: 50px;}
    #about_area .workframe{grid-template-columns:1fr}
    #news_area{width: 65%;margin-top: 0;}
    #product_area{padding-top:8vw;}
    .section_area .list_box{margin-top: 70px;}
    #about_area .img_box:before{bottom: -150px;}
    #about_area:before{display:none;}
}
@media screen and (max-width: 980px){
	html,body { overscroll-behavior-y: none; }
    #about_area .fixTxt{top: -60px;}
    #product_area{background-size: 130%;background-position: 20% 100%;}
    #news_area{width: 100%;margin-top: 0;}
	#story_area .story-text-group{font-size:2rem;flex-direction:column}
	#story_area .video-wrapper{width:90%;max-width:479px;height:auto;aspect-ratio:479/274}
	#story_area .story-caption, #story_area .story-caption-fill{font-size:20px}
	#story_area .brand-name{margin-bottom:0}
    #about_area:after{display:none;}
}
@media screen and (max-width: 768px){
    #about_area .workframe{display:block;}
	#story_area .story-text-group{font-size:1.5rem}
	#story_area .brand-name{margin-bottom:10px;margin-right:0}	
	#about_area .img_box { width: 100%; max-width: inherit; }
	#about_area .info_box {order: 1;width: 100%;}
}
@media screen and (max-width: 640px){
    #about_area{padding-bottom: 14vw;}
    #about_area .info_box{margin-top:100px}
    #about_area .img_box:before{zoom: 50%;left: -130px;}
	#about_area .img_box {width: 80%;margin-left: 50px;}
    #about_area .fixTxt{width: 80px;}
    #story_area .slogan-swap-container{height: 2.5em;}
    #story_area .brand-name span, #story_area .slogan-1, #story_area .slogan-2{font-size: 28px;}
    #product_list .btn{top: 85px;}
    #product_area .img_area_title{margin-left: 15px;}
    .section_area, #product_area{padding:12vw 0}
    #product_area{background-size: 180%;background-position: 15% 100%;}
    #news_area .area_title{position:absolute;left: 130px;font-size: 14px;background: var(--primary);z-index: 2;}
    #news_list .info_box{display:flex;flex-direction: column;}
    #news_area{display:block;padding: 37px 8%;}
	#photo_area .item_row .img_box { width: 100%; }
	#photo_area .item_row .img_box img { width: 100%; aspect-ratio: 1/1; }
	#photo_area .item_row .info_box { margin: .5em 0 0; width: 100%; }
    #about_area .left{display:flex;flex-direction: column-reverse;align-items: center;}
}
@media screen and (max-width: 550px){
	#product_list {margin: 7vmax auto 0;}
}