#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .clip { margin: auto; width: 100%; }
section .clip img { height: 100%; }
section .clip iframe { width: 100%; height: 100%; top: 0; left: 0; }
section .clip video { width: auto; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
section .title_box{margin-bottom:40px}
section .title_box font{font-weight: 400;font-size: 50px;line-height: 1.2;color: var(--primary);font-family: "EB Garamond", serif;}
section .title_box font:before{content:'';display: block;width: 13px;border: 1px solid var(--primary);aspect-ratio: 1/1;border-radius: 50px;margin-left: -20px;}
section .title_box h2{font-weight:500;letter-spacing: 3px;font-size: 28px;}


/* product_area */
#product_area .title_box p{margin-bottom: 20px;}
#product_area .title_box h2{ word-spacing: 100vw;}
#product_area .title_box article{margin-top:30px;font-size: 15px;line-height: 2.4;word-break: keep-all;letter-spacing: 2.5px;}
#product_area{position:relative;background-image: url(/images/44/pageDeck01.png);background-repeat: no-repeat;background-position: top left;background-size: 38.3%;}
#product_area .workframe{width: min(90%, 1500px);display: grid;grid-template-columns: 30% 63%;justify-content: space-between;margin-top: 100px;align-items: end;}
#product_area .applicationList{display: grid;width:100%;grid-template-columns: repeat(3, 1fr);gap: 35px;margin-bottom: 30px;}
#product_area .applicationMList{border:1px solid rgba(220,220,220,0.25)}
#product_area .applicationItem{padding: 40px 0 55px;margin:0;display: block;box-shadow: 0 0 30px rgb(114 47 55 / 10%);}
#product_area .applicationItem:nth-child(3){order:2}
#product_area .applicationItem.title .item{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:50px 25px 54px 25px}
#product_area .applicationItem.title .item .more_btn{position:relative;margin:5px}
#product_area .more_btn.white a::after{}
#product_area .more_btn.white a:hover font{color:#ffffff}
#product_area .more_btn.white font{}
#product_area .applicationItem .item:hover .Img{-webkit-filter:initial;filter:initial;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}
#product_area .list_box .item{position:relative;display: grid;grid-template-columns: 100px 1fr;}
#product_area .item .atag_item{z-index: 2;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#product_area .Img{position:absolute;z-index:3;display: flex;align-items: center;justify-content: center;right: 0;}
#product_area .Img::after{background:rgb(198 208 227 / 60%);content:"";display:block;width: 60px;aspect-ratio: 1/1;position:absolute;border-radius:50%;z-index:-1}
#product_area .applicationItem:not(.title) .item:hover .Img::before{-webkit-animation:masterBtnHover 2s linear infinite;animation:masterBtnHover 2s linear infinite}
@-webkit-keyframes masterBtnHover{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
20%{opacity:0.5;-webkit-transform:scale(1.4);transform:scale(1.4)}
40%{opacity:0.25;-webkit-transform:scale(1.8);transform:scale(1.8)}
60%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
100%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
}@keyframes masterBtnHover{0%{opacity:0;-webkit-transform:scale(1);transform:scale(1)}
20%{opacity:0.5;-webkit-transform:scale(1.4);transform:scale(1.4)}
40%{opacity:0.25;-webkit-transform:scale(1.8);transform:scale(1.8)}
60%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
100%{opacity:0;-webkit-transform:scale(2.2);transform:scale(2.2)}
}
#product_area .Txt{position:relative;z-index:2;display: flex;flex-direction: column;align-items: center;margin-top: -68px;}
#product_area .Txt .num{color: var(--white);font-size: 15px;line-height:140%;font-family: "Open Sans", serif;font-weight: 600;background: linear-gradient(150deg, var(--primary), var(--secondary));display: inline-flex;width: 55px;aspect-ratio: 1/1;align-items: center;justify-content: center;border-radius: 50px;}
#product_area .Txt .num img{-webkit-filter: contrast(0) brightness(150%);filter: contrast(0) brightness(200%);width: 28px;aspect-ratio: 1/1;}
#product_area .Txt .title{display: inline-block;color: var(--primary);font-size: 20px;font-weight: 500;margin-top: 30px;letter-spacing: 1px;writing-mode: vertical-lr;}
#product_area .subtitle{color:#fff;font-size:15px;font-weight:400;letter-spacing:1px;padding-top: 15px;padding-right:0px;position: relative;z-index: 5;}
#product_area .Txt .text{height:85.5px;color:#e9eef5;font-size:15px;line-height:1.9;letter-spacing:0.7px;margin-top:17px}
#product_area .classLink{display: grid;grid-template-columns: 1fr;gap: 5px;}
#product_area .classLink li{line-height:120%}
#product_area .classLink li a{font-size:14px;display: flex;align-items: center;position: relative;}
#product_area .classLink li:hover a{color:var(--primary)}
#product_area .classLink li a:before{content:'-';margin-right: 6px;}
#product_area .text{font-size:14px}
#product_area .moreBtn{padding-top:23px}
#product_area .moreBtn a{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;width:98px;color:#fff;font-weight:700;letter-spacing:0.01em;z-index:1}
#product_area .moreBtn a::after{content:"";position:absolute;top:calc(50% - 7.5px);right:-10px;width:20px;height:17px;background:url("/images/39/arrow_right_white.png") no-repeat center/cover;z-index:1;-webkit-filter:contrast(0) brightness(150%);filter:contrast(0) brightness(200%)}

/* about_area */
#about_area {z-index: 3;background: #f7f0f1;margin-top: -5vw;padding-top: 10vw;overflow: hidden;padding-bottom: 0;}
#about_area:after{content:'';width: 37.5vw;height: 100%;position: absolute;left: 0;top: 0;background: linear-gradient(150deg, var(--primary), var(--secondary));z-index: -1;}
#about_area .paroller{position:absolute;left: 11vw;top: -10vw;z-index: 2;}
#about_area .allwrap{position:absolute;left: -20vw;bottom: 20vh;width:100%;transform: rotate(90deg);z-index: 1;}
#about_area .allwrap #canvas-container{position:absolute;bottom: 30px;}
#about_area .workframe {display:grid;grid-template-columns: 57% 37%;width: min(85%, 1150px);margin-right: 15vw;justify-content: space-between;align-items: end;z-index: 5;position: relative;}
#about_info {margin-bottom: 100px;}
#about_area .title_box {margin-bottom: 30px;}
#about_area .title_box h2 {word-spacing: 100vw;margin-top: 20px;}
#about_area article {margin-bottom: 55px;line-height: 210%;letter-spacing: 1px;font-weight: 400;}
#about_area article *{margin:0;padding: 0;}
#about_area article p{}
#about_area article h4{color:var(--primary);font-size: 18px;font-weight: 500;}
#about_area #fakeNumber {position: absolute;left: -95px;top: 60px;z-index: 6;}
#about_area #fakeNumber li{background: #fff;width: 120px;padding: 35px 35px;aspect-ratio: 1/1;border-radius: 30px;box-shadow: 10px 10px 40px rgb(114 47 55 / 10%);}
#about_area #fakeNumber li *{color:var(--primary)}
#about_area #fakeNumber li:nth-child(2) *{color:#fff;}
#about_area #fakeNumber li:nth-child(2){background: linear-gradient(-90deg, var(--secondary), var(--primary));margin-left: 9vw;margin-top: 40px;}
#about_area #fakeNumber h2 {display: grid;grid-template-columns: 50% 50%;align-items: end;}
#about_area #fakeNumber h2 b{color: var(--primary);font-size: 49px;font-family: "EB Garamond", serif;font-weight: 300;line-height: 1;}
#about_area #fakeNumber h2 span{word-spacing: 100vw;font-size: 16px;font-weight: 400;line-height: 1.5;}
#about_area #fakeNumber p{font-size: 20px;margin-top: 10px;letter-spacing: 3px;}

/* custom_area */
#custom_area{position:relative;padding:3vw 0;}
#custom_area .workframe {width: min(85%, 1600px);display: grid;grid-template-columns: 20% 76%;justify-content: space-between;align-items: center;}
#custom_area .paroller{position:absolute;right: 0;top: -70%;}
#custom_area .title_box  {margin:0}
#custom_area .title_box .btn{padding:0;display: flex;align-items: center;gap: 10px;margin-top: 35px;}
#custom_area .title_box .btn a{width:60px;aspect-ratio: 1/1;background: linear-gradient(-90deg, var(--secondary), var(--primary));display: flex !important;align-items: center;justify-content: center;border-radius: 50px;}
#custom_area .title_box .btn svg{width: 15px;height: 15px;fill: #fff;}
#custom_area .title_box .btn a#custom_prev svg{transform:scaleX(-1);}
#custom_area ul li{box-shadow: 0 0 22px rgb(114 47 55 / 10%);margin: 30px 20px;}
#custom_area ul li >div {padding: 40px 35px;}
#custom_area ul li .top{display:flex;justify-content: space-between;flex-wrap: wrap;align-items: center;}
#custom_area ul li .top p{font-family: "Arimo", sans-serif;color: #303231;font-size: 15px;font-weight: 500;display: flex;align-items: center;gap: 10px;}
#custom_area ul li .top p b{color:var(--primary)}
#custom_area ul li .top h3{color:#747a77;font-size: 15px;font-weight: 400;border: 1px solid #c6c6c6;padding: 5px 10px;}
#custom_area ul li span{display:inline-block;width: 20px;height: 4px;background: linear-gradient(-90deg, var(--secondary), var(--primary));}
#custom_area ul li article {font-weight: 300;font-size: 14px;overflow: hidden;margin: 20px 0 0;height: 95px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;text-align: justify;}

/* news_area */
#news_area li .img_box , #book_area li .img_box { border-radius: 15px; background-color: #f9f9f9; }
#news_area li .info_box { margin: 10px 15px 0; }
#news_area li .time { width: 65px; font-weight: 400; font-size: 13px; }
#news_area li .more_btn { margin-left: 10px; padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#news_area li h3 { margin-top: 10px; height: 60px; line-height: 150%; font-size: 20px; -webkit-line-clamp: 2; }

/* book_area */
#book_area li h3 { margin-top: 10px; height: 30px; font-size: 18px; }

/* photo_area */
#photo_area{padding:0;z-index: 6;position: relative;}
#photo_area .item {width: 470px;}
#photo_area .item img {aspect-ratio: 4.6/3.2;object-fit: cover;}

@media screen and (max-width: 1460px) {
    #about_area .workframe{margin-right: 5vw;}
    #product_area .workframe{grid-template-columns: 1fr;padding-left: 5%;width: 80%;gap: 30px;}
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#product_list { width: 500px; margin-left: 30px; }
	#product_list li .clip { height: 590px; }
	#about_area .about_sub_2 { top: -20vw; right: 6vw; }
}
@media screen and (max-width: 1280px) {
    #custom_area .paroller{width: 110px;}
	#photo_area .item{width: 370px;}
    #about_area .workframe{margin:0 auto;}
    #about_area #fakeNumber{left: -25px;}
}
@media screen and (max-width: 1024px) {
    #product_area .workframe{padding-left: 2.5%;width: 85%;gap: 30px;margin-top: 50px;}
}
@media screen and (max-width: 980px) {
    #custom_area .title_box{margin-bottom:30px;}
    #custom_area .title_box .btn{display:none;}
    #custom_area .paroller{top: -30%;}
    #custom_area .workframe{display:block;}
    #about_area:after{width:100%;height: 78vh;}
    section .clip img{height:auto;}
    #about_area .clip{text-align:end;}
    #about_area .workframe{grid-template-columns:1fr;gap: 70px;}
    #product_area .applicationList{grid-template-columns:1fr;gap: 70px;}
	section, #custom_area {padding: 10vw 0;}
}
@media screen and (max-width: 760px) {
    section .title_box h2{font-size:22px;}
    section .title_box font{font-size:35px;}
    #product_area .title_box article{word-break:break-all;text-align: justify;letter-spacing: 0;margin-bottom: 60px;}
    #product_area .workframe{display:block;padding: 0;width: 75%;}
    #about_area #fakeNumber li:nth-child(2){margin-left: 35vw;}
    #about_area #fakeNumber{top: 130px;left: -15px;}
    #about_area #fakeNumber p{font-size:18px;letter-spacing: 0;}
    #about_area #fakeNumber li{width:100px;padding: 20px 35px;}
    #about_area:after{height: 50vh;}
	section { padding: 8vw 0 2vw; }
	#product_sub_list>div { margin: 10px auto 50px; }
	#product_sub_list li { width: 150px; }
	#product_sub_list li .clip { height: 150px; }
	#product_list { width: 70vw; }
	#product_list li .clip { height: 80vw; }
	#product_list li .info_box { width: 45vw; height: 30vw; }
    #custom_area .paroller{width: 60px;}
}
@media screen and (max-width: 550px) {
	#product_sub_list li { margin: 10px; width: 35vw; }
	#product_sub_list li .clip { height: 35vw; }
	#product_list { width: 90vw; }
	#product_list li .clip { height: 100vw; }
	#product_list li .info_box { width: 55vw; height: 40vw; }
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}