@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:600);

@import url(https://fonts.googleapis.com/css?family=IM+Fell+English:400i);


div#mainImage ul div li img,
div#mainImage>img {
    position: absolute;
    left: 0;
    vertical-align: bottom
}

#contPickUp ul,
#contents,
#contents * {
    box-sizing: border-box
}

#topWrapper {
    overflow: hidden
}

#wrapper {
    padding-top: 153px
}

#headAreaIndex {
    position: relative;
    max-height: 70vh;
    overflow: hidden;
    margin-top: 105px;
    display: flex;
    align-items: center;
    justify-content: center
}

p#siteName {
    width: 236px;
    height: 39px;
    margin: 14px 0 16px
}

p#siteName a {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    display: block;
    font-weight: 700
}

p#siteName a span {
    font-size: 12px;
    display: block
}

div#mainImage {
    margin: 0 auto;
    overflow: hidden;
    text-align: center
}

div#mainImage>img {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9998
}

div#mainImage ul#mainSlides {
    width: 100vw;
    max-height: 70vh;
    overflow: hidden
}

div#mainImage ul div li {
    position: relative;
    width: 100vw;
    height: 70vh;
    float: left
}

div#mainImage ul div li img {
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: auto;
    min-width: 100vw;
    min-height: 70vh;
    max-width: 100%;
    z-index: -1
}

div#mainImage ul div li span {
    position: absolute;
    padding: 5px;
    bottom: 25px;
    right: 50px;
    color: #FFF
}

div#mainImage ul div li span.black {
    background: rgba(0, 0, 0, .4)
}

nav {
    margin: 0 0 20px
}

nav#navSp {
    display: none;
    background-color: #fff
}

nav#navPc div.navigation {
    min-width: 1200px;
    padding: 20px 0 0;
    margin: 0 0 20px;
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 9999
}

#contPickUp,
#contPickUp ul {
    position: relative;
    width: 100%
}

@media only screen and (max-width:1199px) and (min-width:1027px) {
    nav#navPc div.navigation {
        margin-left: -5%
    }


}

@media only screen and (max-width:1026px) {
    nav#navPc div.navigation {
        margin-left: -78px
    }


}

nav#navPc div.navigation .inner {
    width: 1026px;
    margin: 0 auto
}

nav#navPc div.navigation h1 {
    float: left;
    width: 260px;
    height: auto
}

nav#navPc div.navigation h1 img {
    width: 100%
}

nav#navPc div.navigation h1 a {
    display: block
}

nav#navPc div.navigation ul {
    float: right;
    font-size: 1em
}

.cboxPhoto {
    float: left
}

nav#navPc div.navigation ul li {
    display: inline-block;
    height: 80px;
    margin: 0 22px;
    line-height: 80px
}

nav#navPc div.navigation ul li:last-child {
    margin-right: 0
}

nav#navPc div.navigation ul li:first-child {
    margin-left: 0\9
}

nav#navPc div.navigation ul li a {
    padding: 12px 0;
    color: #222;
    text-decoration: none;
    font-weight: 700;
    box-sizing: border-box
}

nav#navPc div.navigation ul li a:hover {
    border-bottom: 4px solid #333
}

nav#navPc div.navigation ul li a.post-list:hover {
    border-color: #56B4E3
}

nav#navPc div.navigation ul li a.island-list:hover {
    border-color: #6AB700
}

nav#navPc div.navigation ul li a.shima-gourmet:hover {
    border-color: #F9CD00
}

nav#navPc div.navigation ul li a.shima-activity:hover {
    border-color: #FF7373
}

nav#navPc div.navigation ul li a.shima-gift:hover {
    border-color: #FF5C26
}

nav#navPc div.navigation ul li a.shima-stay:hover {
    border-color: #B25900
}

nav#navPc div.navigation ul li a.ritou-time:hover,
nav#navPc div.navigation ul li a.shima-event:hover {
    border-color: #0067B8
}

#contents {
    width: 996px;
    margin: 0 auto
}

