/*
================================================================================================================
SECTION
================================================================================================================
*/
section {
    display: block;
    position: relative;
    width: 100%;
    color: #000;
    background-color: #fff5c5;
    background-image: url(../img/bg_footer_l.jpg), url(../img/bg_footer_r.jpg);
    background-position: left bottom, right bottom;
    background-repeat: no-repeat;
    background-size: 600px auto;
    text-align: left;
    font-size: 14px;
    line-height: 160%;
    margin: 0 auto;
    overflow: hidden;
}

.pc_br{display:block;}
.sp_br{display:none;}

@media screen and (max-width:1280px){
}

@media screen and (max-width:980px){
}

@media screen and (max-width:640px){
section {background-size: 200% auto; }
br.pc_br{display:none;}
br.sp_br{display:block;}}

/*
================================================================================================================
TOP画像
================================================================================================================
*/
#title_text_pc{width:100%; max-width:980px; text-align:center; margin:0 auto 20px;}
#title_text_sp{width:100%; max-width:480px; text-align:center; margin:0 auto 10px; display:none;}
#title_text_pc img,#title_text_sp img{width:100%;}
#title_text_annotation{
width:100%; 
max-width:980px; 
font-size:small; 
line-height:16px;
font-weight: bold; 
text-align:center; 
color:#893f00;
margin:10px auto 15px;}
#title_text_annotation2{
width:96%; 
max-width:680px; 
font-size:small; 
line-height:16px;
font-weight: bold; 
text-align:left; 
color:#893f00;
margin:10px auto 15px;}
#title_text_annotation3{
width:96%; 
max-width:680px; 
font-size:small; 
line-height:16px;
font-weight: bold; 
text-align:left; 
color:#893f00;
margin:10px auto 15px;}

#title_text_annotation a,#title_text_annotation2 a,#title_text_annotation3 a{padding:2px;border-radius:10px;color:#FFF;background-color:#a852ff;cursor:pointer;text-decoration:none;}


@media screen and (max-width:640px){
#title_text_pc{display:none;}
#title_text_sp{display:block; width:80%;}
#title_text_annotation{font-size:12px; }
}

