@charset "UTF-8";
html {
  font-family: "dnp-shuei-mgothic-std", sans-serif;
  font-weight: 400;
  font-style: normal;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 推し活サイト用 */
.top-visual {
  position: relative;
  width: 100%;
  margin: 0 auto;
  line-height: 0; /* 画像下の隙間対策 */
	background-color: #fff;
}

.top-img {
  width: 90%;
	margin: 0 auto;
  height: auto;
  display: block;
}

/* 初期はPC表示 / SP非表示 */
.top-img.pc { display: block; }
.top-img.sp { display: none; }

/* 768px未満でSP表示 / PC非表示 */
@media (max-width: 767px) {
  .top-img.pc { display: none; }
  .top-img.sp { display: block; }
}

/* 視覚的に非表示だが読み上げ対象に残す */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* === Section背景：黄色＋上端を逆▽にカット === */
.sec-oshikatsu{
  --notch: 72px;                 /* 逆▽の深さ（PC） */
  position: relative;
  /* 逆▽ぶんだけ上パディングを足す */
  padding: calc(var(--notch) + 10px) 0 20px;
  /* 左上→中央(下がる)→右上→右下→左下 の5点でV字を作る */
	 overflow: visible; /* ← これを追加 */
}
/* 2) 擬似要素で三角背景を描く（これなら子要素は切れない） */
.sec-oshikatsu::before{
  content:"";
  position:absolute;
  inset:0;                 /* 上下左右ぜんぶ */
  background:#fff34b;
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% 100%, 0 100%);
  z-index:-1;
}
/* SPはちょい浅めに */
@media (max-width: 767px){
  .sec-oshikatsu{
    --notch: 56px;
    padding: calc(var(--notch) + 8px) 0 20px;
  }
}

/* タイトル画像 */
.s1-title {
  margin: -30px auto 18px;
  text-align: center;
  line-height: 0;
 z-index: 1;       /* ← タイトル画像を前面に出す */
}
.s1-title img {
  max-width: min(700px, 90%);
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* PC：左30% / 右70% */
.s1-body {
  width:90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 20% 80%;
  gap: 16px;
  align-items: start;
}
.s1-left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.s1-char {
  width: 100%;
  max-width: 120px;   /* ← PCでキャラが大きくなりすぎないよう制限 */
  height: auto;
  display: block;
	margin:20px 0px 0px 20px;
}

/* テキスト本文の共通設定 */
.s1-right {
  font-size: 16px;    /* 基本フォントサイズ */
  line-height: 1.8;
	padding:  20px 20px 10px 20px;
	margin: 
	text-align: left;
}

/* PCの本文は少し大きめ */
@media (min-width: 768px) {
  .s1-right {
    font-size: 20px;  /* PCで大きめに */
    line-height: 1.9;
  }
}

/* spでgridを解除してフロート運用 */
@media (max-width: 767px) {
  .s1-body {
    display: block; /* gridを解除してフロート運用 */
  }

  .s1-left {
    float: left;
    width: 20%;        /* キャラ幅（20%だと小さすぎるので30%くらい推奨） */
    margin: 0 12px 8px 0; /* 右と下に余白をあける */
  }

  .s1-char {
    width: 100%;
    height: auto;
    display: block;
	  z-index: 999;
	  padding-right: 10px;
  }
}

/* ユーティリティ：視覚的に非表示（SEO/読み上げOK） */
.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

/* ========== Section 2 基本 ========== */
.sec-02 {
  --notch: 72px;
  position: relative;
  z-index: 0;
  background: #fff34b;   /* ← これを追加！ 背景を青に塗る */
  padding: calc(var(--notch) + 16px) 0 28px;
}
.sec-02::before{
  content:"";
  position:absolute; inset:0;
  background:#82bce0;           /* 背景色を指定 */
  /* 上端を逆▽でカット（左右→中央↓→右→下→左） */
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% 100%, 0 100%);
  z-index:-1;                    /* 背景を最背面に */
}


/* SPはちょい浅めに */
@media (max-width: 768px){
  .sec-02{
    --notch: 56px;
    padding: calc(var(--notch) + 8px) 0 20px;
  }
}
/* タイトル画像 */
.s2-title{
  margin: -26px auto 16px;      /* 逆▽に少し食い込ませる */
  text-align:center; line-height:0; position:relative; z-index:1;
}
.s2-title img{
  width:70%; height:auto; display:block; margin:0 auto;
}

/* 本文エリア：PC/タブレットもSPも横並び。比率 80:20 固定 */
.s2-body{
width:90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 80% 20%;
  gap: 30px;
  align-items: start;

}

/* テキスト側（左80%） */
.s2-right{
  font-size: 20px;               /* PCの標準 */
  line-height: 1.9;
  text-align:left;
	padding: 20px 0px 0px 20px;}

@media (min-width: 768px) {
	.s2-right{
		padding: 30px 10px 10px 200px;
}}

	

