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

/*共通*/

html{
	width:100%;
	background-color: #FFFFFF;
	font-size: 62.5%;
	color:#333333;
	font-family:'小塚明朝 Pro','Kozuka Mincho Pro',serif;
	margin:0 auto;
	position: relative;
	scroll-behavior: smooth;/*スムーズスクロール記述*/
	min-height: 2000px;/*スムーズスクロール記述*/
	-webkit-overflow-scrolling: touch;
}

a:link {
	color:#333333;
    text-decoration: none;
}    /*　未訪問リンクの文字色を変える */
a:visited {color:#333333;} /*　訪問済リンクの文字色を変える */
a:hover {color:#00808d;}   /*　ポイント時のリンクの文字色を変える */
a:active {color:#00808d;}  /*　選択中のリンクの文字色を変える */

/* ハンバーガーボタン */
.menu__close-button{
  display:block;
  position:fixed;
  z-index:3;
  right:15px;
  top:15px;
  width:50px;
  height:50px;
  cursor:pointer;
  text-align:center;
}

.menu__close-button span{
  display:block;
  position:absolute;
  width:36px;
  height:2px;
  left:6px;
  border-radius:6px;
  background:#333;
  transition:0.3s ease-in-out;
}

.menu__close-button span:nth-child(1){
  top:10px;
}

.menu__close-button span:nth-child(2){
  top:22px;
}

.menu__close-button span:nth-child(3){
  top:34px;
}

/* ナビ開いてる時のボタン */
.menu__close-button.active span:nth-child(1){
  top:16px;
  transform:rotate(-45deg);
}
.menu__close-button.active span:nth-child(2),
.menu__close-button.active span:nth-child(3){
  top:16px;
  transform:rotate(45deg);
}


/* メニュー本体 */
nav.menu{
  position:fixed;
  z-index:2;
  top:0;
  right:0;
  width:300px;
  height:100%;
  color:#00808d;
  background:#607556;
  text-align:center;
  transform:translateX(100%);
  transition:all 0.6s;
}

/* 開いた時 */
nav.menu.active{
  transform:translateX(0%);
}


/* メニューリスト */
.menu__list{
  background:#00808d;
  margin:0 auto;
  padding:80px 0 0;
  width:300px;
  height:100%;
}

.menu__item{
  font-size:1.8em;
  letter-spacing:0.2em;
  list-style-type:none;
  padding:0;
  width:100%;
}

.menu__link{
  display:block;
  padding:1em 0;
  color:#fff!important;
  text-decoration:none;
}

.menu__link:visited{
  color:#fff;
}

.menu__link:hover{
  color:#ccc4b2;
}

.menu__link:active{
  color:#fff;
}

body{
	width:100%;
	display: block;
	margin: 0 auto;
}

header{
	width:1200px;
	margin:0 auto;
}
	
main{
	width:100%;
	margin:0 auto;		
	}

.fv{
	width:960px;
	display: block;
	margin:0 auto;
}

.fv__illustration{
    width: 100%;
    padding:80px 0 0 150px;
}

.fv__illustration-image{
width:150px;
height: auto;
}

.fv__inner{
	width:500px;
	margin:0 auto;
	padding:0 0 200px 0;
}

.fv__lead{
	font-size:1.8em;
	text-align: center;
	line-height: 1.8;
	letter-spacing: 1px;
	padding-top:60px;
}

.fv__title{
	font-size:3.0em;
    font-weight: 300;
	text-align: center;
	letter-spacing: 10px;
	padding-top:40px;
}

.fv__author{
	font-size:2.2em;
	text-align: center;
	letter-spacing: 6px;
	padding-top:20px;
}

.story-intro{
    width: 100%;
    display: block;
    padding: 150px 0 150px;
	margin:30px 0 0;
	background-color:#C9DDDA;
}

.story-intro__inner{
    width: 600px;
    display: block;
    margin: 0 auto;
}

.story-intro__text{
	font-size:1.8em;
font-weight:100;
	line-height: 3.0;
	letter-spacing: 3px;
}

.story-intro__author{
    font-size: 2.2em;
font-weight:100;
    letter-spacing: 4px;
    text-align: right;
    padding-top: 20px;
}

.story-intro__author-small{
	font-size: 0.7em;
}

.book-info{
    width: 100%;
    display: block;
    margin: 0 auto;
    padding-bottom: 50px;
}

.book-info__inner{
    width: 740px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 50px 0 0;
}


.book-info__image{
	width:450px;
	height: auto;
}

.book-info__body{
	width:300px;
	padding-left:40px;
}

.book-info__body p{
	font-size:1.4em;
    font-weight: 300;
	letter-spacing: 3px;
	line-height: 2.0
}

.book-info__title{
	font-size:2.0em;
	font-weight: 100;
	letter-spacing: 3px;
	padding-bottom:10px;
}

.book-info__author{
font-size:1.6em;
	font-weight: 100;
	letter-spacing: 3px;
    padding-bottom: 30px;
}

.book-info__release-bule{
    color:#f06960;
    font-size: 1.6em !important;
    padding-top: 10px;
}

.arrow::after {
  content: "\25B6\FE0E \25B6\FE0E \25B6\FE0E";
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
}

.book-index{
	width:100%;
	margin:0 auto;
	background-color:#C9DDDA;
}

.book-index__inner{
    width: 1000px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 100px;
}

.book-index__item a:hover img{
    opacity: 0.8;
}

.book-index__title{
    font-size: 2.4em;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    padding: 100px 0 5px;
}

.book-index__note{
    font-size: 1.4em;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 100;
    padding: 20px 0 30px;
}

.book-index__list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.book-index__item{
    width: 32%;
    height: auto;
}

.book-index__item-title{
    font-size: 1.9em;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    padding: 50px 0 5px;
}

.book-index__image{
	width:100%;
	height: auto;
}

.book-index__read-text{
    font-size: 1.6em;
    color: #22225F;
    text-align: right;
}

.book-index__read-text a:hover{
color:#00808d;
}

.memory-cookie{
	width:100%;
	display: block;
	margin:0 auto;
    padding: 100px 50px;
}

.memory-cookie__content{
    width: 860px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:0 auto;
}

.memory-cookie__content__inner{
	width:48%;
	height: auto;
}

.memory-cookie__lead{
font-size: 2.2em;
line-height: 1.8;
text-align: center;
letter-spacing: 2px;
font-weight: 100;
padding-bottom: 30px;}

.memory-cookie__description{
    font-size: 1.5em;
    line-height: 1.9;
    letter-spacing: 1px;
    font-weight: 100;
}

.memory-cookie__image img{
    width: 400px;
    height: auto;}

.memory-cookie__content__inner a:hover img{
    opacity: 0.8;
}

.memory-cookie__arrows{
	font-size: 1.8em;
    letter-spacing: 2px;
    color: #22225F;
    text-align: right;
}

.star-shop{
width:100%;
display: block;
margin: 0 auto;
}

.star-shop__inner{
  width: 800px;
  margin: 0 auto;
  padding: 80px 10px 50px;
}

.star-shop__title{
font-size: 2.2em;
font-weight: 100;
line-height: 1.8;
letter-spacing: 2px;
text-align: center;	
padding: 0 0 30px;
}

.star-shop__section{
	width:800px;
	display: block;
	margin: 0 auto;
}

.star-shop__section-title{
    font-size: 1.9em;
    font-weight: 100;
    letter-spacing: 2px;
    text-align: center;
    padding: 30px 0 20px;
}

.star-shop__attention{
	font-size: 1.8em;
	font-weight: 300;
    letter-spacing: 2px;
	color:#f06960;
	text-align: center;
}

.star-shop__content{
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:0 auto;
}

.star-shop__image{
	width:400px;
	height: auto;
}

.star-shop__content img{
    width: 400px;
    height: auto;}

.star-shop__text{
    width: 380px;
    font-size: 1.5em;
    line-height: 2.0;
    letter-spacing: 2px;
    font-weight: 100;
}

.star-shop__button-wrap{
    margin-top: 1.8em;
    text-align: center;
    padding: 20px 0 30px;
}

.star-shop__button--big{
    width: 400px;
    padding: 15px 60px;
    border-radius: 999px;
    background: #f06960;
    color: #fff !important;
    font-size: 1.8em;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: center;
}

.star-shop__button--big:hover {
  opacity: 0.8; 
}

.star-shop__button-list{
    width: 530px;
    margin: 0 auto;
    padding: 50px 0 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.star-shop__button--medium{
    width: 250px;
    height: auto;
    padding: 10px;
    border-radius: 999px;
    background: #f06960;
    color: #fff !important;
    font-size: 1.8em;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: center;
}

.star-shop__button--medium:hover {
  opacity: 0.8; 
}


.star-shop__text--center{
	text-align: center;
    font-size: 1.5em;
    letter-spacing: 2px;
    font-weight: 100;
}

.star-shop__button-wrap--blue{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 50px;
}

.star-shop__button--blue{
    width: 280px;
    height: auto;
    padding: 10px 50px;
    border-radius: 999px;
    color: #fff !important;
    font-size: 1.8em;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: center;
  background: #00808d;
}

.star-shop__button--blue:hover {
  opacity: 0.8; 
}

.star-shop-shibuya{
	width:100%;
	display: block;
	margin: 0 auto;
}

.star-shop-shibuya--inner{
	width:800px;
	display: flex;
	justify-content: space-between;
    align-items: center;
}

.star-shop__text--small{
	width:280px;
    letter-spacing: 1px;
}

.star-shop__text--red{
	color:#ff4500;
}

.star-shop__text--atention{
    font-size: 0.9em;
    line-height: 1.2;
}

.star-shop-shibuya--image{
	width:100%;
	height: auto;
	display: block;
}

.star-shop-shibuya--image img{
	width:250px;
	height: auto;
}

.instagram{
	width:100%;
	display: block;
	margin:0 auto;
    padding: 100px 50px;
}

.instagram__content{
    width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin:0 auto;
}

.instagram__inner{
	width:48%;
	height: auto;
}

.instagram__title{
font-size: 2.2em;
    line-height: 1.8;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    padding-bottom: 30px;
}

.instagram__text{
    font-size: 1.5em;
    line-height: 1.9;
    letter-spacing: 1px;
    font-weight: 100;
    text-align: center;
}

.instagram__content__inner img{
    width: 400px;
    height: auto;}

.instagram__content__inner a:hover img{
    opacity: 0.8;
}

.author-profile{
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 80px 0 80px;
    background-color: #C9DDDA;
}

.author-profile__title{
	font-size: 2.2em;
    line-height: 1.8;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    padding-bottom: 30px;
}

.author-profile__body{
    width: 500px;
    display: block;
    margin: 0 auto;
}

.author-profile__name{
	font-size: 1.8em;
    line-height: 1.6;
    letter-spacing: 2px;
    font-weight: 100;
	padding:0 0 20px;
}

.author-profile__text{
    font-size: 1.4em;
    line-height: 2.1;
    letter-spacing: 1px;
    font-weight: 100;
}
.author-profile__link{
	font-size:1.6em;
	letter-spacing: 2px;
	color:#00808d;
	text-align:right;
}

.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
}

.page-top__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  aspect-ratio: 1 / 1;
  border: 1px solid #333;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  transition: opacity .3s ease;
}

.page-top__link:hover {
  opacity: 0.8;
}

.page-top__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-top__icon svg {
  display: block;
  width: 24px;
  height: auto;
}

.footer{
	width:100%;
	background-color:#00808d;
	margin:0 auto;
	padding:60px 0;
}

.footer__copyright{
	font-size: 1.2em;
    letter-spacing: 1px;
    color: #fff;
    display: block;
    text-align: center;
}
/*=================
レスポンシブ設定
====================*/
@media screen and (max-width:750px){
	
.menu__close-button{
    right: 5px;
	top: 5px;}

header{
	width:100%;
}

.fv{
	width:100%;
	display: block;
	margin:0 auto;
}

.fv__illustration{
        width: 100%;
        padding: 20px 0 0 0 !important;
}

.fv__illustration-image{
        width: 35%;
        height: auto;
}

.fv__inner{
	width:100%;
	margin:0 auto;
    padding: 0 0 240px 0;
}

.fv__lead{
	font-size:1.8em;
	text-align: center;
	line-height: 1.8;
	letter-spacing: 1px;
	padding-top:60px;
}

.fv__title{
	font-size:3.0em;
    font-weight: 300;
	text-align: center;
	letter-spacing: 10px;
	padding-top:40px;
}

.fv__author{
	font-size:2.2em;
	text-align: center;
	letter-spacing: 6px;
	padding-top:20px;
}

.story-intro{
        width: 100%;
        display: block;
        margin: 0 auto;
        padding: 200px 0;
}

.story-intro__inner{
        width: 100%;
        display: block;
        margin: 0 auto;
        padding: 0 25px;
}

.story-intro__text{
        font-size: 1.7em;
        font-weight: 100;
        line-height: 2.2;
        letter-spacing: 1px;
}

.story-intro__author{
        font-size: 1.8em;
        font-weight: 100;
        letter-spacing: 3px;
        text-align: right;
        padding-top: 30px;
}

.story-intro__author-small{
	font-size: 0.7em;
}

.book-info{
    width: 100%;
    display: block;
    margin: 0 auto;
    padding-bottom: 50px;
}

.book-info__inner{
    width: 100%;
    display: block;
    padding: 50px 0 0;
}

.book-info__visual{
    text-align: center;
	display: block;
	margin:0 auto;
	}

.book-info__image{
        width: 90%;
        height: auto;
}

.book-info__body{
	width:100%;
    padding: 20px 30px;
}

.book-info__body p{
	font-size:1.6em;
	font-weight: 100;
	letter-spacing: 3px;
	line-height: 2.0
}

.book-info__title{
	font-size:2.2em;
	font-weight: 100;
	letter-spacing: 3px;
	padding-bottom:10px;
}

.book-info__author{
font-size:1.8em;
	font-weight: 100;
	letter-spacing: 3px;
    padding-bottom: 30px;
}

.book-info__release-bule{
    font-size: 1.8em !important;
    padding-top: 10px;
}

.book-index{
	width:100%;
}

.book-index__inner{
	width:100%;
	height: auto;
}

.book-index__title{
    font-size: 2.4em;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    padding: 80px 0 5px;
}

.book-index__note{
        font-size: 1.4em;
        text-align: center;
        letter-spacing: 1px;
        font-weight: 100;
        padding: 20px 0 10px;
}

.book-index__list{
        padding-bottom: 20px;
}

.book-index__item{
        width: 100%;
        height: auto;
        padding: 0 20px;
}

.book-index__item-title{
        font-size: 2.0em;
        text-align: center;
        letter-spacing: 2px;
        font-weight: 100;
        padding: 40px 0 5px;
}

.book-index__image{
	width:90%;
        display: block;
        margin: 0 auto;
}

.book-index__read-text{
        font-size: 1.8em;
        letter-spacing: 1px;
        width: 95%;
}

.book-index__read-text a:hover{
color:#00808d;
}

.memory-cookie{
        width: 100%;
        padding: 100px 30px;
}

.memory-cookie__content{
    width: 100%;
    display: block;
}

.memory-cookie__content__inner{
	width:100%;
	height: auto;
}

.memory-cookie__lead{
font-size: 2.2em;
    line-height: 1.8;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    padding-bottom: 30px;}

.memory-cookie__description{
        font-size: 1.5em;
        line-height: 2.0;
        letter-spacing: 1px;
        font-weight: 100;
        padding-bottom: 10px;
}

.memory-cookie__image img{
    width: 100%;
    height: auto;}

.memory-cookie__arrows{
        font-size: 1.6em;
        padding-top: 10px;
}
	
.star-shop{
width:100%;
}

.star-shop__inner{
        width: 100%;
        padding: 80px 10px 0;
}

.star-shop__title{
font-size: 2.2em;
font-weight: 100;
line-height: 1.8;
letter-spacing: 2px;
text-align: center;	
padding: 0 0 10px;
}

.star-shop__section{
	width:100%;
}

.star-shop__section-title{
    font-size: 1.9em;
    font-weight: 100;
    letter-spacing: 2px;
    text-align: center;
    padding: 30px 0 20px;
}
	


.star-shop__content{
    display: block;
}

.star-shop__image{
        width: 90%;
        height: auto;
        margin: 0 auto;
}

.star-shop__content img{
    width: 100%;
    height: auto;}

.star-shop__text{
   width: 90%;
   font-size: 1.5em;
   line-height: 2.0;
   letter-spacing: 1px;
margin: 0 auto;
   padding-top: 10px;
}

.star-shop__button-wrap{
    margin-top: 1.8em;
    text-align: center;
    padding: 0 0 30px;
}

.star-shop__button--big{
    width: 100%;
    padding: 15px 60px;
    font-size: 1.8em;
    line-height: 1.4;
    letter-spacing: 1px;
}

.star-shop__button-list{
    width: 100%;
    margin: 0 auto;
    padding: 50px 0 50px;
    display: flex;
    flex-wrap: wrap;
}

.star-shop__button--medium{
    width: 48%;
    height: auto;
    padding: 10px;
    font-size: 1.8em;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: center;
}

.star-shop__button--medium:hover {
  opacity: 0.8; 
}


.star-shop__text--center{
	text-align: center;
    font-size: 1.5em;
    letter-spacing: 2px;
    font-weight: 100;
}

.star-shop__button-wrap--blue{
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 20px 0 50px;
}

.star-shop__button--blue{
    width: 100%;
    height: auto;
    padding: 10px 50px;
    font-size: 1.8em;
    line-height: 1.4;
    letter-spacing: 1px;
}

.star-shop__button--blue:hover {
  opacity: 0.8; 
}

.star-shop-shibuya{
	width:100%;
	display: block;
	margin: 0 auto;
}

.star-shop-shibuya--inner{
	width:100%;
	display: block;
}
	
.star-shop-shibuya--text{
        width: 90%;
        display: block;
        margin: 0 auto;
	}

.star-shop__text--small{
	width:100%;
    letter-spacing: 1px;
}

.star-shop__text--atention{
    font-size: 0.9em;
    line-height: 1.2;
}

.star-shop-shibuya--image{
        width: 100%;
        height: auto;
        display: block;
        text-align: center;
        padding-top: 10px;
}

.star-shop-shibuya--image img{
	width:90%;
	height: auto;
}

.instagram{
        width: 100%;
        padding: 80px 30px;
}

.instagram__content{
    width: 100%;
    display: block;
}

.instagram__content__inner{
	width:100%;
	height: auto;
}

.instagram__title{
font-size: 2.2em;
    line-height: 1.8;
    text-align: center;
    letter-spacing: 2px;
    font-weight: 100;
    padding-bottom: 30px;}

.instagram__text{
        font-size: 1.5em;
        line-height: 1.9;
        letter-spacing: 1px;
        font-weight: 100;
        padding-bottom: 10px;
}

.instagram__content__inner img{
    width: 100%;
    height: auto;}

.author-profile{
    width: 100%;
    padding: 50px 0 80px;
	background-color:#C9DDDA;
}

.author-profile__title{
	font-size: 2.2em;
    line-height: 1.8;
    text-align: center;
    letter-spacing: 2px;
    padding-bottom: 30px;
}

.author-profile__body{
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.author-profile__name{
	font-size: 1.8em;
    line-height: 1.6;
    letter-spacing: 2px;
	padding:0 0 20px;
}

.author-profile__text{
    font-size: 1.4em;
    line-height: 2.1;
    letter-spacing: 1px;
}
.author-profile__link{
        font-size: 1.6em;
        letter-spacing: 2px;
        padding-top: 10px;
}

.page-top {
    right: 16px;
    bottom: 16px;
  }

  .page-top__link {
    width: 48px;
    border-width: 1.5px;
  }

  .page-top__icon svg {
    width: 20px;
  }

.footer{
	width:100%;
	padding:60px 0;
}

.footer__copyright{
	font-size: 1.2em;
    letter-spacing: 1px;
}
}