@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@import url(https://fonts.googleapis.com/earlyaccess/mplus1p.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@import url(https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css);

/*============================
common
============================*/

strong {font-weight: bold;}

/*============================
layout
============================*/

html {
  height: 100%;
}

body {
	color: #333;
	font-size: 16px;
    font-family: "Rounded Mplus 1c";
	/*font-family: 'Sawarabi Mincho','Open Sans','Mplus 1p','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;*/
	margin: auto;
	text-align: center;
	background: #fff;
    background: url(../img/bg_alice_sp.png);
}

/*a {
	color: #000000;
	text-decoration:  none;
}*/

small {
	font-size: 88%;
}

.midashi1 {
    font-size: 15px;
    font-weight: bold;
    margin: 0.5em auto;
}

/*============================
hr
============================*/

hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}

.fade {
  height: 1px;
  background-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5) 50%,
    hsla(0, 0%, 100%, 0) 100%);
}
 
.fade-2 {
  border-width: 0 0 2px;
  border-image: linear-gradient(
    90deg,
    hsla(100, 100%, 100%, 0),
    hsla(100, 100%, 100%, 0.5) 50%,
    hsla(1000, 100%, 100%, 0) 100%) 0 0 100%;
  border-style: solid;
}

hr {
  height: 1px;
  background: #fae5e4;
  background-image: -webkit-linear-gradient(left, #fae5e4, #c5004c, #fae5e4);
  background-image: -moz-linear-gradient(left, #fae5e4, #c5004c, #fae5e4);
  background-image: -ms-linear-gradient(left, #fae5e4, #c5004c, #fae5e4);
  background-image: -o-linear-gradient(left, #fae5e4, #c5004c, #fae5e4);
}

/*============================
main
============================*/

.main {
    margin: auto;
    height: 100%;
    text-align: center;
    background: RGB( 255, 255, 255, 0.6 );
}

/*============================
menu
============================*/

#menu {
    background: RGB( 255, 216, 229,0.5 );
}

#menu h1 {
    font-size: 2em;
    border-top: solid #fff 1px;
    border-bottom: solid #fff 1px;
}

#menu .menu_title {
    background: RGB( 195, 75, 127 );
    color: cornsilk;
    margin: 1em auto;
    padding: 5px 0;
    
}

#menu ul {
	position: fixed;
	width: 300px;
	height: 100%;
	z-index: 999;
    border-top: solid #fff 1px;
}

#menu li {
    font-size: 1.5em;
    padding: 0.5em;
    border-bottom: solid #fff 1px;
    background: rgba(247, 153, 194, 0.8);
    box-shadow: 0px 0px 15px -5px #777777;
    border-radius: 8px;
}

#menu li a {
    text-decoration: none;
    display: block;
    color: floralwhite;
    background-size: 32px;

    text-shadow: #000 1px 1px 1px;
}

.menu_naw {
    background-color: rgba(247, 65, 145, 0.8);
}

/*============================
contact
============================*/

.contact .logo img {
    
}

/*============================
logo_top
============================*/

.logo_top {
    background: #c34b7f;
    color: #fafafa;
    font-size: 12px;
    padding: 0.2em 0;
    margin: 0.2em auto 1.8em;

}

.logo_top div {
    padding: 0.5em;
    border-bottom: RGB( 255, 252, 245 ) solid 1px;
    border-top: RGB( 255, 252, 245 ) solid 1px;
}

.logo_top span {
    font-size: 1.4em;
}

/*============================
top_top
============================*/

.top_top_l img {
    margin: 0 0.5em;
    
}

.top_top_r {
    padding: 0.5em  2em 0 0;
}

.top_top_r h4 {
    padding: 0em 0 1em;
}

.top_top_r p {
    text-align: left;
    background: rgba(255,255,255,0.8);
    padding: 1em 1.5em;
    margin-right: 0.5em;
    border-radius: 10px;
}

/*============================
oshirase
============================*/

.oshirase_top {
    width: 99%;
    background: #c34b7f;
    color: #fafafa;
    font-size: 12px;
    font-weight: bold;
    padding: 0.5em;
    margin: 1.5em auto 0;
    border: 3px solid #c50067;
    border-radius: 12px 12px 0 0 ;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}

.oshirase {
    
    width: 95%;
    height: 150px;
    margin: 0 auto 1.5em;
    text-align: left;
    padding: 1.5em;
    overflow: scroll;
    background: url(../img/alice/usagi_heart.png) no-repeat right bottom;
    background-size: 88px;
    background-color: rgb(255, 255, 255, 0.7);
    background-position: 98% 80%;
    border: 3px solid #c50067;
    border-top: 0px;
    border-radius: 0 0 12px 12px ;
    
}

.oshirase p {

}

/*============================
waku
============================*/

.waku_top {
    width: 99%;
    background: #c34b7f;
    color: #fafafa;
    font-size: 12px;
    font-weight: bold;
    padding: 0.5em;
    margin: 1.5em auto 0;
    border: 3px solid #c50067;
    border-radius: 12px 12px 0 0 ;
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}

.waku {
    width: 95%;
    margin: 0 auto 1.5em;
    text-align: left;
    padding: 1.5em;
    background: url(../img/alice/usagi2.png) no-repeat right bottom;
    background-size: 80px;
    background-color: RGB( 255, 255, 255,0.7 );
    background-position: 98% 80%;
    border: 3px solid #c50067;
    border-top: 0px;
    border-radius: 0 0 12px 12px ;   
}

.waku li {
    padding: 0.5em;
}
/*============================
lesson
============================*/

.lesson_top {
    
}

.lesson_top > div {
    
}

