@charset "utf-8";
/* 葬送のフリーレン 共通CSS _ after 202508 */
:root {
  /*box-shadow*/
  --bs-pic: 1px 3px 5px rgb(0 0 0 / 30%);
  /*bg color*/
  --bg-cont: #fff;
  --bg-blu: #d0ecfa;
  --bg-ylw: #f9efc8;
  /*color*/
  --c-blu: #3585d0;
  --c-brw: #43201a;
  /*color _ cont category*/
  --c-cont-spec: #40a6d8;
  --c-cont-info: #fad07d;
  /*color _ frieren*/
  --c-frieren-blu: #01adaf;
  --c-frieren-grn: #3da4af;
  --c-frieren-gold: #dccd85;
  --c-frieren-red: #e70314;
  --c-frieren-ppl: #7758a8;
  /*color _ text*/
  --c-text-pnk: #e31776;
  --c-text-blu: #0184cf;
  /*color _ link*/
  --c-link: #0092e2;
  --c-link-hover: #ee9200;
  --color-link-cmn:#0092e2;
  --color-link-cmn-hover:#ee9200;
  /*font-family*/
  --ff-NtSnsJP: YakuHanJP, "Noto Sans JP", sans-serif;
  --ff-NtSrfJP: YakuHanMP, "Noto Serif JP", serif;
  --ff-YuMc: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ff-SwMc: 'Sawarabi Mincho', sans-serif;
  --ff-Cinzel: 'Cinzel', serif;
  --ff-zenmaruG: "Zen Maru Gothic", "Noto Sans JP","sans-serif";
  --ff-zenOldMin: "Zen Old Mincho", 游明朝体, YuMincho, 游明朝, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif;
  /*font-size*/
  --fs: min(2.114vw,1rem);
  --rs: clamp(0.5rem, 1.042vw, 1rem);
  /* Height */
  --height-hdr: calc(var(--fs) * 5);
  --height-menu: calc(var(--fs) * 5);
  /*width*/
}
/*-------------------------------
 Header
---------------------------------*/
header {
  width:100%;
  background: #fff;
  color: #fff;
  position:fixed;
  left: 0;
  top: 0;
  z-index: 30;
}
header h1 {
  display: none;
}
header .logo {
  width: calc(var(--fs) * 20);
  margin: 0;
  position: absolute;
  left: 1%;
  top: 10%;
}
#headerInner {
  max-width:var(--width-cont);
  height: var(--height-hdr);
  padding: 0;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
