@charset "UTF-8";

/*---------- ページ全体の指定 ----------*/

html {scroll-behavior:smooth;}
body {
margin:0;
padding:0;
font-size:100%;
color:#111;
background-color:#fff;
font-family: "Noto Sans Japanese";
}

/*---------- リンク設定 ----------*/

a:link {color:#37859a;text-decoration:underline;}
a:visited {color:#37859a;text-decoration:underline;}
a:hover {color:#139eb1;text-decoration:none;}
a{-webkit-transition:0.3s ease-in-out;-moz-transition:0.3s ease-in-out;-o-transition:0.3s ease-in-out;transition:0.3s ease-in-out;}
a img {border-style:none;}
img {vertical-align:bottom;image-rendering:-webkit-optimize-contrast;}
a:hover img{filter:brightness(1.2);}
a img {border-style:none;-webkit-transition:all .3s;transition:all .3s;}


/*---------- ベーステキストの指定 ----------*/

p {
font-size:110%;
line-height:180%;
}
@media screen and (min-width:769px){
p {font-size:20px;letter-spacing:1px;}
}


/*---------- 見出し ----------*/

h1{}
h2{}
h3{}
h4{}


/*---------- PC・スマホの非表示指定 ----------*/

@media screen and (max-width:768px){.spnone{display:none;}}
@media screen and (min-width:769px){.pcnone{display:none;}}


#pompom{
margin:0;
padding:0;
}
.header-orange {
width:100%;
margin:0;
padding:0;
background-image:url('img/orange-bg-sp.svg');
background-repeat:no-repeat;
background-position:center bottom;
background-size:100% auto;
background-color:#ffd127;
position: relative;
z-index:2;
}
.header-logo{margin:0;padding:24px 0;text-align:center;}
.header-logo img {width:480px;max-width:60%;}
@media screen and (min-width:769px){
.header-orange{background-image:url('img/orange-bg.svg');}
}

/* --- メインビジュアルのエリア全体 --- */
.main-visual {
  margin: 0;
  padding:0 0 15px 0;
  background-image: url('img/bg-curve-sp.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  background-color: #ffd127;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:769px){
.main-visual {padding: 0 0 10px 0;background-image: url('img/bg-curve-bottom.svg');}
}

/* --- 1. メイン画像 --- */
.mv-content {
  position: relative;
  z-index: 1;
  padding: 0 20px;
}

.mv-content img {
  width: 100%;
  max-width: 900px;
  height: auto;
}

/* --- 2. メニューボタン（横並び） --- */
.menu-list {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 40px;
padding: 0 20px;
flex-wrap: wrap;
position: relative;
 z-index: 2;
}
.menu-item {flex: 0 0 auto;}
.menu-item img {
width: 100%;
max-width: 200px;
height:auto;
transition: opacity 0.3s, transform 0.3s;
}
.menu-item:hover img {
filter: brightness(1.2);
transform: translateY(-3px);
}

/* --- レスポンシブ（スマホ・タブレット用設定）: ここで大きく2列にする --- */
@media screen and (max-width: 768px) {
    
    .menu-list { 
        gap: 15px; /* スマホ用に隙間を調整 */
        margin-top: 30px; 
        /* justify-content: space-between; */ /* 必要であれば端に寄せる */
    }

    .menu-item {
        /* ▼ここが重要：スマホの時だけ幅を指定して2列にする */
        width: 48%; 
        /* flex設定を解除または調整 */
        flex: 0 0 48%; 
        display: flex;
        justify-content: center;
    }

    .menu-item img { 
        /* ▼スマホでは画像のサイズ制限を解除して大きくする */
        max-width: 100%; 
    }
}

@media screen and (max-width: 480px) {
    .main-visual { padding: 0 0 40px 0; }
    .menu-list { gap: 10px; margin-top: 20px; }
    /* スマホ（小）でも2列維持ならこのままでOK */
}

#set,
#feature,
#campaign,
#wallpaper {
scroll-margin-top:100px; 
}
@media screen and (min-width:769px){
#set,
#feature,
#campaign,
#wallpaper {
scroll-margin-top:150px; 
}
}

.subhead{
margin:0;
padding:10px 0;
text-align:center;
background:#572a06;
}
.subhead img{width:64%;}
.set{
margin:0;padding:0;
text-align:center;
background:#f99900;
}
.set img{width:100%;}
.feature{
margin:0;padding:0;
text-align:center;
background:#ee7000;
}
.feature img{width:100%;}
.point_bg{
margin:0;
padding:0 0 60px 0;
background-color:#ffd127;
background-image:url('img/orange-top-sp.svg');
background-repeat:no-repeat;
background-position:center top;
background-size:100% auto;
}
.point_frame{
margin:0 auto;
padding:75px 0 1px 0;
position:relative;
}
.drop {
position:absolute;
top:20px;
right:3%;
transform: translateY(-24%); 
width:170px;
z-index:10;
}
.drop img{width:100%;}
.point{margin:0 0 5px 0;padding:0;text-align:center;}
.point img{width:100%;}
.more_top{margin:20px 0 0 0;padding:0;text-align:center;}
.more_top img{width:100%;}
.more{margin:0;padding:0;text-align:center;}
.more img{width:74%;}
.more2{margin:15px 0 0 0;text-align:center;}
.more2 img{width:74%;}
.campaign{
margin:0;padding:0;
text-align:center;
background-color:#ee7000;
background-image:url('img/campaign_bg.png');
background-position:bottom;
background-repeat:repeat-x;
}
.campaign img{width:100%;}
.schedule{
margin:0;padding:26px 0 32px 0;
text-align:center;
background-color:#ffd127;
}
.schedule img{width:100%;}
#prize_bg{
margin:0;
padding:30px 0 0 0;
background:#fff9b9;
}
.prize_frame{margin:0 auto;padding:0 0 45px 0;}
.prize{margin:0 0 20px 0;padding:0;}
.prize img{width:100%;}
.app{
margin:0;
padding:18px 0 0 0;
background-image:url('img/app_bg_sp.png');
background-size:100% auto;
background-position:bottom center;
background-repeat:no-repeat;
}
@media screen and (min-width:240px) and ( max-width:768px) {.app_point{display:none;}}
.app_title{margin:0;padding:0;text-align:center;}
.app_title img{width:100%;}
.app_btn{margin:0;padding:0;text-align:center;}
.app_btn img{width:76%;}
.app_data{margin:12px 0 0 0;padding:0;text-align:center;}
.app_data img{width:100%;}
#wallpaper_bg{
margin:0;
padding:75px 0 15px 0;
background-image:url('img/wallpaper_bg_sp.png');
background-size:auto 100%;
background-repeat:repeat-x;
}
.wallpaper_frame{
margin:0 30px 45px 30px;
padding:1px 0 8px 0;
background:#ee7000;
border-radius:40px;
}
.wallpaper_title{
margin:-45px 0 0 0;
padding:0;
text-align:center;
}
.wallpaper_title img{width:100%;}
.wallpaper_area{
margin:6px 8px 0 8px;
padding:0 0 10px 0;
background:#fff;
border-radius:0 0 34px 34px;
}
.wallpaper_name{
margin:0;
padding:20px 0 15px 0;
text-align:center;
}
.wallpaper_name img{width:50%;}
.wallpaper_box{
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.wallpaper_item{
width:48%;
margin:0;
padding:0 10px 25px 10px;
text-align:center;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.wallpaper_pict{margin:0;padding:0;}
.wallpaper_pict img{width:100%;}
.wallpaper_btn{margin:20px 0 0 0;padding:0;}
.wallpaper_btn img{width:100%;}
.wallpaper_visual{margin:0;padding:0;text-align:center;}
.wallpaper_visual img{width:100%;}
@media screen and (min-width:769px){
.subhead img{width:380px;}
.set img{width:1000px;}
.feature img{width:1000px;}
.point_bg{padding:0 0 90px 0;background-image:url('img/orange-top.svg');}
.point_frame{width:1000px;margin:0 auto;padding:75px 0 1px 0;}
.drop {position:absolute;top:25px;right:6%;transform: translateY(-40%);width:230px;}
.point{margin:0 0 30px 0;}
.more_top{display:none;}
.more{
margin:60px 0 0 0;
padding:284px 0 0 0;
text-align:center;
background-image:url('img/more_bg.png');
background-repeat:no-repeat;
background-position:center top;
background-size:1000px auto;
}
.more img{width:50%;}
.more2{
margin:20px 0 0 0;
padding:0;
text-align:center;
}
.more2 img{width:50%;}
.campaign img{width:1000px;}
.schedule{padding:0;}
.schedule img{width:1000px;}
#prize_bg{padding:45px 0 0 0;}
.prize_frame{width:1000px;padding:0 0 45px 0;}
.prize{margin:0 0 30px 0;}
.app{padding:30px 0 0 0;background-image:url('img/app_bg.png');position:relative;}
.app_point{
position:absolute;
top:15px;
right:140px;
width:250px;
z-index:10;
}
.app_point img{width:100%;}
.app_title{margin:0 0 180px 0;}
.app_btn img{width:500px;}
.app_data{margin:15px 0 0 0;}
#wallpaper_bg{
margin:0;
padding:75px 0 15px 0;
background-image:url('img/wallpaper_bg.png');
background-size:auto 100%;
background-repeat:repeat-x;
}
.wallpaper_frame{
width:900px;
margin:0 auto 45px auto;
padding:1px 0 8px 0;
background:#ee7000;
border-radius:40px;
}
.wallpaper_title{
margin:-45px 0 0 0;
padding:0;
text-align:center;
}
.wallpaper_title img{width:100%;}
.wallpaper_area{
margin:6px 8px 0 8px;
padding:0 0 45px 0;
background:#fff;
border-radius:0 0 34px 34px;
}
.wallpaper_name{
margin:0;
padding:20px 0 15px 0;
text-align:center;
}
.wallpaper_name img{width:260px;}
.wallpaper_box{
margin:0 75px;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.wallpaper_item{
width:30%;
margin:0;
padding:0;
text-align:center;
}
.wallpaper_pict{margin:0;padding:0;}
.wallpaper_pict img{width:100%;}
.wallpaper_btn{margin:20px 0 0 0;padding:0;}
.wallpaper_btn img{width:100%;}
.wallpaper_visual{margin:0;padding:0;text-align:center;}
.wallpaper_visual img{width:1000px;}
}

/* モーダル用CSS */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 最前面に */
}
.modal-content {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.modal-content p {
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #592c0c; /* サイトの茶色に合わせるなら調整 */
}
.modal-btns {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}
.modal-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
  transition: opacity 0.3s;
}
.modal-btn:hover { opacity: 0.8; }
.btn-view { background: #ff9900; } /* オレンジ */
.btn-save { background: #592c0c; } /* 茶色 */
.btn-cancel {
  background: transparent;
  border: 1px solid #ccc;
  color: #666;
  padding: 5px 15px;
  font-size: 12px;
}