@charset "utf-8";




.sp {
    display: none;
}

@media screen and ( max-width : 959px ) {


    @-ms-viewport {
        width: device-width;
    }


/* reset
------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    float: none;
}
ol#NewsList01:after, dl#TxtSize:after, div#FooterSubNav:after, div#FooterSubNav ul:after, div#FooterNav div#FooterNavInBox:after, div#AddBnr ul:after, div#SubCal ul:after, div#Content:after, ul#GlobalNav:after, div#HeaderNavInBox:after, div#Header:after, .ClearFix:after, #HeaderNavInBox:after, ul.SubLink:after, div#FooterNav div#FooterNavInBox .leftCol:after,div.AreaInfoBox dl dd:after, div#Content div#anotherBox .anoBox:after, div#Content div#anotherBox ul:after, div#MobileInfo:after, div#Weather ul:after, div#AreaPickUpInBox:after, div#AreaDataBox:after, ol#NewsList01 li:after, div#Banner01 ul:after, ol#imprtntNewsList li:after, div#MobileInfo div#MobileInfoTxt:after, div#Banner02 ul:after {
    display:none!important;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

    img {
        width: 100%;
        height: auto;
    }
    div,li,ul {
        box-sizing: border-box;
    }
    body {
        width: 100%;
        /*
        opacity:0;
    animation-name: fade-in1;
    animation-duration: 4s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay: 1s; //アニメーション開始させる時間
    animation-iteration-count: 1; //繰り返し回数
    animation-direction: normal; //往復処理をするかどうか
    animation-fill-mode: forwards; //アニメーション後のスタイルをどうするか
        */
    }

  // アニメーション
  @keyframes fade-in1 {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


html {
  font-size: 62.5%;
    }
body,a,div,li,th,td {
  font-size: 1.3rem!important;
}

    .sp {
        display: block;
    }

/* facebook
------------------------------------------------------- */
    .sub_facebook {
        margin-bottom: 20px;
        height: 400px;
        text-align: center;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
        width: 100%!important;
    }


/* ヘッダー
------------------------------------------------------- */
div#Header {
    margin: 0;
    width: 100%;
    max-width: 100vw;
    height: 55px;
    line-height: 1.0;
    font-size: 0;
    position: fixed;
    background: #fff;
    z-index: 19000;
}
    div#HeaderMnu {
    width: 94%;
        height: 55px;
        margin: 0 auto;
        padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: center;
        background: #fff;
    }
    div#HeaderNav {
    display: none;
    width: 100%;
    float: none;
    padding-top: 18px;
    position: fixed;
    z-index: 2000;
    background: #fff;
    height: 100%;
}
    #calender{
        width: 2.6rem;
        min-width: 2.6rem;
    position: fixed;

    right: 12%;
        bottom: 0;
        top: 0;
        background: #fff;
        position: relative;
        right:0;
        position: absolute;
        right: 7.3rem;
}

    div#HeaderNavInBox{
        width: auto;
        float: none;
    }
    div#HeaderMnu h1#SiteID, div#HeaderMnu p#SiteID {
    width: 46%;
        width: 100%;
    float: none;
    padding-top: 0;
    height: 36px;
        max-width: 185px;
        max-width: 208px;
        max-width: 215px;
        background: url(/files/img/common/id_sp.jpg);
        background-size: contain;
        background-repeat: no-repeat;
    }

    div#HeaderMnu h1#SiteID img, div#HeaderMnu p#SiteID img{
        height: auto;
        display: none;
    }

    ul#GlobalNav {
    width: 100%;
    margin: 0 auto;
        display: none;
}
    ul#GlobalNav li {
    float: none;
}
    div#Sub {
        float: none;
        width: 100%;
    }

.togglebtn {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 2.4rem;
}

.togglebtn span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #f2a1a1;
}

.togglebtn.active {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}
.togglebtn.active span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-45deg);
  transform: translateY(10px) rotate(-45deg);
}
.togglebtn.active span:nth-child(2) {
  -webkit-transform: translateY(0) rotate(45deg);
  transform: translateY(0) rotate(45deg);
}
.togglebtn.active span:nth-child(3) {
  opacity: 0;
}
    .togglenav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 200;
        margin: auto;
        margin: 0;
    cursor: pointer;
        right: 4vw;
        right: 0;
        width: 3rem;
        min-width: 3rem;
    height: 2.3rem;
        position: relative;

}
    .togglebtn span {
        height: 3px;
    }
    .togglebtn span:nth-child(1) {
    top: 2px;
}

.togglebtn span:nth-child(2) {
    top: 49.8%;
}
    .togglebtn span:nth-child(3) {
    bottom: 0;
}
    /*
    .fixedHead #HeaderMnu:after{
        content: "";
        background: #fff;
        width: 100%;
        height: 1rem;
        display: block;
        position: absolute;
        left: -.5%;
        top: 180%;
        z-index: 5;
    }
    */
    .headNavWarp {
        width: 50%;
        display: flex;
        justify-content: flex-end;
    }


    /*--カレンダー--*/
    #calender.cActive ~ #Content #EventCalSec{
        display: block;
  }
    #EventCalSec {
        position: fixed;
        top:45px;
        width: 100%;
        z-index: 17000;
        border-top: 3px solid #f2a1a1;
        left: 0;
        padding-top: 3rem;
        margin: 1rem 0 0;
    }
       .fixedHeadCalender #HeaderMnu:before{
            content: "";
        width: 0;
