@charset "utf-8";
@media (min-width: 768px) {}
@media (max-width: 767px) {}

:root{
    --c_white:#fff;
    --c_dark:#000;
    --c_base: #363636;
    --c_light:#fff;
    --c_main: #ff7438;
    --font_jp: "M PLUS 2", sans-serif;
    --font_en: "Ranchers", "M PLUS 2", sans-serif;
}


body{
  position: relative;
  background:#fff;
  color: #333;
  font-size: clamp(16px,1.8vw,14px) !important;
  font-weight: 600 !important;
  font-family: var(--font_jp);
  overflow-x: hidden;
}
body:before{position: fixed; content: ""; background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/2k3ib1wn.png); background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; top: 0; left: 0; z-index: -1;}
@media (max-width: 767px) {
  body:before{background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/o2rt3bft.png);}
}

.pc_only{display: initial;}
.sp_only{display: none;}
@media (max-width: 767px) {
  .pc_only{display: none;}
  .sp_only{display: initial;}
}

/*サブページ用調節
*************************/
  .container {position: relative;}
  .container.inner{width: 94%;padding: 160px 0 80px;}
  .container.inner:before,
  .container.inner:after{position: fixed;content: "";background-position: center;background-repeat: no-repeat;background-size: contain;width: min(240px,18vw);height: 100%;top: 0;z-index: -1;}
  .container.inner:before{background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/cguff917.png);left: 2%;}
  .container.inner:after{background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/e8pj3p68.png);right: 2%;}
  .container .container { top: 0;  }
  /*containerの中にcontainerが入っているパターンがあるため*/
  /*ヘッダー固定の場合topicPathの重なり修正*/
  .inner {max-width: 1100px;}
  .inner .inner {padding: 0;}
@media (max-width: 767px)  {
  .container.inner{padding: 100px 0 40px;}
  .container .container { top: 0;  }
  .container.inner:before,
  .container.inner:after{}
  .container.inner:before{left: -22%;width: min(200px, 40%);transform: rotate(-10deg);}
  .container.inner:after{right: -18%;width: min(200px, 38%);transform: rotate(6deg);}
}

/*サブページ用調節ここまで
*************************/


.content {border: none;padding: 0;margin: 0;  }
.top_inner-wrap{max-width: 1000px;margin: 0 auto;width: 92%;}

/* link */
a:link, a:visited {text-decoration: underline;color: var(--c_main);}
a,a:hover{transition: 0.2s;}

#wrapper a:hover {transition: 0.2s;filter:alpha(opacity=60);-moz-opacity: .6;opacity: 0.8;}


.clearfix::after {
   content: "";
   display: block;
   clear: both;
}


/* header PC
*************************/
header {padding: 0px 10px 0;box-sizing: border-box;height: 60px;width: 100%;color: var(--c_base);position: fixed;z-index: 10000;background: transparent;box-shadow: none;border-bottom:none;}
/* header a:link, header a:visited {color: #696C7B;}
header a:hover, header a:active {color: #696C7B;}
header .inner {max-width: 1230px;height: 60px;margin: 0 auto;display: block;} */
/* header .inner .header_main{float: inherit;width: inherit;margin: inherit;padding: inherit;display: block;} */
.siteHeading {font-size: 161.5%;float: none;z-index: 1000;position: relative;}
.siteHeading.forPc a {position: absolute;display: block;left: 0;top: 20px;width: min(16vw,160px);padding: 0;z-index: 100;}
.siteHeading.forPc a img {display: block;width: 100%;margin: 0 auto;object-fit: contain;}
.siteHeading.forSp {display: none;}
.header_main {padding-right: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box; text-align: center;position: relative;}
header .inner{max-width: inherit;width: 98%;}
header .inner #header_user {margin-top: 24px;width: auto;height: auto;position: relative;z-index: 1001;/* float: right; */display: flex;box-shadow: none;background: transparent;border-left: none;}
header .inner #header_user dt {margin-right: 0;font-weight: bold;font-size: 90%;margin: 2px 10px 0 0;text-align: left;width: auto;height: 20px;line-height: 20px;background: transparent;color: var(--c_white);}
header .inner #header_user dt span {display: none;}
header .inner #header_user dd {font-size: 100%;width: auto;}
header .inner #header_user p {margin: 0;text-align: center;line-height: 20px;}
header .inner #header_user p a {text-decoration: none;background-color: #29ABFF;border-radius: 50px;color: #fff;margin: 0;width: 80px;border: #363636;line-height: 1em;padding: 0.5em 0;text-align: center;display: block;font-size: 14px;font-weight: 500;}
header .inner #header_user p:nth-last-child(1) {margin: 0 0 0 5px;}

