@charset "utf-8";
/* CSS Document */

body{ _behavior:url("/sol/css/csshover2.htc"); /* for IE6 */ }

*:first-child+html body{ position:relative; /* for IE7 */ }


/* ------------------------------------------
    header
------------------------------------------ */
div#header{ margin:0 auto; padding:0 ; width:100%; text-align:center; }
div#header p{ text-align:left; width:100%;display:inline-block; }
div#header p img{ height:85px }



/* ------------------------------------------
   home
------------------------------------------ */
div#home-contents{ float:left; width:70%; text-align:left; padding:0px ; }
.ray { padding:10px 0px 10px 5px ;  }
.ray a { display:inline-block; position: relative; margin:5px 0px 5px 5px ;
width:165px;; height:60px;text-align:center;z-index:1
}
.ray a img{width:126px;margin:5px;}
.ray a img:nth-child(2){width:auto;height:50px;margin-bottom:15px;}
@media only screen and (max-width: 768px){
.ray { text-align:center; }
}

.toku:before {
content: "";
position: absolute;
top: -10px;
left: -5px;
width: 60px;
height: 40px;
background: url(https://skygarden.shogakukan.co.jp/sol/images/present.png) 0 0 no-repeat;
background-size: 100%, 100%; z-index:2}


/* ------------------------------------------
    main-contents   background:#fff; 
------------------------------------------ */


div#main-contents{ float:left; width:70%; text-align:left; background:#fff; padding:20px; display:inline-block;
}
table { width:100%; }


@media only screen and (max-width: 768px){
div#main-contents , div#home-contents {  width:100%; }
}

div#main-contents b { margin-right:20px }

/* ------------------------------------------
   right-side
------------------------------------------ */

#sidebar ul { padding:15px 15px 0px 15px ; }
#sidebar section { padding:0px!important ; margin:0px!important ;  }




#sidebar li a{ font-size:13px ; line-height:16px; color:#fff;  text-align:center; display:inline-block; width:100%; white-space:nowrap; margin:1px; 
padding:5px;  border-radius: 3px  ; -ms-border-raduis: 3px;
 background:#5696b9; } 

