body{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Meiryo, sans-serif;
margin: 0;
padding:0;
}

html {overflow: auto;}


ul:after {
 content: '';
 display: block;
 clear: both;
}

li{
list-style-type:none;
}

:root {
	--main-color: #6995AA;
	--sub-color: #FFF68A;
	--base-color: #cc0033;
	--accent-color1:  #000;
	--accent-color2: #fff;
}


/* パンクズ */

#topicpath{
margin : 0;
padding : 5px 0;
overflow:hidden;
background-color: var(--main-color);
}
#topicpath p{
color:var(--accent-color2);
}
#topicpath a{
color:var(--accent-color2);
}

@media print, screen and (min-width: 769px) { /* for PC  */
.topicpath-in{
margin : 0 auto;
padding : 0;
max-width :1140px;
overflow:hidden;
}
#topicpath p{
margin : 0 auto;
max-width :700px;
padding :.3rem 1rem 0 1rem;
font-size : 12px;
line-height : 14px;
text-align: left;
float: left;
}
} /* end for PC */

@media screen and (max-width: 768px) { /* for SP,Tablet */
#topicpath p{
margin : 0;
max-width :500px;
padding : 3px 10px;
font-size : 12px;
line-height : 14px;
text-align: left;
float: left;
}
}


/* シェアボタン */
#share{
margin: 0 auto;
padding :0 0 5px 0;
overflow:hidden;
width: 200px;
height: 20px;
float: right;
}

#share ul{
list-style: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
}

#share ul:after {
overflow: hidden;
}

#share li{
float: left;
margin: 0 0 0 5px;
padding: 0;
display: inline-block;
height: 20px;
overflow: hidden;
}

.fb-like {
display: inline-block;
height: 20px;
overflow: hidden;
}
.fb_iframe_widget span {
vertical-align: top !important;
}
.fb-share-button{
margin: 0;
padding: 0;
text-align: left;
}


/* ヘッダー */
#header{
width: 100%;
margin : 0;
padding: 0;
overflow: hidden;
text-align: center;
}


#header img{
margin : 0%;
width: 100%;
vertical-align:top;
}



/* 募集要項 */

#gaiyou{
margin : 0 auto;
padding: 0;
overflow: hidden;
text-align: center;
}

#gaiyou h2{
margin : 0;
padding: .8rem 0;
color:var(--main-color);
background-color: var(--sub-color);
font-size : 1.5rem;
line-height :1.8rem;
}



.oubo_gaiyou{
margin : 0 auto;
padding: 20px 0;
max-width: 940px;
text-align: left;
background-color:var(--accent-color2);
}

.oubo_gaiyou h3 {
margin-bottom :1rem;
font-size : 1.3rem;
line-height :1.6rem; 
text-align: center;
padding:10px;
color:#333;
border-bottom:solid 3px #333 ;
}

.oubo_gaiyou h4 {
 text-align: center;
}
 
.oubo_gaiyou h4 span{
 position: relative;
 display: inline-block;
 padding-bottom:0.5em;
 border-bottom: 1px solid black;
}
  
.oubo_gaiyou h4 span::before,
.oubo_gaiyou h4 span::after {
 position: absolute;
 top: 100%;
 left:50%;
 transform:translateX(-50%);
 content: '';
 border: 10px solid transparent;
}
 
.oubo_gaiyou h4 span::before {
 border-top: 10px solid black;
}
 
.oubo_gaiyou h4 span::after {
 margin-top: -1px;
 border-top: 10px solid white;
}


.oubo_gaiyou h5 {
margin : 0 auto;
text-align: center;
font-size : 1.5rem;
color: var(--base-color);
}

.oubo_gaiyou p{
margin : 0 auto;
padding: 4px;
width: 90%;
font-size : 1rem;
line-height:1.6;
}
.oubo_gaiyou p span{
color : var(--base-color);
}

.oubo_gaiyou img{
width: 100%;
}
.oubo_gaiyou ul{
width: 100%;
margin :0;
padding: 0;
}


.oubo_gaiyou li{
text-align: center;
padding:10px;

}

.oubo_gaiyou li p{
text-align: left;
}


