@charset "UTF-8";

/* 共通の設定
----------------------------*/
html{
  scroll-behavior:smooth;
}
body{
  overflow-x:hidden;
  font-family:  Arial, "Helvetica Neue", "BIZ UDPGothic", Meiryo, "Hiragino Kaku Gothic Pro", sans-serif;
  background:#b4cfb0;
  color:#333;
}
ul{
  list-style:none;
}
a{
  text-decoration: none;
}
*,*::before,*::after {
  box-sizing: border-box; /* ボックスサイズ */
}
.contener{
  position:absolute;
  inset: 0;
  overflow:auto;
}
.wrapper{
  max-width:1100px;
  padding:10px 2%;
  margin:0 auto;
}
.wrapper p{
  padding:5px;
}
.reveal-text span::before{
  content:"\A";
  white-space:pre;
}
.bold{
  font-weight:bold;
}


/* toggle button
----------------------------*/
#drawer{
  display:none;  /* チェックボックス非表示 */
}
.open,.close{
  cursor:pointer;
  position:fixed
}
.open{
  z-index:99;
  top:8px;
  right:8px;
  width:48px;
  height:48px;
  background:#789395;
  border-radius: 30px;
  transition:.5s;
}
.open::before,
.open::after{
  content:"";
}
.open span,
.open::before,
.open::after{
  content:"";
  position:absolute;
  top:calc(50% - 1px);
  left:30%;
  width:40%;
  border-bottom:2px solid white;
  transition:.5s;
}
.open::before{
  transform:translateY(-8px);
}
.open::after{
  transform:translateY(8px);
}
.close{
  z-index:98;
  inset:0; /* 上下中央の配置 */
  pointer-events:none; /* 操作不可 */
  transition:.5s;
}
#drawer:checked + .open{
  background:rgba(0,0,0,.7);
  transform:translateX(-280px); /* トグルボタンの移動 */
  border-radius: 30px;
}
#drawer:checked + .open span{
  transform:scaleX(0);
}
#drawer:checked + .open::before{
  transform:rotate(135deg) scaleX(1.2);
}
#drawer:checked + .open::after{
  transform:rotate(-135deg) scaleX(1.2);
}
#drawer:checked ~ .close{
  pointer-events:auto;
  backdrop-filter:blur(3px);
}
#drawer:checked .contener{
  background:rgb(0, 26, 255);
}


/* drawer menu
----------------------------*/
.drawer-menu{
  z-index:98;
  position:fixed;
  overflow:auto;
  top:0;
  right:0px;
  width:280px;
  height:100%;
  margin:0;
  padding:10px;
  box-sizing:border-box;
  background:rgba(0,0,0,.8);
  transform:translateX(100%);
  transition:.5s;
}
.drawer-menu ul{
  margin-top:1rem;
}
.drawer-menu li{
  line-height:5;
  text-indent:1rem;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: left;
}
.drawer-menu li:not(:first-child){
  border-top:2px solid rgba(255,255,255,.6);
}
.drawer-menu a{
  display:block;
  color:white;
  padding:1rem;
  text-align:center;
}
#drawer:checked ~ .drawer-menu{
  transform:none;
}
.drawer-menu .history{
  background-image:url(../images/icon_walk.svg);
}
.drawer-menu .course{
  background-image:url(../images/icon_seminar.svg);
}
.drawer-menu .form{
  background-image:url(../images/icon_contact.svg);
}
.drawer-menu .request{
  background-image:url(../images/icon_request.svg);
}


