@charset "utf-8";

main{background: url(../img/bg.png) center center repeat;
	margin-bottom:60px;
}

img {
    -webkit-transform: translateZ(0);
}

section,#mainvisual{
  margin-top:-100px;
  padding-top:100px;}

#mainvisual {margin:-16px auto 60px;max-width:1920px;width:100%;position: relative;}
#mainvisual table th{width:30%;text-align: center;}
#mainvisual th h2 img{max-width:120px;margin:auto;text-align:center;padding-bottom: 60px;}
#mainvisual img.main-photo{object-fit: cover;height: 720px;}

#mainvisual .btn-calender a img{max-width:240px;padding:0 5px;}

.title{text-align: center;font-size:260%;letter-spacing: 0.1em}

#news{margin-bottom:40px;}
#news h3.title {
    margin: 1.5vh auto 0.5vh;
    font-size: 150%;
}
#news .row .col-12 div{background:#fffcf6;padding:10px 10px 40px;border-radius: 10px;}
#news dt{float: left;font-weight: normal;margin-right:40px;line-height: 160%;}
#news dd{border-bottom: 2px dotted #000;padding-bottom:10px;margin-bottom:20px;line-height:160%;}
#news dl{padding:20px 20px 0px 20px;}
#news a{margin-right:16px;text-decoration: underline;line-height: 120%;}
#news a:hover{text-decoration:none;}

#method .container{padding-bottom: 100px;}
#method h3.title img{margin:30px auto 30px;}
#method h4 img{max-width:380px;margin:30px auto 20px;}
#method p.readtext{font-size:140%;line-height:210%;}
#method p{font-size:120%;line-height:200%;}
.power img{margin-bottom:10px;}
.boxs{background:#fffbe3;border:2px solid #000;padding:30px 28px;border-radius: 10px;}
#method .boxs h3 img{max-width:380px;}
#method .boxs h5.teacher{text-align:right;font-size:140%;margin:20px 0;}

#qa{padding-bottom: 160px;}
#qa dt{float: left;}
#qa .dotted{padding: 0px 0 25px;border-bottom: 2px dotted #000;}
#qa .q,#qa .a{clear:both;margin:25px 0 0;}
#qa .q{line-height:280%;font-size:140%;}
#qa .a span{font-size:140%;font-weight:bold;}
#qa .a{line-height:220%;font-size:110%;}
#qa .q img,#qa .a img{width:60px;float:left;margin-right:20px;}
#qa .answer04 .a span{    background: rgb(255 241 0 / 60%);}
#qa .answer04{background:url(../img/03-photo.png) no-repeat right top;background-size: 410px auto;}
#qa .answer04 dt{height:160px;}
#qa .answer04 ul li{display:inline-block;margin-right:10px;}
#qa .answer04 {text-shadow:0 0 3px #fffabc,0 0 3px #fffabc,0 0 3px #fffabc,0 0 3px #fffabc,0 0 3px #fffabc,0 0 3px #fffabc,0 0 3px #fffabc,0 0 3px #fffabc,0 0 3px #fffabc;}

#admission_information{padding-bottom:80px;background: url(../img/bg.png) center center repeat;margin-bottom:70px;}
#admission_information table{font-size:120%;line-height:220%;margin:30px auto 0;max-width:860px;}
#admission_information table td{padding-top:3vh;}
#admission_information p{font-size:120%;margin-top:10px;line-height:160%;}



#admission_information .btn-taiken,#taiken .btn-taiken{position: relative;height:60px;}
#admission_information .btn-taiken a,#taiken .btn-taiken a{
		  position:absolute;
		  top: 50%; /*親要素を起点に上から50%*/
		  left: 50%;  /*親要素を起点に左から50%*/
		  transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/
		  -webkit-transform: translateY(-50%) translateX(-50%);
}

.btn-taiken a{
    padding: 2vh 2vw;
    border-radius: 30px;
    color: #fff13f;
    font-size: 120%;
    font-weight:bold;
    display:inline-block;
    margin:5px;
    text-align: center;
    letter-spacing: 1px;
    box-shadow: 0px 5px 0 2px #ccc;
    margin-top:0px;
    width: 100%;
    max-width:420px;
}
.btn-taiken a:hover{color: #b1a72b;margin-top:5px;box-shadow: 0px 0px 0 0px #1b1464;margin-top:5px;}

#admission_information .btn-taiken a{background: #2c4e9b;}
#admission_information .btn-taiken a:hover{background:#1b1464;}

#taiken .btn-taiken a{background:#d3145a;}
#taiken .btn-taiken a:hover{background:#aa1351;}
#taiken img{border-radius: 10px;}


#admission_information a.dl-btn{width: 100%;}
#admission_information a img.dl-btn{max-width:320px;margin:10px auto 0;}

#taiken{margin-top:-60px;padding-top:60px;}

#contact .container{margin-bottom:140px}
#contact p{font-size:110%;line-height:160%;}
#contact table{margin:30px auto 0;max-width:800px;}
#contact table th,#contact table td{padding:5px 0 30px;font-size:120%;vertical-align:middle;}
#contact table th.pb0,#contact table td.pb0{padding-bottom: 0px;}
#contact table th{width:30%;}
#contact table span{color:#ff0000;font-size:12px;margin-left:10px;}
#contact input[type="text"],#contact input[type="tel"],#contact input[type="email"],#contact textarea{padding:10px;border-radius: 10px;width:100%;}
#contact select{background:#fff;width:100%;padding:10px;border-radius: 10px;}
#contact input[type="image"]{max-width:200px;margin:30px auto;}
#contact iframe{background:#fff;border-radius: 10px;margin-top:10px;}
#contact input[type=checkbox] {
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    position: relative;
    top: 10px;}
