@charset "UTF-8";

/*--------------------------------------------------
 *Google Fonts 読み込み*
 -------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Satisfy);


/* ---------------------------------------------------------
	Browser Reset CSS
--------------------------------------------------------- */
body, ul, ol, li, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, pre, code, form, fieldset, legend, p, blockquote, table, th, td {
    margin: 0;
    padding: 0;
}

body {
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Verdana, Helvetica, sans-serif;
    vertical-align: middle;
}

img {
    border: 0;
    vertical-align: top;
}

ul, dl, ol {
    text-indent: 0;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

/* input,textarea,select {font-family: inherit; font-size: inherit; font-weight:inherit;} */
* html input, * html textarea, * html select {
    font-size: 100%;
}

*:first-child + html + input, *:first-child html + textarea, *:first-child + html select {
     font-size: 100%;
 }

table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: inherit;
}

caption {
    text-align: left;
}

pre, code, kbd, samp, tt {
    font-family: monospace;
}

* html pre, * html code, * html kbd, * html samp, * html tt {
    font-size: 100%;
    line-height: 100%;
}

*:first-child + html pre, *:first-child html + code, *:first-child html + kbd, *:first-child + html + samp, *:first-child + html tt {
    font-size: 108%;
    line-height: 100%;
}

input, select, textarea {
    font-size: 100%;
}

input {
    outline: none;
}

figure {
    margin: 0;
    padding: 0;
}



/*............................
    clearfix
............................*/
.clearfix,
.header,
#g-nav-05 ul {
    *zoom: 1;
}

.clearfix:after,
.header:after,
#g-nav-05 ul:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}



/*............................
    Layout
............................*/
body {
    background-image: url("../img/back.jpg");
    background-repeat: repeat-x;
    font-size: 14px;
    position: relative;
    -ms-overflow-x: hidden;
    overflow-x: hidden;
}

.wrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto 50px;
    
}

.header {
    width: 100%;
    margin: 0 0 0 0;
    text-align: center;
    position: relative;
    background-image: url("../img/txture02.png");
    border-top: 8px #059f3f solid;
    
}

.main {
    width: 100%;
    height: auto;
    margin: 0 0 2em 0;
    float: center;
    background: #e6edc9;
    text-align: center;
}

.footer {
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    width: 100%;                 /* 横幅100%　*/
    max-width: 960px;
    margin: 0 auto;
    clear: both;
    color: #fff;
    background-image: url("../img/txture02.png");
    text-align: center;
}

.footer h2 {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 1empx;
}

.footer p {
  font-size: 0.8em;
  margin-bottom: 1empx;
}

.main, .main-right, .footer {
    padding: 0.5em 0;
}


div.sns {
	width: 100px;
	position: absolute;
	top: 40px;
	right:0px;
	clear: both;
}





/* ---------------------------------------------------------
	画面幅640px以下の場合のスタイル
--------------------------------------------------------- */

#g-nav-05 {
    width: 100%;
    margin: 0 auto;
    background-image: url("../img/txture02.png");
    clear: both;
}

#g-nav-05 ul {
    position: relative;
}

#g-nav-05 ul li {
    width: 100%;
    padding: 0;
    list-style: none;
}

#g-nav-05 ul li a {
    display: block;
    padding: 20px 0 20px 1em;
    text-align: left;
    color: #fff;
}

#g-nav-05 ul li a:link,
#g-nav-05 ul li a:visited {
    text-decoration: none;
}

#g-nav-05 ul li a:hover,
#g-nav-05 ul li a:active {
    background: #fff;
    text-decoration: none;
    color: #3D272B;
    font-weight: bold;
}

#g-nav-05 ul li a span {
    width: 21px;
    height: 17px;
    display: inline-block;
    margin: 0 0.3em 0 0;
    background-repeat: no-repeat;
    background-position: left center;
}

#g-nav-05 ul li .mega-menu {
    visibility: hidden;
}

#g-nav-05 ul li .mega-menu .cols-3 {
    display: none;
}