/* page header
----------------------------*/
.page-header{
  position:fixed;
  z-index: 10;
  top:0;
  height:65px;
  width:100vw;
  align-items:center;
  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.25), rgba(150, 150, 150, 0.5) 80%, rgba(85, 85, 85, 0.5));
  transition:.4s;
}
.header-wrapper{
  display:flex;
  justify-content:space-between;
  height:100%;
  max-width:1100px;
  padding:10px 2%;
  margin:0 auto;
}
.logo{
  margin-left:10px;
  height:100%;
  width:260px;
  overflow: hidden;
  transition:.3s;
}
#path01{
  fill: #70AD47;
  transition:.3s ease-in-out;
}
#path02{
  fill:#fff;
  transition:.3s ease-in-out;
}
.logo:hover{
  transform:scale(1.02);
}
.logo:hover #path01{
  fill:#efff60;
}
.logo:hover #path02{
  fill:#efff60;
}
.page-header nav{
  height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transition: .5s;
  width:450px;
}
.gb-menu{
  height:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.gb-menu li a{
  display:flex;
  flex-flow: column;
  padding:5px;
  height:100%;
  width:100px;
  align-items:center;
  font-size:.8rem;
  position: relative;
  transition:.5s;
  border-radius:10px;
}
.gb-menu li a img{
  width:50px;
  transition:.5s;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(35deg) brightness(116%) contrast(86%);
}
.gb-menu li a p{
  font-size:.8rem;
  transition:.5s;
  color:white;
}
.gb-menu li a:hover{
  background:white;
  transform:scale(1.05,1.05);
}
.gb-menu li a:hover > img{
  filter: brightness(0) saturate(100%);
}
.gb-menu li a:hover > p{
  color:#555;
}
footer{
  text-align:center;
  padding:1rem 0;
  color:#e5e3c9;
  background:#555;
}
.pan{
  display:flex;
  height:2rem;
  max-width:1100px;
  margin:0 auto;
  padding-left:5px;
  font-size:.8rem;
  align-items:center;
}
.pan a{
  position:relative;
  color:#555;
}
.pan a::before {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: white;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: ease .3s;
}
.pan a:hover::before {
  transform: scale(1, 1);
}
.pan span{
  padding:0 1rem;
}



/* course content
----------------------------*/
.main-visual{
  display:flex;
  width:100%;
  height:350px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:center;
  justify-content:center;
  align-items:center;
}
.course-top{
  background-image:url(../images/bg_course_top.png);
}
.course-content{
  background-image:url(../images/bg_course.jpg);
}
.form-top{
  background-image:url(../images/bg_form.jpg);
}
.history-top{
  background-image:url(../images/bg_history.jpg);
}
.request-top{
  background-image:url(../images/bg_request.png);
}
.main-visual h1{
  text-align:center;
  font-family: "Shippori Antique B1", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:1.3rem;
  text-shadow:1px 1px 0 white,
  -1px 1px 0 white,
  -1px -1px 0 white,
  1px -1px 0 white,
  1px 0px 0 white,
  0px 1px 0 white,
  -1px 0px 0 white,
  0px -1px 0 white,
  0px 0px 5px white,
  0px 0px 5px white,
  0px 0px 5px white; 
}
.main-visual h1 span{
  font-size:1.8rem;
}
.main-visual h1 span::before{
  content:"\A";
  white-space: pre;
}
.course-top h1,
.course-content h1{
  color:brown;
}
.form-top h1{
  color:steelblue;
}
.history-top h1{
  color:mediumseagreen;
}
.request-top h1{
  color:darkkhaki;
}


.detail-title{
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding:10px;
  position:relative;
}
.displayed{
  animation: fadeUp 1s forwards;
}
.displayed > h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  background:#789395;
  height:3px;
  width:0;
  transition: .5s;
  animation: underLine 1.5s forwards;
}
@keyframes fadeUp{
  0%{opacity:0; transform: translateY(200px);}
100%{opacity:1; transform: translateY(0);}
}
@keyframes underLine{
 50%{width:0;}
100%{width:100%;}
}
.date-slider{
  width:90%;
  max-width:600px;
  height:250px;
  margin:30px auto;
  position: relative;
  overflow: hidden;
  border:2px solid #789395;
  border-radius: 5px;
  background:white;
}
.date-slider .swiper-button-next,.date-slider .swiper-button-prev{
  border-radius: 50%;
  border:2px solid #555;
  width: 30px;
  height: 30px;
  transition:.5s;
}
.date-slider .swiper-button-next::after, .swiper-button-prev::after {
  font-size: 1rem;
  color: #555;
}
.date-slider .swiper-button-next::after {
  content: '\025b6'; /* 右矢印 */
}
.date-slider .swiper-button-prev::after {
  content: '\025c0'; /* 左矢印 */
}
.date-slider .swiper-button-disabled{
  opacity:0;
}
.date-slider .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.date-slider .swiper-slide h3{
  font-size:1.2rem;
  text-align:center;
  padding-bottom:5px;
}
.date-slider .swiper-slide p{
  font-size:1.5rem;
  text-align:center;
}
.date-slider .swiper-slide ul{
  margin-top:10px;
}
.date-slider .swiper-slide li{
  text-align:center;
  padding-bottom:5px;
}
.content-background{
  background-image:url(../images/bg_square.png);
  background-repeat: repeat;
  position:relative;
  z-index:0;
}
.courseTop-background{
  background-image:url(../images/bg_dot.png);
  background-repeat: repeat;
}
.form-background{
  background-image:url(../images/bg_dot.png);
  background-repeat: repeat;
}
.form-background{
  background-image:url(../images/bg_dot.png);
  background-repeat: repeat;
}
.history-background{
  background-image:url(../images/bg_cross.png);
  background-repeat: repeat;
}
.details-wrapper{
  margin:30px auto;
  width:80%;
  max-width:500px;
  background:white;
  border-radius:20px;
  box-shadow: 4px 4px #ccc ;
}
.details-box{
  padding:10px;
  font-size:.8rem;
}
.details-box h3{
  font-size:1rem;
  padding:5px;
  font-family: "RocknRoll One", sans-serif;
}
.details-box dl{
padding-left:20px;
}
.details-box .details-row{
  display:flex;
  line-height: 1.2rem;
}
.details-box .details-row dt{
  width:4rem;
  text-align:justify;
  text-align-last: justify;
}
.details-box .details-row dd::before{
  content:" ： ";
  white-space: pre-wrap;
}
.details-box ul{
  list-style:disc;
  padding-left:30px;
}
.details-box li{
  line-height:1.2rem;
}








