@charset "UTF-8";


/* -------------------------------------------
googleフォント
-------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap');


/*-------------------------------------------------------------
ヘッダー
--------------------------------------------------------------*/

header {
	width: 100%;
	margin: 0 auto;
	text-align: center;
    background-color: #6BC6EE;
}

.header-wrapper {
	width: 100%;
    background: url("../img/doraptn_header.png") repeat;
    color: #FFF;
    text-align: center;
}

header h1 {
   display: block;
   margin: 0 auto;
    padding: 3% 5% 0 5%;
   text-indent:100%;
}
header h1 .doraportalttl{
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin: 0 auto;
}


.lead-wrapper {
	width: 100%;
	background-color: #02AAE9;
	padding: 20px 0 20px 0;
}

.lead {
    display: block;
    font-size: 16px;
    line-height: 2;
    padding: 0;
    margin: 0 auto;
    font-weight: 400;
    color: #FFF;
}

@media (max-width: 800px) {

.lead-wrapper {
	padding: 10px 10px 10px 10px;
}
.lead-wrapper br {
	display: none;
}
.lead {
    font-size: 14px;
}

}


@media (max-width: 768px) {
.lead {
    font-size: 12px;
}
}
@media (max-width: 680px) {
    
header h1 .doraportalttl{
    width: 90%;
    margin: 0 auto;    
    padding: 0% 5% 0 5%;
    height: auto;
}

}

@media (max-width: 480px) {

.lead {
    font-size: 10px;
    font-weight: 600;
}
}


/*-------------------------------------------------------------
メインコンテンツ
--------------------------------------------------------------*/

main {
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
    font-family: 'Kosugi Maru', sans-serif;
}

main h2{
	font-size: 24px;
    color:#888888; 
}
main h3{
	font-size: 18px;
    color: #6BC6EE;
}

main .subtitle{
	font-size: 14px;
    color: #4073C2;
}
main .subtitle br{
	display: none;
}

main .subtitle-small{
	font-size: 12px;
    color: #4073C2;
}
.bookcoverlist {
	display: block;
	clear: both;
	width: 100%;
	padding: 60px 0px 60px 0px;
}

.bookcoverlist ul {
	display: table;
	text-align: center;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.bookcoverlist ul li {
	display: table-cell;
	text-align: center;
	padding: 0 0px 30px 0px;
	margin: 0 auto;
	width: 33.33%;
	float: left;
}

.bookcoverlist ul li img {
	width: auto;
	height: 300px;
	display: block;
	padding: 0;
	margin: 0 auto 20px auto;
	border: solid 1px #E0E0E0;
}

.bookcoverlist ul li a {
	font-size: 1.5em;
	text-decoration: none;
	color: #FFFFFF;
}

.bookcoverlist ul li a:hover {
	color: #FBFF6B;
}


.bg1 {background-color: #ffffff;
	position: relative;
}

.bg2 {background-color: #D8F3FF;
	position: relative;
}
    
.bg3 {background-color: #FEFEFC;
	position: relative;
}

.bg4 {background-color: #D8F3FF;
	position: relative;
}


.bgptn-color{
    background: url("../img/doraptn_color.png") repeat;
}

.bgptn-white{
    background: url("../img/doraptn_white.png") repeat;
}


.btn-soundsite {
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  background-color: #6BC6EE;
  border-radius: 3px;
  width: 200px;  
}

.btn-soundsite:link {
  font-size: 14px;
  text-decoration: none;
}

.btn-soundsite:hover {
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  border-bottom: none;
  text-decoration: none;
}

.btn-soundsite:visited {
  color: #FFF;
}

.btn-yotei {
  display: inline-block;
  padding: 10px;
  margin: 3px 0 0 0;
  text-decoration: none;
  background-color: #C8CDCF;
  border-radius: 3px;
  width: 200px; 
  font-size: 14px;
  color: #6A6A6A;
}

.illust-1 {
	position: absolute;
	top: 0;
    left: 5%;
    width: 125px;
    z-index: 8;
}
.illust-1 img {
	width: 100%;
	height: auto;
}

.illust-2 {
	position: absolute;
	top: 5px;
    right: 5%;
    width: 160px;
}
.illust-2 img {
	width: 100%;
	height: auto;
}

.illust-3 {
	position: absolute;
	top: 50%;
    left: 15%;
    width: 170px;
}
.illust-3 img {
	width: 100%;
	height: auto;
}

/*--------アニメーション--------*/
.animation1{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: animation1;
    animation-duration: 1.3s;
}
@keyframes animation1 {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(0px, -60px);
    }
}

