html {
	/* フォントファミリー指定 */
	font-family: 'M PLUS Rounded 1c','Noto Sans JP','Khula', sans-serif;
	min-height: 100%;
	scroll-behavior: smooth;
}

/* 背景指定用 */
body {
	height: 100%;
}

wrapper {
    margin: 0 auto;
}

/* ヘッダー共通設計 */
header {
    width: 100%;
	min-height: min(6.4vw,24px);
	max-width: min(100vw,480px);
	margin: 0 auto;
	margin-bottom: min(16.666666666666664vw, 80px);
}

header > img {
    width: 100%;
	border-radius: 0;
	margin-bottom: 0!important;
}

main {
	background: var(--primary-color) center / contain; 
}

section {
  margin: 0 auto;
  margin-bottom: min(5.333333333333334vw,20px);
  max-width: min(100vw,480px);
}

h1,h2,h3,p {
    color: var(--secondary-color);
    text-align: center;
    margin-bottom: min(4.266666666666667vw,16px);
}

h1 {
    margin-bottom: min(5vw,24px);
    text-align: center;
    font-size: min(8.333333333333332vw,40px);
    line-height: 150%;
}

h2 {
	width: 100%;
	z-index: 3;
	position: relative;
	font-size: min(5vw,24px);
	font-weight: bold;
	letter-spacing: -0.01em;
	line-height: 150%;
}

h3 {
	width: 100%;
	z-index: 3;
	position: relative;
	font-weight: bold;
	font-size: min(4.266666666666667vw,16px);
	letter-spacing: -0.01em;
	line-height: 150%;
}

p {
	z-index: 3;
	font-size: min(3.733333333333334vw,14px);
	font-weight: 400;
	/*letter-spacing: 0.005em;*/
	line-height: 150%;
}

ul {
	z-index: 3;
	padding: 0;
	display: table;
    color: var(--secondary-color);
	text-align: center;
}

li {
	z-index: 3;
	position: relative;
	display: table-row;
	font-size : min(3.733333333333334vw,14px);
	color: var(--secondary-color);
	padding-left: 0;
	list-style: none;
	text-decoration: none;
}

img {
	z-index: 3;
	width: 100%;
}

/*────────────────────────────────────────────────*/
/* FV訴求文言 */
.About {
	margin: 0 auto ;
}

.About_Text {
	padding-top: min(3.2vw,12px);
	padding-bottom: min(3.2vw,12px);
	background: var(--secondary-color);
	color: var(--primary-color);
	font-size: min(4.583333333333333vw,22px);
	line-height: min(8.533333333333333vw,32px);
}

.About_Text p {
    color: var(--primary-color);
    text-align: center;
    line-height: 150%;
    margin: 0;
}

.About_Text strong {
	font-size: min(5.333333333333334vw,20px);
}

/*────────────────────────────────────────────────*/
/*スライダー*/
.Slider {
    width: 100%;
    margin: 0 auto;
	z-index: 100;
	position: relative;
	display: block;
}

