/* ========================================
   reset / base
======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
}

body {
  font-family: "fot-udmarugo-large-pr6n", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  /*DBのとき。Mのときは500*/
  font-style: normal;
  position: relative;
  letter-spacing: 0.04em;
  color: #485157;
}

.pr6n-m {
  font-weight: 500;
}

.pr6n-db {
  font-weight: 600;
}

.chiaro {
  font-family: "fot-chiaro-std", sans-serif;
  font-weight: 700;
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul,
ol {
  list-style: none;
}

/* ========================================
   common layout
======================================== */
section,
footer {
  position: relative;
}

/* 768px以上のときに、画面幅に連動してベースサイズを変える */
@media (min-width: 768px) {
  :root {
    /* 1350pxを基準に10px相当（1rem=10px）になるよう計算 */
    --bs-root-font-size: calc(0.497vw + 2.85px);
  }

  .sp-display {
    display: none;
  }
}

/* ルートのフォントサイズを適用 */
:root {
  font-size: var(--bs-root-font-size);
}

/* 1350pxを超えたら固定したい場合（大きくしすぎない） */
@media (min-width: 1440px) {
  :root {
    font-size: 10px;
    /* ここを固定すれば2.1remは21pxで止まります */
  }
}

@media (max-width: 768px) {
  :root {
    /* デザイン幅 393px のとき 1rem = 10px になるように計算 */
    /* 100vw ÷ 39.3 = 2.5445...vw */
    font-size: calc(100vw / 39.3);
  }

  body {
    /* スマホでは文字サイズを少し調整することが多いので再定義 */
    font-size: 1.4rem;
    /* 14px相当 */
  }

  .pc-display {
    display: none;
  }

  section+section {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
}

.container-narrow {
  max-width: 782px;
  margin: 0 auto;
}

.container-wide {
  max-width: 960px;
  margin: 0 auto;
}

/* ========================================
   date
======================================== */

#schedule {
  background-color: #FFF799;
  padding-top: 3.5rem;
  text-align: center;
}

#schedule>div>p {
  text-align: center;
  line-height: 1.5;
  margin-top: 4.2rem;
}

#schedule img {
  max-width: 77.8rem;
}

@media (max-width: 768px) {

  #schedule img {
    max-width: 30rem;
  }

  #schedule>div>p {
    line-height: 1.6;
    margin-top: 3rem;
  }
}

/* ========================================
   subject
======================================== */

#subject {
  padding: 9.4rem 0;
  background-color: #fff799;
  background-image: url(images/wave.png);
  background-size: max(183rem, 110vw) auto;
  background-position: -7.3rem 4rem;
  background-repeat: no-repeat;
}

.notice {
  padding: 2rem 2.7rem 1.5rem;
  background-color: #fff;
  color: #485157;
  border-radius: 10px;
}

.font-green {
  font-size: 3.8rem;
  color: #008057;
  text-align: center;
  margin-bottom: 2rem;
}

.notice>li+li {
  margin-top: 1rem;
}

.notice+h2 {
  font-size: 3.8rem;
  color: #fff;
  text-align: center;
  margin-top: 5rem;
  margin-bottom: 3rem;
}

.date {
  margin-right: 4rem;
}

.subject-box {
  color: #fff;
  font-size: 2.3rem;
}

.subject-box p {
  font-size: 1.8rem;
}

.subject-box>ul>li:nth-of-type(1) {
  margin: 1.5rem 0;
}

.subject-box>ul {
  padding-bottom: 1.9rem;
  margin-bottom: 1.9rem;
  border-bottom: 1px solid #fff;
}

.subject-box>p+p {
  margin-top: 1.7rem;
}

@media (max-width: 768px) {
  #subject {
    padding: 4.5rem 1rem;
    background-size: 62.2rem auto;
    background-position: -6rem 8rem;
  }

  .font-green {
    font-size: 2.3rem;
    margin-bottom: 1rem;
  }

  .notice {
    padding: 1.2rem 1.4rem;
  }

  .notice li {
    line-height: 1.4;
  }

  .notice+h2 {
    font-size: 2.3rem;
    margin-bottom: 1rem;
  }

  .subject-box {
    font-size: 1.4rem;
  }

  .subject-box>ul>li:nth-of-type(1) {
    margin: 0.7rem 0;
  }

  .subject-box>ul {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .subject-box p {
    font-size: 1rem;
    letter-spacing: 0.035rem;
  }

  .subject-box>p+p {
    margin-top: 1rem;
  }
}

/* ========================================
   program
======================================== */

#program {
  background-color: #FFF5D7;
  color: #008057;
  background-image: url(images/wave2.png);
  background-size: max(245rem, 140vw) 149rem;
  background-repeat: no-repeat;
  background-position: left -56rem bottom -94rem;
  padding-bottom: 24rem;
}

