@charset "UTF-8";
/* ===============================================================================
Reset
=============================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

ol, ul {
  list-style: none;
}
a{
	text-decoration: none;
}

/* ===============================================================================
Body Setting
=============================================================================== */
html{
	font-size: 62.5%;
}
body {
  font-family: YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-size: 1.6rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: 1.88;
  letter-spacing: .1rem;
}
@media screen and (max-width: 640px) {
	body {
		font-size: 1.6rem;
		line-height: 1.625;
	}
}

a {
  color: #0084D5;
  text-decoration: none;
}
a:hover{
	opacity: .5;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
a[target=_blank]:after {
    font-family: "Hobonichi-Icons";
    content: "\e914";
    font-weight: normal;
    font-size: .8em;
    position: relative;
    top: -.2em;
}
img {
  vertical-align: top;
  max-width: 100%;
}
.spOnly {
	display: none;
}
.hoverOp:hover{
	opacity: .5;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
.small{
	font-size: 1.2rem;
 }
@media screen and (max-width: 640px) {
  .pcOnly {
    display: none !important;
  }
  .spOnly{
	display: block;
  }
}

/* ===============================================================================
HeaderArea
=============================================================================== */
.top{
	max-width: 1120px;
	margin: 0 auto;
    padding: 0 40px;	
}
.header ul{
	display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 0;
    padding-top: 50px;
}
.header ul li{
	padding: 0 10px;
}
.header ul li:last-of-type{
	padding-right: 0;
}
.yodogawa{
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
	padding: 120px 0;
}
.yodogawa .inner{
	display: flex;
	justify-content: center;
	align-items: center;
}
.yodogawa .text{
    font-size: 1.8rem;
	font-weight: bold;
    line-height: 2;
}
.yodogawa .prof{
	padding: 80px 0 0;
}
.yodogawa #prof_btn{
	width: 17em;
    font-size: 2.1rem;
    color: #FFFFFF;
    font-weight: bold;
    background-color: #46B2FF;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    margin: 0 auto;
}
.yodogawa #prof_btn span{
	font-size: 75%;
}
.yodogawa #prof_btn:hover{
	opacity: .5;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
