/* CSS Document */

@charset "utf-8";

.hover{
	transition: all 0.3s;
}
.hover:hover{
	opacity:0.7;
}

.small{font-size:70%;}
.small2{ font-size: 80%;
   margin: 4rem}
.big{font-size: 120%;}

.pconly{display: block;}
.sponly{display: none;}


html {
    scroll-behavior: auto;
}

a {color: #000;
    text-decoration: none;}

body{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight:600;line-height: 1.4;
	font-size:1.6rem;
	color:#231815;
	background:url("../image/common/bg.png") repeat;background-size: 1.5%;
}


img{width:100%;vertical-align:bottom;}

main{
	width:1200px;
	margin:0 auto;
}

section{
	padding:4rem 2rem;	
	text-align:center;
}

.copy{background-color: #fff;}

.higino{font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, 'sans-serif';}

#btnPagetop{
	position:fixed;
	width:4%;	
	right:20px;
	bottom:20px;
}

#btnPagetop a{cursor: pointer;}

/*トップページ*/
#index{
	background:url("../image/common/bg-dot.gif");
}

#index #andmore{
	width: 15%;
    margin: 2rem auto 5rem;
}

#index h3{
    width: 80%;
    margin: 0 auto;
}

#sns-share{
    display: flex;
	align-items: center;
    font-weight: 400;
    line-height: 1.5;
    margin: 3rem 0 0;
    padding: 2rem;	
	background: #ffd800;	
}

#sns-share p{
	flex:4;
}

#index nav ul{
    display: block!important;
    width: 85%!important;
    margin: 0 auto!important;
}


#index nav ul li{
	width:100%;
	    margin: 0 0rem 1rem 0;
}

#index nav ul li:first-child{
    margin: 3rem 0rem 1rem 0;
}

/*下層共通*/
header{
	background:#fff112;
}

.submenu{
    background-color: #fef6e2;
}

#area-logo{
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding:1rem 1.5rem;
	border-bottom:4px solid #fff;
}

#area-logo h1{
	flex:1.8;
}

#sns{
	display:flex;
	flex:1;
	margin:0 0 0 2rem;
}
#sns li{
	margin:0 1rem 0 0;
}
#sns li:last-child{
	margin:0;
}


#area-logo h2{
	flex:1.7;
}

nav ul{
	display:flex;
	justify-content: center;
	padding:1rem 2rem;
	background:url("../image/common/bg-stripe.gif") repeat;
}
nav ul li{
	width:20%;
	margin:0 1rem 0 0;
}
nav ul li:last-child{margin:0;}

#title img{width:40%;}

.midashi-txt{
	font-size:2.1rem;
	line-height:1.5;
}

footer{
    padding: 3rem;
    text-align: center;
    font-size: 1.5rem;
    background: #fff;
}

#copyright{
	font-size:1.1rem;
	line-height:1.5;
	font-weight:300;
	color:#373737;
	text-align:left;
}

#link li{
	display: inline-block;
}
#link li a{
	border-right: 1px solid #212121;
    padding: 0 10px 0 5px;
    font-size: 1.3rem;
	font-weight:400;
    color: #212121;
}
#link li:nth-child(1) a{
    border-left: 1px solid #212121;
    padding-left: 10px;	
}

#shogakukan{
	padding:2.5rem 2rem;
}
#shogakukan a{
    padding: 0.8rem 1rem;
    font-size: 1.4rem;
	font-weight:400;
	line-height: 1.6;
    text-decoration: none;
    color: #212121;	
    border: 1px solid #212121;
}

.copy-shogakukan{
	font-size:1.2rem;
	font-weight:400;
	color:#212121;
	line-height:1.5;
}

/*今回のノベルティはコレ！*/
#novelty{
	background:url("../image/novelty/bg-dot02.gif") repeat;
}

#novelty #title{
	padding:1rem 0;
	text-align:center;
	border-top:5px solid #f7e5c1;
	border-bottom:5px solid #f7e5c1;
	background:url("../image/novelty/bg-stripe.gif") repeat;
}

