@charset "utf-8";
/* CSS Document */

body{
	font-family: "Helvetica Neue","メイリオ","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-top:0;
	padding-top:0;
	background-color:#FFF;
/*	background-image:url(../../img/bg.jpg);*/
	
}




.shomei{
	font-family: 'Sacramento', cursive;
	text-align:right;
	font-size:160%;
	float:right;
	
}

/*.dropdown:hover > .dropdown-menu{
  display: block;
}
*/



/* fade slider */
.slides {
    height:391px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:960px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
}
.pagetop a {
    display: block;
    background-color: #b2b2b2;
    text-align: center;
    color: #FFF;
    font-size: 20px;
    text-decoration: none;
    padding: 20px 26px 16px 26px;
	font-weight:bold;
	border-radius: 50%;
	border:2px solid #FFFFFF;

}
 
.pagetop a:hover {
    display: block;
    background-color: #731916;
    text-align: center;
    color: #fff;
    font-size: 20px;
    text-decoration: none;
     padding: 20px 26px 16px 26px;
 	font-weight:bold;
	border-radius: 50%;


}


.fbcomments,
.fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fbcomments iframe[style],
.fb_iframe_widget span{
    width: 100% !important;
}

#slide{
width:100%;
overflow:hidden;
}

#slide ul{
width:80%;
height:150px;
margin:0 auto;
position:relative;
}

#slide ul:before,
#slide ul:after{
content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background:rgba(255,0,0,0.7);
    z-index:10;
}

#slide ul:before{
    left:-100%;
}

#slide ul:after{
    left:100%
}


#slide li{
position:absolute;
top:0;
left:0;
width:100%;
height:150px;
line-height:150px;
text-align:center;
font-size:60px;
}

#slide li.view1{
left:-100%;
background:#ddd;
}

#slide li.view2{
left:0;
background:#eee;
}

#slide li.view3{
left:100%;
background:#ddd;
}

#slide li.view4{
left:200%;
background:#eee;
}


.flow-list{
 list-style:none;
 padding:0;
 margin:0;
}
.flow-list:after{  //clearfix
 height: 0;
 visibility: hidden;
 content: ".";
 display: block;
 clear: both;
}
.flow-list li{
 box-sizing:border-box;  //padding,marginを含めて24%に指定
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -ms-box-sizing:border-box;
 -o-box-sizing:border-box;
 float:left;
 padding:5px 20px;
 margin-right:3px;
 background:#E77989;
 color:#fff;
 position:relative;
 text-align:center;
}
.flow-list li:before{
 content:"";
 display:block;
 position:absolute;
 top:0;
 right:-24px;
 width:0;
 height:0;
 border-top:solid 14px transparent;
 border-right:solid 14px transparent;
 border-bottom:solid 14px transparent;
 border-left:solid 10px #E77989;
 z-index:10;  //黒が上に重なるように指定
}
.flow-list li:after{
 content:"";
 display:block;
 position:absolute;
 top:0;
 left:0;
 width:0;
 height:0;
 border-top:solid 14px transparent;
 border-right:solid 14px transparent;
 border-bottom:solid 14px transparent;
 border-left:solid 10px #fff;
}
.flow-list li:first-child:after{
 display:none;
}


h3{
	font-size:240%;
	text-align:left;
	font-weight:bold;
	font-family:
   "ヒラギノ明朝 ProN W6",
   "HiraMinProN-W6",
   "HG明朝E",
   "ＭＳ Ｐ明朝",
   "MS PMincho",
   "MS 明朝",
   serif;
}

.h3_red{
	width:100%;
	background-color:#FC6565;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
	color:#FFF;
	font-weight:bold;
	padding-top:0.8em;
	padding-bottom:0.8em;
}

.h3_yellow{
	width:100%;
	background-color:#F7DC7E;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
	color:#FFF;
	font-weight:bold;
	padding-top:0.8em;
	padding-bottom:0.8em;
}

.h3_blue{
	width:100%;
	background-color:#89A1E5;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
	color:#FFF;
	font-weight:bold;
	padding-top:0.8em;
	padding-bottom:0.8em;
}

