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

@import url('https://fonts.googleapis.com/css2?family=Karantina&display=swap');

#Mwrap {
	width: 100%;
	margin: 0;
    padding-bottom: 5%;
	background-color: #fcf6ea;
    background-image: url("../images/event/magicalmirai2021_mainvisual.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
	}


img {max-width: 100%;}

#Mwrap a{text-decoration: none;}

.textCenter {text-align: center!important;}
.red {color: #FF0000;}
.blue {color: #0000FF;}
.magenta {color:#e4007e;}
.cyan {color:#009bb4;}


/*メインビジュアル*/
.mainVisual{}
#Mwrap article{}

h1{
    width: 32.5%;
	height: 0;
    margin: 2.5% 0 30% 2.5%;
	padding-top: 18%;
	background-size: contain!important;
	overflow: hidden;
	display: inline-block;
    background-image: url("../images/event/magicalmirai2021_h1.png");
	background-repeat: no-repeat;
    background-position: top center;
    }



.mainCopy{width: 100%;}
.mainCopy p{margin: 0.5em 4% 0.5em 0; font-size: 0.8em; color: #000; text-align: right;}
.mainCopy p:first-child{margin-left: 5px;}

@media only screen and (max-width: 480px){
    #Mwrap {background-size: 160%;}
    h1{width: 100%; margin: 115% auto 0.25em; padding-top: 37%;}
    .mainCopy p:first-child{margin: 0.5em 4% -5px 0;}
    }



/*メインコンテンツ*/
.Flexbox {display: flex;}

@media only screen and (max-width: 768px){.Flexbox {display: block;}}

.item,.inte,.makuhari{
    margin: 0 3.5% 5%;
    padding: 1em;
    background: #FFF;
    }

.Flexbox div{
    flex: 0 1 48%;
    margin: 1%;
    }
    
    .item{border: solid 5px #dd4a49;}
    .inte{border: solid 5px #005eab;}
    .makuhari{border: solid 5px #e86699;}



h2{
    margin: 0 0 1.5em;
    padding: 1em 0.5em;
    font-size: 1.1em;
    line-height: 1.4em;
    color: #FFF;
    text-align: center;
    background: #dd4a49;
    }

.Detail h2 br{display: none;}

@media only screen and (max-width: 480px){.Detail h2 br{display: block;}}


.Detail ul{margin: 1.5em 1em; padding: 0; list-style-type: none;}
.Detail p,.Detail li{margin-bottom: 0.5em; font-size: 1em; line-height: 1.4em; color: #535353;}
.Detail li:before{content: "• "; color: #dd4a49;}


.Detail span{font-weight: bold; color: #dd4a49;}

ul + p{font-size: 0.9em; text-align: right;}


.Link {
	justify-content: space-between;
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
    }

.Link>div {flex: 0 0 48%}
.Link>div>div {
	width: 100%;
	padding: 1.25em 10px 1em;
	margin: 0 auto;
	background-color: #FFF;
	box-sizing: border-box;
    }

.Link h3{margin: 0; padding: 0;}
.Link h4{
    margin: 0;
    padding: 0;
    font-size: 3.5em;
    letter-spacing: 2px;
    text-align: center;
    font-family: 'Karantina', cursive;
    font-weight: normal;
    }

    .Link .inte h4{color: #005eab;}
    .Link .makuhari h4{color: #e86699;}


.Link p {
	padding: 0 0 0.5em;
	margin: 0;
    line-height: 1.6em;
    color: #535353;
    }

.Link a {
	display: block;
	padding: 10px;
	margin: 20px 0 0;
	background-color: #ec6941;
	color: #FFF;
	border-radius: 20px;
	font-weight: bold;
    
    -webkit-transition: all .5s ease;
    transition: all  .5s ease;
    }

.Link .inte a{background-color: #005eab;}
.Link .makuhari a{background-color: #e86699;}
.Link .inte a:hover{background-color: #005eab;}
.Link .makuhari a:hover{background-color: #e86699;}

@media only screen and (max-width: 768px){
    .Link{padding: 1.5em;}
    .Link .inte{margin-bottom: 2em;}
    .Link p {font-size: 0.8em; line-height: 1.6em;}
    }

@media only screen and (max-width: 480px){.Link h4{font-size: 2.5em;}}


#Copy {padding: 1em 1em 0 1em; font-size: 0.9em;}
#Caution {margin: 1em 0 0; font-size: 0.9em; list-style:none; padding-left: 1em;}
#Caution li {padding:0; margin:0;}