:root {
--base-color: #252525;
--bg-grad: linear-gradient(to right, #E04793 0%, #0E4D96 50%, #EF7D1C 100%);
--btn-grad: linear-gradient(to right, #FBECF4 0%, #E7ECF4 50%, #FDF1E8 100%);
--dark-grad: linear-gradient(to right, #492C3B 0%, #212D3B 50%, #4B3623 100%);
--dark-grad2: linear-gradient(to right, #5D173B 0%, #0D3767 50%, #764708 100%);
}
html {scroll-behavior: smooth; overflow-x: hidden;}
body {
font-family: "Noto Sans JP", sans-serif;
line-height: 1.8;
color: var(--base-color);
position: relative;
overflow-x: hidden;
}
main {position: relative;}
h1, h2, h3, h4, p {margin: 0;}
img {vertical-align: middle;}
a {transition: 0.3s;}
a[href^="tel"] {cursor: default;}
.int {font-family: interstate-condensed, sans-serif;}
.flex {display: flex; flex-wrap: wrap;}
.ib {display: inline-block;}
span.indent {
padding-left: 1em;
text-indent: -1em;
display: inline-block;
}
.inner1 {
width: min(1240px, 80%);
margin: 0 auto;
}
.inner2 {
width: min(1366px, 85%);
margin: 0 auto;
}
.elementor-element.e-con {padding: 0 !important;}
.elementor-element.elementor-widget {width: 100%;}
@media screen and (min-width: 1025px) {
a[href^="tel"] {pointer-events: none;}
}
@media screen and (max-width: 720px) {
.inner1, .inner2 {width: 90%;}
}  .midashi {
font-weight: 700;
position: relative;
display: inline-block;
padding-top: 15px;
}
.top-midashi-box {
margin-bottom: 30px;
}
.top-midashi {
font-size: 40px;
font-weight: 700;
letter-spacing: 0.05em;
}
.midashi::before {
content: "";
position: absolute;
left: -20px;
top: 0;
height: 6px;
width: 100px;
background-image: var(--bg-grad);
}
.midashi::after {
content: "";
position: absolute;
width: calc(100% + 20px);
left: -20px;
top: 0;
height: 100%;
background-image: linear-gradient(to right bottom, #E04793 0%, #0E4D96 50%, #EF7D1C 100%);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
transition: clip-path 0.6s 2.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.midashi-mask {
position: absolute;
width: calc(100% + 20px);
right: 0;
top: 0;
height: 100%;
background-color: white;
transition: width 0.6s 2s cubic-bezier(0.16, 1, 0.3, 1);
transform-origin: right;
z-index: 1;
}
.midashi.on .midashi-mask {width: 0;}
.midashi.on::after {
clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);
}
.top-midashi-box::after, .sub-faq-wrapper .midashi::after {transition-delay: 0.7s;}
.top-midashi-box .midashi-mask, .sub-faq-wrapper .midashi-mask {transition-delay: 0s;}
@media screen and (max-width: 720px) {
.top-midashi-box {margin-bottom: 20px;}
.top-midashi {font-size: 32px;}
}
@media screen and (max-width: 480px) {
.midashi::before, .midashi::after {
left: -5vw;
}
.midashi::after, .midashi-mask {
width: calc(100% + 5vw);
}
} .btn-topgra {
position: relative;
justify-content: center;
align-items: center;
background-image: var(--btn-grad);
}
.btn-topgra::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 10px;
width: 100%;
background-image: var(--bg-grad);
}
.btn-topgra-hov {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
background-image: var(--dark-grad2);
color: white;
clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
z-index: 1; } .btn-topgra.hover .btn-topgra-hov { transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
animation: runner2 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-topgra.leave .btn-topgra-hov {
transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
animation: runner 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 720px) {
.btn-topgra::before {height: 7px;}
} .btn-bordgra {
position: relative;
display: block;
background-color: white;
}
.btn-bordgra-bg {
border: 2px solid;
border-image: var(--bg-grad) 1;
display: block;
height: 100%;
position: relative;
font-size: 0;
}
.btn-bordgra-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform: scale(0, 1);
transform-origin: right;
background-image: var(--btn-grad);
transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.btn-bordgra:hover .btn-bordgra-bg::after {
transform: scale(1, 1);
transform-origin: left;
}
.btn-bordgra-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 2px;
color: #252525 !important;
} .arrow-link {
position: relative;
padding: 0 35px 0 5px;
font-size: 18px;
}
.arrow-link::after {
content: "";
width: 100%;
height: 6px;
left: 0;
bottom: 5px;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/link-arrow.svg);
background-position: bottom left;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.arrow-link-w::after {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/link-arrow-w.svg);
}
a.arrow-link:hover::after {
animation: arrow 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes arrow {
from {clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);}
to {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}
}
@keyframes arrow2 {
from {clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);}
to {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}
} .text-link {
position: relative;
}
.text-link::after {
position: absolute;
content: "";
width: 0;
height: 1px;
left: 0;
bottom: 0;
background-color: #252525;
transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.text-linkB {font-weight: 700;}
.text-link:hover::after {width: 100%;} .anim {
clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
transition: clip-path 0.8s 0s cubic-bezier(0.77, 0, 0.175, 1);
}
.trigger.on .anim, .trigger.anim.on {
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.trigger.end .anim, .trigger.anim.end {clip-path: none;} body:not(.home)::after {
content: "";
z-index: 9999;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background-image: var(--btn-grad);
transition: right 1.2s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
body.show:not(.home)::after {
right: -100%;
}
body.show.end:not(.home)::after {display: none;} header {
max-width: none !important;
padding: 0 !important;
position: fixed !important;
top: 0;
left: 0;
transition: 0.3s;
z-index: 99;
background-color: white;
}
header.off {top: -90px;}
.header-nav-wrapper .header-main-menu {
display: flex;
align-items: center;
}
.site-branding {
padding: 10px 0 10px 20px;
}
.site-branding a {align-items: center;}
.header-name {
font-size: 28px;
font-weight: 700;
padding-left: 20px;
line-height: 1.2;
color: #252525 !important;
}
.header-main-menu, .header-sub-menu {list-style-type: none; padding: 0;}
.header-nav-wrapper .header-main-menu li:first-child {display: none;}
.header-main-menu-item {
padding: 0 10px;
position: relative;
}
.header-main-menu-item a {
position: relative;
padding: 0 5px;
display: block;
overflow: hidden;
}
.header-menu-en {
font-size: 18px;
font-weight: 700;
transition: transform 0.3s cubic-bezier(.22,1,.36,1);
display: block;
color: #252525 !important;
}
.header-main-menu > li:nth-child(4) > a > span.header-menu-en {
font-size: 19px;
}
.header-menu-jp {
font-size: 13px;
font-weight: 700;
color: #252525 !important;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 12px);
width: 100%;
text-align: center;
transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.header-main-menu-item a:hover .header-menu-en {
transform: translateY(-24px);
}
.header-main-menu-item a:hover .header-menu-jp {
transform: translate(-50%, -13px);
}
.header-sub-menu {
width: 80px;
align-content: space-evenly;
margin: 0 20px;
padding: 10px 0;
}
.header-sub-menu-item {
line-height: 24px;
font-size: 16px;
width: 100%;
text-align: center;
}
.header-sub-menu-item a {
display: block;
width: 100%;
background-color: #DDDDDD;
position: relative;
}
.submenu-hov {
display: block;
position: absolute;
height: 100%;
width: 100%;
color: white;
background-image: var(--dark-grad2);
clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
top: 0;
left: 0;
}
.header-sub-menu-item a.hover .submenu-hov { transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
animation: runner2 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.header-sub-menu-item a.leave .submenu-hov {
transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
animation: runner 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.header-entry .btn-topgra {
width: 180px;
font-size: 28px;
font-weight: 700;
height: 100%;
}
.header-nav-wrapper .mobmenu-entry {display: none;}
.mobmenu-wrapper .header-entry {display: none;}
.header-nav-wrapper li.header-main-menu-item::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
display: block;
background-color: #252525;
transform: scale(0);
position: absolute;
left: 2px;
top: 12px;
}
body.page-id-1048 .header-nav-wrapper li.header-main-menu-item:nth-child(2)::before,
body.single .header-nav-wrapper li.header-main-menu-item:nth-child(2)::before,
body.category .header-nav-wrapper li.header-main-menu-item:nth-child(2)::before,
body.page-id-56 .header-nav-wrapper li.header-main-menu-item:nth-child(3)::before,
body.page-id-540 .header-nav-wrapper li.header-main-menu-item:nth-child(4)::before,
body.page-id-324 .header-nav-wrapper li.header-main-menu-item:nth-child(5)::before,
body.page-id-1174 .header-nav-wrapper li.header-main-menu-item:nth-child(6)::before,
body.page-id-1738 .header-nav-wrapper li.header-main-menu-item:nth-child(6)::before,
body.page-id-1811 .header-nav-wrapper li.header-main-menu-item:nth-child(6)::before {
transform: scale(1);
}
@media screen and (max-width: 1400px) {
.header-name {padding-left: 10px;}
.header-main-menu-item {padding: 0 6px;}
.header-sub-menu {margin: 0 10px; padding: 5px 0;}
.header-entry .btn-topgra {width: 140px;}
.header-nav-wrapper li.header-main-menu-item::before {left: 0;}
}
@media screen and (max-width: 1400px) and (min-width: 1025px) {
.site-branding {padding-left: 15px;}
.header-name-br {display: block;}
}
@media screen and (max-width: 1100px) and (min-width: 1025px) {
.header-name {font-size: 24px;}
.header-entry .btn-topgra {width: 120px;}
}
@media screen and (min-width: 1025px) {
.mobmenu-icon, .mobmenu-wrapper {display: none;}
}
@media screen and (max-width: 1024px) {
header.off, .mobmenu-icon.off {top: -64px;}
.site-branding {
padding: 7px 0 7px 20px;
}
.site-branding img {
height: 50px;
width: auto;
}
.header-name {font-size: 24px;}
.header-nav-wrapper {padding-right: 64px;}
.header-nav-wrapper ul {display: none !important;}
.mobmenu-icon {
width: 64px;
height: 64px;
background-color: var(--base-color);
position: fixed;
right: 0;
top: 0;
cursor: pointer;
z-index: 999;
transition: 0.3s;
}
.mobmenu-icon span {
position: absolute;
display: inline-block;
width: 40px;
left: 12px;
height: 1px;
background-color: white;
transition: 0.4s;
}
.mobmenu-icon span:nth-child(1) {top: 24px;}
.mobmenu-icon span:nth-child(2) {top: 32px;}
.mobmenu-icon span:nth-child(3) {top: 40px;}
.mobmenu-icon.open span:nth-child(1) {top: 32px; transform: rotate(20deg)}
.mobmenu-icon.open span:nth-child(2) {opacity: 0;}
.mobmenu-icon.open span:nth-child(3) {top: 32px; transform: rotate(-20deg)}
.mobmenu-wrapper {
z-index: 998;
pointer-events: none;
position: fixed;
height: 100%;
width: min(100%, 480px);
top: 0;
right: 0;
overflow: hidden;
}
.mobmenu-wrapper.open {pointer-events: auto;}
.mobmenu-inner {
position: absolute;
top: 0;
right: -100%;
width: min(100%, 332px);
height: 100%;
transition: 0.5s;
background-color: white;
overflow-y: auto;
}
.mobmenu-wrapper.open .mobmenu-inner {right: 0;}
.mobmenu-mask {
position: absolute;
pointer-events: none;
top: 0;
right: 0;
width: 100vw;
height: 100%;
background-image: linear-gradient(to right bottom, #492C3B 0%, #212D3B 50%, #4B3623 100%);
opacity: 0;
transition: 0.3s;
z-index: 998;
}
.mobmenu-mask.open {opacity: 0.9;}
.mobmenu-content {
padding: 100px 40px 60px;
}
.header-main-menu-item {padding: 0; margin-bottom: 30px;}
.header-main-menu-item a {padding: 0; display: inline-block;}
.header-menu-en, .header-menu-jp {transform: none !important; display: block;}
.header-menu-en {font-size: 24px; line-height: 1.4;}
.header-main-menu > li:nth-child(4) > a > span.header-menu-en {font-size: 24px;}
.header-menu-jp {
position: static;
text-align: left;
transform: none;
line-height: 1;
color: #666666 !important;
}
.header-sub-menu {
width: 100%;
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.header-sub-menu-item {
width: 46%;
line-height: 30px;
font-size: 18px;
}
.mobmenu-entry .btn-bordgra {
width: 100%;
height: 70px;
margin-top: 40px;
}
.mobmenu-entry .btn-bordgra-inner {
justify-content: center;
align-content: center;
font-weight: 700;
}
.mobmenu-entry .btn-bordgra-inner span {
text-align: center;
width: 100%;
line-height: 1.2;
}
.mobmenu-entry .btn-bordgra-inner .int {font-size: 24px;}
.mobmenu-entry .btn-bordgra-inner .btn-entry-inner {font-size: 13px;}
}
@media screen and (max-width: 720px) {
.site-branding {
padding: 7px 0 7px 20px;
}
.header-name {font-size: 16px;}
.header-name-br {display: block;}
.header-entry .btn-topgra {font-size: 20px; width: clamp(64px, calc(100vw - 255px), 120px);}
}
@media screen and (max-width: 400px) {
.site-branding {padding-left: 10px;}
} footer {
background-image: var(--dark-grad);
color: white;
}
.footer-top {border-bottom: 1px solid white; padding: 25px 0;}
.footer-menu {
justify-content: space-between;
font-size: 14px;
}
.footer-menu a {
color: white;
position: relative;
display: block;
}
.footer-main-menu, .footer-sub-menu {
list-style-type: none;
padding: 0;
align-items: center;
padding: 5px 0;
}
.footer-main-menu {margin-left: -18px;}
.footer-main-menu li {padding: 0 18px; font-weight: 700; white-space: nowrap; overflow: hidden;}
.footer-sub-menu li:not(:last-child) {padding-right: 20px; overflow: hidden;}
.footer-sub-menu li:last-child a:hover {transform: scale(1.25);}
.footer-bottom {padding: 60px 0; }
.footer-main {justify-content: space-between;}
.footerL, .footerR {width: 49%; font-size: 14px;}
.footer-logo {margin-bottom: 25px;}
.footer-text-box:not(:last-child) {margin-bottom: 15px;}
.footer-midashi {font-weight: 700;}
.footer-text a {color: white !important;}
.footer-bold {font-weight: 700;}
.footer-copyright {font-size: 11px; margin-top: -20px;}
.footer-link-inner1 {
color: white !important;
transition: transform 0.3s cubic-bezier(.22,1,.36,1);
display: block;
}
.footer-link-inner2 {
color: white !important;
position: absolute;
left: 50%;
top: 50%;
transition: transform 0.3s cubic-bezier(.22,1,.36,1);
transform: translate(-50%, 12px);
text-align: center;
white-space: nowrap;
font-size: 16px;
}
.footer-menu a:hover .footer-link-inner1 {
transform: translate(0, -24px);
}
.footer-menu a:hover .footer-link-inner2 {
transform: translate(-50%, -12px);
}
@media screen and (max-width: 1400px) {
.footer-main-menu {width: 500px;}
.footer-main-menu li {padding-right: 25px;}
}
@media screen and (max-width: 1024px) {
.footer-top {padding: 15px 0;}
.footer-bottom {padding: 30px 0;}
.footer-main-menu {width: 100%;}
.footer-main-menu li {margin-bottom: 10px;}
.footer-sub-menu {width: 100%; justify-content: flex-end;}
}
@media screen and (max-width: 720px) {
.footerL, .footerR {width: 100%;}
.footerL {margin-bottom: 35px;}
.footer-logo {width: 100px; margin-bottom: 15px;}
.footer-copyright {margin-top: 30px;}
}
@media screen and (max-width: 640px) {
.footer-top {padding: 40px 0 10px;}
.footer-main-menu, .footer-sub-menu {padding: 0;}
.footer-main-menu {margin-left: 0;}
.footer-main-menu li {font-size: 16px; width: 33.3%; margin-bottom: 10px;}
.footer-sub-menu li {margin-bottom: 15px;}
.footer-main-menu li {padding: 0 !important;}
.footer-main-menu-item .footer-link-inner2 {
text-align: left;
transform: translate(0, 12px);
left: 0;
}
.footer-menu a:hover .footer-link-inner2 {
transform: translate(0, -12px);
}
}
@media screen and (max-width: 480px) {
.footer-menu {padding: 0 20px;}
.footer-main-menu {
flex-direction: column;
max-height: 156px;
justify-content: flex-start;
align-content: space-between;
}
.footer-main-menu li {width: 49%;}
.footer-sub-menu {margin-top: 5px;}
.footer-sub-menu li:not(:last-child) {
width: calc(100% - 30px);
}
.footer-sub-menu li:last-child {width: 30px;}
}  body.home:not(.end) {
position: fixed;
overflow-y: scroll;
}
.fv-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: max(100dvh, 56.25vw);
z-index: 9999;
background-color: white;
display: none;
pointer-events: none;
}
body.home.move .fv-wrapper {
background-color: transparent;
}
body.home.end .fv-wrapper {display: none;}
.fv-main {height: 100%;}
.fv-imgL, .fv-imgR {
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 1.2s cubic-bezier(0.5, 0, 0.75, 0);
}
body.home.move .fv-imgL {
transform: translateY(-100%);
}
body.home.move .fv-imgR {
transform: translateY(100%);
}
.fv-img-item {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.fv-img-item img {
object-fit: cover;
width: 100%;
height: 100%;
transform: scale(1.2) translateY(0);
position: relative;
z-index: 1;
}
.fv-imgL .fv-img-item img {
clip-path: polygon(0% 0%,100% 0%,0% 0%,0% 100%);
}
.fv-imgL .fv-img-item.before img {
position: relative;
z-index: 2;
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
animation-name: fvSlide_before_left;
animation-duration: 4.5s;
animation-fill-mode: forwards;
transition-timing-function: linear;
}
.fv-imgL .fv-img-item.active img {
position: relative;
z-index: 3;
animation-name: fvSlide_left;
animation-duration: 2s;
transition-timing-function: linear;
}
.fv-imgR .fv-img-item img{
clip-path: polygon(0% 100%,100% 100%,100% 100%,0% 100%);
}
.fv-imgR .fv-img-item.before img {
position: relative;
z-index: 2;
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
animation-name: fvSlide_before_right;
animation-duration: 3s;
animation-fill-mode: forwards;
transition-timing-function: linear;
}
.fv-imgR .fv-img-item.active img {
position: relative;
z-index: 3;
animation-name: fvSlide_right;
animation-duration: 2s;
transition-timing-function: linear;
}
.fv-mask {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.7;
mix-blend-mode: multiply;
background-image: var(--dark-grad);
z-index: 5;
transition: opacity 0.3s 1s;
}
body.home.move .fv-mask {
opacity: 0;
}
.fv-text {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
align-content: center;
z-index: 5;
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.fv-text img {
width: min(781px, 60%);
}
body.home.move .fv-text {
transform: translateY(-100%);
}
.fv-scroll {
position: absolute;
height: 100px;
width: 2px;
bottom: 0;
left: calc(50% - 1px);
background-color: white;
z-index: 5;
transition: opacity 0.5s 0.4s;
}
body.home.move .fv-scroll {
opacity: 0;
}
.fv-scroll::after {
position: absolute;
content: "";
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 13px;
height: 13px;
border-radius: 50%;
background-color: white;
animation: circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
0%{transform: translate(-50%, 0);}
100%{transform: translate(-50%, 87px);}
}
@keyframes cirlemovehide{
0%{opacity:0}
50%{opacity:1;}
80%{opacity:0.9;}
100%{opacity:0;}
}
@keyframes fvSlide_left {
0% {
clip-path: polygon(0% 0%,100% 0%,100% 0%,0% 0%);
transform: scale(1.2) translateY(0);
}
50% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
transform: scale(1.2) translateY(30px);
}
}
@keyframes fvSlide_before_left {
0% {
transform: scale(1.2) translateY(30px);
}
100% {
transform: scale(1.2) translateY(100px);
}
}
@keyframes fvSlide_left_sp {
0% {
clip-path: polygon(0% 0%,0% 0%,0% 100%,0% 100%);
transform: scale(1.2) translateX(0);
}
50% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
transform: scale(1.2) translateX(30px);
}
}
@keyframes fvSlide_before_left_sp {
0% {
transform: scale(1.2) translateX(30px);
}
100% {
transform: scale(1.2) translateX(100px);
}
}
@keyframes fvSlide_right {
0% {
clip-path: polygon(0% 100%,100% 100%,100% 100%,0% 100%);
transform: scale(1.2) translateY(70px);
}
50% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
transform: scale(1.2) translateY(0px);
}
}
@keyframes fvSlide_before_right {
0% {
transform: scale(1.2) translateY(0px);
}
100% {
transform: scale(1.2) translateY(-30px);
}
}
@keyframes fvSlide_right_sp {
0% {
clip-path: polygon(100% 0%,100% 0%,100% 100%,100% 100%);
transform: scale(1.2) translateX(70px);
}
50% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
transform: scale(1.2) translateX(0px);
}
}
@keyframes fvSlide_before_right_sp {
0% {
transform: scale(1.2) translateX(0px);
}
100% {
transform: scale(1.2) translateX(-30px);
}
}
@media screen and (max-width: 720px) {
.fv-imgL, .fv-imgR {
width: 100%;
height: 50%;
}
.fv-img-item img {transform: scale(1.2) translateX(0);}
.fv-imgL img{
clip-path: polygon(0% 0%,0% 0%,0% 100%,0% 100%);
}
.fv-imgL .fv-img-item.before img {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
animation-name: fvSlide_before_left_sp;
}
.fv-imgL .fv-img-item.active img {
animation-name: fvSlide_left_sp;
}
.fv-imgR img {
clip-path: polygon(100% 0%,100% 0%,100% 100%,100% 100%);
}
.fv-imgR .fv-img-item.before img {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
animation-name: fvSlide_before_right_sp;
}
.fv-imgR .fv-img-item.active img {
animation-name: fvSlide_right_sp;
}
.fv-text img {width: 80%;}
body.home.move .fv-imgL {
transform: translateX(-100%);
}
body.home.move .fv-imgR {
transform: translateX(100%);
}
} .slider-wrapper {
height: 56.25vw;
position: relative;
}
.slider-main {
width: 100%;
height: 100%;
position: relative;
}
.slider-item {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.slider-item.current {
z-index: 2;
}
.slider-item.before, .slider-item.init {
z-index: 1;
}
.slider-img {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
transform: scale(1.4);
background-position: center;
}
.slider-item.before .slider-img {transform: scale(1);}
#slide1 .slider-img {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/slide1.webp);
}
#slide2 .slider-img {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/slide2.webp);
}
#slide3 .slider-img {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/slide3.webp);
}
#slide4 .slider-img {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/slide4.webp);
}
#slide5 .slider-img {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/slide5.webp);
}
.slider-text {
position: absolute;
width: min(96%, 1840px);
left: 50%;
bottom: 40px;
transform: translateX(-50%);
}
.slider-item.current {
animation: heroSliderClip cubic-bezier(.785, .135, .15, .86) 1.5s forwards;
}
.slider-item.current .slider-img, .slider-item.start .slider-img {
animation: heroSliderScale cubic-bezier(.19, 1, .22, 1) 2.8s forwards .3s;
}
.slider-pagination-wrapper {
position: absolute;
width: 12px;
height: 100%;
align-content: center;
top: 0;
right: 30px;
z-index: 2;
}
.slider-pagination {
width: 12px;
height: 12px;
margin: 5px 0;
opacity: 0.8;
transition: opacity 0.3s;
background-color: white;
border-radius: 50%;
}
.slider-pagination.current {opacity: 1;}
@keyframes heroSliderClip {
0%{clip-path:polygon(150% 0,100% 0,100% 100%,90% 100%)}
100%{clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}
}
@keyframes heroSliderScale{
0%{transform:scale(1.4)}
100%{transform:scale(1)}
}
@media screen and (max-width: 1400px) {
.slider-wrapper {margin-top: 40px;}
}
@media screen and (min-width: 641px) {
.slider-text-sp {display: none;}
}
@media screen and (max-width: 640px) {
.slider-wrapper {
height: 100dvh;
margin-top: 0;
}
#slide1 .slider-img {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/slide1-sp.webp);
background-position: bottom;
}
.slider-text-pc {display: none;}
.slider-text {
bottom: 50px;
width: 90%;
}
.slider-pagination-wrapper {
width: 100%;
height: 8px;
justify-content: center;
top: auto;
right: auto;
left: 0;
bottom: 20px;
}
.slider-pagination {
width: 8px;
height: 8px;
margin: 0 3px;
}
} .top-banner-wrapper {
background-image: linear-gradient(to right bottom, #FBECF4 0%, #E7ECF4 50%, #FDF1E8 100%);;
padding: 30px 0;
}  .top-banner {justify-content: center;}
.top-banner-item {
width: min(600px, 48.5%);
height: 140px;
}
.top-banner-renewal > * {display: block;}
.top-banner-renewal {
background-image: var(--bg-grad);
padding: 3px;
position: relative;
}
.top-banner-renewal > * {display: block;}
.top-banner-renewal-inner {
border: 1px solid white;
padding: 10px 15px;
position: relative;
height: 100%;
z-index: 2;
}
.top-banner-renewal-title {
font-size: 48px;
font-weight: 700;
margin: 0 auto;
max-width: 520px;
color: white;
display: block;
line-height: 1.2;
}
.top-banner-renewal-text {
font-size: 16px;
font-weight: 700;
margin: 0 auto;
max-width: 520px;
line-height: 1.4;
color: white;
display: block;
}
.top-banner-renewal-link {
position: absolute;
right: 0;
bottom: 0;
width: 95px;
line-height: 30px;
font-size: 18px;
background-color: white;
color: #252525;
text-align: center;
}
.top-banner-renewal-link::before {
content: "";
position: absolute;
width: 20px;
height: 30px;
left: -20px;
border-width: 15px 10px;
border-color: transparent white white transparent;
border-style: solid;
}
.top-banner-renewal-hov {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
background-image: var(--dark-grad2);
color: white;
clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
z-index: 1;
transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 0;
}
.top-banner-renewal:hover .top-banner-renewal-hov {
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.top-countdown {
background-image: var(--dark-grad);
align-items: center;
padding: 10px 10px 10px 0;
}
.top-countdown-title {
color: white;
text-align: center;
font-weight: 700;
font-size: 16px;
line-height: 1.4;
width: min(35%, 165px);
}
.cd-title-num {font-size: 22px;}
.top-countdown-wrapper {
background-color: white;
border-radius: 4px;
font-weight: 700;
text-align: center;
padding: 10px 0;
width: max(65%, calc(100% - 165px));
}
.top-cd-item {
padding: 0 15px;
width: 24%;
}
.top-cd-item.cd-day {width: 28%;}
.cd-main-num {
font-size: clamp(48px, 3.4vw, 64px);
line-height: 1;
}
.cd-main-text {
font-size: 18px;
color: #666666;
}
.top-cd-item:not(:last-child) {
border-right: 1px dashed #707070;
}
@media screen and (max-width: 1280px) and (min-width: 1025px) {
.top-countdown {padding: 0 10px 10px;}
.top-countdown-title {
width: 100%;
text-align: left;
}
.top-countdown-title br {display: none;}
.top-countdown-wrapper {width: 100%;}
}
@media screen and (max-width: 1024px) {
.top-banner {justify-content: center;}
.top-banner-item {
width: min(600px, 100%);
height: auto;
}
.top-banner-renewal {
margin-bottom: 30px;
}
.cd-main-num {font-size: 64px;}
}
@media screen and (max-width: 720px) {
.top-banner-wrapper {padding: 20px 0;}
.top-banner-renewal {
margin-bottom: 20px;
}
.top-banner-renewal-title {font-size: 34px;}
.top-banner-renewal-text {font-size: 13px;}
.top-banner-renewal-link {
font-size: 12px;
line-height: 20px;
width: 70px;
}
.top-banner-renewal-link::before {
width: 16px;
height: 20px;
border-width: 10px 8px;
left: -16px;
}
.top-countdown {padding: 0 10px 10px;}
.top-countdown-title {
width: 100%;
text-align: left;
line-height: 1.8;
}
.top-countdown-title br {display: none;}
.top-countdown-wrapper {width: 100%; padding: 5px 0;}
.cd-main-num {font-size: 52px;}
.cd-main-text {font-size: 14px;}
}
@media screen and (max-width: 365px) {
.top-banner-renewal-title {font-size: 32px;}
.top-banner-renewal-text br {display: none;}
.top-banner-renewal-ib {display: inline-block;}
.cd-main-num {font-size: 42px;}
} .top-program-wrapper {
margin-top: 33px; display: none;
}
.top-program {
width: min(810px, 100%);
justify-content: space-between;
}
.top-program-item {
width: min(386px, 48%);
}
.top-program-item .btn-bordgra {height: 90px;}
.top-program-item:nth-child(1) .btn-bordgra-inner {
align-items: center;
padding: 0 28px;
}
.top-program-item:nth-child(2) .btn-bordgra-inner {
align-items: center;
padding: 0 20px;
}
.top-program-item .btn-program-title {flex-direction:column;}
.top-program-item .program-en {
font-size: 28px;
font-weight: 700;
line-height: 1.542;
}
.top-program-item .btn-bordgra-inner .program-jp {
font-size: 16px;
font-weight: 700;
}
.top-program-item:nth-child(1) > a > span > span.btn-program-title {
margin-left: 28px;
}
.btn-program-img {
position: relative;
width: 33px;
height: 50px;
}
.top-program-item:nth-child(2) > a > span > span.btn-program-title {
margin-left: 20px;
}
.btn-list-img{
position: relative;
width: 50px;
height: 40px;
}
.btn-program-img img,
.btn-list-img img {
transition: 0.3s;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.btn-program-img img:nth-child(2) {opacity: 0;}
.top-program-item .btn-bordgra:hover .btn-program-img img:nth-child(1) {opacity: 0;}
.top-program-item .btn-bordgra:hover .btn-program-img img:nth-child(2) {opacity: 1;}
@media screen and (max-width: 1024px) {
.top-program {
width: min(600px, 100%);
margin-inline: auto;
}
.top-program-item {
max-width: calc((100% - 10px) / 2);
width: min(286px, 100%);
}
}
@media screen and (max-width: 612px) {
.top-program-wrapper {
margin-top: 20px;
}
.top-program {
flex-direction: column;
align-items: center;
}
.top-program-item {
max-width: 100%;
width: 100%;
}
.top-program-item:nth-child(1) {
margin-bottom: 20px;
}
}  .top-info-wrapper {
padding-top: 100px;
}
.top-info {
justify-content: space-between;
align-items: flex-start;
width: min(80%, 1240px);
}
.top-news-box {
width: min(calc(100% - 300px), 70%);
}
.top-news-box.blur {animation-delay: 0.3s;}
.top-news-title {
justify-content: space-between;
align-items: center;
}
.top-news-fb {
font-size: 13px;
font-weight: 700;
line-height: 20px;
position: relative;
margin-bottom: 20px;
padding: 5px 0 5px 30px;
}
.top-news-fb::before {
content: "";
width: 20px;
height: 20px;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/fb-gray.svg);
display: inline-block;
position: absolute;
top: 5px;
left: 5px;
background-size: contain;
transition: 0.3s;
}
.top-news-fb:hover::before {transform: scale(1.25);}
.news-list {
padding: 0;
font-size: 16px;
}
.news-item {
padding: 25px 0;
border-bottom: 1px solid #DDDDDD;
align-items: center;
position: relative;
}
.news-date {
width: max(130px, 18.5%);
}
.new-badge {
font-size: 14px;
font-weight: 700;
text-align: center;
width: 30px;
line-height: 16px;
background-color: #D9006C;
color: white;
margin-left: 5px;
display: inline-block;
}
.news-title {
width: min(calc(100% - 130px), 81.5%);
}
.news-item::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: #252525;
transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.news-item:hover::after {
width: 100%;
}
.top-news-more {
justify-content: flex-end;
font-size: 18px;
margin-top: 15px;
}
.top-news-more a:hover {color: #252525 !important;}
.top-sponsor-box {
width: 280px;
background-color: #F2F2F2;
padding: 25px 20px 20px;
}
.top-sponsor-title {
align-items: center;
font-weight: 700;
margin-bottom: 10px;
}
.top-sponsor-en {
font-size: 28px;
padding-right: 15px;
}
.top-sponsor-jp {font-size: 14px;}
.top-sponsor-list {
list-style-type: none;
padding: 0;
}
.top-sponsor-item {
width: 100%;
height: 75px;
margin-bottom: 20px;
}
.top-sponsor-item a {
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
padding: 10px;
background-color: white;
transition: 0.3s;
}
.top-sponsor-item a:hover {
transform: scale(1.05);
box-shadow: 0px 7px 10px #0000001a;
}
.top-sponsor-item a img {
max-height: 100%;
max-width: min(190px, 92%);
}
@media screen and (min-width: 1025px) {
.top-sponsor-sp-title {display: none;}
.top-sponsor-item.dummy {display: none;}
}
@media screen and (max-width: 1024px) {
.top-info-wrapper {padding-top: 60px;}
.top-info {justify-content: center; width: 100%;}
.top-news-box {width: 80%; margin: 0 auto 60px;}
.top-sponsor-sp-title {margin-top: 30px; width: 80%;}
.top-sponsor-box {
width: 85%;
padding: 25px 20px 5px;
margin: 0 auto;
}
.top-sponsor-title {
display: none;
}
.top-sponsor-list {
justify-content: space-between;
margin: 0 auto;
}
.top-sponsor-item {width: 32%;}
.top-sponsor-item.dummy {visibility: hidden;}
}
@media screen and (max-width: 720px){
.top-info {width: 100%;}
.top-news-box {width: 90%; margin: 0;}
.top-news-fb {
font-size: 0;
padding-left: 26px;
line-height: 26px;
}
.top-news-fb::before {
width: 26px;
height: 26px;
left: auto;
right: 0;
}
.news-item {padding: 15px 0;}
.news-date, .news-title {width: 100%}
.top-sponsor-box {
width: 100%;
padding: 25px 5% 5px;
}
.top-sponsor-sp-title {width: 90%;}
.top-sponsor-item {width: 47.5%;}
} .top-runners-wrapper {
padding: 100px 0 150px;
}
.top-runners-main {margin-top: 10px;}
.top-runners-main1 {
justify-content: space-between;
}
.top-runners1-item {
width: calc((100% - 20px) / 3);
position: relative;
min-height: 250px;
}
.top-runners1-item span {display: block;}
.top-runners-bg {width: 100%; height: 100%;}
.top-runners-bg img {
object-fit: cover;
width: 100%;
height: 100%;
}
.top-runners-text {
position: absolute;
width: calc(100% - 8px);
height: calc(100% - 8px);
left: 4px;
top: 4px;
text-align: center;
color: white;
font-weight: 700;
z-index: 1;
border: 2px solid white;
padding-top: 10%;
}
.top-runners-icon {
width: clamp(25px, 10%, 50px);
margin: 0 auto;
}
.top-runners-text-en {
font-size: min(3.75vw, 48px);
line-height: 1.4;
}
.top-runners-text-jp {
font-size: 16px;
}
.top-runners-arrow  {
position: absolute;
right: 6px;
bottom: 6px;
width: 95px;
line-height: 30px;
font-size: 18px;
background-color: white;
color: #252525;
text-align: center;
z-index: 1;
}
.top-runners-arrow::before {
content: "";
position: absolute;
width: 20px;
height: 30px;
left: -20px;
border-width: 15px 10px;
border-color: transparent white white transparent;
border-style: solid;
}
.top-runners1-item::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
background-position: center bottom 19%, center;
background-size: calc(100% - 8px) auto, cover;
background-repeat: no-repeat;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.top-runners1-item:nth-child(1)::after {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/top-runners1-bg.svg), linear-gradient(to bottom right, #FC5E7B 0%, #D82368 100%);
}
.top-runners1-item:nth-child(2)::after {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/top-runners2-bg.svg), linear-gradient(to bottom right, #0088C4 0%, #003F96 100%);
}
.top-runners1-item:nth-child(3)::after {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/top-runners3-bg.svg), linear-gradient(to bottom right, #FAAC30 0%, #FF851F 100%);
}
.top-runners1-item.hover::after { transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
animation: runner 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
.top-runners1-item.leave::after {
transition: clip-path 0.8s cubic-bezier(0.19, 1, 0.22, 1);
animation: runner2 0.8s forwards cubic-bezier(0.19, 1, 0.22, 1);
}
@keyframes runner {
0% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}
99.9% {clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);}
100% {clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);}
}
@keyframes runner2 {
0% {clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);}
100% {clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);}
}
.top-runners-main2 {
margin: 30px auto 0;
justify-content: space-between;
}
.top-runners2-item {
width: calc((100% - 20px) / 3);
}
.top-runners2-item .btn-bordgra {height: 120px;}
.top-runners2-item .btn-bordgra-inner {
align-items: center;
justify-content: space-between;
padding: 0 25px;
}
.top-runners2-item .btn-entry-title {align-items: center;}
.top-runners2-item .btn-bordgra-inner .int {
font-size: 28px;
font-weight: 700;
line-height: 1.2;
margin-left: 10px;
}
.top-runners2-item .btn-bordgra-inner .btn-entry-inner {
font-size: 16px;
font-weight: 700;
}
.btn-entry-img {
position: relative;
width: 50px;
height: 45px;
}
.btn-entry-img img {
transition: 0.3s;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.btn-entry-img img:nth-child(2) {opacity: 0;}
.top-runners2-item .btn-bordgra:hover .btn-entry-img img:nth-child(1) {opacity: 0;}
.top-runners2-item .btn-bordgra:hover .btn-entry-img img:nth-child(2) {opacity: 1;}
.top-runners2-item:nth-child(2) .int {letter-spacing: 0.3em;}
@media screen and (max-width: 1280px) {
.top-runners2-item .btn-bordgra-inner {
padding: 0 15px;
}
.top-runners2-item .btn-bordgra-inner .int {margin-left: 5px;}
}
@media screen and (max-width: 1024px) {
.top-runners-wrapper {
padding: 90px 0;
}
.top-runners1-item {min-height: 0; height: min(205px, 22vw)}
.top-runners1-item::after {
background-position: center bottom 25%, center;
}
.top-runners-text {padding-top: 5%;}
.top-runners-text-jp {font-size: 14px;}
.top-runners-arrow {line-height: 24px; font-size: 14px; width: 75px;}
.top-runners-arrow::before {
width: 16px;
height: 24px;
border-width: 12px 8px;
left: -16px;
}
.top-runners2-item .btn-bordgra {height: 100px;}
.btn-entry-img {
width: 40px;
height: 36px;
}
}
@media screen and (max-width: 1024px) and (min-width: 601px) {
.top-runners2-item .btn-bordgra-inner {
justify-content: center;
align-content: center;
padding: 0;
}
.top-runners2-item .btn-bordgra-inner .btn-entry-inner {
text-align: center;
width: 100%;
}
.top-runners2-item:nth-child(2) .btn-entry-title {
padding-right: 1.5em;
}
}
@media screen and (min-width: 721px) {
.top-runners-bg img:last-child {display: none;}
.top-runners1-item:nth-child(2) {transition-delay: 0.5s;}
.top-runners1-item:nth-child(3) {transition-delay: 1s;}
}
@media screen and (max-width: 720px) {
.top-runners-wrapper {
padding: 60px 0;
}
.top-runners-main1 {justify-content: center;}
.top-runners1-item {
width: min(600px, 100%);
margin-bottom: 20px;
height: auto;
min-height: 190px;
}
.top-runners-bg img:first-child {display: none;}
.top-runners-text {padding-top: 3%;}
.top-runners-icon {width: 30px; margin-bottom: 5px;}
.top-runners-text-en {font-size: 38px; line-height: 1;}
.top-runners-text-jp {font-size: 16px;}
.top-runners-main2 {
max-width: 600px;
margin-top: 0;
}
.top-runners2-item .btn-bordgra {height: 80px;}
.top-runners2-item .btn-entry-img {width: 30px; height: 27px;}
.top-runners2-item .btn-bordgra-inner .btn-entry-inner {font-size: 14px;}
}
@media screen and (min-width: 601px) {
.top-runners2-item:nth-child(2) {transition-delay: 0.5s;}
.top-runners2-item:nth-child(3) {transition-delay: 1s;}
}
@media screen and (max-width: 600px) {
.top-runners-main2 {justify-content: center;}
.top-runners2-item {
width: 100%;
margin-top: 20px;
}
} .top-entry-line {
width: 100%;
height: 10px;
background-image: var(--bg-grad);
}
.top-entry-item {width: 50%;}
.top-entry-L {
flex-direction: column;
align-items: center;
justify-content: center;
}
.top-entry-title, .top-entry-text, .top-entry-text2 {
width: min(82%, 565px);
font-weight: 700;
}
.top-entry-year {
font-size: clamp(26px, 2.6vw, 32px);
width: min(82%, 565px);
font-weight: 700;
}
.top-entry-title {
font-size: clamp(28px, 2.65vw, 38px);
margin-bottom: 20px;
}
.top-entry-text, .top-entry-text2 {
font-size: 20px;
}
.top-entry-text2 {
border-top: 1px solid var(--base-color);
}
.top-entry-btn {
width: min(82%, 340px);
}
.top-entry-btn .btn-topgra {
font-size: 24px;
height: 90px;
margin-top: 30px;
font-weight: 700;
}
.entry-off .top-entry-btn .btn-topgra {
opacity: 0.4;
pointer-events: none;
margin-top: 70px;
}
.top-entry-R {min-height: 400px;}
.top-entry-R img {
width: 100%;
height: 100%;
object-fit: cover;
}  .entry-off {display: none;}
@media screen and (max-width: 1024px) {
.top-entry-item {width: 100%;}
.top-entry-L {padding: 30px 0 40px;}
.top-entry-year {font-size: 28px;}
.top-entry-title {font-size: 32px;}
.top-entry-R {min-height: 0; height: 300px;}
}
@media screen and (max-width: 720px) {
.top-entry-title, .top-entry-text, .top-entry-text2 {
width: min(90%, 460px);
}
.top-entry-year {width: min(90%, 460px);}
.top-entry-title {font-size: 28px;}
.top-entry-text, .top-entry-text2 {
font-size: 18px;
}
.top-entry-btn .btn-topgra {
font-size: 20px;
height: 80px;
}
.top-entry-R {height: 200px;}
} .info-body {padding-top: 190px;}
.info-wrapper {
padding: 105px 0 150px;
justify-content: space-between;
}
.info-side {width: 180px; margin-top: 25px;}
.info-main {
width: min(910px, calc(100% - 220px));
}
.info-side-title {
font-size: 24px;
font-weight: 400;
margin-bottom: 25px;
}
.archive-wrapper {
cursor: pointer;
font-size: 14px;
border-bottom: 1px solid #DDD;
position: relative;
}
.archive-wrapper::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: #252525;
transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.archive-wrapper:hover::after {width: 100%;}
.archive-year {
justify-content: space-between;
padding-bottom: 5px;
}
.archive-yearL {font-weight: 700; font-size: 16px;}
.archive-yearR {
position: relative;
padding-right: 15px;
}
.archive-yearR::after {
content: "";
position: absolute;
height: 100%;
width: 10px;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/archive-arrow.svg);
background-position: center;
background-repeat: no-repeat;
transition: transform 0.3s;
margin-left: 5px;
}
.archive-wrapper.open .archive-yearR::after {
transform: rotate(90deg);
}
.archive-cat-list {
padding: 0;
list-style-type: none;
opacity: 0;
transition: all 0.4s ease-out;
overflow: hidden;
--height: 0;
height: 0;
}
.archive-wrapper.open .archive-cat-list {
opacity: 1;
height: var(--height);
}
.archive-cat-item {
padding-bottom: 5px;
}
.pagination-wrapper {
justify-content: space-between;
margin-top: 25px;
}
.page-numbers {display: none;}
.page-numbers.prev, .page-numbers.next {
display: block;
font-size: 16px;
font-weight: 700;
position: relative;
color: #252525 !important;
}
span.page-numbers.prev, span.page-numbers.next {opacity: 0; visibility: hidden;}
.page-numbers.prev {padding-left: 35px;}
.page-numbers.next {padding-right: 35px;}
.page-numbers.prev::after, .page-numbers.next::after {
content: "";
width: 100%;
height: 6px;
left: 0;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.page-numbers.prev::after {
background-position: bottom right;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/page-prev.svg);
}
.page-numbers.next::after {
background-position: bottom left;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/page-next.svg);
}
a.page-numbers.prev:hover::after {
animation: arrow2 0.5s linear forwards;
}
a.page-numbers.next:hover::after {
animation: arrow 0.5s linear forwards;
}
.single-main {padding-bottom: 140px;}
.single-title-box {border-bottom: 1px solid #DDDDDD; margin-bottom: 35px;}
.single-title {
font-size: 24px;
font-weight: 700;
padding: 10px 0 15px;
}
.single-content > * {margin-bottom: 2.4em;}
.single-content {margin-bottom: 80px;}
.single-content a {text-decoration: underline !important;}
.single-content figcaption {font-style: normal;}
.single-back-link a {
font-weight: 700;
position: relative;
color: #252525 !important;
display: inline-block;
padding-left: 35px;
}
.single-back-link a::after {
content: "";
width: 100%;
height: 6px;
left: 0;
bottom: 0;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
background-position: bottom right;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/single-arrow.svg);
}
.single-back-link a:hover::after {
animation: arrow2 0.5s linear forwards;
}
@media screen and (max-width: 1024px) {
.info-body {padding-top: 150px;}
.info-wrapper {padding: 90px 0;}
.info-side {width: 150px;}
.info-main {width: calc(100% - 180px);}
.single-main {padding-bottom: 90px;}
}
@media screen and (max-width: 720px) {
.info-body {padding-top: 115px;}
.info-wrapper {padding: 60px 0 75px;}
.info-side {
width: 100%;
margin: 0 0 25px;
}
.info-side-title {font-size: 20px; margin-bottom: 15px;}
.info-main {
width: 100%;
}
.archive-wrapper {
background-color: #f2f2f2;
padding: 13px 10px 3px;
border: 0;
}
.single-main {padding-bottom: 80px;}
.single-title-box {margin-bottom: 20px;}
.single-title {font-size: 20px; padding: 5px 0;}
.single-content {margin-bottom: 40px;}
.single-content > * {margin-bottom: 1.5em;}
} .sub-faq-wrapper {margin: 150px 0;}
.faq-item-wrapper {margin-top: 40px;}
.faq-item {
border-bottom: 1px solid #ddd;
position: relative;
}
.faq-item::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0;
height: 1px;
background-color: #252525;
transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.faq-item.hover::after {
width: 100%;
}
.faq-q {
align-items: flex-start;
position: relative;
padding: 30px 50px 30px 0;
cursor: pointer;
}
.faq-q::after {
content: "";
position: absolute;
height: 30px;
top: 30px;
width: 20px;
right: 25px;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/faq-arrow.svg);
background-position: center;
background-size: 12px auto;
background-repeat: no-repeat;
transition: 0.3s;
}
.faq-q.open::after {
transform: rotate(180deg);
}
.faq-q-icon {
width: 30px;
line-height: 30px;
text-align: center;
background-image: var(--dark-grad);
color: white;
font-size: 18px;
font-weight: 700;
margin-right: 20px;
}
.faq-q-title {
font-weight: 700;
width: calc(100% - 50px);
}
.faq-a {
padding: 30px 50px;
background-color: #f2f2f2;
display: none;
}
.faq-a-inner {align-items: center;}
.faq-qr {margin-right: 15px; max-width: 115px;}
.faq-qr-bold {font-weight: 700;}
.faq-qr-link {margin-left: 0.5em;}
.faq-a.faq-a-parking .sub-parking-text{font-size: 16px;width: calc(100% - 100px);}
.sub-faq-wrapper .sub-parking-text-box {margin-top: 0px;}
@media screen and (max-width: 1100px) {
.faq-a.faq-a-parking .sub-parking-img{margin-top: 0;}
.faq-a.faq-a-parking .sub-parking-text{padding-right: min(20px, 1vw);}
}
@media screen and (max-width: 1024px) {
.sub-faq-wrapper {margin: 90px 0 90px;}
.faq-a {padding: 30px;}
}
@media screen and (max-width: 720px) {
.sub-faq-wrapper {margin-bottom: 75px;}
.faq-item-wrapper {margin-top: 25px;}
.faq-q {padding: 30px 30px 30px 0;}
.faq-q::after {right: 0;}
.faq-qr {display: none;}
.faq-a {font-size: 14px; padding: 20px;}
.faq-a.faq-a-parking .sub-parking-text {font-size: 14px;width: 100%;padding-right: 0;
}}
} .sub-record-top {margin-top: 100px;}
.record-main-title {
font-size: 32px;
font-weight: 700;
margin: 100px 0 50px;
}
.sub-record-btn-title-flex {justify-content: space-between;}
.sub-record-btn-title-flex .sub-course-btn-title-wrap {
width: min(18.5%, 216px);
font-size: 20px;
font-weight: 700;
margin-top: 0 !important;
}
.sub-record-wrapper {
padding-top: 50px;
}
.sub-record-list-wrapper {margin-top: 50px;}
.sub-record-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
}
.sub-record-btn {
width: min(23.5%, 280px);
height: 80px;
margin-bottom: 40px;
}
.sub-record-btn a {height: 100%;}
.sub-record-btn .btn-bordgra-inner {
justify-content: center;
align-items: center;
align-content: center;
font-size: 18px;
font-weight: 700;
}
.sub-record-bottom-wrapper {
margin: 40px 0 150px;
}
.sub-record-bottom1 {
background-image: var(--btn-grad);
padding: 10px;
}
.sub-record-bottom1-inner {
background-color: white;
padding: 20px 20px 35px;
}
.sub-record-bottom1-title {
font-size: 18px;
font-weight: 700;
}
.sub-record-bottom1-text {
font-size: 14px;
margin: 10px 0 15px;
}
.sub-record-bottom1-links a {
font-size: 16px;
font-weight: 700;
padding-left: 15px;
margin-right: 30px;
position: relative;
display: inline-block;
}
.sub-record-bottom1-links a::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
background-color: #ddd;
border-radius: 50%;
left: 0;
top: 11px;
}
.sub-record-bottom1-links a::after {
content: "";
position: absolute;
bottom: 2px;
left: 15px;
width: 0;
height: 1px;
background-color: #252525;
transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.sub-record-bottom1-links a:hover::after {
width: calc(100% - 15px);
}
.sub-bottom-indent {
display: inline-block;
padding-left: 0.5em;
} .sub-course-btn-title-wrap.btn-title-wrap6 {
width: min(16%, 198px);
font-size: clamp(17px, 1vw, 20px);
}
.sub-course-btn-title-wrap.btn-title-wrap3 {
width: min(33%, 400px);
}
.sub-record-bottom1-links.links2,
.sub-record-bottom2-qr {
margin-top: 20px;
align-items: flex-start;
}
.sub-record-bottom1-links.links2 a {text-decoration: none !important;}
.sub-record-bottom2-qr-img {
width: min(113px, 20%);
border: 1px solid black;
}
.sub-record-bottom2-qr-text {
width: 80%;
font-size: 16px;
padding-left: 1em;
}
.sub-record-bottom2-qr-text.text2 {
margin-top: 20px;
padding-left: 0;
}
.sub-record-bottom2-qr-text.text2 a { }
.bold {
font-weight: bold;
} .sub-record-bottom2 {
padding-top: 80px;
}
.sub-record-bottom2 span {display: block;}
.sub-gallery-link {
position: relative;
display: block;
}
.sub-gallery-bg {width: 100%; height: 147px;}
.sub-gallery-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.sub-gallery-text {
position: absolute;
color: white;
left: 30px;
top: 40px;
}
.sub-gallery-text-en {
font-size: 48px;
font-weight: 700;
line-height: 1;
}
.sub-gallery-text-jp {
font-size: 20px;
font-weight: 700;
}
.sub-gallery-arrow {
position: absolute;
font-size: 18px;
color: white;
right: 20px;
bottom: 30px;
z-index: 1;
}
.sub-gallery-link:hover .sub-gallery-arrow::after {animation: arrow 0.5s linear forwards;}
.sub-record-past-list {
padding-top: 80px;
list-style-type: none;
padding: 60px 0 0; }
.sub-record-past-item {margin-right: 30px; width: 300px;}
.sub-record-past-item a {
font-size: 16px;
font-weight: 700;
padding-left: 15px;
position: relative;
display: inline-block;
}
.sub-record-past-item a::before {
content: "";
position: absolute;
width: 8px;
height: 8px;
background-color: #ddd;
border-radius: 50%;
left: 0;
top: 11px;
}
.sub-record-past-item a::after {
content: "";
position: absolute;
bottom: 2px;
left: 15px;
width: 0;
height: 1px;
background-color: #252525;
transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.sub-record-past-item a:hover::after {
width: calc(100% - 15px);
}
@media screen and (min-width: 1551px) {
.sub-record-btn:not(:nth-child(4n)) {
margin-right: 40px;
}
}
@media screen and (max-width: 1550px) and (min-width: 1025px) {
.sub-record-btn:not(:nth-child(4n)) {
margin-right: 2%;
}
}
@media screen and (max-width: 1200px) and (min-width: 1025px) {
.sub-record-btn-title-flex .sub-course-btn-title-wrap {font-size: 19px;} .sub-record-btn-title-flex .sub-course-btn-title-wrap.btn-title-wrap6 {
font-size: 16px;
} }
@media screen and (max-width: 1024px) {
.sub-record-top {margin-top: 60px;}
.record-main-title { font-size: 28px;
}
.sub-record-btn-title-flex {justify-content: flex-start;}
.sub-record-btn-title-flex .sub-course-btn-title-wrap {
width: 32%;
} .sub-record-btn-title-flex .sub-course-btn-title-wrap.btn-title-wrap6 {
width: 30%;
} .sub-record-btn-title-flex .sub-course-btn-title-wrap:not(:nth-child(3)) {
margin-right: 2%;
}
.sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(4), 
.sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(5),
.sub-course-btn-title-wrap:nth-child(6) {margin-top: 30px !important;} .sub-record-btn {width: 32%;}
.sub-record-bottom-wrapper {
margin-bottom: 90px;
}
.sub-record-bottom2, .sub-record-past-list {padding-top: 40px;}
}
@media screen and (max-width: 1024px) and (min-width: 641px) {
.sub-record-btn:not(:nth-child(3n)) {
margin-right: 2%;
}
}
@media screen and (min-width: 721px) {
.sub-gallery-bg img:last-child {display: none;}
}
@media screen and (max-width: 720px) {
.sub-record-top {margin-top: 25px;}
.record-main-title {font-size: 24px; margin: 60px 0 40px;}
.sub-record-wrapper {padding-top: 30px;}
.sub-record-btn-title-flex .sub-course-btn-title-wrap {font-size: 16px;}
.sub-record-title {font-size: 20px; margin-bottom: 15px;}
.sub-record-list-wrapper {margin-top: 30px;}
.sub-record-btn {height: 60px; margin-bottom: 25px;}
.sub-record-btn .btn-bordgra-inner {
font-size: 16px;
}
.sub-record-bottom-wrapper {margin-bottom: 75px;}
.sub-record-bottom1-inner {padding: 15px;}
.sub-gallery-bg {height: auto;}
.sub-gallery-bg img:first-child {display: none;}
.sub-gallery-text {
top: 50%;
transform: translateY(-50%);
left: 15px;
}
.sub-gallery-text-en {font-size: 38px;}
.sub-gallery-text-jp {font-size: 16px;}
.sub-gallery-arrow {right: 15px; bottom: 15px;}
.sub-record-past-item {width: 100%; margin: 0;}
.sub-record-past-item a {font-size: 14px;}
.sub-record-bottom2-qr-img {
display: none;
}
.sub-record-bottom2-qr-text {width: 100%; padding: 0;  font-size: 14px;}
}
@media screen and (min-width: 641px) {
.sub-gallery-text-jp br.br-sp {display: none;}
}
@media screen and (max-width: 640px) {
.sub-record-list {justify-content: space-between;}
.sub-record-btn {width: 48%;}
}
@media screen and (max-width: 480px) {
.sub-record-btn-title-flex {justify-content: space-between;}
.sub-record-btn-title-flex .sub-course-btn-title-wrap,
.sub-record-btn-title-flex .sub-course-btn-title-wrap.btn-title-wrap6 {
width: 48%;
margin-right: 0 !important;
}
.sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(3),
.sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(4), 
.sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(5),
.sub-course-btn-title-wrap:nth-child(6) {margin-top: 20px !important;}
.sub-record-bottom1-links a {margin: 0;} .sub-record-bottom1-links.links2 a {margin-right: 30px;}
.sub-record-bottom2-qr {
justify-content: center;
}
.sub-record-bottom2-qr-img {
width: 70%;
}
.sub-record-bottom2-qr-text {
width: 100%;
} }  .elementor-element.bg, .sub-bg-wrapper {
position: absolute;
z-index: -1;
pointer-events: none;
width: 100%;
height: 100%;
}
.sub-bg-wrapper {
margin-top: 90px;
overflow: hidden;
}
.bg1, .bg2, .bgR, .bgL {position: absolute;}
.bg1 {width: min(17.7%, 340px);}
.bg2 {width: min(16.7%, 320px);}
.bgL {left: 0;}
.bgR {right: 0;}
@media screen and (max-width: 720px) {
.elementor-element.bg, .sub-bg-wrapper {display: none;}
} .top-bg1 {top: 100px;}
.top-bg2 {top: 28%;}
.top-bg3 {bottom: 17%;} .sub-bg1 {top: max(5.1%, 310px);}
.sub-bg2 {top: max(10.7%, 645px);}
.sub-bg3 {top: max(19.5%, 1170px);}
.sub-bg4 {top: max(28.1%, 1690px);}
.sub-bg5 {top: max(33.6%, 2020px);}
.sub-bg6 {top: max(39.1%, 2350px);}
.sub-bg7 {top: max(48%, 2880px);}
.sub-bg8 {top: max(56.6%, 3400px);}
.sub-bg9 {top: max(62.1%, 3730px);}
.sub-bg10 {top: max(67.7%, 4065px);}
.sub-bg11 {top: max(76.5%, 4590px);}
.sub-bg12 {top: max(85.1%, 5110px);} .top-news-fb,
.top-news-box .news-list,
.top-news-more,
.top-runners1-item:nth-child(1),
.sub-course-btn-title-wrap:nth-child(2),
.sub-course-map,
.sub-record-list {
transition-delay: 0.3s;
}
.sub-course-btn-title-wrap:nth-child(3) {
transition-delay: 0.6s;
}
.sub-course-btn-title-wrap:nth-child(4) {
transition-delay: 0.9s;
}
.sub-course-btn-title-wrap:nth-child(5) {
transition-delay: 1.2s;
}
.sub-course-btn-title-wrap:nth-child(6) {
transition-delay: 1.5s;
}
.info-side, .info-main {
transition-delay: 3s !important;
}
.single-title-box {
transition-delay: 2s !important;
}
.single-content,
.single-back-link {
transition-delay: 2.3s !important;
}
@media screen and (min-width: 1100px) {
.sub-service-content-right {
transition-delay: 0.3s;
}
}
@media screen and (min-width: 1025px) {
.top-countdown,
.top-runners2-item:nth-child(2) {
transition-delay: 0.3s;
}
.top-sponsor-box,
.top-runners1-item:nth-child(2),
.top-runners2-item:nth-child(3) {
transition-delay: 0.6s;
}
.top-runners1-item:nth-child(3) {
transition-delay: 0.9s;
}
}
@media screen and (min-width: 721px) {
.sub-hotel-content {
transition-delay: 0.3s;
}
.top-runners1-item:nth-child(2) {
transition-delay: 0.6s;
}
.top-runners1-item:nth-child(3) {
transition-delay: 0.9s;
}
.info-main {
transition-delay: 3.3s !important;
}
}
@media screen and (max-width: 720px) {
.sub-outline-bunner {
transition-delay: 4s !important;
clip-path: none !important;
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.on .sub-outline-bunner {opacity: 1;}
}
@media screen and (min-width: 601px) {
.top-runners2-item:nth-child(2) {
transition-delay: 0.3s;
}
.top-runners2-item:nth-child(3) {
transition-delay: 0.6s;
}
} .text404-wrapper {
padding: 350px 0 300px;
}
.img404 {text-align: center;}
.text404 {
font-size: 24px;
font-weight: 700;
text-align: center;
margin-top: 5px;
}
.link404 {
font-size: 16px;
font-weight: 700;
text-align: center;
margin-top: 50px;
}
.link404 a::after {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/arrow404.svg);
bottom: -3px;
}
.error404 .sub-bg-wrapper {
margin-top: -150px;
}
@media screen and (max-width: 1024px) {
.text404-wrapper {
padding: 200px 0 150px;
}
}
@media screen and (max-width: 720px) {
.text404-wrapper {
padding: 150px 0 100px;
}
.text404 {
font-size: 18px;
}
.img404 {
width: max(280px, 80%);
margin: 0 auto;
}
} .wp-block-file:not(.wp-element-button) {
font-size: 16px;
}
.page-id-2291 .e-con,
.page-id-2318 .e-con {
width: 100%;
}
.page-id-2291 .e-con>.e-con-inner,
.page-id-2318 .e-con>.e-con-inner {
max-width: 1920px;
width: 100%;
}
.sub-half-course-video iframe {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}
.record2024 .sub-record-btn-title-flex .sub-course-btn-title-wrap {
width: calc((100% / 4) - 5px * 3);
}
@media screen and (max-width: 1024px) {
.record2024 .sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(4) {
margin-top: 0px !important;
}
.record2024 .sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(3) {
margin-right: 2%;
}
.record2024 .sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(4) {
margin-right: 0;
}
}
@media screen and (max-width: 570px) {
.record2024 .sub-record-btn-title-flex .sub-course-btn-title-wrap {
width: calc((100% / 2) - 2%);
}
.record2024 .sub-record-btn-title-flex .sub-course-btn-title-wrap:nth-child(n + 3){
margin-top: 30px!important;
}
} .sub-outline-bunner .btn-bordgra-bg {
border: 5px solid;
border-image: var(--bg-grad) 1;
}
.sub-outline-bunner .btn-bordgra {height: 80px;}
.sub-outline-bunner:nth-child(1) .btn-bordgra-inner {
align-items: center;
padding: 0 28px;
}
.sub-outline-bunner:nth-child(2) .btn-bordgra-inner {
align-items: center;
justify-content: center;
padding: 0;
}
.sub-outline-bunner .btn-program-title {flex-direction:column;}
.sub-outline-bunner .program-en {
font-size: 28px;
font-weight: 700;
line-height: 1.2;
}
.sub-outline-bunner .btn-bordgra-inner .program-jp {
font-size: 16px;
font-weight: 700;
}
.sub-outline-bunner .btn-bordgra-inner .program-jp br {
display: none;
}
.sub-outline-bunner:nth-child(1) > a > span > span.btn-program-title {
margin-left: 28px;
}
.sub-outline-bunner .btn-program-img {
position: relative;
width: 41px;
height: 38px;
}
.sub-outline-bunner:nth-child(2) > a > span > span.btn-program-title {
margin-left: 15px;
}
.sub-outline-bunner .btn-program-img img{
transition: 0.3s;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.sub-outline-bunner .btn-program-img img:nth-child(2) {opacity: 0;}
.sub-outline-bunner .btn-bordgra:hover .btn-program-img img:nth-child(1) {opacity: 0;}
.sub-outline-bunner .btn-bordgra:hover .btn-program-img img:nth-child(2) {opacity: 1;}
@media screen and (max-width: 1024px) {
.sub-outline-bunner .program-en {
font-size: 2.74vw;
}
.sub-outline-bunner .btn-bordgra-inner .program-jp {
font-size: 1.56vw;
}
.sub-outline-bunner .btn-program-img {
position: relative;
width: max(34px, 4vw);
height: max(32px, 3.7vw);
}
.sub-outline-bunner:nth-child(2) > a > span > span.btn-program-title {
margin-left: 5.5%;
}
}
@media screen and (max-width: 720px) {
.sub-outline-bunner .btn-bordgra {height: 60px;}
.sub-outline-bunner .btn-bordgra-bg {
border: 3px solid;
border-image: var(--bg-grad) 1;
border-right: none;
}
.sub-outline-bunner .program-en {
display: none;
}
.sub-outline-bunner .btn-bordgra-inner .program-jp {
font-size: 14px;
line-height: 1.5;
}
.sub-outline-bunner .btn-bordgra-inner .program-jp br {
display: block;
}
}
@media screen and (max-width: 400px) {
.sub-outline-bunner .btn-program-img {
position: relative;
width: 8.5vw;
height: 8.8vw;
}
.sub-outline-bunner .btn-bordgra-inner .program-jp {
font-size: 3.5vw;
line-height: 1.5;
}
} #slide1 .slider-img.slider-img2025 {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/2025/slide1-2025.webp);
}
@media screen and (max-width: 640px) {
#slide1 .slider-img.slider-img2025 {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/2025/slide1-2025-sp.webp);
background-position: top;
}
} footer .footer_banner_box {
gap: 10px;
display: flex;
position: relative;
display: flex;
align-items: flex-start;
width: 95%;
justify-content: flex-start;
}
footer .footer_banner_box .img_box {
position: relative;
width: initial;
width: fit-content;
min-width: initial;
max-width: initial;
height: 100%;
height: 60px;
}
footer .footer_banner_box .img_box a {
display: block;
height: 100%;
}
footer .footer_banner_box .img_box a:hover {
opacity: .7;
}
footer .footer_banner_box .img_box a img {
height: 100%;
object-fit: contain;
}
@media screen and (min-width: 721px) and (max-width: 1024px) {
footer .footer_banner_box {
width: 90%;
flex-wrap: wrap;
}
footer .footer_banner_box .img_box {
height: 35px;
}
}
@media screen and (max-width: 720px) {
footer .footer_banner_box {
width: 100%;
flex-wrap: wrap;
}
footer .footer_banner_box .img_box {
height: 46.7px;
}
}.sub-header-wrapper {
padding-top: 90px;
}
.sub-int {
font-weight: bold;
font-size: 80px;
letter-spacing: 0.03em;
line-height: 1;
}
.sub-midashi-jp {
font-weight: bold;
font-size: 20px;
line-height: 1.8;
}
.sub-list {
padding-inline-start: 14px;
list-style: none;
}
.sub-item {
position: relative;
line-height: 1.8;
}
.sub-item-b {
font-weight: bold;
}
.sub-item::marker {
display: none; }
.sub-item::before {
position: absolute;
content: "";
top: 12px;
left: -12px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #DDDDDD;
}
.sub-item.asterisk{
text-indent: -1em;
padding-left: 0em;
}
.sub-item.asterisk::before{
display: none;
}
.sub-course-wrapper {
margin-bottom: 150px;
}
.sub-course-wrapper .sub-parking-text {
width: 100%;
}
.sub-sponsor-box {
background-color: #f2f2f2;
padding: 20px 0 20px;
}
.sub-sponsor-inner {
width: min(1240px, 80%);
margin: 0 auto;
}
.sub-sponsor-en {
font-weight: bold;
font-size: 28px;
line-height: 1.542;
padding-right: 12px;
}
.sub-sponsor-jp {
font-weight: bold;
font-size: 14px;
line-height: 1.8;
}
.sub-sponsor-list {
margin-top: 11px;
padding-left: 0; justify-content: space-between;
}
.sub-sponsor-item {
list-style: none;
width: 18.7%;
height: 75px;
margin-bottom: 20px;
}
.sub-sponsor-item a {
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
padding: 10px;
transition: 0.3s;
background-color: #fff;
}
.sub-sponsor-item a:hover {
transform: scale(1.05);
box-shadow: 0px 7px 10px #0000001a;
}
.sub-sponsor-item a img {
max-height: 100%;
max-width: min(190px, 92%);
} @media screen and (min-width: 1301px) {
.sub-sponsor-item.dummy {display: none;}
}
@media screen and (max-width: 1300px) {
.sub-sponsor-item {width: 32%;}
.sub-sponsor-item.dummy {visibility: hidden;}
}
@media screen and (max-width: 1024px) {
.sub-int {
font-size: 60px;
}
.sub-course-wrapper {margin-bottom: 90px;}
}
@media screen and (max-width: 720px) {
.sub-int {
font-size: 40px;
}
.sub-midashi-jp {
font-size: 16px;
}
.sub-item {
margin-top: 0;
font-size: 14px;
}
.sub-item::before {
top: 10px;
}
.sub-sponsor-inner {
width: 90%;
}
.sub-sponsor-list {
row-gap: 20px;
justify-content: space-between;
padding-bottom: 20px;
}
.sub-sponsor-item {
width: 47.5%;
margin-bottom: 0;
}
} .sub-outline-inner {
width: min(1260px, 80%);
margin: 0 auto;
}
.sub-outline {
margin-top: 100px;
justify-content: space-between;
}
.sub-outline-bunner {
width: min(45%, 380px);
height: 100%;
margin-top: 25px;
} .sub-outline-bunner-sp {
display: none;
}
.sub-outline-content {
padding-top: 150px;
}
.sub-outline-box {
width: min(1240px, 100%);
padding: 40px 0; border-bottom: 1px solid #ddd;
justify-content: space-between;
position: relative;
}
.sub-outline-title {
width: 212px;
height: 30px;
font-weight: bold;
font-size: 16px;
line-height: 1.8;
text-align: center;
color: #fff;
background: linear-gradient(to right, #492c3b 0%, #212d3b 52.22%, #4b3623 100%);
margin-right: 8%;
}
.sub-outline-item {
margin-top: 10px;
}
.sub-outline-text.bold,
.sub-outline-item {
font-size: 16px;
letter-spacing: 0.05em;
line-height: 1.8; width: calc(92% - 212px);
}
.sub-outline-text.bold {
font-size: 24px;
font-weight: bold;
}
.sub-outline-map,
.sub-outline-list { width: calc(92% - 212px);
}
.sub-outline-map iframe {
margin-top: 23px;
width: 100%;
min-height: 310px;
}
.sub-outline-item::marker {
width: 8px;
color: #DDDDDD;
}
.sub-outline-item-pink {
color: #E04793;
}
.bold {
font-weight: bold;
}
.sub-outline-list-wrap { width: calc(92% - 212px);
}
.sub-outline-course-detail {
width: 100%;
display: inline-flex;
justify-content: flex-end;
position: relative;
}
.sub-outline-course-detail a:hover {
color: #252525 !important;
}
.sub-course-button {
font-weight: bold;
font-size: 16px;
padding: 0 37px 5px 5px;
}
.sub-course-button::after {
content: "";
width: 100%;
height: 6px;
left: 0;
bottom: 5px;
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/course/sub-course-link-arrow.svg);
background-position: bottom left;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}
.sub-outline-list {
padding-inline-start: 8px;
}
.sub-outline-text-s {
margin-top: 18px; line-height: 1.8;
}
.sub-outline-teble-box,
.sub-outline-text-box { width: calc(92% - 212px);
}
.sub-outline-table-content {
margin-top: 12px;
}
.sub-support-list .sub-item:not(:last-child) {
margin-bottom: 20px;
}
.outline-ib1 {display: inline-block; width: 7em;}
.outline-ib2 {display: inline-block; width: 3em;} th {
background-color: #FDF1E8 !important;
}
#tablepress-1 td,#tablepress-4 td,
#tablepress-2 td,#tablepress-5 td,
#tablepress-3 td,#tablepress-6 td,
#tablepress-1 th,#tablepress-4 th,
#tablepress-2 th,#tablepress-5 th,
#tablepress-3 th,#tablepress-6 th {
border: 1px solid #666666;
}
.sub-outline-table1-content { width: calc(92% - 212px);
overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none;
} .sub-outline-table1-content::-webkit-scrollbar {
display: none;
}
.sub-outline-table2-content,
.sub-outline-table3-content {
overflow-x: scroll; -ms-overflow-style: none; scrollbar-width: none;
} .sub-outline-table2-content::-webkit-scrollbar,
.sub-outline-table3-content::-webkit-scrollbar {
display: none;
}
.sub-outline-table3-content {
margin-top: 10px;
}
#tablepress-1,#tablepress-4,
#tablepress-2,#tablepress-5,
#tablepress-3,#tablepress-6  {
width: 928px;
margin-left: 0 !important;
margin-right: 0 !important;
}
#tablepress-1 th,#tablepress-4 th,
#tablepress-1 td,#tablepress-4 td,
#tablepress-1 td.column-1,#tablepress-4 td.column-1,
#tablepress-1 td.column-5,#tablepress-4 td.column-5 {
font-size: 16px;
line-height: 1.8;
color: var(--base-color);
}
#tablepress-1 th,#tablepress-4 th,
#tablepress-3 th,#tablepress-6 th,
#tablepress-1 td.column-1,#tablepress-4 td.column-1  {
font-weight: bold;
text-align: center;
}
#tablepress-1 td,#tablepress-4 td,
#tablepress-2 td,#tablepress-5 td,
#tablepress-3 td,#tablepress-6 td  {
background-color: white;
}
#tablepress-1 tr.row-2 .column-2,#tablepress-4 tr.row-2 .column-2,
#tablepress-1 tr.row-2 .column-4,#tablepress-4 tr.row-2 .column-4,
#tablepress-1 tr.row-4 .column-3,#tablepress-4 tr.row-4 .column-3,
#tablepress-1 tr.row-4 .column-4,#tablepress-4 tr.row-4 .column-4,
#tablepress-1 tr.row-6 .column-2,#tablepress-4 tr.row-6 .column-2,
#tablepress-1 tr.row-6 .column-4,#tablepress-4 tr.row-6 .column-4 {
background-color: #fff;
}
#tablepress-1 .row-3 .column-2,#tablepress-4 .row-3 .column-2 {
vertical-align: middle;
font-size: 14px;
text-align: center;
}
#tablepress-1 .row-5 .column-4,#tablepress-4 .row-5 .column-4 {
padding-right: 5px;
}
#tablepress-2 td.column-1,#tablepress-5 td.column-1,#tablepress-5 .row-1 td.column-2,#tablepress-5 .row-1 td.column-3,#tablepress-5 .row-1 td.column-5 {
font-weight: bold;
vertical-align: middle;
}
#tablepress-2 td.column-2,#tablepress-5 td.column-2 {
vertical-align: middle;
}
#tablepress-2 td.column-3,
#tablepress-2 td.column-4,#tablepress-5 td.column-4,
#tablepress-2 td.column-5,#tablepress-5 td.column-5 {
text-align: center;
vertical-align: middle;
}
#tablepress-5 .row-2 td.column-3,#tablepress-5 .row-7 td.column-3,#tablepress-5 .row-11 td.column-3,#tablepress-5 .row-16 td.column-3,#tablepress-5 .row-20 td.column-3,#tablepress-5 .row-23 td.column-3{
text-align: center;
vertical-align: middle;
}
#tablepress-2 td[rowspan="2"].column-1,#tablepress-5 td[rowspan="2"].column-1,
#tablepress-2 td[rowspan].column-2,#tablepress-5 td[rowspan].column-2,
#tablepress-2 tr.row-1>td.column-3,#tablepress-5 tr.row-1>td.column-1,#tablepress-5 tr.row-1>td.column-2,#tablepress-5 tr.row-1>td.column-3,#tablepress-5 tr.row-1>td.column-5,
#tablepress-2 td[rowspan="2"].column-5,#tablepress-5 td[rowspan="2"].column-5  {
background-color: #FDF1E8;
text-align: center;
}
#tablepress-2 tr.row-2>td.column-3,
#tablepress-2 tr.row-2>td.column-4  {
background-color: #FDDAC0;
text-align: center;
}
#tablepress-2 .row-3 td,#tablepress-5 .row-2 td,
#tablepress-2 .row-4 td,#tablepress-5 .row-3 td,
#tablepress-2 .row-5 td,#tablepress-5 .row-4 td,
#tablepress-2 .row-6 td,#tablepress-5 .row-5 td,
#tablepress-2 .row-7 td,#tablepress-5 .row-6 td,
#tablepress-2 .row-8 td,#tablepress-5 .row-7 td,
#tablepress-2 .row-15 td,#tablepress-5 .row-8 td,
#tablepress-2 .row-16 td,#tablepress-5 .row-9 td,
#tablepress-2 .row-17 td,#tablepress-5 .row-10 td,
#tablepress-5 .row-20 td,#tablepress-5 .row-21 td,
#tablepress-5 .row-22 td,#tablepress-5 .row-23 td,
#tablepress-5 .row-24 td,#tablepress-5 .row-25 td  {
background-color: #F4F4F4;
}
#tablepress-2 tr.row-9 .column-1,#tablepress-5 tr.row-9 .column-1,
#tablepress-2 tr.row-9 .column-2,
#tablepress-2 tr.row-9 .column-3,#tablepress-5 tr.row-9 .column-3,
#tablepress-2 tr.row-9 .column-4,
#tablepress-2 tr.row-9 .column-5,#tablepress-5 tr.row-9 .column-5,
#tablepress-2 tr.row-11 .column-2,#tablepress-5 tr.row-11 .column-2,
#tablepress-2 tr.row-11 .column-3,#tablepress-5 tr.row-11 .column-3,
#tablepress-2 tr.row-11 .column-4,#tablepress-5 tr.row-11 .column-4,
#tablepress-2 tr.row-13 .column-2,#tablepress-5 tr.row-13 .column-2,
#tablepress-2 tr.row-13 .column-3,#tablepress-5 tr.row-13 .column-3,
#tablepress-2 tr.row-13 .column-4,#tablepress-5 tr.row-13 .column-4  {
background-color: #fff;
}
#tablepress-2 td.column-1 span.s,#tablepress-5 td.column-1 span.s,#tablepress-5 td.column-3 span.s {
font-size: 14px;
font-weight: normal;
}
#tablepress-5 td.column-3 span.s {
display: inline-block;
text-indent: -1em;
padding-left: 1em;
}
#tablepress-2 th,#tablepress-5 th {
font-weight: 500;
text-align: center;
}
#tablepress-2>tr.row-1.odd>td.column-1,#tablepress-5>tr.row-1.odd>td.column-1 {
background-color: #FDF1E8;
}
#tablepress-1 td.column-1,#tablepress-4 td.column-1,
#tablepress-1 td.column-5,#tablepress-4 td.column-5  {
background-color: #E7ECF4; text-align: center;
vertical-align: middle;
}
#tablepress-1 td.column-2 { }
#tablepress-1 tr.row-3.odd td.column-2,#tablepress-4 tr.row-3.odd td.column-2 {
text-align: center;
vertical-align: middle;
}
#tablepress-1 td.column-3 { }
#tablepress-1 td.column-4 { }
#tablepress-1 th,#tablepress-4 th,
#tablepress-2 th
#tablepress-3 th,#tablepress-6 th,
#tablepress-1 td,#tablepress-4 td,
#tablepress-2 td,
#tablepress-3 td,#tablepress-6 td {font-size: 16px; padding: 5px 15px; box-sizing: border-box;}
#tablepress-3 th,#tablepress-6 th,
#tablepress-3 td,#tablepress-6 td {padding: 5px 25px;}
#tablepress-3 td.column-3,#tablepress-6 td.column-3 {padding-right: 20px;}
#tablepress-5 td,#tablepress-5 th{font-size: 16px; padding: 5px 10px; box-sizing: border-box;}
#tablepress-2 tr.row-18 td[colspan="2"].column-3,#tablepress-5 tr.row-18 td[colspan="2"].column-3 {
text-align: center;
vertical-align: middle;
}
#tablepress-3 tr.row-2.even .column-1,#tablepress-6 tr.row-2.even .column-1,
#tablepress-3 tr.row-3.odd .column-1,#tablepress-6 tr.row-3.odd .column-1,
#tablepress-3 tr.row-4.even .column-1,#tablepress-6 tr.row-4.even .column-1,
#tablepress-3 tr.row-5.odd .column-1,#tablepress-6 tr.row-5.odd .column-1,
#tablepress-3 tr.row-6.even td[colspan="2"].column-1,#tablepress-6 tr.row-6.even td[colspan="2"].column-1 {
background-color: #E7ECF4;
} #tablepress-6 tr.row-6.even .column-1 {
background-color: #E7ECF4;
}
#tablepress-6 tr.row-7.odd .column-1 {
background-color: #E7ECF4;
}
#tablepress-6 tr.row-6.even .column-1 span.td-inner {
letter-spacing: 0em !important;
}
#tablepress-3 tr.row-3.odd .column-2,#tablepress-6 tr.row-3.odd .column-2,
#tablepress-3 tr.row-3.odd .column-3,#tablepress-6 tr.row-3.odd .column-3,
#tablepress-3 tr.row-5.odd .column-2,#tablepress-6 tr.row-5.odd .column-2,
#tablepress-3 tr.row-5.odd .column-3,#tablepress-6 tr.row-5.odd .column-3 {
background-color: #fff;
}
.td-inner, .td-inner2 {
display: block;
margin: 0 auto;
}
#tablepress-1 .td-inner,#tablepress-4 .td-inner  {max-width: 225px;}
#tablepress-2 .column-1 .td-inner,#tablepress-5 .column-1 .td-inner {max-width: 195px;}
#tablepress-2 .column-2 .td-inner,#tablepress-5 .column-2 .td-inner {max-width: 130px;} #tablepress-3 .column-1 .td-inner,#tablepress-6 .column-1 .td-inner {
white-space: nowrap;
letter-spacing: 0.4em;
text-align: center;
}
#tablepress-3 .column-2 .td-inner,#tablepress-6 .column-2 .td-inner {max-width: 90px;}
#tablepress-3 .column-3 .td-inner,#tablepress-6 .column-3 .td-inner {max-width: 275px;}
.outline-scroll {
position: absolute;
display: none;
height: 1px;
width: 80px;
background-color: #252525;
right: 0;
}
.outline-scroll::after {
position: absolute;
content: "";
top: 50%;
left: 0;
transform: translate(0, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #252525;
animation: circlemove2 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove2 {
0%{transform: translate(0, -50%);}
100%{transform: translate(70px, -50%);}
}
@media screen and (max-width: 1024px) {
.sub-outline {margin-top: 60px;}
.sub-outline-content {padding-top: 90px;}
.sub-outline-title {width: 160px;}
.sub-outline-course-detail {margin-top: 15px;}
.sub-outline-text.bold,
.sub-outline-item,
.sub-outline-teble-box,
.sub-outline-text-box,
.sub-outline-table1-content,
.sub-outline-list-wrap,
.sub-outline-map,
.sub-outline-list{
width: calc(92% - 160px);
}
}
@media screen and (max-width: 1240px) and (min-width: 721px) {
.sub-outline-table1-content {padding-top: 30px;}
.outline-scroll.scroll1 {display: block; top: 50px;}
}
@media screen and (max-width: 1185px) and (min-width: 721px) {
.sub-outline-table2-content {padding-top: 30px;}
.outline-scroll.scroll2 {display: block; top: 50px;}
} @media screen and (max-width: 1144px) and (min-width: 1025px) {
.outline-scroll.scroll3 {display: block; top: 60px;}
} @media screen and (max-width: 1024px) and (min-width: 721px) {
.outline-scroll.scroll3 {display: block; top: 60px;}
}
@media screen and (min-width: 721px) {
#tablepress-1, #tablepress-4 {width: max(700px, 100%);}
#tablepress-1 td.column-1,#tablepress-4 td.column-1 {width: max(25%, 125px);}
#tablepress-1 td.column-2,#tablepress-4 td.column-2[colspan="2"] {width: max(25%, 230px);}
#tablepress-1 td.column-2,#tablepress-4 td.column-2[rowspan="3"] {width: max(115px, 12.5%);}
#tablepress-1 td.column-3,#tablepress-4 td.column-3 {width: max(50px, 12.5%);}
#tablepress-1 td.column-4,#tablepress-4 td.column-4 {width: max(25%, 230px);}
#tablepress-1 td.column-5,#tablepress-4 td.column-5 {width: max(25%, 165px);}
#tablepress-2,#tablepress-5  {width: max(660px, 100%);}
#tablepress-2 td.column-1,#tablepress-5 td.column-1 {width: calc(50% - 230px); min-width: 145px;}
#tablepress-2 td.column-2 {width: 230px;}
#tablepress-2 td.column-3 {width: 115px;}
#tablepress-2 td.column-4 {width: 115px;}
#tablepress-2 td.column-5,#tablepress-5 td.column-5 {width: calc(50% - 230px); min-width: 170px;}
#tablepress-3,#tablepress-6 {width: max(570px, 100%);}
#tablepress-3 td.column-1,#tablepress-6 td.column-1 { width: 32%;
min-width: 170px;
}
#tablepress-3 td.column-1[colspan="2"],#tablepress-6 td.column-1[colspan="2"] {width: 50%;}
#tablepress-3 td.column-2,#tablepress-6 td.column-2 {width: 25%; min-width: 140px;}
#tablepress-3 td.column-3,#tablepress-6 td.column-3 {width: 50%; min-width: 320px;}
#tablepress-5 td.column-2 {width: 53px;text-align: center;}
#tablepress-5 td.column-3 {width: 40px;}
#tablepress-5 tr.row-26 td.column-3 {text-align: left;}
#tablepress-5 td.column-4 {width: 215px; text-align: left;}
}
#tablepress-6 tr.row-7.odd .column-1 span.td-inner2 {
white-space: nowrap;
text-align: center;
}
#tablepress-6 tr.row-7.odd .column-2 {
background: #e7ecf4;
position: relative;
}
#tablepress-6 tr.row-7.odd .column-2:after {
position: absolute;
content: "";
height: 100%;
width: 1px;
background: #e7ecf4;
left: -1px;
top: 0;
}
@media screen and (max-width: 720px) {
.sub-outline-inner {
width: 90%;
}
#tablepress-3 td.column-1, #tablepress-6 td.column-1 {
min-width: 130px;
}
.sub-outline-title {width: 138px;}
.sub-outline-text.bold,
.sub-outline-item,
.sub-outline-teble-box,
.sub-outline-text-box,
.sub-outline-table1-content,
.sub-outline-list-wrap,
.sub-outline-map,
.sub-outline-list {
width: 100%;
}
.sub-outline {
margin-top: 25px;
}
.sub-outline-bunner {
width: min(51.932%, 215px);
height: auto;
position: fixed;
right: 0;
bottom: 15px;
z-index: 10;
}
.sub-outline-bunner-pc {
display: none;
}
.sub-outline-bunner-sp {
display: block;
}
.sub-outline-content {
padding-top: 50px;
}
.sub-outline-box {
flex-direction: column;
padding: 20px 0;
}
.sub-outline-content>.sub-outline-box:nth-child(1) {
padding-top: 0;
} .sub-outline-title,
.sub-outline-text {
font-size: 14px;
}
.sub-outline-text.bold {
margin-top: 10px;
font-size: 20px;
}
.sub-outline-text-s {
margin-top: 6px;
font-size: 14px;
}
.sub-outline-map-text {
margin-top: 20px;
}
.sub-course-button {
font-size: 14px;
padding: 0 25px 5px 5px;
}
.sub-outline-text-s {
margin-top: 6px;
}
.sub-outline-table1-content {
width: 100%;
}
#tablepress {
padding: 8px;
}
#tablepress-1,#tablepress-4 {width: max(100%, 590px);}
#tablepress-2,#tablepress-5 {width: max(100%, 500px);}
#tablepress-3,#tablepress-6 {width: max(100%, 430px);}
#tablepress-1, #tablepress-4  {
margin-top: 20px;
}
#tablepress-1 td.column-2,#tablepress-4 td.column-2 {
width: 200px;
}
.sub-outline-teble-box,
.sub-outline-text-box,
.sub-outline-list-wrap {
margin-top: 20px;
width: 100%;
}
#tablepress-1 td,#tablepress-4 td,
#tablepress-2 td,#tablepress-5 td,
#tablepress-3 td,#tablepress-6 td,
#tablepress-1 th,#tablepress-4 th,
#tablepress-2 th,#tablepress-5 th,
#tablepress-3 th,#tablepress-6 th {
font-size: 14px !important;
padding: 5px 10px;
}
#tablepress-3 td.column-3,#tablepress-6 td.column-3 {padding-right: 5px;}
#tablepress-1 td.column-1,#tablepress-4 td.column-1 {width: 20%; min-width: 100px;}
#tablepress-1 td.column-2:not([colspan="2"]),#tablepress-4 td.column-2:not([colspan="2"]) {width: 25%; min-width: 95px;}
#tablepress-1 td.column-3,#tablepress-4 td.column-3 {width: 10%; min-width: 50px;}
#tablepress-1 td.column-4,#tablepress-4 td.column-4  {width: 30%; min-width: 215px;}
#tablepress-1 td.column-5,#tablepress-4 td.column-5  {width: 20%; min-width: 130px;}
#tablepress-1 .row-3 .column-2,#tablepress-4 .row-3 .column-2, #tablepress-1 td.column-5,#tablepress-4 td.column-5 {padding: 5px;}
#tablepress-2 td.column-1,#tablepress-5 td.column-1 {width: calc((100% - 100px) / 3); min-width: 120px;}
#tablepress-2 td.column-2 {width: calc((100% - 100px) / 3); min-width: 135px;}
#tablepress-2 td.column-3:not([colspan="2"]) {width: 50px;}
#tablepress-2 td.column-4  {width: 50px;}
#tablepress-2 td.column-5,#tablepress-5 td.column-5 {width: calc((100% - 100px) / 3); min-width: 145px;}
#tablepress-3 th.column-1,#tablepress-6 th.column-1 {width: 23%; min-width: 75px;}
#tablepress-3 th.column-2,#tablepress-6 th.column-2 {width: 23%; min-width: 100px;}
#tablepress-3 th.column-3,#tablepress-6 th.column-3 {width: 54%; min-width: 255px;}
#tablepress-5 td.column-2 {width: calc((100% - 100px) / 3); min-width: 33px;text-align: center;}
#tablepress-5 td.column-3 {width: 30px;}
#tablepress-5 td.column-4 {width: 100px;}
}
@media screen and (max-width: 656px) {
.outline-scroll.scroll1 {display: block; top: 50px;}
}
@media screen and (max-width: 555px) {
.outline-scroll.scroll2 {display: block; top: 50px;}
}
@media screen and (max-width: 539px) {
.outline-scroll.scroll3 {display: block; top: 85px;}
}
.sub-service-wrapper {
margin-top: 80px; justify-content: space-between;
}
.sub-service-content {
border: 10px solid;
border-image: linear-gradient(#fbecf4 0%, #e7ecf4 50%, #fdf1e8 100%, #0e4d96 100%);
border-image-slice: 1;
padding: 15px;
}
.sub-service-content-left {
width: min(65.5%, calc(100% - 345px)); }
.sub-service-content-right {
width: max(325px, 31%);
}
.sub-service-flex-box {
gap: 3%;
}
.sub-service-flex-left,
.sub-service-flex-right {
width: calc((100% - 3%) / 2);
}
.sub-service-header {
font-weight: bold;
font-size: 18px;
line-height: 1.8;
}
.sub-childcare-service-text {
margin-top: 20px;
font-size: 14px;
line-height: 1.8;
}
.sub-childcare-service-content {
margin-top: 20px;
}
.sub-service-flex-title {
margin-top: 20px;
font-weight: bold;
font-size: 14px;
line-height: 1.8;
}
.sub-service-flex-text {
font-size: 14px;
line-height: 1.8;
}
a.service-link {
text-decoration: underline;
}
.sub-service-title {
width: 66px;
font-size: 14px;
line-height: 1.8;
letter-spacing: -0.1em;
text-align-last: justify;
}
.sub-service-colon {width: 14px}
.sub-service-text {
width: calc(100% - 80px); font-size: 14px;
line-height: 1.8;
}
.sub-others-wrapper,
.sub-personal-info-wrapper,
.sub-info-wrapper {
margin-top: 80px;
}
.sub-info-wrapper {
margin-bottom: 150px;
}
.sub-outline-section-title {
font-weight: bold;
font-size: 20px;
line-height: 1.8;
}
.sub-personal-info-content,
.sub-outline-list,
.sub-personal-info-list {
margin-top: 30px;
}
.sub-personal-info-list,
.sub-traffic-list {
margin-top: 20px;
}
.sub-others-list,
.sub-personal-info-list,
.sub-traffic-list,
.sub-parking-list {
padding-inline-start: 14px;
list-style: none;
}
.sub-others-item,
.sub-personal-info-item,
.sub-traffic-item,
.sub-parking-item {
position: relative;
margin-top: 10px;
letter-spacing: 0.05em;
line-height: 1.8;
}
.sub-traffic-item{
font-size: 14px;
line-height: 1.8;
padding-bottom: 10px;
}
.sub-parking-item{
font-size: 14px;
line-height: 1.8;
}
.sub-parking-item.red{
color: #E04793;
font-weight: bold;
}
.sub-traffic-item:not(:last-child)::after {
content: "";
position: absolute;
bottom: 0;
left: -14px;
height: 1px;
width: calc(100% + 14px);
background-color: #DDDDDD;
}
.sub-traffic-item.flex {
justify-content: space-between;
}
.traffic-notice {
font-size: 14px;
padding-left: 1em;
text-indent: -1em;
margin-top: 20px;
}
.sub-others-item::before,
.sub-personal-info-item::before,
.sub-traffic-item::before,
.sub-parking-item::before {
position: absolute;
content: "";
top: 12px;
left: -12px;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #DDDDDD;
}
.sub-trafficR {font-size: 13px;}
.sub-trafficR img {
margin-right: 3px;
opacity: 0.2;
transition: 0.3s;
transform-origin: bottom;
}
.sub-trafficR a:hover img {
opacity: 0.6;
transform: scale(1.3);
}
.sub-others-item-pink {
color: #E04793;
font-weight: bold;
}
a.sub-personal-info-link {
font-weight: bold;
text-decoration: underline;
}
.sub-traffic-contents {
gap: 3.23%;
}
.sub-traffic-content,
.sub-hotel-content {
border: 1px solid #ddd;
padding: 30px;
width: calc((100% - 3.23%) / 2);
}
.hotel-text-box,.sub-parking,.sub-parking-text-box {
margin-top: 20px;
}
.sub-traffic-title,
.sub-hotel-title {
font-weight: bold;
font-size: 18px;
line-height: 1.8;
}
.sub-parking {
font-weight: bold;
font-size: 18px;
line-height: 1.8;
color: #E04793;
}
.sub-course-text {
margin-top: 20px;
font-size: 16px;
text-indent: -1em;
padding-left: 1em;
}
.sub-hotel-flex-text {
width: 78%;
font-size: 14px;
line-height: 1.8;
}
.sub-parking-text {
width: 78%;
padding-right: min(20px, 1vw);
}
.sub-hotel-img,
.sub-parking-img {
max-width: 100px;
width: calc(100% - 78%);
height: 100%;
}
.sub-parking-img img {
max-width: 100px;
width: 100%;
}
.sub-hotel-text-content,
.sub-parking-list {
margin-top: 20px;
}
.sub-hotel-text,
.sub-parking-text {
font-size: 14px;
line-height: 1.8;
}
.sub-parking-text .text-link{
font-weight: bold;
}
a.sub-hotel-link {
text-decoration: underline;
}
@media screen and (max-width: 1100px) {
.sub-service-wrapper {
margin-top: 40px;
flex-direction: column;
}
.sub-service-content-left,
.sub-service-content-right {
width: 100%;
}
.sub-service-content-right {
margin-top: 20px;
}
.sub-hotel-flex-text,.sub-parking-text {width: 100%;}
.sub-parking-text {padding-right: 0;}
.sub-hotel-img,.sub-parking-img {width: 100%; margin-inline: auto; margin-top: 15px;}
}
@media screen and (max-width: 1024px) {
.sub-info-wrapper {margin-bottom: 90px;}
.sub-traffic-content, .sub-hotel-content {width: 100%;}
.sub-hotel-content {margin-top: 20px;}
.sub-hotel-flex-text,.sub-parking-text  {width: auto; max-width: calc(100% - 110px);}
.sub-hotel-img,.sub-parking-img  {width: 100px; margin: 0 0 0 10px;}
}
@media screen and (max-width: 720px) {
.sub-service-flex-box {
flex-direction: column;
}
.sub-service-flex-left,
.sub-service-flex-right {
width: 100%;
}
.sub-service-header {
font-size: 16px;
}
.sub-others-wrapper,
.sub-personal-info-wrapper,
.sub-info-wrapper {
margin-top: 40px;
}
.sub-info-wrapper {
margin-bottom: 75px;
}
.sub-outline-section-title {
font-size: 16px;
}
.sub-personal-info-text {
font-size: 14px;
}
.sub-others-item,
.sub-personal-info-item {
font-size: 14px;
}
.sub-others-item::before, .sub-personal-info-item::before, .sub-traffic-item::before,.sub-parking-item::before {
top: 10px;
}
.sub-personal-info-content,
.sub-outline-list {
margin-top: 10px;
}
.sub-outline-item {
margin-top: 0px;
font-size: 14px;
}
.sub-traffic-contents {
flex-direction: column;
}
.sub-traffic-content,
.sub-hotel-content {
width: 100%;
padding: 20px;
}
.sub-traffic-title,
.sub-hotel-title,
.sub-parking,
.sub-course-text {
font-size: 16px;
}
.sub-hotel-content {
margin-top: 20px;
}
.sub-hotel-img,.sub-parking-img  {
display: none;
}
.sub-hotel-flex-text,.sub-parking-text  {
width: 100%;
max-width: none;
}
}
@media screen and (max-width: 400px) {
.sub-trafficR {width: 100%; text-align: right;}
} .sub-entry-inner { margin: 100px auto 0;
}
.sub-entry-main-content { margin: 100px auto 0; border: 10px solid;
border-image: var(--bg-grad);
border-image-slice: 1;
text-align: center;
padding: 40px 15px;
}
.sub-entry-box { }
.sub-entry-main-title,
.sub-entry-main-date {
font-weight: bold;
font-size: 24px;
letter-spacing: 0.05em;
line-height: 1.8;
}
.sub-entry-main-date {
margin-top: 10px;
}
.sub-entry-main-date-l {
font-size: 32px;
}
.sub-entry-main-text {
margin-top: 20px;
font-size: 14px;
line-height: 1.8;
}
a.sub-entry-link,
a.sub-runnet-link {
font-weight: bold;
text-decoration: underline;
}
.sub-entry-application-box {
margin-top: 60px;
}
.sub-entry-application-title {
width: 212px;
margin-inline: auto;
text-align: center;
font-weight: bold;
font-size: 16px;
line-height: 1.8;
color: #fff;
background-image: var(--dark-grad);
}
.sub-entry-application {
margin-top: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
.sub-entry-application img {
width: min(113px, 100%);
}
.sub-entry-application-text {
font-size: 16px;
line-height: 1.8;
text-align: left;
}
.sub-entry-application-text:last-child {
font-size: 14px;
padding-left: 20px;
}
.sub-entry-application-list {
margin-top: 15px;
font-size: 14px;
line-height: 1.8;
padding-inline-start: 20px;
text-align: left;
}
.sub-entry-application-btn-wrap {
margin-top: 60px;
margin-inline: auto; text-align: center;
width: min(100%, 320px); }
.sub-entry-application-btn-wrap a {
height: 90px;
font-size: 24px;
font-weight: 700;
}
.sub-entry-application-btn-wrap a img {
margin-left: 5px;
}
.sub-entry-text-wrap { }
.sub-entry-text.pink {
font-weight: bold;
font-size: 16px;
line-height: 1.8;
color: #e04793;
}
.sub-entry-content {
margin-top: 60px;
line-height: 1.8;
}
.sub-entry-title {
font-weight: bold;
font-size: 20px;
margin-bottom: 15px;
}
#attention .sub-entry-inner {
margin-top: 60px;
}
.attention-list {
padding: 0;
list-style-type: none;
}
.attention-list .sub-item {
position: relative;
padding-left: 1.7em;
}
.attention-list .sub-item::before {
display: none;
}
.attention-list-num {
position: absolute;
left: 0;
}
.sub-entry-text-link {
font-weight: 700;
text-decoration: underline !important;
}
@media screen and (max-width: 1024px) {
.sub-entry-inner {margin-top: 60px;}
.sub-entry-main-content {
margin-top: 60px;
}
.sub-entry-application-box {
margin-top: 30px;
}
.sub-entry-application-btn-wrap {
margin-top: 40px;
}
}
@media screen and (max-width: 720px) {
.sub-entry-inner {
margin-top: 25px;
}
.sub-entry-application img {
display: none;
}
.sub-entry-main-title {
font-size: 20px;
}
.sub-entry-main-date {
font-size: 16px;
}
.sub-entry-main-date-l {
font-size: 24px;
}
.sub-entry-main-text,
.sub-entry-application-list,
.sub-entry-application-text:last-child {
font-size: 13px;
}
.sub-entry-application-btn-wrap a {
font-size: 20px;
}
.sub-entry-content {
margin-top: 40px;
}
.sub-entry-title {
font-size: 16px;
}
}
@media screen and (max-width: 480px) {
.sub-entry-main-text {
text-align: left;
padding-left: 1em;
text-indent: -1em;
}
.sub-entry-main-text .ib {
display: inline;
}
} .sub-course-inner {
width: min(1240px, 92%);
margin: 100px auto 0;
}
.sub-course-content {
width: min(1240px, 100%);
margin: 90px 0 0;
}
.sub-course-btn-title-flex {
justify-content: space-between;
}
.sub-course-btn-title-flex a {
display: inline-block;
}
.sub-course-btn-title-wrap {
position: relative;
display: inline-block;
width: calc(100% / 3 - 2.65%);
text-align: center; padding-bottom: 30px;
}
.sub-course-btn-title-wrap::before {
position: absolute;
content: "";
bottom: 20px;
left: 0;
width: 100%;
border-bottom: 3px solid #252525;
transition: transform 0.3s;
}
.sub-course-btn-title-wrap:hover::before {
transform: translateY(11px); }
.sub-course-btn-title-wrap::after {
position: absolute;
content: "";
bottom: 7px;
left: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-color: #252525 transparent transparent transparent;
border-width: 10.39px 6px 0px 6px;
transition: transform 0.3s;
}
.sub-course-btn-title-wrap:hover::after {
transform: translateY(6px); }
.sub-course-btn-title {
display: block;
font-weight: bold;
font-size: 28px;
letter-spacing: 0.05em;
line-height: 1.5428;
}
.sub-course-btn-title-jp {
display: block;
font-weight: bold;
font-size: 14px;
line-height: 1.8;
color: #666;
}
#sub-half-course {
margin-top: 120px;
}
.sub-half-course-video {
margin-top: 40px;
width: calc(100% - 28.174% - 2.6962%);
margin-left: auto;
transition-delay: calc(3.3s);
}
.sub-course-section-title-wrap {
align-items: center;
gap: 25px;
}
.sub-course-section-title {
font-weight: bold;
font-size: 40px;
letter-spacing: 0.05em;
line-height: 1.08;
}
.sub-course-section-title-jp {
font-weight: bold;
font-size: 18px;
line-height: 1.8;
}
.sub-course-map {
margin-top: 60px;
text-align: center;
}
.sub-half-course-map1 {
width: 71.031%;
}
.sub-half-course-map2 {
margin-top: 20px;
}
img.sub-half-course-map2,
img.sub-10km-course-map2,
img.sub-2-hkm-course-map2 {
border: 1px solid #ddd;
}
#sub-10km-course,
#sub-2-hkm-course {
margin-top: 80px;
}
.sub-10km-course-map {
align-items: flex-start;
gap: 2.6962%;
}
.sub-10km-course-map1 {
aspect-ratio: 355 / 240;
width: 28.174%;
object-fit: contain;
}
.sub-10km-course-map2 {
width: calc(100% - 28.174% - 2.6962%);
}
.sub-2-hkm-course-map {
align-items: flex-start;
gap: 20.4032%;
}
.sub-2-hkm-course-map1 {
aspect-ratio: 136 / 240;
width: 10.9677%;
object-fit: contain;
}
.sub-2-hkm-course-map2 {
width: calc(100% - 10.9677% - 20.4032%);
}
.sub-course-parking-content.inner1 {
margin-top: 80px;
}
.sub-course-title {
font-weight: bold;
font-size: 20px;
line-height: 1.8;
}
.sub-item.red {
font-weight: bold;
color: #e04793;
}
@media screen and (max-width: 1024px) {
.sub-course-inner {margin-top: 60px;}
}
@media screen and (max-width: 720px) {
.sub-course-inner {
width: 90%;
margin: 25px auto 0;
}
.sub-course-btn-title-wrap:hover::before {
transform: translateY(7px);
}
.sub-course-btn-title-wrap:hover::after {
transform: translateY(2px);
}
.sub-course-content {
margin: 57px 0 0;
}
.sub-course-btn-title {
font-size: 20px;
line-height: 1;
}
.sub-course-btn-title-jp {
font-size: 11px;
}
.sub-course-btn-title-wrap {
width: calc(100% / 2 - 2.65%);
padding-bottom: 20px;
}
.sub-course-btn-title-wrap::before {
bottom: 14px;
border-bottom: 2px solid #252525;
}
.sub-course-btn-title-wrap::after {
bottom: 2px;
border-width: 8.39px 4px 0px 4px;
}
.sub-course-btn-title-wrap:nth-child(3) {
margin-top: 30px;
}
#sub-half-course {
margin-top: 54px;
}
.sub-half-course-video {
margin-top: 40px;
width: 100%;
margin-left: 0;
}
.sub-course-section-title-wrap {
gap: 10px;
}
.sub-course-section-title {
font-size: 32px;
line-height: 1.35;
}
.sub-course-section-title-jp {
font-size: 16px;
}
.sub-course-map {
margin-top: 40px;
}
.sub-half-course-map1 {
width: 100%;
}
#sub-10km-course,
#sub-2-hkm-course {
margin-top: 40px;
}
.sub-10km-course-map,
.sub-2-hkm-course-map {
flex-direction: column;
gap: 20px;
}
.sub-10km-course-map1 {
width: 50%;
}
.sub-10km-course-map2 {
width: 100%;
}
.sub-2-hkm-course-map1 {
width: 25.9677%;
}
.sub-2-hkm-course-map2 {
width: 100%;
}
.sub-course-parking-content.inner1 {
margin-top: 40px;
}
.sub-course-wrapper {
margin-bottom: 75px;
}
} .sub-contact-inner {margin-top: 100px;}
.sub-contact-main-content {
margin-top: 150px;
background-image: var(--btn-grad);
padding: 10px;
}
.sub-contact-box {
background-color: white;
padding: 20px 20px 30px;
}
.sub-contact-main-title {
font-weight: bold;
font-size: 18px;
}
.sub-contact-info {
margin-top: 14px;
font-size: 14px;
}
.sub-contact-tel-wrap {
margin-top: 20px;
gap: 40px;
}
.sub-contact-tel {
font-size: 32px;
line-height: 1.35;
}
.sub-contact-tel-num {
font-size: 38px;
font-weight: bold;
}
.sub-contact-wrapper {
margin-top: 100px;
}
.sub-contact-content {
padding-bottom: 100px;
}
.sub-contact-title {
font-weight: bold;
font-size: 18px;
}
.sub-contact-text {
margin-top: 12px;
}
.sub-contact-text-notice {
font-size: 14px;
padding-left: 1em;
text-indent: -1em;
}
@media screen and (max-width: 1024px) {
.sub-contact-inner {margin-top: 25px;}
.sub-contact-main-content {margin-top: 60px;}
.sub-contact-wrapper {margin-top: 60px;}
.sub-contact-content {padding-bottom: 50px;}
.sub-contact-tel-wrap {
margin-top: 10px;
gap: 0;
flex-direction: column;
}
}
@media screen and (max-width: 720px) {
.sub-contact-main-content {
margin-top: 70px;
}
.sub-contact-box {
padding: 10px 10px 15px;
}
.sub-contact-main-title {
font-size: 16px;
}
.sub-contact-info {
margin-top: 10px;
}
.sub-contact-tel {
font-size: 28px;
line-height: 1.2;
}
.sub-contact-tel-num {
font-size: 30px;
}
.sub-contact-wrapper {
margin-top: 50px;
}
.sub-contact-title {
font-size: 16px;
}
.sub-contact-text {
margin-top: 10px;
font-size: 14px;
}
.sub-contact-text-notice {
font-size: 12px;
}
} .ahm-mailform {
margin-top: 60px;
width: 1240px;
max-width: 100%;
margin-inline: auto;
padding: 0 40px 0 20px;
}
.mailform-row {
margin-bottom: 60px;
align-items: flex-start;
}
.formL {
width: max(235px, 19%);
font-size: 16px;
letter-spacing: 0.05em;
line-height: 1.8125;
color: #000;
display: flex;
align-items: center;
gap: 10px;
padding-top: 12px;
}
.required {
font-size: 11px;
line-height: 1.8;
text-align: center;
color: #fff;
padding: 0 4px;
background: #d9006c;
}
.formR {
width: min(81%, calc(100% - 235px));
}
.formR placeholder {
letter-spacing: 0.05em;
line-height: 1.8125;
color: #666;
}
.formR input,
.formR textarea {
border: none;
outline: none !important;
height: 60px;
appearance: none;
}
.ahm-mailform .formR input,
.ahm-mailform .formR textarea {
background-color: #f2f2f2;
box-shadow: 0 0 0 1000px #f2f2f2 inset;
}
input.p-postal-code {
display: inline-flex;
width: 110px;
align-items: flex-start;
}
select.wpcf7-form-control.wpcf7-select {
appearance: none;
-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; border: none;
background-color: #f2f2f2;
letter-spacing: 0.05em;
line-height: 1.8125;
color: #666;
width: 240px;
height: 100%;
}
.formR.formR-todohuken {
position: relative;
width: min(100%, 240px);
height: 60px;
}
.formR-todohuken::after {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 6px 0 6px;
border-color: #000 transparent transparent transparent;
position: absolute;
top: 25px;
right: 20px;
pointer-events: none;
}
.formR.formR-todohuken .wpcf7-form-control-wrap {
height: 100%;
display: block;
position: absolute;
top: 0;
}
.mailform-row.flex.form-message {
align-items: flex-start;
}
.mailform-row.form-message .formL {
padding-top: 15px;
}
.formR textarea {
height: 240px;
resize: none;
padding: 0.8rem 1rem;
}
.wpcf7-list-item.first {
margin: 0;
}
.wpcf7-list-item-label {
cursor: pointer;
display: flex;
} input[type="radio"] {
opacity: 0; position: absolute;
} .wpcf7-list-item-label::before {
background: #f2f2f2;
border-radius: 10px;
content: "";
height: 1.2em;
margin-bottom: auto;
margin-right: .5em;
margin-top: auto;
transition: background-color .5s; width: 1.2em;
} input[type="radio"]:checked+.wpcf7-list-item-label::before {
background-color: #252525; box-shadow: inset 0 0 0 3px #fff; }
.mailform-row.flex.form-contact>.formL {
padding-top: 0px;
}
span.wpcf7-acceptance .wpcf7-list-item-label::before {
display: none;
}
.form-confirm {
margin-top: 103px;
font-size: 16px;
}
.form-confirm .wpcf7-form-control-wrap {
display: block;
text-align: center;
}
.form-confirm .wpcf7-list-item {
margin: 0;
}
.form-confirm label {
display: flex;
align-items: center;
justify-content: center;
text-align: left;
}
.form-confirm input {
appearance: none;
height: 30px;
width: 30px;
background-color: #f2f2f2;
margin-right: 10px;
position: relative;
}
.form-confirm input::after {
background-image: url(//www.asahikawa-half-marathon.jp/app/wp-content/themes/hello-theme-child-master/img/check-a.svg);
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 70% auto;
opacity: 0;
}
.form-confirm input::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-position: center;
background-repeat: no-repeat;
background-size: 70% auto;
opacity: 0;
}
.form-confirm label .wpcf7-list-item-label {
width: calc(100% - 40px);
line-height: 1.4;
font-size: 14px;
}
.form-confirm input:checked::after {
opacity: 1;
}
.form-button {
margin-top: 65px;
}
.submit-wrapper p {
width: 260px;
margin: 0 auto;
position: relative;
border-radius: 30px;
overflow: hidden;
border-width: 2px;
border-style: solid;
z-index: 1;
}
.submit-wrapper p::after {
z-index: 0;
}
.form-btn {
margin-top: 25px;
width: min(100%, 220px);
margin-inline: auto;
}
.form-btn .btn-topgra {
font-size: 24px;
height: 90px;
font-weight: bold; cursor: pointer;
}
.form-btn input {
width: 100%;
border: 0 !important;
outline: none !important;
font-size: 24px;
height: 90px;
font-weight: bold; color: #252525;
position: relative;
z-index: 1;
background-color: transparent !important;
}
.form-btn .btn-topgra,
.form-btn .btn-topgra-hov {
pointer-events: none;
}
.wpcf7-spinner {
display: none;
}
.wpcf7 form .wpcf7-response-output {
border-color: #d9006c !important;
margin: 40px 0 0 !important;
}
@media screen and (max-width: 1024px) {
.mailform-row {
margin-bottom: 25px;
}
.formL {
font-size: 14px;
width: max(210px, 24%);
padding-top: 12px;
}
.formR {
width: min(76%, calc(100% - 210px));
}
.mailform-row.form-message .formL {
padding-top: 10px;
}
.ahm-mailform .formR input,
.ahm-mailform .formR select,
.ahm-mailform .formR textarea,
input[type="radio"]  {
font-size: 14px;
line-height: 1;
}
.form-button {
margin-top: 40px;
}
.form-button input {
height: 55px;
font-size: 18px;
}
.ahm-mailform {
padding: 0;
}
}
@media screen and (max-width: 900px) {
.form-confirm label {
align-items: flex-start;
}
}
@media screen and (max-width: 720px) {
.ahm-mailform {
margin-top: 40px;
}
.mailform-row {
margin-bottom: 20px;
}
.formL {
padding-top: 10px;
width: 100%;
padding: 0 0 5px !important;
}
.formR {
width: 100%;
}
.formR input, .formR.formR-todohuken {
height: 50px;
}
.form-confirm {
margin-top: 51px;
font-size: 14px;
}
.form-button input {
height: 45px;
font-size: 16px;
}
.form-btn .btn-topgra, .form-btn input {
height: 75px;
font-size: 20px;
}
}
.sub-personal-information-wrapper {
margin-bottom: 150px;
}
.sub-personal-information-content.inner1 {
padding: 30px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.sub-personal-information-list {
margin-top: 30px;
}
.sub-personal-information-title {
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 1024px) {
.sub-personal-information-wrapper {margin-bottom: 90px;}
}
@media screen and (max-width: 720px) {
.sub-personal-information-wrapper {
margin-bottom: 75px;
}
.sub-personal-information-content.inner1 {
padding: 15px 0;
}
.sub-personal-information-list {
margin-top: 15px;
}
.sub-personal-information-title {
font-size: 16px;
}
}