@charset "UTF-8";
/* Only output numerical values
/* 数値のみ出力する
====================================== */
/* font $size
====================================== */
/* font family
====================================== */
/* Break point ブレイクポイント
====================================== */
/* max site width コンテンツ最大幅
====================================== */
/* colors 色管理
====================================== */
/* media query
====================================== */
/* font-size フォントサイズのrem表示用
====================================== */
/* Margin class in 5px steps
/* 余白調整用のクラス 5px刻みで20回処理を繰り返し
====================================== */
.mt0 {
margin-top: 0px !important;
}
.mb0 {
margin-bottom: 0px !important;
}
.mt5 {
margin-top: 5px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mt20 {
margin-top: 20px !important;
}
.mb20 {
margin-bottom: 20px !important;
}
.mt25 {
margin-top: 25px !important;
}
.mb25 {
margin-bottom: 25px !important;
}
.mt30 {
margin-top: 30px !important;
}
.mb30 {
margin-bottom: 30px !important;
}
.mt35 {
margin-top: 35px !important;
}
.mb35 {
margin-bottom: 35px !important;
}
.mt40 {
margin-top: 40px !important;
}
.mb40 {
margin-bottom: 40px !important;
}
.mt45 {
margin-top: 45px !important;
}
.mb45 {
margin-bottom: 45px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mb50 {
margin-bottom: 50px !important;
}
.mt55 {
margin-top: 55px !important;
}
.mb55 {
margin-bottom: 55px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mb60 {
margin-bottom: 60px !important;
}
.mt65 {
margin-top: 65px !important;
}
.mb65 {
margin-bottom: 65px !important;
}
.mt70 {
margin-top: 70px !important;
}
.mb70 {
margin-bottom: 70px !important;
}
.mt75 {
margin-top: 75px !important;
}
.mb75 {
margin-bottom: 75px !important;
}
.mt80 {
margin-top: 80px !important;
}
.mb80 {
margin-bottom: 80px !important;
}
.mt85 {
margin-top: 85px !important;
}
.mb85 {
margin-bottom: 85px !important;
}
.mt90 {
margin-top: 90px !important;
}
.mb90 {
margin-bottom: 90px !important;
}
.mt95 {
margin-top: 95px !important;
}
.mb95 {
margin-bottom: 95px !important;
}
.mt100 {
margin-top: 100px !important;
}
.mb100 {
margin-bottom: 100px !important;
}
.com-txt-color-text {
color: #333 !important;
}
.com-bg-text {
background-color: #333 !important;
}
.com-txt-color-main {
color: #19429C !important;
}
.com-bg-main {
background-color: #19429C !important;
}
.com-txt-color-secondary {
color: #DEF1FC !important;
}
.com-bg-secondary {
background-color: #DEF1FC !important;
}
.com-txt-color-danger {
color: #FF0000 !important;
}
.com-bg-danger {
background-color: #FF0000 !important;
}
.com-txt-color-white {
color: #fff !important;
}
.com-bg-white {
background-color: #fff !important;
}
.com-txt-color-black {
color: #000 !important;
}
.com-bg-black {
background-color: #000 !important;
}
.com-txt-color-yellow {
color: #E9EF03 !important;
}
.com-bg-yellow {
background-color: #E9EF03 !important;
}
.com-txt-color-red {
color: #E75A64 !important;
}
.com-bg-red {
background-color: #E75A64 !important;
}
.com-txt-color-bg_01 {
color: #0A1F2E !important;
}
.com-bg-bg_01 {
background-color: #0A1F2E !important;
}
.com-txt-color-txt_01 {
color: #112C45 !important;
}
.com-bg-txt_01 {
background-color: #112C45 !important;
}
.com-txt-color-border_01 {
color: #D1D1D1 !important;
}
.com-bg-border_01 {
background-color: #D1D1D1 !important;
}
.com-txt-color-border_02 {
color: #707070 !important;
}
.com-bg-border_02 {
background-color: #707070 !important;
}
.com-txt-color-facebook {
color: #3b5999 !important;
}
.com-bg-facebook {
background-color: #3b5999 !important;
}
.com-txt-color-twitter {
color: #1da1f2 !important;
}
.com-bg-twitter {
background-color: #1da1f2 !important;
}
.com-txt-color-youtube {
color: #cd201f !important;
}
.com-bg-youtube {
background-color: #cd201f !important;
}
.com-txt-color-line {
color: #4DC755 !important;
}
.com-bg-line {
background-color: #4DC755 !important;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 17px;
color: #333;
}
body {
font-family: "Noto Sans JP", sans-serif;
font-size: 17px;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.88;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Noto Sans JP", sans-serif;
color: #333;
line-height: 1.2;
}
p {
margin: 0;
}
p + p {
margin-top: 1em;
}
ul, dl, figure {
margin: 0;
padding: 0;
}
dt {
font-weight: normal;
}
ul, li {
list-style: none;
}
a {
color: #333;
transition: 0.4s;
}
a:before, a:after {
transition: 0.4s;
}
a:hover {
color: #333;
text-decoration: none;
}
em {
font-style: normal;
font-weight: normal;
color: inherit;
}
input,
select,
textarea,
button {
font-family: "Noto Sans JP", sans-serif;
}
input,
select,
textarea {
outline: none;
vertical-align: middle;
font-size: 16px;
font-size: 0.9411764706rem;
}
input[type=submit], input[type=reset], input[type=button], button {
cursor: pointer;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=reset]):not([type=button]):not([type=image]),
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
padding: 0.4em 0.9em;
border: 1px solid #D1D1D1;
box-sizing: border-box;
}
input ::-moz-placeholder, select ::-moz-placeholder {
color: #D1D1D1;
opacity: 1; /* Firefox */
}
input ::placeholder, select ::placeholder {
color: #D1D1D1;
opacity: 1; /* Firefox */
}
input ::-ms-input-placeholder, select ::-ms-input-placeholder { /* Edge 12 -18 */
color: #D1D1D1;
}
textarea {
resize: vertical;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
width: 100%;
font-size: 15px;
font-size: 0.8823529412rem;
line-height: 2;
}
address {
margin-bottom: 0;
}
/* uk-container
====================================== */
.uk-container {
max-width: 1440px;
}
.uk-container-small {
max-width: 375px;
}
.uk-container-large {
max-width: 1620px;
}
.uk-container-lower {
max-width: 960px;
}
.uk-container-expand {
max-width: none;
}
/* Contact Form 7
====================================== */
.wpcf7 .ajax-loader {
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
/* reCAPTCHA
====================================== */
.grecaptcha-badge {
visibility: hidden;
}
.header-wrapper-01 {
--shadow: 0 3px 6px #00000029;
position: sticky;
width: 100%;
box-sizing: border-box;
box-shadow: var(--shadow);
top: 0;
left: 0;
z-index: 5;
padding-left: 10px;
background-color: #fff;
transition: 0.3s all;
}
@media (min-width: 960px) {
.header-wrapper-01 {
padding-left: 30px;
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page {
position: fixed;
background-color: transparent;
box-shadow: unset;
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page .header-logo {
visibility: hidden;
opacity: 0;
transition: 0.3s all;
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page .header-btn-02 {
visibility: hidden;
opacity: 0;
transition: 0.3s all;
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page .header-btn-01 {
background-color: transparent;
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page.js-active {
background-color: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1607843137);
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page.js-active .header-logo {
visibility: visible;
opacity: 1;
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page.js-active .header-btn-02 {
visibility: visible;
opacity: 1;
}
}
@media (max-width: 1199px) {
.header-wrapper-01.front-page.js-active .header-btn-01 {
background-color: #19429C;
}
}
.header-logo {
margin: 0;
width: min(50%, 200px);
}
@media (min-width: 1200px) {
.header-logo {
flex: 1;
width: auto;
}
}
.header-logo a {
display: flex;
}
.header-btn-wrap {
align-self: stretch;
display: flex;
}
.header-btn-01 {
width: 50px;
height: 100%;
aspect-ratio: 1/1;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #19429C;
line-height: 1;
}
@media (min-width: 1200px) {
.header-btn-01 {
width: 90px;
}
}
.header-btn-02 {
padding: 0.5em;
display: flex;
justify-content: center;
align-items: center;
background-color: #E9EF03;
font-size: 12px;
font-size: 0.7058823529rem;
font-weight: bold;
}
@media (max-width: 639px) {
.header-btn-02 {
width: 3em;
text-align: center;
line-height: 1.4;
}
}
@media (min-width: 640px) {
.header-btn-02 {
padding: 0.5em 1em;
}
}
@media (min-width: 1200px) {
.header-btn-02 {
font-size: 18px;
font-size: 1.0588235294rem;
}
}
.header-btn-02.rules {
background-color: #DEF1FC;
}
@media (min-width: 960px) {
.header-nav {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 15px;
flex-shrink: 0;
}
}
@media (max-width: 1349px) {
.gnav {
display: none;
}
}
.gnav > li {
position: relative;
}
.gnav > li:hover .sub-menu {
visibility: visible;
opacity: 1;
}
.gnav > li > a {
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.5;
padding: 0.5em 1em;
}
.gnav > li > a::after {
content: url(../img/common/arrow_01.svg);
display: inline-block;
margin-left: 10px;
transition: 0.3s all;
}
.gnav > li > a:hover::after {
transform: translateX(5px);
}
.gnav a {
display: block;
font-size: 18px;
font-size: 1.0588235294rem;
}
.gnav .sub-menu {
position: absolute;
background-color: #fff;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
padding: 1.5em 1.5em 0.5em;
width: -moz-max-content;
width: max-content;
left: 0;
opacity: 0;
visibility: hidden;
transition: 0.3s all ease-in-out;
}
.gnav .sub-menu li + li {
margin-top: 0.5em;
}
.gnav .sub-menu a {
font-weight: 500;
display: block;
}
.gnav .sub-menu a::before {
content: "ー ";
}
.gnav .sub-menu a:hover {
color: #19429C;
}
/* #footer
====================================== */
#footer:not(.front-page) {
margin-top: 100px;
}
@media (min-width: 640px) {
#footer:not(.front-page) {
margin-top: 150px;
}
}
/* footer-components
====================================== */
.footer-list-01 {
margin-top: 26px;
display: flex;
gap: 33px;
flex-wrap: wrap;
}
@media (min-width: 1200px) {
.footer-list-01 {
margin-top: 35px;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 20px;
}
}
@media (max-width: 1199px) {
.footer-list-01 > * {
width: 100%;
}
}
.footer-list-01 > .tit {
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 700;
line-height: 1.46;
}
@media (min-width: 960px) {
.footer-list-01 > .tit {
font-size: 17px;
font-size: 1rem;
}
}
.footer-text-01 {
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 500;
line-height: 1.4;
margin-top: 15px;
}
.footer-banners-01 {
gap: 10px 0;
}
/* footer-logo
====================================== */
/* footer-head
====================================== */
.footer-head {
background-color: #fff;
padding: 60px 0;
}
@media (min-width: 960px) {
.footer-head {
padding: 57px 0 50px;
}
}
.footer-head .logo {
width: 65.86%;
max-width: 350px;
margin: 0 auto;
}
/* footer-body
====================================== */
.footer-body {
background-color: #19429C;
color: #fff;
padding: 3em 0 2em;
}
.footer-body a {
color: inherit;
}
/* footer-foot
====================================== */
.footer-foot {
background-color: #0A1F2E;
padding: 0.5em 0;
}
.footer-foot small {
font-weight: 500;
font-size: 12px;
font-size: 0.7058823529rem;
}
@media (min-width: 960px) {
.footer-foot small {
font-size: 14px;
font-size: 0.8235294118rem;
line-height: 1.5;
}
}
/* parts
====================================== */
/* pagetop
-------------------------------------- */
.pagetop {
font-size: 10px;
font-size: 0.5882352941rem;
position: fixed;
right: 10px;
bottom: 10px;
z-index: 100;
}
/* .copyright
--------------------------------- */
.copyright {
display: block;
font-size: 11px;
font-size: 0.6470588235rem;
}
.footer-panel-01 {
display: flex;
flex-direction: column;
gap: 0 5%;
}
@media (min-width: 960px) {
.footer-panel-01 {
flex-direction: row;
}
}
.footer-panel-01 > :first-child {
border-bottom: 1px solid currentColor;
padding-bottom: 20px;
margin-bottom: 40px;
}
@media (min-width: 960px) {
.footer-panel-01 > :first-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: unset;
border-right: 1px solid currentColor;
padding-right: 2em;
}
}
.footer-panel-01 .head {
flex-shrink: 0;
}
.footer-panel-01 .body {
flex: 1;
}
.footer-item-01 {
display: block;
width: 45px;
}
.footer-menu-01 {
font-size: 14px;
font-size: 0.8235294118rem;
}
.footer-menu-01 > li > a {
font-weight: 700;
}
.footer-menu-01 .sub-menu {
margin-top: 10px;
}
.footer-menu-01 .sub-menu a::before {
content: "ー";
display: inline-flex;
margin-right: 5px;
}
.footer-menu-01 li + li {
margin-top: 10px;
}
.uk-offcanvas-bar {
background: #fff;
padding: 0 10px;
padding-top: 90px;
width: 320px;
}
.uk-nav .uk-nav-header {
background: #19429C;
padding: 0.5em 1em;
border-bottom: 0;
}
.uk-nav > li {
border-bottom: 1px solid #DCDCDC;
padding: 0.9em 0;
}
.uk-nav > li:first-child {
border-top: 1px solid #DCDCDC;
}
.uk-nav > li a, .uk-nav > li span {
display: block;
position: relative;
color: #333;
font-size: 18px;
font-size: 1.0588235294rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 0;
cursor: pointer;
}
.uk-nav > li a:hover, .uk-nav > li span:hover {
color: #19429C;
}
.uk-nav > li a::after, .uk-nav > li span::after {
content: url(../img/common/arrow_01.svg);
display: flex;
align-items: center;
position: absolute;
top: 0;
bottom: 0;
right: 5%;
font-size: 30px;
font-size: 1.7647058824rem;
color: #3D9ED3;
}
.uk-nav > li.has-children .js-toggle-nav::after {
content: "+";
}
.uk-nav .sub-menu {
width: 100%;
font-weight: 500;
}
.uk-nav .sub-menu li {
margin-top: 15px;
}
.uk-nav .sub-menu a {
width: 90%;
margin-left: auto;
margin-right: 0;
padding: 0;
}
.uk-nav .sub-menu a::before {
content: "ー";
display: inline-block;
margin-right: 5px;
}
.uk-nav .uk-parent a::after {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%2210%201%204%207%2010%2013%22%20%2F%3E%0A%3C%2Fsvg%3E") !important;
height: 2em !important;
}
.uk-nav .uk-parent.uk-open a::after {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolyline%20fill%3D%22none%22%20stroke%3D%22%23666%22%20stroke-width%3D%221.1%22%20points%3D%221%204%207%2010%2013%204%22%20%2F%3E%0A%3C%2Fsvg%3E") !important;
}
.uk-nav .uk-nav-sub {
background: #F5F5F5;
padding: 0;
}
.uk-nav .uk-nav-sub li a {
padding: 0.5em 1em;
padding-left: 2em;
}
.uk-nav .uk-nav-sub li + li {
border-top: 1px solid #fff;
}
.uk-offcanvas-close {
width: auto;
top: 2em;
right: 2em;
}
.uk-offcanvas-close svg {
display: none;
}
#to-top {
position: fixed;
z-index: 5;
bottom: 1em;
left: 0;
transform: translateX(-100%);
transition: 0.4s all ease-in-out;
}
#to-top.js-active {
left: 1em;
transform: translateX(0);
}
/* #home-components
=========================*/
.home-kv-01 {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
padding-top: 60px;
padding-bottom: 20px;
}
.home-kv-01::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
background: url(../img/home/01_09.png) repeat;
opacity: 0.28;
top: 0;
pointer-events: none;
}
.home-panel-01 {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-inline: 1em;
}
@media (min-width: 1200px) {
.home-panel-01 {
padding-inline: 2.5em;
}
}
.home-panel-01 > .logo {
margin-bottom: 20px;
}
.home-panel-01 > .logo span {
padding-top: 18px;
padding-bottom: 18px;
}
@media (min-width: 960px) {
.home-panel-01 > .logo span {
padding: 24px;
padding-left: 44px;
}
}
@media (max-width: 959px) {
.home-panel-01 > .logo img {
width: 332px;
}
}
.home-panel-01 > .date {
display: block;
max-width: 385px;
margin-top: 10px;
}
@media (min-width: 960px) {
.home-panel-01 > .date {
margin-top: 35px;
padding-left: 0;
max-width: unset;
}
}
.home-panel-01 .com-btn-08 {
width: 95%;
max-width: 325px;
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 960px) {
.home-panel-01 .com-btn-08 {
margin-top: 20px;
position: static;
transform: unset;
font-size: 15px;
font-size: 0.8823529412rem;
}
}
@media (min-width: 1500px) {
.home-panel-01 .com-btn-08 {
font-size: 20px;
font-size: 1.1764705882rem;
max-width: 390px;
}
}
@media (min-width: 1300px) {
.home-panel-02 {
padding-top: 26px;
padding-bottom: 26px;
}
}
.home-panel-02 .panel-wrapper {
max-width: 1920px;
}
@media (max-width: 1299px) {
.home-panel-02 .panel-wrapper {
padding: 0;
}
}
.home-panel-03 {
padding: 20px 0;
background-color: #0A1F2E;
color: #fff;
}
.home-panel-04 {
align-self: center;
}
@media (max-width: 959px) {
.home-panel-04 .com-tit-01 {
margin-bottom: 10px;
}
}
@media (min-width: 1200px) {
.home-panel-05 {
position: absolute;
bottom: 25px;
right: 0;
}
}
@media (min-width: 1350px) {
.home-panel-05 {
right: 73px;
bottom: 73px;
}
}
.home-panel-06 {
text-align: center;
padding-block: 2.5em;
}
@media (min-width: 1300px) {
.home-panel-06 {
padding: 0;
display: flex;
align-items: center;
gap: 30px;
}
}
.home-panel-06 .tit {
font-size: 19px;
font-size: 1.1176470588rem;
font-weight: 700;
letter-spacing: 0.1em;
margin: 0;
}
@media (min-width: 1300px) {
.home-panel-06 .tit {
font-size: 26px;
font-size: 1.5294117647rem;
}
}
.home-panel-06 .date {
font-size: 10px;
font-size: 0.5882352941rem;
letter-spacing: 0.1em;
display: block;
margin-top: 0.5em;
}
@media (min-width: 1300px) {
.home-panel-06 .date {
font-size: 13px;
font-size: 0.7647058824rem;
}
}
@media (min-width: 1300px) and (max-width: 1550px) {
.home-panel-06 .date {
display: none;
}
}
.home-panel-06 .list {
margin-top: 20px;
}
@media (min-width: 1300px) {
.home-panel-06 .list {
margin-top: 0;
}
}
.home-panel-06 .item {
text-align: center;
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 700;
}
@media (min-width: 1300px) {
.home-panel-06 .item {
font-size: 18px;
font-size: 1.0588235294rem;
transform: translateY(-25px);
position: relative;
z-index: 2;
}
}
.home-panel-06 .item small {
display: block;
font-size: 9px;
font-size: 0.5294117647rem;
font-weight: 500;
}
@media (min-width: 960px) {
.home-panel-06 .item small {
font-size: 11px;
font-size: 0.6470588235rem;
}
}
.home-panel-06 .item .image {
max-width: 75px;
margin-bottom: 5px;
}
@media (min-width: 1300px) {
.home-panel-06 .item .image {
max-width: 85px;
margin-bottom: 0;
}
}
.home-list-01 {
display: flex;
align-items: center;
gap: 20px;
max-width: 570px;
margin: 0 auto;
}
@media (min-width: 960px) {
.home-list-01 {
margin-right: 0;
}
}
.home-list-01 > .head {
font-size: 18px;
font-size: 1.0588235294rem;
color: #19429C;
font-weight: 700;
letter-spacing: 0.1em;
flex-shrink: 0;
padding-right: 16px;
border-right: 1px solid #707070;
}
.home-list-01 > .list {
flex: 1;
}
.home-list-01 .item {
display: flex;
align-items: baseline;
font-size: 17px;
font-size: 1rem;
font-weight: 500;
gap: 10px;
padding: 3px 0;
color: #000;
}
.home-list-01 .item:hover {
opacity: 0.6;
}
.home-list-01 .item > span {
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1; /* number of lines to show */
line-clamp: 1;
-webkit-box-orient: vertical;
}
@media (min-width: 960px) {
.home-list-02 {
display: flex;
align-items: baseline;
gap: 30px;
}
}
.home-list-02 .tit {
color: #E9EF03;
font-size: 18px;
font-size: 1.0588235294rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 8px;
}
@media (min-width: 960px) {
.home-list-02 .tit {
flex-shrink: 0;
margin: 0;
}
}
.home-list-02 .tit::after {
content: "";
flex: 1;
max-width: 100px;
height: 1px;
background-color: #fff;
}
@media (min-width: 960px) {
.home-list-02 .tit::after {
display: none;
}
}
@media (min-width: 960px) {
.home-list-02 .list {
width: 100%;
display: flex;
}
}
@media (min-width: 960px) {
.home-list-02 .item {
border-left: 1px solid #fff;
flex: 1;
}
}
.home-list-02 .item a {
display: flex;
align-items: baseline;
gap: 14px;
color: currentColor;
font-weight: 500;
}
@media (min-width: 960px) {
.home-list-02 .item a {
padding: 0 30px;
gap: 18px;
}
}
.home-list-02 .item a:hover {
color: #E9EF03;
}
.home-list-02 .item a .date {
font-size: 15px;
font-size: 0.8823529412rem;
}
.home-list-02 .item a .text {
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1; /* number of lines to show */
line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 14px;
font-size: 0.8235294118rem;
}
@media (min-width: 960px) {
.home-list-02 .item a .date, .home-list-02 .item a .text {
font-size: 18px;
font-size: 1.0588235294rem;
}
}
.home-list-03 {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 20px;
}
.home-list-04 {
margin: 40px auto 0;
max-width: 1030px;
}
@media (min-width: 960px) {
.home-list-04 {
margin-top: 46px;
}
}
.home-list-05 {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 35px;
letter-spacing: 0.02em;
}
@media (min-width: 960px) {
.home-list-05 {
flex-direction: row;
flex-wrap: wrap;
gap: 20px 10px;
margin-top: 40px;
max-width: 616px;
}
}
@media (min-width: 960px) {
.home-list-05 > * {
width: calc((100% - 10px) / 2);
}
}
.home-list-05 .tit {
font-size: 18px;
font-size: 1.0588235294rem;
letter-spacing: 0.02em;
font-weight: 700;
line-height: 1.6;
position: relative;
padding-left: 10px;
margin: 0;
margin-bottom: 5px;
}
.home-list-05 .tit::before {
content: "";
display: block;
position: absolute;
width: 5px;
height: 85%;
background-color: #19429C;
left: 0;
top: 50%;
transform: translate(-50%, -50%);
}
.home-list-05 .text {
font-size: 16px;
font-size: 0.9411764706rem;
font-weight: 500;
letter-spacing: 0.05em;
line-height: 1.4;
}
.home-text-01 {
font-size: 17px;
font-size: 1rem;
letter-spacing: 0.1em;
font-weight: 700;
line-height: 2.3;
margin-top: 45px;
}
@media (min-width: 960px) {
.home-text-01 {
font-size: 19px;
font-size: 1.1176470588rem;
letter-spacing: 0.15em;
line-height: 2.1;
}
}
.home-text-02 {
font-size: 17px;
font-size: 1rem;
letter-spacing: 0.05em;
font-weight: 500;
line-height: 1.88;
}
.home-video-01 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: -1;
}
.home-slider-01 {
margin-top: 48px;
}
@media (min-width: 960px) {
.home-slider-01 {
margin-top: 40px;
}
}
.home-slider-01 .item {
transition: 0.3s all ease-in-out;
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: 1/0.73;
transition: 0.3s all ease-in-out;
}
@media (min-width: 960px) {
.home-slider-01 .item {
aspect-ratio: 1/0.64;
}
}
.home-slider-01 .com-item-04 {
aspect-ratio: 1/0.64;
}
@media (min-width: 960px) {
.home-slider-01 .com-item-04 {
aspect-ratio: 1/0.5;
}
}
.home-slider-01 .com-item-04 .caption {
padding: 8px 5px;
}
@media (min-width: 1200px) {
.home-slider-01 .com-item-04 .caption {
padding: 19px 33px;
}
}
@media (min-width: 1700px) {
.home-slider-01 .com-item-04 .caption {
flex-direction: row;
align-items: baseline;
gap: 20px;
}
}
.home-slider-01 .navigation {
--default-pos: 5%;
--s-pos: 18%;
--m-pos: 30.5%;
max-width: 25px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@media (min-width: 640px) {
.home-slider-01 .navigation {
max-width: 40px;
}
}
@media (min-width: 1200px) {
.home-slider-01 .navigation {
max-width: 56px;
}
}
.home-slider-01 .navigation.prev {
left: var(--default-pos);
}
@media (min-width: 640px) {
.home-slider-01 .navigation.prev {
left: var(--s-pos);
}
}
@media (min-width: 960px) {
.home-slider-01 .navigation.prev {
left: var(--m-pos);
}
}
.home-slider-01 .navigation.next {
right: var(--default-pos);
}
@media (min-width: 640px) {
.home-slider-01 .navigation.next {
right: var(--s-pos);
}
}
@media (min-width: 960px) {
.home-slider-01 .navigation.next {
right: var(--m-pos);
}
}
@media (min-width: 960px) {
.home-slider-01 .uk-slider-items > * {
width: 36.45%;
}
}
.home-slider-01 .uk-active {
position: relative;
z-index: 2;
}
.home-slider-01 .uk-active .com-item-04 {
aspect-ratio: inherit;
}
.home-slider-01 .uk-dotnav {
margin-top: 20px;
}
.home-slider-01 .uk-dotnav > * > * {
border: unset;
background-color: #D1D1D1;
}
.home-slider-01 .uk-dotnav > .uk-active > * {
background-color: #3D9ED3;
}
@media (min-width: 960px) {
.home-item-01 {
display: flex;
}
}
.home-item-01 span {
display: block;
color: #fff;
background-color: rgba(25, 66, 156, 0.82);
max-width: -moz-max-content;
max-width: max-content;
box-sizing: border-box;
padding: 0.4em 0.5em;
padding-right: 1em;
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.5;
}
@media (min-width: 960px) {
.home-item-01 span {
padding: 0.2em 1em;
font-size: 21px;
font-size: 1.2352941176rem;
}
}
@media (min-width: 1500px) {
.home-item-01 span {
font-size: 27px;
font-size: 1.5882352941rem;
}
}
@media (max-width: 959px) {
.home-item-01 span:not(:first-child) {
margin-top: 10px;
}
}
@media (min-width: 960px) {
.home-item-01 span:not(:first-child) {
padding-left: 0;
}
}
@media (min-width: 960px) {
.home-item-01 span:not(:last-child) {
padding-right: 0;
}
}
.home-item-01 + .home-item-01 {
margin-top: 5px;
}
@media (min-width: 960px) {
.home-item-01 + .home-item-01 {
margin-top: 16px;
}
}
@media (min-width: 960px) {
.home-item-01.logo img {
width: 604px;
}
}
.home-item-02 {
letter-spacing: 0.05em;
line-height: 1.28;
}
.home-item-02 .thumb {
width: 100%;
aspect-ratio: 1/1.05;
-o-object-fit: cover;
object-fit: cover;
}
.home-item-02 .text, .home-item-02 .name {
margin-top: 12px;
}
@media (min-width: 960px) {
.home-item-02 .text, .home-item-02 .name {
margin-top: 15px;
}
}
.home-item-02 .text {
font-size: 14px;
font-size: 0.8235294118rem;
font-weight: 500;
}
@media (min-width: 960px) {
.home-item-02 .text {
font-size: 16px;
font-size: 0.9411764706rem;
}
}
.home-item-02 .name {
font-size: 17px;
font-size: 1rem;
font-weight: 700;
}
@media (min-width: 960px) {
.home-item-02 .name {
font-size: 18px;
font-size: 1.0588235294rem;
}
}
.home-item-02:hover {
opacity: 0.6;
}
.home-scroll-01 {
--color: white;
position: absolute;
top: 40%;
right: 0.5em;
writing-mode: vertical-rl;
text-transform: uppercase;
color: var(--color);
font-size: 13px;
font-size: 0.7647058824rem;
letter-spacing: 0.2em;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
gap: 13px;
}
@media (min-width: 960px) {
.home-scroll-01 {
top: 43%;
right: 1.4em;
transform: translateY(-50%);
}
}
.home-scroll-01:hover {
color: var(--color);
}
.home-scroll-01 .line {
display: block;
width: 2px;
height: 123px;
background-color: var(--color);
position: relative;
}
.home-scroll-01 .line::before {
--size: 8px;
position: absolute;
content: "";
display: block;
width: var(--size);
aspect-ratio: 1/1;
border-radius: 50%;
background-color: var(--color);
left: 50%;
top: 100%;
transform: translateX(-50%);
opacity: 0;
animation: scroll_down 2s ease-in infinite;
}
.home-flex-01 {
display: flex;
justify-content: center;
background: #DEF1FC;
}
@media (min-width: 1300px) {
.home-flex-01 {
background: none;
gap: 20px;
width: 630px;
margin-inline: auto;
}
}
@media (min-width: 1300px) {
.home-flex-01 > a {
width: 100%;
}
}
@media (min-width: 1300px) {
.home-grid-01 {
display: flex;
gap: 50px;
justify-content: space-between;
align-items: center;
}
}
@media (min-width: 1300px) {
.home-grid-01 .info {
position: absolute;
right: 40px;
}
}
@media (min-width: 1400px) {
.home-grid-01 .info {
right: 130px;
}
}
.home-grid-02 {
display: flex;
gap: 15px;
}
@media (min-width: 1200px) {
.home-grid-02 {
gap: 30px;
}
}
@media (min-width: 1200px) and (max-width: 1499px) {
.home-grid-02 img {
max-width: 165px;
}
}
.home-tit-01 {
color: #19429C;
font-weight: 900;
font-size: 29px;
font-size: 1.7058823529rem;
letter-spacing: 0.1em;
line-height: 1.76;
margin-bottom: 50px;
}
@media (min-width: 960px) {
.home-tit-01 {
font-size: 45px;
font-size: 2.6470588235rem;
line-height: 1.46;
}
}
.home-map-01 {
width: 100%;
height: 100%;
min-height: 500px;
}
.home-container-01 {
max-width: 1240px;
}
.home-btn-01 {
display: flex;
align-items: center;
gap: 7px;
background: #DEF1FC;
color: #333;
padding: 0.8em 1em;
box-sizing: border-box;
position: relative;
font-size: 14px;
font-size: 0.8235294118rem;
font-weight: 700;
line-height: 1.46;
max-width: 300px;
}
@media (min-width: 640px) {
.home-btn-01 {
gap: 10px;
}
}
@media (min-width: 960px) {
.home-btn-01 {
font-size: 22px;
font-size: 1.2941176471rem;
padding: 13px 15px;
border-radius: 5px;
}
}
.home-btn-01 > p {
margin: 0;
}
.home-btn-01 > p > span {
display: block;
}
@media (min-width: 960px) {
.home-btn-01 > p > span {
font-size: 14px;
font-size: 0.8235294118rem;
}
}
.home-btn-01::before {
content: "";
display: block;
flex-shrink: 0;
width: 30px;
aspect-ratio: 1/1;
background: url(../img/common/ico_currency.svg) no-repeat center center;
background-size: contain;
}
@media (min-width: 960px) {
.home-btn-01::before {
width: 50px;
}
}
.home-btn-01::after {
content: url(../img/common/arrow_01_02.svg);
line-height: 1;
margin-left: auto;
position: relative;
transition: 0.4s;
right: 0;
font-size: 5px;
font-size: 0.2941176471rem;
}
@media (min-width: 960px) {
.home-btn-01::after {
content: url(../img/common/arrow_01_01.svg);
}
}
.home-btn-01:hover::after {
right: -5px;
}
@media (min-width: 960px) {
.home-btn-01:hover::after {
right: -10px;
}
}
.home-btn-01.contest::before {
background-image: url(../img/common/ico_contest.svg);
}
.home-btn-02 {
position: relative;
overflow: hidden;
border-radius: 5px;
display: inline-block;
vertical-align: middle;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.47);
}
@media (min-width: 1200px) {
.home-btn-02 {
border-radius: 10px;
}
}
/* #home-01
=========================*/
.home-sec-01 {
height: calc(100svh + 239px - 50px);
min-height: 600px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
@media (min-width: 960px) {
.home-sec-01 {
min-height: 1120px;
}
}
@media (min-width: 1300px) {
.home-sec-01 {
min-height: 850px;
height: calc(100svh - 90px);
}
}
.home-sec-01 > * {
max-height: 100%;
}
.home-sec-01 .home-kv-01 {
flex: 1;
}
/* #home-03
=========================*/
.home-sec-03 .logo {
max-width: 39%;
margin: 0 auto;
}
.home-sec-03 .home-tit-01 {
margin-top: 44px;
}
@media (min-width: 960px) {
.home-sec-03 .home-tit-01 {
margin-top: 50px;
}
}
@media (max-width: 959px) {
.home-sec-03 .home-text-01 {
text-align: left;
}
}
/* #home-04
=========================*/
.home-sec-04 {
overflow: hidden;
}
.home-sec-04 .inner-01,
.home-sec-04 .inner-02 {
position: relative;
z-index: 2;
}
.home-sec-04 .inner-01::before,
.home-sec-04 .inner-02::before {
content: "";
display: block;
position: absolute;
}
@media (min-width: 960px) {
.home-sec-04 .inner-01 {
padding-bottom: 10px;
}
}
@media (min-width: 960px) {
.home-sec-04 .inner-01::before {
width: 47.9vw;
aspect-ratio: 1/0.56;
max-height: 520px;
right: 0;
bottom: 0;
background: url(../img/home/03_01.jpg?ver=20240326) no-repeat center;
background-size: cover;
z-index: -2;
}
}
.home-sec-04 .inner-02 {
padding: 50px 0;
}
@media (min-width: 960px) {
.home-sec-04 .inner-02 {
padding-top: 50px;
padding-right: 50px;
padding-bottom: 0;
}
}
@media (min-width: 1620px) {
.home-sec-04 .inner-02 {
padding-right: 107px;
}
}
.home-sec-04 .inner-02::before {
--side-space: calc((100vw - 100%) / 2);
width: calc(100% + var(--side-space) * 2);
height: 100%;
background-color: #DEF1FC;
top: 0;
right: 50%;
transform: translate(50%, 0);
z-index: -1;
}
@media (min-width: 960px) {
.home-sec-04 .inner-02::before {
width: calc(100% + var(--side-space));
height: calc(100% - 25px);
right: 0;
transform: unset;
}
}
.home-sec-04 .inner-02 > .uk-grid-small > .uk-grid-margin {
margin-top: 25px;
}
@media (max-width: 959px) {
.home-sec-04 .inner-02 .uk-switcher .uk-grid-small > .uk-grid-margin {
margin-top: 25px;
}
}
.home-sec-04 .inner-02 .com-btn-02 {
margin: 24px auto 0;
}
@media (min-width: 960px) {
.home-sec-04 .inner-02 .com-btn-02 {
margin-top: 55px;
margin-left: 0;
}
}
/* #home-05
=========================*/
@media (min-width: 960px) {
.home-sec-05 .uk-grid-large .uk-grid-margin {
margin-top: 60px;
}
}
/* #home-06
=========================*/
.home-sec-06 .inner {
padding: 50px 0 30px;
}
@media (min-width: 960px) {
.home-sec-06 .inner {
padding: 65px 0 40px;
}
}
/* #home-10
=========================*/
.home-sec-10 {
border-bottom: 1px solid #707070;
}
@keyframes scroll_down {
0% {
top: 0%;
opacity: 0;
}
10% {
top: 0%;
opacity: 1;
}
90% {
top: 100%;
opacity: 0;
}
}
@keyframes kv_active {
0% {
transform: scale(1);
}
100% {
transform: scale(1.2);
}
}
/* #home-09
=========================*/
.home-sec-09 .home-panel-09 {
padding-top: 30px;
padding-bottom: 30px;
background-color: #DFF2FC;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 {
line-height: 1.5;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-date {
font-size: 60px;
font-size: 3.5294117647rem;
color: #19429C;
font-weight: bold;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-w {
font-size: 30px;
font-size: 1.7647058824rem;
color: #19429C;
font-weight: bold;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09 {
font-size: 20px;
font-size: 1.1764705882rem;
color: #112C45;
font-weight: bold;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-info {
font-size: 13px;
font-size: 0.7647058824rem;
color: #333;
margin-top: 1em;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-select {
margin-top: 20px;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-select .home-btn-09-01 {
font-size: 13px;
font-size: 0.7647058824rem;
color: white;
background-color: #19429C;
padding: 10px 10px 10px 10px;
border-radius: 5px;
position: relative;
display: inline-block;
padding-right: 4px;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-select .home-btn-09-01::before {
background-image: none;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-select .home-btn-09-01::after {
content: "";
width: 6px;
height: 6px;
border: 0;
border-bottom: solid 2px white;
border-right: solid 2px white;
transform: rotate(45deg);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-select .uk-accordion-content {
margin-top: 0;
position: relative;
z-index: 2;
}
.home-sec-09 .home-panel-09 .home-panel-09-01 .home-txt-09-select .uk-accordion-content .home-09-calendar {
position: absolute;
top: 0;
left: 0;
}
@media (max-width: 1199px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab {
min-width: 350px;
}
}
@media (max-width: 639px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab {
min-width: auto;
}
}
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab ul li {
font-size: 16px;
font-size: 0.9411764706rem;
font-weight: bold;
line-height: 1.2;
margin-top: 2px;
border-left: 2px solid #DFF2FC;
padding-left: 0;
background-color: white;
}
@media (max-width: 639px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab ul li {
font-size: 11px;
font-size: 0.6470588235rem;
}
}
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab ul li a {
padding-top: 10px;
padding-bottom: 10px;
display: block;
height: 100%;
color: #112C45;
}
@media (max-width: 639px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab ul li a {
padding-top: 12px;
}
}
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab ul li:last-child {
border-right: 2px solid #DFF2FC;
}
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-tab ul .uk-active a {
color: white;
background-color: #19429C;
height: calc(100% - 16px);
}
@media (max-width: 1199px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-row {
width: 120px;
}
}
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-title {
font-size: 16px;
font-size: 0.9411764706rem;
color: #19429C;
background-color: #c3cfd9;
font-weight: bold;
line-height: 1.2;
padding-top: 10px;
padding-bottom: 10px;
width: 116px;
}
@media (max-width: 639px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-title {
font-size: 12px;
font-size: 0.7058823529rem;
}
}
.home-sec-09 .home-panel-09 .home-table-09 .home-table-09-title.home-table-09-title-time {
height: 30px;
padding-top: 2px;
padding-bottom: 2px;
}
.home-sec-09 .home-panel-09 .home-table-09 .home-09-table-content {
margin-top: 0;
}
.home-sec-09 .home-panel-09 .home-table-09 .home-09-table-content th {
padding-top: 2px;
padding-bottom: 2px;
height: 20px;
}
.home-sec-09 .home-panel-09 .home-table-09 .home-09-table-content td {
padding-top: 10px;
padding-bottom: 10px;
height: 40px;
}
.home-sec-09 .home-panel-09 .home-table-09 .home-09-timetable {
padding-left: 0;
}
@media (max-width: 1199px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-09-timetable ul li {
overflow-x: scroll;
}
}
.home-sec-09 .home-panel-09 .home-table-09 .home-09-timetable table {
table-layout: fixed;
}
@media (max-width: 1199px) {
.home-sec-09 .home-panel-09 .home-table-09 .home-09-timetable table {
min-width: 950px;
}
}
.home-sec-09 .home-panel-09 .home-table-09 .home-09-timetable table thead {
font-size: 16px;
font-size: 0.9411764706rem;
background-color: #19429C;
color: white;
}
.home-sec-09 .home-panel-09 .home-table-09 .home-09-timetable table tbody {
color: #19429C;
background-color: white;
}
.home-sec-09 .home-panel-09 .home-panel-09-02 {
margin-top: 0.5em;
font-size: 10px;
font-size: 0.5882352941rem;
}
@media (min-width: 640px) {
.home-sec-09 .home-panel-09 .home-panel-09-02 {
font-size: 12px;
font-size: 0.7058823529rem;
}
}
.home-sec-09 .dp__month_year_wrap button.dp--arrow-btn-nav {
width: auto;
}
@media (min-width: 960px) {
.home-width-01 {
width: 45%;
box-sizing: border-box;
}
}
@media (min-width: 960px) {
.home-width-02 {
width: 55%;
box-sizing: border-box;
}
}
.home-panel-sns-01 {
max-width: 1020px;
margin-inline: auto;
}
@media (min-width: 960px) {
.home-panel-sns-01 .sns-logo {
height: 74px;
}
}
.usage-fee-sec-01 {
padding: 40px 0;
}
.schedule-btn-list-01 .btn-year {
margin-top: 50px;
margin-bottom: 30px;
}
@media (min-width: 960px) {
.schedule-btn-list-01 .btn-year {
margin-top: 100px;
margin-bottom: 60px;
}
}
.schedule-btn-list-01 .btn {
margin-top: 15px;
}
@media (min-width: 960px) {
.schedule-btn-list-01 .btn {
margin-top: 30px;
}
}
.single-img-01 {
margin: 30px 0;
}
@media (min-width: 960px) {
.single-img-01 {
margin: 45px 0;
}
}
/* #single-02
================================*/
.single-sec-01 .date {
font-weight: 400;
letter-spacing: 0;
}
@media (min-width: 960px) {
.single-sec-01 .cat-ico-01 {
font-size: 16px;
font-size: 0.9411764706rem;
}
}
.user-guide-sec-01 {
padding: 40px 0;
}
@media (min-width: 960px) {
.user-guide-sec-01 {
padding: 20px 0 60px;
}
}
.user-guide-sec-02 {
margin-top: 40px;
}
@media (min-width: 960px) {
.user-guide-sec-02 {
margin-top: 60px;
}
}
.user-guide-panel-01 {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 960px) {
.user-guide-panel-01 {
gap: 40px;
grid-template-columns: 1fr 28%;
grid-template-areas: "text-01 image" "text-02 image" "text-03 text-03";
}
}
@media (min-width: 960px) {
.user-guide-panel-01 .text-01 {
grid-area: text-01;
}
}
@media (min-width: 960px) {
.user-guide-panel-01 .text-02 {
grid-area: text-02;
}
}
@media (min-width: 960px) {
.user-guide-panel-01 .text-03 {
grid-area: text-03;
}
}
@media (min-width: 960px) {
.user-guide-panel-01 .image {
grid-area: image;
}
}
.about-panel-01 {
padding-bottom: 60px;
border-bottom: 1px solid #D1D1D1;
}
@media (min-width: 960px) {
.about-panel-01 {
padding-bottom: 120px;
}
}
/* section
====================================== */
/* parts
--------------------------------- */
/* title タイトル
--------------------------------- */
.com-card-01 {
--bg: #F4F4F4;
letter-spacing: 0.05em;
padding: 20px 20px 0;
position: relative;
z-index: 2;
box-sizing: border-box;
margin-inline: auto;
}
@media (min-width: 960px) {
.com-card-01 {
padding: 40px 40px 0;
}
}
.com-card-01::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: calc(100% - 25px);
top: 0;
left: 0;
background-color: var(--bg);
}
.com-card-01 .btn {
margin-inline: auto;
}
.com-card-01.yellow {
--bg: #F9F8EA;
}
.com-card-02 {
background-color: #F4F4F4;
padding: 20px;
}
@media (min-width: 960px) {
.com-card-02 {
padding: 2.5em;
}
}
.com-card-02 .head {
font-size: 18px;
font-size: 1.0588235294rem;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 20px;
}
@media (min-width: 960px) {
.com-card-02 .head {
font-size: 20px;
font-size: 1.1764705882rem;
}
}
.com-card-02 .head::before {
content: "■";
font-size: 20px;
font-size: 1.1764705882rem;
}
@media (min-width: 960px) {
.com-card-02 .com-tit-03 {
font-size: 25px;
font-size: 1.4705882353rem;
}
}
.com-card-02 .date {
font-size: 18px;
font-size: 1.0588235294rem;
font-weight: 700;
letter-spacing: 0;
text-align: center;
background-color: #D1D1D1;
border-radius: 5px;
display: block;
margin-top: 15px;
padding: 0.5em;
}
@media (min-width: 960px) {
.com-card-02 .date {
font-size: 20px;
font-size: 1.1764705882rem;
padding: 1.3em 1em;
}
}
.com-card-03 {
border: 2px solid currentColor;
color: #E75A64;
font-weight: 700;
letter-spacing: 0.05em;
padding: 1em;
}
@media (min-width: 960px) {
.com-card-03 {
font-size: 20px;
font-size: 1.1764705882rem;
}
}
.com-card-03 .notice {
font-size: 14px;
font-size: 0.8235294118rem;
}
@media (min-width: 960px) {
.com-card-03 .notice {
font-size: 18px;
font-size: 1.0588235294rem;
}
}
.page-tit-01 {
padding: 40px 0;
min-height: 150px;
box-sizing: border-box;
background-color: #DEF1FC;
display: flex;
align-items: center;
margin-bottom: 50px;
}
@media (min-width: 960px) {
.page-tit-01 {
min-height: 195px;
margin-bottom: 100px;
}
}
.page-tit-01 > * {
width: 100%;
}
.page-tit-01 .tit {
display: grid;
grid-template-columns: 1fr;
grid-template-areas: "jp" "eng";
gap: 10px;
}
@media (min-width: 960px) {
.page-tit-01 .tit {
text-align: center;
}
}
.page-tit-01 .eng {
font-size: 12px;
font-size: 0.7058823529rem;
font-family: "Open Sans", sans-serif;
color: #3D9ED3;
text-transform: uppercase;
font-weight: 700;
line-height: 1.35;
grid-area: eng;
}
@media (min-width: 960px) {
.page-tit-01 .eng {
font-size: 16px;
font-size: 0.9411764706rem;
}
}
.page-tit-01 .jp {
margin: 0;
font-size: 22px;
font-size: 1.2941176471rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.5;
grid-area: jp;
}
@media (min-width: 960px) {
.page-tit-01 .jp {
font-size: 42px;
font-size: 2.4705882353rem;
}
}
.com-tit-01 {
margin-bottom: 24px;
}
.com-tit-01 .eng {
font-size: 38px;
font-size: 2.2352941176rem;
font-family: "Open Sans", sans-serif;
font-weight: 700;
line-height: 1.36;
color: #19429C;
display: block;
}
@media (min-width: 960px) {
.com-tit-01 .eng {
font-size: 53px;
font-size: 3.1176470588rem;
}
}
.com-tit-01 .jp {
margin: 5px 0 0;
font-size: 14px;
font-size: 0.8235294118rem;
font-weight: 500;
letter-spacing: 0.05em;
}
@media (min-width: 960px) {
.com-tit-01 .jp {
font-size: 16px;
font-size: 0.9411764706rem;
margin-top: 0;
}
}
.com-tit-02 {
font-size: 24px;
font-size: 1.4117647059rem;
font-weight: bold;
background-color: #F0F0F0;
padding: 34px 37px;
margin-bottom: 20px;
}
.com-tit-02-blue, .com-tit-02-blue-02 {
color: #fff;
}
.com-tit-02-blue {
background-color: #19429C;
}
.com-tit-02-blue-02 {
background-color: #3D9ED3;
}
.com-tit-02-small {
padding: 23px 30px;
}
.com-tit-03 {
font-size: 20px;
font-size: 1.1764705882rem;
font-weight: 700;
letter-spacing: 0.05em;
border-bottom: 1px solid #707070;
padding-bottom: 19px;
line-height: 1.46;
position: relative;
margin-bottom: 30px;
}
@media (min-width: 960px) {
.com-tit-03 {
font-size: 26px;
font-size: 1.5294117647rem;
}
}
.com-tit-03::before {
content: "";
position: absolute;
display: block;
width: 85px;
height: 3px;
background-color: #19429C;
bottom: 0;
left: 0;
transform: translateY(100%);
}
.com-tit-04 {
text-align: center;
letter-spacing: 0.05em;
}
.com-tit-04 .catch {
font-size: 17px;
font-size: 1rem;
color: #19429C;
position: relative;
font-weight: 700;
}
@media (min-width: 960px) {
.com-tit-04 .catch {
font-size: 19px;
font-size: 1.1176470588rem;
}
}
.com-tit-04 .catch::after {
content: "";
display: block;
background-color: currentColor;
width: 80px;
height: 2px;
margin: 1em auto 0;
}
.com-tit-04 .tit {
font-weight: 700;
margin-top: 1em;
font-size: 20px;
font-size: 1.1764705882rem;
}
@media (min-width: 960px) {
.com-tit-04 .tit {
font-size: 25px;
font-size: 1.4705882353rem;
}
}
.com-tit-05 {
font-size: 17px;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5em;
}
.com-tit-05::before {
content: "＜";
}
.com-tit-05::after {
content: "＞";
}
.com-tit-06 {
font-size: 17px;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5em;
padding-left: 1em;
}
.com-tit-06::before {
content: "■";
width: 1em;
display: inline-block;
margin-left: -1em;
}
/* panel パネル
--------------------------------- */
.com-panel-01 {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px 15px;
}
@media (min-width: 640px) {
.com-panel-01 {
flex-direction: row;
}
}
.com-panel-01 .map-01, .com-panel-01 .map-02 {
display: block;
}
.com-panel-01 .map-01 > img, .com-panel-01 .map-02 > img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 640px) {
.com-panel-01 .map-01 {
flex: 1;
}
}
@media (min-width: 640px) {
.com-panel-01 .map-02 {
width: 57%;
}
}
.com-panel-02 {
background: #F4F4F4;
padding: 15px;
}
@media (min-width: 640px) {
.com-panel-02 {
padding: 30px;
}
}
.com-panel-02 + .com-panel-02 {
margin-top: 20px;
}
.com-panel-03 {
text-align: center;
background-color: #fff;
border: 3px solid #4DC755;
font-size: 17px;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 1em 0.5em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
@media (min-width: 960px) {
.com-panel-03 {
padding: 1em;
border-width: 5px;
font-size: 20px;
font-size: 1.1764705882rem;
}
}
.com-panel-03 .tit {
font-size: 19px;
font-size: 1.1176470588rem;
}
@media (min-width: 960px) {
.com-panel-03 .tit {
font-size: 22px;
font-size: 1.2941176471rem;
}
}
/* image
--------------------------------- */
.com-img-01 {
width: 100%;
aspect-ratio: 1/0.64;
-o-object-fit: cover;
object-fit: cover;
}
.com-img-02 .caption {
font-size: 17px;
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.com-img-02 .image {
margin-top: 5px;
aspect-ratio: 1/0.66;
}
@media (min-width: 640px) {
.com-img-02 .image {
margin-top: 30px;
}
}
.com-img-02 .image > * {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
-o-object-fit: cover;
object-fit: cover;
}
/* items
--------------------------------- */
.com-item-01 {
display: block;
letter-spacing: 0.05em;
}
.com-item-01 .thumb {
width: 100%;
aspect-ratio: 1/0.73;
-o-object-fit: cover;
object-fit: cover;
}
.com-item-01 .date {
font-size: 11px;
font-size: 0.6470588235rem;
font-weight: 500;
display: block;
margin-top: 3px;
}
@media (min-width: 960px) {
.com-item-01 .date {
font-size: 16px;
font-size: 0.9411764706rem;
}
}
.com-item-01 .tit {
margin: 0;
margin-top: 3px;
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 1.6;
}
@media (min-width: 960px) {
.com-item-01 .tit {
font-size: 18px;
font-size: 1.0588235294rem;
}
}
.com-item-02 {
display: block;
}
.com-item-02:hover .img img {
transform: scale(1.1);
}
.com-item-02 .img {
border: 5px solid #BAE3F9;
background-color: #fff;
width: 100%;
aspect-ratio: 1/0.56;
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.com-item-02 .img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 2;
transition: 0.3s all ease-in-out;
}
.com-item-02 .tit {
font-size: 16px;
font-size: 0.9411764706rem;
font-weight: 700;
margin-top: 10px;
}
.com-item-02 .data {
display: inline-block;
margin-right: 15px;
font-size: 14px;
font-size: 0.8235294118rem;
}
.com-item-03 {
display: flex;
width: 100%;
align-items: flex-start;
gap: 15px;
letter-spacing: 0.05em;
}
.com-item-03[href]:hover {
opacity: 0.7;
}
.com-item-03 .image {
width: 114px;
aspect-ratio: 1/0.73;
-o-object-fit: cover;
object-fit: cover;
flex-shrink: 0;
}
.com-item-03 .cont {
flex: 1;
align-self: center;
}
.com-item-03 .date {
font-size: 11px;
font-size: 0.6470588235rem;
font-weight: 500;
margin-bottom: 0.5em;
}
@media (min-width: 1200px) {
.com-item-03 .date {
font-size: 16px;
font-size: 0.9411764706rem;
}
}
.com-item-03 .tit {
margin: 0;
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 700;
}
@media (min-width: 1200px) {
.com-item-03 .tit {
font-size: 21px;
font-size: 1.2352941176rem;
}
}
.com-item-04 {
position: relative;
width: 100%;
transition: 0.3s all ease-in-out;
aspect-ratio: 1/0.75;
overflow: hidden;
}
.com-item-04[href] {
display: block;
}
.com-item-04[href]:hover img {
transform: scale(1.1);
}
.com-item-04[href] .caption {
padding-right: calc(2em + 9px);
}
.com-item-04[href] .caption::before {
content: "";
display: flex;
position: absolute;
width: 9px;
background: url(../img/common/arrow_02.svg) no-repeat center;
background-size: 100%;
top: 0;
right: 1em;
bottom: 0;
}
.com-item-04 img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: 0.3s all ease-in-out;
}
.com-item-04 .caption {
position: absolute;
z-index: 2;
width: 100%;
box-sizing: border-box;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.64);
display: flex;
flex-direction: column;
font-size: 13px;
font-size: 0.7647058824rem;
font-weight: 500;
letter-spacing: 0.05em;
padding: 13px;
padding: 1em;
}
@media (min-width: 1200px) {
.com-item-04 .caption {
font-size: 16px;
font-size: 0.9411764706rem;
padding: 0.8em 1em;
}
}
.com-item-04 .caption span {
display: block;
font-size: 15px;
font-size: 0.8823529412rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.2;
flex-shrink: 0;
}
@media (min-width: 1200px) {
.com-item-04 .caption span {
font-size: 20px;
font-size: 1.1764705882rem;
}
}
.com-item-05 {
display: flex;
background-color: #fff;
padding-right: 0.5em;
font-weight: 700;
letter-spacing: 0.05em;
gap: 5px;
}
@media (min-width: 640px) {
.com-item-05 {
padding-right: 2em;
gap: 10px;
}
}
.com-item-05::after {
content: url(../img/common/arrow_01.svg);
align-self: center;
transition: 0.3s all ease-in-out;
}
.com-item-05 .thumb {
width: 60px;
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
flex-shrink: 0;
}
@media (min-width: 640px) {
.com-item-05 .thumb {
width: 100px;
}
}
.com-item-05 .tit {
display: block;
flex: 1;
align-self: center;
font-size: 14px;
font-size: 0.8235294118rem;
}
@media (min-width: 640px) {
.com-item-05 .tit {
font-size: 18px;
font-size: 1.0588235294rem;
}
}
.com-item-05:hover::after {
transform: translateX(0.4em);
}
/* Gap between sections or blocks
/* セクションやブロック間の隙間
--------------------------------- */
.com-mt-s {
margin-top: 20px;
}
@media (min-width: 640px) {
.com-mt-s {
margin-top: 30px;
}
}
.com-mt-m {
margin-top: 40px;
}
@media (min-width: 640px) {
.com-mt-m {
margin-top: 60px;
}
}
.com-mt-l {
margin-top: 90px;
}
@media (min-width: 640px) {
.com-mt-l {
margin-top: 120px;
}
}
.com-mt-1em {
margin-top: 1em;
}
.com-mt-01 {
margin-top: 50px;
}
@media (min-width: 640px) {
.com-mt-01 {
margin-top: 100px;
}
}
/* list style リストスタイル
--------------------------------- */
.com-list-01 li {
margin-left: 1.2em;
}
.com-list-01 li::before {
content: "・";
display: inline-block;
width: 1.2em;
margin-left: -1.2em;
}
.com-list-01 li + li {
margin-top: 0.2em;
}
.com-list-01.notice > li::before {
content: "※";
}
.com-list-01 li.icon-notice::before {
content: "※" !important;
}
.com-list-01.circle > li::before {
content: "●";
}
.com-list-01 li.icon-circle::before {
content: "●" !important;
}
.com-list-01.square > li::before {
content: "■";
}
.com-list-01 li.icon-square::before {
content: "■" !important;
}
.com-list-02 {
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
.com-list-02 li {
margin-left: 1.8em;
}
.com-list-02 li + li {
margin-top: 0.4em;
}
.com-list-02 li::before {
counter-increment: item;
content: counter(item) ".";
display: inline-block;
width: 1.5em;
padding-right: 0.3em;
margin-left: -1.8em;
text-align: right;
}
.com-list-02.style-02 li::before {
content: "(" counter(item) ")";
margin-right: 5px;
}
.com-list-03 {
counter-reset: item;
list-style-type: none;
padding-left: 0;
}
.com-list-03 li {
margin-left: 2.3em;
}
.com-list-03 li + li {
margin-top: 0.4em;
}
.com-list-03 li::before {
counter-increment: item;
content: "※" counter(item);
display: inline-block;
width: 2.3em;
margin-left: -2.3em;
}
@media (min-width: 960px) {
.com-list-04 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 60px;
}
}
.com-list-04 > * {
border-bottom: 3px dashed #989898;
}
@media (min-width: 960px) {
.com-list-05 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 60px;
}
}
.com-list-05 > * {
padding: 20px 0;
border-bottom: 3px dashed #989898;
}
.com-list-05 > *:first-child {
padding-top: 0;
}
.com-list-05 > *:last-child {
border-bottom: unset;
}
@media (min-width: 960px) {
.com-list-05 > *:nth-child(2) {
padding-top: 0;
}
}
@media (min-width: 960px) {
.com-list-05 > *:nth-last-child(2) {
border-bottom: unset;
}
}
.com-list-gap-01 li + li {
margin-top: 1em;
}
/* sections
--------------------------------- */
.com-sec-01 {
padding: 60px 0;
}
@media (min-width: 960px) {
.com-sec-01 {
padding: 100px 0;
}
}
.com-sec-02 {
padding: 40px 0;
}
@media (min-width: 960px) {
.com-sec-02 {
padding: 60px 0;
}
}
/* voice-btn
--------------------------------- */
.com-voice-btn-01 .img {
width: 210px;
aspect-ratio: 210/258;
background-color: #C3C3C3;
}
@media (max-width: 639px) {
.com-voice-btn-01 .img {
margin-inline: auto;
}
}
.com-voice-btn-01 .img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 640px) {
.com-voice-btn-01 .details {
flex: 1;
}
}
.com-voice-btn-01 .tit {
font-weight: bold;
font-size: 23px;
font-size: 1.3529411765rem;
display: block;
line-height: 1.6;
padding-bottom: 0.75em;
margin-bottom: 0.75em;
letter-spacing: 0.1em;
border-bottom: 1px solid #707070;
}
.com-voice-btn-01 + .com-voice-btn-01 {
margin-top: 60px;
}
@media (min-width: 960px) {
.com-voice-btn-01 + .com-voice-btn-01 {
margin-top: 80px;
}
}
/* text テキスト
--------------------------------- */
.com-text-01 {
font-size: 19px;
font-size: 1.1176470588rem;
letter-spacing: 0.05em;
line-height: 2.1;
font-weight: 700;
}
.com-text-02 {
font-size: 18px;
font-size: 1.0588235294rem;
font-weight: 700;
letter-spacing: 0.05em;
line-height: 2;
}
@media (min-width: 960px) {
.com-text-02 {
font-size: 20px;
font-size: 1.1764705882rem;
line-height: 1.8;
}
}
/* font-size フォントサイズ
--------------------------------- */
.com-fz-10 {
font-size: 10px;
font-size: 0.5882352941rem;
}
.com-fz-11 {
font-size: 11px;
font-size: 0.6470588235rem;
}
.com-fz-12 {
font-size: 12px;
font-size: 0.7058823529rem;
}
.com-fz-13 {
font-size: 13px;
font-size: 0.7647058824rem;
}
.com-fz-14 {
font-size: 14px;
font-size: 0.8235294118rem;
}
.com-fz-15 {
font-size: 15px;
font-size: 0.8823529412rem;
}
.com-fz-16 {
font-size: 16px;
font-size: 0.9411764706rem;
}
.com-fz-17 {
font-size: 17px;
font-size: 1rem;
}
.com-fz-18 {
font-size: 18px;
font-size: 1.0588235294rem;
}
.com-fz-19 {
font-size: 19px;
font-size: 1.1176470588rem;
}
.com-fz-20 {
font-size: 20px;
font-size: 1.1764705882rem;
}
.com-fz-21 {
font-size: 21px;
font-size: 1.2352941176rem;
}
.com-fz-22 {
font-size: 22px;
font-size: 1.2941176471rem;
}
.com-fz-23 {
font-size: 23px;
font-size: 1.3529411765rem;
}
.com-fz-24 {
font-size: 24px;
font-size: 1.4117647059rem;
}
.com-fz-25 {
font-size: 25px;
font-size: 1.4705882353rem;
}
.com-fz-26 {
font-size: 26px;
font-size: 1.5294117647rem;
}
.com-fz-27 {
font-size: 27px;
font-size: 1.5882352941rem;
}
.com-fz-28 {
font-size: 28px;
font-size: 1.6470588235rem;
}
.com-fz-29 {
font-size: 29px;
font-size: 1.7058823529rem;
}
.com-fz-30 {
font-size: 30px;
font-size: 1.7647058824rem;
}
/* アクセント色
--------------------------------- */
.com-accent-01 {
font-size: 15px;
font-size: 0.8823529412rem;
letter-spacing: 0.15em;
font-weight: 700;
display: inline-block;
border-radius: 30px;
background-color: #6FA8C1;
color: #fff;
padding: 0.4em 1.6em;
}
.com-accent-01.purple {
background-color: #A49BF4;
}
.com-accent-01.red {
background-color: #E75A64;
}
/* table
--------------------------------- */
.com-table-01 {
width: 100%;
overflow-x: scroll;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
letter-spacing: 0.05em;
text-align: center;
}
.com-table-01::-webkit-scrollbar {
display: none;
}
.com-table-01 table {
width: 960px;
margin-inline: auto;
table-layout: fixed;
}
.com-table-01 table, .com-table-01 tr, .com-table-01 td, .com-table-01 th {
border: 1px solid #707070;
border-collapse: collapse;
}
.com-table-01 td, .com-table-01 th {
padding: 0.4em 1em;
font-weight: 500;
}
.com-table-01 .scroll-hint-icon {
height: 90px;
}
.com-table-01.striped table {
border: unset;
}
.com-table-01.striped th {
color: #fff;
background-color: #19429C;
border-color: #fff;
}
.com-table-01.striped tbody tr:nth-child(even) {
background-color: #EDF8FF;
}
.com-table-01.horizontal-th {
text-align: left;
}
.com-table-01.horizontal-th table {
table-layout: unset;
}
.com-table-01.horizontal-th th {
background-color: #EDF8FF;
width: 190px;
}
.com-table-01.disable-scroll table {
width: 100%;
}
/* リンク
--------------------------------- */
.com-btn-02 {
display: flex;
justify-content: center;
align-items: center;
width: 240px;
height: 50px;
box-sizing: border-box;
padding: 0.5em;
background: url(../img/common/btn_bg_02.svg) no-repeat center;
background-size: 100%;
color: #fff;
text-align: center;
}
.com-btn-02::after {
content: url(../img/common/arrow_02.svg);
display: inline-block;
margin-left: 10px;
}
.com-btn-02:hover {
color: #fff;
}
.com-btn-02:hover::after {
transform: translateX(10px);
}
.com-btn-03 {
background-image: linear-gradient(to right, #173DBB, #245FD1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
gap: 10px;
font-size: 14px;
font-size: 0.8235294118rem;
font-weight: 700;
letter-spacing: 0.05em;
padding: 1.2em 1em;
}
@media (min-width: 960px) {
.com-btn-03 {
font-size: 21px;
font-size: 1.2352941176rem;
padding: 1em;
}
}
.com-btn-03::after {
content: url(../img/common/arrow_02.svg);
display: inline-block;
}
.com-btn-03:hover {
color: #fff;
}
.com-btn-03:hover::after {
transform: translateX(10px);
}
.com-btn-04 {
display: block;
font-size: 16px;
font-size: 0.9411764706rem;
font-weight: 700;
border-radius: 25px;
background-color: #fff;
color: #19429C;
border: 1px solid currentColor;
position: relative;
margin-inline: auto;
width: 80%;
max-width: 336px;
padding: 0.7em 1em;
}
.com-btn-04::after {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
height: 1em;
line-height: 1;
position: absolute;
top: 0;
bottom: 0;
right: 1em;
margin: auto;
transition: 0.3s all ease-in-out;
}
.com-btn-04:hover::after {
transform: translateX(5px);
}
.com-btn-04.blue {
background-color: #19429C;
border: 1px solid #2A318A;
color: #fff;
}
.com-btn-04.more {
transition: 0.3s opacity ease-in-out;
}
.com-btn-04.more::after {
content: "+";
}
.com-btn-04.more:hover {
opacity: 0.7;
}
.com-btn-04.more:hover::after {
transform: translateX(0);
}
.com-btn-04.more.is-actived::after {
transform: rotate(45deg);
}
.com-btn-05 {
display: flex;
max-width: 400px;
align-items: center;
background-color: #E3E9EE;
color: #0A1F2E;
border-radius: 5px;
padding: 0.8em;
padding-left: 1em;
padding-right: 3em;
font-family: "Noto Sans JP", sans-serif;
font-size: 14px;
font-size: 0.8235294118rem;
font-weight: 700;
letter-spacing: 0;
width: 100%;
box-sizing: border-box;
margin-inline: auto;
position: relative;
transition: 0.3s all;
}
@media (min-width: 960px) {
.com-btn-05 {
padding: 1.3em 3em 1.3em 1em;
font-size: 19px;
font-size: 1.1176470588rem;
max-width: unset;
}
}
.com-btn-05::before, .com-btn-05::after {
line-height: 1;
}
.com-btn-05::before {
content: url(../img/common/ico_pdf.svg);
display: inline-block;
border-right: 1px solid #A8A7A7;
padding-right: 9px;
margin-right: 9px;
transition: inherit;
}
.com-btn-05::after {
content: url(../img/common/ico_download.svg);
position: absolute;
top: 50%;
right: 15px;
transform: translate(0, -50%);
}
.com-btn-05:hover {
color: #fff;
background-color: #19429C;
}
.com-btn-05:hover::after {
filter: brightness(0) invert(1);
}
.com-btn-05.-blue {
background-color: #3D9ED3;
color: #fff;
}
.com-btn-05.-blue::before {
border-right-color: #fff;
}
.com-btn-05.-blue::after {
filter: brightness(0) invert(1);
}
.com-btn-06 {
display: block;
text-align: center;
font-weight: 700;
letter-spacing: 0;
font-size: 16px;
font-size: 0.9411764706rem;
line-height: 1.45;
background-color: #19429C;
border: 2px solid #19429C;
color: #fff;
border-radius: 5px;
padding: 1.5em 2em;
position: relative;
}
@media (min-width: 640px) {
.com-btn-06 {
padding: 1.5em 3em;
}
}
@media (min-width: 960px) {
.com-btn-06 {
font-size: 20px;
font-size: 1.1764705882rem;
}
}
.com-btn-06::after {
content: "\f138";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 18px;
font-size: 1.0588235294rem;
position: absolute;
display: inline-block;
margin: auto;
top: 50%;
transform: translateY(-50%);
right: 0.5em;
}
@media (min-width: 640px) {
.com-btn-06::after {
font-size: 29px;
font-size: 1.7058823529rem;
right: 0.7em;
}
}
.com-btn-06:hover {
color: #fff;
}
.com-btn-06:hover::after {
transform: translate(5px, -50%);
}
.com-btn-06-white {
background-color: #fff;
color: #112C45;
}
.com-btn-06-white::after {
color: #19429C;
}
.com-btn-06-white:hover {
color: #112C45;
}
.com-btn-07 {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-size: 1.0588235294rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.com-btn-07::after {
content: url(../img/common/arrow_01.svg);
line-height: 1;
transition: 0.3s all ease-in-out;
}
.com-btn-07:hover::after {
transform: translateX(5px);
}
.com-btn-08 {
display: flex;
gap: 20px;
justify-content: center;
align-items: center;
text-align: center;
background-color: #E9EF03;
color: #112C45;
border-radius: 50px;
font-size: 18px;
font-size: 1.0588235294rem;
font-weight: 700;
letter-spacing: -0.05em;
box-sizing: border-box;
padding: 0.5em;
}
@media (min-width: 960px) {
.com-btn-08 {
font-size: 20px;
font-size: 1.1764705882rem;
padding: 0.7em;
}
}
.com-btn-08::after {
content: url(../img/common/arrow_01_01.svg);
transition: 0.3s all ease-in-out;
}
.com-btn-08:hover::after {
transform: translateX(5px);
}
.com-link-01 {
text-decoration: underline;
}
.com-switcher-01 {
display: flex;
gap: 10px;
}
.com-switcher-01 a {
font-size: 13px;
font-size: 0.7647058824rem;
font-weight: 700;
letter-spacing: 0.08em;
display: block;
text-align: center;
color: #686868;
background-color: #fff;
border-radius: 20px;
padding: 0.2em 1.1em;
}
.com-switcher-01 .uk-active a {
background-color: #E9EF03;
color: #0A1F2E;
}
/* list
--------------------------------- */
.recruitments-list-01 li + li {
margin-top: 20px;
}
@media (min-width: 640px) {
.recruitments-list-01 li + li {
margin-top: 30px;
}
}
/* btn
--------------------------------- */
.recruitments-btn-01 {
display: flex;
align-items: center;
background: #F5F5F5;
padding: 20px;
line-height: 1.5;
font-size: 16px;
font-size: 0.9411764706rem;
}
@media (min-width: 640px) {
.recruitments-btn-01 {
padding: 40px 28px;
font-size: 21px;
font-size: 1.2352941176rem;
}
}
.recruitments-btn-01 .tit {
flex: 1;
}
.recruitments-btn-01::before {
content: "";
display: block;
width: 6px;
align-self: stretch;
margin-right: 0.9em;
background: #19429C;
}
.recruitments-btn-01::after {
content: "\f054";
font-family: "Font Awesome 5 Free";
margin-left: auto;
padding-left: 0.9em;
}
.recruitments-btn-01:hover {
background: rgb(147.2651933702, 175.5801104972, 237.7348066298);
}
/* dl table
--------------------------------- */
@media (max-width: 639px) {
.job-table-01 {
border-bottom: 1px solid #989898;
}
}
@media (min-width: 640px) {
.job-table-01 {
display: grid;
grid-template-columns: 292px 1fr;
-moz-column-gap: 40px;
column-gap: 40px;
}
}
.job-table-01 dt {
padding: 1.5em 0 1em;
padding-left: 25px;
font-weight: 500;
position: relative;
border-top: 1px solid #989898;
}
@media (min-width: 640px) {
.job-table-01 dt {
padding-bottom: 1.5em;
border-top: 2px solid #989898;
}
.job-table-01 dt:last-of-type {
border-bottom: 2px solid #989898;
}
}
.job-table-01 dt::before {
content: "";
display: block;
width: 14px;
height: 14px;
background: #19429C;
position: absolute;
margin-top: 0.5em;
left: 0;
}
.job-table-01 dd {
padding-bottom: 1.5em;
}
@media (min-width: 640px) {
.job-table-01 dd {
padding-top: 1.5em;
border-top: 1px solid #989898;
}
.job-table-01 dd:last-of-type {
border-bottom: 1px solid #989898;
}
}
/* list
--------------------------------- */
.info-list-01 {
border-top: 1px solid #D1D1D1;
}
.info-list-01 li {
border-bottom: 1px solid #D1D1D1;
}
/* btn
--------------------------------- */
.info-btn-01 {
display: block;
padding: 1em 0;
padding-right: 1.5em;
position: relative;
}
@media (min-width: 640px) {
.info-btn-01 {
padding-top: 2em;
padding-bottom: 2em;
padding-right: 3em;
}
}
@media (min-width: 960px) {
.info-btn-01 {
display: flex;
align-items: center;
}
}
.info-btn-01:hover {
background: rgb(147.2651933702, 175.5801104972, 237.7348066298);
}
.info-btn-01::after {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-size: 20px;
font-size: 1.1764705882rem;
color: #19429C;
height: 1em;
line-height: 1;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
}
@media (min-width: 960px) {
.info-btn-01::after {
right: 0.5em;
}
}
.info-btn-01 .tit {
font-size: 16px;
font-size: 0.9411764706rem;
font-weight: bold;
display: block;
margin-top: 1em;
}
@media (min-width: 640px) {
.info-btn-01 .tit {
font-size: 17px;
font-size: 1rem;
}
}
@media (min-width: 960px) {
.info-btn-01 .tit {
margin-top: 0;
flex: 1;
border-left: 1px solid #707070;
padding-left: 1.1em;
}
}
.info-btn-01 .data {
margin-left: 0.5em;
}
@media (min-width: 960px) {
.info-btn-01 .data {
width: 8em;
text-align: center;
}
}
/* icon
--------------------------------- */
.cat-ico-01 {
display: inline-block;
min-width: 90px;
padding: 0 0.5em;
box-sizing: border-box;
background: #3D9ED3;
text-align: center;
color: #fff;
font-size: 14px;
font-size: 0.8235294118rem;
font-weight: 400;
}
.cat-ico-01.report {
background-color: #56BC56;
}
/* pagination ページナビ
--------------------------------- */
.com-pagination ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-left: -8px;
margin-top: -8px;
}
@media (min-width: 960px) {
.com-pagination ul {
justify-content: flex-start;
}
}
.com-pagination ul .page-numbers {
display: block;
margin-left: 8px;
margin-top: 8px;
box-sizing: border-box;
}
.com-pagination ul .page-numbers:not(.prev):not(.next) {
display: grid;
border: 1px solid #C0C0C0;
width: 64px;
height: 64px;
place-items: center;
}
.com-pagination ul .page-numbers.prev, .com-pagination ul .page-numbers.next {
padding: 1em;
}
.com-pagination ul .page-numbers.prev:hover, .com-pagination ul .page-numbers.next:hover {
color: #19429C;
}
.com-pagination ul .page-numbers.current {
border-width: 2px !important;
border-color: #19429C !important;
}
.com-pagination ul a:not(.prev):not(.next):hover {
background: rgb(147.2651933702, 175.5801104972, 237.7348066298);
}
.com-width-full {
max-width: unset;
width: 100%;
}
/* list
--------------------------------- */
/* post navigation 記事前後ボタン
--------------------------------- */
.single-nav {
border-top: 1px solid #D1D1D1;
margin-top: 40px;
padding-top: 35px;
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
font-size: 16px;
font-size: 0.9411764706rem;
}
@media (min-width: 640px) {
.single-nav {
grid-template-columns: 3fr 3fr 2fr;
margin-top: 95px;
}
}
.single-nav a {
display: block;
text-align: center;
padding: 0.7em 0.5em;
border: 2px solid #707070;
color: #333;
position: relative;
}
.single-nav a::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
height: 1em;
line-height: 1;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.single-nav a[rel=prev] {
padding-left: 2em;
}
.single-nav a[rel=prev]::before {
content: "\f053";
left: 1em;
}
.single-nav a[rel=prev]:hover::before {
transform: translateX(-5px);
}
.single-nav a[rel=next] {
padding-right: 2em;
}
.single-nav a[rel=next]::before {
content: "\f054";
right: 1em;
}
.single-nav a[rel=next]:hover::before {
transform: translateX(5px);
}
.single-nav a.index {
background: #686868;
color: #fff;
padding-right: 2em;
}
.single-nav a.index::before {
content: "\f077";
right: 1em;
}
.single-nav a.index:hover::before {
transform: translateY(-5px);
}
/* panel
--------------------------------- */
.contact-panel-01 {
display: flex;
align-items: center;
margin-bottom: 7px;
}
.contact-panel-01 .tel {
width: 40px;
line-height: 22px;
margin-right: 0.9em;
text-align: center;
color: #19429C;
font-size: 12px;
font-size: 0.7058823529rem;
font-weight: 700;
border: #19429C 1px solid;
}
@media (min-width: 640px) {
.contact-panel-01 .tel {
width: 52px;
line-height: 28px;
font-size: 14px;
font-size: 0.8235294118rem;
}
}
.contact-panel-01 .number {
line-height: 1;
font-size: 32px;
font-size: 1.8823529412rem;
font-weight: 500;
color: #19429C;
}
@media (min-width: 640px) {
.contact-panel-01 .number {
font-size: 43px;
font-size: 2.5294117647rem;
}
}
.contact-panel-01 .number a {
color: #19429C;
}
/* dl table
--------------------------------- */
@media (max-width: 639px) {
.form-table-01 {
border-bottom: 1px solid #989898;
}
}
@media (min-width: 640px) {
.form-table-01 {
display: grid;
grid-template-columns: 210px 1fr;
-moz-column-gap: 40px;
column-gap: 40px;
}
}
.form-table-01 > dt {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2em 0;
font-weight: 500;
position: relative;
border-top: 1px solid #989898;
}
@media (min-width: 640px) {
.form-table-01 > dt {
padding: 1.4em 0;
border-top: 2px solid #989898;
}
.form-table-01 > dt:last-of-type {
border-bottom: 2px solid #989898;
}
}
.form-table-01 .required:after {
content: "必須";
font-size: 11px;
font-size: 0.6470588235rem;
background: #FF0000;
color: #fff;
padding: 0.2em 0.8em;
margin-left: 1em;
}
.form-table-01 > dd {
padding-bottom: 1.2em;
}
@media (min-width: 640px) {
.form-table-01 > dd {
padding-top: 1.2em;
border-top: 1px solid #989898;
}
.form-table-01 > dd:last-of-type {
border-bottom: 1px solid #989898;
}
}
@media (min-width: 960px) {
.form-table-02 {
display: grid;
grid-gap: 1em;
grid-template-columns: max-content 1fr;
}
}
@media (max-width: 959px) {
.form-table-02 dd + dt {
margin-top: 1em;
}
}
.form-icon-required {
display: inline-block;
font-size: 11px;
font-size: 0.6470588235rem;
background: #FF0000;
color: #fff;
padding: 0.2em 0.8em;
margin-right: 1em;
}
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) {
display: inline-block;
margin-left: -1.5em;
margin-top: -0.3em;
}
:is(.wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance) .wpcf7-list-item {
margin-left: 1.5em;
margin-top: 0.3em;
}
input[type=radio] {
position: relative;
vertical-align: middle;
-webkit-appearance: none;
border: 1px solid #cccccc;
background-position: 50% 50%;
width: 18px;
height: 18px;
display: inline-block;
border-radius: 50%;
outline: none;
margin: 0 5px 0 0;
}
input[type=radio]:checked {
border-color: #19429C;
border-width: 2px;
}
input[type=radio]:checked:after {
content: "";
width: 10px;
height: 10px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: block;
background-color: #19429C;
border-radius: 50%;
}
input[type=radio] label {
display: inline-block;
}
input[type=checkbox] {
margin: 0 5px 0 0;
width: 18px;
height: 18px;
border: 1px solid #cccccc;
vertical-align: middle;
-webkit-appearance: none;
display: inline-block;
outline: none;
}
input[type=checkbox]:checked {
position: relative;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 10px;
height: 18px;
border: 4px solid #19429C;
box-sizing: border-box;
border-top: none;
border-left: 0;
transform: rotate(45deg);
position: absolute;
top: -6px;
left: 6px;
}
input[type=checkbox] label {
display: inline-block;
}
/* list
--------------------------------- */
.thanks-panel-01 {
padding-top: 1.5em;
padding-bottom: 1.5em;
border-top: 1px solid #989898;
border-bottom: 1px solid #989898;
}
.com-grid-marign-01 .uk-grid-margin {
margin-top: 15px;
}
.com-slider-01 {
position: relative;
}
.com-slider-01 .item {
aspect-ratio: 1/0.66;
display: flex;
align-items: center;
}
.com-slider-01 .item img {
width: 100%;
aspect-ratio: 1/0.5;
-o-object-fit: cover;
object-fit: cover;
transition: 0.3s all ease-in-out;
}
.com-slider-01 .item.uk-active > img {
aspect-ratio: inherit;
}
.com-slider-01 .navigation {
--width: calc(500% / 6);
--pos: calc((100% - var(--width)) / 2 + var(--width));
position: absolute;
top: 50%;
max-width: 30px;
}
@media (min-width: 640px) {
.com-slider-01 .navigation {
--width: 40%;
max-width: 56px;
}
}
.com-slider-01 .navigation.prev {
right: var(--pos);
transform: translate(50%, -50%);
}
.com-slider-01 .navigation.next {
left: var(--pos);
transform: translate(-50%, -50%);
}
.com-slider-01 .uk-dotnav {
justify-content: center;
}
.com-slider-dots-01 > * > * {
border: unset;
background-color: #D1D1D1;
}
.com-slider-dots-01 > *.uk-active > * {
background-color: #3D9ED3;
}
.js-panel-01 .js-toggle {
overflow: hidden;
position: relative;
transition: 0.6s all ease-in-out;
}
.js-panel-01 .js-toggle::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
top: 0;
left: 0;
visibility: hidden;
background-image: linear-gradient(180deg, transparent, #fff);
opacity: 0;
transition: 0.3s opacity ease-in-out;
}
.js-panel-01 .js-toggle.is-hidden::before {
visibility: visible;
opacity: 1;
}
.js-panel-01 .js-btn .is-openning {
display: none;
}
.js-panel-01 .js-btn.is-actived .is-openning {
display: block;
}
.js-panel-01 .js-btn.is-actived .is-closing {
display: none;
}
#sb_instagram #sbi_images {
padding: 0 !important;
}
/*# sourceMappingURL=layout.css.map */