/* Production CSS scoped to .ph2-page */
.ph2-page main {
  padding-bottom: 80px;
  background-color: #F8F9F0;
}


/* # breadcrumbs
   -------------------------------------------------------------------------- */
.ph2-page .l-breadcrumbs {
  background-color: #f4f8fc;
}

.ph2-page .breadcrumbs {
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px;
  font-size: 0.8rem;
  line-height: 1.2;
}


/* # layer-ttl
   -------------------------------------------------------------------------- */
.ph2-page .layer-ttl-wrap {
  padding: 60px 0 120px;
  line-height: 1.5;
  text-align: center;
  background-color: #FB637E;
}


.ph2-page .layer-ttl {
  margin-bottom: 12px;
  color: #fff;
  font-size: 32px;
}


.ph2-page .layer-ttl .mini {
  display: block;
  font-size: 24px;
}


.ph2-page .layer-ttl-sub {
  color: #EBFF00;
  font-size: 20px;
}



@media screen and (max-width:500px) {

  
  .ph2-page .layer-ttl-wrap {
    padding: 40px 0;
  }

  
  .ph2-page .layer-ttl {
    font-size: 28px;
  }

  
  .ph2-page .layer-ttl .mini {
    font-size: 16px;
  }

}


/* # content-wrap
   -------------------------------------------------------------------------- */
.ph2-page .layer-content-wrap {
  overflow: hidden;
  width: 1000px;
  margin: -80px auto 0;
  padding: 0 60px 80px;
  background-color: #fff;
}



@media screen and (max-width:500px) {

  .ph2-page .layer-content-wrap {
    width: 100%;
    margin: 0;
    padding: 0 15px 40px;
  }

}


/* # layer-mainimg
   -------------------------------------------------------------------------- */
.ph2-page .layer-mainimg {
  margin: 0 -60px;
}



@media screen and (max-width:500px) {

  .ph2-page .layer-mainimg {
    overflow: hidden;
    position: relative;
    padding-top: 56.25%;
    margin: 0 -15px;
  }

  .ph2-page .layer-mainimg img {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    max-width: none;
    height: 100%;
    transform: translateX(-50%);
  }

  .ph2-page .layer-mainimg.left img {
    left: 0;
    transform: translateX(0);
  }

  .ph2-page .layer-mainimg.right img {
    right: 0;
    left: auto;
    transform: translateX(0);
  }

}


/* # layer-content
   -------------------------------------------------------------------------- */
.ph2-page .layer-content {
  float: left;
  width: 600px;
  padding-top: 60px;
}

.ph2-page .layer-content.full-content {
  width: 100%;
}



@media screen and (max-width:500px) {

  .ph2-page .layer-content {
    float: none;
    width: 100%;
    padding-top: 40px;
  }

}



/* # layer-head
   ------------------------------------- */
.ph2-page .layer-content.page h2, .ph2-page .layer-content .layer-head00 {
  margin: 80px 0 20px;
  padding: 15px;
  font-size: 24px;
  line-height: 1.4;
  background-color: #EBFF00;
}

.ph2-page .layer-content.page h2:first-child, .ph2-page .layer-content .layer-head00:first-child, .ph2-page .layer-content.page h2.mt0, .ph2-page .layer-content .layer-head00.mt0 {
  margin-top: 0;
  border-top: none;
}


.ph2-page .layer-content.page h3, .ph2-page .layer-content .layer-head01 {
  position: relative;
  margin: 80px 0 20px;
  padding: 60px 0 0 40px;
  font-size: 24px;
  line-height: 1.4;
  border-top: 1px solid #ddd;
}

.ph2-page .layer-content.page h3:before, .ph2-page .layer-content .layer-head01:before {
  content: "";
  position: absolute;
  top: 76px;
  left: 0;
  width: 28px;
  height: 2px;
  background-color: #FB637E;
}

.ph2-page .layer-content.page h3:first-child, .ph2-page .layer-content .layer-head01:first-child, .ph2-page .layer-content.page h3.mt0, .ph2-page .layer-content .layer-head01.mt0 {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ph2-page .layer-content.page h3:first-child:before, .ph2-page .layer-content .layer-head0:first-child:before, .ph2-page .layer-content.page h3.mt0:before, .ph2-page .layer-content .layer-head0.mt0:before {
  top: 16px;
}


.ph2-page .layer-content.page h4, .ph2-page .layer-content .layer-head02 {
  margin: 40px 0 20px;
  padding: 13px 20px;
  font-size: 18px;
  line-height: 1.4;
  border-left: 2px solid #FB637E;
  background-color: #FCF1F3;
}


.ph2-page .layer-content.page h5, .ph2-page .layer-content .layer-head03 {
  position: relative;
  margin: 30px 0 10px;
  padding-left: 12px;
  font-size: 16px;
  line-height: 1.375;
}

.ph2-page .layer-content.page h5:before, .ph2-page .layer-content .layer-head03:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 22px;
  border-radius: 1px;
  background-color: #FB637E;
}


.ph2-page .layer-content.page h6, .ph2-page .layer-content .layer-head04 {
  margin: 30px 10px;
  padding-bottom: 5px;
  font-size: 16px;
  border-bottom: 1px solid #eee;
}


/* # layer-img
   ------------------------------------- */
.ph2-page .layer-img {
  margin-bottom: 20px;
}


.ph2-page .layer-img figcaption {
  display: block;
  margin-top: 10px;
  color: #999;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
}


/* # layer-box
   ------------------------------------- */
.ph2-page .layer-box {
  margin-bottom: 20px;
  padding: 23px 30px;
  background-color: #F8F9F0;
}


.ph2-page .layer-content .layer-box p:last-child {
  margin-bottom: 0;
}


/* # layer-table
   ------------------------------------- */
.ph2-page .layer-table {
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
  border-collapse: separate;
  border-spacing: 1px;
}

.ph2-page .layer-table th {
  padding: 8px;
  color: #fff;
  text-align: left;
  letter-spacing: 0.01rem;
  vertical-align: middle;
  background-color: #FB637E;
}

