@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 ;text-align:center;  }
.ray::after {
  content: "";
  display: block;
  clear: both;
}
.ray a { display:inline-block; text-align:center;z-index:1; float:left;width:100%; }
.ray img{ width:100%;}
.ray a { width: calc(100% / 2); }

.f02{ width:60%!important;}


@media screen and (max-width:1000px){
.ray a { width:100%;}
.f02{ width:100%!important;}
}

/*.yoji{background:#ed82a0!important; }
.tei {background:#ef8047!important; }
.kou {background:#185e9d!important; }
.otona {background:#598135!important; }
*/
.yoji , .tei , .kou , .otona{font-size:18px!important; padding:6px 6px 6px 15px !important;font-weight:bold!important; 
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI semibold", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;;}



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


div#main-contents{ float:left; width: calc(100% - 300px);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%; }
#contents{padding:0px; }
}

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

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

#sidebar ul { padding:15px 15px 0px 15px ; }
#sidebar section { padding-bottom:20px ;  }




#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 {  }
#sidebar li a{ float:left  ;width:49%}
#sidebar section{ text-align:center; display:inline-block ;width:100%;background:#f5f3f2; margin-bottom:0px ;  }
.side01, #sidebar h3{ border-radius: 0px  ; }

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

@media only screen and (max-width:600px){
#sidebar li a{ float:left  ;width:100%}

}

