body {
    position: relative;
}
img {
    width: 100%;
}
.h-link {
    transition: .2s;
}
.h-link:hover {
    opacity: .8;
}
.pc_view {
    display: block;
}
.sp_view {
    display: none;
}
@media screen and (max-width: 767px){
    .pc_view {
        display: none;
    }
    .sp_view {
        display: block;
    }
}
/*-------------------------------------------------
|- main
-------------------------------------------------*/
.main {
    position: relative;
}
/*-------------------------------------------------
|- header
-------------------------------------------------*/
.header {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 40px;
    box-sizing: border-box;
    background: #fff;
    display: grid;
    grid-template-columns: 360px 100px;
    place-content: space-between;
    place-items: center;
}
.header .logo {
    line-height: 0;
}
.sitemap-btn {
    width: 100%;
}
.sitemap-btn__link {
    width: 100%;
    padding: 5px 0;
    color: #002063;
    font-size: var(--fs13);
    font-weight: 400;
    text-align: center;
    background: #eaebef;
    display: block;
}
.link-list {
    width: 100%;
    padding: 13px 0;
    background: #3e4770;
    display: flex;
    justify-content: center;
}
.link-list__item {
    padding: 0 20px;
    border-left: 1px solid #999;
}
.link-list__item:last-child {
    border-right: 1px solid #999;
}
.link-list__link {
    color: #fff;
    font-size: var(--fs13);
    line-height: 1.2;
    text-decoration: underline;
    display: block;
}
.link-list__link:hover {
    text-decoration: none;
}
@media screen and (max-width: 767px){
    body.is-open:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(51,51,51,.5);
        z-index: 10;
    }
    .header {
        display: none;
    }
    .menu-btn {
        position: relative;
        width: 44px;
        height: 44px;
        background: url(/english/tokyoSportsFacilities/assets/common/img/btn_menu_open.jpg) no-repeat;
        background-size: 100%;
    }
    .menu-btn.is-open {
        background: url(/english/tokyoSportsFacilities/assets/common/img/btn_menu_close.jpg) no-repeat;
    }
    .menu-btn__txt {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 3px;
        color: #fff;
        font-size: var(--fs10);
        line-height: 1;
    }
}
/*-------------------------------------------------
|- nav-block
-------------------------------------------------*/
.nav-block {
    width: 100%;
    padding: 17px 0;
    background: #002063;
}
.nav-box {
    max-width: 1080px;
    margin: auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.nav-block .logo {
    width: 216px;
    margin-right: 30px;
    line-height: 0;
}
.nav-list {
    display: flex;
}
.nav-list > * + * {
    margin-left: 25px;
}
.nav-list__link {
    color: #fff;
    font-size: var(--fs18);
    font-weight: 600;
}
.nav-list__link.top {
    color: #309ccf;
}
@media screen and (min-width: 768px){
    .nav {
        display: block !important;
    }
}
@media screen and (max-width: 767px){
    .nav-block {
        position: relative;
        padding: 10px 10px 10px 15px;
        box-sizing: border-box;
        background: #fff;
        z-index: 11;
    }
    .nav-block .logo {
        width: 40%;
        max-width: 151px;
    }
    .nav-box {
        padding: 0;
    }
    .nav {
        display: none;
        position: absolute;
        left: 0;
        top: 64px;
        width: 100%;
        padding: 35px 0 20px;
        box-sizing: border-box;
        background: #002063;
        z-index: 11;
    }
    .nav-list {
        padding: 0 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #5c6591;
        display: block;
    }
    .nav-list > * + * {
        margin-left: 0;
    }
    .nav-list__item {
        margin-bottom: 20px;
    }
    .nav-list__logo {
        margin: 30px 0;
    }
    .nav-list__link {
        font-size: var(--fs16);
    }
    .nav-list__link.top {
        color: #fff;
    }
    .nav-list__link.sitemap {
        font-size: var(--fs13);
        font-weight: 400;
        text-decoration: underline;
    }
    .btn-close {
        width: 112px;
        margin: 20px auto 0;
    }
}
/*-------------------------------------------------
|- footer
-------------------------------------------------*/
.footer {
    width: 100%;
}
.banner {
    padding: 30px 0;
    background: #dfe0e6;
}
.bn-list {
    max-width: 715px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 20px;
}
.bn-list__item {
    line-height: 0;
}
.copyright {
    padding: 16px 0;
    color: #fff;
    font-size: var(--fs12);
    text-align: center;
    line-height: 1.6;
    background: #002063;
}
.page-top {
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 40px;
    cursor: pointer;
}
@media screen and (max-width: 767px){
    .bn-list {
        width: 92%;
        margin: 0 auto;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 15px;
    }
    .copyright {
        font-size: var(--fs11);
        letter-spacing: -.02rem;
        line-height: 1.3;
    }
    .page-top {
        right: 10px;
        bottom: 10px;
    }
}

:root {
	--fs10: .625rem;
	--fs11: .687rem;
	--fs12: .75rem;
	--fs13: .812rem;
	--fs14: .875rem;
	--fs15: .937rem;
	--fs16: 1rem;
	--fs17: 1.06rem;
	--fs18: 1.12rem;
	--fs19: 1.18rem;
	--fs20: 1.25rem;
	--fs21: 1.31rem;
	--fs22: 1.37rem;
	--fs23: 1.43rem;
	--fs24: 1.5rem;
	--fs25: 1.56rem;
	--fs26: 1.62rem;
	--fs27: 1.68rem;
	--fs28: 1.75rem;
	--fs29: 1.81rem;
	--fs30: 1.87rem;
}


/*-------------------------------------------------
|- success stories
-------------------------------------------------*/
@media screen and (max-width: 767px){
	.nav-list__link{
		&.has_icon{
			display: flex;
			align-items: center;
			span.icon_new{
				top:0;
				order:1;
			}
		}
	}
}
.icon_new{
	display: inline-block;
	background: #aa0707;
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 4px;
	margin:0 10px;
	position: relative;
	top: -3px;
}
#success{
    .success-inner{
        width: 90%;
        max-width: 960px;
        margin: 50px auto;
		.success-stories-box{
			background: #eaebef;
			padding: 20px;

		}
		
        .success-items{
                display: flex;
                gap:30px;
                flex-wrap:wrap;
            .success-item{
                width: calc(calc(100% - 60px) / 3);
				@media screen and (max-width: 767px){
					width: 100%;
					
				}
                a{
                    display: flex;
                    flex-direction: column;
                    gap:10px;
					height: 100%;
                    .success-item__txt{
						display: flex;
						flex-direction: column;
						gap:15px;
                        .success-item__ttl{
                            font-size: var(--fs24);
                            font-weight: 600;
                            letter-spacing: -0.025em;
                            color: #309ccf;
							text-align: center;
                        }
						.success-item__desc{
							font-size: var(--fs18);
							font-weight: normal;
							color: #2d1212;
						
						}
						.success-item__date{
							font-size: var(--fs15);
							font-weight: bold;
							color: #171717;
						}
						.success-item__place{
							font-size: var(--fs18);
							font-weight: normal;
							color: #171717;
						}
                    }
					.detail-btn{
						position: static;
						margin-top: auto;
						width: 100%;
						padding: 9px 0;
						color: #fff;
						font-weight: 600;
						text-align: center;
						background: #2c6bb9;
						border: 1px solid #2c6bb9;
						box-sizing: border-box;
						border-radius: 30px;
						transition: .2s;
					}
					&:hover .detail-btn {
						color: #2c6bb9;
						background: #fff;
					}
                }
            }
        }
    }
}
