@charset "UTF-8";

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

  .sp-hidden,
  .pc-only,
  .tab-only {
    display: none !important;
  }
  .button_flex{
    text-align: center;
  }

  .button_right{
    margin: 20px;
  }
}

@media screen and (min-width: 737px) {

  .pc-hidden,
  .tab-only,
  .sp-only {
    display: none !important;
  }
  .button_flex{
    display: flex;
    text-align: center;
  }
  .button_left{
    width: 50%;
  }

  .button_right{
    width: 50%;
  }
}

.feature section.narrow>div {
  max-width: 800px;
  width: 100%;
}

.feature section.full>div {
  width: 100%;
}

.feature section>div {
  width: 1200px;
  margin: auto;
  padding-bottom: 30px;
  position: relative;
}

.feature section.mainvisual {
  margin: 0;
  padding: 0;
}

.feature .title {
  margin: 16px 0;
  padding: 0 16px;
}

/* common begin */


.feature {
  font-family: '游ゴシック', 'Yu Gothic', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  font-feature-settings: "palt"1;
  letter-spacing: 0.1em;
}

.feature a {
  color: #0094d4;
}

.feature li>a,
.feature p>a {
  text-decoration: underline;
}

.feature li>a:hover,
.feature p>a:hover {
  text-decoration: none;
}

.feature .title h1 {
  font-size: 1.2em;
  line-height: 1.3;
  color: #005896;
  margin: 0;
  font-weight: bold;
}

.feature section h2 {
  font-size: 1.2em;
  line-height: 1.3;
  text-align: unset;
  margin-bottom: 30px;
}

.feature .title p {
  line-height: 1.3;
  margin: 0;
  color: red;
}

.narrow {
    background-color:#F2F6F8
}

.feature .notice {
  margin: 0;
  padding: 16px 16px 16px 36px;
  background: #FFF;
  border: 0;
  box-sizing: border-box;
  border-radius: 8px;
  list-style-type: none; /* デフォルトのリストマーカーを削除 */
}

.feature .notice li {
    position: relative;
    padding-left: 20px; /* カスタムマーカー用のスペース */
    margin-bottom: 10px; /* リスト項目間のスペース */
}

.feature .notice > li::before {
    content: "•"; /* カスタムマーカー */
    color: #007BFF; /* 青色 */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.5em; /* マーカーのサイズ */
    line-height: 1; /* マーカーの垂直位置 */
}

.feature .notice1 {
  margin: 0;
  padding: 16px 16px 16px 36px;
  background: #fbd6d1;
  border: 0;
  box-sizing: border-box;
  border-radius: 8px;
}


.feature .notice1 p{
  font-size: 1.2em;
  line-height: 1.3;
  margin: 0;
  color: red;
}

.feature .notice2 {
    margin: 0;
    padding: 16px 16px 16px 36px;
    background: #f8fbd1;
    border: 0;
    box-sizing: border-box;
    border-radius: 8px;
}


.feature .notice2 p{
    font-size: 1.2em;
    line-height: 1.3;
    margin: 0;
    color: red;
}



.feature .syumoku {
  display: flex;
  flex-flow: column;
  position: relative;
  margin: 0 0 32px;
  background: #FFF !important;
  border: solid 1px #dadada;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
}

.feature .syumoku .item-name {
  font-size: 1.1em;
  flex-basis: 35%;
  padding: 16px 0 16px 16px;
  font-weight: bold;
  color: #fff;
}

.feature .syumoku .item-name small {
  font-weight: unset;
  display: inline-block;
  margin: 0 6px 3px 0;
  padding: 2px 6px;
  border: 1px solid #fff;
  border-radius: 4px;
}

.feature .syumoku .item-name .small_notice {
  font-size: 0.9em;
}

.feature .syumoku .detail {
  flex-basis: 65%;
  padding: 16px;
}

.feature .syumoku .detail div {
  border-bottom: 1px dotted #DDD;
  padding-bottom: 8px;
}

.feature .syumoku .detail p {
  padding-top: 8px;
  width: 100%;
}

.feature .syumoku .small {
  font-size: 0.8em;
  text-align : right;
}

.feature .syumoku .detail .entry {
  font-size: 1.2em;
  font-weight: bold;
  float: right;
}

.feature .syumoku .detail .entry:hover {
  opacity: .5;
}

.feature section {
  padding: 60px 10px;
}