.lesson_top ul {
    margin: 0.5em 0;
}

.lesson_top li {
    margin: 0.8em 0;
    font-size: 15px;
}

.lesson_top h5 {
    text-align: center;
    font-size: 18px;
}

.lesson {
    margin: 0 auto 1em;
}

.lesson h2{
    font-size: 28px;
    font-weight: bold;
}

.lesson h3{
    font-size: 24px;
    margin: 0 auto 0.2em;
    font-weight: bold;
}

.lesson div{
}

.lesson p {
 line-height: 250%;
　text-align: left;  
}

.lesson i{
    color: crimson;
}

.lesson_share_top {
    font-size: 12px;
}

.lesson_share {
    margin: 1em auto 0;
}

.lesson_share h3 {
    font-size: 16px;
    font-weight: bold;
    color: floralwhite;
    background: rgba( 255, 191, 205, 0.9 );
    padding: 0.4em 0;
    margin: 0;
    border: rgb(226, 151, 172) solid 1px;
    border-bottom: 0px;
    border-radius: 10px 10px 0px 0px;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

.lesson_share h3 img {
    /* drop-shadow */
    filter: drop-shadow(0px 0px 4px rgba(255,255,255,0.9));
}

.lesson_share_waku {
    background-color: RGB( 255, 255, 255,0.7 );
    border-bottom: RGB( 197, 0, 103 ) 1px solid;
    margin: 0 auto;
    padding: 1em;
    text-align: left;
    border-radius: 0px 0px 8px 8px ;
}

.lesson_share_waku2 {
    background-color: RGB( 255, 255, 255,0.7 );
    border: RGB( 197, 0, 103 ) 5px double;
    margin: 0 auto;
    padding: 1em;
    text-align: center;
    border-radius: 5px;
}

/*============================
Footer
============================*/

.footertop {
    margin: 1.5em 0 0 0;
    padding: 1em 0;
    background: RGB( 255, 255, 255,0.8 );
    border-top: 1px solid RGB( 255, 20, 147 );
    border-bottom: 1px solid RGB( 255, 20, 147 );
}

/*============================
contact_table
============================*/

.contact_table {

    
}

.contact_table div {
    margin: 0.2em auto;
    line-height: 200%;
}

.contact_table h3 {
    font-size: 24px;
    margin: 1em auto;
    font-weight: bold;
}

.contact_table h3:first-letter {
font-size: 1.2em;
color: #7172ac;
}

.contact_table strong {
    font-weight: bold;
}

.contact_table input {
    padding: 0.5em;
    border-radius: 20px;
}

.contact_table textarea{
    padding: 0.5em;
    border-radius: 20px;
}

.contact_table input[type="submit"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}
.contact_table input[type="submit"]:hover {
   /* マウスが載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
.contact_table input[type="submit"]:active {
   /* クリックされたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

.contact_table input[type="reset"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}
.contact_table input[type="reset"]:hover {
   /* マウスが載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
.contact_table input[type="reset"]:active {
   /* クリックされたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

.contact_setumei {
    
    width: 640px;
    background: rgba(255,255,255,0.8);
    border-radius: 20px;
    border: 2px solid #c34b7f;
    
}

/*============================
lesson
============================*/

.lesson {
    width: 1024px;
    font-size: 24px;
    margin: auto;
}

.lesson h2{
    font-size: 28px;
    font-weight: bold;
}

.lesson h3{
    font-size: 24px;
    margin: 2em auto 0;
    font-weight: bold;
}

.lesson div{
 line-height: 200%;
　text-align: left;  
}

.lesson p {
 line-height: 250%;
　text-align: left;  
}

.lesson i{
    color: crimson;
}

.lesson_plus {
    width: 1024px;
    font-size: 24px;
    margin: 1em auto;
    border-top: 2px solid #c40026; 
}

.lesson_plus h2{
    font-size: 28px;
    font-weight: bold;
    margin: 1em auto;
}

.lesson_plus div{
 line-height: 250%;
text-align: left;  
}

.lesson_plus i{
    color: crimson;
}

.lesson_plus_contact {
    padding: 0.2em;
    width: 800px;
    margin: 1em auto;
    line-height: 180%;
    border: double 5px #c34b7f;
}

.lesson_plus_img {
    text-align: center;
    margin: auto;
}

.lesson_plus_img p{
    font-size: 18px;
    margin: 5px auto;
    text-align: center;
    padding: 5px;
    
}

#lesson_cal {
    margin: auto;
    text-align: center;
}

/*============================
about
============================*/

.about {
    margin: auto;
}

.about p {

}

.about h3 {
    margin: 1.5em auto 1em;
    font-size: 17px;
    font-weight: normal;
}

.about h3{
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
margin: 0;
}

.about h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.9) rgba(255, 255, 255, 0.9) #a8d4ff;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about2 h3{
position: relative;
background: #ef9c99;
box-shadow: 0px 0px 0px 5px #ef9c99;
border: dashed 1px #c5004c;
padding: 0.2em 0.5em;
color: #454545;
}

.about2 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #c5004c;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about3 h3{
position: relative;
background: #96c79a;
box-shadow: 0px 0px 0px 5px #96c79a;
border: dashed 1px #4da619;
padding: 0.2em 0.5em;
color: #454545;
}

.about3 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #4da619;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about4 h3{
position: relative;
background: #fdca8a;
box-shadow: 0px 0px 0px 5px #fdca8a;
border: dashed 1px #ec9800;
padding: 0.2em 0.5em;
color: #454545;
}