/* キャラ側（右20%） */
.s2-left{
  display:flex; justify-content:flex-end; align-items:flex-start;
}
.s2-char{
  width:115%; 
	max-width:170px;   /* PCでの上限サイズ */
  height:auto; 
	display:block;
  margin: 0px 20px 0px -40px ;  
	
}
/* PC：左右を 80:20 で並べる（テキスト→画像の順に見せたい） */
@media (min-width: 767px) {
  .s2-body {
    display: grid;
    grid-template-columns: 80% 20%;
    gap: 16px;
    align-items: start;
  }

  /* HTML上では画像→テキストだが、PCでは order で並び替え */
  .s2-left  { order: 2;
	    display: flex;
    justify-content: flex-start; /* ← PC時のみ左寄せ */
    align-items: flex-start;} /* 画像を右へ */
  .s2-right { order: 1;
	    } /* テキストを左へ */

}
/* spでgridを解除してフロート運用 */
@media (max-width: 767px) {
  .s2-body {
    display: block; /* gridを解除してフロート運用 */
  }

  /* 画像側を右フロートに（←ここ修正） */
  .s2-left {
    float: right;
    width: 28%;                /* 20%だと細いので少し広め。必要なら調整 */
    margin: 0 0 8px 12px;      /* 左に余白、下に間隔 */
  }

  .s2-char {
    width: 90%;
	  max-width: 155px;
    height: auto;
    display: block;
  }

  /* テキスト側はフロートしない（←ここ修正） */
 .s2-right {
    font-size: 16px;
    line-height: 1.7;
    text-align: left;          /* 左寄せ維持 */
  }

  /* クリアフィックス（親の高さ潰れ防止） */
  .s2-body::after {
    content: "";
    display: block;
    clear: both;
  }
}

/*----------------------
        wrap
----------------------*/
/* どこでも使えるコンテナ幅（ここを変えるだけで全体が揃う） */
:root{
  --wrap: 940px;   /* ← 940pxにしたいならここを 940px に */
  --side: 4vw;      /* サイド余白（SPの息継ぎ用） */
}


.s1-body,
.s2-body,
.flow-inner {
  width: min(var(--wrap), calc(100% - 2*var(--side))) !important;
  margin-inline: auto !important;
}

/* トップ画像もPCで広がりすぎないように */
@media (min-width: 768px){
  .top-visual .top-img.pc{
    max-width: var(--wrap);
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
  }
}

.header-wrap {
  background: #fff;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  margin: 0 auto;
}
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 60px;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .header-inner {
    padding-left: 30px;
  }
}
@media screen and (max-width: 512px) {
  .header-inner {
    padding-left: 15px;
  }
}
.header-title {
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 0 56px;
  line-height: 65px;
  height: 65px;
  float: left;
}
@media screen and (max-width: 768px) {
  .header-title {
    font-size: 17px;
    margin: 0 0 0 55px;
    line-height: 56px;
  }
}
.header-logo {
  display: inline-block;
  position: absolute;
  top: 13px;
  left: 50px;
  margin: 0;
  font-size: 0;
  line-height: 0;
  width: 60px;
}
.header-logo:hover {
  opacity: 0.5;
}
@media screen and (max-width: 768px) {
  .header-logo {
    left: 40px;
    width: 42px;
  }
}
@media screen and (max-width: 512px) {
  .header-logo {
    left: 15px;
  }
}
.header-logo a {
  cursor: pointer;
  margin-right: 15px;
}
.header-logo img {
  width: 100%;
  height: auto;
  display: block;
}
.lp-header {
  position: relative;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
}
.top-wrap {
  display: flex;
  max-width: 1240px;
  margin: auto;
  padding: 20px 0px 0 40px;
}
@media screen and (max-width: 768px) {
  .top-wrap {
    position: relative;
    display: flex;
    max-width: 100%;
    margin: auto;
    height: 50vh;
  }
}
@media screen and (max-width: 512px) {
  .top-wrap {
    position: relative;
    display: flex;
    max-width: 100%;
    margin: auto;
    min-width: 280px;
    flex-wrap: wrap;
  }
}
.inner-wrap {
  display: block;
  max-width: 1240px;
  width: 100%;
  margin: auto;
  padding: 10px;
  min-width: 280px;
}
.inner-wrap2 {
  display: block;
  max-width: 1240px;
  width: 100%;
  margin: auto;
  padding: 10px;
  background-color: azure;
  min-width: 280px;
}
/* フロー図専用の調整 */
.sec-flow .flow-inner {
  width: min(1100px, 92%); /* PC最大1100px、SPは画面幅の92%まで */
  margin: 0 auto;
  text-align: center;
  overflow: hidden; /* 念のためはみ出し防止 */
}

.sec-flow .flow-img {
  max-width: 100%;   /* 親幅を超えない */
  height: auto;
  display: block;    /* 中央揃えは親でtext-align:center済み */
  margin: 0 auto;
}
/* PCのときだけフロー図を70%表示 */
@media (min-width: 768px) {
  .sec-flow .flow-img {
    width: 70%;
    max-width: 70%;
    margin: 0 auto;
    display: block;
  }
}
/* 黄色ゾーン全体 */
.sec-flow {
  --notch: 72px;
  position: relative;
  z-index: 0;
  background: #82bce0;  /* ← 全体を青にする */
  padding: calc(var(--notch) + 20px) 0 40px;
}

