@charset "utf-8";
/* CSS Document */
:root{
	scroll-behavior: smooth;
}

html.mfp-ready,
html.mfp-ready body {
  scroll-behavior: auto !important;
}

body:not(.js-ready) #age {
  display: none;
}

html, body {
  height: auto;
}

.anchor {
  scroll-margin-top: 70px;
}
.anchor_l {
  scroll-margin-top: 110px;
}

.en{
font-family: "graphie", sans-serif;
font-weight: 500;
font-style: normal;
}
.en_b{
font-family: "graphie", sans-serif;
font-weight: 700;
font-style: normal;
}

.font_s{font-size: 0.8em; line-height: 160%;}
.font_ss{font-size: 0.5em; line-height: 160%;}
.font_l{font-size: 1.2em; line-height: 160%;}
.photo_s{max-width: 520px;}

img{display: block; max-width: 100%;}

@media screen and (min-width: 980px) {
.sp-only{display: none;}
a {  
-webkit-transition: 0.2s ease-in-out;  
-moz-transition: 0.2s ease-in-out;  
-o-transition: 0.2s ease-in-out;  
transition: 0.2s ease-in-out;  
}  
a:hover {opacity: 0.8; filter: alpha(opacity=80);}
}

.hamburger {
  width: 36px;
  height: 30px;
  position: relative;
}

.hamburger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #fff;
  transition: 0.3s;
}

.hamburger span:nth-child(1) { top: 0; left: 0; }
.hamburger span:nth-child(2) { top: 10px; left: 0;}
.hamburger span:nth-child(3) { top: 20px; left: 0;}

#header .wrap-burger a{background:#57c3e7; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 56px; color: #fff; font-size: 0.75rem; line-height: 100%; padding:2px 10px 0 10px; position: absolute; top:0; right: 0; z-index: 20;}

#header .wrap-burger .name{ margin-top:0; line-height: 100%;}

body.mm-wrapper--opened .hamburger span:nth-child(1) {
  top: 12px;
  transform: rotate(45deg);
}
body.mm-wrapper--opened .hamburger span:nth-child(2) {
  opacity: 0;
}
body.mm-wrapper--opened .hamburger span:nth-child(3) {
  top: 12px;
  transform: rotate(-45deg);
}

.mm-page {
	background: #ede8e3;
	min-height: 100vh;
}

body{
	/*base*/
	font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	/*jp*/
	font-family: m-plus-2m, sans-serif;
	font-weight: 400;
	font-style: normal;
}

.en{
	font-family: graphie, sans-serif;
	font-weight: 500;
}
.en.bold{
	font-family: graphie, sans-serif;
	font-weight: 700;
}

.bold{font-weight:700;}

a.arrow{display: inline-block; background: url("../images/common/arrow_link.png") no-repeat left top 2px; background-size: 14px auto;
 padding-left: 24px;}

a.down{display: inline-block; background: url("../images/common/arrow_down.png") no-repeat left top 2px; background-size: 14px auto;
 padding-left: 24px;}

.button.common a{display: inline-flex; align-items: center; justify-content: center;
 height: 40px; border-radius:20px; color:#57c3e7; border:#57c3e7 solid 1px; background: #fff; padding: 0 20px;
 font-size: 0.9375rem
;}
.button.common a span{display: inline-block; background: url("../images/common/arrow_link.png") no-repeat left center; background-size: 14px auto;
 padding-left: 24px;}

.button.voice a{display: inline-flex; align-items: center; justify-content: center;
 height: 40px; border-radius:20px; color:#57c3e7; border:#57c3e7 solid 1px; background: #fff; padding: 0 20px;
 font-size: 0.9375rem
;}
.button.voice a span{display: inline-block; background: url("../images/character/icon_voice.png") no-repeat left center; background-size: 18px auto;
 padding-left: 28px;}

.button.down a{display: inline-flex; align-items: center; justify-content: center;
 height: 40px; border-radius:20px; color:#57c3e7; border:#57c3e7 solid 1px; background: #fff; padding: 0 20px;
 font-size: 0.9375rem
;}
.button.down a span{display: inline-block; background: url("../images/common/arrow_down.png") no-repeat left center; background-size: 14px auto;
 padding-left: 24px;}

.button.close a{display: inline-flex; align-items: center; justify-content: center;
 height: 40px; border-radius:20px; color:#57c3e7; border:#57c3e7 solid 1px; background: #fff; padding: 0 20px;
 font-size: 0.9375rem
;}
.button.close a span{display: inline-block; background: url("../images/common/arrow_up.png") no-repeat left center; background-size: 14px auto;
 padding-left: 24px;}

body{text-align:center; font-size:100%; line-height:190%; letter-spacing: 0.02em; width: 100%; color:#14021e; background-color:#ede8e3!important;
 min-width: 1060px; text-rendering: optimizeLegibility;
}

#page{display: flex; justify-content: space-between;}
#header{
	width: 260px;
	flex: 0 0 260px;
	background: #fff;
}
#MainContainer{
	border-left: #d2cbc7 solid 1px;
	flex: 1 1 auto;
	min-width: 0; /* ← 超重要 */	
}

#header .wrap-inner{ padding: 20px 10px; text-align: left;}
#header hgroup{display: flex; flex-direction: column; text-align: center; margin-bottom:15px;}
#header hgroup h2{display: flex; flex-direction: column; margin-bottom: 8px;}
#header hgroup h2 .main{font-size: 0.875em; letter-spacing: 0.2em; line-height: 100%; font-weight: 800;}
#header hgroup h2 .sub{font-size: 0.75rem; line-height: 100%; margin-top: 8px;}
#header hgroup h1{max-width: 220px; margin: 0 auto;}

#header #social{margin-bottom: 30px;}
#header #social ul{display: flex; justify-content: center;}
#header #social li:not(:last-child){margin-right: 10px;}
#header #social li a{display: flex; justify-content: center; align-items: center; background:#57c3e7; width: 32px; height: 32px; border-radius: 99px;}
#header #social li a img{max-width: 18px;}