.content-box{
  width:100%;
  max-width:800px;
  margin:20px auto;
  padding:20px;
  background:white;
  border:1px solid #94b49f;
  border-radius:20px;
}
.content-box h3{
  font-size:1.2rem;
  font-weight:bold;
  padding:20px 0 5px;
}
.content-box ul{
  padding:10px;
}
.content-box li{
  font-size:1rem;
  padding:5px 0;
}
.content-box p{
  font-size:1rem;
  padding-left:10px;
}








.push-btn{
  display:flex;
  position:relative;
  margin:20px auto;
  width:200px;
  height:50px;
  align-items:center;
  justify-content:center;
  border:1px solid #789395;
  background:white;
  color:#555;
  top:0;
  transition: .3s;
}
.push-btn:hover{
  top:-3px;
  box-shadow: 0px 2px 0px 1px #789395;
}
.push-btn:active{
  top:0;
  box-shadow:none;
}
.tab-wrapper{
  width:100%;
  background:#94B49F;
  margin-top:50px;
  padding-bottom:50px;
  border-top:3px solid #e5e3c9;
}
.tab-header{
  position:relative;
}
.tab-name{
  position:absolute;
  top:0%;
  transform:translate(0,-100%);
  background:#94B49F;
  border-top:3px solid #e5e3c9;
  border-right:3px solid #e5e3c9;
  border-left:3px solid #e5e3c9;
  border-radius: 10px 10px 0 0;
  line-height:1rem;
  }


.school-information{
  display:flex;
  justify-content:center;
  align-items:center;
  height:350px;
  width:90%;
  max-width:550px;
  margin:0 auto;
  border-radius:10px;
  background-image:url(../images/img_school.jpg);
  background-repeat:no-repeat;
  background-size: cover;
  background-position:center;
}
.school-information address{
  padding:1rem;
  background:rgba(255,255,255,.7);
  font-size:.8rem;
  font-style:normal;
  color:#555;
}
.school-information address ul{
  padding:5px 0 5px 1rem;
}
.school-information address ul li{
  margin-bottom:5px;
}
.school-information address a{
  color:#555;
}
.school-information address p span{
  font-size:1.4rem;
}
.school-information .address span{
  padding-left:1.2rem;
}
.school-information li::before{
  content:"";
  display:inline-block;
  height:.8rem;
  width:.8rem;
  margin-right:.2rem;
  background-position:center;
  background-size:contain;
}
.school-information .address::before{
  background-image:url(../images/icon_address.svg);
}
.school-information .tel-number::before{
  background-image:url(../images/icon_phone.svg);
}
.school-information .mail::before{
  background-image:url(../images/icon_mail.svg);
}
.school-information dl{
  padding-left:1rem;
}
.school-information dt{
  padding:3px 0 3px 0;
}
.school-information dd{
  padding-left:1rem;
}
.school-information .exp{
  padding-top:5px;
  font-size:.7rem;
}
.license-box{
  text-align:center;
  margin:20px auto;
  width:90%;
  max-width:400px;
  padding:20px;
  background:white;
  border:1px solid #789395;
  border-radius:20px;
  position:relative;
  color:black;
}
.license-box::after{
  content:"";
  height:100%;
  width:100%;
  border-radius:20px;
  position:absolute;
  top:0px;
  left:0px;
  z-index:-1;
  background:#789395;
  transform: rotate(0deg);
  transition:.4s;
}
.displayed > .license-box::after{
  animation: rotateIn 2s forwards;
}

@keyframes rotateIn{
  60%{transform:rotate(0deg);}
  100%{transform: rotate(3deg);} 
}

.license-box dt{
  padding:20px 0;
  font-size:1rem;
  font-weight:bold;
}
.license-box dt:first-child{
  padding-top:0;
}
.license-box dd{
  font-size:1rem;
}


/* course TOP
----------------------------*/
.lessonList{
  width:95%;
  display:flex;
  flex-flow:column;
  margin:0 auto;
}
.lessonBox{
  width:100%;
  height:180px;
  max-width:400px;
  margin:20px auto;
  background:white;
  border-radius:10px;
  border:1px solid #94b49f;
}
.lessonBox a{
  height:100%;
  width:100%;
  display:flex;
  justify-content:space-around;
  align-items:center;
  padding:10px;
}
.lessonIcon{
  width:40%;
  aspect-ratio: 1;
  border-radius:50%;
}
.lessonData{
  color:#555;
}
.lessonName{
  font-size:.8rem;
}
.lessonName span{
  font-size:1.1rem;
}
.lessonBox ul{
  font-size:.8rem;
  padding-left:.8rem;
}
.lessonBox li{
  display: flex;
  padding-bottom:3px;
  align-items:flex-start;
}
.lessonBox .evenly{
  display:inline-block;
  width:3rem;
  text-align-last:justify;
}


