@charset "UTF-8";
:root{
    --black: #1A1311;
    --green1:#005026;
    --green2:#009245;
    --green3:#39B54A;
    --back1:#D2E5A2;
    --back2:#A8D388;
    /*----shimanomirai----*/
    --shimaMain:#D6BF98;
    --shimaBack:#EFE8D2;
    --infomain:#009245;
    --infosub:#DDEFD2;
    --m1main:#2BAC81;
    --m1sub:#D7F1E8;
    --m1point:#94CDBA;
    --m2main:#B49119;
    --m2sub:#FFF2C4;
    --m2point:#FFDD66;
    --m3main:#D65066;
    --m3sub:#FFE9EC;
    --m3point:#F2AFB8;
    /*----size----*/
    --primeWidth:960px;    
    @media screen and (max-width: 960px) {
        --primeWidth:96%;    
    }
  }
* {
    margin:0 ;
    padding:0 ;
    -webkit-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
    box-sizing: border-box !important; 
    }
body,html {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    }
body{
    font-family: 'BIZ UDPGothic', sans-serif,"UD Shin Go Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: normal;
    word-break: break-all;
    font-size:16px;
    color:#1A1311;
    &:lang(en){
        font-size: 14px;
        word-break: normal !important;
    }
    }
a {
    text-decoration:none;
    cursor: pointer;
    display: block;
    }
p a{
    display: inline-block;
    text-decoration: underline;
}
a img {
    border:none;
    }
p,
h1,h2,h3,h4{
    line-height:1.8em;
}
img{
    display: block;
}
ul{
    list-style:none;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
    }
/*--------------Wrap--------------*/
#contentAll article.contentWrap{
    &:nth-child(odd),
    &.shimanomirai + .contentWrap{
        background: var(--back1)  url(./img/bg_olive_koi.svg) no-repeat right bottom;
    }
    &:nth-child(even){
        background: var(--back2)  url(./img/bg_olive_usu.svg) no-repeat right bottom;
    }
    &:has( + .shimanomirai){
        background: var(--back2)  url(./img/bg_olive_shima.svg) no-repeat right bottom !important;
    }
    &.shimanomirai{
        background: var(--shimaBack) url(./img/bg_olive_usu.svg) no-repeat right bottom;;
    }    
    &:last-child{
        background-image: none !important;
    }
}
article.contentWrap section{
    width: var(--primeWidth);
    margin:0 auto;
    &:not(:has(div.aboutImgWrap)){
        padding-bottom:40px;
    }
}

/*--------------header--------------*/
header{
    position: relative;
    background: url(./img/bg_top.jpg) no-repeat center / cover;
    width: 100%;
}
#language{
    position: absolute;
    top:10px;
    right:10px;
    & summary{
        position: relative;
        display: block;
        list-style: none;
        line-height: 40px;
        padding:5px 20px 5px 55px;
        border-radius: 50px;
        font-weight: bold;
        border: 3.5px solid #fff;
        color: #fff !important;
        &:before{
            position: absolute;
            display: block;
            content: "";
            width:40px;
            height: 40px;
            top:50%;
            transform: translateY(-50%);
            left:5px;
            background: url(../common/img/icon_language.svg) no-repeat center / contain;            
        }
      }
    & summary::-webkit-details-marker {
        display:none;
      }
    & summary:hover,
    & details[open] summary{
        border:3.5px solid var(--green2);
        background: var(--green2);
    }
    & details[open] summary:before{
        background: url(../common/img/icon_close.svg) no-repeat center / contain;            
    }
    & details a{
        border-radius: 50px;
        width:80%;
        line-height: 40px;
        margin:10px 0 0 auto;
        padding:5px 0;
        font-size: 0.9em;
        font-weight: bold;
        text-align: center;
        background: #fff;
        color: var(--green2);
        &:hover{
            background: var(--back1);
        }
    }
}
#topWrap{
    width:var(--primeWidth);
    margin:0 auto;
    padding:90px 0 70px 0;
    display: grid;
    grid-template-columns: 460px 1fr;
    grid-template-rows: 6em 1fr;
    column-gap: 30px;
    & > img{
        grid-column: 1 / 1;
        grid-row: 1 / 3;
        width:100%;
    }
    & .topLead{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        & h1{
            font-size:1.5em;
            color: var(--back1);
        }
    }
    & .topText{
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        font-weight: bold;
        color: #fff;
    }
}

