@charset "utf-8";
/* mod_body
-----------------------------------------*/



.headline{
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em 0;
  padding: 15px 10px;
  min-width: 100%;
  max-width: 100%;
  color: #0099CC;
  text-align:center;
  font-size: 24px;
  line-height:140%;
  background: #FFF;
  border: solid 2px #0099CC;
  box-sizing: border-box;
}

.headline:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

.headline:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #0099CC;
  z-index: 1;
}

.headline p {
	margin: 0;
	padding: 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
z-index:999;
}
.Opening ul li{
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.Opening ul li img.Opening_text{
  position: absolute;
  top:45%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening_img{
  max-width: inherit;
  width: 100%;
  height: auto;
}




.dropdown {
  display: block;
  position: relative;
  overflow: hidden;
  height: 50px;
  width: 100%;
  background: #FFF;
  border: 2px solid;
  border-color: #CCC;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888 transparent;
  pointer-events: none;
}
.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}
.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}
.dropdown > a {
    color: #222;
    font-size: 17px;
    font-weight: bold;
    text-decoration: none;
    height: 50px;
    line-height: 48px;
    padding: 0 15px;
    display: block;
    text-align: left;
    overflow: hidden;
}

.remodal ul {
    padding: 30px;
    font-size: 0;
}
.remodal ul li {
    background: #FFF;
    color: #222;
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    padding: 20px 20px 20px 38px;
    margin-bottom: 1px;
    position: relative;
    width: 20%;
	height:100%;
    vertical-align: top;
}
.remodal ul li:hover {
    background: #CCC;
}
.remodal ul li:nth-child(odd) {
    border-right: 1px solid #fff;
}
.remodal ul li::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -4px;
    left: 12px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #FF3300;
    border-right: 2px solid #FF3300;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.submit_btn{
    border: 0px solid #DDD;
    width:55px;
    height:55px;
    background: url(../img/submit.png) left top no-repeat;
}
 
.submit_btn:hover{
    cursor: pointer;
    width:55px;
    height:55px;
    background: url(../img/submit_on.png) left top no-repeat;
}


.wrap{
	overflow: hidden;
	width: 960px;
	margin: 35px auto;
}
.main{
	float: left;
	width: 640px;
}

.thread{
	width: 100%;
	overflow: hidden;
	margin: 2% auto;
}

.thread_contents{
	
	width:640px;
	margin:20px auto;
}

.form_contents{
	
	width:640px;
	margin:20px auto;
}

.side-menu{
	float: right;
	width: 300px;
	padding:10px;
}

#page-top{
	width:100%;
	/*display:none; */
	position:fixed;
	left:0;
	bottom:0;
	z-index:99998 !important;
	background:rgba(0,0,0,0.4);
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
	padding:10px 0%;
	text-align:center;
	
}

.record_line{
	text-align:left;
	vertical-align:top;
	line-height: 140%;
	padding:0 0 10px 0;
	margin : 0 0 10px 0 ;
	border-width: 0 0 1px 0;
	border-style: dotted;
	border-color: #888;
}

.list-main{
	float: left;
	width: 70%;
	padding:.4em 1em;
	text-align:left;
	vertical-align:top;
	font-size:100%;
	line-height: 160%;
}
.list-image{
	float: right;
	width: 30%;
}
.list-image img{
	
	width:90%; height:180px; object-fit: cover; margin:10px;
}

.img-flex img {

	margin-bottom: 20px;
	display: inline-block;
 	width: 100%;
	 
}

