@charset 'UTF-8';

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url('https://fonts.googleapis.com/css?family=Walter+Turncoat');

/*********************************************
/*
/* Intersection
/*
/********************************************/

/****************************************
body
****************************************/
html,
body {
  height: 100%;
}

body {
  background: #fbfbfb;
  font-family: 'Noto Sans Japanese', sans-serif;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* START マウスオーバー時透過 */
img {
	transition: 0.6s ;
}
.link_img img:hover {
	opacity: 0.7 ;
}
/* END   マウスオーバー時透過 */

.main {
  margin-bottom: 20px;
}


/*********************************************
/*
/* Header
/*
/********************************************/

/****************************************
.header
****************************************/
.header {
    width: 100%;
    border-top: 6px solid #0099ff;
/*    background: #fbfbfb; */
    margin-bottom: 0;
    z-index: 999;
}

div#type1_center {
	text-align: center;
    z-index: 9989;
}
span#type1_left {
	float: left;
    z-index: 9980;
}
span#type1_right {
	float: right;
    z-index: 9988;
}

/* header */
#top-head {
    top: -80px;
    position: absolute;
    width: 100%;
    margin: 80px auto 0;
    padding: 0px 0 0;
    line-height: 1;
    z-index: 999;
}
#top-head a,
#top-head {
    color: #0099ff;
    text-decoration: none;
}
/* #top-head .inner {
    position: relative;
} */

#top-head .site-logo {
    padding: 0;
    margin: 10px;
}

.inner {
/*    width: 960px; */
    margin: 0 auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}

#global-nav ul {
    list-style: none;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 14px;
}
#global-nav ul li {
    float: left;
}
#global-nav ul li a {
    padding: 0 20px;
}

/* Fixed */
#top-head.fixed {
    margin-top: 0;
    top: 0;
    position: fixed;
    padding-top: 0px;
    height: 80px;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
    font-size: 24px;
    color: #333;
}

#top-head.fixed .compact_img {
    width: 180px;
    height: 55px;
}

#top-head.fixed #global-nav ul li a {
    color: #333;
    padding: 0 15px;
}

/* 動画表示エリア */
.video_section {
  position: relative;
  height: 720px;
  width: auto;
/*  background-color: #f3f3f3; */
/*  background-size: cover; */
  margin-bottom: 0px;
  text-align: center;
  color: #fff;
  z-index: 10;
}

.fp12class-be-together-section {
  position: relative;
  height: 500px;
  width: auto;
  background-color: #f3f3f3;
  background: url('../img/slide01.jpg') center 30% no-repeat;
  background-size: cover;
  margin-bottom: 0px;
  text-align: center;
}

.logo_screen {
    padding-top: 150px;
}

.responsive_img {
    width:50%;
    max-width: 50%;
    height: auto;

}

.fp12class-slogan {
  font-size: 50px;
  padding-top: 260px;
  /*  color: #fff; */
}

.fp12class-sub-slogan {
  font-size: 25px;
  padding-top: 40px;
  line-height: 1.5;
/*  color: #fff; */
}

.fp12class-create-character {
  font-size: 21px;
  padding-top: 400px;
}


 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    left: 10px;
    top: 15px;
    width: 24px;
    height: 26px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #0099ff;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 8px;
}
#nav-toggle span:nth-child(3) {
    top: 16px;
}
#nav-toggle {
    display: block;
}

/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
    top: 11px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-315deg);
    -moz-transform: rotate(-315deg);
    transform: rotate(-315deg);
}


/****************************************
.site-logo
****************************************/
.site-logo {
/*  margin-top: 20px;
  margin-bottom: 5px; */
/*  padding-right: 0; */
  text-align: center;
/*  float: left; */
}

ul.sns_list li {
/*  width: 20px; */
  padding: 10px;
  display: inline-block;
  text-align: left;
  font-size: 20px;
}

ul.sns_list li a {
  display: block;
}

#sns_section {
    text-align: right;
    position: absolute;
    right: 10px;
    top: 10px;
/*    height: 26px;*/
}

