@charset "UTF-8"; /*# _sourceMappingURL=common.css.map */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } .mt-l { margin-top: 8rem !important; } .mt-m { margin-top: 4rem !important; } .mt-s { margin-top: 2rem !important; } .mt-none { margin-top: 0 !important; } .pt-l { padding-top: 8rem !important; } .pt-m { padding-top: 4rem !important; } .pt-s { padding-top: 2rem !important; } .pt-none { padding-top: 0 !important; } .pb-l { padding-bottom: 8rem !important; } .pb-m { padding-bottom: 4rem !important; } .pb-s { padding-bottom: 2rem !important; } .pb-none { padding-bottom: 0 !important; } .heading { display: block; } .heading.--center { text-align: center; } .heading.--right { text-align: right; } .heading.__a { font-size: 4.4rem; font-weight: bold; color: #00A4C9; text-align: center; padding-bottom: 1.5rem; } @media screen and (max-width: 767px) { .heading.__a { font-size: 2.8rem; } } .heading.__a span + span { display: block; font-size: 32px; } @media screen and (max-width: 767px) { .heading.__a span + span { font-size: 2rem; } } .heading.__a img { display: inline-block; margin-right: 2rem; } @media screen and (max-width: 767px) { .heading.__a img { height: 2.4rem; } } .heading.__b { font-size: 2.8rem; font-weight: bold; color: #00A4C9; text-align: center; padding-bottom: 3rem; } @media screen and (max-width: 767px) { .heading.__b { font-size: 2rem; padding-bottom: 2rem; } } .heading.__b span + span { display: block; font-size: 2.4rem; } @media screen and (max-width: 767px) { .heading.__b span + span { font-size: 1.6rem; } } .heading.__c { font-weight: bold; } .txt { font-size: 1.6rem; text-align: justify; } @media screen and (max-width: 767px) { .txt { font-size: 1.4rem; } } .txt.--left { text-align: left; } .txt.--center { text-align: center; } .txt.--right { text-align: right; } .txt.--bold { font-weight: bold; } .txt.--small { font-size: 0.8em; } .txt.--lead { font-size: 1.2em; } .txt + .txt { margin-top: 1rem; } .txt.--lead span{ font-size: 0.8em; } .txt span { display: inline-block; } .txt-indent { padding-left: 1em; text-indent: -1em; } div.center { margin: 0 auto; text-align: center; } .list { list-style: none; font-size: 1.6rem; } @media screen and (max-width: 767px) { .list { font-size: 1.4rem; } } .list li { position: relative; padding-left: 2rem; } .list li::before { content: "・"; display: inline-block; width: 0.33em; height: 0.33em; position: absolute; top: 0; left: 0; margin: 0; } .list--optional { display: table; } .list--optional li { display: table-row; } .list--optional .marker { display: table-cell; padding-right: 0.4rem; } .list--link li a::after { content: ""; display: inline-block; width: 1rem; height: 1.6rem; margin-left: 1rem; vertical-align: middle; background: url(../icon/icon_right.png) no-repeat 0 0; background-size: contain; } .i--exlink::after { content: ""; display: inline-block; width: 1.6rem; height: 1.6rem; margin-left: 0.5rem; vertical-align: middle; background: url(../icon/icon_exlink.png) no-repeat 0 0; background-size: contain; } .i--exlink--white::after { content: ""; display: inline-block; width: 2rem; height: 2rem; margin-left: 1rem; vertical-align: middle; background: url(../icon/icon_exlink_white.png) no-repeat 0 0; background-size: contain; } .i--file::after { content: ""; display: inline-block; width: 1.2rem; height: 1.6rem; margin-left: 1.2rem; vertical-align: middle; background: url(../icon/icon_file.png) no-repeat 0 0; background-size: contain; } .button { display: inline-block; background-color: #00A4C9; border: 1px solid .button prim; border-radius: 8px; text-align: center; padding: 1rem; font-size: 1.6rem; } @media screen and (max-width: 767px) { .button { font-size: 1.4rem; } } .button span { color: white; } .button.--white { background-color: white; border: 1px solid #00A4C9; } .button.--white span { color: #00A4C9; } .button.--wide { width: 100%; } .button.--center { margin: 0 auto; text-align: center; } .table { margin: 0 auto; border-collapse: collapse; width: 100%; font-size: 1.6rem; } @media screen and (max-width: 767px) { .table { font-size: 1.4rem; } } .table__left { width: 30%; } .table th { border-right: 1px solid #99dbe9; } .table th, .table td { padding: 1rem; border-top: 1px solid #99dbe9; border-bottom: 1px solid #99dbe9; background-color: white; } .js-lang__content { position: relative; padding-top: 3rem; } .js-lang__btn { cursor: pointer; position: absolute; width: 1px; top: 0; right: -30px; } .js-lang__btn.--up { top: -66px; right: 120px; } @media screen and (max-width: 1439px) { .js-lang__btn.--up { /* top: -50px; */ right: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-right: 60px; } } @media screen and (max-width: 1439px) { .js-lang__btn { /* top: -50px; */ right: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-right: 60px; } } .js-lang__btn > span:first-child::after { content: ""; display: inline-block; width: 120px; height: 60px; background: url(../icon/btn_en.png) no-repeat 0 0; background-size: contain; } @media screen and (max-width: 1439px) { .js-lang__btn > span:first-child::after { content: ""; display: inline-block; width: 120px; height: 40px; background: url(../icon/btn_en_sp.png) no-repeat 0 0; background-size: contain; } } .js-lang__btn > span:nth-child(2)::after { content: ""; display: inline-block; width: 120px; height: 60px; background: url(../icon/btn_jp.png) no-repeat 0 0; background-size: contain; } @media screen and (max-width: 1439px) { .js-lang__btn > span:nth-child(2)::after { content: ""; display: inline-block; width: 120px; height: 40px; background: url(../icon/btn_jp_sp.png) no-repeat 0 0; background-size: contain; } } .js-none { display: none; } .bg__prim { background-color: #fff3f5; } .bg__sec--pale { background-color: #ebf5ff; } .bg__sec--medium { background-color: #99dbe9; } .bg__white { background-color: white; } .card { background-color: white; padding-top: 2rem; } .card__txt { margin-top: 8rem; padding: 0 2.5rem 5rem; } .card__txt p span{ font-size: smaller; } .card .js-lang__btn { top: -66px; right: 120px; } @media screen and (max-width: 1439px) { .card .js-lang__btn { top: -50px; right: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); margin-right: 60px; } } .card__txt_nolang { margin-top: 4rem; padding: 0 2.5rem 5rem; } .card dl{ margin: 2em 1em; font-size: 1.6rem; } @media screen and (max-width: 767px) { .card dl { font-size: 1.4rem; margin: 2em 0; } } .card dt{ margin-top: 1em; } .card dd{ margin-left: 1.5em; text-align: justify; } .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .youtube { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 共通設定 ----------------------------- */ html { font-size: 62.5%; } body { position: relative; font-family: "Noto Sans JP", sans-serif; font-size: 1.8rem; font-weight: normal; line-height: 1.7; color: #2b2b30; } img { display: block; width: auto; max-width: 100%; margin: 0 auto; } sup { font-size: 60%; display: inline-block; vertical-align: baseline; bottom: 1ex; } sub { font-size: 60%; display: inline-block; vertical-align: baseline; top: 0.5ex; } .pcd { display: block !important; } .spd { display: none !important; } @media screen and (max-width: 767px) { .pcd { display: none !important; } .spd { display: block !important; } } .none { display: none; } a { text-decoration: none; color: #00a4c9; -webkit-transition: 0.2s; transition: 0.2s; } a:hover { opacity: 0.8; } .wrapper { max-width: 1440px; margin: 0 auto; } .wrapper.--header { max-width: 120rem; padding: 0 5px; } @media screen and (max-width: 1439px) { .wrapper { padding: 0 1.5rem; } } @media screen and (max-width: 767px) { .wrapper { padding: 0 3rem; } .wrapper.--header { padding-right: 0; } } .content-outer { max-width: 1200px; margin: 0 auto; } .content-inner { max-width: 900px; margin: 0 auto; } .sticky { position: sticky; top: 0; } #page_top { position: fixed; bottom: 30px; right: 30px; } .atmark:before { content: "@"; width: 1rem; height: 1rem; padding: 2px; } .figure { max-width: 100%; height: auto; } .header { height: 100px; z-index: 999; background: white; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05); } .header-logo { max-width: 280px; } .header-content { height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header-nav li { display: inline-block; text-decoration: none; -webkit-transition: background-size 0.4s; transition: background-size 0.4s; padding-bottom: 5px; } .header-nav li:hover { opacity: 0.8; background-size: 100% 5px; } .header-nav li a { display: block; width: 100%; height: 100%; padding: 0.5rem; color: #333; font-size: 1.4rem; font-weight: bold; } .header-nav .past { position: relative; } .header-nav .past:hover ul { display: block; } .header-nav .past ul { display: none; position: absolute; background-color: #00A4C9; } .header-nav .past ul li { text-align: center; margin: 0 auto; } .header-nav .past ul li a { display: block; color: white; padding-left: 1rem; } .header__button { font-size: 1.4rem; text-align: center; background-color: #00A4C9; border: 1px solid #00A4C9; border-radius: 8px; } .header__button span { display: block; color: white; padding: 0.5rem; } .header__sns { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; } .header__sns a { display: inline-block; } .header__sns a:first-child { margin-right: 0.9em; } @media screen and (max-width: 767px) { .header { height: 70px; } .header-content { height: 70px; } .header-nav { display: none; } .header-button { display: none; } .header-logo { max-width: 140px; margin-left: 13px; margin-right: auto; } .header__button { margin-left: auto; } .header__sns { display: none; } } .hamburger { display: none; width: 70px; height: 70px; margin: 0 0 0 auto; background-color: white; } @media screen and (max-width: 767px) { .hamburger { display: block; } } .hamburger-inner { position: relative; margin: auto; width: 30px; height: 25px; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .hamburger-inner span { position: absolute; top: 50%; left: 0; display: block; width: 100%; height: 2px; background-color: #00a4c9; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .hamburger-inner::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background-color: #00a4c9; } .hamburger-inner::after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #00a4c9; } .hamburger-inner.spin span { display: none; } .hamburger-inner.spin:before { top: 50%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hamburger-inner.spin::after { top: 50%; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .sp-nav { display: none; } @media screen and (max-width: 1439px) { .sp-nav { z-index: 1; position: fixed; top: 70px; left: 0; height: 100vh; display: block; background: white; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; opacity: 0; -webkit-transform: translateX(-100%); transform: translateX(-100%); padding-right: 3rem; } .sp-nav li { margin-top: 2px; } .sp-nav li span { font-size: 15px; } .sp-nav li a { display: block; padding: 1.5rem 8rem 1.5rem 4rem; background-color: #e2edf5; color: black; } .sp-nav li ul { padding-left: 2rem; } .sp-nav .close { position: relative; padding-left: 20px; } .sp-nav .close::before { content: ""; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .sp-nav .close::after { content: ""; position: absolute; top: 50%; left: 0; display: block; width: 16px; height: 1px; background: #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .toggle { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } .footer { text-align: center; color: white; background-color: #00a4c9; padding: 6rem 0 1rem; font-size: 1.6rem; } @media screen and (max-width: 767px) { .footer { font-size: 1.4rem; } } .footer__heading { font-size: 3.4rem; padding-bottom: 0.5rem; } .footer__heading span { display: block; } .footer__heading span:last-child { font-size: 2.8rem; } .footer a { color: #fff; } .footer .i--exlink::after { background: url(../icon/icon_exlink_white.png) no-repeat 0 0; background-size: contain; } .footer__sns { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer__sns a { display: inline-block; height: 30px; margin: 0 0.5rem; } .hero { background-color: #fff3f5; } .news-list li { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0.5rem 0; } .news-list li:first-child { padding-top: 0; } @media screen and (max-width: 767px) { .news-list li { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .news-list .date { width: 15%; } @media screen and (max-width: 767px) { .news-list .date { width: 100%; font-weight: bold; } } .news-list .txt { width: 85%; } @media screen and (max-width: 767px) { .news-list .txt { width: 100%; padding-top: 0.5rem; } } .flex__50 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 767px) { .flex__50 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .flex__50 > div { width: 49%; } @media screen and (max-width: 767px) { .flex__50 > div { width: 99%; margin-top: 4rem; } .flex__50 > div:first-child { margin-top: 0; } } .flex__30 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 767px) { .flex__30 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .flex__30--30 { width: 30%; } @media screen and (max-width: 767px) { .flex__30--30 { margin-top: 8rem; width: 90%; } .flex__30--30:first-child { margin-top: 0; } } .flex__30--70 { width: 70%; padding: 0 2rem; } @media screen and (max-width: 767px) { .flex__30--70 { padding: 0; width: 90%; margin-top: 8rem; } .flex__30--70:first-child { margin-top: 0; } } .flex__25 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -ms-flex-wrap: wrap; flex-wrap: wrap; } .flex__25 > div { width: 25%; text-align: center; padding-bottom: 4rem; } @media screen and (max-width: 767px) { .flex__25 > div { width: 50%; } } section { padding: 2rem 0; } /* section + section { margin-top: 5rem; } @media screen and (max-width: 767px) { section + section { margin-top: 10rem; } } */ .list-nodot{ list-style: none; font-size: 1.6rem; } @media screen and (max-width: 767px) { .list-nodot{ font-size: 1.4rem; } } .list-nodot li{ position: relative; padding-left: 2rem; }