.section_area {padding: 5vw 0;position: relative;}
.section_area .area_title {text-transform: uppercase;position: relative;padding-bottom: .3em;text-align: center;font-family: "Lora", serif;letter-spacing: 3px;}
.section_area .h2title  {font-weight: 500;font-size: 40px;color: var(--info);font-family: "Yuji Boku", serif;letter-spacing: 12px;display: inline-flex;align-items: center;gap: 40px;}
.section_area .h2title:before{content:'';width: 1px;height: 30px;background: var(--info);display: block;}
.section_area .h2title:after{content:'';width: 1px;height: 30px;background: var(--info);display: block;}
.section_area .more_btn {padding: 0 .5em 1em;display: inline-flex;gap: 30px;align-items: center;position: relative;}
.section_area .more_btn:hover svg{transform:rotate(45deg);}
.section_area .more_btn:after{content:'';height: 2px;width: 100%;position: absolute;bottom: 0;right: 0;background: var(--g_charcoal);}
.section_area .more_btn:hover:after{width:0}
.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 */
#wrap .track{width:100vw;max-width:100%;overflow:hidden;white-space:nowrap;margin: 4.5vw 0 0;}
#wrap .track p{animation: marquee 35s linear infinite;}
#wrap .track p img{height: 100px;margin: 0 1vw;object-fit: contain;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* product_area */
#product_area{overflow:hidden;background-repeat: no-repeat;background-position: 50% 100%;background-size:cover;}
#product_area:before{content:url(/images/01/Vector.png);position: absolute;bottom: -5%;left: -7%;zoom: 50%;transform: scaleY(-1);}
#product_area .workframe{position:relative;z-index: 2;}
#product_area .workframe:before{content:url(/images/01/img-temple.png);position: absolute;top: -10%;right: -5%;zoom: 50%;opacity: .25;animation: aboutImgAnimation 5s ease-in-out infinite;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(30px);transform:translateY(30px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#product_area .titboxx, #news_area .titboxx{display:flex;flex-direction: column;align-items: center;}
#product_area .titboxx *{color:white;text-align:center;}
#product_area .h2title:after, #product_area .h2title:before{background:white;}
#product_area ul li {overflow: hidden;position: relative;padding: 0 24px;display: inline-block;vertical-align: top;transition: all linear .3s;-webkit-animation: anim-scale .5s ease-out;animation: anim-scale .5s ease-out;}
#product_area ul li .bookStyle {margin: 90px auto 0;position: relative;-webkit-transition-delay:0s;transition-delay:0s;}
#product_area ul li .info {padding-bottom: 0;-webkit-transition: opacity 0.15s,-webkit-transform 0.15s;transition: opacity 0.15s,transform 0.15s;display: flex;flex-direction: column;align-items: center;position: relative;}
#product_area ul li .info .h3 {-ms-writing-mode: tb-lr;writing-mode: vertical-lr;margin-bottom: 30px;padding: 0;text-overflow: ellipsis;white-space: nowrap;display: flex;align-items: center;gap: 15px;}
#product_area ul li .info .h3 font{margin-right: 4px;}
#product_area ul li .info .h3 *{color:white;font-weight: 400;letter-spacing: 4.5px;line-height: 1;font-size: 22px;}
#product_area ul li .info p {margin: -50px 0 0;text-align: center;letter-spacing: .8px;font-weight: 300;font-size: 15px;color: rgb(255 255 255 / 60%);opacity: 0;-webkit-transition-delay:0s;transition-delay:0s;-webkit-line-clamp: 2;height: auto;padding: 0 5%;}
#product_area ul li.slick-center .info p {margin: 0 0 10px;opacity: 1;-webkit-transition-delay:.5s;transition-delay:.5s;}
#product_area ul li.slick-center .bookStyle {margin: 0;-webkit-transition-delay:.5s;transition-delay:.5s;}
#product_area .btn{position: relative;padding: 0;display: block;}
#product_area .btn a {position: absolute;width: 26px;height: 26px;border: solid #fff;display: block;top: calc(100% - 290px);z-index: 20;}
#product_area .btn a#product_prev {border-width: 1px 0 0 1px;transform: rotate(-45deg);left: 0;}
#product_area .btn a#product_next {border-width: 1px 1px 0 0;transform: rotate(45deg);right: 0;}
#product_area:after{content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;background-image:url(/images/01/index-bg-bling.png);background-repeat:no-repeat;background-position:0 0;animation-name:indexbling;animation-iteration-count:infinite;animation-duration:5s;opacity:-1;z-index: 1;}
@keyframes indexbling{0%{background-position:-100% -100%;opacity:0.3}50%{opacity:1}100%{background-position:300% 300%;opacity:0.3}}
@keyframes fish{0%{transform-origin:right bottom;transform:rotate(-3deg);}100%{transform-origin:right bottom;transform:rotate(3deg);}}
#product_area ul .slick-prev:before,#product_area ul .slick-next:before { padding: 10px; background: #b3b3b3; border-radius: 35px; display: inline-block; font-size: 23px; font: normal normal normal 14px/1 FontAwesome; content: "\f053"; color: #fff; }
#product_area ul li:before {position: absolute;display: block;bottom: 20%;right: -35%;z-index: 1;opacity: 0;content: url(/images/01/img-spoon.png);zoom: 20%;animation-name: fish;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 2s;}
#product_area ul li.slick-center:before {opacity: 1;-webkit-transition-delay:1s;transition-delay:1s}

