/* history_area */
#history_area .photoBox{position:absolute;width:11%;height:100%;right:0;bottom:0}
#history_area .photoBox img{animation:moveObject 100s linear infinite;height:100%;object-fit:cover}
.historyArea .historyItem{display: grid;grid-template-columns: repeat(4, 1fr);align-items: start;}
.historyArea .historyItem .item{position:relative}
.historyArea .historyList{position:relative}
.historyArea .historyItem .top{text-align:center;margin:0 auto}
.historyArea .historyItem .top::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;box-shadow: 0 0 0 7px var(--primary), 0 0 0 0px var(--white);background-color: var(--white);top: calc(20% - -3px);left:calc(50% - 4px)}
.historyArea .historyItem .top .monthRound{position:relative;display: none;}
.historyArea .historyItem .top .monthRound::before{content:"";position:absolute;background-color:#ffffff00;width:30px;height:30px;border-radius:50%;border: 1px solid var(--primary);left:50%;top:11px;transform:translateX(-50%)}
.historyArea .historyItem .top em{font-style:initial;font-weight:600;font-family: "Tenor Sans", sans-serif;font-size: 80px;text-transform: uppercase;line-height: 1.2;color: var(--primary);}
.historyArea .historyItem li:hover .top em{color:var(--secondary)}
.historyArea .historyItem .top em span{font-size:65px;line-height:1;padding-left:5px}
.historyArea .historyItem .top .titleEn{font-family:Roboto;font-weight:400;color:#a40000;font-size:15px;letter-spacing:1.5px;height:36px}
.historyArea .historyItem .Img{position:relative;z-index:5;width:315px;height:315px;margin:30px auto 20px;display:flex;justify-content:center;align-items:stretch;flex-direction:column;overflow:inherit}
.historyArea .historyItem .Img img{width: 90px;margin:auto;object-fit:cover;-webkit-transition:all .5s;-o-transition:all .5s;-moz-transition:all .5s;transition:all .5s;transform:rotate(0deg) translateY(0%);aspect-ratio:3 / 3;}
.historyArea .historyItem .Txt{padding:50px 0 0}
.historyArea .historyItem .title{position:relative;margin:5px auto 0;text-align:center}
.historyArea .historyItem .title{position:relative;z-index:5;display:block;margin:0 auto;font-size:18px;font-weight:500;letter-spacing:1px;color:#3c3b3b;display:flex;flex-direction:column;justify-content:center}
.historyArea .historyItem .Img::before{opacity:1;background:transparent;border:1px solid #d9cdcd;width:310px;height:310px;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:zoomout 2.3s ease-in-out forwards infinite;animation:zoomout 2.3s ease-in-out forwards infinite}
.historyArea .historyItem .Img .monthImg{content:"";position:absolute;z-index:-1;top:17%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block;width:205px;height:205px;background: #ededed;border-radius:50%;margin:0 auto}
.historyArea .historyItem .Img::before{content:"";position:absolute;z-index:-1;top:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block;width:205px;height:205px;background:var(--primary);border-radius:50%;margin:0 auto}
.historyArea .historyItem .Img::before{opacity:1;background:transparent;border: 1px solid #ededed;width:310px;height:310px;top:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:zoomout 2.3s ease-in-out forwards infinite;animation:zoomout 2.3s ease-in-out forwards infinite}
.historyArea .historyItem .Img::after{content:"";position:absolute;z-index:-1;top:30px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:block;width:255px;height:255px;background:rgb(255 255 255 / 0%);border-radius:50%;border: 1px solid #e1e1e1;margin:0 auto;opacity:1}
@-webkit-keyframes zoomout{50%{-webkit-transform:translateX(-50%) scale(1.3,1.3);transform:translateX(-50%) scale(1.3,1.3);opacity:0}}
@keyframes zoomout{50%{-webkit-transform:translateX(-50%) scale(1.3,1.3);transform:translateX(-50%) scale(1.3,1.3);opacity:0}}
.historyArea .arrow,.introductionBox .introductionList .arrow{padding:30px 0%;right:0;bottom:45%;display:flex;justify-content:space-between;width:100%}
.introductionBox .introductionList .arrow{display:block;justify-content:center;right:auto;left:-130px;bottom:0}
.historyArea .arrow a,.introductionBox .introductionList .arrow a{position:relative;display:inline-block;width:55px;height:55px;line-height:40px;text-align:center;border:1px solid #565656;background-color:#565656;cursor:pointer;border-radius:50%;margin:0 5px}
.historyArea .arrow a:before,.introductionBox .introductionList .arrow a:before{content:"";background-image:url(/images/39/icon_arrow.png);background-repeat:no-repeat;background-position:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;display:block;width:100%;height:100%;position:absolute;top:0;left:0;bottom:auto;right:auto}
.historyArea .arrow a.next:before,.introductionBox .introductionList .arrow a.next:before{-webkit-filter:brightness(0) invert(1);filter:brightness(0) invert(1);transform:scaleX(-1)}
.historyArea .historyItem .item:hover .top::after{box-shadow: 0 0 0 7px var(--secondary), 0 0 0 0px var(--white);background-color: var(--white);}
.historyArea .historyItem .item:hover .top .monthRound::before{border:1px solid #f6d7db}
	
@media screen and (min-width:1281px){
	.historyArea .historyItem .item:hover .Img img{transform:translateY(-30%)}
	.historyArea .historyItem .item:hover .title{transform:translateY(-20%)}
	#history_area .historyArea::before{content:"";position:absolute;top:-50px;margin-top:0;width:500px;height:230px;right:-250px;background-repeat:no-repeat;background-image:url(/images/39/img-H-01.png);background-size:contain;-webkit-animation:product_float 4s ease-in-out forwards infinite;animation:product_float 4s ease-in-out forwards infinite}
	@keyframes circle2{0%,100%{right:0px;top:-1%}50%{right:0px;top:1.5%}}
	@-webkit-keyframes circle2{0%,100%{lef:0px;top:-1%}50%{lef:0px;top:1.5%}}
}
@media screen and (max-width:1280px){
	.historyArea .historyItem{grid-template-columns: repeat(3, 1fr);}
}
@media screen and (max-width:980px){
	.historyArea .historyItem{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width:550px){
	.historyArea .historyItem .title{font-size:16px;}
	.historyArea .historyItem .top em{font-size:39px}
	.historyArea .historyItem .top::after{top: calc(23% - -7px);}
	.historyArea .historyList::before{top:63px}
	.historyArea .historyItem .Img .monthImg{display:none}
	.historyArea .historyItem .Img,.historyArea .historyItem .Img img{width: 60px;height: 60px;}
	.historyArea .historyItem .Img::before{width:140px;height:140px;display: none;}
	.historyArea .historyItem .Img::after{display:none}
}