#content h2,
#contents h2 {
    white-space: nowrap;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 18px
}

#content .relevance h2 {
    margin-top: 40px
}

#content h2 span,
#contents h2 span {
    font-size: 1rem;
    font-weight: 400;
    padding-left: 1.5rem;
    letter-spacing: normal
}

#contPickUp {
    margin-bottom: 55px
}

#contPickUp ul {
    overflow: hidden;
    padding: 0 25px
}

#contPickUp ul .slick-list {
    width: 100%;
    overflow: hidden
}

#contPickUp .slick-arrow {
    background-color: transparent;
    border: transparent;
    color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 25px;
    height: 25px;
    margin: auto;
    top: 0;
    bottom: 0;
    cursor: pointer
}

#contPickUp .slick-next {
    right: 0;
    background-image: url(../img/index/themes/arrow-next.png)
}

#contPickUp .slick-prev {
    left: 0;
    background-image: url(../img/index/themes/arrow-prev.png)
}

#contPickUp ul li {
    display: inline-block;
    margin: 0 8px
}

#contPickUp ul li img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom
}

@media only screen and (min-width:769px) {
    #contThemes ul#theme_list {
        display: flex;
        height: 50px;
        overflow-x: hidden;
        margin-bottom: 30px
    }

    #contThemes ul#theme_list li::before {
        display: block;
        content: '';
        position: absolute;
        border-left: 1px solid #22BCB8;
        height: 100%;
        left: -7px
    }

    #contThemes ul#theme_list li:not(:first-child) {
        margin-left: 14px
    }

    #contThemes ul#theme_list li {
        color: #22BCB8;
        flex: 1 1 100%;
        position: relative;
        -webkit-transform: skew(-20deg);
        -moz-transform: skew(-20deg);
        -o-transform: skew(-20deg);
        cursor: pointer
    }

    #contThemes ul#theme_list li>div {
        width: calc(100% - 25px);
        height: 50px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        background-position: 20px center;
        background-repeat: no-repeat;
        transition: all .2s ease
    }

    #contThemes ul#theme_list li::after {
        z-index: -1;
        background: #22BCB8;
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        transition: all .2s ease
    }

    #contThemes ul#theme_list li:first-child {
        transform-origin: 50% 0;
        margin-right: -10px
    }

    #contThemes ul#theme_list li:last-child {
        transform-origin: 50% 100%;
        margin-left: 4px
    }

    #contThemes ul#theme_list li.chosen::after,
    #contThemes ul#theme_list li:hover::after {
        width: 100%
    }

    #contThemes ul#theme_list li:hover>div {
        color: #FFF
    }


}

#contThemes ul#theme_list li.chosen>div {
    color: #FFF
}

#contThemes ul#theme_list li.hot>div {
    background-size: auto 41px;
    background-image: url(../img/index/themes/hot.png)
}

#contThemes ul#theme_list li.gourmet>div {
    background-size: auto 34px;
    background-image: url(../img/index/themes/gourmet.png);
    width: calc(100% - 35px);
    background-position: 30px center
}

#contThemes ul#theme_list li.activity>div {
    background-size: auto 27px;
    background-image: url(../img/index/themes/amusement.png)
}

#contThemes ul#theme_list li.gift>div {
    background-size: auto 45px;
    background-image: url(../img/index/themes/souvenir.png);
    width: calc(100% - 35px);
    background-position: 30px center
}

#contThemes ul#theme_list li.stay>div {
    background-size: auto 37px;
    background-image: url(../img/index/themes/hotel.png);
    width: calc(100% - 45px);
    background-position: 40px cente r
}

#topWrapper #contThemes section::after,
#topWrapper #contThemes section::before {
    display: block;
    content: '';
    border: 15px solid transparent;
    width: 25px;
    position: absolute;
    box-sizing: border-box
}

#contThemes ul#theme_list li.event>div {
    background-size: auto 39px;
    background-image: url(../img/index/themes/event.png)
}

