@charset "UTF-8";
/* ===========================================================

   [paper-tale]

=========================================================== */
/* -----------------------------------------------------------
    responsive　common　
----------------------------------------------------------- */
/*
body {
    background: url("/campaign/images/bg.gif");
}
*/
#paper-tale .main_content {
	/*margin-top: 63px;*/
	margin-top: 30px !important;
}
#paper-tale main {
     /*margin: 37px auto 0;*/
	 margin-top: 15px !important;
}
#paper-tale .inner {
	width: 100%;
	max-width: 990px;
	margin: 0px auto;
}
#paper-tale #ep_list_wrap img,
#paper-tale #ep_detail_wrap img{
	width: 100%;
}
#paper-tale .ep_head_img {
	width: 100%;
	max-width: 990px;
	margin: 0px auto;
}
@media screen and (max-width: 767px) {
	#paper-tale .main_content {
		margin-top: 0px !important;
		margin-bottom: 50px;
	}
	#paper-tale main {
		 margin-top: 0px !important;
	}
	#paper-tale .inner {
		width: 100%;
		max-width: 100%;
		margin: 0px auto;
	}
	#paper-tale .ep_head_img {
		margin: 50px auto 0 auto;
	}
}
@media screen and (min-width: 768px) {
#paper-tale .pc_only {}
#paper-tale .sp_only {display: none;}
}
@media screen and (max-width: 767px) {
#paper-tale .pc_only {display: none;}
#paper-tale .sp_only {}
}
/*********************
一覧
**********************/
/*ネピアのかみ図鑑*/
#paper-tale .chara_box {
	background-color: #f6f7f1;
	border: 2px solid #95bcaa;
	padding: 30px 80px 30px 0px;
	border-radius: 25px 0 25px 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
	position: relative;
}
#paper-tale .chara_box a {
	display: block;
}
#paper-tale .chara_box:hover  {
    background-color: #deefea;
    background-image: none;
}
#paper-tale .chara_box dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	vertical-align: middle;    
}
#paper-tale .chara_box dt {
	width: 55%;
}
#paper-tale .chara_box dt .tit {
	/*color: #3d5257;*/
    color: #FFF;
    text-align: center;
    background-color: #95bcaa;
}
#paper-tale .chara_box dt .tit b{
	font-size: 34px;
    font-weight: 600;
    display: block;
    padding-top: 15px;
    padding-bottom: 5px;    
}
#paper-tale .chara_box dt .tit .en {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
	font-size: 14px;
    display: block;
    padding-bottom: 10px;
}
#paper-tale .chara_box dt  .more {
    width: 130px;
    margin: 20px 0 0 auto;
    height: 30px;
    background: url(/common/images/moreArw.png) no-repeat 0 0;
    text-align: left;
    padding: 3px 0 0 10px;
    color: #ec8dae;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	
}
#paper-tale .chara_box dd.chara_img {
	width: 40%;
}
@media screen and (max-width: 767px) {
        #paper-tale .chara_box {
            width: 90%;
            margin: 30px auto;
            display: block;
            padding: 0px 0px 30px 0px;
            -webkit-transition: 0.3s;
        }
        #paper-tale .chara_box dl {
            display: block;
        }
        #paper-tale .chara_box dt {
            width: 100%;
        }
        #paper-tale .chara_box dt .tit {
            background-color: #95bcaa;
            border-radius: 23px 0 0px 0;
            text-align: center;
        }
        #paper-tale .chara_box dt .tit b{
            font-size: 24px;
            padding-top: 15px;
            padding-bottom: 5px;    
        }
        #paper-tale .chara_box dt .tit .en {
            font-size: 14px;
            padding-bottom: 10px;
        }
        #paper-tale .chara_box dt  .more {
            width: 120px;
            height: 30px;
            background: url(/common/images/moreArw.png) no-repeat 0 0;
            padding: 3px 0 0 10px;
            position: absolute;
            bottom: 15px;
            right: 3%;
            background-size: auto 25px;
            font-size: 14px;
        }
        #paper-tale .chara_box dd.chara_img {
            width: 90%;
            max-width: 300px;
            margin: 30px auto;
        }
}

