@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
@charset "utf-8";
/* reset
==================================*/
  html, body, div, span, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	abbr, address, cite, code,
	del, dfn, em, img, ins, kbd, q, samp,
	small, strong, sub, sup, var,
	b, i,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, figcaption, figure,
	footer, header, hgroup, menu, nav, section, summary,
	time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	}
	body,form,fieldset {
		margin: 0;
		padding:0;
	  -webkit-text-size-adjust: none;
	}
	fieldset {
		border:none;
	}
	blockquote,li,dt,dd {
		margin:0;
		padding:0;
	}
	li {
		list-style:none;
	}
	input,textarea {
		font-size:1em;
	}
	img {
		margin:0px;
		padding:0px;
		border: 0px;
		vertical-align:bottom;
	}
	table {
	  border-collapse:collapse;
	}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* font
==================================*/

html {
	color:#000;
	background-color:#fff;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 500;
  font-size:16px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings : "palt";
}
a{text-decoration: none;}
a:hover{opacity: .75;}
/*==========================================
/* base
==================================*/
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, li, ol, dl, dd, tr {}
img{display: block;margin:auto; text-align: center;padding:0; width: 100%;}
/*==========================================
/* common
==================================*/
.container{margin:0 auto; text-align: center; display: block;}
/*==========================================
/* header
==================================*/
.header{ margin:2.2% auto auto; text-align: center; display: block;width: 100%;}
.header .title{ font-size: 2.0em; padding:20px 0; display: block;position: relative; color: #005bac; font-weight: bold; margin:-70px 0 0 0;}
.header h1{display: block;width: 100%;margin:1% auto 1.6% auto;color: #005bac;font-weight: bold;font-size: 3.58em;line-height: 1;letter-spacing: 0;}
.header h1.logo{}
.header h3{color: #005bac;font-size: 38px;display: block;font-weight: bold;margin:auto;letter-spacing: 2px;}
.header .header_smart{ width: 800px;display: block; margin:auto; text-align: right; position: relative; display: table;}
.header .header_smart img{width: 137px;text-align: right;margin: 20px 0 0 0;display: table; float: right;}

/*==========================================
/* episode_box
==================================*/
.episode_wrap{
  background-color: #eff4ff;
  padding:4% 0 5% 0;
  margin:auto;
  display: block;
}
.page{
  background-color: #fff;
  width: 920px;padding:20px 0;margin:20px auto 40px auto;text-align: left;font-size: 14px;
  border-radius: 5px;
  display: block;
}
.episode_box{
  padding:20px;
  overflow-y: scroll;max-height: 1450px;
}
h2{ font-size: 35px; font-weight: bold; margin:0 auto 3% auto; line-height: 1.3; padding:0; display: block; }
.episode_box .item{
  display: table;
  width: 100%;
  margin:20px auto;
  background-image: url(../images/person_1.png);
  background-repeat: no-repeat;
  background-size: 60px;
  background-position: right bottom;
}

.episode_box .item .box{
  border: 1px solid;
  border-color: rgba(0,0,0,0.75);
  border-radius: 3px;
  display: flex;
  background-color: #fff;
  width: 90%;
  float: left;
}

.episode_box .item .episode_icon{
  background-image: url(../images/vc_arrow.png);
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: 100% 90%;
  display: table;
  z-index: 2;
  margin-left: 0px;
  float: right;
  width: 100%;
  position: relative;
  right: -17px;
}
.episode_box .item .episode_icon pre{
  padding:20px;
  margin-left: -18px;
  margin-right: 18px;
  word-break: break-all;
  white-space: pre;           /* CSS 2.0 */
  white-space: pre-wrap;      /* CSS 2.1 */
  white-space: pre-line;      /* CSS 3.0 */
  white-space: -pre-wrap;     /* Opera 4-6 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap;  /* HP Printers */
  word-wrap: break-word;      /* IE 5+ */
  color: #111;
  font-weight: normal;
  font-family: Noto Sans Japanese, "Noto Sans Japanese", NotoSansCJKjp, "NotoSansCJKjp", notosansjapanese, "notosansjapanese", "Noto Sans", "Noto Sans CJK JP", sans-serif;

}

.episode_box .item:nth-child(2n+2){
  background-position: left bottom;
}
.episode_box .item:nth-child(2n+2) .box{
  float: right;
}
.episode_box .item:nth-child(2n+2) .episode_icon{
  background-image: url(../images/vc_arrow_left.png);
  background-position: 0 90%;
  float: left;
  margin: auto auto auto -36px;
}
.episode_box .item:nth-child(2n+2) .episode_icon pre{
    margin-left: 36px;
    width: 96%;
    padding: 20px 0;
}


@media (max-width:767px) {
  .container{ margin-bottom: 0; }

  .header{margin:auto 3%; width: auto;}
  .header .title{padding-bottom: 5px; font-size: 100%; margin:auto;}
  .header .title span.w_change{display: block; font-size: 130%;}
  .header h1.logo{ max-width: 80%; padding:25px 0 0 0; }
  .header .header_smart{width: 92%;}
  .header .header_smart img{width: 28%;position: relative;text-align: right;margin: 8% auto auto auto;float: none;}
  .header h1 {display: block;width: 90%;margin: 1% auto 4.6% auto;color: #005bac;font-weight: bold;font-size: 180%;line-height: 1.2;letter-spacing: 0;}
  h2{font-size: 150%;margin:10% auto 6% auto;letter-spacing: 2px;}
  .header h3{font-size: 140%;margin:1% auto 3% auto;letter-spacing: 1px; line-height: 1.2;}
  pre{font-size: 80%;}


  .page{
    width: 90%;
    padding:20px 15px;margin:10px auto 20px auto;text-align: left;font-size: 14px;
    border-radius: 5px;
    display: block;
  }



  .episode_wrap{padding-bottom: 10%;}
  .episode_box{
    padding:20px;
    overflow-y: scroll;
    max-height: 1150px;
  }

  .episode_box{width: 100%; margin:auto; padding:0; max-height: 1150px;}
  .episode_box .item{background-size: 12%;}
  .episode_box .item .box{width: 82%;}
  .episode_box .item .episode_icon pre{
    width: 95%;
    padding:10px 0% 10px 0%;
    margin-left: -5%;
  }
  .episode_box .item:nth-child(2n+2) .episode_icon pre{
    width: 95%;
    padding:10px 0% 10px 3%;
    margin-left: 8%;
  }
  .episode_box .item .episode_icon{
    margin-left: -1px;
    right: -19px;
  }
  .episode_box .item .episode_icon pre{
    font-size: 70%;

  }
  .episode_box .item:nth-child(2n+2) .episode_icon{
    margin-left: -37px;
  }
}

/*==========================================
/* pagination_box
==================================*/
.pagination_box{
  margin:auto;
  text-align: center;
  display: block;
}
.pagination { margin:auto !important; padding:0; height:2.5em; text-align: center !important; display: block;width: 100%; }
.pagination a { text-decoration:none;  color:#005bac; }
.pagination a, .pagination span { font-weight:bold; display:inline-table; margin:0 5px 0 0; padding:.3em .5em; }
.pagination .current { background:#005bac; color:#fff;  }
.pagination .current.prev, .pagination .current.next { color:#999; background: transparent; }

/*==========================================
/* button
==================================*/
.button{
  margin:5% auto;
  display: block;
}
.button a{
  background-color: #005bac;
  margin:auto auto 35px auto;
  max-width:450px;
  color: #fff;
  display: block;
  font-size: 30px;
  line-height: 1;
  padding:20px 0;
  box-shadow:3px 5px 5px 0px rgba(0, 0, 0, 0.2);
  vertical-align: middle;
}
.button a .arrow {border: solid #fff;border-width: 0 3px 3px 0;display: inline-block;padding: 10px; margin-top:-20px;margin-left: 10px;}
.button a .right {transform: rotate(-225deg);-webkit-transform: rotate(-225deg);}
/*==========================================
/* page_top
==================================*/

#page_top {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 9999999999;
}
#page_top a {
    background-color: #005bac;
    color: #fff;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    display: block;
    margin:auto;
    border-radius:20px;
    font-size: 18px;
    line-height: 1.4;
}
#page_top a:hover {
    text-decoration: none;
}
#page_top .fas{
  display: block;
  font-size: 80px;
  margin:0 auto;
  padding:0;
  line-height: .5;
}

br.sp{display: none;}
br.pc{display: block;}
@media (max-width:767px) {
  .button{
    margin:7% auto 5% auto;
    display: block;
  }
  .button a{
    background-color: #005bac;
    margin:auto auto 35px auto;
    max-width:90%;
    color: #fff;
    display: block;
    font-size: 130%;
    line-height: 1;
    padding:20px 0;
    box-shadow:3px 5px 5px 0px rgba(0, 0, 0, 0.2);
    vertical-align: middle;
  }
  .button a .arrow{ padding:6px; }
  #page_top a{font-size: 80%; border-radius: 10px; padding:5px 10px;}
  #page_top .fas{font-size: 300%;}
  br.sp{display: block;}
  br.pc{display: none;}
}