/* course boki
----------------------------*/
.boki-course-flow{
  width:100%;
  max-width:700px;
  display:block;
  margin:30px auto;
}
.boki-course-worry{
  width:100%;
  max-width:500px;
  border-radius:10px;
  display:block;
  margin:20px auto;
}


/* course careerup
----------------------------*/
.careerup-course-flow{
  width:100%;
  max-width:700px;
  display:block;
  margin:30px auto;
}

/* course pinpoint
----------------------------*/
.pinpoint-image{
  width:90%;
  max-width:600px;
  border-radius:20px;
  border:3px solid white;
  display:block;
  margin:0 auto;
  box-shadow: 0 0 5px 0 #70AD47;
}
.recommend-box{
  padding:10px;
  display:flex;
  flex-flow:column;
  align-items:center;
}
.recommend-box p{
  padding:10px;
  text-align:center;
}
.pinpoint-image-small{
  width:60%;
  max-width:300px;
  aspect-ratio: 1;
  border-radius:50%;
  border:3px solid #b4cfb0;
}
.points-wrapper{
  width:90%;
  margin:0 auto;
  padding:20px;
  background:white;
  border:2px solid #b4cfb0;
  border-radius:20px;
}
.points-wrapper h3{
  font-size:1.2rem;
  font-weight:bold;
  padding:10px;
}
.points-wrapper p{
  font-size:1rem;
  padding-left:20px;
}
.text-link a{
  color:#555;
  border-bottom:1px solid #789395;
}
.content-box .pinpoint-list li{
  color:brown;
  font-weight:bold;
  padding-left:20px;
}

/* course experience
----------------------------*/
.exp-image{
  width:100%;
  max-width:700px;
  display:block;
  margin:30px auto;
  border:3px solid white;
  border-radius:50%;
}
.experience-wrapper{
  padding:30px 0;
}

.experience-wrapper h3{
  margin-top:10px;
  padding-left:10px;
  font-family: "RocknRoll One", sans-serif;
  font-size:1.2rem;
}
.experience-wrapper p{
  padding:5px 10px 0;
  text-indent:.8rem;
}




/* history Top
----------------------------*/
.history-wrapper{
  margin:100px auto;
  padding:0 50px;
}
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}
.timeline-date{
  font-weight:bold;
}


/* index Top
----------------------------*/
.index-slider{
  width:100%;
  position:relative;
}
.index-slider .swiper-wrapper img{
  width: 100%;
  height: auto; /* アスペクト比を維持 */
  object-fit:cover; /* 画像の内容を枠内に収める */
}
.index-slider .swiper-pagination-bullet {
  width: 12px !important;
  height: 12px !important;
  margin: 0 0 0 10px !important;
  background: #789395 !important;
}
.index-wrapper{
  width:100%;
  margin:30px auto;
}
.info-wrapper{
  width:90%;
  max-width:600px;
  margin:0 auto;
  padding:20px;
  display:flex;
  flex-flow:column;
  border-radius:20px;
  background:white;
  transition:.4s;
}
.info-first{
  display:flex;
  justify-content: space-between;
  align-items:center;
  border-bottom:2px solid #789395;
}
.info-first a{
  padding:5px 20px;
  background:#e5e3c9;
  border-radius:15px;
  color:#555;
  font-weight:bold;
}
.info-second{
  padding:5px 10px;
}
.info-second li{
  padding:20px 5px;
}
.info-second li:not(:last-child){
  border-bottom:2px dotted #94b49f;
}
.info-second a{
  color:#333;
}
.info-second li .course-date{
  font-size:.8rem;
  line-height:25px;
  position:relative;
}
.info-second li .course-date time{
  padding-right:5px;
}
.info-second li .recruitment::before{
  content:"生徒募集中";
  font-size:.7rem;
  padding:0 10px;
  background:#70AD47;
  color:white;
  position:absolute;
  border-radius:20px;
  left:6.5rem;
}
.info-second li .dedline::after{
  content:"締切間近";
  font-size:.7rem;
  background:#789395;
  color:white;
  padding:0 10px;
  position:absolute;
  border-radius:20px;
  left: 11.5rem;
}

