@charset "UTF-8";

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

*   Structure CSS
*   Since:2022-01
*   Editor:ricostyle

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


/* ==========================================================================
   Media Queries
   ========================================================================== */
@media print,screen and (min-width:961px) {
/* PC用のcssを記述  横幅980px固定のデザイン */

/* COMMON */
#container{height:auto;height:100%;width:100%;overflow: hidden;posiition:relative;margin:0;padding:0;}
#contents{position:relative;width:100%;overflow:hidden;border-top:1px solid #544143;}
.wrap{width:980px;margin:0 auto;position:relative;}
h3{font-size:1.8em;padding-bottom:1.8em;}
h4{font-weight:bold;}

/* HEADER */
#header{width:100%;margin:0 auto;border-bottom:1px solid #FFF;text-align:center;background:#544143;}
#header h1{z-index:1000000;position:relative;display:inline-block;padding:30px 0 40px;}
#header h1:hover{filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}

/* FOOTER */
#footer{background:#544143;color:#B9AEAE;font-size:0.85em;margin:0;text-align:center;padding:20px 0 40px;}
#footer p#copy{padding:0;}

/* PAGE UP */
#page-top {display:inline;font-size:0;}
#page-top a{display:block;width:41px;height:77px;background:url(../img/bt_up.png) no-repeat center center;display:block;text-indent:-9999px;position:fixed;bottom:30px;right:30px;}
#page-top a:hover{filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;}

/* LESSON BOOKING */
#booking {display:inline;}
#booking a{display:block;width:auto;height:auto;padding:30px 30px;background:#CC3366;color:#FFF;position:fixed;bottom:20px;left:20px;z-index:1000000000;text-decoration:none;}
#booking a:hover{background-color: #DA698D;}



/*--- Message ---*/
#Message{background:url(../img/bk_top.jpg) no-repeat center center;padding:5em 0 8em;}
#Message p.catch{line-height:2.8em;font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;color:#7B6064;font-size:1.05em;}
#Message ul{display:block;margin:0 auto;padding:1.5em 0 0;}
#Message ul li{display:inline-block;padding:0 5px;}
#Message ul li a:hover{filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}


/*--- Profile ---*/
.block01{background:#EFACA7;color:#FFF;padding:5em 0;}
.block01 .wrap h2{margin-bottom:2em;text-align:left;}
.block01 .wrap p{text-align:left;line-height:2.3em;padding-bottom:1.5em;width:500px;}
.block01 .wrap .fb_box{float:right;}
.block01 .wrap .fb_box iframe{width:420px;height:500px;} 
.block01 .wrap .miki_photo{clear:both;padding:1.5em 0 0;}
.block01 .wrap .miki_photo img{height:270px;padding:0 1em;}


/*--- Color Style Shopping ---*/
.block02{background:url(../img/line01.png) repeat-x center 1px;padding:6em 0 2em;text-align:left;}
.block02 .wrap h4{line-height:2em;}
.block02 .wrap p,.block02 .wrap ul{line-height:2em;padding-bottom:2em;}
.block02 .wrap ul.case li{list-style-position: inside;list-style-type: disc;}
.block02 .wrap ul.sample li{list-style-position: inside;list-style-type: circle;}
.block02 div.photo{margin:0 auto 3em;}
.block02 div.photo img{width:24%;padding:4px 1px;}
.block02 dl{margin-top:1em;}
.block02 dl dt{border-bottom:1px dotted #917777;background:url(../img/q.png) no-repeat left top;padding:0 0 7px 30px;}
.block02 dl dd{margin-bottom:1em;background:url(../img/a.png) no-repeat left 8px;padding:7px 0 1.5em 30px;}


/*--- Menu ---*/
#block03{background:#F1E8E7;padding:5em 0;}
#block03 div.menu{background:#FFF;}
#block03 div.menu img{width:45%;padding:10px;max-width:520px;}


/*--- Contact ---*/
#block04{background:#F9F7F7;border-top:2px solid #FFF;border-bottom:2px solid #FFF;padding:5em 0 4em;}
#block04 p{line-height:2.5em;}
#block04 .ftPink{color:#C97976;}
#block04 .qrcode img{margin:20px;}

}




@media only screen and (min-width:520px) and (max-width:960px) {
/*タブレット用のcss*/

/* COMMON */
#container{posiition:relative;height:auto;height:100%;width:100%;overflow: hidden;margin:0;padding:0;}
#contents{position:relative;width:100%;max-width:960px;overflow:hidden;border-top:1px solid #544143;}
.wrap{width:98%;margin:0 auto;position:relative;}
h3{font-size:1.8em;padding-bottom:1.8em;}
h4{font-weight:bold;}

/* HEADER */
#header{width:100%;margin:0 auto;border-bottom:1px solid #FFF;text-align:center;background:#544143 url(../img/line00.gif) repeat-x bottom center;position:fixed;top:0;right:0;z-index:1000000;}
#header h1{z-index:1000000000;position:relative;padding:20px 0;}
#header h1 img{width:50%;max-width:298px;display:inline-block;}
#header h1 a:hover{filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}

/* FOOTER */
#footer{background:#544143;color:#B9AEAE;font-size:0.8em;margin:0;text-align:center;padding:40px 0;}
#footer p#copy{padding:0;}

/* PAGE UP */
#page-top {display:inline;font-size:0;}
#page-top a{display:block;width:41px;height:77px;background:url(../img/bt_up.png) no-repeat center center;text-indent:-9999px;position:fixed;bottom:20px;right:20px;}
#page-top a:hover{filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;}


/* LESSON BOOKING */
#booking {display:inline;}
#booking a{display:block;width:auto;height:auto;padding:20px 30px;background:#CC3366;color:#FFF;position:fixed;bottom:20px;left:20px;z-index:1000000000;text-decoration:none;}
#booking a:hover{background-color: #DA698D;}

/* 使用してない */
.bookinglesson{display:block;padding-top:30px;text-align:center;}
.bookinglesson a{margin:0 auto;display:block;width:70%;height:auto;padding:20px 0;background:#CC3366;color:#FFF;}
.bookinglesson a:hover{background-color: #DA698D;}


/*--- Message ---*/
#Message{background:url(../img/bk_top.jpg) no-repeat center center;margin-top:50px;padding:3em 0;background-size:contain;}
#Message p.catch{line-height:2.5em;font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;color:#7B6064;font-size:1em;}
#Message ul{display:block;margin:0 auto;padding:1.5em 0 0;}
#Message ul li{display:inline-block;padding:0 5px;}
#Message ul li a:hover{filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}


/*--- Profile ---*/
.block01{background:#EFACA7;color:#FFF;padding:5em 0;margin:0 auto;}
.block01 .wrap h2{margin-bottom:2.5em;}
.block01 .wrap p{line-height:2em;font-size:0.95em;padding-bottom:1.5em;}
.block01 .wrap .fb_box{display:block;width:100%;margin:0 auto 2em;text-align:center;}
.block01 .wrap .fb_box iframe{width:auto;min-width:420px;height:500px;display:inline-block;}
.block01 .wrap .miki_photo{padding:0;margin:0 auto;}
.block01 .wrap .miki_photo img{width:32%;padding:0 1px;}


/*--- Color Style Shopping ---*/
.block02{background:url(../img/line01.png) repeat-x center 1px;padding:5em 0 1em;text-align:left;}
.block02 .wrap h4{line-height:2em;}
.block02 .wrap p,.block02 .wrap ul{line-height:2em;padding-bottom:2em;}
.block02 .wrap ul.case li{list-style-position: inside;list-style-type: disc;}
.block02 .wrap ul.sample li{list-style-position: inside;list-style-type: circle;}
.block02 div.photo{margin:0 auto 2em;text-align:center;}
.block02 div.photo img{width:48%;padding:4px 1px;}
.block02 dl{margin-top:1em;font-size:0.9em;line-height:1.5em;}
.block02 dl dt{border-bottom:1px dotted #917777;background:url(../img/q.png) no-repeat left top;padding:0 0 7px 30px;}
.block02 dl dd{margin-bottom:1em;background:url(../img/a.png) no-repeat left 8px;padding:7px 0 1.5em 30px;}


/*--- Menu ---*/
#block03{background:#F1E8E7;padding:5em 0;}
#block03 div.menu{text-align:center;margin:0 auto;}
#block03 div.menu img{width:90%;max-width:520px;margin-bottom:20px;}


/*--- Contact ---*/
#block04{background:#F9F7F7;border-top:2px solid #FFF;border-bottom:2px solid #FFF;padding:4em 0 2em;}
#block04 p{line-height:2.5em;}
#block04 .ftPink{color:#C97976;}
#block04 .qrcode img{margin:20px;}


}


@media screen and (max-width:519px) {
/*スマホ用のcssを記述*/

/* COMMON */
#container{posiition:relative;height:auto;height:100%;width:100%;overflow: hidden;margin:0;padding:0;}
#contents{position:relative;width:100%;max-width:519px;overflow:hidden;border-top:1px solid #544143;}
.wrap{width:96%;margin:0 auto;position:relative;}
h3{font-size:1.8em;padding-bottom:1.8em;line-height:1.2em;}
h4{font-weight:bold;}

/* HEADER */
#header{width:100%;margin:0 auto;border-bottom:1px solid #FFF;text-align:center;background:#544143 url(../img/line00.gif) repeat-x bottom center;position:fixed;top:0;right:0;z-index:1000000;}
#header h1{z-index:1000000000;position:relative;padding:20px 0;}
#header h1 img{width:50%;max-width:298px;display:inline-block;}
#header h1 a:hover{filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}

/* FOOTER */
#footer{background:#544143;color:#B9AEAE;font-size:0.8em;line-height:1.5em;margin:0;text-align:center;padding:40px 0;}
#footer p#copy{padding:0;}

/* PAGE UP */
#page-top {display:inline;font-size:0;}
#page-top a{display:block;width:41px;height:77px;background:url(../img/bt_up.png) no-repeat center center;text-indent:-9999px;position:fixed;bottom:10px;right:10px;}
#page-top a:hover{filter:alpha(opacity=80);-moz-opacity: 0.8;opacity: 0.8;}


/* LESSON BOOKING */
#booking {display:inline;}
#booking a{display:block;width:65%;height:auto;padding:15px 5px;background:#CC3366;color:#FFF;position:fixed;bottom:10px;left:0px;z-index:1000000000;text-decoration:none;}
#booking a:hover{background-color: #DA698D;}


/*--- Message ---*/
#Message{background:url(../img/bk_top.jpg) no-repeat center center;margin-top:50px;padding:3em 0;background-size:contain;}
#Message p.catch{width:96%;margin:0 auto;line-height:2.2em;font-family:"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;color:#7B6064;font-size:0.95em;}
#Message ul{width:95%;margin:0 auto;display:block;margin:0 auto;padding:1.5em 0 0;line-height:1.5em;}
#Message ul li{display:inline-block;padding:0 5px;}
#Message ul li a:hover{filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}


/*--- Profile ---*/
.block01{background:#EFACA7;color:#FFF;padding:5em 0;}
.block01 .wrap h2{margin-bottom:2em;}
.block01 .wrap p{line-height:2em;font-size:0.95em;padding-bottom:1.5em;}
.block01 .wrap .fb_box{display:block;width:100%;max-width:500px;margin:0 auto 2em;text-align:center;}
.block01 .wrap .fb_box iframe{width:auto;min-width:300px;height:420px;display:inline-block;}

.block01 .wrap .miki_photo{padding:0;margin:0 auto;}
.block01 .wrap .miki_photo img{width:80%;max-width:400px;padding:0 0 10px 0;}


/*--- Color Style Shopping ---*/
.block02{background:url(../img/line01.png) repeat-x center 1px;padding:5em 0 1em;text-align:left;}
.block02 .wrap h4{line-height:2em;}
.block02 .wrap p,.block02 .wrap ul{line-height:2em;padding-bottom:2em;}
.block02 .wrap ul.case li{list-style-position: inside;list-style-type: disc;}
.block02 .wrap ul.sample li{list-style-position: inside;list-style-type: circle;}
.block02 div.photo{margin:0 auto 2em;text-align:center;}
.block02 div.photo img{width:48%;padding:4px 1px;}
.block02 dl{margin-top:1em;font-size:0.9em;line-height:1.5em;}
.block02 dl dt{border-bottom:1px dotted #917777;background:url(../img/q.png) no-repeat left top;padding:0 0 7px 30px;}
.block02 dl dd{margin-bottom:1em;background:url(../img/a.png) no-repeat left 8px;padding:7px 0 1.5em 30px;}


/*--- Menu ---*/
#block03{background:#F1E8E7;padding:5em 0;}
#block03 div.menu{text-align:center;margin:0 auto;}
#block03 div.menu img{width:90%;max-width:520px;margin-bottom:20px;}


/*--- Contact ---*/
#block04{background:#F9F7F7;border-top:2px solid #FFF;border-bottom:2px solid #FFF;padding:4em 0 1em;}
#block04 p{line-height:2.5em;margin-bottom:1.5em;}
#block04 .ftPink{color:#C97976;}
#block04 .qrcode{margin:0 auto;text-align:center;display:inline-block;}
#block04 .qrcode img{display:block;width:100%;max-width:143px;margin:0 0 20px;}

}