@charset "UTF-8";

/* Roboto */
@font-face {
    font-family: "Roboto Custom";
    font-weight: 100;
    src: local("Roboto-Thin"), url("//themes.googleusercontent.com/font?kit=MMDEOSa6i6T9gBocjYCJkQ") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 300;
    src: local("Roboto-Light"), url("//themes.googleusercontent.com/font?kit=d-QWLnp4didxos_6urzFtg") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 400;
    src: local("Roboto-Regular"), url("//themes.googleusercontent.com/font?kit=grlryt2bdKIyfMSOhzd1eA") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 500;
    src: local("Roboto-Medium"), url("//themes.googleusercontent.com/font?kit=7KXg6nyyqN8gyMoNwQ7aOQ") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 700;
    src: local("Roboto-Bold"), url("//themes.googleusercontent.com/font?kit=vxNK-E6B13CyehuDCmvQvw") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 900;
    src: local("Roboto-Black"), url("//themes.googleusercontent.com/font?kit=1_sFLBJZ_MiiGcnkjN_Mgg") format("woff");
}

/* Italic */
@font-face {
    font-family: "Roboto Custom";
    font-weight: 100;
    font-style: italic;
    src: local("Roboto-ThinItalic"), url("//themes.googleusercontent.com/font?kit=jB4HYzUnEmLtjz-UHQe60fesZW2xOQ-xsNqO47m55DA") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 300;
    font-style: italic;
    src: local("Roboto-LightItalic"), url("//themes.googleusercontent.com/font?kit=iE8HhaRzdhPxC93dOdA05z8E0i7KZn-EPnyo3HZu7kw") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 400;
    font-style: italic;
    src: local("Roboto-RegularItalic"), url("//themes.googleusercontent.com/font?kit=biUEjW7P-lfzIZFXrcy-wQ") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 500;
    font-style: italic;
    src: local("Roboto-MediumItalic"), url("//themes.googleusercontent.com/font?kit=daIfzbEw-lbjMyv4rMUUTj8E0i7KZn-EPnyo3HZu7kw") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 700;
    font-style: italic;
    src: local("Roboto-BoldItalic"), url("//themes.googleusercontent.com/font?kit=owYYXKukxFDFjr0ZO8NXhz8E0i7KZn-EPnyo3HZu7kw") format("woff");
}
@font-face {
    font-family: "Roboto Custom";
    font-weight: 900;
    font-style: italic;
    src: local("Roboto-BlackItalic"), url("//themes.googleusercontent.com/font?kit=b9PWBSMHrT2zM5FgUdtu0T8E0i7KZn-EPnyo3HZu7kw") format("woff");
}


@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}

@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}

@font-face{
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}


html {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Original Yu Gothic", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none)  {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}


body{
    margin: 0;
    padding: 0;
    font-family: 'Roboto Custom', "Original Yu Gothic", "Yu Gothic", YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    color: #555555;
    font-weight: 300;
    font-feature-settings : "palt";
}
ul,li{
    list-style: none;
    margin:0;
    padding:0;
}
a{
    color: #00baff;
    text-decoration: none;
}


/*ローディング*/
.loading{
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    padding-top: 30vh;
}
.wrapper{
    display: none;
}




/*段落*/
#jpbox p{
    font-size:1.3rem;
    line-height: 1.4;
    font-family: 'Cormorant Garamond', "Original Yu Gothic", "Yu Gothic", YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", serif;
    text-align: justify;
    text-indent: 2rem;
    hyphens: manual;
}
#jpbox .head3 + p,#jpbox .quote + p,#jpbox .note + p, #jpbox .quote, #jpbox .note > p:first-child{
    text-indent: 0;
}
.text{
      margin: 0 15%;
}
.quote{
    margin: 0 15%;
    padding: 0.2em 2em;
    margin: 1.8em 15%;
    border: none 1px #555;
    border-style: none dotted;
    font-style: italic;
}
.quote .paren:last-child{
  font-style: normal;
}
.note{
    padding: 2rem 0;
    margin: 2rem 15%;
    border: 1px none #7a5924;
    border-style: dotted none;
}
.note p{
    color: #7a5924;
    padding: 0;
    margin: 0;
}
.chubox{
    width: 89%;
    display: inline-block;
    margin: 1rem 0;
    font-size: 0.8rem;
    padding: 1rem 2rem;
    background-color: #f0f0f0;
  }


