@charset "UTF-8";

/* ******************************
* 基本設定
****************************** */
html{scroll-behavior: smooth;}
body{
  color:#888888;
  font-size: 1.25rem;
  font-family:'IBM Plex Sans', 'Yomogi', cursive,sans-serif;
  background-color:#fdfdfd;
  scroll-behavior: smooth;
}
main{overflow-x:hidden;}
article,section{width: 100vw;}
p,ul,ol,dl,figure{margin: 0;}
ul{list-style: none;}
ul li{margin-bottom:0.25rem;}
img,iframe{max-width: 100%;}
figure,iframe{text-align: center;}
a{color:#85ccc6;text-decoration: none;}
a:visited {color:#85ccc6;}
a:active {color:#cc858b;}
a:hover{color:#cc858b;}

/* ******************************
* レイアウト
****************************** */
.grid_lo{display: grid;}
.dl_grid{
  grid-template-columns: auto 1fr;
  grid-column-gap: .5rem;
}
.dl_grid dt{
  grid-column: 1;
  text-align: center;
  color:#fdfdfd;
  font-weight: bolder;
  background-color: #85ccc6;
  border-bottom: solid .5px #fdfdfd;
  padding: 0.25rem;
}
.dl_grid dd{
  grid-column: 2;
  border-bottom: solid .5px #85ccc6;
  padding: 0.25rem;
}
.col2,.col2_nosep{grid-template-columns: 1fr 1fr;grid-gap: 1rem;}
.repeat_col{
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap:2.5rem;
  width: 80vw;
  margin-left: auto;
  margin-right: auto;
}

/* ******************************
* header
****************************** */
header{
  width: 100vw;
  height: 60px;
  background-color: #fefefe;
  position: fixed;
  top:0;
  z-index: 10;
  display:flex;
  justify-content: space-between;
  padding: 1vh 1vw 1vh 1vw;
}
.sss_logo img{display: block;}
.tab_input,.triger_box,.sp_menu_bg{display:none;}
.menu_list{
  display: grid;
  grid-template-rows:auto;
  grid-template-columns: repeat(6,1fr);
  grid-column-gap:0.1rem;
  margin-bottom: 0;
  align-items: center;
  font-size: 0.9rem;
}
.menu_list li{
  background-color: #eee;
  border-bottom: solid 0.2rem #333;
  padding: 0.25rem 0.5rem 0 0.5rem;
  height:40px;
  text-align: center;
  font-family:'Tangerine',cursive;
  font-size:150%;
}
.menu_list li:first-child{border-radius: 7.5px 0 0 0;}
.menu_list li:last-child{border-radius: 0 7.5px 0 0;}
.menu_list li a{font-size:2rem;}


/* ******************************
* main
****************************** */
#main_article{
  scroll-snap-type: y mandatory;
}
#main_article section{
  margin-bottom: 10rem;
  scroll-snap-align: start;
  padding-top:60px;
}
 /* main visual */
#main_visu{
  position: relative;
  margin-top: 60px;
  width: 100vw;
  margin-bottom: 0;
}
.main_bnr_sp{display: none}
.to_marker_box{
  position: absolute;
  bottom:0;left:0;right:0;
}
.to_marker{
  text-align: center;
  display:block;
  margin: auto;
  font-size: 2rem;
}
.to_marker:hover{
  transform: scale(1.5,1.5);
}
/* article */
.sec_title{
  height: fit-content;
  text-align: center;
}
.font_deco{
  font-family:'Tangerine',cursive;
  margin-bottom: 0.5rem;
  font-size:3rem;
}
.font_deco span{
  font-size:33%;
  margin-left: 1rem;
}
.font_deco::before{
  content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(../img/ink.png) no-repeat;
    background-size: contain;
    margin-right: 1rem;
}
.font_deco::after{
  content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(../img/pen.png) no-repeat;
    background-size: contain;
    margin-left: 1rem;
}

/*コンセプト*/
#sec_lead{
  position: relative;
  min-height: 50vh;
}
.concept_box{
  position: absolute;
  top:20%;
  left:10vw;
  width: 50vw;
  z-index:5;
}
.concept_text{
  padding:1rem;
  background-color: rgba(255,255,255,.75);
  width:80%;
}
.preceding_cut_box{
  position: absolute;
  right: 3vw;bottom:-10vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-gap:1rem;
  max-width: 50vw;
}
.preceding_cut_box a:hover{opacity: 0.5;}
#pc_still_01{grid-column:1;grid-row:1;}
#pc_still_02{grid-column:1;grid-row:2;}
#pc_still_03{grid-column:2;grid-row:1/3;}

