@charset "UTF-8";

/*==================================================================

CONTENTS_HEADER

==================================================================*/
@media screen and (min-width:1024px) {
.smp{
display:none;
}
.contents_header{
width:100%;
height:350px;
margin:100px auto 50px;
background:url("../../activity/images/header_activity.jpg") no-repeat 50%;
background-size:cover;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.smp{
display:none;
}
.pc{
display:none;
}
.tablet{
display:block;
}
.contents_header{
width:100%;
height:200px;
margin:100px auto 50px;
background:url("../../activity/images/header_activity_smp.jpg") no-repeat 50%;
background-size:cover;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.pc{
display:none;
}
.contents_header{
width:100%;
height:150px;
margin:80px auto 50px;
background:url("../../activity/images/header_activity_smp.jpg") no-repeat 50%;
background-size:cover;
}
}










/*==================================================================

EVENT_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.event_area{
width:1000px;
margin:60px auto 30px;
padding:10px 0 0px;
}
.event_area p{
text-align:center;
}
.event_area h3{
font-family:TsukuMinPr6-L;
font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.1em;
}
.event_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.event_area h3 span::before, .event_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.event_area h3 span::before{
left:100%;
}
.event_area h3 span::after{
right:100%;
}
.event_area figure{
width:60%;
margin:0 auto;
}
.swiper{
width:90%;
margin:0 auto;
}
.swiper-parent{
position:relative;
}
.swiper-container{
width:90%;
width:calc(100% - 100px);
padding-bottom:50px;
box-sizing:content-box;
text-align:center;
cursor:grab;
}
.swiper-container:active{
cursor:grabbing;
}
.swiper-wrapper{
width:100%;
height:auto;
}
.swiper-slide{
width:100%;
height:auto;
text-align:center;
}
.swiper-container .swiper-slide img{
max-width:100%;
width:100%;
height:auto;
}
.swiper-button-prev, .swiper-button-next{
top:calc((100% - 50px) * 0.5);
margin-top:-22px;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.event_area{
width:98%;
margin:50px auto;
padding:5px 0 0px;
}
.event_area p{
text-align:center;
}
.event_area h3{
font-family:TsukuMinPr6-L;
font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.1em;
}
.event_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.event_area h3 span::before, .event_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.event_area h3 span::before{
left:100%;
}
.event_area h3 span::after{
right:100%;
}
.event_area figure{
width:60%;
margin:0 auto;
}
.swiper{
width:90%;
margin:0 auto;
}
.swiper-parent{
position:relative;
}
.swiper-container{
width:90%;
width:calc(100% - 100px);
padding-bottom:50px;
box-sizing:content-box;
text-align:center;
cursor:grab;
}
.swiper-container:active{
cursor:grabbing;
}
.swiper-wrapper{
width:100%;
height:auto;
}
.swiper-slide{
width:100%;
height:auto;
text-align:center;
}
.swiper-container .swiper-slide img{
max-width:100%;
width:100%;
height:auto;
}
.swiper-button-prev, .swiper-button-next{
top:calc((100% - 50px) * 0.5);
margin-top:-22px;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.event_area{
width:98%;
margin:30px auto;
padding:1px 0 20px;
}
.event_area p{
text-align:center;
line-height:1.6em;
}
.event_area h3{
font-family:TsukuMinPr6-L;
font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:2em auto 1.5em;
letter-spacing:0.1em;
}
.event_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.event_area h3 span::before, .event_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.event_area h3 span::before{
left:100%;
}
.event_area h3 span::after{
right:100%;
}
.event_area figure{
width:80%;
margin:0 auto;
}
.swiper{
width:100%;
margin:0 auto;
}
.swiper-parent{
position:relative;
}
.swiper-container{
width:80%;
width:calc(100% - 100px);
padding-bottom:50px;
box-sizing:content-box;
text-align:center;
cursor:grab;
}
.swiper-container:active{
cursor:grabbing;
}
.swiper-wrapper{
width:100%;
height:auto;
}
.swiper-slide{
width:100%;
height:auto;
text-align:center;
}
.swiper-container .swiper-slide img{
max-width:100%;
width:100%;
height:auto;
}
.swiper-button-prev, .swiper-button-next{
top:calc((100% - 50px) * 0.5);
margin-top:-22px;
}
}









/*==================================================================

PAST_AREA

==================================================================*/
@media screen and (min-width:1024px) {
.past_area{
width:1000px;
margin:0 auto;
padding:10px 0 80px;
}
.past_area h3{
font-family:TsukuMinPr6-L;
font-size:25px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:5%;
padding-top:80px;
margin:2em auto 2em;
letter-spacing:0.2em;
}
.past_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.past_area h3 span::before, .past_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.past_area h3 span::before{
left:100%;
}
.past_area h3 span::after{
right:100%;
}
.accordion{
width:98%;
margin:1em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom:1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-family:TsukuMinPr6-RB;
font-size:25px;
letter-spacing:0.1em;
border:solid 1px #000;
padding:0.8em 1.2em 0.8em 3em;
display:block;
color:#000;
background:url("../../images/mark.png") no-repeat 3%;
background-size:2.4%;
background-color:#FBFAF6;
}
.title span{
font-family:TsukuMinPr6-L;
font-size:0.8em;
letter-spacing:0.1em;
margin-left:0.3em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.75em;
top:0.7em;
width:1px;
height:1em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:100%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.toggle:checked + .title + .content{
max-height:2000px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform:rotate(90deg) !important;
}
.content dl{
width:90%;
margin:1em auto 2em;
font-size:12px;
display:flex;
flex-wrap:wrap;
}
.content dl dt{
float:left;
width:15%;
padding-top:0.5em;
padding-bottom:0.5em;
border-bottom:dashed 1px #AAA;
letter-spacing:0.07em;
}
.content dl dd{
float:left;
width:84%;
padding-top:0.5em;
padding-bottom:0.5em;
padding-left:1%;
border-bottom:dashed 1px #AAA;
}
.content dl dd span{
background-color:#000;
padding:0.3em 0.7em;
margin-right:1em;
color:#FFF;
font-size:0.9em;
letter-spacing:0.1em;
}
.content dl dd span.kana{
letter-spacing:-0.1em;
}
.past_area h6{
width:50%;
margin:50px auto 0;
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.past_area{
width:98%;
margin:0 auto;
padding:5px 0 60px;
}
.past_area h3{
font-family:TsukuMinPr6-L;
font-size:23px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:4%;
padding-top:80px;
margin:2em auto 1em;
letter-spacing:0.2em;
}
.past_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.past_area h3 span::before, .past_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.past_area h3 span::before{
left:100%;
}
.past_area h3 span::after{
right:100%;
}
.accordion{
width:98%;
margin:1em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom:1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-family:TsukuMinPr6-RB;
font-size:20px;
letter-spacing:0.1em;
border:solid 1px #000;
padding:0.8em 1.2em 0.8em 3em;
display:block;
color:#000;
background:url("../../images/mark.png") no-repeat 3%;
background-size:3%;
background-color:#FBFAF6;
}
.title span{
font-family:TsukuMinPr6-L;
font-size:0.8em;
letter-spacing:0.1em;
margin-left:0.3em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.75em;
top:0.8em;
width:1px;
height:1em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:100%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.toggle:checked + .title + .content{
max-height:2000px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform:rotate(90deg) !important;
}
.content dl{
margin:1em auto 2em;
font-size:12px;
display:flex;
flex-wrap:wrap;
}
.content dl dt{
float:left;
width:16%;
padding-top:0.5em;
padding-bottom:0.5em;
border-bottom:dashed 1px #AAA;
letter-spacing:0.07em;
}
.content dl dd{
float:left;
width:83%;
padding-top:0.5em;
padding-bottom:0.5em;
padding-left:1%;
border-bottom:dashed 1px #AAA;
}
.content dl dd span{
background-color:#000;
padding:0.3em 0.7em;
margin-right:1em;
color:#FFF;
font-size:0.9em;
letter-spacing:0.1em;
}
.content dl dd span.kana{
letter-spacing:-0.1em;
}
.past_area h6{
width:60%;
margin:35px auto 0;
}
}
@media only screen and (min-width:320px) and (max-width:767px) {
.past_area{
width:98%;
margin:30px auto;
padding:0px;
}
.past_area h3{
font-family:TsukuMinPr6-L;
font-size:20px;
text-align:center;
background:url("../../images/mark.png") no-repeat center top;
background-size:10%;
padding-top:60px;
margin:1em auto 1em;
letter-spacing:0.2em;
}
.past_area h3 span{
position:relative;
display:inline-block;
padding:0 0.5em;
}     
.past_area h3 span::before, .past_area h3 span::after{
position:absolute;
top:50%;
content:'';
width:1.5em;
height:1px;
background-color:#000;
} 
.past_area h3 span::before{
left:100%;
}
.past_area h3 span::after{
right:100%;
}
.accordion{
width:100%;
margin:1em auto;
}
.toggle{
display:none;
}
.option{
position:relative;
margin-bottom:1em;
}
.title,
.content{
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
transform:translateZ(0);
transition:all 0.3s;
}
.title{
font-family:TsukuMinPr6-RB;
font-size:18px;
letter-spacing:0.1em;
border:solid 1px #000;
padding:0.8em 1.5em 0.8em 2.5em;
display:block;
color:#000;
background:url("../../images/mark.png") no-repeat 3%;
background-size:5%;
background-color:#FBFAF6;
}
.title span{
font-family:TsukuMinPr6-L;
font-size:0.8em;
letter-spacing:0.1em;
margin-left:0.3em;
}
.title::after,
.title::before{
content:"";
position:absolute;
right:1.5em;
top:1.0em;
width:1px;
height:0.75em;
background-color:#000;
transition:all 0.3s;
}
.title::after{
transform:rotate(90deg);
}
.content{
width:100%;
margin:0 auto;
max-height:0;
overflow:hidden;
}
.toggle:checked + .title + .content{
max-height:5000px;
transition:all 1.5s;
}
.toggle:checked + .title::before{
transform:rotate(90deg) !important;
}
.content dl{
margin:0.5em auto 1em;
font-size:12px;
}
.content dl dt{
padding-top:0.4em;
padding-bottom:0;
letter-spacing:0.07em;
}
.content dl dd{
padding-bottom:0.3em;
border-bottom:dashed 1px #AAA;
}
.content dl dd span{
background-color:#000;
padding:0.3em 0.7em;
margin-right:1em;
color:#FFF;
font-size:0.8em;
letter-spacing:0.1em;
}
.content dl dd span.kana{
letter-spacing:-0.1em;
}
.past_area h6{
width:80%;
margin:30px auto 0;
}
}