@media only screen and (min-width:769px) {
    #contThemes ul#theme_list li.hot:hover>div {
        background-image: url(../img/index/themes/hot_over.png)
    }

    #contThemes ul#theme_list li.gourmet:hover>div {
        background-image: url(../img/index/themes/gourmet_over.png)
    }

    #contThemes ul#theme_list li.activity:hover>div {
        background-image: url(../img/index/themes/amusement_over.png)
    }

    #contThemes ul#theme_list li.gift:hover>div {
        background-image: url(../img/index/themes/souvenir_over.png)
    }

    #contThemes ul#theme_list li.stay:hover>div {
        background-image: url(../img/index/themes/hotel_over.png)
    }

    #contThemes ul#theme_list li.event:hover>div {
        background-image: url(../img/index/themes/event_over.png)
    }


}

#contThemes ul#theme_list li.hot.chosen>div {
    background-image: url(../img/index/themes/hot_over.png)
}

#contThemes ul#theme_list li.gourmet.chosen>div {
    background-image: url(../img/index/themes/gourmet_over.png)
}

#contThemes ul#theme_list li.activity.chosen>div {
    background-image: url(../img/index/themes/amusement_over.png)
}

#contThemes ul#theme_list li.gift.chosen>div {
    background-image: url(../img/index/themes/souvenir_over.png)
}

#contThemes ul#theme_list li.stay.chosen>div {
    background-image: url(../img/index/themes/hotel_over.png)
}

#contThemes ul#theme_list li.event.chosen>div {
    background-image: url(../img/index/themes/event_over.png)
}

#topWrapper #contThemes ul#theme_list li p {
    font-size: 13px;
    line-height: 1.5
}

#topWrapper #contThemes ul#theme_list li p span {
    display: block;
    font-size: 9px
}

#topWrapper #theme_contents {
    border: 3px solid #22BCB8;
    padding: 15px
}

#topWrapper section a {
    color: currentColor
}

#topWrapper section:not(#contMapArea) {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 50px
}

#topWrapper #contThemes section {
    margin-bottom: 0
}

#topWrapper #contThemes section::before {
    top: -60px;
    border-bottom: 30px solid #22BCB8
}

section#contHot::after,
section#contHot::before {
    left: 60px
}

section#contGourmet::after,
section#contGourmet::before {
    left: 224px
}

section#contActivity::after,
section#contActivity::before {
    left: 388px
}

section#contGift::after,
section#contGift::before {
    left: 552px
}

section#contStay::after,
section#contStay::before {
    left: 716px
}

section#contEvent::after,
section#contEvent::before {
    left: 880px
}

#topWrapper #contThemes section::after {
    top: -54px;
    border-bottom: 30px solid #FFF
}

#topWrapper #contThemes section.hide {
    display: none
}

#topWrapper section:not(#contMapArea) h2 {
    width: 100%
}

#topWrapper section:not(#contMapArea) dl {
    position: relative;
    width: calc(25% - 15px);
    margin-right: 20px;
    flex-shrink: 1
}

#topWrapper section:not(#contMapArea) dl:last-of-type {
    margin-right: 0
}

#topWrapper section:not(#contMapArea) h3 {
    font-weight: 700;
    line-height: 1.5em;
    margin-bottom: 8px
}

#topWrapper section:not(#contMapArea) img {
    max-width: 100%
}

#contThemes .theme_more {
    width: 100%;
    text-align: right;
    color: #3FA7F3;
    margin-top: 20px
}

.listBtn,
small {
    text-align: center
}

#topWrapper section#contInformation {
    padding: 40px 0
}

#topWrapper section#contInformation dl {
    border-top: dashed 1px #444;
    width: 100%
}

#topWrapper section#contInformation dl dt {
    padding: 20px 16px 20px 0;
    float: left;
    clear: left
}

#topWrapper section#contInformation dl dd {
    border-bottom: dashed 1px #444;
    padding: 20px 0
}

#topWrapper section#contInformation dl dd a {
    color: #333;
    text-decoration: none
}