/* ------------------------------------------
   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']   { float:left;margin:3px 10px 3px 3px ;
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;
}


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



.share {float:right; width:300px; text-align:center; }
.share p img{  width:80%;}
.share img{width:85px;}
.share a:nth-child(3){margin:0px 5px; ;}

@media only screen and (max-width: 600px){
.share p img{  width:50%;}
.share {width:100%;  }

}


.course {
margin-left: calc(25% - 110px);
padding-left:120px;
text-align:left; line-height:170%; position: relative;

}
.course input[type='radio']  {margin-bottom:50px;}
.ossm:before {
content: "";
position: absolute;
top:-5px;
left: 30px;
width: 70px;
height: 40px;
background: url(https://skygarden.shogakukan.co.jp/sol/books/img/osusume.png) 0 0 no-repeat;
background-size: 70px; 41px;
}



@media screen and (min-width:800px) and ( max-width:1124px) {
.course { 
margin-left: calc(18% - 100px);
padding-left:110px;
}

}

@media only screen and (max-width: 800px){
.course {
margin-left: 3%;
padding-left:90px;
}
.ossm:before {left: 0px;]

}}

@media only screen and (max-width: 600px){
.course {
margin-left: 2%;
padding-left:75px;
}
.ossm:before {left: -5px;]

}}








#kou , #kou02 { background-image: url(https://skygarden.shogakukan.co.jp/sol/books/kou01/back.png); background-size:100%;padding:20px; }
#kou li p , #kou02 li p { border-bottom:#CEDFF3 3px dotted;}

#kou span {color:#185e9d}



#kou02 li p { min-height:80px!important;}
#kou02 li { padding:10px 0px 10px 0px }
#kou02 table img{ box-shadow: 2px 3px 5px rgba(0,0,0,0.5); }


.otn table td{padding:10px; }
@media only screen and (max-width: 800px){
.otn table td{display:block; }
}




#tei { background-image: url(https://skygarden.shogakukan.co.jp/sol/books/tei01/back.png); background-size:100%;padding:20px; }
#tei li p { border-bottom:#fbd98c 3px dotted;}


#yoji , #yoji01 { background-image: url(https://skygarden.shogakukan.co.jp/sol/books/yoji01/back.png); background-size:100%;padding:20px; }
#yoji li p ,#yoji01 li p { border-bottom:#F4B4D0 3px dotted;}
#yoji01 p{ min-height:40px;}

.otn { background-image: url(https://skygarden.shogakukan.co.jp/sol/books/otona/back.png); background-size:100%;padding:20px; }

.otn span{display:inline-block;font-size:15px;color:orange;font-weight:bold ;padding-bottom:10px}

.otn ul { background-color: #fff ; padding:10px;border-radius: 20px; display:flex;overflow:auto;flex-wrap:wrap;margin-bottom:40px;}
.otn * { 
  font-family: Meiryo,  "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", sans-serif;}

.otn li {width: calc(100% / 6); text-align:center; padding:10px 0px 25px 0px ;}
.otn ul > img { padding-right:40% }
.otn li a img { box-shadow: 2px 3px 5px rgba(0,0,0,0.5); max-height:140px; }
.otn li div { text-align:left;padding:10px; font-size:13px}
.otn li b { display:block; width:100%;font-size:14px;text-align:center; font-size:14px}
.otn li a { height:170px; display:block; padding:0px 10px}
.otn li p { min-height:95px;border-bottom:#e8f1d1 3px dotted;padding-bottom:10px;font-size:13px}
.otn a:hover{text-decoration: none; }
.otn a:hover img{ opacity: 1;}

.otona_c a{width:50%!important;}

.otn h1{width:100%;float:left; font-size:15px; font-weight:bold;padding:15px 5px 30px 5px ;text-shadow: 1px 1px 2px #fff, 0 0 1em #fff, 0 0 0.2em #fff;}

.otn ul h1{width:100%; font-size:17px; font-weight:bold;padding:5px 5px 30px 35px }


.otext1{width:60%}



@media screen and (min-width:1125px) and ( max-width:1300px) {
.otn li { width: calc(100% / 4); }
.otext1{width:55%}
}
@media screen and (min-width:1000px) and ( max-width:1124px) {
.otn li { width: calc(100% / 3); }
.otn li a { height:160px;}
.otext1{width:100%}
.otext2{width:100%}
.otn ul > img { padding-right:30% }
}
@media screen and ( max-width:1000px) {
.otn ul h1{ padding:5px 5px 30px 15px }
}
@media screen and (min-width:768px) and ( max-width:999px) {
.otn li { width: calc(100% / 2); }
.otn li a { height:140px;}
.otext1{width:100%}
.otext2{width:100%}
.otn li p { background-color: #fff ;padding-top:10px }
.otn li p { min-height:100px;}
.otona_c a{width:100%!important;}
.otn ul > img { padding-right:0% }
}
@media only screen and (max-width: 767px){
.otn li { width: calc(100% / 3); }
.otn li a { height:160px;}
.otext1{width:100%}
.otext2{width:100%}
.otona_c a{width:100%!important;}
.otn li div { font-size:14px}
.otn ul > img { padding-right:0% }
}
@media only screen and (max-width: 600px){
.otn li { width: calc(100% / 2); }
.otn li a { height:160px;}
.otext1{width:100%}
.otext2{width:100%}
.otn { padding:10px;}
.otn ul { padding:10px;}
.otn li p b { font-size:17px}
.otn li p { font-size:13px; min-height:120px;}
.otn li div { font-size:15px}
div#main-contents{padding:10px; }
#contents{ margin:0px!important; }
.otn ul > img { padding-right:0% }

}







/*    ーーーーーーーー2025/06追加ーーーーーーー    */

