@charset "utf-8";
html {
  scroll-behavior: smooth;
}
body{
    margin: 0;
    padding: 0;
}
#wrapper{
    /*max-width: 1400px;*/
    margin: auto;
}
#wrapper img,
#wrapper video{
    width: 100%;
    vertical-align: middle;
}

@media only screen and (min-width: 640px){
    #wrapper{
        max-width: 600px;
        margin: auto;
    }
}



/* mv */
#mv{
    position: relative;
}
#mv video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#mv .mv_cta{
    position: absolute;
    top: 83.5%;
    left: 7%;
    width: 68%;
}

#mv .mv_cta {
    /* 左半分：半透明、右半分：不透明 */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 50%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 50%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    /* 初期位置を右側にセット */
    -webkit-mask-position: right bottom;
    mask-position: right bottom;
    
    transition: mask-position 0.4s ease, -webkit-mask-position 0.4s ease;
}

#mv .mv_cta:hover {
    /* ホバー時にマスク位置を左へずらす（右から半透明になっていく） */
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}



/* services */
#services{
    position: relative;
}
#services .services_item{
    position: relative;
}
#services .services_ttl{
    position: absolute;
    top: 5.5%;
    width: 94%;
}



/* about */
#about{
    position: relative;
}
#about .about_item{
    position: relative;
}
#about .about_ttl{
    position: absolute;
    top: 3.5%;
    left: 6%;
    width: 88%;
}



/* point */
#point{
    position: relative;
    background-image: url(../img/point_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding-bottom: 2%;
}
#point .point_ttl{
    width: 80%;
    margin: 0 auto;
    padding: 13% 0 9%;
}
#point .point_item{
    position: relative;
    margin-bottom: 15%;
}

/* スライダー */
/* ベース画像 */
.point_item .base_img {
  width: 100%;
  height: auto;
  display: block;
}
/* 上に重ねるスライダー */
.slider_wrapper {
  position: absolute;
  top: 69%;
  left: 10%;
  width: 83%;
  z-index: 10;
}
.point_slider img {
  width: 100%;
  height: auto;
  display: block;
}

.slick-dots li button:before{
    color: #ffffff !important;
}
.slick-dots li.slick-active button:before{
    color: #ffffff !important;  
}



/* media */
#media{
    position: relative;
}
#media .media_item{
    position: relative;
}
#media .media_ttl{
    position: absolute;
    top: 10%;
    width: 88%;
    left: 5%;
}

#media .cta_btn{
    position: absolute;
    top: 84%;
    left: 7%;
    width: 91%;
}
#media .cta_btn {
    /* 左半分：半透明、右半分：不透明 */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 50%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 50%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    /* 初期位置を右側にセット */
    -webkit-mask-position: right bottom;
    mask-position: right bottom;
    
    transition: mask-position 0.4s ease, -webkit-mask-position 0.4s ease;
}

#media .cta_btn:hover {
    /* ホバー時にマスク位置を左へずらす（右から半透明になっていく） */
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}



/* program */
#program{
    position: relative;
}
#program .program_item{
    position: relative;
}
#program .program_ttl{
    position: absolute;
    top: 5%;
    width: 87%;
    left: 7%;
}


/* information */
#information{
    position: relative;
    background-image: url(../img/information_bg.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    margin: 0;
    padding-bottom: 18%;
}
#information .information_item{
    position: relative;
}
#information .information_ttl{
    width: 50%;
    margin: 0 auto;
    padding: 6% 0;
}
#information .information_item_txt{
    position: absolute;
    top: 21%;
    width: 100%;
}
#information .information_item_bottom{
    margin: 185% 0px 0;
}



/* flow */
#flow{
    position: relative;
    background-image: url(../img/flow_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding-bottom: 7%;
}
#flow .flow_ttl{
    width: 75%;
    margin: 0 auto;
    padding: 15% 0 9%;
}
#flow .flow_item{
    position: relative;
    margin: 0 7% 35%;
}
#flow .cta_btn{
    position: absolute;
    top: 87%;
    left: 7%;
    width: 91%;
}
#flow .cta_btn {
    /* 左半分：半透明、右半分：不透明 */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 50%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0.8) 50%, rgba(0,0,0,1) 50%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    /* 初期位置を右側にセット */
    -webkit-mask-position: right bottom;
    mask-position: right bottom;
    
    transition: mask-position 0.4s ease, -webkit-mask-position 0.4s ease;
}

#flow .cta_btn:hover {
    /* ホバー時にマスク位置を左へずらす（右から半透明になっていく） */
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}


/* faq */
#faq{
    position: relative;
    background-image: url(../img/faq_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0;
    padding-bottom: 7%;
}
#faq .faq_ttl{
    width: 64%;
    margin: 0 auto;
    padding: 13% 0 2%;
}
#faq .faq_container{
    position: relative;
    width: 85%;
    margin: 0 auto;
    color: #ffffff;
}
/* 各FAQアイテム */
#faq .faq_item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