@media print, screen and (min-width: 769px) {
#gaiyou{font-size : 1em;}
.oubo_gaiyou h3 {font-size : 1.5rem;line-height :1.8rem; }
.oubo_gaiyou h4 {font-size : 1.2em;}
.oubo_gaiyou p{font-size : 1.2em;}
.oubo_gaiyou ul{display:flex;}
.oubo_gaiyou li{flex:1;}
.oubo_gaiyou li p{font-size :1em;}
}


.link-bn{
margin : .5em 0 0 0;
padding: 3% 0;
text-align: center;
}


.link-bn a{
text-decoration: none;
color: #000000;
padding:.5rem 1rem;
border-radius: 6px;
background: #FFEB3B;
font-size: 1em;

}

.link-bn a:HOVER{
background:#dcca27;
}

p.small{
margin : 0 auto;
padding: 4px;
line-height:1.6;
color : var(--base-color);
font-size : 1em;
}


/* 締切メッセージ */
.shimekiri{
width: 90%;
margin : 0 5% 1rem 5%;
padding: 1%;
font-size : 1.2em;
color : #e95513;
font-weight:bold;
border:1px solid #e95513;
border-radius: 8px;
text-align: center;
}


/* 作品発表 */
#sakuhin{
width: 100%;
margin : 0;
padding: 2% 0;
overflow: hidden;
text-align: center;
}

#sakuhin h3{
margin : 0;
padding: 1rem 0;
background:var(--main-color);
color:var(--accent-color2);
}

#sakuhin ul{
margin : 0 auto;
padding :0; 
max-width :90%;
}

#sakuhin li{
margin : 0 auto;
padding :40px 0; 
}
@media print, screen and (min-width: 769px) {
#sakuhin ul{display:flex;flex-wrap :wrap;width :100%;}
#sakuhin li{width :50%;}
}

#sakuhin img{max-width :100%;width :auto;}



/* 協賛社 */
#kyousan{
width: 100%;
margin : 0;
padding: 2% 0;
overflow: hidden;
text-align: center;
}
#kyousan h3{
margin : 0;
padding: 6px 0;
background:#e95513;
color:var(--accent-color2);
}

#kyousan ul{
margin : 2% auto;
max-width: 1000px;
padding :0; 
overflow: hidden;
}

#kyousan li{
margin : 0;
text-align : left;
float: left;
}
#kyousan li img{
width :100%;
border: solid 1px #cccccc;
}

@media print, screen and (min-width: 769px) { /* for PC  */
#kyousan{font-size : 1em;}
#kyousan li{width :11.5%;padding :0 .5% .5% .5%; }
}
@media screen and (max-width: 768px) {
#kyousan{font-size : .85em;}
#kyousan ul{margin : 2% 1.5rem;}
#kyousan li{width :22.8%;padding :0 1% .5% 1%; }
}




/* 制作ポイント一覧 */

#point-list{
width: 100%;
margin : 0;
padding: 0 0 2% 0;
overflow: hidden;
text-align: center;
}


#point-list h2{
margin : 0;
padding: 1remx 0;
color:#fff;
background-color: var(--main-color);
}

#point-list ul{
margin : 2% auto;
max-width: 1120px;
padding :0; 
overflow: hidden;
box-sizing:border-box;
}

#point-list li{
margin : 0 auto 16px auto;
padding :.9em; 
text-align : left;
display:inline-block;
box-sizing:border-box;
}

#point-list li img{
border: solid 1px #cccccc;
width :50%;
margin :6px 25%;
}

#point-list li h4{
margin : 1% 0 .5% 0;
padding :0; 
font-size : 1em;
}

#point-list .point-msg{
margin :0;
padding :2% 0; 
font-size : .95em;
line-height : 1.4em;
}

@media print, screen and (min-width: 769px) { /* for PC  */
#point-list ul{display: flex;flex-wrap :wrap;justify-content: flex-start;}
#point-list li{margin :.5rem 1%;width : 48%;border: solid 1px #cccccc;
}
#point-list li img{float: left;width :30%;margin :0 2% 0 0;}
}
@media screen and (max-width: 768px) {
#point-list li{border-bottom: solid 1px #cccccc;}
}


/* コピーライト */

#cr{
padding : 1rem 0;
font-size : 10px;
line-height : 12px;
clear: both;
width :100%;
text-align : center;
background:var(--main-color);
color:var(--accent-color2);
}
