@charset "UTF-8";

#sys00 {
  margin-bottom: 7%;
}
#sys00 ruby rt {
  font-size: 0.4em;
}
#sys00 a:hover,
.season_all a:hover,
.itemBtn:hover,
.itemBtn1:hover,
.itemBtn2:hover {
  opacity: 0.7;
  text-decoration: none;
}
#sys00 .catch {
  text-align: center;
  font-family: "A-OTF A1明朝 Std", "Yu Mincho", "Hiragino Mincho ProN",
    "HGS明朝E", "MS PMincho", serif;
}
#sys00 .catch.sub1 {
  font-size: 31px;
}
#sys00 .catch.sub2 {
  font-size: 26px;
}
#sys00 h1 {
  font-size: 55px;
  margin: 0;
  padding: 0;
  border: none;
  font-family: "A-OTF A1明朝 Std", "Yu Mincho", "Hiragino Mincho ProN",
    "HGS明朝E", "MS PMincho", serif;
  color: #c20057;
  text-align: center;
}
#sys00 h1 span {
  font-size: 37px;
}
#sys00 h2 {
  font-size: 47px;
  margin: 0 0 1% 0;
  padding: 0;
  border: none;
  font-family: "A-OTF A1明朝 Std", "Yu Mincho", "Hiragino Mincho ProN",
    "HGS明朝E", "MS PMincho", serif;
  text-align: center;
}
#sys00 h2 span {
  font-size: 26px;
}
#sys00 #itemA h2 {
  color: #196a49;
}
#sys00 #itemB h2 {
  color: #c20057;
}
#sys00 .ribonA,
#sys00 .ribonB {
  position: relative;
  display: inline-block;
  padding: 0 80px;
}
#sys00 .ribonA::before,
#sys00 .ribonA::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}
#sys00 .ribonA::before {
  left: 0;
  background-image: url("/img/usr/genre/sys00/260916_sys00_tama_ttl1.png");
}
#sys00 .ribonA::after {
  right: 0;
  background-image: url("/img/usr/genre/sys00/260916_sys00_tama_ttl2.png");
}
#sys00 .ribonB::before,
#sys00 .ribonB::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}
#sys00 .ribonB::before {
  left: 0;
  background-image: url("/img/usr/genre/sys00/260916_sys00_imo_ttl1.png");
}
#sys00 .ribonB::after {
  right: 0;
  background-image: url("/img/usr/genre/sys00/260916_sys00_imo_ttl2.png");
}
#sys00 .twoLine {
  position: relative;
  line-height: 1.2em;
  font-size: 42px;
  width: 100%;
  margin-bottom: 3%;
}
#sys00 .ribonA.twoLine::before {
  left: 10%;
}
#sys00 .ribonA.twoLine::after {
  right: 10%;
}
#sys00 .ribonB.twoLine::before {
  left: 2%;
}
#sys00 .ribonB.twoLine::after {
  right: 2%;
}
#sys00 .twoLine::before,
#sys00 .twoLine::after {
  top: 50%;
  transform: translateY(-50%);
}

/* main ブロック */
#sys00 .main {
  margin-bottom: 7%;
  padding-bottom: 7%;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
#sys00 .main .guide {
  margin-bottom: 2%;
  display: flex;
  justify-content: center;
  gap: 2%;
  list-style: none;
  padding: 0;
}
#sys00 .main .guide li {
  max-width: 457px;
}
#sys00 .main .guide li .imgBox {
  margin-bottom: 2%;
}
#sys00 .main .guide li .txtBox {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#sys00 .main .postage {
  margin-bottom: 2%;
}
#sys00 .main .postage img {
  margin-right: 1em;
}
#sys00 .main .postage img:last-of-type {
  margin-right: 0;
}
#sys00 .main .guide li .txtBox .itemName {
  font-size: 18px;
}
#sys00 .main .guide li .txtBox .itemPrice {
  font-size: 28px;
  margin-bottom: 3%;
}
#sys00 .main .guide li .txtBox .itemPrice span {
  font-size: 18px;
}
#sys00 .main .guide li .txtBox .itemBtn1 {
  margin-bottom: 1.5%;
}
#sys00 .main .guide li .txtBox .itemBtn2 {
  margin-bottom: 1.5%;
}
    
