@import url('https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100;200;300;400;500;600;700;800&family=Lato&family=Marcellus&family=Syncopate:wght@400;700&display=swap');
#wrap { z-index: 5; }

/* section */
section {padding: 5vw 0;}
section >* { z-index: 3; }
section .title_box {padding-bottom: 3vw;font-size: 35px;color: var(--primary);letter-spacing: 2px;}
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%; }

/* product_sub_list */
#product_sub_list >div { margin: auto; width: 100%; }
#product_sub_list li { width: 210px; }
#product_sub_list li .clip { height: 210px; -webkit-clip-path: url(#clip_sub_product); clip-path: url(#clip_sub_product); }
#product_sub_list li h3 { font-weight: 300; }

/* product_list */
#product_list { width: 600px; }
#product_list li .clip { height: 690px; -webkit-clip-path: url(#clip_product); clip-path: url(#clip_product); }
#product_list li .info_box { width: 367px; height: 228px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 367 228'%3E%3Cpath d='M367.78 126C374 16.84 244.78 11.74 169 1.62c-30.92-4.22-65.18-.49-89.25 18.28-10.07 8.27-21.49 9.51-30.69 14.7-10.8 7-24 26.55-31.88 38.77-20.79 30.78-25.12 73.93 3.58 101.93 42.82 40.82 125.08 59.41 182.75 51.15 18.44-2.61 31-8 48.42-10.85 17.13-1.86 30.89-3.56 48.43-10.85 33.48-12.81 54.43-40.22 67.42-78.75z' fill='%23f4ece5'/%3E%3C/svg%3E") no-repeat center / 100%; bottom: 0; left: 0; }
#product_list li .info_box >div { margin: auto; width: 80%; }
#product_list li .info_box h3 { height: auto; font-size: 20px; }
#product_list li .info_box p { margin-right: 10px; font-weight: 300; }
#product_list li .info_box p:first-letter { margin-right: 2px; font-size: 12px; }

/* about_area */
#about_area {z-index: 5;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;overflow: hidden;}
#about_area .parallax_bg{min-height: auto;margin-bottom: 5vw;padding: 5vw 0;}
#about_area .parallax_bg >div{position:relative;z-index: 2;}
#about_area .parallax_bg:after{content:'';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: hsl(352deg 30% 38% / 33%);}
#about_area .parallax_bg h3{text-align: center;font-size: 35px;color: var(--white);letter-spacing: 2px;}
#about_area .parallax_bg p{text-align: center;font-size: 18px;color: var(--white);}
#about_area #about_info {margin: 0 auto 50px;text-align: center;}
#about_area .more_btn{background: var(--secondary);padding: 13px 55px;border-radius: 50px;}
#about_area h2 {font-size: 35px;letter-spacing: 2px;text-align: center;}
#about_area article {line-height: 210%;letter-spacing: 2px;font-weight: 400;font-size: 17px;text-align: center;width: 65%;margin: 10px auto 30px;}
#about_area #about_img {width: 60%;right: 0;border-radius: 310px 0 0 310px;overflow: hidden;}
#about_area #about_img video{width: 100%;}
#about_area .bgtitle{position: absolute;left: 0;font-size: 310px;color: #fff;z-index: -1;line-height: 100%;bottom: -25%;font-family: 'Marcellus', serif;width: 100%;text-align: center;text-transform: uppercase;}

/* custom_area */
#custom_area{position:relative;}
#custom_area:after, #photo_area:after{content:url(/images/44/cloud01.png);position:absolute;animation-name: cloud2;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 1s;right: -15%;bottom: 0;z-index: -1;zoom: 80%;}
@keyframes cloud1{0%{top:5%}100%{top:-5%;}}
#custom_area:before, #photo_area:before{content:url(/images/44/cloud02.png);position:absolute;animation-name: cloud1;animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: ease-in-out;animation-duration: 1.5s;z-index: -1;left: -15%;zoom: 80%;}
@keyframes cloud2{0%{transform-origin:right bottom;transform:rotate(-3deg)}100%{transform-origin:right bottom;transform:rotate(3deg)}}
#custom_area ul{display:flex;flex-wrap: wrap;justify-content: center;}
#custom_area ul li{width:calc(100%/4)}
#custom_area ul li >div {margin: 20px;}
#custom_area ul li .clip {width: 100%;height: 250px;}
#custom_area ul li .clip img{width:100%;}
#custom_area ul li h3 {margin: 10px 0 5px;font-size: 23px;}
#custom_area ul li article {font-weight: 300;font-size: 16px;text-align: center;line-height: 150%;}