#program h2,
#event h2,
#venue h2 {
  text-align: center;
}

#program h2 img {
  max-width: 35rem;
}

#program h2 img {
  margin-top: -14px;
}

#program>div>ul {
  margin-top: 1.8rem;
}

#program>div>ul>li {
  width: 100%;
  max-width: 78.0rem;
  height: 30.0rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background-size: 100%;
  background-repeat: no-repeat;
  padding: 18.4rem 4rem 0 16rem;
}

#program>div>ul>li+li {
  margin-top: 3rem;
}

.program-details1 {
  background-image: url(images/communication-seminar.png);
}

.program-details2 {
  background-image: url(images/mission-rally.png);
}

#program>div>ul>li.program-details3 {
  background-image: url(images/1on1.png);
  height: 25rem;
}

.program-details4 {
  background-image: url(images/freetalktime.png);
}

#program>div>ul>li.program-details5 {
  background-image: url(images/before-seminar.png);
  height: 57.4rem;
  padding: 0;
}

#program>div>ul>li p {
  line-height: 1.7;
}

@media (min-width: 1665px) {
  #program {
    background-position: left -56rem bottom -90rem;
  }
}

@media (max-width: 768px) {
  #program {
    background-size: 72.8rem auto;
    background-position: left -20rem bottom -27rem;
    padding-bottom: 10rem;
  }

  #program h2 img {
    max-width: 22.6rem;
  }

  #program>div>ul>li {
    max-width: 37.3rem;
    height: 14.3rem;
    padding: 7.9rem 1.4rem 0 7.8rem;
  }

  #program>div>ul>li p {
    line-height: 1.53;
    font-size: 1.2rem;
  }

  #program>div>ul>li+li {
    margin-top: 1.5rem;
  }

  #program>div>ul>li.program-details3 {
    height: 12rem;
  }

  #program>div>ul>li.program-details5 {
    height: 27.4rem;
  }

  .details-right>div>div:last-of-type {
    text-indent: -1.4rem;
    padding-left: 1.4rem;
  }
}

/* ========================================
   event
======================================== */
@media (min-width: 769px) {

  #subject,
  #event,
  #venue,
  #precautions {
    padding-right: 12rem;
    padding-left: 12rem;
  }
}

#event {
  margin-top: -13rem;
  margin-bottom: 10rem;
}

#event h2 img,
#venue h2 img {
  max-width: 36.5rem;
}

.event-box {
  background-color: #F0FAFF;
  border-radius: 35px;
  padding: 8.2rem 4.6rem 8.8rem 9.2rem;
  margin-top: -4rem;
  color: #33677D;
}

.event-details {
  margin-bottom: 8.7rem;
}

@media (min-width: 769px) {
  .event-details li {
    display: flex;
  }

  .details-right {
    flex: 1;
    line-height: 1.33;
  }

  .details-left {
    width: 17.5rem;
    line-height: 1.33;
  }

  .event-details11 span+span {
    margin-left: 4rem;
  }

}

.event-details li+li {
  margin-top: 3rem;
}

.event-details5 .details-right div {
  margin: 1.5rem 0;
}

.details-right .pr6n-m {
  margin-top: 1.4rem;
  font-size: 1.8rem;
}

.details-right .pr6n-m>div {
  line-height: 1.2;
}

.details-right .pr6n-m>div+div {
  margin-top: 1.3rem;
}

.details-right>span.pr6n-m {
  display: block;
  margin-top: 1rem;
  font-size: 1.7rem;
}

.details-right>p.pr6n-m {
  margin-top: 1rem;
  font-size: 1.7rem;
  line-height: 1.37;
}

.event-details11 .details-right>p {
  line-height: 1.33;
}

.event-details11 span {
  display: inline-block;
  margin-top: 0.9rem;
}

.event-box .bgwhite {
  background-color: #fff;
  width: 20.3rem;
  margin: 0 auto 5rem;
  font-size: 2.3rem;
  text-align: center;
  line-height: 1.65;
  border-radius: 20px;
}

.details-right>p>span {
  display: block;
  line-height: 1.37;
}

.details-right .pr6n-db {
    display: block;
    margin-bottom: .34rem;
}