#header #glnav{margin-bottom: 30px;}
#header #glnav a{display: flex; justify-content:center; align-items:flex-start; flex-direction: column; width: 100%; border-bottom: #eae8e8 solid 1px;
 padding: 15px 10px; line-height: 100%;}
#header #glnav ul li:first-child a{border-top: #eae8e8 solid 1px;}
#header #glnav .sub{font-size: 0.74rem; margin-top: 4px;}
#header #glnav .main{font-size: 1rem; letter-spacing: 0.1em;}
#header #glnav .main::first-letter,
#header #glnav .sub::first-letter{color:#156fc6;}

#header #glnav a {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* 背景画像用 */
/*
#header #glnav a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/relirium/images/common/icon_butterfly.png") top 10px right 10px / cover no-repeat;
background-size:26px auto;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}
*/
#header #glnav a:hover{background-color:#F2F8FC;}
#header #glnav a:hover::before {
  opacity: 0.6;
}

body.chara #header #glnav li:nth-child(2){background-color:#F2F8FC;}
body.movie #header #glnav li:nth-child(3){background-color:#F2F8FC;}
body.graphic #header #glnav li:nth-child(4){background-color:#F2F8FC;}

#header #subnav{font-size: 0.8125rem; line-height: 140%; margin-bottom: 18px;}
#header #subnav li{margin-bottom: 12px;}
#header #subnav li a.arrow{background-position: left center;}

#header .wrap-bnr h3{font-size: 0.8125rem; margin-bottom: 5px;}
#header .wrap-bnr li{margin-bottom: 15px;}
#header .wrap-bnr img{border-radius: 10px;}
#header .wrap-bnr .white img{border:#eae8e8 solid 1px;}

#scrollpanel{position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding:0 10px 2%; z-index: 100; pointer-events: none;}
#scrollpanel a{pointer-events: all;}
#scrollpanel .button_pagetop img{max-width: 140px;}

#footer{text-align: center; position: relative; z-index: 5;}
#footer h3{max-width: 230px; margin: 0 auto; padding:0 0 40px 0;}
#footer address{font-style: normal; font-size: 0.75rem; line-height: 100%; padding: 30px; color:#958e8d; border-top:#d2cbc7 solid 1px; max-width: 960px;
 margin: 0 auto;}

#maincover {
	width: 100%;
	height: 380px;
	background: url("../images/common/background_maincover.jpg") no-repeat;
	background-size: cover;

	display: flex;
	flex-direction: column;
	color: #fff;
	position: relative;
	overflow: hidden;
	
	text-shadow:
		0 0 3px #050442,
		0 0 8px #050442,
		0 0 18px rgba(5,4,66,0.90),
		0 0 32px rgba(5,4,66,0.7);	
}

#maincover .chara{position: absolute; top:0; left: 0; z-index: 1;}
#maincover .chara img{height:460px;}

body.chara01 #maincover .chara{left: -15px;}
body.chara01 #maincover .chara img{transform: rotate(-6deg)}

#maincover hgroup {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: center;     /* h2 縦中央 */
	justify-content: center; /* 横中央 */
	position: relative;
	z-index: 2;
}

#maincover hgroup h2{display: flex; flex-direction: column;}
#maincover hgroup h2 .main{font-size: 2rem; letter-spacing: 0.4em;}
#maincover hgroup h2 .sub{letter-spacing: 0.2em; font-size: 1em; margin-top: 20px;}

#breadcrumbs {
	margin-top: auto;
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
	position: relative; z-index: 2;
}

#breadcrumbs .wrap-inner{max-width: 96%; margin: 0 auto;}
#breadcrumbs ul{display: flex; justify-content: flex-end; font-size: 0.75rem; line-height: 100%;}
#breadcrumbs ul li:not(:last-child)::after{content: '>'; margin: 0 6px;}

#main{background: url("../images/common/background.jpg") no-repeat top center; background-size: 100% auto;}

body.movie #main,
body.campaign #main,
body.product #main{padding-top: 20px;}

#main .wrap-inner{width: 96%; margin: 0 auto; text-align: left; max-width: 960px;}
body.product #main .wrap-inner{max-width: 780px;}
body.movie #main .wrap-inner{max-width: 780px;}

#main .maincontents{padding: 60px 0 0 0;}

body.product #main .maincontents section{margin-bottom: 60px;}
body.movie #main .maincontents section{margin-bottom: 60px;}
body.chara #main .CharaContainer{margin-bottom: 60px;}
body.campaign #main .maincontents section{margin-bottom: 60px;}

#main hgroup{margin-bottom: 40px; }
#main hgroup h3{display: flex; flex-direction: column; line-height: 140%;}
#main hgroup .main{font-size: 1.8rem; display: inline-block;}
#main hgroup .main::after{
	content: "";
	display: inline-block;
	width: 24px;      /* 画像サイズ */
	height: 24px;
	margin-left: 10px;     /* 左に10pxスペース */
	transform: translateY(-3px); /* 上に3px */	
	background: url("../images/common/icon_butterfly.png") no-repeat center;
	background-size: contain;
	z-index: 1;
}
#main hgroup .sub{font-size: 0.9375rem
; margin-top: 5px; letter-spacing: 0.06rem;}
#main hgroup .main::first-letter,
#main hgroup .sub::first-letter {
	color: #156fc6;
}

#categorynav{background:none; position: sticky; top:10px; z-index: 2;}
#categorynav ul{display: flex; justify-content:flex-start; align-items: center;line-height: 100%; background:linear-gradient(to right, #ffeb35 0%, #F4EBB1 100%); border-radius: 99px; height: 46px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.08); border:#FFF4B5 solid 2px;
 padding: 0 20px;}
#main #categorynav .wrap-inner{max-width: 960px;}
#categorynav ul li{border-right:#d2cbc7 solid 1px;}
#categorynav ul li:first-child{border-left:#d2cbc7 solid 1px;}

#categorynav ul li a{display:flex!important; height:30px; padding:0 20px 0 44px; align-items: center; background-position: left 20px center;
 height: 26px;}

.wrap-table {
}