.bas select{color:#595656;font-size:13px}
.bas div label{display:inline-block;padding:15px; background:#fff;}



img[name='otodoke'] { position:relative;top:-1px; }
select[name="jbs_ex_mm"],select[name="jbs_ex_yy"]{ width:80px!important}

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

.basket img{ width: 170px!important;}
img[name='otodoke'] { width:200px!important; height:40px!important; }
form[name='order'] img{ width:200px!important; height:40px!important;}
.hidden_box label{height:33px!important ;}

table.bas input[type='text'] { max-width:250px;  }

}
@media only screen and (max-width: 700px){
.basket , .basket p{ line-height:15px!important;}
}

@media only screen and (max-width: 500px){
.basket img{ width: 150px!important;}
.basket , .basket p{ line-height:13px!important;font-size:11px!important}
.hidden_box label{height:29px!important ;}



table.bas2 tr:nth-child(1) td{ font-size:10px!important}
table.bas2 td:nth-child(2) { width:220px;}

table.bas2 td:nth-child(7) { width:20px!important ;text-arign:right ;}/*削除*/


table.bas2 input[type='text'] {
width:50px!important; 
height: 22px!important;
}

table.bas2 select  { width:40px!important; }
table.bas select , table.bas2 select{
	background: url(https://www.bookshop-ps.com/img/arrow02.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#fff 100%);
	background-size: 10px!important, 100%!important;
margin: 0px!important;  padding:5px!important
}
}
/*    ーーーーーーーー2025/06追加ーーーーーーー    */

.s_guest { width:400px; display:block; font-size:17px;letter-spacing: 1px; padding:10px; ;text-align:left;background:#fff;margin-top:15px;margin-top:15px;font-weight:bold;color:#666;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;}



/*font-weight:bold;font-weight: 600;*/

.s_login {  background: #e60000; text-align:center;padding:15px ;}

.s_login div {  display: inline-block;width:100%;
background: #fff; text-align:center;padding:25px ; border-radius: 30px;
color:#666;font-size:18px;font-weight: 600;
font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif;
}
.s_login hr {
  height: 0;

  padding: 0;
  border: 0;
width:350px; border-top: 2px solid #dad691;margin:15px 0px; display: inline-block;}

.s_login p {  border-radius:65px;border: solid 8px #e60000; display: inline-block;}

.s_login span {
  position: relative;
  top: 0;
  display: inline-block;
  padding:25px 20px; letter-spacing:0.1rem; 
  background: #e60000;
  border-radius: 50px;
  font-size: 25px; color: #fff;font-weight:bold;
  text-decoration: none;
  transition: .2s ease-in-out;
border: solid 5px #fff; 
}

.s_login img {height: 95px; margin-bottom:10px}
 a .s_login:hover { opacity: 0.6;   transition:all .3s; }
 a .s_login:hover img { opacity: 1; }
.s_login a:hover {text-decoration:none;}


/*.s_login a:hover {
  top: 5px; 
  box-shadow: 0 0 #4C0F13;
}
*/


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

.s_login div { font-size: 15px; padding:25px 15px; }
.s_login span {   font-size: 18px; padding:10px;   ;}

.s_login hr {width:70%; }
.s_guest { width:100%;padding:0px;  }


}



.hidden_box, .hidden_box p {
    margin: 0;
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
display:block;color:#000;line-height:45px;
    cursor :pointer;
    transition: .5s;
/*border-bottom: solid 2px #595656; */
}
.hidden_box label img{ margin-right:10px }
/*アイコンを表示*/
.hidden_box label:before {
}

/*ボタンホバー時*/
.hidden_box label:hover {
    opacity: 0.6;
}

/*チェックは見えなくする*/
.hidden_box input[type=checkbox] {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked + label + .hidden_show {
    padding:  0;
    height: auto;
    opacity: 1;
}

@media only screen and (max-width: 455px){
/*ボタン装飾*/
.hidden_box label {

}

}

#catalog1 img{ width:100%;margin-bottom:20px}


.c_course {padding:0px;}
.c_course td:nth-child(1) {width:60%;padding-bottom:0px;}
.c_course td:nth-child(2) { ;padding-top:30px;white-space:nowrap;
font-size:14px;vertical-align:middle;}

@media screen and (min-width:1000px) and ( max-width:1300px) {
.c_course td {width:70%!important;background: #fff;}
}

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

.c_course td:nth-child(2) { padding-left:55px; padding-top:0px;}
}

@media only screen and (max-width: 1000px){
.c_course td {width:100%!important;}

}



@media screen and (min-width:0px) and ( max-width:1300px) {

.c_course td { display:block;}
.c_course td:nth-child(2) { font-size:13px;}
}