@charset "utf-8";
:root{
	--gblue: #8ec2d7;
	--ggray: #e0e0e0;
	--glgray: #ececec;
	--gdgray: #d0d0d0;
	--eng: #cba06b;
	--inf: #6c90c1;
	--env: #5bb1b1;
	--beige: #fff8eb;
    --orange: rgba(237, 131, 57, 1);
    --orange90: rgba(237, 131, 57, 0.9);
    --orange30: rgba(237, 131, 57, 0.3);
    --orange20: rgba(237, 131, 57, 0.2);
    --orange10: rgba(237, 131, 57, 0.1);
}
@font-face { 
	font-family: 'league';
	src: url('font/league.woff2') format('woff2');
	font-display: swap;
}
.goverlay{
    background: rgba(0,0,0,0.7) !important;
}
.glightbox{
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.2);
}
.en{
  font-family: "league", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.contents:has(>.guide) {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0;
}

/*HEADLINE*/
.guide-header{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}
.guide-num{
    font-size: clamp(38px, 8vw, 120px);
    color: var(--black);
    width: 2em;
    margin-bottom: 0.2em;
}
.guide-num_small{
    font-size: clamp(24px, 3vw, 44px) !important;
}
.guide-title{
    padding-bottom: 0.5em;
    flex: 1;
}
.guide-h3{
    font-size: clamp(24px, 3vw, 42px);
    margin-bottom: 0.2em;
    line-height: 1.3;
}
.guide-h3 small{
    font-size: clamp(16px, 1.5vw, 24px);
}
.guide-h4{
    font-size: clamp(16px, 1.4vw, 21px);
    line-height: 1;
}
.guide-h5{
    display: flex;
    align-items: center;
    margin-bottom: 1.5em;
}
.guide-h5 span{
    font-size: clamp(21px, 2vw, 28px);
    padding: 0 0.3em;
}
.guide-h5:before,
.guide-h5:after{
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background: var(--gray8);
}
.guide-h3 br,
.guide-lead br{
    display: none;
}
@media screen and (max-width: 980px) {
    .guide-header{
        display: block;
        text-align: center;
    }
    .guide-num{
        width: 100% !important;
        font-size: 78px;
        margin-bottom: 0.1em;
    }
    .guide-title{
        width: 100%;
        flex: initial;
        text-align: center;
        padding-bottom: 0;
    }
    .guide-h3{
        margin-bottom: 0.5em; 
    }
    .guide-lead{
        margin-bottom: 1em !important;
    }
    .guide-lead br{
        display: block;
    }
}

/*MORE*/
.guide-more{
    font-size: clamp(16px, 1.4vw, 21px);
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background: var(--red);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
}
.guide-more span{
    color: #fff;
    display: block;
    line-height: 1.3;
    font-size: clamp(16px, 1.4vw, 21px);
}

/*BANNER*/
.guide-banner{
    display: flex;
    justify-content: space-between;
    background: #fff;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.3));
    margin-bottom: 1em;
}
.guide-banner_thumb{
    width: 100px;
}
.guide-banner_text{
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 1em;
}
.guide-banner_text b{
    font-weight: 700;
    line-height: 1.2;
}
.guide-banner_text small{
    display: block;
    margin-top: 0.2em;
}
.guide-banner:after{
    content: "さらに詳しく";
    writing-mode: vertical-rl;
    font-size: 11px;
    text-align: center;
    padding: 0.2em 0.5em;
    background: var(--red);
    color: #fff;
    letter-spacing: 0.2px;
    font-family: "Noto Serif JP", serif;
}
.guide-banner:hover {
    background: #f0f0f0;
    filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.5));
}
@media screen and (max-width: 980px) {
    .guide-banner{
        margin-bottom: 0.5em;
    }
    .guide-banner_thumb{
        width: 80px;
    }
}

/*LINK*/
.guide-link{
    display: flex;
    justify-content: space-between;
    background: #fff;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.3));
    margin-bottom: 0.5em;
}
.guide-link span{
    flex: 1;
    padding: 1em;
    line-height: 1.3;
    display: flex;
    align-items: center;
}
.guide-link:after{
    content: "→";
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--red);
    color: #fff;
    width: 3em;
}
.guide-link:hover {
    background: #f0f0f0;
    filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.4));
}
.guide-link_thumb{
    flex: initial !important;
    width: 80px;
    margin-right: 1em;
}
.guide-link_thumb img{
    object-fit: cover;
    aspect-ratio: 2 / 1;
}
@media screen and (max-width: 1280px) {
    .guide-link:after{
        width: 2em;
    }
}