/** スマートフォン時 **/
@media screen and (max-width: 767px) {
    #top-head {
        top: -60px;
        position: absolute;
        width: 100%;
        margin: 60px auto 0;
        padding: 0px 0 0;
        line-height: 1;
        z-index: 999;
    }

    #top-head .site-logo {
        padding: 0;
        margin: 5px;
    }
    
    #top-head a,
    #top-head {
        color: #0099ff;
        text-decoration: none;
    }
    #top-head .inner {
        position: relative;
    }
    #top-head .logo {
        float: left;
        font-size: 36px;
        padding: 0;
        margin: 10px;
    }
    
    /** スマートフォン時はSNSアイコン非表示（検索アイコンのみ残す） **/
    ul.sns_list li:nth-child(1),
    ul.sns_list li:nth-child(2),
    ul.sns_list li:nth-child(3) {
        display: none;
    }
/*    ul.sns_list li.m_off {
        display: none;
    } */
/*    #sns_section {
        display: none;
    } */
    
    #top-head .site-logo .compact_img {
      width: 100px;
      height: 31px;
    }

    .video_section {
        height: 300px;
    }

    /* Fixed */
    #top-head.fixed {
        margin-top: 0;
        top: 0;
        position: fixed;
        padding-top: 0px;
        height: 60px;
        background: #fff;
        background: rgba(255,255,255,.7);
        transition: top 0.65s ease-in;
        -webkit-transition: top 0.65s ease-in;
        -moz-transition: top 0.65s ease-in;
    }

    .logo_screen {
        padding-top: 70px;
    }

    .responsive_img {
        width:65%;
        max-width: 65%;
        height: auto;

    }
    
    .fp12class-slogan {
        font-size: 20px;
        margin: 0 10px;
        padding-top: 120px;
        color: #fff;
    }

    .fp12class-sub-slogan {
        font-size: 12px;
        margin: 0 16px;
        padding-top: 20px;
        color: #fff;
    }

}


/*********************************************
/*
/* Navigation
/*
/********************************************/

/****************************************
.breadcrumb
****************************************/
.breadcrumb {
  padding: 0;
  background: none;
}

.breadcrumb li+li:before {
  content: '»';
}


/****************************************
.navbar
****************************************/

.navbar-form {
  border: none;
}

/****************************************
.sub-nav
****************************************/
.sub-nav,
.navbar-form {
/*  display: none; */
}

.sub-nav a {
  color: #66737f;
}

.sub-nav li:before {
  padding-right: 5px;
  content: '»';
  color: #90b7df;
}

@media screen and (min-width: 768px) {
  .sub-nav {
    display: block;
/*    padding-top: 30px; */
    padding-top: 50px;
    text-align: center;
  }
  .navbar-form {
    display: block;
    padding: 0;
    text-align: center;
  }
}

.input-group {
  width: 220px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .navbar-form .input-group .input-group-btn {
    width: 1%;
  }
}


/*********************************************
/*
/* key-visual
/*
/********************************************/

/****************************************
.key-visual
****************************************/

/* カルーセルスライダー START */
.gimmicCarousel_sample {
	width: 100%;
/*	max-width: 640px; */
	margin: auto;
/*	margin-bottom:20px; */
}

