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:#0d0d0d;box-shadow:0px 0px 6px 1px rgb(178 178 178 / 35%);border-radius:10px;padding:18px;flex-direction:column}
.closeok{position:absolute;top:10px;right:10px;width:28px;height:28px;background:#dc3545;color:white;border:none;border-radius:50%;font-size:18px;cursor:pointer;z-index:1001}

.ml16 { color: #402d2d; 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: #959595; }
.appleJ a { font-size: 14px; color: #959595; }

.container { background-color: #222; 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(0, 0, 0, 0.3); -moz-box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 9px 13px 0px rgba(0, 0, 0, 0.3); -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: #ffffff;padding: 25px 18px 10px 17px;border-radius: 6666px;transform: rotate(45deg);}
.menu-trigger-bar {display: block;width: 100%;height: 2px;background-color: var(--primary);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(0, 0, 0, 0.2); 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: #222222; position: relative; }
.close-trigger-bar:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 0%; height: 100%; background-color: rgba(255, 255, 255, 0.2); 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: white;padding-bottom: 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: white 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: white; }
.butmm:hover{ background: #eddac1; }
.butmm:hover .menu-trigger{ color: #222222; }
.logo span { display: block; text-align: center; line-height: 62px; font-size: 72px; color: white; }
.logo span p.maupost{font-size: 50px;padding: 0 0;margin: 0 auto;color: #eddac1;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: #222222; 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: #6295ca; 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%; }
.menu a { text-decoration: none; color: #222222; display: inline-block; padding: 10px 0; position: relative; font-size: 22px; width: 100%; }
.menu a:hover:before { opacity: 1; transform: translateX(0px); }
.menu a:before {content: "";display: block;position: absolute;left: 0;bottom: 0;width: 70%;left: 0%;height: 1px;opacity: 0;background-color: #22222263;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: #f8f8f8;}
.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: #fff; }
#links a { text-decoration: none; font-size: 2.3em; color: #fff; }

#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:white}
.heainfo .coolinebox{display:flex;width:2px;height:100px;background:#ffffff}
.heainfo .contactbox{display:flex;flex-direction:column;align-items:center;gap:10px}
.heainfo .contactbox a{display:flex;flex-direction:column;align-items:center;background:white;padding:10px;border-radius:6666px}
.heainfo .contactbox a svg{width:20px;aspect-ratio:1/1;fill:var(--primary)}

@media (max-width:1460px){
	
	.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){
	body{padding: 0;}
	#cis{padding-bottom:0;}
	.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: #e5e5e5 1px solid;}
	.menu a:hover:before{display:none;}
	.menu a{font-size: 15px;padding: 6px 0;}
	.logo{width:100%;background: unset;/* height: auto; */pointer-events: none;top: 0;}
	#cis * , .heainfo *{pointer-events: auto;}
	#cis img{width:80px;}
	.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:#ff8c42}
	.heainfo .contactbox a.phone svg{fill: white;}
	.heainfo .contactbox a.wline{background:#59b15c}
	.heainfo .contactbox a.wline svg{fill: white;}
	.heainfo .contactbox a.maail{background:#e3e3e3;}
}
@media (max-width:480px){
	.showmeok{right:50px;bottom:150px}
	#flowimg{width:250px}
	.advantages{width:80%;top:63%;left:50%;transform:translate(-50%,-50%)}
	.logo img{width:80%}
	.linelinkJJ{bottom:120px;right:20px}
	.flowlink{bottom:50px;right:20px}
	.menu-bg.middle{left: -96%;}
	#cis img{width: 70px;filter: brightness(666666);}
	.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: 5px;background: unset;}
	.close-trigger{right: 20px;top: 33px;}
	body{height:calc(100% - 56px)}
	.appleJ,.appleJ a{font-size:12px;margin-top:11px;color:#959595}
	#cis{background:var(--primary);padding: 7px 0;}
	.menu-trigger-bar{background-color:white;}
}