@media screen and (max-width:480px){
#title_text_sp{width:96%; max-width:400px;}}

/*
================================================================================================================
文字装飾
================================================================================================================
*/
section .inner p{
position:relative;
width:100%;}

p.main-date{
width:100%;
max-width:780px;
color:#fff;
background:#333;
font-size:20px;
font-weight:bold;
text-align:center;
text-shadow:0px 0px 2px #000;
border-radius:10px;
padding:20px 20px;
margin:0 auto;}
p.main-date span{display:block; font-size:18px; margin-top:10px;}
p.main-date br{display:none;}

span.red{color:#f00; font-size:13px;}

.event-date{
widyh:100%;
max-width:550px;
font-size:18px;
font-weight:bold;
text-align:center;
margin:20px auto 10px;}
.event-date p{display:block; padding:5px;}
.event-date p:first-child{color:#fff; background-color:#5d3927; border-radius:5px 5px 0 0;}
.event-date p:last-child{color:#000; background-color:#fff; border-radius:0 0 5px 5px;}

@media screen and (max-width:640px){
p.main-date{font-size:18px; padding:10px;}
p.main-date span{font-size:14px;}
p.main-date br{display:block;}}

@media screen and (max-width:480px){
p.main-date{font-size:15px;}
p.main-date span{font-size:13px;}
p.main-date br{display:block;}
.event-date{font-size:14px;}}

@media screen and (max-width:480px){
p.main-date span{font-size:11px; margin-top:0;}
.event-date p:last-child{font-size:11px !important;}}

/*
================================================================================================================
ボタン
================================================================================================================
*/
.btn_menu{
position:relative;
width:100%;
max-width:780px;
background-color:#893f00;
border-radius:20px;
padding:5px;
margin:10px auto;}

.btn_menu a{
display:block; 
position:relative;
width:100%;
max-width:780px;
color:#a06654;
background-color:#fdff73;
font-size:20px;
font-weight:bold;
text-align:center;
border-radius:15px;
border:outset 5px #ffc938;
text-decoration:none;
padding:15px 0;}

.btn_menu span{color:#d44c5a;}

.btn_menu a:hover,
.btn_menu.oubo a{
background:#fed801;
border:outset 5px #dd9523;
color:#000;}

.btn_menu.oubo a:hover{background:#f8fe87;border:outset 5px #ceb569;color:#000;}

@media screen and (max-width:640px){
.btn_menu{padding:4px;}
.btn_menu a{font-size:15px; padding:6px 0; border:outset 3px #ffc938;}
.btn_menu a:hover{border:outset 3px #dd9523;}
.btn_menu a:hover, .btn_menu.oubo a {border: outset 4px #dd9523;}
}

/*
================================================================================================================
参加方法
================================================================================================================
*/
.howto {
    position: relative;
    width: 100%;
    max-width: 900px;
    text-align: center;
    padding: 10px;
    margin: 0 auto 30px;
}


#camp-howtohead {
    width: fit-content;
    font-family: 'mplus-1p-bold';
color: #fff;
    text-shadow: 2px 2px 2px #ca0d4f, -2px -2px 2px #ca0d4f, -2px 2px 2px #ca0d4f, 2px -2px 2px #ca0d4f, 2px 0px 2px #ca0d4f, -2px 0px 2px #ca0d4f, 0px 2px 2px #ca0d4f, 0px -2px 2px #ca0d4f;
    font-weight: bold;
    font-size: 28px;
    padding: 15px;
    margin: 0 auto 20px;
    background-color: #f964de;
    text-align: center;
    border-radius: 30px;
    border: 3px solid #FFF;
}
.howto#camp-about:last-child{margin:0 auto;}

.howto#camp-about .cl_sample_img{width:100%; max-width:860px; margin:0 auto 10px;}
.howto#camp-about .cl_sample_img img{width:100%;}

.howto#camp-about ul{display:flex;flex-wrap: wrap;justify-content:space-between;}
.howto#camp-about ul li{
display: flex;
flex-wrap: wrap;
flex-flow: column;

width: calc(50% - 10px);
    border-radius: 10px;
    border: 3px solid #FFF;
    margin-bottom: 10px;
    background-color: #99d0f3;
    background-image: linear-gradient(135deg, #2aa9f5 25%, transparent 25%), linear-gradient(225deg, #2aa9f5 25%, transparent 25%), linear-gradient(45deg, #2aa9f5 25%, transparent 25%), linear-gradient(315deg, #2aa9f5 25%, #99d0f3 25%);
    background-position: 20px 0, 20px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat;
}
.howto#camp-about ul li .info_area{background-color: #000;flex-grow: 2;display: flex;flex-wrap: wrap;flex-flow: column;justify-content:space-between;}
.howto#camp-about ul li.none{background:none;border:none;}/*余白用*/

/*各表示フラグ判定*/
.howto#camp-about ul li .not_new{display:none;}/*NEW判定*/
.howto#camp-about ul li .not_cd{display:none;}/*CDリストリンク判定*/
.howto#camp-about ul li .not_reuse{display:none;}/*復刻判定*/
.howto#camp-about ul li .not_change_de{display:none;}/*デザイン変更テキスト判定*/

.howto#camp-about ul li img{width:calc(100% - 10px);}
.howto#camp-about ul li .app_name{background-color:#000;padding:10px 5px;color:#FFF;font-weight:bold;font-size:1.3rem;line-height:160%;}
.howto#camp-about ul li .app_name .kinds,
.howto#camp-about ul li .app_name .kinds2{font-size:18px;}

.howto#camp-about ul li .app_info{background-color:#000;padding:10px 5px;border-radius:0 0 8px 8px; color:white;}
.howto#camp-about ul li .app_info .item_info{line-height:1.2em;font-size:3.6em;font-weight:bold;}
.howto#camp-about ul li:nth-of-type(1) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(6) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(11) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(16) .app_info .item_info{color:#fb91fd;}

.howto#camp-about ul li:nth-of-type(2) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(7) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(12) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(17) .app_info .item_info{color:#fb7470;}

.howto#camp-about ul li:nth-of-type(3) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(8) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(13) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(18) .app_info .item_info{color:#63beea;}

.howto#camp-about ul li:nth-of-type(4) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(9) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(14) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(19) .app_info .item_info{color:#59ff5a;}

.howto#camp-about ul li:nth-of-type(5) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(10) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(15) .app_info .item_info,
.howto#camp-about ul li:nth-of-type(20) .app_info .item_info{color:#fef751;}

.howto#camp-about ul li .app_info .item_info span{font-size:0.6em;}

.howto#camp-about ul li .myaccount_now,
.howto#camp-about ul li .app_now{width:96%;background-color:#666;margin:5px auto;padding:5px;border-radius:8px;text-align:center;color:#fed801;font-size:16px;}
.howto#camp-about ul li .app_now.dummy{height:32.4px;background-color: transparent;}/*全員プレゼント枠用ダミー*/

.howto#camp-about ul li .guide{width:96%;background-color:#fed801;margin:5px auto;padding:5px;border-radius:8px;text-align:center;font-size:16px;font-weight:bold;}
.howto#camp-about ul li .guide a{display:block;width:100%;height:100%;cursor:pointer;text-decoration:none;color:#000;}
.howto#camp-about ul li .guide:hover{background-color:#f06e6e;}
.howto#camp-about ul li .guide a:hover{color:#FFF;}
.howto h2{
color:#fff;
background:#000;
font-size:20px !important;
font-weight:bold;
text-align:left;
padding:10px;
margin:0 auto 10px;}

.howto .num{
position: relative;
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
    background-color: #4053d7;
    background-image: url(../img/num_text_bg.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
    border: #FFF 3px solid;
    border-radius: 10px;
    padding: 5px 0;
    color: #FFF;
    text-align: left;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
    z-index: 1;
    }

.howto .num div.num_text{
    width: 90%;
    padding: 5px 10px;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
}

.howto .num div img{width:100%; max-width:60px;}

.howto .others_point{display: flex;justify-content:flex-end;margin-bottom:20px;}
.howto .others_point a{color:#893f00;width: fit-content;position:relative;
text-decoration:none;margin:20px 0 10px; padding:5px 24px 0px 0;
font-weight: bold;font-size: 16px;
}
.howto .others_point a::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #FFF;
  border: 1px solid #FFF;
  border-radius: 50%;
}

.howto .others_point a::after {
  content: '▶';
  position: absolute;
  top:calc(50% + 1px);
  transform: translateY(-50%);  
  right: 2px;
  color: #893f00;
}

.howto strong{
display:block;
font-size:16px;
font-weight:bold;
padding:5px;
margin:0 auto 10px;}

.howto .stamp_num{
color:#893f00;
font-size:14px;
font-weight:bold;
text-align:left;
line-height:26px;
border-radius:5px;
padding:10px;
margin:0 auto;}

.howto #num1.stamp_num{background-color:#fce6ea;}
.howto #num2.stamp_num{background-color: #FFFFFF;
    color: #099289;
    border: none;
    padding: 10px;}

.howto#camp-howto .stamp_num{
background-color: initial;
border: none;
}

/*ポイント獲得方法セクション*/
details.howto_section summary {
  display: flex;
  justify-content:center;
  align-items:center;
  list-style: none;
  position: relative;
    width: 100%;
    height:40px;
    padding: 5px 10px;
    margin: 0 auto 20px;
    background-color: #43a898;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10px;
}
details.howto_section summary .mark{
 position:absolute;
 top: 50%;right: 10px;transform: translateY(-50%);
 border: 3px solid #FFF;width:30px;height:30px;
 display: flex; justify-content:center;align-items:center;
 }
 
details.howto_section summary .mark::after {
    content: "＋";
    font-size: 24px;
    font-weight: bold;
}
details.howto_section[open] summary .mark::after{
    content: "－";
}


@media screen and (max-width:680px){
#camp-howtohead {font-size:18px;}
.howto .others_point {margin-bottom:10px;}
.howto .others_point a{font-size:14px;margin:5px 0 0;}

.howto#camp-about{padding:5px;}
.howto#camp-about ul li {width: calc(100% - 10px); margin:0 auto 10px;}
.howto#camp-about ul li .app_name .kinds,
.howto#camp-about ul li .app_name .kinds2{font-size:16px;}
.howto#camp-about ul li .app_info{padding:5px 0;}

details.howto_section summary {font-size:16px;height:34px;margin-bottom:5px;}
details.howto_section summary .mark{width:24px;height:24px; border: 2px solid #FFF;}
}
@media screen and (max-width:480px){
.howto#camp-about ul li .app_now{padding:3px;font-size:12px;}
.howto#camp-about ul li .app_now.dummy{display:none;}/*全員プレゼント枠用ダミー*/
.howto#camp-about ul li .app_name{font-size:1.2rem;}
}

.select .stamp_num{
width:100%;
font-size:14px;
font-weight:bold;
text-align:left;
line-height:20px;
border-radius:10px;
padding:10px 10px 10px 20px;
margin:0 auto;}
.select .stamp_num p{font-size:22px; padding:5px 0 10px 0; text-align: center;}

.select .stamp_num span{
color:#000a2d;
background-color:#fff;
border-radius:50%;
padding:1px 8px;
margin:0 3px 0 0;}
.select .stamp_num span{
color:#000a2d;
background-color:#fff;
border-radius:50%;
padding:1px 8px;
margin:0 3px 0 0;}

.select#camp-howto .stamp_num{
background-color: initial;
border: none;
}

.how_in{
position:relative;
width:100%;
max-width:950px;
/*background:#fff;*/
text-align:center;
padding:10px 0;
margin:0 auto 20px;}
.how_in img{width:100%; max-width:820px;}

.how_in_title{
display:flex;
position:relative;
width:100%;
font-size:18px;
font-weight:bold;
text-align:left;
border-bottom:solid 4px black;
margin-bottom:20px;}
.how_in_title div:first-child{flex-basis:10%; max-width:70px; padding-right:10px;}
.how_in_title div:last-child{flex-basis:90%; line-height:70px;}
.how_in_title img{width:100%; max-width:70px;}

.in_box{
position:relative;
width:100%;
max-width:950px;
/*background:#222222;*/
text-align:center;
/*
border:3px solid #000a2d;*/
border-radius: 10px;
padding: 0;
margin:0 auto 30px;}
.in_box:last-child{margin:0 auto;}

.in_box .stamp_num{width:100%; margin:0;}

.in_box_title{
background: url(../img/goldline_2.png),url(../img/goldline_1.png),url(../img/goldline_3.png);
background-repeat: repeat-x,no-repeat,no-repeat;
background-position: bottom,right bottom,left bottom;
background-color:#000cab;
border-radius: 10px 10px 0 0;
color:#fff;
font-size:16px;
font-weight:bold;
margin-bottom:10px; 
padding:10px;}

.howto .stamp_num a,.howto .stamp_num a:hover{color:#fe2fc9; text-decoration:none; border-bottom:1px solid #fe2fc9; padding:0 0 1px 0; margin:0 3px 0 0;font-weight:bold;}

/*重要事項*/
.note_text {
    text-align: left;
    width: 100%;
    margin: auto;
    background: white;
    padding: 10px;
    border: solid #ec5800;
    border-radius: 10px;
    color: #ec5800;
}

@media screen and (max-width:800px){
.howto .num div:last-child{width:100%;}

.howto#camp-howto{
    background-size: contain;
    background-position: center 5px;
    padding-top: 10%;
}
}

@media screen and (max-width:680px){
.howto ul{display:flex;justify-content:space-between;}
.howto ul li{width:calc(50% - 2px);border: solid #FFF 2px;}
.howto ul li img{width:100%;}

.howto .num{
position:relative;
width:100%;
height:40px;
margin:0 0 10px 0;
background-color: #4053d7;
border: #FFF 2px solid;
border-radius: 10px;
padding:3px 0;
color:#FFF;
text-align:left;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;     /*中央揃え*/
z-index:1;
    }
.howto .num div.num_no{width:10%; max-width:60px; padding:0; margin:0; line-height:0; position:relative;z-index:2;}
.howto .num div.num_text{
width:90%;
padding:2px 4px;
color: #FFF;
font-size: 3.6vw;
font-weight: bold;
}


.how_in_title{font-size:14px;}
.how_in_title div:last-child{line-height:50px;}
.how_in_title img{max-width:50px;}}

@media screen and (max-width:540px){
.how_in_title div:first-child{min-width:50px;}
.how_in_title div:last-child{line-height:20px;}
.how_in_title img{max-width:50px;}}

@media screen and (max-width:480px){
.howto .num div:last-child{width:100%;}
.howto .stamp_num{font-size:2.8vw; line-height:4.8vw;}
.howto strong{font-size:14px; padding:0; margin:0 auto 20px;}}

@media screen and (max-width:400px){
.howto .num div:first-child img{max-width:30px;}
.howto .num div:last-child{padding:5px 0;}
.howto .num div:last-child span{margin-left:10px; font-size:13px; padding-left: 20px; display: block;}

.how_in{
padding:5px;
margin-bottom:10px;
}

.howto .short .num {
    min-height: 38px;
}

.how_in_title img{max-width:35px;}
.how_in_title div:first-child{min-width:40px; padding-right:0;}
.how_in_title div:last-child{font-size:13px;}

.howto strong{font-size:13px; text-align:left !important;}
.howto strong br{display:none !important;}

.in_box{padding:0px; margin:0 auto 0px;}
.in_box .stamp_num{width:100%;}
.in_box_title{font-size:13px;}}


@media screen and (max-width:350px){

.howto#camp-howto .num{
    min-height: 55px;
}
.howto#camp-howto .num#fst{
    min-height: 75px;
}
}

/*パスケース解説******************************/
.howto#camp-about #passcase{
width:100%;
background-color:#FFF;
padding:10px;
border-radius:6px;
}
.howto#camp-about #passcase .text{
border:2px solid #000;
color:#000;
text-align:center;
width:fit-content;
padding:5px;
margin:0 auto;
}
.howto#camp-about #passcase .text#1{
font-weight:bold;
}
.howto#camp-about #passcase ul{display:flex;margin:20px 0;}
.howto#camp-about #passcase ul li{width:calc(100% / 3);background-color:#FFF;background-image:none;}
.howto#camp-about #passcase ul li img{width:100%;height:auto;}

@media screen and (max-width:639px){
.howto#camp-about #passcase ul{flex-wrap: wrap;}
.howto#camp-about #passcase ul li{width:100%;}
}

/*
================================================================================================================
TOPバナー
================================================================================================================
*/
.img_box3 img{width:100%;}

*
================================================================================================================
CD曲リスト
================================================================================================================
*/
#cd_listtitle{font-size:22px;text-align:center;margin-bottom:20px;}
#cd_list{display:flex;flex-wrap: wrap;}
#cd_list .cd_title{font-weight:bold;font-size:18px;width:100%;margin-bottom:10px;color:#1413d8;}
#cd_list ul {width: 50%;}
#cd_list ul li{width:100%;margin-bottom:20px;}

@media screen and (max-width:800px){
#cd_list ul{width:50%;}
#cd_list ul li{width:100%;margin-bottom:10px;}
}
@media screen and (max-width:639px){
#cd_listtitle{font-size:18px;}
#cd_list .cd_title{font-size:15px;}
#cd_list ul{width:100%;}
}

/*2023年4月ポイント数変更******************************/
#point_info {
    width: 100%;
    max-width: 770px;
    color: #666;
    background: #FFF;
    text-align: center;
    border-radius: 10px;
    margin: 20px auto;
    padding: 10px;
    font-size:16px
}
#point_info .check{width:fit-content;text-align: left;margin: 10px auto; background:rgba(252,230,230,0.75);}
#point_info span{color: #FF0000;font-weight:bold;}
#point_info .title{font-size:18px;font-weight:bold;margin-bottom:15px;}
#point_info .caution{text-align: left;margin-top:15px;}

@media screen and (max-width:639px){
#point_info,#point_info .title{font-size:12px;padding:5px;}
#point_info .title{margin-bottom:5px;padding:0;}
#point_info .check{margin: 5px auto;}
}

/*相互リンクバナー******************************/

.mutual_link{width:100%;max-width:770px; margin:0 auto;}
.mutual_link img{width:100%;}