.sec-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff34b;  /* ← 切れ込み部分を黄色で塗る */
  clip-path: polygon(0 0, 50% var(--notch), 100% 0, 100% 100%, 0 100%);
  z-index: -1; /* 背景として奥に配置 */
}

/* SPはちょい浅めに */
@media (max-width: 768px){
  .sec-flow{
    --notch: 56px;
    padding: calc(var(--notch) + 8px) 0 20px;
  }
}
.sec-flow p {
  text-align: center;
  font-size: 16px;
  line-height: 1.7;
  margin: 20px auto 30px;  /* 上20 / 下30 の余白 */
  max-width: 800px;        /* 横幅を絞ると読みやすい */
}

/* フロー図下に余白を追加 */
.sec-flow .flow-inner {
  margin-bottom: 60px;     /* ← 一番最後の余白 */
}
/*----------------------
     ふわっと表示
----------------------*/
.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
.scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.js-load {
  display: none;
}
/* エントリーボタン共通デザイン */
.entry-btn {
  display: block;              /* 中央寄せ用 */
  background-color: #fff34b;   /* 黄色 */
  border: 2px solid #333;      /* 黒い枠線 */
  border-radius: 50px;        /* 丸く */
  color: #333;                 /* 文字色 */
  text-decoration: none;
  padding: 20px 10px;
  font-weight: bold;
  text-align: center;
  margin: 0 auto 20px auto;            /* 上下3px / 中央寄せ */
  transition: all 0.2s ease;
  max-width: 240px;            /* ボタンの最大幅（お好みで調整） */
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.22);
}

/* hover時 */
.entry-btn:hover {
  background-color: #fff;
  opacity: 0.9;
}

/* SPフォントサイズ：16px */
@media (max-width: 767px) {
  .entry-btn {
    font-size: 16px;
  }
}

/* PCフォントサイズ：20px */
@media (min-width: 768px) {
  .entry-btn {
    font-size: 20px;
  }
}

/*----------------------
        contents
----------------------*/
.center {
	text-align: center;
	margin: 30px 10px 20px 10px;
}

@media screen and (max-width: 768px) {
.center {
	text-align: center;
	margin: 30px 10px 20px 10px;
}}
	
.center-sponser {
	text-align: center;
		margin: -20px 10px 0px 10px;
}

@media screen and (max-width: 768px) {
.center-sponser img{
	margin-top: 30px;
	width: 95%;
	}}
.y-box {
	margin: 0 auto;
	margin-top:20px;
	padding: 10px;
	width:650px;
	border-radius: 8px;
	border: solid 4px #333;/*線*/
	background-color: #FFFF51;
}



@media screen and (max-width: 768px) {
.y-box {
	width: 85%;
	}}

.w-box {
	margin: 0 auto;
	padding: 20px;
	border: solid 2px #333;/*線*/
	background-color: #FFF;
}

.w-box2 {
	margin: 0 auto;
	padding: 25px;
	border: solid 2px #333;/*線*/
	background-color: #FFF;
}

.b-box {
	border-radius: 5px;
	background-color: #49C4EF;
	color: #fff;
	padding: 3px 3px 5px 7px;
	margin: 7px;
}

@media screen and (max-width: 768px) {
.b-box__chara {
	margin: 0 auto;
	margin-top:20px;
	padding: 10px;
	width:50%;
	border-radius: 8px;
	border: solid 2px #333;/*線*/
	background-color: #FFF;
}}
/* フォームメーラーが自動で生成するラッパー要素を上書き */
.formmailer-embed .content {
  box-shadow: none !important;   /* 影を消す */
  border: none !important;       /* 上下の線も消す */
  margin: -10px -10px -200px -10px !important;          /* 念のため余白も消す */
  padding: 0 !important;
}


@media screen and (min-width: 768px) {
  br.br-sp {
    display: none;
  }
  .none-sp {
    display: none;
  }
} /* min-width: 768px END */
@media screen and (max-width: 350px) {
  .sp-hide {
    display: none;
  }
} /* min-width: 768px END */

footer {
	background-color: #fff;
}

footer li {
	display: inline-block;
	list-style: none;
	margin: 5px 15px -10px 15px;
}

ul {
 padding: 10px;
 display: flex;
 justify-content: center;
}

 a,a:visited { 
	 color: inherit; 
} 
a:hover {opacity: 0.7;
}

.maru-c {
		text-align: center;
}





.chara_title {
	color: #333333;
}

.chara_img {
	position: relative;
	max-width: 80%;
	max-height: 40%;
  margin: auto;
}

.top_chara {
	max-width:500px ;
}
@media screen and (max-width: 768px) {
.top_chara {
	max-width:70% ;
	}}


/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background:#fff;
  text-align:center;
  color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:200px;
}


/* SPのみのリストの設定　*/
@media screen and (max-width: 768px) {
.chara_list--sp {
	text-decoration: none;
	}
.chara_list--sp :hover {
	color: darkorange;
	}}