@charset "utf-8";


@import url("fontawesome-4.4.0.min.css");
@import url("framework.css");
@import url("navi.css");


/* Rows
--------------------------------------------------------------------------------------------------------------- */
.row0, .row0 a{}
.row1{background-image:url('../img/main_back.png'); background-size: cover;scroll-behavior: smooth;}
.row1 a{}
.row2, .row2 a{}
.row3{position:relative;} .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}


/* Header
--------------------------------------------------------------------------------------------------------------- */
header{margin:0;}

#header{padding:20px 0 0 0; margin:0 auto 20px auto; max-width:1200px;}

#header #main{position:relative;}

#header .logo{float:left; width:32%; text-align:left;}
#header .main_navi{float:right; width:64%;}

#header #main_visual01{position: relative; left:70px; bottom:0;}
#header #main_visual02{position: absolute; left:0; top:0px;}
#header #main_visual03{position: absolute; right:0; top:0px;}

#header #main_text{padding:0; position: absolute; width:45%; right:0; bottom:40px; text-align: left;}

#page_title h2{position: relative; padding: 30px 0; background-image:url('../img/title_backimg.gif'); background-size: cover;scroll-behavior: smooth;}
#page_title h2:after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 7px; background: repeating-linear-gradient(-45deg, black, black 2px, white 2px, white 4px);}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.container{padding:70px 0px;}

/* Content */
.container .content{}

.sectiontitle{display:block; max-width:55%; margin:0 auto 80px; text-align:center;}
.sectiontitle *{margin:0;}

#index_policy{position: absolute; right:0; bottom:0px;}


#judge img, #theme img, #result img{ border:solid 8px #EE87B4;}

#t_list{}


.title-box1{margin: 1em 0; padding:20px; position: relative; border: 4px solid #E7E8E9;}

.title-box1-title{
  position: absolute;
  top: -0.8em;
  left: 45%;
  font-weight: bold;
  font-size: 1.4em;
  background: #fff;
  padding: 0 15px;
}
.title-box1 div{margin: 0; padding:0 10px;}

.faq {
  margin-bottom: 50px; /* 各Q&Aの下に余白 */
}

.faq__dt, .faq__dd {
  position: relative;
  padding-left: 24px;
}
dd.faq__dd {
    margin-inline-start: 5px;
}

.faq__dt::before, .faq__dd::before {
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.faq__dt {
  font-weight: bold; /* 質問文は太字にしてみました */
  border-bottom: 1px dotted #999;
  margin-bottom: 8px; /* 下にちょい余白 */
  font-size:1.2rem;
  padding-bottom: 5px;
}

.faq__dt::before {
  content: 'Q.';
  color: #c80021; /* 「Q」の文字色 */
}

.faq__dd::before {
  content: 'A.';
  color: #0085C8; /* 「A」の文字色 */
}





/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:50px 20px 40px 20px;}

#footer .logo{margin-bottom:30px; font-size:2.5rem; color:#000;}

#footer .text01{font-size:1rem; color:#000;}
#footer .text02{font-size:2rem; color:#000; line-height:1.8;}



/* Copyright
--------------------------------------------------------------------------------------------------------------- */
#copyright{padding:0 0 30px 0; font-size:1rem;}
#copyright *{margin:0; padding:0;}


/* Transition Fade
This gives a smooth transition to "ALL" elements used in the layout - other than the navigation form used in mobile devices
If you don't want it to fade all elements, you have to list the ones you want to be faded individually
Delete it completely to stop fading
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}


/* Back to Top */
#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:20px; right:20px; width:50px; height:50px; line-height:48px; font-size:18px; text-align:center; opacity:.2; border-radius:50%;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit;}
#backtotop.visible{visibility:visible; opacity:.5;}
#backtotop:hover{opacity:1;}


/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:none; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border:none ;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%; margin-bottom:50px;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}


/* Font Awesome Social Icons
--------------------------------------------------------------------------------------------------------------- */
.faico{margin:0; padding:0; list-style:none;}
.faico li{display:inline-block; margin:8px 5px 0 0; padding:0; line-height:normal;}
.faico li:last-child{margin-right:0;}
.faico a{display:inline-block; width:36px; height:36px; line-height:36px; font-size:18px; text-align:center;}

