@charset "utf-8";

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);

/*
	font-family:"FontAwesome";
	font-family:"Font Awesome 5 Free";
*/


/*========================================
 Base
========================================*/
html {font-size:62.5%;}
body {font-size:1.2rem;}
* {box-sizing:border-box;}
.Btn.MarB3em {margin-bottom:3em;}
.TxtAreaPoint {color: #e6007f;font-weight: bold;}
.small {font-size: 1.2rem}
.TxtArea .point {color: #e6007f;}

/* PC */
@media screen and (min-width: 641px) {
.spOnly {display:none;}

body{
    background:url("../images/bg_pattern.png") center top no-repeat fixed, #76a8d5;
    background-size:cover;
    font-size:1.6rem;
}
#ContentWrap{
    background:url("../images/bg_artistphoto.png") center top no-repeat;
}


/* header */
header h1 {display:none;}
header p{
    width:1080px;
    margin:0 auto;
    padding:0;
}
header p img {width:100%;}


/* information */
section{
    width:1080px;
    margin:60px auto;
    font-size:1.6rem;
    line-height:1.6;
}
section#Infomation{
    background:#044097;
    width:1080px;
    margin:-36px auto 0;
    padding:1em 2em;
    font-size:2rem;
    color:#fff;
    line-height:1.8;
    border-radius:20px;
}
.Frame{
    background:linear-gradient(-45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px));
    margin:0 5px;
    padding:2em 3em;
    text-align:center;
    outline:3px solid #044097;
    outline-offset:5px;
}
.Tit{
    position:relative;
    display:inline-block;
    margin:0 auto 2rem;
    font-size:2.4rem;
    font-weight:bold;
    /*text-align:left;*/
    line-height:1.4;
}
.Tit::after{
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    background:repeating-linear-gradient(-45deg, #044097 0, #044097 3px, #fff 0, #fff 50%), #044097;
    background-size:10px 10px;
    width:100%;
    height:7px;
}

.ImgArea {margin:1em auto;}
.TxtArea, .TxtAreaDokusen, .TxtAreaSubtit{
    width:80%;
    margin:0 auto 1em;
    text-align:left;
}
.TxtAreaDokusen{
    font-size:2.2rem;
    font-weight:bold;
    text-align:center;
    line-height:1.4;
}
#Kickoff dl{
    display:flex;
    align-items:center;
    margin-bottom:0.5em;

}
#Kickoff dt{
    background:#1d2089;
    width:6em;
    padding:4px 0;
    font-weight:bold;
    color:#fff;
    text-align:center;
    border:1px solid #044097;
}
#Kickoff dd{
    padding:4px 0.5em;
    border:1px solid #044097;
}
.Btn{
    margin:2em 0 1em;
    font-size:1.8rem;
}
.TxtAreaDokusen + .Btn {margin-top:1em;}
.Btn a{
    background:#e69fca;
    padding:0.6em 6em;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    border:1px solid #e69fca;
    border-radius:8px;
    transition:0.6s;
}
.Btn a:before{
	font-family:"FontAwesome";
    content:"\f04e";
    margin-right:1rem;
}
.Btn a:hover{
    background:#fdfaad;
    color:#004299;
    border:1px solid #004299;
    transition:0.4s;
}


/* コラボT */
.TxtAreaSubtit{
    display:inline;
    background:linear-gradient(transparent 80%, #fdfaad 0%);
    font-size:2.2rem;
    font-weight:bold;
    text-align:center;
    line-height:1.4;
}
#CollaboT dl{
    display:flex;
    flex-wrap:wrap;
    width:80%;
    margin:1.6em auto 0;
    text-align:left;
}
#CollaboT dt{
    width:6em;
    margin-bottom:0.4em;
    padding:3px 1em;
    color:#004299;
    border:1px solid #004299;
    display: flex;
    align-items: center;
    justify-content: center;
}
#CollaboT dd{
    width:calc(50% - 6em);
    padding:3px 1em;
    text-align:left;
}
.Stripe{
    background:repeating-linear-gradient(-45deg, #044097 0, #044097 3px, #fff 0, #fff 50%), #044097;
    background-size:10px 10px;
    width:100%;
    height:7px;
    margin:4em 0 2.6em;
}
.Stripe + .TxtAreaSubtit + .TxtArea, #AnimeED .TxtArea, #CaTv .TxtArea, #Live .TxtArea{
    margin:1em auto;
    text-align:center;
}
.TxtAreaSubtit span{
    display:block;
    margin-bottom:0.2em;
    font-size:2rem;
    font-weight:normal;
}
.TxtAreaSubtit span:last-of-type {margin-top:0.4em;}
.TxtAreaBox{
    width:80%;
    margin:2rem auto 0;
    padding:1em;
    text-align:left;
    border:1px solid #ccc;
}


