/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .h2tit {font-size: 23px;text-align: center;letter-spacing: 5px;}
section .topic-title p {font-size: 38px;font-family: "Libre Baskerville", serif;text-transform: uppercase;text-align: center;}
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;overflow:hidden;background: var(--gray);}
#freebox .topic-title{margin-bottom:50px;align-items:center}
#freebox .webframe{width:min(90%,1440px);margin: 0 auto;}
#freeboxlist{position:relative;z-index:2;text-align:center;display:grid;grid-template-columns: repeat(5,1fr);gap: 40px;}
#freeboxlist >div{display:inline-block;margin-right:-5px;vertical-align:top;-webkit-transition: all 0.5s;transition: all 0.5s;}
#freeboxlist .free{padding: 30px 30px 40px;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;clip-path: polygon(40px 0, 100% 0, 100% 100%, 0% 100%, 0 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 .topBox .Img{padding: 16px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid #dcdcdc;background-color:#ffffff;border-radius:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
#freeboxlist .free .topBox .Img img{width: 35px;aspect-ratio: 1 / 1;object-fit: contain;}
#freeboxlist .free .Txt{position:relative;z-index:1}
#freeboxlist .free .Txt .title{margin-bottom: 16px;position:relative;border-bottom:1px solid #cbcbcb;padding: 0px 0px 20px 0px;color:#313131;letter-spacing: 1px;line-height: 140%;font-size: 20px;font-weight: 500;}
#freeboxlist .free .Txt .title::before{content:"";width:25px;height:1px;background-color:#666;position:absolute;bottom:0;left:0;z-index:1}
#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::before{content:"";display:block;width:calc(100% - 20px);height: 17px;background-color: var(--primary);position:absolute;bottom:0;left:10px;z-index: 2;}
#freeboxlist .free::after  {content: '';position: absolute;bottom: -130px;right: -20px;background-image: url(/images/44/img-logo2.png);background-size: contain;background-repeat: no-repeat;width: 130px;height: 130px;opacity: .25;-webkit-transition: all 0.5s;transition: all 0.5s;}
#freeboxlist .free:hover::after {bottom: -20px;opacity: .2;-webkit-transition: all 0.5s;transition: all 0.5s;}

@keyframes bannerMouse1{0%{transform:rotate(0deg)}10%{transform:rotate(0deg)}20%{transform:rotate(5deg)}30%{transform:rotate(0deg)}40%{transform:rotate(5deg)}50%{transform:rotate(0deg)}100%{transform:rotate(0deg)}}
#freeboxlist .free:hover{-webkit-box-shadow: 0px 20px 40px 1.4px rgba(149, 149, 149, 0.35);box-shadow: 0px 20px 40px 1.4px rgba(149, 149, 149, 0.35);-webkit-transform: translateY(-20px);transform: translateY(-20px);-webkit-transition: all 0.5s;transition: all 0.5s;}
#freeboxlist .free a{position:absolute;width:100%;height:100%;top:0;left:0;z-index:2}
#freeboxlist .free img{}
#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:'';position: absolute;bottom: 0;left: 0;background: var(--gray);width: 100%;height: 15%;}
#about_area .workframe{display:grid;grid-template-columns: 30% 60%;width: 90%;margin: auto 0 auto auto;justify-content: space-between;align-items: center;}
#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;clip-path: polygon(0 0, 100% 0, 100% 100%, 90px  620px , 0 290px);z-index: 2;}
#about_area .clip img{aspect-ratio: 4/3;}
#about_img:after{content:'';position: absolute;width: 100%;height: 80%;border: 1px solid #ededed;bottom: 0;left: -40px;z-index: -1;border-bottom: 0;}

/* custom_area */
#custom_area ul{display:grid;grid-template-columns: repeat(3, 1fr);margin-top: 50px;gap: 60px;}
#custom_area ul li .clip img {aspect-ratio: 4/3;}
#custom_area ul li .h3 {margin: 20px 0 5px;font-size: 20px;text-align: center;color: var(--info);}
#custom_area ul li article {font-weight: 300;font-size: 14px;overflow: hidden;margin: 5px 0 0;height: auto;text-align: center;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;font-family: "Libre Baskerville", serif;color: var(--info);}

/* news_area */
#news_area{background:#f2f2f2;position: relative;padding: 6vw 0;}
#news_area:before{content:'';position: absolute;width: 35vw;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: 1460px) {
    #news_area .workframe{margin-left:5%;width: 65%;}
	#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) {
    #about_area .clip img{aspect-ratio:1/1}
}
@media screen and (max-width: 1024px) {
    #about_area .clip img{aspect-ratio: 5/3;}
    #about_info{width:90%;}
    #about_area {padding:8vw 0}
    #about_area .workframe{grid-template-columns:1fr;gap: 40px;}
    #freeboxlist{grid-template-columns: repeat(3, 1fr);}
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
}
@media screen and (max-width: 980px) {
    #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;}
    #about_area .clip{clip-path: polygon(0 0, 100% 0, 100% 100%, 90px 280px, 0 100px);}
    #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; }
}