.section_area {padding: 5vw 0;}
.section_area .area_title {position: relative;padding-bottom: .3em;letter-spacing: .1em;text-align: center;color: #252524;font-size: 25px;font-weight: 600;}
.section_area .area_title b{font-family: "Baskervville", serif;text-transform: uppercase;letter-spacing: 1px;color: #52504e;font-weight: 400;font-size: 48px;background: linear-gradient(90deg, var(--red) 0%, #d5a1a1 100%);-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;}
.section_area .sub_title { font-weight: 500; font-size: 1.1em; color: var(--primary); }
.section_area .title_box .page_title{line-height: 160%;margin-bottom: 30px;position: relative;padding-bottom: .3em;letter-spacing: .1em;color: #252524;font-size: 25px;font-weight: 600;}
.section_area .title_box .page_title:after{content:'';display: block;width: 80px;height: 1px;background: var(--line);margin: 30px 0 0;}
.section_area .title_box .subtitle{line-height: 1.03;padding-bottom: 10px;font-family: "Baskervville", serif;text-transform: uppercase;letter-spacing: 1px;color: #52504e;font-weight: 400;font-size: 48px;background: linear-gradient(90deg, var(--red) 0%, #d5a1a1 100%);-webkit-background-clip: text;background-clip: text;color: transparent;-webkit-text-fill-color: transparent;}
.section_area .more_btn { padding: 0 .2em; border-bottom: 2px var(--g_800) solid; font-weight: 500; }
.section_area .list_box { margin-top: 2vmax; }
.section_area .list_box .item_row { margin: 0 1em; }
.section_area .list_box .slick-dots { position: relative; margin: 1em 0; bottom: 0; }
@property --a { syntax: "<percentage>"; initial-value: 0%; inherits: true; }
.section_area .gooeyBtn{--a:0%;--x:50;--y:50;--button:var(--primary);display:inline-flex;align-items:center;justify-content:center;min-width:151px;min-height:80px;border:0;outline:0;border-radius:999px;text-decoration:none;cursor:pointer;color:#fff;font-size:16px;font-weight:400;letter-spacing:0.03em;position:relative;padding:0 30px;transition:--a .5s ease-in-out,scale var(--spring-duration) var(--spring-easing);isolation:isolate;}
.section_area .gooeyBtn:hover{--a:100%;scale:1;}
.section_area .gooeyBtn:before{content:"";position:absolute;inset:0;border-radius:999px;filter:blur(10px) url(#goo);background-image: linear-gradient(0deg,var(--primary),var(--primary)),radial-gradient(40% 70% at calc(var(--x) * 1%) calc(var(--y) * 1%),rgba(var(--primary-rgb),var(--a)) 0%,transparent 90%);background-clip:content-box,border-box;padding:12px;z-index:-1;}

/* product_area */
#product_area{position:relative;}
#product_area .bg_box{background-repeat: no-repeat;background-position:50% 50%;background-size:cover;z-index: -2;}
#product_area .workframe{width: min(90%, 1250px);}
#product_area .list_box{margin-top: 2vw;}
#product_area .area_title:before{content:url(/images/01/img-linee.png)}
#product_area .area_title{display:flex;justify-content: flex-end;align-items: baseline;gap: 15px;margin-right: 15%;}
#product_list .btn{padding:0;display: inline-flex;align-items: center;gap: 20px;margin-left: 50px;margin-top: -180px;}
#product_list .btn button{background:var(--primary);width: 75px;aspect-ratio: 1/1;display: flex !important;align-items: center;justify-content: center;border-radius: 50px;}
#product_list .btn button svg{fill:white;width: 35px;height: 35px;transform: rotate(-90deg);}
#product_list .btn button#product_prev svg{transform: rotate(90deg);}
#product_list .slick-list{height: 760px;}
#product_area #product_list .info_box {padding: 1.3em 2em;}

/* about_area */
#about_area {position: relative;padding: 7vw 0 6vw 0;}
#about_area .bg{position:relative}
#about_area .bg:before{content:'';position:absolute;left:170px;top:-320px;background:url(/images/01/img-ab-bg-1.png) 0 0;background-size:auto;width:60%;height:125%;z-index:-6}
#about_area:before{content:'';position:absolute;left: 170px;top: 0;background: url(/images/01/img-ab-bg-1.png) 0 0;width: 60%;height: 104%;z-index: -6;background-size: cover;}
#about_area:after{content:'';position:absolute;background: url(/images/01/img-ab-bg-2.png);background-size: cover;background-position: bottom;background-repeat:no-repeat;width: min(85% , 1165px);height: 750px;z-index: -9;top: -20px;right: 70px;}
#about_area .workframe {display: grid;justify-content: space-between;grid-template-columns: 39% 55%;align-items: end;width: min(90%, 1366px);margin-right: 170px;}
#about_area .info_box .text{line-height:2;text-align:justify;}
#about_area .info_box .sub_title  {position: absolute;display: flex;flex-direction: row-reverse;gap: 25px;top: -45px;right: 18%;align-items: flex-start;}
#about_area .info_box .sub_title span{background:white;writing-mode: vertical-lr;font-family: "Unbounded", sans-serif;color: #563d1c;font-size: 24px;text-transform: uppercase;display: inline-block;padding: 25px 10px;letter-spacing: 2px;}
#about_area .info_box .about_title   {position: absolute;top: 70px;writing-mode: vertical-lr;font-family: "Zen Maru Gothic", sans-serif;font-size: 30px;color: #563d1c;border-bottom: 4px solid var(--primary);line-height: 1;padding-bottom: 40px;font-weight: 600;letter-spacing: 6px;right: 28%;}
#about_area .info_box .pageh1, #about_area .areaTitle{font-size: 24px;color: var(--red);margin-bottom: 15px;font-weight: 500;letter-spacing: 1px;margin-top: 30px;}
#about_area .img_box{position:relative}
#about_area .img_box p{font-size:20px;margin-bottom:34px;letter-spacing:1px;font-weight:500}
#about_area .img_box img {width: 100%;height: 100%;border-radius: 30px;aspect-ratio: 5/3;}
#about_area .info_box article p{line-height:2.2;width: 70%;font-weight: 500;color: #563d1c;}
#about_area .projectBottomItem{display:grid;grid-template-columns:repeat(3,1fr);gap: 60px;margin-top:40px}
#about_area .projectBottomItem .item{position:relative;transition:all .2s linear;text-align: center;}
#about_area .projectBottomItem .item a{white-space:unset}
#about_area .projectBottomItem .item:not(:last-child):after{content:"";position:absolute;width:1px;height:60%;right:-30px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:#cbcbcb;z-index:5}
#about_area .projectBottomItem .item .Img{width: 50px;margin:auto}
#about_area .projectBottomItem .item .Img img{width:100%;aspect-ratio: 1/1;object-fit: contain;}
#about_area .projectBottomItem .item .Img::before,#about_area .projectBottomItem .item .Img::after{content:"";position:absolute;left:20%;width:10px;height:10px;border-radius:50%;background: #f4e2e2;animation:bubbles 3s ease-in-out infinite}
#about_area .projectBottomItem .item .Img::after { animation-delay: 1.5s; }
@keyframes bubbles {
  0% { transform: translate(-20%, 20px) scale(2.5); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(200%, -50px) scale(1); opacity: 0; }
}
#about_area .projectBottomItem .item:hover .Img img{animation:ripple 3s ease-in-out infinite}
@keyframes ripple {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,150,255,0)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgb(255 255 255 / 0%)); }
}
#about_area .projectBottomItem .item .Txt .title{text-align:center;margin-top:15px;font-weight:500;letter-spacing:1px;font-size: 15px;line-height: 1.3;}
#about_area .aboutimg1,#about_area .aboutimg2{position:absolute;top:0;right: 310px;}
#about_area .aboutimg1{top: 90px;}
#about_area .aboutimg1 img{animation:swim5 8s ease-in-out infinite}
@keyframes swim5 {
  0% { transform: translate(0,0) scale(1) rotate(0deg); filter: brightness(1); }
  25% { transform: translate(10px,-5px) scale(1.03) rotate(3deg); filter: brightness(1.05); }
  50% { transform: translate(-8px,5px) scale(0.98) rotate(-3deg); filter: brightness(0.95); }
  75% { transform: translate(6px,-3px) scale(1.02) rotate(2deg); filter: brightness(1); }
  100% { transform: translate(0,0) scale(1) rotate(0deg); }
}
#about_area .aboutimg2{top: 66%;right: 24%;width: 220px;}
#about_area .aboutimg2 img{animation:swim4 12s ease-in-out infinite;transform-origin:center}
@keyframes swim4 {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -5px) rotate(6deg); }
  50% { transform: translate(-5px, 8px) rotate(-6deg); }
  75% { transform: translate(8px, 3px) rotate(4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.aboutimg3{position:absolute;bottom: 50%;left: 40px;width: 220px;}
.aboutimg3 img{animation:swim1 10s ease-in-out infinite;transform-origin:center}
@keyframes swim1 {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  25% { transform: translateX(5px) rotate(2deg) scale(1.02); }
  50% { transform: translateX(-5px) rotate(-2deg) scale(0.98); }
  75% { transform: translateX(3px) rotate(1deg) scale(1.01); }
}

/* 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; }

/* news_area */
#news_area{background-repeat: no-repeat;background-position:50% 50%;background-size:cover;padding: 4vw 0 0;position: relative;}
#news_area::before {content: "";width: 280px;height: 251px;display: block;background-image: url(/images/01/img-ab-02.png);background-size: contain;background-repeat: no-repeat;background-position: 100% 100%;overflow: hidden;position: absolute;top: -46px;right: -9%;z-index: 32;-webkit-animation: about11_jump_2 3.2s infinite 0.8s;animation: about11_jump_2 3.2s infinite 0.8s}
@keyframes about11_jump_2 {
  0% { transform: translate(-50%,8%) scale(1,0.9) }
  50% { transform: translate(-50%,-10%) scale(1,1) }
  100% { transform: translate(-50%,8%) scale(1,0.9) }
}
#news_area .workframe{width:min(90%, 1650px);margin: 0;display: grid;grid-template-columns: 52% 42%;justify-content: space-between;}
#news_area .box{display:grid;grid-template-columns: 47% 50%;justify-content: space-between;}
#news_area .box .img:first-child {transform: translateY(-125px);overflow: hidden;height: 100%;background: #fff;position: relative;}
#news_area .box .img:first-child::before {content: "";position: absolute;inset: 0;z-index: 1;pointer-events: none;background: radial-gradient(circle at 18% 20%, rgb(244 197 197 / 48%) 0%, rgba(245, 203, 203, .18) 28%, transparent 55%), radial-gradient(circle at 88% 68%, rgb(172 187 195 / 45%) 0%, rgba(194, 226, 250, .22) 32%, transparent 62%), linear-gradient(120deg, rgba(255, 255, 255, .34) 0%, rgba(255, 248, 251, .22) 48%, rgb(219 229 235 / 34%) 100%);mix-blend-mode: screen;}
#news_area .box .img video {
  position:absolute;
  right:-120%;
  top:0px;
  height:100%;
  filter: brightness(1.15)  contrast(.8)  saturate(.72)  hue-rotate(14deg)  blur(.5px);
}
#news_area .titt { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
#news_area .area_title {display: inline-flex;flex-direction: column;align-items: baseline;margin-left: 50px;margin-top: 30px;}
#news_area .seemore  {margin-left: 40px;}
#news_list {margin: 3vw 0 0;}
#news_list li .item_row{margin:0;border-bottom: 1px solid #e0dbd4;padding: 40px 20px;position: relative;}
#news_list li .item_row:before{content:'';position: absolute;left: 0;bottom: -1px;width: 10px;height: 2px;background: var(--red);}
#news_list li:hover .item_row:before{width:100%}
#news_list .info_box {display:grid;grid-template-columns: 85px 1fr;gap: 40px;}
#news_list .info_box .time {font-size: 30px;color: var(--red);display: flex;flex-direction: column;align-items: center;font-weight: 600;}
#news_list .info_box .time b{display:flex;flex-direction: column;align-items: center;gap: 5px;color: #7d7d7d;font-weight: 500;font-size: 18px;}
#news_list .info_box .time b:before{content:'';width: 1px;height: 17px;background: #cac3b9;display: block;}
#news_list .info_box .h3 {margin: .2em 0 .5em;font-size: 20px;font-weight: 600;}
#news_list .info_box article {height: 3.2em;color: #7d7d7d;-webkit-line-clamp: 2;}


@media screen and (max-width: 1680px){
    #news_area .area_title b{line-height: 120%;}
    #about_area .projectBottomItem{width:90%}
    #about_area .workframe{width:75%;margin-right:120px}
	#about_area .aboutimg1{top:80px;right:-20px}
	#about_area .aboutimg1 img,#about_area .aboutimg2 img,.aboutimg3 img{width:73%}
	#about_area .aboutimg2{top:76%}
}
@media screen and (max-width: 1440px){
    #about_area:after{width: min(85%, 845px);}
    #news_area::before{top: -126px;width: 230px;height: 201px;}
}
@media screen and (max-width: 1400px){
    .aboutimg3{width: 170px;}
    #about_area:before{left: 110px;width: 70%;}
}
@media screen and (min-width: 1161px){
	#photo_area .item_row:hover { border-color: var(--primary); }
}
@media screen and (max-width: 1024px){
    #news_area{padding-top: 7vw;}
    #news_area .box .img:first-child{transform: translateY(-70px);height: 140%;}
    #news_area .box .img video{right: -50%;height: 190%;top: -180px;}
    #about_area .img_box{margin-top: 50px;}
    .aboutimg3{display:none}
    #about_area .workframe{margin: 0 auto;width: 90%;display: block;}
    #about_area:before{left:0;width: 100%;height: 100%;}
    #about_area:after{width:100%;height: 100%;z-index: -2;top: 0;right: 0;opacity: .5;}
    #news_list{width: 85%;margin: 0 auto;}
    #news_area .area_title{flex-direction: column-reverse;gap: 5px;margin-top: 0;}
    #news_area .workframe{grid-template-columns:1fr;width: 100%;}
    #news_area .titt .img{display:none;}
    #product_area .area_title{margin-right: 0;}
    #product_list .slick-list{height: 800px;}
}
@media screen and (max-width: 768px){
    #product_area #product_list .info_box{padding: 1.3em;}
    #news_area .titt{gap: 5px;width: 85%;margin: 0 auto;}
    #news_area .box{display:block;}
    #news_area .box .img:first-child{display:none;}
    #product_list .slick-list{height: 690px;}
    .section_area .area_title b{font-size:35px;}
    #product_area .area_title:before{zoom: 50%;}
	#about_area .img_box { width: 100%; max-width: inherit; }
	#about_area .info_box { order: 1; }
}
@media screen and (max-width: 640px) {
    #product_area .area_title{justify-content: center;display: flex;flex-direction: column-reverse;align-items: center;gap: 0;}
    #news_area .area_title{display:flex;flex-direction: column;margin-left: 0;}
    #news_area .seemore{margin:0}
    #news_list .info_box .time b:before{width:17px;height: 1px;}
    #news_list .info_box .time{font-size: 18px;display: flex;flex-direction: row;align-items: center;gap: 10px;}
    #news_list .info_box .time b{display:flex;flex-direction: row;align-items: center;gap: 10px;margin-*l: 0;}
    #news_list .info_box{grid-template-columns:1fr;gap: 20px;}
    #news_list li .item_row{padding: 35px 0;}
    #news_area::before{top: -66px;width: 130px;height: 101px;}
    #about_area .projectBottomItem{width:100%}
    .section_area .title_box .subtitle, #news_area .area_title b{font-size:40px}
    #product_list .btn button{width:65px;}
    #product_list .slick-list{height: 100%;}
    #product_list .btn{display:flex;margin: 40px 0 0;align-items: center;justify-content: center;}
    #product_area .list_box{margin-top: 6vw;}
    #product_area .list_box{margin-top:5vw}
    .section_area, #about_area, #news_area{padding: 10vw 0;}
    .section_area .area_title{font-size: 25px;}
    .section_area .area_title b{font-size: 15px;letter-spacing: .5px;display: none;}
    #product_area .area_title:before{display: none;}
	#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%; }
}