#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box { padding-bottom: 3vw; font-style: italic; font-size: 38px; }
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 .tag {color: var(--primary);font-size: 18px;font-weight: 500;letter-spacing: .06em;margin-bottom: 10px;font-family: "Inter", sans-serif;}
section .ttl {letter-spacing: .03em;font-size: 45px;font-weight: 700;color: var(--secondary);line-height: 1.3;}

/* about_area */
#about_area{overflow:hidden;position: relative;}
#about_area *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#about_area:before {content:'';position: absolute;width: 100%;height: 30%;bottom: 0;background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(238 242 249));}
#about_area .videobox{width:100%;z-index: -1;height: 100%;top: 0;}
#about_area .videobox:before {content:'';position: absolute;width: 50%;height: 100%;bottom: 0;background: linear-gradient(270deg, rgb(0 0 0 / 0%), rgb(238 242 249 / 90%));z-index: 2;}
#about_area .videobox:after {content:'';position: absolute;width: 50%;height: 100%;bottom: 0;background: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(238 242 249 / 90%));z-index: 2;right: 0;}
#about_area .videobox .video-bg{width:100%;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;overflow: hidden;}
#about_area video{width:100%;position:absolute;left: 0px;top: 0px;}

/* core_area */
#core_area {background-size: cover;background-position: 50% 0%;background-repeat: no-repeat;padding-bottom: 10vw;}
#core_area:before {content:'';position: absolute;width: 100%;height: 30%;top: 0;background: linear-gradient(
0deg, rgb(0 0 0 / 0%), rgb(238 242 249));}
#core_area:after {content:'';position: absolute;width: 100%;height: 10%;bottom: 0;background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(238 242 249));}
#core_area .workframe{width: min(90%, 1500px);}
#core_area .top {display: grid;grid-template-columns: 34% 53%;align-items: center;margin-bottom: 72px;justify-content: space-between;}
#core_area .pageh1 {margin-top: 15px;font-size: 20px;line-height: 1.8;font-weight: 400;letter-spacing: .05em;color: var(--secondary);}
#core_area .keys {display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;}
#core_area .key {display: grid;grid-template-columns: 70px 1fr;align-items: center;gap: 15px;}
#core_area .ico {position: relative;width: 100%;aspect-ratio: 1/1;border-radius: 50%;background: rgb(239 244 251);display: flex;align-items: center;justify-content: center;}
#core_area .ico:after{content:'';position: absolute;width: calc(100% + 2px);height: calc(100% + 2px);background: var(--btn-gradient);border-radius: 50px;z-index: -1;}
#core_area .ico img{width: 42px;aspect-ratio: 1/1;object-fit: contain;}
#core_area .key:hover .ico { background: var(--btn-gradient); }
#core_area .key:hover .ico img { -webkit-filter: contrast(0) brightness(150%); filter: contrast(0) brightness(200%); animation: aboutImgAnimation 5s ease-in-out infinite; }
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform: translateY(5px);transform: translateY(5px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#core_area .kt {color: var(--secondary);font-size: 20px;line-height: 1.35;font-weight: 500;letter-spacing: .04em;}
#core_area .ktxt p {margin: 8px 0 0;color: #5D717E;font-size: 16px;line-height: 1.5;}
#core_area .corelist {display: grid;grid-template-columns: repeat(3,1fr);gap: 45px;}
#core_area .corecard {position: relative;overflow: hidden;border-radius: 25px;background: #eef3f8;box-shadow: 0 0 50px rgb(41 92 125 / 10%);backdrop-filter: blur(14px);transform: translateY(34px);opacity: 0;transition: transform .9s cubic-bezier(.19,1,.22,1),opacity .9s ease,box-shadow .45s ease;display: flex;flex-direction: column;justify-content: space-between;}
#core_area .corecard.is-in { transform: translateY(0); opacity: 1; }
#core_area .corecard:hover { transform: translateY(-8px); box-shadow: 0 34px 70px rgba(41,92,125,.17); }
#core_area .txt {position: relative;z-index: 2;padding: 45px 45px 0;}
#core_area .row {display: grid;align-items: center;gap: 10px;grid-template-columns: 45px 1fr;margin: 0 0 10px;}
#core_area .row span {color: #00adbd;font-size: 32px;line-height: 1;font-weight: 500;letter-spacing: .04em;font-family: "Inter", sans-serif;}
#core_area .ct {color: #18385d;font-size: 20px;line-height: 1.4;font-weight: 600;letter-spacing: .04em;}
#core_area .txt p {margin: 0 0 0 55px;color: #5D717E;line-height: 1.6;letter-spacing: .06em;}
#core_area .pic {position: relative;}
#core_area .corecard:before {content: "";position: absolute;height: 80%;background: linear-gradient(180deg, #eef3f8 60%, rgb(238 243 248 / 0%) 100%);z-index: 2;width: 100%;top: -20px;}
#core_area .pic img {width: 100%;display: block;transition: transform .8s cubic-bezier(.19,1,.22,1),filter .8s ease;height: 270px;object-fit: cover;}
#core_area .corecard:hover .pic img { transform: scale(1.07); filter: saturate(1.08) contrast(1.03); }

/* use_area */
#use_area{padding-top:0;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;}
#use_area:before {content:'';position: absolute;width: 100%;height: 10%;top: 0;background: linear-gradient(360deg, rgb(0 0 0 / 0%), rgb(238 242 249));}
#use_area:after {content:'';position: absolute;width: 100%;height: 20%;bottom: 0;background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(238 242 249));}
#use_area .workframe {position: relative;z-index: 1;width: min(90%, 1400px);margin: 0 auto;}
#use_area .deso {width: min(95%, 550px);margin: 10px auto 50px;color: #5D717E;letter-spacing: .5px;}
#use_area .tabs {width: 93%;margin: 0 auto;display: flex;align-items: end;position: relative;z-index: 3;}
#use_area .tab {padding: 26px 28px;border: 1px solid #d7e0ec;border-radius: 18px 18px 0 0;background: linear-gradient(0deg, #e4ecf5 0%, #f4f7fd 100%);color: #16365b;display: flex;align-items: center;justify-content: center;gap: 24px;cursor: pointer;backdrop-filter: blur(12px);box-shadow: inset 0 1px 0 rgba(255,255,255,.7);transition: background .35s ease,color .35s ease,box-shadow .35s ease,transform .35s ease;width: 100%;overflow: hidden;border-bottom: 0;position: relative;}
#use_area .tab:after{content:'';position: absolute;width: 100%;height: calc(100% - 6px);background: white;bottom: 0;border-radius: 15px 15px 0 0;opacity: 0;}
#use_area .tab:first-child {border-left: 1px solid #d7e0ec;}
#use_area .tab.active, #use_area .tab:hover {color: #15385f;border-bottom: 0;border-left: 0;border-right: 0;background: var(--primary);}
#use_area .tab.active:after, #use_area .tab:hover:after{opacity:1}
#use_area .tab span{font-size:20px;font-weight: 500;position: relative;z-index: 2;}
#use_area .ico {width: 35px;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;color: #8ea5b7;transition: color .35s ease,transform .35s ease;filter: saturate(10%);}
#use_area .tab.active .ico, #use_area .tab:hover .ico{filter: saturate(100%);}
#use_area .ico img{width:35px;aspect-ratio: 1/1;object-fit: contain;}
#use_area .box {position: relative;overflow: hidden;margin-top: -1px;border-radius: 0;background: rgba(255,255,255,.72);border: 1px solid rgba(255,255,255,.85);box-shadow: 0 28px 70px rgba(42,101,135,.12);backdrop-filter: blur(16px);border-radius: 15px;overflow: hidden;}
#use_area .box:before {content: "";position: absolute;inset: 0;background: radial-gradient(circle at 63% 45%,rgba(0,192,205,.2),transparent 29%),radial-gradient(circle at 48% 46%,rgba(255,255,255,.9),transparent 32%),linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.7) 42%,rgba(237,249,253,.54) 100%);pointer-events: none;}

#use_area .pane {position: absolute;padding: 0;display: flex;align-items: center;gap: 20px;opacity: 0;visibility: hidden;transform: translateY(18px);transition: opacity .55s ease,visibility .55s ease,transform .55s cubic-bezier(.19,1,.22,1);}
#use_area .pane.active { position: relative; opacity: 1; visibility: visible; transform: translateY(0); }
#use_area .txt {position: absolute;width: min(90%, 450px);z-index: 2;left: 7%;}
#use_area .txt .en{font-family: "Inter", sans-serif;font-size: 17px;color: var(--primary);letter-spacing: 1px;font-weight: 500;}
#use_area .txt .h2tit {letter-spacing: .03em;font-size: 45px;font-weight: 700;color: var(--secondary);line-height: 1.3;}
#use_area .line {width: 70px;height: 3px;margin: 24px 0 30px;background: linear-gradient(90deg,#0b84dd,#00bcb8);}
#use_area .sub {color: var(--complement);font-size: 24px;line-height: 1.5;font-weight: 500;letter-spacing: .08em;margin-bottom: 25px;}
#use_area .txt p {margin: 0 0 35px;color: var(--secondary);font-size: 17px;line-height: 1.95;letter-spacing: .07em;text-align: justify;}
#use_area .pane .pic {z-index: 0;display: flex;align-items: center;justify-content: center;width: 100%;}
#use_area .pane .pic img {position: relative;z-index: 2;height: 670px;object-fit: cover;display: block;width: 100%;}

/* news_area */
#news_area{padding-top:2vw}
#news_area .workframe{display:grid;grid-template-columns: 46% 46%;align-items: end;justify-content: space-between;}
#news_area .ytbox video{width:100%}
#news_area .ttl{margin-bottom: 50px;}
#news_area li{border-bottom: 1px solid #cac9c9;padding: 40px 0;position: relative;}
#news_area li:hover{padding-left:40px;}
#news_area li .info_box{display:grid;grid-template-columns: 100px 1fr;gap: 15px;align-items: center;}
#news_area li .info_box a.more_btn{display:block;font-size: 14px;padding: 8px 0;height: auto;line-height: 1;}
#news_area li .info_box .time{text-align:center;display: block;font-family: "Inter", sans-serif;color: #929292;font-size: 14px;margin-top: 11px;line-height: 1;}
#news_area li .info_box .h3{font-size:20px;height: auto;font-weight: 500;margin-bottom: 5px;}
#news_area #youtube {position: relative;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}

#youtube .UTwo { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
#youtube .UTwo a { display: block; width: 100px; height: 100px; text-align: center; line-height: 100px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); position: absolute; z-index: 5; color: #dcdcdc; font-size: 30px; left: calc(50% - 50px); top: calc(50% - 50px); transition: all linear .3s; }
#youtube .UTwo a:hover { width: 110px; height: 110px; line-height: 110px; left: calc(50% - 55px); top: calc(50% - 55px); font-size: 34px; }
#youtube .UTwo iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

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

/* photo_area */
#photo_area .item {width: 260px;height: 200px;}
#photo_area .item img {height: 100%;object-fit: cover;}

@media screen and (max-width: 1460px) {
    section .ttl{font-size:40px}
	#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: 1400px) {
    #core_area .pic img{height:200px}
}
@media screen and (max-width: 1024px) {
    #news_area #youtube{width: 100%;}
    #news_area .ttl{margin-bottom:20px}
    #news_area .workframe{display:flex;flex-direction: column;gap: 40px;}
    #news_area .workframe .ytbox {width:100%}
    #use_area .txt{width: min(90%, 370px);}
    #use_area .pane .pic img{height: 540px;}
    #use_area .sub{font-size:20px}
    #use_area .txt .h2tit{font-size: 33px;}
    #use_area .txt .en, #use_area .txt p{font-size:15px}
    #use_area .ico{width:30px;}
    #use_area .tab{gap: 10px;}
    #core_area .txt p{margin-left: 45px;}
    #core_area .row span{font-size: 26px;}
    #core_area .ct, #use_area .tab span{font-size:18px;}
    #core_area .row{grid-template-columns: 35px 1fr;}
    #core_area .corecard:before{height:100%}
    #core_area .txt{padding: 25px 25px 0;}
    #core_area .corelist{gap:20px;}
    #core_area .top{grid-template-columns:1fr;gap: 30px;}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #use_area{padding-top:5vw}
    #use_area .pane .pic img{height:100%}
    #core_area .pic img{height: 310px;}
    #core_area .corelist{display:flex;flex-direction: column;}
    #core_area .corecard:before{height:70%}
    #about_area video{height: 50%;width: auto;}
	section { padding: 8vw 0; }
    #about_area{padding-bottom:0}
#use_area .tabs { display: none; }
#use_area .box {min-height: auto;overflow: unset;border: 0;background: transparent;box-shadow: none;backdrop-filter: unset;border-radius: 0;margin: 0;}
#use_area .pane { position: relative; inset: auto; display: grid; grid-template-columns: 1fr; padding: 50px 28px; opacity: 1; visibility: visible; transform: none; }
#use_area .pane {position: relative;opacity: 1;visibility: visible;transform: none;padding: 50px 40px;border-radius: 35px;overflow: hidden;border: 1px solid rgba(255, 255, 255, .85);}
    #use_area .box:before{display:none;}
    #use_area .txt{position:relative;left: 0;}
#use_area .slick-slide { height: auto; }
#use_area .slick-dots {bottom: -40px;margin: 20px 0 0;padding: 0;display: flex !important;justify-content: center;gap: 10px;}
#use_area .slick-dots li { width: auto; height: auto; margin: 0; }
#use_area .slick-dots li button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: rgba(0,158,170,0.25); }
#use_area .slick-dots li button:before { display: none; }
#use_area .slick-dots li.slick-active button { width: 28px; border-radius: 20px; background: linear-gradient(90deg,#0a79dd,#00beb9); }
#use_area .pane .pic {height: 100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;position: absolute;}
}
@media screen and (max-width: 760px) {
	#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; }
}
@media screen and (max-width: 550px) {
    #news_area li .info_box .h3, #news_area li .info_box article{-webkit-line-clamp:2}
    #news_area li .info_box .titbox{display:flex;flex-direction: row;align-items: center;gap: 10px;}
    #news_area li .info_box .time{margin:0}
    #news_area li .info_box a.more_btn{padding: 8px 15px;}
    #news_area li .info_box{display:flex;flex-direction: column;align-items: flex-start;}
    #news_area{padding-top: 18vw;}
    #use_area .pane .pic img{aspect-ratio:4/3;object-position: 100% 50%;}
    #use_area .txt{width:100%}
    #use_area .txt .h2tit{margin-top: 10px;}
    #about_area video{height: 25%;}
    #use_area .pane .pic{position:relative;}
    #use_area .pane{padding: 30px;}
    #core_area .keys{display:none;}
    #core_area .pageh1{font-size:18px;}
    section .ttl{font-size: 30px;}
    #core_area .top{display:flex;flex-direction: column;margin-bottom: 40px;}
	#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_img { width: 80vw; }
	#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; }
}