@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

@media screen and (max-width: 767px) {
html {
    --14px:calc(14 / 16 * 1rem);
    --15px:calc(15 / 16 * 1rem);
    --16px:calc(16 / 16 * 1rem);
    --18px:calc(18 / 16 * 1rem);
    --24px:calc(24 / 16 * 1rem);
    --28px:calc(28 / 16 * 1rem);
}

body {background:url("https://www.animate.co.jp/ex/basic/bl_charaby/images/bg.png") right top fixed;}
div#containers{
    background:background:url("https://www.animate.co.jp/ex/basic/bl_charaby/images/bg.png") center top fixed;;
    padding-top:0 !important;
}
div.wide, div.container {background:none;}
* {box-sizing:border-box;}
.ColorRed {color:#c6181a;}

	.contentInnerSmall p {
		margin: 0 0 1.1em 0;
	}
	
	.contentInnerSmall p:last-child {
		margin: 0 0 1.1em 0;
	}

#HeaderWrap, .SectionWrap{
    width:100%;
    margin:0;
    font-size:var(--15px);
    line-height:1.6;
    border-bottom:2px dashed #24a2e3;
}
.SectionWrap {padding-top:1.4em;}
.SectionWrap:last-of-type {border-bottom:none;}
#HeaderWrap img {width:100%;}
#HeaderWrap p{
    font-size:var(--18px);
    font-weight:bold;
    text-align:center;
    color:#4e5153;
}

.Btn{
    position:relative;
    margin-bottom:2em !important;
    font-size:var(--14px);
    font-weight:700;
    line-height:1.4;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    user-select:none;
}
.Btn a{
    position:relative;
    display:block;
    background:#24a2e3;
    width:94%;
    margin:0 auto;
    padding:0.5rem 0 0.5rem 2rem;
    font-size:var(--16px);
    color:#fff;
    text-align:left;
    text-decoration:none;
    border-radius:3rem;
    text-decoration:none !important;
}
#Dakaichi .Btn a{
    background:#51b98e;
    padding-left:0;
    text-align:center;
}
.Btn a::before{
	font-family:"FontAwesome";
    content:"\f101";
    position:absolute;
    top:50%;
    left:0.5em;    
    font-size:var(--24px);
    font-weight:normal;
    transform:translateY(-51%);
}
#Dakaichi .Btn a::before {padding-left:0;}
	
	#Dakaichi .ImgArea img {
		width: 80%;
		max-width: 100%;
		height: auto;
		margin: auto;
	}

.ImgArea{
    margin:2em 0 !important;
    text-align:center;
}
.ImgArea img {width:80% !important;}

#BlFes .FesTit{
    background:#c6181a;
    padding:0.4em 0;
    font-size:var(--15px);
    font-weight:bold;
    color:#fff;
    text-align:center;
}
#BlFes .FesDate{
    align-items:center;
    margin-bottom:2em;
    text-align:left;
}
#BlFes .FesDate dt{
    width:80%;
    margin:0 auto;
}
#BlFes .FesDate dt img {width:100% !important;}
#BlFes .FesDate dd{
    width:100%;
    margin:0;
    font-size:var(--14px);
}

.InfoTit{
    margin-bottom:0.4em !important;
    font-size:1.4em;
    font-weight:bold;
    color:#24a2e3;
    text-align:center;
}
dl.Info{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    font-size:var(--14px);
    text-align:left;
    line-height:1.4;
    box-sizing:border-box;
}
dl.Info dt{
    background:#24a2e3;
    width:98%;
    margin:0 auto;
    padding:0.6em;
    color:#fff;
}
dl.Info dd{
    width:98%;
    margin:0 auto 1em;
    padding:0.6em;
    border:1px solid #24a2e3;
}

.CopyrightBox{
    padding:2em 0;
    text-align:center;
}
}










@media screen and (min-width: 768px) {
html {
    --18px:calc(18 / 16 * 1rem);
    --24px:calc(24 / 16 * 1rem);
    --28px:calc(28 / 16 * 1rem);
    --30px:calc(30 / 16 * 1rem);
}

body {background:url("https://www.animate.co.jp/ex/basic/bl_charaby/images/bg.png") center top fixed;}
div#containers {background:url("https://www.animate.co.jp/ex/basic/bl_charaby/images/bg.png") center top fixed;}
* {box-sizing:border-box;}

div#containers{
    background:none;
    padding-top:0 !important;
}
.v2-headerMain, div.wide, div#bcs {background:none;}
* {box-sizing:border-box;}
.spOnly {display:none;}
.ColorRed {color:#c6181a;}

	.contentInnerSmall p {
		margin: 0 0 1.1em 0;
	}
	
	.contentInnerSmall p:last-child {
		margin: 0 0 1.1em 0;
	}

#HeaderWrap, .SectionWrap{
    width:960px;
    margin:0 auto;
    font-size:var(--18px);
    text-align:center;
    line-height:1.8;
    border-bottom:2px dashed #24a2e3;
}
#HeaderWrap h1 {margin-bottom:1em;}
.SectionWrap {padding-top:3em;}
.SectionWrap:last-of-type {border-bottom:none;}
#HeaderWrap img {width:100%;}
#HeaderWrap p{
    font-size:var(--24px);
    font-weight:bold;
    text-align:center;
    color:#4e5153;
}

.Btn{
    position:relative;
    margin-bottom:3em !important;
    font-size:var(--24px);
    font-weight:700;
    line-height:1.5;
    text-align:center;
    vertical-align:middle;
    cursor:pointer;
    user-select:none;
}
.Btn a{
    display:inline-block;
    background:#24a2e3;
    padding:1rem 2rem;
    font-size:var(--28px);
    color: #fff;
    text-decoration:none;
    border-radius:3rem;
    text-decoration:none !important;
    transition:all 0.3s;
}
#Dakaichi .Btn a {background:#51b98e;}
.Btn a::before{
	font-family:"FontAwesome";
    content:"\f101";
    padding-right:8px;
    font-size:var(--30px);
    font-weight:normal;
}
.Btn a:hover{
    background:#aaa;
    color:#fff;
}

#HeaderWrap + .SectionWrap .ImgArea {margin:3em 0 !important;}
	
		#Dakaichi .ImgArea img {
		width: auto;
		max-width: 100%;
		height: auto;
		margin: auto;
	}

.InfoTit{
    margin-bottom:0.4em !important;
    font-size:2rem;
    font-weight:bold;
    color:#24a2e3;
    text-align:center;
}
dl.Info{
    display:flex;
    align-self:stretch;
    flex-wrap:wrap;
    text-align:left;
    line-height:1.4;
    box-sizing:border-box;
}
dl.Info dt{
    display:flex;
    align-items:center;
    background:#24a2e3;
    width:32%;
    margin-bottom:1em;
    padding:0.6em;
    color:#fff;
    border:1px solid #24a2e3;
}
dl.Info dd{
    width:calc((100% - 0.4em) - 32%);
    margin:0 0 1em;
    padding:0.6em 0.4em;
    border:1px solid #24a2e3;
}

#BlFes .FesTit{
    background:#c6181a;
    font-size:var(--30px);
    font-weight:bold;
    color:#fff;
}
#BlFes .FesDate{
    display:flex;
    align-items:center;
    margin-bottom:2em;
    text-align:left;
}
#BlFes .FesDate dt {width:40%;}
#BlFes .FesDate dt img {width:100%;}
#BlFes .FesDate dd{
    width:60%;
    padding-left:2em;
}

/*.CopyrightBox{
    padding:2em 0;
    text-align:center;
}
	
	.CopyrightBox{
		font-size: 14px;
	}*/
}