@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap');
@import url('https://use.fontawesome.com/releases/v5.7.1/css/all.css');

/*--------------------------------------------------------------------*/
/* Jenny  */
/*--------------------------------------------------------------------*/

/*
Pink #f2a5bf rgba(242, 165, 191, 1)
*/

* { 
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
} 
html { 
  font-size: 62.5%; /*10px*/ 
} 
body { 
  min-width: 320px; 
  background: #fff; 
  color: #000; 
  font-size: 16px; 
  font-size: 1.6rem; 
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'MS PGothic', sans-serif;
  letter-spacing: 0.1em; 
  line-height: 1.5;
  box-sizing: border-box;
}
ul,ol,li {
  list-style: none;
}
h1,h2,h3,h4,h5,h6 {
  font-size: 16px; 
  font-size: 1.6rem; 
  font-weight: normal;
}
a {
  color: #000;
  text-decoration: none;
}
a:hover {
  color: #000;
  text-decoration: none;
  transition: all .2s;
}
img,video { 
  max-width: 100%; 
  height: auto;
  vertical-align: bottom;
}

@media screen and (max-width:767px){
  body { 
    font-size: 14px; 
    font-size: 1.4rem; 
  }
  h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
  }
}




/* layout
--------------------------------------------------------------------*/
#jenny {
  
}
.jenny-section {
  padding: 20px 0;
}
.jenny-section h3 {
  color: #e4007f;
  font-size: 3em;
  font-family: 'Oleo Script', cursive;
  font-style: normal;
  text-align: center;
  margin-bottom: .5em;
}

.bg_pink {
 background: rgba(242, 165, 191, 1); 
}


@media screen and (min-width:768px) {
  .jenny-section {
    padding: 50px 0;
  }
}


/* Header
--------------------------------------------------------------------*/
.jenny-header {
  position: relative;
  width: 100%;
  height: 90vh;
  background: rgba(242, 165, 191, 1) url("/img/usr/category/sp/jenny/jenny_alice.jpg") center center no-repeat;
  background-size: cover;
  text-align: center;
}
.jenny-header .town-logo {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 160px;
}
.jenny-header h1 {
  position: absolute;
  width: 95%;
  height: 100%;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 3em;
  text-align: center;
}
.jenny-header h1 img {
  width: auto;
}

@media screen and (min-width:768px) {
 .jenny-header {
    height: 100vh;
    background-size: contain;
  }
  .jenny-header .town-logo {
    width: 200px;
  }
 .jenny-header h1 {
    top: 20px;
    width: auto;
    height: 100%;
  }
  .jenny-header h1 img {
    height: 40%;
    width: auto;
  }
}


/* Book
--------------------------------------------------------------------*/
.jenny-book {
}
.jenny-book-header {
  text-align: center;
}
.jenny-book-topics {
  display: block;
  width: 7em;
  height: 7em;
  border-radius: 50%;
  background: #e4007f;
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin: 10px auto;
  padding-top: 2em;
}
.jenny-book-releasedate {
  display: inline-block;
  border-bottom: 2px solid #e4007f;
  color: #e4007f;
  font-size: 1.125em;
  font-weight: bold;
  margin: 0 auto .75em;
}
.jenny-book-title {
  margin-bottom: 1em;
}
.jenny-book-title span {
  display: block;
}
.jenny-book-title .en {
  font-size: 1.5em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 500;
  margin-bottom: .25em;
}
.jenny-book-title .ja {
  font-size: 1em;
}
.jenny-book-cover {
  text-align: center;
  margin: 0 40px 50px;
}
.jenny-book-copy {
  font-size: .75em;
  margin-top: .5em;
  text-align: right;
}
.jenny-book-info {
  margin: 20px 20px 0;
}
.jenny-book-spec {
  display: flex;
  flex-wrap: wrap;
}
.jenny-book-spec li {
  font-size: .9em;
  margin: 0 1em .25em 0;
}
.jenny-book-explanation {
  background: rgba(242, 165, 191, .2);
  font-size: .875em;
  margin-top: 20px;
  padding: 15px;
}
.jenny-book-buy {
  padding: 30px 0;
}
.jenny-book-buy p {
  text-align: center;
}
.btn-jenny-reserve {
  display: block;
  border: 1px solid #e4007f;;
  border-radius: 40px;
  background: #e4007f;;
  color: #fff;
  font-weight: bold;
  padding: .5em 2em;
  margin-top: 1em;
  text-align: center;
}
.btn-jenny-reserve::before {
	content: "\f0da";
  font-size: 1.25em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .5em;
}
.btn-jenny-buy {
  display: block;
  border: 1px solid #e4007f;;
  border-radius: 40px;
  background: #e4007f;;
  color: #fff;
  font-size: 1.25em;
  font-weight: bold;
  padding: .5em 2em;
  margin-top: 1em;
  text-align: center;
}
.btn-jenny-buy::before {
	content: "\f0da";
  font-size: 1.25em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .5em;
}