.about4 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #ec9800;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about5 h3{
position: relative;
background: #a586b3;
box-shadow: 0px 0px 0px 5px #a586b3;
border: dashed 1px #53005d;
padding: 0.2em 0.5em;
color: #fff;
}

.about5 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #53005d;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about6 h3{
position: relative;
background: #d1df9c;
box-shadow: 0px 0px 0px 5px #d1df9c;
border: dashed 1px #92c000;
padding: 0.2em 0.5em;
color: #fff;
}

.about6 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #92c000;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about h4 {
    margin: 0.5em auto 0;
    font-size: 18px;
}

.about8 h3{
position: relative;
background: #ed9db9;
box-shadow: 0px 0px 0px 5px #ed9db9;
border: dashed 1px #92c000;
padding: 0.2em 0.5em;
color: #fff;
}

.about8 h3:after{
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #ff1493;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.about_top {
    font-size: 12px;
    padding: 1.5em 0;
    margin: 0 1em;
    background: rgba( 255, 255, 255, 0.9 );
    border-radius: 20px;
}

.about_top p {
    font-size: 12px;
    line-height: 1.5em;

}


.about_share_top {
    font-size: 12px;
}

.about_share {
    margin: 1em auto;
}

.about_share_9 {
    font-size: 16px;
    font-weight: bold;
    color: floralwhite;
    background: rgba( 255, 191, 205, 0.9 );
    padding: 0.4em 0;
    margin: 0 auto;
    border: rgb(226, 151, 172) solid 1px;
    border-bottom: 0px;
    border-radius: 10px 10px 0px 0px;
    text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}

.about_share h3 img {
    /* drop-shadow */
    filter: drop-shadow(0px 0px 4px rgba(255,255,255,0.9));
}

.about_share h4 {
    font-size: 12px;
    font-weight: bold;
}

.about_share_waku {
    background-color: RGB( 255, 255, 255,0.7 );
    border-bottom: RGB( 197, 0, 103 ) 1px solid;
    margin: 0 auto;
    padding: 1em;
    text-align: left;
    border-radius: 0px 0px 8px 8px ;
}

.about_share_waku2 {
    background-color: RGB( 255, 255, 255,0.7 );
    border: RGB( 197, 0, 103 ) 5px double;
    margin: 0 auto;
    padding: 1em;
    text-align: center;
    border-radius: 5px;
}

/*============================
about line
============================*/

.about_profile h5 {
  position: relative;
  padding: 0 65px;
  text-align: center;
}

.about_profile h5:before {
  position: absolute;
  top: calc(45% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: darkcyan;
}

.about_profile h5 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
    border: 1px solid darkcyan;
}

.about_profile p {
    margin: 1em auto;
    text-align: center;
}

.about_profile1 h5 {
  position: relative;
  padding: 0 65px;
  text-align: center;
}

.about_profile1 h5:before {
  position: absolute;
  top: calc(45% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #00a0dd;
}

.about_profile1 h5 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
    border: 1px solid #00a0dd;
}

.about_profile1 p {
    margin: 1em auto;
    text-align: center;
}

.about_profile2 h5 {
  position: relative;
  padding: 0 65px;
  text-align: center;
}

.about_profile2 h5:before {
  position: absolute;
  top: calc(45% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #c40026;
}

.about_profile2 h5 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
    border: 1px solid #c40026;
}

.about_profile2 p {
    margin: 1em auto;
    text-align: center;
}

.about_profile3 h5 {
  position: relative;
  padding: 0 65px;
  text-align: center;
}

.about_profile3 h5:before {
  position: absolute;
  top: calc(45% - 1px);
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background: #ec9800;
}

.about_profile3 h5 span {
  position: relative;
  padding: 0 1em;
  background: #fff;
    border: 1px solid #ec9800;
}

.about_profile3 p {
    margin: 1em auto;
    text-align: center;
}


/*============================
box75
============================*/