.h3_purple{
	width:100%;
	background-color:#E8A7FD;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
	color:#FFF;
	font-weight:bold;
	padding-top:0.8em;
	padding-bottom:0.8em;
}

.h3_green{
	width:100%;
	background-color:#71D388;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
	color:#FFF;
	font-weight:bold;
	padding-top:0.8em;
	padding-bottom:0.8em;
}

h5{
	font-size:120%;
	font-weight:bold;
	color:#00a63c;
}

.mincho{
	font-family:
   "ヒラギノ明朝 ProN W6",
   "HiraMinProN-W6",
   "HG明朝E",
   "ＭＳ Ｐ明朝",
   "MS PMincho",
   "MS 明朝",
   serif;
}

.blue01{
	color:#039;
}

.linkblack a:visited {
	color: #000;
}
.linkblack a:link {
	color: #000;
}
.linkblack a:hover {
	color: #A09300;
}
.linkblack a:active {
	color: #000;
}


.linkwhite a:visited {
	color: #FFF;
}
.linkwhite a:link {
	color: #FFF;
}
.linkwhite a:hover {
	color: #A09300;
}
.linkwhite a:active {
	color: #FFF;
}


img.wakusen{border:1px solid #555555;}

img.wakusen02{border:1px solid #9B9B9B;}

img.wakusen03{border:1px solid #cecece;}


img.wakusen_kado_noborder{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

a:hover img{
	filter: alpha(opacity=80);
	-moz-opacity: 0.7;
	opacity: 0.7;
}


.navbar-inverse .navbar-inner {
  background-color: #1b1b1b;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

div.fb-like-box,
div.fb-like-box iframe[style],
div.fb-like-box span {
    width: 100% !important;
}

.btn02{
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
    /* 以下装飾です。削除OK */
    text-decoration:none;
    height: 40px;
    line-height: 32px;
    width: 9em;
    text-align: center;
    display: block;
    margin:13px 10px 0px 10px;
    outline: none;
    float: left;
    position: relative;
    z-index: 2;
}
.btn02:before,.btn:after{
    position: absolute;
    display: block;
    content:"";
    height: 100%;
    width: 100%;
    -webkit-transition:all 0.3s;
    transition:all 0.3s;
}

.perspective a{
    color:#fff;
    width: 9em;
    height: 40px;
    display: block;
}
.perspective{
    -webkit-transition:all 0.3s !important;
    transition:all 0.3s !important;
}
.persfront{
    -webkit-transform-origin: center bottom;
    -webkit-transform: rotateX(0deg);
    transform-origin: center bottom;
    transform: rotateX(0deg);
}
.persback{
    -webkit-transform-origin: center top;
    -webkit-transform: rotateX(-90deg);
    transform-origin: center top;
    transform: rotateX(-90deg);
}
.v5-8{
    -webkit-perspective: 300px;
    -webkit-transform-style: preserve-3d;
}
.v5-8 .persfront a{
    background:#5bc0de;
    border: 5px solid #5bc0de;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
}
.v5-8 .persback a{
    background: #4995ab;
    border: 5px solid #4995ab;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
}
.v5-8:hover .persfront{
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
    margin: -40px 0 0 0;
}
.v5-8:hover .persback{
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.btn05 {
    color: #fff;
    display: block;
    text-decoration: none;
    width: 9em;
    perspective: 300px;
    -webkit-perspective: 300px;
	
}
 
.btn05 span {
    text-align: center;
    display: block;
    width: 9em;
    padding: 10px 0;
    background-color: #a7dd7d;
    position:absolute;
    top: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: 0.8s;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
}
.btn05 .back {
    background-color: #61a84d;
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
}
 
.btn05:hover .front {
    transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
}
 
.btn05:hover .back {
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg);
}


.btn01 {
    color: #fff;
    text-decoration: none;
    background-color: #5bc0de;
    display: block;
    width: 8em;;
    height: 8em;
    line-height: 110px;
    border-radius: 50%;
    /* ここで動く速度とか設定 */
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
}
.btn01:hover {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
	color:#F0F0F0;
}


/*****************記事******************************************/

div#category_news{
	background-color:#FC6565;
	font-size:70%;
	width:9em; 
	border-radius:0px 0px 5px 0px;
	-moz-border-radius: 0px 0px 5px 0px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 0px 0px 5px 0px; /* Firefox用 */
}

div#category_ebooks{
	background-color:#F7DC7E;
	font-size:70%;
	width:9em; 
	border-radius:0px 0px 5px 0px;
	-moz-border-radius: 0px 0px 5px 0px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 0px 0px 5px 0px; /* Firefox用 */
}

div#category_contents{
	background-color:#E8A7FD;
	font-size:70%;
	width:9em; 
	border-radius:0px 0px 5px 0px;
	-moz-border-radius: 0px 0px 5px 0px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 0px 0px 5px 0px; /* Firefox用 */
}

div#category_know{
	background-color:#89A1E5;
	font-size:70%;
	width:9em; 
	border-radius:0px 0px 5px 0px;
	-moz-border-radius: 0px 0px 5px 0px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 0px 0px 5px 0px; /* Firefox用 */
}

div#category_guesthouse{
	background-color:#71D388;
	font-size:70%;
	width:9em; 
	border-radius:0px 0px 5px 0px;
	-moz-border-radius: 0px 0px 5px 0px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 0px 0px 5px 0px; /* Firefox用 */
}