#sidebar li  a:hover
 { background:#9ad6f7; text-decoration: none;  }

.kanren {background:#fff; padding-bottom:5px; border-radius: 5px  ; -ms-border-raduis: 5px;}
.kanren img {max-width:90%;margin:10px ; }
/*.kanren p{width:100%;padding:0px }*/


.side01 .title, .kanren .title{  border-radius: 5px 5px 0px 0px  ; -ms-border-raduis:5px 5px 0px 0px; }
.side01{margin:20px 0px;  display:inline-block;  background:#fff;   border-radius: 5px  ; -ms-border-raduis: 5px; }
.side01 div{  margin:5px; text-align:left; clear:both; display:inline-block;
vertical-align:middle; padding-bottom:5px;   background:#fff; }

.side01 div:not(:last-child) { border-bottom:#bfbfbf 1px solid;}
.side01 div a img{ width:37%;float:left ; padding:0px 0px 10px 0px ; margin:0px!important ;  }
.side01 div p { width:60%;float:right ;  margin:2px 0px ;text-align:left!important;}
.side01 div a {font-size:12px;line-height:16px;; color:#434343; }

@media only screen and (max-width:768px){
.kanren {background:#f5f3f2; }
.kanren img {max-width:250px }
#sidebar li a{ float:left  ;width:49%}
#sidebar section{ text-align:center;  display:none }
.side01, #sidebar h3{display:none}

#sidebar ul{ text-align:center;   }
.kanren  {padding-top:10px ; }
.kanren p {padding:0px 40px ; }
}




/* ------------------------------------------
   magazines
------------------------------------------ */
#main-contents div img{max-width:100%; margin-bottom:10px}

.p20 {vertical-align:top;padding-right:20px}
.p20 img{ float:left; }
.pimg { margin:0px 5px 0px 0px ; width:80px; float:left; }

.p20 center a { font-size:13px ; line-height:16px; color:#ffffff;   width:100%;
text-align:center; display:inline-block; white-space:nowrap; float:left;
margin-top:10px; padding:5px;  border-radius: 3px  ; -ms-border-raduis: 3px;
 background:#595656; } 

.p20 center a:hover
 { opacity: 0.7; transition:all .4s ;text-decoration: none;  }



.text01{
display:inline-block; padding:10px 0px 0px 0px ;
font-size:18px; font-weight: bold; color:#434343;
}

.text02{ display:inline-block; padding:10px 0px 10px 0px; font-size:13px;    }

.text03{ font-size:15px;  color:#0000C7; font-weight: bold ; padding:10px 0px 0px 60px ; display:inline-block;
position:relative;
}





.text03:before {
content: "";
position: absolute;
top: 6px;
left: -10px;
width: 70px;
height: 45px;
background: url(https://skygarden.shogakukan.co.jp/sol/images/present.png) 0 0 no-repeat;
background-size: 100%, 100%; z-index:2}


/*  tbl-mag-01
------------------------------------------ */

table.tbl-mag-01{ margin:20px 0px ; border:#595656 1px solid;
font-size:14px;line-height:40px; padding:15px 15px 15px 5px }

.tbl-mag-01 img {max-width:230px!important; float:right; margin-top:10px}
table.tbl-mag-01 b { font-size:16px ; }
table.tbl-mag-01 select { line-height:20px ; }

table.tbl-mag-01 select:nth-child(1) { width:60%; }
table.tbl-mag-01 select:nth-child(2) { width:37.5%; float:right;  margin-right:0px}

@media only screen and (max-width: 968px){
table.tbl-mag-01 select:nth-child(1) { width:100%;  }
table.tbl-mag-01 select:nth-child(2) { width:100%; margin-top:10px; float:none; }

}



/*  tbl-mag-02
------------------------------------------ */
table.tbl-mag-02{  margin:10px 0px ; border-bottom:#dcdcdc 1px solid; }
table.tbl-mag-02 th:nth-child(1){ background-color:#fff;}
table.tbl-mag-02 th:nth-child(2){ background-color:#595656;
color:#ffffff;  padding:8px 5px 8px 10px;  }

table.tbl-mag-02 td:first-child { background-color:#eee;
border-left:#dcdcdc 1px solid; }
table.tbl-mag-02 td:nth-child(2) { border-right:#dcdcdc 1px solid; }
table.tbl-mag-02 .c2{ padding:8px ;  }
table.tbl-mag-02 td{
vertical-align: middle; padding:5px!important; border-top:#dcdcdc 1px solid;
}


/*  tbl-mag-03
------------------------------------------ */
table.tbl-mag-03{
border-top:#dcdcdc 1px solid;
border-left:#dcdcdc 1px solid;
margin-bottom:10px
}
table.tbl-mag-03 td{ 

border-right:#dcdcdc 1px solid;
border-bottom:#dcdcdc 1px solid;
border-right:#dcdcdc 1px solid;
padding:5px;

}
table.tbl-mag-03 tr:nth-child(1) td{ background-color:#595656; color:#fff;}




.size1{font-size:13px; line-height:20px ;}


input   { line-height:20px;
padding: 2px 2px;
margin: 0px 3px 0px 0px;
border: solid 1px #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #eee;
outline: 0;
}

input[type='text']{ margin-left:5px ; }
input[type='checkbox'] , input[type='radio']  {
 margin:0px 5px 5px 5px ; padding:0; 
}

input[type='checkbox']   {
width:19px; 
height:19px;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid #333;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input[type="checkbox"]:checked {
  border:none;transition:all .2s ;
  background-image: url("https://skygarden.shogakukan.co.jp/sol/images/check.gif");
  background-repeat: no-repeat;
  background-size: cover;
}

input[type='radio']   {
width:19px; 
height:19px;
  position: relative;
  display: inline-block;
  border-radius: 10px;
  border: 1px solid #333;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
}
input[type="radio"]:checked {
width:19px; 
height:19px;
  border:none;transition:all .2s ;
  background-image: url("https://skygarden.shogakukan.co.jp/sol/images/radio.gif");
  background-repeat: no-repeat;
  background-size: cover;
  border: 0px solid #c5051b
}



input[type='checkbox']{ margin:5px 5px 0px 5px ; }

select {	
margin:0px 5px;  padding: 5px 30px 5px 10px; height: 30px; 
line-height:20px; font-size:14px;
border: solid 1px #dcdcdc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: #fff;
	background: url(https://skygarden.shogakukan.co.jp/sol/images/arrow01.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#fff 100%);
	background: url(https://skygarden.shogakukan.co.jp/sol/images/arrow01.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#fff 100%);
	background-size: 20px, 100%;
}


@media only screen and (max-width: 768px){
input{clear:both}

}


/*  tbl-basket-01
------------------------------------------ */
table.tbl-basket-01{
margin-bottom:45px;
padding:5px;
border-bottom:#cccccc 1px solid;
}
table.tbl-basket-01 td{ text-align: center; }




/*  .tbl-basket-02 
------------------------------------------ */

table.tbl-basket-02{ margin-bottom:45px; padding:5px 0px; line-height:20px }
table.tbl-basket-02 td{ vertical-align:top;padding:5px 0px;}
table.tbl-basket-02 img {width:250px; }
table.tbl-basket-02 td:nth-child(1) {font-weight:bold; }
table.tbl-basket-02 table td:nth-child(1){font-weight:normal; }

.tbl-basket-02 a:hover{ opacity: 0.5; cursor: pointer;}
.tbl-basket-02 input[type='radio']  { float:left;  }
.tbl-basket-02 input[type='text'] ,
.tbl-basket-03 input[type='text'] { margin-bottom:3px;  }
ul.tbl-basket-02 {width:100%!important; padding-bottom:45px; display:inline-block; } 

ul.tbl-basket-02 li a:nth-child(1)  {width:80%;float;left; }
ul.tbl-basket-02 li a:nth-child(2)  {width:20%;float;right; font-size:14px;text-align:right; white-space:nowrap;	background: #fff;}
#main-contents table:nth-child(9) table td {padding:5px}
#main-contents table:nth-child(12) li
 { float:left; width:25% ; line-height:30px;font-weight:normal;background: #fff;}
#main-contents table:nth-child(12) font:nth-child(3)
 { font-weight:normal; background: #fff;}





@media only screen and (max-width: 768px){
ul.tbl-basket-02 li a:nth-child(1)  {width:100%;float;left; clear:both; }
ul.tbl-basket-02 li a:nth-child(2)  {width:100%;height:40px;;display:table-cell;padding:0px}
}
@media only screen and (max-width: 900px){
#main-contents table:nth-child(9) table td
 {float:left; display:block; white-space:nowrap;clear:both;	}
#main-contents table:nth-child(9) {margin-bottom:0px}

}
@media only screen and (max-width: 600px){
#main-contents table:nth-child(12) li  { float:left; width:33% ; }
#main-contents table:nth-child(12) { margin-bottom:30px ; }
}


/*  .tbl-basket-03 
------------------------------------------ */

table.tbl-basket-03{ margin-bottom:45px; line-height:20px ;}
table.tbl-basket-03 td:nth-child(1){ white-space: nowrap; }
table.tbl-basket-03 td{ padding:5px 0px; }
table.tbl-basket-03 td:nth-child(1){ }
table.tbl-basket-03 td:nth-child(2){ padding-left:5px;}

table.tbl-basket-03 tr:nth-child(11) td ,
table.tbl-basket-03 tr:nth-child(15) td , 
table.tbl-basket-03 tr:nth-child(16) td ,
table.tbl-basket-03 tr:nth-child(17) td  {background:#fff; }

table.tbl-basket-03 td:nth-child(1){font-weight:bold; }
table.tbl-basket-03 tr:nth-child(12){display:none; }
table.tbl-basket-03 tr:nth-child(16){display:none;marign-bottom:5px}
table.tbl-basket-03 tr:nth-child(20) td { background:#e9e9e9; padding:10px; font-weight:normal!important; }
table.tbl-basket-03 tr:nth-child(10) font{ font-weight:bold; ;}
/*
.tbl-basket-03 .size1{font-weight:bold; ;}
*/

table.tbl-basket-03 td:nth-child(2) font ,
table.tbl-basket-02 td:nth-child(2) font { color:#333; }

table.tbl-basket-03 tr:nth-child(7) td:nth-child(2){  }
table.tbl-basket-03 tr:nth-child(7) td:nth-child(2) br {  }




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

table.tbl-basket-03 td{display:block;  }
table.tbl-basket-03 tr:nth-child(10) td ,
table.tbl-basket-03 tr:nth-child(2) td ,
table.tbl-basket-03 tr:nth-child(12) td  ,
table.tbl-basket-03 tr:nth-child(13) td  ,
table.tbl-basket-03 tr:nth-child(14) td 
{ display:inline-block; }

table.tbl-basket-03 td:nth-child(1){padding:10px 0px 0px 0px!important; }
table.tbl-basket-03 td:nth-child(2){padding:0px!important; }
table.tbl-basket-03 tr:nth-child(20) td{ margin-top:10px;padding:10px!important;background:#e9e9e9; }
table.tbl-basket-03 table td{display:table-cell; }



}



/*  .tbl-basket-04 
------------------------------------------ */

table.tbl-basket-04  { padding:10px 0px 50px 10px ;background:#fff; }
table.tbl-basket-04 td { line-height:23px }
table.tbl-basket-04 td:nth-child(1){width:20px; }

.tbl-basket-04 li { float:left; width:25% ;}
.tbl-basket-04 input[type='radio']  { float:left;clear:both; margin-top:7px;}
.tbl-basket-04 label  { float:left; width:80% }

.tbl-basket-04 .size1{line-height:35px}
@media only screen and (max-width: 900px){
table.tbl-basket-04 li { float:left; width:33% }
}

.bktimg{vertical-align: middle; margin:10px 10px 10px 0px; }
table.tbkt td{padding:0px 0px 10px 0px; }
table.tbkt td:nth-child(1){width:120px}


.roll_table {}
.roll_table td:nth-child(1){ text-align:right }
.roll img {width:250px ; }

@media only screen and (max-width: 550px){
.roll img {width:96% ;max-width:250px !important; }
}

/* ****************
 * Open modal button (trigger)
 * *************** */

.md-btn-area {   margin-bottom:50px;}
.md-btn {   cursor: pointer;  font-size:12px ; color:#fff; float:left; 
border-radius: 3px  ; -ms-border-raduis: 3px; padding:5px 7px;
background: #a9a9a9;margin:2px 3px 2px 0px }
.md-btn:hover {  color:#fff;  transition:all .3s;  text-decoration:none;}

/* ****************
 * Modal window
 * *************** */
.modal {
  opacity:0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  z-index:1000;
  color: #000;
  text-align: left;
  font-size: 13px;
line-height:22px;
  -webkit-transition: opacity .4s linear;
  transition: opacity .4s linear;
  -webkit-transform: translate(0,100%);
  -ms-transform: translate(0,100%);
  transform: translate(0,100%);
}
/* Modal content */
.modal-inner {
  position:relative;
  margin:60px 5% 5%;
  padding:20px 20px 20px 20px ;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
  box-shadow: 0 0 15px rgba(0,0,0,0.8);
  border-radius:10px;
  background-color:#fff;
  z-index:10;
}
.modal h2 {
  border-bottom:1px solid;
  padding-bottom:20px;
}


/* ****************
 * Modal close button
 * *************** */
.modal .close {
  display:block;
  position: absolute;
  top: 0;
  left 0;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,.74);
  z-index:1;
}
.modal .close span {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 40px;
  height: 40px;
/*  background-color: rgba(255,255,255,.5);*/
  cursor:pointer;
}
.modal .close span {
  text-indent: -9999px;
}
.modal .close span:before,
.modal .close span:after {
  content: "";
  position: absolute;
  top: 4px;
  border: 2px solid #fff;
  height: 30px;
}
.modal .close span:before {
  left: 18px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.modal .close span:after {
  right: 18px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* ****************
 * Append modal(target id)
 * *************** */
#modal1:target,
#modal2:target,
#modal3:target,
#modal4:target,
#modal5:target,
#modal6:target,
#modal7:target,
#modal8:target,
#modal9:target,
#modal10:target,
#modal11:target,
#modal12:target,
#modal13:target,
#modal14:target,
#modal15:target,
#modal16:target,
#modal17:target,
#modal18:target,
#modal19:target,
#modal20:target,
#seven:target,
#seven2:target,
#yamazaki:target,
#yamazaki2:target,
#circleK:target,
#circleK2:target,
#famima:target,
#famima2:target,
#lowson:target,
#lowson2:target,
#seiko:target,
#seiko2:target,
#yubin:target,
#yubin2:target,
#yubin3:target,
#yubin4:target,
#card:target,
#card2:target,
#hurikomi:target
 {
  opacity: 1;
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
}




.modal-inner h1{    font-size:16px;line-height:19px;color:#333333;white-space:nowrap}




.modal ul i{
display:block;
padding:5px 5px 5px 10px ;
background-color:#888;color:white;
    list-style: none;
}
.modal ul p{
background-color:#ededed;
padding:10px;
}



#modal5 ul,#modal6 ul {
    padding-left: 13px;
    list-style: disc outside;
    margin: 0;text-align: left;
}
#modal5 li,#modal6 li {background: transparent;
  font-size: 13px;
line-height:22px;
    margin: 0px 0px 3px 0px ;
    padding: 0px 0px 0px 0px;
}
#modal5 ol,#modal6 ol {
    margin: 0;color:red;
    padding-left: 15px;
    text-align: left;
    list-style-type: decimal;
}













/* ****************
 * floatingButtons
 * *************** */

#floatingButtons {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 20px;
    color: #ffffff;
    text-align: center;
    font-size: 19px;
    z-index: 1000;
}
#floatingButtons .toTopButton {
    position: relative;
    width: 56px;
    height: 56px;
    -webkit-user-select: none;
    user-select: none;
}
#floatingButtons .toTopButton div {
    cursor:pointer;
    position: absolute;
    width: 56px;
    height: 56px;
    bottom: 0;
    right: 0;
    line-height: 1.4;
    padding: 15px 0 ;
      background-color: rgba(89,86,86,1);

    border-radius: 28px;
    border-radius: 28px ;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
#floatingButtons .toHomeButton {
    position: relative;
    width: 55px;
    height: 55px;
    -webkit-user-select: none;
    user-select: none;
}
#floatingButtons .toHomeButton div {
    cursor:pointer;
    background:  rgba(0,0,0,.74) url(https://www.bookshop-ps.com/sp/images/icn_shop.png) 50% 40% no-repeat;
    color:#bf0000;
    position: absolute;
    width: 42px;
    height: 14px;
    top: 0;
    right: 0;
    padding: 28px 0 0 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}


#floatingButtons .toCloseButton {
    position: relative;
    width: 55px;
    height: 55px;
    -webkit-user-select: none;
    user-select: none;
}
#floatingButtons .toCloseButton div {
    cursor:pointer;
    background:  rgba(0,0,0,.74) url(https://www.bookshop-ps.com/sp/images/icn_close.png) 50% 40% no-repeat;
    color:#bf0000;
    position: absolute;
    width: 42px;
    height: 14px;
    top: 0;
    right: 0;
    padding: 28px 0 0 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}




/* ****************
 * floatingButtons
 * *************** */












#topicpath {display:none}


.text04{ font-size:18px; line-height:33px; font-weight: bold; padding:20px 0px 50px 0px ;display:inline-block;text-align:center; width:100%}


.text05 { color:#C70000!important; }

.text06 { color:#0000C7; }

.text05 , .text06
{ vertical-align:middle; font-size:14px; font-weight: bold; }


.text07{ vertical-align:middle; font-size:11px; color:#C70000; line-height:25px
}
.text08{ vertical-align:middle; font-size:11px;  }
.text09{ font-size:11px;  color:#BC2323; padding-left:140px ; display:inline-block; 
		position: relative;
		top: -20px;
		right: 10;}
.text09{ display:none; }


.text10{ font-size:14px;    }
.text10 a { color:#C70000; text-decoration: underline; }

table.cel10 td{ padding:5px; }

.bnam{line-height:30px}

.link_line {  }

/*  lay
------------------------------------------ */
div#main-contents div.lay{

margin-top:10px;
position:relative;
}

div#main-contents div.lay ul.btn{
position:absolute;
top:-10px;
left:-10px;
}

div#main-contents div.lay ul.btn2{
position:absolute;
top:-10px;
left:10px;
}





/*.hidden_show table{width:80%}

*/
.hidden_box > input[type="checkbox"]  {
    display: none;
}


.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}


.hidden_box .hidden_show2 {
    height: 0;
    padding: 0;

    opacity: 0;
    transition: 0.8s;
}


.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

/*
.hidden_box label {
width:389px; height:50px;display:block;
background:url("https://skygarden.shogakukan.co.jp/sol/images/scargog01.png") no-repeat 0px;
    cursor :pointer;
}

.hidden_box label:hover {
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha(opacity=50)";
}

*/






#red {font-size:22px;color:red;font-weight:bold;text-decoration:none;}