#topWrapper section#contInformation dl dd a:hover {
    color: #333;
    text-decoration: underline
}

span.iconExperience {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: #000;
    min-width: 96px;
    padding: 0 5px;
    height: 20px;
    z-index: 1000;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    font-size: 12px
}

.listBtn,
.listBtn a {
    width: 198px !important;
    color: #333
}

#mapBox dt,
.listBtn {
    font-size: 20px;
    font-weight: 700
}

span.label-shima-gourmet {
    background-color: #F9CD00
}

span.label-reallife {
    xbackground-color: #CAB65C;
    height: 25px;
    padding: 5px 10px;
    background-color: #6DAC39;
}

span.label-shima-activity {
    background-color: #FF7373
}

span.label-shima-gift {
    background-color: #FF5C26
}

span.label-shima-stay {
    background-color: #B25900
}

span.label-shima-event {
    background-color: #0067B8
}

span.label-ritou-time {
    background-color: #22BCB8
}

span.label-shima-tour {
    background-color: #CAB65C
}

.topicDate {
    display: inline-block;
    padding-right: 10px
}

.topicCat {
    display: inline-block;
    padding-right: 5px;
    color: #4F9FD8;
}

.topicCat.cat-miyako {
    color: #4F9FD8;
}

.topicCat.cat-yaeyama {
    color: #EC76A2;
}

.topicCat.cat-kumejima {
    color: #ED8F26;
}

.topicCat.cat-15islands {
    color: #745798;
}

.listBtn {
    margin: 30px auto 0
}

.listBtn a {
    text-decoration: none;
    border: 1px solid #444;
    display: block;
    padding: 12px 0 !important
}

.listBtn a:hover {
    color: #4BB2E6 !important;
    border: 1px solid #00A9D9
}

#contSeason .listBtn a:hover {
    color: #4BB2E6 !important;
    border-color: #4BB2E6 !important
}

#contGourmet .listBtn a:hover {
    color: #F9CD00 !important;
    border-color: #F9CD00 !important
}

#contActivity .listBtn a:hover {
    color: #FF7373 !important;
    border-color: #FF7373 !important
}

#contGift .listBtn a:hover {
    color: #FF5C26 !important;
    border-color: #FF5C26 !important
}

#contStay .listBtn a:hover {
    color: #B25900 !important;
    border-color: #B25900 !important
}

#contEvent .listBtn a:hover {
    color: #0067B8 !important;
    border-color: #0067B8 !important
}

#topWrapper section#contRanking dl {
    width: calc(20% - 26px);
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px
}

span.rankIcon {
    display: block;
    position: absolute;
    left: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    z-index: 1000;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: left top/contain no-repeat
}

span.iconRank01 {
    background-image: url(../img/common/icon_rank01.png)
}

span.iconRank02 {
    background-image: url(../img/common/icon_rank02.png)
}

span.iconRank03 {
    background-image: url(../img/common/icon_rank03.png)
}

span.iconRank04 {
    background-image: url(../img/common/icon_rank04.png)
}

span.iconRank05 {
    background-image: url(../img/common/icon_rank05.png)
}

#mapBox {
    width: 996px;
    height: 480px;
    background: url(../img/index/bg_areamap.png) center top/95% no-repeat;
    border: 4px solid #444;
    position: relative;
    margin-bottom: 90px
}

#mapBox dl {
    position: absolute
}

#mapBox dl.mapArea01 {
    left: 70px;
    top: 76px;
    width: 232px
}

#mapBox dl.mapArea02 {
    left: 485px;
    top: 76px;
    width: 100px
}

#mapBox dl.mapArea03 {
    left: 316px;
    top: 366px;
    width: 260px
}

#mapBox dl.mapArea04 {
    left: 628px;
    top: 300px;
    width: 338px
}

#mapBox dt {
    margin-bottom: 10px
}

#mapBox dd ul li {
    display: inline-block;
    line-height: 2em;
    margin-right: 10px
}