div.fxblnk {
  width: 100%;
  height: var(--height-hdr); /*header area*/
  position: relative;
  z-index: 0;
}
/*--------------------------------------
 Header Navi - Toggle Button
-----------------------------------------*/
.navi-toggle {
  display:block;
  width: calc(var(--fs) * 4);
  height: calc(var(--fs) * 4);
  cursor: pointer;
  position: absolute;
  right: min(3%,calc(var(--fs) * 1));
  top: calc(var(--rs) * 0.2);
  z-index: 20;
}
.navi-toggle.on .one {
  transform :rotate(45deg) translate(calc(var(--fs) * 0.8), calc(var(--fs) * 0.7));
}
.navi-toggle.on .two {
  opacity: 0;
}
.navi-toggle.on .three {
  transform :rotate(-45deg) translate(calc(var(--fs) * 0.7), calc(var(--fs) * -0.7));
}
.one,
.two,
.three {
  width: 75%;
  height: 3px;
  margin: calc(var(--fs) * 0.7) auto;
  background-color: var(--c-frieren-blu);
  backface-visibility: hidden;
  transition-duration: 0.3s;
}
.navi-toggle::after {
  content: "MENU";
  width: 100%;
  color: var(--c-frieren-blu);
  font-size: calc(var(--fs) * 1);
  text-align: center;
  display: block;
  position: absolute;
  bottom: -1em;
  left: 0;
}
/*-------------------------------
 Header Navi - Global Menu
---------------------------------*/
nav#NaviMenu {
  width: 100%;
  height: calc(100vh - var(--height-hdr));
  padding: 1% 3% 3%;
  /*background: rgb(245 245 245 / 99%);*/
  background: linear-gradient(0deg, rgb(1 173 175 / 85%) 0%, rgb(4 170 114 / 85%) 100%);
  /*font-family: var(--ff-zenmaruG);*/
  font-family: var(--ff-Cinzel);
  overflow-y: scroll;
  scrollbar-width: none;
  position: fixed;
  left: 0;
  top: var(--height-hdr);
  z-index: 20;
  transform: translateY(-100%);
  transition-duration: 0.3s;
}
/*menu global*/
.naviMenu-global {
  width: 100%;
  max-width: 128rem;
  margin: 0 auto;
  color: #fff;
  font-family: var(--ff-zenOldMin);
  font-size: calc(var(--fs) * 1.5);
  font-weight: 300;
  position: relative;
  z-index: 11;
}
.naviMenu-global > div + div {
  margin: calc(var(--rs) * 5) auto calc(var(--rs) * 10);
}
.naviMenu-global > div :has(.naviMenu-global-linkTop) {
  background: none;
}
.naviMenu-global-linkTop {
  width: min(60%, 30rem);
  margin: calc(var(--rs) * 10) auto;
  display: block;
}
.naviMenu-global-linkTop img {
  /*filter: brightness(0) invert(1);*/
}
/*navi menu open*/
nav#NaviMenu.open {
  transform: translateY(0%);
}
nav#NaviMenu.open .naviMenu-global {
  /*display: block;*/
}
nav#NaviMenu.open + main {
  filter: blur(5px);
  transition: filter 1.5s ease;
}
/*navi hr*/
.naviMenu-global + hr {
  width: min(94%, 108rem);
  margin: 0 auto calc(var(--fs) * 4);
  border-color: var(--c-frieren-grn);
}
/*-------------------------------
 overlay manu
---------------------------------*/
.naviMenu-title {
  width: 100%;
  margin-bottom: calc(var(--fs) * 2);
  font-size: calc(var(--fs) * 3);
  font-weight: bold;
  text-align: center;
}
.naviMenu-title small {
  color: var(--c-frieren-gold);
  font-size: calc(var(--fs) * 1.4);
}
/*navi menu banner*/
.naviMenuBnr {
  width: min(92%, 72rem);
  margin: 2% auto 4%;
  text-align: center;
}
/*products thumbnail*/
.productsThumb {
  margin: calc(var(--fs) * 2) auto;
  font-size: calc(var(--fs) * 1.6);
  letter-spacing: 0.01em;
  text-align: center;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
/*.productsThumb::before,
.productsThumb::after {
  content: "";
  width: min(48%, 34rem);
  margin: 1%;
  flex: 1 1 auto;
  order: 2;
}*/
.productsThumb a:hover {
  filter: opacity(0.8);
  transition: all .3s;
}
.productsThumb div.prdctThumb-ctg {
  width: min(48%, 22rem);
  margin: 1%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
}
.productsThumb :is(li,dd) {
  margin-bottom: calc(var(--rs) * 2);
  /*box-shadow: var(--bs-cont);*/
  position: relative;
  flex: 1 1 auto;
  order: 1;
}
.productsThumb :is(li,dd).prdctNew::before {
  content: "";
  width: 3em;
  height: 3em;
  /*background: linear-gradient(180deg, #f00 0%, #df1414 100%);*/
  background: linear-gradient(180deg, #dccd85 0%, #cec07c 100%);
  border-radius: 50%;
  box-shadow: 1px 1px 3px rgb(50 50 50 / 20%);
}
.productsThumb :is(li,dd).prdctNew::after {
  content: "NEW";
  padding: 1em 0.25em;
  line-height: 1;
  text-shadow: 1px 1px 3px rgb(50 50 50 / 20%);
}
.productsThumb :is(li,dd).prdctNew::before,
.productsThumb :is(li,dd).prdctNew::after {
  font-size: calc(var(--fs) * 1.4);
  position: absolute;
  right: -4%;
  top: -2%;
  z-index: 1;
}
.productsThumb :is(li,dd) a {
  padding-bottom: 0.5em;
  /*background: var(--c-blu);*/
  display: block;
  overflow: hidden;
}
/*.productsThumb::after {
  content: "";
  width: min(48%, 24rem);
  height: 0;
  margin: 1%;
  flex: 1 1 auto;
}*/
.prdctsThum {
  /*background: #fff;*/
  background: none;
}
.prdctsThum img {
  border-radius: calc(var(--rs) * 1);
}
.prdctsThum-name {
  padding: 0.5em;
  min-height: 3em;
  /*background: var(--c-blu);*/
  background: none;
  color: #fff;
  font-weight: normal;
  line-height: 1.4;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}
.prdctsThum-name i {
  color: var(--c-frieren-gold);
  position: absolute;
  right: 0.25em;
  top: calc(50% - 0.4em);
}
.prdctsThum-name small.prdctsThum-soldout {
  width: 100%;
  color: #ffff9d;
  font-size:  calc(var(--fs) * 1.2);
  text-align: center;
  display: block;
  position: absolute;
  bottom: -0.5em;
  left: 0;
}
.prdctsThum-name-text {
  font-size: calc(var(--fs) * 1.6);
}
.prdctsThum-name-period {
  padding: 0.25em;
  margin-top: 0.5em;
  background: #d61979;
  color: #fff;
  font-size:  calc(var(--fs) * 1.2);
}
.prdctsThum-name-period span {
  display: inline-block;
}
.prdctsThum-name-end {
  margin-top: 0.75em;
  color: #ff76c3;
  font-size:  calc(var(--fs) * 1.2);
}
@media screen and (max-width: 640px) {
  .productsThumb :is(li,dd).prdctNew {
    width: 100%;           
  }
}
/*information contents*/
.naviInfo-conts {
  width: min(98%, 88rem);
  margin: 0 auto;
}
.naviInfo-conts dd {
  background: #fff;
}
.naviInfo-conts .link-btn-container {
  margin-top: 0;
}
.naviInfo-conts .link-btn-container li {
  text-align: center;
}
/*topic contents*/
.naviTopics-conts {
  margin: calc(var(--fs) * 2) auto;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.naviTopics-conts dt {
  width: 100%;
}
.naviTopics-conts :is(li,dd) {
  width: min(94%, 30rem);
  margin: 1%;
  background: var(--c-frieren-grn);
  text-align: center;
  flex: 0 1 auto;
  position: relative;
}
.topics-img {
  aspect-ratio: 75 / 47;
  object-fit: cover;
}
.topics-img--ddX {
  background: #fff;
}
.topics-name {
  padding: 1em 2em 1em 0.5em;
  line-height: 1.3;
  color: #fff;
  font-weight: normal;
  position: relative;
}
@media screen and (max-width: 640px) {
  .naviTopics-conts {
    flex-direction: column;
  }
  .naviTopics-conts :is(li,dd) {
    width: 100%;
    margin: 2% 1%;
  }
  .topics-thum {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .topics-thum img,
  .topics-name{
    width: 50%;
  }
}
/*in page anchor link*/
.anchorlink-container {
  padding: calc(var(--fs) * 1) 2%;
  background: #fff;
  position: relative;
}
.anchorlink-list {
/*  width: min(100%, 96rem);
  margin: calc(var(--fs) * 1.5) auto;
  font-size: calc(var(--fs) * 1.6);
  text-align: left;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;*/
  width: min(96%, 88rem);
  margin: calc(var(--rs)* 3) auto calc(var(--rs)* 1);
  border-radius: 5px;
  /*font-family: var(--ff-zenmaruG);*/
  font-size: calc(var(--fs)* 1.6);
  font-weight: bold;
  line-height: 1.8;
  text-align: left;
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.anchorlink-list dt {
  width: 100%;
  padding: 0 2% 0.25em;
  margin-bottom: 0.25em;
  /*background: #fee3e9;
  color: #ed1371;*/
  /*background: #f6971f;*/
  background: #f5691c;
  color: #fff;
  font-size: calc(var(--fs) * 1.8);
  font-weight: bold;
  text-align: center;
}
.anchorlink-list :is(li,dd) {
  width: clamp(20%, calc(var(--fs) * 10), 50%);
  padding: 0;
  line-height: 1.3;
  flex: 1 1 auto;
}
.anchorlink-prdct :is(li,dd) {
  padding-left: 1.5em;
  padding-right: 0.5em;
}
.anchorlink-list a {
  padding: calc(var(--rs) * 1.6) 0;
  display: block;
}

.anchorlink-list a i {
  color: var(--c-bs-blgn);
}
.anchorlink-list a:hover,
.anchorlink-list a:hover i {
  color: var(--c-link-hover);
}
.anchorlink-info {
  background: none;
}
.anchorlink-info :is(li,dd) {
  width: clamp(20%, calc(var(--fs) * 18), 50%);
  text-align: center;
}
.anchorlink-info:not(.info-afterDolpa) {
  padding: calc(var(--rs) * 0.8) 0;
  /*background: var(--c-link);*/
  background: #f7faaa;
}
/*.anchorlink-info:not(.info-afterDolpa) a {
  text-shadow: 0px 0px 1px rgb(38 69 82 / 50%);
  filter: drop-shadow(0px 0px 2px rgb(38 69 82 / 50%));
}*/
.anchorlink-info:not(.info-afterDolpa) a,
.anchorlink-info:not(.info-afterDolpa) a i {
  /*color: #fff;*/
  color: var(--c-link);
  font-weight: bold;
}
.anchorlink-info:not(.info-afterEvent) a:hover,
.anchorlink-info:not(.info-afterEvent) a:hover i{
  color: #bbc3e7;
  text-shadow: none;
  filter: none;
  filter: alpha(opacity=100);
}
@media screen and (max-width:767px) {
  .anchorlink-info :is(li,dd) {
    text-align: left;
  }
}