/*MV*/
.guide-mv{
	width: 100%;
	height: 40vh;
	min-height: 480px;
	background: url("img/mv.webp") center right;
	background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
}
@media screen and (max-width: 680px) {
    .guide-mv{
        align-items: flex-end;
        height: 330px;
        min-height: inherit;
        margin-bottom: 5em !important;
    }
}
@media screen and (max-width: 480px) {
    .guide-mv{
        height: 230px;
    }
}

/*21*/
.guide21-h3{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto -2.3em;;
    z-index: 10;
    position: relative;
}
.guide21-h3 span{
    background: #fff;
}
.guide21-h3 b{
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: 0.1em;
}
.guide21-h3 small{
    display: block;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.3;
    margin-bottom: 0.2em;
}
.guide21-h3 small br{
    display: none;
}
.guide21-h3:before,
.guide21-h3:after{
    content: "";
    display: block;
    width: 5em;
    height: 4em;
    background: url("img/arrow.svg") center / contain no-repeat  #fff;
}
.guide21-wrap{
    display: grid;
    grid-template-columns: 30em 1fr;
    gap: 0 2em;
    padding: 5.3em 3em 2em;
    border: 1px solid var(--black);
    position: relative;
}
.guide21-wrap:before,
.guide21-wrap:after{
    content: "";
    width: 5em;
    height: 5em;
    position: absolute;
}
.guide21-wrap:before{
    top: 0;
    right: 0;
    border-top: 10px solid #000;
    border-right: 10px solid #000;
}
.guide21-wrap:after{
    left: 0;
    bottom: 0;
    border-bottom: 10px solid #000;
    border-left: 10px solid #000;
}
.guide21-img p{
    text-align: center;
    margin-bottom: 0.5em;
}
.guide21-img p br{
    display: none;
}
.guide21-content_p b{
    display: block;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 700;
    margin-bottom: 0.5em;
}
.guide21-content_p b br{
    display: none;
}
.guide21-h4{
    font-size: clamp(16px, 1.4vw, 21px);
    font-weight: 700;
}
.guide21-h4 b{
    font-size: 200%;
    padding-right: 0.1em;
}
.guide21-merit_item{
    display: grid;
    grid-template-columns: 5em 1fr;
    margin-bottom: 0.5em;
}
.guide21-merit_point{
    background: var(--black);
    padding: 0.7em 0 0.3em;
}
.guide21-merit_point small,
.guide21-merit_point b{
    color: #fff;
    display: block;
    text-align: center;
    line-height: 1.1;
}
.guide21-merit_point b{
    font-size: clamp(24px, 2.1vw, 38px);
}
.guide21-merit_item p{
    display: flex;
    align-items: center;
    padding: 0 1em;
    border: 1px solid var(--black);
    line-height: 1.3;
}
@media screen and (max-width: 1280px) {
    .guide21-content_p b br{
        display: block;
    }
    .guide21-content_p br{
        display: none;
    }
}
@media screen and (max-width: 980px) {
    .guide21-wrap{
        grid-template-columns: 20em 1fr;
        gap: 0 1em;
        padding: 4em 1em 2em;
    }
    .guide21-img p br{
        display: block;
    }
}
@media screen and (max-width: 680px) {
    .guide21-h3 b{
        letter-spacing: 0.1em;
    }
    .guide21-h3 small br{
        display: block;
    }
    .guide21-h3:before,
    .guide21-h3:after{
        width: 4em;
        height: 3em;
    }
    .guide21-h3 span{
        padding: 0 0.1em;
    }
    .guide21-content_p{
        margin-bottom: 1em !important;
    }
    .guide21-wrap{
        grid-template-columns: 1fr;
        padding: 4em 1em 1em;
    }
    .guide21-img{
        grid-row: 2;
        margin-top: 2em;
    }
    .guide21-wrap:before{
        display: none;
    }
    .guide21-merit_item p{
        padding: 0 0.5em;
    }
    .guide21-h4{
        text-align: center;
    }
}