/* Etc */
#Etc{
    text-align:center;
    font-size:3rem;
}
#Etc p span{
    position:relative;
    display:inline-block;
    padding:0 1em;
    font-weight:bold;
    color:#004299;
    letter-spacing:6px
}
#Etc p span:after{
    position:absolute;
    top:50%;
    left:50%;
    content:"";
    background:#fdfaad;
    width:100%;
    height:0.5em;
    transform:translate(-50%, -50%) rotate(-3deg);
    z-index:-1;
    opacity:0.8;
}
#Etc .Btn{
    letter-spacing:4px;
    font-size:2rem;
}

}




/* スマホ */
@media screen and (max-width: 640px) {
.pcOnly {display:none;}

body{
    background:#76a8d5;
    font-size:1.6rem;
}


/* header */
header h1 {display:none;}
header p{
    width:100%;
    margin:0;
    padding:0;
}
header p img{
    width:100%;
    vertical-align:bottom;
}


/* information */
section{
    width:94%;
    margin:60px auto;
    font-size:1.4rem;
    line-height:1.6;
}
section#Infomation{
    background:#044097;
    width:100%;
    margin:0;
    padding:1em;
    font-size:1.4rem;
    color:#fff;
    line-height:1.7;
    border-radius:0 0 20px 20px;
}
.Frame{
    background:linear-gradient(-45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px));
    margin:0 5px;
    padding:1.5em 2em;
    text-align:center;
    outline:3px solid #044097;
    outline-offset:5px;
}
.Tit{
    position:relative;
    display:inline-block;
    margin:0 auto 2rem;
    font-size:1.6rem;
    font-weight:bold;
    text-align:left;
    line-height:1.3;
}
.Tit::after{
    content:"";
    position:absolute;
    bottom:-7px;
    left:0;
    background:repeating-linear-gradient(-45deg, #044097 0, #044097 3px, #fff 0, #fff 50%), #044097;
    background-size:10px 10px;
    width:100%;
    height:7px;
}

.ImgArea {margin:1em auto;}
.ImgArea img, .TxtArea img {width:100%;}
.TxtArea, .TxtAreaDokusen, .TxtAreaSubtit{
    width:100%;
    margin:0 auto 1em;
    text-align:left;
}
.TxtAreaDokusen{
    font-size:1.5rem;
    font-weight:bold;
    text-align:center;
    line-height:1.5;
}
.Btn{
    margin:2em 0 1em;
    font-size:1.6rem;
}
.TxtAreaDokusen + .Btn {margin-top:0.8em;}
.Btn a{
    display:block;
    background:#e69fca;
    width:90%;
    margin:0 auto;
    padding:0.6em 2em;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
    border:1px solid #e69fca;
    border-radius:8px;
}
.Btn a:before{
	font-family:"FontAwesome";
    content:"\f04e";
    margin-right:1rem;
}


/* コラボT */
.TxtAreaSubtit{
    display:inline;
    background:linear-gradient(transparent 80%, #fdfaad 0%);
    font-size:1.5rem;
    font-weight:bold;
    line-height:1.5;
}
#CollaboT dl{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    margin:1.2em auto 0;
    text-align:left;
}
#CollaboT dt{
    width:6em;
    margin-bottom:0.4em;
    padding:3px 1em;
    color:#004299;
    border:1px solid #004299;
    display: flex;
    align-items: center;
    justify-content: center;
}
#CollaboT dd{
    width:calc(100% - 6em);
    padding:3px 1em;
    text-align:left;
}
.Stripe{
    background:repeating-linear-gradient(-45deg, #044097 0, #044097 3px, #fff 0, #fff 50%), #044097;
    background-size:10px 10px;
    width:100%;
    height:7px;
    margin:3em 0 1.6em;
}
.Stripe + .TxtAreaSubtit + .TxtArea, #AnimeED .TxtArea, #CaTv .TxtArea, #Live .TxtArea{
    margin-top:1em;
    text-align:center;
}
.TxtAreaSubtit span{
    display:block;
    margin-bottom:0.2em;
    font-size:1.5rem;
    font-weight:normal;
    text-align:center;
}
.TxtAreaSubtit span:last-of-type {margin-top:0.4em;}
.TxtAreaBox{
    width:100%;
    margin:1em 0 0;
    padding:1em;
    text-align:left;
    border:1px solid #ccc;
}


/* Etc */
#Etc{
    text-align:center;
    font-size:1.8rem;
}
#Etc p span{
    position:relative;
    display:inline-block;
    padding:0 1em;
    font-weight:bold;
    color:#004299;
    letter-spacing:6px
}
#Etc p span:after{
    position:absolute;
    top:50%;
    left:50%;
    content:"";
    background:#fdfaad;
    width:100%;
    height:0.5em;
    transform:translate(-50%, -50%) rotate(-3deg);
    z-index:-1;
    opacity:0.8;
}


}


/* ページトップへ戻る */
#page_top{
	position:fixed;
	bottom:10px;
	right:10px;
    width:40px;
    height:40px;
    padding:0;
    text-indent:-9999px;
    background-color:#0079c7;
    border-radius:100%;
    z-index:800;
    display:none;
    cursor:pointer;
}
#page_top a {display:block;}

#page_top::after{
    content:"\f106";
    font-family:"FontAwesome";
    font-size:40px;
    line-height:35px;
    text-indent:0;
    text-align:center;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}