#mapBox dt a,
#mapBox dt a:hover {
    color: #333 !important
}

#mapBox dd ul li a {
    color: #333;
    text-decoration: underline
}

#mapBox dd ul li a:hover {
    color: #333 !important;
    text-decoration: none
}

#footerLink {
    margin-bottom: 30px;
    text-align: left
}

small {
    color: #fff;
    width: 996px;
    display: block;
    margin: 30px 0
}

#content #indexColumnRight,
#content h1,
ul.cat-area {
    text-align: left
}

.topFix,
.topFixed {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 9999
}

#coloumnLayout .article {
    width: 660px
}

#coloumnLayout .article img {
    max-width: 100%;
    height: auto
}

#content h1 {
    font-size: 30px;
    margin: 0 0 30px;
    line-height: 1.6
}

#content .relevance>.inner {
    background: 0 0;
    padding: 16px 0
}

#content .panelListA {
    text-align: left;
    margin: 0 0 20px
}

#content .panelListA li {
    width: 320px
}

#content [class*=panelList]>li a {
    border: none
}

#content [class*=panelList]>li a::after,
#content [class*=panelList]>li a::before {
    background: 0 0;
    height: 0;
    width: 0
}

.breadcrumb {
    margin-bottom: 3em
}

.breadcrumb a {
    color: #111
}

ul.cat-area {
    margin: 0 0 .48em
}

ul.cat-area li {
    display: inline-block;
    margin: 0 .36em .36em 0;
    background: #444;
    color: #fff;
    text-align: center;
    padding: .2em .5em;
    font-size: 12px
}

.cboxIframe,
.cboxPhoto {
    display: block;
    border: 0
}

ul.cat-area li.post-category {
    background: #00A7DC
}

ul.cat-area li a {
    color: currentColor
}

#content .info,
#content .info2,
#content .info3 {
    padding: 1em
}

#content .info>iframe,
#content .info>table+p {
    position: relative;
    width: 100%;
    margin: 1em 0 0;
    top: 0;
    left: 0
}

body[data-area=yaeyama] #headArea,
body[data-area=yaeyama] #headAreaB,
body[data-area=kumejima] #headArea,
body[data-area=kumejima] #headAreaB,
body[data-area="15islands"] #headArea,
body[data-area="15islands"] #headAreaB,
body[data-area=miyako] #headArea,
body[data-area=miyako] #headAreaB {
    background-color: #fff !important
}

#content .jsSearchArea,
#content .jsSearchArea2 {
    background-color: #EEE !important
}

#content .accessBox .head::after,
#content>.search form>.head::after {
    border-left: 16px solid #666
}

#content .jsSelect::after {
    border-color: #666 transparent transparent !important;
    border-width: 10px 6px 6px;
    top: 12px
}

#content .accessListWrap {
    background-color: #EEE
}

#content .accessBox .h2ttl {
    border: none;
    border-top: 2px solid #666;
    color: #1F1F1F;
    text-align: center;
    width: 100%;
    margin: 0 0 40px;
    padding: 52px 0
}

#content .accessBox.bdr0 .h2ttl {
    margin: 0 0 40px
}

#content .accessBox.bdr0 {
    padding: 0 0 40px
}

#jsResultDataRead {
    font-size: 16px;
    line-height: 1.6
}

#content .detailList li {
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #444
}

#content .detailList li>h3 {
    color: #222;
    text-indent: -32px
}

#content .detailList li>h3 span {
    font-size: 24px;
    font-weight: 700
}

#content .detailList li>* {
    line-height: 1.6;
    padding-left: 32px
}

body[data-area=transport] p.margB40 {
    text-align: left;
    font-size: 16px
}

#content .accessBox .logoLink {
    border-top: 4px solid #666;
    margin: -30px 0 30px;
    padding: 30px 0;
    text-align: center
}

#content .info2>table,
#content .info2>ul,
#content .info3>table,
#content .info>table {
    border-top: none !important
}

