@charset "UTF-8";
/* Vendor */
/* Site settings */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ul, ol, nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

*, *::before, *::after { box-sizing: border-box; }

ins { background-color: transparent; color: transparent; text-decoration: none; }

mark { background-color: transparent; color: transparent; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

input, select { vertical-align: middle; }

html, body { font-size: 62.5%; background-color: transparent; background-image: none; }

body { font-size: 14px; font-size: 1.4rem; font-family: "Noto Sans Japanese", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "メイリオ", Meiryo, helvetica, arial, sans-serif; line-height: 1; letter-spacing: 0; font-weight: 500; color: #444; -webkit-text-size-adjust: 100%; background: transparent !important; }

main { display: block; }

#body { padding: 0 3%; max-width: 1600px; margin: 0 auto; overflow: hidden; }
@media screen and (max-width: 959px) { #body { padding: 0 1rem; } }

a { text-decoration: none; color: inherit; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
a:hover { opacity: 0.8; }
a:active { opacity: 1; }
a:visited { opacity: inherit; color: inherit; }

img { display: block; width: 100%; }

.caption { display: none; }

::selection { background: rgba(0, 0, 0, 0.8); color: #fff; }

/*Firefoxに対応*/
::-moz-selection { background: rgba(0, 0, 0, 0.8); color: #fff; }

#head { padding: 0 3%; max-width: 1600px; margin: 0 auto; }
@media screen and (max-width: 959px) { #head { padding: 0 1rem; } }
#head #head-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.7rem 0 2rem; }
@media screen and (max-width: 559px) { #head #head-inner { padding: 1.3rem 0 1rem; } }
#head #head-inner #site-ttl a { display: flex; align-items: center; }
#head #head-inner #site-ttl a img { width: 152px; display: inline-block; }
@media screen and (max-width: 559px) { #head #head-inner #site-ttl a img { width: 136px; } }
#head #head-inner #site-ttl a > span { color: #0062ae; font-weight: 400; letter-spacing: -.1rem; margin: 1rem 0 0 1rem; display: inline-block; }
@media screen and (max-width: 559px) { #head #head-inner #site-ttl a > span { display: none; } }
#head #head-inner #site-ttl a > span > span { font-size: 1.1rem; }
#head #head-inner ul { display: flex; }
#head #head-inner ul li:first-child { width: 86px; margin-right: 1.5rem; }
@media screen and (max-width: 559px) { #head #head-inner ul li:first-child { width: 78px; margin-right: 1rem; } }
#head #head-inner ul li:last-child { width: 35px; }
@media screen and (max-width: 559px) { #head #head-inner ul li:last-child { width: 32px; } }

#footer { padding: 0 3%; max-width: 1600px; margin: 0 auto; margin-top: 6rem; }
@media screen and (max-width: 959px) { #footer { padding: 0 1rem; } }
@media screen and (max-width: 559px) { #footer { margin-top: 4rem; } }
#footer .mpft { border-top: 1px solid #313882; border-bottom: 1px solid #313882; padding: 20px 0 20px; margin-bottom: 20px; }
@media screen and (max-width: 559px) { #footer .mpft { padding: 20px 0 10px; } }
#footer .mpft .mpft-box { display: flex; align-items: center; }
@media screen and (max-width: 767px) { #footer .mpft .mpft-box { flex-direction: column; } }
#footer .mpft .mpft-box .tosite-top a { display: flex; align-items: center; }
#footer .mpft .mpft-box .tosite-top a span:nth-of-type(1) { width: 90px; height: 20px; margin-right: 5px; }
#footer .mpft .mpft-box .tosite-top a span:nth-of-type(2) { font-size: 13px; color: #005194; }
@media screen and (max-width: 559px) { #footer .mpft .mpft-box .tosite-top a span:nth-of-type(2) { font-size: 12px; } }
#footer .mpft .mpft-box .vertical-line { width: 1px; height: 35px; background: #0a5294; margin: 0 25px 0 20px; display: block; }
@media screen and (max-width: 767px) { #footer .mpft .mpft-box .vertical-line { width: 100%; height: 1px; margin: 20px auto; } }
#footer .mpft .mpft-box .mpft-eventname a { display: flex; align-items: center; }
@media screen and (max-width: 559px) { #footer .mpft .mpft-box .mpft-eventname a { flex-direction: column; } }
#footer .mpft .mpft-box .mpft-eventname a span:nth-of-type(1) { width: 176px; height: 17px; position: relative; top: -2px; margin-right: 10px; }
@media screen and (max-width: 559px) { #footer .mpft .mpft-box .mpft-eventname a span:nth-of-type(1) { margin: 0 auto 2px; } }
#footer .mpft .mpft-box .mpft-eventname a span:nth-of-type(2) { font-size: 13px; color: #0068b6; }
@media screen and (max-width: 559px) { #footer .mpft .mpft-box .mpft-eventname a span:nth-of-type(2) { font-size: 12px; } }
#footer .logo-area { width: 100%; display: flex; flex-direction: column;     /*.kyoryoku-kyosan { display: flex; align-items: center; @media screen and (max-width:1150px) { flex-direction: column; align-items: flex-start;
}
}*/ }
#footer .logo-area .logo-box { display: flex; align-items: center;     /*&.kyoryoku { margin-right: 15px; @media screen and (max-width:$break-thistbout) { margin: 0;
}
} &.kyosan { @media screen and (max-width:1150px) { margin-top: 20px;
} .vertical-lines { width: 1px; height: 35px; background: #0a5294; display: block;
}
}*/ }
@media screen and (max-width: 559px) { #footer .logo-area .logo-box { justify-content: center; } }
#footer .logo-area .logo-box p { width: 35px; font-size: 10px; line-height: 1; }
#footer .logo-area .logo-box ul { flex: 1; display: flex; align-items: center; flex-wrap: wrap; }
@media screen and (max-width: 559px) { #footer .logo-area .logo-box ul { flex: inherit; } }
#footer .logo-area .logo-box ul li.logo-map-umitonihon { width: 114px; }
#footer .logo-area .logo-box ul li.logo-map-cfb { width: 66px; }
#footer .logo-area .logo-box ul li.logo-map-zaidan { width: 123px; }
#footer .logo-area .logo-box ul li.logo-map-umisakura { width: 137px; }
@media screen and (max-width: 559px) { #footer .logo-area .logo-box ul li.logo-map-umitonihon { width: 50px; }
  #footer .logo-area .logo-box ul li.logo-map-cfb { width: 35px; }
  #footer .logo-area .logo-box ul li.logo-map-zaidan { width: 73px; }
  #footer .logo-area .logo-box ul li.logo-map-umisakura { width: 77px; } }
#footer .logo-area .logo-box ul li:not(:last-child) { margin-right: 15px; }
@media screen and (max-width: 767px) { #footer .logo-area .logo-box ul li:not(:last-child) { margin-right: 10px; } }
#footer .logo-area .logo-box ul li a { display: block; }
#footer .logo-area .logo-box ul li a:hover { opacity: .7; }
#footer .logo-area .logo-box.kyosai { margin-bottom: 15px; }
#footer .logo-area .logo-box.kyosai p { margin-right: 5px; }
@media screen and (max-width: 767px) { #footer .logo-area .logo-box.kyosai p { margin-right: 5px; } }
#footer .logo-area .logo-box.kyosai ul li:not(:last-child) { margin-right: 30px; }
@media screen and (max-width: 767px) { #footer .logo-area .logo-box.kyosai ul li:not(:last-child) { margin-right: 10px; } }
#footer .copyright { font-size: 1.2rem; text-align: center; padding: 1.7rem 0; }
@media screen and (max-width: 559px) { #footer .copyright { font-size: 1rem; } }
#footer .copyright a { color: #0062ae; }

#page-top { display: none !important; position: fixed; bottom: 3rem; right: 2rem; }
@media screen and (max-width: 959px) { #page-top { bottom: 1rem; right: 1rem; } }
#page-top a { width: 60px; height: 60px; border-radius: 50%; background: rgba(0, 87, 165, 0.4); display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; opacity: .8; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
@media screen and (max-width: 959px) { #page-top a { width: 34px; height: 34px; } }
#page-top a img { width: 23px; }
@media screen and (max-width: 959px) { #page-top a img { width: 20px; } }
@media screen and (max-width: 559px) { #page-top a img { width: 16px; } }
#page-top a:hover { -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -webkit-transform: translateY(-5px); transform: translateY(-5px); opacity: 1; background: #0778be; }

#hero, #hero-gold { background: #0778be; position: relative; width: 100%; height: 310px; margin-bottom: 4.5rem; }
@media screen and (max-width: 959px) { #hero, #hero-gold { height: 255px; margin-bottom: 4rem; } }
@media screen and (max-width: 559px) { #hero, #hero-gold { height: 190px; margin-bottom: 3rem; } }
#hero .iamge, #hero-gold .iamge { width: 754px; position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
@media screen and (max-width: 959px) { #hero .iamge, #hero-gold .iamge { width: 500px; } }
@media screen and (max-width: 559px) { #hero .iamge, #hero-gold .iamge { display: none; } }
#hero .iamge-sp, #hero-gold .iamge-sp { display: none; width: 280px; position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
@media screen and (max-width: 559px) { #hero .iamge-sp, #hero-gold .iamge-sp { display: block; } }
#hero .iamge-gold, #hero-gold .iamge-gold { width: 754px; position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
@media screen and (max-width: 959px) { #hero .iamge-gold, #hero-gold .iamge-gold { width: 500px; } }
@media screen and (max-width: 559px) { #hero .iamge-gold, #hero-gold .iamge-gold { display: none; } }
#hero .iamge-gold-sp, #hero-gold .iamge-gold-sp { display: none; width: 280px; position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); }
@media screen and (max-width: 559px) { #hero .iamge-gold-sp, #hero-gold .iamge-gold-sp { display: block; } }

.sec-ttl { font-size: 2.5rem; color: #0778be; font-weight: 700; margin-bottom: 5rem; }
@media screen and (max-width: 959px) { .sec-ttl { font-size: 2.2rem; margin-bottom: 4rem; } }
@media screen and (max-width: 559px) { .sec-ttl { font-size: 2rem; margin-bottom: 3rem; } }

.fadeon { opacity: 0; transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.5s; }
.fadeon.is-on { opacity: 1; }

.fadeup { opacity: 0; transition: all 0.7s cubic-bezier(0.19, 1, 0.22, 1) 0.5s; -moz-transform: translateY(5rem); -ms-transform: translateY(5rem); -webkit-transform: translateY(5rem); transform: translateY(5rem); }
.fadeup.is-on { opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); }