@charset "utf-8";

/* --base------------------------------------------- */

body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol ,
fieldset, form, label, legend,
table, caption, tbody, tfoot,
article, aside, canvas, figcaption, figure,
footer, header, menu, nav, section{
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   font-size: 100%;
   vertical-align: baseline;
   background: transparent;
   text-align: left;
}

*,
*:before,
*:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

body {
   font-family:’flopdesign-kana’,’ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Pro’,’メイリオ’,Meiryo,’ＭＳ Ｐゴシック’,’MS P’,sans-serif ;
   font: 15px/30px;
   color: #838C95;
   -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
   -webkit-text-size-adjust: 100%;
}

h2 { font-size: 20px; line-height: 42px; margin-bottom: 6px; }
h6 { font-size: 14px; line-height: 30px; }


/* --link------------------------------------------- */

a, a:visited {
   text-decoration: none;
   outline: 0;
   color:#fff;
   -webkit-transition:color .3s ease-in-out;
   -moz-transition:color .3s ease-in-out;
   -o-transition:color .3s ease-in-out;
   transition:color .3s ease-in-out;
}

p a, p a:visited { line-height: inherit; }


/* --list------------------------------------------- */

li { line-height: 18px; margin-bottom: 12px; }

/* --image------------------------------------------- */

img {
   max-width: 100%;
}

img.pull-right { margin: 12px 0px 0px 18px; }
img.pull-left { margin: 12px 18px 0px 0px; }


/* --desktop------------------------------------------- */

.row {
   max-width: 1008px;
   margin-left: 8%; 
   margin-right: 8%;
}

.ie .row { width: 1008px ; }

.row .row { width: auto; max-width: 100% }

.col {
   position: relative;
   float: left;
}

.row:before,
.row:after {
   content: " ";
   display: table;
}

.row:after {
   clear: both;
}



.row.collapsed .col,
col.collapsed { padding: 0; }

.col .col:first-child { padding-left: 0; }
.col .col:last-child { padding-right: 0; }

.ie .row .row .last { padding-right: 0; }

.row .one-twelfth,     .row .g-1     { width: 8.33333%; }
.row .one-sixth,       .row .g-2     { width: 16.66667%; }
.row .one-fourth,      .row .g-3     { width: 25%; }
.row .one-third,       .row .g-4     { width: 33.33333%; }
.row .five-twelfths,   .row .g-5     { width: 41.66667%; }
.row .half,            .row .g-6     { width: 50%; }
.row .seven-twelfths,  .row .g-7     { width: 58.33333%; }
.row .two-thirds,      .row .g-8     { width: 66.66667%; }
.row .three-fourths,   .row .g-9     { width: 75%; }
.row .five-sixths,     .row .g-10    { width: 83.33333%; }
.row .eleven-twelfths, .row .g-11    { width: 91.66667%; }
.row .full,            .row .g-12    { width: 100%; }


/* --text------------------------------------------- */

.conta {
   text-align: left;
   font-size: 14px; 
 }

.conta2 {
   text-align: left;
   font-weight: bold; 
   font-size: 13px; 
   margin-bottom: 50px;
 }


/* --slider------------------------------------------- */

.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides, .flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; }

.flexslider {
   position: relative;
   margin: 0;
   padding: 0;
}

.flexslider .slides > li { position: relative; }

.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }

.flex-container { position: relative; }

.slides:before,
.slides:after {
   content: " ";
   display: table;
}
.slides:after {
   clear: both;
}


/* --header------------------------------------------- */

header {
   height: 54px;
   width: 100%;
   z-index: 99999;
   background: url(../images/glass.png);
   position: fixed;
   top: 0;
   left: 0;
}

header.static {
   background: #2f2f2f;
   position: static;
}

h6 a {
   display:block;
   width:188px;
   height:29px;
   background-image:url("../images/logo.png");
   background-repeat:no-repeat;
   float: left;
   text-align:right;
   line-height: 40px;
   margin-top: 12px;
   margin-right:60px;
}

a.white:link {
   text-shadow: 1px 1px 1px rgba(0,0,0,1);
   color : #ffffff; 
}