.ph2-page .layer-table td {
  padding: 8px;
  text-align: left;
  letter-spacing: 0.01rem;
  vertical-align: middle;
  background-color: #F8F9F0;
}


.ph2-page .layer-table-scroll-txt {
  color: #999;
  font-size: 12px;
  text-align: center;
  line-height: 1;
}

.ph2-page .layer-table-scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.ph2-page .layer-table-scroll .layer-table {
  min-width: 1000px;
  margin: 15px 0;
}

.ph2-page .layer-table-scroll.fixed .layer-table tr th:first-child {
  position: sticky;
  top: 0;
  left: 0;
}

.ph2-page .layer-table-scroll.fixed .layer-table tr th:first-child:before {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: -1px;
  border-right: 1px solid #fff;
}


.ph2-page .close-wrap {
  position: relative;
}

.ph2-page .close-wrap:after {
  content: "試験は終了しました";
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px;
  color: #FB637E;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  border: 2px solid #FB637E;
  background-color: #fff;
  transform: translateX(-50%) translateY(-50%);
}

.ph2-page .close-wrap .layer-table {
  opacity: 0.1;
}


/* # layer-list
   ------------------------------------- */

/* ul */
.ph2-page ul.layer-list {
  margin-bottom: 20px;
  padding: 27px 30px;
  background-color: #F8F9F0;
}

.ph2-page ul.layer-list > li {
  position: relative;
  padding-left: 32px;
  font-size: 14px;
  line-height: 1.4285714286;
}

.ph2-page ul.layer-list > li:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: #FB637E;
  border-radius: 50%;
}

.ph2-page ul.layer-list > li:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 10px;
  width: 8px;
  height: 12px;
  border-left: 2px solid #EBFF00;
  border-top: 2px solid #EBFF00;
  transform-origin: top left;
  transform: rotate(-135deg);
}

.ph2-page ul.layer-list > li + li {
  margin-top: 15px;
}


/* ol */
.ph2-page ol.layer-list {
  margin-bottom: 20px;
  padding: 27px 30px;
  background-color: #F8F9F0;
  counter-reset: item;
}

.ph2-page ol.layer-list > li {
  position: relative;
  padding-left: 32px;
  font-size: 14px;
  line-height: 1.4285714286;
}

.ph2-page ol.layer-list > li:before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  top: -2px;
  left: 0;
  width: 24px;
  height: 24px;
  padding: 5px 0;
  color: #EBFF00;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  background-color: #FB637E;
  border-radius: 50%;
}

.ph2-page ol.layer-list > li + li {
  margin-top: 15px;
}


/* ulの入れ子 */
.ph2-page .layer-list > li > ul {
  margin-top: 10px;
}

.ph2-page .layer-list > li > ul > li {
  position: relative;
  padding-left: 13px;
  font-size: 13px;
  line-height: 1.5;
}

.ph2-page .layer-list > li > ul > li:before {
  content: "・";
  position: absolute;top: 0;
  left: 0;
  color: #FB637E;
  font-weight: 500;
}

.ph2-page .layer-list > li > ul > li + li {
  margin-top: 8px;
}


/* # layer-note-list
   ------------------------------------- */
.ph2-page .layer-note-list {
  padding: 27px 30px;
  background-color: #F8F9F0;
}

.ph2-page .layer-note-list > li {
  position: relative;
  padding-left: 13px;
  font-size: 13px;
  line-height: 1.3;
}

.ph2-page .layer-note-list > li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.ph2-page .layer-note-list > li + li {
  margin-top: 15px;
}


/* # p
   ------------------------------------- */
.ph2-page .layer-content p:not([class]) {
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 2;
}


.ph2-page .layer-content .note {
  color: #555;
  font-size: 12px;
}


/* # btn
   ------------------------------------- */
.ph2-page .layer-btn-wrap {
  margin: 30px 0 60px;
  font-size: 0;
  text-align: center;
}

.ph2-page .layer-btn {
  display: inline-block;
  padding: 20px 40px;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  background-color: #EBFF00;
  border-radius: 100px;
}


/* # layer-sidebar
   -------------------------------------------------------------------------- */
.ph2-page .layer-sidebar {
  float: right;
  width: 240px;
  padding-top: 60px;
}



@media screen and (max-width:500px) {

  
  .ph2-page .layer-sidebar {
    width: 100%;
  }

  
}


/* ==========================================================================
   # 一覧ページ
   ========================================================================== */
.ph2-page .index-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}


.ph2-page .index-list-item {
  display: flex;
  flex-direction: column;
  width: calc((100% - 20px) / 2);
  padding: 30px 20px;
  text-align: center;
  background-color: #F8F9F0;
  border-radius: 8px;
  border: 1px solid #FB637E;
}


.ph2-page .index-list-item .ttl {
  margin-bottom: 10px;
  color: #333;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
}


.ph2-page .index-list-item .link {
  margin-top: auto;
  font-size: 12px;
  line-height: 1;
}



@media screen and (max-width:500px) {

  .ph2-page .index-list {
    gap: 10px;
  }

  
  .ph2-page .index-list-item {
    width: calc((100% - 10px) / 2);
    padding: 20px 10px;
  }

  
  .ph2-page .index-list-item .ttl {
    font-size: 16px;
  }

}


/* ==========================================================================
   # about
   ========================================================================== */

/* # about
   -------------------------------------------------------------------------- */
.ph2-page .about-access-map {
  position: relative;
  width: 100%;
  height: 0;
  margin-bottom: 20px;
  padding-top: 75%;
}

 
.ph2-page .about-access-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* ==========================================================================
   # department
   ========================================================================== */

/* # point
   -------------------------------------------------------------------------- */
.ph2-page .department-point-head {
  position: relative;
  display: table;
  width: 100%;
  min-height: 72px;
  margin: 80px 0 20px;
}

.ph2-page .department-point-head:first-child {
  margin-top: 0;
}


.ph2-page .department-point-head .ico-wrap {
  display: table-cell;
  width: 80px;
  vertical-align: middle;
}

