/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .h2tit {font-size: 23px;text-align: center;letter-spacing: 3px;font-family: "AR One Sans", sans-serif;font-weight: 600;}
section .topic-title p {font-size: 38px;text-transform: uppercase;text-align: center;}
section .topic-title p:first-letter{color:var(--primary)}
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%); }

/* freebox */
#freebox{position:relative;background: var(--gray);}
#freebox,#freebox *{transition:unset;-webkit-transition:unset;}
#freebox:before{content:'';width: 8%;height: 100%;position: absolute;bottom: -100px;background: var(--primary);z-index: 8;left: 0;}
#freebox .topic-title{margin-bottom:50px;align-items:center}
#freebox .webframe{width: min(75%,1350px);margin: 0 auto;}
#freeboxlist{position:relative;z-index:2;}
#freeboxlist .free{padding: 0 0 20px;text-align:center;position:relative;overflow:hidden;-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);background-color: #ffffff;-webkit-transform: translateY(0px);transform: translateY(0px);-webkit-transition: all .5s;transition: all .5s;margin: 0 20px;clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 45px, 100% 100%, 45px 100%, 0 calc(100% - 45px));}
#freeboxlist .free .topBox{-webkit-box-align:center;align-items:center;display:flex;-webkit-box-pack:justify;justify-content:space-between;margin-bottom: 20px;position:relative;z-index:1;flex-direction:row-reverse}
#freeboxlist .free .topBox .stepBox{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;color:#888;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:"Cardo",serif}
#freeboxlist .free .topBox .stepBox .number{display:inline-block;font-size:40px;line-height:0.8;font-family: "Libre Baskerville", serif;opacity:.3}
#freeboxlist .free .topBox .stepBox .text{display:inline-block;font-size:16px;line-height:1;letter-spacing:0.75px;margin-left:10px}
#freeboxlist .free:hover .topBox img{transform: scale(1.08);	filter: brightness(.88);}
#freeboxlist .free .topBox .Img{overflow:hidden;}
#freeboxlist .free .topBox .Img img{aspect-ratio: 4/3;object-fit: cover;transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .6s ease;}
#freeboxlist .free .Txt{position:relative;z-index:1;padding: 12px 30px;}
#freeboxlist .free .Txt .title{position:relative;color:#313131;letter-spacing: 1px;line-height: 140%;font-size: 20px;font-weight: 500;text-align: center;height: auto;}
#freeboxlist .free .Txt .title a{display:block;font-size:18px;font-weight:500;line-height:1.2;letter-spacing:1.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#freeboxlist .free .Txt .text{color: #2f2f2f;line-height:1.65;letter-spacing: 0.4px;opacity: .6;font-size: 14px;font-family: "Libre Baskerville", serif;}
#freeboxlist .free a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2}
#freeboxlist .free .photo{text-align:center;width:70px;margin:0 auto 30px;box-shadow:0 0 10px rgb(0 0 0 / 10%);border-radius:50%;padding:30px;background:#fff}
#freeboxlist .free:hover .photo:before{top:0}
#freeboxlist .free:nth-child(2){animation-delay: 0.2s;-webkit-animation-delay: 0.2s;}
#freeboxlist .free:nth-child(3){animation-delay: 0.3s;-webkit-animation-delay: 0.3s;}
#freeboxlist .free:nth-child(4){animation-delay: 0.4s;-webkit-animation-delay: 0.4s;}
#freeboxlist .free:nth-child(5){animation-delay: 0.5s;-webkit-animation-delay: 0.5s;}
#freeboxlist .free:nth-child(6){animation-delay: 0.6s;-webkit-animation-delay: 0.6s;}
#freeboxlist .free:nth-child(7){animation-delay: 0.7s;-webkit-animation-delay: 0.7s;}
#freeboxlist .free h4{text-align:center;font-size:22px;line-height:110%;overflow:hidden;margin-bottom: 12px;height: 25px;}
#freeboxlist .free p{font-size: 14px;text-transform: capitalize;}

/* about_area */
#about_area {padding: 0;position: relative;}
#about_area:after{content:'';width: 100%;height: 1px;position: absolute;bottom: 10%;background: var(--gray-dark);opacity: .15;z-index: 7;}
#about_area:before{content:url(/images/44/img-about.webp);position: absolute;right: -5%;top: -8%;zoom: 27%;animation: aboutImgAnimation 5s ease-in-out infinite;}
@keyframes aboutImgAnimation{0%{-webkit-transform:translateY(0);transform:translateY(0);}50%{-webkit-transform:translateY(20px);transform:translateY(40px);}100%{-webkit-transform:translateY(0);transform:translateY(0);}}
#about_area .workframe{display:grid;grid-template-columns: 60% 30%;width: 85%;margin: auto auto auto 0;justify-content: space-between;align-items: center;}
#about_img{order:-1}
#about_area .topic-title p{text-align:left;word-spacing: 100vw;line-height: 1.4;}
#about_area .pageh1{font-weight: 500;margin-bottom: 30px;font-size: 23px;letter-spacing: 5px;line-height: 1.6;margin-top: 10px;}
#about_area .title_box { padding-bottom: 0; }
#about_area h2 { font-size: 45px; font-style: italic; }
#about_area article p {margin-bottom: 30px;line-height: 210%;letter-spacing: 2px;font-weight: 400;text-align: justify;}
#about_area .clip {overflow: hidden;position: relative;z-index: 2;}
#about_area .clip img{aspect-ratio: 4/3;transform: scaleX(-1);}