/* sp sns */
#mainNav ul li.sp_sns{display: none;}

@media (max-width: 767px) {
  header{height: 50px;padding: 0;}
  header .inner{width: 100%;padding: 0;}
  .header_main {padding: 0;}

  .siteHeading.forSp{display: block;width: 110px;margin-top: 16px;margin-left: 14px;padding: 0;}
  .siteHeading img{width: 100%; max-width: initial; max-height: initial;}

  /* sp sns */
  #mainNav ul li.sp_sns{position: absolute;display: flex;flex-direction: column;gap: 12px 0;right: 30px;top: 80px;width: initial !important;padding: 0 !important;}
  #mainNav ul li.sp_sns a{display: block;width: 50px;padding: 0;}
  #mainNav ul li.sp_sns a img{width: 100%; height: auto;}
}


/* header SP
*************************/
@media (max-width: 767px) {
    header .inner #header_user{margin-top: 0;justify-content: center;padding-top: 0;margin: 0 -22px;    position: absolute;right: 20px;top: 10px;flex-direction: column;}
    header .inner #header_user dt{margin-bottom: 8px;text-align: right;margin-right: 50px;}
    header .inner #header_user dd{    display: flex;justify-content: right;}
    header .inner #header_user p a{width: 70px;font-size: 11px;line-height: 1.7em;}
}


/* mainNav PC
*************************/
@media (min-width: 768px) {
  #mainNav {z-index: 10000;position: fixed;top: 10px;padding: 0;right: 12px;background-color: transparent;box-sizing: border-box;}
  #mainNav ul.inner {position: relative;float: none;max-width: inherit;margin: inherit;width: inherit;box-sizing: border-box;padding: 1em 2em;text-align: center;width: 100%;display: flex;justify-content: flex-start;align-items: center;background-color: #fff;filter: drop-shadow(2px 4px 6px #3F350014);border-radius: 50px;}
  #mainNav li {float: none;position: relative;margin-right: min(20px,1.8vw);display: inline-block;text-align: center;}
  #mainNav li:last-child {margin: 0;}
  #mainNav li a {color: #333333;margin: 0;font-size: min(1.3vw,16px);padding: 0;font-weight: 600;border-radius: 50px;transition: 0.2s;}
  #mainNav li a:hover {border-bottom: none;opacity: 0.8;}

  #mainNav li:nth-last-child(2){margin-right: 0.5em;}
  #mainNav ul .h_btn a {color: #fff;padding: 0.2em 1.2em;}
  #mainNav ul .h_btn a.join{background-color: #29ABFF;}
  #mainNav ul .h_btn a.login{background-color: #FF7438;}
}


