body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    width:100%;
    min-height: 100vh;
	margin: 0px;
	padding: 0px;
    background-color: #fff;
	font-size: 16px;
	line-height: 1.5;
    box-sizing: border-box;
}
a {
    color: inherit;
    text-decoration: none;
}
button {
    background-color: #fff;
}
img {
    border-radius: 4px;
}

#top {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1030;
    margin: 0px;
    padding: 0px;
    background-color:#fff;
}
#main{
    flex:1;
}
#bottom {
    margin-top:auto;
}
#slide {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    overflow-y:auto;
    background: inherit;
    box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 1150;
}
#image.modal .modal-header {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    border-bottom: 0px;
    border-radius: 0px;
}
#image.modal .modal-body {
    padding: 50px 15px; 
}
#image.modal .modal-body .image {
    display: block; 
    width: 100%;
}
#image.modal .modal-header .modal-title {
    margin-right: auto;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#image.modal .modal-body .image img, 
#image.modal .modal-body .image video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    margin: auto;
}
#image.modal .slider-gallery-list-outer .swiper-slide img,
#image.modal .slider-gallery-list-outer .swiper-slide video {
    display: block;
    width: auto;
    height: 100%;
    margin: auto;
    object-fit: contain;
}
#image  .caption {
    display: block;
    padding: 15px;
    text-align: center;
}
#image .caption-heading h3 {
    margin: 7px;
    font-size: 18px;
}

.lead p,
.lead-detail p,
.text p,
.text-detail p,
.detail-text p{
    margin-bottom: 10px;
    line-height:1.8;
}

.caption p,
.caption-detail p,
.caption-gallery p,
.caption-gallery-detail p{
    font-size: 14px;
}

.button > a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
}

.swiper-scrollbar {
    display:none !important;
}

.slide-menu-btn {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1035;
    background-color: #2D91AA;
    font-size: 24px;
    font-weight: normal !important;
    border-radius: 20px;
    color: #fff;
}
 .slide-menu-close {
    position: absolute;
    top: 10px;
    right: 15px;
    z-index:100;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
.content-list-style .heading   h2,
.content-list-style .heading   h3,
.content-list-style .heading   h4,
.content-list-style .heading   h5 {
    font-size: 20px;
}
.content-list-style .subheading   h2,
.content-list-style .subheading   h3,
.content-list-style .subheading   h4,
.content-list-style .subheading   h5 {
    font-size: 18px;
}

/*番号アイコンのスタイル*/
.numbered > :first-child {
	display: inline-block;
	position: relative;
	padding-left: 1.6em; 
}
.numbered > :first-child::before {
	content: counter(icon-counter);
	counter-increment: icon-counter; 
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	font-weight: bold;
	font-size: 0.7em;
	text-align: center;
	border-radius: 50%; 
    background-color: #464646;
    color: #fff;
}

.no-numbered {
    position: relative;
    left: calc(-50vw + 50%);
    width: 100vw;
    box-sizing: border-box;
    padding: 0px 15px !important;
}
.no-numbered > :first-child {
    display: block;
    padding: 7px 15px !important;
    text-align: center;
}
.no-numbered > :first-child::before {
	content: none !important;
}

.bg-border-vertical::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.95em;
	width: 3px;
	z-index: -1;
    background-color: #464646;
}

.bubble-left-arrow::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 40px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid;
    border-right-color: inherit;
}
.bubble-right-arrow::before {
    content: "";
    position: absolute;
    right: -15px;
    top: 40px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid;
    border-left-color: inherit;
}

 .anchor-angle-right a::after,
 .anchor-arrow-right a::after,
 .anchor-chevron-right a::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    color: inherit;
    /*border: 2px solid;*/
    /*border-color: inherit;*/
    /*border-radius: 50%;*/
}
.anchor-angle-right a::after{
    content: "\f105";
}
.anchor-arrow-right a::after{
    content: "\f061";
}
.anchor-chevron-right a::after{
    content: "\f054"; 
}