.gimmicCarousel_sample ul.slider {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.gimmicCarousel_sample ul.slider li img {
	max-width: 100%;
	height: auto;
}

.gimmicCarousel_sample img.prev,
.gimmicCarousel_sample img.next{
	position:absolute;
	top:50%;
	margin-top:-16px;
	cursor:pointer;
}
.gimmicCarousel_sample img.prev:hover,
.gimmicCarousel_sample img.next:hover{
	opacity:0.8;
}
.gimmicCarousel_sample img.prev{
	left:-50px;
}
.gimmicCarousel_sample img.next{
	right:-50px;
}
/* カルーセルスライダー  END  */

/****************************************
カテゴリーナビゲーション
****************************************/
.nav_container, .home_nav {
    width: 100%;
    margin: 30px auto;
/*    font-family: 'Fredericka the Great', cursive; */
/*    background: #ffffff; */
}
/* ナビゲーションのスタイル */
.home_nav {
    width: 100%;
    margin: 0;
    padding: 0;
}
.nav__list {
    margin: 0;
    padding: 0;
}
.nav__list:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: ".";
    font-size: 0;
}
.nav__list li {
    float: left;
    width: 20%;
    height: 100px;
    box-sizing: border-box;
    list-style-type: none;
    background: #ffffff;
    border-left: 1px solid #e9e9e7;
}
.nav__list li:last-child {
    border-right: 1px solid #e9e9e7;
}
.nav__link {
    display: block;
    height: 100px;
    margin: 0;
    padding: 20px 0;
    color: #333333;
    font-size: 1.0em;
    text-align: center;
    line-height: 1.0;
    text-decoration: none;
    transition: all .3s;
    -webkit-transition: all .3s;
}
.nav__link--go {
    border-bottom: 4px solid #d92567;
}
.nav__link--go:hover {
    background: #d92567;
}
.nav__link--enjoy {
    border-bottom: 4px solid #5c0973;
}
.nav__link--enjoy:hover {
    background: #5c0973;
}
.nav__link--gourmet {
    border-bottom: 4px solid #65bfb6;
}
.nav__link--gourmet:hover {
    background: #65bfb6;
}
.nav__link--hint {
    border-bottom: 4px solid #f2bb16;
}
.nav__link--hint:hover {
    background: #f2bb16;
}
.nav__link--love {
    border-bottom: 4px solid #f22f1d;
}
.nav__link--love:hover {
    background: #f22f1d;
}
.nav__link:hover {
    color: #ffffff;
}


