@charset "utf-8";
/* CSS Document */

/* ベーススタイル
----------------------------------------------------------- */
body {
	background:url("../images/bg.jpg") no-repeat #4D6572;
	background-size: 100%;
}


#main {
	background: rgba(255,255,255,0.7);
	padding: 25px 25px;
	border-radius: 20px;
}

#contents {
	
}
/*.wrap {
	height: 500px;
	position: relative;
	display: flex;
	align-items: left;
}
figure {
	width: 50%;
	height: 500px;
	margin: 0;
	display: grid;
	place-items: center center;
	position: absolute;
	top: 0;
	right: 0;
}
.txt {
	padding: 20px;
	flex-basis: 60%;
	box-sizing: border-box;
	z-index: 2;
}
.txt h1 {
	font-size: 20px;
}
.txt p {
	font-size: 14px;
}
*/

div#main button {
    display: inline-block;
    font-size: 1.2rem;
    color: #ffffff;
    margin: 10px 0 10px 0;
    padding: 5px 15px;
    text-align: center;
    min-width: 90px;
    background: #444;
    border-radius: 10px;
    text-decoration: none;
    text-shadow: none;
}


/*div.flex_box {
	display: flex;
}

div.flex_box　div.box01 {
	
}

div.flex_box　div.box02 {

}*/

/*div.main-lead {
	padding: 550px 0 0 0;
	position: relative;
	
}

div.main-lead p.main-lead_title {
	position: absolute;
	top: 0;
	left: 50px;
	z-index: 0;
}

div.main-lead p.main-lead_title img {
	
}

div.main-lead div.main-lead_img {
	position: absolute;
	top: 0;
	right: 30px;
	z-index: 1;
}

div.main-lead div.main-lead_img img {
	
}

div.main-lead div.main-lead_img img.muji {
	position: absolute;
	top: 250px;
	left: -40px;
	z-index: 1;
	width: 82px;
}

div.main-lead ul {
	display: flex;
	justify-content: space-around;
	margin: 0 0 0 0;
}

div.main-lead ul li {
	position: relative;
}

div.main-lead ul li img {
}

div.main-lead ul li img.handwriting {
	position: absolute;
	top: -230px;
	right: 20px;
	
	width: 220px;
}

div.main-lead ul li img.aged_day {
	position: absolute;
	top: -60px;
	right: 40px;
	width: 120px;
}*/

/*main ul.titlebox li {
	float: left;
}
main ul.titlebox li:nth-of-type(2) {
	margin: 200px 0 0 0;
}*/

/* コンテンツスタイル
----------------------------------------------------------- */
/* 吹き出しの色 */
.balloon {
	position: relative;
	background: rgba(81,141,171,1.00);
}
.balloon::before {
	background: rgba(81,141,171,1.00);
}
.balloon::after {
	background: rgba(81,141,171,1.00);
}

/* 文字強調色 */
/*#main p span {
	color: #64E129;
	font-weight: bold;
}*/

.important_box {
	padding: 10px;
	font-size: 18px;/**/
	color: #FF0000;
	border: 4px solid #FF0000;
	background: #FFFFFF;
}
.important_box a {
	font-weight: bold;
	color: #FF0000;
}

#main p.new {
	
	position:absolute;
	top: -10px;
	display: inline-block;
	padding: 0;
	text-indent: 0;
	
}

.newbox {
	/*position: relative;*/ /* ★smoothScroll.jsのアンカーリンク停止位置がおかしくなるため使用禁止 */
}


main div.mask-head {
	background: #DC6163;
	
}


#main ul.banner {
margin-bottom: 30px
}

#main ul.banner li {
	float: left;
	margin-right: 10px;
	padding: 0;
}

#main ul.flex li::before {
	content: none;
}

/* リストアイコン */
#main ul{
	
}



#main ul li {
    padding-left: 0; 
}

#main div.case_use {
	overflow: hidden;
}

#main div.case_use ul.case_uselist {
	float: left;
	width: 350px;
}

#main div.case_use ul.case_uselist li:before {
	
}

#main div.case_use ul.case_use_imglist {
	float: right;
	width: 500px;
	margin: 0 10px 20px 0;
 	display:flex;
	justify-content: space-around;
	overflow: hidden;
}


#main div.case_use ul.case_use_imglist li {
	padding: 0 3% 0 3%;
}

#main div.case_use ul.case_use_imglist li:before {
	display: none;
}

#main div.case_use ul.case_use_imglist li img {
	width: 100%;
}

ul.flex_box li.item{
	align-self: baseline;
	
}

ul.flex li {
	
	text-align: center;
	padding: 0 20px 20px;
	
}

ul.flex{
	overflow: hidden;
	
}
ul.flex {
	display: flex;
	flex-wrap: wrap;
	
}