.ph2-page .department-point-head .ico {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 25px 0;
  font-size: 15px;
  line-height: 1;
  text-align: center;
  background-color: #EBFF00;
}

.ph2-page .department-point-head .ico:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 5px solid #fff;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
}

.ph2-page .department-point-head .ico .num {
  display: block;
  margin-top: 5px;
  color: #FB637E;
  font-size: 30px;
}

.ph2-page .department-point-head .txt {
  display: table-cell;
  padding: 0 0 0 15px;
  font-size: 28px;
  line-height: 1.2857142857;
  vertical-align: middle;
}


/* # course
   -------------------------------------------------------------------------- */
/* # example
   ------------------------------------- */
.ph2-page .department-course-example {
  margin: 20px 0;
}


.ph2-page .department-course-example-item {
  position: relative;
  padding-left: 70px;
}

.ph2-page .department-course-example-item:first-child {
  padding-bottom: 20px;
}

.ph2-page .department-course-example-item:first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 29px;
  bottom: 0;
  width: 2px;
  background-color: #333;
}


.ph2-page .department-course-example-item .head {
  position: absolute;
  top: -5px;
  left: 0;
  width: 60px;
  padding: 14px 0 11px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  background-color: #FB637E;
  border-radius: 50%;
}

.ph2-page .department-course-example-item .head .sub {
  display: block;
  margin-top: 5px;
  color: #EBFF00;
  font-size: 12px;
}


.ph2-page .example-study {
  background-color: #F8F9F0;
  border: 1px solid #ebebd9;
}

.ph2-page .example-study .txt {
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}


.ph2-page .example-free {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
  text-align: center;
}


.ph2-page .example-table-wrap {
  margin: 0 -10px;
}

.ph2-page .example-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px 0;
}

.ph2-page .example-table td {
  width: 33.33333333%;
  padding: 0;
  vertical-align: top;
  background-color: #F8F9F0;
  border: 1px solid #ebebd9;
}

.ph2-page .example-table td .txt {
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}


.ph2-page .department-course-example-item .etc {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1;
  text-align: right;
}


/* # timetable
   ------------------------------------- */
.ph2-page .department-course-timetable {
  width: 100%;
  margin: 20px 0;
  border-collapse: separate;
  border-spacing: 1px;
}


.ph2-page .department-course-timetable .day {
  width: 17%;
  padding: 20px 0;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  background-color: #FB637E;
}


.ph2-page .department-course-timetable .period {
  padding: 20px 0;
  color: #FB637E;
  font-size: 16px;
  line-height: 1.2;
  background-color: #FFEDF0;
}

.ph2-page .department-course-timetable .period .time {
  display: block;
  margin-top: 5px;
  color: #333;
  font-size: 12px;
}


.ph2-page .department-course-timetable td {
  padding: 20px 10px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  background-color: #F8F9F0;
}

.ph2-page .department-course-timetable td.free {
  font-size: 16px;
  font-weight: 500;
  background-color: #EBFF00;
}


/* # teacher
   -------------------------------------------------------------------------- */
.ph2-page .department-teacher-ttl {
  overflow: hidden;
  margin: 60px 0 20px;
  line-height: 1;
}

.ph2-page .department-teacher-ttl .cate {
  display: block;
  float: left;
  margin-right: 16px;
  padding: 12px;
  color: #fff;
  font-size: 16px;
  background-color: #FB637E;
}

.ph2-page .department-teacher-ttl .main {
  display: block;
  float: left;
  margin-right: 16px;
  padding: 4px 0;
  font-size: 32px;
  font-weight: 500;
}

.ph2-page .department-teacher-ttl .sub {
  float: left;
  display: block;
  padding: 16px 0 10px;
  color: #FB637E;
  font-size: 14px;
}



@media screen and (max-width:500px) {

  .ph2-page .example-table-wrap {
    margin: 0 0 -5px;
  }

  .ph2-page .example-table {
    overflow: hidden;
    display: block;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .ph2-page .example-table tbody, .ph2-page .example-table tr {
    display: block;
    width: 100%;
  }

  .ph2-page .example-table td {
    float: left;
    width: 49%;
    margin-bottom: 5px;
  }

  .ph2-page .example-table td:nth-child(even) {
    float: right;
  }

  .ph2-page .example-table td .txt, .ph2-page .example-study .txt {
    font-size: 14px;
  }

  
  .ph2-page .department-course-example-item .etc {
    margin-top: -21px;
  }

}



/* ==========================================================================
   # campus
   ========================================================================== */

/* # event
   -------------------------------------------------------------------------- */
.ph2-page .campus-event-wrap {
  margin-top: 40px;
}


.ph2-page .campus-event {
  position: relative;
  margin-left: 19px;
  padding-left: 60px;
  border-left: 2px solid #333;
}

.ph2-page .campus-event:last-child {
  border: none;
}


.ph2-page .campus-event-ttl {
  position: absolute;
  top: -20px;
  left: -40px;
  width: 80px;
  height: 80px;
  padding: 17px 0;
  text-align: center;
  line-height: 1;
  letter-spacing: 0;
  border-radius: 50%;
  background-color: #EBFF00;
}


.ph2-page .campus-event-ttl .main {
  display: block;
  font-size: 24px;
}

.ph2-page .campus-event-ttl .main .num {
  font-size: 32px;
}


.ph2-page .campus-event-ttl .sub {
  display: block;
  color: #FB637E;
  font-size: 14px;
}


.ph2-page .campus-event-ttl-sub {
  position: relative;
  padding-right: 80px;
  margin-bottom: 10px;
  font-size: 20px;
  line-height: 1.5;
}

.ph2-page .campus-event-ttl-sub .year {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  padding: 8px 10px;
  color: #FB637E;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  border: 1px solid #FB637E;
  background-color: #fff;
}



@media screen and (max-width:500px) {

  .ph2-page .campus-event {
    margin-left: 25px;
    padding-left: 48px;
  }

  
  .ph2-page .campus-event-ttl {
    left: -33px;
    width: 68px;
    height: 68px;
    padding: 16px 0;
  }

  
  .ph2-page .campus-event-ttl .main {
    font-size: 18px;
  }

  .ph2-page .campus-event-ttl .main .num {
    font-size: 24px;
  }

  .ph2-page .campus-event-ttl .sub {
    font-size: 12px;
  }

}


/* ==========================================================================
   # news
   ========================================================================== */
.ph2-page .news-list {
  border-top: 1px solid #ddd;
}


.ph2-page .news-list-item {
  padding: 20px;
  border-bottom: 1px solid #ddd;
}


.ph2-page .news-list-item-link {
  display: table;
  width: 100%;
  text-decoration: none;
}


.ph2-page .news-list-item-img {
  overflow: hidden;
  position: relative;
  display: table-cell;
  width: 200px;
  height: 150px;
  border-radius: 4px;
}

.ph2-page .news-list-item-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
}