/*--------------content--------------*/
.contTitle{
    position: relative;
    width:fit-content;
    margin:0 auto;
    & h2{
        padding:40px;
        font-weight: bold;
    }
    & h2::before,
    & h2::after{
        position: absolute;
        content: "";
        display: block;
        width:25px;
        height: 30px;
        top:50%;
        transform: translateY(-50%);
    }
    & h2::before{
        left:0;
        background: url(./img/subtitle_left.svg) no-repeat center / contain;
    }
    & h2::after{
        right:0;
        background: url(./img/subtitle_right.svg) no-repeat center / contain;
    }
}
.aboutImgWrap{
    display: flex;
    justify-content: space-between;
    margin-top:30px;
    & img{
        border-radius: 10px 10px 0 0 ;
    }
}
.keyImgWrap{
    display: grid;
    grid-template-columns: 550px 1fr;
    grid-template-rows: 1fr;
    column-gap: 15px;
    margin-bottom:30px;
    & img.keyImg{
        width: 100%;
        grid-column: 1/1;
        grid-row: 1/3;
        border-radius: 10px;
    }
    & .keyImgText{
        grid-column: 2/3;
        grid-row: 1/2;        
        &:lang(en){
            font-size:90%;
        }
    }
    & img.people{
        grid-column: 2/3;
        grid-row: 2/3;
        margin-left:-30px;
    }
}

a.ticketContWrap{
    position: relative;
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: minmax(1.5em, auto) 1fr;
    column-gap: 12px;
    padding:12px 50px 12px 12px;
    margin-bottom:20px;
    border-radius: 10px;
    background: #fff;
    color: var(--black);
    box-shadow: 0px 3px 0px rgba(0, 80, 38, 0.35);
    border:3px solid #fff;
    &:hover{
        border:3px solid var(--green2);
        transition: 0.3s;
        & img.ticketTitle{
            opacity: 0.6;
            transition: 0.3s;
        }
    }
    & img.ticketTitle{
        grid-column: 1 / 2 ;
        grid-row: 1 / 3;
        width:200px;
        border-radius: 10px;
    }
    & .ticketInfoWrap{
        grid-column: 2 / 3;
        grid-row: 1 / 2 ;
        & h4{
            line-height: 1.6em !important;
            text-decoration: underline;
            font-weight: bold;
            color: var(--green1);
        }    
    }
    & .ticketTextWrap{
        grid-column: 2 / 3;
        grid-row: 2 / 3 ;
        & p{
            line-height: 1.6em !important;
        }    
        &:lang(en){
            font-size:90%;
        }
    }
    & .access{
        color: var(--green2);
    }
    &::after{
        position: absolute;
        display: block;
        content: "";
        width:30px;
        height: 30px;
        top:50%;
        transform: translateY(-50%);
        right:10px;
        background: url(../common/img/icon_arrow_g1.svg) no-repeat center / contain;
    }
}

.spotWrap{
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-template-rows: 2em 1fr;
    column-gap: 10px;
    &:not(:last-child){
        margin-bottom:30px;
    }
    & .spotImg{
        grid-column: 1 / 2;
        grid-row: 1 / 4;
        width:100%;
        border-radius: 10px 0 0 10px;
    }
    & .spotTitle{
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        height: fit-content;
        border-radius: 0 10px 10px 0;
        background: var(--green1);
        & p{
            line-height: 2em;
            padding-left:5px;
            font-size:1.1em;
            font-weight: bold;
            color:#fff;
        }
    }
    & .spotText{
        margin-top:10px;
        & p{
            line-height: 1.6em !important;
        }
        & .access{
            margin-top:10px;
            font-size:0.8em;
            color: var(--green1);
        }
        &:lang(en){
            font-size:90%;
        }
    }
    & .ticketLink{
        display: flex;
        width: fit-content;
        margin:0 0 0 auto;
        & img{
            width: 120px;
            margin-right: 10px;
            border-radius: 5px;
            &:hover{
                margin-top:-20px;
                transition: 0.2s;
            }
        }
        & a:last-child img{
            margin-right: 0;
        }
    }
}