.animation2{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: animation2;
    animation-duration: 1.8s;
}
@keyframes animation2 {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(0px, -50px);
    }
}

.animation3{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: animation3;
    animation-duration: 1.5s;
}
@keyframes animation3 {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(0px, -150px);
    }
}


/*--------↑アニメーションここまで↑--------*/



.touchpen {
	display: block;
	clear: both;
	width: 70%;
	padding: 20px 0px 40px 0px;
}

.touchpen img {
	border: solid 1px #E3E3E3;
    border-radius: 5px;
	margin: 20px 0px;
}


@media (max-width: 800px) {
.touchpen {
	width: 90%;
}
.illust-1 {
	top: 10px;
    left: 3%;
    width: 110px;
}
.illust-2 {
	top: 5px;
    right: 5%;
    width: 120px;
} 
.illust-3 {
    width: 120px;
}  
}


@media (max-width: 680px) {
	.bookcoverlist ul li {
		padding: 0 0px 30px 0px;
		width: 100%;
	}
	.bookcoverlist ul li img {
		width: auto;
		height: 200px;
	}
}

@media (max-width: 480px) {
.wrapper {
		width: 100%;
	}
    
main h2{
	font-size: 16px;
}
main h3{
	font-size: 14px;
}
.bookcoverlist {
	display: block;
	clear: both;
	width: 90%;
	padding: 20px 0px 20px 0px;
}
    
.bookcoverlist ul {
	display: table;
	text-align: center;
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.bookcoverlist ul li {
	display: table-cell;
	text-align: center;
	padding: 0 0px 20px 0px;
	margin: 0 auto;
	width: 33.33%;
	float: left;
}

.bookcoverlist ul li img {
	width: auto;
	height: 140px;
	display: block;
	padding: 0;
	margin: 0 auto 5px auto;
	border: solid 1px #E0E0E0;
}
main .subtitle br{
	display:block;
}
main .subtitle-small{
	font-size: 10px;
    line-height: 0.2em;
}
.btn-soundsite {
  padding: 10px;
  width: 100px;  
}

.btn-soundsite:link {
  font-size: 12px;
}
    
.btn-yotei {
  padding: 10px;
  width: 100px; 
  font-size: 12px;
}
    
.illust-1 {
	top: 35px;
    left: 5%;
    width: 60px;
}

.illust-2 {
	top: 40px;
    right: 5%;
    width: 60px;
}

.illust-3 {
	top: 50%;
    left: 15%;
    width: 60px;
}
.illust-3 img {
	width: 100%;
	height: auto;
}
.animation1{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: animation1;
    animation-duration: 1.3s;
}
@keyframes animation1 {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(0px, -30px);
    }
}

.touchpen {
	width: 100%;
	padding: 5px 0px 0px 0px;
}

.touchpen img {
    border: none;
    border-radius: 0px;
}
}

@media (max-width: 320px) {
.bookcoverlist {
	display: block;
	clear: both;
	width: 100%;
	padding: 20px 0px 20px 0px;
}
    
.bookcoverlist ul {
	display: block;
	width: 100%;
}

.bookcoverlist ul li {
	display: block;
	width: 100%;
}

.bookcoverlist ul li img {
	height: 180px;
}	
main .subtitle br{
	display:none;
}
.illust-1 {
	top: 100px;
    left: 10%;
    width: 60px;
}
.illust-3 {
	top: 50%;
    left: 5%;
    width: 60px;
    z-index: 20;
}
}

/*-------------------------------------------------------------
フッター
--------------------------------------------------------------*/

footer {
	width: 100%;
	margin: 0 auto;
}

footer .copyright {
	background-color:#6BC6EE;
	color: #fff;
	margin: 0px auto 0 auto;
	padding: 30px 0 50px 0;
    text-align: center;
}
footer .footer {
    display: block;
	font-size:12px;
	}

footer .shogakukan {
    display: inline-block;
	border: solid 2px #fff;
	font-size: 16px;
	font-weight: 500;
    padding: 2px 8px 2px 8px;
}



@media (max-width: 800px) {
footer .footer {
	font-size:10px;
	}
}

@media (max-width: 680px) {

footer .wrapper {
		width: 90%;
	}
footer .copyright small{
		font-size: 10px;
	}
footer .footer br {
	display: none;
	}
footer .shogakukan {
	font-size: 12px;
}
}