.ph2-page .news-list-item-info {
  position: relative;
  display: table-cell;
  padding-left: 20px;
  vertical-align: middle;
}

.ph2-page .news-list-item-info .date {
  margin-bottom: 10px;
  color: #999;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05rem;
}

.ph2-page .news-list-item-info .ttl {
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.ph2-page .news-list-item-info .more {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05rem;
}


.ph2-page .pagination {
  text-align: center;
  margin: 40px 0;
}


.ph2-page .pagination .page-numbers {
  display: inline-block;
  margin: 0 5px;
  padding: 10px 15px;
  background: #f2f2f2;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}


.ph2-page .pagination .current {
  background: #333;
  color: #fff;
}




@media screen and (max-width:500px) {

  .ph2-page .news-list-item-img {
    width: 140px;
    height: 105px;
  }

  .ph2-page .news-list-item-info {
    padding-left: 10px;
  }

  .ph2-page .news-list-item-info .date {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .ph2-page .news-list-item-info .ttl {
    font-size: 14px;
  }

}



/* ==========================================================================
   # open_campus
   ========================================================================== */
.ph2-page .layer-content.oc-content {
  float: none;
  width: 100%;
}


.ph2-page .oc-ttl {
  margin-bottom: 30px;
  font-size: 32px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}

.ph2-page .oc-ttl .inner {
  position: relative;
  display: inline-block;
  padding: 0 30px;
}

.ph2-page .oc-ttl .inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  border: 1px solid #FB637E;
  border-right: none;
}

.ph2-page .oc-ttl .inner:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  border: 1px solid #FB637E;
  border-left: none;
}


.ph2-page .oc-list {
  margin: 0 -10px;
  font-size: 0;
  letter-spacing: 0;
}


.ph2-page .oc-list-item {
  display: inline-block;
  width: 50%;
  margin-bottom: 20px;
  padding: 0 10px;
}


.ph2-page .oc-list-item-link {
  position: relative;
  display: block;
  color: #333;
  text-decoration: none;
  background-color: #F8F9F0;
  border: 1px solid #ebebd9;
  border-bottom: none;
}


.ph2-page .oc-list-item-img {
  
}


.ph2-page .oc-list-item-info {
  padding: 20px;
}


.ph2-page .oc-list-item-head {
  height: 72px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}


.ph2-page .oc-list-item-date {
  display: table;
  width: 100%;
}

.ph2-page .oc-list-item-date + .oc-list-item-date {
  margin-top: 5px;
}

.ph2-page .oc-list-item-date .head {
  display: table-cell;
  width: 48px;
  padding-top: 2px;
  vertical-align: top;
}

.ph2-page .oc-list-item-date .head .ico {
  display: block;
  padding: 4px 0;
  color: #FB637E;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #FB637E;
}


.ph2-page .oc-list-item-date .txt {
  display: table-cell;
  padding-left: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08rem;
  vertical-align: middle;
}


.ph2-page .oc-list-item-tag {
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 10px;
}

.ph2-page .oc-list-item-tag li {
  float: left;
  margin-right: 5px;
  padding: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  background-color: #FB637E;
  border-radius: 4px;
}


.ph2-page .oc-list-item-btn-wrap {
  overflow: hidden;
  border: 1px solid #ebebd9;
}

.ph2-page .oc-list-item-btn-wrap .more {
  display: block;
  float: left;
  width: 50%;
  padding: 20px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #FB637E;
}

.ph2-page .oc-list-item-btn-wrap .entry {
  display: block;
  float: right;
  width: 50%;
  padding: 20px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #EBFF00;
}



@media screen and (max-width:500px) {

  
  .ph2-page .oc-ttl .inner {
    font-size: 24px;
  }

  
  .ph2-page .oc-list-item {
    display: block;
    width: 100%;
  }

  
}


/* # 詳細
   -------------------------------------------------------------------------- */
.ph2-page .oc-img-list-wrap {
  margin: 0 -20px 15px;
  padding-bottom: 15px;
}


.ph2-page .oc-img-list {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 20px 0;
}


.ph2-page .oc-img-list-item {
  display: table-cell;
  width: 33.33333333333333%;
  padding-bottom: 10px;
  vertical-align: top;
  background-color: #FB637E;
}

.ph2-page .oc-img-list-item figcaption {
  position: relative;
  margin-top: 10px;
  padding: 0 10px 0 40px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}


.ph2-page .oc-img-list-item figcaption:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 24px;
  height: 24px;
  background-color: #EBFF00;
  border-radius: 50%;
  transform: translateY(-50%) 
}

.ph2-page .oc-img-list-item figcaption:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 8px;
  height: 12px;
  border-left: 2px solid #FB637E;
  border-top: 2px solid #FB637E;
  transform-origin: top left;
  transform: translateY(6px) rotate(-135deg);
}

/* # date
   ------------------------------------- */
.ph2-page .oc-date {
  overflow: hidden;
  margin: 60px -60px 0;
  padding: 60px;
  background-color: #EBFF00;
}


.ph2-page .oc-date-ttl {
  margin-bottom: 30px;
  font-size: 32px;
  line-height: 1;
  text-align: center;
}


