/*  Typo
----------------------------------------------- */

a:link, a:visited
{
    text-decoration: underline;
    color:#EC4413;
}
a:active { 	text-decoration: underline; }
a:hover { text-decoration:none; }


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 14px/140% "Trebuchet MS", Verdana, sans-serif; }

p {	font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/*  Layout
----------------------------------------------- */

body {
    background: #333333 url(bg.gif) no-repeat top left;
    padding:35px 0 0 0;
    margin:0;
    font: 16px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container
{
    margin:0 auto;
    width:1000px;
    clear:both;
}

#header
{
    padding:5px 10px;
    background-color:#fff;
    width:100%;
}

#header h1,
#header a
{
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:left;
}

#header a:hover
{
 text-decoration:none;
}


#navigation
{
    width:1000px;
    margin:0 auto;
    padding:10px 0;
}
#navigation img{
    float:right;
}


#content
{
    width:800px;
    padding:70px 100px 100px;
    background-image:url(https://u.jimcdn.com/cms/o/sfb3a095ab77678bc/userlayout/img/content-bg.png?t=1554456557);
}
/*== トップページのみ違う設定 ==*/
.cc-indexpage #content{
    background-image:none;
    width:1000px;
    padding:0;
    /* border-top:solid 2px #fff; */
}

#content h1,#content h2,#content h3,#content h4{
    font-family: "Noto Sans JP";
}

#content h3{
    background-image:url(https://u.jimcdn.com/cms/o/sfb3a095ab77678bc/userlayout/img/h3-bg.jpg?t=1661148196);
    background-repeat: repeat-x;
    height:57px;
}

#sidebar/* フッターの中に配置 */
{
    padding-top:10px;
    width:1000px;
    margin:0 auto;
    text-align:left;
}

#footer{
    clear:both;
    margin-top:10px;
    height:65px;
    background-color:#000;
    border-top:solid 2px #fff;
    color:#fff;
}

#footer .gutter 
{
    height:30px;
    padding:35px 15px 0 90px;
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
    margin:0;
    padding: 0;
    display: flex;
    justify-content:space-between;
}


ul.mainNav1 li,
ul.mainNav2 li
{
    display: inline;
    margin: 0 10px;/*ページ数によって間隔を調整*/	
    padding: 0;
}


ul.mainNav1 li a,
ul.mainNav2 li a
{
    font:normal 30px/140% "Caveat", cursive;
    text-decoration: none;
    display: block;
    color:#999;
}


ul.mainNav1 li a { padding:10px 16px 10px 16px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


ul.mainNav1 a:hover
{
    color:#fff;;
}

ul.mainNav1 a.current {
    font-weight:bold;
    color:#fff;
}


/* pc版非表示 */
.sp-only{
    display:none;
}

/*=== 日本語・英語切り替えボタン ===*/
.j-e span{
     background-color:#fff;
     padding:2px 10px;
}
.j-e a{
     background-color:#ccc;
     padding:2px 10px;
     text-decoration:none!important;
}
.j-e a:hover{
     background-color:#fff;
}

.j-e_l{
     border:solid 1px #666;
     border-radius:10px 0 0 10px;
     border-right:none;
}
.j-e_r{
     border:solid 1px #666;
     border-radius:0 10px 10px 0;
}

/*===== トップスライダー =====*/
#slide {
width:800px;
height:514px;
margin:0 auto;
position:relative;
}
#slide img {
position:absolute;
left:0;
top:0;
}


/*=== トップNEWS ===*/
.news-title{
     background-image:url(https://u.jimcdn.com/cms/o/sfb3a095ab77678bc/userlayout/img/news-bg.jpg?t=1647831121);
     background-repeat:repeat-x;
     margin:0 2em;
}
.news ul{
     list-style: inside;
     margin-left:1em;
     padding:0;
     color:#fff;
     text-indent:-1em;
}
.news li a{
     color:#fff;
}
.news li{
     border-bottom:dashed 1px #666;
     padding-bottom:1em;
     padding-top:1em;
}

/*=== Composerお知らせ欄 ===*/
.comp_oshirase{

}
.comp_oshirase img{
     max-width;100%;
}

#cc-matrix-2674576484{
     border:solid 1px #666;
     padding:1em;
     height:430px;
     overflow-y: scroll;
}


/*=== ボタン ===*/
.j-calltoaction-link-style-1{
     background-color:#056FB8!important;
     border:0!important;
}




/*=== オペラ　ページをめくる設定 ===*/
#flipbook-z{
  width: 1280px; /* flipbook自体の横幅なのでimgは半分 */
  height: 900px ;
  margin: 0; /* 一番左端だとたまに見切れるので適当に移動 */
  position: relative;
  z-index: 100;
}
#flipbook-z img{
   width:640px;
}

#flipbook{
  width: 800px; /* flipbook自体の横幅なのでimgは半分 */
  height: 565px ;
  margin: 0; /* 一番左端だとたまに見切れるので適当に移動 */
  position: relative;
  z-index: 100;
}
#flipbook img{
   width:400px;

}


/*===ズーム===*/
img[data-action="zoom"] {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
}
.zoom-img,
.zoom-img-wrap {
  position: relative;
  z-index: 666;
  -webkit-transition: all 300ms;
       -o-transition: all 300ms;
          transition: all 300ms;
}
img.zoom-img {
  cursor: pointer;
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
}
.zoom-overlay {
  z-index: 420;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  filter: "alpha(opacity=0)";
  opacity: 0;
  -webkit-transition:      opacity 300ms;
       -o-transition:      opacity 300ms;
          transition:      opacity 300ms;
}
.zoom-overlay-open .zoom-overlay {
  filter: "alpha(opacity=100)";
  opacity: 1;
}
.zoom-overlay-open,
.zoom-overlay-transitioning {
  cursor: default;
}


/*===== モーダルウィンドウ =====*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0,0,0,0.6);

  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

body.modal-open {
  overflow: hidden;
}

.modal-content {
  background: #fff;
  width: 90%;
  max-width: 600px;
  /* margin: 10% auto; */
  margin: 0;
  padding: 20px;
  position: relative;
  border-radius: 8px;
  max-height: 80vh;
  overflow-y: auto;
}

.js-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 24px;
}

.modal ul{
  margin: 20px 10px;
}
.modal li{
  margin-bottom:10px;
}

.modal-book {
    width: 95vw;
    max-width: 1600px;
    /* height: 95vh; */
    overflow-x: hidden;
}

/*===== ページめくり StPageFlip =====*/
#book {
    width: 550px;
    height: 733px;
    margin: 0 auto;
}

#book .page {
    background: #fff;
}

#book .page img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}