@charset "utf-8";

/* ------------------------------
   DESIGN/LAYOUT ELEMENTS
------------------------------ */

#wrapper {
	margin: 0 auto;
	padding: 20px 0;
	width: 800px;
	text-align: left;
}

.btnArea {
	padding-bottom: 1.5em;
	text-align: center;
}

.title p {
	padding-left: 10px;
	padding-bottom: 2em;
	font-size: 1em;
	line-height: 1.8em;
	text-align: left;
	letter-spacing: 2.5px;
	font-family: 'Aboreto', cursive;
}

.p_p {
	margin-top: -40px;
}

/* ------------------------------
   CHAPTER ELEMENTS
------------------------------ */
.slideShow {
	margin: 50px 200px 50px auto;
	width: 70%;
	text-align: left;
	position: relative;
}

.slideShow ul {
	width: 100%;
}

.slideShow ul li {
	top: 0;
	left: 0;
	width: 100%;
	display: none;
	position: absolute;
}

.slideShow ul li img {
	width: 92%;
	margin: 0 auto;
}

.slideShow::after {
	display: block;
	content: "";
	clear: both;
}

/* PagiNation
--------------------------- */
.pagiNation {
	bottom: -120px;
	left: -5px;
	width: 92%;
	height: 100px;
	position: absolute;
	z-index: 110;
	white-space: nowrap;
	overflow: scroll;
}

.pagiNation a {
	margin: 5px 5px;
	width: 140px;
	height: 90px;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	background: #aaa;
	transition: all 0.2s ease-in-out;
	opacity: 0.6;
}

.pagiNation a:hover {
	opacity: 1;
}

.pagiNation a.pnActive {
	opacity: 1;
}

/* SideNavi------------------------- */
.slideShow .btnPrev,
.slideShow .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 105;
}

.slideShow .btnPrev {
    left: 15px;
    background: transparent url(../img/btnPrev.png) no-repeat center center;
}

.slideShow .btnNext {
    right: 10%;
    background: transparent url(../img/btnNext.png) no-repeat center center;
}

/*backボタン----------*/

.back, .back2 {
  width: 80px;
  display: block;
  margin: 0 auto 20px auto;
  padding: 5px 10px 5px 7px;
  background: #222;
  border-radius: 2em;
  text-align: center;
  text-decoration: none;
  font-size: 10px;
  font-family: 'Aboreto', cursive;
  line-height: 15px;
  letter-spacing: 3px;
  transition: all 1s;
}

.back:hover, .back2:hover {
  color: #fff;
  background-color: #4169e1;
}

/*moreの三角アイコン*/
.back::before, .back2::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 10px;
  border: transparent 5px solid;
  border-right-color: #fff;
  vertical-align: middle;
}

/*-----footer-----*/

#footer {
    margin: 30px 220px 0 auto;
}


/*
=======================================
  900px以下
=======================================
*/

@media only screen and (max-width: 900px) {

.delayLoad {
	width: 100%;
}

#wrapper {
		width: 90%;
	}

.slideShow {
		margin: -30px auto 150px auto;
		width: 85%;
	}

.pagiNation {
	margin: 0 auto 100px auto;
	height: 100px;
	bottom: -220px;
	left: 0;
	white-space: nowrap;
	overflow: scroll;
}

.pagiNation a {
		margin: 10px 2px;
		width: 60px;
		height: 34px;
}

}

/*
=======================================
  700px以下
=======================================
*/

@media only screen and (max-width: 700px) {

.p_p {
	margin-top: -40px;
}

}

/*
=======================================
  650px以下
=======================================
*/

@media only screen and (max-width: 650px) {

.delayLoad {
	width: 500px;
}

}

/*
=======================================
  450px以下
=======================================
*/

@media only screen and (max-width: 450px) {


.container {
	width: 90%;
}

.slideShow ul li img {
	width: 100%;
	margin: 0 auto;
}

.pagiNation {
	width: 100%;
}

.slideShow .btnNext {
    right: 15px;
    background: transparent url(../img/btnNext.png) no-repeat center center;
}

.delayLoad {
	width: 400px;
}

.delayLoad ul li img {
	width: 160px;
	height: 160px;
	object-fit: contain;
}

.p_p {
	margin-top: -5px;
}

/* SideNavi------------------------- */
.slideShow .btnPrev,
.slideShow .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 30px;
    height: 30px;
}

.slideShow .btnPrev {
    left: 7px;
    background: transparent url(../img/btnPrev_s.png) no-repeat center center;
}

.slideShow .btnNext {
    right: 7px;
    background: transparent url(../img/btnNext_s.png) no-repeat center center;
}

.back {
  width: 80px;
  display: block;
  margin: -20px auto 20px auto;
}

.back2 {
  width: 80px;
  display: block;
  margin: 0 auto 20px auto;
}


/*-----footer-----*/

#footer {
    margin: 0 auto;
}


}