@import url('/css/animate.css');
.wow {animation: fadeIn 1.5s both;-webkit-animation: fadeIn 1.5s both;animation-duration: 1s;-webkit-animation-duration: 1s;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

/* section */
section {padding: 2vw 0 5vw;}
section >* { z-index: 3; }
section .title_box {margin-bottom: 20px;}
section .title_box font {text-transform: uppercase;line-height: 120%;letter-spacing: 2.4px;font-size: 100px;font-weight: 200;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;font-family: 'Cormorant Garamond', serif;color: rgb(155 126 108 / 12%);}
section .title_box h2 {font-weight: bold;font-size: 42px;line-height: 130%;color: var(--primary);position: relative;text-transform: uppercase;word-spacing: 100vw;}
section .decoText p, #productBox .title_box p,#news_area .title_box p{
    color: #4c3d33;
    font-size: 20px;
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif;
    text-transform: uppercase;
}
section.bg_box {background: no-repeat 50% / cover;background-attachment: fixed;padding: 4vw 0 4vw;}
section.bg_box:after { background: -webkit-linear-gradient(bottom,rgba(var(--secondary-rgb), 1) 0%,rgba(var(--secondary-rgb), .7) 100%); background: linear-gradient(to top,rgba(var(--secondary-rgb), 1) 0%,rgba(var(--secondary-rgb), .7) 100%); opacity: 1; }
.more_btn {margin-top: 0px;}
.more_btn a {width: 170px;padding: 7px 20px;color: #6b9c7e;border: 2px solid #6b9c7e;display: flex;align-items: center;justify-content: space-between;}
.more_btn font {text-align: left;font-weight: 600;text-transform: uppercase;letter-spacing: 3px;color: #6b9c7e;}
.more_btn.white a:before {content: "";width: 0;height: 100%;background: #6b9c7e;display: block;position: absolute;bottom: 5px;left: 0;z-index: -1;-webkit-transform: translate(0,5px);-ms-transform: translate(0,5px);transform: translate(0,5px);-webkit-transition: 0.3s;-o-transition: 0.3s;transition: 0.3s;}
.more_btn.white span {right: 30px;position: absolute;width: 80px;height: 1px;background: #000;display: block;right: 0;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
.more_btn.white:after {width: 252px;}
.more_btn.white span {position: absolute;width: 40px;height: 1px;background: #4f3c30;display: block;right: 20px;top: calc((100% - 1px) / 2);z-index: 3;-webkit-transition-duration: .2s;transition-duration: .2s;}
.more_btn.white span:before {position: absolute;width: 0;height: 0;border-style: solid;border-width: 0 16px 7px 0;border-color: transparent transparent #4f3c30 transparent;right: -1px;bottom: 50%;content: "";}
.more_btn.white svg {width: 35px;height: 35px;fill: #6b9c7e;}

section .track{position:absolute;bottom: -30px;left: -40px;z-index: 1;}
section .track p{font-weight:900;font-size:450px;margin:0;text-transform:uppercase;letter-spacing:2px;line-height:1;will-change:transform;color:transparent;-webkit-text-stroke:1px var(--primary);font-family: 'Cormorant Garamond', sans-serif;}
#about_area{position:relative;padding: 4vw 0 14vw;}
#about_area .title_box{position:relative}
#about_area .title_box p{position:absolute;left: -200px;top: -70px;}
#about_area .nowrap_box{width: 83%;display:flex;align-items:flex-start;flex-direction: row;margin-right: 0;padding: 0px 0 190px;}
#about_area .nowrap_box .deck02,#about_area .nowrap_box .deck03{position:absolute;z-index:10}
#about_area .nowrap_box .deck02{left: -520px;bottom: -170px;}
#about_area .nowrap_box .deck02 img,#about_area .nowrap_box .deck03 img{width: 100%;}
#about_area .nowrap_box .deck03{bottom:-120px;right:-170px}
#about_area .nowrap_box .info_item{text-align:left;width: 36%;}
#about_area .aboutAreaBG{position:absolute;height: 100%;width:0;top: 0;left: 0;background: #ccbcad;opacity: 0.3;z-index: 0;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;}
#about_area .img_item{margin: 10px 0 0;order:1;position:absolute;right: 0;top:0;width: 53%;}
#about_area .img_item img{width:100%}
#about_area .info_item article{margin-bottom: 30px;line-height:180%;letter-spacing:0.5px;font-weight:300;color:#000;}
#about_area .info_item article .info h3{padding:5px 0 10px 0;font-size:26px;color:var(--primary);font-weight:600;letter-spacing:0.5px;line-height:160%}
#about_area .info_item article .info p,#productBox .info .title_box h3{width:100%;margin-top: 20px;line-height:200%;letter-spacing: 0px;font-weight: 500;color: #5e5046;font-size: 17px;}
#about_area .info_item article .info .textEditor{
    margin-top: 30px;
    width: 90%;
}
#about_area .info_item article .info .textEditor ol{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#about_area .info_item article .info .textEditor ol li{line-height:180%;font-weight: 400;letter-spacing: 2.5px;padding: 6px 20px;width: auto;text-align: center;margin-right: 15px;margin-bottom: 15px;background-color: #4c3d33;color: #fff;font-size: 20px;}

#about_area.tooolong .aboutAreaBG{width: 70%;}
#about_area:before{content:'';position:absolute;height: 80%;width: 21%;top:0;left:-130px;background: #ffffff;z-index:2;opacity: 0.6;}
@keyframes bgWhirligig-2{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

.list_box .info_box h3{height:30px;font-weight:400;font-size:18px;color:#fff;margin:0px 0 0}
#service_area{margin:0;position:relative;padding: 7vw 0 4vw 0;}
#service_area .serviceBox{height:660px;margin-left:180px;width:calc(100% - 740px);padding:0;position:relative}
#service_area .info_item .title_box p{position:absolute;right:-310px}
#service_area .info_item{position:absolute;right:490px;top:180px;height:300px;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl}
#service_area .title_box h2{margin-left:30px;line-height: 100%;}
section .title_box h3{font-size: 17px;font-weight:400;letter-spacing: 0.5px;line-height: 190%;}
#service_area .track{right:0;left:auto;bottom:-150px}
#service_area .processList .ImgBox{right:0;position:absolute;bottom:200px;left:calc(100% - -10px);z-index:55;width:140px;height:40px;-webkit-transform-origin:bottom center;transform-origin:bottom center}
#service_area .processList .ImgBox .title{position:relative;text-align:right;color:#5f5f5f;font-weight:500}
#service_area .processList .focus .ImgBox .title{color:var(--primary)}
#service_area .processList .ImgBox .title:before{content:'';position:absolute;width:100%;height:1px;top:40px;right:0;z-index:0;background-color:#d5d5d5}
#service_area .processList .focus .ImgBox .title:before{width:300%;background-color:var(--primary)}
#service_area .serviceBox .processList .listItem:nth-child(1) .ImgBox{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
#service_area .processList .listItem:nth-child(1) .Txt{opacity:0}
#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom:150px}
#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:100px}
#service_area .serviceBox .processList .blur .Txt{-webkit-transform: translate(0%,-200%);transform: translate(0%,-200%);}
#service_area .serviceBox .processList .focus .Txt{-webkit-transform: translate(0%,-50%);transform: translate(0%,-50%);transition: all 0.5s;}
@media (min-width:361px) and (max-width:640px){#service_area .processList .listItem{left:calc(50% - 30px);width:60px}
}
@media (max-width:360px){#service_area .processList .listItem{left:calc(50% - 25px);width:50px}
}
#service_area .processList .listItem .Txt{opacity:0;display:none;visibility:visible;right:0;text-align:center;transition: all 0.5s;}
#service_area .processList .listItem:nth-child(1) .Txt{opacity:1;display:block}
#service_area .processList .listItem .Img .title{letter-spacing:0.5px;font-weight:400}
#service_area .processList .focus .Txt{opacity: 0;transform:translate(-20%,0%);display:block;z-index:5;position:absolute;top:0;right:0}
#service_area .processList .listItem .Txt .img{position:relative;padding:0 30px 30px 0}
#service_area .processList .listItem .Txt .img img{width:840px;height:580px;object-fit:cover}
#service_area .processList .focus .Txt .img:before{content:'';position:absolute;height:86%;width:86%;bottom:0;right:0;background:rgb(238 238 238 / 83%);z-index:-1}
#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt{width:840px;height:580px;top:50%;left:0;transform: translate(0%,-50%);display:block;position:absolute;z-index:-15;padding:20px 0;opacity:1;transition: all 0.5s;}
#service_area .processList .listItem .Txt .text{font-size:50px;font-weight:900;line-height:120%;margin-top:20px;background-size:20%;position:absolute;width:380px;left:-30px;bottom:0;background-color:var(--primary);padding:50px}
#service_area .processList .listItem .Txt span{position:absolute;right:40px;top:-30px;font-size:40px;font-weight:300;font-family:'Cormorant Garamond',sans-serif}
#service_area .processList .listItem .Txt .text,#service_area .processList .listItem .Txt span,#service_area .processList .listItem .Txt .text-clamp,#service_area .processList .listItem .Txt .boxtext{color:#fff}
#service_area .processList .listItem .Txt .titleSub{font-style:initial;color:var(--triadic2)}
#service_area .processList .listItem .Txt .text-clamp{font-size:22px;padding-bottom:10px;letter-spacing:0.5px}
#service_area .processList .listItem .Txt .boxtext{font-weight:400;font-size:16px;color:#9ba2ba}
#service_area .processList .listItem .Txt .more{margin-top:10px}
#service_area .processList .focus .Img img:first-child{opacity:1;-webkit-filter:contrast(0) brightness(200%);filter:contrast(0) brightness(200%)}
#service_area .processList .listItem.active .Img img:nth-child(2),#service_area .processList .listItem:hover .Img img:nth-child(2){opacity:1;visibility:visible}
#service_area .processList .listItem.active .Img::before,#service_area .processList .listItem:hover .Img::before{opacity:1}
#service_area .ServiceBG{position:absolute;height: 430px;width: 85%;bottom: 0;left: 0;background: #fffcf5;z-index: 0;transition:all 3.1s ease-in-out;-webkit-transition:all 3.1s ease-in-out}
#service_area.tooolong .ServiceBG{height: 90%;}


/* newsBox */
#secabout{padding:6vw 0 4vw;position:relative}
#secabout .track{left:auto;right:-90px;top: -310px;}
#secabout .SecaboutBG{position:absolute;height:120%;width:0;bottom:0;left:0;background: #ccbcad;opacity: 0.3;z-index:0;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;}
#secabout.tooolong .SecaboutBG{width: 100%;}
#Service_area{background-image:url(/images/39/img-s-bg.jpg);padding:8vw 0}
#Service_area .title_box .page_title{color:#fff}
#news_area{
    position: relative;
    padding: 7vw 0px 9vw;
}

#news_area .title_box h2{
    word-spacing: normal;
}
#news_area .title_box{
    position: relative;
    display: flex;
}
#news_area .title_box:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    background: url(/images/39/quote.png)no-repeat;
    background-size: contain;
    margin-right: 30px;
    top: 40px;
}
#news_area .list_box{margin: 70px 0 0 auto;max-width: 80%;overflow: inherit;}
#news_area ul li .item{border: 1px solid #bababa;padding:80px 40px 40px;position:relative;margin-top:60px;border-radius: 20px;}
#news_area ul li .item .Txt{position:absolute;top:-40px}
#news_area ul li .item .Txt .date{width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background-color: #6b9c7e;}
#news_area ul li .item .Txt .date P{line-height:100%;color: #ffffff;font-family: 'Italiana',sans-serif;}
#news_area ul li .item .Txt .date .big{font-size: 45px;line-height: 110%;}
#news_area ul li .item .intro h3{color: #383838;font-size:20px}
#news_area ul li .item .intro article{color: #5c5c5c;}
#news_area::after{content:"";width: 480px;height: 440px;display:block;background-image: url(/images/39/img-n-01.png);background-size: cover;background-repeat:no-repeat;background-position: 50% 0%;position:absolute;bottom: -50px;left: -30px;z-index: 2;}
#news_area::before{content:"";width: 95%;height:100%;display:block;background-image: url(/images/39/img-n-bg.png);background-size:cover;background-repeat:no-repeat;background-position: 100% 20%;position:absolute;bottom: 0;left:0;z-index: 1;}
#news_area .SecBG{position:absolute;height: 80%;width:0;top: -200px;left:0;background: #ccbcad;opacity: 0.3;z-index: 0;transition: all 1.1s ease-in-out;-webkit-transition: all 1.1s ease-in-out;}
#news_area.tooolong .SecBG{width: 100%;}

/* productBox */
#productBox .wrapBg.diamond{width:390px;height:100%;background:#f5f5f5;-webkit-transform:rotate(0deg);-moz-transform:rotate(0eg);transform:rotate(0deg);top:0px;left:0}
#productBox .bg{opacity:1.2}
#productBox >.info{margin: auto;display:flex;align-items:flex-start;position:relative;width: 80%;}
#productBox .title_box{width: 500px;margin-right: 100px;}
#productBox .title_box h3{margin-top:20px;padding: 10px 0 0;}
#productBox .more_btn{margin-top:40px;position: relative;}
#productBox .info .titleBox{width:250px;margin-right:30px;margin-top:15px}
#productBox .info .title_box::after{content:"";width:190px;height:1px;display:block;background: #b7a294;-webkit-transition:0.6s;transition:0.6s;position:absolute;top: 15px;left:-220px}
#productBox .info .title_box .service_notice{
    background: url(/images/39/service_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    padding: 110px 50px;
    max-width: 80%;
    transition: all .5s ease;
    margin: 50px auto 30px;
}
#productBox .info .title_box .service_notice h2{
    margin-bottom: 20px;
    font-size: 26px;
}

#productBox .info .title_box .service_notice ul{margin-top: 20px;position: relative;}
#productBox .info .title_box .service_notice ul li {
    font-weight: 500;
    position: relative;
    padding: 0 30px 10px;
    display: flex;
    justify-content: space-between;
}
#productBox .info .title_box .service_notice ul li::before {
    content: "";
    width: 8px;
    height: 8px;
    display: block;
    background-color: #e37752;
    position: absolute;
    top: 11px;
    left: 9px;
}
#productBox .info .title_box .service_notice ul::before {
    content: "";
    width: 1px;
    height: calc(100% - 30px);
    display: block;
    background-color: rgb(30 30 30 / 17%);
    position: absolute;
    top: 0;
    left: 12px
}
#productBox .info .title_box .service_notice ul li span{
    color: #5e5046;
    font-weight: 400;
}
#productBox .info .title_box .service_notice ul li b{
    font-weight: 400;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
}
#portfolio{width: calc(100% - 600px);padding: 40px;background: url(/images/39/portfolio_bg.png);background-size: cover;}
#portfolio ul{
    display: flex;
    flex-wrap: wrap;
}
#portfolio ul li{position:relative;width: calc((100% / 2) - 20px);margin: 10px 10px;}
#portfolio ul li a{position:absolute;width:100%;height:100%;display:block;top:0;left:0;z-index:10}
#portfolio ul li >div{overflow:hidden;position:relative}
#portfolio ul li .img img{position:relative;width:100%;height: 100%;object-fit:cover;z-index:1;transition:1s;-moz-transition:1s;-webkit-transition:1s;-o-transition:1s}
#portfolio ul li .info{overflow:visible;position: relative;padding: 10px 20px 10px;width: calc(100% - 40px);z-index:2;}
#portfolio ul li .info .price{position:absolute;padding:5px 15px;background:rgb(0 0 0 / .6);top:-39px;left:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#portfolio ul li .info .price font{margin:0 10px;display:inline-block;font-weight:300;color:#fff}
#portfolio ul li .info .price font.old{color:rgb(255 255 255 / .4)}
#portfolio ul li .info h2{
    font-size: 21px;
    color: #4f3c30;
}
#portfolio ul li .info h3{margin-top: 5px;font-weight: 500;font-size: 15px;letter-spacing:1.5px;border-top: 1px solid #ddd;font-size: .9rem;padding-top: 10px;}
#portfolio ul li .info article{height:30px;display: inline-block;background: #fff;position: absolute;transform: translate(0px, -100%);top: 0px;left: 0;padding: 20px 20px 20px;border-top-right-radius: 20px;font-size: 1.33rem;font-weight: 700;color: #6b9c7e;letter-spacing: 1px;line-height: 1;}
#portfolio .more{margin-top:50px}
#portfolio .more a svg.arrow{position:absolute;width:20px;right:7px;top:calc((100% - 11.41px) / 2)}

