@charset "UTF-8";
 img {
	width: 100%;
	height: auto;
}
* {
  box-sizing: border-box;
}
    
body{width:100%;font-size: clamp(10px, calc(8px + 1.25vw), 14.25px);
  background:url(../../_img/bg_pc.webp) center top no-repeat;background-size:cover;background-attachment: fixed; 
}
@media screen and (min-width: 500px) {
  html {font-size:19px; }
}
body#top{  font-family: "Zen Old Mincho", serif; font-weight: 500;letter-spacing: -0.02em; font-style: normal;color:#FFF;line-height:1.3;}
 #wrapper, #loader-bg{width:500px; overflow: hidden; max-width: 100%; margin:0 auto;position: relative;background:#252525; 
  box-shadow: 
    20px 0 20px -10px rgba(0,0,0,0.6),  /* 右 */
   -20px 0 20px -10px rgba(0,0,0,0.6); /* 左 */
}
h3,h4{margin:1rem 0; }
.charm #wrapper{background: url("../../_img/bg_pop.jpg"); font-family: "Zen Maru Gothic", sans-serif; }
/* 透明クリック領域 */
.link{
  position:absolute;
  display:block;left:0; right:0;margin:0 auto; z-index:10;
}

 .fadein {
  opacity: 0;
  transform: translate(0, 50px);
  transition: all 900ms;
}
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}

/* ===== 左右画像は画面中央基準で固定 ===== */
.side {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* ✅  ：右スペース内で「右寄せ（中央に寄せる）」 */
.side.right {
  font-family:"Hiragino Kaku Gothic ProN", "Yu Gothic","YuGothic", "Meiryo",sans-serif;
  font-weight: 900;
  left: calc(50% + 250px); /* 中央400px + 余白20px に吸着 */
  right: auto; display:flex; flex-direction:column; align-items:flex-start;
  letter-spacing: -0.02em;
font-style: normal;
color: #FFF;
line-height: 1.3;
}
.side.right ul{margin:1rem; padding:0;font-size:0.8rem;}
.side.right ul.sub{margin:0 0 1rem; padding:0;}
.side.right ul a{  display: inline-block; /* ←これが重要 */
  padding: 5px 10px; border:1px solid #000;
  background: #e6d9a2;
  color: #000;
  text-decoration: none;
  white-space: nowrap; /* ←改行させない */}
a:hover{opacity: 0.8;}
#pcMenu > li > a {background:#b18b00;}



#wrapper h1{font-size:0;}

#loader {width:70%;
position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%);
}
#loader img{  display:block;
  height:auto;}


/* sectioon基本枠の設定*/
#top section.waku {
  width:100%;
  position: relative;
  margin:0 auto 1rem; padding-bottom:8%;
  background: url("../../_img/table_cmn.jpg") center top repeat-y;
  background-size:100% auto;
}

#top section.waku:before {
  content: "";width:100%;padding-top: calc(100% * 1 / 10); position: absolute;
  top:0;left:0; background: url("../../_img/table_top.jpg") no-repeat center top / 100% auto; z-index:1;
}
#top section.waku:after{
  content: "";width:100%;padding-top: calc(100% * 1 / 10);  position: absolute;
  bottom:0;left:0; background: url("../../_img/table_btm.jpg") no-repeat center top / 100% auto; z-index:1;
}
#top section.waku > * {
  position: relative;
  z-index:2;
}
#top section.waku .inner{padding: 3.8%; position: relative; z-index: 10;}

/* TOP */
section#top #header{width:100%; aspect-ratio: 10 / 18.5; position: relative; overflow: hidden;
  background: url("../../_img/top_bg.webp") no-repeat center top / 100% auto; margin:0 auto 1.3rem;}

 section#top #header .chara1{position: absolute; top:0; left:0; width:100%;z-index:2}
 section#top #header .chara_other{position: absolute; top:0; left:0; width:100%;z-index:1}
 section#top #header .logo{position: absolute; top:33%; left:0;right:0; margin:0 auto; width:51.3%;z-index:4}
 section#top #header .title{position: absolute; top:45%; left:0;right:0; margin:0 auto; width:98%;z-index:3}

 section#top #header .day{position: absolute; top:66%; left:0;right:0; margin:0 auto; width:100%;z-index:7}
 
 section#top #header .lead{position: absolute; top:73.5%; left:0;right:0; margin:0 auto; width:84%;z-index:7}

section#top .pict80{margin:0 auto 1.4rem;}