ul.flex li {

	margin: 0 5px 10px 5px;
	
}
ul.flex li p {
	text-indent: 0;
}



#main ul li.none::before {
	content: none;
}


ul.flex_02{
	overflow: hidden;
	
}
ul.flex_02 li {
	float: left;
	text-align: center;
	margin: 0 0 20px 0;
	
}

#main ul.flex_02 li.none::before {
	content: none;
}



/* ラインナップ */
div.lineup_box {
	/*overflow: hidden;*/
	display: flex;
	flex-wrap: wrap;
}

div.lineup_box dl {
	/*float: left;*/
	width: 300px;
	padding: 30px 10px;
}
div.lineup_box dl.width600 {
	/*float: left;*/
	width: 600px;
	padding: 30px 10px;
}

div.lineup_box dl.add_lineup {
	position: relative;
}
div.lineup_box dl.add_lineup::before {
	content: '';
	position: absolute;
	/*top: 10px;*/
	top: 190px;
	left: 0;
	display: block;
	width: 132px;
	aspect-ratio: 1 / 1;
	background: url("../images/add_lineup.png") 0 0 no-repeat;
	background-size: cover;
}


div.lineup_box dl dt {
	text-align: center;
	padding: 10px  5px;
}
div.lineup_box dl dd {
	text-align: center;
}
div.lineup_box dl dd span {
	font-weight: bolder;
	color:rgba(39,41,42,0.8);
}
#main div.lineup_box dl dd p {
	text-indent: 0;
}


/* 移動ガチャスケジュール */
#main table tr th.gacha_period {
	width: 25%;
}
#main table tr th.gacha_eventname {
	width: 36%;
}



@media screen and (max-width: 950px) {
		
	
	div.mask-head p.price{
		text-align: center;
	}
	
	#contents {
		padding-bottom: 20% ;
		background-size: contain;
	}
	
	/*div.main-lead {
		padding: 62% 0 0 0;
	}
	
	div.main-lead p.main-lead_title {
		width: 40%;
		left: 0;
	}
	
	div.main-lead div.main-lead_img {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 1;
		width: 55%;
	}*/
	
	div.main-lead div.main-lead_img img.muji {
		top: 50%;
	}
	
	div.main-lead ul li img.handwriting {
		right: 20%;
		top: -60%;
		width: 50%;
	}
	
	#main div.case_use ul.case_use_imglist {
		clear: both;
		width: 100%;
		margin: 0;
		padding: 0 5% 0 5%;
	}
	
	
}


@media screen and (max-width: 768px) {
	
	
	
	/*div.main-lead {
		padding: 0;
		background-size: contain;
	}
	div.main-lead p.main-lead_title {
		width: auto;
		margin: 0 0 5% 0;
		text-align: center;
		position: static;
	}
	div.main-lead div.main-lead_img {
		text-align: right;
		width: 30%;
		width: auto;
		margin: 0 0 5% 0;
		padding: 0 5% 0 5%;
		position: static;
		display: flex;
		align-items: center;
	}*/
	
	
	div.main-lead div.main-lead_img img.muji {
		position: static;
		right: 0;
		width: 20%;
	}
	
	div.main-lead ul {
		display: block;
	}
	
	div.main-lead ul li {
		margin: 0 0 5% 0;
		text-align: center;
	}
	div.main-lead ul li img {
		margin: 0 auto;
		display: block;
	}
	
	div.main-lead ul li img.handwriting {
		position: static;
	}
	
	div.main-lead ul li img.aged_day {
		width: auto;
		position: static;
	}
	#main ul.banner li {
		clear: both;
		text-align: center;
	}
	#main ul.banner li img {
	
	}
	
	/* ラインナップ */
	div.lineup_box dl,
	div.lineup_box dl.width600 {
		width: 90%;
		padding: 30px 10px;
	}
	div.lineup_box dl.add_lineup::before {
		/*width: 30%;*/
		width: min(132px, 25vw);
		left: 10%;
	}
	div.lineup_box dl dt {
		text-align: center;
		padding: 10px  5px;
	}

	div.lineup_box dl dd  {
	}
	
	
	
}


@media screen and (max-width: 480px) {
	
	div.flex_box {
		display: block;
		width: 80%;
		margin: 0 auto;
	}

	div.flex_box　div.box01{
		

	}

	div.flex_box　div.box02{
		

	}
	
	/* ラインナップ */
	div.lineup_box dl, 
	div.lineup_box dl.width600 {
		width: 90%;
		padding: 30px 10px;
	}
	div.lineup_box dl.add_lineup::before {
		width: 40%;
		/*top: 20px;*/
		top: 35%;
		left: 0;
		/*width: auto;
		margin-right: 30%;*/
	}
	div.lineup_box dl dt {
		text-align: center;
		padding: 10px  5px;
	}

	div.lineup_box dl dd {
	}


}