@charset "utf-8";
.site a {
 text-decoration: none;
 transition: .2s;
}
a:hover {
 opacity: 0.9;
}
input,
textarea,
button {
 font-size: 1em;
}
.topPage .site-content {
 background-color: rgb(255, 240, 200);
}
@media only screen and (min-width: 768px) {
  .topPage .product-content,
  .topPage .entry .entry-content {
    max-width: none;
    margin: 0;
    padding: 0 ;
  }
  .header-books-container .lead {
    height: 20em;
  }
}
.w {
 padding-left: 1rem;
 padding-right: 1rem;
}
.more.more.more {
 background-color: hsla(-10,50%,50%,0.9);
 padding: 0.1em .5em;
 display: inline-block;
 border-radius: 0.3em;
 font-size: 0.8em;
 color: #fff;
 letter-spacing: 0;
 font-family: "MyGoB",'Noto Sans JP',sans-serif;
 font-weight: 400;
 position: relative;
}
.more::before {
 content: "▶︎";
 display: inline-block;
 transform: scale(0.7);
}

.minimal-info > div {
 display: inline-flex;
 flex-wrap: wrap;
 color: #333;
 background-color: hsla(20,40%,40%,.2);
 padding: 0 .5em;
 border-radius: 0.5em;
 font-size: 1em;
}
.minimal-info > div:not(:last-child) {
 margin: 0 .5em 1em 0;
}
.minimal-info dt::after {
 content: ":";
 padding: 0 .2em;
}
.site-header {
 /*! color: #fff; */
 padding-top: 0;
}
.logo {
 font-family: 'Candal', sans-serif;
 font-size: 0.8em;
 background-color: rgb(230, 80, 50);
 display: inline-block;
 padding: 0.4em .2em 0;
 box-sizing: border-box;
 width: 3rem;
 height: 3rem;
 text-align: left;
 margin-right: .5rem;
 color: hsla(0, 0%, 100%,1);
 word-wrap: break-word;
 line-height: 0.8;
 position: relative;
 z-index: 3;
 border-radius: 2px;
}
.logo::after,
.logo::before {
 content: "";
 display: block;
 position: absolute;
 background-color: inherit;
 width: 1em;
 height: 1em;
 top: -0.3em;
 left: 2em;
 z-index: -1;
 border-radius: 50%;
}
.logo::after {
 left: -0.3em;
 top: -0.3em;
}
/* .site-name {
 font-family: 'M PLUS Rounded 1c',sans-serif;
 font-weight: 400;
 font-size: 1.4rem;
 line-height: 1.3;
 color: rgb(230, 80, 50);
} */
.site-name a {
 display: flex;
 align-items: flex-end;
 flex-direction: column;
 flex-wrap: wrap;
 height: 2em;
 align-content: flex-start;
 width: 8em;
 line-height: 1;
}
.site-name small {
 font-size: 0.5em;
 display: block;
 letter-spacing: 0.22em;
 line-height: 1.6;
 text-align: center;
 text-indent: 0.2em;
}
.header-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.header-nav {
 background-color: hsla(30,70%,50%,.7);
 border-bottom: 3px solid hsla(-10,70%,70%,.7);
}
.sns {
 list-style: none;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 1.4em;
 padding: 0;
 margin: 0;
}
.sns a {
 padding: .3em
}

.header-nav ul {
 display: flex;
 list-style: none;
 justify-content: space-between;
 align-items: center;
 font-size: 0.8em;
 text-align: center;
}
.header-nav .menu a {
 display: block;
 padding: 0.5em 1em;
 position: relative;
 overflow: hidden;
 z-index: 3;
}
.header-nav .icon-cart {
 font-size: 1.4rem;
 position: relative;
 z-index: 1;
 margin-right: 1em;
}