.ranking-grid {
    counter-reset: rank;
}
 .ranking-grid .content-inner {
     position: relative;
     counter-increment: rank;
}
.ranking-grid .content-inner::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    width: 50px;
    height: 50px;
    background-color: #464646;
    /*background: url(../../../assets/img/) no-repeat;*/
    /*background-size: contain;*/
}
.ranking-grid .content-inner::after {
    content: counter(rank);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 20;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    /*font-family: ;*/
    font-size: 28px;
    font-weight: normal;
    color: #fff;
    /*transform: translateX(-4px);/* 数字だけ左へ */
}
.ranking-grid .content:first-child .content-inner::before,
.ranking-grid .content:first-child .content-inner::after {
    width: 80px;
    height: 80px;
}
.ranking-grid .content:first-child .content-inner::after {
    line-height: 80px;
    font-size: 36px;
    /*transform: translateX(-6px);*/
}


@media screen and (min-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.5;
        padding-top:97px;
    }
    h1 {
        font-size: 36px;
        font-weight: 500;
        line-height: 1.5;
    }
    h2 {
        font-size: 32px;
        font-weight: 500;
        line-height: 1.5;
    }
    h3 {
        font-size: 26px;
    	font-weight: 500;
    	line-height: 1.5;
    }
    h4 {
        font-size: 22px;
    	font-weight: 500;
    	line-height: 1.5;
    }
    h5 {
        font-size: 18px;
        font-weight: 500;
    	line-height: 1.5;
    }
    p {
        font-size: 16px;
    }
    
    #slide {
        min-width: 500px;
        max-width: 50%;
    }
  
    .ranking-grid .module-inner {
        display: grid;
        /* 左を大きく、右を2列 */
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 20px;
    }

    /* 左の大きいカード（1番）だけ高さ2マス分使う */
    .ranking-grid  .content:nth-child(1){
        grid-row: 1 / span 2; /* 1行目〜2行目 */
        grid-column: 1; /* 1列目 */
    }
    /* 右上2つ */
    .ranking-grid  .content:nth-child(2){
        grid-row: 1;
        grid-column: 2;
    }
    .ranking-grid  .content:nth-child(3){
        grid-row: 1;
        grid-column: 3;
    }
    /* 右下2つ */
    .ranking-grid .content:nth-child(4){
        grid-row: 2;
        grid-column: 2;
    }
    .ranking-grid .content:nth-child(5){
        grid-row: 2;
        grid-column: 3;
    }
}

@media screen and (max-width: 767px) {
    body {
        font-size: 16px;
        line-height: 1.5;
        word-break: break-all;
        padding-top:60px;
    }
    h1 {
        font-size: 28px;
        font-weight: 500;
        line-height: 1.5;
    }
    h2 {
        font-size: 24px;
        font-weight: 500;
        line-height: 1.5;
    }
    h3 {
        font-size: 22px;
        font-weight: 500;
        line-height: 1.5;
 	}
    h4 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5;
    }
    h5 {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
    }
    
    #slide {
        width: 100%;
    }
    
    .slide-menu-btn {
        top: 10px;
        right: 15px;
        width: 30px;
        height: 30px;
        font-size: 16px;
        border-radius: 15px;
    }
    
    .content-list-style .heading   h2,
    .content-list-style .heading   h3,
    .content-list-style .heading   h4,
    .content-list-style .heading   h5 {
        font-size: 18px;
    }
    .content-list-style .subheading   h2,
    .content-list-style .subheading   h3,
    .content-list-style .subheading   h4,
    .content-list-style .subheading   h5 {
        font-size: 16px;
    }
    
    .bg-border-vertical::before {
        left: 0.7em;
    }
    
    .bubble-left-arrow::before,
  	.bubble-right-arrow::before {
        top: 20px;
    }
    
     .ranking-grid  .content:nth-child(1){
        width:100%;
    }
    .ranking-grid .content-inner::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 10;
        width: 40px;
        height: 40px;
        background-color: #464646;
        /*background: url(../../../assets/img/) no-repeat;*/
        /*background-size: contain;*/
    }
    .ranking-grid .content-inner::after {
        content: counter(rank);
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 20;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        /*font-family: ;*/
        font-size: 22px;
        font-weight: normal;
        color: #fff;
        /*transform: translateX(-4px);/* 数字だけ左へ */
    }
    .ranking-grid .content:first-child .content-inner::before,
    .ranking-grid .content:first-child .content-inner::after {
        width: 60px;
        height: 60px;
    }
    .ranking-grid .content:first-child .content-inner::after {
        line-height: 60px;
        font-size: 28px;
        /*transform: translateX(-6px);*/
    }
}