@charset "utf-8";
/*  style　[  共通 ]
=================================================================== */

	
body{
  background: #fff;
}

.flex-box{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.table-box {
	display: table;
	margin: 0 auto;
	width: auto;
}

.text-center-pc {
	text-align: center;
}

/*----------------------------------------------
   header
---------------------------------------------*/


h1 {
	max-width: 150px;
	margin: 15px auto;
}
h1 img {
    vertical-align: middle;
  filter: brightness(0.4);
  filter: contrast(200%);
  filter: drop-shadow(2px 2px 1px #fff) ;
}

.stripe {
	background-image: linear-gradient(-45deg, #333 25%, #000 25%, #000 50%, #333 50%, #333 75%, #000 75%, #000);
	background-size: 4px 4px;
  }
.nav-list {
	list-style: none;
	color: #fff;
	display: flex;
	justify-content: space-around;
	padding: 10px 0;
	line-height: 0;
	max-width: 1200px;
	margin: 0 auto;
}

.nav-list a {
	color: #fff;
}


.main-img {
	display: block;
	margin: 100px auto 0 auto;
}

@media (min-width: 768px) { 
	.main-img {
		width: 70%;
	}
 }

@media (min-width: 992px) { 
	.main-img {
		width: 60%;
	}
 }



/*----------------------------------------------
   見出し
---------------------------------------------*/

.main-h2 {
	text-align:center;
	font-size: 2.3em;
	font-weight: 700;
}


/*----------------------------------------------
   about
---------------------------------------------*/
#about {
	background-image: linear-gradient(181deg, rgba(252, 252, 183, 1) 10%, rgba(255, 255, 255, 1));
	padding: 180px 0 5em 0;
	position: relative;
}


/** shape devider **/
.custom-shape-divider-top-1705295058 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1705295058 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-divider-top-1705295058 .shape-fill {
    fill: #FFFFFF;
}

/** For mobile devices **/
@media (max-width: 767px) {
    .custom-shape-divider-top-1705295058 svg {
        width: calc(100% + 1.3px);
        height: 45px;
    }
}


/* main-box */
.main-box {
	max-width: 900px;
}


/* ファスト動画とは */
.fast {
	justify-content: center;
	margin: 80px auto 150px auto;
	flex-wrap: wrap;
}
.fast_text-box p {
	margin-bottom: 1em;
	line-height: 1.8;
}

@media (min-width: 768px) {
	.fast_text-box {
		width: 50%;
		margin: 0 5%;
	}
	.fast_img-right {
		width: 40%;
	}
 }


@media (min-width: 992px) {
	.fast_text-box {
		width: 50%;
		margin: 0 5%;
	}
	.fast_img-right {
		width: 35%;
	}
}


@media (min-width: 1200px) {
	.fast_text-box {
		width: 60%;
		margin: 0 2%;
	}
	.fast_img-right {
		width: 35%;
	}
}




/* チャレンジ */
.challenge {
	justify-content: space-between;
	margin: 80px auto 150px auto;
	flex-wrap: wrap;
}

.challenge-item {
	width: 45%;
	border: #EA6872 1px solid;
	background-color: #fff;
}
.challenge-item h3 {
	background-color: #EA6872;
	color: #fff;
	text-align: center;
	font-weight: 600;
	padding: 10px 0;
	font-size: 1.5em;
}
.challenge-item p {
	text-align: center;
	font-weight: 600;
	padding: 30px 0;
}
.font-L {
	font-size: 1.3em;
	font-weight: bold;
}
.pink {
	color: #EA6872;
}

/* media */

.media {
	justify-content: space-around;
	margin: 80px auto 150px auto;
	flex-wrap: wrap;
}

.media-item01 {
	width: 40%;
}
.media-item02 {
	width: 40%;
}


.check-list {
	list-style: none;
	padding: 2em;
	border: #EA6872 1px solid;
	background-color: #fff;
	border-radius: 5px;
}
.check-list li {
	font-size: 1.2em;
	line-height: 1.8;
	margin: 0;
}



/* contents */

.contents {
	margin: 50px auto 100px auto;
}
.contents-text {
	display: table;
	margin: 0 auto 3em auto;
}


/*----------------------------------------------
   flow
---------------------------------------------*/
#flow {
	background: #fff;
	position: relative;
}

.flow-contents {
	justify-content: center;
	flex-wrap: wrap;
}
.flow-box {
	width: 35%;
	background-color: #EFEFEF;
	margin: 2%;
}
.flow-box span {
	background-color: #EA6872;
	font-weight: 700;
	color: #fff;
	font-size: 20px;
	height: 50px;
	width: 50px;
	line-height: 50px;
	display: inline-block;
	text-align: center;
}
.flow-box p {
	text-align: center;
	font-size: 1.2em;
	margin: 0.5em 0;
}
.flow-box p small {
	font-size: 12px;
}




/*----------------------------------------------
  plan
---------------------------------------------*/
#plan {
	padding: 5em 0;
}