table.koza_detail{width:100%;border:1px #AAA solid;border-collapse:collapse;border-spacing:0;margin-top:1%}
table.koza_detail th{padding:10px;border:1px #AAA solid;border-width:0 1px 1px 1px;font-weight:bold;line-height:120%;text-align:center;}
table.koza_detail td#column{padding:10px;border:1px #AAA solid;border-width:0 0 1px 1px;text-align:center;width:25%}
table.koza_detail td{padding:10px;border:1px #AAA solid;border-width:0 0 1px 1px; background-color:#FFF;}
	
.balloon{
  position: relative;
  padding:5px 10px;
  background-color: #FF9900;
  display: inline-block;     /* 横幅を自動で変更 */
}

.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -10px;
  border-top: 10px solid #FF9900;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.balloon:hover{
  opacity: .75;
}


.ak-header{
	width:80%; 
	text-align:left; 
	font-size:100%;
	line-height:120%;
	margin:20px auto;
	
	padding: 0 1em;
	max-width: 780px;
	
}

.ak-header h1{
 font-size:180%;
 line-height:120%;
 margin:8px 0;
 font-weight:bold;
}

.ak-header div.catch{
 color:#336699;
 margin:8px 0;
}

 figure {
  margin:10px;
  text-align: left;
  
}
 
figcaption {
  font-size: 14px;
  font-weight:normal;
  line-height:110%;
  background-color: #DDD;
  padding:1em .4em;
  margin: 0 0 1em 0;
}
 
.sentence{
	 
	 font-size:100%;
	 line-height:160%;
	 text-align:left;
	 
 }


.jirei{
	
	border:3px #CCC solid; 
	margin:2% 1%; 
	padding:1% 2%; 
	width:30%; 
	display:inline-block;
	
}

img.voice_icon{
	float:left; margin:0 10px;
}
.voice_title{
font-size:120%; font-weight:bold; line-height:110%; margin:5px 0;
}

.voice_line{
border-width:0 0 1px 0; border-style:solid; border-color:#CCC;margin:10px;
}

.voice_comment{
font-size:100%; line-height:120%; margin:1em ;
}

.work-title{
	
	font-size:26px; color:#006699; font-weight:300; line-height:120%; margin:1em auto;
}

.work-sentence{
	
	font-size:14px; font-weight:normal; line-height:160%; margin:1em auto 2em auto;
}

.work-select{
		display:inline-block; width:49%; margin-left:.3%; margin-bottom:2%; position: relative; vertical-align:top;
	}
	


.work-select p {
  position: absolute;
  top: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: #FFF;/*文字を白に*/
  background:#0099CC;/*背景色*/
  font-size: 15px;
  line-height: 1;/*行高は1に*/
  padding: 5px 10px;/*文字周りの余白*/
  }

.work-select img {
  width:100%; height:100%; max-height:150px; object-fit:cover; border:2px #0099CC solid;
}


.work-main{
		display:inline-block; width:24%; margin-left:.3%;
	}
	
.work-image{
		height: 140px; object-fit: cover;
	}
	


@media screen and (max-width: 767px) {
	
.jirei{
	
	width:94%; 
	margin:2% 3%;
	padding:5% 4%;
	
}

 figure {
  margin:10px ;
  
}
 
figcaption {
  font-size: 12px;
  line-height:120%;
  padding:1 .4em;
  margin: 0 0 1em 0;
}


}

div.pc_img { display: block;!important; margin:0;}
div.m_img { display:none;}

/* スマホ　767px以下 */
@media only screen and (max-width: 976px) {
	

.Opening ul li img.Opening_text{
  top:25%;
  left: 50%;
}

	.remodal ul {
        padding: 20px;
    }
    .remodal ul li {
        width: 33.3%;
    }
    .remodal ul li:nth-child(odd) {
        border-right: none;
    }
	
	.wrap{
		width: 100%;
	}
	.main{
		float: none;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
	.side-menu{
		/*　floatを解除 */
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.thread{
		width: 100%;
	}
	

	.thread_contents{
	
		float: none;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
		
	}

	.form_contents{
	
		float: none;
		width: 96%;
		margin-left: 2%;
		margin-right: 2%;
		margin-bottom: 30px;
		
	}

	.list-main{
		float: none;
		width: 100%;
	}
	.list-image{
		float: none;
		width: 100%;
	}
	
	.list-image img{
	
	width:85%; height:280px; object-fit: cover; margin:10px;
}

	
	.img-flex img {

	margin-bottom: 20px;
	vertical-align:top;
	display: inline-block;
 	width: 32%;
	 
	}
	


	
	
	
}


@media screen and (max-width: 480px) {
	
div.pc_img { display:none;}
div.m_img { display: block;!important; margin:0;}

.headline{
  font-size: 16px;
  line-height:110%;
}

.remodal ul li {
        width: 100%;
    }

.dropdown {
  height: 50px;
  width: 100%;
}
.dropdown > a {
    font-size: 12px;
    height: 50px;
    line-height: 42px;
	padding: 0 5px;
}

#page-top{
	width:100%;
	/*display:none; */
	position:fixed;
	bottom:0;
	z-index:99998 !important;
	background:rgba(0,0,0,0.4);
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	transition:all 0.3s;
	color:#fff;
	padding:10px 0%;
	text-align:center;
	
}

.list-image img{
	
	width:90%; height:280px; object-fit: cover; margin:10px;
}

.img-flex img {

	margin-bottom: 20px;
	vertical-align:top;
	display: inline-block;
 	width: 100%;
	 
	}

.ak-header{
	width:90%; 
	text-align:left; 
	font-size:100%;
	line-height:110%; 
	margin:5%;
	padding: 0;
}

.ak-header h1{
 font-size:120%;
 line-height:110%; 
 display:block;
 font-weight:bold;
}

 figure {
  margin:10px ;
  
}
 
figcaption {
  font-size: 12px;
  line-height:120%;
  padding:1 .4em;
  margin: 0 0 1em 0;
}
 
.sentence{
	 
	 font-size:100%;
	 line-height:160%;
	 text-align:left;
	 margin:0;
	 
 }
 
 img.voice_icon{
	float:left; margin:0 5px;
}
.voice_title{
font-size:100%;line-height:140%; margin:5px 0;
}

.voice_line{
border-width:0 0 1px 0; border-style:solid; border-color:#CCC;margin:5px;
}

.voice_comment{
font-size:85%; line-height:140%; margin:.5em ;
}


.work-title{
	
	font-size:18px; font-weight:300; line-height:120%; margin:1em auto;
}

.work-sentence{
	
	font-size:14px; font-weight:normal; line-height:160%; margin:1em auto 2em auto;
}

.work-select{
		display:inline-block; width:96%; margin:0 2% 2% 2%; vertical-align:top;
	}


.work-main{
		display:inline-block; width:31%; margin-left:.5%;
	}
	
.work-image{
		height: 100px; object-fit: cover;
	}
	

}