@charset "UTF-8";

.star-area {
  width: 100%;
  position: relative;
  overflow: hidden;
}

#wrapper h2 {
  font-weight: normal;
  text-align: left;
}

/* message
--------------------------------------------------------*/
#wrapper .inner {
  width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}

#wrapper h1 {
  margin-top: 20px;
  text-align: center;
  position: relative;
  z-index: 1000;
}
@media (max-width: 767px) {
  #wrapper .inner {
    width: 92%;
    padding: 0 3%;
  }
  #wrapper h1 img {
    width: 70%;
    height: auto;
  }
}
@media (min-width: 768px) {
	.pc {
			display: block;
	}
}
@media (max-width: 767px) {
	.pc {
			display: none;
	}
}

.box-y {
  background: url(../img/content/bg.png) center top repeat-x;
  background-size:  cover;
}
.box-y h2 {
  font-size: 32px;
  color: #eb5c01;
  margin-bottom: 30px;
  letter-spacing: 0.2em;
}
.num-list {
  margin: 0;
}
.num-list li {
  background-position: left center;
  background-repeat: no-repeat;
  list-style: none;
  padding-left: 40px;
  margin-bottom: 24px;
  font-size: 22px;
}
.num-1 { background-image: url(../img/content/num-1.png); }
.num-2 { background-image: url(../img/content/num-2.png); }
.num-3 { background-image: url(../img/content/num-3.png); }
.num-4 { background-image: url(../img/content/num-4.png); }
.num-5 { background-image: url(../img/content/num-5.png); }

@media (max-width: 767px) {
  .box-y h2 {
    text-align: center !important;
  }
  .num-list li {
    font-size: 16px !important;
  }
}

.list-box {
/*  display: table;*/
  margin-bottom: 55px;
	padding:0 16px;
}
.list-box:first-child {
  margin-top: 50px;
}
.list-box:last-child {
  margin-bottom: 74px;
}
/*
.list-img,
.list-txt {
  display: table-cell;
}
*/
.list-img {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 40px;
}

.contents__img{
	text-align: center;
	font-weight: bold;
}

.sp__only{
display: none;
}
@media (max-width: 767px) {
	.sp__only{
display: block;
}
	.pc__only{
	display: none;
}
}


@media (max-width: 767px) {
	.contents__img{
	width: calc(50% - 8px);
}
}
.list-txt {
  padding-left: 50px;
  vertical-align: middle;
}
.list-txt h2 {
  margin-bottom: 12px;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 40px;
  letter-spacing: 0.2em;
	font-size: 30px;
}
.list-txt p {
  font-size: 18px;
  line-height: 2em;
	margin-bottom: 12px;
}
.list-txt p b {
  font-size: 20px;
}
.list-txt span {
  font-size: 13px;
	letter-spacing: 0.2em;
}
.list-txt span.green {
	color: #18933d;
}
.list-txt span.red {
	color: #d71718;
}
.list-txt span.purple {
	color: #9966cc;
}

	.list-img p{
		padding-bottom: 16px;
	}
@media (max-width: 767px) {
/*
  .list-img {
    width: 100%;
    text-align: center;
  }
  .list-img img {
    width: 80%;
  }
  
  .list-img {
    width: 30%;
  }

  .list-img,
  .list-txt {
    display: block;
  }
*/
	
	.list-img{
		margin-bottom: 16px;
		
	}
	
	.list-img p{
		font-size: 16px;
	}
  .list-txt h2 {
    margin-bottom: 10px;
    padding-left: 0px;
    letter-spacing: 0.2em;
    text-align: center !important;
  }
  
  .list-txt {
    padding-left: 10px;
    vertical-align: middle;
  }
  .list-txt p {
    font-size: 16px;
    line-height: 2em;
		margin-bottom: 6px;
  }
  .list-txt p.sp-t-align {
  	text-align: center;
	}
	.list-txt p b {
		font-size: 18px;
	}
	.list-txt span {
		font-size: 11px;
		letter-spacing: 0.7em;
		vertical-align: text-top;
	}
}