height: 0;
border-style: solid;
border-width: 0 1.2rem 1.2rem 1.2rem;
border-color: transparent transparent #f2a1a1 transparent;
                bottom: 0rem;
    right: 16%;
           right: calc(3% + 6.2rem);
           right: 7.3rem;
    z-index: 12200;
            position: absolute;

    }
    #EventCalSec:after {
        content: "";
        width: 106%;
        height: 100vh;
        display: block;
        background: #fdeeee;
        position: absolute;
        top: 0;
        z-index: 5;
        left: -4%
    }
    #EventCalSec #TitCal,
    #EventCalSec #SubCal{
        z-index: 100;
        position: relative;
        width: 87%;
        margin-right: auto;
        margin-left: auto;
        border:none;
    }
    #EventCalSec #TitCal img {
        display:none;
    }
    #EventCalSec #TitCal {
        background: url(../../img/sp/tit_calender_01.png) no-repeat;
        -webkit-background-size: contain;
        background-size: contain;
        width: 100%;
        height: 2.5vw;
        position: absolute;
        z-index: 110;
        background-position: center;
        top: 17%;

    }
    #EventCalSec #TitCal:after {
        width: 74%;
        height: 2px;
        background: #c1c1c1;
        content: "";
        display: block;
        margin: 0 auto;
        bottom: -3rem;
        left: 0;
        right: 0;
        position: absolute;
    }
    div#SubCal caption {
    width: 100%;
        font-size: 1.8rem;
        padding-bottom: 2rem;
        padding-top: 23%;
        position: relative;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
}
    div#SubCal caption span a{
        font-size: 1.8rem!important;

    }
    div#SubCal caption .Prev,
    div#SubCal caption .Next {
        width: 21%;
            display: inline-block;
    position: relative;
        height: 3.9rem;
        height: 4.9rem;
        top:1.8rem;
        -webkit-background-size: contain!important;
        background-size: contain!important;
    }
    div#SubCal {
        /*
        background: url(../../img/common/img_calender_bg_header.png) no-repeat;
        background-size: 100%;
        padding-top: 7px;
        */
        position: relative;
        z-index: 1;
    }
    div#SubCal div.InSec {
        border: none;
    padding-top: 0;
        padding-bottom: 44%;
        padding-bottom: 6%;
        background: url(../../img/common/cal_bg.png);
        background-position: 0 2px;
        border: 4px solid #d1d1d1;
    }
    div#SubCal div.InSec:before {
        content:"";
        width: calc(100% - 4px );
        height: 15px;
        position: absolute;
        z-index: 2;
        top:-6px;
        background: #d1d1d1;
        background: url(../../img/common/img_calender_bg_header.png) no-repeat;
        background-size: 100%;
        background-position: center top;

    }
    div#SubCal div.InSec:after {
        content:"";
        width: calc(100% - 3px );
        height: 10px;
        position: absolute;
        z-index: 2;
        bottom:-10px;
        background: #d1d1d1;
        background: url(../../img/common/img_calender_bg_bottom.png) no-repeat;
        background-size: 99%;
        background-position: center top;
    }
    div#SubCal caption .Prev{
        position: absolute;
        top:auto;
        left: 0;
        bottom:0;
        background: url(../../img/sp/img_btn_calender_01.png) no-repeat;
        background-repeat: no-repeat;
    }
    div#SubCal caption .Prev img {
        display: none;
    }
    div#SubCal caption .Next{
        position: absolute;
        top:auto;
        right: 0;
        bottom:0;
        background: url(../../img/sp/img_btn_calender_02.png) no-repeat;
        background-repeat: no-repeat;
    }
    div#SubCal caption .Next img{
        display: none;
    }
    div#SubCal table {
        width: 87%;
}

    div#SubCal table td {
        font-size: 130%!important;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    div#SubCal table th {
        font-size: 115%!important;
        padding-top: 1rem;
        padding-bottom: 1rem;

    }

    div#SubCal table td a {

        font-size: 80%!important;
    }
    div#SubCal table + ul {
        display: none;
    }

    button {
      border: none;
      cursor: pointer;
      outline: none;
    }

    .spNav{
        position: fixed;
        background: #f5f3f0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        padding: 1.5rem 0 8rem;
        overflow-x: scroll;
        display: none;
        z-index: 17000;
    }
    .spNav #CustumSearch {
        text-align: center;
        position: relative;
    }
    .spNav #CustumSearch:after {
        content: "";
    background: url(../../img/sp/img_icon_search.png) !important;
        background-repeat: no-repeat!important;
        -webkit-background-size: contain!important;
        background-size: contain!important;
        width: 2rem;
        height: 2rem;
        display: block;
        z-index: 19100;
        position: absolute;
        margin: auto;
        top: 0;
        bottom:0;
        right:5%;
    }
    .spNav #CustumSearch #HdrSch {
    /* background: url(../../img/common/ico_google_logo_01.png) 8px 50% no-repeat; */
    background: url(../../img/common/bg_input_01.png) 0 0 repeat-x !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 4px;
    width: 90%;
    height: 2rem;
    padding:.8rem .8rem !important;
    background: #fff!important;
        margin: 0 auto;
        color: #444444;
        font-size: 115%;
    letter-spacing: .05rem;
}
    .spNav #CustumSearch #BtnSch {
    display: none;
    }
    .spNav #list2 ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    border-top: 3px solid #F2A1A1;
        width: 100%;
        padding:0;
        margin-top: 1.8rem;
    }
    .spNav #list2 ul li{
        width: 50%;
    }
    .spNav #list2 li a {
        display: flex;
        align-items: center;
        width: 100%;
        height: 4rem;
        padding: .4rem 0 .4rem;
        border-bottom: 1px dotted #acaba8;
    }