/* mainNav SP
*************************/
@media (max-width: 767px) {
  #mainNav {position:fixed;z-index: 10;top: 85px;width: 100%;}
  /* #mainNav:before{content: ""; position: absolute;bottom: 0;width: 100%;height: 1px;background:var(--c_base);left: 50%;transform: translateX(-50%);} */
  #mainNav ul {width: 100%;height: 86vh;padding: 0;background-color: #fff;position: fixed;top: 0;/*SPヘッダーの高さ*/left: 0;margin-left: 0;opacity: 0;visibility: hidden;box-sizing: border-box;}
  #mainNav ul.inner {padding-top: 80px;opacity: 0;transition: 0.4s;} 
  #mainNav ul li{height: auto !important;}
  #mainNav ul a {font-size: 16px;font-weight: 600;color: #333 !important;text-align: left;text-decoration: none;border-top: none;display: block;line-height: 1.5em;padding: 0.5em 0;/* font-family: var(--font_en); *//* letter-spacing: 0.05em; */}
  .menuOpen #mainNav ul {opacity: 1;visibility: visible;transition: 0.6s;overflow-y: scroll;}   
  .menuOpen #mainNav ul:before{position: absolute;content: "";background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/mv1uy236.png);background-position: right;background-size: contain;background-repeat: no-repeat;width: min(150px,30vw);height: min(165px,42vw);right: 0;top: 216px;}
  .menuOpen #mainNav ul:after{position: fixed;content: "";background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/40tytmxh.png);background-position: center;background-size: contain;background-repeat: no-repeat;width: 100%;height: 20vh;bottom: 0;}
  .menuOpen #mainNav ul li {width: 100%;padding: 0 40px;box-sizing: border-box;} 
  .menuOpen #mainNav ul li:last-of-type{width: 100%;padding-bottom: 20vw;}
  .menuOpen #mainNav ul li:first-child {padding-top: 0;}

  #mainNav li:nth-last-child(2){margin-top: 2em;margin-bottom: 0.5em;}
  #mainNav ul .h_btn a {color: #fff !important;padding: 0.7em 1em;text-align: center;border-radius: 50px;}
  #mainNav ul .h_btn a.join{background-color: #29ABFF;}
  #mainNav ul .h_btn a.login{background-color: #FF7438;}
}


/* navSwitcher SP
*************************/
@media (max-width: 767px) {
	#navSwitcher {background-color: #fff;position: fixed;z-index: 20000;width: 46px;height: 46px;top: 10px;right: 10px;padding: 12px 12px;border: 1px solid #FF7438;border-radius: 50px;filter: drop-shadow(0px 3px 0px #FF7438);box-sizing: border-box;}
    #navSwitcher a {width: 20px;height: 18px;display: block;position: relative;border: none;}
    .menuOpen #navSwitcher a {height: 20px;border: none;}
    .menuOpen #navSwitcher a:before {display: none;}
    #navSwitcher span {width: 100%;height: 3px;margin: 0;background-color: #333;border-radius: 50px;position: absolute;top: 0;bottom: 0;transition: 0.2s;}
    #navSwitcher .l{bottom: inherit;top: 0px;}
    #navSwitcher .r{top: inherit;width: 100%;right: 0;bottom: 0px;}
    #navSwitcher .m{top: 7px;}
    .menuOpen #navSwitcher .l {bottom: 0;top: 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg) translate(-6px,6px);}
    .menuOpen #navSwitcher .r {width: 100%;right: inherit;top: 0;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg) translate(6px,6px);}
    .menuOpen #navSwitcher .m {opacity: 0;}
}



/********************** TOP PAGE **********************/

/* top_content_wrapper
    固定ヘッダーの高さ分のマージンをつけるためのID
*************************/
 #top_content_wrapper {width: 100%;margin: 0 auto;padding-top: 70px;/*ヘッダーの高さ*/}
@media (max-width: 767px) {
 #top_content_wrapper {padding-top: 75px;/*ヘッダーの高さ*/overflow: hidden;}
}