#novelty #title img{width:40%;}

/*#novelty #main-txt{
	background-image:url("../image/novelty/bg-step01-top.gif");
	background-repeat:no-repeat;
	background-position:bottom;
}*/
#novelty #main-txt h2{
	width:90%;
	margin:0 auto;
}

/*231106*/
#novelty .triangle01 h4{text-align: center;margin: 0rem 2rem 4rem ;
    line-height: 1.4;}

.btnbox{font-weight: bold;text-align: center;margin-bottom: 4rem;
}
.btnbox a{    display: block;
    width: 90%;
    max-width: 422px;
    margin: 0 auto;}

.btnbox a.txtbtn {
	display: inline-block;
	width:auto;
	max-width:inherit;
	padding: 0.5rem 1rem;
	background: red;
	color: #FFF;
	border-radius: 3rem;
}	



.btnbox img{width: 100%; margin: 0 auto;}

.red{color: red;}
.mini_txt{font-size: 90%;margin-top: 1rem;}

#novelty #step01{
	padding-bottom: 50px;
	background:#FFFC9D;	
}
#novelty #step01 h3{
	width:60%;
	margin:0 auto;
}

#novelty #step01 a{
	display:inline-block;
	width:29%;
	margin:2% 1% 0 1%;
}

#novelty #step02{
	padding:0rem 0 0 0;
	/*background-image:url("../image/novelty/bg-step01-btm.gif"),url("../image/novelty/bg-stripe.gif");
	background-repeat:no-repeat,repeat;
	background-position:top;*/
	
}

#novelty #step02 h3{
	width:90%;
	margin:3rem auto;
}

.red_link{color: red;transition:all 0.3s;font-size: 120%;text-decoration: underline;}
.red_link:hover{color: #742624;}
.red_link2{color: red;transition:all 0.3s;font-size: 100%;font-weight: bold;text-decoration: underline;}
.red_link2:hover{color: #742624;}

.novelttl{
    width: 98%;
    max-width: 688px;}

#area-novel ul{
    display: flex;
    flex-wrap: wrap;
       width: 97%;
    margin: 0rem auto 0;
}

.speImg{
    max-width: 788px;
    width: 95%;
    margin-bottom: 8rem;
}
.novelImg{
    width: 90%;margin: 0 auto 8rem;
}
.subTxt{margin: 2rem;}


.kiyaku_box{
      text-align: left;
    margin: 0 auto;
    display: block;
    width: 70%;
    line-height: 1.7;
    font-weight: normal;
    font-size: 95%;margin-bottom: 5%;
}

.kiyaku_midashi{font-size: 2rem;font-weight: bold;}

#area-novel ul li{
    margin: 0.7%;
    width: 32.1%;
}
	
#area-novel ul li:nth-child(3n) {
    margin-right: 0%;
}	

#area-novel h3 img{max-width: 525px;margin-bottom: 1%;}

#sample figure,
#sample02 figure,
#sample03 figure,
#sample04 figure,
#sample05 figure{
  margin: 0;
  display: none;
}
#sample figure:target,
#sample02 figure:target,
#sample03 figure:target,
#sample04 figure:target,
#sample05 figure:target{
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
#sample figure:target #overlay,
#sample02 figure:target #overlay02,
#sample03 figure:target #overlay03,
#sample04 figure:target #overlay04,
#sample05 figure:target #overlay05{
	height:100vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  text-decoration: none;
  color: inherit;
}
#sample figure:target img,
#sample02 figure:target img,
#sample03 figure:target img,
#sample04 figure:target img,
#sample05 figure:target img{
	width:auto;
 	animation: fadein .3s;
}
@keyframes fadein{
  0%{
    transform: scale(0.2);
    opacity: 0.2;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
figcaption{
	font-size:6rem;
	color:#c1c1c1;
}

/*フェア対象コミックス*/
#comics{
	background:url("../image/comics/bg-dot.gif") repeat;
}

#comics #title{
	padding:1rem 0;
	text-align:center;
	border-top:5px solid #d0edfc;
	border-bottom:5px solid #d0edfc;
	background:url("../image/comics/bg-dot2.gif") repeat;background-size: 1.5%;
}

