a, a:hover { text-decoration: none; }

.linelinkJJ {position: fixed;right: 70px;bottom: 150px;}
.linelinkJJ img { width: 60px; }
.linelinkJJ img.img-fluid{position:absolute;top: -20px;-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;z-index:8}

.flowlink{position: fixed;right: 70px;bottom: 70px;}
.flowlink .Img img { width: 60px; }

@-webkit-keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}
14%{-webkit-transform:scale(1.3);transform:scale(1.3)}
28%{-webkit-transform:scale(1);transform:scale(1)}
42%{-webkit-transform:scale(1.3);transform:scale(1.3)}
70%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes heartBeat{0%{-webkit-transform:scale(1);transform:scale(1)}
14%{-webkit-transform:scale(1.3);transform:scale(1.3)}
28%{-webkit-transform:scale(1);transform:scale(1)}
42%{-webkit-transform:scale(1.3);transform:scale(1.3)}
70%{-webkit-transform:scale(1);transform:scale(1)}}

.showmeok{display:none;position:fixed;right:170px;bottom:30px;border-radius:10px;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#flowimg{position:relative;display:flex;width:400px;height:auto;background-color:var(--triadic2);box-shadow:0px 0px 6px 1px rgba(var(--primary-rgb), .18);border-radius:10px;padding:18px;flex-direction:column}
.closeok{position:absolute;top:10px;right:10px;width:28px;height:28px;background:var(--orange);color:var(--white);border:none;border-radius:50%;font-size:18px;cursor:pointer;z-index:1001}

.ml16 { color: var(--triadic2); padding: 0 0; margin: 0 auto; font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5em; overflow: hidden; margin-top: -25px; }
.ml16 .letter { display: inline-block; line-height: 100%; font-size: 26px; font-weight: 300; }

.appleJ { margin-top: 12px; font-size: 14px; color: var(--darkgray); }
.appleJ a { font-size: 14px; color: var(--darkgray); }

.container { background-color: var(--info); margin: 0 auto; width: 100%; max-width: 100%; min-height: 100%; margin: 0 auto; border-radius: 8px; position: relative; overflow: hidden; -webkit-box-shadow: 0px 9px 13px 0px rgba(var(--primary-rgb), .18); -moz-box-shadow: 0px 9px 13px 0px rgba(var(--primary-rgb), .18); box-shadow: 0px 9px 13px 0px rgba(var(--primary-rgb), .18); -webkit-transform: scale(1); }

.menu-trigger, .close-trigger {position: fixed;top: 70px;right: 55px;display: block;width: 30px;height: 30px;cursor: pointer;z-index: 333;}
.menu-trigger:hover .menu-trigger-bar:before, .close-trigger:hover .menu-trigger-bar:before { width: 100%; }
.menu-trigger:hover .close-trigger-bar:before, .close-trigger:hover .close-trigger-bar:before { width: 100%; }
.close-trigger { z-index: 5; top: 42px; }
.menu-trigger{background: var(--white);padding: 27px 16px 11px 18px;border-radius: 6666px;transform: rotate(45deg);}
.menu-trigger-bar {display: block;width: 100%;height: 2px;background-color: var(--black);margin-bottom: 4px;transform: rotate(-45deg);position: relative;}
.menu-trigger-bar:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 0%; height: 100%; background-color: rgba(var(--primary-rgb), .28); transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1); }
.menu-trigger-bar.top {width: 100%;margin-left: -7px;}
.menu-trigger-bar.middle:before { left: auto; right: 0; }
.menu-trigger-bar.bottom {width: 100%;margin-left: 6px;}

.close-trigger-bar {display: block;width: 100%;height: 4px;background-color: var(--info);position: relative;}
.close-trigger-bar:before {content: "";position: absolute;top: 0;left: 0;display: block;width: 0%;height: 100%;background-color: var(--irongray);transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);}
.close-trigger-bar.left { transform: translateX(100px) translateY(-100px) rotate(-45deg); }
.close-trigger-bar.right { transform: translateX(-100px) translateY(-100px) rotate(45deg); top: -3px; }

#japen.logo{ width: 100%; height: 100%; top: auto; left: auto; }
.logo {display: flex;width: 8vw;height: 200px;position: absolute;z-index: 30;flex-direction: column;height: 100vh;position: fixed;background: var(--primary);gap: 20px;justify-content: space-between;}
#cis{background: var(--white);padding: 20px;}
.butmm{ position: absolute; width: 200px; height: 55px; bottom: 115px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; border: rgba(var(--white-rgb), .85) 1px solid; left: calc(50% - 100px); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; }
.butmm .menu-trigger{ width: 100%; top: auto; right: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--white); }
.butmm:hover{ background: var(--secondary); }
.butmm:hover .menu-trigger{ color: var(--info); }
.logo span { display: block; text-align: center; line-height: 62px; font-size: 72px; color: var(--white); }
.logo span p.maupost{font-size: 50px;padding: 0 0;margin: 0 auto;color: var(--secondary);letter-spacing: 0.15em;position: absolute;right: -400px;}
img{ max-width: 100%; }
.logo img{width: 100%;top: auto;}

.logo-title { position: absolute; top: 10px; left: 0; width: 100%; height: 100%; color: var(--info); font-size: 32px; line-height: 82x; }

