@charset "utf-8";
/* CSS Document */

@media all and (-ms-high-contrast:none) {
	body {
		font-family: "メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	}
}

.w100p{
	width:100%;
}

.h100p{
height: 100%;
}

/*  Default */


/* PC : 320 px - 999 px */
@media print, screen and (min-width: 320px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:339px;
	min-width:320px;
}

.sp{
display: block;
}

.sp-only{
display: block;
}

.tab{
display: none;
}

.tab-pc{
display: none;
}

.pc{
display: none;
}

.wrap{
float: left;
width: 100%;
}

.sp-f15{
font-size: 1.05rem;
line-height: 1.75em;
}


/*-------------------------------------
	ヘッダー
-------------------------------------*/
.header-wrap{
position: fixed;
z-index: 10000;
top: 0;
width: 100%;
height: 51px;
color: #fff;
border-bottom: 1px solid #ccc;
background:#fff;
box-sizing: border-box;
}

.header-wrap-c{
position: absolute;
z-index: 10000;
top: 0;
width: 100%;
height: 51px;
color: #fff;
border-bottom: 1px solid #ccc;
background:#fff;
box-sizing: border-box;
}

.home-bb{
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 50px;
}

.contact-bb{
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 50px;
}

.path-box{
float: left;
width: 100%;
margin: 0 0 40px 0;
padding: 2px 0 0 0;
border: 1px solid #e9e9e9;
border-right: none;
border-left: none;
background: #f8f8f8;
}

.path{
float: left;
width: 90%;
margin: 0 5%;
padding: 8px 0;
box-sizing: border-box;
font-size: 0.9rem;
line-height: 1em;
}

.path li{
float: left;
margin: 0 5px 0 0;
}

/*-------------------------------------
	フッター
-------------------------------------*/

/*-------------------------------------
	コンテンツ
-------------------------------------*/
.w100p-w{
float: left;
width: 100%;
margin: 10px 0 0 0;
padding: 20px 10px;
border: 1px solid #ddd;
border-radius: 7px;
background: #fff;
box-sizing: border-box;
}

.w100p-w p{
margin-bottom: 30px;
font-size: 1.04rem;
line-height: 1.75em;
}

.w100p-w-top-bc{
float: left;
width: 100%;
margin: 0;
padding: 0;
}

.w100p-w-top{
float: left;
width: 100%;
margin: 25px 0 0 0;
padding: 0;
}

.w100p-w-cont{
float: left;
width: 100%;
margin: 0;
padding: 0;
}

.w100p-gra{
float: left;
width: 100%;
padding: 30px 0;
border-bottom: 1px solid #eee;
background: #f9f9f9;
}

.w100p-gre{
float: left;
width: 100%;
padding: 30px 0 30px 0;
border-bottom: 1px solid #eee;
background: #30a7a2;
color: #fff;
}

.h2-catchphrase-top{
width: 100%;
margin-top: 0;
padding: 10px 5px 7px 5px;
font-size: 1.2rem;
color: #49371e;
font-weight: bold;
line-height: 1.5em;
text-align: center;
box-sizing: border-box;
}

.h2-catchphrase-top-s{
width: 100%;
margin-top: 0;
padding: 25px 5px 7px 5px;
font-size: 1.1rem;
color: #49371e;
font-weight: bold;
line-height: 1.5em;
text-align: center;
box-sizing: border-box;
}

.bc-txt{
width: 86%;
margin: 0 7%;
}

.bc-txt2{
width: 95%;
margin: 0 5% 0 0;
}

.bc-bg{
display: block;
width: 100%;
height: 500px;
background-image: url("../img/main-sp.jpg");
background-size: cover;
}

.h2-catchphrase{
position: absolute;
top: 51px;
left: 0;
width: 100%;
padding: 10px 5px 7px 5px;
font-size: 1.4rem;
color: #fff;
line-height: 1.5em;
text-align: center;
background: rgba(123,78,78,0.89);
box-sizing: border-box;
}

.h2-title{
width: 100%;
margin: 0 0 22px 0;
padding: 15px 0 15px 0;
/* border-top: 2px solid #eee; */
border-bottom: 2px solid #929292;
color: #222;
font-size: 3rem;
font-weight: bold;
text-align: center;
}

.h2-title-wh{
width: 100%;
margin: 0 0 40px 0;
padding: 18px 0;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
color: #222;
font-size: 3rem;
font-weight: bold;
text-align: center;
}

.h3-sub,
.h3-sub-sub{
position: relative;
width: 100%;
margin: 10px 0 40px 0;
padding: 0 0 10px 0;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
line-height: 1.275em;
}


.h3-sub:before,
.h3-sub-sub:before
{
  content: '';
  position: absolute;
  left: 50%;
  bottom: -13px; /*下線の上下位置調整*/
  display: inline-block;
  width: 34%; /*下線の幅*/
  height: 3px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background:linear-gradient(to right,#d63c66, #bb2abb);
  /*  background-color: #e57191;*/ /*下線の色*/
}

.h3--c{
margin: 20px 0 30px 0;
padding: 10px;
border: 3px solid #ace185;
border-radius: 3px;
box-sizing: border-box;
font-size: 1.275rem;
font-weight: bold;
text-align: center;
}


.h3-balloon {
  position: relative;
  display: table;
  width: auto;
  margin: 0 auto 1.5em auto;
  padding: 13px 20px;
  min-width: 120px;
  max-width: 100%;
  color: #fff;
  font-size: 1.03rem;
  font-weight: bold;
  background: linear-gradient(173deg, #6bd7af, #3AA67D);
  border-radius: 50px;
  line-height: 1.4em;
}

.h3-balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #3AA67D;
}

.h3-balloon h3 {
  margin: 0;
  padding: 0;
}

.h4-title{
float: left;
width: 100%;
margin: 0 0 30px 0;
padding: 0 0 0 20px;
font-size: 2.2rem;
border-left: 6px solid #14a872;
box-sizing: border-box;
}

.h4-cont{
float: left;
width: 100%;
margin: 0 0 30px 0;
padding: 0 0 0 20px;
font-size: 1.4rem;
border-left: 6px solid #14a872;
box-sizing: border-box;
color: #444;
font-weight: bold;
line-height: 1.4em;
}

.h5-cont{
float: left;
width: 50%;
margin: 0 25% 22px 25%;
padding: 5px 0 5px 0;
font-size: 1.25rem;
border-top: 2px solid #a4e1cb;
border-bottom: 2px solid #a4e1cb;
box-sizing: border-box;
color: #237458;
font-weight: bold;
text-align: center;
line-height: 1.4em;
}

.h5-cont-80{
float: left;
width: 95%;
margin: 0 2.5% 15px 2.5%;
padding: 7px 0 7px 0;
font-size: 0.92rem;
border-top: 2px solid #a4e1cb;
border-bottom: 2px solid #a4e1cb;
box-sizing: border-box;
color: #237458;
font-weight: bold;
text-align: center;
line-height: 1.4em;
}

.center-box{
display: block;
width: 100%;
}

.symbol{
margin: 15px auto 0;
width: 198px;
}

.h3-letter{
width: 100%;
margin: 0 0 20px 0;
color: #f86e1b;
font-size: 1.25rem;
font-weight: bold;
text-align: center;
line-height: 1.5em;
}

.h3-point{
width: 100%;
height: auto;
font-size: 1.4rem;
font-weight: bold;
}

.h3-point img{
float: left;
width: 15%;
height: auto;
}

.p-p{
float: left;
width: 85%;
height: 2em;
margin: 0 0 20px 0;
padding: 0 0 0 10px;
box-sizing: border-box;
line-height: 1.3em;
}

.img-w-h2{
width: 100%;
}

.f-nav{
position: fixed;
z-index: 10000;
bottom: 0;
width: 100%;
height: 62px;
color: #fff;
}

.f-nav-c{
float: left;
z-index: 10000;
bottom: 0;
width: 100%;
height: 62px;
color: #fff;
}

.ul-fn{
float: left;
width: 100%;
border-top:1px solid #888;
}

.li1{
position: relative;
float: left;
width: 33.33333%;
height: 62px;
background: #fff;
box-sizing: border-box;
}

.li2{
position: relative;
float: left;
width: 33.33333%;
height: 62px;
border-left: 1px solid #aaa;
background: #fff;
box-sizing: border-box;
}

.li3{
position: relative;
float: left;
width: 33.33333%;
height: 62px;
border-left: 1px solid #aaa;
background: #f47896;
box-sizing: border-box;
}

.ul-fn img{
position: absolute;
left: 0;
right: 0;
height: 100%;
margin: 0 auto;
}

.wrap-cont{
width: 90%;
margin: 0 5%;
}

.wrap-cont-y{
float: left;
width: 90%;
margin: -70px 5% 0 5%;
}

.top-img{
width: 100%;
height: 84vh;
height: calc(100vh - 113px);
margin: 51px 0 0 0;
background: url(../img/main-sp.jpg) no-repeat;
background-position: center;
background-size: cover;
}

.center,.center950{
margin: 0 auto;
position: relative;
}

.top-txt{
width: 90%;
margin:10px 5%;
font-size: 1.05rem;
line-height: 1.75em;
}

.book-b{
font-size: 1.9rem;
color: #e87f0a;
font-weight: bold;
line-height: 1.15em;
}

.txt-w{
width: 100%;
padding: 15px;
border: 2px solid #cecece;
border-radius: 7px;
background: #fff;
box-sizing: border-box;
font-size: 1.2rem;
line-height: 1.75em;
}

.donna-a{
width: 74px;
margin: 0 auto 30px auto;
}

.donna810{
width: 100%;
margin: 0 0 30px 0;
}

.donna600{
width: 100%;
margin: 0 0 30px 0;
}

.ul-donna{
float: left;
width: 100%;
margin: 0;
}

.ul-donna li{
float: left;
width: 100%;
height: auto;
margin: 0 0 30px 0;
padding: 20px 20px 20px 20px;
border: 3px solid #cdac8a;
border-radius: 8px;
background: #fffaf5;
box-sizing: border-box;
}

.top-txt-y{
width: 100%;
margin: 15px auto 35px auto;
text-align: left;
font-size: 1.7rem;
}

.top-txt-yy{
width: 100%;
margin: 15px auto 15px auto;
padding: 0 0 0 15px;
box-sizing: border-box;
text-align: left;
font-size: 1.4rem;
border-left: 6px solid #c88261;
line-height: 1.75em;
}

.h2-top{
width: 100%;
margin: 0 0 20px 0;
font-size: 2rem;
text-align: center;
}

.fmg-box{
position: relative;
float: left;
width: 100%;
border: 1px solid #d7d7d7;
border-radius: 8px;
background: #fefefe;
box-sizing: border-box;
box-shadow: 0 10px 18px rgba(128,128,128,.14);
color: #111;
}

.fmg-txt-l,.fmg-txt-r{
float: left;
width: 100%;
height: auto;
padding:15px 0px;
background: #fff;
border-radius: 8px;
box-sizing: border-box;
}

.fmg-ul{
float: left;
margin: auto;
width: 100%;
height: auto;
padding: 0;
}

.txt-fmg{
width: 85%;
margin: 52px 7.5% 0 7.5%;
font-size: 1.05rem;
line-height: 1.75em;
}

.h2-fmg{
float: left;
width: 100%;
margin: -49px 0 20px 0;
color:#ff7376;
font-size: 2.4rem;
font-weight: bold;
text-align: center;
}

.img-fmg{
width: 100%;
margin: 10px auto 0 auto;
}

.img-fmg span{
float: left;
width: 100%;
}

.fmg-img-r{
float: left;
width: 100%;
}

.fmg-img-l{
float: left;
width: 100%;
}

.fmg-margin{
float: left;
width: 100%;
margin: 0 0 30px 0;
}

.half-half-y{
float: left;
width: 100%;
margin: 0 0 25px 0;
}

.half-half-y li{
float: left;
width: 100%;
margin: 0 0 0 0;
padding: 0;
box-sizing: border-box;
}

.half-half{
float: left;
width: 100%;
margin: 0 0 25px 0;
}

.half-half li{
float: left;
width: 100%;
margin: 0 0 20px 0;
padding: 0;
box-sizing: border-box;
}

.half-half li p{
font-size: 1.05rem;
line-height: 1.75em;
}

.list01-box{
float: left;
width: 100%;
padding: 5px;
border: 5px solid #ffadaf;
border-radius: 10px;
box-sizing: border-box;
}

.list01{
float: left;
width: 100%;
margin: 0;
padding: 22px;
border: 2px solid #ffd2d3;
border-radius: 10px;
box-sizing: border-box;
}

.list01 p{
float: left;
width: 100%;
margin: 15px 0 0 0;
}

.list01-li-01{
position: relative;
float: left;
width: 100%;
margin: 0;
padding: 0 0 20px 0;
border-bottom: 1px solid #ffd2d3;
box-sizing: border-box;
}

.list01-li-02{
position: relative;
float: left;
width: 100%;
margin: 0;
padding: 20px 0;
border-bottom: 1px solid #ffd2d3;
box-sizing: border-box;
}

.list01-li-03{
position: relative;
float: left;
width: 100%;
margin: 0;
padding: 20px 0;
border-bottom: 1px solid #ffd2d3;
box-sizing: border-box;
}

.list01-li-04{
position: relative;
float: left;
width: 100%;
margin: 0;
padding: 20px 0 0 0;
box-sizing: border-box;
}

.num{
float: left;
width: 80px;
height: 80px;
}

.quarter{
float: left;
width: 100%;
}

.quarter ul{
position: relative;
float: left;
width: 90%;
height: 380px;
margin: 0 5% 125px 5%;
}

.quarter-img{
float: left;
width: 100%;
height: auto;
}

.quarter-txt{
position: absolute;
bottom: -100px;
left: 0;
width: 89%;
margin: 0 5.5%;
padding: 20px 20px;
border: 3px solid #e7bcbd;
border-radius: 6px;
background: #fff;
box-sizing: border-box;
font-size: 1.05rem;
line-height: 1.75em;
}

.quarter-txt p{
width: 90%;
margin: 0 5%;
}

.bookclub{
margin: 30px auto 0 auto;
}

.bookclub-bg{
float: left;
width: 100%;
height: 300px;
background: url(../img/bookclub/img02.jpg);
background-size: cover;
}

.book-exam{
float: left;
width: 100%;
margin: 0 0 40px 0;
padding: 20px 10px;
border: 2px solid #888;
border-radius: 8px;
box-sizing: border-box;
}

.book-exam-ul{
float: left;
margin: 0 0 15px 0;
padding: 0 0 15px 0;
}

.book-exam-ul .li01,.book-exam-ul .li02{
float: left;
width: 100%;
margin: 0 0 18px 0;
padding: 0 0 18px 0;
border-bottom: 1px dotted #999;
box-sizing: border-box;
}

.book-exam-ul .li03{
float: left;
width: 100%;
box-sizing: border-box;
}

.book-exam-ul-l{
float: left;
margin: 0;
}

.book-exam-ul-l li{
float: left;
width: 45%;
margin: 0 2.5% 15px 2.5%;
border: 1px solid #999;
box-sizing: border-box;
}

.kag{
box-shadow:0px 9px 14px rgba(155,155,155,.11);
}

.letter{
float: left;
width: 100%;
height: auto;
margin: 0 0 20px 0;
padding: 5px;
border: 6px solid #cdecfb;
background: #fff;
box-sizing: border-box;
}

.letter-wide{
float: left;
width: 100%;
height: auto;
margin: 0 0 20px 0;
padding: 5px;
border: 6px solid #cdecfb;
background: #fff;
box-sizing: border-box;
}

.letter-line{
float: left;
width: 100%;
padding: 10px;
border: 1px solid #eee;
border-radius: 3px;
background: #fffdf9;
box-sizing: border-box;
}

.letter-line p,.letter-line-wide p{
font-size: 1.05rem;
line-height: 1.75em;
}

.letter-line-wide{
float: left;
width: 100%;
padding: 10px;
border: 1px solid #eee;
border-radius: 3px;
background: #fffbf5;
box-sizing: border-box;
}

/* FAQ */
.faq{
float: left;
width: 90%;
margin: 0 5%;
}

.faq dt{
float: left;
width: 100%;
margin: 0 0 10px 0;
padding: 17px 15px 15px 70px;
border: 1px solid #aaa;
background: url(../img/q.png) no-repeat;
background-size: 40px;
background-position: 15px 10px;
background-color: #e4f5fd;
box-sizing: border-box;
}

.faq dd{
float: left;
width: 100%;
min-height: 152px;
margin: 0 0 25px 0;
padding: 17px 25px 15px 70px;
border: 1px solid #aaa;
background: url(../img/a.png) no-repeat;
background-size: 40px;
background-position: 15px 10px;
background-color: #fff;
box-sizing: border-box;
}

/* Course */
.age{
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 0 40px 0;
padding: 13px 10px 2px 10px;
border: 3px solid #aedbc8;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
}

.age a:link{
color: #333;
}

.age a:hover{
text-decoration: none;
}

.age li{
display: block;
float: left;
width: 31.3333%;
margin: 0 1% 10px 1%;
text-align: center;
box-sizing: border-box;
font-size: 0.65rem;
line-height: 1.3em;
}

.age-on a:link,.age-on a:hover,.age-on a:visited{
float: left;
width: 100%;
padding: 10px 0 9px 0;
border-radius: 8px;
border: 2px solid #04aa62;
background: #04aa62;
box-sizing: border-box;
color: #fff;
}

.age-off a{
float: left;
width: 100%;
border-radius: 8px;
border: 2px solid #90e18d;
background: #fafffb;
box-sizing: border-box;
color: #222 !important;
}

.age-off a:hover {
float: left;
width: 100%;
border-radius: 8px;
border: 2px solid #04aa62;
background: #04aa62;
box-sizing: border-box;
color: #fff !important;
}

.age-off a{
display: block;
width: 100%;
padding: 10px 0 9px 0;
border-radius: 8px;
box-sizing: border-box;
color: #222;
text-decoration: none;
}

.age-off-d,
.age-off-mapa,
.age-on-mapa{
float: left;
width: 48% !important;
margin: 0 1% 10px 1% !important;
}

.age-off-d a{
float: left;
width: 100%;
border-radius: 8px;
border: 2px solid #edb973;
background: #fff7f1;
box-sizing: border-box;
}
.age-off-mapa a{
float: left;
width: 100%;
padding: 10px 0 8px 0;
border-radius: 8px;
border: 2px solid #e0a2d6;
background: #fdf8fc;
box-sizing: border-box;
}

.age-off-d a:hover{
float: left;
width: 100%;
border-radius: 8px;
border: 2px solid #ec8a08;
background: #ec8a08;
box-sizing: border-box;
color: #fff;
}
.age-off-mapa a:hover,
.age-on-mapa a{
float: left;
width: 100%;
padding: 10px 0 8px 0;
border-radius: 8px;
border: 2px solid #d76ac6;
background: #d76ac6;
box-sizing: border-box;
color: #fff!important;
}
.age-on-mapa{
color: #fff!important;
}

.age-off-d a:link,.age-off-d a:visited{
display: block;
width: 100%;
padding: 7px 0 5px 0;
border-radius: 8px;
box-sizing: border-box;
color: #222 !important;
text-decoration: none;
}

.age-off-d a:hover{
color: #fff !important;
}

.age-on-d{
float: left;
width: 48% !important;
padding: 7px 0 5px 0;
border-radius: 8px;
border: 2px solid #ec8a08;
background: #ec8a08;
box-sizing: border-box;
}

.age-on-d a{
color: #fff !important;
}

.age-off-kd{
float: left;
width: 48% !important;
margin: 0 1% 10px 1% !important;
}

.age-off-kd a{
float: left;
width: 100%;
border-radius: 8px;
border: 2px solid #7ba6c6;
background: #f1f5f9;
box-sizing: border-box;
}

.age-off-kd a:hover{
float: left;
width: 100%;
border-radius: 8px;
border: 2px solid #3a79ab;
background: #3a79ab;
box-sizing: border-box;
color: #fff;
}

.age-off-kd a:link,.age-off-kd a:visited{
display: block;
width: 100%;
padding: 7px 0 5px 0;
border-radius: 8px;
box-sizing: border-box;
color: #222 !important;
text-decoration: none;
}

.age-off-kd a:hover{
color: #fff !important;
}

.age-on-kd{
float: left;
width: 48% !important;
padding: 7px 0 5px 0;
border-radius: 8px;
border: 2px solid #3a79ab;
background: #3a79ab;
box-sizing: border-box;
}

.age-on-kd a{
color: #fff !important;
}

.dowa{
width: 100% !important;
margin: 0 !important;
}

.month-sp{
width: 66%;
margin: 0 17% 10px 17%;
}

.ranking-box{
	float:left;
	width:100%;
	padding:10px;
	border:3px solid #ccc;
	border-radius:6px;
	box-sizing:border-box;
}

.ranking{
	float: left;
	width: 100%;
	margin: 0;
	box-sizing:border-box;
}

.ranking li{
	float:left;
	width:86%;
	margin:0 7% 20px 7%;
	box-sizing:border-box;
}

.r-rank{
	float:left;
	width:100%;
	padding: 4px 0 2px 0;
	background:#60BA9A;
	color:#fff;
	font-weight: bold;
	text-align:center;
}

.r-img{
	float:left;
	width:100%;
	margin:0 0 5px 0;
	padding:10px;
	border:1px solid #eee;
	background:#fceee6;
	box-sizing:border-box;
	text-align:center;
}

.r-img img{
	width:100%;
	border:1px solid #f2f2f2;
	box-shadow:0px 0px 8px 3px #e3e3e3;
}

.r-title{
	float:left;
	width:100%;
	margin:0 0 10px 0;
	padding:9px 4px 6px 4px;
	border:1px solid #D49435;
	background: #ffffff;
	box-sizing:border-box;
	font-size:1.2rem;
	line-height:1.25em;
	font-weight: bold;
	text-align: center;
}

.r-author{
	float:left;
	width:100%;
	box-sizing:border-box;
	font-size:1.1rem;
	line-height:1.4em;
	text-align: center;
}

.picture-book{
position: relative;
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 0 15px 0;
padding: 20px 20px 0 20px;
border: 3px solid #9bd1be;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
}

.picture-book li{
width: 100%;
padding: 0;
text-align: center;
}

.book-one{
float: left;
width: 48%;
margin: 0 1% 5px 1%;
padding: 10px 0 0 0;
border: 1px solid #bebebe;
background: #f5f5f5;
box-sizing: border-box;
}

.book-one a:link,
.book-one a:hover,
.book-one a:visited{
color: #222;
text-decoration: none;
}

.book-one .img{
width: 80%;
height: auto;
margin: 0 10%;
box-sizing: border-box;
overflow: hidden;
}

.book-one .title{
height: auto;
margin: 0 0 4px 0;
padding: 7px 10px 1px 10px;
font-size: 0.95rem;
font-weight: bold;
text-align: left;
line-height: 1.275em;
}

.book-one .author{
margin: 0 0 10px 0;
padding: 0px 10px 10px 10px;
border-bottom: 1px dotted#ccc;
font-size: 1.3rem;
line-height: 1.5em;
text-align: center;
}

.book-one .price{
width: 100%;
margin: 15px 0 10px 0 !important;
text-align: center;
}

.book-one .price span{
width: auto;
padding: 6px 6px 4px 6px;
border-radius: 20px;
border: 1px solid #c3c3c3;
background: #fff;
color:#222;
font-size: 0.8rem;
line-height: 1em;
font-weight: bold;
text-align: center;
}

.total{
float: left;
width: 70%;
margin: 9px 15% 12px 15%;
padding: 11px 0 10px 0;
border-radius: 4px;
background: #b786ac;
box-sizing: border-box;
color: #fff;
font-weight: bold;
text-align: center;
}

.substitute{
float: left;
width: 100%;
margin: 0 0 20px 0;
padding: 20px 26px;
border-radius: 5px;
box-sizing: border-box;
background: #fff;
}

/* FAQ */
.faq-box{
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.accordion ul {
	float: left;
	width:100%;
	padding:0;
	font-size: 1.4rem;
	line-height: 1.65em;
}

.accordion-q{
float: left;
width: 14%;
margin: 0 15px 0 0;
}

.accordion-a{
float: left;
width: 14%;
margin: 6px 15px 0 0;
}

.answer{
padding: 17px 15px 17px 30px;
}

.answer-box{
float: left;
width: 79%;
padding: 0 0 5px 0;
box-sizing: border-box;
}

.h3-accordion{
float: left;
width: 66%;
padding: 12px 0 0 5px;
color: #000;
}

.gridContainer {
	width:100%;
	height:100%;
	max-width:339px;
	min-width:320px;
}

/* Contact */
.input90{
 width: 90%;
 margin: 0 5% 0 5%;
 padding: 7px 10px 6px 10px;
 border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
}

.input80{
 width: 90%;
 margin: 0 5% 0 5%;
 padding: 7px 10px 6px 10px;
  border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
 /*　transform: scale(0.8);　*/
}

.input50{
 width: 90%;
 margin: 0 5% 0 5%;
 padding: 7px 10px 6px 10px;
  border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
}

.input30{
 width: 30%;
 margin: 0 45% 0 5%;
 padding: 7px 10px 6px 10px;
  border:1px solid #828282;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 16px;
}

.caution{
float: left;
width: 95%;
margin: 0;
color: #a4050f;
}

.back-bb{
width: 50%;
height: 50px;
margin: 0 auto;
background: #49b2e2;
border-radius: 8px;
color: #fff;
box-shadow: none;
border: none;
cursor: pointer;
font-size: 1.5rem;
font-weight: bold;
}

input[type=submit]{
width: 50%;
height: 50px;
margin: 0 auto;
background: #f57a54;
border-radius: 8px;
box-shadow: none;
border: none;
color: #fff;
cursor: pointer;
font-size: 1.5rem;
font-weight: bold;
}

.card-txt{
float: left;
width: 90%;
margin: 0 5% 2px 5%;
}

.card-txt2{
float: left;
width: 90%;
margin: 0 5% 30px 5%;
}

.txt-b15{
float: left;
width: 100%;
margin: 0 0 15px 0;
}

.txt-b20{
float: left;
width: 100%;
margin: 0 0 20px 0;
}

.txt-b30{
float: left;
width: 100%;
margin: 0 0 30px 0;
line-height: 1.7em;
}

.txt-b110{
float: left;
width: 100%;
margin: 0 0 110px 0;
}

.form-txt{
margin: 10px 0 0 5%;
font-size: 1.5rem;
line-height: 1.5em;
}

.form-txt-t{
margin: 0 0 5px 10%;
font-size: 1.5rem;
}

.form-box{
margin: 0 0 30px 0;
}

.back2{
width: 100%;
margin: 10px 0;
text-align: center;
}

.submit1{
width: 100%;
margin: 10px 0;
text-align: center;
}

.submit2{
width: 100%;
margin: 10px 0;
text-align: center;
}

select{
width: 80%;
margin: 0 10%;
padding: 6px 15px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}

.table-inquiry{
width: 100%;
margin: 0;
border-bottom: 1px solid #999;
}

.table-inquiry th{
display: table-cell;
float: left;
width: 100%;
padding: 10px 0;
border: 1px solid #888;
background: #f6f4f0;
box-sizing: border-box;
text-align: center;
}

.span1{
float: left;
margin: 0 0 0 10%;
}

.span2{
float: right;
width: auto;
margin: 6px 10% 0 0;
padding: 5px 10px 3px 10px;
border-radius: 6px;
background: #f46185;
color: #fff;
font-size: 1rem;
line-height: 1em;
}

.table-inquiry td{
display: table-cell;
float: left;
width: 100%;
padding: 13px 0;
border: 1px solid #888;
border-top: none;
border-bottom: none;
box-sizing: border-box;
}


.table-p{
width: 80%;
margin: 0 10%;
}

.radio-box{
margin: 0 0 0 10%;
line-height: 1.25em;
}

#Box1,#Box3{
display: none;
}

.check-txt{
width: 100%;
padding: 0 15px;
}

.formError .formErrorContent {
right: 150px;
left: 0;
}

.formError .formErrorArrow {
float: left;
	width: 15px;
	margin: -2px 0 0 -60px;
	position:relative;
}

.txt-b30-b40{
margin: 0 0 30px 0;
}

.contact-contact{
float: left;
width: 100%;
margin: 0 0 20px 0;
padding: 20px;
border: 4px solid #dfdfdf;
border-radius: 4px;
box-sizing: border-box;
}

.contact-contact dt{
margin: 0 0 10px 0;
padding: 0 0 5px 0;
border-bottom: 2px solid #d3835d;
color: #222;
font-weight: bold;
text-align: center;
}

.tel-tel{
font-size: 3.0rem;
font-weight: bold;
}

.privacy-privacy{
float: left;
width: 100%;
margin: 0 0 20px 0;
padding: 20px;
border: 4px solid #dfdfdf;
border-radius: 4px;
box-sizing: border-box;
}

.privacy-privacy dt{
margin: 0 0 10px 0;
padding: 0 0 5px 0;
border-bottom: 2px solid #d3835d;
color: #222;
font-weight: bold;
text-align: center;
}

.contact-box{
position: relative;
margin: 0 0 60px 0;
}

.contact-mail{
position: absolute;
left: 0;
right: 0;
bottom: -40px;
width: 90%;
margin: 0 5% 10px 5%;
padding: 7px;
border: 2px solid #ff9e80;
border-radius: 10px;
background: #fc6e42;
box-sizing: border-box;
color: #fff;
font-size: 1.2rem;
text-align: center;
}

.contact-tel{
position: absolute;
left: 0;
right: 0;
bottom: -82px;
width: 90%;
margin: 0 5%;
padding: 7px;
border: 2px solid #4F90B6;
border-radius: 10px;
background: #136799;
box-sizing: border-box;
color: #fff;
font-size: 1.2rem;
text-align: center;
}

.contact-tel-contact{
width: 220px;
margin: 10px auto 0 auto;
padding: 7px;
border: 2px solid #4F90B6;
border-radius: 10px;
background: #136799;
box-sizing: border-box;
color: #fff;
font-size: 1.5rem;
text-align: center;
}

.share-txt{
float: left;
width: 90%;
margin: 8px 5% 0 5%;
padding: 15px 0 0 0;
border-top: 1px dotted #ffadaf;
}

.apply-box{
display: block;
width: 98%;
margin: 35px 1% 0 1%;
text-align: center;
}

.apply-box a:hover{
text-decoration: none;
}

.apply-box p{
width: auto;
padding: 16px 0 12px 0;
border: 3px solid #ff9e80;
border-radius: 50px;
background: #fc6e42;
color: #fff;
font-size: 0.94rem;
}

.apply-box a{
text-decoration: none;
}

.fa-table-box{
float: left;
width: 100%;
margin: 25px 0 0 0;
}

.favorite-table{
width: 100%;
border-collapse: collapse;
font-size:1.3rem;
line-height: 1.35em;
}

.favorite-table th{
padding: 11px;
border: 1px solid #999;
box-sizing: border-box;
background: #ddd;
text-align: center;
}

.favorite-table td{
padding: 13px;
border: 1px solid #999;
box-sizing: border-box;
text-align: left;
}

.favorite-table td:nth-child(1){
width: 48%;
}

.favorite-table td:nth-child(2){
width: 38%;
}

.favorite-table td:nth-child(3){
width: 14%;
}

.favorite-table tr:nth-child(odd){
background: #f2f2f2;
}

.z-1000{
	position:relative;
	z-index:1000;
}


.back-box{
float: left;
width: 100%;
margin: -30px 0 10px 0;
}

.back a:link {
float: right;
width: auto;
padding: 5px 15px 2px 15px;
border-radius: 5px;
background: #248E69;
font-size: 1.3rem;
color: #fff;
}

.w-sp100p-pc80p{
width: 100%;
}

.month-pc{
width: 90%;
margin: 0 5% 10px 5%;
}

.preface{
float: left;
width: 100%;
padding: 20px 30px;
border: 3px solid #f0b7c6;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
font-size: 1.0rem;
line-height: 1.75em;
}

.preface2{
float: left;
width: 100%;
padding: 18px 20px;
border: 2px solid #ddd;
background: #fff;
box-sizing: border-box;
font-size: 1.05rem;
line-height: 1.75em;
}

.apply-b{
position: fixed;
bottom: 185px;
right: 0;
z-index: 10000;
width: 42px;
height: 200px;
}

.apply-b img{
width: 100%;
}

/* 続きを読むボタン */
.wrapper{
display: table;
width: 100%;
margin: 30px auto 0 auto;
box-sizing: border-box;
font-size: 1.6rem;
line-height: 1.5;
}
.text_wrapper{
position: relative;
width: 92%;
margin: 0 4%;
padding: 20px 25px;
margin-bottom: 15px;
border: 3px solid #f0b7c6;
border-radius: 5px;
background: #fff;
box-sizing: border-box;
font-size: 1.0rem;
}
.text{
height: 125px;
overflow: hidden;
}
.show_more{
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 30px;
padding: 60px 0 12px 0;
text-align: center;
line-height: 30px;
background: linear-gradient(180deg, rgb(255, 255, 255,0) 0%, rgb(255, 255, 255,1) 70%);
cursor: pointer;
transition: bottom 0.2s;
font-weight: bold;
}
.show_more span{
width: auto;
padding: 10px 50px;
border-radius: 30px;
background: #c24063;
box-sizing: border-box;
color: #fff;
}

.active{
background: none;
bottom: -30px;
}

.zei{
width: 100%;
margin: 10px 0 0 0;
padding: 14px 0 12px 0;
border: 2px solid #f9bb9e;
box-sizing: border-box;
line-height: 1.6em;
text-align: center;
}

.h-box{
display: table;
width: 100%;
}

.substiute{
display: flex;
flex-wrap: wrap;
width: 100%;
padding: 15px 10px 15px 10px;
border: 3px solid #bacad9;
border-radius: 6px;
background: #fff;
box-sizing: border-box;
}

.substiute li{
width: 48%;
margin: 10px 1% 0 1%;
}

.substiute p{
width: 100%;
margin: 6px 0 8px 0;
font-size: 0.9rem;
line-height: 1.5em;
box-sizing: border-box;
}

.substiute a:link,
.substiute a:hover,
.substiute a:visited{
display: block;
width: 100%;
padding: 10px 5px;
border: 1px dotted #d9be99;
box-sizing: border-box;
text-align: center;
color: #333;
text-decoration: none;
}

.b-title{
height: auto;
padding: 7px 7px 1px 7px;
font-size: 0.95rem;
font-weight: bold;
text-align: left;
line-height: 1.275em;
}

.b-price{
width: 100%;
margin: 12px 0 0 0 !important;
text-align: center;
}

.b-price span{
width: auto;
padding: 6px 4px 4px 4px;
border-radius: 20px;
border: 1px solid #c3c3c3;
background: #fff;
color:#222;
font-size: 0.72rem;
line-height: 1em;
font-weight: bold;
text-align: center;
}

}
/* -345px //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* PC : 350px -  */
@media print, screen and (min-width: 350px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:999px;
	min-width:768px;
}

.symbol{
top: 53px;
width: 232px;
}



}
/* -999px //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* PC : 660px - */
@media print, screen and (min-width: 660px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:999px;
	min-width:768px;
}

