﻿@charset "UTF-8";

/* ========BASIC======== */
html {
   overflow-y:scroll;
   font-size: 62.5%;
}

body {
   margin:42px 0 0 0;
   padding:0;
   line-height:1.6;
   letter-spacing:1px;
   font-family:"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
   font-size: 1.5rem;
   color:#000;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}

img {
   max-width: 100%;
   height: auto;
}

@media only screen and (max-width: 568px) {
img { max-width: 100%; }
}


/* ========TEMPLATE LAYOUT======== */

#top {
   max-width:100%;
   margin:0;
   padding:0 5px;
   background:#fff;
   box-shadow:0 0 5px #FCA451;
   -moz-box-shadow:0 0 5px #FCA451;
   -webkit-box-shadow:0 0 5px #FCA451;
   behavior: url(PIE.htc);/* for IE */
}

#header {
   max-width:100%;
   margin:0;
   padding:5px;
   background:#FDEFCD;
}

h1 {
   font-size:90%;
   color:#fff;
   background:#FCA451;
   margin:5px 0 0 0;
   padding:5px 0 5px 10px;
}

#headerLogo {
  text-align:left;
  padding:5px 0 0 0;
}

#pr {
   position:absolute;
   left:0;
   top:0;
}

#message {
  font-size:84%;
  text-align:right;
}

#menu {
   float:left;
   font-size:84%;
   margin-top:10px;
}

#menu ul {
   float:left;
   margin:0;
   padding:0;
   list-style:none;
   border-top:1px solid #999;
   border-bottom:1px solid #999;
}

#menu li {
   float:left;
   background:#f5f5f5;
   border-bottom:1px solid #999;
}

#menu li a:hover {
   margin-left:0;
   background:#fff;
}

#menu li a {
   display:block;
   padding:5px;
   text-align:center;
   outline:none;
}

#menu li a:hover {
   color:#666;
   text-decoration:none;
}

#menu {
   float:left;
   font-size:84%;
   margin-top:10px;
}

#icatch {
  position:relative;
  width:100%;
  height:auto;
}

#icatch p {
   margin:0;
   padding:0;
}

.yazirusi {
  display: none;
}

.kclimbde {
  position: absolute;
  top: 20%;
  left: 1%;
  transform: rotate(-20deg);
  font-size:80%;
  padding:12px;
  font-weight: bold;
  color:#fff;
  background:#FCA451;
  border-radius: 20px;
}

#contents {
   max-width:100%;
   float:left;
   width:95%;
   padding:10px 0;
   background:#fff;
}

.box {
  font-size:110%;
  margin:5px 5px 20px;
  padding:5px;
  text-align:left;
}

.ladysday {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.ladysday:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ ladysday';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em;
}

.beginner_school {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.beginner_school:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ beginner';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em;
}

.student {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.student:after {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ studentday';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em;
}

.junior_school {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.junior_school:after  {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ junior';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em
}

.line_coupon {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.line_coupon:after  {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ line coupon';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em
}

.oyako {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.oyako:after  {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ oyako time';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em
}

.instamidasi {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.instamidasi:after  {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ Instagram';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em
}

.monthly {
  position: relative;
  color: black;
  font-size: 100%;
  font-weight: bold;
  background: #FDEFCD;
  line-height: 1.4;
  padding: 5px 10px 5px;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

.monthly:after  {
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  content: '✓ past_monthly';
  background: #FCA451;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.9em;
  line-height: 1;
  letter-spacing: 0.05em
}

.sumaho {
  font-size:80%;
}

#main h2 {   
   width:100%;
   height:40px;
   padding-left:5px;
   margin:20px 0 5px 5px;
   background:url("../images/bg_h2.png") no-repeat;
   background-position:5px 30px;
 }

#main table {
   width:98%;
   text-align:center;
   margin-left:15px;
   margin-bottom:20px;
   border-collapse:collapse;
   border:1px solid #999;
   border-spacing:0;
   line-height:1.8;
}

.ryoukin_th {
  background-color: #FDEFCD;
  font-weight: bold;
}


#main td {
   border:1px solid #999;
}

.box {
  font-size:100%;
}

.mleft {
  width:100%;
}

.mright {
   width:100%;
}

#main {
   width:100%;
}

#main h2 {   
   clear:both;
   font-size:120%;
   padding:5px;
   margin:20px 0 20px 5px;
 }

#main h3 {
   clear:both;
   margin-bottom:5px;
   padding-left:10px;
   font-size:100%;
   color:#e54c81;
   border-left:5px solid #ED81A6;
}

#main h4 {
   margin-bottom:5px;
   font-size:120%;
   color:#e54c81;
   border-bottom:2px solid #ED81A6;
}

#sub {
   width:100%;
   border-top:1px solid #999;
   margin:10px 0;
}

#sub h3 {
   margin:15px 0 10px;
   padding:5px;
   font-weight:bold;
   background:#EFEBEF;
}

.margin {
  margin:20px 0;
}


#pageTop {
   clear:both;
}


#footer {
   max-width:100%;
   clear:both;
   font-size:84%;
   background:#FDEFCD;
   padding:5px;
}

#footer ul {
   margin:20px 0;
   padding:20px 0 0 0;
   border-top:1px solid #ddd;
}

#footer li {
   display:inline;
   margin:0;
   padding:0 5px;
   list-style:none;
}

#footer li a:hover {
   color:#666;
   text-decoration:underline;
}

#main p {
   margin:0 0 1em 0;
   font-size:120%;
}

.snsbt {
   position:absolute;
   right:5px;
   top:5px;
   zoom: 50%;
}

.infe {
width: 50px;
line-height: 50px;
}

.linetable {
   table-layout: fixed;
   letter-spacing: -0.12em;
   font-size:60%;
   font-family: number;
   font-weight:50; 
   margin: 50px 40px  0px 0px;
}