.spNav #list2 li:nth-of-type(n+5) a {
        border-bottom: none!important;
    }
    .spNav #list2 li:nth-of-type(even) a {
        border-left: 1px dotted #acaba8;

    }
    .spNav #list2 li img{
        width: 52%;
        height: auto;
        margin-left: 1.8rem;
            max-width: 115px;
    }
    .spNav #list3 ul{
     display: block!important;
    border-top: 3px solid #F2A1A1;
    }
    .spNav #list3 ul li img{
        display: none;
    }
    .spNav #list3 ul li a {
        display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 1.7rem 0 1.7rem 1.8rem!important;
        line-height: 1;
        border-bottom: 1px dotted #acaba8;
        font-family: Helvetica,Arial,sans-serif;
        color: #444444;
        padding: .7em 15px;
        font-weight: bold;
        text-decoration: none;
        font-size: 116%!important;
    }
        .spNav #list3 ul li a:after {
            content: "";
            width: 1.4rem!important;
            height: 1.4rem!important;
            display: inline-block;
            -webkit-background-size: contain!important;
            background-size:  contain!important;
            margin-right: 1.8rem;
            background-repeat: no-repeat!important;
        background: url(../../img/sp/ico_arrow_all.png);
    }
    .spNav #list3 ul li:last-of-type a {
        border-bottom: none;
    }
        .spNav #list3 ul li:nth-of-type(1) a:after {
        background: url(../../img/sp/ico_arrow_sea.png);
    }
        .spNav #list3 ul li:nth-of-type(2) a:after {
        background: url(../../img/sp/ico_arrow_forest.png);
    }
        .spNav #list3 ul li:nth-of-type(3) a:after {
        background: url(../../img/sp/ico_arrow_tea.png);
    }
        .spNav #list3 ul li:nth-of-type(4) a:after {
        background: url(../../img/sp/ico_arrow_bamboo.png);
    }
        .spNav #list3 ul li:nth-of-type(5) a:after {
        background: url(../../img/sp/ico_arrow_kyoto.png);
    }
    .spNav #list4 {
    border-top: 3px solid #F2A1A1;
    }
    .spNav #list4 ul {
        display: flex;
        flex-wrap: wrap;
    }
    .spNav #list4 ul li {
        width: 100%;
    }
    .spNav #list4 ul a {
         display: flex;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        padding: 1.7rem 0 1.7rem 1.8rem!important;
        line-height: 1;
        border-bottom: 1px dotted #acaba8;
        font-family: Helvetica,Arial,sans-serif;
        color: #444444;
        padding: .7em 15px;
        font-weight: bold;
        text-decoration: none;
        font-size: 115%!important;

    }
    .spNav #list4 ul a:after {
            content: "";
            width: 1.4rem!important;
            height: 1.4rem!important;
            display: inline-block;
            -webkit-background-size: contain!important;
            background-size:  contain!important;
            margin-right: 1.1rem;
            background-repeat: no-repeat!important;
        background: url(../../img/sp/img_arrow_09.png);
    }
    .spNav #list4 ul li:last-of-type a {
        border:none;
    border-bottom: 3px solid #F2A1A1;
    }

    .spNav #list5 {
        width: 100%;
    }
    .spNav #list5 ul{
        display: flex;
        justify-content: space-between;
            width: 100%;
    margin: 2rem auto 0!important;
        padding: 0 4%;
    }

    .spNav #list5 ul li {
        width: 25%;
        height: auto;
        display: block;
        padding-right: 0;
        margin-right: 1px;
    }
    .spNav #list5 ul li img{
        display: none;
    }
    .spNav #list5 ul li a {
        display: block;
        height: auto;
        padding-bottom: 44%;
        width: 100%;
            -webkit-background-size: cover!important;
            background-size:  cover!important;
        background-repeat: no-repeat!important;
    }
    .spNav #list5 ul li:last-of-type {
        margin-right: 0;
    }
    .spNav #list5 ul li:nth-of-type(1) a {
        background: url(../../img/sp/img_spheader_07.png);
    }
    .spNav #list5 ul li:nth-of-type(2) a {
        background: url(../../img/sp/img_spheader_08.png);
    }
    .spNav #list5 ul li:nth-of-type(3) a {
        background: url(../../img/sp/img_spheader_09.png);
    }
    .spNav #list5 ul li:nth-of-type(4) a {
        background: url(../../img/sp/img_spheader_10.png);
    }
    #Content {
        width: 100%;
    }