.wrap-table dl {
	display: flex;
	margin-bottom: 5px;
	font-size: 0.9375rem;
	line-height: 170%;
;
}

.wrap-table dt {
	width: 240px;              /* 左列幅 */
	padding:10px 20px;
	background: #dbebf0;
	box-sizing: border-box;
	border-radius: 10px 0 0 10px;
}

.wrap-table dd {
	flex: 1;
	padding:10px 20px;
	margin: 0;
	background: #fff;
	box-sizing: border-box;
	border-radius: 0 10px 10px 0;
}

.wrap-table ul li{background: url("../images/common/list.png") no-repeat left center; background-size: 8px auto; padding-left: 18px;}

.wrap-lastbutton{position: relative; z-index: 5;}

body.chara .wrap-lastbutton{margin-top: -270px;}
body.chara.chara02 .wrap-lastbutton{margin-top: -190px;}
body.chara.chara03 .wrap-lastbutton{margin-top: -150px;}
body.chara.chara04 .wrap-lastbutton{margin-top: -200px;}
body.chara.chara05 .wrap-lastbutton{margin-top: -210px;}
body.chara.chara06 .wrap-lastbutton{margin-top: -150px;}
body.chara.chara07 .wrap-lastbutton{margin-top: -160px;}
body.chara.chara08 .wrap-lastbutton{margin-top: -280px;}
body.chara.chara09 .wrap-lastbutton{margin-top: -0;}
body.chara.chara10 .wrap-lastbutton{margin-top: -420px;}
body.chara.chara11 .wrap-lastbutton{margin-top: -260px;}


#graphic{padding-bottom: 30px;}
.graphic-list{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.graphic-list li{width: 24%; margin-right:1.3333%; margin-bottom: 30px;}
.graphic-list li img{border-radius: 10px;
	box-shadow:
  0 2px 8px rgba(0, 0, 0, 0.05),
  0 12px 24px rgba(0, 0, 0, 0.08);
}
.graphic-list li:nth-child(4n){margin-right: 0;}

.graphic-list li {
	position: relative;
}

.graphic-list li.new::before {
	content: "NEW";
	position: absolute;
	top: 6px;
	left: 6px;
	background: #f771ce;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	padding: 4px 6px;
	line-height: 1;
	border-radius: 4px;
	z-index: 2;
}

.youtube-wrap {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

.youtube-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.moviebox{margin-bottom:40px;}
.credit{display: flex; justify-content:flex-start; align-items: center;}
.credit dl{padding-right: 20px;}
.credit dl{display: flex; justify-content: flex-start; align-items:center; font-size: 0.9375rem
;}
.credit dl dt{background:#fff; color:; font-size: 0.9375rem
; line-height: 100%;  border:#f22e85 solid 2px; 
 height: 24px; padding: 5px 20px; display: flex; justify-content: center; align-items: center;}
.credit dl dd{padding-left: 10px; flex: 1;}

.moviebox{
    position: relative;
    width:100%;
}
.moviebox:before{
    content:"";
    display: block;
    padding-top: 56.25%; /* 高さと幅の比を16:9に固定。9/16*100=56.25 */
}
.moviebox iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	border: none;
}

.CharaContainer {
	position: relative;
	overflow: hidden;
}
.CharaContainer .chara-image{
	width: 880px;
	position: absolute; right:0; top:0; z-index: 1;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;	
}

.chara-image.is-show {
  opacity: 1;
  transform: translateY(0);
}

body.chara .CharaContainer .chara-image{right: -15%; top:-20px;}
body.chara.chara03 .CharaContainer .chara-image{top:0;}
body.chara.chara11 .CharaContainer .chara-image{top:0; width: 780px;}

@media screen and (min-width: 1400px) {
body.chara .CharaContainer .chara-image{right: 0%;}
}

@media screen and (max-width: 1200px) {
body.chara .CharaContainer .chara-image{right: -30%;}
}

.CharaContainer .wrap-text{
	width: 100%;
	position: absolute; left:0; top:0; z-index: 2;
}
.CharaContainer .wrap-text .wrap-inner{width: 96%; margin: 0 auto; text-align: left; max-width: 960px;}

body.chara09 .CharaContainer .wrap-text{position: relative; margin: 0 auto;}

#main .CharaContainer .wrap-text hgroup{padding-top: 20px;}
#main .CharaContainer .wrap-text hgroup h3{
	text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}
#main .CharaContainer .wrap-text hgroup .main{font-size: 4.6rem; line-height: 140%;}
#main .CharaContainer .wrap-text hgroup .sub{font-size: 1.4rem; line-height: 140%;}

#main .CharaContainer .wrap-text h4{color: #156fc6; margin-bottom: 20px;}

#main .CharaContainer .wrap-text h4 {
  display: flex;
  align-items: center;
  gap: 16px;
}

#main .CharaContainer .wrap-text h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #156fc6; /* 色はお好み */
  opacity: .3;
}

.space {
  display: inline-block;
  width: 0.1em;
}

body.chara #main hgroup .main::after{
	width:inherit;
	height:inherit;
	margin-left:0;
	transform:none;	
	background:none;
	background-size: contain;
}

body.chara.chara01 #main hgroup .main::after,
body.chara.chara02 #main hgroup .main::after,
body.chara.chara03 #main hgroup .main::after,
body.chara.chara04 #main hgroup .main::after
{
	content: "";
	display: inline-block;
	width: 80px;
	height:80px;
	margin-left: 10px;
	transform: translateY(-20px); /* 上に3px */	
	background: url("../images/character/popup_main.png") no-repeat center;
	background-size: contain;
	z-index: 1;
}

body.chara.chara05 #main hgroup .main::after,
body.chara.chara06 #main hgroup .main::after,
body.chara.chara07 #main hgroup .main::after,
body.chara.chara08 #main hgroup .main::after
{
	content: "";
	display: inline-block;
	width: 80px;
	height:80px;
	margin-left: 10px;
	transform: translateY(-20px); /* 上に3px */	
	background: url("../images/character/popup_sub.png") no-repeat center;
	background-size: contain;
	z-index: 1;
}


