@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&display=swap');
.sp-header {
  display: block;
  background: #fff !important;
}

.body_wrapper {
  overflow: inherit !important;
}

body{
 opacity: 0;
 animation: fadeIN 1.5s 1s forwards;
}
 
@media (max-width: 768px){

footer
{
z-index: 999;
position: relative;
background: #fff;
margin: 0 !important;
}
}

@keyframes fadeIN {
100% {
opacity: 1;
}
}
@keyframes fadeOUT {
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .ta_left {
    text-align: left !important;
  }
}

.lp-main img {
  max-width: 100%;
  height: auto;
  
}
.lp-main {
  line-height: 2;
}
.mtS {
  margin-top: 20px;
}
.mtM {
  margin-top: 40px;
}
.mtL {
  margin-top: 100px;
}
@media (max-width: 768px) {
  .mtL {
    margin-top: 50px;
  }
}
.txtS {
  font-size: 90%;
}
.txt120 {
  font-size: 120%;
}
.txt_center{
  text-align: center;
}


.mv{
  display: flex;
  align-items: center;
  text-align: center;
  background: #fff;
}

.mv_dsp{
  width: 60%;
  padding: 30px;
  color: #fff;
  font-family: 'Noto Sans JP';
}

.mv_logo{
  width:80% ;
  max-width: 550px;
  margin: 0 auto 20px;
}

/* 使ってない */
.mv_lead{
  font-family: 'Cormorant Garamond', serif;
  font-weight: bold;
  font-size: 200%;
  margin-bottom: 30px;
  color: #ffffff;/*文字色*/
  padding: 15px 10px;/*文字回りの余白（上下 左右）*/
  display: block;
  border-bottom: 1px solid #f4d4b9;/*下線右側（太さ 実線 色）*/
  position: relative;
}

