@charset "UTF-8";

/* ===================================================================
CSS Document
file name  :talkevent.css <- talkevent.scss
style info : イベントレポート「現場川柳ナイト」 Style
=================================================================== */

.serif {
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
	font-weight: 600;
}

@media all and (max-width: 480px) {
	.br-pc {
		display: none;
	}
	.bread-c {
			margin: -16% auto 0;
			color: #999;
			padding: 20px 3% 9px;
			position: relative;
			font-size: 1.2rem;
	}
	.bread-c a {
			color: #999;
	}
	header h1 {
			padding: 0 0 37%;
			position: relative;
	}
	header h1 img {
			position: absolute;
			top: 0;
			left: 0;
			width: 170%;
			margin: 0 -31%;
			max-width: initial;
	}
		/* sec common */

	h3 {
		font-size: 5.5vw;
		margin: 0 auto 15px;
		letter-spacing: -1px;
	}
	.sec04 h3,
	.sec05 h3 {
		text-indent: 0;
	}
	h3 .txt01 {
		font-size: 1.4rem;
		padding: 0 0 0 1rem;
	}
	h3 .txt02 {
		font-size: 1.2rem;
		display:  block;
		padding: 0 0 0 1em;
	}
	h3 .txt03 {
		font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
		font-size: 1.3rem;
		padding: 0 0 0 1rem;
	}
	h3 .txt04 {
		font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
		ffont-size: 1.4rem;
		padding: 0 0 0 1rem;
	}
	.main-img {
		background: url(../img/talkevent/bg01.png),#eee;
		width: 100%;
		height: auto;
		text-align: center;
	}
	.inner {
		width: 90%;
		margin: 20px auto 50px;
	}
	.inner img {
		max-width: 60%;
		display: block;
		margin: 0 auto;
		height: auto;
	}
	.inner p{
		margin: 0 0 14px;
		line-height: 1.7;
		font-size: 1.3rem;
	}
	.box-talk {
		width: 100%;
		margin: 20px 0 0;
	}
	.person01 {
		color: #ff8017;
	}
	.person02 {
		color: #a20000;
	}
	.person03 {
		color: #00008d;
	}
	.person04 {
		color: #009400;
	}
	.box {
		width: 100%;
		vertical-align: top;
		margin: 20px auto 0;
	}
	.box img {
		max-width: 100%;
	}
	/* Section01 */
	h2{
		text-align: center;
		width:  90%;
		height:  auto;
		margin: 20px auto;
	}
	.sec01 h3 {
		width: 100%;
		font-size: 1.8rem;
		margin: 20px 0;
		text-indent: 0;
	}
	.sec01 p {
		line-height: 1.9;
	}
	.sec01 .inner {
		width: 95%;
	}
	.sec01 .inner p {
		margin: 0;
	}
	.sec01 .box {
		width: 90%;
	}
	.sec01 .box01 {
		width: 100%;
		border: 1px solid #bfbfbf;	
	}
	.box01 dl {
		width: 90%;
		margin: 0 auto;
		padding: 20px 0;
	}
	.box01 dt {
		white-space: nowrap;
	}
	.box01 dt img{
		width: 28%;
		display:  inline-block;
		margin: 0;
	}
	.box01 dt p {
		padding: 14px 0 0 10px;
		font-size: 1.2rem;
		line-height: 1.4;
		display:  inline-block;
		letter-spacing: -0.3px;
	}	
	.box01 dt p span {
		font-size: 1.8rem;
	}
	.box dd {
		line-height: 1.6;
		margin: 5px 0 0;
		font-size: 1.3rem;
	}
	.box dd.ttl {
		line-height: 1.6;
		margin: 0 0 10px;
		font-size: 1.5rem;
	}


    /* Section02 */
    .sec02 .inner {
 		margin: 0 auto 50px;   	
    }
	.sec02 h4 {
		font-size: 1.8rem;
		margin: 25px 0 10px;
		line-height: 1.5;
	}
	.sec02 .box {
		display:  inline-block;
		width: 48%;
		text-align: center;
	}
	.sec02 .box:last-child {
		margin: 0 0 0 2%;
	}
	  /* Section06 */
	.sec06 {
		margin: 60px 0 0 0;
		}
	.sec06 .box {
		width: 90%;
		display: block;
		margin: 30px auto 10px;
		border: #c50219 solid 1px;
	}
	.sec06 .box .inner {
		width: 90%;
		margin: 0 auto;
	}
	.sec06 h4 {
		font-size: 1.8rem;
		line-height: 1.5;
		margin: 15px 0 14px;
	}
	.sec06 p {
		line-height: 1.7;
	}
   /* box-bnr */
	.box-bnr {
		width: 70%;
		margin:0 auto;
	}
	.box-bnr img{
		margin: 20px 0 0;
	}
}