.kiji001{
	text-align:center;
	font-size:70%;
	color:#FFF;
	padding:0.3em 0px 0.3em 0px;
}

.kiji002{
	width:100%;
	height:11em;
	font-size:120%;
	float:left;
	background-size: cover;
	border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 5px; /* Firefox用 */
}

div#kiji003{
	background-image:url(../../img/bg_edge.png);
	background-repeat:no-repeat;
}

.kiji004{
	word-break: break-all;
	font-size:120%;
}

div#kiji005{
	width:100%;
	height:11em;
	font-size:120%;
	float:left;
	background-size: cover; border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 5px; /* Firefox用 */
	position:relative;
}

div#kiji006{
	width:100%;
	background-image:url(../../img/bg_white80.png);
	position:absolute;
	bottom:0;
	border-radius:0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px; /* Safari,Google Chrome用 */
	-webkit-border-radius: 0px 0px 5px 5px; /* Firefox用 */
}

/********************************************************************/

.img-responsive{
		border-radius:5px;
	-moz-border-radius:5px; /* Safari,Google Chrome用 */
	-webkit-border-radius:5px; /* Firefox用 */
}


a:hover.link1{
  display:block;
  width:100px;
  height:100px;
  background-image:url(★置き換え画像★);
  text-indent:-10000px;
  list-style:none;
}

/*******************************************************/
.sitename{
    margin:15px 0 15px;
}
.sitename a{
    font-size: 1.6em;
    color: inherit;
}
 
i{
    font-size: 1.3em;
    color: inherit;
}

 
.navbar02 .navbar-inner {
    padding: 0;
	
}
 
.navbar02 .nav {
    margin: 0;
    display: table;
    width: 100%;
	
}
 
.navbar02 .nav li {
    display: table-cell;
    float: none;
}
 
.navbar02 .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
	background-color:#b2b2b2;
}
 
.navbar02 .nav li a:hover {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(0, 0, 0, .1);
	background-color:#a92c28;
} 

.navbar02 .nav li a:active {
	background-color:#a92c28;
} 
 
.navbar02 .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
	
}

.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{
	background-color:#57A2EA;
}

.dropnavi02 a:hover{
	background-color:#CCC;
}


.mainslidetxt01{
	font-size:400%;
}

.mainslidetxt02{
	font-size:300%;
}

.mainslidetxt03{
	font-size:800%;
}

.mainslidetxt04{
	font-size:500%;
}


@media screen and (max-width: 760px) {
.mainslidetxt01{
	font-size:160%;
}
.mainslidetxt02{
	font-size:120%;
}
.mainslidetxt03{
	font-size:280%;
}
.mainslidetxt04{
	font-size:180%;
}
}