/* book_area */
#book_area .row img { height: 400px; }
#book_area .row .info_box { padding: 100px 15px 60px; width: calc(100% - 30px); background: -webkit-linear-gradient(top,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); background: linear-gradient(to bottom,transparent 0,rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); bottom: -20px; left: 0; }

@media screen and (max-width: 1680px){
	#about_area .nowrap_box{/* margin-right:250px; */}
	#service_area .info_item .title_box p{right:-200px}
	#service_area .info_item{right:350px}
	#service_area .processList .ImgBox{left:calc(100% - -40px);}
	#productBox >.info{width: 90%;}

}
@media screen and (max-width: 1560px){
	#service_area .serviceBox{margin-left:90px;width:calc(100% - 640px)}
#about_area .info_item article .info .textEditor{
    width: 100%;
}
	#about_area .info_item article .info .textEditor ol li{
    padding: 6px 12px;
    margin-right: 8px;
    margin-bottom: 10px;
    font-size: 16px;
}
	section .title_box h2{
    font-size: 36px;
}
}
@media screen and (max-width: 1440px){
	#service_area .serviceBox{margin-left:60px;width:calc(100% - 620px)}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{width:750px;height:500px}
	#service_area .info_item .title_box p{right:-220px}
	#service_area .info_item{right:390px}
	#service_area.tooolong .ServiceBG{width:80%}
	#about_area .nowrap_box{/* margin-right:150px; */padding: 0px 0 100px;}
	#about_area.tooolong .aboutAreaBG{width:960px}
	#about_area .nowrap_box .info_item{width: 40%;}
	#about_area .img_item img{width:95%}
	#about_area .nowrap_box .deck02 img,#about_area .nowrap_box .deck03 img{width:65%}
}
@media screen and (max-width: 1366px) {
	#service_area .info_item .title_box p{right: -160px;}
	#service_area .info_item{right: 350px;}
	#service_area .processList .ImgBox{left: calc(100% - -50px);}
}
@media screen and (min-width: 1281px){
	.more_btn.white a:hover { color: #fff; }
	.more_btn.white a:hover:before { width: 100%; }
	.more_btn.white a:hover svg{
    fill: #ffffff;
}
	.more_btn.white a:hover font{
    color: #ffffff;
}
	#about_area .d_flex { align-items: center; }
	#book_area .row:hover .info_box { bottom: 0; }
	#portfolio ul li:hover .img img , #bookBox .list ul li:hover .img img {-moz-transform: scale(1.05);-o-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
}
@media screen and (max-width: 1280px){
	section .title_box font{font-size:20px}
	#about_area .nowrap_box{width: 85%;}
	#about_area .img_item{/* left:70px; */}
	#about_area .img_item:before,#about_area .img_item img{width:100%}
	#about_area .img_item img{height:100%;width: 100%;}
	section .title_box h2{
    font-size: 33px;
}
	#news_area .title_box:before{
    width: 30px;
    height: 30px;
    margin-right: 20px;
}
	section .title_box h3{font-size:18px;padding:10px 0 0}
	#service_area .processList .listItem .Txt .text-clamp{font-size:20px}
	#service_area .processList .listItem .Txt .text{padding:30px}
	#service_area .processList .listItem .Txt .boxtext{font-size:14px}
	#service_area .info_item .title_box p{right:-140px}
	#service_area .info_item{right:300px}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{width:670px;height:460px}
	#service_area .processList .ImgBox{left:calc(100% - -100px)}

}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
}

