body{
margin: 0;
padding: 0;
font-family: 'Kosugi Maru', serif,  -apple-system, BlinkMacSystemFont, Arial, Meiryo, sans-serif;
}

html {
overflow: auto;
}

ul{
margin:0;
padding:0;
list-style:none;
}

ul:after {
 content: '';
 display: block;
 clear: both;
}

p{
margin:0;
padding:.5rem;
}

img{
max-width:auto;
width:100%;
vertical-align:top;
pointer-events: none; 
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-touch-callout:none;
-moz-user-select:none;
touch-callout:none;
user-select:none;
}

@media (max-width: 768px) {
.pc_on{display:none;}
}


/* ヘッダー */
header{
margin: 1.5rem auto;
padding: 0 1.5rem;
max-width: 960px;
background:#fff;
}

header img{
border-radius:15px;
}


/* レイアウト */
main{
margin : 0;
padding : 1rem 0;
background:#00aed4 url(img/bg.png) no-repeat center top;
background-attachment: fixed;
background-size: cover;
}

.container{margin: 1.5rem;}

.inner{
margin: 0 auto;
padding: 0;
max-width: 960px;
padding: 1rem;
font-size:16px;
line-height:1.25em;
}

.inner h3{font-size:18px;}



@media (min-width: 769px) {
.inner{padding: 1.5rem;font-size:18px;}
.inner h3{font-size:21px;}
}

.sm{
font-size : .85em;
font-weight:normal;
}

p.info{
color:#ff0000;
font-size:1.05em;
padding-bottom:.5em;
}


/* パンクズ*/
#topicpath{
margin : 0;
padding : 0;
text-align: center;
background-color :#00aed4;
}
#topicpath p{
margin : 0 auto;
padding : 5px 1rem;
max-width :960px;
font-size : .8rem;
line-height : 1.2rem;
text-align: left;
color:#ffffff;
}
#topicpath a{
color:#ffffff;
}



/* 概要 */
.gaiyou{
box-sizing: border-box;
background:#ffffff;
border: 2px solid #00aed4;
border-radius:15px;
}

.gaiyou h3{
margin : .5em auto .2em auto;
padding : .4em .8em;
background-color :#e5004f;
color:#ffffff;
border-radius:15px;
}

.gaiyou p{
font-size:1.2em;
line-height : 1.6rem;
}

.gaiyou p.chuui{
font-size:.815em;
line-height : 1.15rem;
letter-spacing:-.05em;
}