/*マンガ一覧*/
#paper-tale ul.ep_list {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
}
#paper-tale li.ep_list_box {
    width: 31%;
	background-color: #fbefef;
	border: 2px solid #ec8dae;
	padding: 0 0 80px 0;
	border-radius: 25px 0 25px 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
	position: relative;
	margin-bottom: 30px;
}
@media screen and (min-width: 768px) {
#paper-tale ul.ep_list {
      justify-content: flex-start; 
      gap: 2.5%; 
}
}
#paper-tale li.ep_list_box a {
	display: block;
}
#paper-tale li.ep_list_box:hover  {
	background: url("/campaign/images/bg.gif");
	background-size: 30px auto;
}
#paper-tale .ep_list_box .number,
#paper-tale .ep_detail_box .number{
	font-weight: 600;
	color: #FFF;
	margin-bottom: 20px;
	font-size: 20px;
	background-color: #ec8dae;
	padding: 13px 3% 10px 3%;
	border-radius: 23px 0 0px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	vertical-align: middle;
}
#paper-tale .ep_list_box .number .jp,
#paper-tale .ep_detail_box .number .jp{
	font-size: 22px;
    margin-left: 15px;
	/*color: #aa9ca1;*/
}
#paper-tale .ep_list_box .number .jp:before,
#paper-tale .ep_detail_box .number .jp:before{
  content: '▶︎';
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  padding: 0 5px 0 0;
}
#paper-tale .ep_list_box .number .en,
#paper-tale .ep_detail_box .number .en{
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
	font-size: 18px;
}
#paper-tale li.ep_list_box .more {
    width: 130px;
    height: 30px;
    background: url(/common/images/moreArw.png) no-repeat 0 0;
    text-align: left;
    padding: 3px 0 0 10px;
    color: #ea6c98;
    text-decoration: none;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	
	position: absolute;
	bottom: 30px;
	right: 5%;
}
#paper-tale .ep_list_box .koma_wrap {
	width: 70%;
    max-width: 200px;
	margin: 0 auto;
}
#paper-tale .ep_list_box .koma_wrap li {
}
@media screen and (max-width: 767px) {
	#paper-tale ul.ep_list {
		width: 90%;
		margin: 30px auto;
        display: block;
	}
	#paper-tale li.ep_list_box {
        width: 100%;
		padding: 0 0 60px 0;
		margin-bottom: 30px;
	}
	#paper-tale .ep_list_box .number,
	#paper-tale .ep_detail_box .number{
		font-size: 20px;
		padding: 13px 3% 10px 3%;
	}
	#paper-tale .ep_list_box .number .jp,
	#paper-tale .ep_detail_box .number .jp{
		font-size: 18px;
		margin-left: 15px;
	}
	#paper-tale .ep_list_box .number .jp:before,
	#paper-tale .ep_detail_box .number .jp:before{
	}
	#paper-tale .ep_list_box .number .en,
	#paper-tale .ep_detail_box .number .en{
		font-size: 14px;
	}
	#paper-tale li.ep_list_box .more {
	  width: 120px;
	  height: 30px;
	  background: url(/common/images/moreArw.png) no-repeat 0 0;
	  padding: 3px 0 0 10px;
	  position: absolute;
	  bottom: 15px;
	  right: 3%;
	  background-size: auto 25px;
	  font-size: 14px;
	}
}
/*********************
マンガ詳細
**********************/
#paper-tale .ep_detail {
}
#paper-tale li.ep_detail_box {
	background-color: #fbefef;
	border: 2px solid #ec8dae;
	padding: 0 0 0 0;
	border-radius: 25px 0 25px 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
	position: relative;
	margin-bottom: 50px;
}
#paper-tale .ep_detail_box .koma_wrap {
	width: 100%;
	max-width: 450px;
	margin: 0 auto 0 auto;
}
#paper-tale .ep_detail_box .koma_wrap li {
}
@media screen and (max-width: 767px) {
	#paper-tale .ep_detail_box .koma_wrap {
		width: 80%;
		max-width: 80%;
		margin: 0 auto 0 auto;
	}
}