#comics #title img{width:40%;}

#syoei-list{
    display: flex;
    flex-wrap: wrap;
       width: 100%;
    margin: 3rem auto 0;padding: 0 1% 0;
}

#syoei-list li{display: inline-flex;
	    align-items: flex-start;
    margin: 0 1% 1% 0%;
    width: 18.5%;
}

 #syoei-list li img{
   
    height: auto;
    width: 100%;
}

.bbg{border: 1px solid #c2c2c2;}

#syoei-list li a{
    margin: 0 auto;
}

#comics-list{margin:3rem 0 0 0;}
#comics-list li{ 
	position:relative;
	margin:0 0 2rem 0;
	text-align:left;
}
#comics-list li a{
	display:block;
	padding:2rem 4rem 2rem 2rem;
	color:#0cb871;	
	line-height:1.5;
	text-decoration:none;
	border:4px solid #0cb871;	
	border-radius:10px;	
	background:#fff;
	transition:all 0.3s;
}
#comics-list li a:hover{
	color:#fff;
	background:#0cb871;
}
#comics-list li::before{
	content:"";
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	right:1.5rem;
    width: 2rem;
    height: 2rem;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #0cb871;
	transition:all 0.3s;	
}
#comics-list li::after{
	content: "";
    position: absolute;
    box-sizing: border-box;
    width: 0.5rem;
    height: 0.5rem;
    border: 5px solid transparent;
    border-left: 9px solid #fff;
    top: 50%;
    transform: translateY(-50%);
    right: 1.4rem;
	transition:all 0.3s;	
}
#comics-list li:hover::before{
	background: #fff;
}
#comics-list li:hover::after{
    border-left: 9px solid #0cb871;
}

.shopBox{padding-bottom: 0rem;}

.listBtn{display: flex;margin: 3.5rem auto;
    justify-content: space-around;flex-wrap: wrap;}

.map-group {
    width: 36%;display: block;
    margin-bottom: 5%;
}


.map-group dt{font-size: 120%;text-align: start;display: block;
    margin-bottom: 1rem;}
.map-group dd{font-size: 88%;}

.map-group dd ul{display: flex;
    flex-wrap: wrap;} 
.map-group dd li {display: contents;}
.map-group dd li a{
    text-align: center;
    margin: 0 0.7rem 0.7rem 0;
    border: 2px solid #e50112;
    border-radius: 10px;
    background: #fff;text-decoration: none;
    color: #231815;
    padding: 0.5rem 2.5rem;transition: all 300ms 0s ease;}


.threetxt{
    padding: 0.5rem 1.8rem!important;
}

.map-group dd li:hover a{background: #e50112;
    color: #fff;
    -webkit-transition: all 0.4s cubic-bezier(0.5, 1, 0.89, 1);
    transition: all 0.4s cubic-bezier(0.5, 1, 0.89, 1);}


.box-border {
    box-sizing: border-box;
}



.accordion-001 {
    max-width: 500px;
    background-color: #ffffff;
	border: 1px solid #e60012;margin: 1rem auto;
}

.min_midashi{display: block;
    margin: 0 auto;}

.accordion-001:not([open]) {
    margin-bottom: 7px;
}

.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-color: #e60012;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.accordion-001 summary::-webkit-details-marker {
    display: none;
}

.accordion-001 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-001[open] summary::after {
    transform: rotate(225deg);
}

.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 2em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-001[open] p {
    transform: none;
    opacity: 1;
}


.spBtn{display: flex;
    flex-wrap: wrap;margin: 3% 2% 1% 3%;} 
.spBtn li {display: contents;}
.spBtn li a{
    text-align: center;
    margin: 0 0.7rem 0.7rem 0;
       border-radius: 6px;
    background: #ffd7da;
    text-decoration: none;
    color: #423936;
    padding: 0.5rem 1.5rem;
    transition: all 300ms 0s ease;
    font-size: 1.4rem;
}