#g-nav-05 ul li .mega-menu .second-level-nav {
    display: none;
}

#g-nav-05 ul li.home a span {
    background-image: url("../images/icon-home-white.png");
}

#g-nav-05 ul li.home:hover span,
#g-nav-05 ul li.home:active span {
    background-image: url("../images/icon-home-red.png");
}

#g-nav-05 ul li.flower a span {
    background-image: url("../images/icon-flower-white.png");
}

#g-nav-05 ul li.flower:hover span,
#g-nav-05 ul li.flower:active span {
    background-image: url("../images/icon-flower-red.png");
}

#g-nav-05 ul li.gift a span {
    background-image: url("../images/icon-gift-white.png");
}

#g-nav-05 ul li.gift:hover span,
#g-nav-05 ul li.gift:active span {
    background-image: url("../images/icon-gift-red.png");
}

#g-nav-05 ul li.map a span {
    background-image: url("../images/icon-map-white.png");
}

#g-nav-05 ul li.map:hover span,
#g-nav-05 ul li.map:active span {
    background-image: url("../images/icon-map-red.png");
}

#g-nav-05 ul li.access a span {
    background-image: url("../images/icon-access-white.png");
}

#g-nav-05 ul li.access:hover span,
#g-nav-05 ul li.access:active span {
    background-image: url("../images/icon-access-red.png");
}

#g-nav-05 ul li.shop a span {
    background-image: url("../images/icon-shop-white.png");
}

#g-nav-05 ul li.shop:hover span,
#g-nav-05 ul li.shop:active span {
    background-image: url("../images/icon-shop-red.png");
}

#g-nav-05 ul li.contact a span {
    background-image: url("../images/icon-contact-white.png");
}

#g-nav-05 ul li.contact:hover span,
#g-nav-05 ul li.contact:active span {
    background-image: url("../images/icon-contact-red.png");
}

#menu {
    width: 25px;
    height: 25px;
    display: block;
    float: right;
    margin: 8px;
    background-image: url("../images/menu-btn.png");
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

#menu.on {
    background-image: url("../images/menu-btn-on.png");
}



/* コンセプト（小）
-----------------------------------------*/
.concept article {
margin: 0 10px 2.5em ;
}
.concept article h1 {
border-bottom: 2px solid #3D272B;
color: #3D272B;
font-size: 18px;
padding: 5px 0px 3px;
margin: 0em 0 0;
}

.concept  h2 {
border-bottom: 2px solid #3D272B;
color: #3D272B;
font-size: 1.2em;
margin: 1em 0 0.5em 0em;
text-shadow: #FFF 0 1px 0;
padding: 5px 5px 5px 28px;
color: #3f312b;
background: url(../img/heading.png) left no-repeat;
}


.concept article p {
font-size: 14px;
line-height: 1.5;
padding: 0 0px;
margin: 0em 0 0 1em;
}

.concept article img {
margin:  auto;
width: 100%;
height: 100%;
}

.concept article .tb-right-ceo {
margin: 0em 1em 0 1em ;
padding: 0 0px 1em 0px;
width: 152px;
height: 190px;
background: url(../img/yoshimuramasataka.jpg) left no-repeat;
	background-position: 0% 0%;
	display: inline-block;
	text-indent: -9999px;
    
}

/* company.html コンセプト（小）
-----------------------------------------*/
.concept2 article {
margin: 0 0 2.5em ;
}

.concept2 article img {
margin:  auto;
width: 100%;
height: 100%;
}

 /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ロゴ小 */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.logo h1	{margin: 10px 0 0 0%;
	line-height: 1;}

.logo h1 a	{color: #000;
	text-decoration: none;}

.logo span	{width: 200px;
	height: 57px;
	background-image: url(../img/logos.png);
	background-size: 100% 100%;
	background-position: 0% 0%;
	display: inline-block;
	text-indent: -9999px;}

/*--- お知らせと教室案内（小） ---*/
.wrap {
  width: 95%;
  margin: 20px auto;
padding-bottom: 5em;
}