::placeholder {color:#ccc;}
#contact .agree{text-align:center;}

@media screen and (max-width:1200px) {
  #mainvisual th h2 img{max-width:100px;}
}


@media screen and (max-width:1024px) {
  #mainvisual th h2 img{max-width:90px;}
  #admission_information table{font-size: 110%;line-height: 180%;}
}
@media screen and (max-width:980px) {
  #mainvisual table th {width: 20%;}
  #mainvisual th h2 img{max-width:80px;}
  /*h3.title img.pc-none{display:block;}h3.title img.sp-none{display:none;}*/
  .power{padding:0 15px;}
  #qa .answer04 ul{margin-left: 80px;}
  #qa .answer04 ul li{display:block;margin-right:10px;}
  #qa .answer04 {
    background: url(../img/03-photo.png) no-repeat right bottom;
    background-size: 430px auto;}
}
@media screen and (max-width:767px) {
  #mainvisual {margin-bottom:30px;}
  #mainvisual table th,#mainvisual table td{width:100%;display:block;}
  #mainvisual table th{margin:20px auto 10px;}
  #mainvisual th h2 img{max-width:70px;padding-bottom: 0px}
  #mainvisual .btn-calender a img {display:none;}
   #mainvisual .btn-calender a span{
		   font-size:115%;
		   color:#ffff00;
		   font-weight:bold;
		   padding: 1.5vh 2vw;
		    border-radius: 0px;
		    background: #d3145a;}
   #mainvisual .btn-calender a:hover span{ background:#aa1351;color: #b1a72b;}
   #mainvisual .btn-calender a {
    position: fixed;
    z-index: 665;
    width: 100%;
    bottom:0;
    display: block;
}
  #mainvisual img.main-photo{
  	object-fit: contain;
    height: auto;}
    
  .title {
      font-size: 200%;
      letter-spacing: 0.02em;
  }
  #method h3.title img{margin:30px 0 10px;width:82%;}
  #method p.readtext{font-size:110%;line-height:180%;margin-bottom:10px;}
  #method p{font-size:100%;line-height:180%;}
  #method .point img{max-width:300px;}
  #method .boxs h3 img{width:85%;}
  #method h4 img {width:85%;}

  .boxs {padding: 18px 14px;}
  #news dt{float: none;margin-right: 0px;margin-bottom:5px;}
  #admission_information p{text-align: left;font-size: 100%;}
  #admission_information table td,#admission_information table th {display: block;padding-top:0px;}
  #admission_information table th{padding-top:20px;font-weight:bold;}
  
  #contact .title {font-size: 190%;letter-spacing:0em;}
  #contact p{font-size:100%;line-height:160%;}
  #contact .agree{font-size:90%;margin-top:20px;}
  #contact table{margin:0px auto 0;font-size: 100%;line-height: 180%;}
  #contact table th,#contact table td{display:block;padding:5px 0 0;font-size: 100%;}
  #contact table th{width:100%;padding-top:30px;}
  #contact table th.pt0{padding-top:0px;}
  #qa {padding-left:10px;padding-right:10px;}
  #qa .q img, #qa .a img {width: 36px;margin-right:5px;}
  #qa .q {line-height:240%;font-size: 100%;}
  #qa .a {line-height: 180%;font-size: 100%;}
  #qa .a span {font-size: 100%;}
  #qa .answer04 {
    background: url(../img/03-photo.png) no-repeat center bottom;
    background-size: 380px auto;
    height:440px;}
    #qa .answer04 ul{margin-left: 40px;}
    #qa .answer04 ul li{display:inline-block;margin-right:10px;}
}

@media screen and (max-width:360px) {
  .title {font-size: 170%;}
  #qa .answer04 {
    background: url(../img/03-photo.png) no-repeat center bottom;
    background-size: 330px auto;
    height:430px;
    }
  #contact .title {font-size: 155%;    letter-spacing:0em;}
  #method .boxs h5.teacher{font-size:110%;}
  .btn-taiken a{font-size:105%;letter-spacing: 0.5px;}
  #mainvisual .btn-calender a span{font-size:100%;}
}