.symbol{
top: 75px;
width: 420px;
}



}
/* - px //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* PC : 768px -  999px */
@media print, screen and (min-width: 768px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:999px;
	min-width:768px;
}

.sp{
display: block;
}

.pc{
display: none;
}

.contact-mail{
bottom: -24px;
padding: 12px;
}

.contact-tel{
display: none;
}

.wrap-cont-y{
width: 90%;
margin: 0 5% 0 5%;
}

}
/* 768px-999px //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* PC : 1000px -  1200px */
@media print, screen and (min-width: 1000px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:1200px;
	min-width:1000px;
}

.wrap-cont{
width: 80%;
margin: 0 10%;
}

.h3-sub-sub{
width: 70%;
margin: 0 15% 20px 15%;
}

.quarter-txt{
bottom: -40px;
}

.letter-box{
float: left;
width: 86%;
margin: 0 7%;
}

/*
.letter{
width: 48%;
height: 355px;
margin: 0 1% 25px 1%;
padding: 5px;
}
*/
/*
.letter-wide{
width: 48%;
height: 450px;
margin: 0 1%;
padding: 5px;
}
*/
.letter-line{
height: auto;
padding: 15px 24px 10px 24px;
}

.letter-line-wide{
width: 100%;
height: auto;
padding: 15px 24px 10px 24px;
}