/* custom_area */
#custom_area ul{margin-top: 50px;}
#custom_area ul li {margin: 0 25px;}
#custom_area ul li .clip img {aspect-ratio: 4/3;clip-path: polygon(0 0, calc(100% - 45px) 0, 100% 45px, 100% 100%, 45px 100%, 0 calc(100% - 45px));}
#custom_area ul li .h3 {margin: 20px 0 5px;font-size: 20px;text-align: center;color: var(--info);height: auto;}

/* news_area */
#news_area{background:#f2f2f2;position: relative;padding: 6vw 0;}
#news_area:before{content:'';position: absolute;width: 77vw;height: 100%;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;top: 0;left: 0;background-image: url(/images/44/abstract-background.jpg);opacity: .6;}
#news_area .bg{position:absolute;right: 0;top: 0;height: 100%;width: 23vw;background-size: cover;background-position: 50% 50%;}
#news_area .workframe{width: min(90%, 1040px);margin-left: 18%;}
#news_area .tt_box h2{text-align:left;}
#news_area .sub_title{display:flex;flex-direction: row;align-items: center;}
#news_area .sub_title:before, #product_area .sub_title:before{box-shadow: 20px 0px var(--secondary);background: var(--primary);margin: 0 35px 0 0;}
#news_area .tt_box{position:relative;display: flex;align-items: center;margin-bottom: 70px;}
#news_area .tt_box .topic{padding:0}
#news_area .topic .topic-title{display:flex;align-items:flex-start;flex-direction: column;}
#news_area .tt_box a{position:absolute;right: 0;bottom: 0;}
#news_list li {background: #fff;margin: 5px 0;}
#news_list li .item_row{padding: 40px 30px;}
#news_list .info_box {display: grid;grid-template-columns: 120px 1fr 100px;align-items: center;justify-content: space-between;gap: 30px;}
#news_list .info_box a{background: var(--info);display: inline-block;padding: 9px 0;height: auto;font-weight: 500;border-radius: 50px;}
#news_list li:hover .info_box a{background:#ececed;color: var(--info);}
#news_list .info_box .time {font-size: 14px;color: #a4a4a4;font-family: "Lato", serif;text-align: end;}
#news_list .info_box .h3 {font-weight: 500;font-size: 20px;line-height: 180%;height: auto;}
#news_list li:hover .info_box .h3{color: var(--complement);}
#news_list .info_box article { margin-bottom: .5em; height: 3.2em; font-size: .9em; color: var(--g_600); -webkit-line-clamp: 2; }

/* 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: 1680px) {
    #freebox:before{bottom: -87px;}
    #about_area:after{bottom: 7%;}
    #news_area .workframe{margin-left: 9vw;}
}
@media screen and (max-width: 1460px) {
    #about_area:after{display:none;}
    #about_area .clip img{aspect-ratio: 3.5/3;}
    #about_area{padding: 5vw 0 0;}
    #freebox:before{bottom: 0;}
    #news_area .workframe{margin-left:5%;width: 65%;}
    #about_area .workframe{grid-template-columns: 55% 38%;}
	#about_area:before{zoom: 18%;}
}
@media screen and (max-width: 1280px) {
    #about_area .clip img{aspect-ratio:1/1}
}
@media screen and (max-width: 1024px) {
    #freebox .webframe{width:90%}
    #freebox:before{display:none;}
    #about_area .clip img{aspect-ratio: 5/3;}
    #about_info{width: 85%;margin: 0 auto;}
    #about_area {padding:8vw 0}
    #about_area .workframe{grid-template-columns:1fr;gap: 40px;width: 100%;}
    #freeboxlist{grid-template-columns: repeat(3, 1fr);}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
    #freeboxlist .free .Txt .title{font-size:18px;}
    #about_area:before{display:none;}
}
@media screen and (max-width: 980px) {
	section, #news_area {padding: 8vw 0;}
    #news_area:before{width:100%}
    #news_area .bg{display:none;}
    #news_area .workframe{width:90%;margin: 0 auto;}
    #custom_area ul{grid-template-columns: 1fr;}
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
}
@media screen and (max-width: 760px) {
	section .clip img{height: auto;}
    #news_area .tt_box a{display: none;}
	section, #news_area {padding: 12vw 0;}
	#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 .tt_box{margin-bottom: 20px;}
    #about_img:after{left:-20px;}
    #freeboxlist{grid-template-columns:1fr}
    section .topic-title p{font-size:30px;}
	#about_area .about_sub_2 { bottom: 60vw; }
	#news_area li .row { margin: auto; width: 280px; }
    #about_area .pageh1{font-size:20px;}
    #about_area .clip img{aspect-ratio: 4/3;}
    #news_list .info_box{gap: 8px;display: flex;flex-direction: column;align-items: flex-start;}
    #news_list .info_box a{padding: 5px 17px;font-size: 14px;}
    #news_list .info_box .time{text-align:left;}
    #news_list .info_box .h3{    -webkit-line-clamp: 2;}
}
@media screen and (max-width: 480px) {
	#book_area li.row { margin: auto; width: 250px; }
}