.ph2-page .oc-date-list {
  margin: 0 -6px -12px;
  font-size: 0;
  letter-spacing: 0;
}


.ph2-page .oc-date-list-item {
  display: inline-block;
  width: 211px;
  margin: 0 6px 12px;
  padding-top: 20px;
  line-height: 1;
  text-align: center;
  vertical-align: top;
  background-color: #fff;
  border-radius: 0;
}

.ph2-page .oc-date-list-item .tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 14px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 12px;
}

.ph2-page .oc-date-list-item.night .tag {
  color: #fff;
  background-color: #333;
}

.ph2-page .oc-date-list-item .date {
  font-weight: 500;
  letter-spacing: 0;
}

.ph2-page .oc-date-list-item .date .day {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
}

.ph2-page .oc-date-list-item .date .day .robo700 {
  font-size: 36px;
}

.ph2-page .oc-date-list-item .date .time {
  font-size: 16px;
}

.ph2-page .oc-date-list-item .contents {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
}

.ph2-page .oc-date-list-item .entry {
  display: block;
  margin-top: 15px;
  padding: 20px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #0BC0C2;
}


/* off */
.ph2-page .oc-date-list-item.off {
  color: #ddd;
}

.ph2-page .oc-date-list-item.off .tag {
  background-color: #aaa;
}


.ph2-page .oc-date-list-item.off .entry {
  color: #fff;
  background-color: #ddd;
  pointer-events: none;
}


/* online */
.ph2-page .oc-date-online {
  overflow: hidden;
  padding: 30px;
  background-color: #fff;
}


.ph2-page .oc-date-online-img {
  float: right;
  width: 240px;
}


.ph2-page .oc-date-online-ttl {
  margin-bottom: 10px;
  font-size: 24px;
}


.ph2-page .oc-date-online .txt {
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
}


.ph2-page .oc-date-online .note {
  margin-bottom: 20px;
  color: #999;
  font-size: 12px;
  line-height: 1.5;
}


.ph2-page .oc-date-online-entry {
  display: block;
  padding: 20px 0;
  color: #333;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #EBFF00;
}



/* addres */
.ph2-page .oc-date-addres {
  display: table;
  width: 100%;
  margin-top: 20px;
  background-color: #fff;
}


.ph2-page .oc-date-addres-info {
  display: table-cell;
  padding: 0 30px;
  vertical-align: middle;
}

.ph2-page .oc-date-addres-info .ttl {
  margin-bottom: 10px;
  color: #FB637E;
  font-size: 18px;
  line-height: 1;
}

.ph2-page .oc-date-addres-info .txt {
  font-size: 14px;
  line-height: 1.5;
}

.ph2-page .oc-date-addres-info .txt + .txt {
  margin-top: 10px;
}

.ph2-page .oc-date-addres-info .txt strong {
  font-size: 20px;
}


.ph2-page .oc-date-addres-img {
  display: table-cell;
  width: 300px;
}


/* # oc-section
   ------------------------------------- */
.ph2-page .oc-content .layer-content-wrap {
  margin: 0 -60px;
}


.ph2-page .oc-section-ttl {
  margin-bottom: 60px;
  font-size: 60px;
  text-align: center;
}


.ph2-page .oc-section {
  padding-bottom: 60px;
}


.ph2-page .oc-section h3 {
  margin: 60px 0 30px;
  font-size: 32px;
  text-align: center;
}


.ph2-page .oc-section h3 {
  position: relative;
  margin: 60px 0 30px;
  padding-bottom: 18px;
  font-size: 32px;
  line-height: 1.25;
}

.ph2-page .oc-section h3:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 2px;
  width: 60px;
  background-color: #FB637E;
  transform: translateX(-50%);
}


.ph2-page .oc-section h4 {
  margin: 30px 0 10px;
  padding: 10px 15px;
  font-size: 14px;
  background-color: #FCF1F3;
}


.ph2-page .oc-section table {
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  line-height: 1.5;
  border-bottom: 1px solid #eee;
}

.ph2-page .oc-section table th, .ph2-page .oc-section table td {
  padding: 20px;
  border-top: 1px solid #eee;
}


.ph2-page .oc-section .button_grn a {
  display: block;
  max-width: 320px;
  margin: 30px auto 0;
  padding: 20px 0;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #0BC0C2;
}



@media screen and (max-width:500px) {

  
  .ph2-page .oc-content .layer-content-wrap {
    margin: 0;
    padding: 0;
  }

  
  .ph2-page .oc-section-ttl {
    font-size: 24px;
  }

  
  .ph2-page .oc-sidebar {
    display: none;
  }

}


/* # bus
   ------------------------------------- */
.ph2-page .oc-bus {
  margin: 40px 0;
  display: table;
  width: 100%;
  background-color: #F8F9F0;
  border-collapse: collapse;
  border: 2px solid #FB637E;
}

.ph2-page .oc-bus-info {
  display: table-cell;
  padding: 30px;
  vertical-align: middle;
}

.ph2-page .oc-bus-info .ttl {
  margin-bottom: 15px;
  font-size: 24px;
  line-height: 1.2;
}

.ph2-page .oc-bus-info .txt {
  font-size: 14px;
  line-height: 1.5;
}

.ph2-page .oc-bus-table-wrap {
  display: table-cell;
  padding: 30px;
  padding-left: 0;
  vertical-align: middle;
}

.ph2-page .oc-bus-table-wrap .layer-table td {
  background-color: #fff;
}

.ph2-page .oc-bus-table-wrap .btn {
  display: block;
  padding: 20px 0;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  border: 1px solid #FB637E;
  background-color: #fff;
  border-radius: 29px;
}


/* # schedule
   ------------------------------------- */
.ph2-page .oc-schedule {
  margin: 0 -60px;
  padding: 60px;
  background-color: #FCF1F3;
}


.ph2-page .oc-schedule-ttl {
  margin-bottom: 20px;
  font-size: 32px;
  line-height: 1;
  text-align: center;
}


.ph2-page .oc-schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}