.mbtkText{
    margin-bottom:20px;
}
.howtoWrap{
    width: fit-content;
    margin:0 auto;
    & .imgWrap{
        display: flex;
        & .inner{
            margin-right:40px;
            padding: 10px 20px;
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
            color: var(--green1);
            background: #fff;
            &:last-child{
                margin-right:0;
            }
        }
    }
    & .caution{
        margin-top:20px;
        height: 2em;
        border-radius: 5px;
        background: var(--green2);
        & p{
            line-height: 2em;
            text-align: center;
            font-weight: bold;
            color: #fff;
        }
    }
}

.informationWrap{
    font-size:0.9em;
    & a{
        font-weight: bold;
        color: var(--green2);
    }
}

/*--------------footer--------------*/
footer{
    padding-top: 40px;
    font-size:0.9em;
    background: var(--green1) url(./img/bg_olive_usu_shita.svg) no-repeat right top;
    color:#fff;
    & img{
        width:10%;
        margin:20px auto;
    }    
    & a{
        color:#fff !important;
        text-decoration: underline;
    }
}
.footerLink{
    width:var(--primeWidth);
    margin:0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    & + .footerLink{
        padding:8px 0 16px;
    }
    & li:not(:last-child){
        border-right: 1px solid #fff; 
        padding-right:8px;
        margin-right:8px;
    }
    & li a{
        display: inline-block;
        color: #fff;
    }
}
footer .register,
footer .copyright{
    width:var(--primeWidth);
    margin:0 auto;
    font-size: 0.8em;
}
footer .copyright{
    text-align: center;
    margin-top:20px;
}


/*--------------shimanomirai-------------------------------------------------*/
#shimanomiraiLink{
    margin-top:55px;
    position: relative;
    & a{
        border-radius: 10px;
        background: #fff;
        color: var(--black);
        &:hover{
            opacity: .8;
            transition: 0.2s;
        }
    }
    & .linkImgTitle{
        position: absolute;
        top:-45px;
    }
    & .inner{
        display: grid;
        padding:10px;
        grid-template-columns: 310px 1fr;
        column-gap: 15px;
        & p span{
            font-weight: bold;
            color: #E94730;   
        }
    }
    & .buttonLike{
        width: fit-content;
        margin: 8px 0 0 auto;
        border-radius: 30px;
        background-color: #E94730;
        & p{
            padding:5px 20px;
            color: #fff;
        }
    }
}
.contentWrap.shimanomirai{
    & a{
        color: var(--infomain);
        text-decoration: underline;
    }
    & summary {
        padding:10px 0;
        position: relative;
        display: block;
        list-style: none;
        cursor: pointer;
        &::before{
            content: "";
            position: absolute;
            width:45px;
            height: 40px;
            top:-20px;
            left: 0;
            background: url(./img/shima_clip.svg) no-repeat center / contain;
        }
        &:hover .shimaTitleWrap{
            opacity: 0.6;
            transition: 0.3s;
        }
    }
    & summary::-webkit-details-marker {
        display:none;
    }
    & .detailsWrap{
        margin-top:20px;
        padding-left: 15px;
        background: url(./img/shima_bg.svg) repeat-y left top;
        &:first-child{
            margin-top:10px;
        }
    }
    & details{
        border-radius: 0 10px 10px 0;
        background: url(./img/shima_bg_ami.svg) #ffffff;
    }
}
.shimaTop{
    padding-top:20px;
    & + div p{
        padding-top:10px;
        text-align: right;
        font-size: 0.8rem;
    }
}
.shimaTitleWrap{
    display: grid;
    grid-template-columns: 75px 1fr 300px;
    grid-template-rows: 1fr;
    & .mcNumWrap{
        padding:25px 0 0 15px;
    }       
    & .main{
        padding-top:10px;
        & .mcSubTitle{
            width: fit-content;
            padding: 7px;
            border-radius: 3px;
            font-size: 0.9rem;
        }
        & .mcMainTitle{
            margin:10px 0;
            font-weight: bold;
            font-size: 1.2rem;
        }
    }
    & .area{
        display: flex;
        position: absolute;
        top:50%;
        right:60px;
        transform: translateY(-50%);
        & .areaTag{
            width: 145px;
            height: 35px;
            background-repeat: no-repeat;
            & p{
                padding-left: 30px;
                line-height: 35px;
                font-size: 0.9rem;
            }
        }
    }    
    &::after{
        content: "";
        position: absolute;
        width:18px;
        height: 16px;
        top:50%;
        right: 20px;
        transform: translateY(-50%);
        background: url(./img/shima_icon_arrow.svg) no-repeat center / contain; 
    }       
}
details[open] .shimaTitleWrap::after{
    transform: translateY(-50%) rotate(180deg);
}