.box75{
margin: 2em 1em;
background-color: RGB( 252, 235, 234,0.9 );/*ボックス背景色*/
padding:3.5em 2em 2em;/*ボックス内側余白*/
box-shadow: 0px 1px 5px rgba(0,0,0,0.5);/*ボックス影*/
position:relative;/*配置(ここを基準に)*/
}
.box75 .box-title {
background-image: repeating-linear-gradient(-45deg,#f7e9e8 0, #f7e9e8 3px,#fafafa 3px,#fafafa 6px);/*ストライプ*/
border-left: 2px dotted rgba(0,0,0,.1);/*テープのギザギザ左*/
border-right: 2px dotted rgba(0,0,0,.1);/*テープのギザギザ右*/
transform: rotate(-2deg);/*テープの傾き*/
font-size: 1em;/*タイトル文字の大きさ*/
padding: 10px 15px;/*タイトルの余白*/
line-height: 1;/*タイトルの行の高さ*/
position:absolute;/*配置(ここを動かす)*/
top: -15px; /*上から（-10px）移動*/
left: 20px; /*左から(20px)移動*/
    text-align: left;
}

/*============================
contact_table
============================*/

.contact_table {
    background: RGB( 255, 255, 255,0.8 );
    padding: 1em;
    margin: 0 auto 1em;
    border-top: RGB( 197, 0, 103 ) 1px solid;
    border-bottom: RGB( 197, 0, 103 ) 1px solid;
    border-radius: 0 0 20px 20px ;
}

.contact_table div {
    margin: 0.2em auto;
    line-height: 200%;
}

.contact_table_box {
    width: 320px;
}

.contact_table h3 {
    font-size: 12px;
    margin: 1.5em 0 0.3em;
    padding: 0 0 0 0;
    text-align: left;
    font-weight: normal;
}

.contact_table h3:first-letter {

}

.contact_table small {
    font-weight: normal;
    color: #ff0080;
}

.contact_table strong {
    font-weight: bold;
}

.contact_table input {
    padding: 0.5em;
    border-radius: 5px;
}

.contact_table select {
    padding: 0.5em;
    border-radius: 5px;
}


.contact_table textarea{
    padding: 0.5em;
    border-radius: 5px;
}

.contact_table input[type="submit"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}
.contact_table input[type="submit"]:hover {
   /* マウスが載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
.contact_table input[type="submit"]:active {
   /* クリックされたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

.contact_table input[type="reset"] {
   /* input要素のうちtype属性値がbuttonのものに対して装飾 */
   background-image: linear-gradient(0deg, #a7d9f5, #eaf6fd); /* グラデーション */
   border: 1px solid #3c7fb1; /* 枠線 */
   border-radius: 0.3em;      /* 角丸 */
}
.contact_table input[type="reset"]:hover {
   /* マウスが載ったとき */
   background-image: linear-gradient(0deg, #68d3db, #e5f4fc);
   border: 1px solid #2c628b;
}
.contact_table input[type="reset"]:active {
   /* クリックされたとき */
   background-image: linear-gradient(180deg, #68d3db, #e5f4fc);
   border: 1px solid skyblue;
}

.contact_setumei {
    
    width: 100%;
    /*background: rgba(255,255,255,0.8);
    padding: 1em;
    border-radius: 20px;
    border: 2px solid #c34b7f;*/
    line-height: 150%;
    
}


/*============================
index
============================*/

.bb {
    background: url(../img/bb.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb a{
    color: #fff;
}

.bb_t {
    background: url(../img/bb_n_turu.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb_t a{
    color: #fff;
}

.bb_p {
    background: url(../img/bb_n_pan_kasa.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb_p a{
    color: #fff;
}

.bb_pp {
    background: url(../img/bb_n_pan_p.png) no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 360px;
    margin: auto;
    padding-top: em;
    color: #fff;
}

.bb_pp a{
    color: #fff;
}


/*============================
viewer_lesson
============================*/

.viewer_lesson {
    padding-top: 2em;
    margin: 0 auto;
    width: 420px;
    height: 560px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_lesson ul {
    width: 420px;
    height: 560px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_lesson ul li {
    top: 0;
    left: 0;
    width: 420px;
    height: 560px;
    margin: 0 auto;
    text-align: center;
    display: none;
    position: absolute;
}


/*============================
viewer_info
============================*/

.viewer_info {
    padding-top: 2em;
    margin: 0 auto;
    width: 360px;
    height: 480px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_info ul {
    width: 360px;
    height: 480px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_info ul li {
    top: 0;
    left: 0;
    width: 360px;
    height: 480px;
    margin: 0 auto;
    text-align: center;
    display: none;
    position: absolute;
}


/*============================
viewer_info2
============================*/

.viewer_info2 {
    padding-top: 2em;
    margin: 0 auto;
    width: 360px;
    height: 480px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_info2 ul {
    width: 360px;
    height: 480px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_info2 ul li {
    top: 0;
    left: 0;
    width: 360px;
    height: 480px;
    text-align: center;
    margin: 0 auto;
    display: none;
    position: absolute;
}

/*============================
viewer_info3
============================*/

.viewer_info3 {
    padding-top: 2em;
    margin: 0 auto;
    width: 640px;
    height: 480px;
    text-align: center;
    overflow: hidden;
}
 
.viewer_info3 ul {
    width: 640px;
    height: 480px;
    text-align: left;
    overflow: hidden;
    position: relative;
}
 
.viewer_info3 ul li {
    top: 0;
    left: 0;
    width: 640px;
    height: 480px;
    text-align: center;
    margin: 0 auto;
    display: none;
    position: absolute;
}

/*============================
square_btn
============================*/

.square_btn{
    display: inline-block;
    position: relative;
    margin: 2em auto;
    padding: 0.35em 1em;
    background: #668ad8;/*ボタン色*/
    color: #FFF;
    text-decoration: none;
}

.square_btn:before{
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: -webkit-calc(100% - 16px);
    width: calc(100% - 16px);
    height: 0;
    border: solid 8px transparent;
    border-bottom-color: #8eacec;/*ボタン色より明るめの色に*/
}

.square_btn:active{/*押したとき*/
    padding: 0.32em 0.9em;
    -ms-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.square_btn:active:before{ 
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
}

.square_btn:active:before{
   top:-12px;
   border-width: 6px;
}

/*============================
link_botan
============================*/

.link_botan {
    text-align: center;
    margin: 2em auto;
}

.link_botan a{
    display: block;
    color: #4da619;
    font-size: 21px;
    text-align: center;
    color: #fff;
    font-family: "Sawarabi Mincho";
    text-decoration: none;
    padding: 0.1em;
    margin: 0 2em 0 0;
    border: 3px #4da619 solid;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}

 .link_botan a:hover {
  background: #fdca8a;
  text-align: center;
  transition-duration: 900ms;
  color: #dc6000;
}

.link_botan_home a{
    background: url(../img/bg_botan_home.png) no-repeat left center #4da619;
    background-size: contain;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */
    margin-left: 2em;
}

.link_botan_bb a{
    background: url(../img/bg_botan_course.png) no-repeat left center #008f93;
    background-size: contain;
    border-color: #008f93;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */ 
}

.link_botan_map a{
    background: url(../img/bg_botan_map.png) no-repeat left center #dc6000;
    background-size: contain;
    border-color: #dc6000;
}

.setmenu {
    padding: 0 3em;
}

/*============================
course
============================*/

.course {
    margin: 0em auto 1.5em;
    padding-bottom: 1.5em;
    font-family: "Sawarabi Mincho";
    border-bottom: dashed 1px #d1df9c;
}

.course_r {
    text-align: right;
    margin: 0em auto 1.5em;
    padding-left: 380px;
    padding-bottom: 1.5em;
    font-family: "Sawarabi Mincho";
    border-bottom: dashed 1px #d1df9c;
}

.setsumei {
    text-align: left;
    padding: 0.5em 2em;
}

.setsumei_1 {
    text-align: left;
    padding: 0.5em 2em;
}

.ryoukin {
 font-size: 28px;
}

.ryoukin strong{
    color: #c40026;
}

.aroma {
    background: url(../img/course/bg_massage.png) no-repeat right center;
    background-size: 380px;
}

.seitai {
    background: url(../img/course/bg_seitai.png) no-repeat left center;
    background-size: 380px;
}

.ashitsubo {
    background: url(../img/course/bg_ashitsubo.png) no-repeat right bottom;
    background-size: 380px;
}

.main_body i {
	color:#fff;
}

.main_body p {
    text-align: left;
    padding: 0 0 0 0em;
    line-height: 180%;
    font-size: 26px;
    padding: 1em 0;
    font-family: "Sawarabi Mincho";
}

.category h1{
    width: 100%;
    text-align: center;
    background: repeat-x center center;    
}

#seitai {
    
    background: url(../img/line_main_category.png) repeat-x center center;
}

.category h1 span{
    background: #fff;
    padding: 0.2em 0.5em;
}


.category_b h1{
    width: 100%;
    color: ;
    text-align: center;
    background: repeat-x url() center center;
    background-size: 380px;    
}

.category_b h1 span{
    background: #fff;
    padding: 0.2em 0.5em;
}

#aroma {
    color: #ee8db2;
    background: url(../img/course/b_illust_5_1M.png) repeat-x center center;    

}

/*============================
flexbox
============================*/

.flex_w {
	display: -webkit-flex;
	display: flex;
	width: 100%;
}

.flex_wc {
	display: -webkit-flex;
	display: flex;

}

.flex1 {
	-webkit-flex: 1;
	flex: 1;
}

.flex2 {
	-webkit-flex: 2;
	flex: 2;
}

.flex3 {
	-webkit-flex: 3;
	flex: 3;
}

.flex4 {
	-webkit-flex: 4;
	flex: 4;
}

.flex5 {
	-webkit-flex: 5;
	flex: 5;
}

.flex6 {
	-webkit-flex: 6;
	flex: 6;
}

.flex7 {
	-webkit-flex: 7;
	flex: 7;
}

.flex8 {
	-webkit-flex: 8;
	flex: 8;
}

.flex9 {
	-webkit-flex: 9;
	flex: 9;
}

.flex10 {
	-webkit-flex: 10;
	flex: 10;
}

/*============================
ul
============================*/

ol{  
	width: 100%;
	padding: 0.3em;
	padding-left: 2em;
	list-style-type: circle
}


li{
	text-align: left;
	margin: 3px;
}

/*============================
globalNav_f
============================*/

.globalNav_f {
	list-style: none;
	overflow: hidden;
    margin: auto;
    background: #fff;
}

.globalNav_f li {
	float: left;
	border-right: 1px solid #DDD;
}

.globalNav_f li a {
	display: block;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
	color: #333;
    font-size: 16px;
}

.globalNav_f li a:hover {
	background: #EEE;
}

.active {
	background: #333;
	color: #fff;
}

/*============================
dl 
============================*/

dl{  
  font-family: "Sawarabi Mincho";
}

dt{
  font-size: 18px;
  padding: 0.5em;
  padding-top: 1em;
  width : 12em;
  text-align: left;
  float : left;/* 左に寄せる */
  clear : both;/* フロートの解除 */
  border-bottom: 1px #ec9800 dashed;
  line-height: 180%
  font-family: "Sawarabi Mincho";
}

dd {
  font-size: 18px;
  padding: 0.5em;
  padding-left: 5em;
  text-align: left;
  margin-left : 11.5em;/* DTの幅分の設定 */
  border-bottom: 1px #ec9800 dashed;
  line-height: 180%;
  font-family: "Sawarabi Mincho";
}


.small{font-size:10px}

/*============================
ポラロイド風
============================*/

.photo {
	padding: 8px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #c2c2c2;
	border-right: 1px solid #c2c2c2;
    margin: 0 auto 2em;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
    transform:rotate(-2deg);
	/* IE */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true)";
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true); /* IE5.5+ */
	background: #fff;
}

/*============================
Footer
============================*/

footer {
	width: 100%;
	text-align: center;
	margin: auto;
	background: #454968;
	color: #4da619;
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
}

footer .footer_c {
	margin: auto;
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}

footer .footer_c a {

	color: #fafafa;

}

footer .footer_c_div_w {

	border: 1px solid #afb0be;

}

.footer_chiharuya {
	width: 100%;
	text-align:center;
	margin:0 auto;
	padding: 5px 0;
	font-size: 15px;
	background: #f0cce5;
	border-top: 1px solid #fe7e13;
}

.footer_chiharuya a{
	color: #4da619;
}

.footer_chiharuya a:hover{
	color: #ff9302;
	text-decoration: underline;
}

.copyright{
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	color: #333;
}

.copyright a{
	color: #4da619;
}

.copyright a:hover{
	color: #ff9302;
	text-decoration: underline;
}

/* footer button end */

.padding_left_10 {
	padding-left: 10px;
}

.float_left {
	float: left;
}
.clear {
	clear: both;
}

/*============================
marquee
============================*/

.marquee {
width:100%;
padding: 0;
overflow:hidden;
/*background-color:#f6f6f6;*/
margin-bottom:0px;
position:relative;
}

.marquee p:after {
content:"";
white-space:nowrap;
padding-right:0px;
}

.marquee p {
margin:0;
padding-left:0px;
display:inline-block;
white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}

/*============================
marquee_l
============================*/

.marquee_l {
width:100%;
padding: 0;
overflow:hidden;
background-color:#f6f6f6;
margin-bottom:0px;
position:relative;
}

.marquee_l p:after {
content:"";
white-space:nowrap;
padding-right:0px;
}

.marquee_l p {
margin:0;
padding-left:0px;
display:inline-block;
white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee_l {
  from   { -webkit-transform: translate(-100%);}
  99%,to { -webkit-transform: translate(0%);}
}
@-moz-keyframes marquee_l {
  from   { -moz-transform: translate(0%);}
  99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee_l {
  from   { -ms-transform: translate(0%);}
  99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee_l {
  from   { -o-transform: translate(0%);}
  99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee_l {
  from   { transform: translate(0%);}
  99%,to { transform: translate(-100%);}
}


/*============================
MotionTEXT
============================*/

#line1 {
  height:10px;
  width:50%;
  background-color:white;
  position:absolute;
  top:50%;
  margin-top:-5px;
  left:50%;
  margin-left:-25%;
}

#line2 {
  height:10px;
  width:50%;
  background-color:white;
  position:absolute;
  top:50%;
  margin-top:-5px;
  left:50%;
  margin-left:-25%;
}
.desinks {
  color:white;
  font-family:'Open Sans Condensed', sans-serif;
  font-weight:bold;
  text-transform:uppercase;
  font-size:8em;
  text-align:center;
  transform: skew(0) rotate(0);
  top:50%;
  margin-top:-0.7em;
  left:50%;
  margin-left:-2.4em;
  position:absolute;
  display:none;
  
}

/*============================
reborn
============================*/

.ribbon {
   width: 300px;
   position: absolute;
   margin: 0 auto;
   text-align: center;
   font-size: 20px!important;
   background: #d64b4b;
   background: -webkit-gradient(linear, left top, left bottom, from(#d64b4b), to(#ab2c2c));
   background: -webkit-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -moz-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -ms-linear-gradient(top, #d64b4b, #ab2c2c);
   background: -o-linear-gradient(top, #d64b4b, #ab2c2c);
   background-image: -ms-linear-gradient(top, #d64b4b 0%, #ab2c2c 100%);
   -webkit-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   box-shadow: rgba(000,000,000,0.3) 0 1px 1px;
   font-family: 'Helvetica Neue',Helvetica, sans-serif;
   }
.ribbon h1 {
   font-size: 25px!important;
   color: #801111;
   text-shadow: #d65c5c 0 1px 0;
   margin:0px auto;
   padding: 15px 10px;
   }
.ribbon:before, .ribbon:after {
   content: '';
   position: absolute;
   display: block;
   bottom: -1em;
   border: 1.5em solid #c23a3a;
   z-index: -1;
   }
.ribbon:before {
   left: -2em;
   border-right-width: 1.5em;
   border-left-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) 1px 1px 1px;
   }
.ribbon:after {
   right: -2em;
   border-left-width: 1.5em;
   border-right-color: transparent;
   -webkit-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   -moz-box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   box-shadow: rgba(000,000,000,0.4) -1px 1px 1px;
   }
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
   border-color: #871616 transparent transparent transparent;
   position: absolute;
   display: block;
   border-style: solid;
   bottom: -1em;
   content: '';
   }
.ribbon .ribbon-content:before {
   left: 0;
   border-width: 1em 0 0 1em;
   }
.ribbon .ribbon-content:after {
   right: 0;
   border-width: 1em 1em 0 0;
   }
.ribbon-stitches-top {
   margin-top:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5);
   }
.ribbon-stitches-bottom {
   margin-bottom:2px;
   border-top: 1px dashed rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.3);
   }
.ribbon11-2 {
    display: inline-block;
    position: relative;
    height: 45px;
    vertical-align: middle;
    text-align: center;
    box-sizing: border-box;
}

.ribbon11-2:before{
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    left: -35px;
    z-index: -2;
    border: 20px solid #a5cff3;
    border-left-color: transparent;
}

.ribbon11-2:after{
    content: '';
    position: absolute;
    width: 10px;
    bottom: -10px;
    right: -35px;
    z-index: -2;
    border: 20px solid #a5cff3;
    border-right-color: transparent;
}

.ribbon11-2 h3 {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0 20px;
    line-height: 45px;
    font-size: 18px;
    color: #008eff;
    text-shadow: 0 0 2px #FFF;
    background: -webkit-repeating-linear-gradient(-45deg, #b0daff, #b0daff 3px,#cfe8ff 3px, #cfe8ff 7px);
    background: repeating-linear-gradient(-45deg, #b0daff, #b0daff 3px,#cfe8ff 3px, #cfe8ff 7px);
}

.ribbon11-2 h3:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 15px #7fafd9;
}

.ribbon11-2 h3:after {
    position: absolute;
    content: '';
    top: 100%;
    right: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-left: solid 15px #7fafd9;
}

.ribbon2 {
    display: inline-block;
    position: relative;
    height: 60px;
    width: 90%;;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    padding: 7px 0;
    font-size: 18px;/*フォントサイズ*/
    background: #78d0f5;/*背景色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
}

.ribbon2 h3 {
    vertical-align: middle;
    text-align: center;
    margin: 0;
    padding: 0 30px;
    border-top: dashed 1px #FFF;/*上の破線*/
    border-bottom: dashed 1px #FFF;/*下の破線*/
    line-height: 46px;
}

.ribbon2:before, .ribbon2:after{
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon2:before{/*左端の山形*/
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 15px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
}

.ribbon2:after{/*右端の山形*/
  top: 0;
  right: 0;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

/*============================
table
============================*/

/* table01 */

#table01 {
    margin: auto;
    width: 100%;
}

#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width:30%;
}

#table01 td {
  width:70%;
    text-align: left;
}

/*=====================================
SNS Button
=====================================*/

.insta_btn {
  display: inline-block;
  text-align: center;/*中央揃え*/
  color: #2e6ca5;/*文字色*/
  font-size: 20px;/*文字サイズ*/
  text-decoration: none;/*下線消す*/
}

.insta_btn:hover {/*ホバー時*/
  color:#668ad8;/*文字色*/
  transition: .5s;/*ゆっくり変化*/
}

.insta_btn .insta{/*アイコンの背景*/
  position: relative;/*相対配置*/
  display: inline-block;
  width: 50px;/*幅*/
  height: 50px;/*高さ*/
  vertical-align: middle;/*垂直中央に*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  border-radius: 13px;/*角丸に*/

}

.insta_btn .insta:before{/*グラデーションを重ねるため*/
  content: '';
  position: absolute;/*絶対配置*/
  top: 23px;/*ずらす*/
  left: -18px;/*ずらす*/
  width: 60px;/*グラデーションカバーの幅*/
  height: 60px;/*グラデーションカバーの高さ*/
  background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
  background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);/*グラデーション②*/
}

.insta_btn .fa-instagram {/*アイコン*/
  color: #FFF;/*白に*/
  position: relative;/*z-indexを使うため*/
  z-index: 2;/*グラデーションより前に*/
  font-size: 35px;/*アイコンサイズ*/
  line-height: 50px;/*高さと合わせる*/
}

.insta_btn3 {/*ボタンの下地*/
  
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:inline-block;
    position: relative;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

/*=====================================
lesson plus
=====================================*/

.lessonplus {
    text-align: center;
    
}

.lessonplus h3{
    text-align: center;
    font-size: 28px;
    font-weight: bold;
}

/*=====================================
syouhyou_table
=====================================*/

.syouhyou_table {
    
    
    
}

.syouhyou_table_nai {
    margin: auto;
    text-align: center;
    width: 800px;
    
}

.syouhyou_table_nai table {
    margin: auto;
    text-align: center;
    width: 800px;
}

.syouhyou_table_nai table th {
    margin: auto;
    text-align: left;
    width: 320px;
}



.stth {
    background: #f3cbdb;
    color: #d86f98;
    text-align: left;
    padding: 0.5em 1em;
    border: #c34b7f 1px solid;
    border-bottom: 0;
}

.sttd {

    background: #fff;
    text-align: left;
    padding: 0.5em 1em;  
    border: #c34b7f 1px solid;
    border-bottom: 0;
}


/*=====================================
privacy
=====================================*/

.privacy {
    
    margin: auto;
    
}

.privacy h1 {
    
    font-size: 10px;
    margin: 1em auto;
    
}

.privacy h2 {
    
    font-size: 18px;
    margin: 0.5em auto;
}

.privacy p div {
    
    font-size: 12px;
    margin: 1em auto;
    line-height: 180%;
}


/*=====================================
shop
=====================================*/

.shop_php {
    text-align: center;
    margin: auto;
}

.shop_php table{
    text-align: center;
    margin: 1em auto;
    border: 1px solid #333;
}

.shop_php table td{
    text-align: center;
    margin: auto;
    padding: 0.5em;
    border: 1px solid #333;
}


.shop h2 {

    font-weight: bold;
}

.shop_share {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #C34B7F;
    padding: 1.2em;
}

.shop_share h3 {
    font-size: 1.5em;
    margin: 0 auto 0.5em;
}

.shop_mini_title {
    font-weight: bold;
    padding: 0.5em 1.2em;
    color: rgb(195, 75, 127);
    background: rgb(255, 197, 209);
    border-radius: 20px;
    border: 1px solid rgb(195, 75, 127);
}

.shop_setumei {
    text-align: left;
    font-size: 18px;
    padding: 0.5em 0;
    padding-top: 17px;
    line-height: 160%;
}

.shop_setumei_title {
  padding: 0.5rem 0.8rem;
  border: 6px double rgb(195, 75, 127);
  border-radius: 8px; 
}



.frame-box-002 {
	padding: 5px 30px 5px 30px;
	position: relative;
}

.frame-box-002::before, .frame-box-002::after {
	content: '';
	width: 15px;
	height: 100%;
	position: absolute;
}

.frame-box-002::before {
	border-left: solid 1px #000000;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	top: 0;
	left: 0;
}

.frame-box-002::after {
	border-right: solid 1px #000000;
	border-top: solid 1px #000000;
	border-bottom: solid 1px #000000;
	top: 0;
	right: 140px;
}

/*=====================================
スライド
=====================================*/

.container {
  position: relative;
  width: 300px;
  height: 200px;
  margin: auto;
    text-align: center;
}
.image {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 30s infinite;
}
.image:nth-of-type(1) {
  animation: change-img-anim-first 30s infinite;
  animation-delay: 0s;
}
.image:nth-of-type(2) {
  animation-delay: 10s;
}
.image:nth-of-type(3) {
  animation-delay: 20s;
}
@keyframes change-img-anim-first {
	0%{ opacity: １;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  30%{ opacity: 1;}
  36%{ opacity: 1;}
  45%{ opacity: 0;}
  100%{ opacity: 0;}
}

/*=====================================
スライド
=====================================*/

.slide_show_fade_in4_6{
	position: relative;
	overflow: hidden;
	width: 320px;
    margin: auto;
}
.slide_show_fade_in4_6:before{
	content: "";
	display: block;
	padding-top: 66%;
}
.slide_show_fade_in4_6_img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	opacity: 0;
	animation: slide_show_fade_in4_6 24s infinite;
}
.slide_show_fade_in4_6_img:nth-of-type(2){
	animation-delay: 6s;
}
.slide_show_fade_in4_6_img:nth-of-type(3){
	animation-delay: 12s;
}
.slide_show_fade_in4_6_img:nth-of-type(4){
	animation-delay: 18s;
}


@keyframes slide_show_fade_in4_6{
	0%{
		opacity: 0;
		transform: scale(1.2);
	}

	8%{
		opacity: 1;
	}

	17%{
		opacity: 1;
	}

	25%{
		opacity: 0;
		transform: scale(1);
	}

	100%{
		opacity: 0;
	}
}

/*=====================================
スライド
=====================================*/

.slide_show_fade_in4_6_1{
	position: relative;
	overflow: hidden;
	width: 320px;
    height: 420px
    margin: auto;
}
.slide_show_fade_in4_6_1:before{
	content: "";
	display: block;
	padding-top: 66%;
}
.slide_show_fade_in4_6_1_img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	opacity: 0;
	animation: slide_show_fade_in4_6 36s infinite;
}
.slide_show_fade_in4_6_1_img:nth-of-type(2){
	animation-delay: 6s;
}
.slide_show_fade_in4_6_1_img:nth-of-type(3){
	animation-delay: 12s;
}
.slide_show_fade_in4_6_1_img:nth-of-type(4){
	animation-delay: 18s;
}
.slide_show_fade_in4_6_1_img:nth-of-type(5){
	animation-delay: 24s;
}
.slide_show_fade_in4_6_1_img:nth-of-type(6){
	animation-delay: 30s;
}
@keyframes slide_show_fade_in4_6_1{
	0%{
		opacity: 0;
		transform: scale(1.2);
	}

	8%{
		opacity: 1;
	}

	17%{
		opacity: 1;
	}

	25%{
		opacity: 0;
		transform: scale(1);
	}

	100%{
		opacity: 0;
	}
}


/*=====================================
スライド
=====================================*/

.slide_show_fade_in4_6_2{
	position: relative;
	overflow: hidden;
	width: 180px;
    height: 320px;
    margin: auto;
}
.slide_show_fade_in4_6_2:before{
	content: "";
	display: block;
	padding-top: 66%;
}
.slide_show_fade_in4_6_2_img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	opacity: 0;
	animation: slide_show_fade_in4_6 36s infinite;
}
.slide_show_fade_in4_6_2_img:nth-of-type(2){
	animation-delay: 6s;
}
.slide_show_fade_in4_6_2_img:nth-of-type(3){
	animation-delay: 12s;
}
.slide_show_fade_in4_6_2_img:nth-of-type(4){
	animation-delay: 18s;
}
.slide_show_fade_in4_6_2_img:nth-of-type(5){
	animation-delay: 24s;
}
.slide_show_fade_in4_6_2_img:nth-of-type(6){
	animation-delay: 30s;
}
@keyframes slide_show_fade_in4_6_2{
	0%{
		opacity: 0;
		transform: scale(1.2);
	}

	8%{
		opacity: 1;
	}

	17%{
		opacity: 1;
	}

	25%{
		opacity: 0;
		transform: scale(1);
	}

	100%{
		opacity: 0;
	}
}

/*=====================================
スライド
=====================================*/

.slide_show_fade_in4_6_6 {
	position: relative;
	overflow: hidden;
	width: 320px;
    margin: auto;
}
.slide_show_fade_in4_6_6:before{
	content: "";
	display: block;
	padding-top: 66%;
}
.slide_show_fade_in4_6_6_img{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
	opacity: 0;
	animation: slide_show_fade_in4_6 36s infinite;
}
.slide_show_fade_in4_6_6_img:nth-of-type(2){
	animation-delay: 6s;
}
.slide_show_fade_in4_6_6_img:nth-of-type(3){
	animation-delay: 12s;
}
.slide_show_fade_in4_6_6_img:nth-of-type(4){
	animation-delay: 18s;
}
.slide_show_fade_in4_6_6_img:nth-of-type(5){
	animation-delay: 24s;
}
.slide_show_fade_in4_6_6_img:nth-of-type(6){
	animation-delay: 30s;
}
@keyframes slide_show_fade_in4_6_6 {
	0%{
		opacity: 0;
		transform: scale(1.2);
	}

	8%{
		opacity: 1;
	}

	17%{
		opacity: 1;
	}

	25%{
		opacity: 0;
		transform: scale(1);
	}

	100%{
		opacity: 0;
	}
}



/*=====================================
/* 点滅 */
=====================================*/

.blink {
  animation: 2s linear infinite blink_effect;
}
@keyframes blink_effect {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

/*============================
ticker
============================*/

.ticker {
  color: #fafafa;
  overflow: hidden;
}

.ticker p {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  -webkit-animation-name: ticker-animation;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 25s;
}

@-webkit-keyframes ticker-animation {
  from   { -webkit-transform: translate(0%);}
  99%,to { -webkit-transform: translate(-100%);}
}
/* webkitのみで省略 */