@charset "utf-8";

/*
------------------------------------------------------------------------------------------------------------
全体のCSS設定
------------------------------------------------------------------------------------------------------------
*/

body {
  background: #fff; /*全体の背景色*/
  color: #34414e; /*全体の文字色*/
  margin: 0;
  padding: 0;
  font: 20px/1.6 "Hiragino Kaku GothicProN", "Helvetica Neue"; /* 全体のフォント設定 */
}

html {
  scroll-behavior: smooth;
}

/*
------------------------------------------------------------------------------------------------------------
リンク（全般）設定のCSS
------------------------------------------------------------------------------------------------------------
*/

a {
  color: #e87a73; /*リンクテキストの色*/
  text-decoration: none; /* テキストの下線の非表示 */
}

a:hover .btn {
  position: relative; /*要素の位置をずらす(相対関係)*/
  top: 3pt; /*要素の位置を下に3ptずらす*/
  left: 3pt; /* 要素の位置を右に3ptずらす */
}

/*
------------------------------------------------------------------------------------------------------------
コンテナー（HPを囲むブロック）のCSS
------------------------------------------------------------------------------------------------------------
*/

#container {
  width: 750px; /*コンテナー幅*/
  background-color: #fff; /*背景色設定*/
  border-left: 1px solid #ccc; /*左外枠の設定*/
  border-right: 1px solid #ccc; /*右外枠の設定*/
  text-align: center;
  margin: 0 auto; /*外側の余白設定*/
  overflow: hidden;
}

/*
------------------------------------------------------------------------------------------------------------
ページ内リンクボタン周りCSS
------------------------------------------------------------------------------------------------------------
*/

.bg-green {
  background-color: #e1f4f6;
  height: auto;
  padding: 20px 0 40px 0;
}

.btn-under-p {
  color: #154344;
  font-size: 30px;
  font-weight: 500;
}

.bg-btn {
  height: auto;
  width: 100%;
  padding: 10px 0 40px 0;
}
/*
------------------------------------------------------------------------------------------------------------
本文テキスト部分CSS
------------------------------------------------------------------------------------------------------------
*/
.p-black-bg {
  padding: 20px 25px 40px 25px;
  text-align: justify;
  text-align-last: left;
}

.p-black {
  color: #444444;
  font-size: 24px;
}

@media only screen and (max-width: 768px) {
  .p-black {
    color: #444444;
    font-size: 28px;
    font-weight: 500;
  }  
}

.p-weight {
  font-weight: 600;
}

/* ----------------   開催日程   ------------------ */
.yellow-bg {
  background-color: #ffffda;
  width: 700px;
  height: auto;
  padding: 30px;
  text-align: center;
  margin: 0 auto 30px auto;
}

.nittei-p {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.4em;
  color: #081c24;
}

.nittei-small-p {
  font-size: 20px;
  font-weight: 400;
  color: #081c24;
}

.blue {
  color: #0d80c8;
}

.orange {
  color: #F87415;
}

/*
------------------------------------------------------------------------------------------------------------
フッターの設定
------------------------------------------------------------------------------------------------------------
*/

.footer {
  width: 100%;
  max-width: 750px;
  margin: 0 auto; /*横幅設定*/
  height: auto; /*高さ設定*/
  color: #fff; /*文字色設定*/
  background-color: #34414e; /*背景色設定*/
  padding-top: 0px;
}

.footer__inner {
  text-align: left; /*ブロック要素を左配置*/
}

.footer__inner a {
  padding: 5px 30px; /*内側の余白設定*/
  color: #fff; /*文字色設定*/
  padding-left: 30px; /*内側左の余白設定*/
  /*footerの矢印画像の設定*/
  display: block;
  width: 100%;
}

.footer__inner li {
  padding: 8px; /*内側の余白設定*/
  font-size: 100%; /*文字サイズ*/
  border-bottom: 1px solid #fff; /*下外枠の設定*/
}

.footer__inner a:hover {
 color: #f4e2e2;
}

footer p.copy {
  text-align: center; /*ブロック要素を中央配置*/
  padding: 40px 0; /*内側の余白設定*/
  font-size: 90%; /*文字サイズ*/
}

.container {
  display: flex;
  justify-content: space-between;
}


/*
------------------------------------------------------------------------------------------------------------
その他
------------------------------------------------------------------------------------------------------------
*/

.clear {
  clear: both;
}


/*
------------------------------------------------------------------------------------------------------------
フォントの設定
------------------------------------------------------------------------------------------------------------
*/
.red { color: #C00;}

.purple{ color: indigo;}

.bold { font-weight: bold;}



dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

dt,
dd {
  padding: 6px;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
  .pc { display: none !important; }
  .sp { display: block !important; }
}


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

  .mail-please {
    color: #1a3239;
    font-family: 'ヒラギノ角ゴ ProN W6', sans-serif;
    font-size: 24px;
    font-weight: 600;
    padding-top: 80px;
    padding-bottom: 40px;
  }  

  input[type="email"] {
    text-align: left;
    padding-left: 20px;
    background-color: #fefeed;
    border-radius: 10px;
    border: solid 1px #9d9d9d;
    height: 70px;
    width: 480px;
  }
  
  input[type="image"] {
    padding-top: 10px;
    height: auto;
    width: 496px;
  }
  
  .privacy-policy {
    color: #7d7d7d ;
    font-size: 14px;
    font-weight: 500;
    padding-top: 20px;
    display: block;
    text-align: center;
  }
  
  .privacy-policy a {
    color: #e87a73;
    font-weight: 500;
    text-decoration: underline;
  }

/*
===================================================================================================================================
スマホ版のCSS
===================================================================================================================================
*/

*/
  footer {
    /*mobile*/
    width: 100%;
    /*横幅設定*/
    font-size: 60%;
    /*文字サイズ*/
    margin-bottom: 0px;
    /*外側下の余白設定*/
  }

  .footer__inner li {
    font-size: 120%;
  }
}


/*
===================================================================================================================================
スライダーのCSS
===================================================================================================================================
*/

.lp-voices { width: 100%; }

.lp-voices__slider { position: relative; width: 100%; }

.lp-voices__viewport { overflow: hidden; width: 100%; }

.lp-voices__track { display: flex; transition: transform .45s ease; will-change: transform; }

.lp-voices__slide { flex: 0 0 100%; margin: 0; }

.lp-voices__img { display: block; width: 100%; height: auto; }

.lp-voices__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: rgba(0,0,0,.35); color: #fff; font-size: 28px;
  cursor: pointer; z-index: 2;
}
.lp-voices__arrow--prev { left: 12px; }
.lp-voices__arrow--next { right: 12px; }

.lp-voices__dots { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.lp-voices__dot { width: 10px; height: 10px; border-radius: 999px; border: 0; background: rgba(0,0,0,.18); cursor: pointer; }
.lp-voices__dot[aria-selected="true"] { background: rgba(0,0,0,.5); transform: scale(1.2); }

@media (max-width: 640px){
  .lp-voices__arrow { width: 40px; height: 40px; }
  .lp-voices__arrow--prev { left: 8px; }
  .lp-voices__arrow--next { right: 8px; }
}


.lp-voices {
  padding-block: 40px;
}