/* フッター
------------------------------------------------------- */
    div#Footer {
        max-width: 100%;
        width: 100%;
        overflow: hidden;
    }
    div#FooterNav div#FooterNavInBox {
        width: 100%;
        padding: 2.4rem 0;
    }
    div#FooterNav div#FooterNavInBox .leftCol {
        width: 100%;
        float:none;
        display: none;
    }
    div#ContentFooter p#FooterPatgeTop {
    width: 100%;
    margin: 0 auto;
    text-align: right;
  }
    div#FooterSubNav {
    width: 100%;
    }
    div#FooterSubNav ul {
    display: inline;
    float: none;
        width: 86%;
    margin-left: auto!important;
    margin-right: auto;
}
    div#FooterSubNav p#CopyRight {
    float: none;
    text-align: center;
    width: 100%;
    color: #a6a6a6;
    font-size: 80%!important;
    margin-top: 3rem;
    }
    div#FooterNav div#FooterNavInBox dl {
    float: none;
    width: auto;
}
    div#FooterNav {
        background: url(../../img/sp/img_bg_footer.png) no-repeat;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        max-width: 100vw;
    }
    div#FooterNav div#FooterNavInBox dl#TourismOffice {
        width: 100%;
        padding: 0 5%;
        box-sizing: border-box;
    }
    div#FooterNav div#FooterNavInBox dl#TourismOffice br {
        display: none;
    }
    div#FooterNav div#FooterNavInBox dl#TourismOffice dt,
    div#FooterNav div#FooterNavInBox dl#TourismOffice dt span {
        font-size: 1.6rem;
        padding: 0;
        width: 100%;
}
    div#FooterNav div#FooterNavInBox dl#TourismOffice dd a {
    background: none;
    padding-left: 0;
    width: 14%;
    display: block;
}
    div#ContentFooter {
    border-top: none;
    }
    div#FooterNav div#FooterNavInBox dl#TourismOffice dd {
    padding-left: 0;
    margin-top: 1.6rem;
}
    div#FooterNav div#FooterNavInBox dl#TourismOffice dd br {
        display: block;
    }
    div#FooterNav div#FooterNavInBox dl#TourismOffice dd {
        line-height: 2.3rem;
    }
div#FooterNav div#FooterNavInBox dl#TourismOffice dd p {
    margin: 3px 0;
    line-height: 1.8;
}
    div#FooterSubNav ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-left: 0;

    }
    div#FooterNav div#FooterNavInBox dl#TourismOffice a img {
        display: none;
    }
    div#FooterNav div#FooterNavInBox dl#TourismOffice dd a {
        background: url(../../img/sp/img_btn_05.png);
        display: block;
        height: 26px;
        width: 17%;
        -webkit-background-size: contain;
        background-size: contain;
        background-repeat: no-repeat;
        margin-top: .8rem;
    }
    div#FooterSubNav ul li {
    border-left: none;
    padding-left: 0;
    float: none;
    display: block;
    width: 48%;
        text-align: center;
        position: relative;
}
    div#FooterSubNav ul li:nth-of-type(even):before {
        content:"";
        background-color: #a9a597;
        width: 1px;
        height: 2rem;
        position: absolute;
        left: -2rem;

    }
    div#FooterSubNav ul li:nth-of-type(n+3) {
        margin-top: 1.6rem;
    }
    div#FooterSubNav ul li a {
        padding:.2rem 0;
    }


/* コンテンツ部分
------------------------------------------------------- */
    div#Container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        margin-left: auto;
        margin-right: auto;
        background: none!important;
    }
    div#Content {
        width: 94%;
        margin: 3vw auto 0;
        max-width: 94%;
        overflow: hidden;

    }
    div#Main {
    width: 100%;
    float: none;
}


/* トップページ
------------------------------------------------------- */


    /* イメージスライダー */
    div#Mv {
    height: 60px;
        margin-top: 55px!important;
        width:100%;
        overflow: hidden;


    }
    div#innerMvSec div img {
    height: 3rem!important;
    }
    div#MvInBox {
    height: 32vw!important;
    }
    div#ThumbNavi {
        width: 100%!important;
    }
    div.panel {
        width: 100vw!important;
        height:50vw!important;

    margin-left: -50%!important;
        -webkit-background-size: cover!important;
        background-size: contain!important;
    }
    div.strip_wrapper {
    position: absolute!important;
    left: auto!important;
        top:auto!important;
        bottom:-30vw!important;
        right: -3vw!important;
    }
    div#ThumbNavi {
        position: relative;
    }
    div#ThumbNavi div.strip_wrapper ul.filmstrip {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 257px;
    height: 53px;
    z-index: 900;
}
    div#ThumbNavi div.strip_wrapper ul.filmstrip li {
    height: 39px!important;
    width: 39px!important;
    }
    /*
    div#Mv {
        max-width: 100%;
        width: 100%!important;
    }
    div#MvInBox {
    position: relative;
    width: 100%!important;
    height: 0!important;
    overflow: hidden!important;
    visibility: hidden!important;
    height: 0!important;
    display: none!important;
    }
    div#ThumbNavi {
    width: 100%!important;
    }


    div#MvInBox div.panel,
    div#MvInBox div.panel a,
    div#innerMvSec div img {
        width: 100%!important;
        height: auto!important;
        border: none!important;
        display: none!important;
    }

    div.strip_wrapper {
    position: absolute;
    left: auto!important;
    top: auto!important;
    width: 100%;
    height: 53px;
    overflow: hidden;

}
    div#pointer {
    border:none!important;
}
    */

    div#Content #Main div#imprtntNews {
    background-color: #fdeeee;
    padding: 1.6rem;
    border: solid 2px #ffd3d3;
    margin: 1.2rem 0 2rem;
}