/* h1 PC
*************************/
.contentHeading, .contentHeadingbig {
/*サイト全体のh1に適用させるため#wrapperwpつけている*/font-size: min(8vw, 90px);font-weight: 100;line-height: 1em;border: none;z-index: 2;font-family: var(--font_en);text-align: center;display: block;margin-bottom: 0.5em;padding-bottom: 0;position: relative;/* letter-spacing: 4px; */color: #333;}

h2.contentHeading {}
/* .contentHeading::after, .contentHeadingbig::after {content: attr(data-heading);position: absolute;left: 0;bottom: -30px;color: var(--c_main);font-family: var(--font_en);font-size: 16px;letter-spacing: 0.4em;line-height: 1em;z-index: -1;} */

@media screen and (max-width: 767px) {
  .contentHeading, .contentHeadingbig{margin-bottom: 8vw;font-size: 16vw;}
  .contentHeading::after, .contentHeadingbig::after{bottom: -24px;font-size: 12px;}
}


/* sub menu
*************************/
.sp_sub_menu{display: none !important;}
.pc_sub_menu .menu_tit{display: block;width: 200px;text-align: center;padding: 0.3em 0;background-color: #fff;color: var(--c_main);font-family: var(--font_en);font-size: 18px;cursor: pointer;border-radius: 20px 0 0 0;border-left: 1px solid var(--c_main);border-top: 1px solid var(--c_main);box-sizing: border-box;display: flex;justify-content: center;align-items: normal;}
.pc_sub_menu .menu_tit .arrow{width: 20px;object-fit: contain;padding-left: 6px;transform: translateY(-1px);}
.pc_sub_menu .menu_list{position: absolute;background-color: #fff;height: 0;opacity: 1;transition: 0.4s;overflow: hidden;pointer-events: none;border-left: 1px solid var(--c_main);border-bottom: 1px solid var(--c_main);}
.pc_sub_menu:hover .menu_list{height: 515%;opacity: 1;/* overflow: visible; */transition: 0.3s;pointer-events: inherit;}
.pc_sub_menu .menu_list .menu_logo{width: 60%;margin: 0 auto 12px;display: block;}
.pc_sub_menu .menu_list ul{display: flex;flex-direction: column;}
.pc_sub_menu .menu_list ul li{margin: 0 !important;}
.pc_sub_menu .menu_list ul li a{color: var(--c_main) !important;font-size: 18px !important;line-height: 1em !important;padding: 0.4em 0 !important;}
.pc_sub_menu .menu_list ul li a:hover{background-color: var(--c_main);color: #fff !important;opacity: 1 !important;}

@media screen and (max-width: 767px) {
  .pc_sub_menu{display: none;}
  .sp_sub_menu .menu_tit{color: #fff;background-color: var(--c_main);width: 8em;font-family: var(--font_en);font-size: 20px;text-align: center;margin: 0 auto 0.5em;border-radius: 50px;}
  .sp_sub_menu{background-color: #fff !important;padding: 20px 0;display: block !important;}
  .sp_sub_menu .menu_list{background: #fff;}
  .sp_sub_menu .menu_list .menu_logo{width: 30%;display: block;margin: 0 auto 12px;}
  .sp_sub_menu .menu_list ul{position: relative !important;top: 0 !important;background-color: transparent !important;}
  .sp_sub_menu .menu_list li{padding: 0 !important;background: #fff !important;height: 40px !important;}
  .sp_sub_menu .menu_list li a{color: var(--c_main) !important;}

  .menuOpen .sp_sub_menu{height: auto !important;/* margin-top: 20px; */}
  .menuOpen .sp_sub_menu .menu_list ul{height: 100% !important;}
}


/* fix frame */
.fix_frame{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 9999;border: 3px solid #FF7438;border-color: #FF7438 #29ABFF #29ABFF #FF7438;pointer-events: none;box-sizing: border-box;}
.fix_frame .deco{position: absolute;}
.fix_frame .deco.f_01{top: -3px;left: -3px;width: min(278px,20vw);}
.fix_frame .deco.f_02{top: -3px;right: -3px;width: min(224px,20vw);}
.fix_frame .deco.f_03{bottom: -3px;left: -3px;width: min(155px,10vw);}
.fix_frame .deco.f_04{bottom: -3px;right: -3px;width: min(307px,26vw);}

@media screen and (max-width: 767px) {
  .fix_frame .deco.f_01{width: 35%;}
  .fix_frame .deco.f_02{width: 20%;}
  .fix_frame .deco.f_03{width: 20%;}
  .fix_frame .deco.f_04{width: 36%;}
}

/* animation */
@keyframes rotation{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes rotation_r{
	0%{ transform: rotate(0);}
	100%{ transform: rotate(-360deg); }
}
/* animation: rotation 60s linear infinite; */

@keyframes hor_swing {
    0% {transform: translateY(1.3%);}
    50% {transform: translateY(0);}
    100% {transform: translateY(1.3%);}
}

@keyframes hor_swing2 {
    0% {transform: translateY(6%);}
    50% {transform: translateY(0);}
    100% {transform: translateY(6%);}
}

@keyframes hor_swing3 {
    0% {transform: translateY(8%);}
    50% {transform: translateY(0);}
    100% {transform: translateY(8%);}
}

@keyframes rotation_moon{
	0%{ transform: translate(-50%, -50%) rotate(0);}
	100%{ transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes cloud_anime {
    0% {transform: scale(1.1);}
    50% {transform: scale(1);}
    100% {transform: scale(1.1);}
}


/* Main img 
*************************/
.top_main {position: relative;margin-bottom: 0;aspect-ratio: 16 / 7.2;z-index: 9;/* background-color: #00000024; */}
.top_main .flex{}
.top_main img {width: 100%;height: auto;display: block;}
.top_main .main_tit{width: 45%;position: absolute;transform: translate(-50%, -50%);top: 50%;left: 66.66%;}
.top_main .main_kv{width: 37.5%;position: absolute;transform: translate(-50%,-50%);top: 50%;left: 26%;}
.top_main .main_kv img{animation: hor_swing2 6s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}

/* bg */
.top_main .bg_box{position: absolute;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;z-index: -1;}
.top_main .bg_box .deco{position: absolute;}
.top_main .bg_box .deco.d_01{top: 30vw;left: 74vw;width: 15vw;animation: hor_swing3 2s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
.top_main .bg_box .deco.d_02{top: 2vw;left: 78vw;width: 15vw;animation: hor_swing3 2.4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
.top_main .bg_box .deco.d_03{top: 32.3vw;left: 4vw;width: 13vw;animation: hor_swing3 2.2s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
.top_main .bg_box .deco.d_04{top: 14vw;left: 93vw;width: 2vw;/* animation: rotation 20s linear infinite; */}
.top_main .bg_box .deco.d_05{top: 2vw;left: 22.5vw;width: 2vw;/* animation: rotation 20s linear infinite; */}
.top_main .bg_box .deco.d_06{top: 2vw;left: 66vw;width: 2.5vw;/* animation: rotation_r 20s linear infinite; */}
.top_main .bg_box .deco.d_07{top: 4.5vw;left: 6vw;width: 3vw;/* animation: rotation_r 24s linear infinite; */}
.top_main .bg_box .deco.d_08{top: 30vw;left: 94.6vw;width: 3vw;/* animation: rotation_r 18s linear infinite; */}
.top_main .bg_box .deco.d_09{top: 21vw;left: 10.5vw;width: 3vw;/* animation: rotation 24s linear infinite; */}

@media screen and (max-width: 767px) {
  .top_main {aspect-ratio: initial;width: 100%;height: 160vw;margin-bottom: 20vw;}
  .top_main .flex{}
  .top_main .main_tit{width: 90%;top: 80%;left: 50%;}
  .top_main .main_kv{width: 87%;top: 37%;left: 45%;}

  /* bg */
  .top_main .bg_box .deco.d_01{top: 51vw;left: 73vw;width: 25vw;}
  .top_main .bg_box .deco.d_02{top: -12vw;left: 48vw;width: 40vw;}
  .top_main .bg_box .deco.d_03{top: 76vw;left: 4vw;width: 27vw;}
  .top_main .bg_box .deco.d_04{top: 29vw;left: 89vw;width: 6vw;}
  .top_main .bg_box .deco.d_05{top: 2vw;left: 29.5vw;width: 7vw;}
  .top_main .bg_box .deco.d_06{top: 13vw;left: 46vw;width: 5.5vw;}
  .top_main .bg_box .deco.d_07{top: 20.5vw;left: 15vw;width: 6vw;}
  .top_main .bg_box .deco.d_08{top: 87vw;left: 84.6vw;width: 6vw;}
  .top_main .bg_box .deco.d_09{top: 60vw;left: 12.5vw;width: 6vw;}
}



/* TOP update 
*************************/
.top_update{position: relative;width: 100%;height: 56vw;margin-bottom: 13vw;z-index: 1;}
.top_update:after{position: absolute;content: "";background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/mtlsy329.png);background-position: bottom;background-repeat: no-repeat;width: 100%;height: 40vw;bottom: -8vw;z-index: -2;animation: cloud_anime 8.4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);pointer-events: none;}

.top_update #updatebox{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: min(1000px,80%);}
.top_update #updatebox .contentHeading{color: #fff;-webkit-text-stroke: 1px #333;text-shadow: 0px 5px #333;}
.top_update #updatebox .heading-wrap{width: 100%;display: block;}
.top_update #updatebox dl{width: 100%;margin-bottom: 4%;}
.top_update #updatebox dl a {text-decoration: none;position: relative;color: #333;background-color: #fff;display: flex;align-items: center;padding: 3%;margin-bottom: 1em;border-radius: 50px;}
/* .top_update #updatebox dl a:after{position: absolute;content: "";background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/6qxttfes.png);background-position: center;background-repeat: no-repeat;background-size: contain;width: 3em;height: 3em;top: 50%;right: 0;transform: translateY(-50%); transition: 0.2s;} */
.top_update #updatebox dl a:hover:after{right: -0.6em; transition: 0.2s;}
.top_update #updatebox dt{width: 8em;color: #FF7438;font-size: min(16px,1.4vw);font-weight: 600;}
.top_update #updatebox dd{border-color: var(--c_light);width: calc(100% - 8em);font-size: min(16px,1.4vw);font-weight: 600;}

/* btn */
.btn_box a{font-size: min(18px,1.6vw);font-weight: 600;display: block;position: relative;text-align: left;text-decoration: none;color: #29ABFF;background-color: #fff;width: min(300px,50%);padding: 1em 2em;margin: 0 auto;letter-spacing: 0.04em;box-sizing: border-box;border: 2px solid #29ABFF;border-radius: 50px;filter: drop-shadow(0px 2px 0px #29ABFF);}
.btn_box a:after{position: absolute;content: "";transition: 0.2s;width: 0;height: 0;top: 50%;right: 1.5em;transform: translateY(-50%);background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/6qxttfes.png);background-position: center;background-repeat: no-repeat;background-size: contain;width: 1.7em;height: 1.7em;}

/* bg */
.top_update .bg_box{position: relative;width: 100%;height: 100%;top: 0;left: 0;z-index: -1;pointer-events: none;}
.top_update .bg_box .bg_moon{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: 100%;}
.top_update .bg_box .bg_moon .moon{position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 80%;margin: 0 auto; animation: rotation_moon 120s linear infinite;}
.top_update .bg_box .bg_moon .moon_shadow{position: absolute; top: 50%; left: 50.8%; transform: translate(-50%, -50%);width: 80%;z-index: -1;}
.top_update .bg_box .deco{position: absolute;}
.top_update .bg_box .deco.d_01{top: 53.6vw;left: 86vw;width: 2.5vw;/* animation: rotation 20s linear infinite; */}
.top_update .bg_box .deco.d_02{top: 24.6vw;left: 94vw;width: 2.5vw;/* animation: rotation_r 20s linear infinite; */}
.top_update .bg_box .deco.d_03{top: 35.6vw;left: 3.6vw;width: 2.5vw;/* animation: rotation 20s linear infinite; */}


@media (max-width: 767px) {
  .top_update{height: 100vw;margin-bottom: 70vw;}
  .top_update:after{display: none;}

  .top_update #updatebox{width: 90%;}
  .top_update #updatebox .heading-wrap .btn_box{width: 40%;text-align: right;}

  .top_update #updatebox .update_flex{flex-direction: column;}

  .top_update #updatebox dl{width: 100%;margin-bottom: 8vw;}
  .top_update #updatebox dl a{flex-direction: column;padding: 4% 8%;margin-bottom: 2vw;}
  /* .top_update #updatebox dl a:after{width: 2em;height: 2em;} */
  .top_update #updatebox dt{width: 100%;font-size: 3.4vw;}
  .top_update #updatebox dd{width: 100%;font-size: 3.4vw;}
	
	.btn_box a{font-size: 16px;width: 70%;padding: 1em 1.5em;}

  /* bg */
  .top_update .bg_box .bg_moon .moon{width: 260%;max-width: inherit;}
  .top_update .bg_box .deco.d_01{top: 123.6vw;left: 86vw;width: 5.5vw;}
  .top_update .bg_box .deco.d_02{display: none;}
  .top_update .bg_box .deco.d_03{top: 114vw;left: 5.6vw;width: 5.5vw;}
}



/* membership 
*************************/
.top_membership {width: 100%;background-color: #fff;padding: min(120px,8vw) 0;margin-bottom: 12vw;position: relative;z-index: 2;}
.top_membership:before{position: absolute;content: "";background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/3gau4okw.png);background-position: center;background-repeat: no-repeat;background-size: contain;width: 100vw;height: 24vw;top: -22vw;left: 0;z-index: -2;/*animation: cloud_anime 8s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36,1);*/pointer-events: none;}
.top_membership:after{position: absolute;content: "";background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/5ezgrvzw.png);background-position: center;background-repeat: no-repeat;background-size: contain;width: 100vw;height: 14vw;bottom: -13vw;left: 0;z-index: -2;/*animation: cloud_anime 6s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);*/pointer-events: none;}
.top_membership .top_inner-wrap .contentHeading{color: #333;text-shadow: none;-webkit-text-stroke: initial;}
.top_membership .top_inner-wrap .contents_box{}
.top_membership .top_inner-wrap .contents_box .txt_area{text-align: center;margin-bottom: min(60px,4vw);}
.top_membership .top_inner-wrap .contents_box .txt_area .lead{font-size: 1.4em;font-weight: 600;margin-bottom: 0.5em;}

/* bg */
.top_membership .bg_box{position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: -1;}
.top_membership .bg_box .deco{position: absolute;}
.top_membership .bg_box .deco.d_01{bottom: 7.1vw;left: 90vw;width: 3vw;/* animation: rotation_r 20s linear infinite; */}
.top_membership .bg_box .deco.d_02{top: 1vw;left: 94vw;width: 1.6vw;animation: hor_swing3 2.4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
.top_membership .bg_box .deco.d_03{top: -8vw;left: 83vw;width: 13vw;animation: hor_swing3 2.4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
.top_membership .bg_box .deco.d_04{bottom: 0vw;left: 5vw;width: 13vw;animation: hor_swing3 2s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
.top_membership .bg_box .deco.d_05{top: -5vw;left: 4vw;width: 7vw;animation: hor_swing3 2.4s linear infinite;animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);}
.top_membership .bg_box .deco.d_06{bottom: -3vw;left: 6.5vw;width: 2.5vw;/* animation: rotation_r 20s linear infinite; */}
.top_membership .bg_box .deco.d_07{bottom: 4vw;left: 87vw;width: 2.5vw;/* animation: rotation 24s linear infinite; */}

@media (max-width: 767px) {
  .top_membership{padding: 24vw 0;margin-bottom: 0;}
  .top_membership:before{background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/1yozlcgh.png);top: -25vw;width: 100vw;height: 26vw;}
  .top_membership:after{background-image: url(https://img-fan.pia.jp/main/image/40rnmyv7/40tytmxh.png);bottom: -17vw;width: 100vw;height: 18vw;}
  .top_membership .top_inner-wrap .contents_box .txt_area{margin-bottom: 8vw;font-size: 14px;}
  .top_membership .top_inner-wrap .contents_box .txt_area .lead{font-size: 1.2em;margin-bottom: 0.8em;}

  /* bg */
  .top_membership .bg_box .deco.d_01{display: none;}
  .top_membership .bg_box .deco.d_02{top: 11vw;left: 85vw;width: 4.6vw;}
  .top_membership .bg_box .deco.d_03{top: -8vw;left: 83vw;width: 13vw;}
  .top_membership .bg_box .deco.d_04{bottom: -5vw;left: 4vw;width: 24vw;}
  .top_membership .bg_box .deco.d_05{top: -5vw;left: 7vw;width: 12vw;}
  .top_membership .bg_box .deco.d_06{bottom: -15vw;left: 6.5vw;width: 5.5vw;}
  .top_membership .bg_box .deco.d_07{bottom: 8vw;left: 91vw;width: 5.5vw;}
}



/* foot area
*************************/
.foot_area{width: min(1000px,90%); margin: 0 auto;}
.foot_area .sns_list{display: flex;justify-content: center;align-items: center;gap: 0 20px;margin-bottom: 60px;}
.foot_area .sns_list li{width: 60px;}
.foot_area .sns_list li a{display: block;}
.foot_area .sns_list li a img{width: 100%;}
.foot_area .bnr_list{display: flex; justify-content: center; align-items: center; gap: 0 20px;}
.foot_area .bnr_list li{width: 32%;}
.foot_area .bnr_list li a{display: block;}
.foot_area .bnr_list li a img{width: 100%;}

@media (max-width: 767px) {
  .foot_area .sns_list li{width: 50px;}
  .foot_area .bnr_list{flex-direction: column;gap: 8px 0;}
  .foot_area .bnr_list li{width: 90%;}
}


/* TOP page-top 
*************************/
  .pageTop {position: fixed;padding: 0;margin: 0;bottom: 20px;right: 20px;z-index: 10000; display: none;}
  .pageTop a {width: min(200px,14vw);height: min(240px,17vw);text-decoration: none;color: #fff;padding: 0;text-align: center;display: block;}

  .new_pageTop {position: fixed;padding: 0;margin: 0;right: 20px;bottom: -300px; /* 画面外に隠す */z-index: 10000;transition: bottom 0.4s ease;}
  .new_pageTop.is-show {bottom: 20px;}
  .new_pageTop a {width: min(200px, 14vw);text-decoration: none;color: #fff;padding: 0;text-align: center;display: block;transition: 0.2s;}
  .new_pageTop a:hover{opacity: 1 !important; transform: translateY(-5px);}

@media (max-width: 767px) {
  /* .pageTop {bottom: 0;}
  .pageTop a {width: 40px;height: 40px;line-height: 40px;} */

  .new_pageTop a{width: min(120px, 26vw);}
}


/* footer
*************************/

footer{color: #333;background-color: transparent;padding: 120px 0;position: relative;}
footer:before{position: absolute;content: "";display: block;background-image: url(../image/bg_text_deco.png);background-position: center;background-repeat: no-repeat;background-size: contain;width: 100%;height: 22vw;top: -16.7vw; z-index: -1;}
footer a:link, footer a:visited{color: #333;text-decoration: none;font-size: 14px;font-weight: 600;}
footer nav ul {margin-bottom: 3em;text-align: center;}
footer nav li {margin: 0 1em .5em;display: inline-block;}
.copyright {text-align: center;/* font-family: var(--font_en); */font-weight: 600;}

@media (max-width: 767px) {
  footer {padding: 40px 0 44vw;}
  footer a:link, footer a:visited{ font-size: 12px;}
  footer nav ul{display: flex;flex-wrap: wrap;justify-content: center;margin-bottom: 6vw;}
  footer nav li{width: 46%;margin: 0 0 4vw;}
}


.news{margin: 0;}
.newsItem {border: solid 1px gray !important;border-bottom: none;}
.newsItem a {padding: 24px 16px 16px;}
.newsList {border-top: none;}


/* ================================= add =================================== */
.fix_wrap{position: fixed;width: 100%;height: 100%;top: 0;left: 0;pointer-events: none;z-index: -1;}
.fix_wrap .bg{position: absolute;width: 50%;right: 0;top: 50%;transform: translateY(-50%);height: 100%;}
.fix_wrap .bg img{height: 100%;opacity: .5;}
.fix_wrap .text{position: absolute;top: 50%;transform: translateY(-50%);left: 1%;}