.ph2-page .oc-schedule-table-head {
  width: 160px;
  padding: 30px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  background-color: #FB637E;
}


.ph2-page .oc-schedule-table-data {
  position: relative;
  padding: 30px;
  vertical-align: middle;
  background-color: #fff;
}

.ph2-page .oc-schedule-table-data:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  border-left: 12px solid #FB637E;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  transform: translateY(-50%);
}

.ph2-page .oc-schedule-table-data .ttl {
  margin-bottom: 10px;
  color: #FB637E;
  font-size: 20px;
  font-weight: 500;
}

.ph2-page .oc-schedule-table-data .txt {
  font-size: 14px;
  line-height: 2;
}


.ph2-page .oc-schedule-table-img {
  width: 280px;
  padding: 0;
  vertical-align: middle;
  background-color: #fff;
}


/* # flow
   ------------------------------------- */
.ph2-page .oc-flow {
  padding: 60px 0;
}


.ph2-page .oc-flow-ttl {
  margin-bottom: 30px;
  font-size: 32px;
  line-height: 1;
  text-align: center;
}


.ph2-page .oc-flow-table {
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid #ddd;
}

.ph2-page .oc-flow-table .head {
  padding: 30px 20px;
  color: #FB637E;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}

.ph2-page .oc-flow-table .data {
  padding: 30px 20px 30px 0;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
}

.ph2-page .oc-flow-table .data .ttl {
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: 500;
}

.ph2-page .oc-flow-table .data .txt + .txt {
  margin-top: 10px;
}

.ph2-page .oc-flow-table .data .note {
  margin-top: 10px;
  color: #999;
}

.ph2-page .oc-flow-table .data .note li {
  position: relative;
  padding-left: 14px;
}

.ph2-page .oc-flow-table .data .note li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}

.ph2-page .oc-flow-table .data .note li + li {
  margin-top: 5px;
}


/* # faq
   ------------------------------------- */
.ph2-page .oc-faq {
  overflow: hidden;
  margin: 0 -60px;
  padding: 60px 60px 50px;
  background-color: #FB637E;
}


.ph2-page .oc-faq-ttl {
  margin-bottom: 30px;
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}


.ph2-page .oc-faq-box {
  margin-bottom: 10px;
}


.ph2-page .oc-faq-box-ttl {
  position: relative;
  padding: 20px 20px 20px 60px;
  font-size: 16px;
  background-color: #fff;
  border-bottom: 1px solid #FB637E;
}

.ph2-page .oc-faq-box-ttl:before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: 20px;
  width: 30px;
  height: 30px;
  padding: 7px 0;
  color: #FB637E;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  background-color: #EBFF00;
  border-radius: 50%;
  transform: translateY(-50%);
}


.ph2-page .oc-faq-box-txt {
  padding: 20px;
  background-color: #F8F9F0;
}

.ph2-page .oc-faq-box-txt p:last-child {
  margin-bottom: 0;
}


/* # entry
   ------------------------------------- */
.ph2-page .oc-entry {
  display: block;
  padding: 120px 0;
  color: #333;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #EBFF00;
}

.ph2-page .oc-entry .main {
  display: block;
  margin-bottom: 20px;
  font-size: 60px;
}



@media screen and (max-width:500px) {

  
  .ph2-page .oc-main {
    padding-bottom: 0;
  }

  
  .ph2-page .oc-img-list-wrap {
    overflow: scroll;
  }

  .ph2-page .oc-img-list {
    width: 900px;
  }

  
  .ph2-page .oc-date-list {
    margin: 0 -1.3020833333% -2.6041666667%;
  }

  
  .ph2-page .oc-date-list-item {
    width: 47.461928934%;
    margin: 0 1.269035533% 2.538071066%;
  }

  
  .ph2-page .oc-date-addres {
    display: block;
  }

  .ph2-page .oc-date-addres-img {
    display: block;
    width: 100%;
  }

  .ph2-page .oc-date-addres-info {
    display: block;
    padding: 20px 20px 30px;
  }

  
  .ph2-page .oc-bus {
    display: block;
  }

  .ph2-page .oc-bus-info {
    display: block;
    padding: 20px;
  }

  .ph2-page .oc-bus-table-wrap {
    display: block;
    padding: 0 20px 20px;
  }

  
  .ph2-page .oc-schedule-ttl {
    margin-bottom: 30px;
  }

  
  .ph2-page .oc-schedule-table {
    display: block;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .ph2-page .oc-schedule-table tbody, .ph2-page .oc-schedule-table tr {
    display: block;
    width: 100%;
  }

  .ph2-page .oc-schedule-table tr + tr {
    margin-top: 20px;
  }

  .ph2-page .oc-schedule-table-head {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 20px;
  }

  .ph2-page .oc-schedule-table-data {
    display: block;
    padding: 20px;
  }

  .ph2-page .oc-schedule-table-data:before {
    top: 0;
    left: 50%;
    border-top: 10px solid #FB637E;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: none;
    transform: translateX(-50%);
  }

  .ph2-page .oc-schedule-table-img {
    display: block;
    width: 100%;
    padding: 0 20px 20px;
  }

  
  .ph2-page .oc-entry {
    padding: 80px 0;
    font-size: 16px;
  }

  .ph2-page .oc-entry .main {
    font-size: 40px;
  }

  
  .ph2-page .oc-date-online {
    padding: 20px;
  }

  .ph2-page .oc-date-online-img {
    width: 100%;
    margin-bottom: 15px;
  }

  .ph2-page .oc-date-online-ttl {
    font-size: 20px;
  }

}


/* ==========================================================================
   # column
   ========================================================================== */
.ph2-page .column-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}


.ph2-page .column-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc((100% - 20px) / 2);
  padding-bottom: 20px;
  color: #333;
  text-decoration: none;
  background-color: #F8F9F0;
  border: 1px solid #ebebd9;
}

.ph2-page .column-list-item:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: #FB637E;
}

.ph2-page .column-list-item:after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: 8px;
  border-left: 4px solid #fff;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}