/* Media Queries(メディアクエリ)
--------------------------------------------------------- */
@media screen and (min-width: 1024px) {
  .nav__list {
    max-width: 1024px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
    .nav_container, .home_nav {
        margin: 0 auto;
    /*    font-family: 'Fredericka the Great', cursive; */
    /*    background: #ffffff; */
    }
    .nav__link {
        font-size: 0.8em;
    }
}


/****************************************
.page-visual
****************************************/
/************************************************************
.page-visual {
  background-color: #BDD6EC;
  margin-bottom: 20px;
}

.pagevisual-title {
  margin: 0;
  font-size: 20px;
  padding: 15px 0 0 10px;
  height: 54px;
  color: #2B68AD;
  background-color: #CBE3FB;
  background-image: url(../img/bg-title.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  -webkit-background-size: 50%;
       -o-background-size: 50%;
          background-size: 50%;
}

@media screen and (min-width: 768px) {
  .pagevisual-title {
    font-size: 30px;
    padding: 60px 0 0 50px;
    height: 160px;
    color: #2B68AD;
    background-position: right top;
    -webkit-background-size: auto;
         -o-background-size: auto;
            background-size: auto;
  }
}
******************************************************************/

/*********************************************
/*
/* MainContent-index
/*
/********************************************/

/****************************************
.feature
****************************************/
.feature-block {
  margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
  .feature-block {
    margin-bottom: 0;
    text-align: center;
  }
}

.feature-block a {
  display: table;
}

@media screen and (min-width: 768px) {
  .feature-block a {
    display: block;
  }
}

.feature-block a:hover {
  text-decoration: none;
}

.feature-block a p,
.feature-block a h3 {
  display: table-cell;
  float: none;
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
  .feature-block a p,
  .feature-block a h3 {
    display: block;
    float: left;
  }
}

.feature-block a p {
  padding-bottom: 0;
}

@media screen and (min-width: 768px) {
  .feature-block a p {
    margin-bottom: 0;
    padding-bottom: 10px;
  }
}

.feature-block a p img {
  border: 4px solid #ececec;
}
/*
.feature-block a:hover p img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
*/
.feature-block a h3 {
  font-family: 'Noto Sans Japanese', sans-serif;
/*  font-family: 'Roboto Condensed', sans-serif; */
  font-size: 24px;
  color: #666;
}

@media screen and (min-width: 480px) {
  .feature-block a h3 {
    font-size: 20px;
    margin-top: 0;
    padding: 20px 15px 0;
  }
}

.feature-block a:hover h3 {
  color: #bbb;
}

.feature-block a h3 span {
  font-size: 14px;
  display: block;
}

.featureblock-title {
  padding-left: 0;
}


/****************************************
.home-subtitle
****************************************/
.home-subtitle {
  font-size: 35px;
    letter-spacing: 1px;
/*    padding-top: 40px; */
    padding-left: 0px;
    color: #666666;
/*  border-left: 4px solid #337ec4; */
    text-align: center;
    font-family: 'Walter Turncoat', cursive;
}

.home-subtitle span {
  font-size: 15px;
  font-weight: normal;
  display: block;
  color: darkorange;
}

@media screen and (min-width: 768px) {
  .home-subtitle {
    font-size: 37px;
    line-height: 1.5;
  }
  .home-subtitle span {
    display: inline;
    margin-left: 20px;
  }
}


/****************************************
.nav-tabs
****************************************/
.nav-tabs li {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

@media screen and (min-width: 768px) {
  .nav-tabs li {
    width: 190px;
    height: 52px;
    margin: 0 4px 0 0;
  }
}

.nav-tabs>li>a {
  font-size: 16px;
  margin: 0;
  padding: 14px 15px;
  text-align: center;
  -webkit-border-radius: 0;
          border-radius: 0;
  background: #cfe4f6;
}

@media screen and (min-width: 768px) {
/*  .nav-tabs>li>a {
    -webkit-border-radius: 8px 8px 0 0;
            border-radius: 8px 8px 0 0;
  } */
}
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
  color: #fff;
  background: #468dc8;
}


/****************************************
.news-content
****************************************/
.news-content {
  padding: 18px;
  border: 1px solid #e8e8e8;
  background: #fff;
  margin-bottom: 20px;
}

.news-pane {
  margin-bottom: 0;
  list-style-type: none;
  -webkit-padding-start: 0;
}

.news-pane li {
  overflow: hidden;
}

.news-pane li+li {
  margin-top: 12px;
}

.news-pane div {
  float: left;
}

.news-pane .article-title {
  font-size: 14px;
  line-height: 1.4;
  float: left;
  display: block;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .news-pane .article-title {
    float: none;
    padding-left: 154px;
  }
}

.news-pane .date {
  width: 80px;
  margin-right: 10px;
}

.news-pane .label {
  display: inline-block;
  width: 60px;
  margin-right: 10px;
  padding: 0.3em 0 0.4em;
  text-align: center;
  color: #fff;
}

.label-new {
  background: #f0ad4e;
}

.label-event {
  background: #5cb85c;
}

.label-news {
  background: #5fc2df;
}

.label-topics {
  background: #e54728;
}

.label-seminer {
  background: #d34edf;
}


/*********************************************
/*
/* MainContent
/*
/********************************************/

/****************************************
.mainblock
****************************************/
.mainblock {
  padding: 25px 0;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

.inner-block p {
  padding: 0 15px;
}

.inner-block li {
  padding: 0 15px 10px;
}

@media screen and (min-width: 768px) {
  .inner-block li {
    padding: 0 15px;
  }
}

.mb20 {
    margin-bottom: 20px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb60 {
    margin-bottom: 60px;
}

/****************************************
.article-nav
****************************************/
.article-nav ul {
  padding: 15px;
  list-style: none;
}

.article-nav li {
  display: inline-block;
}

.article-nav .prev {
  float: left;
}

.article-nav .next {
  float: right;
}

.article-nav li a {
  font-size: 14px;
  line-height: 26px;
  display: inline-block;
  width: 86px;
  height: 26px;
  text-align: center;
  border: 1px solid #ddd;
  -webkit-border-radius: 13px;
          border-radius: 13px;
}

.article-nav li a:hover {
  text-decoration: none;
  background: #eee;
}

.article-nav+.inner-block {
  border-top: 1px solid #eaeaea;
}


/****************************************
.title
****************************************/
.maintitle {
  font-family: 'Noto Sans Japanese', sans-serif;
/*  font-family: 'Roboto Condensed', sans-serif; */
  font-size: 28px;
  line-height: 1.2;
  position: relative;
  padding: 12px 30px;
  color: #2b68ad;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
  background: #fff;
}

.maintitle:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  content: '';
  background: -webkit-gradient(linear, left top, right bottom, from(#2b68ad), to(#90b7df));
  background: -moz-linear-gradient(left, #2b68ad, #90b7df);
  background:      linear-gradient(left, #2b68ad, #90b7df);
}

.subtitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 23px;
  line-height: 1.2;
  padding: 12px 20px 12px 16px;
  color: #2b68ad;
  border-top: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  border-left: 4px solid #2b68ad;
}

.blocktitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  line-height: 1.2;
  padding: 8px 10px;
  color: #2b68ad;
  border-bottom: 2px dotted #eaeaea;
}

.boxtitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 22px;
  line-height: 1.2;
  padding: 8px 0;
}

/** トップページ各カテゴリー説明部（吹きだし風）START **/
.cat_title {
    color: #666666;
	position: relative;
	padding: .5em .75em;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
    margin-bottom: 20px;
}
.cat_title::before,
.cat_title::after {
	position: absolute;
	top: 100%;
	left: 48%;
	content: '';
	height: 0;
	width: 0;
	border: 10px solid transparent;
}
.cat_title::before {
	border-top: 15px solid #ccc;
}
.cat_title::after {
	margin-top: -2px;
	border-top: 15px solid #fff;
}

.mark01{
    color: #333333;
    background: linear-gradient(transparent 60%, #FFFF55 60%);
}
/** トップページ各カテゴリー説明部（吹きだし風） END  **/

/** News一覧リンクボタン START **/
/* .newslist_button {
    background-color: #0099ff;
	border: 2px solid #0099ff;
	color: #fff;
	line-height:20px;
    text-align: center;
    font-weight: bold;
    padding: 3px 20px;
    border-radius: 5px;
}
.newslist_button:hover {
	background-color: rgba(255, 255, 255, .2);
} */

.newslist_button{
  display: inline-block;
  background-color: #f17161;/*背景色*/
  color: #FFF;/*文字色*/
  font-size: 1em;/*文字サイズ*/
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.05em;/*字間*/
  padding: 0.5em 1.2em;/*ボタン内の余白*/
  border-radius: 3px;/*角の丸み*/
  cursor: pointer;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);/*影*/
  -webkit-tap-highlight-color: transparent;
  transition: .3s ease-out;/*変化を緩やかに*/
}

.newslist_button:hover{
    box-shadow: 0 3px 3px 0 rgba(0,0,0,0.14), 0 1px 7px 0 rgba(0,0,0,0.12), 0 3px 1px -1px rgba(0,0,0,0.2);/*浮き上がるように*/
}

/** News一覧リンクボタン  END  **/


/** トップページ観光MAP、島内交通枠の装飾 START **/
.accessinfo_title {
    border: 1px solid #F3F903;
    border-radius: 10px;
    margin: 1em 0;
    padding: 1em;
    position: relative;

    background: -webkit-repeating-linear-gradient(-45deg, #BDE6F4, #BDE6F4 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #BDE6F4, #BDE6F4 5px, #fdfcff 5px, #fdfcff 10px);
/*    margin: 2em 0;
    padding: 2em;    */
}

.accessinfo_title::before {
    background-color: #fbfbfb;
    color: #F3F903;
    content: "観光MAP";
    font-weight: bold;
    font-size: 140%;
    letter-spacing: 0.1em;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

.accessinfo_title2 {
    border: 1px solid #0099ff;
    border-radius: 10px;
    margin: 1em 0;
    padding: 1em;
    position: relative;

    background: -webkit-repeating-linear-gradient(-45deg, #F6F96E, #F6F96E 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #F6F96E, #F6F96E 5px, #fdfcff 5px, #fdfcff 10px);

}

.accessinfo_title2::before {
    background-color: #fbfbfb;
    color: #0099ff;
    content: "島内交通";
    font-weight: bold;
    font-size: 140%;
    letter-spacing: 0.1em;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

/* 各ページ ツアー情報紹介枠 */
.accessinfo_title3 {
    border: 1px solid #0099ff;
    border-radius: 10px;
    margin: 1em 0;
    padding: 1em;
    position: relative;

    background: -webkit-repeating-linear-gradient(-45deg, #F6F96E, #F6F96E 5px, #fdfcff 5px, #fdfcff 10px);
    background: repeating-linear-gradient(-45deg, #F6F96E, #F6F96E 5px, #fdfcff 5px, #fdfcff 10px);
}

.accessinfo_title3::before {
    background-color: #fff;
    color: #0099ff;
    content: "ツアー情報";
    font-weight: bold;
    font-size: 140%;
    letter-spacing: 0.1em;
    left: 1em;
    padding: 0 .5em;
    position: absolute;
    top: -1em;
}

.accessinfo_mark01{
    color: #333333;
    background: linear-gradient(transparent 60%, #F97AD2 60%);
}

.accessinfo_button {
    background-color: #F97AD2;
/*	background-color: transparent; */
	border: 2px solid #F97AD2;
	color: #fff;
/*	color: #F97AD2; */
	line-height:40px;
    text-align: center;
    font-weight: bold;
    padding: 5px 30px;
}
.accessinfo_button:hover {
	background-color: rgba(255, 255, 255, .2);
}
@media screen and (max-width: 767px) {
    .accessinfo_title,
    .accessinfo_title2 {
        font-size: 80%;
    }
}
/** トップページ観光MAP、島内交通枠の装飾 END  **/

/****************************************
.table
****************************************/
.tablebox {
  padding: 25px 15px;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

.table>tbody>tr>th,
.table>tbody>tr>td {
  border-top: none;
/*  border-bottom: 2px solid #ddd; */
}

.table>tbody>tr>th:first-child,
.table>tbody>tr>td:first-child {
  padding: 5px 8px 3px 15px;
}


/****************************************
.thumb-box
****************************************/
.thumb-box {
  padding: 0;
  list-style: none;
}

.thumb-box h3 {
    font-size: 16px;
}

.thumb-box li {
  padding: 0 10px 10px;
}

.thumb-box li a {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0px;
/*  padding: 4px; */
  color: #333;
/*  border: 1px solid #eaeaea; */
  background: #fbfbfb;
}

.thumb-box li a:hover {
  text-decoration: none;
/*  border: 1px solid #2b68ad; */
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.thumb-box li a img {
  width: 100%;
  height: auto;
}

.thumb-box h3,
.thumb-box p {
  padding: 0 15px;
}

.relative {
   position: relative;
}

.absolute {
    position: absolute;
    bottom: 0px;
    color: #fff;
    background: rgba(0,0,0,.6);
    width: 100%;
    height: 100%;
    margin: 0;
}

/** 2017.02.20 ADD START **/
/** PC時は説明文を左からスライド表示 **/
@media screen and (min-width: 767px) {
    .relative h3 {
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .relative .absolute {
      -webkit-transform: translateY(77%);
          -ms-transform: translateY(77%);
              transform: translateY(77%);
      -webkit-transition: all 0.5s;
              transition: all 0.5s; }
    .relative:hover .absolute {
      -webkit-transform: translateY(20%);
          -ms-transform: translateY(20%);
              transform: translateY(20%);
      -webkit-transition: all 0.5s;
              transition: all 0.5s; }
}
/** 2017.02.20 ADD  END  **/

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

    .thumb-box li a {
      position: relative;
      display: block;
      margin: 0;
      padding: auto 0;
      color: #333;
/*      border: 1px solid #eaeaea; */
      background: #fbfbfb;
    }
    .absolute {
        margin-left: 35%;
        width: 65%;
        position: relative;
        color: #555;
        background: #fbfbfb;
    }
    .thumb-box .thumb-img {
/*    .thumb-box #thumb-img { */
        width: 35%;
        float: left;
    }
    .thumb-box .thumb-text {
/*    .thumb-box #thumb-text { */
        font-size: 85%;
/*        width: 100%; */
        padding: 0;
    }
    
}


/****************************************
.thumb-block
****************************************/
.thumb-block {
  list-style: none;
}

.thumb-block li {
  margin-bottom: 10px;
  padding: 4px 4px 15px;
  color: #333;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

@media screen and (min-width: 768px) {
  .thumb-block li {
    padding: 4px;
  }
}

.thumb-block li div {
  position: relative;
  overflow: hidden;
}

.thumb-block li:last-child {
  margin-bottom: 20px;
}

.thumb-block li>div:first-child {
  padding-right: 0;
  padding-left: 0;
}

.thumb-block li>div:first-child img {
  width: 100%;
  height: auto;
}

.thumb-block button {
  float: right;
}


/*********************************************
/*
/* SideContent
/*
/********************************************/

/****************************************
.banner
****************************************/
.aside {
  margin: 10px auto 0;
}

.aside .banner {
  text-align: center;
}

.aside p,
.aside .fb-page {
  text-align: center;
}

.aside p a:hover {
  opacity: 0.6;
}

@media screen and (min-width: 992px) {
  .aside {
    margin: 0 auto;
  }
  .aside p img {
    width: 100%;
    height: auto;
  }
}


/****************************************
.cat-nav
****************************************/
.cat-nav {
  margin-bottom: 10px;
}

.cat-nav .cat-title {
  font-size: 16px;
  line-height: 46px;
  height: 46px;
  margin: 0;
  padding: 0 17px;
  color: #fff;
  background: #2b68ad;
}

.cat-nav ul {
  padding: 0;
  list-style: none;
  border-top: 1px solid #eaeaea;
}

.cat-nav li {
  height: 46px;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
}

.cat-nav li a {
  font-size: 16px;
  line-height: 46px;
  display: block;
  padding: 0 17px;
  color: #8e8e8e;
}

.cat-nav li a::before {
  position: absolute;
  right: 15px;
}

/* youtube動画レスポンシブ対応 */
iframe{
width:100% !important;
}

.iframeBox{
position:relative;
width:100%;
}

.iframeBox iframe{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important
}

/*********************************************
/*
/* Footer
/*
/********************************************/

/****************************************
.btn-pagetop
****************************************/
.btn-pagetop {
  border-bottom: 5px solid #a8c9e8;
  background: #fbfbfb;
}

.btn-pagetop .container {
  text-align: right;
}

.btn-pagetop .container a {
  display: inline-block;
  width: 50px;
  height: 25px;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
  background: #a8c9e8;
}

.btn-pagetop .container a:hover {
  text-decoration: none;
  background: #c1d5e8;
}

.btn-pagetop .container a i {
  padding-top: 5px;
}


/****************************************
.footer
****************************************/
.footer {
  background: #0099ff;
}

.footer .container {
  padding: 10px 0;
}

.footer-nav {
  font-family: 'Noto Sans Japanese', sans-serif;
/*  font-family: 'Roboto Condensed', sans-serif; */
  font-size: 34px;
  margin: 0;
  color: #ffffff;
}

@media screen and (min-width: 768px) {
  .footer-nav>div {
    float: left;
    max-width: 50%;
  }
}

@media screen and (min-width: 992px) {
  .footer-nav>div {
    max-width: 25%;
    text-align: left;
  }
}

.footernav-title {
  font-size: 16px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #fff;
}

.footernav-title .glyphicon-chevron-down:before {
  margin-right: 10px;
}

@media screen and (min-width: 768px) {
  .footernav-title .glyphicon-chevron-down:before {
    display: none;
  }
}

.list-group {
  margin-bottom: 0;
}

.list-group a {
  font-size: 14px;
  position: relative;
  display: block;
  padding: 5px 5px;
  color: #ffffff;
}

.list-group a:hover {
  text-decoration: none;
  color: #6aaae6;
}

.footer-logo {
  margin-top: 20px;
}

.footer-icon .container {
  list-style-type: none;
}

.footer-icon p,
.footer-icon ul {
  width: 100%;
  text-align: center;
}

.footer-icon li {
  display: inline-block;
  float: none;
}

.footer-icon li a:hover {
  opacity: 0.6;
}

.footer-icon li img {
  width: 40px;
  height: auto;
  border: 2px solid #bedaff;
}

.sns-icon {
  float: left;
}

.copyright {
  text-align: center;
  color: #ffffff;
}

/** 17.05.18 印刷時URLが表示されてしまうのを回避 **/
@media print{
a[href]:after {
    content: "" !important;
  }
}
/** 17.05.18 印刷時URLが表示されてしまうのを回避 **/