a.white:visited {
   text-shadow: 1px 1px 1px rgba(0,0,0,1);
   color : #ffffff; 
}

a.white:active {
   text-shadow: 1px 1px 1px rgba(0,0,0,1);
   color : #ffffff; 
}
a.white:hover {
   text-shadow: 1px 1px 1px rgba(0,0,0,1); 
   color : #ffa9a8; 
}


/* --navigation------------------------------------------- */

#nav-wrap ul, #nav-wrap li, #nav-wrap a {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

#nav-wrap {
   position: relative;
   font-size: 13px;
   float: left;
}

#nav-wrap > a { display: none; }

ul#nav {
   min-height: 54px;
   width: auto;
   text-align: left;
}

ul#nav li {
   position: relative;
   list-style: none;
   height: 54px;
   display: inline-block;
}

ul#nav > li.active a {
   background: rgba(0,0,0,0.2);
   color: #fff !important;
}

ul#nav li a {
   display: block;
   padding: 0 14px;
   line-height: 54px;
   text-shadow: 1px 1px 1px rgba(0,0,0,1);
   font-weight: bold;
   text-align: left;
   color: #fff;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition: color .2s ease-in-out;
   -o-transition: color .2s ease-in-out;
   -ms-transition: color .2s ease-in-out;
   transition: color .2s ease-in-out;
}

ul#nav li a:active { background-color: transparent !important; }
ul#nav li:hover > a,
ul#nav li.active a { color: #ffa9a8; }


/* --intro------------------------------------------- */

#intro {
   background: url(../images/kabe.png) no-repeat;
   overflow: hidden;
   background-position: left;
}

#cnv {
  position:absolute;
  width:412px;
  height:412px;
}

.seizu1 {
   background: url(../images/uike2.png) no-repeat;
   height: 726px;
}

.seizu2 {
   background: url(../images/kabe2.png) no-repeat;
   height: 726px;
}
.seizu3 {
   background: url(../images/kabe3.png) no-repeat;
   height: 726px;
}

.slides {
   max-height: 700px;
   overflow: hidden;
}

.slider-text {
   text-align: left;
   width: 85%;
   margin: 156px auto 66px auto;
   color: #2f2f2f;
   line-height: 150%
}

.slider-text h2 {
   color: #2f2f2f;
}

.slider-text h5 {
   font-size : 95%;
   color: #2f2f2f;
   font-weight : normal;
   text-shadow: 1px 1px 1px #fff, 3px 3px 3px rgba(0,0,0,0.15);
}

.slider-text h4 {
   color: #2f2f2f;
   font-weight : normal;
}

.slider-text span {
   color: #2f2f2f;
   font-weight: bold;
}

.slider-text p {

}


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

.slider-text { 
   margin-top: 150px;
}

}

.flex-direction-nav a {
   display: block;
   width: 50px;
   height: 50px;
   margin: 0;
   background-color: #2f2f2f;
   cursor: pointer;
   z-index: 99999;
   opacity: 0;
   position: absolute;
   top: 50%;
   text-shadow: none;
   color: transparent;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.flex-direction-nav a:hover { background-color: #00bbdd; }

.flex-direction-nav .flex-next {
   right: 0px;
   background: #2f2f2f url(../images/right.png) no-repeat 53% 50%;
   position: absolute;
}

.flex-direction-nav .flex-prev {
   left: 0px;
   background: #2f2f2f url(../images/left.png) no-repeat 47% 50%;
   position: absolute;
}

.flexslider:hover .flex-next,
.flexslider:hover .flex-prev { opacity: 1; }
.flex-direction-nav .flex-disabled {
   opacity: .3 !important;
   filter: alpha(opacity=30);
   cursor: default;
}


/* --guide------------------------------------------- */

#guide {
   background: url(../images/bg4.png);
   padding-top: 80px;
   color: #2f2f2f;
   min-width: 300px;
}

a.guide2:link {
   color : #00bbdd; 
}

a.guide2:visited {
   color : #00bbdd; 
}

a.guide2:active {
   color : #00bbdd; 
}

a.guide2:hover {
   color : #ff453e; 
}


.anna {
   margin-left: 8%;
   margin-right: 8%;
}

.simage {
   margin-bottom: 30px;
}


#guide .section-head h2 { 
color: #ff453e; 
text-align: left;
}