#book-gallery {
  margin-top: 20px;
}


@media screen and (min-width:768px) {
  .jenny-book-releasedate {
    font-size: 1.5em;
  }
  .jenny-book-title {
    margin-bottom: 2em;
  }
  .jenny-book-title .en {
    font-size: 2.4em;
  }
  .jenny-book-title .ja {
    font-size: 1.5em;
  }
  .jenny-book-cover {
    width: 600px;
    margin: 0 auto 50px;
  }
  .jenny-book-info {
    width: 700px;
    margin: 40px auto 0;
  }
}

.pv-kari {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #ccc;
  text-align: center;
  margin: 50px 0;
}
.pv-kari p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 1.5em;
}


/* Info
--------------------------------------------------------------------*/
.jenny-info {
  position: relative;
  width: 100%;
  background: rgba(150, 211, 215, 1);
  padding: 20px 0 0;
}
.jenny-info-list {
  padding: 0 10px;
}
.jenny-info-list dt {
  color: #fff;
  font-size: 1.5em;
  font-family: 'Oleo Script', cursive;
  font-style: normal;
  margin-bottom: .5em;
}
.jenny-info-list dd {
  font-size: 1.125em;
  margin-bottom: 2em;
}
.jenny-info-list dd .btn-jenny-info {
  display: inline-block;
  border: 1px solid #19868d;
  border-radius: 40px;
  background: #19868d;
  color: #fff;
  font-weight: bold;
  padding: .5em 2em;
  margin-top: 1em;
}
.jenny-info-list dd .btn-jenny-info::before {
	content: "\f0da";
  font-size: 1.25em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: .5em;
}
.jenny-comment {
  text-align: right;
}
.comment-fukidashi{
  position: relative;
  display: inline-block;
  margin: 1.5em 20px .5em 20px;
  padding: 15px;
  min-width: 120px;
  max-width: 100%;
  background: #fff;
  border-radius: 10px;
  text-align: left;
}
.comment-fukidashi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 30%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}
.comment-jenny {
  text-align: right;
}


@media screen and (min-width:768px) {
  .jenny-info {
  }
  .jenny-info-list dt {
    font-size: 1.75em;
  }
  .jenny-info-list dd {
    font-size: 1.25em;
  }
  .jenny-comment {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }
  .comment-fukidashi {
    position: relative;
    display: inline-block;
    margin: 1.5em 30px 1.5em 0;
    padding: 15px;
    min-width: 120px;
    max-width: 100%;
    background: #fff;
    border-radius: 10px;
  }
  .comment-fukidashi:before {
    content: "";
    position: absolute;
    top: 75%;
    left: calc(100% + 12px);
    margin-top: -12px;
    border: 12px solid transparent;
    border-left: 12px solid #fff;
  }
}


/* Licca Book
--------------------------------------------------------------------*/
.licca-books {
  background: #eee;
}
.licca-books .header-caption {
  text-align: center;
  margin-bottom: 2em;
}
.licca-books .nvgrid p {
  margin: 1em 0 2em;
}


/* Footer
--------------------------------------------------------------------*/
.jenny-footer {
  width: 100%;
  background: rgba(242, 165, 191, 1);
  text-align: center;
  padding: 60px 0;
}
.jenny-footer .site-logo {
  margin-bottom: 30px;
}
.jenny-footer .footer-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.jenny-footer .footer-link li {
  font-size: .875em;
  margin: 0 .75em .5em;;
}

.pagetop {
  display: none;
  position: fixed;
  right: 15px;
  bottom: 15px;
}
 
.pagetop a {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 45px;
  background: rgba(228, 0, 127, 1);
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-size: 26px;
  text-decoration: none;
}
.pagetop a:hover {
  background: rgba(228, 0, 127, .8);
}