#content .info2>table th.table-ttl,
#content .info3>table th.table-ttl,
#content .info>table th.table-ttl {
    border-bottom: none !important;
    font-size: 1.2em;
    padding: 30px 0 .6em !important
}

#content .info2>table th,
#content .info3>table th,
#content .info>table th {
    font-weight: 700;
    padding: 10px 0 10px 1.3em !important;
    box-sizing: border-box
}

#content .info2>table th.first,
#content .info3>table th.first,
#content .info>table th.first {
    padding-top: 15px !important
}

#content .info2>table td,
#content .info3>table td,
#content .info>table td {
    padding: 10px 0
}

#content .info,
#content .info2,
#content .info3 {
    margin-bottom: 4em
}

.island-search {
    width: 100%;
    text-align: center;
    padding: 0 0 100px
}

.island-search * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-bo x
}

.island-search .jsSelect {
    margin: auto
}

.island-search h1.search_title {
    font-size: 16px;
    text-align: center;
    margin: 0 auto .7em;
    font-weight: 700
}

.island-search .accessMap {
    margin: auto auto 60px
}

.island-search .ritolink a {
    text-align: center;
    margin: 90px auto 0;
    display: block;
    max-width: 450px;
    background-color: #22bcb8;
    color: #fff;
    font-weight: 700;
    letter-spacing: .1em;
    height: 63px;
    line-height: 63px;
    font-size: 20px
}

#cboxWrapper,
.cboxPhoto {
    max-width: none
}

#cboxCurrent,
#cboxTitle {
    position: absolute;
    bottom: 4px;
    color: #949494
}

#cboxOverlay,
#cboxWrapper,
#colorbox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    overflow: hidden
}

#cboxOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .9;
    filter: alpha(opacity=90)
}

#cboxBottomLeft,
#cboxMiddleLeft {
    clear: left
}

#cboxContent {
    position: relative;
    background: #fff;
    overflow: hidden
}

#cboxLoadedContent {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

#cboxTitle {
    margin: 0;
    left: 0;
    text-align: center;
    width: 100%
}

#cboxLoadingGraphic,
#cboxLoadingOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.cboxPhoto {
    margin: auto;
    -ms-interpolation-mode: bicubic
}

.cboxIframe {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background: #fff
}

#cboxContent,
#cboxLoadedContent,
#colorbox {
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box
}

#cboxClose:active,
#cboxNext:active,
#cboxPrevious:active,
#cboxSlideshow:active,
#colorbox {
    outline: 0
}

#cboxError {
    padding: 50px;
    border: 1px solid #ccc
}

#cboxCurrent {
    left: 58px;
    display: none
}

#cboxClose,
#cboxNext,
#cboxPrevious,
#cboxSlideshow {
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    width: auto;
    background: 0 0
}

.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFF, endColorstr=#00FFFF)
}