.header-books-container .lead {
 background-color: hsla(10,20%,90%,0.9);
 color: hsla(-10,60%,40%,1);
 /* padding-top: 1em; */
 /* padding-bottom: 1em; */
 font-size: 1rem;
 width: 22em;
 height: 20em;
 box-sizing: border-box;
 padding: 3em 3em 0 4em;
 z-index: 3;
 position: relative;
 margin: 2rem auto;
 line-height: 1.75;
 border-radius: 60% 40% 40% 65%/60% 40% 70% 50%;
 box-shadow: -0.4em 0em 0 0 hsla(200,80%,60%,0.4),0.4em 0em 0 0 hsla(60,80%,60%,0.4);
 border-style: solid;
 border-width: 0.8em 0 0.6em 0;
 border-color: hsla(-10,80%,60%,0.8) hsla(0,0%,0%,0) hsla(100,80%,60%,0.3) hsla(0,0%,0%,0);
 animation: lead0 1 1s 8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.header-books-container .lead::after {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 70% 40% 40% 70%/60% 40% 60% 40%;
 border-style: solid;
 border-width: 0.8em 0 0.6em 0;
 border-color: hsla(-10,80%,60%,0.8) hsla(0,0%,0%,0) hsla(100,80%,60%,0.3) hsla(0,0%,0%,0);
 z-index: -1;
 background-color: hsla(10,20%,90%,0.9);
 transform: rotate(-85deg);
 mix-blend-mode: screen;
 /* animation: lead 1 8s 4s ease-out both; */
}
@keyframes lead {
 0% { transform: rotate(0); }
 100% { transform: rotate(-85deg); }
}
@keyframes lead0 {
 0% {
  transform: translateY(100%);
  opacity: 0;
 }
 100% {
  transform: translateY(0);
  opacity: 1;
 }
}
main > .w {
 padding-top: 1em;
 padding-bottom: 1em;
}
/* main > .w:not(:first-child) {
 border-top: 1px solid #333;
} */
main .secTitle {
 margin-bottom: 1em;
 font-size: 1em;
 padding: 0.3em 1em 0.3em 2.2em;
 position: relative;
 display: flex;
 justify-content: space-between;
 letter-spacing: .1em;
 background-color: #fff;
 flex-wrap: wrap;
 font-family: 'Noto Sans JP',sans-serif;
 border-radius: 1em;
}
main .secTitle::before {
 content: "";
 display: block;
 position: absolute;
 background-color: hsl(10, 78.3%, 54.9%);
 width: 1em;
 height: 1em;
 top: 0.6em;
 left: 0.6em;
 /*! z-index: -1; */
 border-radius: 50%;
 box-shadow: 0.4em -0.4em 0 -0.2em hsl(10, 78.3%, 54.9%);
 margin: 0;
}
.secTitle small {
 flex-grow: 1;
 text-align: right;
}
/* .top-list a > div {
 font-size: 0.9em;
} */
.top-list [class*="-title"] {
 font-size: 1.1em;
}
.top-list [class*="-title"] ~ p {
 font-size: 0.8em;
}
.header-books-container {
 overflow: hidden;
 position: relative;
 z-index: 1;
 background-color: hsla(70.2, 70%, 70%, 1);
 width: 100%;
 grid-column: span 2;
}
.header-books-container+main {
  grid-column: span 2;
}
.entry-content .minimal-info[class][class] {
 gap: 10px;
 display: flex;
 flex-wrap: wrap;
 margin: 1em 0;
 font-size: 14px;
}
.header-books {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 align-content: center;
 align-items: center;
 z-index: 1;
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
}
.header-books > div img {
 display: block;
 width: 165px;
}
.header-books > div {
 animation: bubble 1 ease-out 5s both;
 margin: 5px 0;
}
.header-books > div:nth-child(1) { animation-delay: 0.25s}
.header-books > div:nth-child(2) { animation-delay: 0.5s}
.header-books > div:nth-child(3) { animation-delay: 0.75s}
.header-books > div:nth-child(4) { animation-delay: 1s}
.header-books > div:nth-child(5) { animation-delay: 1.25s}
.header-books > div:nth-child(6) { animation-delay: 1.5s}
.header-books > div:nth-child(7) { animation-delay: 1.75s}
.header-books > div:nth-child(8) { animation-delay: 2s}
.header-books > div:nth-child(9) { animation-delay: 2.25s}
.header-books > div:nth-child(10) { animation-delay: 2.5s}
.header-books > div:nth-child(11) { animation-delay: 2.75s}
.header-books > div:nth-child(12) { animation-delay: 3s}
.header-books > div:nth-child(13) { animation-delay: 3.25s}
.header-books > div:nth-child(14) { animation-delay: 3.5s}
.header-books > div:nth-child(15) { animation-delay: 3.75s}
.header-books > div:nth-child(16) { animation-delay: 4s}
.header-books > div:nth-child(17) { animation-delay: 4.25s}
.header-books > div:nth-child(18) { animation-delay: 4.5s}
.header-books > div:nth-child(19) { animation-delay: 4.75s}
.header-books > div:nth-child(20) { animation-delay: 5s}
@keyframes slipin {
 0% {transform: translateX(100vw);}
 100% {transform: translateX(0);}
}
@keyframes bubble {
 0% {
  transform: translate(0%,600px);
  opacity: 0;
 }
 50% {
  opacity: 1;
 }
 100% {
  transform: translate(0%,0px);
  opacity: 1;
 }
}
/* top 最新刊 */
.top-list > * {
 margin-bottom: 1rem;
}
.new-release .book-info {
 font-size: 0.8em;
}
.new-release .book-title small {
 font-size: 0.8em;
 display: inline-block;
 background-color: hsla(60,80%,40%,.2);
 padding: 0 .5em;
}
.new-release .img {
 margin-right: 1em
}
.new-release .img img {
 display: block;
}

.news ul {
 font-size: 0.8em;
 padding: 0;
 background-color: #f6fdec;
 list-style: none;
}
.news ul a {
 display: flex;
 align-items: center;
 padding: .3em 1em;
}
.news ul a::before {
 content: "▶︎";
 display: inline-block;
 width: 1em;
 transform: scale(0.6);
 opacity: 0.7;
}
.news li:nth-child(2n) a {
 background-color: rgba(0,0,0,0.1);
}
.news ul time {
 font-size: 0.8em;
 display: inline-block;
 width: 6.5em;
}

.top-list a {
 padding: 1em;
 border: 2px solid hsla(-10,70%,20%,.7);
 display: grid;
 border-radius: 0.5em;
 background-color: #fff;
 grid-template-columns: 30% 1fr;
}

.topPage[class] dd {
  margin: 0;
}

.topPage[class] a {
  color: inherit;
  text-decoration: none;
}
/* .more {

} */
.top-list a:hover {
 box-shadow: 0 0 0.1em 0.1em hsl(39, 100%, 10%);
}
.top-list article {
 margin-bottom: 1rem;
}
.top-list .img {
 flex-basis: 20em;
 order: -1;
 margin-right: 1em;
}
.top-list .img img {
 display: block;
 width: 100%;
}
.city {
 background-color: hsla(-10,70%,20%,.7);
 color: #fff;
 display: inline-block;
 border-radius: 3px;
 text-align: center;
 padding: .5em;
 box-sizing: border-box;
 line-height: 1;
 font-size: 0.8rem;
 font-family: "MyGoB";
 margin: .5em .5em .5em 0;
}
.subTitle {
 display: block;
 font-size: 0.7em;
 font-weight: normal;
}
.seminar-title {
 font-size: 1.2em;
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 margin-bottom: 0.5em;
}

.item-category ul {
 list-style: none;
 padding: 0;
 display: flex;
 justify-content: flex-start;
 align-items: stretch;
 flex-wrap: wrap;
 margin-left: -0.5em;
 margin-right: -0.5em;
 box-sizing: border-box;
}
.item-category li {
 flex-basis: calc( (100% / 2) - 1em);
 margin: 0em 0.5em 1em;
}
.item-category li a {
 display: flex;
 border: 1px solid #ccc;
 padding: 0.5em;
 border-radius: 0.5em;
 background-color: #fff;
 height: 100%;
 align-items: center;
}
.item-category ul a::before,
.item-category [class*="icon"] {
 font-size: 1.8rem;
 display: inline-block;
 background-color: hsl(0, 0%, 50%);
 border-radius: 50%;
 padding: 0;
 margin-right: .2em;
 text-align: center;
 color: #fff;
 height: 2.5rem;
  line-height: 1.5;
  width: 2.5rem;
  text-align: center;
}
.item-category ul a[href*="/s/4/"]::before,
.item-category .icon-piano {
  background-color: hsl(220, 40%, 40%);
}
.item-category ul a[href*="/s/5/"]::before,
.item-category .icon-bell {
  background-color: hsl(20, 60%, 60%);
}
.item-category ul a[href*="/s/9/"]::before,
.item-category .icon-guitar {
  background-color: hsl(190, 40%, 40%);
}
.item-category ul a[href*="/s/15/"]::before,
.item-category .icon-chorus {
  background-color: hsl(50, 60%, 50%);
}
.item-category .icon-chime {
  content: "\e907";
  background-color: hsl(80, 60%, 50%);
}
.item-category .icon-piece {
  background-color: hsl(120, 40%, 40%);
}
.item-category .icon-book {
  background-color: hsl(0, 0%, 40%);
}

.item-category ul a[href*="/s/40/"]::before,
.icon-violin:before {
  content: "\e900";
  background-color: hsl(20, 60%, 40%);
}
.item-category ul a[href*="/s/16/"]::before,
.icon-base:before {
  content: "\e901";
  background-color: hsl(320, 60%, 40%);
}
.item-category ul a[href*="/s/17/"]::before,
.icon-harmonica:before {
  content: "\e902";
  background-color: hsl(280, 60%, 40%);
}
.item-category ul a[href*="/s/21/"]::before,
.icon-trumpet:before {
  content: "\e903";
  background-color: hsl(50, 60%, 40%);
}


footer {
 /* display: block;
 background-color: hsl(35, 80%, 20%);
 font-size: .8rem; */
 color: #fff;
}
footer .© {
 text-align: center;
}
/* footer address {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
footer address > * {
 margin: 0.2em 0.5em;
} */
.imgs {
 display: flex;
 flex-wrap: wrap;
 flex-basis: 50%;
 order: -1;
 align-items: center;
 margin-right: 1em;
 flex-shrink: 0;
}
.imgs .img {
 flex-basis: calc(100% / 2 - 2rem);
 flex-grow: 1;
 order: initial;
 margin-right: 0;
 box-sizing: border-box;
 animation: bdr infinite 4s steps(2);
}
.imgs .img img {
 display: block;
 border: 1px solid #ccc;
 width: 100%;
}
.imgs .img:nth-child(1) { animation-delay: -4s; }
.imgs .img:nth-child(3) { animation-delay: -3s; }
.imgs .img:nth-child(5) { animation-delay: -1s; }
.imgs .img:nth-child(7) { animation-delay: -2s; }
@keyframes bdr {
 0%,24% {box-shadow: 0 0 0 3px red;}
 25%,100% {box-shadow: 0 0 0 0 red;}
}
.imgs [class*="icon-arrow"] {
 font-size: 2em;
 color: #3c9;
 text-shadow: 2px 2px 5px rgba(0,0,0,.5);
 margin: .1em;
}
.imgs .icon-arrow-down[class] {
 margin-left: calc(75% - 0.2em);
}
.img .icon-bell {
 font-size: 6em;
 color: #d00;
 text-shadow: .95em .1em 0 hsl(210, 50%, 50%),1.9em 0.2em 0 hsl(192, 50%, 50%);
 background-color: #fc0;
 display: block;
 height: 100%;
 overflow: hidden;
}
.bg1 {
 background-color: #fcc;
 background-image:
 linear-gradient(180deg, rgba(255,255,255,.07) 50%, transparent 50%),
 linear-gradient(180deg, rgba(255,255,255,.13) 50%, transparent 50%),
 linear-gradient(180deg, transparent 50%, rgba(255,255,255,.17) 50%),
 linear-gradient(180deg, transparent 50%, rgba(255,255,255,.19) 50%);
 background-size: 100% 60px, 100% 120px, 100% 48px, 100% 16px;
 background-attachment: fixed;
}
.bg2 {
 background: repeating-linear-gradient(45deg, hsla(0,0%,0%,.1), hsla(0,0%,0%,.1) 10px, hsla(0,0%,0%,.2) 0, hsla(0,0%,0%,.2) 20px);
 background-blend-mode: overlay;
}
.new-release {
 background-color: #fa7;
}
.seminar-list {
 background-color: hsla(70,20%,90%,.3);
}
.item-category {
 background-color: hsla(-10,70%,20%,.7);
}

/* humburger */
body > [type="checkbox"] {
 position: absolute;
 clip: rect(0,0,0,0);
 width: 0;
}
.humb {
 position: relative;
 font-size: .7rem;
 line-height: 1;
 width: 2.8rem;
 display: flex;
 height: 2.7rem;
 flex-direction: column;
 cursor: pointer;
 z-index: 5;
 color: rgb(230, 80, 50);
 font-family: "Candal",sans-serif;
}
.humb span {
 display: block;
 padding-top: 2.5em;
 margin: 0 auto;
 text-align: center;
}
.humb::before,
.humb::after {
 content: "";
 display: block;
 min-height: 0.3em;
 width: 2.4em;
 background-color: rgb(230, 80, 50);
 border-radius: .2em;
 transition: .3s;
 position: absolute;
 top: 0;
 left: 0.8em;
}
.humb::before {
 box-shadow: 0 0.8em 0 0 rgb(230, 80, 50);
 transform: translateY(.4em) rotate(0deg);
}
.humb::after {
 transform: translateY(2em) rotate(0deg);
}
[id="gmenu"]:not(:checked) ~ .site-header .humb::before {
 box-shadow: 0 0 0 0 rgba(255,255,255,0);
 transform: translateY(.4em);
 transform: translateY(1.2em) rotate(45deg);
}
[id="gmenu"]:not(:checked) ~ .site-header .humb::after {
 transform: translateY(1.2em) rotate(-45deg);
}
[id="gmenu"]:not(:checked) ~ .site-header .header-nav {
 display: flex;
 height: auto;
 z-index: 10;
 flex-direction: column;
}
[id="gmenu"]:not(:checked) ~ .site-header .sns {
 display: flex;
}
/* 本来はモバイルファースト */
.header-nav {
 background-color: hsla(30, 60%, 70%, 0.9);
 width: 100%;
 box-sizing: border-box;
 position: absolute;
 color: hsl(20,30%,30%);
 font-weight: bold;
}
.header-nav ul {
 flex-direction: column;
 text-align: left;
 align-items: stretch;
 margin: 0;
}
.header-nav .sns .txt {
 font-size: 1rem;
 margin-left: 1em;
 }¥
 .header-nav .sns > * {
  flex-basis: 30%;
 }
 .header-nav .sns li > * {
  padding: 0.7rem 1rem;
  display: block;
 }
 .header-nav .sns li > *::before {
  font-size: 1.4rem;
  display: inline-block;
  width: 1em;
  text-align: center;
 }
 .header-top {
  flex-direction: row;
  flex-wrap: wrap;
  height: 3.3rem;
  overflow: hidden;
  height: 4rem;
 }
 .header-nav a {
  text-align: left;
  font-size: 1rem;
 }
 .header-nav li {
  border-bottom: 1px solid rgba(255,255,255,.3);
 }
 .header-nav .cart {
  order: -1;
 }
 .header-nav .cart a {
  display: flex;
  align-items: center;
 }
 .header-nav .cart a::after {
  content: "カートを見る";
  margin-left: 0.5em;
 }
 .header-nav .cart-num {
  position: relative;
  margin: 0;
  top: initial;
 }

 .header-nav .cart-num::before {
  content: "";
  position: absolute;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  /* background-color: rgb(230, 80, 80); */
  background-color: #afa;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
 }
 .header-nav .cart a:hover .cart-num {
  color: #000;
 }
 .header-nav .search-on {
  display: none;
 }
 .search-form {
  padding: .75em;
  display: flex;
  align-items: stretch;
  /*! background-color: #222; */
 }
 .search-form [type="search"] {
  flex-grow: 1;
  padding: .25em;
  font-size: .8em;
 }
 .search-form button {
  border: 0;
  background-color: #ccc;
  display: inline-block;
  width: 2em;
  text-indent: -5em;
  overflow: hidden;
  position: relative;
 }
 /* .header-nav .sns li .icon-search::before {
 } */
 .header-nav button.icon-search::before {
  text-indent: 0;
  display: block;
  position: absolute;
  top: 0.35em;
  left: .25em;
  width: 1.5em;
 }


 /* ######### media query 1 ########## */
 @media screen and (max-width: 1023px) {

  .site-header {
   padding: 0;
  }
  .site-header .header-top {
   padding-top: 0.3rem;
   padding-bottom: 0.1rem;
   /*! border-bottom: 5px solid hsla(30, 60%, 70%, 0.9); */
   margin-bottom: 5px;
   padding-left: 1rem;
   padding-right: 1rem;
  }

  .site-name a {
   align-items: flex-start;
   height: 2.7rem;
  }

  [id="gmenu"]:checked ~ .site-header .header-nav,
  .header-nav {
   display: none;
   top: 4rem;
   z-index: 10;
  }
  .humb {
   display: block;
  }
  .cover {
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   right: 0;
   top: 0;
   transition: .2s;
   transform-origin: center top 0;
   height: 100vh;
   transform: scaleY(0);
   opacity: 0;
   z-index: 3;
   cursor: pointer;
   width: 100%;
  }
  [id="gmenu"]:not(:checked) ~ .cover {
   width: 100%;
   transform: scaleY(1);
   opacity: 1;
  }
  .header-nav ul {
   padding: 0;
   border-top: 1px solid rgba(255,255,255,.3);
  }
  .search-bar {
   order: -1;
  }
 }

@media screen and (max-width: 767px) {
  .entry .entry-content, .entry .entry-summary {
    max-width: none;
    padding: 0 1rem;
    margin: 0 -1rem;
  }
}
 /* ######### media query 2 ########## */
 @media screen and (max-width: 700px) {

  .top-list a {
   /* flex-direction: column; */
   grid-template-columns: 1fr;
  }
  .top-list a > .img {
   flex-basis: 0%;
   margin-bottom: 1em;
   margin-right: 0;
  }
  .top-list .img img {
   max-width: 100%;
   width: auto;
   margin: 0 auto;
  }
  .imgs {
   margin: 0 0 1em;
  }
  .imgs .img img {
   width: 100%
  }

 }

 /* ######### media query 3 ########## */
 @media screen and (max-width: 460px) {

  .item-category li {
   margin: 0 auto 1em;
   flex-basis: 95%;
  }
  .site-header {
   background-attachment: scroll;
   background-position: center bottom,30% 0%;
  }
  .header-books-container .lead {
   width: 90%;
   padding: 10vw 1em;
   border-radius: 30% 40% 50% 50%/30% 30% 60% 50%;
   height: 90vw;
   line-height: 1.5;
  }
  .site-header .lead::after {
   border-radius: 10vw;
   transform: rotate(2deg);
  }
  .header-books > div img {
   width: 20vw;
  }
  .header-books > div img.tate {
   width: auto;
   height: 20vw;
  }
 }


 /* ######### media query 4 ########## */
 @media screen and (min-width: 1024px) {

  .humb {
   display: none;
  }
  .header-top {
   height: auto;
   padding-top: 1rem;
   padding-bottom: 0.8rem;
  }

  [id="gmenu"]:checked ~ .site-header .header-nav,
  .header-nav {
   position: relative;
   top: auto;
   z-index: 10;
   display: block;
  }
  .header-nav .sns {
   position: absolute;
   top: -3.2rem;
   right: calc(50% - 512px);
   display: flex;
   flex-direction: row;
  }

  .sub-menu {
   background-color: #432;
   overflow: hidden;
  }
  .header-nav .search-on {
   display: block;
  }
  label {
   cursor: pointer;
  }
  .header-nav .search-bar {
   /* display: none; */
   transition: .4s;
   max-height: 0rem;
  }
  [id="search-bar"]:not(:checked) ~ .site-header .search-bar {
   /* display: block; */
   max-height: 4rem;
  }
  .header-nav .sns li > * {
   padding: 0.5rem 0.5rem;
   position: relative;
   color: #fff;
   background-color: hsl(10, 78.3%, 54.9%);
   border-radius: 50%;
   margin-left: 0.5em;
   overflow: hidden;
   text-align: right;
   transition: 0.2s;
  }
  .header-nav .sns a:hover {
   /*! width: 4em; */
   overflow: visible;
   /*! border-radius: 0 50% 50% 0; */
   box-shadow: 0 0 0 3px hsl(10, 78.3%, 54.9%);
  }
  .header-nav li {
   border: none;
  }
  .header-nav .sns li .txt {
   /*! transform: rotateX(90deg); */
   position: absolute;
   white-space: nowrap;
   /*! padding: 0.5em; */
   line-height: 2;
   transition: 0.4s;
   top: -2em;
   right: 1em;
   transform-origin: right center;
   /*! background-color: inherit; */
   font-size: .7rem;
   font-weight: bold;
   border-radius: 24px;
   /*! height: 48px; */
   z-index: 0;
   /*! opacity: 0; */
   color: hsl(10, 78.3%, 54.9%);
  }
  .header-nav .sns a:hover .txt {
   transform: rotateX(0);
   /*! padding: 0.5em; */
   opacity: 1;
  }
  .header-nav .menu {
   flex-direction: row;
   align-items: center;
  }
  .header-nav .menu a::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   display: block;
   width: 10em;
   height: 10em;
   background-color: rgb(230, 80, 50);
   opacity: .8;
   transform: translate(-50%,-50%) scale(0);
   transition: 0.4s ease-out;
   z-index: -1;
   border-radius: 50%;
   opacity: 0;
  }
  .header-nav a:hover::before {
   transform: translate(-50%,-50%) scale(1);
   opacity: 1;
  }
  .header-nav a:hover {
   opacity: 1;
   color: #fff;
   /*! background-color: hsl(10, 78.3%, 54.9%); */
  }
  .header-nav .sns a:hover::before {
   transform: none;
  }
  .header-nav a,.header-nav label {
   font-size: 1em;
  }
  .header-nav .cart {
   order: initial;
  }
  .header-nav .cart a::after {
   display: none;
  }
  .header-nav .cart-num {
   font-size: 1em;
   display: block;
   width: 2em;
   height: 1em;
   line-height: 1;
   position: absolute;
   top: .4em;
   right: 0;
   text-align: center;
   z-index: 1;
  }
  .header-nav .icon-cart {
   margin-right: .5em;
  }
  [class*="ougi-"] {
   width: 300px;
   transform-origin: center 1024px;
  }
  .header-books > div img.tate {
   width: auto;
   height: 142px;
  }
  .w {
   padding-left: calc(50% - 600px);
   padding-right: calc(50% - 600px);
  }
  .item-category li {
   flex-basis: calc( (100% / 4) - 1em);
   margin: 0em 0.5em 1em;
  }

 }