@media screen and (min-width: 768px) {
	#paper-tale .page_end {
		overflow: hidden;
		width: 80%;
		max-width: 400px;
		margin: 0 auto 0 auto;
	}
	#paper-tale .page_end .fukidashi_wrap {
		width: 60%;
		float: left;
		margin-top: 30px;
	}
	#paper-tale .page_end .fukidashi {
	  position: relative;
	  display: inline-block;
	  margin: 1.5em 15px 1.5em 0;
	  padding: 20px 10px;
	  min-width: 230px;
	  max-width: 100%;
	  color: #FFF;
	  background: #ec8dae;
	  border-radius: 7px;
	  border: solid 3px #ec8dae;
	  box-sizing: border-box;
	}
	#paper-tale .page_end .fukidashi:before {
	  content: "";
	  position: absolute;
	  top: 50%;
	  left: 100%;
	  margin-top: -15px;
	  border: 15px solid transparent;
	  border-left: 15px solid #ec8dae;
	  z-index: 2;
	}
	#paper-tale .page_end .fukidashi p {
	  margin: 0;
	  padding: 0;
	  text-align: center;
	  font-size: 18px;
	  font-weight: 600;  
	}
	#paper-tale .page_end .chara {
		width: 150px;
		float: right;
	}
}
@media screen and (max-width: 767px) {
	#paper-tale .page_end {
		width: 80%;
		max-width: 80%;
		margin: 20px auto 50px auto;
	}
	#paper-tale .page_end .fukidashi_wrap {
		width: 200px;
		margin: 0 auto;
	}
	#paper-tale .page_end .fukidashi {
	  position: relative;
	  display: inline-block;
	  margin: 1.5em auto;
	  padding: 20px 10px;
	  min-width: 100%;
	  max-width: 100%;
	  color: #FFF;
	  font-size: 16px;
	  background: #ec8dae;
	  border-radius: 7px;
	  border: solid 3px #ec8dae;
	  box-sizing: border-box;
	}
	#paper-tale .page_end .fukidashi:before {
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  margin-left: -15px;
	  border: 15px solid transparent;
	  border-top: 15px solid #ec8dae;
	  z-index: 2;
	}
	#paper-tale .page_end .fukidashi p {
	  margin: 0;
	  padding: 0;
	  text-align: center;
	  font-size: 18px;
	  font-weight: 600;  
	}
	#paper-tale .page_end .chara {
		width: 150px;
		margin: 0 auto;
	}

}
/*********************
ネピアのかみ図鑑　詳細
**********************/
#paper-tale .ele_detail .tit {
	/*color: #3d5257;*/
    color: #FFF;
    text-align: center;
    background-color: #95bcaa;
}
#paper-tale .ele_detail .tit b{
	font-size: 34px;
    font-weight: 600;
    display: block;
    padding-top: 15px;
    padding-bottom: 5px;    
}
#paper-tale .ele_detail .tit .en {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
	font-size: 14px;
    display: block;
    padding-bottom: 10px;
}
#paper-tale .ele_detail li.ep_list_box {
    width: 31%;
	background-color: #f6f7f1;
	border: 2px solid #95bcaa;
	padding: 0 0 0 0;
	border-radius: 25px 0 25px 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
	position: relative;
	margin-bottom: 30px;
}
#paper-tale .ele_detail li.ep_list_box a {
	display: block;
}
#paper-tale .ele_detail li.ep_list_box:hover  {
    background-color: #f6f7f1;
    background-image: none;
}
#paper-tale .ele_detail li.ep_list_box .name {
	font-weight: 600;
	color: #FFF;
	margin-bottom: 20px;
	font-size: 20px;
	background-color: #95bcaa;
	padding: 13px 3% 10px 3%;
	border-radius: 23px 0 0px 0;
    text-align: center;
}
#paper-tale .ele_detail li.ep_list_box .chara_img {
	width: 70%;
    max-width: 200px;
	margin: 0 auto;
}
#paper-tale .ele_detail li.ep_list_box .profile {
    margin: 0 20px 20px 20px;
}
#paper-tale .ele_detail li.ep_list_box .profile dt {
    color: #95bcaa;
    font-weight: 600;
    border-bottom: 2px solid #95bcaa;
    padding-bottom: 5px;
    margin-bottom: 10px;
    margin-top: 20px;
}
#paper-tale .ele_detail li.ep_list_box .profile dd,
#paper-tale .ele_detail li.ep_list_box .profile dd li {
    font-size: 14px;
    line-height: 1.6;
}

#paper-tale .ele_detail li.ep_list_box .profile dd li {
    margin-bottom: 10px;
}
#paper-tale .ele_detail li.ep_list_box .profile dd li:before {
  color: #95bcaa;
  content: '▶︎';
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  padding: 0 3px 0 0;
}
#paper-tale .ele_detail li.ep_list_box .profile .chara_img_sub {
	width: 60%;
    max-width: 170px;
	margin: 0 auto;
}

@media screen and (max-width: 767px) {
    #paper-tale .ele_detail .tit b{
        font-size: 24px;
    }
    #paper-tale .ele_detail .tit .en {
        font-size: 14px;
    }
	#paper-tale .ele_detail li.ep_list_box {
        width: 100%;
	}
}
/*********************
SNSリンク
**********************/
dl.sns_wrap {
    border-top: 1px solid #ec8dae;
    margin-top: 50px;
    padding-top: 50px;
}
dl.sns_wrap dt {
    text-align: center;
    color: #ec8dae;
    font-weight: 600;
     font-size: 22px;
     letter-spacing: 2px;
}
dl.sns_wrap dd {
	display: flex;
	flex-wrap: wrap;
	justify-content:center;
	align-items: center;
}
dl.sns_wrap dd .bt {
    width: 60px;
    margin: 20px 15px 0 15px;
}
dl.sns_wrap dd .bt a {
}
@media screen and (max-width: 767px) {
    dl.sns_wrap dt {
         font-size: 18px;
    }
}



/* -----------------------------------------------------------
    responsive PC(w991px~)
----------------------------------------------------------- */
/* -----------------------------------------------------------
    responsive Tablet(w768px~w990px)
----------------------------------------------------------- */
/* -----------------------------------------------------------
    responsive sp(~w767px)
----------------------------------------------------------- */