ol#NewsList01 {
    width: 100%;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



    #Main ol#imprtntNewsList li {
    margin: 0;
}
    #Main ol#imprtntNewsList li:nth-of-type(n+2) {
        margin-top: 1.1rem;
    }

    #Main ol#imprtntNewsList li a {
        background: none;
        width: 100%;
        padding-left: .6rem;
        line-height: 2rem;
    }
    #Main ol#imprtntNewsList li p{
        background: none;
        display: flex;
    }
    #Main ol#imprtntNewsList li p:before{
        content: "";
        width: 1.5rem;
        height: 1.5rem;
      background: url(../../img/sp/img_arrow_01.png) 0 0 no-repeat;
        background-size: contain;
        display: block;
        position: relative;
        top:4px;

    }

    .TopTitStyle img{
        width: 100%!important;
    }
    div#Content h2.TopTitStyle:nth-of-type(1) {
    background-size: 60%;
    height: 4vw;
    border-bottom: 1px dotted #c1c1c1;
        background: url(../../img/sp/img_tit_emnews.png);
        background-repeat: no-repeat;
        background-size: 60%;
}



    div#Content h2.TopTitStyle:nth-of-type(1) img{
        display: none;
    }


    div#Content div#News h2 {
        background-size: 60%;
        height: 4vw;
        border-bottom: 1px dotted #c1c1c1;
        background: url(../../img/sp/tit_news_01.png);
        background-repeat: no-repeat;
        background-size: 60%;
    }



    div#Content div#News h2 img{
        display: none;
    }

    div#Content div#FeatureOfSeason h2 {
        background: url(../../img/sp/tit_feature_01.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 10.3vw;
        border-right: 1px solid #cacac9;
        border-bottom: none;

    }
    div#Content div#FeatureOfSeason h2 img {
        display: none;
    }

    div#AreaPickUpInBox #AreaSea h3 img,
    div#AreaPickUpInBox #AreaForest h3 img,
    div#AreaPickUpInBox #AreaTea h3 img,
    div#AreaPickUpInBox #AreaBamboo h3 img,
    div#AreaPickUpInBox #AreaKyoto h3 img {
        display: none;
    }

    div#AreaPickUpInBox #AreaSea h3 {
        background: url(../../img/sp/tit_area_sea.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-bottom: none;
        height: 3.1rem;
    }

    div#AreaPickUpInBox #AreaForest h3 {
        background: url(../../img/sp/tit_area_forest.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-bottom: none;
        height: 3.1rem;
    }

    div#AreaPickUpInBox #AreaTea h3 {
        background: url(../../img/sp/tit_area_tea.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-bottom: none;
        height: 3.1rem;
    }

    div#AreaPickUpInBox #AreaBamboo h3 {
        background: url(../../img/sp/tit_area_bamboo.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-bottom: none;
        height: 3.1rem;
    }


    div#AreaPickUpInBox #AreaKyoto h3 {
        background: url(../../img/sp/tit_area_kyoto.png);
        background-repeat: no-repeat;
        background-size: cover;
        border-bottom: none;
        height: 3.1rem;
    }



    div#Content div#News h2.TopTitStyle a {
    position: absolute;
    top: 0;
    right: 0;
    width: 7.3rem;
            z-index: 1;
}

ol#NewsList01 li {
    position: relative;
    width: 48%;
    min-height: auto;
    float: none;
    border: solid 1px #c4c4c4;
    margin: 0;
    }
ol#NewsList01 li .txtIcon {
        z-index: 1;
    }

    ol#NewsList01 li .imgBox {
    width: 100%;
    /* display: flex; */
        height: 10.9rem;
    line-height: auto;
    border-bottom: solid 1px #c4c4c4;
    text-align: center;
}
    ol#NewsList01 li .imgBox img {
        height: 10.9rem;
        width: 100%;
        /* object-fit: scale-down; */

    }
    ol#NewsList01 li .BoxIn {
    padding: 1.2rem 1.4rem 5rem 1rem;
}

    ol#NewsList01 li .BoxIn p{
        font-size: 1.2rem;
        line-height: 2rem;
    }
    ol#NewsList01 li:nth-of-type(n+3) {
        margin-top: 1.4rem;
    }
        ol#NewsList01 li img[src="https://www.kyoto-kankou.or.jp/files/img/common/1x1.gif"]{
        display: none!important;
    }
     ol#NewsList01 li .linkTit {
    display: block;
    background: url(../../img/sp/img_arrow_01.png) 0 2.6px no-repeat;
         background-size: 1.5rem;
         padding-left: 20px;
    }
    .txtIcon i {
    padding: .15rem 0.7rem;
        font-size: 78%;
}
    ol#NewsList01 li .date {
    bottom: 5px;
        font-size: 84%!important;
        font-size: 64%!important;

}





    div#Content div#imprtntNews {
    background-color: #fdeeee;
    padding: 10px 17px 4px;
    border: solid 2px #ffd3d3;
    margin: 15px 0 20px;
    width: 100%;
}
    div.AreaInfoBox {
    margin-bottom: 25px;
    width: 100%!important;
    padding-left: 0;
}




    div#Content h2.TopTitStyle a img{
        display: none;
    }
    div#Content h2.TopTitStyle a {
        background: url(../../img/sp/img_btn_01.png);
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        width: 6.3rem;
        height: 100%;
}
    div#Content div#FeatureOfSeason h2.TopTitStyle a {
    position: absolute;
        top: 11px!important;
        top: 3vw!important;
    right: 10px!important;
            z-index: 1;
}



    div#Content div#FeatureOfSeasonInBox {
    border-left: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    padding-bottom: 1.6rem!important;
    padding-top: 1.6rem!important;
}

    div#Content div#FeatureOfSeason ul {
        display: flex;
        justify-content: space-between;
    }
    div#Content div#FeatureOfSeason ul li {
    float: none!important;
    width: 48%!important;
    padding-left: 0!important;
}
    div#Content div#FeatureOfSeason ul {
    margin: 0 auto!important;
    width: 92%!important;
}
    div#FeatureOfSeason ul li p.FeatureTxt a {
    display: block!important;
    background: url(../../img/sp/img_arrow_01.png) 0 2.4px no-repeat!important;
         background-size: 1.5rem!important;
         padding-left: 20px!important;
    line-height: 1.8rem;
}
    div.AreaInfoBox {
    margin-bottom: 25px;
    width: 100%!important;
    padding-left: 0!important;
}

    div#AreaPickUpInBox h3 img {
        display: none;
    }

    div#AreaPickUpInBox div.AreaInfoBox{
    background: url(../img/top/img_area_map_sea.png) 10px 0 no-repeat!important;
    background-size: 35% 100%!important;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    }
    div#AreaPickUpInBox div.AreaInfoBox h3 {
        width:100%;
        order: 1;
    }
    div#AreaPickUpInBox div.AreaInfoBox dl {
        width: 63%;
        order: 3;
    }
    div#AreaPickUpInBox div.AreaInfoBox:after {
        content:"";
        width: 34%;