.faico a{color:#FFFFFF; background-color:#2A2D34;}
.faico a:hover{}

.faicon-dribble:hover{background-color:#EA4C89;}
.faicon-facebook:hover{background-color:#3B5998;}
.faicon-google-plus:hover{background-color:#DB4A39;}
.faicon-linkedin:hover{background-color:#0E76A8;}
.faicon-twitter:hover{background-color:#00ACEE;}
.faicon-vk:hover{background-color:#4E658E;}


/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */

/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#000;}
a{color: #F90; text-decoration:none;}
a:hover{color: #F90; text-decoration:underline;}
/* a:active, a:focus{background:transparent;} IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#95103B;}

.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.40);}
.overlay.light{color:#474747;}
.overlay.light::after{background-color:rgba(255,255,255,.7);}



.imgover:hover::before{background:rgba(0,0,0,.55);}
.imgover, .imgover:hover::after{color:#95103B;}


/* Rows */
.row0{color:#474747;}
.row1, .row1 a{color:#FFFFFF; background-color: #fff;}
.row2{color:#000;}
.row3{background-color: #FFEEF4;}
.row4{}
.row5, .row5 a{color:#000; background-color: #F0F0F0;}

.gradient{color:#FFFFFF; background:linear-gradient(to bottom right, #8F9297, #C1C2C4);}


/* Header */
#header #logo h1::before{background-color:#474747;}
#header #logo h1::after{background-color:#95103B;}
#header #logo h1 a{color:inherit;}
#header #logo h1 span{color:#95103B;}




/* Page Intro */
#pageintro{color:#FFFFFF;}


/* Content Area */

.overview a{color:inherit;}
.overview article:hover a{color:#95103B;}


/* Latest */
#latest article .excerpt{color:inherit; background-color:#FFFFFF; border-color:rgba(0,0,0,.2);}


/* Footer */
#footer .heading{color:#FFFFFF;}
#footer hr, #footer .borderedbox, #footer .linklist li{border-color:rgba(255,255,255,.1);}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#474747; background-color:#C1C2C4;}
#footer input:focus{border-color:#95103B;}
#footer button{color:#FFFFFF; background-color:#95103B;}

#backtotop{color: #FF0; background-color: #0CF;}



/* Navigation */
#breadcrumb{background-color:inherit; font-size:0.95rem;}
#breadcrumb li:last-child a{}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#95103B;}



/* ------------------------------------------------------------------------------------------------------------ */
/*========= モーダル表示のためのCSS ===============*/

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
  display: none;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
  background:#ccc;  
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
  background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
  font-size:1.2rem;
  text-align: center;
  margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
  padding:0;
}

/*以下はコンテンツ内のレイアウト*/
.info-list dl,
.gallery-list{
  display: flex;
}

.info-list dt{
  margin:0 10px 0 0;
}

.gallery-list li{
  margin:0 10px 0 0;
}




#newsframe{
	border: none !important;
}

#infobox{
	width:82%;
	height:350px;
	overflow: hidden;
	margin:auto;
	padding-left: 10px;
	padding-right: 10px;
}

.infoin{
	width:95%;
	height: auto;
	border-bottom:dashed 1px #CCC;
	padding: 10px 0;
	font-size:14px;
	font-family: 'Noto Sans JP';
	overflow:hidden;
}

.infol{
	float: left;
	width: 20%;
	color:#FF3333;
	padding-right:20px;
	height: auto;
	vertical-align: top;
}

.infor{
	float:right;
	height: auto;
	width: 75%;
	vertical-align: top;
}

@media screen and (max-width:750px){
#infobox{
	width:96%;
	height:350px;
}

.infoin{
	width:95%;
}

.infol{
	width: 100%;
	color:#FF3333;
	padding-right:0px;
	height: auto;
	vertical-align: top;
}

.infor{
	width: 100%;
	padding-left:10%
}
}

/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------ */


/* Media Queries
--------------------------------------------------------------------------------------------------------------- */
@-ms-viewport{width:device-width;}


/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:1050px){
	.hoc{max-width:1050px;}
}

@media screen and (min-width:1050px) and (max-width:1049px){
	.hoc{max-width:95%;}
	#header{padding:20px 0 0 0;}
	
}


/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:1049px){
	.hoc{max-width:96%;}

	#header{padding:10px 0;}
	#header .logo{float:left; width:50%; padding:0 0 0 20px;}
	
	#header #main{max-width:96%; margin:0 auto;}

	#header #main_visual01{top:0px; left:0px;}
	#header #main_visual02{max-width:28%; left:auto; top:0px; right:10px;}
	#header #main_visual03{max-width:50%; left:10px; top:500px; right: auto;}
	
	#header #main_text{padding: 30px 10px 0 10px; position: relative; width:100%; right:0; bottom:40px; text-align: left;}


	#breadcrumb{}

	.container{padding:60px 30px;}
	
	#index_policy{position: relative; right:0; bottom:0px;}

	.width30_pc, .width40_pc, .width50_pc, .width85_pc, .width70_pc{max-width:100%;}
	.width10_pc{max-width:20%;}
	
	.pc{display:none;}
	.sp{display:block;}

	.wrapper{display:block; position:relative; max-width:96%; margin:auto; padding:0; text-align:left; word-wrap:break-word;}

	.container{}


	#footer{}
	#footer .logo{margin-bottom:30px; font-size:2.2rem;}

	#copyright{}
	#copyright p:first-of-type{margin-bottom:10px;}
}

@media screen and (max-width:750px){
	.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
	.fl_left, .fl_right{display:block; float:none;}
	/*.group .group > *:last-child, .clear .clear > *:last-child, .clear .group > *:last-child, .group .clear > *:last-child{margin-bottom:0;} Experimental - Needs more testing in different situations, stops double margin when stacking */
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter, .one_fifth{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

	.work_box{background-color:#FFF; padding: 15px;}
	.work_box .one_quarter{display:inline-block; width:47%; float:left; margin:0 0 10% 2%; list-style:none;}

	#news .one_third{margin:0 0 10px 0;}
	#judge .one_third, #theme .one_third{margin:0 0 100px 0;}
	#judge .one_third:last-child, #theme .one_third:last-child{margin:0 0 0px 0;}

	.t_list .one_quarter:nth-child(odd){float:left; width:48%; margin:0 0 20px 0;}
	.t_list .one_quarter:nth-child(even){float:right; width:48%; margin:0 0 20px 0;}

	#theme br{display:none;}


	#header{padding:20px 0 0 0;}
	

	.container{padding:30px 5px;}

	#mainav{float:none; width:100%; padding:15px 0;}
	#searchform{display:none;}

	.sectiontitle{max-width:none;}

	.title-box1{padding:20px 10px;}
	.title-box1-title{left: 35%;}

	.font-x2{font-size:1.3rem;}
	.font-x3{font-size:1.6rem;}

	.pc{display:none;}
	.sp{display:block;}

	.width10_pc{max-width:40%;}

	#latest article{max-width:348px;}/* Change it to suit your needs - default is the one_third grid width */

	#backtotop{z-index:999; display:inline-block; position:fixed; visibility:hidden; bottom:10px; right:10px; font-size:16px;}


	#footer{padding:30px 0px;}/* Not required, just looks a little better */
	
	#footer .logo{ width: 70%; margin:0 auto 30px auto; font-size:1.9rem; color:#FF0;}
	#footer .text01{font-size:0.7rem; color:#000; margin:0 0 10px 0;}
	#footer .text02{font-size:2.1rem; color:#000;}
	
	#copyright{padding:0 0 40px 0; font-size:0.8rem;}
	
}


/* Other
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:480px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}
	
	#header #main_visual01{top:0px; left:0px;}
	#header #main_visual02{max-width:28%; left:10px; top:0px;}
	#header #main_visual03{max-width:50%; left:10px; top:280px; right: auto;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.3rem;}
	.font-x3{font-size:1.6rem;}
}