.mcLead{
    padding:0 70px 0 75px;
    & p{
        line-height: 1.6em;
        font-weight: bold;
    }
}
.mcAllWrap{
    padding: 20px 70px 30px 20px;
    & span{
        font-weight: bold;
    }
}
.mcLine{
    margin-left:31.5px;
    border-left: 3px solid var(--shimaMain);
}
.mcKugiri{
    width:calc(100% - 145px);
    height: 3.5px;
    margin:0 auto 10px auto;
    background: url(./img/shima_line_gr.svg) repeat-x center / contain;
    & p{
        width: fit-content;
        margin:0 auto;
        padding: 0 3px;
        line-height: 3.5px;
        font-weight: bold;
        color: var(--green2);
        background: #fff;;
    }
}
.mcLine + .mcKugiri{
    margin-top:20px;
}

.mcIndiWrap:not(.end){
    display: grid;    
    grid-template-columns: 45px 1fr;
    grid-row: 1fr;
    align-items: center;
    &:has( .mainSpot ){
        margin-top:12px;
        align-items: normal;
    }
}
.mcIndiWrap.end .endWrap{
    margin-top:20px;
    display: grid;    
    grid-template-columns: 45px 1fr;
    grid-row: 1fr;
    align-items: center;    
}

.mcIconWrap{
    width: 60px;
    height: 60px;
    margin-left:-31.5px;
    display: grid;
    place-content: center;
    place-items: center;
    & img.icon{
        width: 40px;
        height: 40px;
        margin: 0 auto;
    }
    & img.start-endIcon{
        width: fit-content;
    }
}
.mcIndiWrap:has( .mainSpot ) .mcIconWrap{
    display: block;
    place-content: start;
    place-items: normal;
}

.mcIndiCont{
    &.route,
    &:not(.mainSpot){
        font-size: 0.9em;
    }
    &.route{
        display: grid;    
        grid-template-columns: 6em 1fr 170px;
        grid-row: 1fr;
        align-items: center;
    }
    &.mainSpot{
        & .mcImgWrap{
            width: fit-content;
            display: grid;
            margin: 0 auto;
            &.common{   /*2images*/
                margin: 15px auto;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr;
                place-content: center;
                place-items: center;            
            }
            &.moreimages{ /*3images*/
                margin: 15px auto;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 1fr;
                place-content: center;
                place-items: center;            
            }
            &.tate{
                display: grid;
                place-content: center;
                place-items: center;
                width: 300px;  
                float: left;          
                & img{
                    max-width: 100%;
                }
                & + div{
                    width:calc(100% - 310px);
                    float: right;
                }
            }
        }
        &:has( div.tate ) .indiTitle{
            margin-bottom: 15px;
        }
    }
}
.mcTime{
    width: 5rem;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border:2px solid var(--black)
}
.indiTitle{
    font-size: 1.2em;
    font-weight: bold;
    & p{
        position: relative;
        width: fit-content;
        z-index: 1;
    }
    & p::before{
        content: "";
        width: 100%;
        height: 1.2em;
        position: absolute;
        bottom: -3px;
        left:0;
        border-radius: 8px;
        opacity: 60%;
        z-index: -1;
    }
    & span{
        display: inline-block;
        margin-left:2px;
        font-size: 0.8em;
        font-weight: normal;
    }
}
.mainSpotLead{
    width: fit-content;
    max-width: 100%;
    margin-bottom: 10px;
    padding: 0  0px 8px 0;
    font-weight: bold;
    background: url(./img/shima_line_dotted.svg) repeat-x bottom left;
}
.mainSpotSub{
    border-radius: 5px;
    padding:8px;
    background: var(--shimaBack);
    & span{
        display: inline-block;
        line-height: 1.5em;
        font-weight: normal;
        font-size: 0.8em;
        color: var(--green2);
    }
}
.mainSpotSub + .mainSpotSub{
    margin-top:10px;
    padding:8px;
    border-radius: 5px;
    border: 2px solid var(--shimaBack);
    background: #ffffff;
}
.mainSpotInfo{
    width: fit-content;
    height: fit-content;
    margin: 10px 0 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr;
    column-gap: 10px;
    place-content: center;
    place-items: center;            
    &.nogrid{
        display: block;
        grid-template-columns: auto;
        grid-template-rows: auto;
        column-gap: 0;
        place-content: normal;
        place-items: normal; 
        align-items: end;
        & .address{
            margin:auto 0 auto auto; 
        }         
        & .url{
            margin:10px 0 auto auto; 
        }
    }
    & .address,
    & .url{
        width: fit-content;
        padding: 8px 8px 8px 38px;
        position: relative;
        border-radius: 5px;
        background: var(--infosub);
        & p, a{
            line-height: 1.5rem;
            font-size: 0.8em;
        }
        &::before{
            content: "";
            width:20px;
            height: 20px;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            left:8px;
        }
    }
    & .address::before{ background: url(./img/shima_icon_info_map.svg) no-repeat center / contain; }
    & .url::before{ background: url(./img/shima_icon_info_web.svg) no-repeat center / contain; }
    & .url:has( a:hover ){
        opacity: .5;
        transition: .2s;
    }
    & a{
        color: var(--infomain) !important;
        &:hover{
            opacity: .8;
            transition: .2s;
        }
    }
}