.info-second li .course-name{
  font-size:1rem;
  padding:10px 0 10px 20px;
}
.access-wrapper{
  width:100%;
  max-width:600px;
  margin:0 auto;
  padding:20px;
  border-radius:20px;
  background:rgba(255,255,255,0);
  transition:.8s;
}
.access-box{
  display:flex;
  flex-flow:column;
  align-items:center;
}
.access-box > img{
  width:60%;
  aspect-ratio:1;
  border:5px solid white;
  border-radius:50%;
}
.access-box address{
  font-style:normal;
  display:block;
  width:100%;
  margin-top:20px;
  padding:30px;
  border-radius:30px;
  background:white;
  transition:.4s;
}
.access-box .address-box{
  max-width:300px;
  margin:0 auto;
}
.access-box .address-box a{
  border-bottom:1px solid gray;
  color:#555;
}
.access-box .address-box > p{
  font-size:.8rem;
}
.access-box .address-box > p span{
  font-size:1.4rem;
}
.access-box .address-box li{
  padding:5px;
  line-height:1.4rem;
}
.access-box .address-box dl{
  padding:5px;
}
.access-box .address-box dd{
  padding:0 0 10px 1rem;
}
.access-box .exp{
  font-size:.6rem;
  color:brown;
}



/* index infoList
----------------------------*/
.infoList-slider{
  width:95%;
  max-width:600px;
  margin:30px auto;
  position: relative;
  overflow: hidden;
  border:2px solid #94b49f;
  border-radius: 10px;
  background:white;
  transition:.5s;
}
.infoList-slider .swiper-button-next,.infoList-slider .swiper-button-prev{
  border-radius: 50%;
  border:2px solid #555;
  width: 30px;
  height: 30px;
  transition:.5s;
}
.infoList-slider .swiper-button-next::after, .infoList-slider .swiper-button-prev::after {
  font-size: 1rem;
  color: #555;
}
.infoList-slider .swiper-button-next::after {
  content: '\025b6'; /* 右矢印 */
}
.infoList-slider .swiper-button-prev::after {
  content: '\025c0'; /* 左矢印 */
}
.infoList-slider .swiper-button-disabled{
  opacity: 0;
}
.infoList-slider .swiper-slide {
  padding:0 40px;
}
.infoList-slider .swiper-slide h3{
  font-size:1.2rem;
  text-align:center;
  padding-top:20px;
}
.infoList-slider dl{
  padding:5px;
}
.infoList-slider .infoList-box{
  display:flex;
  align-items:center;
  border-bottom:2px dotted #b4cfb0;
  padding:10px;
  font-size:.8rem;
}
.infoList-slider .infoList-box:last-child{
border-bottom:none;
padding-bottom:50px;
}
.infoList-slider dt{
  padding-right:10px;
}
.infoList-slider dd{
  overflow: visible; /* はみ出しを防ぐ */
  white-space: normal; /* 通常の折り返しを有効化 */
  word-break: break-word; /* 長い単語を折り返す */
  position:relative;
}
.infoList-slider dd::before{
  font-size:.6rem;
  font-weight:bold;
  padding:5px;
  width:6rem;
  text-align:center;
  border-radius:10px;
  position:absolute;
  top:-23px;
}
.infoList-slider .mark{
  margin-top:20px;
}
.infoList-slider .mark-boki::before{
  content:"簿記科";
  background:burlywood;
}
.infoList-slider .mark-pc::before{
  content:"コンピュータ科";
  background:#b4cfb0;
}
.infoList-slider .mark-medical::before{
  content:"医療・調剤事務科";
  background:cornflowerblue;
}
.infoList-slider .mark-keiri::before{
  content:"経理科";
  background:coral;
}
.infoList-slider dd::after{
  font-size:.6rem;
  font-weight:bold;
  padding:5px;
  width:4rem;
  text-align:center;
  border-radius:10px;
  position:absolute;
  top:-23px;
  left:6.5rem;
}
.infoList-slider .mark-plan::after{
  content:"開講予定";
  background: aqua;
}
.infoList-slider .mark-inProgress::after{
  content:"募集締切";
  background:brown;
  color:white;
}
.infoList-slider .mark-ceremony::after{
  content:"入学式";
  background:lightpink;
}






