@charset "utf-8";

/* #################### 全体設定 #################### */
body,html {
width: 100%;
height: 100%;}
body {
margin: 0px;
padding: 0px;
color: #333333;    /*全体の文字色*/
font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-size: 15px;
letter-spacing: 0.05em;
line-height: 2;
ackground: #fff url(../images/bg.jpg) repeat center center/150px;
-webkit-text-size-adjust: none;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {
margin: 0px;
padding: 0px;
font-size: 100%;
font-weight: normal;}
ul {list-style-type: none;}
ol {
padding-left: 40px;
padding-bottom: 15px;}
img {
border: none;
max-width: 100%;
height: auto;
text-align: center;
vertical-align: middle;}
table {
border-collapse: collapse;
font-size: 100%;
border-spacing: 0;}
iframe {width: 100%;}

a {
color: #666666;
transition: 0.8s;}
a:hover {
color: #622121;
text-decoration: none;}

/* #################### コンテナ設定 #################### */
#container {
width: 100%;
height: 100%;}

/* #################### メインイラスト #################### */
#mainimg {
text-indent: -9999px;
position: fixed;
top: 0px;
z-index: -1;
width: 100%;
height: 100%;
background: url(../images/bg_main_s.jpg) no-repeat right bottom;
background: url(../images/bg_main.jpg) no-repeat right top / cover;}

/* #################### ヘッダー #################### */
header {
height: 93%;}

/* #################### メニュー #################### */
header #top img {
width: 20%;
border-radius: 50%;
position: fixed;
left: 5%;
top: -40px;}
/*アニメーションのフレーム設定*/
@keyframes menu1 {
0% {opacity: 0;}
100% {opacity: 1;}
}
#top,#menu1,#menu2,#menu3,#menu4 {
animation-name: menu1;/*上のアニメーションで指定しているkeyframesの名前（menu1）*/
animation-duration: 5S;/*アニメーションの実行時間。秒。*/
animation-fill-mode: both;/*アニメーションの完了後、最後のキーフレームを維持する*/}
#menubar img {
border-radius: 50%;}
/*マウスオン時*/
header #logo a:hover, #menubar a:hover {
opacity: 0.8;/*半透明の設定。0.8は透明度80%の事。*/}
/*menu１(各コースのご案内)*/
#menu1 {
position: fixed;
left: 15%;/*ウィンドウに対して左から15%の場所に配置*/
top: 27%;/*ウィンドウに対して上から27%の場所に配置*/
width: 10%;/*幅*/
animation-delay: 0.4s;/*0.2秒だけ遅れてアニメーションをスタートさせる設定*/}
/*menu2(料金)*/
#menu2 {
position: fixed;    /*画面に対して固定表示*/
left: 4%;            /*ウィンドウに対して左から4%の場所に配置*/
top: 40%;            /*ウィンドウに対して上から40%の場所に配置*/
width: 12%;            /*幅*/
animation-delay: 0.6s;    /*0.4秒だけ遅れてアニメーションをスタートさせる設定*/}
/*menu3(店舗)*/
#menu3 {
position: fixed;    /*画面に対して固定表示*/
left: 11%;            /*ウィンドウに対して左から11%の場所に配置*/
top: 60%;            /*ウィンドウに対して上から60%の場所に配置*/
width: 9%;            /*幅*/
animation-delay: 0.8s;    /*0.6秒だけ遅れてアニメーションをスタートさせる設定*/}
/*menu4(会社概要)*/
#menu4 {
position: fixed;    /*画面に対して固定表示*/
left: 7%;            /*ウィンドウに対して左から7%の場所に配置*/
top: 75%;            /*ウィンドウに対して上から75%の場所に配置*/
width: 6%;            /*幅*/
animation-delay: 1.0s;    /*0.8秒だけ遅れてアニメーションをスタートさせる設定*/}


/* #################### コンテンツ #################### */
/*コンテンツ共通*/
.contents {
overflow: hidden;
padding: 0 4% 50px 30%;}
/*bg1スタイルのついたコンテンツ*/
.contents.bg1 {
background: url(../images/bg1.jpg);
background: url(../images/bg1.jpg) repeat center top/ 12%;}
/*bg2スタイルのついたコンテンツ*/
.contents.bg2 {
background: url(../images/bg2.jpg);
background: url(../images/bg2.jpg) repeat center top/ 12%;}
.contents.bg3 {
background: url(../images/bg3.jpg);
background: url(../images/bg3.jpg) repeat center top/ 12%;}
/*bg4スタイルのついたコンテンツ*/
.contents.bg4 {
background: url(../images/bg4.jpg);
background: url(../images/bg4.jpg) repeat center top/ 12%;}