.bg_shape_l{
  position: absolute;
  z-index: -5;
  width: 90vw;
  height:150px;
  left:-3vw;bottom:-20vh;
  background: linear-gradient(90deg,rgba(221,221,221,1), rgba(221,221,221,0));
  transform:rotate(3deg);
}

/* 書誌情報 */
#sec_book{position: relative;;}
.sec_mount{margin-top: 3rem;font-size:1.1rem;}
.book_type{text-align: center;margin-bottom: 0.5rem;}
.hol_scroll{
  width: 100%;
  margin: 1.5rem auto;
  display: grid;
  grid-template-columns:repeat(5,auto);
  grid-column-gap:1rem;
}
.hol_scroll figcaption{font-size:0.8rem;}

/* 店舗特典 */
.sec_gift{position: relative;}
.shop_sp_bromide{text-align:center;font-size:1.5rem;}
.shop_sp_item{
  margin-top: 1.5rem;
  margin-bottom: 5rem;
}
.shop_name{
  font-weight: bolder;
  color:#85ccc6;
}
.bg_shape_r{
  position: absolute;
  z-index: -5;
  width: 90vw;
  height:150px;
  right:-3vw;bottom:-10vh;
  background: linear-gradient(-90deg,rgba(221,221,221,1), rgba(221,221,221,0));
  transform:rotate(-3deg);
}

/* ニュース */
#sec_news{position: relative;;}
.news_mount{
  width: 80vw;
  margin-left: auto;margin-right: auto;
}
.news_article{
  background-color:rgba(64,64,64,.01);
  padding:.25vh 1.5vw .25vh 1.5vw;
  margin-top: 1rem;
  margin-bottom: 2rem;
  border-radius: 5px;
}
.news_article hr{
  background-color:#85ccc6;
  height:1px;
  border:none;
}
.news_mount h2{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap:1rem;
  margin-bottom: 1rem;
  align-items: center;
}
.news_mount p{margin-bottom: 1rem;}
.news_mount div{margin-top: 1.5rem;margin-bottom: 1.5rem;}
.news_mount a{font-weight:bolder;}
.news_list .news_date{color:#888888;}
.news_date{
  display: block;
  font-size: 1.25rem;
  color:#85ccc6;
}
.news_title{
  display: block;
  font-size: 1.5rem;
}
.atention{font-size: 80%;}
ul.atention{padding-left: 2rem;}
ul.atention li{
  text-indent: -1rem;
}
ul.atention li::before{
  content: '※';
  display: inline-block;
  margin-right: 1rem;
}
.to_top_link{
  text-align: center;
  font-family: 'Tangerine',cursive;
  font-size:2rem;
  margin-top: 2.5rem;
  margin-bottom: 5rem;
}
@media screen and (min-width:1200px) {
  .embed{width: 66%;margin:auto;}
}
@media screen and (min-width:800px)and ( max-width:1199px) {
  .embed{width: 85%;margin:auto;}
}
@media screen and (min-width:481px)and ( max-width:799px) {
  .embed{width: 100%;margin:auto;}
}

.embed iframe{
  width: 100%;
  height:100%;
  aspect-ratio:16/9;
}
/* リリースイベント */
.event_explain{text-align: center;}
.event_mount{
  width: 80vw;
  margin-left: auto;margin-right: auto;
}
.event_explain,.event_box{margin-bottom: 2rem;}
.bg_sign_box{
  position: relative;
  height:150px;width: 100vw;
  margin-bottom: 5rem;
}

/* 最終ブロック飾り */
.bg_sign{
  position: absolute;
  z-index: -3;
  /*left: 10vw;bottom:0;*/
  right: 10vw;bottom:0;
  transform:rotate(5deg);
}


/* ******************************
* 背景
****************************** */
.bg_patern{
  width: 100vw;height:100vh;
  position:fixed;
  top:0;left:0;
  z-index:-10;
  opacity: .33;
  background-color: #FDFDFD;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23FDFDFD' stroke-width='0.7' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cuse fill='%23fafafa' href='%23s' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23f8f8f8' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23f8f8f8' href='%23s'/%3E%3Cuse fill='%23f5f5f5' href='%23s' x='2'/%3E%3Cuse fill='%23f5f5f5' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23f3f3f3'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23f3f3f3'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23f0f0f0'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%23FDFDFD'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23ededed'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%2385CCC6'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%2385CCC6'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(50) translate(-980 -735)'%3E%3Cg fill='%2385CCC6'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

/* ******************************
* footer
****************************** */
footer{
  width: 100vw;height: 15vh;
  background-color: #aaaaaa;
  padding-top: 2.5rem;
}
.copyright{
  text-align: center;
  color:#fefefe;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:0.9rem;

}