.yodogawa #prof_btn:after{
	content: " ∨"
	
}
.yodogawa #prof_btn.open:after{
	content: " ∧"
	
}
.yodogawa .prof h2{
	font-size: 2.4rem;
	font-weight: bold;
	margin: 30px 0;
}
.yodogawa .prof h2 span{
	display: block;
    font-size: 50%;
	font-weight: normal;
    line-height: 0;
	text-indent: .2em;
}
.yodogawa .prof_contents{
	display: none;
	font-size: 1.6rem;
	padding: 50px 0 0 200px;
	position: relative;
}
.yodogawa .prof_contents div{
	width: 32em;
    margin: 0 auto;
    padding-left: 11em;
}
.yodogawa .prof_contents .image{
	position: absolute;
    left: calc((100% - 500px)/2);
    top: 50px;
	z-index: -1;
	-webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
	.yodogawa .prof_contents div{
		width: auto;
	}
	.yodogawa #prof_btn:hover{
		opacity: 1;
	}
}
@media screen and (max-width: 640px) {
	.top{
		width: 100%;
		padding: 0;
	}
	.header ul{
		padding: 10px 0 20px;
	}
	.header ul li{
		padding: 0 10px 0 0;
	}
	.header .home img{
		width: 111px;
	}
	.mainVisual h1{
		text-align: center;
	}
	.mainVisual img{
		width: 87.5%;
	}
	.yodogawa{
		padding: 30px 0;
	}
	.yodogawa .prof{
		padding: 20px 0 0;
	}
	.yodogawa #prof_btn{
		font-size: 1.6rem;
	}
	.yodogawa .text {
		padding: 0 20px 0;
		font-size: 1.6rem;
		letter-spacing: 1px;
	}
	.yodogawa #prof{
		padding-bottom: 20px;
	}
	.yodogawa .prof h2{
		margin: 30px 0 10px;
		text-align: center;
	}
	.yodogawa .prof_contents{
		padding: 30px 6.25% 0;
	}
	.yodogawa .prof_contents div{
		padding-left: 0;
		width: 100%;
	}
	.yodogawa .prof_contents .image{
		position: relative;
		top: 0;
		left: 0;
		transform: translateX(0);
	}
}
/* ===============================================================================
listBlock
=============================================================================== */
.listBlock01{
	max-width: 1000px;
    margin: 0 auto;
	text-align: center;
}
.listBlock01 .ttl_index{
	font-size: 2.4rem;
    font-weight: bold;
	border-top: #E5E5E5 solid 2px;
	border-bottom: #E5E5E5 solid 2px;
	padding: 30px 0;
}
.listBlock01 ul li{
	padding: 60px 0;
	border-bottom: #E5E5E5 solid 2px;
}
.listBlock01 ul li a{
	display: block;
}
.listBlock01 li a.publish:hover{
	opacity: .5;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all  0.5s ease;
}
.listBlock01 li a.private img{
	opacity: .5;
}
.listBlock01 li a.private:hover{
	opacity: 1;
}
@media screen and (max-width: 640px) {
	.listBlock01{
		width: 87.5%;
	}
	.listBlock01 img{
		width: auto;
		height: 77px;
	}
	.listBlock01 ul li {
		padding: 25px 0;
	}
	.navBlock01 ul li img {
		height: 90px !important;
	}
	.listBlock01 .title img {
		width: 100%;
	}
}
/* ===============================================================================
ContentsArea
=============================================================================== */
.navBlock01{
	max-width: 1000px;
	margin: 0 auto;
}
.navBlock01:before,
.navBlock01:after
{
	content: "";
	display: block;
    background: url(../images/line01.png) repeat-x 0 bottom;
    background-size: 8px auto;
	height: 1px;
}
.navBlock01 ul{
	display: flex;
	justify-content: space-between;
	max-width: 654px;
	width: 86.885%;
	margin: 0 auto;
	padding: 40px 0;
}
.navBlock01 ul li img{
	height: 96px;
}
.articleBlock01{
    background-color: rgba(255,255,255,.98);
    margin: 50px auto;
}
.articleBlock01 .heading{
	text-align: center;
	padding: 50px 0 70px;
}
.articleBlock01 .heading img{
	padding-left: 104px;
}
.articleBlock01 dl {
    max-width: 560px;
    margin: 0 auto 40px;
    display: -ms-flexbox;
    display: flex;
}
.articleBlock01 dt {
    width: 100px;
    margin-right: 50px;
	text-align: right;
	font-weight: bold;
}
.articleBlock01 dd{
	width: 100%;
}
.articleBlock01 .talker{
	letter-spacing: -.35rem;
}
.articleBlock01 .talker-ogita{
	color: #0084D5;
}
.articleBlock01 .image {
    margin: 0 auto 3em;
    max-width: 650px;
}
.articleBlock01 .conv{
	padding-bottom: 40px;
}
.articleBlock01 .comic{
	background-color: #F1F7FB;
	margin: 80px auto;
	padding: 80px 0 60px;
}
.articleBlock01 .comic p{
    max-width: 650px;
	width: 93.75%;
	margin: 0 auto;
	padding-bottom: 20px;
}
.articleBlock02{
	font-size: 1.4rem;
	text-align: center;
}
.columnBlock{
	background-color: #F1F7FB;
    margin: 120px auto 0;
}
.columnBlock p{
	padding-bottom: 50px;
	text-align: center;
}
.columnBlock .columnInner{
    margin: 0 auto;
    padding: 70px 0;
}
.columnBlock .columnText{
	background-color: #FFFFFF;
	width: 500px;
	padding: 60px 75px;
	text-align: left;
	margin: 0 auto;
}
.columnBlock .columnText p{
	padding: 50px 0 20px;
}
@media screen and (max-width: 768px) {
	.articleBlock01 .heading img {
		width: 88%;
		height: auto;
		padding-left: 0;
	}
	.articleBlock01 dl{
		width: 87.5%;		
	}
}
@media screen and (max-width: 640px) {
	.navBlock01{
		width: 87.5%;
	}
	.navBlock01 ul{
		width: 100%;
		padding: 25px 0 20px;
	}
	.articleBlock01 {
		margin: 25px auto;
	}
	.articleBlock01 .heading {
		padding: 25px 0;
		width: 85.245%;
		margin: 0 auto;
	}
	.articleBlock01 .heading img{
		width: 100%;
	}
	.articleBlock01 dl {
		margin: 0 auto 1em;
		padding-left: 0;
		display: block;
		flex-wrap: wrap;
	}
	.articleBlock01 dt{
		text-align: left;
	}
	.articleBlock01 .image {
		width: 87.5%;
		margin: 1.5em auto;
	}
	.articleBlock01 .conv {
		margin: 0 auto;
		padding-bottom: 0;
	}
	.articleBlock01 .comic p{
		padding-bottom: 20px;
	}
	.articleBlock01 .comic{
		margin: 20px auto;
		padding: 20px 0 0;
	}
	.articleBlock02 {
		padding-top: 10px;
	}
	.columnBlock {
		margin: 30px auto 0;
	}
	.columnBlock .columnInner {
		padding: 15px 0 0;
	}
	.columnBlock p {
		padding-bottom: 25px;
	}
	.columnTitle img{
		width: 87.5%;
		margin: 0 auto;
	}
	.columnBlock .columnText{
		width: 87.5%;
		background-color: #F1F7FB;
		padding: 0 25px 1em;
	}
	.columnBlock .columnText p{
		padding: 30px 0 20px;
	}
}

/* ===============================================================================
FooterArea
=============================================================================== */
footer {
	background-color: #F1F7FB;
	margin: 0 auto;
	text-align: center;
	line-height: 0;
}
.share{
    max-width: 700px;
	position: relative;
    margin: 0 auto;
	padding: 10px 0 80px;
}
.share_list {
    display: flex;
	align-items: center;
}
.share_list li{
	padding: 0 15px;
}
.share_list li:first-of-type{
	padding-left: 0;
}
.share_list li:last-of-type{
	padding-right: 0;
}
.share .hobo .home{
	padding-left: 20px;
}
.share ul.hobo{
	display: flex;
	align-items: center;
	position: absolute;
	justify-content: space-between;
	top: 28px;
	right: 0;
}
.copyright {
	font-size: 1.2rem;
    padding-bottom: 60px;
    display: block;
}
@media screen and (max-width: 640px) {
	footer{
		margin: 0 auto;
	}
	.share{
		width: 87.5%;
		padding-top: 30px;
		margin: 0 auto;
	}
	.share_list {
		justify-content: space-between;
	}
	.share ul.hobo{
		position: relative;
		top: 30px;
	}
	.share ul.hobo img{
		height: 22px;
		width: auto;
	}
	.copyright {
		padding: 0 0 30px;
	}
}