height: 19rem;
    order: 2;
    background-size: contain!important;
        background-repeat: no-repeat!important;
    background-position: 0 0!important;
}
    div#AreaPickUp {
    border: 1px solid #d1d1d1;
    background: url(../img/top/area_bg.png) 0 0 repeat;
    padding: 1.9rem 1.6rem!important;
    }
    #Main div.AreaInfoBox ul li {
    margin-bottom: 1.2rem;
    line-height: 1.8rem;
}
    #Main div.AreaInfoBox ul li a {
        background: none;
            padding-left: .5rem;
    display: block;
    line-height: 1.8;
        padding-bottom: 0;
        width: 100%;
    }
    #Main div.AreaInfoBox ul li {
        display: flex;
        justify-content: flex-start;
    }
    #Main div.AreaInfoBox ul li:before {
            position: relative;
    top: 3.6px;
    }
        #Main div.AreaInfoBox h3 a {
            width: 25%;
            height: 2em;
            -webkit-background-size: contain;
            background-size: contain;
            display: block;
            background-repeat: no-repeat;
            top:2px;
        background-position: right 0;
    }
    div#AreaSea h3 {
        background: url(../../img/sp/tit_area_sea.png);
        -webkit-background-size: contain;
        background-size: contain;
    background-repeat: no-repeat;
    height: 2.4rem;
    }
    div#AreaSea  h3 a {
        background: url(../../img/sp/img_btn_sea.png);
        background-position: right 0;
    }
    div#AreaPickUpInBox div#AreaSea.AreaInfoBox:after {
        background: url(../../img/sp/img_area_map_sea.png);

    }
#AreaSea li:before {
        background: url(../../img/sp/ico_arrow_sea.png) ;
    background-size: contain;
    background-repeat: no-repeat;
        content: "";
        width: 17px;
        height: 17px;
    display: block;
    }

    div#AreaForest h3 {
        background: url(../../img/sp/tit_area_forest.png);
        -webkit-background-size: contain;
        background-size: contain;
    background-repeat: no-repeat;
    height: 2.4rem;
    }
#AreaForest li:before {
        background: url(../../img/sp/ico_arrow_forest.png) ;
    background-size: contain;
    background-repeat: no-repeat;
        content: "";
        width: 17px;
        height: 17px;
    display: block;
    }
    div#AreaForest  h3 a {
        background: url(../../img/sp/img_btn_forest.png);
    }
    div#AreaPickUpInBox div#AreaForest.AreaInfoBox:after {
        background: url(../../img/sp/img_area_map_forest.png);
    }

    div#AreaTea h3 {
        background: url(../../img/sp/tit_area_tea.png);
        -webkit-background-size: contain;
        background-size: contain;
    background-repeat: no-repeat;
    height: 2.4rem;
    }
#AreaTea li:before {
        background: url(../../img/sp/ico_arrow_tea.png) ;
    background-size: contain;
    background-repeat: no-repeat;
        content: "";
        width: 17px;
        height: 17px;
    display: block;
    }

    div#AreaTea  h3 a {
        background: url(../../img/sp/img_btn_tea.png);
    }
    div#AreaPickUpInBox div#AreaTea.AreaInfoBox:after {
        background: url(../../img/sp/img_area_map_tea.png);
    }

    div#AreaBamboo h3 {
        background: url(../../img/sp/tit_area_bamboo.png);
        -webkit-background-size: contain;
        background-size: contain;
    background-repeat: no-repeat;
    height: 2.4rem;
    }
#AreaBamboo li:before {
        background: url(../../img/sp/ico_arrow_bamboo.png) ;
    background-size: contain;
    background-repeat: no-repeat;
        content: "";
        width: 17px;
        height: 17px;
    display: block;
    }

    div#AreaBamboo  h3 a {
        background: url(../../img/sp/img_btn_bamboo.png);
    }
    div#AreaPickUpInBox div#AreaBamboo.AreaInfoBox:after {
        background: url(../../img/sp/img_area_map_bamboo.png);
    }


    div#AreaKyoto h3 {
        background: url(../../img/sp/tit_area_kyoto.png);
        -webkit-background-size: contain;
        background-size: contain;
    background-repeat: no-repeat;
    height: 2.4rem;
    }