/* 質問ボタン部分 */
#faq .faq_question {
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  text-align: left;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  position: relative;
}

/* 「Q.」ラベル */
#faq .faq_q_label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 16px;
  flex-shrink: 0;
  font-family: "Georgia", serif;
}

/* 質問文 */
#faq .faq_q_text {
  flex-grow: 1;
  padding-right: 40px; /* プラスアイコンとの被り防止 */
}

/* 右側の＋／ー アイコン（CSS描画） */
#faq .faq_toggle_icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}

#faq .faq_toggle_icon::before,
#faq .faq_toggle_icon::after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  transition: transform 0.3s ease;
}

/* 横棒 */
#faq .faq_toggle_icon::before {
  top: 8px;
  left: 0;
  width: 18px;
  height: 2px;
}

/* 縦棒 */
#faq .faq_toggle_icon::after {
  top: 0;
  left: 8px;
  width: 2px;
  height: 18px;
}

/* 開いたときの「ー」アニメーション */
#faq .faq_item.is-active .faq_toggle_icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* 回答（アコーディオン）エリア */
#faq .faq_answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
}

#faq .faq_answer_inner {
  padding: 0 0 24px 0;
  display: flex;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
}

/* 「A.」ラベル */
#faq .faq_a_label {
  font-size: 20px;
  font-weight: bold;
  margin-right: 16px;
  flex-shrink: 0;
  color: #ffffff;
  font-family: "Georgia", serif;
}

#faq .faq_a_text {
  flex-grow: 1;
  padding-top: 2px;
}



/* form */
#form{
    position: relative;
    background-color: #f5f5f5;
    padding-bottom: 9%;
}
#form .form_ttl{
    width: 70%;
    margin: 0 auto;
    padding: 12% 0 5%;
}
#form .form_item{
    width: 100%;
    margin: 0 auto;
    padding: 10% 0 2%;
}
#form .form_item_inner{
    width: 100%;
    margin: 0 auto;
    padding: 10% 0 2%;
}

/* コンテナ全体（白いボックス枠） */
.event_info_box {
  background-color: #ffffff;
  padding: 24px 20px;
  border-radius: 4px;
  max-width: 100%; /* SP向けに全幅対応 */
  box-sizing: border-box;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif; /* 明朝体スタイル */
  color: #333333;
  margin: 2% 2% 6%;
}

/* 各項目ブロック */
.event_info_item {
  margin-bottom: 20px;
}

/* 英語のラベル（DATE / FORMAT） */
.event_label {
  display: block;
  font-size: 11px;
  color: #999999;
  letter-spacing: 0.25em;
  font-family: "Georgia", serif;
  margin-bottom: 8px;
}

/* メインのテキスト（日時・開催形式） */
.event_value {
  font-size: 17px;
  font-weight: normal;
  margin: 0 0 12px 0;
  line-height: 1.4;
  color: #222222;
}

/* タグリスト */
.event_tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 個別タグ枠 */
.event_tag {
  display: inline-block;
  font-size: 11px;
  color: #666666;
  border: 1px solid #cccccc;
  padding: 4px 8px;
  background-color: #ffffff;
  font-family: sans-serif; /* タグ部分はゴシック体で可読性向上 */
}

/* 区切り線 */
.event_divider {
  border: none;
  border-top: 1px solid #eeeeee;
  margin: 20px 0;
}

/* 下部注釈テキスト */
.event_note {
  font-size: 12px;
  color: #555555;
  line-height: 1.7;
  margin: 0;
  letter-spacing: 0.02em;
}

/* 強調下線 */
.event_note u {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #666666;
}



/* footer */
#footer{
    position: relative;
    background-color: #141414;
    padding: 9% 3%;
    text-align: center;
    color: #ffffff;
}
#footer .footer_inner{
    max-width: 1000px;
    margin: 0 auto;
}
/* ロゴテキスト */
#footer .footer_logo {
  font-family: "Didot", "Bodoni MT", "Cinzel", "Times New Roman", serif; /* セリフ体/ローマン体 */
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 20px 0;
  color: #ffffff;
}

/* ナビゲーション */
#footer .footer_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* スマホ時の折り返し対応 */
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer_nav li {
  display: flex;
  align-items: center;
}

/* 縦区切り線（パイプライン）の描画 */
#footer .footer_nav li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: #ffffff;
  margin: 0 16px; /* リンクとの間隔 */
  opacity: 0.8;
}

/* リンクテキスト */
#footer .footer_nav a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
  transition: opacity 0.3s;
}

#footer .footer_nav a:hover {
  opacity: 0.7;
}