.ph2-page .column-list-item-img {
  position: relative;
  margin-bottom: 10px;
}


.ph2-page .column-list-item-info {
  padding: 0 15px;
}

.ph2-page .column-list-item-info .ttl {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}



@media screen and (max-width:500px) {

  
  .ph2-page .column-list-item {
    width: 100%;
  }

  
}


/* ==========================================================================
   # confirm
   ========================================================================== */
.ph2-page .hidden {
  display: none;
}


.ph2-page #time-message {
  margin-bottom: 30px;
  padding: 15px 20px;
  color: #FB637E;
  border: 1px solid #F5E6E8;
  background-color: #FCF1F3;
}


.ph2-page .confirm-box {
  margin-bottom: 30px;
  padding: 20px;
  background-color: #F8F9F0;
  border: 1px solid #ebebd9;
}


.ph2-page .confirm-box .txt {
  margin-bottom: 10px;
  font-size: 14px;
}

.ph2-page .confirm-box .txt .mini {
  color: #999;
  font-size: 11px;
}


.ph2-page .confirm-box .input {
  height: 40px;
  margin-bottom: 10px;
  padding: 0 10px;
  color: inherit;
  font-size: 16px;
  font-family: inherit;
  line-height: normal;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-radius: 4px;
  border: 1px solid #DDDDDD;
  background-color: #EFEFEF;
}


.ph2-page .confirm-box .btn {
  height: 40px;
  margin-bottom: 10px;
  padding: 0 10px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  line-height: normal;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border-radius: 4px;
  border: none;
  background-color: #0BC0C2;
}


.ph2-page #result-section {
  margin-bottom: 20px;
  padding: 30px;
  text-align: center;
  background-color: #eee;
  border: 1px solid #999;
}


.ph2-page #result-message-num {
  margin-bottom: 10px;
  font-size: 16px;
}


.ph2-page #result-message-category {
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1;
  background-color: #fff;
  border-radius: 12px;
}


.ph2-page #result-message {
  color: #333;
  font-size: 40px;
}


.ph2-page #result-message-sub {
  margin-top: 10px;
  font-size: 14px;
}


/* ==========================================================================
   # contact
   ========================================================================== */

.ph2-page .form-content {
  max-width: 1000px;
  margin: -80px auto 0;
  padding: 60px 60px 80px;
  background-color: #fff;
}


.ph2-page .form-content .layer-mainimg {
  margin-top: -60px;
  margin-bottom: 60px;
}


.ph2-page .form-desc {
  margin: 0 20px 20px;
  padding: 20px;
  border: 1px solid #FB637E;
  background-color: #F8F9F0;
  border-radius: 8px;
}

.ph2-page .form-desc p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  text-align: center;
}


.ph2-page .form-table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 20px;
}


.ph2-page .form-content td {
  position: relative;
  width: 50%;
  margin-bottom: 17px;
  padding: 0 0 20px;
  vertical-align: top;
}



/* # 見出し
   -------------------------------------------------------------------------- */
.ph2-page .form-head {
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
  padding-left: 35px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2857142857;
}

.ph2-page .form-head .hissu, .ph2-page .form-head .nini {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 30px;
  padding: 4px 0;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.05rem;
  text-align: center;
  background-color: #FB637E;
  border-radius: 3px;
}

.ph2-page .form-head .nini { background-color: #999; }



/* # text
   -------------------------------------------------------------------------- */
.ph2-page .form-input {
  display: block;
  width: 100%;
  padding: 0 20px;
  height: 60px;
  font-size: 16px;
  line-height: normal;
  border-radius: 4px;
  border: 1px solid #DDDDDD;
  background-color: #EFEFEF;
}

.ph2-page .form-input:-webkit-autofill { box-shadow: 0 0 0 1000px #EFEFEF inset; }


/* # textarea
   -------------------------------------------------------------------------- */
.ph2-page .form-textarea {
  display: block;
  width: 100%;
  padding: 18px 20px;
  height: 120px;
  font-size: 16px;
  line-height: normal;
  line-height: 1.25;
  border-radius: 4px;
  border: 1px solid #DDDDDD;
  background-color: #EFEFEF;
}


.ph2-page ::placeholder { color: #b7bec5; }


/* # radio
   -------------------------------------------------------------------------- */
.ph2-page .form-radio-wrap {
  overflow: hidden;
  margin-bottom: -10px;
}


.ph2-page .form-radio {
  float: left;
  display: block;
  margin: 0 20px 10px 0;
}


.ph2-page .form-radio input { display: none; }

.ph2-page .form-radio label {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  font-size: 16px;
  line-height: 1;
}

.ph2-page .form-radio label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #DDDDDD;
  background-color: #EFEFEF;
  border-radius: 50%;
  transform: translateY(-50%);
}

.ph2-page .form-radio label:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: #FB637E;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  transform: translateY(-50%);
}

.ph2-page .form-radio input:checked + label { color: #FB637E; }

.ph2-page .form-radio input:checked + label:after { opacity: 1; }


/* # checkbox
   -------------------------------------------------------------------------- */
.ph2-page .form-checkbox-wrap {
  overflow: hidden;
  margin-bottom: -10px;
}

.ph2-page .form-checkbox {
  float: left;
  display: block;
  margin: 0 20px 10px 0;
}

.ph2-page .form-checkbox input { display: none; }

.ph2-page .form-checkbox label {
  position: relative;
  display: inline-block;
  padding-left: 25px;
  font-size: 16px;
  line-height: 1;
}

.ph2-page .form-checkbox label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #DDDDDD;
  background-color: #EFEFEF;
  border-radius: 2px;
  transform: translateY(-50%);
}

.ph2-page .form-checkbox label:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transition: opacity 0.3s;
  transform-origin: left bottom;
  transform: translateY(-50%) rotate(-45deg);
}