/* form & request
----------------------------*/
.request-explanation{
  font-size:.8rem;
}
.request-explanation li{
  padding:5px;
}
form{
  margin:30px auto;
  padding:20px;
  width:90%;
  background:white;
  border-radius:20px;
}
form input,
form textarea,
select{
  border:1px solid #789395;
}
form input:focus,
form textarea:focus,
select:focus{
  box-shadow: 0 0 5px 0 #70AD47;
  border: 2px solid #FFF !important;
  outline: 0;
}
.input-area{
  margin-top:20px;
}
.input-area > p{
  font-weight:bold;
}
.input-area .caution-point{
  font-size:.8rem;
  margin-left:1rem;
}
.very-small-frame{
  max-width:150px;
  width:40%;
}
.small-frame{
  max-width:250px;
  width:60%;
}
.long-frame{
  max-width:400px;
  width:90%;
}
.inquiry{
  width:100%;
  height:200px;
}
.radio-box{
  display:flex;
  justify-content: space-between;
  width:100px;
  padding-left:20px;
}
.radio-man::after{
  content:"男";
  margin-left:20px;
}
.radio-woman::after{
  content:"女";
  margin-left:20px;
}
.age-box{
  display:flex;
  justify-content:space-between;
  width:200px;
}
.age-box div > select{
  text-align:center;
}
.age-box .yyyy{
  width:4rem;
}
.age-box .mm,
.age-box .dd{
  width:2rem;
}
.document-box{
  display:flex;
  flex-flow:column;
}
.document-box select{
  margin:10px 0;
  max-width:300px;
}
.form-checkList{
  font-size:.9rem;
}
.form-checkList li{
  margin-top:10px;
}
.form-checkList input[type="checkbox"] {
    margin-right: 5px; 
}
.btn-box{
  display:flex;
  justify-content: space-between;
  max-width:400px;
  margin:0 auto;
}
.sub{
  display:block;
  padding:10px 20px;
  margin:20px auto 0;
  border-radius:10px;
  border:1px solid #70AD47;
  position:relative;
  top:0;
  transition:.5s;
}
.sub:hover{
  top:-3px;
  box-shadow: 0px 2px 0px 1px #70AD47;
}
.sub:active{
  top:0;
  box-shadow:none;
}
.required-mark::after{
  content:"必須";
  color:white;
  font-size:.7rem;
  background:red;
  margin-left:2px;
  padding:2px 10px;
  border-radius:10px;
  vertical-align:center;
}


/* privacy-policy
-----------------------------*/

.privacy-policy-box{
  padding:20px;
}
.privacy-policy-box dt{
  font-size:1.2rem;
  font-weight:bold;
  padding:10px 0;
}
.privacy-policy-box dd{
  font-size:.8rem;
  text-indent:.8rem;
  padding:5px 0 5px .8rem;
}









/* pinpoint settings
----------------------------*/
.content-box .footnote{
  font-size:.8rem;
}
.wrapper .link-text{
  color:#555;
  border-bottom:1px solid #789395;
}







@media (min-width: 500px) {

  
  /* index infoList(min-width:500px)
  ----------------------------*/
  .infoList-slider{
    max-width:1000px;
    border-radius: 30px;
  }
  .infoList-slider .swiper-slide {
    padding:0 10px;
  }
  .infoList-slider .swiper-slide h3{
    font-size:1.6rem;
    padding:40px 0 20px 0;
  }
  .infoList-slider .mark{
    margin:15px 0;
  }
  .infoList-slider dl{
    padding:5px;
  }
  .infoList-slider .infoList-box{
    display:flex;
    align-items:center;
    font-size:.8rem;
  }
  .infoList-slider dt{
    padding:0 10px;
  }
  .infoList-slider dd{
    padding-left:180px;
  }
  .infoList-slider dd::before{
    border-radius:15px;
    position:absolute;
    top:50%;
    left:0;
    transform: translate(0, -50%);
  }
  .infoList-slider dd::after{
    width:4rem;
    border-radius:15px;
    top:50%;
    left:6.5rem;
    transform: translate(0, -50%);
  }
}