@media all and (min-width: 481px) {
		/* common */
	.br-sp {
		display: none;
	}
	#wrap {
		min-width: 1308px;
	}
	.bread-c {
			width: 1308px;
			margin: -50px auto 0;
			color: #999;
			padding: 0 0 25px;
			position: relative;
	}
	.bread-c a {
			color: #999;
	}
	header h1 {
			height: 260px;
	}
		/* sec common */
	h3 {
		width: 1010px;
		font-size: 4.2rem;
		line-height: 1.4;
		text-indent: 2.5rem;
		margin: 0 auto;
	}
	.sec04 h3,
	.sec05 h3 {
		text-indent: 0;
	}
	h3 .txt01 {
		font-size: 3rem;
	}
	h3 .txt02 {
		font-size: 1.8rem;
	}
	h3 .txt03 {
		font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
		font-size: 2rem;
		padding: 0 0 0 3rem;
	}
	h3 .txt04 {
		font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
		font-size: 3rem;
		margin: 0 20rem -20px 3rem;
		float: left;
	}
	.main-img {
		background: url(../img/talkevent/bg01.png),#eee;
		width: 100%;
		height: 450px;
		text-align: center;
		margin: 20px 0 0;
	}
	.inner {
		width: 860px;
		margin: 37px auto 55px;
	}
	.inner p{margin: 0 0 13px;line-height: 2;}
	.box-talk {
		display: inline-block;
		width: 527px;
		margin: -10px 0 55px 35px;
	}
	.person01 {
		color: #ff8017;
	}
	.person02 {
		color: #a20000;
	}
	.person03 {
		color: #00008d;
	}
	.person04 {
		color: #009400;
	}
	.box {
		width: 415px;
		display: inline-block;
		vertical-align: top;
		margin: 30px 0 0;	
	}
	/* Section01 */
	h2{
		text-align: center;
	}
	.sec01 h3 {
		width: 100%;
		font-size: 3.2rem;
		margin: 20px 0;
		text-indent: 0;
	}
	.sec01 p {
		line-height: 1.9;
	}
	.sec01 .inner {
		width: 865px;
	}
	.sec01 .inner p {
		margin: 0;
	}
	.box01 {
		border: 1px solid #bfbfbf;	
	}
	.box01 {
		margin: 30px 30px 0 0;
	}
	.box01:nth-child(2n)  {
		margin: 30px 0 0 0;
	}
	.sec01 dl.box:nth-child(2n) {
		margin: 30px 0 0 30px;
	}
	.box01 dl {
		width: 380px;
		margin: 0 auto;
		padding: 10px 0;
	}
	.box01 dt p {
		display: inline-block;
		padding: 48px 0 0 14px;
		font-size: 1.4rem;
		line-height: 1.4;
	}	
	.box01 dt p span {
		font-size: 2.4rem;
	}
	.box dd.ttl {
		line-height: 1.6;
		margin: 0 0 10px;
		font-size: 1.7rem;
	}
	.box dd {
		line-height: 1.6;
		margin:10px 0 0;
		font-size: 90%;
	}	
    /* Section02 */
	.sec02 h4 {
		font-size: 2.7rem;
		margin: 25px 0 30px;
	}
	.sec02 .box:last-child {
		margin: 0 0 0 25px;
	}
	  /* Section04 */
	  .sec04 .box-talk {
	  	margin: -10px 0 40px 35px;
	  }
	  /* Section05 */
	  .sec05 .box-talk {
	  	margin: -10px 0 0 35px;
	  }
	  /* Section06 */
	.sec06 {
		margin: 100px 0 0 0;
		}
	.sec06 .box {
		width: 960px;
		display: block;
		margin: 55px auto 70px;
		border: #c50219 solid 1px;
	}
	.sec06 .box .inner {
		width: 850px;
		margin: 0 auto;
	}
	.sec06 h4 {
		font-size: 3.2rem;
		margin: 35px 0 30px;
	}
	.sec06 p {
		line-height: 2;
	}
   /* box-bnr */
	.box-bnr {
		text-align: center;
	}
	.box-bnr img:first-child {
		margin: 0 40px 0 0;
	}
   /* caution */
	.caution {
		font-size: 1.8rem;
	}
	.caution:before {
		content: url(../img/talkevent/caution_icon.png);
		width: 40px;
		height: 36px;
		position: relative;
		left: -12px;
		bottom: -10px;
	}

}
ul.flex-container{
    display: -webkit-flex;
    display: flex;
    width:1000px;height:auto;
    align-items: stretch;
    justify-content:flex-start;
    flex-wrap: wrap;
}
ul.flex-container li{
    display: flex;
}
@media all and (max-width: 480px) {
ul.flex-container{
    width:100%;
}
}
.box dd.ttl p{
    border-left-color: #c50219;
    border-left-width: 3px;
    border-left-style: solid;
    line-height: 1.4 !important;
}
.box dd.ttl p span{
	padding-left: 10px;
}
.sign-board{width: 350px;
margin: 20px 0 20px 0;}

ul.flex-comment{
    display: -webkit-flex;
    display: flex;
    width:1000px;height:auto;
    align-items: stretch;
    justify-content:flex-start;
    flex-wrap: wrap;
}
ul.flex-comment li{
    display: -webkit-flex;
    display: flex;
    width:48%;
    flex-wrap: wrap;
}
ul.flex-comment li img{
    width: 350px;
}
ul.flex-comment li:last-child{
    margin-left: 20px;
}

@media all and (max-width: 480px) {
.sign-board{width: 100%;}
ul.flex-comment{
    width:100%;
}
ul.flex-comment li img{
    width: 100%;
}
ul.flex-comment li{
    width: 100%;
}
ul.flex-comment li:last-child{
    margin-left: 0px;
}
}