.wrap-voice{display: flex; justify-content:flex-start; margin-bottom: 40px;}
.wrap-voice a{color: #57c3e7!important;}

.wrap-voice dl{display: flex; justify-content: flex-start; align-items: center; margin-right: 40px;}
.wrap-voice dl dt{background:#dbebf0; border-radius: 10px; color:#156fc6; line-height: 100%; display: flex;
 justify-content: center; align-items: center; height: 60px; width: 60px; margin-right: 10px;}
.wrap-voice dl dd{	text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);}
.wrap-voice .wrap-comment{text-align: right;}
.wrap-voice .wrap-comment p{font-size: 0.8125rem; margin-top: 10px; line-height: 100%;
text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}
.wrap-voice .wrap-comment p a.arrow{background-position: left center;}

/*コメント非公開化*/
.wrap-voice .wrap-comment{display: none;}

.profile{max-width: 530px; margin-bottom: 25px;
text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}
.profile p{padding-bottom: 15px; font-size: 0.9375rem; line-height: 200%;}

.stuts{margin-bottom: 40px; max-width: 530px; position:relative;
text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}
.stuts .graph{}
.stuts .graph img{max-width: 320px; margin: 0 auto;}
.stuts .sd{position: absolute; right:-50px; bottom: 0;}
.stuts .sd img{width: 180px;}

body.chara04 .stuts .sd{bottom: -40px;}

.wrap-text .wrap-table{font-size: 0.8125rem
!important; max-width: 530px;}
.wrap-text .wrap-table dt{width: 180px;}
.wrap-text .wrap-table dt,
.wrap-text .wrap-table dd
{padding: 10px 2%;}

body.chara09 .CharaContainer .wrap-text{max-width: 740px;}
body.chara09 .CharaContainer .wrap-text .profile,
body.chara09 .CharaContainer .wrap-text .stuts,
body.chara09 .CharaContainer .wrap-text .wrap-table{max-width: 740px; margin-left:auto; margin-right: auto;}

#chara-nav{display: flex; flex-direction: column; padding:30px 0 0 0;}
#chara-nav nav{max-width: 960px; margin: 0 auto; width: 96%; text-align:left;}
#chara-nav nav ul{display: flex; justify-content: space-between;}
#chara-nav nav ul li a{
	background:
		url("/relirium/images/common/icon_butterfly_w.png") no-repeat top 10px center / 50px 50px,
		linear-gradient(to right, #ffeb35 0%, #fffce9 100%);
	border: #fff 4px solid;
	box-shadow:
  0 2px 8px rgba(0, 0, 0, 0.05),
  0 12px 24px rgba(0, 0, 0, 0.08);
	border-radius: 20px;
	width: 100%;
	display: block;
}

#chara-nav nav ul li a{
	position: relative;
	overflow: hidden;
}


#chara-nav nav ul li a::after{
	content: "";
	position: absolute;
	top: -20%;
	left: -60%;
	width: 40%;
	height: 140%;

	background: linear-gradient(
		120deg,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.6) 50%,
		rgba(255,255,255,0) 100%
	);

	transform: skewX(-20deg);
	opacity: 0;
}

#chara-nav nav ul li:hover a::after{
	animation: shine 0.6s ease;
	opacity: 1;
}

@keyframes shine{
	0%{
		left: -60%;
	}
	100%{
		left: 120%;
	}
}


#chara-nav nav#main-chara{margin-bottom: 20px;}
#chara-nav nav#main-chara ul li{width: 24%;}
#chara-nav nav#main-chara ul li a{height: 120px;}

#chara-nav nav#sub-chara ul li{width: 13%;}
#chara-nav nav#sub-chara ul li a{height: 100px;}

#chara-nav li {
	transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
	transform-origin: center;
	will-change: transform;
}

#chara-nav li:hover {
	transform: rotate(-2.5deg);
}

#chara-nav .button-box {
	position: relative; overflow: hidden; height:100%; width: 100%; display: block; border-radius: 20px;
}

#chara-nav .icon{font-size: 10px; line-height: 100%; padding: 2px 5px; background:#57c3e7; color: #fff; top:20px; left: 10px;
 position: absolute; display: inline-block; 
	transform: rotate(-4deg);
	transform-origin: left top; z-index: 2;}

#chara-nav #sub-chara .icon{font-size: 9px; top:10px; letter-spacing: 0;}


#chara-nav .chara-thumb {
	position:absolute; top:-25px; right: -20%; width: 100%;
}

#chara-nav .chara-thumb img {max-width:none;
	width: 270px;
}

#chara-nav #main-chara ul li:nth-child(1) .chara-thumb{right: -15%;}
#chara-nav #main-chara ul li:nth-child(2) .chara-thumb{right: -8%;}
#chara-nav #main-chara ul li:nth-child(3) .chara-thumb{right: -5%;}
#chara-nav #main-chara ul li:nth-child(4) .chara-thumb{right: -5%;}

#chara-nav #sub-chara .chara-thumb {right: 22%;}
#chara-nav #sub-chara .chara-thumb img {max-width:none; width: 200px;}

#chara-nav #sub-chara ul li:nth-child(6) .chara-thumb{top:-20px; right:20%;}

#chara-nav .chara-text{display: flex; justify-content: flex-end; align-items:flex-start; flex-direction: column; height: 100%; position: relative;
 z-index: 1;
	text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}
#chara-nav .chara-text .main{font-size: 1.4rem; line-height: 110%; margin-left: 15px;}
#chara-nav .chara-text .sub{font-size:0.7rem; line-height: 110%; margin-left: 15px; margin-bottom: 10px; color: #156fc6; margin-top: 4px;}

#chara-nav #sub-chara .chara-text .main{font-size: 1rem; line-height: 100%; margin-left: 10px;}
#chara-nav #sub-chara .chara-text .sub{font-size:8px; letter-spacing: 0; line-height: 110%; margin-left: 10px; margin-bottom:5px; color: #156fc6;}

#chara-nav #sub-chara .chara-text .main.longtext{font-size: 0.84em;}