.Slider_Box {
    display: flex;
    justify-content: center;
    align-items: center;
	position: relative;
    margin: 0 auto;
	margin-bottom: min(16.666666666666664vw, 80px);
    white-space: nowrap;
    overflow: hidden;
    z-index: 100;
    overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar-track {
	display: none;
	background: hsla(0,0%,0%,0);
}

.Slider_Item {
	display: inline-block;
	vertical-align: top;
	width: 80%;
	max-width: min(50vw,240px);
	margin-right: min(4.266666666666667vw,16px);
}

.Slider_Item img {
	margin-bottom: min(0.8333333333333334vw,4px);
}

:is(.Slider_Item) :is(h3,p) {
	text-align: center;
}

.Slide_Item:last-child {
	margin-right: 0;
}


/*フレックス適用*/
.Box {
	display: flex;
	width: 100%;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-bottom: min(4.266666666666667vw,16px);
}

:is(.Box) :is(h1,h2,h3) {
	margin-left: 0;
	margin-bottom: min(4.266666666666667vw,16px);
}

:is(.Box) :is(img) {
	flex-wrap: nowrap;
}

.Box:last-child {
	margin-bottom: 0;
}

.Box:only-child {
	margin-bottom: 0;
}

/* 画像1枚+テキスト */
.Box_Single {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: min(4.166666666666666vw,20px);
}

.Box_Single:last-of-type {
	margin-bottom: 0;
}

:is(.Box_Single, .Box_Cell) :is(img){
	margin-bottom: min(0.8333333333333334vw,4px);
}

.Box_Single p {
	margin-inline: auto;
	max-inline-size: max-content;
}

.Box_Cell {
	width: calc(45% - min(2.5vw,12px));
	margin-bottom: min(4.166666666666666vw,20px);
	text-align: center;
}

.Box_Cell p {
	margin-inline: auto;
	max-inline-size: max-content;
}

/*
.Box_Cell:nth-child(odd) {
	margin-right:  min(5vw,24px);
}

.Box_Cell:nth-child(even), .Box_Cell:last-child {
	margin-right: 0;
}
*/

:is(.Box_Cell) :is(h3,p,img) {
	margin-bottom: min(0.26666666666666666vw,1px);
}

.Box a > img {
	width: 100%;
	margin-bottom: min(0.26666666666666666vw,1px);
}


/* Box内アイテム装飾 */
:is(.Image_Frame) img{
	border: 1px solid hsla(0,0%,65%,1);
	background: hsla(0,0%,100%,0.2);
}


:is(.Image_Background) img{
	background: hsla(0,0%,100%,0.2);
    border-radius: min(2.083333333333333vw,10px);
}

/* レアリティ確定表 */
.List {
	margin: 0 auto;
	max-width: 480px;
	margin-bottom: min(6.4vw,24px);
}

.List_Box {
	position: relative;
	z-index: 4;
	margin-bottom: min(6.4vw,24px);
}

.List_Box:last-child {
	margin-bottom: 0;
}

.List_Item {
	position: relative;
	z-index: 4;
	padding-top: min(1.0666666666666667vw,4px);
	padding-right: min(4.266666666666667vw,16px);
	padding-left: min(4.266666666666667vw,16px);
	padding-bottom: min(1.0666666666666667vw,4px);
	margin-bottom: min(4.266666666666667vw,16px);
	border-radius: min(2.1333333333333333vw,8px);
	border: 1px solid var(--border);
	background: hsl(0,0%,100%);
}

.List_Item:last-child {
	margin-bottom: 0;
}

.List_Item:only-child {
	margin-bottom: 0;
}

.List_Title {
	text-align: end;
	font-size: min(3.2vw,12px);
	color: var(--secondary-color-text);
	font-weight: 700;
	margin-bottom: min(1.0666666666666667vw,4px);
	max-inline-size: inherit;
}

.List_Text {
	display: flex;
	justify-content: space-between;
}

.List_Text > p{
	margin: 0;
	color: var(--primary-text);
	font-size: min(4.266666666666667vw,16px);
	font-weight: 700;
	line-height: min(8vw,30px);
}


/* ガチャ詳細 */
.Info {
    width: 95%;
    margin: 0 auto;
    padding: min(5vw,24px);
    max-width: min(100vw,480px);
    border-radius: min(2.083333333333333vw,10px);
    border: 1px solid var(--secondary-color);
}

:is(.Info) :is(h1,h2,h3,p) {
    text-align: left;
}

:is(.Info_Title) :is(h1,h2,h3,p) {
    text-align: center;
}


/* フッター共通設計 */
footer {
	width: min(100vw,600px);
	position: relative;
	margin: 0 auto;
	padding-top: min(10.666666666666668vw,40px); 
	padding-bottom: min(26.73333333333333vw,100.25px);
	padding-right: min(6.4vw,24px);
	padding-left: min(6.4vw,24px);
}


/*
footer:after {
	position: absolute;
	content: "";
	background: hsl(0,0%,85%);
	height: min(1px,0.26666666666666666vw);
	width: 100%;
	left: 0%;
	bottom: min(30.133333333333333vw,113px);
}
*/

ul.Social-Icons {
	display: flex;
	justify-content: center;
}

ul.Social-Icons li {
	display: inline;
	margin-bottom: min(6.4vw,24px);
	list-style: none;
	text-decoration: none;
}

.Social-Icons li:before {
	content: "";
	display: none;
}

.Social-Icons li:after {
	content: "";
	display: none;
}

ul.Social-Icons a {
	background: none;
}

.Icon {
	background: none;
	vertical-align: middle;
}

.Icon img{
	width: min(6.4vw,24px);
	border-radius: 0;
}

li.Icon {
	margin-right: min(4.266666666666667vw,16px);
	margin-left: min(4.266666666666667vw,16px);
}

.Copyright {
	color: var(--secondary-color);
	text-align: center;
}


/* SPサイズ */	
@media screen and (max-width:479px) {
    section {
        margin-top: 0;
        margin-right: min(5vw,24px);
        margin-left: min(5vw,24px);
        margin-bottom: min(5.333333333333334vw,20px);
    }

    .Slider_Box {
        display: block;
        padding-left: min(6.4vw,24px);
    }
}

/*────────────────────────────────────────────────*/
/* 蜍慕判 */
.Video{
  margin: 0 24px 80px;
}

.Video_Source{
  border-radius: 16px;
}
.Video_Text{
  text-align: center;
  margin-top: 4px;
}

/* 繧ｬ繝√Ε隧ｦ逹€ */
.CTA{
    width: 100%;
    max-width: min(100vw,480px);
    margin: 0 auto;
    margin-bottom: min(16.666666666666664vw, 80px);
}
.CTA_Image{
  width: 100%
}

/*蜑ｲ蠑輔く繝｣繝ｳ繝壹�繝ｳ*/
.Campaign{
  text-align: center;
  margin: 24px;
}

.Campaign_Details{
  margin-bottom: 24px;
}

.Campaign_Details_Subtitle{
  font-weight: bold;
}

.Campaign_Details_Description{
    margin-bottom: 24px;
}


/* 縺昴�莉匁ｳｨ諢丈ｺ矩�� */
.OtherInfo{
    margin: 0 24px 60px;
  }

.OtherInfo_Contents{
  padding: 24px;
  border: solid 1px white;
  border-radius: 8px;
  text-align: center;
}

.OtherInfo_Title{
  font-weight: bold;
  margin-bottom: 8px;
}
.OtherInfo_Description{
  text-align: left;
}


/* 繝懊ち繝ｳ */
.Button{
  display: block;
  background: linear-gradient(-135deg, #4600DB, #AD00FF);
  padding:  12px 24px;
  border-radius: 28px;
  color: white;
  text-align: center;
  text-decoration:none;
}

.Button:hover{
  color: white;
  background: linear-gradient(-135deg, #3900B2, #8100BE);
  text-decoration: none;
}

a:visited{
  color: white;
}