#AreaKyoto li:before {
        background: url(../../img/sp/ico_arrow_kyoto.png) ;
    background-size: contain;
    background-repeat: no-repeat;
        content: "";
        width: 17px;
        height: 17px;
    display: block;
    }
    div#AreaPickUpInBox div.AreaInfoBox#AreaKyoto {
        margin-bottom: 15px;
    }

    div#AreaPickUp div#AreaPickUpInBox {
    margin-bottom: 0;
}

    div#AreaKyoto  h3 a {
        background: url(../../img/sp/img_btn_kyoto.png);
    }
    div#AreaPickUpInBox div#AreaKyoto.AreaInfoBox:after {
        background: url(../../img/sp/img_area_map_kyoto.png);
    }
    div#AreaPickUpInBox div#AreaKyoto.AreaInfoBox img {
        display: none;
    }
    div#AreaPickUpInBox div#AreaKyoto.AreaInfoBox:after {
        width: 47%;
    }
    div#AreaPickUpInBox div#AreaKyoto.AreaInfoBox dl {
        width: 50%;
    }



    #AreaDataBox .movieThum img {
        display: none;
    }
    #AreaDataBox .movieThum {
        background: url(../../img/sp/img_btn_movie.png);
        width: 100%;
        padding-bottom: 32.8%;
        display: block;
        background-size: cover;

    }
    #Main div#Weather h3 {
        display: none;
    }
    #Main div#Weather ul {
        display: flex;
        justify-content: space-between;
        background: #fff;
        padding-bottom: 0px;
        margin-top: 6vw;
    }
    #Main div#Weather ul li {
    width: 48%;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    background: url(../img/common/line_dotted_01.png) 0 0 repeat-y;
    margin-left: 0;
    float: none;
}
    div#Content div#Main div#Weather ul li h4 {
        height:1.1rem;
        width: 100%;
        -webkit-background-size: contain;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    #Main div#Weather ul li h4 img {
        display: none;
    }
    #Main div#Weather:after {
        content:"";
        height: 6.8rem;
        width: 1px;
        display: block;
        position: absolute;
        border-left: 1px dotted #a0a0a0;
        top:10vw;
        left: 0;
        right: 0;
        margin:0 auto;
    }
    div#Content div#Main div#Weather ul li p {
        font-size: 1.2rem!important;
        margin-top: .8rem;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: baseline;
        line-height: 1.2;
    }
    div#Content div#Main div#Weather ul li p:first-line {
        width: 100%;
    }
    div#Content div#Main div#Weather ul li p img {
        width: 30%;
        margin-top: 0;
        margin-left: 35%;
        margin-right: 35%;
    }
    #Main div#Weather ul li:nth-of-type(1) h4 {
    background: url(../../img/sp/tit_weather_kyoto.png);
    }
    #Main div#Weather ul li:nth-of-type(2) h4 {
    background: url(../../img/sp/tit_weather_mai.png);
    }

    #Main div#Weather {
    width: 80%;
    background: url(../../img/sp/img_weather_01.png) ;
        -webkit-background-size: 100%;
    background-size: 100%;
    background-position: 0 0;
    float: none;
    margin: 30px auto 0!important;
    height: 33vw;
    background-repeat: no-repeat;
    padding: 2.2rem 1rem 0;
        position: relative;


}

    div#Content div#capitalarea .TopTitStyle {
    background: url(../../img/sp/tit_capitalarea_01.png) ;
        height: 10.4vw;
        width: 100%;
        background-size: cover;
        border-right: 1px solid #cacac9;
        box-sizing: border-box;
    }

    div#capitalarea .TopTitStyle img{
        display: none;
    }
    div#Content div#capitalareaInBox .FeatureImg img {
        display: none;
    }
    div#Content div#capitalareaInBox li:nth-of-type(1) .FeatureImg {
    background: url(../../img/sp/img_tel_01.png) ;
        height: 47vw;
        width: 90%;
        background-size: cover;
        background-position: center top;
        margin: 0 auto;
        background-repeat: no-repeat;
        text-align: center;

    }
    div#Content div#Main div#capitalarea ul li {
    float: none;
    width: 100%;
    padding-left: 0;
}
    div#Content div#Main div#capitalarea ul {
    margin: 0 auto;
    }
    div#Content div#Main div#capitalareaInBox ul li:nth-of-type(2){
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 90%;
         margin: 0 auto;
    }
    div#Content div#capitalareaInBox .capitalareaInBox_tit02 img{
        display: none;
    }
     div#Content div#Main div#capitalareaInBox .capitalareaInBox_tit02 {
    background: url(../../img/sp/tit_capitalarea_sub.png) ;
         height: 4vw;
        width: 100%;
         margin: 1.8rem auto 1rem;
        background-size: 33%;
         background-repeat: no-repeat;

    }
     div#Content div#capitalareaInBox .capitalareaInBox_02 img{
        display: block;
    }
    div#Content div#capitalareaInBox .capitalareaInBox_02,
    div#Content div#capitalareaInBox .capitalareaInBox_02 + div {
        width: 48%;
    }

     div#Content div#capitalarea ul li p.capitalareaTxt a {
    display: block;
    background: url(../../img/sp/img_arrow_01.png) 0 2.6px no-repeat;
    padding-left: 20px;
    line-height: 2rem;
         background-size: 1.5rem;
}
    div#Content div#capitalarea ul li p.capitalareaTxt_small {
        font-size: 80%!important;
        margin-top: 1rem;
        letter-spacing: .08rem;
        line-height: 1.7rem;
    }
    div#Content div#capitalarea ul li p.capitalareaTxt_small a {
        font-size: 80%!important;

    }
    div#Sub ul.SubBnr {
      display: none;
    }
    #Sub .SubBnr.SubCol:first-child {
      display: block;
      width: 80%;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25px;
    }
    #twitter-widget-0{
    width: 100%!important;
}
    .fb_iframe_widget_fluid span, .fb_iframe_widget iframe {
        width: 100%!important;
        min-width: 100%;
        min-height: 480px;
    }


    ul.SubLink {
border: 1px solid #d1d1d1;
    padding: 1.5rem 1.5rem;
    margin: 2rem auto 90px;
    width: 95%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
    ul.SubLink li:nth-of-type(n+3){
        margin-top: 1.5rem;
    }
    div#Sub .sub_facebook + ul.SubBnr.SubCol {
        display: block;
    width: 80%;
    margin: 1.5rem auto;
}
    ul.SubLink li {
    margin: 0 0 0 0;
    width: 48%;
    float: none;
    text-align: center;
    zoom: 1;
    padding-left: 0;
}
    ul.SubLink li img {
    max-width: 100%!important;
    max-height: 77px!important;

}

    #EventCalSec,#SubInfoSearch {
        display: none;
    }

    div.AreaInfoBox h3 {
        padding-bottom: 4%!important;
    }
}