/* 受付状況 */
.reception{
margin: 0;
padding: 2rem 1.5rem;
background-color :#ffcee9;
background-image:  radial-gradient(#ffffff 2px, transparent 2px), radial-gradient(#ffffff 2px, #ffcee9 2px);
background-size: 40px 40px;
background-position: 0 0,20px 20px;
}

.reception ul{
box-sizing: border-box;
margin: 0 auto;
padding: 0;
max-width:960px;
}

.reception li{
margin-bottom: 30px;
box-sizing: border-box;
background:#ffffff;
border: 2px solid #e5004f;
border-radius:10px;
}

.reception h3{
margin :0;
padding : .4em .8em;
background-color :#e5004f;
color:#ffffff;
border-top-right-radius:7px;
border-top-left-radius:7px;
text-align: center;
}

.reception02 h3{
background-color :#03a6ff;
}
.reception li.reception02{
border: 2px solid #03a6ff;
}

.reception p{
line-height:1.4em
}

@media (min-width: 769px) {
.reception ul{
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
.reception ul::after {
  content: "";
  display: block;
  width: 49%;
}

.reception li{
margin: 0;
/* width: 49%; */
width: 100%;
}

}

/* お仕事リスト */
.job{
margin: 0;
padding: 1rem;
background: #ffffff;
box-sizing: border-box;
}
.job ul{
margin:0;
padding: 0;
}
.job li{
margin-bottom:15px;
padding-bottom: .5em;
box-sizing: border-box;
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
.job ul{display: flex;flex-wrap: wrap;}
.job li{width: 48% ;margin:0 1% 15px 1%;}
}
@media (min-width: 961px) {
.job ul{display: flex;flex-wrap: wrap;}
.job li{width: 31.333% ;margin:0 1% 15px 1%;}
}

.job h2{
text-align: center;
padding: .5em;
border-radius:8px;
}

.job h3{
margin:0;
padding: .5em .2em;
text-align: center;
color:#ffffff;
border-top-left-radius:5px;
border-top-right-radius:5px;
font-size:1.15rem;
}
.job h3 span{font-size:.9rem;}


.job p{
margin: 0;
padding:.3em .5em;
box-sizing: border-box;
font-size:.85em;
line-height : 1.2em;
}

.job p.time{
font-size:1em;
}

.job p.time span{
display:inline-block;
}

.job p.chuushi{
padding: 1em .5em;
font-size:1.4em;
text-align: center;
background:#F8FF66;
color:#E4004F;
}

.job p.gakunen{
margin:.4em 5%;
padding:.2em;
width:90%;
border: 1px solid #fe4365;
border-radius:16px;
text-align: center;
box-sizing: border-box;
color:#fe4365;
font-size:1em;
}

.job p.shuten{
margin: 0;
padding:.5em .2em;
text-align: center;
font-size:.85em;
}

.job p.map{
margin: 0;
padding:1em .2em 0 .2em;
text-align: center;
font-size:1em;
}


/* 体験一覧 */

.taiken-t{
margin:.5em 0;
background:#03a6ff;
color:#fff;
}
.job .taiken h3{
background:#03a6ff;
}

.taiken li{
border: 2px solid #03a6ff;
border-radius:10px;
box-sizing: border-box;
}

.job .taiken p.tsuika{
margin:0 0 .8em 0;
text-align: center;
font-size:1em;
}

.job .taiken p.msg{
margin:0 0 .8em 0;
text-align: center;
font-size:1em;
color:#e5004f;
}

.job .taiken p.shuten{
background:#d6ecfa;
}

.job p.tenin{
margin:0;
padding:.25em;
background:#1ec0ff;
text-align: center;
font-size:1em;
}

.job .taiken p.chuui{
font-size:.8em;
color:#ff0000;
}



/* 自由参加 */
.jiyuu-t{
margin:0;
background:#3ac569;
color:#ffffff;
}

.job .jiyuu p.chuui{
margin:.3em 0 .8em 0;
text-align: center;
font-size:1em;
}


.job .jiyuu h3{
background:#3ac569;
}

.job .jiyuu p.shuten{
background:#66ff99;
}

.jiyuu li{
border: 2px solid #3ac569;
border-radius:10px;
box-sizing: border-box;
}



/* 参加までの流れ */
.sanka{
box-sizing: border-box;
background:#ffffff;
border: 2px solid #00aed4;
border-radius:15px;
}

.sanka h2{
margin: 0 auto 24px auto;
padding: 16px 0;
background:#e5004f;
text-align: center;
color:#ffffff;
border-radius:6px;
}

.sanka span{font-size:.85em;}

.sanka p.c-o{
background:#ffcc00;
display:inline-block;
border-radius:4px;
}
.sanka p.c-g{
background:#00ff33;
display:inline-block;
border-radius:4px;
}

.sanka p.c-p{
color:#e5004f;
font-weight:bold;
}


/* Q&A */
.cp_qa{
box-sizing: border-box;
background:#ffffff;
border: 2px solid #00aed4;
border-radius:15px;
}

.cp_qa h2{
margin: 0 auto 24px auto;
padding: 16px 0;
background:#ffff05;
text-align: center;
border-radius:6px;
}


.Qa-Box {
width: 95%;
margin: 0 auto;
}

.Qa-Box .Qa {
padding: 20px 0;
border-bottom: 1px solid #c8c8c8;
}

.Qa-Box .Qa dt,
.Qa-Box .Qa dd {
display: flex;
align-items: baseline;
margin: 15px 0;
}

.Qa-Box .Qa dt p {
margin: 0;
padding-left: 15px;
font-weight: bold;
width: 100%;
}

.Qa-Box .Qa dd p {
margin: 0;
padding-left: 15px;
width: 100%;
}

.Qa-Box .Qa:last-of-type {
border-bottom: none;
}

.Qa-Box .Qa dt::before {
content: "Q";
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: #40b4ea;
width: 2em;
height: 2em;
border-radius:4px;
}

.Qa-Box .Qa dd::before {
content: "A";
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background: #f062a1;
width: 2em;
height: 2em;
border-radius:4px;
}

/* 協賛 */
.kyosan{
box-sizing: border-box;
background:#ffffff;
border: 2px solid #00aed4;
border-radius:15px;
}
.kyosan h4{
margin: 0 auto 12px auto;
padding: 8px 0;
background:#b4f2ff;
text-align: center;
border-radius:6px;
}


.kyosan ul{
margin : 0;
padding: 0;
display:flex;
flex-wrap: wrap;
box-sizing: border-box;
}
.kyosan li{
padding: .5em;
width:50%;
box-sizing: border-box;
}
.kyosan li a{
display:block;
}

@media (min-width: 769px) {
.kyosan li{width:25%;}
}


/* 主催・協力 */
.shusai{margin : .5em 0 0 0;}
.shusai p{margin : 0;padding: 0 .5em;}
.shusai img{margin : 0 6%;width:88%;display: block;}
@media (min-width: 769px) {
.shusai{display:flex;padding: 0;justify-content: center;}
}

/* シェアボタン枠 */
.like{
box-sizing: border-box;
background:#ffffff;
border: 2px solid #00aed4;
border-radius:15px;
}

.like p{
text-align: center;
}

.like p img{
max-width: 460px;
}

.like-box{
margin: 0 auto;
padding: 0;
max-width: 200px;
}

.like-box ul{
margin: 0 auto;
padding:0;
display: flex;
}

.like-box li{
margin: 0 auto;
padding:0;
width:100%;
text-align: center;
}

.fb-like { /* Facebook */
display: inline-block;
height: 20px;
overflow: hidden;
}
.fb_iframe_widget span {
vertical-align: top !important;
}
#___plusone_0, #___plusone_0 iframe { /* Google+ */
width: 70px !important;
}





/*footer*/
.footer{
margin: 0;
padding: 1rem 0;
text-align: center;
justify-content: center;
background: #00aed4;
}
.copyright{
padding: .1rem;
font-size: .75rem;
color:#fff;
}

/* 外部読込用 */
.spread{
  font-size:0.8em;
  display:table-cell;
  border: 1px solid;
  text-align: left;
  flex-wrap:wrap;
  border-color: red;
  border-style: solid;
  margin:5px;
}