@charset "utf-8"; @-ms-viewport { width: device-width; } @viewport { width: device-width; } .pc{display:block;} .sp{display:none;} /*################################################ header setting #################################################*/ header{ position: fixed; top: 0; z-index: 9999; display: flex; justify-content: center; align-items: center; width: 100%; height: 80x; background-color: rgb(0, 0, 0,0.5); transition: all 0.3s ease-out; } header .contents{ width:95%; margin:0 auto; } .header-inner{ width:100%; height:80px; text-align:right; margin-top:10px; } .header-inner img{ width:100px; float:left; } .header-inner p{ float:left; line-height:50px; margin-left:20px; } .header-inner p a{ text-decoration: none; color: #fff; position: relative; transition: 0.3s; padding: 5px; } .mainNavWrap{ position:relative; display:inline-block; top:32px; z-index:200; height:32px; } .mainNavWrapInner{ min-width:1000px; max-width:1000px; margin:0 auto } .mainNav{ position:relative; z-index:2 } .mainNav > ul, .mainNav > ul > li > a{ display:-webkit-box; display:-ms-flexbox; display:flex; } .mainNav > ul > li{ position:relative; width:100%; line-height:1; } .mainNav > ul > li.is-current > a{ font-weight:700; background:#212dd5 } .mainNav > ul > li > a{ -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; height:32px; font-size:14px; letter-spacing:normal; color:#fff; text-decoration:none; } .mainNav > ul > li > a:hover{ background:#212dd5 } .mainNavSubWrap{ position:absolute; top:0; left:0; width:100%; z-index:-1 } .mainNavSub{ position:absolute; top:32px; left:0px; width:100%; z-index:-1; margin:0; height:0; opacity:0; visibility:hidden; pointer-events:none; -webkit-transform-origin:center top; transform-origin:center top; -webkit-transform:translateY(-20px); transform:translateY(-20px); -webkit-transition:opacity .4s cubic-bezier(.215,.61,.355,1),visibility .4s cubic-bezier(.215,.61,.355,1),height 0s cubic-bezier(.215,.61,.355,1) .4s,-webkit-transform .4s cubic-bezier(.215,.61,.355,1); transition:opacity .4s cubic-bezier(.215,.61,.355,1),visibility .4s cubic-bezier(.215,.61,.355,1),transform .4s cubic-bezier(.215,.61,.355,1),height 0s cubic-bezier(.215,.61,.355,1) .4s; transition:opacity .4s cubic-bezier(.215,.61,.355,1),visibility .4s cubic-bezier(.215,.61,.355,1),transform .4s cubic-bezier(.215,.61,.355,1),height 0s cubic-bezier(.215,.61,.355,1) .4s,-webkit-transform .4s cubic-bezier(.215,.61,.355,1) } li:hover .mainNavSub{ opacity:1; visibility:visible; pointer-events:auto; -webkit-transform:translateY(0); transform:translateY(0); -webkit-transition:opacity .4s cubic-bezier(.215,.61,.355,1),visibility .4s cubic-bezier(.215,.61,.355,1),height 0s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1); transition:opacity .4s cubic-bezier(.215,.61,.355,1),visibility .4s cubic-bezier(.215,.61,.355,1),transform .4s cubic-bezier(.215,.61,.355,1),height 0s cubic-bezier(.215,.61,.355,1); transition:opacity .4s cubic-bezier(.215,.61,.355,1),visibility .4s cubic-bezier(.215,.61,.355,1),transform .4s cubic-bezier(.215,.61,.355,1),height 0s cubic-bezier(.215,.61,.355,1),-webkit-transform .4s cubic-bezier(.215,.61,.355,1) } .mainNavSub > ul > li > a{ display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; width:100%; height:32px; font-size:14px; letter-spacing:normal; color:rgba(255,255,255,.7); background:rgba(96,114,144,.6) } .is-current .mainNavSub > ul > li > a{ font-weight:700 } .mainNavSub > ul > li > a:hover{ color:#fff; background:#212dd5 } header.fixed-hide{ top: -130px; } .menu-btn{ display:none; } /*################################################ footter setting #################################################*/ footer{ width:100%; height:auto; margin:80px 0 0 0; } footer .contents{ width:1200px; margin:0 auto; display:flex; flex-direction:row; } footer .contents dl{ width:250px; height:auto; font-size:80%; } footer .contents dt{ font-weight:900; margin-left:1em; height:30px; border-bottom:1px solid #fff; } footer .contents dd{ margin-left:1em; line-height:3em; } .copy{ width:100%; margin-top:40px; padding-top:20px; padding-bottom:30px; text-align:center; font-size:80%; } footer .contents dd a { text-decoration: none; color: #fff; font-weight: bold; position: relative; transition: 0.3s; padding: 5px; } footer .contents dd a::after { position: absolute; bottom: 0; left: 50%; content: ""; width: 0; height: 1px; background-color: #fff; transition: 0.3s; transform: translateX(-50%); } footer .contents dd a:hover::after { width: 100%; } /*################################################ .button setting #################################################*/ .button { display: inline-block; width: 200px; height: 54px; text-align: center; text-decoration: none; line-height: 54px; outline: none; } .button::before, .button::after { position: absolute; z-index: -1; display: block; content: ''; } .button, .button::before, .button::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; } .button { position: relative; z-index: 2; background-color: #fff; border: 2px solid #fff; color: #fff; line-height: 50px; } .button:hover { background-color: #fff; border-color: #101229; color: #101229; font-weight:600; } .button::before, .button::after { left: 0; width: 100%; height: 50%; background-color: #101229; } .button::before { top: 0; } .button::after { bottom: 0; } .button:hover::before, .button:hover::after { height: 0; background-color: #101229; } span.testBtn{ display:inline-table; margin-left:30px; } /* ======================================================== to topPage btn setting =========================================================*/ .toToparrow { position: relative; display: inline-block; padding: 0 0 0 16px; color: #000; vertical-align: middle; text-decoration: none; } .toToparrow::after, .toToparrow::before { position: absolute; content: ""; top: 0; bottom: 0; left: 0; margin: auto; vertical-align: middle; box-sizing: border-box; } .arrow_down::before, .arrow_up::before { top: auto; left: auto; bottom: 8px; width: 10px; height: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(-45deg); box-sizing: border-box; } #js-backtoTop { position: fixed; bottom: 50px; right: 40px; z-index: 1000; transition: all 1s ease-out; transition: bottom 0.2s ease-out; opacity: 0; } #js-backtoTop.fadein { opacity: 1; transition:0.5s; } #js-backtoTop.fadeout { opacity: 0; transition:0.5s; } #js-backtoTop:hover { opacity: 0.8; bottom: 34px; } #js-backtoTop:hover::after { box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4); box-sizing: border-box; } #js-backtoTop::after { content: ""; display: block; color: #fff; text-align: center; width: 60px; height: 60px; padding: 4px; border:1px solid #fff; transition: all 0.3s; transition: background-color 0.5s ease-out; box-sizing: border-box; } #js-backtoTop .toToparrow { top: 65px; left: 4px; } #js-backtoTop .toToparrow::before { width: 20px; height: 20px; z-index: 1; box-sizing: border-box; }