@charset "utf-8";

/*--------------------------------------------------
powerd by travision Inc. 
recent status 2015.09.01
--------------------------------------------------*/
@media screen and (max-width: 480px) {

	/*--------------------------------------------------
共通
--------------------------------------------------*/
	section {
		padding: 5% 5%;
	}

	section .sp-img,
	section .sp-h3 {
		display: none;
	}

	.sp {
		display: block !important;
	}

	.pc {
		display: none !important;
	}

	img {
		width: 100%;
		height: auto;
	}

	section p {
		line-height: 1.8em;
	}

	section {
		padding: 20px 10px;
	}


	/*--------------------------------------------------
header
--------------------------------------------------*/

	header {
		width: 100%;
		padding: 80px 5% 0;
		background: #54a3a2;
	}

	header .inner .logo-num {
		display: flex;
		justify-content: space-between;
	}

	header .inner .logo-num h1 {
		width: 66%;
		margin: 0 0 25px;
	}

	header .inner .logo-num h2 {
		width: 24%;
		margin: auto;
	}

	header .inner .device {
		width: 95%;
		margin: auto;
	}

	header p.topLead {
		margin: 25px auto 0;
		font-size: 17px;
		color: #fff;
		font-weight: 600;
		text-align: left;
		letter-spacing: -0.2px;
		line-height: 1.8;
		font-family: 'Noto Serif JP';
	}

	/*--------------------------------------------------
contents
--------------------------------------------------*/
	.contents {
		background: #54a3a2;
	}

	.contents .inner {
		background: url(../img/bg_contents.jpg) repeat;
		background-size: contain;
		margin: 0 auto;
		width: 100%;
		padding: 40px 15px;
	}

	.contents .inner .contents-ttl {
		width: 100%;
		margin: 0 auto 40px;
		position: relative;
	}

	.contents .inner .contents-ttl::after,
	.contents .inner .contents-ttl::before {
		content: '';
		position: absolute;
		top: 50%;
		width: calc(50% - 90px);
		height: 1px;
		background-color: #333;
	}

	.contents .inner .contents-ttl::before {
		left: 0;
	}

	.contents .inner .contents-ttl::after {
		right: 0;
	}

	.contents .inner .contents-ttl img {
		width: 45%;
		display: block;
		margin: 0 auto;
	}

	.contents .inner .cont-flex {

		width: 100%;
		margin: 0 auto;
	}

	.contents .inner .cont-flex .cont-box {
		margin-bottom: 35px;
		border-bottom: 1px solid #333;
		padding-bottom: 35px;
	}



	.contents .inner .cont-flex .cont-box div img {
		width: 100%;
		display: block;
	}

	.contents .inner .cont-flex .cont-box .cont-ttl-sub {
		background: #333333;
		padding: 6px 8px;
		width: fit-content;
		border-radius: 4px;
	}

	.contents .inner .cont-flex .cont-box .cont-ttl-sub img {
		height: 9px;
		width: auto;
		/* 縦横比を保持 */
		display: block;
	}

	.contents .inner .cont-flex .cont-box .cont-ttl {
		padding: 5px 0 10px;
	}

	.contents .inner .cont-flex .cont-box .cont-cs {
		width: 40%;
		position: absolute;
		top: 0%;
		right:25%;
	}

	.contents .inner .cont-up-box .cont-box {
		width: 100%;
		position: relative;
	}

	.contents .inner .cont-down-box .cont-box {
		width: 100%;
	}

	.contents .inner .cont-down-box .cont-box .cont-ttl {
		width: 85%;
	}


	/* book-btn */
	.book-btn {
		width: 95%;
		margin: 50px auto 0;
	}

	.book-btn .read-book {
		background: #a02525;
		padding: 10px;
		margin: 0px auto;
		text-decoration: none;
		font-size: 20px;
		font-weight: bold;
		border-radius: 10px;
		display: block;
		font-family: 'Noto Serif JP';
	}

	.book-btn a {
		text-align: center;
		color: #fff;
	}

	/* library-btn */
	.library-btn a {
		text-decoration: none;
		font-family: 'Noto Serif JP';
		font-weight: 900;
		text-align: center;
		display: block;
		width: 85%;
		margin: 40px auto 30px;
		background: #333;
		border-radius: 10px;
		color: #fff;
		padding: 20px 20px;
		font-size: 24px;
		line-height: 1.2;
		position: relative;
	}

	.library-btn a span {
		font-size: 16px;
		line-height: 1.5;
		display: block;
		padding-top: 5px;
	}

	.library-btn a::after {
		position: absolute;
		content: ">";
		top: 40%;
		right: 3%;
		font-size: 25px;
	}




	/*--------------------------------------------------
Back Numbers
--------------------------------------------------*/
	section.bnumbers .inner {
		padding: 0;
	}

	section.bnumbers h3 {
		width: 100%;
		height: auto;
		padding: 0 0 10px;
		margin-bottom: 15px;
		border-bottom: 1px solid #c9c9c9;
	}

	section.bnumbers h3 img {
		width: auto;
		height: 17px;
	}

	section.bnumbers ul {
		width: 100%;
		overflow: hidden;
	}

	section.bnumbers li {
		width: 30%;
		float: left;
		margin-right: 5%;
		text-align: center;
		margin-bottom: 10px;
	}

	section.bnumbers li:nth-child(3n) {
		margin: 0;
	}

	section.bnumbers li img {
		width: 100%;
		height: auto;
	}

	section.bnumbers li p.jacket {
		margin: 0 0 5px 0;
	}

	section.bnumbers li a {
		color: #000000;
		text-decoration: underline;
	}

	section.bnumbers li a:hover {
		color: #000000;
		text-decoration: none;
	}
}

@media screen and (max-width: 320px) {
	section.special h3 img {
		width: auto;
		height: 40px;
	}

	section.owners h3 img {
		width: auto;
		height: 40px;
	}

	section.green h3 img {
		width: auto;
		height: 40px;
	}

	section.moose h3 img {
		width: auto;
		height: 40px;
	}

	section.styles h3 img {
		height: 39px;
		width: auto;
	}

	section.enjoy h3 img {
		width: auto;
		height: 40px;
	}
}