.color-g { color: #18933d; }
.color-r { color: #d71718; }
.color-p { color: #9966cc; }

h2.color-g { background-image: url(../img/content/icon-star-g.png); }
h2.color-r { background-image: url(../img/content/icon-star-r.png); }
h2.color-p { background-image: url(../img/content/icon-star-p.png); }

@media (max-width: 767px) {
  h2.color-g { background-image: none; }
  h2.color-r { background-image: none; }
  h2.color-p { background-image: none; }

  .list-txt h2:before,
  .list-txt h2:after {
    content: "";
    width: 23px;
    height: 23px;
    display: inline-block;
  }
  .list-txt h2:before {
    margin-right: 12px;
  }
  .list-txt h2:after {
    margin-left: 6px;
  }
  .list-txt h2.color-g:before,
  .list-txt h2.color-g:after {
    background-image: url(../img/content/icon-star-g.png);
  }
  .list-txt h2.color-r:before,
  .list-txt h2.color-r:after {
    background-image: url(../img/content/icon-star-r.png);
  }
  .list-txt h2.color-p:before,
  .list-txt h2.color-p:after {
    background-image: url(../img/content/icon-star-p.png);
  }
}

.column {
  background: url(../img/common/line-dot-L.png) left top repeat-x;
  padding-top: 50px;
  text-align: justify;
  text-justify: inter-ideograph;
  padding-bottom: 100px;
}
.column h2 {
  margin-bottom: 40px;
  text-align: center !important;
}
.column p {
  font-size: 18px;
  line-height: 1.9em;
}
@media (max-width: 767px) {
  .column {
    padding-bottom: 40px !important;
  }
  .column h2 {
    margin-bottom: 40px;
    padding-top: 40px;
    text-align: center !important;
  }
  .column p {
    font-size: 16px;
    line-height: 1.8em;
  }
}

/* star
--------------------------------------------------------*/
.star {
  width: 455px;
  height: 441px;
  background: url(../img/illust/star_01.png) no-repeat;
  position: absolute;
  z-index: 1;
  display: block;
}

.star-1 { top: 1%; left: -100px; transform:rotate(60deg); }
.star-2 { top: 10%; right: -5%; transform:rotate(-56deg); }
.star-3 { top: 24.5%; left: 16%; transform:rotate(-56deg); }
.star-4 { top: 39%; right: -5%; transform:rotate(-52deg); }
.star-5 { top: 62.5%; right: 10%; transform:rotate(-56deg); }

@media (max-width: 767px) {
  .star {
    width: 200px;
    height: 194px;
    background-size: contain;
  }
}





/* class-table
--------------------------------------------------------*/
.class-table-bg {
  background-image:
    url(../img/howto/time-table-bg-top.png),
    url(../img/howto/time-table-bg-bottom.png);
  background-position:
    center top,
    center bottom;
  background-repeat:
    no-repeat;
  padding: 7px 0;
  margin-bottom: 10px;
  position: relative;
}
.class-table-bg-c {
  background: url(../img/howto/time-table-bg-center.png) center top repeat-y;
  padding: 0 4px;
}
.class-table {
  background: url(../img/howto/time-table-bg-center.png) center top repeat-y;
  margin-bottom: 0;
}
.class-table th,
.class-table td {
  font-size: 20px;
}
.class-table th b {
	font-size: 26px;
	letter-spacing: 0.1em;
}
.class-table th {
  color: #0058a4;
  font-weight: normal;
  letter-spacing: 1px;
  border-right: 2px solid #0058a4;
	border-bottom: 2px solid #0058a4;
  padding: 80px 35px 10px 40px;
  white-space: nowrap;
  position: relative;
	text-align: center;
	line-height: 1.4em;
}
.class-table td.contents {
  padding: 15px 10px 15px 10px;
	vertical-align: top;
	width: 230px;
/*	color: #0058a4;*/
}
.class-table td {
  padding: 15px 20px 15px 0px;
}
.txt-r {
  text-align: right;
}
.txt-c {
  text-align: center;
}
.txt-s {
  font-size: 18px;
}

/* margin,padding */
.class-table tr td.mt {
  padding-top: 20px
}
.time-tclass tr:last-child th,
.time-tclass tr:last-child td,
.class-table tr td.mb {
  padding-bottom: 20px;
}
.class-table tr td.border {
	border-bottom: 2px solid #0058a4;
}
.class-table tr td.b-dot {
	border-bottom: 1px dashed #0058a4;
}
.class-table tr th.b-clear {
	border-bottom: none;
}
.class-table-bg + p {
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .class-table-bg {
    background-size: contain;
    padding: 0.7% 0;
    margin-bottom: 10px;
  }
  .class-table-bg-c {
    background-size: contain;
  }
  .class-table th {
    padding: 6px 5px;
    letter-spacing: 0px;
    border-right: 1px solid #0058a4;
    vertical-align: middle;
  }
	.class-table td.contents {
  padding: 6px 10px 0px;
	vertical-align: top;
	width: 100%;
	border-bottom: none !important;
	color: #0058a4;
	}
  .class-table td {
    padding: 3px 8px 6px 26px;
		width: 100%;
		float: left;
  }
  .class-table th,
  .class-table td {
    font-size: 12px;
  }
	.class-table th b {
	font-size: 16px;
  }
  .txt-s {
    font-size: 12px;
  }
  .class-table-bg + p {
    font-size: 12px;
  }
  #sp_txt {
	  font-size:12px;
	  margin: 0 0 2px -5px;
  }
  .time-table-bg + p.mbc {
    margin-bottom: 20px;
  }
	.class-table tr td.mt {
  padding-top: 6px
	}
	.time-tclass tr:last-child th,
	.time-tclass tr:last-child td,
	.class-table tr td.mb {
		padding-bottom: 6px;
	}
	.time-tclass tr:last-child th,
	.time-tclass tr:last-child td,
	.class-table tr td.mb.clear {
		padding-bottom: 0px;
	}
	.class-table tr th,.class-table tr td.border {
	border-bottom: 1px solid #0058a4;
}
}

/* icon */
.icon {
  width: 80px;
  height: 80px;
  background-position: center;
  background-repeat: no-repeat;
	background-size: 100%;
	position: absolute;
	left: 50%;
    transform: translateX(-50%);
	top: 45px;
}
.tsukushi { background-image: url(../img/content/class-illust00.png); }
.nazuna { background-image: url(../img/content/class-illust01.png); }
.tanpopo { background-image: url(../img/content/class-illust02.png); }
.himawari { background-image: url(../img/content/class-illust03.png); }
.momizi { background-image: url(../img/content/class-illust04.png); }
.sakura { background-image: url(../img/content/class-illust05.png); }


@media (max-width: 767px) {
  .time-table tr:first-child th .timeicon {
    top: 0.5em;
  }
  .timeicon {
    width: 24px;
    height: 24px;
    left: 0px;
    -webkit-background-size: 100%;
    background-size: 100%;
  }
 .icon {
  width: 50px;
	height: 50px;
	left: 50%;
	top: 18%;
}
}

/*文字に色をつける*/
.exercise__text b {
  color: #eb5c01 !important;
  font-weight: normal;
	font-weight: bold;
}

/* icon */
.listicon {
  display: inline-block;
	width: 24px;
  height: 24px;
	vertical-align: middle;
  margin-right: 8px;
}
.listicon.star-bl {
  background: url(../img/common/listicon-star-bl.png) left center no-repeat;
}
.listicon.star-gr {
  background: url(../img/common/listicon-star-gr.png) left center no-repeat;
}
.listicon.star-or {
  background: url(../img/common/listicon-star-or.png) left center no-repeat;
}
.listicon.star-pe {
  background: url(../img/common/listicon-star-pe.png) left center no-repeat;
}
.listicon.star-ye {
  background: url(../img/common/listicon-star-ye.png) left center no-repeat;
}
@media (max-width: 767px) {
  .listicon {
		width: 10px;
    height: 10px;
    background-size: 100% !important;
    white-space: nowrap;
		margin-right: 5px;
  }
}