.contact-mail{
bottom: -66px;
}

.symbol{
top: 116px;
width: 356px;
}

.share-txt{
float: left;
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 50px;
border-left: 1px dotted #ffadaf;
border-top: none;
box-sizing: border-box;
}

.apply-box{
width: 92%;
margin: 35px 4% 0 4%;
}

.apply-box p{
padding: 19px 0 15px 0;
font-size: 1.15rem;
}

.pcnav{
float: left;
width: 90%;
height: 70px;
margin: 0 5%;
}

.w-sp100p-pc80p{
width: 80%;
margin: 0 10%;
}

.w100p-w{
width: 90%;
margin: 15px 5% 0 5%;
}

.quarter ul{
position: relative;
float: left;
width: 90%;
height: 410px;
margin: 0 5% 50px 5%;
}

.book-one .price span{
padding: 6px 12px 4px 12px;
font-size: 0.9rem;
}

.bc-bg{
width: 100%;
height: 360px;
background-image: none;
}

.age li{
font-size: 0.8rem;
line-height: 1.3em;
}

@media print, screen and (min-width: 1000px) {
.apply-b{
bottom: 275px;
right: 100px;
}
}

.path-box{
margin: 0 0 40px 0;
}


.h3-sub,
.h3-sub-sub{
font-size: 1.35rem;
line-height: 1.3em;
}

}
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* PC : 1200px -  1300px */
@media print, screen and (min-width: 1200px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:1499px;
	min-width:1200px;
}

.month-pc{
width: 80%;
margin: 0 10% 10px 10%;
}

.book-one .price span{
font-size: 1.02rem;
}

}

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

/* PC : 1500px -   */
@media print, screen and (min-width: 1500px) {

.gridContainer {
	width:100%;
	height:100%;
	max-width:100%;
	min-width:1500px;
}

.w100p-w{
width: 76%;
margin: 20px 12% 0 12%;
}

.wrap-cont-y{
width: 76%;
margin: 0 12% 0 12%;
}

.bookclub{
width: 76%;
margin: 30px auto 0 auto;
}

.wrap-cont{
width: 76%;
margin: 0 12%;
}

}