.newsBox {
  
width: 98%;
float: none;
margin: 10px  auto;
background-color:rgba(255,255,255,0.55);

}

.infoBox {
 width: 98%;
float: none;
margin: 10px  auto;
background-color:rgba(255,255,255,0.55);
}

.newsBox, .infoBox {
  padding: 1%;
}
.newsBox h4, .infoBox h4 {
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 5px double #3f312b;
  padding-bottom: 5px;
  margin-bottom: 10px;
  text-shadow: #FFF 0 1px 0;
    padding: 5px 5px 5px 28px;
	color: #3f312b;
	background: url(../img/heading.png) left no-repeat;
}

.newsBox dt {
 float: none;
    width: auto;
    border: none;
    font-weight: bold;
}

.newsBox dd {
  margin-left: 0;
}

.newsBox dt, .newsBox dd {
  padding: 5px;
  border-bottom: 1px dashed #94846a;
}

.infoBox dl {
  padding: 10px;
    
}

.infoBox dt, .infoBox dd {
  padding: 3px 3px 3px 10px;
}

.infoBox dt {
  font-weight: bold;
}

.infoBox dd {
  padding-left: 1em;
  display:block;
}

.infoBox i {
  margin-right: 10px;
  font-size: 1.2em;
}

/* 記事内容 マップ
-----------------------------------------*/
main article .map {
position: relative;
padding-bottom: 75%; /*縦横比*/
height: 0;
overflow: hidden;
}

main article .map iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
 
/* ---------------------------------------------------------
	画面幅640px以上の場合のスタイル
--------------------------------------------------------- */

@media screen and (min-width: 640px) {
    #g-nav-05 {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
       background-image: url("../img/txture02.png");
    }
    #g-nav-05 ul li {
        width: 18%;
        padding: 10px 1%;
        float: left;
    }
    #g-nav-05 ul li a {
        padding: 6px 0;
        text-align: center;
    }
    #g-nav-05 ul li:hover a,
    #g-nav-05 ul li:active a {
        color: #3D272B;
        background: #fff;
        font-weight: bold;
    }
    #g-nav-05 ul li .mega-menu {
        width: 96%;
        padding: 2%;
        background: #3D272B;
        color: #FFF;
        font-size: 0.9em;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 74px;
        left: 0;
        text-align: left;
    }
    #g-nav-05 ul li:hover .mega-menu,
    #g-nav-05 ul li:active .mega-menu {
        opacity: 1;
        visibility: visible;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        top: 74px;
        left: 0;
    }
    #g-nav-05 ul li:hover .mega-menu li a,
    #g-nav-05 ul li:active .mega-menu li a {
        color: #3D272B;
        border-bottom: none;
        font-weight: normal;
    }
    #g-nav-05 ul li:hover .mega-menu .second-level-nav li,
    #g-nav-05 ul li:active .mega-menu .second-level-nav li {
        padding: 0;
    }
    #g-nav-05 ul li .mega-menu .cols-3 {
        width: 75%;
        float: left;
        display: block;
    }
    #g-nav-05 ul li .mega-menu .cols-3 li {
        width: 30%;
        margin: 0 3% 0 0;
        padding: 0;
        float: left;
        display: block;
        border: none;
    }
    #g-nav-05 ul li .mega-menu .cols-3 li img,
    #g-nav-05 ul li .mega-menu .cols-3 li p {
        margin: 0 0 0.5em 0;
    }
    #g-nav-05 ul li .mega-menu .cols-3 li a {
        padding: 0.5em;
        background: #f2db38;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        color: #333;
        font-weight: bold;
    }
    #g-nav-05 ul li .mega-menu .cols-3 li a span {
        width: 15px;
        height: 12px;
        display: inline-block;
        background: url("../images/icon-arrow-gry.png") no-repeat;
        vertical-align: middle;
    }
    #g-nav-05 ul li .mega-menu .cols-3 li a:hover,
    #g-nav-05 ul li .mega-menu .cols-3 li a:active {
        background: #E6A822;
        border: none;
        color: #FFF;
    }
    #g-nav-05 ul li .mega-menu .cols-3 li a:hover span,
    #g-nav-05 ul li .mega-menu .cols-3 li a:active span {
        background: url("../images/icon-arrow-white.png") no-repeat;
    }
    #g-nav-05 ul li .mega-menu .cols-3:hover a,
    #g-nav-05 ul li .mega-menu .cols-3:active a {
        border: none;
        color: #4C4C4C;
    }
    #g-nav-05 ul li .mega-menu .second-level-nav {
        width: 25%;
        float: right;
        display: block;
    }
    #g-nav-05 ul li .mega-menu .second-level-nav li {
        width: 100%;
        border-bottom: 1px dotted #fff;
    }
    #g-nav-05 ul li .mega-menu .second-level-nav li a {
        text-align: left;
        color: #FFF;
        padding: 1em 0 1em 20px;
        background: url("../images/icon-arrow-white.png") no-repeat left center;
    }
    #g-nav-05 ul li .mega-menu .second-level-nav li a:hover,
    #g-nav-05 ul li .mega-menu .second-level-nav li a:active {
        text-decoration: underline;
    }
    #menu {
        display: none;
    }
    .logo h1	{margin: 0;
	line-height: 1;}

