/*
================================
party.css 2021.08
================================
*/

/*
================================================================================================================
COMMON
================================================================================================================
*/
/***** 見出し付きリスト *****/
#event .frame > .inner .desc-lists dl{
margin:0;
padding:5px 0 0;}
#event .frame > .inner .area-lists dt,
#event .frame > .inner .desc-lists dt{
display:inline-block;
padding:2px 10px 6px 6px;
border-left:solid 4px #e8db6e;
border-bottom:dotted 1px #e8db6e;
font-size:14px;
font-weight:bold;
line-height:1.0;
margin:5px 0 10px;
color:#e8db6e;
min-width:72px;}
#event .frame > .inner .desc-lists dd{margin:0 0 15px 10px;}
#event .frame > .inner .desc-lists b{
font-weight:bold;
background-color:#333;
padding:0 10px;
margin:8px 0;
line-height:1.7;
border-radius:2px;}
#event .frame > .inner .desc-lists dd b + span{padding:0 10px 0 5px;}
#event .frame > .inner .desc-lists dd p:first-child{margin-bottom:5px;}

/***** 汎用リスト *****/
#event .frame > .inner li{color:#fff8d4;}

/***** トップタイトル *****/
#event .frame > .inner .top-title{max-width:700px;}
#event .frame > .inner .top-title.index{border:double 3px #e8db6e;}

/***** NEW 強調表示 *****/
#event .frame > .inner .new{
font-size:12px;
vertical-align:1px;
background:#d70035;
padding:0 2px;
margin:0 3px;
border-radius:2px;}

/***** 共通ボタン追加css *****/
.link-btn{text-align:center;}

#event .frame .em_box em{
margin:0;
color:yellow;}

/*
================================================================================================================
index.html
================================================================================================================
*/

/***** スケジュール(テキスト版) *****/
#event .frame > .inner .index-schedule{
color:#fff8d4;
margin:30px auto;}
#event .frame > .inner .index-schedule dt{
font-weight:bold;
font-size:16px;
margin-bottom:5px;}
#event .frame > .inner .index-schedule dt span{
color:#e8db6e;
position:relative;}
#event .frame > .inner .index-schedule dt span:before,
#event .frame > .inner .index-schedule dt span:after{
position:absolute;
content:'';
width:100px;
height:1px;
background:#e8db6e;
top:45%;}
#event .frame > .inner .index-schedule dt span:before{left:-115px;}
#event .frame > .inner .index-schedule dt span:after{right:-115px;}

#event .frame > .inner .index-schedule dd{margin-bottom:25px;}
#event .frame > .inner .index-schedule .time{
display:inline-block;
border:solid 1px #e8db6e;
color:#e8db6e;
font-weight:bold;
padding:4px 0;
width:260px;
margin:0 auto 20px;}

/***** リンクバナー *****/
#event .frame > .inner ul.banner_list{
margin: 10px auto 20px;
width: 80%;}
#event .frame > .inner ul.banner_list li{
margin: 10px 0;}
#event .frame > .inner ul.banner_list .darken_img{
opacity: 0.5;}

/*
================================================================================================================
detailed.html
================================================================================================================
*/
/***** レイアウト *****/
#event .frame > .inner strong.title + .cat{
max-width:654px;
margin:0 auto;}


/***** 日時延長表示 *****/
#event .frame > .inner .extend{
display:inline-block;
font-weight:bold;
color:yellow !important;
background:#665a1a;
position:relative;
padding:0 10px;
border-radius:2px;
margin-left:20px;}
#event .frame > .inner .extend:before{
display:inline-block;
position:absolute;
top:0;
left:-18px;
content:'\02192';}

/***** 概要の画像 *****/
#event .frame > .inner .outline-img{
margin-top:10px;
border-radius:8px;}

/***** 汎用グレー枠 *****/
#event .frame > .inner .gray-box{
width:95%;
max-width:654px;
background:#222;
border-radius:5px; 
padding:10px;
margin:10px auto 30px;
position:relative;}

#event .frame > .inner .gray-box:after{
content:'▼';
font-size:1.2rem;
color:#fff8d4;
bottom:-22px;
left:48%;
position:absolute;}

#event .frame > .inner .gray-box:last-child:after{
content:none;}

/***** 参加方法 *****/
#event .frame > .inner .wrap_parallel_img{
display: flex;
justify-content: space-between;
margin: 10px auto;}
#event .frame > .inner .wrap_parallel_img img{width: calc((100% - 50px)/2);}

/***** PASELI特典枠 *****/
#event .frame > .inner .box_paseli1,
#event .frame > .inner .box_paseli2{
max-width:640px;
font-weight:bold;
padding:5px 10px;}
#event .frame > .inner .box_paseli1{
text-align:center;
background:#1bb367;
border-radius:6px 6px 0 0; 
color:#fff;
margin:40px auto 0;
position:relative;}
#event .frame > .inner .box_paseli2{
text-align:left;
background:#fff;
border-radius:0 0 6px 6px; 
color:#1bb367;
margin:0 auto 10px;}
#event .frame > .inner .box_paseli1:before,
#event .frame > .inner .box_paseli1:after{
position:absolute;
content:"";
display:inline-block;
background:#fff;
width:20px;
height:4px;
top:-20px;
left:calc(50% - 10px);}
#event .frame > .inner .box_paseli1:after{
transform: rotate(90deg);}

/***** 証明書 *****/
#event .frame > .inner .certificate_info{
color:#fff8d4;
margin-top:20px;
padding:10px 0;
border-top:solid 2px #e8db6e;
border-bottom:solid 2px #e8db6e;}

#event .frame > .inner .certificate_info img{
margin-bottom:10px;
max-width:200px;}


/*
================================================================================================================
PC表示
================================================================================================================
*/
@media screen and (min-width:769px){
#event .frame > .inner .party_lists > li > img{max-width:300px;}
#event .frame > .inner h5{margin:50px auto 20px;}
#event .frame > .inner .box_paseli2{text-align:center;}
}

/*
================================================================================================================
タブレット表示
================================================================================================================
*/
@media screen and (max-width:768px){
#event .frame > .inner h5{margin: 30px auto 15px;}
#event .frame > .inner .party_lists{
display:inline-block;
max-width:500px;}
#event .frame > .inner .party_lists > li{
width:100%;
margin-bottom:20px;}
}

/*
================================================================================================================
スマートフォン表示
================================================================================================================
*/
@media screen and (max-width:480px){
#event .frame > .inner .desc-lists b{
margin:8px 10px 8px 0;
display:block;}
#event .frame > .inner .desc-lists b + span{
display:block;}
#event .frame > .inner .em_box{padding:10px;}
.narrow_left{text-align:left !important;}
#event .frame > .inner .wrap_parallel_img{
display: block;}
#event .frame > .inner .wrap_parallel_img img{
width:80%;
margin:10px auto;}
}