@charset "utf-8";

/*-----------------------------------------------------
bootstrap
-------------------------------------------------------*/
.btn{
  background: #231816;
  border: none;
}
.btn-lg{
  padding: 1rem 3rem;
}
.card{
  border: 2px solid #231816;
  border-radius: 1rem;
}
.card a{
  text-decoration: none;
}
.card-header{
  background: #231816;
  color: #fff;
  border-radius: 0.5rem 0 0!important;
}
.bg-primary{
  background-color: #f1527a!important;
}

.fs-1--lg{
  font-size: 3rem!important;
}

/*-----------------------------------------------------
module
-------------------------------------------------------*/
.mt-sec{
  margin-top: 15rem;
}
.text-pink{
  color: #f1527a;
}
.marker{
  border-bottom: 5px dotted #fef000;
  line-height: 1;
}
.marker--under{
  padding: 0 0.25rem;
  border-bottom: 0;
  background: linear-gradient(transparent 50%, #fef000 50%);
}
.btn--amazon{
  background: #e47911;
  white-space: nowrap;
}
.btn--rakuten{
  background: #bf0000;
  white-space: nowrap;
}
.btn--ebook{
  background: #ffcc33;
  white-space: nowrap;
}
.btn--pink{
  background: #f1527a;
  white-space: nowrap;
  color: #fff;
}
.youtube{
  background: #f00;
  font-size: 2rem;
  color: #fff;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
}
.youtube-text{
  color: #f00;
}

.fukidashi {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
}

.fukidashi::before,
.fukidashi::after {
  content: '';
  width: 2px;
  height: 40px;
  background-color: #231816;
}

.fukidashi--white::before,
.fukidashi--white::after {
  background-color: #fff;
}

.fukidashi--chalk::before,
.fukidashi--chalk::after {
  width: 5px;
}

.fukidashi::before {
  margin-right: 1.5rem;
  transform: rotate(-35deg)
}
.fukidashi::after {
  margin-left: 1.5rem;
  transform: rotate(35deg)
}
.fukidashi-top-copy{
  margin: -3em -4em 0px 0;;
}

.c-underline--stripe{
  padding: 0 0 .5em;
  background: 
    linear-gradient(
      45deg,
      transparent 25%,#fecdcd 25%,
      #fecdcd 50%,transparent 50%,
      transparent 75%, #fecdcd 75%
    )
    left bottom/0.5rem 0.5rem repeat-x;
} 

.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrowcontainer {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100px;
	height: 100px;
	-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
	        transform: translate(-50%, -50%) rotateZ(0deg);
}

.renewal{
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  text-align: left;
}

.renewal__title {
  width: 30em;
  margin: .4em 0 0;
  font-weight: bold;
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  text-align: center;
}
@media (max-width: 991px) {
  .renewal__title {
    width: 17em;
    top: -2em;
  }
}
.renewal--mondaishu,
.renewal--tangocho,
.renewal--kakomon {
  border: 1px solid #fff;
}
.renewal__title--mondaishu,
.renewal__title--tangocho,
.renewal__title--kakomon{
  color: #fff;
}
.renewal__title--mondaishu{
  background: #7a9fb5;
}
.renewal__title--tangocho{
  background: #8ca588;
}
.renewal__title--kakomon{
  background: #907965;
}

.bg-flow{
  margin-bottom: 7rem;
  position: relative;
  padding: 5rem 0 2.5rem;
  background: #fff;  
}
.bg-flow:after{
  content: '';
  display: block;
  background-color: #fff;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  width: 100%;
  position: absolute;
  z-index: 1;
  height: 5rem;
  bottom: -9.9rem;
}
.bg-flow.series:after{
  background: #ede1d6;
  bottom: -4.9rem;
}
.bg-flow.type:after{
  bottom: -11.9rem;
}
.bg-flow.eikentext--mondaishu:after{
  background: #7a9fb5;
  bottom: -4.9rem;
}
.bg-flow.eikentext--tangocho{
  margin-bottom: 0;
}
.bg-flow.eikentext--tangocho:after{
  background: #8ca588;
  bottom: -4.9rem;
}
.bg-flow.eikentext--kakomon:after{
  background: #907965;
  bottom: -4.9rem;
}
.no-indent{
  text-indent: 0;
}

/* lightbox
------------------------------------------------*/
.lb-outerContainer{
  background: none;
}

/*-----------------------------------------------------
header
-------------------------------------------------------*/
header{
  margin-bottom: 0!important;
  position: relative;
  padding: 5rem 0 2.5rem;
  background: #f8f6f3!important;   
}
@media (max-width: 767px) {
  header{
    padding: 0!important;
  }
}
header:after{
  background-color: #f8f6f3!important;
  bottom: -5rem!important;
}
@media (max-width: 767px) {
  header:after{
    display: none!important;
  }
}
.kokuban{
  margin:0 auto;
  padding:1em;
  background: url(../images/img_eraser.png) no-repeat left 30px bottom #0B614B;
  background-size: 80px;
  border:8px ridge chocolate;
}
@media (max-width: 767px) {
  .kokuban{
    padding-bottom: 50px;
  }
}
.fv-lead__text{
  color: #f1527a;
}
.fv-box{
  padding: 3rem 1rem 0;
  margin: 0 0 1rem;
  border: double 10px #231816;
  background: #fff;
}
@media (max-width: 991px) {
  .fv-box{
    margin: 2rem 0;
  } 
}
.card--fv-series{
  position: relative;
  margin: 0 auto!important;
  max-width: 35rem;
}
.fv-frog{
  position: absolute;
  left: -8rem;
  bottom: 1rem;
}
.teacher-thumb{
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5);
}
@media (max-width: 991px) {
  .card--fv-series{
    margin-left: 6rem;
  }
  .fv-frog{
    width: 10rem;
    left: -4rem;
  }
  .fv-shoei{
    margin-left: 4rem;
  }
}
@media (max-width: 1399px) {
  .fv-youtuber-row{
    display: flex!important;
  }
}
@media (max-width: 1199px) {
  .fv-youtuber-row{
    display: block!important;
  }
}
@media (max-width: 767px) {
  .fv-youtuber-row{
    display: flex!important;
  }
}
.card--type{
  position: relative;
  margin-top: 3rem!important;
  padding: 2rem;
}
.card-title--type{
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  padding: 1rem;
  background: #f1527a;
  color: #fff;
  white-space: nowrap;
  border-radius: 0.25rem;
}
.type-text{
  display: inline-block;
  margin-left: 2rem;
  padding-bottom: 0.5rem;
  background: url(../images/parts_fukidashi.png) no-repeat left bottom;
  background-size: contain;
  background-position: bottom;
}
@media (min-width: 1200px) {
  .type-text{
    padding-bottom: 2rem;
  }
}
@media (max-width: 991px) {
  .card--type{
    margin-top: 5rem!important;
    padding: 2rem 0 0;
  }
  .type-text{
    margin-left: 0;
    padding-bottom: 2rem;
  }
}

/*-----------------------------------------------------
lao
-------------------------------------------------------*/
.lao{
  margin: 5rem 0;
}

/*-----------------------------------------------------
wakaranai
-------------------------------------------------------*/
.card--wakaranai{
    position: relative;
    margin-right: 20px;
}
.card--wakaranai:after{
    content: '';
    position: absolute;
    top: 50%;
    right: -21px;
    transform: translateY(-50%);
    border-left: 20px solid #231816;  /* 好みで色を変えてください */ 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
@media (max-width: 991px) {
  .card--wakaranai{
    margin-right: 0;
  }
  .card--wakaranai:after{
    border: 0;
  }
}
.card--wakaranai-honban{
  margin-right: 0;
  background: #f1527a;
  color: #fff;
  font-weight: bold;
}
.card--wakaranai-honban:after{
  border: 0;
}

.wakaranai-text{
  margin-right: 20px;
}
@media (max-width: 991px) {
  .wakaranai-text{
    margin: 0 0.5rem;
  }
}
@media (max-width: 991px) {
  .wakaranai-flow{
    position: relative;
    text-align: center;
    background: #fff;
    margin-bottom: 4rem;
  }
  .wakaranai-flow:before {
    position: absolute;
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    border-top-color: #231816;
    border-width: 2rem;
    margin-left: -2rem;
  }
}

.wakaranai-head{
  padding: 1rem;
  color: #fff;
}
@media (max-width: 991px) {
  .wakaranai-head{
    margin-right: 0;
  }
}
.wakaranai-head--mondaishu{
  background: #ed7388;
}
.wakaranai-head--tangocho{
  background: #6486c3;
}
.wakaranai-head--kakomon{
  background: #a57eb5;
}
@media (max-width: 1399px) {
  .wakaranai-textimg--kakomon img{
    min-height: 257.5px;
  }
}
@media (max-width: 1199px) {
  .wakaranai-textimg--kakomon img{
    min-height: 208.47px;
  }
}
@media (max-width: 991px) {
  .wakaranai-textimg--kakomon img{
    min-height: auto;
  }
}
@media (max-width: 767px) {
  .wakaranai-textimg--kakomon{
    width: 50%;
    margin: 0 auto;
  }
}

/*-----------------------------------------------------
series
-------------------------------------------------------*/
.series{
  padding: 10rem 0 5rem;
  background: #ede1d6;
}

/*-----------------------------------------------------
buy
-------------------------------------------------------*/
.buy__free{
  margin-top: 5rem; 
}
.buy__freeicon{
  width: 7rem;
  margin-right: 1rem;
}
.buy__freeicon--white{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7493%) hue-rotate(183deg) brightness(101%) contrast(92%);
}
@media (max-width: 991px) {
  .buy__btn{
    display: block!important;
  }
  .buy__btn li{
    margin-bottom: 1rem;
  }
}
.btn-white{
  background: #fff;
  color: #231816;
  padding-left: 3rem;
  text-indent: -0.5rem;
}
.btn-white.active{
  background: #231816;
  color: #fff;
}

/*-----------------------------------------------------
type
-------------------------------------------------------*/
.circle-illust{
  width: 12rem;
  height: 12rem;
  text-align: center;
}
.circle-illust--nonbiri{
  background: #f89c1d;
}
.circle-illust--keikaku{
  background: #37beae;
}
.circle-illust--kodo{
  background: #9e7db8;
}
.circle-illust--koritsu{
  background: #5f86c4;
}
.circle-illust img{
  margin-top: -1rem;
}
.card-body--result{
  padding-top: 3rem;
}
.type-schedule__head{
  width: 8em;
}
.type-result{
  position: relative;
  text-align: center;
  background: #fff;
  padding-top: 4rem;
}
.type-result:before {
  position: absolute;
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  border-top-color: #231816;
  border-width: 2rem;
  margin-left: -2rem;
}

.type-kyu{
  position: relative;
  width: 5em;
  height: 5em;
  margin: 0;
  background: #f1527a;
  padding: 0.5em;
  line-height: 1.4;
  color: #fff;
}
.type-kyu:before{
  content: "";
  position: absolute;
  bottom: -8px;
  left: -8px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #f1527a;
  z-index: 0;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}


/*-----------------------------------------------------
eikentext
-------------------------------------------------------*/

.eikentext{
  padding: 10rem 0 5rem;
  color: #fff;
}
.eikentext--mondaishu{
  margin: 5rem 0 0;
  background: #7a9fb5;
}
.eikentext--tangocho{
  background: #8ca588;
} 
.eikentext--kakomon{
  background: #907965;
} 
.eikentext--list a{
  background: #fff;
}


/*-----------------------------------------------------
footer
-------------------------------------------------------*/
footer{
  margin-top: 5rem;
  padding-top: 1rem;
  border-top: 1px solid #231816;
}

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

.header {
	background-color: #fff!important;
	border-bottom: 1px solid #333;
	left: 0;
	padding: 12px 0 11px!important;
	right: 0;
	top: 0;
	z-index: 900;
}
.header__inner {
	align-items: center;
	display: flex;
	padding: 0 8px!important;
}

.header__logo {
	display: flex;
}

.header__logo a {
	display: inline-block;
	height: inherit;
	width: 162px;
}

.header__logo img {
	-o-object-fit: contain;
	aspect-ratio: 120/51;
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.header__buttons {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-left: auto;
}
.button,
.button--green {
	background-color: #5a2800;
	border-radius: 0.375rem;
	color: #fff;
	display: inline-block;
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1;
	padding: 11px 0 12px;
	text-align: center;
  text-decoration: none;
  width: 164px;
}

.button--green {
	background-color: #00b900;
	text-transform: uppercase;
}

.header__button a {
  transition:opacity 0.3s;
  text-decoration: none;
}
@media (hover: hover) {

	.header__button a:hover {
		opacity: 0.7;
    color: #fff;
	}
}

@media screen and (min-width: 768px) {
.header {
	padding: 15px 0 14px;
}

.header__inner {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
}

.header__logo a {
	width: 162px;
}

.header__buttons {
	flex-direction: initial;
	gap: 24px;
}

.button,
.button--green {
	font-size: 16px;
	padding: 15px 20px;
  width: auto;
}
}

@media screen and (min-width: 768px) {

	.pc {
		display: block;
	}
	
	.sp {
		display: none;
	}
}