@media all and (-ms-high-contrast: none) and (max-width: 959px) {

        /* IE11 にのみ適用される */
        *::-ms-backdrop, div#Mv {
            max-width:100%;
            margin: 0;
        }
        *::-ms-backdrop, div#Content {
            max-width:100%;
            width: 100%;
            margin: 0;
    }
    *::-ms-backdrop, div#Main {
        max-width:94vw;
        margin-right: 0;
        margin-left: 3vw;
    }
    *::-ms-backdrop, ul.SubLink.SubCol {
        max-width:94vw;
        margin-right: 0;
        margin-left: 3vw;
    }
    *::-ms-backdrop, #EventCalSec {
        width: 100vw;
    }
    *::-ms-backdrop, ol#NewsList01 li .imgBox {
        overflow: hidden;
    }
    *::-ms-backdrop, ol#NewsList01 li .imgBox img {
        width: auto;
        height: 100%;
        margin: 0 auto
    }

}

@media screen and (max-width: 767px) {
    div#SubCal div.InSec:before {
        top: -.6vw;

        width: calc(100% - 2px );
}
    div#SubCal div.InSec {
        border: 2px solid #d1d1d1;
    }
    div#SubCal caption .Prev,
    div#SubCal caption .Next{
        margin-top: -1rem;
    }
    div#SubCal caption{
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    div#AreaPickUpInBox #AreaSea h3 {
        background: url(../../img/sp/tit_area_sea.png);
        background-repeat: no-repeat;
        background-size: contain;
        border-bottom: none;
    }

    div#AreaPickUpInBox #AreaForest h3 {
        background: url(../../img/sp/tit_area_forest.png);
        background-repeat: no-repeat;
        background-size: contain;
        border-bottom: none;
    }

    div#AreaPickUpInBox #AreaTea h3 {
        background: url(../../img/sp/tit_area_tea.png);
        background-repeat: no-repeat;
        background-size: contain;
        border-bottom: none;
    }

    div#AreaPickUpInBox #AreaBamboo h3 {
        background: url(../../img/sp/tit_area_bamboo.png);
        background-repeat: no-repeat;
        background-size: contain;
        border-bottom: none;
    }


    div#AreaPickUpInBox #AreaKyoto h3 {
        background: url(../../img/sp/tit_area_kyoto.png);
        background-repeat: no-repeat;
        background-size: contain;
        border-bottom: none;
    }

    div#Content h2.TopTitStyle:nth-of-type(1) {
        background: url(../../img/sp/img_tit_emnews.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 7.2vw;
        border: none;
    }
    div#Content div#News h2 {
        background: url(../../img/sp/tit_news_01.png);
        background-repeat: no-repeat;
        background-size: cover;
        height: 7.2vw;
    }
}




/* スマートフォン
------------------------------------------------------- */

@media screen and ( max-width : 559px ) {
    #Main div#Weather ul{
        margin-top: 0;
    }
    #Main div#Weather:after {
        top:5.5vw;
    }
    #calender {
        right: 16%;
        right: 4%;
        right: 14%;
}
    .fixedHeadCalender #HeaderMnu:before{
        right: 15%;
        right: 14%;
    }
    #EventCalSec #TitCal:after {
        bottom: -1.4rem;
    }

    #EventCalSec #TitCal{
        background-size: contain;
        width: 100%;
        height: 4vw;
        position: absolute;
        z-index: 110;
        background-position: center;
        top: 14%;

}
div#SubCal caption .Prev, div#SubCal caption .Next {
    width: 21%;
    height: 3.2rem;
}
    div#SubCal caption {
        padding-bottom: .5rem;
        padding-top: 25%;
        width: 96%;
        margin-right: auto;
        margin-left: auto;
    }

}


@media screen and ( max-width : 320px ) {
    div#SubCal div.InSec:before{
        top: -2px;
    }
    #EventCalSec #TitCal:after {
        bottom: -1.2rem;
    }
    div#Content div#Main div#Weather ul li p {
        font-size: 1rem!important;
        line-height: 1.2;
    }

}