.guide-wrapper { 
   margin-top: 42px; 
   font-size: 14px;
}

.guide-wrapper .col {
   width: 33.33333%;
   margin-bottom: 30px;
}

.guide-wrapper h2 {
   font: 16px/24px;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #ff453e;
   margin-bottom: 18px;
}

.guide-wrapper p {
   line-height: 30px;
}

#guide .guide-wrapper i { margin-right: 10px; }

#guide ul.listmark {
   padding: 0.5em 20px 1em 30px;
   list-style: disc;
   font-size: 14px;
}

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

#guide
{ padding-top: 120px; }

 }


#guide .guide-head .col { width: 100%; }
#guide .guide-wrapper { margin-top: 12px; }
#guide .guide-wrapper .col { width: 50%; }
#guide .guide-wrapper .col { margin-bottom: 0; }


#gallery-wrapper {
   margin-top: 30px;
   margin-bottom: 20px;
}


.album{
   display: table;
   margin-left: 11%;
   margin-right: 8%;
}

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

.album{
   margin-left: 7%;
   margin-right: 11%;
}

}

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

.album{
   margin-left: 7%;
   margin-right: 15%;
}

}

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

.album{
   margin-left: 1%;
   margin-right: 9%;
}

}

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

.album{
   margin-right: 14%;
}

}

.album ul{
   padding: 0;
   margin: 0;
   width: 100%;
}

.album li{
   padding: 0;
   margin: 0;
   float: left;
   width: 25%;
   box-sizing:border-box;
   display: block;
   text-align: center;
}

figure {
   position: relative;
   overflow: hidden;
   width: 100%;
}

figcaption {
   position: absolute;
   font-size: 12px;
   top: 0;
   left: 0;
   z-index: 2;
   width: 100%;
   height: 160px;
   background: rgba(0,0,0,.4);
   -webkit-transform: rotateY(-90deg) rotateX(-90deg);
   transform: rotateY(-90deg) rotateX(-90deg);
   -webkit-transition: .5s;
   transition: .5s;
   opacity: 0;
}

figure:hover figcaption {
   -webkit-transform: rotateY(0) rotateX(0);
   transform: rotateY(0) rotateX(0);
   opacity: 1;
}

figcaption a {
   position: absolute;
   left: 43%;
   bottom: 70px;
   text-align: center;
   background: rgba(0,0,0,.6);
   padding: 4px 10px;
   border-radius: 5px;
}

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

figcaption a {
   left: 35%;
   bottom: 70px;
}

}

.lb-overlay{
   width: 0px;
   height: 0px;
   position: fixed;
   overflow: hidden;
   left: 0px;
   top: 0px;
   padding: 0px;
   z-index: 99;
   text-align: center;
   background: rgba(201,223,234,0.8);
   font-size: 13px;
}

.lb-overlay > div{
   position: relative;
   margin-top: 40px;
   margin-left: 0;
   text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}

.lb-overlay a.lb-close{
   background: rgba(27,54,81,0.8);
   z-index: 1001;
   color: #fff;
   position: absolute;
   top: 80px;
   left: 48%;
   font-size: 15px;
   line-height: 26px;
   text-align: center;
   width: 80px;
   height: 25px;
   overflow: hidden;
   margin-left: -25px;
   opacity: 0;
   filter: alpha(opacity=0); /* internet explorer */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
   -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
   -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
   box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

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

.lb-overlay a.lb-close{
   left: 45%;
}

}




.lb-overlay img{
   max-width: 95%;
   width: 600px;
   margin-top: 120px;
   position: relative;
   opacity: 0;
   filter: alpha(opacity=0); /* internet explorer */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
   -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
   -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
   box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
   -webkit-transition: opacity 0.5s linear;
   -moz-transition: opacity 0.5s linear;
   -o-transition: opacity 0.5s linear;
   -ms-transition: opacity 0.5s linear;
   transition: opacity 0.5s linear;
}