.threetxt{
    padding: 0.5rem 1.8rem!important;
}

.spBtn li:hover a{opacity: 0.7;
    -webkit-transition: all 0.4s cubic-bezier(0.5, 1, 0.89, 1);
    transition: all 0.4s cubic-bezier(0.5, 1, 0.89, 1);}

#cam_detail img{
    max-width: 573px;
    width: 95%;margin-top: 9%;
}

.attention{border: 1px solid;
    padding: 0.2% 0.8%;
    margin-top: 1%;
    display: inline;}


/*小コレ！参加書店*/
#shoplist{
	background:url("../image/shoplist/bg-dot02.gif") repeat;
}

#shoplist #title{
	padding:1rem 0;
	text-align:center;
	border-top:5px solid #ffe1e3;
	border-bottom:5px solid #ffe1e3;
	background:url("../image/shoplist/bg-stripe.gif") repeat;
}

select{
    position: relative;
	width: 100%;	
    margin:4rem 0 2rem;
	padding: 1.5rem 2.5rem;
	font-size:1.6rem;
	color:#231815;
    border: 4px solid #231815;
    border-radius: 10px;
	outline:none;
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
	transition:all 0.3s;
}
select:focus{
	border:4px solid #e80012;
}
.select-division{
    display: block;	
	position: relative;
	width: 20%;
    margin: 0 auto;
}
.select-division::after{
	content: "";
    position: absolute;
    left: right;
    width: 6px;
    height: -6px;
    border: 5px solid transparent;
    border-left: 8px solid #e80012;
    right: 1.5rem;
    top: 64%;
    transform: translateY(-64%) rotate(90deg);
    -webkit- transform: translateY(-64%) rotate(90deg);
}

.division{
	display:flex;
	justify-content: space-between;
}
.division li{
	width:28%;
	margin:0 2rem 0 0;
	padding:1.5rem 2.5rem;
	font-size:90%;
	font-weight:400;
	color:#fff;
	text-align:center;
	border-radius:10px;
	background:#e50112;
}
.division li:last-child{
	margin:0;
}

#chrono-list{
	margin: 1rem 0 0 0;
}

.dataList{
	display:flex;
	align-items: center;
	margin:0 0 1rem 0;
	border:1px solid #e50112;
	border-radius:10px;
	background:#fff;	
}
.dataList li{
	width:28%;
	margin:0 1rem 0 0;	
	padding:1.5rem 2.5rem;
	font-size:90%;
	font-weight:400;
	color:#212121;
	line-height:1.5;
	text-align:center;
}
.dataList li:last-child{mragin:0;}

/*トップ用フッター*/
#index-footer{
	background:#231815;
}

#index-footer #link li a{
	color:#fff;
	border-right: 1px solid #fff;	
}

#index-footer #shogakukan a{
	color:#fff;
	border-color:#fff;
}

#index-footer .copy-shogakukan{
	color:#fff;
}



@media screen and (max-width:1120px){
#sns li{margin:0;}
#sns li a img{width:80%;}
	
	

	
}

@media screen and (max-width:1050px){
#sns-share{
	align-items: center;
}
#sns-share p{
	flex:4;
}
}

@media screen and (max-width:1300px){
main{
	width:90%;
}

}

@media screen and (max-width:960px){
#novelty-list li{
	width:18.8%;
}
}

@media screen and (max-width:800px){
#novelty-list li{
	width:18.5%;
}
	
.sponly{display: block;}
.pconly{display: none;}
.threetxt {
    padding: 0.5rem 0.8rem!important;
}
	
	.kiyaku_box {
    line-height: 1.5;
    width: 90%;
    margin-bottom: 8%;
}


}

@media screen and (max-width:560px){
main{
	width:auto;
}

#area-logo{
	padding:0.5rem;
	border-bottom:2px solid #fff;
}
	