@media screen and (max-width: 1140px){
	#about_area .nowrap_box{display:flex;flex-direction: column-reverse;align-items:flex-start;width:90%;margin:auto;padding:0px 0 0;align-content:flex-start}
	#about_area:before,#about_area::after{display:none}
	#about_area .nowrap_box .info_item,#about_area .img_item{margin:0;width:100%;position:relative;left:0}
	#about_area .img_item{margin: 50px 0 30px auto;}
	#about_area .info_item article{width:100%;padding:0;margin-bottom:20px}
	#about_area .more_btn{position:relative;left:0}
	#about_area .nowrap_box:before,#about_area .title_box p,#about_area .nowrap_box .deck02,#about_area .nowrap_box .deck03,section .track,#about_area.tooolong .aboutAreaBG,#secabout .SecaboutBG,#productBox .info .title_box::after{display:none}
	#about_area .img_item img{object-fit:cover;}
	#productBox >.info{display:flex;flex-direction:column;margin: 0 40px;width: calc(100% - 80px);}
	#productBox .title_box,  #newsBox .info .row{width:100%;margin: 0;}
	#portfolio{
    width: calc(100% - 80px);
    padding: 40px;
}
	#productBox .info .title_box h3{margin-top:0}
	#productBox .more_btn{margin-top:20px}
	#portfolio ul{display:flex;flex-direction: row;flex-wrap: wrap;}
	#portfolio ul li{width: calc((100% / 2) - 30px);}
	#portfolio ul li .img img{/* height:250px; */}
	#service_area .info_item .title_box p{right:-130px}
	#service_area .info_item{right:190px}
	#service_area .processList .ImgBox{left:calc(100% - -260px)}
	#service_area.tooolong .ServiceBG{width:90%}
