@charset "utf-8";

html { background: #f7f7f7; overflow-y: scroll!important; }
body { min-width: 1240px; background: #f7f7f7; font-family: noto-sans, sans-serif, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo; font-weight: 400; font-style: normal; }

/*============================
.css-loading
============================*/
#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7f7f7; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.8s, visibility 0.8s; }
#loading.loaded { opacity: 0; visibility: hidden; }
#loading .ring-loader { width: 35px; height: 35px; border: 4px solid #00377e; border-radius: 50%; position: relative; }
#loading .ring-loader::after { content: ''; position: absolute; top: -4px; left: -4px; width: 130%; height: 130%; border: 4px solid transparent; border-top-color: #8fa5c1; border-radius: 50%; animation: ring-rotate 1s linear infinite; }
@keyframes ring-rotate { to { transform: rotate(360deg); } }

/*============================
#header
============================*/
#header { position: fixed; width: 100%; white-space: nowrap; background-color: #00377e; padding: 20px 60px 20px 15px; z-index: 1; }
#header nav { display: flex; justify-content: space-between; align-items: center; }
#header .title { display: flex; align-items: center; }
#header .title .logo { width: 206px; height: 60px; padding-right: 20px; border-right: 1px solid #fff; }
#header .title .logo a {}
#header .title .logo a img { width: 100%; height: auto; }
#header .title .copy { padding-left: 20px; line-height: 1.25; font-size: 0.875em; color: #fff; }
#header .globalNav { display: flex; justify-content: flex-end; gap: 50px; }
#header .globalNav ul { display: flex; align-items: center; gap: 30px; }
#header .globalNav ul li { position: relative; }
#header .globalNav ul li:after { position: absolute; left: 0; content: ''; width: 100%; height: 4px; background: #fff; bottom: -41px; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
#header .globalNav ul li:hover:after { transform: scale(1, 1); }
#header .globalNav ul li.active { position: relative; }
#header .globalNav ul li.active:after { content: ''; position: absolute; bottom: -41px; left: 50%; transform: translateX(-50%); width: 100%; border-bottom: 4px solid #fff; }
#header .globalNav ul li a {}
#header .globalNav ul li a span { color: #fff; font-size: 1.125em; }
#header .globalNav .entry {}
#header .globalNav .entry a { padding: 14px 30px 12px 65px; border: 1px solid #fff; border-radius: 25px; transition: 0.25s all; }
#header .globalNav .entry a:hover { background-color: #fff; }
#header .globalNav .entry a span { position: relative; color: #fff; font-size: 1.375em; font-weight: 500; transition: 0.25s all; }
#header .globalNav .entry a span:before { content: ''; position: absolute; background-image: url("../../imageFile/global/icon_mail_wh.svg"); background-repeat: no-repeat; width: 21px; height: 15px; left: -30px; top: 50%; transform: translateY(-50%); transition: 0.25s all; }
#header .globalNav .entry a:hover span:before { background-image: url("../../imageFile/global/icon_mail_bl.svg"); }
#header .globalNav .entry a:hover span { color: #00377e; }
#header .headerSp { display: none; }
#header .headerSp .logo {}
#header .headerSp .logo a {}
#header .headerSp .logo a img {}
#header .headerSp .entry {}
#header .headerSp .entry a {}
#header .headerSp .entry a span {}
#header .headerSp .entry a span img {}
#header .headerSp input.checkbox-toggle {}
#header .headerSp .hamburger {}
#header .headerSp .hamburger span.bar {}
#header .headerSp .menu {}
#header .headerSp .menu .wrapper {}
#header .headerSp .menu .wrapper .container {}
#header .headerSp .menu .wrapper .container .logo {}
#header .headerSp .menu .wrapper .container .logo a {}
#header .headerSp .menu .wrapper .container .logo a img {}
#header .headerSp .menu .wrapper .container .offical {}
#header .headerSp .menu .wrapper .container .offical a {}
#header .headerSp .menu .wrapper .container .offical a span {}
#header .headerSp .menu .wrapper .container ul {}
#header .headerSp .menu .wrapper .container ul li {}
#header .headerSp .menu .wrapper .container ul li a {}
#header .headerSp .menu .wrapper .container ul li a span {}

main { overflow: hidden; position: relative; z-index: 0; }

/*============================
#fixButtonArea
============================*/
#fixButtonArea { position: fixed; bottom: 20px; right: 20px; width: 300px; height: 125px; background-color: #00377e; color: #fff; text-align: center; padding: 10px; border-radius: 10px; z-index: 9999; }
#fixButtonArea a { display: flex; align-items: center; gap: 15px; }
#fixButtonArea a .image { width: 105px; height: 105px; }
#fixButtonArea a .image img { width: 100%; height: auto; }
#fixButtonArea a .copy { width: 130px; height: 90px; }
#fixButtonArea a .copy img { width: 100%; height: auto; }

#fixButtonArea #close-btn { position: absolute; top: -10px; left: -10px; background-color: #333; width: 24px; height: 24px; border-radius: 50%; color: #fff; cursor: pointer; }

/*============================
#footer
============================*/
#footer { padding: 190px 0 80px; background-image: url("../../imageFile/global/urai_bg_footer.png"); background-size: cover; background-position: center top; }
#footer .container { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 60px; }
#footer .container .leftArea {}
#footer .container .leftArea .logo { width: 332px; height: 42px; }
#footer .container .leftArea .logo a {}
#footer .container .leftArea .logo a img { width: 100%; height: auto; }
#footer .container .leftArea .button { margin-top: 40px; }
#footer .container .leftArea .button a { display: inline-block; padding: 15px 55px 14px 30px; border: 1px solid #fff; border-radius: 25px; transition: 0.25s all; }
#footer .container .leftArea .button a:hover { background-color: rgba(255,255,255,0.6); }
#footer .container .leftArea .button a span { position: relative; color: #fff; transition: 0.25s all; }
#footer .container .leftArea .button a:hover span { color: #00377e; }
#footer .container .leftArea .button a span:after { content: ''; position: absolute; right: -20px; background-image: url("../../imageFile/global/icon_blank_wh.svg"); width: 14px; height: 14px; background-size: cover; transition: 0.25s all; }
#footer .container .leftArea .button a:hover span:after { background-image: url("../../imageFile/global/icon_blank_bl.svg"); }
#footer .container ul { display: flex; flex-wrap: wrap; justify-content: flex-end; width: 750px; gap: 40px; margin-top: 100px; }
#footer .container ul li {}
#footer .container ul li a { position: relative; }
#footer .container ul li a:after { position: absolute; left: 0; content: ''; width: 100%; height: 1px; background: #fff; bottom: -2px; transform: scale(0, 1); transform-origin: center top; transition: transform 0.3s; }
#footer .container ul li a:hover:after { transform: scale(1, 1); }
#footer .container ul li a span { font-size: 1.125em; color: #fff; }
#footer .copyright { padding-top: 30px; font-size: 0.875em; color: #fff; border-top: 1px dashed #fff; }