.mv_lead::after {
  background: linear-gradient(to right, #362ae0 0%,#3b79cc 50%,#42d3ed 100%);
  content: '';
  transform: translateX(-50%);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position: absolute;
  bottom: 0;
  left: 50%;
}


.mv_img{
  width: 40%;
  padding: 20px;
}


@media (max-width: 768px) {
  .mv{
   flex-direction: column-reverse;
  }
  
  .mv_dsp,.mv_img{
    width: 100%;
  }
  
  .mv_dsp{
    padding:0px 16px 50px;
  }
  .mv_logo{
    margin: 0 auto 0px;
  }
  .mv_lead{
    font-weight: bold;
    font-size: 140%;
    margin-bottom: 20px;
  }

}


.sec{
  max-width: 1000px;
  padding: 80px 0;
  margin: 0 auto;;
  width: 90%;
}


.sec h2 > span{
  margin-bottom: 10px;
  font-family: 'Poppins',Regular 400;
  font-size: 100%!important;
  display: inline-block;
  color: #613478;
  font-weight:00;
}

.sec1 h2 > span{
  color: #a21601;
  font-size: 80%!important;
}

.sec3 h2 > span{
  color: #a21601;
}


.sec h2 > span span{F
  font-style: normal;
  margin: 0 5px;
  font-size: 80%;
}
@media (max-width: 768px) {
  .sec{
    padding: 40px 0;
  }
  .sec h2{
    font-size: 200%;
    margin-bottom: 20px;
    font-weight:400;
  }

  .sec h2 span{
    margin-right: 0;
    line-height: 1;
    font-size: 80%;
  }
}
.items{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.sec2 .items,
.sec4 .items{
  flex-direction: row-reverse;
}

.items__img{
  width: 50%;
  position: sticky;
  top: 0;
}

.items__list{
  width: calc(50% - 50px);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.items__list li{
  width: 50%;
  padding: 20px;
  font-size: 12px;
}
.items__list li p + p{
  font-size: 11px;
}
@media (max-width: 768px) {
  .items{
    display: block;
  }
  
  .items__img,.items__list{
    width: 100%;
  }
  .items__img{
    position: relative;
  }
  .items__list{
    margin: 20px 0 0;
  }
}



.sec_last .btn {
  color: #613478;
  border: 3px solid #613478;
  border-radius: 6px;
  display: block;
  max-width: 340px;
  padding: 20px;
  margin: 0px auto 0;
  text-align: center;
}

.sec_last .btn span {
  display: block;
  font-size: 11px;
}

.sec_last .btn span::after {
  content: ">>";
  margin-left: 4px; /* スペースを少し空けたい場合 */
}

.sec_last .btn {
  transition: 0.6s;
}

.sec_last .btn:hover {
  background-color: #613478;
  color: #fff;
  border: 3px solid #613478;
}


/* 全体コンテナ：中身を強制的に縦に並べる */
.mv {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  width: 100%;
}

.mv_inner, .mv_inner img {
  width: 100%;
  display: block;
}

.mv_caption {
  text-align: center;
  margin: 60px 0 100px;
  width: 100%;
  line-height: 1.8; /* 行間を広げるとより読みやすくなります */
  box-sizing: border-box; /* パディングを含めた幅計算にする */
}

/* SP用の設定（画面幅767px以下） */
@media screen and (max-width: 767px) {
  .mv_caption {
    margin: 40px 0 80px; /* スマホでは上下の余白を少し詰めるとバランスが良いです */
    padding: 0 20px;     /* 左右に20pxずつのマージン（余白）を追加 */
    font-size: 1.3rem;   /* 必要に応じてスマホ用の文字サイズに調整 */
    text-align: justify; /* 文字数が多い場合、両端を揃えると綺麗に見えることがあります */
    text-align: center;  /* 引き続き中央揃えにする場合はこちら */
  }
}

/* PRESENTセクション */
.present_section {
  width: 100%;
  max-width: 800px; /* コンテンツが広がりすぎないよう制限（お好みで） */
  margin: 0 auto;
  text-align: center;
}

.present_title {
  font-size: 3rem;
  letter-spacing: 5px;
  margin-bottom: 20px;
  color: #613478;
  font-family: 'Poppins';
  text-align: center;
  /* 装飾用ラインなどを入れるとお洒落です */
}

.present_img {
  width: 50%; /* 画像のサイズ調整 */
  margin: 0 auto 20px;
}

.present_img img {
  width: 100%;
  height: auto;
}

.present_txt {
  line-height: 1.8;
  text-align: center;
  margin-bottom: 30px;
  /* PCでも念のためpaddingを入れておくと安心です */
  padding: 0 20px;
  box-sizing: border-box;
}

.present_txt .note {
  display: block;
  font-size: 13px; /* PCでのサイズ */
  margin-top: 15px;
  color: #666;
  line-height: 1.6;
}

/* --- SP用設定 (767px以下) --- */
@media screen and (max-width: 767px) {
  .present_txt {
    /* 左右にしっかりめのマージンを確保 */
    padding: 0 25px; 
    margin-bottom: 20px;
  }

  .present_txt .note {
    /* スマホでさらに級数を下げる */
    font-size: 11px; 
    margin-top: 10px;
    /* 注釈が多い場合、スマホでは左寄せにすると読みやすくなることもあります */
    /* text-align: left; */
    /* display: inline-block; */
  }
}

/* スマホ用調整 */
@media (max-width: 767px) {
  .present_title {
    font-size: 20px;
  }
  .present_img {
    width: 80%; /* スマホでは画像幅をいっぱいに */
  }
}


.collab_main_img {
  width: 30%;
  margin: 0 auto 40px;
}

/* 追加：画像が親要素の幅の中で中央に来るようにする */
.collab_main_img img {
  display: block;
  margin: 0 auto;
  width: 100%; /* 親要素の30%の幅いっぱいに広げる */
  height: auto;
}

/* スマホ用調整 */
@media (max-width: 767px) {
  .collab_main_img {
    width: 70%;
    margin-bottom: 30px;
  }
}

/* セクション全体の余白 */
.collab_section {
  width: 100%;
  /* 背景色の指定（例：薄いベージュやグレー） */
  background-color: #faf4d7; 
  
  /* 上下の外側余白 */
  margin: 70px 0;
  /* 内側の余白（背景色とコンテンツの間のスペース） */
  padding: 60px 0; 
  
  text-align: center;
}

/* コンテンツが広がりすぎないように制限するコンテナを追加 */
/* もしHTML側で全体を囲うタグがなければ、これを使うと綺麗です */
.collab_inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px; /* スマホ時の左右の余白 */
}

.collab_title {
  font-size: 24px;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
  text-align: center; /* 中央揃えを想定 */
}

/* SP用設定 (767px以下) */
@media screen and (max-width: 767px) {
  .collab_title {
    /* 1行に収めるために級数を下げる */
    font-size: 20px; 
    
    /* 文字間が広すぎると改行の原因になるため少し詰める */
    letter-spacing: 0.05em; 
    
    /* 下のコンテンツとの間隔もスマホ向けに少し調整 */
    margin-bottom: 30px;
    
    /* 念のため左右に少し余白を作って画面端ギリギリを防ぐ */
    padding: 0 10px;
    box-sizing: border-box;
  }
}

.collab_main_img {
  width: 25%;         /* 幅を40%に指定 */
  margin: 0 auto 40px; /* 左右をautoにすることで中央配置 */
}

.collab_main_img img {
  width: 100%;        /* 親要素(40%)に対して100%の幅 */
  height: auto;
  display: block;
}

/* スマホ用調整 */
@media (max-width: 767px) {
  .collab_main_img {
    width: 80%;       /* スマホで40%だと小さすぎるため、少し大きく（お好みで） */
    margin-bottom: 30px;
  }
}
.collab_main_img img {
  width: 90%;
  height: auto;
  display: block;
}

/* 下段：左テキスト・右画像のコンテナ */
.collab_flex_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  text-align: left;

  /* --- ここを追加 --- */
  max-width: 1000px;    /* コンテンツの最大幅を制限（お好みで調整） */
  margin: 0 auto;      /* 左右中央に配置 */
  padding: 0 40px;     /* 画面を小さくしていった時の最低限の左右余白 */
  /* ------------------ */
}

/* スマホ用設定 */
@media (max-width: 767px) {
  .collab_flex_container {
    flex-direction: column;
    padding: 30 20px;   /* スマホでは左右の余白を少し狭める */
    max-width: 100%;   /* スマホでは幅いっぱいを許容 */
  }
}
.collab_left_txt {
  flex: 1; /* 幅を均等に分ける */
}

.collab_left_txt p {
  font-size: 13px;
  line-height: 2;
  text-align: left;
}

/* --- SP用設定 (767px以下) --- */
@media screen and (max-width: 767px) {
  /* 親要素や自身の余白をリセットして15pxに固定 */
  .collab_flex_container, /* 親要素に余白がある可能性を考慮 */
  .collab_left_txt {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important; /* 幅指定が邪魔している場合のリセット */
  }

  .collab_left_txt p {
    font-size: 12px;
    line-height: 1.8;
    text-align: justify;
    word-break: break-all;
  }

  /* PC専用の改行タグを非表示にする */
  .pc_only {
    display: none !important;
  }

  /* もし通常のbrも消したい場合は以下も有効にする */
  /* .collab_left_txt p br { display: none; } */
}

.collab_right_img {
  flex: 1;
}

.collab_right_img img {
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ用設定：横並びを解除して縦に並べる */
@media (max-width: 767px) {
  .collab_section {
    margin: 50px auto;
    padding: 30 20px;
  }

  .collab_flex_container {
    flex-direction: column; /* 縦並びに変更 */
    gap: 20px;
  }

  .collab_left_txt {
    order: 2; /* スマホではテキストを画像の下にする（お好みで） */
    text-align: center;
  }

  .collab_right_img {
    order: 1; /* スマホでは画像を先に見せる */
    width: 100%;
  }
}

/* --- PC/SP 共通スタイル --- */
.title_group {
  text-align: center;      /* すべてのテキストを中央揃えにする */
  width: 100%;
  margin: 0 auto 40px;     /* グループ全体を中央に配置し、下に余白を作る */
  box-sizing: border-box;
}

.present_sub {
  font-size: 2.0rem;
  letter-spacing: 3px;
  color: #613478;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 5px;      /* タイトルとの間隔 */
  display: block;          /* 確実に1行を確保 */
  text-align: center;
}

.present_title {
  font-size: 3.4rem;       /* PCサイズ */
  letter-spacing: 5px;
  margin-bottom: 15px;     /* 説明文との間隔 */
  color: #613478;
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  text-align: center;      /* 中央揃え */
  display: block;
}

.sec_description {
  color: #333;
  text-align: center;      /* 説明文も中央揃え */
  margin: 0 auto;          /* 念のため中央寄せ */
  max-width: 800px;        /* PCで一行が長くなりすぎないよう制限 */
  line-height: 1.8;
}

/* --- SP用（767px以下） --- */
@media screen and (max-width: 767px) {
  .present_title {
    /* スマホで級数が小さくならないよう、しっかり数値を指定 */
    font-size: 2.8rem;     /* PCよりは少し抑えつつ、迫力を出す */
    letter-spacing: 3px;
    margin-bottom: 10px;
  }

  .present_sub {
    font-size: 1.2rem;     /* スマホで見栄えの良いサイズ */
    letter-spacing: 2px;
  }

  .sec_description {

  }
}




/* バナー上のテキストスタイル */
.banner_top_text {
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 20px;    /* バナーとの間隔 */
  margin-top: 50px;
}

/* バナー本体のスタイル（前回の設定を維持） */
.bottom_banner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 100px;    /* 上は0、下は60pxあける（テキストとの間隔はテキスト側で制御） */
  line-height: 0;
  box-sizing: border-box;
}

.bottom_banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* SPでの調整 */
@media screen and (max-width: 767px) {
  .banner_top_text {
    padding: 0 20px;      /* 画面端に寄った時の余白 */
    margin-bottom: 15px;
    margin-top: 100px;
  }
}



.bottom_banner a {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}

.bottom_banner a:hover {
  opacity: 0.8; /* ホバー時に少し薄くする演出 */
}



.bottom_banner a {
  display: block;
  width: 100%;
  transition: opacity 0.3s ease;
}


/* SP用の微調整 */
@media screen and (max-width: 767px) {
  .bottom_banner {
    padding: 0 20px;    /* SPでは左右に少し余白を設けて画面端に付かないように */
    /* SPでは max-width: 1100px の制限を受けない（画面幅の方が狭いため） */
  }
}