.logo-badge { position: absolute; display: block; width: 24px; height: 24px; top: 6px; right: -6px; border-radius: 100%; background-color: var(--complement); font-size: 12px; line-height: 2; text-align: center; }

.advantages{display: block;width: 480px;position: absolute;top: calc(77% - 100px);left: calc(50% - 240px);text-align: center;z-index: 10;}

.inner-container, .menu-container {position: absolute;height: 100vh;width: 100%;left: 0;top: 0;}

.menu-container { display: flex; align-items: center; position: fixed; width: 100%; height: 100%; justify-content: center; }

.menu { display: flex; width: calc(100% - 40px); padding: 20px; flex-wrap: wrap; margin: 0 auto; }
.menu li {display: flex;padding: 15px 0;width: 25%;justify-content: flex-start;}
.menu a {text-decoration: none;color: var(--info);padding: 10px 0;position: relative;font-size: 22px;width: 100%;display: inline-block;text-align: center;}
.menu a:hover:before {opacity: 1;transform: translateX(10%);}
.menu a:before {content: "";display: block;position: absolute;left: 0;bottom: 0;width: 85%;height: 1px;opacity: 0;background-color: var(--info);transform: translateX(100px);transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);}

.menu-bg {position: fixed;display: block;width: 300%;left: -53%;top: -25%;height: 103vh;max-height: 106vh;background-color: var(--gray);}
.menu-bg.middle {top: -10%;left: -100%;transform: rotate(-45deg) scaleY(0);}
.menu-bg.top {left: -118%;top: -95%;transform: rotate(-45deg) translateY(-152%);}
.menu-bg.bottom {top: 100%;transform: rotate(-45deg) translateY(25%);left: -40%;}

#links { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 50px; font-size: 13px; font-family: tahoma; color: var(--white); }
#links a { text-decoration: none; font-size: 2.3em; color: var(--white); }

#twitter { position: absolute; bottom: 15px; right: 20px; }

#pens { position: absolute; bottom: 15px; left: 20px; }

.heainfo{display:flex;flex-direction: column;align-items: center;gap: 20px;margin-bottom: 50px;}
.heainfo .cotext{webkit-writing-mode:vertical-rl;writing-mode:vertical-rl;color:var(--white)}
.heainfo .coolinebox{display:flex;width:2px;height:100px;background:var(--white)}
.heainfo .contactbox{display:flex;flex-direction:column;align-items:center;gap:10px}
.heainfo .contactbox a{display:flex;flex-direction:column;align-items:center;background:var(--white);padding:10px;border-radius:6666px}
.heainfo .contactbox a svg{width:20px;aspect-ratio:1/1;fill: var(--primary);}

@media (max-width:1460px){
	.menu a:hover:before{transform: translateX(20px);}
	.ml16 .letter{font-size:18px}
	.butmm{width:150px;left:calc(50% - 75px);height:50px;bottom:76px}
	.menu a{font-size:18px}
	.advantages{top:calc(80% - 100px)}
}
@media (max-width:980px){
    .heainfo .contactbox a svg{fill:white}
	body{padding: 0;}
	#cis{padding: 10px 20px;}
	.menu-bg.top{width: 320%;left: -103%;top: -111%;}
	.linelinkJJ{bottom:195px;right:31px}
	.flowlink{bottom:115px;right:31px}
	.showmeok{right:120px;bottom:110px}
	#flowimg{width:300px}
	.menu-container nav{width:100%;}
	.menu{display: flex;flex-direction: column;width: 90%;padding: 5%;}
	.menu li{width:100%;border-bottom: rgba(var(--primary-rgb), .14) 1px solid;}
	.menu a:hover:before{display:none;}
	.menu a{font-size: 17px;padding: 6px 0;}
	.logo{width:100%;background: unset;/* height: auto; */pointer-events: none;top: 0;}
	#cis * , .heainfo *{pointer-events: auto;}
	#cis img{height: 70px;}
	.heainfo{position:fixed;bottom: 50px;right: 10px;}
	.heainfo .cotext , .heainfo .coolinebox{display:none;}
	.menu-trigger, .close-trigger{top: 14px;right: 10px;}
	.close-trigger{top: 33px;right: 18px;}
	.heainfo .contactbox a.phone{background:var(--orange)}
	.heainfo .contactbox a.phone svg{fill: var(--white);}
	.heainfo .contactbox a.wline{background:var(--triadic1)}
	.heainfo .contactbox a.wline svg{fill: var(--white);}
	.heainfo .contactbox a.maail{background: var(--complement);}
}
@media (max-width:480px){
	.showmeok{right:50px;bottom:150px}
	#flowimg{width:250px}
	.advantages{width:80%;top:63%;left:50%;transform:translate(-50%,-50%)}
	.linelinkJJ{bottom:120px;right:20px}
	.flowlink{bottom:50px;right:20px}
	.menu-bg.middle{left: -96%;}
	.ml16 .letter{font-size:12px}
	.logo span p.maupost{font-size:19px}
	.butmm .menu-trigger{font-size:14px}
	.butmm{width:130px;left:calc(50% - 65px);height:45px;border-radius:5px}
	.menu-trigger{right: 10px;top: 12px;background: unset;}
	.close-trigger{right: 20px;top: 33px;}
	body{height:calc(100% - 56px)}
	.appleJ,.appleJ a{font-size:12px;margin-top:11px;color:var(--darkgray)}
}