/* about_area */
#about_area {background-image: url(/images/01/texture_bg_gray.jpg);background-repeat:no-repeat;background-position: top right;background-size:cover;padding-top: 0;}
#about_area:before{content:url(/images/01/img-a01.png);position: absolute;zoom: 50%;bottom: 26%;left: 2%;}
#about_area .workframe {display: grid;align-items: stretch;grid-template-columns: 70px 30% 60%;justify-content: space-between;width: 85%;margin-right: 0;}
#about_area .h2title {display:block;font-family: var(--font-family), sans-serif;letter-spacing: 0;color: var(--g_charcoal);font-size: 28px;word-spacing: 100vw;margin: 10px 0 30px;}
#about_area .h2title:before, #about_area .h2title:after{display:none;}
#about_area .titt {writing-mode: vertical-lr;font-size: 36px;font-family: "Yuji Boku", serif;letter-spacing: 20px;position: relative;margin-top: 5vw;}
#about_area .titt:after{content:'';background:url(/images/01/icon-L.svg);position: absolute;top: 32%;left: 0;width: 20px;height: 30px;background-repeat: no-repeat;background-position:50% 50%;background-size: contain;}
#about_area .info_box {    margin-top: 5vw;}
#about_area .info_box h2 { margin-bottom: 1em; }
#about_area .img_box {display: grid;grid-template-columns: 45% 270px 150px;gap: 50px;align-items: end;}
#about_area .img_box .one{margin-bottom: 100px;}
#about_area .img_box .one img{aspect-ratio:95 / 145}
#about_area .img_box .two{    animation: aboutImgAnimation 15s ease-in-out infinite;}
#about_area .img_box .two img{aspect-ratio:11 / 16}
#about_area .img_box .three{margin-bottom: 230px;}
#about_area .img_box .three img{aspect-ratio:30 / 47}
#about_area .img_box img { width: 100%; height: 100%; }
#about_area article{margin-bottom: 60px;}
#about_area article p{color:#333;line-height: 2.2;text-align: justify;width: 90%;}

/* 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_list */
#news_list .slick-slider{transition: all 0s ease-in-out;-webkit-transition: all 0s ease-in-out;}
#news_list .img_box {aspect-ratio: 3/3;}
#news_list .info_box {margin-top: 1em;}
#news_list .info_box .time {font-size: .9em;color: var(--g_500);font-family: "Arimo", sans-serif;}
#news_list .info_box .h3 {margin: .2em 0 .5em;height: auto;font-size: 20px;}
#news_list .info_box article {font-size: .9em;color: var(--g_600);-webkit-line-clamp: 2;height: auto;}

/* other_area */
#other_area{background-image: url(/images/01/otherBg.jpg);background-repeat:no-repeat;background-position:50% 50%;background-size:cover;padding: 9vw 0;}
#other_area ul{display:flex;justify-content: center;gap: 50px;flex-wrap: wrap;}
#other_area li{border: 1px solid rgb(255 255 255 / 20%);background: rgb(28 28 28 / 20%);width: 25%;}
#other_area li:hover{background: #7e2824;border-color: #7e2824;}
#other_area li .h3{color:white;display: flex;font-size: 18px;font-weight: 400;letter-spacing: 1px;padding: 25px 30px;align-items: center;justify-content: space-between;}
#other_area li:hover .h3 svg{transform:rotate(45deg);}

@media screen and (min-width: 1281px){
    #other_area{background-attachment: fixed;}
}
@media screen and (max-width: 1680px){
    #about_area:before{zoom: 35%;}
    #about_area .titt:after{top: 37%;}
}
@media screen and (max-width: 1280px){
    #product_area ul li:before{zoom:15%}
}
@media screen and (max-width: 1100px){
    #about_area article p{width:100%;}
    #about_area:before{bottom: 46%;left: unset;right: 15%;}
    #about_area .info_box{margin:0}
    #about_area .titt:after{left: 23%;}
    #about_area .titt{writing-mode:unset}
    #about_area .workframe{width:90%;margin: 0 auto;grid-template-columns: 1fr;gap: 20px;}
}
@media screen and (max-width: 768px){
    #product_area .workframe:before{zoom: 30%;}
    #other_area ul{gap: 20px;width: 85%;margin: 0 auto;}
    #other_area li{width:100%;}
    .section_area{padding:10vw 0}
    #about_area .titt:after{left: 31%;}
    #product_area ul li:before{zoom: 22%;bottom: 35%;right: -17%;}
	#about_area .img_box { width: 100%; max-width: inherit; }
	#about_area .info_box { order: 1; }
}
@media screen and (max-width: 640px){
    #about_area .info_box{margin-top: 20px;}
    #about_area:before{bottom: unset;right: 1%;top: 10%;zoom: 27%;}
    #about_area .img_box .three{display:none;}
    #about_area .img_box{grid-template-columns: 45% 30%;}
    #about_area .workframe{display:flex;flex-wrap: wrap;}
    #about_area .titt:after{left: unset;}
    #about_area{padding-top:6vw}
    #product_area:before{zoom: 30%;}
    #product_area ul li:before{zoom: 11%;bottom: 25%;right: -17%;}
    .section_area .h2title{font-size: 30px;}
	#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%; }
}
@media screen and (max-width: 550px){
	#product_list {margin: 8vmax auto 0;}
}