/*------- subInfo ------------*/
#shimaInformation,
#aboutProject{
    margin-top: 30px;
    border-radius: 10px;
    & .title{
        font-weight: bold;
        font-size: 1.1em;
    }
}

#shimaInformation{
    font-size: 0.9em;
    & .linkCont{
        margin-top: 20px;
        padding: 10px;
        border-radius: 10px;
        border: 2px solid var(--black);
        & p:first-child{
            font-weight: bold;
        }
        & a{
            width: fit-content;
            margin-left: 1em;
            padding:5px 5px 5px 0;
            &:hover{
                opacity: .5;
                transition: .2s;
            }
        }
    }
}
#aboutProject{
    display: grid;
    grid-template-columns: 62% 1fr;
    grid-template-rows:1fr ;
    gap: 10px;
    padding: 20px;
    background: var(--shimaMain);
    & div:first-child{
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    & div:nth-child(2){
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    & div:nth-child(3){
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        & img{
            margin: auto 0 auto auto;
        }
    }
}

/*------- unique color and image ------------*/
#shima1 {
    & .mcSubTitle{ background-color: var(--m1point);}
    & .mcMainTitle{ color: var(--m1main);}
    & .area .areaTag{ background-image: url(./img/shima_label_gr.png); }
    & .indiTitle p::before{ background-color: var(--m1sub); }
    & .mainSpotLead p{ color: var(--m1main); }
}
#shima2 {
    & .mcSubTitle{ background-color: var(--m2point);}
    & .mcMainTitle{ color: var(--m2main);}
    & .area .areaTag{ background-image: url(./img/shima_label_ye.png); }
    & .indiTitle p::before{ background-color: var(--m2sub); }
    & .mainSpotLead p{ color: var(--m2main); }
}
#shima3 {
    & .mcSubTitle{ background-color: var(--m3point);}
    & .mcMainTitle{ color: var(--m3main);}
    & .area .areaTag{ background-image: url(./img/shima_label_pk.png); }
    & .indiTitle p::before{ background-color: var(--m3sub); }
    & .mainSpotLead p{ color: var(--m3main); }
}