.lb-prev, .lb-next{
   text-indent: -9000px;
   position: absolute;
   top: -32px;
   width: 24px;
   height: 25px;
   left: 50%;
   opacity: 0.8;
   filter: alpha(opacity=80); /* internet explorer */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}

.lb-prev:hover, .lb-next:hover{
   opacity: 1;
   filter: alpha(opacity=99); /* internet explorer */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}

.lb-prev{
   margin-left: -30px;
   background: transparent url(http://besylla.jp/images/arrows.png) no-repeat top left;
}

.lb-next{
   margin-left: 6px;
   background: transparent url(http://besylla.jp/images/arrows.png) no-repeat top right;
}

.lb-overlay:target {
   width: 100%;
   height: 100%;
   bottom: 0px;
   right: 0px;
}

.lb-overlay:target img,
.lb-overlay:target a.lb-close{
   opacity: 1;
   filter: alpha(opacity=99); /* internet explorer */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}

x:-o-prefocus, .lb-overlay img {
   height: 100%;
}

img { -ms-interpolation-mode: bicubic; }

img.mi {
   background-position: center center;
   background-repeat: no-repeat;
   width: 240px;
   height: 160px;
   display: inline-block;
   background-size: cover;
   box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.1),
   inset 0 0 50px rgba(0, 0, 0, 0.1);
   vertical-align: bottom;
}

img {
   border: 0px;
}

p.ab { text-align: center;  }

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

.album li {
   width: 50%;
}

}


/* --map------------------------------------------- */

#map {
   display: block;
   height: 640px;
   width: 100%;
}

#access {
   background: url(../images/bg.png);
}


/* --contact------------------------------------------- */

#contact {
   background: url(../images/bg4.png);
   padding: 60px 20px 40px 20px;
   color: #2f2f2f;
}

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

.contact2 {
   padding-left: 0%;
   padding-right: 5%;
}

}

#contact .section-head h2 { color: #00bbdd; }


/* --blog------------------------------------------- */

#blog {
   background: url(../images/bg2.png);
   padding: 60px 20px 40px 20px;
   color: #2f2f2f;
}

#feed{

}

#feed li {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
    white-space: nowrap;
}
#feed li:last-child{
    border: none;
}
.blog_list {
    list-style: none;
    padding: 5px 10px;
    color: #ffffff;
    border-bottom: #ffffff 1px dashed;
    font-size: 13px; 
}
.blog_list a {
    margin-left: 10px;
    text-decoration:none;
}

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

.blog2 {
   padding-left: 0%;
   padding-right: 5%;
}

}

#blog .section-head h2 { color: #ffffff; }

#blog a:link {
   color : #ffffff; 
}

#blog a:visited {
   color : #ffffff; 
}

#blog a:active {
   color : #ff453e; 
}

#blog a:hover {
   color : #ff453e; 
}


/* --footer------------------------------------------- */

footer.main {
    background-image:url(../images/footer.png);
    height: 54px;
    background-color: #cee6e9;
}

footer.main {
    font-size: 14px;
    font-weight: bold;
    color: #1d1d1d;
    text-align: left;
}

footer.main {
    padding-top: 20px;
    padding-left: 70px;
}

a.foo:link {
   color : #1d1d1d; 
}

a.foo:visited {
   color : #1d1d1d; 
}

a.foo:active {
   color : #1d1d1d; 
}

a.foo:hover {
   color : #1d1d1d; 
}
 
/* --font------------------------------------------- */

@font-face {
  font-family: 'flopdesign-kana';
  src: url('fonts/flopdesign-kana.eot'); 
  src: url('fonts/flopdesign-kana.eot?#iefix') format('embedded-opentype'), 
       url('fonts/flopdesign-kana.woff') format('woff'), 
       url('fonts/flopdesign-kana.ttf')  format('truetype'), 
}

/* --mobile------------------------------------------- */



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

.row {
width: 460px;
margin: 0 auto;
padding: 0;
}
   
