@charset "UTF-8";
/* ######################################################################################

　ボタン　button

###################################################################################### */
.button {
    opacity: 1;
    display: inline-block;
    position: relative;
    border: none;
    -webkit-appearance: none;
    box-shadow: none;
    border: 1px solid #000;
    border-radius: 3em;
    background: #fff;
    font-size: 1.7rem;
    font-weight: normal;
    font-family: "Lato", "Noto Sans JP", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
    color: #000000;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: 0.5s ease;
}
.button:not(.disabled):active {
    top: 1px;
    box-shadow: none;
}
.button.block {
    display: block;
    width: 100%;
}
.button.block + .block {
    margin-top: 0.5em;
}
@media print, screen and (min-width: 768px) {
    .button {
        padding: 1.1em 2.25em 1em;
    }
    .button.large {
        font-size: max(1.875vw, 1.8rem);
        letter-spacing: 0.14em;
        width: 34.8vw;
    }
}
@media print, screen and (max-width: 767px) {
    .button {
        padding: 0.75em 1.0em;
    }
}

/* 四角 */
.button.square{border-radius: 0;}



/* 矢印 右*/
.button.arrow{position: relative; padding-right: 3em;}
.button.arrow:after{
    content: "";
    position: absolute;
    right: 1.25em;
    top: 50%;
    width: 0.7em;
    height: 0.7em;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: translateY(-50%) rotate(-45deg);
}
/* 矢印 上向き*/
.button.arrow.top:after{
    content: "";
    position: absolute;
    right: 1.25em;
    top: 50%;
    width: 0.7em;
    height: 0.7em;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: translateY(-50%) rotate(-45deg);
}






/* 赤色 */
.button.red{
    color: #c30000;
    border-color: #c30000;
}
.button.red.text-bk{
    color: #000;
}
.button.red.arrow:after{
    border-color: #c30000;
}
.button.red:hover{
    color: #fff;
    border-color: #c30000;
    background: #c30000;
}
.button.red.arrow:hover:after{
    border-color: #fff;
}


/* red2 */
.button.red2{
    position: relative;
    background: #c30000;
    color: #fff;
    border-color: #c30000;
    border-radius: 0;
    padding: 0.85em;
}
.button.red2:before{
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.16em;
    width: calc(100% - 0.4em);
    height: calc(100% - 0.32em);
    border: 1px solid #fff;
}


@media print, screen and (min-width: 768px) {
    .button.red2{font-size: 1.67vw;}
}
@media screen and (max-width: 767px) {
}
/* pink */
.button.pink{
    position: relative;
    background: #d85050;
    color: #fff;
    border-color: #d85050;
    border-radius: 0;
    padding: 0.85em;
}
.button.pink:before{
    content: "";
    position: absolute;
    left: 0.31em;
    top: 0.25em;
    width: calc(100% - 0.62em);
    height: calc(100% - 0.5em);
    border: 1px solid #fff;
}
@media print, screen and (min-width: 768px) {
    .button.pink{font-size: 1.67vw;}
}
@media screen and (max-width: 767px) {
}




/* gray */
.button.gray{
    background: #fff;
    border: 3px solid #6e6e6e;
    color: #6e6e6e;
    border-radius: 0;
}
@media print, screen and (min-width: 768px) {
    .button.gray{border-width: 3px; padding: 0.5em 0.75em;}
}
@media screen and (max-width: 767px) {
    .button.gray{border-width: 2px; padding: 0.75em 0.5em;}
}

@media print, screen and (max-width: 767px) {
    .button.xs-block {
        display: block;
        width: 100%;
        margin: 1em 0;
    }
}