#about_area{
    padding: 4vw 0 4vw;
}
	#productBox .info .title_box .service_notice{
    max-width: 40%;
}
}

@media screen and (max-width: 1024px){
	#about_area{padding:6vw 0 4vw}
	#about_area .img_item{width:100%;margin: 50px 0 0px auto;order:inherit}
	#about_area .img_item:before{border:0;top:0;right:0;z-index:2}
	#about_area .info_item{margin-top:0px;z-index:4}
	#about_area::after{top:-283px;width:950px;height:870px}
	#service_area.tooolong .ServiceBG{width:100%;height:100%}
	#service_area .info_item{position:absolute;right:auto;left:20px;-webkit-writing-mode:initial;-ms-writing-mode:initial;writing-mode:initial;height:0;width:auto;top:auto;bottom:210px}
	#service_area .title_box h2{margin-left:0}
	#service_area .info_item .title_box p{display:none}
	#service_area{padding:8vw 0 28vw 0;position:relative}
	#service_area .serviceBox{height:580px;margin:0 30px;width:calc(100% - 60px)}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{width:100%;height:420px;padding:0}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem:nth-child(2) .Txt,#service_area .processList .listItem:nth-child(3) .Txt{transform:translate(0%,-70%)}
	#service_area .processList .listItem .Txt .img{padding:0}
	#service_area .processList .listItem .Txt .text{position:relative;width:calc(100% - 60px);left:0;margin-top:0}
	#service_area .processList .ImgBox{left:calc(100% - 140px);bottom:-70px}
	#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom:-120px}
	#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:-180px}
#news_area .list_box {
    margin: 20px auto 40px;
    overflow: inherit;
}
	#news_area::after{
    display: none;
}
	#news_area{
    padding: 6vw 0px 6vw;
}
		#news_area::before{
    width: 100%;
}
#news_area .title_box:before{
    display: none;
}
}
@media screen and (max-width: 960px){
	.list_box .info_box h3{margin: 0;}
}
@media screen and (max-width: 768px){
	#book_area .row img { height: 350px; }
}
@media screen and (max-width: 640px){
	#about_area{padding: 7vw 0 5vw;}
	#about_area .img_item{width:100%}
	#about_area .img_item:before{background:rgba(var(--secondary-rgb),0)}
	#about_area .info_item{margin-top:40px}
	#about_area::after{top:-370px;background-position:top}
	#about_area:before{right:-160px;top:330px;background-size:90%;background-repeat:no-repeat}
	#about_area .info_item article .info h3{font-size:22px;padding:5px 0 0px 0}
	#about_area .img_item img{}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{height:340px}
	#service_area .serviceBox{height:460px}
	#service_area{padding:8vw 0 43vw 0}
	#service_area .processList .ImgBox{bottom:-120px}
	#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom:-170px}
	#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:-220px}
	#service_area .processList .focus .ImgBox .title:before{width:120%}
	#service_area .info_item{bottom:200px}
}
@media screen and (max-width: 500px){
	section .title_box h2{font-size: 25px;}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem .Txt .img img{height:230px}
	#service_area .serviceBox{height:380px}
	#service_area .processList .focus .Txt,#service_area .processList .listItem:nth-child(1) .Txt,#service_area .processList .listItem:nth-child(2) .Txt,#service_area .processList .listItem:nth-child(3) .Txt{transform:translate(0%,-80%)}
	#service_area{padding:8vw 0 55vw 0}
	#service_area .processList .ImgBox{bottom:-80px}
	#service_area .serviceBox .processList .listItem:nth-child(2) .ImgBox{bottom:-130px}
	#service_area .serviceBox .processList .listItem:nth-child(3) .ImgBox{bottom:-180px}
	#service_area .info_item{bottom:180px}
	#service_area .processList .listItem .Txt .text{width:calc(100% - 40px);padding:20px}
	#portfolio ul li{width: calc((100% / 1) - 0px);}
	#portfolio{
    width: calc(100% - 40px);
    padding: 20px;
}
	#productBox >.info {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
    width: calc(100% - 40px);
}
	#productBox .info .title_box .service_notice {
    max-width: 80%;
}
}