.pcView{ display: block;}
.spView{ display: none;}
.op {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/*メインイメージ -----------------------------*/

.focusMain {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
.contTitle{
    display: block;
    width: 20%;
    max-width: 156px;
    font-size: 1rem;
    border: #000 1px solid;
    padding: 0.3rem;
    margin: 0 0 0.3rem 0;
}

.focusMainText {
    padding: 3rem 0 0;
}
.focusMainText h1 {
    font-size: 3.6rem;
    font-weight: lighter;
    line-height: 1.2;
}
.focusMainText h1 .sub{
    display: block;
    font-size: 1.2rem;
}
.focusMainText h1 .area{
    display: block;
    width: fit-content;
    font-size: 1.8rem;
    background-color: #ffec6d;
    padding: 0.2rem 0.4rem;
    margin: 0.3rem 0 0.4rem 0;
}
.leadText{
    margin: 0.4rem 0 0 0;
    line-height: 1.4;
}
.secondTitle{
    margin: 1.6rem 0;
    border-top: #000 1px solid;
    padding: 1.6rem 0 0 0;
}
.secondTitle h2{
    font-size: 1.8rem;
    font-weight: lighter;
}
.secondTitle .minTitle{
    display: inline-block;
    font-size: 1.4rem;
    margin: 0 0 0.3rem 0;
}
.secondTitle .minTitle::before{
    content: "＼";
    margin: 0 0.3em 0 0;
}
.secondTitle .minTitle::after{
    content: "／";
    margin: 0 0 0 0.3em;
}
.secondInfo{
    line-height: 1.6;
    margin: 0.3rem 0 0 0;
}
.mainMap {
    width: 100%;
    max-width: 1000px;
}

/*コンテンツ ---------------------------*/
.mainCont{
    width: 90%;
    max-width: 1000px;
    margin: 4rem auto 3rem;
}
.teacherBox{
    display: flex;
    align-items: center;
    margin: 0 0 2rem 0;
}
.teacherBox p{ font-size: 1.4rem; font-weight: bold; line-height: 1.4;}
.teacherBox p span{ display: block; font-size: 0.9rem; margin: 0 0 0.3rem 0;}

.midashi{
    display: flex;
    align-items: flex-start;
    font-size: 1.4rem;
    font-weight: lighter;
    line-height: 1.4;
    margin: 2rem 0 1rem;
}
.qMark{
    flex-shrink: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.2rem;
    height: 2.2rem;
    background: #000;
    color: #fff;
    border-radius: 50%;
    font-weight: bold;
    margin: 0 0.6rem 0 0;
}
.text{
    line-height: 1.6;
}

.photoBox{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    max-width: 654px;
    list-style: none;
    margin: 3.5rem auto 4rem;
}
.photoBox li{ width: 49%; margin: 0.5rem 0;}
.photoBox li.photoWide{ width: 100%;}
.photoBox li img{ width: 100%;}
.photText{
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0.5rem 0 0;
}

/*周辺の都営駐車場 --------------*/
#parkingcont{
    width: 90%;
    max-width: 600px;
    margin: 0 auto 4rem;
}
#parkingcont h2{
    color: #fff;
    font-size: 1.6rem;
    font-weight: 100;
    line-height: 1.4;
    background: #2e457c;
    padding: 1rem;
}
.parkinginfoBox{ padding: 0 0 1rem 0; margin: 2rem 0; border-bottom: #2e457c 1px dashed;}
.parkinginfoTitle{ display: flex; align-items: center; padding: 0 0 1rem 0;}
.parkinginfoTitle h3{ font-size: 1rem; font-weight: normal;}
.parkinginfoBox:has(.parkingImg){ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 1.5rem;}
.parkinginfoBox:has(.parkingImg) .parkinginfoTitle{ grid-column: 1 / -1;}
.parkingImg{ display: block; width: auto; height: auto; max-width: 290px; max-height: 290px; grid-column: 1; grid-row: 2 / 4;}
.parkinginfo, .parkingText{ grid-column: 2;}
.parkinginfo{ line-height: 1.6;}
.parkingText{ line-height: 1.6; margin: 0.5rem 0 0 0;}
.parkingMore{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 0 0;}
.texts{ font-size: 0.8rem;}

.snsIg{
    width: 4%;
    max-width: 15px;
    padding: 0.3rem 0.1rem 0 0;
}
.links{
    text-decoration: underline;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    margin: 1rem 0;
    transition: 0.6s;
}
.links:hover{ text-decoration: none;}
.qrImg{ width: 84px; height: 84px;}

@media (max-width: 640px){
    .pcView{ display: none;}
    .spView{ display: block;}

    .contTitle{ width: 44%; max-width: 200px;}
    .focusMainText h1{ font-size: 2.3rem;}
    .focusMainText h1 .area{ font-size: 1.2rem;}
    .secondTitle .minTitle{ font-size: 1.2rem;}
    .secondTitle h2{ font-size: 1.6rem;}

    .mainCont{ margin: 3rem auto 2rem;}
    .midashi{ font-size: 1.2rem;}
    .teacherBox p{ font-size: 1.2rem;}
    .photoBox{ width: 100%;}

    #parkingcont h2{ font-size: 1.3rem;}
    .parkinginfoBox:has(.parkingImg){ display: block;}
    .parkingImg{ margin: 0 0 1rem 0;}
    .parkingMore .links{ margin-bottom: 0;}
    .spView .links{ margin-top: 0;}
}