table.price-board {
	border-collapse: collapse;
	margin: 1em auto;
	padding: 0;
	width: 850px;
	table-layout: fixed;
  }
  
  table.price-board tr {
	background-color: #fff;
	padding: .35em;
	border: 2px solid #eee;
  }
  /*table.price-board tr:last-child{
	border: none;
  }*/
  table.price-board th{
	padding: 2em 1.5em;
	border-right: 2px solid #fff;
	text-align: center;
  }
  table.price-board td {
	padding: 2em .5em;
	border-right: 2px solid #eee;
	text-align: center;
  }
  /*table.price-board th {
	font-size: .85em;
  }*/
  table.price-board thead tr{
	background-color: #50535d;
	color:#fff;
  }
  table.price-board tbody th {
	  border-right: 2px solid #eee;
  }
  th.non {
	  border-right: none;
  }
  .txt{
	 text-align: left;
	 font-size: .85em;
  }
  .price{
	color: #000;
	font-weight: bold;
	font-size:1.5em;
	font-family: Arial, Helvetica, sans-serif;
  }
  .price span {
	  font-size: .6em;
  }
  .green_bk{
	background:#78C4A6;
  }
  .green-txt{
	color:#78C4A6;
  }
  .blue_bk{
	background:#5A9FD6;
  }
  .blue-txt{
	color:#5A9FD6;
  }
  .orange_bk{
	background:#F49C42;
  }
  .orange-txt{
	color:#F49C42;
  }
  .pink_bk{
	background:#EA6872;
  }
  .pink-txt{
	color:#EA6872;
  }

  .notice-plan {
	max-width: 850px;
	margin: 1em auto;
  }


  .btn_red {
	background:#e81010;
	border: 2px solid #e81010;
	color: #fff !important;;
	padding: 1em;
	border-radius:20px;
	display:block;
	text-decoration:none;
	font-size:1em;
	text-align: center;
	margin: 1em auto;
	max-width: 600px;
  }
  .btn_red:hover{
	background: #fff;
	border: 2px solid #e81010;
	color: #e81010!important;
	transition: .2s;
  }


  table .btnarea td {
	padding: .2em .5em;
	border-right:none
  }



/*----------------------------------------------
   archive
---------------------------------------------*/
#archive {
	background: #fff;
	padding: 5em 0;
}
.movie {
	margin: 3em auto;
	justify-content: space-around;
	flex-wrap: wrap;
}
.movie-box {
	width: 30%;
	margin: 15px 0;
}
video.vid_main {
	width: 100%;
	/*max-width: 812px;PC版での最大幅*/
	}
.movie-box a span {
	display: table;
	margin: 5px auto;
}


/*----------------------------------------------
   access
---------------------------------------------*/


#access {
	margin: 0;
	padding: 0;
}
#access iframe {
	width: 100%;
	height: 350px;
	margin: 0;
	padding: 0;
}

/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
	#access iframe {
	height: 250px;
}

}



/*----------------------------------------------
   footer
---------------------------------------------*/

footer {
	background: #000;
	padding: 3em 0 0 0;
	margin: -7px 0 0 0;
	color: #000;
	position: relative;
	text-align: center;
}
.footer-box {
	display: table;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}
.footer-box h2 {
	margin-bottom:5px;
	font-size: 1.7em;
	line-height: 1.5;
}
.footer-box h2 span {
	display: block;
	font-size: 0.6em;
}

.copy {
	background:#fff;
	color: #666;
	margin: 3em 0 0 0;
	padding: 5px 0;
	line-height: 1;
	font-size: 0.8em;
}


/* Back To Top*/
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 100;
}

.backtoTop {
  background-color: #FFF;
  border-radius: 5px;
  color: #e81010;
  border: 1px solid #e81010;
  display: block;
  font-size: 17px;
  font-size: 1.7rem;
  text-align: center;
  line-height: 50px;
  width: 50px;
  height: 50px;
}
.backtoTop:hover {
  background-color: #e81010;
  border: 1px solid #fff;
  color: #FFF;
  text-decoration: none;
}




// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }