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

#campaign{ padding: 100px 2.5%; width: 95%; background: #f1ffff; margin-bottom: 100px;}

#bnrarea {
    width: 90%;
    max-width: 980px;
    margin: 0 auto;
    margin-bottom: 100px;
}
.hoverscale{transition: all .3s;}
.hoverscale:hover{-webkit-transform: scale(1.1);
    transform: scale(1.1);}

.bold{font-family: "MFW-HiraKakuProN-W5", sans-serif;
    padding: 2px 12px;
    display: inline-block;
    border: 1px solid #000;
    margin-bottom: 5px;}

.main_txtArea{width: 90%; max-width: 770px; margin: 0 auto 100px auto;}

.main_txtArea .txt01{font-size: 17px; text-align: center; line-height: 155%; margin:8px 0 40px 0;}

.textbook-features{margin-top: 10px; margin-bottom: 30px;}
.textbook-features li{
    font-size: 21px; line-height: 150%;
    position: relative;
    list-style: none;
    line-height: 1.5;
        margin-left: 1.3em;
    margin-bottom: 25px;
}
.textbook-features li::before{
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: -22px;
    top: calc(0.75em - 5px);
}

.btn-center{margin: 0 auto;
    text-align: center;}

.curriculum-btn {
    font-family: "MFW-HiraKakuProN-W5", sans-serif;
    position: relative;
    display: inline-block;
    text-align: center;
    font-weight: bold;
        align-items: center;
    text-decoration: underline!important;
        font-size: 25px;
    padding: 1.3rem 4rem 1.3rem 4rem;
        text-decoration: none;
        transition: background .2s;
      }
      .curriculum-btn:hover {
        opacity: 0.8;
      }

.curriculum-btn::before,
.curriculum-btn::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1rem;
	margin: auto;
	content: "";
	vertical-align: middle;
}
        
.curriculum-btn::before{
	box-sizing: border-box;
	width: 21px;
	height: 21px;
	border: 2px solid #1a4899;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.curriculum-btn::after{
	width: 6px;
	height: 6px;
    right: 1.8rem;
	border-top: 1px solid #1a4899;
	border-right: 1px solid #1a4899;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


.textbook-list-btn {
    font-family: "MFW-HiraKakuProN-W6", sans-serif;
    position: relative;
    display: inline-block;
    text-align: center;
    font-weight: bold;
        align-items: center;
    text-decoration: underline!important;
        font-size: 25px;
    padding: 1.3rem 4rem 1.3rem 4rem;
        text-decoration: none;
        transition: background .2s;
      }
      .textbook-list-btn:hover {
        opacity: 0.8;
      }

.textbook-list-btn::before,
.textbook-list-btn::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1rem;
	margin: auto;
	content: "";
	vertical-align: middle;
}
        
.textbook-list-btn::before{
	box-sizing: border-box;
	width: 21px;
	height: 21px;
	border: 2px solid #1a4899;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
.textbook-list-btn::after{
	width: 6px;
	height: 6px;
        top: -2px;
    right: 1.63rem;
	border-top: 1px solid #1a4899;
	border-right: 1px solid #1a4899;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}

#kyouzai{width: 90%; max-width: 980px; margin: 0 auto;margin-bottom: 100px;}
#textbook-list{width: 90%; max-width: 980px; margin: 0 auto;margin-bottom: 100px;}

.kyouzaiTitle{font-family: "corporate-logo-ver2", sans-serif !important;text-align: center; font-size: clamp(31px, 4vw, 41px); margin-bottom: 60px;display: flex;justify-content: center; align-items: center;}

.kyouzaiTitle span{display: block;width: 7%;max-width: 40px;margin-right: 7px;}

.kyouzai-txt01{margin-bottom: 40px;}
.kyouzai-txt01 .txt01{font-weight: bold; font-size: 23px; margin-bottom: 20px;}
.kyouzai-txt01 .txt02{font-size: 18px;line-height: 150%;}

.kyouzai-wrap{margin-bottom: 70px;}
.kyouzai-wrap .kyouzai-cont-link{color: #2a2a2a;display: block; border: 1px solid #929292; box-sizing: border-box;box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 0.2); margin-bottom: 40px;}
.kyouzai-wrap .kyouzai-cont-link:hover{opacity: 0.8;}

.kyouzai-cont{padding: 20px; display: flex;}
.kyouzai-cont-img{width: 34%; margin-right: 3%;}
.kyouzai-cont-txt-wrap{width: 63%; display: flex;flex-wrap: wrap;}
.kyouzai-cont-txt{width: 100%;}
.kyouzai-cont-txt h3{font-size: clamp(30px, 4vw, 40px); margin-bottom: 20px; line-height: 140%;font-family: "MFW-HiraKakuProN-W7";}
.kyouzai-cont-txt .about{font-size: clamp(17px, 2vw, 21px); line-height: 160%;word-break: break-word;}
.SubjectList{display: flex;margin-bottom: 20px;}
.SubjectList li{padding:7px 10px;  margin-right: 5px; font-size: clamp(14px, 2vw, 18px);}
.SubjectList li.s01{background: #ffc9ac;}
.SubjectList li.s02{background: #d2f1ff;}
.SubjectList li.s03{background: #d9f2d0;}
.SubjectList li.s04{background: #f2cfee;}
.SubjectList li.s05{background: #e2a1e1;}

.kyouzai-cont-price{width: 100%;position: relative;display: flex; align-items: end;    margin-top: 30px;}
.kyouzai-cont-price p{font-size: clamp(14px, 2vw, 18px);line-height: 175%;display: inline;/***padding-bottom: 5px;border-bottom: 3px solid #2a2a2a;***/}
.kyouzai-cont-price p span{font-weight: bold; font-size: 230%;font-family: "MFW-HiraKakuProN-W6", sans-serif;}

.kyouzai-cont-btn{font-size: clamp(20px, 3.5vw, 29px); font-family: "corporate-logo-ver2", sans-serif !important; font-weight: bold;text-align: center;position: relative; padding: 22px; border-top:  2px solid #2a2a2a;}
.kyouzai-cont-btn::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1rem;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.kyouzai-cont-btn::after{
	    width: 14px;
    height: 14px;
    right: 1.8rem;
	border-top: 2px solid #2a2a2a;
	border-right: 2px solid #2a2a2a;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.generalBtn01{
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    font-family: "corporate-logo-ver2", sans-serif !important;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    background: #fff;
    color: #2297d2;
    border: 2px solid #2297d2;
    font-size:clamp(20px, 2vw, 25px);
    padding: 3.5rem 3rem;
    text-decoration: none;
    transition: background .2s;}
.generalBtn01::before,
.generalBtn01::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1rem;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.generalBtn01::after{
	    width: 14px;
    height: 14px;
    right: 1.8rem;
	border-top: 2px solid #2297d2;
	border-right: 2px solid #2297d2;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.generalBtn01:hover {
        background: #2297d2;
    color: #fff;
        text-decoration: none;
      }
.generalBtn01:hover::after{border-top: 2px solid #fff;
	border-right: 2px solid #fff;}


.generalBtn02{
    width: 80%;
    max-width: 600px;
    margin: 0 auto;
    font-family: "corporate-logo-ver2", sans-serif !important;
    font-weight: bold;
    display: block;
    position: relative;
    text-align: center;
    background: #fff;
    color: #2297d2;
    border: 2px solid #2297d2;
    font-size:clamp(23px, 2vw, 30px);
    padding: 3.5rem 3rem;
    text-decoration: none;
    transition: background .2s;}
.generalBtn02::before,
.generalBtn02::after{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 1rem;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.generalBtn02::after{
	    width: 14px;
    height: 14px;
    right: 1.8rem;
	border-top: 2px solid #2297d2;
	border-right: 2px solid #2297d2;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.generalBtn02:hover {
        background: #2297d2;
    color: #fff;
        text-decoration: none;
      }
.generalBtn02:hover::after{border-top: 2px solid #fff;
	border-right: 2px solid #fff;}


.sho-gakunenbtns{display: flex; gap:2%; justify-content: center;flex-wrap: wrap; margin: 30px 0 20px 0}
.sho-gakunenbtns li{margin-bottom: 2%; width: 15%;}
.sho-gakunenbtns li.active{font-family: "corporate-logo-ver2", sans-serif !important;
    font-size:clamp(17px, 2vw, 22px);
    font-weight: bold;
  display:block;
    text-align: center;
  border: 1px solid #2297d2;
  position: relative;
  background:#2297d2;
  color: #fff;
  overflow: hidden;
  padding:1rem 1.5rem 1rem 2rem;
  transition: all .3s;
    box-sizing: border-box;}
.sho-gakunenbtns li.active .mini{font-size: 70%;}


.gakunenbtn {
font-family: "corporate-logo-ver2", sans-serif !important;
    font-size:clamp(17px, 2vw, 22px);
    font-weight: bold;
  display:block;
    text-align: center;
  border: 1px solid #2297d2;
  position: relative;
  background: #fff;
  color: #2297d2;
  overflow: hidden;
  padding:1rem 1.5rem 1rem 2rem;
  transition: all .3s;
    box-sizing: border-box;
}
.gakunenbtn .mini{font-size: 70%;}

.gakunenbtn::before,
.gakunenbtn::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}

.gakunenbtn::before {
  width: 7px;
  height: 7px;
  right: 1rem;
  border-top: solid 2px #2297d2;
  border-right: solid 2px #2297d2;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all .3s;
}

.gakunenbtn:hover::before {
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}

.gakunenbtn span {
  transition: all .3s;
  z-index: 3;
  position: relative;
}

.gakunenbtn:hover span {
  color: #fff;
}

.gakunenbtn:hover .mini {
  color: #fff;
}

.gakunenbtn:hover{background: #2297d2;}


@media screen and (max-width: 640px) {
    
    .campaign_area {
    width: 81%;}
    
    .gakunenbtn {font-size: 24px;}
    .sho-gakunenbtns{gap:3%;}
    .sho-gakunenbtns li {
    margin-bottom: 3%;
    width: 48%;
}
    .sho-gakunenbtns li.active {font-size: 24px;}
    
    #kyouzai{margin-bottom: 24vw;}
    #textbook-list{margin-bottom: 24vw;}
    
    .kyouzai-wrap .kyouzai-cont-link{box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.2);}
    .kyouzai-cont {justify-content: center;flex-wrap: wrap;padding: 30px 20px;}
    .kyouzai-cont-txt-wrap {width: 100%;}
    .kyouzai-cont-img {width: 55%;margin-right: 0;margin-bottom: 25px;}
    .kyouzai-cont-txt .about {font-size: clamp(16px, 2vw, 21px);margin-bottom: 30px;}
    .kyouzai-cont-txt h3 {font-size: clamp(28px, 4vw, 40px);}
    .kyouzai-cont-price {justify-content: center;}
    .kyouzai-cont-price p {font-size: clamp(16px, 2vw, 18px);}
    
    .kyouzai-txt01 .txt01{font-size: 19px;}
    .kyouzai-txt01 .txt02{text-align: left; font-size: 15px;}
    
    #campaign{padding: 24vw 2.5%;margin-bottom: 24vw;}
    .main_txtArea {
    margin: 0 auto 24vw auto;}
    .main_txtArea .txt01 {
    font-size: 13px;
    text-align: left;
    padding: 0 5%;
    margin: 0 0 40px 0;
}
    .textbook-list-btn,.curriculum-btn {
    font-size: 20px;
}
    
    .textbook-features li{
    font-size: 18px;
}
}