@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Zen+Maru+Gothic:wght@700&display=swap"); @import url("https://use.typekit.net/zkq4xib.css"); /* font clump @include clamp_fontsize(16, 20, 375, 1440, ); @include clamp_fontsize(min size, max size, min width, maxiwdth); */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-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; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-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; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 62.5%; } body { overflow-x: hidden; font-family: "Noto Sans JP", sans-serif; font-size: 1.6rem; line-height: 2; font-weight: 500; } .zen { font-family: "Zen Maru Gothic", serif; } a { transition: all 0.3s ease; } a img { transition: all 0.3s ease; } a:hover { color: #22841E; } a:hover img { opacity: 0.8; } .tc{ text-align:center; } .text-padding{ padding: 0 0 50px 0; } .sp { display: none; } @media screen and (max-width: 767px) { .sp { display: block; } } @media screen and (max-width: 767px) { .pc { display: none; } } .btn { font-family: "Zen Maru Gothic", serif; border-radius: 25px; line-height: 1.3; text-align: center; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; height: 50px; background-color: #989898; flex-direction: column; color: #fff; } .btn span{ font-size: 1.2rem; } @media screen and (max-width: 767px) { .btn { font-size: 1.7rem; } } .btn.btn-player { background-color: #22841E; } .btn.btn-supporter { background-color: #53B134; } .btn.btn-green { background-color: #22841E; } .btn.btn-lgreen { background-color: #53B134; } .btn.btn-gray { background-color: #989898; } .btn.btn-orange { background-color: #F4BD4B; } .btn:hover { color: #fff; opacity: 0.8; } .ly_container { position: relative; } .inview { opacity: 0; } .inviewwrap { position: absolute; top: 0; width: 100%; height: 100%; } .inview.active { animation: fadeInup 1s ease-out; animation-fill-mode: forwards; } .inview.noanimation { opacity: 1; animation: none; } .inview.active.left { animation: fadeInLeft 1s ease-out; animation-fill-mode: forwards; } .inview.fade.active { animation: fadeIn 1s ease-out; animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInup { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes fadeInLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .delay01 { animation-delay: 0.3s !important; } .delay02 { animation-delay: 0.6s !important; } .delay03 { animation-delay: 0.9s !important; } @media screen and (max-width: 767px) { .inviewwrap { position: static; } } .inner { max-width: calc(1000px + 6%); padding: 0 6%; margin: auto; } /* HEADER ================================================== */ #header { top: 0; left: 0; width: 100%; padding: 25px 3% 13px; z-index: 100; height: 110px; transition: all 0.3s ease 0s; top: -110px; } @media screen and (max-width: 1060px) { #header { height: 90px; top: -90px; padding-top: 15px; } } @media screen and (max-width: 767px) { #header { height: 55px; top: -55px; padding: 10px 3% 0; background-color: #fff; } } #header.fixed { position: fixed; left: 0; top: 0; background-color: #fff; } #header .header-layout-main { display: flex; justify-content: space-between; align-items: start; } @media screen and (max-width: 1060px) { #header .header-layout-main { align-items: center; } } #header .header-layout-main .header-logo { position: relative; z-index: 1; width: 25%; max-width: 300px; min-width: 250px; line-height: 1; } @media screen and (max-width: 767px) { #header .header-layout-main .header-logo { width: 180px; min-width: 0; } #header .header-layout-main .header-logo img { width: 100%; } } #header .header-layout-main .header-nav ul { display: flex; align-items: center; gap: 20px; } #header .header-layout-main .header-nav ul .btn { width: 170px; } #header .header-layout-main .header-nav ul .login .btn { width: 230px; } @media screen and (max-width: 1200px) { #header .header-layout-main .header-nav ul { gap: 15px; font-size: 1.4rem; } #header .header-layout-main .header-nav ul .btn { width: 140px; } #header .header-layout-main .header-nav ul .login .btn { width: 220px; } } @media screen and (max-width: 1060px) { #header .header-layout-main .header-nav { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background-color: #fff; z-index: 1000; text-align: center; padding: 150px 0 0; } #header .header-layout-main .header-nav ul { justify-content: center; flex-direction: column; } #header .header-layout-main .header-nav ul li { font-size: 2.2rem; } #header .header-layout-main .header-nav ul li.login { padding-top: 20px; } #header .header-layout-main .header-nav ul li .btn { font-size: 2rem; width: 260px!important; padding: 20px 30px; line-height: 1.4; height: 70px; border-radius: 50px; } } #header .header-layout-main #sp-mm { display: none; width: 74px; position: relative; z-index: 1100; } @media screen and (max-width: 1060px) { #header .header-layout-main #sp-mm { display: block; } } @media screen and (max-width: 767px) { #header .header-layout-main #sp-mm { width: 25px; } } #header .header-layout-main #sp-mm .sp-mm-btn { position: relative; width: 50px; height: 40px; cursor: pointer; transition: all 0.3s ease; } @media screen and (max-width: 767px) { #header .header-layout-main #sp-mm .sp-mm-btn { width: 25px; height: 20px; } } #header .header-layout-main #sp-mm .sp-mm-btn span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; height: 4px; background-color: #000; border-radius: 2px; } @media screen and (max-width: 767px) { #header .header-layout-main #sp-mm .sp-mm-btn span { height: 2px; } } #header .header-layout-main #sp-mm .sp-mm-btn span:before, #header .header-layout-main #sp-mm .sp-mm-btn span:after { content: ""; display: block; position: absolute; width: 100%; height: 4px; left: 0; transition: all 0.3s ease; border-radius: 2px; } @media screen and (max-width: 767px) { #header .header-layout-main #sp-mm .sp-mm-btn span:before, #header .header-layout-main #sp-mm .sp-mm-btn span:after { height: 2px; } } #header .header-layout-main #sp-mm .sp-mm-btn span:before { background-color: #000; top: -18px; } @media screen and (max-width: 767px) { #header .header-layout-main #sp-mm .sp-mm-btn span:before { top: -8px; } } #header .header-layout-main #sp-mm .sp-mm-btn span:after { background-color: #000; bottom: -18px; } @media screen and (max-width: 767px) { #header .header-layout-main #sp-mm .sp-mm-btn span:after { bottom: -8px; } } @media screen and (max-width: 1060px) { #header.open #sp-mm .sp-mm-btn { transform: rotate(45deg); } #header.open #sp-mm .sp-mm-btn span { background-color: #fff; } #header.open #sp-mm .sp-mm-btn span::before { animation: close1 0.3s ease forwards; } #header.open #sp-mm .sp-mm-btn span::after { animation: close2 0.3s ease forwards; } } @keyframes close1 { 0% { top: -18px; } 50% { top: 0; } 100% { top: 0; } } @keyframes close2 { 0% { bottom: -18px; transform: rotate(0); } 50% { bottom: 0; transform: rotate(0); } 100% { bottom: 0; transform: rotate(90deg); } } /* FOOTER ================================================== */ #footer { background-color: #22841E; padding: 40px 3%; text-align: center; } #footer .contact{ color:#fff; margin-bottom:3em; } #footer .contact .contact01{ margin-bottom:1em; } #footer .contact .contact02{ margin-bottom:1em; } #footer ul { display: flex; justify-content: center; margin-bottom: 20px; } @media screen and (max-width: 767px) { #footer ul { display: block; margin-bottom: 40px; } } #footer ul li { padding: 0 20px; border-right: 1px solid #fff; line-height: 1; } @media screen and (max-width: 767px) { #footer ul li { border: none; margin-bottom: 1rem; } } #footer ul li:last-child { border-right: none; } #footer ul li a { color: #fff; } #footer ul li a:hover { text-decoration: underline; } #footer .copyright { color: #fff; } #pagetop { position: fixed; right: 5%; bottom: 5%; cursor: pointer; transition: all 0.3s ease; } .common-title { text-align: center; } .common-title h2 { position: relative; text-align: center; font-size: 4.3rem; margin-bottom: 77px; padding-bottom: 20px; } @media screen and (max-width: 767px) { .common-title h2 { font-size: 2.6rem; padding-bottom: 10px; margin-bottom: 30px; } } .common-title h2::before { content: ""; display: block; position: absolute; width: 20px; height: 8px; background-color: #22841E; border-radius: 4px 0 0 4px; bottom: 0; left: 50%; transform: translateX(-100%); } @media screen and (max-width: 767px) { .common-title h2::before { height: 5px; } } .common-title h2::after { content: ""; display: block; position: absolute; width: 20px; height: 8px; background-color: #53B134; border-radius: 0 4px 4px 0; bottom: 0; left: 50%; } @media screen and (max-width: 767px) { .common-title h2::after { height: 5px; } } /* pagenation */ .pagination{ margin:80px 0 40px; } .nav-links{ display:flex; justify-content: center; } .pagination .page-numbers{ display:inline-block; margin:5px; padding:15px 18px; line-height:1; color:#333; border-radius:3px; background:#fff; border:1px solid #22841E; } .pagination .page-numbers.dots{ border:none; padding:15px 0; margin:5px 0; } .pagination .current{ background:#22841E; color:#fff; } .pagination .prev, .pagination .next{ background:transparent; box-shadow:none; color:#22841E; } .pagination .dots{ background:transparent; box-shadow:none; }