.logo h1 a	{color: #000;
	text-decoration: none;}

.logo span	{width: 350px;
	height: 100px;
	background-image: url(../img/logo.png);
	background-size: 100% 100%;
	background-position: 0% 0%;
	display: inline-block;
	text-indent: -9999px;}


/*--- お知らせと教室案内 ---*/
.wrap {
  width: 100%;
  margin: 20px auto;
padding-bottom: 5em;
}

.newsBox {
  width: 50%;
  float: left;
}

.infoBox {
  width: 45%;
  float: right;
}

.newsBox, .infoBox {
  padding: 1%;   
}
.newsBox h4, .infoBox h4 {
  font-size: 1.2em;
  font-weight: bold;
  border-bottom: 5px double #3f312b;
  padding-bottom: 5px;
  margin-bottom: 10px;
		text-shadow: #FFF 0 1px 0;
		padding: 5px 5px 5px 28px;
		color: #3f312b;
		background: url(../img/heading.png) left no-repeat;
}

.newsBox dt {
    float: none;
    width: auto;
    border: none;
    font-weight: bold;
}

.newsBox dd {
  margin-left: 0;
}

.newsBox dt, .newsBox dd {
  padding: 5px;
  border-bottom: 1px dashed #94846a;
}

.infoBox dl {
  padding: 10px;
}

.infoBox dt, .infoBox dd {
  
}

.infoBox dt {
  font-weight: bold;
}

.infoBox dd {
  padding-left: 1em;
  display:block;
}

.infoBox i {
  margin-right: 10px;
  font-size: 1.2em;
}  

/* コンセプト 記事内容
-----------------------------------------*/
.concept article {
margin: 0 0 2.5em;
}
.concept article:after {
content: "";
display: block;
clear: both;
}
.concept article h1 {
font-size: 22px;
margin-bottom: 15px;
}
/* コンセプト 記事内容 2カラム
-----------------------------------------*/
.concept article.tb-2column .tb-left {
float: left;
width: 48%;
}

.concept article.tb-2column .tb-right {
float: right;
width: 48%;
}

    
.concept article.tb-2column .tb-center {
float: left;
margin: 0 auto;
width: 100%;
}

.concept article .tb-right-ceo {
float: left;
margin: 0em ;
width: 152px;
height: 190px;
background: url(../img/kyoshimuramasataka.jpg) right no-repeat;
	background-position: 0% 0%;
	display: inline-block;
	text-indent: -9999px;
}




/* タブレット 記事内容 マップ
-----------------------------------------*/
main article .map {
float: left;
width: 60%;
padding-bottom: 45%; /*縦横比*/
}
main article .map + * {
margin-top: 10em;
}    

}
/* ---	640以上 end --- */