#chara-nav .chara-text .ssize{font-size: 0.6em; line-height: 100%;}

body.chara .sd img{
  transform-origin: bottom center;
  animation: pendulum-loop 6s linear infinite;
}

body.chara .wrap-gallery{position: absolute; right: 0; bottom: 0; width: 100%;}
body.chara .wrap-gallery ul{width: 96%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column;
 justify-content: center; align-items: flex-end;}
body.chara .wrap-gallery ul li{margin-bottom: 15px; max-width: 320px;}
body.chara .wrap-gallery ul li img{border-radius: 10px;
	box-shadow:
  0 2px 8px rgba(0, 0, 0, 0.05),
  0 12px 24px rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 1200px) {
body.chara .wrap-gallery ul li{max-width: 260px;}
}


@keyframes pendulum-loop {
  0%   { transform: rotate(0deg); }

  10%  { transform: rotate(8deg); }
  20%  { transform: rotate(-8deg); }

  30%  { transform: rotate(6deg); }
  40%  { transform: rotate(-6deg); }

  50%  { transform: rotate(4deg); }
  60%  { transform: rotate(-4deg); }

  70%  { transform: rotate(2deg); }
  80%  { transform: rotate(-2deg); }

  85%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } /* ← ここが「止まって見える時間」 */
}

body.story{background: none; background-color: inherit;}
body.story #maincover{background: none;}
body.story #main{background: none;}
body.story .mm-page{background-color: #000;}
body.story {
  background: none;
}

/* =====================
   背景レイヤー
===================== */
#story-bg {
  position: sticky;
  top: 0;
  left: 240px;
  width: calc(100% - 240px);
  height: 100svh;

  background: url("../images/common/background_maincover.jpg")
    no-repeat center top / cover;

  z-index: 0;
  pointer-events: none;

  /* ガタつき完全防止 */
  will-change: transform;
  backface-visibility: hidden;
}

/* =====================
   コンテンツ
===================== */
body.story #page {
  position: relative;
  z-index: 1;

  /* 背景に被せる魔法 */
  margin-top: -100svh;
  background: rgba(0,0,0,0.5);
}


#storyline{color: #fff; padding-bottom: 40px;
	text-shadow:
		0 0 3px #050442,
		0 0 8px #050442,
		0 0 18px rgba(5,4,66,0.90),
		0 0 32px rgba(5,4,66,0.7);
}
#storyline p{padding-bottom: 20px; line-height: 300%;}

body.story #MainContainer{background:url("../images/story/background.png") no-repeat bottom center;
 background-size: 100% auto;}
body.story #maincover{border-bottom: #70799F solid 1px;}
body.story .button.common a{background: none; color: #fff; border:#fff 1px solid;}
body.story #footer address{border-top:none; padding-top: 0; color: #fff;
	text-shadow:
		0 0 3px #050442,
		0 0 8px #050442,
		0 0 18px rgba(5,4,66,0.90),
		0 0 32px rgba(5,4,66,0.7);
}