@font-face {
    font-family: icofont;
    src: url(../../common/fonts/icofont.eot?-21h4nd);
    src: url(../../common/fonts/icofont.eot?#iefix-21h4nd) format('embedded-opentype'), url(../../common/fonts/icofont.ttf) format('truetype'), url(../../common/fonts/icofont.woff) format('woff'), url(../../common/fonts/icofont.svg?-21h4nd#icofont) format('svg');
    font-weight: 400;
    font-style: normal
}

[class*=" icon-"],
[class^=icon-] {
    font-family: icofont;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-window:before {
    content: "\e600"
}

.icon-twitter:before {
    content: "\e601"
}

.icon-line:before {
    content: "\e602"
}

.icon-facebook:before {
    content: "\e603"
}

.icon-arrow:before {
    content: "\e604"
}

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

    .listBtn,
    nav#navSp div.navigation ul li,
    small {
        text-align: center
    }

    #wrapper,
    small {
        overflow: hidden
    }

    img {
        max-width: 100%
    }

    #wrapper {
        padding-top: 84px
    }

    #headAreaIndex {
        margin-top: 0
    }

    div#mainImage>img {
        width: 100%;
        height: auto;
        margin: 0
    }

    div#mainImage ul div li {
        max-height: 52vw
    }

    div#mainImage ul div li img {
        min-height: auto
    }

    div#mainImage ul div li span {
        right: 5%
    }

    nav#navSp {
        width: 100%;
        display: block
    }

    div#navSpHead {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    nav#navSp .gNavLogo {
        width: 35%;
        padding: 10px
    }

    nav#navSp .gNavLogo img {
        width: 100%;
        vertical-align: bottom
    }

    nav#navSp p#menuBtn {
        width: 10%;
        padding: 10px;
        background: 0 0;
        text-indent: 0;
        height: auto !important;
        margin: 0
    }

    #navSplist,
    nav#navPc {
        display: none
    }

    nav#navSp p#menuBtn img {
        width: 100%;
        vertical-align: bottom
    }

    nav#navSp div.navigation {
        width: 100%
    }

    nav#navSp div.navigation ul {
        border-top: #444 solid 4px
    }

    nav#navSp div.navigation ul li {
        display: block;
        height: auto;
        width: 100%;
        line-height: 3
    }

    nav#navSp div.navigation ul li a {
        height: auto
    }

    nav#navSp div.navigation ul li a img {
        width: 100%;
        vertical-align: bottom
    }

    .breadcrumb {
        margin-bottom: 1em
    }

    #contents {
        width: 100%;
        margin: 0 auto;
        padding: 0 5px
    }

    #content h2,
    #contents h2 {
        width: auto;
        height: auto;
        margin: 10px;
        white-space: normal;
        line-height: 1.6;
        font-size: 1.8em
    }

    nav {
        margin-bottom: 0
    }

    #topWrapper section#contInformation {
        padding: 40px 0 0
    }

    #topWrapper section#contInformation dl {
        border-top: none;
        margin: 10px;
        border-bottom: dashed 1px #444
    }

    #topWrapper section#contInformation dl dt {
        padding: 10px 16px 10px 0;
        border-top: dashed 1px #444
    }

    #topWrapper section#contInformation dl dd {
        border-top: dashed 1px #444;
        border-bottom: none;
        padding: 10px 0;
        overflow: hidden
    }

    #theme_contents {
        display: none
    }

    #contThemes ul#theme_list li {
        margin-bottom: 10px;
        cursor: pointer
    }

    #contThemes ul#theme_list li>div::after {
        position: absolute;
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(../img/index/themes/sp_show.png);
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: calc(100% - 20px) center;
        top: 0;
        left: 0
    }

    #contThemes ul#theme_list li.chosen>div::after {
        background-image: url(../img/index/themes/sp_hide.png)
    }

    #contThemes ul#theme_list li>div {
        background-position: calc(50% - 80px) center !important;
        background-repeat: no-repeat;
        transition: all .2s ease;
        padding: 15px 0;
        text-align: center;
        width: 100% !important;
        color: #22BCB8;
        border: 1px solid #22BCB8;
        position: relative
    }

    #contThemes ul#theme_list li.chosen>div {
        color: #FFF;
        background-color: #22BCB8
    }

    #contThemes ul#theme_list li p {
        font-size: 16px;
        line-height: 1.5
    }

    #contThemes ul#theme_list li p span {
        display: inline;
        font-size: 12px
    }

    #contThemes section {
        margin-top: 20px;
        border: 3px solid #22BCB8;
        padding: 7px
    }

    #contThemes section::after,
    #contThemes section::before {
        left: 0 !important;
        right: 0 !important;
        margin: auto;
        top: -36px;
        border-width: 15px;
        border-bottom-width: 20px !important
    }

    #contThemes section::after {
        top: -32px
    }

    #topWrapper #contThemes section dl {
        width: calc(50% - 5px);
        margin-right: 0;
        margin-top: 10px
    }

    .listBtn,
    .listBtn a {
        width: 198px !important;
        color: #333
    }

    #topWrapper #contThemes section dl:first-child {
        margin-right: 10px
    }

    #topWrapper #contThemes section dl:nth-child(n+3) {
        display: none
    }

    .topicArea,
    .topicDate {
        display: inline-block;
        font-size: 14px
    }

    .topicDate {
        padding-right: 10px
    }

    .listBtn {
        margin: 30px auto 0;
        font-weight: 700;
        font-size: 18px
    }

    #footerLink,
    small {
        margin: 10px
    }

    .listBtn a {
        text-decoration: none;
        border: 4px solid #444;
        display: block;
        padding: 12px 0 !important
    }

    .listBtn a:hover {
        color: #00A9D9 !important;
        border: 4px solid #00A9D9
    }

    #topWrapper section#contRanking dl {
        width: 100%
    }

    span.rankIcon {
        left: 0;
        top: 3px
    }

    #contMapArea h2 {
        background-size: auto 27px;
        height: 27px
    }

    #mapBox {
        width: auto;
        height: 480px;
        background: url(../img/index/bg_areamap.png) left 33% no-repeat;
        background-size: contain;
        border: 4px solid #444;
        position: relative;
        margin: 0 10px 40px
    }

    #mapBox dl {
        position: absolute
    }

    #mapBox dl.mapArea01 {
        left: 20px;
        top: 20px;
        width: 50%
    }

    #mapBox dl.mapArea02 {
        left: 60%;
        top: 20px;
        width: 30%
    }

    #mapBox dl.mapArea03 {
        left: 20px;
        top: 62%;
        width: 50%
    }

    #mapBox dl.mapArea04 {
        left: 60%;
        top: 47%;
        width: 40%
    }

    #mapBox dt {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 5px
    }

    #mapBox dd ul li {
        display: inline-block;
        line-height: 2em;
        margin-right: 10px;
        font-size: 11.7px
    }

    #mapBox dd ul li a {
        color: #333;
        text-decoration: underline
    }

    #mapBox dd ul li a:hover {
        color: #333 !important;
        text-decoration: none
    }

    small {
        color: #fff;
        width: auto;
        display: block;
        font-size: 10px
    }

    #coloumnLayout .article {
        width: 100%
    }

    #content .relevance .panelListA li {
        width: 98%
    }

    #content .accessBox .head:after,
    #content>.search form>.head:after {
        border: 9px solid transparent;
        border-top: 16px solid #666
    }

    #moreBtn a {
        height: 27px
    }


}