/* ボタン */
#sys00 .main .guide li .txtBox .itemBtn1,
#sys00 .main .guide li .txtBox .itemBtn2,
#sys00 .cont .itemBlock .txtBox .itemBtn {
  width: 280px;
  height: 36px;
  position: relative;
  border-radius: 5px;
}
#sys00 .main .guide li .txtBox .itemBtn1 a,
#sys00 .main .guide li .txtBox .itemBtn2 a,
#sys00 .cont .itemBlock .txtBox .itemBtn a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 36px;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  border-radius: 5px;
}
#sys00 .main .guide li .txtBox .itemBtn1 a::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  float: right;
  background: transparent;
  transform: rotate(135deg) translate(0, -50%);
  position: absolute;
  top: 30%;
  right: 8%;
}
#sys00 .main .guide li.A .txtBox .itemBtn1 a::after {
  border-top: solid 1px #196a49;
  border-right: solid 1px #196a49;
}
#sys00 .main .guide li.B .txtBox .itemBtn1 a::after {
  border-top: solid 1px #c20057;
  border-right: solid 1px #c20057;
}
#sys00 .main .guide li .txtBox .itemBtn2 a::after,
#sys00 .cont .itemBlock .txtBox .itemBtn a::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  float: right;
  background: transparent;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  transform: rotate(45deg) translate(0, -50%);
  position: absolute;
  top: 50%;
  right: 8%;
}
#sys00 .main .guide li.A .txtBox .itemBtn1,
#sys00 .main .guide li.A .txtBox .itemBtn2 {
  border: 1px solid #196a49;
}
#sys00 .main .guide li.B .txtBox .itemBtn1,
#sys00 .main .guide li.B .txtBox .itemBtn2 {
  border: 1px solid #c20057;
}
#sys00 .main .guide li.A .txtBox .itemBtn1 a {
  color: #196a49;
}
#sys00 .main .guide li.A .txtBox .itemBtn2,
#sys00 #itemA .itemBlock .txtBox .itemBtn {
  background-color: #196a49;
  color: #fff;
  border: 1px solid #196a49;
}
#sys00 .main .guide li.B .txtBox .itemBtn2 {
  background-color: #c20057;
  color: #fff;
  border: 1px solid #c20057;
}
#sys00 .main .guide li.A .txtBox .itemBtn2 a,
#sys00 #itemA .itemBlock .txtBox .itemBtn a {
  background-color: #196a49;
  color: #fff;
}

#sys00 .main .guide li.B .txtBox .itemBtn1 a {
  color: #c20057;
}
#sys00 .main .guide li.B .txtBox .itemBtn2 a,
#sys00 #itemB .itemBlock .txtBox .itemBtn a {
  background-color: #c20057;
  color: #fff;
}

#sys00 .main .notes {
  font-size: 16px;
  text-align: center;
}

/* cont ブロック */
#sys00 .cont {
  margin-bottom: 7%;
  padding-bottom: 7%;
  border-bottom: 1px solid #ccc;
  scroll-margin-top: 180px;
}
#sys00 .cont:last-of-type {
  border-bottom: 0;
}
#sys00 .cont .imageImg {
  margin-bottom: 2%;
}
#sys00 .cont .notes {
  margin-bottom: 3%;
  font-size: 18px;
    text-align: center;
}
#sys00 .cont .review {
  margin-bottom: 5%;
}
#sys00 .cont .itemBlock {
  display: flex;
  flex-wrap: wrap;
  gap: 4%;
  justify-content: flex-start;
}
#sys00 .cont .itemBlock .imgBox {
  max-width: 468px;
  width: 51%;
  position: relative;
}
#sys00 .cont .itemBlock .imgBox .package {
  position: absolute;
  right: -5%;
  bottom: -18%;
}
#sys00 .cont .itemBlock .txtBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#sys00 .cont .itemBlock .txtBox .itemName {
  font-size: 20px;
}
#sys00 .cont .itemBlock .txtBox .itemPrice {
  margin-bottom: 0.5em;
  font-size: 28px;
}
#sys00 .cont .itemBlock .txtBox .itemPrice span {
  font-size: 18px;
}
#sys00 .cont .itemBlock .txtBox .itemPrice .postage {
  margin-left: 0.5em;
  display: inline-flex;
  align-items: center;
  width: 38%;
}
#sys00 .cont .itemBlock .txtBox .itemBtn {
  margin-bottom: 0.5em;
  border-radius: 5px;
}
#sys00 .cont .itemBlock .txtBox .itemPeriod {
  font-size: 16px;
  color: #bc8b25;
}

@media screen and (max-width: 1150px) {
    
  #sys00 .catch.sub1 { font-size: 29px; }
  #sys00 .catch.sub2 { font-size: 24px; }
  #sys00 h1 { font-size: 48px; }
  #sys00 h1 span { font-size: 28px; }
  #sys00 h2 { font-size: 32px; }
  #sys00 h2 span { font-size: 24px; }
  #sys00 .twoLine { font-size: 32px; }
  #sys00 .main .guide li .txtBox .itemName { font-size: 16px; }
  #sys00 .main .guide li .txtBox .itemPrice { font-size: 26px; }
  #sys00 .main .guide li .txtBox .itemPrice span { font-size: 16px; }
  #sys00 .main .notes { font-size: 14px; }
  #sys00 .cont .itemBlock .txtBox .itemName { font-size: 18px; }
  #sys00 .cont .itemBlock .txtBox .itemPrice { font-size: 26px; }
  #sys00 .cont .itemBlock .txtBox .itemPrice span { font-size: 16px; }
  #sys00 .cont .notes { font-size: 16px; }
  #sys00 .cont .itemBlock .txtBox .itemPeriod { font-size: 14px; }
  #sys00 ruby rt { font-size: 0.35em; } /* 0.4em → 約2px減相当 */
}