/*resStart==============================================================================================*/
/*--------------Tablet and SP--------------*/
@media screen and (max-width: 960px) {   
    p,
    h1,h2,h3,h4{
        line-height:1.6em;
    }
    /*--------------header--------------*/
    header{
        background: url(./img/bg_top_sp.jpg) no-repeat center / cover !important;
    }
    #language{
        top:2vw;
        right:2vw;
        & summary{
            line-height: 20px;
            padding:5px 15px 5px 35px;
            border: 2px solid #fff;
            &:before{
                width:20px;
                height: 20px;
            }
        }
        & summary:hover,
        & details[open] summary{
            border:2px solid var(--green2);
        }
        & details a{
            line-height: 20px;
        }
    }
    #topWrap{
        padding:60px 0 40px 0;
        display: block;
        & > img{
            width:90%;
            margin:0 auto;
        }
        & .topLead{
            & h1{
                margin:20px auto 10px auto;
                font-size:1.3em;
                line-height: 1.5em !important;
                text-align: center;
            }
        }
        & .topText p{       
            font-size: 0.9em;
        }
    }
    /*--------------content--------------*/
    .contTitle h2{
        text-align: center;
    }    
    .aboutImgWrap{
        & img{
            width:32%;
        }
    }
    .keyImgWrap{
        display: block;
        margin-bottom:30px;
        & img.keyImg{
            margin-bottom:10px;
        }
        & .keyImgText h3{
            color: var(--green1);
            margin-bottom: 8px;
        }
        & img.people{
            width:120px;
            margin:20px auto 0 auto;
        }
   }
    a.ticketContWrap{
        grid-template-columns: 120px 1fr;
        grid-template-rows: 1fr;
        align-items: center;
        column-gap: 10px;
        padding:5px 35px 5px 5px;
        margin-bottom:15px;
        border-radius: 5px;
        & img.ticketTitle{
            grid-column: 1 / 2 ;
            grid-row: 1 / 2;
            width:120px;
            border-radius: 5px;
        }
        & .ticketInfoWrap{
            grid-column: 2 / 3;
            grid-row: 1 / 2 ;
            & h4{
                line-height: 1.5em !important;
            }    
        }
        & .ticketTextWrap{
            grid-column: 1 / 3;
            grid-row: 2 / 3 ;
            padding-top:5px;
            & p{
                font-size: 0.9em !important;
                line-height: 1.5em !important;
            }    
        }
        & .access{
            font-size: 0.8em;
        }
        &::after{
            width:20px;
            height: 20px;
            right:5px;
        }
    }
    .spotWrap{
        display: block;
        & .spotImg{
            border-radius: 10px 10px 0 0;
        }
        & .spotTitle{
            border-radius: 0 0 10px 10px;
            & p{
                padding:5px 10px !important;
            }
        }
        & .spotText{
            & .access{
                margin-bottom:20px;
            }
        }
        & .ticketLink{
            display: grid;
            grid-template-columns: repeat(2, 150px);
            gap: 10px;
            margin: 0 auto;
            & img{
                width: 150px;
                margin-right: 0;
                &:hover{
                    margin-top:0;
                }
            }
        }
    }
    .howtoWrap{
        & .imgWrap{
            width: 100%;
            display: grid;
            box-sizing: border-box;
            grid-template-columns: repeat(2, 49%);
            justify-content: center;
            gap: 10px;
            & .inner{
                margin-right:0;
                padding: 10px 0;
                & img{
                    width:80%;
                    margin:0 auto 5px auto;
                }
            }
        }
        & .caution{
            margin-top:10px;
            height: fit-content;
            border-radius: 5px;
            background: var(--green2);
            & p{
                padding:5px;
                line-height: 1.5em;
                text-align: left;
            }
        }
    }
    /*--------------shimanomirai--------------*/
    #shimanomiraiLink{
        & .inner{
            display: block;
        }
        & .linkImgTitle{
            left:50%;
            transform: translateX(-50%);
        }
        & .linkImgKey{
            width: 100%;
            margin-bottom: 10px;
        }
        & .buttonLike{
            width: fit-content;
            margin: 8px 0 0 auto;
            border-radius: 30px;
            background-color: #E94730;
            & p{
                padding:5px 20px;
                color: #fff;
            }
        }
    }
    .pcOnly{
        display: none;
    }
    .shimaTop{
        max-width: 100%;
        & + div p{
            text-align: left;
            margin-bottom: 25px;
        }
    }
    .shimaTitleWrap{
        padding-right: 50px;
        grid-template-columns: 45px 1fr;
        grid-template-rows: 1fr;
        column-gap: 10px;
        & .mcNumWrap{
            grid-column: 1 / 2;
            grid-row: 1 / 3;
            padding:20px 0 0 5px;
            & img{
                max-width: 100%;
            }
        }       
        & .main{
            line-height: 1.5em;
            & .mcSubTitle{
                font-size: 0.7em;
            }
        }
        & .area{
            position: static !important;
            transform: none;        
            & .areaTag{
                width: 50%;
                background-size: contain;
            }            
        }    
    }
    .mcLead{
        padding:0 10px;
        & p{
            font-size: 0.9em;
        }
    }
   .mcAllWrap{
        padding: 20px 10px 100px 10px;
    }
    .mcLine{
        margin:0 0 0 12.5px;
        height: calc(100% - 150px);
    }
    .mcKugiri{
        width:100%;
        margin:0 auto 20px auto;
        background-position: left;
    }
    .mcIndiWrap:not(.end){
        grid-template-columns: 25px 1fr;
    }
    .mcIndiWrap{
        grid-template-columns: 25px 1fr;
        &:has( > div.route){
            align-items: start;
        }
        & .single p{
            line-height: 35px;
        }
        &:has( .mainSpot ){
            margin-top:12px;
            align-items: normal;
        }
        &:not(:first-child){
            margin-top: 20px;
        }
        &:has( + .end){
            padding-bottom: 30px;
        }
        &.end{          
            position: relative;
            width: 100%;
            margin-top:0;
            & .endWrap{
                position: absolute;
                margin-top:-10px;
            }
            & .mcIndiCont{
                margin-left: -20px;
            }
            & img.shimaPoint{
                margin-bottom: -50px;
            }
        }
    }
    .mcIconWrap{
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        width: 35px;
        height: 35px;
        margin-left:-20.5px;
        place-content: start;
        place-items: normal;
        & img.icon{
            width: 35px;
            height: 35px;
        }
        & img.start-endIcon{
            width: 35px;
            height: 35px;
        }
    }  
    .mcLine + .mcKugiri{
        margin-top:40px;
    }    
    .mcIndiCont{
        &.route,
        &:not(.mainSpot){
            font-size: 0.9em;
        }
        &.route{
            grid-template-columns: 6em 1fr;
            row-gap: 5px;
        }
        & .mcTime{
            grid-column:  1 / 2;
            grid-row: 1 / 2;
        }
        & .mcTime + .mcTime{
            grid-column:  2 / 3;
            grid-row: 1 / 2;
        }
        & img.shimaPoint{
            grid-column:  1 / 3;
            grid-row: 2 / 3;
            margin: auto 0 auto auto ;
        }
        &.mainSpot{
            & .mcImgWrap{
                width: 100%;
                display: block;
                margin: 0 auto;
                & img{
                    max-width: 100%;
                }
                &.tate{
                    display:block;
                    width: 100%;  
                    margin-bottom:10px;
                    float: none;          
                    & img{
                        max-width: 100%;
                    }
                    & + div{
                        width:100%;
                        float: none;
                    }
                }
            }
            &:has( div.tate ) .indiTitle{
                margin-bottom: 15px;
            }
        }
    }
    .mainSpotSub{
        font-size: 0.9em;
    }
    .mainSpotInfo{
        width: fit-content;
        height: fit-content;
        margin: 10px 0 0 auto;
        display: block;
        grid-template-columns: auto;
        grid-template-rows: auto;
        column-gap: 0;
        place-content: normal;
        place-items: normal; 
        align-items: end;
        & .address{
            margin:auto 0 auto auto; 
        }         
        & .url{
            margin:10px 0 auto auto; 
        }
    }   
    /*------- subInfo ------------*/
    #shimaInformation,
    #aboutProject{
        & .title{
            color: var(--green2);
        }
    }
    #aboutProject{
        font-size: 0.9em;
        display: block;
        & > div:nth-child(2){
            margin-top:15px;
        }
        & > div:nth-child(3){
            & img{
                margin: 10px 0 auto auto;
                max-width: 100%;
            }
        }
    }
   /*--------------footer--------------*/
    footer{
        font-size:0.7em;
        background-image:none !important;
        & img{
            width:25%;
        }    
    }
    footer .copyright{
        padding-bottom: 5px;
    }
}
/*--------------small phone--------------*/
@media screen and  (max-width: 414px) {
}


/*resEnd==============================================================================================*/