/* 見出し */
.head2{
    font-size: 2.5rem;
    margin: 40vh 0 2rem 15%;
    font-family:  'Roboto Custom',YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    line-height: 1.5rem;
    font-weight: 900;
}
.head2 span{
    font-size: 1rem;
}
#enbox .head2{
    font-size: 2.6rem;
    letter-spacing: -0.06rem;
}
#jpbox .name,.name{
    margin-left: 15%;
    margin-bottom: 45vh;
    text-indent: 0;
}
#jpbox .name .paren{
    font-size: 0.8rem;
}
#jpbox .name2{
    margin-left: 15%;
    margin-bottom:  -1rem;
    text-indent: 0;
}
.head3{
    font-size: 1.5rem;
    margin: 9em 0 3em 15%;
    font-weight: 700;
    font-family:  'Roboto Custom',YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}
.head4{
    margin-top: 0;
    font-size: 1.1rem;
}
.head5{
    display: block;
    margin: auto 0.8rem auto 0; 
}
.headnum{
}

/* 文字装飾 */
.fig, .chu{
    color: #00baff;
    font-family: 'Roboto Custom',YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    font-size: 0.8rem;
    display: inline;
    vertical-align: 5%;
    font-weight: 900;
    cursor: pointer;
    cursor: hand;
    margin: 0 0.3rem;
    padding: 0;
    font-style: normal;
  }
.paren .fig, .paren .chu,
.note .fig, .note .chu{
}
#jpbox a{
    font-size: 0.8rem;
    margin: 0 0.3rem;
    vertical-align: 5%;
    display: inline;
    font-family: 'Roboto Custom',YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    font-weight: 900;
}
#jpbox a:before {
  margin-right: 3px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f08e';
}
.fig + .fig,.fig + .chu, .fig + #jpbox a{
    
}
.fig:hover, .chu:hover,#jpbox a:hover{
    color: #ff009d;
}

.thin{
    font-family: 'Roboto Custom',"Original Yu Gothic", YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    font-weight: 100;
}
.bold{
    font-weight: 500;
}
.title{
  font-style: normal;
}

.title .italic{
    font-style: italic;
}
.italic{
    font-style: italic;
}
.boldnum{
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 0.3rem;
}

/* 図版 */
.photo{
    height: 100vh;
    width: 100%;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    text-align: center;
}
.image{
  display: inline-block;
}
#photo .image{
  width: 100%;
}
#photo .image img{
  width: 48%;
  margin: 1rem auto ;
  display: block;
}
    
    
    
.capbox{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    z-index: 100;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    justify-content: center;
}
.capbox p{
    text-align: left;
}

.capleft{
  justify-content: flex-start;
  padding: 0 6%;
}


/* 図版キャプション */
.cap{
    display: block;
    border: 1px none #b5b5b5;
    border-right-style: solid;
    padding: 0 0.4rem 0;
    font-size: 0.65rem;
    margin: 0.5rem 0 0 ;
    line-height: 1rem;
}
.capbox .cap:first-child{
    font-family: 'Roboto Custom',YuGothic,"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
    font-weight: 900;
    font-size: 0.5rem;
}
.capbox .cap:nth-child(2){
    font-family: "Mplus 1p";
    font-weight: 900;
}
.capbox .cap:last-child{
    border-style: none;
}


/* メニュー */

.gmenubox {
    width: 100vh;
    position: absolute;
    top: 0;
    left: 22px;
    display: flex;
    z-index: 300;
    transform: rotate(90deg);
    transform-origin: top left;
        border: none 1px #777;
        border-top-style: solid;
   }
.gmenubox a{
  color: #383838;
}

#menuBtn:hover, .gmenu:hover{
    background: rgba(152, 152, 152, 0.16);
}
.menu {
  border: 1px none #d7d7d7;
  border-right-style: solid;
  padding: 0.3rem 0.7rem 0.2rem;
  font-size: 0.5rem;
    cursor: pointer;
    cursor: hand;
  }
#jpprev{
      margin-left: 3rem;
  }
#jpnext{
    border: none;
}



/* スライドメニュー */
#menu{
    height: 100vh;
    width: 21px;
    position: fixed;
    right: 15px;
    top:0;
    margin: auto;
    z-index: 100;
    font-size: 0.8rem;
    padding: 0;
    overflow: hidden;
}
#menuBtn{
    display: flex;
}
.menucolor{
    background: rgba(33, 33, 33, 0.83);
    color: #fff;
}
.menucolor a{
    color: #fff;
}
.menucolor .menu{
    border-color: #777;
}
.menucolor .bold{
    font-weight: 300;
}