@media (min-width: 960px) {
	.open {
		transform: translate(0, -56px);
	}
  .logo{
    width:300px;
  }
  .page-header{
    height:80px;
  }
  .page-header nav { /*グローバルメニューの表示*/
    height: 100%;
    opacity: 1;
    pointer-events: auto;
  }
  .wrapper{
    padding:50px 0 30px 5%;
    margin:0 auto;
  }
  .wrapper > p{
    padding:10px 0 30px 30px;
  }
  
  /* index Top (min-width:960px)
----------------------------*/
  .index-wrapper{
    margin:100px 0;
  }
  .info-wrapper{
    width:90%;
    max-width:1000px;
    padding:50px;
    flex-flow:row;
    justify-content: space-around;
    align-items: center;
    border-radius:50px;
  }
  .info-first{
    flex-flow:column;
    justify-content:center;
    align-items:center;
    border-bottom:none;
  }
  .info-first a{
    display:flex;
    justify-content: center;
    align-items:center;
    width:100px;
    height:100px;
    margin:50px 0;
    padding:0;
    background:none;
    border-radius:50%;
    position:relative;
    z-index:1;
    transition:.4s;
    border:1px solid #94b49f;
  }
  .info-first a::after{
    position:absolute;
    z-index:-1;
    content:"";
    width:100%;
    height:100%;
    border-radius:50%;
    background:#94b49f;
    transition:.4s;
    transform:scale(0,0);
  }
  .info-first a:hover{
    color:white;
    border-color: rgba(148,180,159,.3);
  }
  .info-first a:hover::after{
    transform:scale(1,1);
  }
  .info-second{
    flex-grow: .5;
  }

  .info-second li .course-date{
    font-size:1rem;
    line-height:25px;
  }
  .info-second li .recruitment::before{
    content:"生徒募集中";
    font-size:.8rem;
    left:9rem;
  }
  .info-second li .dedline::after{
    content:"締切間近";
    font-size:.8rem;
    left: 15rem;
  }
  
  .info-second li .course-name{
    font-size:1.2rem;
    padding:10px 0 10px 20px;
  }
  




  .access-wrapper{
    background:rgba(255,255,255,1);
    max-width:1000px;
    padding:50px;
    border-radius:50px;
  }  
  .access-box{
    display:flex;
    flex-flow:row;
    align-items:center;
  }
  .access-box > img{
    width:50%;
    border:none;
    border-radius:10px;
  }  
  .access-box address{
    flex-grow:1;
    border-radius:0;
    background:none;
  }
  .access-box .address-box{
    max-width:none;
    margin:0;
    padding:0;
  }  
  .access-box .address-box > p{
    font-size:1rem;
  }
  .access-box .address-box > p span{
    font-size:2rem;
  }
  .access-box .address-box li{
    font-size:1.2rem;
    line-height:1.6rem;
  }
  .access-box .address-box dd{
    font-size:1.2rem;
  }
  .access-box .exp{
    font-size:.8rem;
  }
  
  /* index infoList(min-width:960px)
  ----------------------------*/
  .infoList-slider{
    max-width:1000px;
    border-radius: 30px;
  }
  .infoList-slider .swiper-button-next,.infoList-slider .swiper-button-prev{
    width: 50px;
    height: 50px;
  }
  .infoList-slider .swiper-button-next::after, .infoList-slider .swiper-button-prev::after {
    font-size: 1.6rem;
  }
  .infoList-slider .swiper-slide {
    padding:0 100px;
  }
  .infoList-slider .swiper-slide h3{
    font-size:1.8rem;
    padding:50px 0 30px 0;
  }
  .infoList-slider .mark{
    margin:15px 0;
  }
  .infoList-slider dl{
    padding:10px;
  }
  .infoList-slider .infoList-box{
    display:flex;
    align-items:center;
    border-width:3px;
    font-size:1rem;
  }
  .infoList-slider dt{
    padding:0 20px;
  }
  .infoList-slider dd{
    padding-left:250px;
  }
  .infoList-slider dd::before{
    font-size:.8rem;
    width:8rem;
    border-radius:15px;
    position:absolute;
    top:50%;
    left:0;
    transform: translate(0, -50%);
  }
  .infoList-slider dd::after{
    font-size:.8rem;
    width:6rem;
    border-radius:15px;
    top:50%;
    left:9rem;
    transform: translate(0, -50%);
  }

  /* course content (min-width:960px)
  ----------------------------*/
  .main-visual h1{
    font-size:1.8rem;
  }
  .main-visual h1 span{
    font-size:2.8rem;
  }
  .detail-title{
    font-size:2rem;
  }
  .date-slider{
    height:300px;
  }
  .date-slider .swiper-button-next,.date-slider .swiper-button-prev{
    width: 50px;
    height: 50px;
  }
  .date-slider .swiper-button-next::after, .swiper-button-prev::after {
    font-size: 1.6rem;
  }
  .date-slider .swiper-slide h3{
    font-size:1.4rem;
    padding-bottom:10px;
  }
  .date-slider .swiper-slide p{
    font-size:2rem;
  }
  .date-slider .swiper-slide ul{
    margin-top:20px;
  }
  .date-slider .swiper-slide li{
    padding-bottom:10px;
  }
  .license-wrapper dl{
    max-width:500px;
    margin:70px auto;
  }
  .license-wrapper dt{
    font-size:1.2rem;
  }
  .license-wrapper dd{
    font-size:1.4rem;
  }
  .details-wrapper{
    margin:50px auto;
    padding:20px 0;
    max-width:600px;
  }
  .details-box{
    padding:20px;
    font-size:1rem;
  }
  .details-box h3{
    font-size:1.4rem;
    padding:10px;
  }
  .details-box dl{
  padding-left:40px;
  }
  .details-box .details-row{
    line-height: 1.6rem;
  }
  .details-box ul{
    padding-left:50px;
  }
  .details-box li{
    line-height:1.6rem;
  }
  .content-box{
    margin:30px auto;
    padding:50px;
    border:2px solid #94b49f;
    border-radius:30px;
  }
  .content-box h3{
    font-size:1.4rem;
    padding:20px 0 10px;
  }
  .content-box h3:not(:first-child){
    padding:40px 0 10px;
  }
  .content-box ul{
    padding:20px;
  }
  .content-box li{
    font-size:1.2rem;
    padding:5px 0;
  }
  .content-box p{
    padding-left:15px;
  }
  .tab-name{
    padding:15px;
  }
  .btn-wrapper{
    display:flex;
    justify-content:space-between;
    margin:0 auto;
    max-width:600px;
  }
  .school-information{
    height:400px;
    max-width:800px;
    border-radius:0;
    position:relative;
    background-size:contain;
    background-position:left;
  }
  .school-information address{
    position:absolute;
    right:0;
    padding:1.4rem;
    background:rgba(255,255,255,.7);
    font-size:1.2rem;
  }
  .school-information address li{
    padding:2px 0;
  }
  .school-information address p{
    padding:0 0 10px 10px;
  }
  .school-information address p span{
    font-size:2rem;
  }
  .school-information .address span{
    padding-left:1.4rem;
  }
  .school-information .exp{
    padding:10px 0 0 0;
    text-align:center;
    font-size:.8rem;
  }
  .tel[href^="tel:"]{
    color:#555;
    pointer-events: none;
    border:none;
  }
  


  /* course pinpoint (min-width:960px)
  ----------------------------*/
  .pinpoint-image{
    width:90%;
    max-width:600px;
    border-radius:20px;
    border:3px solid white;
    display:block;
    margin:0 auto;
    box-shadow: 0 0 5px 0 #70AD47;
  }
  .recommend-wrapper{
    width:90%;
    display:flex;
    justify-content: center;
    margin:30px auto;
  }
  .recommend-box p{
    width:400px;
  }
  .pinpoint-image-small{
    width:300px;
    aspect-ratio: 1;
  }




  /* course TOP (min-width:960px)
  ----------------------------*/
  .lessonList{
    flex-flow:row;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .lessonBox{
    height:200px;
    max-width:none;
    width:420px;
    margin:20px 0;
    overflow: hidden;
  }
  .lessonBox a > img{
    transition:1s;
    transform:scale(1,1);
    z-index:1;
  }
  .lessonBox:hover a > img{
    transform:scale(4.5,4.5);
  }
  .lessonData{
    margin-right:auto;
    transition:1s;
    color:#555;
    z-index:2;
  }
  .lessonBox:hover .lessonData{
    color:#fff;
    text-shadow: 
    2px 2px 5px rgba(0, 0, 0, 0.8),
    2px 2px 5px rgba(0, 0, 0, 0.8),
    2px 2px 10px rgba(173, 216, 230, 0.5),
    2px 2px 10px rgba(173, 216, 230, 0.5);
  }
  .lessonName{
    font-size:1rem;
    margin-right:auto;
  }
  .lessonName span{
    font-size:1.2rem;
  }
  .lessonData ul{
    padding-left:35px;
  }

  /* course experience (min-width:960px)
  ----------------------------*/
  .experience-wrapper{
    padding:50px 0 70px;
  }
  .exp-image{
    width:100%;
    max-width:500px;
    display:block;
    margin:30px auto;
    border:3px solid white;
    border-radius:50%;
  }
  .experience-wrapper h3{
    margin:20px 0 5px;
    padding-left:50px;
    font-family: "RocknRoll One", sans-serif;
    font-size:1.6rem;
  }
  .experience-wrapper p{
    font-size:1.2rem;
    text-indent:0;
    max-width:860px;
    padding:10px;
    margin:0 auto;
  }

  /* form & request (min-width:960px)
  ----------------------------*/
  .request-explanation{
    font-size:1rem;
  }
  
  .input-area{
    margin-top:30px;
  }
  .input{
    margin-left:20px;
  }
  .inquiry{
    height:300px;
  }
  .document-box{
    flex-flow:row;
    justify-content:space-between;
    max-width:700px;
    margin:0 auto;
  }
  .document-box select{
    width:350px;
  }
  .form-checkList{
    display:flex;
    justify-content: space-between;
    max-width:700px;
    font-size:1rem;
    margin:0 auto;
  }


  /* privacy-policy (min-width:960px)
  -----------------------------*/

  .privacy-policy-box{
    padding:30px;
  }
  .privacy-policy-box dt{
    font-size:1.6rem;
  }
  .privacy-policy-box dt:not(:first-child){
    margin-top:30px;
  }
  .privacy-policy-box dd{
    font-size:1rem;
    text-indent:1rem;
    padding:5px 0 5px 1rem;
  }





  /* history Top (min-width:960px)
  ----------------------------*/
  .history-wrapper{
    max-width:1100px;
    margin:100px auto;
  }
  .timeline{
    margin:0 auto 0 10em;
    padding-left:0px;
    border-left:3px solid #94b49f;
  }
  .timeline li{
    position:relative;
  }
  .timeline-date{
    font-weight:normal;
    width:8em;
    display:inline-block;
    margin-left:-8em;
    text-align:right;
    padding-right:1em;
  }
  .timeline-content{
    position:absolute;
    top:0;
    left:1em;
  }
  .timeline-date::after{
    position:absolute;
    top:0.2em;
    left:-0.5em;
    content:"";
    background:#94b49f;
    height:13px;
    width:13px;
    border-radius:50%;
  }




  /* pinpoint settings (min-width:960px)
  ----------------------------*/













}