/*01-06*/
.guide01-04 .guide-num{
    width: 1.5em;
}
.guide01-04_wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 90%;
}
.guide01-04_wrap a{
    width: 49%;
}
.guide01-04_wire{
    width: 85%;
    margin: -9em 0 0 auto;
    background: var(--dgray);
    padding: 10em 3em 2em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.guide01-04_banners{
    width: 22em;
    margin-left: 1em;
}
.guide01-04_banners .guide-banner{
    margin-bottom: 0;
}
@media screen and (max-width: 780px) {
    .guide01-04{
        width: 100%;
    }
    .guide01-04_wrap{
        width: 95%;
        margin: 0 auto;
    }
    .guide01-04_wrap a {
        width: 70%;
    }
    .guide01-04_wrap a:nth-child(2){
        margin: -7em 0 -4em auto;
    }
    .guide01-04_wire{
        width: 100%;
        margin: -4em 0 0 auto;
        padding: 10em 2.5% 2em;
    }
}
@media screen and (max-width: 680px) {
    .guide01-04{
        background: linear-gradient(180deg, #fff 0%, #fff 45%, var(--gblue) 45%, var(--gblue) 100%);
    }
    .guide01-04 .guide-header{
        width: 95%;
        margin: 0 auto;
    }
    .guide01-04 .guide-h3 br{
        display: block;
    }
    .guide01-04 .guide-lead{
        text-align: left;
    }
    .guide01-04 .guide-lead br{
        display: none;
    }
    .guide01-04_wrap{
        width: 95%;
        margin: 0 auto;
    }
    .guide01-04_wrap a {
        width: 80%;
    }
}
@media screen and (max-width: 480px) {
    .guide01-04_wire{
        padding: 3em 2.5%;
        display: block;
    }
    .guide01-04_banners {
        margin: 0 0 0 auto;
    }
}

/*05-14*/
.guide05-14{
    padding-bottom: 8em;
    background: linear-gradient(180deg, transparent 0%, transparent 15%, #ddd 15%, #ddd 100%);
    position: relative;
}
.guide05-14:before,
.guide05-14:after{
    content: "";
    display: block;
    width: 100%;
    height: 85%;
    position: absolute;
    bottom: 0;
    opacity: 0.2;
}
.guide05-14:before{
    background: url("img/mhub_bk_left.png") repeat-y center left;
    background-size: contain;
    left: 0;
}
.guide05-14:after{
    background: url("img/mhub_bk_right.png") repeat-y center right;
    background-size: contain;
    right: 0;
}
.guide05-14 .guide-num{
    width: 1.8em;
}
.guide05-14_wrap{
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}
.guide05-14_item{
    width: 60%;
}
.guide05-14_img{
    display: block;
    width: 60%;
}
.guide05-14_img:first-child{
    width: 80%;
}
.guide05-14_img:nth-child(2){
    margin: -30% 0 0 auto;
}
.guide05-14 .guide-more{
    margin: 4em 0.5em 0;
}
.guide05-14_banners{
    flex: 1;
    padding-top: 10%;
}
.guide05-14_fab{
    margin: 0 0 0 auto;
}
.guide05-14_fab .guide05-14_item{
    order: 2;
}
.guide05-14_fab .guide-more{
    order: 1;
}
.guide05-14_fab .guide05-14_banners{
    order: 0;
}
.guide05-14_fab,
.guide05-14_nex{
    margin-top: -2vw;
}
.guide05-14_nex .guide05-14_img{
    width: 100%;
}
@media screen and (max-width: 1280px) {
    .guide05-14_wrap{
        width: 100%;
    }
}
@media screen and (max-width: 980px) {
    .guide05-14_item {
        width: 50%;
    }
    .guide05-14_fab,
    .guide05-14_nex{
        margin-top: 2em;
    }
}
@media screen and (max-width: 780px) {
    .guide05-14_wrap {
        justify-content: flex-end;
    }
    .guide05-14 .guide-more {
        margin: 0 0.5em;
    }
    .guide05-14_item{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap:1em;
    }
    .guide05-14_img {
        width: 100% !important;
        margin: 0 !important;
    }
    .guide05-14_banners {
        flex: inherit;
        padding-top: 1em;
        max-width: 420px;
    }
    .guide05-14_fab {
        justify-content: flex-start;
    }
    .guide05-14_fab .guide05-14_item{
        order: 0;
    }
    .guide05-14_fab .guide-more{
        order: 2;
    }
    .guide05-14_fab .guide05-14_banners{
        order: 1;
    }
}
@media screen and (max-width: 580px) {
    .guide05-14{
        padding-bottom: 5em;
    }
    .guide05-14_item{
        display: flex;
        flex-direction: column;
    }
    .guide05-14_img{
        width: 80% !important;
    }
    .guide05-14_img:nth-child(2){
        margin: -30% 0 0 auto !important;
    }
    .guide05-14_banners{
        width: 90%;
    }
    .guide05-14 .guide-more {
        margin: -4em auto 0 0;
    }
    .guide05-14_fab .guide-more{
        margin: -4em 0 0 auto;
    }
    .guide05-14_nex .guide-more {
        margin: 0.5em;
    }
    .guide05-14 .guide-more {
        margin: -6em auto 0 0;
    }
    .guide05-14_fab {
        justify-content: flex-end;
    }
    .guide05-14_fab .guide-more {
        order: 1;
    }
    .guide05-14_fab .guide05-14_banners{
        order: 2;
    }
    .guide05-14_nex .guide-more {
        margin: -6em 0 0 auto;
    }
}

/*15-18*/
.guide15-18 .guide-wrap{
    position: relative;
}
.guide15-18 .guide-header:before,
.guide15-18 .guide-wrap:before{
    content: "";
    width: 10em;
    height: 5em;
    position: absolute;
}
.guide15-18 .guide-header:before{
    top: 0;
    right: 0;
    border-top: 10px solid #000;
    border-right: 10px solid #000;
}
.guide15-18 .guide-wrap:before{
    left: 0;
    bottom: 0;
    border-bottom: 10px solid #000;
    border-left: 10px solid #000;
}
.guide15-18_wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.guide15-18_wrap a{
    width: 49%;
}
.guide15-18_wire{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 980px;
    margin: 3em 0 0 auto !important;
    position: relative;
}
.guide15-18_banners{
    margin-left: 1em;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}
.guide15-18_banners .guide-banner{
    margin-bottom: 0;
}
@media screen and (max-width: 1280px) {
    .guide15-18 .guide-header:before,
    .guide15-18 .guide-wrap:before{
        width: 5em;
    }
}
@media screen and (max-width: 680px) {
    .guide15-18 .guide-header:before,
    .guide15-18 .guide-wrap:before{
        width: 3em;
        height: 3em;
    }
    .guide15-18_wire{
        width: 100%;
        margin-top: 1em !important;
    }
    .guide15-18_wrap a{
        width: 80%;
    }
    .guide15-18_wrap a:nth-child(2){
        margin: -5em 0 0 auto;
    }
    .guide15-18_banners {
        grid-template-columns: 1fr;
        gap:0.5em;
        margin-left: 0.5em;
    }
}

/*19-20*/
.guide19-20{
    background: var(--egray);
    position: relative;
}
.guide19-20:before,
.guide19-20:after {
    content: "";
    display: block;
    height: 25vw;
    position: absolute;
}
.guide19-20:before{
    width: 35vw;
    background: url(img/dotto.png) center / 35% repeat;
    top: -3em;
    left: 0;
}
.guide19-20:after{
    width: 55vw;
    background: url(img/dotto.png) center / 20% repeat;
    bottom: -4em;
    right: 0;
}
.guide19-20_wrap{
    display: grid;
    grid-template-columns: 40% 10em 1fr;
    align-items: flex-start;
    position: relative;
    z-index: 3;
}
.guide19-20_img{
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    gap:0 0.5em;
}
.guide19-20 .guide-more{
    margin: 0 auto;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.guide19-20_banners{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}
.guide19-20_movies{
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    margin: 1em 0 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.guide19-20_movies .guide-h4{
    width: 100%;
    margin-bottom: 0.5em;
}
.guide19-20_movies a{
    width: 49%;
    margin-bottom: 1em;
}
@media screen and (max-width: 1280px) {
    .guide19-20:after{
        width: 75vw;
    }
    .guide19-20_wrap{
        grid-template-columns: 40% 8em 1fr;
    }
    .guide19-20_banners{
        grid-template-columns: 1fr;
        gap: 0.5em;
        margin-bottom: 1em;
    }
    .guide19-20_banners .guide-banner{
        margin-bottom: 0;
    }
}
@media screen and (max-width: 980px) {
    .guide19-20:before{
        width: 45vw;
        top: -2em;
    }
    .guide19-20:after{
        width: 80vw;
        bottom: -2em;
    }
    .guide19-20_wrap{
        grid-template-columns: 50% 8em 1fr;
        gap: 1em;
    }
    .guide19-20 .guide-more{
        grid-column: 2 / 4;
        grid-row: 1 / 2;
    }
    .guide19-20_banners{
        grid-column: 2 / 4;
        grid-row: 2 / 3;
        margin-bottom: 0;
    }
    .guide19-20_movies{
        grid-column: 1 / 4;
        grid-row: 3 / 4;
        padding-left: 10%;
        margin-top: 0;
    }
}
@media screen and (max-width: 580px) {
    .guide19-20:before{
        height: 60vw;
        background: url(img/dotto.png) center / 90% repeat;
    }
    .guide19-20:after{
        height: 60vw;
        background: url(img/dotto.png) center / 80% repeat;
    }
    .guide19-20_wrap{
        grid-template-columns: 7em 1fr;
        gap: 1em 0.5em;
    }
    .guide19-20_img {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        width: 80%;
    }
    .guide19-20 .guide-more{
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .guide19-20_banners{
        grid-column: 2 / 3;
    }
    .guide19-20_movies{
        grid-column: 1 / 3;
    }
}

/*23-26*/
.guide23-26 .guide-num{
    width: 2.2em;
}
.guide23-26_wrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 90%;
}
.guide23-26_wrap a{
    width: 49%;
}
.guide23-26_wire{
    width: 80%;
    margin: -7em 0 0 auto;
    background: linear-gradient(60deg, #a4cfc1, #61bfdf, #6a79c7);
    padding: 10em 3em 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.guide23-26_banners{
    margin-left: 1em;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}
.guide23-26_banners .guide-banner{
    margin-bottom: 0;
}
@media screen and (max-width: 1280px) {
    .guide23-26_wire{
        width: 97%;
        padding: 10em 1em 3em;
    }
    .guide23-26_banners{
        gap: 0.5em;
    } 
}
@media screen and (max-width: 980px) {
    .guide23-26 .guide-lead{
        text-align: center;
    }
    .guide23-26_wrap {
        width: 92%;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .guide23-26_wire{
        display: block;
        width: 100%;
        padding: 7em 1em 2em;
    }
    .guide23-26_banners{
        margin-left: 0;
    }
    .guide23-26_wire .guide-more {
        margin: -1em auto 0.5em;
    }
}
@media screen and (max-width: 780px) {
    .guide23-26{
        width: 100%;
    }
    .guide-header,
    .guide23-26_wrap{
        width: 95%;
        margin: 0 auto;
    }
    .guide23-26_wrap a {
        width: 70%;
    }
    .guide23-26_wrap a:nth-child(2){
        margin: -7em 0 -4em auto;
    }
    .guide23-26_wrap a:nth-child(3){
        margin: 0 auto 0 8%;
    }
    .guide23-26_banners .guide-banner{
        margin: 0 auto 0.5em;
    }
    .guide23-26_wire{
        display: flex;
        align-items: flex-start;
        margin: 0;
        padding: 5em 1em 2em;
    }
    .guide23-26_wire .guide-more {
        margin: -1em auto 0.5em 0;
    }
    .guide23-26_banners {
        display: block;
        margin: 0 0 0 auto;
        max-width: 100%;
        padding-left: 0.5em;
    }
}
@media screen and (max-width: 680px) {
    .guide23-26 .guide-h3 br{
        display: block;
    }
    .guide23-26 .guide-lead{
        text-align: left;
    }
}

/*27-52*/
.guide27-52{
    background: var(--dgray);
}
.guide27-52 .guide-wrap:before{
    background: #fff;
    z-index: 0;
}
.guide27-52 .guide-num{
    width: 2.2em;
}
.guide27-52_wrap{
    background: url("img/dotto.png") top right / 10% #fafafa;
    padding: 5em;
    position: relative;
    z-index: 2;
}
.guide27-52_wrap:before,
.guide27-52_wrap:after{
    content: "";
    width: 5em;
    height: 5em;
    position: absolute;
}
.guide27-52_wrap:before{
    top: 0;
    right: 0;
    border-top: 10px solid #000;
    border-right: 10px solid #000;
}
.guide27-52_wrap:after{
    left: 0;
    bottom: 0;
    border-bottom: 10px solid #000;
    border-left: 10px solid #000;
}
.guide27-52_index{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 3em;
    position: relative;
    z-index: 3;
}
.guide27-52_img{
    width: 35%;
}
.guide27-52 .guide-more{
    margin: auto 0.5em;
}
.guide27-52_banners{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.guide27-52_banners .guide-banner{
    width: 49%;
    min-width: 230px;
}
.guide27-52_list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.guide27-52_ol{
    width: 49%;
}
.guide27-52_ol li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}
.guide27-52_thumb{
    width: clamp(110px, 15vw, 120px);
    flex-shrink: 0;
}
.guide27-52_link{
    flex: 1;
    margin-left: 1em;
}
.guide27-52_link a{
    display: block;
    margin-top: 0.5em;
    padding-right: 1em;
    font-size: clamp(12px, 1.1vw, 14px);
    color: var(--black);
    text-decoration: underline;
    word-break: break-word;
    overflow-wrap: break-word;
}
.guide27-52_link a:after{
    content: "▶";
    color: var(--red);
    font-size: 10px;
    text-decoration: none;
}
.guide27-52_link a:hover{
    color: var(--red);
}
@media screen and (max-width: 1280px) {
    .guide27-52_wrap{
        padding: 5em 1em;
    }
    .guide27-52_index{
        align-items: flex-start;
    }
    .guide27-52_img{
        width: 50%;
    }
    .guide27-52_banners .guide-banner {
        width: 100%;
    }
}
@media screen and (max-width: 980px) {
    .guide27-52_ol .guide-num {
        display: block;
    }
}
@media screen and (max-width: 780px) {
    .guide27-52_wrap{
        padding: 3em 1em;
        background-size: 20%;
        text-align: center;
    }
    .guide27-52_wrap:before,
    .guide27-52_wrap:after {
        width: 3em;
        height: 3em;
    }
    .guide27-52_index{
        justify-content: flex-start;
        align-items: flex-end;
        text-align: left;
    }
    .guide27-52_img{
        width: 80%;
    }
    .guide27-52 .guide-more {
        margin: auto auto -2.5em -2.5em;
    }
    .guide27-52_banners{
        flex: initial;
        width: 85%;
        margin: 1em 0 0 auto;
    }
    .guide27-52_list{
        display: inline-block;
        text-align: left;
    }
    .guide27-52_ol{
        width: inherit;
    }
}

/*53-56*/
.guide53-56{
    position: relative;
    z-index: 2;
}
.guide53-56:before{
    content: "";
    display: block;
    background: var(--black);
    position: absolute;
    z-index: -1;
    width: 30vw;
    height: 1em;
    top: 0;
    right: 0;
}
.guide53-56:after{
    content: "";
    display: block;
    background: url(img/dotto.png) top right / 80% repeat;
    width: 30vw;
    height: 30vw;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
}
.guide53-56 .guide-num{
    width: 2.2em;
}
.guide53-56_wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    position: relative;
    z-index: 3;
}
.guide53-56 .guide-more{
    margin: -3em auto 0.5em;
    position: relative;
    z-index: 4;
}
.guide53-56_banners{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5em;
}
.guide53-56_banners .guide-banner{
    margin-bottom: 0;
}
@media screen and (max-width: 980px) {
    .guide53-56:after{
        background: url(img/dotto.png) top right / 50% repeat;
        width: 60vw;
        height: 60vw;
    }
    .guide53-56_banners{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 680px) {
    .guide53-56:after{
        height: 100vw;
    }
    .guide53-56_wrap{
        display: block;
    }
    .guide53-56_img{
        display: block;
        width: 80%;
    }
    .guide53-56_img:nth-child(2){
        margin: -5em 0 0 auto;
    }
}
@media screen and (max-width: 480px) {
    .guide53-56:after{
        height: 200vw;
    }
    .guide53-56_banners{
        display: block;
        width: 80%;
        margin: 0 0 0 auto;
    }
    .guide53-56_banners .guide-banner{
        margin-bottom: 0.5em;
    }
}

/*57-62*/
.guide57-62{
    position: relative;
}
.guide57-62:after {
    content: "";
    display: block;
    background: url(img/dotto.png) top right / 30% repeat;
    width: 55vw;
    height: 30vw;
    position: absolute;
    z-index: -1;
    bottom: 0;
    right: 0;
}
.guide57-62-wrap{
    display: flex;
    justify-content: space-between;
}
.guide57-62 .guide-wrap:before{
    z-index: 0;
}
.guide57-62_item{
    width: 31%;
    position: relative;
    z-index: 2;
}
.guide57-62_links{
    margin-top: 1em;
    width: 82%;
}
@media screen and (max-width: 1280px) {
    .guide57-62:after {
        background: url(img/dotto.png) top right / 50% repeat;
    }
    .guide57-62_links{
        width: 100%;
    }
    .guide57-62_links .guide-link:after{
        width: 2em;
    }
}
@media screen and (max-width: 980px) {
    .guide57-62:after {
        background: url(img/dotto.png) top right / 30% repeat;
        width: 70vw;
        height: 80%;
    }
    .guide57-62-wrap{
        display: block;
    }
    .guide57-62_item{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 2em;
    }
    .guide57-62_item .guide-h4{
        width: 100%;
        font-size: 170%;
    }
    .guide57-62_item .guide-num {
        font-size: 170% !important;
    }
    .guide57-62_thumb{
        display: block;
        width: 50%;
    }
    .guide57-62_links{
        width: 49%;
    }
    .guide57-62_links{
        margin: 0 0 1em  0
    }
}
@media screen and (max-width: 680px) {
    .guide57-62:after {
        background: url(img/dotto.png) top right / 50% repeat;
        height: 90%;
    }
    .guide57-62_item{
        display: block;
    }
    .guide57-62_thumb{
        width: 80%;
    }
    .guide57-62_links{
        width: 85%;
        margin: 1em 0 2em auto;
    }
}

/*63-64*/
.guide63-64{
    background: var(--orange10);
    position: relative;
}
.guide63-64:before{
    content: "JCD";
    font-size: 40vw;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    line-height: 0.7em;
    font-family: "league", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.guide63-64 .guide-header{
    justify-content: center;
}
.guide63-64 .guide-h3 {
    font-size: clamp(18px, 2vw, 32px);
}
.guide63-64 .guide-title{
    flex: initial;
}
.guide63-64 .guide-h3{
    color: var(--orange);
}
.guide63-64 .guide-num{
    width: 2.2em;
    color: var(--orange);
}
.guide63-64 .guide-banner:after{
    background: var(--orange);
}
.guide63-64_wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.guide63-64_header{
    width: 45%;
    margin: 0 1em;
    padding-bottom: 1em;
}
.guide63-64_banners{
    flex: 1;
    position: relative;
}
.guide63-64_banners .guide-more{
    margin: 0 auto 0.5em;
    background: var(--orange);
    z-index: 10;
}
.guide63-64_info{
    margin-top: 3em;
    padding-bottom: 5em;
}
.guide63-64_info--ol{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}
.guide63-64_info--ol li{
    width: 19%;
}
.guide63-64_info--ol img{
    object-fit: cover;
    aspect-ratio: 1.7 / 1;
}
.guide63-64_info--ol p{
    margin-top: 0.5em;
    font-size: clamp(12px, 1.1vw, 14px);
    line-height: 1.3;
}
@media screen and (max-width: 1280px) {
    .guide63-64:before{
        font-size: 50vw;
    }
    .guide63-64 .guide-banner_thumb {
        width: 80px;
    }
    .guide63-64_info--ol li{
        width: 24%;
    }
    .guide63-64_info--ol li:last-child{
        display: none;
    }
}
@media screen and (max-width: 980px) {
    .guide63-64 .guide-header{
        width: 80%;
        max-width: 680px;
        margin: 0 auto;
        order: 0;
    }
    .guide63-64_banners{
        width: 49%;
        flex: initial;
        order: 1;
        padding-top: 5em;
    }
    .guide63-64_info{
        order: 3;
    }
    .guide63-64_banners .guide-more {
        margin: 0;
        position: absolute;
        top: -2em;
        right: -3em;
        z-index: 5;
    }
}
@media screen and (max-width: 780px) {
    .guide63-64:before{
        font-size: 60vw;
    }
    .guide63-64_info--ol li{
        width: 49%;
        margin-bottom: 2em !important;
    }
}
@media screen and (max-width: 680px) {
    .guide63-64:before{
        font-size: 70vw;
    }
    .guide63-64 .guide-header{
        width: 95%;
    }
    .guide63-64_banners{
        width: 100%;
        margin: 0 0 0 auto;
        padding: 0;
    }
    .guide63-64_banners .guide-more {
        position: absolute;
        top: -2em;
        right: inherit;
        left: 0;
    }
    .guide63-64_banners .guide-banner{
        width: 80%;
        margin: 0 0 0.5em auto;
    }
}

/*65-74*/
.guide65-74{
    position: relative;
}
.guide65-74:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--egray);
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0% 0%, 70% 0%, 100% 100%, 30% 100%);
}
.guide65-74_a{
    color: var(--black);
    display: block;
    text-align: right;
    margin: 1em 0;
}
.guide65-74_a:hover{
    color: var(--red);
    text-decoration: underline;
}
.guide65-74 .guide-wrap{
    padding-bottom: 5em;
}
.guide65-74 .guide-num{
    width: 2.2em;
    font-size: clamp(38px, 8vw, 90px);
}
.guide65-74_wrap{
    margin-bottom: 1em;
}
.guide65-74_inner{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
}
.guide65-74_link,
.guide65-74_banners,
.guide65-74_img{
    width: 48%;
}
.guide65-74_banners{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.guide65-74_banners .guide-banner{
    width: 49%;
}
.guide65-74_banners .guide-link{
    width: 49%;
}
.guide65-74_wrap:nth-child(even) .guide65-74_img{
    order: 1;  
}
.guide65-74_wrap:nth-child(even) .guide-header{
    justify-content: flex-end;
}
.guide65-74_wrap:nth-child(even) .guide-title{
    flex: initial;
}
.guide65-74_link .guide-h4{
    margin-bottom: 0.5em;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.guide65-74_link .guide-h4 a{
    text-decoration: underline;
    font-weight: 400;
}
.guide65-74_link .guide-h4 a:hover{
    color: var(--red);
}
.guide65-74_banners .guide-link span{
    padding: 0;
}
.guide65-74_wrap:last-of-type{
    margin-bottom: 0;
}
.guide73-74_banners{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5em 1em;
}
.guide73-74_banners .guide-banner{
    margin-bottom: 0;
}
.guide73-74_banners .guide-link,
.guide73-74_banners .guide-banner{
    width: 100%;
}
.guide73-74_banners .guide-banner:first-child{
    grid-column: 1 / 3;
}
.guide73-74_banners .guide-banner:nth-child(9),
.guide73-74_banners .guide-banner:nth-child(10){
    grid-row: 6;
}
@media screen and (max-width: 1280px) {
    .guide65-74_img{
        width: 40%;
    }
    .guide65-74_link,
    .guide65-74_banners{
        width: 57%;
    }
}
@media screen and (max-width: 980px) {
    .guide65-74_img{
        width: 58%;
    }
    .guide65-74_link,
    .guide65-74_banners{
        width: 40%;
    }
    .guide65-74_banners .guide-link,
    .guide65-74_banners .guide-banner{
        width: 100%;
    }
    .guide65-74_wrap {
        margin-bottom: 3em;
    }
}
@media screen and (max-width: 780px) {
    .guide65-74{
        background: var(--egray);
    }
    .guide65-74:before{
        display: none;
    }
    .guide65-74_wrap{
        display: block;
    }
    .guide65-74_img{
        display: block;
        width: 80%;
    }
    .guide65-74_wrap:nth-child(even) .guide65-74_img{
        order: 0;  
    }
    .guide65-74_banners{
        width: 80%;
        margin: 1em 0 0 auto;
    }
    .guide65-74_link{
        width: 80%;
        margin: 1em 0 0 auto;
    }
}
@media screen and (max-width: 680px) {
    .guide73-74_banners{
        display: block;
    }
    .guide73-74_banners .guide-banner{
        margin-bottom: 0.5em;
    }
    .guide73-74_banners .guide-link{
        width: 90%;
        margin: 0 0 0.5em auto;
    }
}
@media screen and (max-width: 480px) {
    .guide65-74 .guide-wrap {
        padding-bottom: 2em;
    }
    .guide65-74_img,
    .guide65-74_banners,
    .guide65-74_link{
        width: 90%;
    }
}

/*75-76*/
.guide75-76{
    background: url(img/dotto.png) top right / 10% #fafafa;
}
.guide75-76_wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 5em;
}
.guide75-76_wrap:before,
.guide75-76_wrap:after{
    content: "";
    width: 5em;
    height: 5em;
    position: absolute;
}
.guide75-76_wrap:before{
    top: 0;
    right: 0;
    border-top: 10px solid #000;
    border-right: 10px solid #000;
}
.guide75-76_wrap:after{
    left: 0;
    bottom: 0;
    border-bottom: 10px solid #000;
    border-left: 10px solid #000;
}
.guide75-76_thumb{
    width: 49%;
}
.guide75-76_inner{
    flex: 1;
    margin-left: 2em;
}
.guide75-76_inner .guide-more{
    margin: -5em auto 1em;
}
.guide75-76_banners{
    flex: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.guide75-76_banners .guide-banner{
    width: 49%;
}
@media screen and (max-width: 1280px) {
    .guide75-76_wrap{
        padding: 4em 2em;
    }
    .guide75-76_wrap:before,
    .guide75-76_wrap:after{
        width: 3em;
        height: 3em;
    }
    .guide75-76_thumb{
        width: 40%;
    }
}
@media screen and (max-width: 980px) {
    .guide75-76_thumb{
        width: 80%;
    }
    .guide75-76_inner .guide-more{
        margin: -0.5em auto;
    }
    .guide75-76_banners{
        width: 80%;
        flex: initial;
        margin: 0 0 0 auto;
    }
}
@media screen and (max-width: 780px) {
    .guide75-76{
        background: url(img/dotto.png) top right / 20% #fafafa;
    }
    .guide75-76_wrap{
        padding: 4em 1em;
    }
    .guide75-76_thumb{
        width: 90%;
    }
    .guide75-76_banners{
        width: 100%;
    }
}
@media screen and (max-width: 680px) {
    .guide75-76{
        background: url(img/dotto.png) top right / 30% #fafafa;
    }
    .guide75-76_inner {
        margin-left: 0;
    }
    .guide75-76_thumb{
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    .guide75-76{
        background: url(img/dotto.png) top right / 40% #fafafa;
    }
    .guide75-76_banners .guide-banner{
        width: 100%;
    }
}

/*77-78*/
.guide77-78{
    background: var(--ggray);
}
.guide77-78 .guide-wrap:before{
    z-index: 1;
    background: #fff;
}
.guide77-78_wrap{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.guide77-78_thumb{
    width: 65%;
}
.guide77-78_banners{
    flex: 1;
}
.guide77-78 .guide-more{
    margin: 1em 1em 0 -1em;
}
@media screen and (max-width: 1280px) {
    .guide77-78_thumb{
        width: 60%;
    }
}
@media screen and (max-width: 980px) {
    .guide77-78_wrap{
        align-items: flex-end;
    }
    .guide77-78_thumb{
        width: calc(100% - 6em);
    }
    .guide77-78 .guide-more {
        margin: 0 auto -0.5em -1em;
    }
    .guide77-78_banners{
        flex: initial;
        width: 85%;
        margin: 1em 0 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .guide77-78_banners  .guide-banner{
        width: 49%;
    }
}
@media screen and (max-width: 680px) {
    .guide77-78_banners  .guide-banner{
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    .guide77-78 .guide-h3 {
        font-size: clamp(21px, 3vw, 42px);
    }
    .guide77-78_banners{
        width: 90%;
    }
}



/*-other*/
.guide-other_banners{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: max-content 2fr;
    gap: 1em;
}
.guide-other_banners .guide-banner{
    margin-bottom: 0 !important;
}
@media screen and (max-width: 1280px) {
    .guide-other_banners{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 880px) {
    .guide-other_banners{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 680px) {
    .guide-other_banners{
        grid-template-columns: repeat(1, 1fr);
        gap: 0.5em;
    }
}