/*投稿ページ関連記事、トップページテーマ記事とランキング記事のfont-sizeの統一,画像元サイズの差異によるはみ出しに伴う変更　2017/11/27*/
/*dlとulで作っているものが存在したので、ulの方に.img-backgroundを追加*/
#topWrapper #contRanking dd,
#topWrapper #theme_contents section dd,
.text-block h3 {

    margin: 10px 0;

    font-size: 12px;


}


.traveling_plan h3 a,
.panelListA h3 a {

    font-weight: bold;

    color: black;

    margin: 8px 0;


}


#theme_contents section dt,
.archive dt,
.img-background {

    height: 150px;

    overflow: hidden;


}


#topWrapper #contRanking dt {
    height: 115px;
}


.img-background img,
#theme_contents section dt img {

    height: 100%;

    width: 100%;

    object-fit: cover;


}


/*イベント記事を掲載日順ではなく、開催日順で表示*/
#topWrapper contEvent:not(#contMapArea) dl:last-of-type(1) {

    margin: 0;


}


#topWrapper contEvent:not(#contMapArea) dl:last-of-type(3) {

    order: -1;


}


#topWrapper contEvent:not(#contMapArea) dl:last-of-type(2) {

    order: -2;


}


#topWrapper contEvent:not(#contMapArea) dl:last-of-type {

    order: -3;

    margin-right: 20px;


}


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

    #theme_list dt {

        height: 110px;

        overflow: hidden;

        margin-bottom: 10px;


    }


    #topWrapper #contRanking dt {

        height: auto;


    }



}