@media (max-width: 768px) {
  #event {
    margin-top: -5.4rem;
    margin-bottom: 5rem;
  }

  #event h2 img,
  #venue h2 img {
    max-width: 23.5rem;
  }

  .event-box {
    padding: 4rem 1rem 5rem .87rem;
    margin-top: -2rem;
    border-radius: 12px;
  }

  .event-details li+li {
    margin-top: 2rem;
  }

  .details-left {
    margin-bottom: 0.96rem;
    letter-spacing: 0.07rem;
  }

  .details-right {
    line-height: 1.25;
    letter-spacing: 0.07rem;
  }

  .details-right .pr6n-m {
    margin-top: 1rem;
    font-size: 1.3rem;
  }

  .details-right>span.pr6n-m,
  .details-right>p.pr6n-m {
    font-size: 1.2rem;
  }

  .event-details5 .details-right div {
    margin: .53rem 0;
  }

  .details-right .pr6n-m>div {
    line-height: 1.31;
  }

  .event-details {
    margin-bottom: 4.6rem;
  }

  .event-box .bgwhite {
    width: 17.2rem;
    margin: 0 auto 2.5rem;
    font-size: 1.9rem;
    line-height: 1.7;
  }

  .event-details11 .details-right>p {
    line-height: 1.4;
  }

  .details-right>p>span {
    text-indent: -1.2rem;
    padding-left: 1.2rem;
  }
}

/*補足事項*/

.information {
  padding-left: 2.3rem;
  counter-reset: circle-numbers;
  margin-bottom: 10rem;
}

.information>li {
  counter-increment: circle-numbers;
  position: relative;
  line-height: 1.76;
  padding-right: 4.2rem;
}

.information>li:before {
  content: counter(circle-numbers);
  position: absolute;
  left: -2.5rem;
  top: 6px;
  width: 2.0rem;
  height: 2.0rem;
  border: 1.5px solid #33677D;
  color: #33677D;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.information>li.online-seminar {
  padding-right: 0;
}

.information p {
  line-height: 1.76;
}

.information .pr6n-m.red>span {
  margin: 0;
  line-height: 1.5;
}

.red {
  color: #AB3838;
}

.information .pr6n-m {
  font-size: 1.7rem;
  line-height: 1.5;
}

.information .pr6n-m.red {
  margin-top: 0.4rem;
}

.information>li+li {
  margin-top: 3rem;
}

.information span {
  display: block;
  margin: 0.5rem 0 1.4rem;
}

.online-seminar ul {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.online-seminar ul>li+li {
  margin-top: 1.7rem;
}

.interview+p {
  line-height: 1.55;
  padding-right: 4.4rem;
}

.interview+p+.pr6n-m {
  font-size: 1.8rem;
  line-height: 1.56;
  margin-top: 0.6rem;
  padding-right: 4.4rem;
}

.information span.pink {
    display: inline;
    color: #ff68ba;
}

@media (max-width: 768px) {
  .information {
    padding-left: 2rem;
    letter-spacing: 0.07rem;
    margin-bottom: 5rem;
  }

  .information p {
    line-height: 1.38;
  }

  .information>li {
    padding-right: 0;
    line-height: 1.38;
  }

  .information>li:before {
    left: -2rem;
    top: 0.3rem;
    width: 1.4rem;
    height: 1.4rem;
    border: 1px solid #33677D;
    font-size: 1rem;
  }

  .information .pr6n-m {
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .information .pr6n-m.red {
    margin-top: .6rem;
  }

  .information>li+li {
    margin-top: 2rem;
  }

  .online-seminar ul {
    font-size: 1.3rem;
    margin-top: .5rem;
  }

  .online-seminar li {
    line-height: 1.4;
    text-indent: -1.3rem;
    padding-left: 1.3rem;
  }

  .online-seminar ul>li+li {
    margin-top: 0.5rem;
  }

  .interview+p {
    line-height: 1.38;
    padding-right: 0;
    letter-spacing: 0.07rem;
  }

  .interview+p+.pr6n-m {
    font-size: 1.2rem;
    line-height: 1.42;
    margin-top: 0.9rem;
    padding-right: 0;
    letter-spacing: 0.042rem;
  }

  .information .pr6n-m.red>span {
    line-height: 1.5;
    text-indent: -1.2rem;
    padding-left: 1.2rem;
  }

  .information .pr6n-m.red>span+span {
    margin-top: .1rem;
  }

  .information .pr6n-m.red+p.pr6n-m {
    text-indent: -1.2rem;
    padding-left: 1.2rem;
  }

  .online-seminar>p>span {
    margin: 0;
  }
}

/* ========================================
   venue
======================================== */

#venue {
  margin-bottom: 10rem;
}

@media (min-width: 769px) {
  .venue-box {
    margin-top: 4rem;
    display: flex;
  }
}

.venue-map {
  width: 42rem;
  height: 23.5rem;
  margin-right: 5rem;
}

.venue-map iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.venue-details {
  flex: 1;
  color: #33677D;
}

.venue-details>div {
  line-height: 1.33;
}

.access {
  background-color: #33677D;
  color: #fff;
  width: 13rem;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  margin: 1.4rem 0 1.6rem;
}

.venue-details .pr6n-m {
  font-size: 1.8rem;
  line-height: 1.4;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  #venue {
    margin-bottom: 5rem;
  }

  .venue-box {
    margin-top: 3rem;
  }

  .venue-map {
    width: 37.3rem;
    height: 28.7rem;
    max-width: 100%;
    margin-right: 0;
  }

  .venue-details {
    padding-top: 2.2rem;
  }

  .venue-details>div {
    line-height: 1.4;
  }

  .access {
    font-size: 1.5rem;
    max-width: 9.9rem;
    max-height: 2.3rem;
    margin: 1.4rem 0 1.3rem;
  }

  .venue-details .pr6n-m {
    font-size: 1.2rem;
    line-height: 1.46;
    margin-top: .6rem;
    text-indent: -1.2rem;
    padding-left: 1.2rem;
  }
}