/*h2見出し*/
.contents h2 {
font-size: 40px;
margin-bottom: 20px;
text-align: center;
letter-spacing: 0.2em;
color: #000000;}
/*h2見出しの上の装飾*/
.contents h2::before {
content: "＊";
display: block;
text-shadow: 20px 10px 0px rgba(255,255,255,0.5);}
/*h2見出し内のspanタグ*/
.contents h2 span {
display: block;
font-size: 12px;}

/*h3見出し*/
.contents h3 {
margin-bottom: 20px;
letter-spacing: 0.1em;
background: #ffffff;
background: rgba(255,255,255,0.3);
text-align: center;
border-radius: 30px;
padding: 20px 20px;}

/*段落タグ*/
.contents p {
padding: 0 30px 20px;}
/*段落タグが続いた場合の設定*/
.contents p + p {
margin-top: -5px;}


/* #################### フッター #################### */
footer {
clear: both;
text-align: center;
padding: 20px;
background: url(../images/bg.jpg);
background: url(../images/bg.jpg) repeat center top/ 12%;}
footer a {text-decoration: none;}
footer .pr {display: block;}

/* #################### テーブル #################### */
/*ta1設定*/
.ta1 {
width: 100%;
margin: 0 auto 30px}
.ta1 td, .ta1 th {
padding: 10px 15px;
word-break: break-all;
text-align: center;}
/*行の設定*/
.ta1 tr {
background: url(../images/line1.png) repeat-x left bottom;}
/*テーブル１行目に入った見出し部分*/
.ta1 th.tamidashi {
width: auto;
text-align: center;
background: url(../images/line1.png) repeat-x left top,rgba(255,255,255,0.2);}
/*ta1の左側ボックス*/
.ta1 th {
width: 140px;
text-align: right;}
/*左側ボックスに画像を入れた場合の設定*/
.ta1 th img {
width: 100%;}


/* #################### その他 #################### */
.look {
background: #e5afa8;
background: rgba(0,0,0,0.1);
padding: 5px 10px;
border-radius: 4px;
text-align: center;
font-weight: bold;
font-size: 18px;
letter-spacing: 0.08em;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.p0 {padding:0 !important;}
.clear {clear: both;}
ul.disc {
padding: 0em 25px 15px;
list-style: disc;}
.color1, .color1 a {color: #cd6052 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.w50 {overflow: hidden;width: 50%;}
.fl {float: left;}
.fr {float: right;}
.big1 {font-size: 50px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}


/* #################### 800px以下 #################### */
@media screen and (max-width:800px){
body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
.big1 {font-size: 24px;}
.w50 {overflow: hidden;width: auto;}
.fl {float: none;}
.fr {float: none;}
}
/* #################### 480px以下 #################### */
@media screen and (max-width:480px){
body {
font-size: 12px;
line-height: 1.5;}
/*メニュー*/
header #top img {
position: fixed;
left: 2%;
top: 10px;}
#menu1,#menu2,#menu3 {width: 15%;}
#menu1 {
position: fixed;
left: 4%;
top: 20%;}
#menu2 {
position: fixed;
left: 4%;
top: 35%;}
#menu3 {
position: fixed;
left: 4%;
top: 50%;}
#menu4 {
position: fixed;
left: 6.5%;
top: 65%;
width: 10%;}

/*コンテンツ共通*/
.contents {padding: 0 4% 50px 25%;}
/*h2見出し*/
.contents h2 {
font-size: 20px;
letter-spacing: normal;}
/*h2見出し内のspanタグ*/
.contents h2 span {
font-size: 10px;
letter-spacing: 0.02em;}
/*段落タグ*/
.contents p {
padding: 0 0 20px;}

/*テーブル（ta1）*/
/*ta1設定*/
.ta1, .ta1 td, .ta1 th {padding: 5px;}
/*ta1の左側ボックス*/
.ta1 th {width: 100px;}
/*その他*/
.ws,.wl {width: 94%;}
.big1 {font-size: 16px;}
.sh {display:block;}
.pc {display:none;}
}