.ph2-page .form-checkbox input:checked + label { color: #FB637E; }

.ph2-page .form-checkbox input:checked + label:before {
  background-color: #FB637E;
  border-color: #FB637E;
}

.ph2-page .form-checkbox input:checked + label:after { opacity: 1; }


/* # select
   -------------------------------------------------------------------------- */
.ph2-page .form-select-wrap {
  position: relative;
  margin-bottom: -20px;
  padding-bottom: 20px;
}

.ph2-page .form-select-wrap:before {
  content: "";
  position: absolute;
  top: 30px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform-origin: top right;
  transform: rotate(135deg);
}

.ph2-page .form-select {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 20px;
  color: #333;
  font-size: 16px;
  line-height: normal;
  background: linear-gradient(#fff, #eee);
  border: 1px solid #999;
  border-radius: 4px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}


/* birth */
.ph2-page .form-birth-wrap {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.ph2-page .form-birth-item {
  position: relative;
  display: table-cell;
  width: 33.3333333%;
  padding-right: 24px;
}

.ph2-page .form-birth-txt {
  position: absolute;
  top: 23px;
  right: 5px;
  font-size: 14px;
  line-height: 1;
}


/* # validation
   -------------------------------------------------------------------------- */
.ph2-page .formError, .ph2-page .error {
  position: absolute;
  bottom: 0;
  left: 0;
  color: #FB637E;
  font-size: 12px;
  line-height: 1;
}


/* # btn
   -------------------------------------------------------------------------- */
.ph2-page .form-confirm {
  display: block;
  width: 280px;
  margin: 0 auto;
  padding: 29px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  background-color: #999;
  border-radius: 42px;
}

.ph2-page .form-confirm.active {
  color: #333;
  background-color: #ebff00;
  cursor: pointer;
}


.ph2-page .form-back-wrap {
  margin-top: 20px;
  text-align: center;
}

.ph2-page .form-back {
  display: inline-block;
  color: #999;
  font-size: 12px;
  line-height: 1;
  text-decoration: underline;
}


/* # txt
   -------------------------------------------------------------------------- */
.ph2-page .form-txt {
  margin-bottom: 15px;
  padding: 0 20px;
  font-size: 14px;
}


/* # 郵便番号
   -------------------------------------------------------------------------- */
.ph2-page .post-code {
  padding-left: 25px;
}

.ph2-page .post-code-txt {
  position: absolute;
  top: 50px;
  left: 0;
  width: 20px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}


/* # イベント
   -------------------------------------------------------------------------- */
.ph2-page .form-event-box-wrap {
  border: 1px solid #FB637E;
}


.ph2-page .form-event-box {
  border-top: 1px solid #FB637E;
}

.ph2-page .form-event-box:first-child {
  border-top: none;
}


.ph2-page .form-event-box-ttl {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-bottom: 1px solid #FB637E;
  background-color: #FCF1F3;
}


.ph2-page .form-event-box-ttl .img {
  overflow: hidden;
  display: table-cell;
  width: 160px;
  padding: 0;
  vertical-align: middle;
}


.ph2-page .form-event-box-ttl .txt {
  display: table-cell;
  padding: 0 20px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  vertical-align: middle;
}


.ph2-page .form-event-box .form-radio-wrap {
  margin-bottom: 0;
  padding: 30px 30px 20px;
}


.ph2-page .form-event-online {
  overflow: hidden;
  display: none;
  padding: 0 30px 10px;
  border-top: none;
}


.ph2-page .form-event-online-txt {
  margin-bottom: 15px;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  background-color: #F8F9F0;
  border-radius: 4px;
}


.ph2-page .form-event-online-box01 {
  float: left;
  width: 50%;
  padding: 0 10px 20px 0;
}

.ph2-page .form-event-online-box02 {
  float: right;
  width: 50%;
  padding: 0 0 20px 10px;
}


.ph2-page .form-event-access {
  display: none;
}


.ph2-page .form-event-note {
  margin-bottom: 20px;
  color: #999;
  font-size: 13px;
}

.ph2-page .form-radio-wrap + .form-event-note {
  margin: 15px 0 0;
}


/* # form-ttl
   -------------------------------------------------------------------------- */
.ph2-page .form-ttl {
  margin: 0 20px 30px;
  padding: 15px 20px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 4px;
  background-color: #FCF1F3;
}



@media screen and (max-width:500px) {

  
  .ph2-page .form-content {
    width: 100%;
    margin: 0;
    padding: 40px 15px 60px;
  }

  
  .ph2-page .form-content .layer-mainimg {
    margin: -40px -15px 40px;
  }

  
  .ph2-page .form-desc {
    margin: 0 0 30px;
  }

  .ph2-page .form-desc p {
    text-align: left;
  }

    
  .ph2-page .form-table {
    overflow: hidden;
    display: block;
    border-collapse: collapse;
    border-spacing: 0;
  }

  .ph2-page .form-content tbody, .ph2-page .form-content tr {
    display: block;
    width: 100%;
  }

  /* 交通手段は非表示に */
  .ph2-page .form-content tr.form-event-access {
    display: none;
  }

  .ph2-page .form-content td {
    clear: left;
    float: left;
    display: block;
    width: 100%;
  }

  
  .ph2-page .form-radio {
    float: none;
    margin-right: 0;
  }

  .ph2-page .form-checkbox {
    float: none;
    margin-right: 0;
  }

  
  .ph2-page .form-txt {
    padding: 0;
  }

  
  .ph2-page .form-event-box-ttl .txt {
    font-size: 16px;
  }

  
  .ph2-page .form-event-box .form-radio-wrap {
    padding: 20px 20px 10px;
  }

  .ph2-page .form-event-online {
    padding: 0 20px 10px;
  }

  .ph2-page .form-event-online-box01, .ph2-page .form-event-online-box02 {
    float: none;
    width: 100%;
    padding: 0 0 20px;
  }

  
  .ph2-page .form-ttl {
    margin: 0 0 20px;
    font-size: 18px;
  }

  
  .ph2-page .form-birth-wrap {
    overflow: hidden;
    display: block;
    margin-bottom: -30px;
  }

  .ph2-page .form-birth-item {
    float: left;
    display: block;
    width: 50%;
    margin-bottom: 30px;
  }

  
}