.coution{text-align:center; margin-bottom: 40px;}
.coution p{font-size: 0.8125rem; line-height: 140%; background:#fff;
 display: inline-flex; padding:10px; border-radius: 5px; color: #1079d1; border: #1079d1 solid 1px;}

body.campaign .wrap-Container{display: flex; justify-content: space-between;}
body.campaign .wrap-Container .text{flex: 1; padding-right: 40px;}
body.campaign .wrap-Container .text p{margin-bottom: 30px;}
body.campaign .wrap-Container .text .wrap-coution{background: #fff; border-radius: 10px; padding: 15px 2%;}
body.campaign .wrap-Container .text .wrap-coution h4{color: #1079d1; margin-bottom: 10px;}
body.campaign .wrap-Container .text .wrap-coution ul li{background: url("../images/common/list.png") no-repeat left top 10px; background-size: 8px auto; padding-left: 18px; font-size: 0.8125rem;}
body.campaign .wrap-Container .text .wrap-coution ul li strong{font-weight: 700; color: #AC0002!important;}

body.campaign .wrap-Container .photo{max-width: 340px;}
body.campaign .wrap-Container .photo img{border-radius: 10px;
	box-shadow:
  0 2px 8px rgba(0, 0, 0, 0.05),
  0 12px 24px rgba(0, 0, 0, 0.08);}

body.campaign #main hgroup{display: flex; justify-content: flex-start; align-items: flex-start;}
body.campaign #main hgroup .icon{display:inline-flex; align-items: center; justify-content: center; padding: 0 15px;
 border-radius: 5px; background:#57c3e7; color:#ffeb35; margin-right: 10px;}

body.campaign .photo .icon{display: flex; justify-content: center; margin-top: -20px;}
body.campaign .photo .icon li{background:#fb7dd7; color: #fff; display:flex; height: 80px; width: 80px;
 border-radius: 40px; justify-content: center; align-items: center; flex-direction: column; font-size: 1rem; line-height: 140%;}
body.campaign .photo .icon li:nth-child(2){background: #fc754b;}
body.campaign .photo .icon li:first-child{margin-right: 10px;}

.wrap-phoplist {
  margin-top: 30px;
}

/* 外枠 */
.wrap-phoplist dl {
  background: #dbebf0;
  border-radius: 30px;
  padding: 10px;
}

/* ボタン */
.wrap-phoplist dl dt {
  text-align: center;
}

/* ▼ 閉じている状態（重要） */
.wrap-phoplist dl dd {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  margin-top: 0;
  background: transparent;
  border-radius: 10px;
  transition:
    max-height 0.4s ease,
    padding 0.3s ease,
    margin 0.3s ease;
}

/* ▼ 開いた状態 */
.wrap-phoplist.is-open dl dd {
  max-height: 3000px;
  background: #fff;
  padding: 20px;
  margin-top: 10px;
}

/* 見出し */
.wrap-phoplist dl dd h5 {
  font-size: 0.9375rem
;
  margin-bottom: 5px;
}

/* 店舗リスト */
.wrap-phoplist dl dd ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #dbebf0;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.wrap-phoplist dl dd ul li {
  font-size: 0.8125rem;
}

/* 区切り線（最後以外） */
.wrap-phoplist dl dd ul li::after {
  content: '｜';
  margin: 0 8px;
  color: #D5D5D5;
}

.wrap-phoplist dl dd ul li:last-child::after {
  display: none;
}

.wrap-phoplist dd {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 0.45s ease,
    opacity 0.3s ease;
  margin-top: 0;
}

.wrap-phoplist.is-open dd {
  max-height: 6000px; /* 十分大きめ */
  opacity: 1;
}

.wrap-phoplist dl dd {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  margin-top: 0;

  background: #fff;
  border-radius: 10px;

  opacity: 0;
  transition:
    max-height 0.4s ease,
    padding 0.3s ease,
    margin 0.3s ease,
    opacity 0.25s ease;
}
.wrap-phoplist.is-open dl dd {
  max-height: 6000px;
  padding: 20px;
  margin-top: 10px;
  opacity: 1;
}

.campaign.shop{position: relative;}

#shopnav {
  position: sticky;
  top: 70px;        /* 固定ヘッダー分 */
  z-index: 10;
	text-align: center;
}

#shopnav ul{display:inline-flex; justify-content: center; color: #57c3e7; font-size: 0.8125rem; line-height: 110%; margin-bottom: 40px;
padding: 10px 20px; box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.08);}
#shopnav ul{background: rgba(255,255,255,0.8); border-radius: 99px;}
#shopnav ul li{border-right:#BCCCD1 solid 1px; padding:0 10px;}
#shopnav ul li:first-child{border-left:#BCCCD1 solid 1px;}

.shopbox{background: #fff; border-radius: 10px; position: relative; margin-bottom: 30px;}
.shopbox .innr{padding: 40px 2% 10px 2%;}

.shopbox h3{background:#dbebf0; border-radius: 10px 10px 0 0; padding: 10px 20px;}
.shopbox h3 a{background-position: left center!important;}
.shopbox .popup{position: absolute; background:#fb7dd7; color: #fff; display:flex; height: 80px; width: 80px;
 border-radius: 40px; justify-content: center; align-items: center; flex-direction: column; font-size: 1rem; line-height: 140%;
 right: 20px; top:20px;}
.shopbox .popup .en{font-size: 1.1875em;}
.shopbox .popup .en::first-letter{font-size: 1.4em;}

.shopbox .progress{margin-bottom: 40px;}

.shopbox .progress hgroup{display: flex; justify-content: flex-start; margin-bottom: 30px;}
.shopbox .progress hgroup h4{font-size: 1rem;}
.shopbox .progress hgroup .payment{background:#fb7dd7; color: #fff; display:flex; height: 30px;
 border-radius: 5px; justify-content: center; align-items: center; padding: 0 20px; line-height: 140%; margin-right: 10px;}
.shopbox .progress hgroup .free{background:#c3a7f7; color: #fff; display:flex; height: 30px;
 border-radius: 5px; justify-content: center; align-items: center; padding: 0 20px; line-height: 140%; margin-right: 10px;}
.shopbox .progress .clm2{display: flex; align-items: center; justify-content: space-between; align-items: flex-start;}

.shopbox.type4 .progress .clm2 figure{width: 49%;}
.shopbox.type4 .progress .clm2.side{justify-content: flex-start;}
.shopbox.type4 .progress .clm2.side .box:nth-child(2){margin-left: 40px; flex: 1;}

.shopbox.type3 .progress .clm2 .box{width: 49%;}
.shopbox.type3 .progress .clm2 .box.side{padding-left: 30px; flex: 1;}
.shopbox.type3 .progress .clm2 .box.side .text{margin-bottom: 40px;}

.shopbox .progress figure{position:relative;}
.shopbox .progress figure img{border:#BCCCD1 solid 1px; border-radius:10px;
	box-shadow:
  0 2px 8px rgba(0, 0, 0, 0.05),
  0 12px 24px rgba(0, 0, 0, 0.08);}
.shopbox .progress figcaption{font-size: 12px; line-height: 100%; background: #14021e; padding: 4px 10px;
 position: absolute; top:10px; right: 10px; color: #fff;}

.shopbox .progress .price{text-align: center; width: 100%; border:#fb7dd7 solid 2px; border-radius: 10px;
 color:#fb7dd7; font-size: 1.1875rem; padding: 15px 2%; margin-top: 30px;}
.shopbox .progress .price strong{font-size: 1.4em;}

.shopbox .progress .text{border:#BCCCD1 solid 1px; border-radius:10px; padding:20px; position: relative;}
.shopbox .progress .text .icon{font-size: 12px; line-height: 100%; background: #14021e; padding: 4px 10px;
 position: absolute; top:10px; right: 10px; color: #fff;}
.shopbox .progress .text h5{font-size: 1rem; margin-bottom: 10px;}
.shopbox .progress .text p{font-size: 0.8125rem;}

.shopbox .nowprinting{display: flex; justify-content: center; align-items: center; width: 300px;
 height: 300px; background: #e9f3f6; color:#61a0ff; border-radius: 150px; margin:0 auto;}

.shop-clm2{display: flex; justify-content:space-between; align-items: flex-start;}

.shop-clm2 .shopbox{width: 49%;}
.shop-clm2 .shopbox .progress{padding-bottom: 30px; margin-bottom: 0;}

.sns-list{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px; /* お好みで */
  list-style: none;
  padding: 0;
  margin: 0;
}

.sns-list img{
  width: 100%;
  height: auto;
  display: block;
}

/*******/

.wrap-preorder{
  position: absolute;
  top: 260px;
 left: calc(240px + (100% - 240px) / 2);
	transform: translateX(-50%);
  z-index: 10;
	font-size: 16px;
}

.pre-order{
  display: inline-flex;
  align-items: center;
  gap: 2px;

  background: #ff5c24;
  color: #fef046;
  font-weight: 700;
  padding: 0 20px;
}

.pre-order .en{
  font-size:20px;
}

.pre-order p{
  margin: 0;
  white-space: nowrap;
}

#news dl{display: flex; justify-content: flex-start; margin-bottom: 30px; padding-bottom: 30px; border-bottom:#d2cbc7 solid 1px;}
#news dl:last-child{}
#news dl dt{max-width: 180px;}
#news dl dt img{border-radius: 10px;}
#news dl dd{padding-left: 30px;}
#news time{color: rgba(92,92,92,1.00); font-size: 0.75rem;}
#main #news ul li{font-size: 0.8125rem; line-height: 160%; margin-bottom: 5px;}

body.story .pre-order{display: none;}

@media screen and (max-width: 980px) {
.pc-only{display: none;}
.sp-only{display:inherit;}
body{min-width:900px;}
	
#page{display:inherit;}
#header{background: none; width: inherit; position: absolute; top:0; width: 100%; color:#ffde9f; z-index: 10;}

#header #social,#header #glnav,#header #subnav,#header .wrap-bnr{display: none;}

#header .wrap-inner{padding-top: 30px;}
#header hgroup h2 .main{font-size: 0.9em; letter-spacing: 0.1em;}
#header hgroup h2 .sub{font-size: 0.75rem; margin-top: 8px;}
#header hgroup h1{max-width: 220px;}
	
#MainContainer{border-left: none;}	
	
#maincover {
	height: 480px;
}
#maincover hgroup{padding-top: 150px;}
#maincover hgroup h2 .main{letter-spacing: 0.2em;}
#maincover hgroup h2 .sub{letter-spacing: 0.1em; font-size:0.84em; margin-top:10px;}

#breadcrumbs ul li:first-child{display: none;}

#maincover .wrap-bnr{position: relative; z-index: 2;}
#maincover .wrap-bnr ul{display: flex; justify-content: space-between; width: 96%; margin: 0 auto; margin-bottom: 15px; max-width: 600px;}
#maincover .wrap-bnr ul li{width: 49%;}	
#maincover .wrap-bnr ul li img{border-radius: 10px;}
	
#maincover .chara{display: none;}
	
#main .maincontents{padding: 60px 0 20px 0;}	
	
#categorynav{}
	
#scrollpanel{align-items: flex-end;}
#scrollpanel ul{display: flex; justify-content:flex-end; padding-right: 10px;}
#scrollpanel ul li{width: 220px;}
#scrollpanel ul li.white img{border:#eae8e8 solid 1px; border-radius: 10px;}	
#scrollpanel .button_pagetop img{max-width: 100px;}
	
#footer{padding-top: 40px;}	

/* 背景専用レイヤー */
#story-bg {
  left:0;
  width: 100%;
}	

.wrap-preorder{
  position: absolute;
  top: 280px;
 left: 50%;
  z-index: 10;
}
	
}

@media screen and (max-width: 600px) {
body{min-width: inherit;}
	
#graphic{margin-bottom: 30px;}
.graphic-list{display: flex; justify-content:space-between;}
.graphic-list li{width: 48.5%; margin-right:0; margin-bottom: 20px;}
	
.wrap-table dt {
	width: 28%;
	padding:10px 2%;
}
.wrap-table dd {
	padding:10px 2%;
}	
#chara-nav nav#main-chara{margin-bottom: 12px;}
#chara-nav nav ul{display: flex; justify-content: space-between; flex-wrap: wrap;}
#chara-nav nav#main-chara ul li{width: 49.2%; margin-bottom: 8px;}
#chara-nav nav#main-chara ul li a{height: 80px;}

#chara-nav nav#sub-chara ul{justify-content: flex-start;}
#chara-nav nav#sub-chara ul li{width: 24%; margin-right: 1.3%; margin-bottom: 38px;}
#chara-nav nav#sub-chara ul li:nth-child(4n){margin-right:0;}
#chara-nav nav#sub-chara ul li{height:70px;}
	
#chara-nav .icon{font-size: 9px; top:10px;}
#chara-nav #sub-chara .icon{font-size: 8px; top:8px; left: 5px;}
	
#chara-nav .chara-thumb {top:-45px; right: -8%;}	
#chara-nav #main-chara ul li:nth-child(2) .chara-thumb{right: 2%;}
#chara-nav #main-chara ul li:nth-child(3) .chara-thumb{right: 4%;}
#chara-nav #main-chara ul li:nth-child(4) .chara-thumb{right: 4%;}
	
#chara-nav .chara-text .main{font-size: 1rem; margin-left: 10px;}	
#chara-nav .chara-text .sub{margin-left: 10px;}
#chara-nav #main-chara ul li:nth-child(2) .chara-text .main{font-size: 0.8em;}
	
#chara-nav #sub-chara .chara-text .main{font-size: 0.8rem;}
#chara-nav #sub-chara .chara-text .sub{font-size:7px;}
#chara-nav #sub-chara  ul li:nth-child(1) .chara-text .main{font-size: 0.8em;}
	
#chara-nav nav ul li a{border-width: 4px;}
	
#chara-nav #sub-chara .chara-thumb {top:-10px; right: 45%;}
#chara-nav #sub-chara .chara-thumb img {max-width:none; width: 160px;}

#chara-nav #sub-chara ul li:nth-child(6) .chara-thumb{top:-10px; right:40%;}	

body.chara #main .maincontents{padding-top: 20px;}
	
.CharaContainer .chara-image{
	width: 660px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 40px);
	z-index: 1;

	opacity: 0;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.chara-image.is-show{
	opacity: 1;
	transform: translate(-50%, 0);
}
	
body.chara.chara01 .CharaContainer .chara-image{ top:120px; left: 60%; }	
body.chara.chara02 .CharaContainer .chara-image{ top:120px; }	
body.chara.chara03 .CharaContainer .chara-image{ top:120px; }	
body.chara.chara04 .CharaContainer .chara-image{ top:80px; }	
body.chara.chara05 .CharaContainer .chara-image{ top:120px; }	
body.chara.chara06 .CharaContainer .chara-image{ top:120px; }	
body.chara.chara07 .CharaContainer .chara-image{ top:120px; }	
body.chara.chara08 .CharaContainer .chara-image{ top:120px; }	
body.chara.chara10 .CharaContainer .chara-image{ top:100px; }	
body.chara.chara11 .CharaContainer .chara-image{ top:120px; }	

#main .CharaContainer .wrap-text hgroup{padding-bottom: 580px; display: flex; justify-content: center;}
#main .CharaContainer .wrap-text hgroup h3{}
	
body.chara09 #main .CharaContainer .wrap-text hgroup{padding-bottom:0;}
body.chara10 #main .CharaContainer .wrap-text hgroup{padding-bottom:280px;}
	
#main .CharaContainer .wrap-text hgroup .main{font-size: 2.8rem;}
#main .CharaContainer .wrap-text hgroup .sub{font-size: 1.2rem;}

body.chara02 #main .CharaContainer .wrap-text hgroup .main{font-size: 2.4rem;}
body.chara02 #main .CharaContainer .wrap-text hgroup .sub{font-size: 1.2rem;}
body.chara05 #main .CharaContainer .wrap-text hgroup .main{font-size: 2.4rem;}
body.chara05 #main .CharaContainer .wrap-text hgroup .sub{font-size: 1.2rem;}
	
body.chara.chara01 #main hgroup .main::after,
body.chara.chara02 #main hgroup .main::after,
body.chara.chara03 #main hgroup .main::after,
body.chara.chara04 #main hgroup .main::after
	{
	width: 60px;
	height:60px;
	transform: translateY(-2px); /* 上に3px */	
}	

body.chara.chara05 #main hgroup .main::after,
body.chara.chara06 #main hgroup .main::after,
body.chara.chara07 #main hgroup .main::after,
body.chara.chara08 #main hgroup .main::after
	{
	width: 60px;
	height:60px;
	transform: translateY(-2px); /* 上に3px */	
}	
	
.wrap-voice{justify-content: space-between;}	
.wrap-voice dl{margin-right:0;}
.wrap-voice dl dt{height: 50px; width: 60px; border-radius: 5px;}

.wrap-voice .button.voice a{font-size: 0.8rem; height: 38px;}	
.wrap-voice p{font-size: 8rem;}

.profile{background: rgba(255,255,255,0.8); border-radius: 10px; padding: 20px 2% 5px 2%; max-width: inherit;}
.profile p{font-size: 0.86rem;}

.stuts .graph img{margin: inherit;;}
.stuts .sd img{width: 140px;}

.wrap-text .wrap-table{font-size: 0.8125rem
!important; max-width: 530px;}
.wrap-text .wrap-table dt{width: 180px;}
.wrap-text .wrap-table dt,
.wrap-text .wrap-table dd{padding: 10px 2%;}	
	
body.chara .wrap-lastbutton{margin-top:inherit!important;}	


#storyline p{padding-bottom: 15px; line-height:240%;}	

body.story #MainContainer{background-size: 100% auto; background-position:bottom -20px center;}
	
body.chara .wrap-gallery{position:inherit; padding:20px 0;}
body.chara .wrap-gallery ul{flex-direction: row; justify-content: space-between; width: 100%;}
body.chara .wrap-gallery ul li{width: 49%; margin-bottom: 20px;}
	
body.campaign .wrap-Container{display:inherit;}
body.campaign .wrap-Container .text{padding-right:0; margin-bottom: 30px;}
	
#categorynav{}
#categorynav ul{height: 40px; padding: 0 2%; border-radius: 5px; font-size: 12px;}
#categorynav ul li{border-right:#d2cbc7 solid 1px;}
#categorynav ul li:first-child{border-left:#d2cbc7 solid 1px;}

#categorynav ul li a{padding: 0; background: none; height: inherit; padding: 0 10px; height: 30px;}

#shopnav {
  top: 55px;
}	
#shopnav ul{font-size:8px; font-weight: bold; line-height: 110%; letter-spacing: 0; padding: 0 2%; height: 28px; width: 100%; align-items: center;}
#shopnav ul{background: rgba(255,255,255,0.8); border-radius: 5px;}
#shopnav ul li{border-right:none; padding:0; text-align: left;}
#shopnav ul li:first-child{border-left:none;}
#shopnav ul li a{display: flex; justify-content: center; align-items: center; padding:2px; height: 18px; border-right:#BCCCD1 solid 1px;}
#shopnav ul li:first-child a{border-left:#BCCCD1 solid 1px;}

body.campaign .wrap-Container .photo{max-width: inherit;}	
.wrap-phoplist dl dd ul{display: inherit;}
	.wrap-phoplist dl dd ul li{line-height: 160%;}	
.wrap-phoplist dl dd ul li::after{content: ''; margin: 0;}
	
.shopbox .progress .clm2{display: inherit;}
.shopbox .progress .clm2 .box{margin-bottom: 30px;}
.shopbox.type4 .progress .clm2.side .box:nth-child(2){margin: 0;}	
.shop-clm2{display:inherit;}
.shopbox.type4 .progress .clm2 figure{width: inherit; margin-bottom: 30px;}
.shopbox .progress .text h5{font-size: 0.9375rem
;}
.shopbox .progress .text p{font-size: 0.8rem; line-height: 200%;}	
.shopbox .progress .text .icon{font-size: 10px;}
.shopbox.type3 .progress .clm2 .box{width: inherit;}
.shopbox.type3 .progress .clm2 .box.side{padding: 0; margin: 0;}	
.shopbox .progress .text{padding: 30px 2%;}
.shop-clm2 .shopbox{width: inherit;}
	
body.campaign #main hgroup .icon{ padding:0 10px; font-size: 0.8125rem;}	
#main hgroup .main{font-size: 1.4375rem;}
	
  .sns-list{
    grid-template-columns: repeat(3, 1fr);
  }
	
.wrap-preorder{
  top: 320px;
}
	
#news dl dt{max-width: 80px;}	
#news dl dd{padding-left: 15px;}	
#news dl dd li{font-size:0.8rem; }	
	
#chara-nav #sub-chara .chara-thumb {right:40%;}	

	
}