@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0;}
body {font-size:16px;line-height: 160%; font-family: 'Noto Serif JP', "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; font-feature-settings:"normal";}
ul { list-style: none; }
fieldset,img { border: 0; vertical-align: top; overflow: hidden; }
a { text-decoration:none; color: #b79700; }
.tuline { text-decoration: underline; }
img{ max-width:100%;}
.sp_none{ display: block; }
.pc_none{ display: none; }
.an_scl{ opacity: 0; }


.fw-dsm-pr6n{font-family: "dnp-shuei-mincho-pr6n", sans-serif;}
.fw-dsmp-std{font-family: dnp-shuei-mgothic-std, sans-serif;}
.fw-qs_en{font-family: quiche-sans, sans-serif;}
.fw_Nsans{font-family: 'Noto Sans JP', sans-serif;}

:root{
  --ht: 100px;
  --body_fs: 20px;
    --c01: #4d341e;
  --c02: #c0a57f;
  --c03: #ffffff;
}



.red_cl{ color:#e9525a; }
.white_cl{ color:#fff; }
.black_cl{ color: #000; }


.fs14{ font-size:0.7em; line-height: 150%; }
.fs16{ font-size:0.8em; line-height: 160%; }
.fs18{ font-size:0.9em; line-height: 160%; }
.fs20{ font-size:1em; line-height: 170%; }
.fs22{ font-size:1.1em; line-height: 170%; }
.fs26{ font-size:1.3em; line-height: 170%; }
.fs30{ font-size:1.5em; line-height: 160%; }
.fs31{ font-size:1.55em; line-height: 150%; }
.fs34{ font-size:1.7em; line-height: 140%; }
.fs36{ font-size:1.8em; line-height: 140%; }
.fs40{ font-size:2em; line-height: 120%; }
.fs60{ font-size:3em; line-height: 120%; }

.smf{ font-weight: 300; }
.ta_cen{text-align: center;}

.ls-003{letter-spacing: -0.03em;}



/****** loader ******/
.loading{ opacity: 0; animation: fadeIn 1s cubic-bezier(0.35, 0.1, 0.25, 1) forwards; overflow: hidden;}
.loading .wrap{ opacity: 0; }
.loader{ position: absolute; top: 0; right: 0; width: 100vw; height: 100vh;z-index: 999; animation: fadeIn 1s cubic-bezier(0.35, 0.1, 0.25, 1) forwards;}
.loading .loader{ animation: tc 1s cubic-bezier(0.35, 0.1, 0.25, 1) forwards; }

.spinner{ height:50px; width:50px; border:4px solid #c92a37; border-radius:50%; border-top-color:#ff6c78; position: fixed; top:calc(48% - 25px); left: calc(50% - 25px); opacity:1; animation: spin 1s linear infinite, fadeOut 0.8s ease forwards;   backface-visibility: hidden; }
.loading .spinner{opacity: 1; animation: spin 0.6s linear infinite!important;}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tc {
  0% { width: 100vw; }
  100% { width: 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/******************************************************************/
html{ font-size:var(--ht); overflow-x: hidden;}
body{font-size:var(--body_fs); line-height:160%; position: relative;overflow-x: hidden;}
body::after{content: ""; position: fixed; top: 0; left: 0; width: 100vw;height: 101vh; z-index: -1; background: url("../images/bg.svg") center center no-repeat; background-size: cover; opacity: 0.3;}


.wrap{ position: relative; z-index: 10; }
header{ width: 2120px; max-width:100%; margin: 0 auto;padding: 0; box-sizing: border-box; position: relative; z-index: 10;}
.top{ text-align: center; display: flex;flex-wrap: wrap; }
.top_kv{ width: 44.33%; padding: 0.55rem 0 0 4.9%; }
.top_logo{width: 42.7%; text-align:center; padding:1.65rem 0 0 3.28%; }
  .bn-top_hero1{ margin: 1.3rem 0 0 6%; width: 88%; }
  .bn-top_hero1 img{transform: rotate(-5deg); transform-origin: center center; overflow: visible; /* filter: drop-shadow(0.6rem 0.48rem 0.15rem rgba(0, 0, 0, 0.2)); */}


.main{ box-sizing: border-box; position: relative; z-index: 3;}
.inner_mob{width: 1920px; max-width:90%; margin: 0 auto; position:relative; box-sizing: border-box;}
  .mob_incon{ position: relative; }
  .mob_con01 .mob_incon{padding:2.9rem 0 1.1rem 0; margin-top: -1.9rem;}
  .mob01_tit01{ width:48.958%;/*w940px*/margin: 0 0 0 7.55%;}
    .mob01_tit01 img{ width: 58%; }

  .mob01_tit02{ width:48.958%;/*w940px*/margin: -0.2rem 0 0 21.45%;}
    .mob01_tit02 img{ width:45%;}
  .mob01_con{ width:48.958%;/*w940px*/margin: 0.8rem 0 0 6%; box-sizing: border-box; padding: 3.25em; text-align: center;background: #fffbec; position: relative; line-height: 1.7; letter-spacing: 0.05em;}
    .decor_berry1_rota{ position: absolute; bottom: 0; left: 0; width: 28.4%; transform:rotate(180deg) translate(25%, -28%); transform-origin: center center;}
  .mob01_pic01{ position: absolute;top: 1.6rem; right: 4.17%; width:46.875%; z-index: 5; }
    .mob01_tx01{text-align: center; color:#b79700;  width: 77.778%;margin: -1em 0 0 12.11%; position: relative; z-index: 5;}
    .decor_berry1{ position: absolute; top:1.3%; right: -0.1rem;width: 23.437%; }
    .inm_line{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; box-sizing: border-box; background: url('data:image/svg+xml;base64,PHN2ZyAKIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogd2lkdGg9IjE5MjBweCIgaGVpZ2h0PSIxNzI0cHgiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiICBmaWxsPSJyZ2IoMjU1LCAyNTUsIDI1NSkiCiBkPSJNMC4wMDAsMTcyNC4wMDAgTDE5MTkuODk4LDE3MjQuMDAwIEwxOTE5Ljg5OCwyODYuODQwIEMxOTE5Ljg5OCwyODYuODQwIDE1MjguMTI1LDAuNDU2IDk1OS4xNDksMC40NTYgQzM5MC4xNzMsMC40NTYgMC4wMDAsMjg2Ljg0MCAwLjAwMCwyODYuODQwIEwwLjAwMCwxNzI0LjAwMCBaIi8+Cjwvc3ZnPg==') center top no-repeat; background-size: 100% auto;filter: drop-shadow( 0 0 0.5rem rgba(194, 188, 196, 0.4));}
    .inm_line>span{ display: block; width:100%; height:calc(100% - 2.9rem);margin-top: 2.9rem; background-color:#fff;  }



.mob_con02{ background-color: #f5a8b4; padding: 0.6rem 0 0.5rem 0; width: 100%; max-width: 100%; }
  .mob_con02 .mob_incon{ width: 1920px; max-width:90%; margin: 0 auto; box-sizing: border-box;}
    .comic_piclist{display: flex; flex-wrap: wrap; justify-content: center;}
      .comic_pic{ width:14.68%;margin: 0.5%; }
      .mob02_tx01{text-align: center; padding: 1.5em;}

      .ban_lmore{text-align: center; }
      .btn_pic{border-radius: 10em; display: inline-block; overflow: hidden; background: #fff;transition: background 0.4s;}
      .btn_pic[href] img{mix-blend-mode: multiply; width: 3rem; }
      .btn_pic[href]:hover{ background: #e6d3a1;}


      .btn_tx{--cl: #0f3089; font-size: 2em; line-height: 1; color: var(--cl); font-weight: 700; display: inline-flex;align-items: center;justify-content: center;gap: 8px;padding:0.5em 1em;border-radius: 10em;transition:all 0.3s;position: relative; border: 1px solid var(--cl); background:var(--bgcl,#fff);}
        .arrow{transform: rotate(-45deg); font-weight: 300; font-size: 1em;transition:all 0.3s;}
        .btn_tx[href]:hover{--cl: #e60014;}
        .btn_tx[href]:hover .arrow{transform: rotate(0deg);}


.mob_con03{ padding: 0.75rem 0 1rem 0; }
    .mobintab{display: flex; flex-wrap: wrap;}
    .mobin_lt{ width: 38.02%; margin:0 0 0 6%;}
      .pic_sd{ box-shadow:-0.4rem 0.3rem 0.7rem rgba(230, 0, 20, 0.1); }
    .mobin_lg{ width: 54.16%;padding: 1.2rem 0 0 0;}
      .mob03_tit01{ width: 58.38%; margin: 0 auto;  }
      .mob03_tx01{ text-align: center;  padding:2.375em 0 0 0;}




footer{ display: block; width: 100%; background: url('data:image/svg+xml;base64,PHN2ZyAKIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogd2lkdGg9IjI0MDBweCIgaGVpZ2h0PSI2MDVweCI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgIGZpbGw9InJnYigyMDEsIDQyLCA1NSkiCiBkPSJNLTAuMDAwLDYwNC4xMDAwIEwyNDAwLjAwMCw2MDQuMTAwMCBMMjQwMC4wMDAsMzA4LjAwMCBDMjQwMC4wMDAsMzA4LjAwMCAxOTEwLjI1OCwtMC4wMDAgMTE5OC4xMDAwLC0wLjAwMCBDNDg3Ljc0MiwtMC4wMDAgLTAuMDAwLDMwOC4wMDAgLTAuMDAwLDMwOC4wMDAgTC0wLjAwMCw2MDQuMTAwMCBaIi8+Cjwvc3ZnPg==') center top no-repeat; background-size: 100% auto; padding: 0.55rem 0 0.7rem 0; color: #fff; position: relative; }
  footer::after{content: ""; display: block;width: 100%; height: calc(100% - 3.5rem); position: absolute; bottom: 0; left: 0; background: #c92a37; z-index: -1; }

  .footinner{width:1920px; max-width: 100%; margin: 0 auto;padding: 0.1rem 0.2rem; position: relative; box-sizing: border-box;}
    .logo_ft{ width: 300px; max-width:70% ; margin: 0 auto; }
    .sns_ft{width: 600px; max-width:90%; margin:0.15rem auto -0.1rem auto; position: relative; z-index: 6; display: flex; justify-content: center;}
      .sns_ft a{display: flex; padding: 0.2em; width: 2.5em; height: 2.5em; justify-content: center; align-items: center; background: #fff; border-radius: 20em; transition: background 0.4s;}
      .sns_ft a img{ width: 1.2em;}
      .sns_ft a[href]:hover{background: #e6d3a1;}
      .watacen_anime{ width: 280px; max-width:65%; filter: drop-shadow(0 0.1rem 0.1rem rgba(130,0,11, 0.75));margin: 0 auto;display: block; }
      .menus_ft{width: 600px; max-width:90%; margin:0.5rem auto; text-align: center; font-size: 0.7em; line-height: 1.2; }
        .menus_ft a{ color: #fff; }
      .ban_ft{ text-align: center; }
        .ban_ft .btn_pic[href] img{ width: 2.5rem; }
      .ftcopy{text-align: center; font-size: 0.55em; line-height: 1.2; padding-top: 0.55rem; letter-spacing: 0.05em;}





.loading .jsanimob{animation:none;}
.jsanimob{opacity: 0;}
.animate-blur-inup {
  /* animation: blurInUp 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; */
  animation: blurInUp 0.8s ease-out 0.2s forwards;
}
.ad_01{animation-delay: 0.1s;}
.ad_02{animation-delay: 0.2s;}
.ad_03{animation-delay: 0.3s;}
.ad_04{animation-delay: 0.4s;}
.ad_05{animation-delay: 0.5s;}
.ad_06{animation-delay: 0.6s;}
.ad_07{animation-delay: 0.7s;}
.ad_08{animation-delay: 0.8s;}


@keyframes blurInUp {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    filter: blur(10px);
  }
  60% {
    opacity: 0.8;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
  }
}



@media screen and (max-width:1920px) {
  :root{
    --ht: 5.32vw;
  }


  footer{background-size: 1920px auto;}
  footer::after{ height: calc(100% - 350px);}


}

@media screen and (max-width:1420px) {
  :root{
    --body_fs: 1.2vw;
  }


}



@media screen and (max-width:750px) {


  :root{
    --ht: 13.33vw;
    --body_fs: 0.2rem;
  }


  html{ width: 100%; overflow-x: hidden; }
  body{ overflow-x: hidden;font-size: 0.24rem; line-height:200%;}
  .sp_none{ display: none; }
  .pc_none{ display: block; }

  header{ padding: 0; }
    .top_kv{ width: 100%; padding: 0; }
    .top_logo{ width: 100%; padding: 0.15rem 5% 0 5%; }
    .bn-top_hero1{margin: 0.5rem 0 2% 13%; width: 70%;}


  .mob_con01 .mob_incon{padding:1.2rem 0 0.7rem 0; margin-top: 0.5rem;}
    .mob01_tit01{width: 90%; margin: -0.4rem 0 0 9.55%;}
    .mob01_tit02{width: 90%; margin: -0.2rem 0 0 30.45%;}
    .mob01_pic01{ position: static; width: 100%;margin-top: -6%;}
    .mob01_con{ width: 90%; margin: 0.4rem 0 0 5%; padding: 2.25em 1.5em;}
    .decor_berry1{ width: 45%; top: -0.5rem; }

    .comic_pic{ width: 30%;margin: 1.5%;}

  .mob_con03{ padding: 0.5rem 0 0.3rem 0;}
    .mobin_lt{ width:88%;margin:0 6%; }
      .pic_sd{ box-shadow:0 0 0.4rem rgba(230, 0, 20, 0.1);}
    .mobin_lg{width:100%;padding: 0.6rem 0 0 0;}
    .mob03_tx01{ padding: 1.3em 0 0 0; font-size: 0.19rem; }
      .sp1_2{ width: 98vw; margin-left: calc((98vw - 100%) / -2); }


  footer{ padding: 0.25rem 0 0.4rem 0; }
  footer::after{ height: calc(100% - 160px); }
  .logo_ft{ width: 180px; max-width: 55%; }
  .watacen_anime{ width: 150px; max-width: 44%; }
  .menus_ft{ margin: 0.3rem auto; font-size: 0.65em; }
  .ftcopy{ font-size: 0.5em; padding-top: 0.35rem; }


}