.feature .entry-header {
  display: flex;
  justify-content: space-between;
}

.feature .entry-header a {
  padding: 2px 6px;
  color: #fff;
  border: none;
  background-color: #0094d4;
  border-radius: 4px;
  margin-bottom: auto;
}

@media screen and (min-width: 768px) {
  .feature .title h1 {
    font-size: 1.5em;
  }

  .feature section h2 {
    font-size: 1.5em;
  }

  .feature .mainvisual img {
    width: 100%;
    max-width: 1200px;
    margin: auto;
  }

  .feature .syumoku {
    flex-flow: row;
  }
}

#faq h3 {
  text-align: center;
  margin: 2em 0 1em;
}

#faq {
  counter-reset: num;
}

#faq .faq {
  margin: 0;
  padding: 0;
  counter-increment: num;
  line-height: 1.3;
}

#faq .faq h4:before {
  content: "Q"counter(num);
  position: absolute;
  top: 10px;
  left: 20px;
}

#faq .faq div:before {
  content: "A"counter(num);
  position: absolute;
  top: 40px;
  left: 20px;
  color: #0094d4;
}

#faq h4 {
  position: relative;
  margin: 0;
  padding: 10px 35px 10px 64px;
  background-color: #fff;
  border-bottom: 1px solid #dadada;
  color: #111;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

#faq h4:hover {
  background-color: #e4e4e4;
}

#faq h4:after {
  content: '▼';
  position: absolute;
  right: 12px;
  top: 50%;
  margin-top: -5px;
  color: #0094d4;
  font-size: 10px;
  line-height: 1;
}

#faq h4.open:after {
  transform: rotate(180deg)
}

#faq .faq div {
  display: none;
  position: relative;
  margin: 0;
  padding: 40px 30px 40px 64px;
  background-color: #fffcf5;
}

#faq .faq div.open {
  display: block;
}

#faq .faq div p {
  margin-bottom: 1.00rem;
}

#faq .faq div p:nth-last-child(-n + 1) {
  margin: 0;
}

#official div {
  text-align: center;
}

/* common end */

/* イベントステータス用 */
.available.syumoku .item-name {
  background-color: #14ac00 !important;
}

.pre.syumoku .item-name {
  background-color: #0094d4 !important;
}

.end.syumoku .item-name {
  background-color: #999999 !important;
}

.available .syumoku .entry {
  color: #14ac00;
}

.pre .syumoku .entry {
  color: #0094d4;
}

.end .syumoku .entry {
  color: #999999;
}

#entry {
  border-top: 6px solid;
  border-color: #0071BC;
}

.button {
  display       : inline-block;
  border-radius : 36px;          /* 角丸       */
  font-size     : 14pt;        /* 文字サイズ */
  font-weight   : bold;
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 10px 30px;   /* 余白       */
  background    : #14ac00;     /* 背景色     */
}

.feature a.button {
  color         : #ffffff;     /* 文字色     */
}

.feature a.button:hover {
  color         : #14ac00;     /* 文字色     */
  background    : #ffffff;     /* 背景色     */
}

.attention_title_div{
    background-color: #fdae0a;
    margin-top: 5px !important;
    padding-bottom: 0px !important;
    margin-bottom: 30px !important;
}
.attention_title_div_name{font-size:1.25em;line-height:1.5;color:#ffffff;font-weight:bold;margin: 0;display: flex;align-items: center;}
.image_mame{
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin: 4px;
}

.attention_div_body{
  border: 4px solid #fdae0a;
  font-size: 1.2em;
  background-color: white;
  padding: 16px 16px 16px 36px;
}

/* HELPボタン */
#HelpBtn {
  position: fixed;
  right: -44px;
  bottom: 74px;
  z-index: 1000;
  opacity: 0;
  transition: 0.3s ease-in;
  text-align: center;
}

@media screen and (min-width: 768px) {
  #HelpBtn {
    bottom: 98px;
  }
}

#HelpBtn.visible {
  right: 16px;
  opacity: 1;
}

#HelpBtn a {
  outline: none;
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(0,148,212, 0.7);
  border: solid 1px rgb(255, 255, 255, 0.7);
  border-radius: 100%;
  font-size: 20px;
  font-weight: bold;
}

#HelpBtn a:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
}

#HelpBtn a:hover {
  opacity: 0.6;
}