#sns{
	margin:0 1rem;
}
#sns li{margin:0 0.5rem 0 0;}
	
#sns-share{margin: 0rem 0 0;}

nav ul{padding:1rem;}
nav ul li{
	width:33%;
}

#btnPagetop{width:10%;}	
	
footer{
	padding:2rem 1rem;
}	
	
.midashi-txt{font-size:1.6rem;}
	
/*トップページ*/
#index #andmore{width:20%;}
#index h3{width:90%;}
#index {
    background-size: 7%;
}	
	
#sns-share{
    display: inline-grid;
}
#sns-share p{
	width: auto;
	font-size: 1.3rem;
	margin: 0 0 1rem 0;
}
#sns-share #sns{
	margin: 0 auto;
	text-align: center;		
}
	#sns-share #sns li a img{width:80%;}
	
	#index nav ul li:first-child {
    margin: 1rem 0rem 1rem 0;}

/*今回のノベルティはコレ！*/
	
	#main-txt{padding:2rem 1rem;}
	
	
#area-novel h3 img{
    width: 88%;}
	
#novelty #title img{width:40%;}
#novelty #main-txt h2,
#novelty #step01 h3{
		width:auto;
}
	
	.novelttl {
    width: 100%;
}

#novelty #step01 a{
	width:48%;margin: 3% 1% 0 1%;
}
	
#novelty #step02{
	padding:0rem 0 0 0;
	/*background-image:url("../image/novelty/bg-step01-btm-sp.gif"),url("../image/novelty/bg-stripe-sp.gif");
	background-repeat:no-repeat,repeat;
	background-position:top;*/
}
	
#area-novel ul li{
    margin: 1%;
    width:  48%;
}

#area-novel ul li:nth-child(2n) {
    margin-right: 0%;
}	
	
#area-novel ul li:nth-child(3n) {
    margin-right: 0.7%;
}	

#novelty-list{
	display:flex;
	flex-wrap: wrap;
	padding:0px 1rem;
}

#novelty-list li{
	width: 32.3%;
    margin: 0 1.5% 1.5% 0;
}
	#novelty-list li:nth-child(5),#novelty-list li:nth-child(10),#novelty-list li:nth-child(3){margin: 0 1.5% 1.5% 0;}
#novelty-list li:nth-child(3),#novelty-list li:nth-child(6),#novelty-list li:nth-child(6),#novelty-list li:nth-child(9),#novelty-list li:nth-child(12),#novelty-list li:nth-child(15){
	margin:0 0rem 1rem 0;
}
	
#sample figure:target img,
#sample02 figure:target img{
	width:80%;
}
	
	.mini_txt {
		font-size: 80%;}
	
.speImg{
    margin-bottom: 1.3rem;
}
	
.subTxt,#novelty .triangle01 h4{
    font-size: 1.4rem;margin-bottom: 1.2rem;}
	
	
.btnbox a {
	width:80%;
}	


/*フェア対象コミックス*/
	
#syoei-list li:nth-child(2n) {
    margin-right: 0%;
}	
	
	
	#syoei-list li {
    margin: 0 5% 5% 0;
    width: 46%;
}
	
#comics #title img{width:40%;}	
#comics-list li{
	margin:0 0 1rem 0;
}
#comics-list li a{
	padding:2rem 4rem 2rem 2rem;
	font-size:80%;
	line-height:1.5;
	border:3px solid #0cb871;		
}
	
	.small2 {
    margin: 4rem 2rem;
}
	
/*小コレ！参加書店*/
#shoplist{
	background-size:50px;
}
	
	

#shoplist #title{
    text-align: center;
	background-size: 2%;
}
#shoplist #title img,#novelty #title img,#comics #title img{
    width: 55%;
}


.select-division{width:80%;}
	
.division li{
	margin:0 1rem 0 0;
	font-size:80%;
}
	
.dataList li{
	padding:1rem;
	font-size:80%
}
.dataList .number{text-align:left;}
	
#copyright{text-align:left;}
	
}