/* ========================================
   参加申し込みの注意事項
======================================== */

#precautions {
  z-index: 1;
}

#precautions>.container-wide {
  background-color: #F0FAFF;
  border-radius: 35px;
  padding: 10rem 9rem 10rem;
  color: #33677D;
}

#precautions .bgwhite {
  background-color: #fff;
  max-width: 35rem;
  margin: 0 auto 5rem;
  font-size: 2.3rem;
  text-align: center;
  line-height: 1.65;
  border-radius: 20px;
}

.precautions-list>li {
  position: relative;
  padding-left: 2.4rem;
  line-height: 1.33;
}

.precautions-list>li:before {
  content: "";
  display: block;
  background-color: #33677D;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 2px;
}

.precautions-list>li+li {
  margin-top: 3rem;
}

.address-list {
  margin-top: 1rem;
}

.address-list li {
  line-height: 1.54;
}

@media (max-width: 768px) {
  #precautions>.container-wide {
    background-color: #F0FAFF;
    border-radius: 35px;
    padding: 5rem 1rem 4.5rem;
  }

  #precautions .bgwhite {
    max-width: 26.8rem;
    margin: 0 auto 3.2rem;
    font-size: 1.9rem;
    line-height: 1.69;
  }

  .precautions-list>li {
    padding-left: 2rem;
    line-height: 1.5;
  }

  .precautions-list>li+li {
    margin-top: 2rem;
  }

  .precautions-list>li:before {
    width: 1.4rem;
    height: 1.4rem;
    top: 0.3rem;
  }

}

/* ========================================
   form
======================================== */

#form {
  background-image: url(images/wave4.png);
  background-size: max(183rem, 128vw) 107rem;
  background-repeat: no-repeat;
  background-position: left -6rem top -6rem;
  background-color: #2f754a;
  margin-top: -7rem;
  padding-top: 18rem;
  padding-bottom: 10rem;
  color: #fff;
  text-align: center;
  font-size: 2.3rem;
}

.formrun-embed {
  max-width: 96rem;
  height: 67rem;
  background-color: #fff;
  margin: 0 auto;
  overflow-y: scroll !important;
  overflow-x: hidden;
}

.formrun-embed iframe {
    width: 100% !important;
}

.deadline {
  display: flex;
  align-items: center;
  border-top: 3px solid #fff;
  width: fit-content;
  margin: 2.6rem auto 3.6rem;
  padding: 1.8rem .5rem 0;
}

.deadline span {
  font-size: 4.5rem;
  margin-left: .6rem;
}

@media (max-width: 768px) {
  #form {
    font-size: 1.4rem;
    padding-top: 12rem;
    padding-bottom: 3rem;
    background-size: 76rem auto;
    background-position: left -19rem top 0;
    margin-top: -6.6rem;
  }

  .deadline {
    border-top: 1px solid #fff;
    margin: 1.8rem auto 3.5rem;
    padding: 1.1rem 1.6rem 0;
  }

  .deadline span {
    font-size: 2.8rem;
  }

  .formrun-embed {
    max-width: 37.3rem;
    height: 57rem;
  }
}

/* ========================================
   footer
======================================== */

footer {
  max-width: 871px;
  margin: 0 auto;
  text-align: center;
  padding: 3.2rem 0 4.4rem;
  color: #33677D;
}

.footer-text {
  margin: 4.2rem 0 1.2rem;
}

.tameny-info {
  font-size: 3rem;
  margin-bottom: 1.3rem;
}

@media (min-width: 769px) {
  .tameny-info span {
    margin-left: 3rem;
  }
}

footer img {
  width: 100%;
  max-width: 25.7rem;
}

@media (max-width: 768px) {
  footer {
    padding: 2.1rem 0 2.2rem;
  }

  footer img {
    max-width: 16.8rem;
  }

  .footer-text {
    margin: 2.9rem 0 1rem;
    font-size: 1.3rem;
  }

  .tameny-info {
    font-size: 1.9rem;
    margin-bottom: 1rem;
    line-height: 1.47;
  }

  .tameny-info span {
    display: block;
  }

  footer>.pr6n-m {
    font-size: 1.3rem;
    line-height: 1.27;
  }
}