.col {
   width: 100% !important;
   float: none;
   margin-left: 0;
   margin-right: 0;
   padding: 0 20px;
}

.col .row { width: 100%; }
.col .row .col { padding: 0; }

}

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

.row { 
   width: 100%; 
}

}

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

header.mobile { height: 54px; }

header.mobile .logo a { top: 22px; }

.mobile #nav-wrap {
   position: absolute;
   top: 0;
   right: 20px;
   width: auto;
   margin: 0;
}

.mobile #nav-wrap > a {
   width: 48px;
   height: 48px;
   text-align: left;
   background-color: #00bbdd;
   position: relative;
   border: none;
   float: right;
   text-shadow: none;
   color: transparent;
}

.mobile #nav-wrap > a:before,
  .mobile #nav-wrap > a:after {
   position: absolute;
   border: 2px solid #fff;
   top: 35%;
   left: 25%;
   right: 25%;
   content: '';
}

.mobile #nav-wrap > a:after { top: 60%; }

.mobile #nav-wrap:not( :target ) > a:first-of-type,
.mobile #nav-wrap:target > a:last-of-type  {
   display: block;
}

.mobile #nav-wrap ul#nav {
   height: auto;
   display: none;
   clear: both;
   }

.mobile #nav-wrap ul#nav li {
   display: block;
   width: 100%;
   height: 100%;
   text-align: left;
}

.mobile #nav-wrap ul#nav > li.active a {
   color: #00bbdd !important;
   background: none;
}

.mobile #nav-wrap:target > ul#nav	{
   display: block;
   padding: 12px 25px 24px 25px;
   background-image:url("../images/bg2.png");
   margin: 0;
   clear: both;
}
.mobile #nav-wrap ul#nav li { border-bottom: 1px dotted #2f2f2f; }
.mobile #nav-wrap ul#nav li a {
   margin: 0;
   padding: 0;
   font-size: 13px;
   margin: 10px 0;
   line-height: 14px;
   border: none;
}
}

/* --mail------------------------------------------- */





table {
margin-top: 20px;
border-collapse: collapse;
border-spacing: 0;
width:60%;
}

tbody{
height:auto;
background-color: #00bbdd;
margin:0 auto;
}

tbody tr{
width:100%;
display: block;
list-style: none;
}

tbody th, td{
width:100%;
display: list-item;
padding:0px 0px; 
border:none;
}

tbody td {
background: #fff;
}

h4.sam {
color: #fff; 
font-weight:700; 
font-size: 14px;
line-height: 35px;
margin-left: 10px;
}

h4.sam2 {
color: #ff453e; 
font-weight:500; 
font-size: 12px;
line-height: 5px;
}

input.sam3Submit {
    border-radius: 0;   
    background: -moz-linear-gradient(top, #FFF 0%, #EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE));
    border: 1px solid #7a7a7a;
    color: #111;
padding: 0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width: 80px;
    height: 30px;
    margin-top: 10px;
    margin-bottom: 10px; 
    margin-left: 10px; 
}
input.sam3Submit:hover {
    background: -moz-linear-gradient(top, #EFEFEF 0%, #EEE);
    background: -webkit-gradient(linear, left top, left bottom, from(#EFEFEF), to(#EEE));
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
width: 95%;
color: #000;
padding:10px 0 10px 10px;
margin:10px 10px;
}


input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,select:focus{
background: #def6fb;
border: 1px solid #00bbdd;
}

input[type="text"] {
background: #fff;
border: 1px solid #7a7a7a;
font-size: 1em;
text-indent: 0.7em;
}

@media (max-width: 800px) {

table {
width:80%;
}
}




@media (max-width: 480px) {

h4.sam2 {
line-height: 20px;
}

table {
width:350px;
}

tbody tr{
width:100%;
display: block;
list-style: none;
}

tbody th, td{
width:100%;
display: list-item;
padding:0px 0px; 
border:none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,select{
width:90%;
padding:10px 0px 0px 0px;
margin:10px 10px;
}

}

@media (max-width: 440px) {

table {
width:100%;
}





}