/* downloadアイコン */
.button.download{padding-top: 0.75em; padding-bottom: 0.75em; display: flex!important; align-items: center; justify-content: center;}
.button.download:before{
    content: "";
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    border: none;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5em;
    background-image: url(../img/contents/miyako/ico_download.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.button.download.gray:before{
    background-image: url(../img/contents/miyako/ico_download_gray.svg);
}

.button.download:after{
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.16em;
    width: calc(100% - 0.4em);
    height: calc(100% - 0.32em);
    border: 1px solid #fff;
}

/* →アイコン */
.button.arrowR:after{
    content: "";
    position: relative;
    display: inline-block;
    top: -0.1em;
    left: 0;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-left: 0.35em;
    background-image: url(../img/contents/miyako/ico_arrow.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}


/* ====================================================
    ボタンボックス
==================================================== */
.buttonBox {
    text-align: center;
}

/* ====================================================
    なにもないボタン
==================================================== */
.button.none {
    border:none;
    padding: 0.75em 0;
}



/* ##################################################

　display 表示・非表示

################################################## */
@media print, screen and (min-width: 768px) {
    div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc, p.pc  {
      display: block;
    }
    div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp, p.sp {
      display: none;
    }
  
    span.pc, img.pc, em.pc, br.pc {
      display: inline;
    }
    span.sp, img.sp, em.sp, br.sp {
      display: none!important;
    }
  }
  @media screen and (max-width: 767px) {
    div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp, p.sp {
      display: block;
    }
    div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc, p.pc {
      display: none;
    }
  
    span.sp, img.sp, em.sp, br.sp {
      display: inline;
    }
    span.pc, img.pc, em.pc, br.pc {
      display: none!important;
    }
  }
  


/* ##################################################

　effect ふわっと表示

################################################## */
@keyframes fadeDown {
    0% {opacity: 0; transform: translateY(-100px);}
    100% {opacity: 1; transform: translateY(0);}
}
@keyframes fadeZoomOut {
    0% {opacity: 0; transform: scale(2, 2);}
    100% {opacity: 1; transform: scale(1, 1);}
}
@media screen {
.effect.fadeDown {opacity: 0;}
.effect.fadeDown.insert {
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }
.effect.fadeDown.insert {animation-duration: 0.75s;}
.effect.fadeDown.insert {animation-name: fadeDown;}
.effect.fadeZoomOut {opacity: 0;}
.effect.fadeZoomOut.insert {
    animation-duration: 0.75s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}
.effect.fadeZoomOut.insert {
    animation-name: fadeZoomOut;
}
}




/* ##################################################

　layout レイアウト

################################################## */
/* ====================================================
columnLayout
==================================================== */
.columnLayout__img img{width: 100%;}
.columnLayout__text br.pc-wide{display: none;}

@media print, screen and (min-width: 768px) {
    .columnLayout{display: flex;}
    .columnLayout + .columnLayout{margin-top: 8%;}
    .columnLayout__img{width: 42.2%;}
    .columnLayout__detail{
        width: 48%;
        margin-left: -2%;
        min-width: 460px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: max(2.5vw, 2.4rem);
    }
    .columnLayout__title{
        padding: 0 0 5% 18%;
        margin-bottom: 5%;
        border-bottom: 1px solid #c30000;
        min-height: 50%;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        font-size: 100%;
        line-height: 1.58;
        font-weight: normal;
        letter-spacing: 0.04em;
    }
    .columnLayout__text{
        padding: 0 2% 0 18%;
        min-height: 50%;
        font-size: max(50%, 1.3rem);
        line-height: 2.08;
        letter-spacing: 0.2em;
    }
}
@media print, screen and (min-width: 1261px) {
    .columnLayout__text{letter-spacing: 0.2em; width: 120%;}
    .columnLayout.reverse .columnLayout__text{position: relative; left: -20%;}
    .columnLayout__text br.pc-wide{display: block;}
}
@media screen and (max-width: 767px) {
    .columnLayout{margin-bottom: 10%;}
    .columnLayout:last-child{margin-bottom: 0;}
    .columnLayout__img img{width: 80%;}
    .columnLayout__detail{
        margin-left: 9%;
        padding: 6% 9% 10% 4%;
        border-left: 1px solid #c30000;
        font-size: 4.75vw;
    }
    .columnLayout__title{
        font-size: 100%;
        margin-bottom: 1em;
        line-height: 1.38;
    }
    .columnLayout__title > span{

        display: block;
    }
    .columnLayout__text{
        font-size: 63%;
        line-height: 1.98;
        letter-spacing: 0.1em;
    }
    .columnLayout__text .small{
        font-size: 96%;
        letter-spacing: 0;
    }
    .columnLayout__text br.pc-wide.sp{display: block;}
}


/* 逆配置 */
.columnLayout.reverse .columnLayout__title,
.columnLayout.reverse .columnLayout__text{text-align: right;}

@media print, screen and (min-width: 768px) {
    .columnLayout.reverse{flex-direction: row-reverse;}
    .columnLayout.reverse .columnLayout__detail{margin-right: -2%;}
    .columnLayout.reverse .columnLayout__title{padding: 0 18% 5% 0; align-items: flex-end;}
    .columnLayout.reverse .columnLayout__text{padding: 0 18% 0 2%;}
}
@media screen and (max-width: 767px) {
    .columnLayout.reverse .columnLayout__img{text-align: right;}
    .columnLayout.reverse .columnLayout__detail{
        margin-left: 0;
        border-left: none;
        margin-right: 9%;
        border-right: 1px solid #c30000;
        padding: 6% 4% 10% 9%;
    }
}


/* ====================================================
centerColumnLayout
==================================================== */
.centerColumnLayout{position: relative;}

@media print, screen and (min-width: 768px) {
    .centerColumnLayout:before{
       content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 1px;
        height: 100%;
        background: #c40000;
    }
    .centerColumnLayout__date:last-of-type,
    .centerColumnLayout__date{
        padding-bottom: 0.4em;
        position: relative;
        width: 100%;
        display: flex;
        align-items: flex-start;
        font-size: 6vw;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
    }
    .centerColumnLayout__date > span{
        display: inline-block;
        position: relative;
        line-height: 1.75;
    }
    .centerColumnLayout__date .month{
        margin-bottom: -0.1em;
    }
    .centerColumnLayout__date .month .large{
        position: relative;
        font-size: 141%;
        line-height: 1;
        left: -0.5em;
    }
    .centerColumnLayout__date .day{
        left: -1em;
        top: -0.75em;
        margin-bottom: -1.1em;
    }
    .centerColumnLayout__date .day.topNarrow{
        top: -1.5em;
        margin-bottom: -1.9em;
    }
    

    .centerColumnLayout{display: flex; padding-top: 12%; padding-bottom: 6%;}
    .centerColumnLayout + .centerColumnLayout{padding-top: 6%;}
    .centerColumnLayout:last-child{padding-bottom: 0;}
    .centerColumnLayout__img,
    .centerColumnLayout__detail{width: 50%;}
    .centerColumnLayout__img img{width: 100%;}
    .centerColumnLayout__detail{
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 4%;
        font-size: max(2.5vw, 2.2rem);
    }

    .centerColumnLayout__title{
        margin-bottom: 0.25em;
        font-size: 100%;
        line-height: 1.58;
        letter-spacing: 0.04em;
    }
    .centerColumnLayout__title.large{margin-bottom: 0.5em; font-size: 122%;}
    .centerColumnLayout__title.large span{display: inline-block;}
    .centerColumnLayout__subtitle{font-size: 84%; letter-spacing: 0.08em; line-height: 1.55;}

    .centerColumnLayout__text{
        /* padding-right: 10%; */
        font-size: max(50%, 1.4rem);
        line-height: 2.08;
        letter-spacing: 0.2em;
    }

}
@media screen and (max-width: 959px) {
    .centerColumnLayout__text br{display: none;}
}
@media screen and (max-width: 767px) {
    .centerColumnLayout__text br{display: block;}
    .centerColumnLayout__text br.sp{display: block;}
    .centerColumnLayout__text br.pc{display: none;}
}

/* 逆配置 */
@media print, screen and (min-width: 768px) {
    .centerColumnLayout.reverse{flex-direction: row-reverse;}
    .centerColumnLayout.reverse .centerColumnLayout__title{text-align: right;}
    .centerColumnLayout.reverse .centerColumnLayout__subtitle{text-align: right;}
    .centerColumnLayout.reverse .centerColumnLayout__text{text-align: right; padding-right: 0; /*padding-left: 10%;*/}
    .centerColumnLayout.reverse .centerColumnLayout__date{align-items: flex-end;}
    .centerColumnLayout.reverse .centerColumnLayout__date .month{right: -1em;}
    .centerColumnLayout.reverse .centerColumnLayout__date .day{left: auto;}
}


/* スマホ　sp-style01 
-------------------------------------*/
@media screen and (max-width: 767px) {
    .centerColumnLayout.sp-style01{font-size: 5.5vw;}
    .centerColumnLayout.sp-style01 + .centerColumnLayout.sp-style01{margin-top: 30%;}

    
    .centerColumnLayout.sp-style01 .centerColumnLayout__date:last-of-type,
    .centerColumnLayout.sp-style01 .centerColumnLayout__date{
        position: relative;
        width: 100%;
        display: flex;
        align-items: flex-start;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        border-bottom: 1px solid #c40000;
        padding-bottom: 0.4em;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-right: 15%;
        font-size: 185%;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__date > span{
        display: inline-block;
        position: relative;
        line-height: 1.75;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__date .month{
        top: -1em;
        left: -0.5em;
        margin-bottom: -0.1em;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__date .month .sp-large,
    .centerColumnLayout.sp-style01 .centerColumnLayout__date .month .large{
        position: relative;
        font-size: 140%;
        line-height: 1;
        left: -0.85em;
        top: 0.5em;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__date .day{
        top: -0.4em;
        left: 0.25em;
        margin-bottom: -1.1em;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__date .day.topNarrow{
        top: -1.5em;
        margin-bottom: -1.9em;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__detail{position: relative;}
    .centerColumnLayout.sp-style01 .centerColumnLayout__img img{width: 68.5%;}
    .centerColumnLayout.sp-style01 .centerColumnLayout__title{
        position: absolute;
        top: -54vw;
        right: 0;
        width: 42%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        flex-wrap: wrap;
        font-size: 100%;
        min-height: 3em;
        line-height: 1.6;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__subtitle{
        position: absolute;
        top: -30vw;
        right: 14%;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        color: #c30000;
        font-size: 70%;
        line-height: 1.45;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__text{
        position: relative;
        padding-top: 4%;
        padding-bottom: 6%;
        padding-left: 9%;
        font-size: 54%;
        letter-spacing: 0.1em;
        line-height: 1.826;
    }
    .centerColumnLayout.sp-style01 .centerColumnLayout__text:after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 68.5%;
        height: 1px;
        background: #c40000;
    }
    

    /* 逆配置 */
    .centerColumnLayout.sp-style01.reverse .centerColumnLayout__date{padding-right: 0; padding-left: 40%;}
    .centerColumnLayout.sp-style01.reverse .centerColumnLayout__img{text-align: right;}
    .centerColumnLayout.sp-style01.reverse .centerColumnLayout__title{left: 0; right: auto; justify-content: flex-end; text-align: right; width: 50%;}
    .centerColumnLayout.sp-style01.reverse .centerColumnLayout__subtitle{left: 14%; right: auto;}
    .centerColumnLayout.sp-style01.reverse .centerColumnLayout__text{
        padding-left: 0%;
        padding-right: 9%;
        text-align: right;
    }
    .centerColumnLayout.sp-style01.reverse .centerColumnLayout__text:after{right: 0; left: auto;}
}
 

/* スマホ　sp-style02
-------------------------------------*/
@media screen and (max-width: 767px) {
    .centerColumnLayout.sp-style02{margin-bottom: 20%;}
    .centerColumnLayout.sp-style02:last-child{margin-bottom: 0;}
    .centerColumnLayout.sp-style02 .centerColumnLayout__img img{width: 80%;}
    .centerColumnLayout.sp-style02 .centerColumnLayout__detail{
        margin-left: 9%;
        padding: 6% 9% 10% 4%;
        border-left: 1px solid #c30000;
        font-size: 4.75vw;
    }
    .centerColumnLayout.sp-style02 .centerColumnLayout__title{
        font-size: 100%;
        margin-bottom: 1em;
        line-height: 1.36;
    }
    .centerColumnLayout.sp-style02 .centerColumnLayout__text{
        font-size: 63%;
        line-height: 1.98;
        letter-spacing: 0.1em;
    }

    /* 逆配置 */
    .centerColumnLayout.sp-style02.reverse .centerColumnLayout__detail{
        margin-left: 0;
        margin-right: 9%;
        padding: 6% 4% 10% 9%;
        border-left: none;
        border-right: 1px solid #c30000;
    }
    .centerColumnLayout.sp-style02.reverse .centerColumnLayout__img{text-align: right;}
    .centerColumnLayout.sp-style02.reverse .centerColumnLayout__title,
    .centerColumnLayout.sp-style02.reverse .centerColumnLayout__text{
        text-align: right;
    }
}
 





/* ====================================================
centerLineContents
==================================================== */
.centerLineContents{
    position: relative;
}
.centerLineContents:before{
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: #c40000;
    z-index: 1;
}
.centerLineContents__title,
.centerLineContents__detail,
.centerLineContents__button{
    position: relative;
    z-index: 2;
}
.centerLineContents__title,
.centerLineContents__detail{background: #fff;}
.centerLineContents__title a[href^="tel"]{color: #000; text-decoration: none;}

.centerLineContents__detail .titleBold.medium{font-size: 100%; margin-bottom: 0.75em; letter-spacing: 0.12em;}
.centerLineContents__detail p{text-align: center;}
.centerLineContents__button{text-align: center;}
.centerLineContents__button .button{}

@media print, screen and (min-width: 768px) {
    .centerLineContents__title{margin-bottom: 8em;}
    .centerLineContents__title a[href^="tel"]{pointer-events: none;}
    .centerLineContents__detail{padding: 3%; font-size: max(2.1vw, 2.0rem);}
    .centerLineContents__detail p{font-size: max(60%, 1.4rem); letter-spacing: 0.2em; line-height: 2;}
    .centerLineContents__detail p + .titleBold{margin-top: 2.75em;}
    .centerLineContents__detail .titleBold .small{font-size: 65%;}
    .centerLineContents__button{margin-top: 7%;}
    .centerLineContents__button li + li{margin-top: 3%;}
}
@media screen and (max-width: 767px) {
    .centerLineContents__title{margin-bottom: 5em;}
    .centerLineContents__detail{padding: 3% 0; font-size: 3.5vw;}
    .centerLineContents__detail p{font-size: max(78%, 1.2rem); line-height: 1.63;}
    .centerLineContents__detail p + .titleBold{margin-top: 1em;}
    .centerLineContents__detail .titleBold .small{font-size: 75%;}
    .centerLineContents__button{margin-top: 16%;}
    .centerLineContents__button li + li{margin-top: 6%;}
    .centerLineContents__button .button{padding: 1em; font-size: 100%; width: 75%;}
}



/* leftLine */
@media print, screen and (min-width: 768px) {
    .centerLineContents.leftLine{margin-top: -2%;}
    .centerLineContents.leftLine:after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 1px;
        background: #c40000;
        z-index: 1;
    }
}
@media screen and (max-width: 767px) {
}



/* lead */
@media print, screen and (min-width: 768px) {
    .centerLineContents__lead{
        margin-bottom: 10%;
        margin-left: 50%;
        padding-top: 11%;
        padding-left: 3%;
        font-size: 3.125vw;
    }
    .centerLineContents__lead__title{
        font-size: 100%;
        line-height: 1.3;
        margin-bottom: 0.75em;
    }
    .centerLineContents__lead__title span{
        display: block;
    }
    .centerLineContents__lead__title span:nth-child(2){
        margin-left: 3em;
    }
    .centerLineContents__lead__text{
        font-size: max(40%, 1.4rem);
        line-height: 2;
        letter-spacing: 0.2em;
        padding-left: 5%;
    }
    
}
@media screen and (max-width: 767px) {
    .centerLineContents__lead{
        position: relative;
        background: #fff;
        padding-bottom: 15%;
        font-size: 5.25vw;
        z-index: 2;
    }
    .centerLineContents__lead__title span{display: block; line-height: 1.3;}
    .centerLineContents__lead__title span:nth-of-type(2){padding-left: 3em;}
    .centerLineContents__lead__text{font-size: 57%;}
}





/* ##################################################

　リンク　link

################################################## */
/* ====================================================
arrowLink
==================================================== */
.arrowLink{
    position: relative;
    text-decoration: none;
    color: #000;
}
.arrowLink:before{
    content: "";
    display: block;
    position: absolute;
    border: none;
    transition: .3s;
}

.arrowLink.reverse{
    padding-left: 0;
    padding-right: 4em;
}
.arrowLink.reverse:before{
    left: auto;
    right: 0.25em;
    border-left: none;
    border-right: 1px solid #000;
    transform: skew(45deg);
}
@media print, screen and (min-width: 768px) {
    .arrowLink{
        padding-left: 4em;
        font-size: max(0.98vw, 1.4rem);
        letter-spacing: 0.2em;
    }
    .arrowLink:before{
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        transform: skew(-45deg);
        bottom: 0.25em;
        left: 0.25em;
        width: 3.25em;
        height: 0.65em;
    }
}
@media screen and (max-width: 767px) {
    .arrowLink{
        padding-right: 4em;
        font-size: 3.25vw;
        letter-spacing: 0.2em;
    }
    .arrowLink:before{
        border-right: 1px solid #c30000;
        border-bottom: 1px solid #c30000;
        transform: skew(45deg);
        bottom: 0.25em;
        right: 0.25em;
        width: 3.25em;
        height: 0.65em;
    }
}






/* ====================================================
backLinkBox
==================================================== */
@media print, screen and (min-width: 768px) {
    .backLinkBox{
        margin-top: 5%;
        padding: 0 6%;
    }
}
@media screen and (max-width: 767px) {
    .backLinkBox{
        margin-top: 10%;
    }
}





/* ##################################################

　リスト　list

################################################## */
/* ====================================================
    newsList
==================================================== */
.newsList a{display: block; text-decoration: none; color: #000;}

@media print, screen and (min-width: 768px) {
    .newsList{
        position: relative;
        display: flex;
        justify-content: flex-start;   
    }
    .newsList + .newsList{margin-top: 7%;}
    .newsList__item{position: relative; font-size: max(0.99vw, 1.4rem);}
    .newsList__item{border-top: 1px solid #c30000;}
    .newsList__img img{
        width: 20.3vw;
        height: 20.3vw;
        object-fit: cover;
    }
    .newsList__date,
    .newsList__date:last-of-type{
        position: absolute;
        top: -2.5em;
        height: 2.5em;
        font-size: 100%;
        color: #c30000;
        letter-spacing: 0.1em;
    }
    .newsList__title{margin-top: 1em; font-size: 100%; margin-bottom: 0; line-height: 1.41;}


    /* 配置 */
    .newsList__item:nth-child(1){
        width: calc(20.3vw + 15.6vw);
        padding-left: 15.6vw;
    }
    .newsList__item:nth-child(2){
        width: calc(20.3vw + 7.9vw);
        padding-left: 3.95vw;
        padding-right: 3.95vw;
    }
    .newsList__item:nth-child(3){
        width: 20.3vw;
        margin-right: 15.6vw;
    }

    /* 逆配置 */
    .newsList.reverse .newsList__item:nth-child(1){
        width: 20.3vw;
        padding-left: 0;
        margin-left: 15.6vw;
    }
    .newsList.reverse .newsList__item:nth-child(3){
        width: calc(20.3vw + 15.6vw);
        margin-right: 0;
        padding-right: 15.6vw;
    }

    /* hover */
    .newsList__item img{transition: 0.5s ease; opacity: 1;}
    .newsList__item a:hover img{opacity: 0.4;}
}
@media screen and (max-width: 767px) {
    .newsList__item{border-left: 1px solid #c30000; padding-bottom: 10%;}
    .newsList__item.dummy{border-left-width: 0;}
    .newsList__item > div,
    .newsList a{display: flex; justify-content: space-between;}
    .newsList__img{width: 42%; padding-top: 42%; position: relative;}
    .newsList__img img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
    .newsList__detail{width: 54%; font-size: 4vw;}
    .newsList__title{margin-bottom: 0.25em; font-size: 100%; line-height: 1.41;}
    .newsList__date{font-size: 88%; color: #c30000;}
}









/* ====================================================
    dotTitleList
==================================================== */
.dotTitleList{}
.dotTitleList__title,
.dotTitleList__text,
.dotTitleList__tel{
    position: relative;
    padding-left: 1em;
    letter-spacing: 0.12em;
    font-size: max(1.17vw, 1.3rem);
    line-height: 2;
}
.dotTitleList__title{color: #c30000;}
.dotTitleList__title:before{
    content: "●";
    position: absolute;
    top: 0.85em;
    left: 0;
    font-size: 50%;
}
.dotTitleList__tel{
    padding-top: 0.5em;
    padding-left: 4em;
}
.dotTitleList__tel:before{
    content: "";
    position: absolute;
    top: 0.25em;
    left: 1.25em;
    width: 2em;
    height: 1.25em;
    border-left: 1px solid #c30000;
    border-bottom: 1px solid #c30000;
}
.dotTitleList__tel a{
    text-decoration: none;
    color: #000;
}




/* ##################################################

　modal　モーダル

################################################## */
@media print, screen and (min-width: 768px) {
    .topModal_off{display: none;}
    .topModal{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100002;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .topModal__inner{
        padding: 2vw;
        position: relative;
        min-width: 550px;
        width: 52vw;
        background: #fff;
        background-image: url(../img/contents/index/copy_miyako.svg);
        background-size: 17%;
        background-repeat: no-repeat;
        background-position: 3.5vw 50%;
    }
    .topModal__bd{
        padding: 2vw;
        border: 1px solid rgba(195, 0, 0, 0.51);
        min-height: 330px;
        height: 30vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: 4.4vw;
    }
    .topModal__title,
    .topModal__inner p{
        text-align: center;
        color: rgba(195, 0, 0, 0.51);
        font-weight: bold;
    }
    .topModal__title{
        margin-top: 0.15em;
        margin-bottom: 0.15em;
        font-size: 100%;
        letter-spacing: 0.08em;
    }
    .topModal__title .num{
        font-size: 22%;
        display: inline-block;
        vertical-align: top;
        padding-top: 0.85em;
        letter-spacing: 0.05em;
        margin-right: 0.5em;
    }
    .topModal__inner p{
        margin-bottom: 0.25em;
        font-size: max(32%, 1.5rem);
        letter-spacing: 0.1em;
    }
    .topModal__inner p.small{
        color: #000;
        font-size: max(22%, 1.4rem);
        font-weight: normal;
        letter-spacing: 0.08em;
    }
    .topModal__inner .buttonBox{margin-top: 0.5em; height: auto;}
    .topModal__inner .buttonBox + .buttonBox{margin-top: 0.75em;}
    .topModal__inner .buttonBox .button{
        display: block;
        font-size: 1.1vw;
        padding: 1.15em 2em;
        max-width: 40%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .topModal__inner .textLink{text-align: center; padding-top: 0.75em;}
    .topModal__inner .textLink a{color: #c30000; font-size: 1.1vw;}
    
    .topModal__close{
        position: absolute;
        top: -30px;
        right: -30px;
        text-indent: -99999px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #b2b2b2;
        cursor: pointer;
    }
    .topModal__close:before,
    .topModal__close:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 26px;
        height: 3px;
        background: #fff;
    }
    .topModal__close:before{
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .topModal__close:after{
        transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    /* open */
    body.modal_open .topModal{display: flex;}
    body.modal_open .header,
    body.modal_open .nav___toggle,
    body.modal_open #ContentsBase {
        -ms-filter: blur(6px);
        filter: blur(6px);
        pointer-events: none;
        user-select: none;
    }    
}
@media screen and (max-width: 767px) {
    .topModal{display: none!important;}
}







/* ##################################################

　scroll-indocator

################################################## */
@media print, screen and (min-width: 768px) {
    .scroll-indocator {display: none;}
}
@media screen and (max-width: 767px) {
    .scroll-indocator, .scroll-indocator:before, .scroll-indocator:after {
        position: absolute;
        left: 0;
        right: 0;
        display: flex;
        width: 1px;
        height: 15vw;
        z-index: 100;
        color: #fff;
        mix-blend-mode: exclusion;
        margin: auto;
    }
    .scroll-indocator:before, .scroll-indocator:after {
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: auto;
        content: "";
        background-color: currentColor;
    }
    .scroll-indocator:before {
        opacity: 0.2;
    }
    .scroll-indocator:after {
        animation: ScrollnavigateAnimation 2s infinite cubic-bezier(0.77,0,0.18,1);
    }
    .scroll-indocator.-down {
        top: auto;
        bottom: 0;
    }
    .scroll-indocator.-up {
        top: 0;
        bottom: auto;
        transform: scale(-1);
    }
}

@keyframes ScrollnavigateAnimation{
    0% {
        height: 0;
    }
    45% {
        height: 100%;
    }
    55% {
        height: 100%;
        top: 0;
    }
    100% {
        height: 0;
        top: 100%;
    }    
}










/* ##################################################

　spFixBanner

################################################## */
@media print, screen and (min-width: 768px) {
    .spFixBanner{display: none!important;}
}
@media screen and (max-width: 767px) {
    .spFixBanner{
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 999;
        font-size: 4vw;
        transition: bottom 0.5s ease;
    }
    .spFixBanner__title{
        position: relative;
        padding: 5% 12% 6%;
        color: #c30000;
    }
    .spFixBanner__title:before{
        content: "";
        display: block;
        position: absolute;
        border: none;
        transition: .3s;
        border-right: 1px solid #c30000;
        border-top: 1px solid #c30000;
        right: 1.5em;
        width: 0.4em;
        height: 2.25em;
        top: 1.75em;
        transform: skewY(45deg) scale(1, -1);
    }
    .spFixBanner__title__important{position: relative; font-size: 100%; margin: 0.25em 0;}
    .spFixBanner__title__important:before{
        content: "";
        position: absolute;
        width: 1em;
        height: 1em;
        left: -1.5em;
        top: 0.1em;
        background: url(../img/contents/index/ico_info.svg);
        background-size: 100%;
    }
    .spFixBanner__title__text{font-size: 81.25%;}
    .spFixBanner__contents{position: relative; max-height: 0; overflow: hidden; transition: max-height 0.5s ease;}
    .spFixBanner__title:after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 6%;
        width: calc(100% - 12%);
        height: 1px;
        background: #c30000;
    }
    .spFixBanner__contents p{padding: 6% 12%; font-size: 81.25%;}
    .spFixBanner__contents .button{font-size: 100%; padding-left: 5em; padding-right: 5em; min-width: 17em;}
    .spFixBanner__contents .buttonBox + .buttonBox{margin-top: 0.5em;}
    .spFixBanner__contents .textLink{text-align: center; padding-top: 1.25em;}
    .spFixBanner__contents .textLink a{color: #c30000;}

    /* open */
    .spFixBanner.spBnr_open .spFixBanner__title:before{
        transform: skewY(-45deg);
        top: 2em;
    }
    .spFixBanner.spBnr_open .spFixBanner__contents{max-height: 300px;}
}
@media (orientation: landscape) and (max-width: 767px){
    .spFixBanner{bottom: -155px; font-size: 1.8rem;}
    .spFixBanner__title{padding: 1em 3em;}
    .spFixBanner__contents p{padding: 1.5em 3em 2em;}
    .spFixBanner.spBnr_open{bottom: 0;}
}






/* ##################################################

nav  グローバルナビ

################################################## */
/* ====================================================
　≡ボタン
==================================================== */
.nav___toggle {
    position: fixed;
    top:0;
    right:0;
    display:flex;
    justify-content:space-around;
    align-items:center;
    flex-direction: column;
    cursor:pointer;
    z-index:100001;
}

.nav___toggle.open{justify-content:center;}
.nav___toggle:before,
.nav___toggle:after,
.nav___toggle > * {
    position:relative;
    top:-6%;
}
.nav___toggle span {
    display:block;
    height: 1px;
    position:relative;
}

@media print, screen and (min-width: 768px) {
    .nav___toggle {
        width: 100px;
        height: 90px;
        font-size: 1.3rem;
        padding: 35px 0px;
        background:#fff;
    }
    .nav___toggle span {
        background:#000;
        width: 42%;
    }
    
/*    .nav___toggle:before {
        display:block;
        content:"";
        height:1.5em;
    }
    .nav___toggle:after {
        display:block;
        content:"MENU";
        color:#000;
    }*/
}
@media screen and (max-width: 767px) {
    .nav___toggle {
        width: 50px;
        height: 50px;
        padding: 20px 0px;
    }
    .nav___toggle span {
        background:#000;
        width: 46%;
    }
    .pageIndex .nav___toggle span,
    /* .pageMiyako .nav___toggle span, */
    .pageOnsyukai .nav___toggle span,
    .pageEnglish .nav___toggle span,
    .pageGeimaiko .nav___toggle span {
        background: #000;
    }
    
    .pageIndex.headerReverse .nav___toggle span,
    /* .pageMiyako.headerReverse .nav___toggle span, */
    .pageOnsyukai.headerReverse .nav___toggle span,
    .pageEnglish.headerReverse .nav___toggle span,
    .pageGeimaiko.headerReverse .nav___toggle span,
    .pageMiyako.headerReverse .nav___toggle span,
    .pageNews.headerReverse .nav___toggle span,
    .pageKabukai.headerReverse .nav___toggle span,
    .pageGionmachi.headerReverse .nav___toggle span,
    .pageAccess.headerReverse .nav___toggle span,
    .pagePrivacypolicy.headerReverse .nav___toggle span,
    .pageLinks.headerReverse .nav___toggle span{background: #fff;}
    
    .pageIndex.headerReverse .nav___toggle.open span,
    /* .pageMiyako.headerReverse .nav___toggle.open span, */
    .pageOnsyukai.headerReverse .nav___toggle.open span,
    .pageEnglish.headerReverse .nav___toggle.open span,
    .pageGeimaiko.headerReverse .nav___toggle.open span,
    .pageMiyako.headerReverse .nav___toggle.open span,
    .pageNews.headerReverse .nav___toggle.open span,
    .pageKabukai.headerReverse .nav___toggle.open span,
    .pageGionmachi.headerReverse .nav___toggle.open span,
    .pageAccess.headerReverse .nav___toggle.open span,
    .pagePrivacypolicy.headerReverse .nav___toggle.open span,
    .pageLinks.headerReverse .nav___toggle.open span{background: #000;}
}
@media print {
    .nav___toggle {position:absolute;}
}

/* ====================================================
　ナビ内部
==================================================== */
.nav__base {
    position:fixed;
    top:0;
    right: 0;
    width:100%;
    height:0;
    background:#fff;
    overflow:hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none; 
    z-index:100000;
}
.nav__base::-webkit-scrollbar {
    display:none;
}
.nav__base__gnav a{
    position: relative;
    padding-bottom: 0.15em;
    display: inline-block;
    color: #000;
    text-decoration: none;
    letter-spacing: 0.08em;
}

.nav__base__gnav a:after{
    content: "";
    position: absolute;
    right: 0.5em;
    top: 0.3em;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.nav__base__gnav .long a:after{top: 0.8em;}
.nav__base__gnav .long .small{display: inline-block; font-size: max(0.8vw, 1.4rem);}
.nav__base__gnav a:hover{
   opacity: 0.7;
    /*transform-origin: left top;
    transform: scale(1, 1);*/
}

.nav__base__address{border-top: 1px solid #000;}
.nav__base__address__text{text-align: center;}

.nav__base__sns{display: flex; justify-content: space-between; align-items: center;}
.nav__base__sns li{width: 25%;}
.nav__base__sns li a{display: block; margin-left: auto; margin-right: auto;}
.nav__base__sns li .svgIco{fill: #000000;}

@media print, screen and (min-width: 768px) {
    .nav__base {width: 30%; max-width: 560px; min-width: 300px;}
    .nav__base .nav___english{color: #000000;}
    .nav__base .nav___english a{color: #000000;}
    .nav__base__icon{display: none;}
    .nav__base__gnav,
    .nav__base__address,
    .nav__base__sns{
        width: 340px;
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    .nav__base__gnav {padding-top: calc(70px + 2%); padding-bottom: 1vw;}
    .nav__base__gnav li + li{margin-top: 0.9em;}
    .nav__base__gnav a{font-size: max(0.99vw, 1.7rem); width: 100%; height: 100%;}

    .nav__base__address{padding-top: 2vw; font-size: max(0.9vw, 1.6rem);}
    .nav__base__address__title{
        margin-bottom: 0.25em;
        text-align: center;
        letter-spacing: 0.08em;
        font-size: 100%;
    }
    .nav__base__address__text{letter-spacing: 0.08em; font-size: max(60%, 1.3rem);}
    .nav__base__address__text__tel.pc{display: block;}
    .nav__base__sns{margin-top: 1vw; margin-bottom: 1vw; width: 230px;}
    .nav__base__sns li a{width: 50%; height: 34px;}
    .nav__base .buttonBox{width: 70%; margin: 0 auto;}
    .nav__base .buttonBox .button{
        font-size: 1.3rem;
        width: 100%;
    }
    .nav__base .buttonBox .button.arrow:after{
        width: 0.6em;
        height: 0.6em;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        border-bottom: none;
    }
    
    
}
@media screen and (max-width: 767px) {
    .nav__base.open{padding-bottom: 35px;}
    .nav__base__icon{
        width: 35px;
        height: 35px;
        margin-left: 20px;
        margin-top: 10px;
    }
    .nav__base__gnav {
        padding-top: 10px;
        padding-bottom: 25px;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    .nav__base__gnav li + li{margin-top: 0.75em;}
    .nav__base__gnav a{font-size: 3.75vw; width: 100%; height: 100%;}
    .nav__base__address{
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-top: 25px;
    }
    .nav__base__address__title{display: none;}
    .nav__base__address__text{display: flex; flex-direction: column; font-size: 3.25vw;}
    .nav__base__address__text__adress{order: 2;}
    .nav__base__address__text__tel{order: 1; font-size: 120%;}
    .nav__base__address__text__tel a[href^="tel:"]{text-decoration:none; color: #000;}
    .nav__base__sns{margin-top: 1em; margin-bottom: 3em; width: 230px; margin-left: auto; margin-right: auto;}
    .nav__base__sns li a{width: 70%; height: 40px;}
    
    .nav__base .buttonBox{width: 70%; margin: 0 auto;}
    .nav__base .buttonBox .button{
        font-size: 3.75vw;
        width: 100%;
    }
    .nav__base .buttonBox .button.arrow:after{
        width: 0.6em;
        height: 0.6em;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        border-bottom: none;
    }
}

/* ====================================================
　アニメーションタイミング 
==================================================== */
.nav__base {transition: height ease 0.5s;}
.nav___toggle span {transition: ease 0.5s;}
.nav___toggle.open span:nth-of-type(1) {transform:rotate(-45deg);}
.nav___toggle.open span:nth-of-type(2) {transform:rotate(45deg);}

.nav__base.open {height:100%;}


/*
body.pageIndex #ContentsBase > *:not(.mainImg),
body.pageIndex #ContentsBase iframe,
body:not(.pageIndex) #ContentsBase {transition: filter 0.5s 0.25s;}


body.pageIndex.open #ContentsBase > *:not(.mainImg),
body.pageIndex.open #ContentsBase iframe,
body:not(.pageIndex).open #ContentsBase {
*/

body.pageIndex.open .mainImg iframe,
body.open #ContentsBase {
    -ms-filter: blur(3px);
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
    transition: filter 0.5s;
}

#video-overlay {border-right:0 solid #000;}
#ContentsBase {background-color:#fff;}



@media print, screen and (min-width: 768px) {
    .nav___toggle.open span:nth-of-type(1) {top:-8%;}
    .nav___toggle.open span:nth-of-type(2) {top:-8%;}
}
@media screen and (max-width: 767px) {
    .nav___toggle.open span {background: #000;}
    .nav___toggle.open{margin-top: 5px;}
    .nav___toggle.open span:nth-of-type(1) {top:-50%;}
    .nav___toggle.open span:nth-of-type(2) {top:-56%;}
}




/* ====================================================
　コンテンツスクロール停止
==================================================== */
html.open,body.open {
    overflow:hidden;
    overscroll-behavior:none;
     touch-action: none;
    -webkit-overflow-scrolling: none;
}






/* ##################################################

　ページ下固定

################################################## */
.information__onlineFix{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
}
.information__onlineFix .information__online p{
    margin-bottom: 0;
}
.information__onlineFix .information__online .button:before{
    content: "";
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.25em;
    background-image: url(../img/contents/miyako/ico_person.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}

.information__onlineFix .information__online .button.disabled{
    pointer-events: none;
    background: #B7B7B7;
    border: 1px solid #B9B9B9;
}

.information__onlineFix .information__online .tel a{
    position: relative;
}
.information__onlineFix .information__online .tel a:before{
    content: "";
    position: relative;
    display: inline-block;
    top: -0.2em;
    left: 0;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.25em;
    background-image: url(../img/contents/ico-tel.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
}
.information__onlineFix .information__online .tel a{
    color: #c30000;
    text-decoration: none;
}

.information__onlineFix .information__online .button.arrowR:after{
    position: absolute;
    right: 0.3em;
    left: inherit;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
/*.information__onlineFix .information__online .button{margin-bottom: 0.5em;}*/
@media print, screen and (min-width: 768px) {
    .information__onlineFix .information__online{
        margin-top: 0;
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: min(2.6vw, 2.8rem);
        color: #c30000;
    }
    .information__onlineFix .information__online .button{
        margin-left: 0.5em;
        padding: 0.45em 3em 0.45em 2em;
        font-size: min(2.2vw, 2.3rem);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .information__onlineFix .information__online .tel{
        margin-left: 1em;
        text-align: center;
        font-size: min(2.0vw, 1.8rem);
        line-height: 1.5;
    }
    .information__onlineFix .information__online .tel a{
        font-size: min(2.2vw, 2.3rem);
    }
    
    .information__onlineFix .information__online .small{
        font-size: min(2.0vw, 1.8rem);
        display: block;
        text-align: center;
    }
    .information__onlineFix .information__online .small.visit{
        font-size: min(1.8vw, 1.6rem);
        display: block;
        text-align: center;
    }
    
}
@media screen and (max-width: 767px) {
    .information__onlineFix .information__online{
        margin: 2% 0 2%;
        text-align: center;
        color: #c30000;
        font-size: min(3.5vw, 1.8rem);
    }
    .information__onlineFix .information__online .button{
        padding: 0.65em 4em 0.5em;
    }
    .information__onlineFix .information__online .button span{
        display: inline-block;
        font-size: min(3.75vw, 2.2rem);
    }
    .information__onlineFix .information__online .button:before{
        top: -0.1em;
    }
    .information__onlineFix .information__online .button span:before{
        content: "";
        position: absolute;
        left: 0.31em;
        top: 0.25em;
        width: calc(100% - 0.62em);
        height: calc(100% - 0.5em);
        border: 1px solid #fff;
    }
    .information__onlineFix .information__online .tel{
        margin-top: 0.5em;
    }
    .information__onlineFix .information__online .tel a{
        margin-left: 0.5em;
        font-size: min(3.75vw, 2.2rem);
    }
    .information__onlineFix .information__online .small{
        font-size: min(3.75vw, 2.2rem);
        display: block;
    }
    .information__onlineFix .information__online .small.visit{
        font-size: min(3vw, 1.8rem);
        display: block;
        text-align: center;
    }
    .information__onlineFix .information__online .button.arrowR:after{
        right: 1em;
    }    
}





/* ##################################################

　pagination　ページ送り

################################################## */
.pagination ul{display: flex; justify-content: center; align-items: baseline;}
.pagination a{text-decoration: none; color: #000;}
.pagination .prev{margin-right: 1vw;}
.pagination .next{margin-left: 1vw;}
.pagination .prev a,
.pagination .prev span,
.pagination .next a,
.pagination .next span{
    width: 2em;
    height: 0.375em;
    position: relative;
    display: block;
    text-indent: -99999px;
}
.pagination .prev a:before,
.pagination .prev span:before{
    content: "";
    display: block;
    position: absolute;
    border: none;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(-45deg);
    transition: .3s;
    bottom: 10%;
    left: 10%;
    width: 90%;
    height: 90%;  
}
.pagination .next a:before,
.pagination .next span:before{
    content: "";
    display: block;
    position: absolute;
    border: none;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(45deg);
    transition: .3s;
    bottom: 10%;
    right: 10%;
    width: 90%;
    height: 90%;
}
.pagination .page{padding-left: 0.2em; padding-right: 0.2em;}
.pagination .page a,
.pagination .page span{padding-left: 0.2em; padding-right: 0.2em;}
.pagination .page a{color: #989898;}
.pagination .page span{color: #c30000; font-size: 138%;}


@media print, screen and (min-width: 768px) {
    .pagination{margin-top: 5%;}
    .pagination ul{font-size: 2vw;}
}
@media screen and (max-width: 767px) {
    .pagination{margin-top: 5%; margin-bottom: 20%;}
    .pagination ul{font-size: 5vw;}
}




/* detail */
.pagination.detail{margin-bottom: 0;}

.pagination.detail .prev a,
.pagination.detail .prev span,
.pagination.detail .next a,
.pagination.detail .next span{width:1.75em; text-indent: 0; overflow: visible;}

.pagination.detail .prev a:after,
.pagination.detail .prev span:after,
.pagination.detail .next a:after,
.pagination.detail .next span:after{
    position: absolute;
    top: 0.5em;
    line-height: 2em;
    width: 90%;
    text-align: center;
}
.pagination.detail .prev a:after,
.pagination.detail .prev span:after{content: "back"; right: 0em;}
.pagination.detail .next a:after,
.pagination.detail .next span:after{content: "next"; left: 0em;}

.pagination.detail .page a{font-size: max(0.5em, 1.3rem); color: #c30000;}

@media print, screen and (min-width: 768px) {
    .pagination.detail ul{justify-content: flex-end;}
    .pagination.detail .prev{margin-right: 0;}
    .pagination.detail .next{margin-left: 0;}
    .pagination.detail .prev a:after,
    .pagination.detail .prev span:after,
    .pagination.detail .next a:after,
    .pagination.detail .next span:after{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 767px) {
    .pagination.detail {margin-top: 20%;}
    .pagination.detail .page a{
        padding-left: 1em;
        padding-right: 1em;
    }
    .pagination.detail .prev a:after,
    .pagination.detail .prev span:after,
    .pagination.detail .next a:after,
    .pagination.detail .next span:after{
        font-size: 2.5vw;
    }
}





/* ##################################################

　side 

################################################## */
.side__breadcrumb .en{
    padding-bottom: 1.5em;
    margin-bottom: 1.5em;
    border-bottom: 1px solid #000;
}


@media print, screen and (min-width: 768px) {
    .side__sitename,
    .side__sitename:last-of-type{
        position: absolute;
        color: #000;
        height: 100%;
        text-align: center;
        bottom: 0;
        left: 4vw;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 3;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 0.9vw;
        letter-spacing: 0.08em;
    }
    .side__breadcrumb,
    .side__breadcrumb:last-of-type{
        position: absolute;
        color: #000;
        height: 100%;
        text-align: center;
        bottom: 0;
        right: 4vw;
        margin-bottom: 0;
        padding-bottom: 0;
        z-index: 3;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 0.9vw;
        letter-spacing: 0.08em;
    }
}
@media screen and (max-width: 767px) {
    .side__sitename,
    .side__breadcrumb{
        display: none;
    }
}







/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */
.slick-slide img {
    width: 100%;
}

/* スライドloading DF
-------------------------------------*/
/* .slickSlider {background:url(../../_assets/_widget/_css/ajax-loader.gif) center no-repeat;} */

/* スライド同士の間隔 DF
-------------------------------------*/
.slick-slide {margin: 0px 0; padding:1px;}


/* ====================================================
　黒丸ボタンスタイル：・・・
==================================================== */
.slick-dots li {margin:0;}
.slick-dots li{width: 16px; height: 16px;}
.slick-dots li button{width: 16px; height: 16px; padding: 2px;}
.slick-dots li button:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #cbcbcb;
    opacity: 1;
}
.slick-dots li.slick-active button::before{
    width: 6px;
    height: 6px;
    background: #282828;
}


/* ====================================================
　fullscreen　メインイメージ
==================================================== */
.fullscreen.slickSlider img {width:100%;}
.fullscreen.slickSlider .slick-dots {bottom: -3em;}


@media print, screen and (min-width: 768px) {
    .fullscreen.slickSlider{}
}
@media screen and (max-width: 767px) {
    .fullscreen.slickSlider{margin-bottom: 0;}
    .fullscreen.slickSlider .slick-slide img{height: 100vh; width: 100%; object-fit: cover;}
}



/* ====================================================
　center　お知らせ
==================================================== */
.center.slickSlider a{display: block; text-decoration: none; color: #000;}

@media print, screen and (min-width: 768px) {
    .center.slickSlider .slick-slide{padding: 0 2.85vw;}
    .center.slickSlider .slick-dots{
        width: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: auto;
        top: 44vw;
    }

    .center.slickSlider .newsImg{position: relative;}
    .center.slickSlider a{overflow: visible;}
    .center.slickSlider .newsImg__cap,
    .center.slickSlider .newsImg__date{position: absolute; z-index: 1;}
    .center.slickSlider .newsImg__cap{
        width: 100%;
        padding: 0 3%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        text-align: center;
        font-size: 1.3vw;
        letter-spacing: 0.08em;
    }
    .center.slickSlider .newsImg__date{
        top: 0;
        right: -2.75em;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: max(0.83vw, 1.2rem);
        letter-spacing: 0.2em;
    }
    
    .center.slickSlider .newsDetail{padding-top: 5vw;}
    .center.slickSlider .newsDetail__title{text-align: center; font-size: max(0.98vw, 1.3rem); letter-spacing: 0.2em;}
    .center.slickSlider .newsDetail__title__date{display: inline-block; margin-right: 0.5em;}
}
@media screen and (max-width: 767px) {
    .center.slickSlider{padding-left: 6%; padding-right: 6%; margin-bottom: 10%; font-size: 3.8vw;}
    .center.slickSlider > div{padding-bottom: 0.5em; margin-bottom: 1em; border-bottom: 1px solid #c30000;}
    .center.slickSlider .newsImg{display: flex; justify-content: space-between;}
    .center.slickSlider .newsImg__img{display: none;}
    .center.slickSlider .newsDetail{display: none;}
    .center.slickSlider .newsImg__cap{order: 2; width: 65%; margin-bottom: 0; font-size: 100%; line-height: 1.4;}
    .center.slickSlider .newsImg__date{order: 1; width: 30%; font-size: 86.6%;}
}




/* アニメーション
-------------------------------------*/
@media print, screen and (min-width: 768px) {
    .center.slickSlider{margin-bottom: 0;}
    .center.slickSlider .newsImg__img{transition: 0.5s ease; opacity: 1;}
    .center.slickSlider a:hover .newsImg__img{opacity: 0.4;}

    .center.slickSlider .newsImg__cap{transition: 0.5s ease; opacity: 0;}
    .center.slickSlider a:hover .newsImg__cap{opacity: 1;}

    .center.slickSlider .newsDetail{transition: 0.5s ease; opacity: 0;}
    .center.slickSlider .slick-current .newsDetail{opacity: 1;}
}




/* ######################################################################################

    pageTopFix　ページトップ

###################################################################################### */ 
.pageTopFix{
    display:inline-block;
    position: fixed;
    z-index: 8000;
    text-indent:-9999px;
    background-image: url(../img/footer/pageTop.svg);
    background-size: contain;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {
    .pageTopFix {
        bottom: calc(5vw + 40px);
        right: 50px;
        width: 4vw;
        height: 4vw;
    }
}
@media screen and (max-width: 767px) {
    .pageTopFix {
        bottom: calc(20vw + 50px);
        right: 10px;
        width: min(13.3vw, 70px);
        height: min(13.3vw, 70px);
    }
}





/* ######################################################################################

    svgIco　SVGアイコン

###################################################################################### */ 
.svgSet {width:0; height:0; position:absolute; top:-9999px; left:-9999px;}
.svgIco {fill: #000; width: 100%; height: 100%; overflow: hidden;}



/* ######################################################################################

　table 表

###################################################################################### */
/* ====================================================
　基本設定
==================================================== */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
th, td {
    border-color: #c30000;
    border-style: solid;
    text-align: left;
    font-weight: normal;
}


@media print, screen and (min-width: 768px) {
    th {
        background: transparent;
        padding: 0.5em;
        vertical-align: top;
        font-size: max(1.25vw, 1.4rem);
        letter-spacing: 0.14em;
    }
    td {
        padding: 0.5em;
        font-size: max(1.25vw, 1.4rem);
    }
    
}
@media screen and (max-width: 767px) {
    th {
        background: transparent;
        padding: 0.5em;
        vertical-align: top;
        font-size: 3vw;
    }
    td {
        font-size: 3.25vw;
    }    
}




  /* ====================================================
  　verticalLineTable
  ==================================================== */
.verticalLineTable{margin-left: auto; margin-right: auto;}
.verticalLineTable th,
.verticalLineTable td{border-left-width: 1px;}

@media print, screen and (min-width: 768px) {
    .verticalLineTable th,
    .verticalLineTable td{padding: 1.3em 0 1.3em 1.3em;}
    .verticalLineTable th{width: 14em;}
}
@media screen and (max-width: 767px) {
    .verticalLineTable th,
    .verticalLineTable td{padding: 1em 0 1em 0.75em; line-height: 1.38;}
    .verticalLineTable th{padding-top: 1.1em;}
    .verticalLineTable th{width: 9em;}
}



  /* ====================================================
  　borderTable
  ==================================================== */
  .borderTable th,
  .borderTable td{
      padding: 0 0.5em;
      border-bottom-width: 1px;
      line-height: 2.08;
  }
  .borderTable th{
      border-right-width: 1px;
      width: 8em;
      text-align: justify;
      -moz-text-align-last: justify;
      text-align-last: justify;
      text-justify: inter-ideograph;
  }
  .borderTable tr:first-child th,
  .borderTable tr:first-child td{border-top-width: 1px;}
  
  @media print, screen and (min-width: 768px) {
      .borderTable{max-width: 80%; margin-left: auto; margin-right: auto;}
      .borderTable th,
      .borderTable td{font-size: max(1.25vw, 1.3rem);}
  }
  @media screen and (max-width: 767px) {
    .borderTable th{padding-left: 0;}
    .borderTable td{padding-right: 0;}
  }
  
  


@media print, screen and (max-width: 767px) {
/* ====================================================
　xsのときcellをBlock
==================================================== */
table.xs-block {
    display: block;
}
table.xs-block caption, table.xs-block thead, table.xs-block tbody, table.xs-block tr, table.xs-block th, table.xs-block td {
    display: block;
}
table.xs-block tr {
    margin-top: 0.5em;
}
table.xs-block tr + tr th {
    border-top-width: 1px;
}
table.xs-block th {
    padding-top: 0.3em;
    padding-bottom: 0.3em;
}
table.xs-block th + td,
table.xs-block td + td {
    border-top-width: 0;
}
table.xs-block.borderBox td {
    border-left-width: 1px;
}
table.cell-xs-create th {
    display: none;
}
table.cell-xs-create td {
    position: relative;
    overflow: hidden;
    padding-left: 7em;
}
table.cell-xs-create td:before {
    content: attr(title);
}
table.cell-xs-create td:nth-of-type(1) {
    border-top-width: 1px;
}
}




/* ######################################################################################

　text テキスト

###################################################################################### */
.txt-red{color: #c30000;}





/* ##################################################

　title タイトル

################################################## */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.75em;
    padding: 0;
    line-height: 1.25;
    font-weight: normal;
  }

@media print, screen and (min-width: 768px) {
    h1 {
        font-size: 40px;
    }
}
@media screen and (max-width: 767px) {
    h1 {
        font-size: 32px;
    }
}

@media print, screen and (min-width: 768px) {
    h2 {
        font-size: 30px;
    }
}
@media screen and (max-width: 767px) {
    h2 {
        font-size: 26px;
    }
}

@media print, screen and (min-width: 768px) {
    h3 {
        font-size: 20px;
    }
}
@media screen and (max-width: 767px) {
    h3 {
        font-size: 18px;
    }
}

@media print, screen and (min-width: 768px) {
    h4 {
        font-size: 18px;
    }
}
@media screen and (max-width: 767px) {
    h4 {
        font-size: 16px;
    }
}

@media print, screen and (min-width: 768px) {
    h5 {
        font-size: 16px;
    }
}
@media screen and (max-width: 767px) {
    h5 {
        font-size: 14px;
    }
}

@media print, screen and (min-width: 768px) {
    h6 {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    h6 {
        font-size: 12px;
    }
}

/* ====================================================
　doubleLangTitle
==================================================== */

.doubleLangTitle .en{
    margin-top: 0.5em;
    display: block;
    font-size: 29.5%;
    color: #c30000;
    letter-spacing: 0.06em;
    text-align: center;
}
.doubleLangTitle .en.small{
    font-size: 22.2%;
}

@media print, screen and (min-width: 768px) {
    .doubleLangTitle{
        font-size: max(4.53vw, 3.2rem);
    }
    .doubleLangTitle.small{
        font-size: max(2.1vw, 2.1rem);
        margin-bottom: 1.5em;
    }
}
@media screen and (max-width: 767px) {
    .doubleLangTitle{
        font-size: 8.5vw;
    }
}


/* spLeftLine */
@media screen and (max-width: 767px) {
    .doubleLangTitle.spLeftLine{
        position: relative;
        font-size: 5.75vw;
        margin-bottom: 2em;
    }
    .doubleLangTitle.spLeftLine:before{
        content: "";
        position: absolute;
        width: 50%;
        height: 1px;
        left: 0;
        top: 50%;
        background: #c30000;
        z-index: 1;
    }
    .doubleLangTitle.spLeftLine > span{
        position: relative;
        background: #fff;
        z-index: 2;
        display: inline-block;
        padding: 0 0.5em;
    }
}



/* ====================================================
　leftLineTitle
==================================================== */
.leftLineTitle{
    position: relative;
    text-align: center;
}
.leftLineTitle:after{
    content: "";
    position: absolute;
    width: 50%;
    height: 1px;
    left: 0;
    top: 33%;
    background: #c30000;
    z-index: 1;
}

.leftLineTitle > span{
    position: relative;
    display: inline-block;
    background: #fff;
    z-index: 2;
    padding-left: 1em;
    padding-right: 1em;
}

.leftLineTitle .en{
    margin-top: 0.5em;
    display: block;
    font-size: 27%;
    color: #c30000;
    letter-spacing: 0.06em;
}
.leftLineTitle.small{
    font-size: max(1.97vw, 2.0rem);
    margin-bottom: 2.5em;
}
.leftLineTitle.onlyJP:after{
    top: 50%;
}

@media print, screen and (min-width: 768px) {
    .leftLineTitle{
        font-size: max(3.75vw, 3.0rem);
        margin-bottom: 16%;
    }
}
@media screen and (max-width: 767px) {
    .leftLineTitle{
        font-size: 5.75vw;
        margin-bottom: 16%;
    }
}




/* ====================================================
　titleBold
==================================================== */
.titleBold{
    text-align: center;
}
.titleBold.medium{
    margin-bottom: 1.5em;
}
.titleBold.medium{
    margin-bottom: 1.5em;
}


@media print, screen and (min-width: 768px) {
    .titleBold{
        font-size: 4.1vw;
        margin-bottom: 2em;
    }
    .titleBold.medium{
        font-size: 2.1vw;
    }
}
    
@media screen and (max-width: 767px) {
    .titleBold{
        font-size: 8.5vw;
        margin-bottom: 1.5em;
    }
}

/* ====================================================
　titleEngRed
==================================================== */
.titleEngRed { color:#c30000; margin-bottom: 0.75em;}
@media print, screen and (min-width: 768px) {
    .titleEngRed{
        font-size: 2vw;
    }
}
@media screen and (max-width: 767px) {
    .titleEngRed{
        font-size: 5vw;
    }
}




/* ====================================================
　doubleLineTitle
==================================================== */
.doubleLineTitle{
    max-width: 18em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-top: 1px solid #c40000;
    border-bottom: 1px solid #c40000;
    background: #fff;
}
.doubleLineTitle h2{
    width: 50%;
    font-size: 100%;
    margin-bottom: 0;
    text-align: center;
    color: #c40000;
    letter-spacing: 0.02em;
}

.doubleLineTitle p{
    width: 50%;
    margin-bottom: 0;
    letter-spacing: 0.15em;
}

@media print, screen and (min-width: 768px) {
    .doubleLineTitle{font-size: max(3.12vw, 2.8rem);}
    .doubleLineTitle p{font-size: max(40%, 1.3rem); line-height: 2;}
}
@media screen and (max-width: 1079px) {
    .doubleLineTitle{max-width: 21em;}
}
@media screen and (max-width: 767px) {
    .doubleLineTitle{font-size: 5.25vw; margin-left: -6%; margin-right: -6%;}
    .doubleLineTitle h2{width: 40%;}
    .doubleLineTitle p{width: 60%; font-size: max(42%, 1.0rem); line-height: 1.86;}
}


/* ====================================================
　borderTitle
==================================================== */
.borderTitle{
    padding: 0.5em 0.25em;
    border: 1px solid #c30000;
    font-size: max(1.51vw, 1.5rem);
    color: #c30000;
    text-align: center;
    display: inline-block;
    min-width: 12em;
}














/* ######################################################################################

　wallBelt

###################################################################################### */
.wallBelt {
    position: relative;
    overflow: hidden;
}
@media print, screen and (min-width: 768px) {
.wallBelt {
    padding-top: 6%;
    padding-bottom: 6%;
}
.wallBelt.narrow {
    padding-top: 3%;
    padding-bottom: 3%;
}
.wallBelt.wide {
    padding-top: 9%;
    padding-bottom: 9%;
}
.wallBelt.extra {
    padding-top: 12%;
    padding-bottom: 12%;
}
.wallBelt.topNarrow {
    padding-top: 3%;
}
.wallBelt.topWide {
    padding-top: 9%;
}
.wallBelt.topExtra {
    padding-top: 12%;
}
.wallBelt.bottomNarrow {
    padding-bottom: 3%;
}
.wallBelt.bottomWide {
    padding-bottom: 9%;
}
.wallBelt.bottomExtra {
    padding-bottom: 12%;
}
}
@media screen and (max-width: 767px) {
.wallBelt {
    padding-top: 16%;
    padding-bottom: 16%;
}
.wallBelt.narrow {
    padding-top: 8%;
    padding-bottom: 8%;
}
.wallBelt.wide {
    padding-top: 20%;
    padding-bottom: 20%;
}
.wallBelt.extra {
    padding-top: 24%;
    padding-bottom: 24%;
}
.wallBelt.topNarrow {
    padding-top: 8%;
}
.wallBelt.topWide {
    padding-top: 20%;
}
.wallBelt.topExtra {
    padding-top: 24%;
}
.wallBelt.bottomNarrow {
    padding-bottom: 8%;
}
.wallBelt.bottomWide {
    padding-bottom: 20%;
}
.wallBelt.bottomExtra {
    padding-bottom: 24%;
}
}
.wallBelt.zero {
padding-top: 0;
padding-bottom: 0;
}
.wallBelt.topZero {
padding-top: 0;
}
.wallBelt.bottomZero {
padding-bottom: 0;
}

/* ######################################################################################

　youtube モーダル

###################################################################################### */
.youtubeVideo_st,
.youtubeVideo {position:relative; display:block;}
.youtubeVideo_st img,
.youtubeVideo img {object-fit:cover; width:100%;}
.youtube-playbutton {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:60px;
    height:44px;
}
.youtube-playbutton-base {
    fill: #212121;
    fill-opacity: .8;
    transition:all 0.15s ease;
}
@media print, screen and (min-width: 768px) {
    .youtube{
      position: relative;
      width: 100%;
      padding-top: 56.25%;
    }
    .youtubeVideo_st,
    .youtubeVideo{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .youtubeVideo_st img,
    .youtubeVideo img{
      width: 100%;
      height: 100%;
    }
    .youtubeVideo:hover .youtube-playbutton-base {fill: #f00; fill-opacity:1;}
}
@media screen and (max-width: 767px) {
  .youtubeVideo_st img,
    .youtubeVideo img {height:calc((100vw - 60px)/16*9);}
}

/* =======================================================
	indexBanner
========================================================== */
@media print, screen and (min-width: 768px) {
    .indexBanner{
        position: fixed;
        top: 8vw;
        left: 40px;
        z-index: 9999;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }
    .indexBanner + .indexBanner {
        top: 18vw;
    }
     .indexBanner img{
         /*width:25vw;*/
         width: 15vw;
     }
     .indexBanner___close {
         position:absolute;
         top:0.2em;
         right:0.2em;
         font-size:2rem;
         font-weight: bold;
         line-height:1;
         border-radius:50%;
         border:none;
         background:#fff;
         cursor:pointer;
     }
    
    /*都をどりがある時のみ
    .indexBanner:not(.miyako){top: 330px!important;}*/
}


@media screen and (max-width: 767px) {
    .indexBanner{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        width: 90%;
        box-shadow: 0 0 5px rgba(0,0,0,0.2);
    }
    .indexBanner___close {
         position:absolute;
         top:0;
         right:0.3em;
         font-size:5rem;
         font-weight: bold;
         color: #fff;
         line-height:1;
         border-radius:50%;
         border:none;
         cursor:pointer;
        background: none;
     }

}

/* =======================================================
	spBanner
========================================================== */
@media print, screen and (min-width: 768px) {
    .spBannerBox{display: none;}
}
.spBannerBox{
    position: fixed;
    background: rgba(0,0,0,0.8);
    padding: 4em 2em 2em;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    z-index: 90000;
    transition: transform 0.5s ease, opacity 0.5s ease;  
}
.spBanner{
    
}
.spBanner.second{
    margin-top: 1em;
}
.spBanner img{width: 100%; border: 1px solid #000000;}

.spBannerBox.hide{opacity: 0;}