.chapterBtn{
    cursor: pointer;
    cursor: hand;
    display: inline-block;
}
.chapterBtn:hover{
    background:#909090;
}
.chapterwrap{
  width: calc(50vw - 14px);
  height: 100vh;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
}
.chapter a{
    color: #fff;
    text-decoration: none;
    line-height: 1.6rem;
}
.chapter h5{
    margin: 2.5rem 0 0.5rem;
}
.fl{
    display: flex;
}
.fl a{
    border: none 1px #777;
    border-right-style: solid;
    padding: 0 0.8rem 0;
    margin: 0.5rem 0 ;
}
.fl li:first-child a{
    border-left-style: solid;
}
.bottom{
  margin-top: 2rem;
}



/* 微調整 */
.mtop{
    margin-top: 0!important;
}
.mbottom{
    margin-bottom: 0!important;
    
}



#fullzoom, #lzoom, #rzoom{
    width: 50%;
    height: 100vh;
    position: fixed;
    top:0;
    background: rgba(42, 42, 42, 0.69);
    z-index: 500;
    display: none;
}
img{
    z-index: 600;
}
#lzoom{
    left: 0;
}
#rzoom{
    right: 0;
}
#fullzoom{
    width: 100%;
    left: 0;
    z-index: 700;
    background: rgba(26, 26, 26, 0.87);
}
#fullzoom img{
    position:absolute;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    margin:auto;
}

.flash {
    color: #ff009d;
}


.pdf{
    position: absolute;
    top:-7px;
    left: 15%;
    padding: 0.7rem 0.5rem 0.3rem;
    border: solid 1px #00baff; 
    border-radius: 6px; 
    font-weight: 100;
}
#jpbox a.pdf:before{
  content: '\f1c1';
}
a.pdf:hover{
    background: rgba(255, 0, 157, 0.03);
    border: solid 1px #ff009d; 
}






@media (min-width: 1200px){
    /* 構造 */
#leftbox{
    overflow: hidden;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}
#enbox{
    position: absolute;
    top:0;
    left: 0;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
#rightbox{
    overflow: hidden;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    padding: 0;
}
#jpbox{
    height: 100vh;
    position: absolute;
    top:0;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #f8f8f8;
  }
    #jpbox .photo, #jpbox .photobox{
        display: none;
    }
  #enslot{
    padding-top: 0!important;
  }
}


/*スマホ用 */
@media (max-width: 1200px){

html,body{
  width: 100vw;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  font-size: 17px;
}
#leftbox{
  display: none;
}
#rightbox{
  overflow: visible;
}
#jpbox{
    top:0;
    left: 0;
    overflow:visible;
    background-color: #fff;
  width: 100vw;
}
#jpbox p{
        font-size: 1rem;
    }
    #jpbox a,#jpbox .fig{
        font-size: 0.7rem;
    }
#jpbox .photo{
        display: block;
    }
    .cap,.cap a{
        font-size:0.5rem;
    }
.head2, .head3, .name, .name2{
  margin-left: 3%!important;
}

.head2{
  font-size: 1.8rem;
}
.head3{
  font-size: 1.2rem;
  width: 80vw;
}
.text{
  width: 80%;
      margin: 0  3%;
}
.quote{
  width: calc(80% - 2rem);
  margin: 2rem  3%;
  padding-right: 0;
  border-right-style: none;
}
.note{
  width: 80%;
    margin: 2rem  3%;

}


.photobox{
    width: 80vw;
    margin: 4rem 0 5rem 3%;
    display: flex;
        justify-content:space-between;
        align-items:stretch;
        flex-wrap: wrap;
}
.note .photobox{

}
.photo{
    height: auto;
    width: 80vw;
    margin: 2rem 3% 2rem;
    text-align: center;
}

.note .photo{
  width: 75vw;
}
.photobox .photo,.note .photobox .photo{
width: auto;
    margin: 0;
    margin-right: 1px;
}
.photobox .photo:last-child{
  width: 50px;
}


.photo img{
  width: 60%;
  z-index: 0;
}

#jpbox p.capbox{
flex-grow: 1;
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    z-index: 100;
    line-height: 1.2;
    justify-content: center;
    text-indent: 0px;
}
.photobox .capbox{
    justify-content: left;
}

.chapter{
  font-size: 0.6rem;
}

iframe{
  width: auto;
  height: auto;
  display: block;
  margin:auto;
}
#gmenubox{
  left: 25px;
}
.menu{
  padding-bottom: 0.3rem;
}
#menu{
  right: 0px;
  z-index: 10000;
}
.menubox {
    justify-content: flex-start;
    margin: 0!;
}
.chapterwrap{
  width: calc(100vw - 14px);
}
    .pdf{display: none;}
}