/* 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{position:relative;}
#photo_area .item { width: 260px; height: 110px; }
#photo_area .item img { height: 100%; }

/* faq_list */
#faq_list {padding: 50px;box-shadow: 0 0 40px rgb(0 0 0 / 10%);border-radius: 50px;margin: 0 100px;background: var(--white);}
#faq_list li {border-bottom: 1px rgba(var(--primary-rgb), .1) dashed;}
#faq_list li .title {padding: 20px 0;}
#faq_list li .title font { vertical-align: top; }
#faq_list li .title .txt { margin-left: 10px; width: calc(100% - 50px); font-size: 20px; }
#faq_list li .title .icon { width: 40px; height: 34px; }
#faq_list li .title .icon:before , #faq_list li .title .icon:after { position: absolute; margin: auto; width: 14px; height: 2px; background: var(--primary); display: block; top: calc((100% - 2px) / 2); left: calc((100% - 14px) / 2); content: ""; }
#faq_list li .info {padding: 0 0 30px 50px;font-size: 16px;}

/* anchor_area */
#anchor_area .workframe{width:1160px;}
#anchor_area ul{display: grid;grid-template-columns: repeat(4, 1fr);align-items: stretch;}
#anchor_area li:nth-child(3){grid-column-start: 2;grid-column-end: 3;grid-row-start:1;grid-row-end:3;}
#anchor_area li:nth-child(3) >div{height: calc(100% - 30px);}
#anchor_area li:nth-child(3) .clip{height: 100%;width: 340px;}
#anchor_area li >div{padding:15px;}
#anchor_area li .clip{border-radius: 10px;overflow: hidden;height: 240px;}
#anchor_area li .clip img{width:100%;}
#anchor_area li h3{position:absolute;bottom: 30px;left: 30px;background: var(--white);border-radius: 10px;padding: 5px 20px;font-weight: 400;box-shadow: 4px 5px 0 rgb(67 65 65 / 7%);}
#anchor_area li h3 svg{width: 18px;height: 18px;fill: var(--complement);margin-right: 8px;}


@media screen and (min-width: 1024px){
	#about_area{background-attachment: fixed;}
}
@media screen and (max-width: 1440px){
	#about_area .about_sub_1 , #about_area .about_sub_2 , #about_area .about_sub_3 { width: 20vw; }
	#about_area .bgtitle{font-size: 200px;bottom: -15%;}
}
@media screen and (max-width: 1160px){
	#anchor_area .workframe{width:90%;}
}
@media screen and (max-width: 1024px){
	#product_list { margin: auto; }
	#news_area li h3 { height: 30px; -webkit-line-clamp: 1; }
	#about_area article{width: 100%;line-height: 190%;}
	#custom_area ul li{width:50%;}
	#anchor_area ul{grid-template-columns: repeat(2, 1fr);}
	#anchor_area li:nth-child(3) .clip{width:100%;}
	#anchor_area li .clip{height: 305px;}
	#about_area .bgtitle{font-size: 200px;bottom: -7%;}
	#faq_list{margin:0;}
}
@media screen and (max-width: 980px){
	#about_area .bgtitle{font-size: 150px;bottom: -5%;}
	#product_list { width: 500px; }
	#product_list li .clip { height: 590px; }
	#about_area #about_info { margin-bottom: 8vw; }
	#about_area .about_sub_2 { top: auto; bottom: 35vw; width: 35vw; }
	#about_area .about_sub_3 { width: 29vw; left: 10vw; }
	#custom_area ul li{width:50%;}
	#custom_area ul li >div{margin:10px;}
	#custom_area ul li .clip{height: 200px;}
	#custom_area ul li article{font-size: 13px;}
	#faq_list{margin:0;padding: 25px;border-radius: 25px;}
}
@media screen and (max-width: 760px){
	section .title_box{font-size: 33px;line-height: 140%;letter-spacing: 0;}
	section {padding: 50px 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){
	#faq_list li .info{font-size: 14px;}
	#faq_list li .title .txt{font-size: 17px;}
	#about_area .bgtitle{font-size: 75px;bottom: -6%;}
	#anchor_area li .clip, #anchor_area li:nth-child(3) .clip{height: 170px;}
	#anchor_area li:nth-child(3){grid-column-start: 2;grid-column-end: 3;grid-row-start:1;grid-row-end: 2;}
	#anchor_area li:nth-child(2){grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;grid-row-end: 3;}
	#anchor_area .workframe{width:95%;}
	#anchor_area li >div{padding: 10px;}
	#custom_area:after, #photo_area:after{display:none;}
	#custom_area ul li .clip{height: 120px;}
	#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; }
	#anchor_area li h3{font-size: 14px;bottom: 20px;left: 20px;}
	#anchor_area li:nth-child(3) >div{height:auto;}
	#faq_list li .title{padding:10px 0;}
}
@media screen and (max-width: 480px){
	#book_area li .row { margin: auto; width: 250px; }
}