/* HOW TO VOTE */
section#charaList p{margin:0.5rem 0;}
section#charaList p.netabare{text-align: center; margin:1rem; font-size:1rem;}
section#charaList p.netabare.big{ font-size:1.2rem;}
section#charaList p.netabare span{padding:0.1rem 0.5rem; text-align: center;  color:#cc0000;background:#FFF; font-weight:700;}
section#howtovote p{margin:0.7rem; font-size:1.1rem; line-height:1.5;}
section#howtovote p.detail2{font-size:0.8rem;}
section#charaList p.name{font-size:0.9rem;}
p.lead{font-size:0.9rem;line-height:1.4; margin:1rem 0.5rem!important;}
p.lead.center{text-align: center;}
p.lead2{font-size:0.9rem;line-height:1.4;text-align: center; margin:1rem 0.5rem!important;background:#fff;color:#cc0000;font-weight:700;}

p.caution{font-size:0.9rem;text-align: center;margin:1rem 0; }
section#howtovote p span.yellow{color:#ff0; font-weight:900;}
section#howtovote ul.caution{margin:0 0.7rem; font-size:0.7rem;}
section#howtovote ul.caution li{margin-bottom:0.5rem;}
.pict90{width:90%; margin:1rem auto;}
.pict80{width:80%; margin:0 auto;}
.pict60{width:60%; margin:0 auto;}

.youtube {
  position: relative;
  width: 90%; margin:1rem auto 0;
  padding-top: 56.25%;
  box-sizing: border-box;margin-bottom:2rem;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.kakomi{border:1px solid #fff;padding:0.3rem 0.5rem;color:#fff;margin:1rem;font-size:0.7rem;line-height:1.5;}
.kakomi a{color:#ff0}
section#charaList .list2 li{background:#fff;color:#663300; padding:0.8rem;font-size:0.8rem;}
section#charaList .list3 li{color:#FFF;font-size:1rem;text-align: center;}
section#charaList .list2 li p.name {font-size:1.3rem; font-weight:700; margin:0.5rem 0; padding-bottom:0.3rem; text-align: center;/* border-bottom:1px solid #000;*/ }
section#charaList .list2 li p.commentTitle{color:#009286; font-size:0.9rem; margin:0;}
section#charaList .list2 li p.comment{font-size:0.8rem; margin:0;}
.charaPict{
  position: relative;
}
.charaPict img{
  display: block;
  width: 100%;
}
.charaPict:before{
  content: "";
  position: absolute;
  inset: 0; /* ← top:0;left:0;right:0;bottom:0; の省略 */
  z-index: 1;
  background: url("../../_img/pict_waku.png") no-repeat center / 100% 100%;
  pointer-events: none; /* ← クリック邪魔しない */
}

.bookItem{ width:95%; margin:1rem auto;
  display: flex;gap: 20px; align-items: flex-start;}
.bookItem3{ width:95%; margin:0rem auto;text-align: center; font-size:1.3rem;}
.bookItem3 div.title2{background:#ff1d97;padding:0.5rem 0.5rem 0; color:#000; font-weight:700;margin-bottom:0.3rem;}

.bookPict3{ width:100%; margin:0.5rem auto 0; padding:0;
  display: flex;gap: 5px; align-items: flex-start;}

.bookPict{width: 40%;}
.bookPict img{ display: block; width: 100%;height: auto;}
.bookInfo{ width:60%; flex: 1; color:#FFF;}
.bookInfo p{ margin:0 ; line-height:1.5; font-size:0.8rem;}
.bookTitle{color:#FFF; margin: 0 0 0.5rem;font-size:1.8rem;}
.infoData{width:70%;}
.bookBtn{margin-top:1rem;}
.tsuji {font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Noto Serif JP",serif;}
.tsuji2 {font-family: "Hiragino Maru Gothic ProN","Yu Gothic","YuGothic","Meiryo",sans-serif; font-weight:bold;}


/* charm部分 */
.charm .header{width:100%; aspect-ratio: 10 / 12; position: relative;
  background: url("../../_img/charm_header_bg.jpg") no-repeat center top / 100% auto; margin:0 auto;}
.charm .header .title{position: absolute; bottom:0; left:0;right:0; margin:0 auto; width:76%;z-index:2}

.charm .info{width:100%; aspect-ratio: 10 / 15; position: relative;margin:0 auto;}
.charm .info .chara1{position: absolute; top:17%; right:0; width:37%;z-index:1}
.charm .info .copy1{position: absolute; top:3%; left:0; right:0; margin:0 auto;  width:96%;z-index:2}
.charm .info .copy2{position: absolute; bottom:2%; left:0; right:0; margin:0 auto;  width:95%;z-index:2}
.charm .info .cut1{position: absolute; top:60%;  right:3%; width:86%;z-index:4}
.charm .info .cut2{position: absolute; top:25%;  left:0; width:68%;z-index:3}

.charm .howtoText{padding:1rem; font-size:1.1rem; font-weight:700;}
.charm .howtoText p{margin-bottom:0.3rem;font-size:1rem;}
.charm .howtoText p.pink{color:rgb(255, 0, 230); font-size:1.4rem;  margin-top:1rem; font-feature-settings: "palt";}

.charm .otherLink{width:80%; margin:2rem auto 0;}
.charm .otherLink .name1{font-size:1.1rem;margin-bottom:1rem;color:#00aeff; font-weight:700;}

.charm span.votePer{display:inline-block; background:#fff; border:1px solid #000; padding:0.2rem 0.4rem;margin-top:0.5rem; }

.accordion-content {
  position: relative;
  background: #efd39c;
  border: 3px solid #000;
  border-radius: 20px;
  padding: 1rem;
  margin-top:1.5rem;
}

/* ▼ 外枠（黒） */
.accordion-content::after {
  content: "";
  position: absolute; z-index:1;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid #000;
}

/* ▼ 中身（本体色） */
.accordion-content::before {
  content: "";
  position: absolute; z-index:10;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 24px solid #efd39c;
}
/* 1個目 */
.accordion-content.arrow-1::before,
.accordion-content.arrow-1::after {
  left: 25%;
  transform: translateX(-50%);
}

/* 2個目 */
.accordion-content.arrow-2::before,
.accordion-content.arrow-2::after {
  left: 75%;
  transform: translateX(-50%);
}

.charm .accordion-content h3{margin-bottom:10px;}
.charm section#select{ padding: 1rem; text-align: center;}

/* a */
.charm a{text-decoration: none;color:#00aeff; font-weight:900;}
.charm.detail a{text-decoration: none;color:#000; font-weight:900;}

/* list */
.list2,.list3{width:95%; margin:0 auto 1rem;display:flex; gap:10px;flex-wrap:wrap;padding:0;}
.list1 li{width:80%; margin:0 auto;}
.charm .list1 li img{border:6px solid #000;}
.list2 li{width: calc((100% - 10px) / 2);margin-bottom:0.5rem;}
.list3 li{width: calc((100% - 20px) / 3);}
.charm .list2 li img{border:4px solid #000;}
.charm .list2 p.name1{font-size:1.1rem;}

.charm section#champaign{background:#00aeff; color:#fff; margin:0.5rem;padding:0.5rem; border-radius:20px;
border:4px solid #000;}

.charm section#champaign h4{ color:#ff0;text-align: center; font-size:1.4rem; font-weight:700;}
.charm section#champaign h4.short{ font-size:1.3rem;margin-bottom:0;}

.charm section#champaign hr{color:#fff; margin:1rem 0;}

.charm section#champaign a.btn, a.btnBack{display: block; text-align: center; padding: 5px; color: #FFF; font-weight:500; border-radius: 999px;
  position: relative; font-size:1.1rem; border:2px solid #FFF;}

  .charm .btn_vote{width:94%;margin:0.5rem auto;}
  a.btnBack{width:50%;margin:1rem auto;background:#666; color:#fff!important;}

  /* 確認ポップアップ */
  #popupHowto{
   max-width:500px;
    padding: 0px;
  }
.popupPop{font-family: "Zen Maru Gothic", sans-serif; 
   max-width:500px;
    background: url(../../_img/bg_pop.jpg);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    border: 4px solid #000;
    border-radius: 15px;
  }
.popupPop .inner{padding:1rem; text-align: center;}
.popupPop .inner p.subTitle{font-size:1.6rem; margin:0.5rem 0; font-weight:700;}
.popupPop .inner .caution{font-size:0.8rem; margin-top:1rem; color:#333;text-align: left;}
.popupPop .inner .caution p{margin-bottom:0.3rem;}
.popupPop .inner .sceneImg img{border:4px solid #000;}
.popupPop .inner .js-x-post{display:block; width:100%;margin:1rem auto;}
.mfp-close{position: absolute;width:1.8rem; height:1.8rem; top: 10px; right: 10px; z-index: 20; cursor: pointer;}


#snsBtn {
  font-size: 0;
  padding: 10px 0;
  text-align: center;
}
#snsBtn li {
  line-height: 1.83333;
  letter-spacing: 0;
  display: inline-block
}
#snsBtn li + li {
  margin-left: 15px
}
#snsBtn img {
  width: 50px;
  height: auto
}



footer{text-align:center;margin-top:0;font-size:0.7rem; color:#fff;padding-bottom:1rem;} 
.charm footer {color:#000;}
    
        footer a img{width:60%;}
    
 @media screen and (max-width: 896px) {
 #wrapper{width:100%;overflow: hidden; position: relative;}
 #loader-bg{width:100%; height:100vh;position: relative;}

 }

 /* 縦長モーダル用：Magnific Popupの中央寄せを完全解除 */
.mfp-wrap {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

.mfp-container {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  padding: 20px 0px !important;
  text-align: center !important;
}

.mfp-container:before {
  display: none !important;
  content: none !important;
  height: 0 !important;
}

.mfp-content {
  position: relative !important;
  display: block !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

#popupHowto {
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto !important;
}
#popupHowto {
  position: relative;
}

.popupClose {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 50;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

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