@charset "utf-8";

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

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

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


/*========================================
 Base
========================================*/
html {font-size:62.5%;}
body {font-size:1.2rem;}

body{
    font-family:'Noto Sans Japanese', sans-serif;
    background:url("../images/bg_pattern.png") center top fixed, url("../images/bg.jpg") center top;
}


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

/* header */
header{
    width:1080px;
    margin:20px auto 60px;
    padding:20px 0;
}
header h1{
    margin-bottom:40px;
    text-align:center;
}

.HeaderInfo{
    position:relative;
    background:url("../images/header_info.jpg") center top no-repeat;
    width:1080px;
    height:750px;
    margin:0 auto;
    border-radius:20px;
}
.HeaderInfo iframe{
    position:absolute;
    bottom:40px;
    left:25%;
}
}


@media screen and (max-width: 640px) {
body {background-size:100%, auto;}
.pcOnly {display:none;}

header{
    width:100%;
    margin:0 0 20px;
    padding:0;
}
header h1{
    width:100%;
    margin:0;
}
header h1 img, header h1 + .spOnly img{
    width:100%;
    vertical-align:bottom;
}

.HeaderInfo iframe{
    width:100%;
    height:auto;
}
}


/* pixiv */
section{
    width:1080px;
    margin:0 auto 80px;
}
section > h2{
    position:relative;
    margin:0;
    text-align:center;
}
section > h2 img {vertical-align:bottom;}
.BgRenga{
    background:url("../images/renga_bg.png") center 170px repeat-y;
    width:1060px;
    margin:0 12px;
    padding-bottom:20px;
}
.InformationWrap{
    background:#fff;
    width:980px;
    margin:0 36px 20px;
    padding:0 40px 20px;
    font-size:3rem;
    box-sizing:border-box;
}
.InformationWrap > p{
    margin-bottom:1em;
    font-size:4rem;
    text-align:center;
}
.InformationWrap ul{}
.InformationWrap li{
    margin-bottom:1em;
    font-weight:bold;
    color:#884c1c;
    list-style:none;
}
.InformationWrap li::before{
	font-family:"Font Awesome 5 Free";
    content:"\f563";
    font-weight:bold;
}
.InformationWrap li:nth-child(even)::before{
	font-family:"Font Awesome 5 Free";
    content:"\f564";
}
.InformationWrap li div, .InformationWrap li p{
    background:#f5eee4;
    margin:12px 24px;
    padding:1em;
    font-size:1.7rem;
    font-weight:normal;
    line-height:1.4;
    border-radius:6px;
}
.InformationWrap li dl {overflow:hidden;}
.InformationWrap li dt{
    float:left;
    clear:left;
    width:6em;
    margin:0 1em 8px 0;
    padding:2px 0;
    text-align:center;
    border:1px solid #884c1c;
}
.InformationWrap li dd{
    float:left;
    margin-bottom:8px;
    padding:2px 0;
}
.InformationWrap li div a, .InformationWrap li p a{
    color:#59cd50;
    text-decoration:none;
}
.InformationWrap li div a::before, .InformationWrap li p a::before{
    content:">>";
    margin:0 6px 0 0;
}
.InformationWrap li div a:hover, .InformationWrap li p a:hover {color:#999;}


@media screen and (max-width: 640px) {
section{
    width:94%;
    margin:0 auto 40px;
}
section > h2{
    background:none;
    width:100%;
    height:auto;
    margin:0 auto;
}
section > h2 img {width:100%;}
section > h2 span{
    top:38%;
    font-size:2em;
}
section#pixiv .BgRenga img {width:50%;}
section#animate .BgRenga img {width:80%;}
.BgRenga{
    background:url("../images/renga_bg.png") center 70px repeat;
    background-size:80%;
    width:100%;
    margin:-3px auto 0;
    padding-bottom:14px;
}
.InformationWrap{
    width:92%;
    margin:0 auto;
    padding:0 1em 1em;
    font-size:1.4rem;
    box-sizing:border-box;
}
.InformationWrap > p{
    margin-bottom:1em;
    font-size:1.4rem;
    text-align:center;
}
.InformationWrap ul{}
.InformationWrap li{
    margin-bottom:0.7em;
    font-size:1.5rem;
    list-style:none;
}
.InformationWrap li::before{
	font-family:"Font Awesome 5 Free";
    content:"\f563";
    font-weight:bold;
}
.InformationWrap li:nth-child(even)::before{
	font-family:"Font Awesome 5 Free";
    content:"\f564";
}
.InformationWrap li div, .InformationWrap li p{
    margin:8px 0 20px;
    padding:8px;
    font-size:1.3rem;
}
.InformationWrap li dt{
    float:none;
    clear:none;
    background:#884c1c;
    width:100%;
    margin:0 0 2px;
    padding:2px 0;
    color:#fff;
    line-height:1;
    box-sizing:border-box;
}
.InformationWrap li dd{
    float:none;
    padding:0;
}
}


/* 屋台 */
@media screen and (min-width: 641px) {
#yatai{
    width:1060px;
    margin:0 auto 50px;
}
#yatai h2{
    overflow:hidden;
    position:relative;
    background:#d07420;
    margin-bottom:24px;
    padding:8px 0;
    font-size:4rem;
    color:#fff;
}
#yatai h2::before{
    content:"";
    display:block;
    position:absolute;
    bottom:-10px;
    right:-330px;
    background:#fff;
    width:500px;
    height:500px;
    opacity:0.3;
    transform:rotate(-50deg)
}
#yatai h2::after{
    content:"";
    display:block;
    position:absolute;
    bottom:-100px;
    right:-500px;
    background:#000;
    width:500px;
    height:500px;
    opacity:0.3;
    transform:rotate(-70deg);
}
#yatai ul{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    width:90%;
    margin:0 auto;
}
#yatai li{
    background:rgba(219, 191, 145, 0.6);
    width:calc(100% / 2 - 30px);
    margin:0 15px 30px;
    padding:20px;
    text-align:center;
    list-style:none;
    border:6px solid #d07420;
    border-radius:10px;
    box-sizing:border-box;
}
#yatai .LuImg{
    width:400px;
    height:270px;
    margin:0 auto;
}
#yatai .LuImg img{
    width:auto;
    height:258px;
    margin:0 auto;
}
#yatai .Name{
    background:#884c1c;
    width:400px;
    margin:0 auto 20px;
    padding:12px 0;
    font-size:2.4rem;
    font-weight:bold;
    color:#fff;
}
#yatai .Name + a::before{
	font-family:"Font Awesome 5 Brands";
    content:"\f081";
    margin-right:6px;
    font-weight:900;
    color:#fff;
}
#yatai .Name + a{
    display:block;
    background:#00acee;
    width:400px;
    margin:10px auto 0;
    padding:14px 0;
    font-size:1.8rem;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
    transition:0.4s;
}
#yatai .Name + a:hover {background:#999;}
}

@media screen and (max-width: 640px) {
#yatai{
    width:90%;
    margin:0 auto 50px;
}
#yatai h2{
    overflow:hidden;
    position:relative;
    background:#d07420;
    margin-bottom:24px;
    padding:8px 0;
    font-size:2rem;
    color:#fff;
}
#yatai h2::before{
    content:"";
    display:block;
    position:absolute;
    bottom:-10px;
    right:-330px;
    background:#fff;
    width:500px;
    height:500px;
    opacity:0.3;
    transform:rotate(-50deg)
}
#yatai h2::after{
    content:"";
    display:block;
    position:absolute;
    bottom:-100px;
    right:-500px;
    background:#000;
    width:500px;
    height:500px;
    opacity:0.3;
    transform:rotate(-70deg);
}
#yatai ul {width:100%;}
#yatai li{
    background:rgba(219, 191, 145, 0.6);
    width:100%;
    margin:0 auto 50px;
    padding:20px;
    text-align:center;
    list-style:none;
    border:6px solid #d07420;
    border-radius:10px;
    box-sizing:border-box;
}
#yatai .LuImg img{
    max-width:100%;
    max-height:258px;
    margin:0 0 14px;
    vertical-align:bottom;
}
#yatai .Name{
    background:#884c1c;
    width:100%;
    margin:0 0 6px;
    padding:12px 0;
    font-size:1.6rem;
    font-weight:bold;
    color:#fff;
}
#yatai .Name + a::before{
	font-family:"Font Awesome 5 Brands";
    content:"\f099";
    margin-right:6px;
    font-weight:900;
    color:#fff;
}
#yatai .Name + a{
    display:block;
    background:#00acee;
    width:100%;
    margin:10px 0 0;
    padding:10px 0;
    font-size:1.4rem;
    color:#fff;
    text-decoration:none;
    border-radius:6px;
}
}


#Campaign{
    background:rgba(219, 191, 145, 0.6);
    width:922px;
    margin:0 auto 30px;
    padding:20px;
    text-align:center;
    border:6px solid #d07420;
    border-radius:10px;
    box-sizing:border-box;
}
#Campaign .Name{
    display:block;
    width:auto;
    padding:12px 1em;
}
#Campaign .CamTxt{
    width:90%;
    margin:0 auto;
    font-size:2rem;
    line-height:1.5;
    text-align:left;
}
#Campaign .CamTxt a{
    display:block;
    margin-top:0.6em;
    font-weight:bold;
    color:#884c1c;
    text-decoration:none;
}
#Campaign .CamTxt a::before{
    content:">>";
    margin:0 6px 0 0;
}
#Campaign .CamTxt a:hover {color:#999;}

@media screen and (max-width: 640px) {
#Campaign{
    width:100%;
    margin:0 auto 50px;
}
#Campaign .CamTxt{
    font-size:1.4rem;
    text-align:left;
}

}


/* クッキーラン */
@media screen and (min-width: 641px) {
#CookieRunBox{
    position:relative;
    background:#4f443e;
    width:1046px;
    margin:0 auto 20px;
    padding:2em;
    font-size:1.6rem;
    color:#dbbf91;
    line-height:1.4;
    border:2px solid #dbbf91;
    outline:7px solid #4f443e;
    box-sizing:border-box;
}
#CookieRunBox ul{
    background:#dbbf91;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:28px;
    font-weight:bold;
    color:#4f443e;
    outline:5px solid #dbbf91;
    border:5px solid #4f443e;
}
#CookieRunBox li{
    font-size:4rem;
    list-style:none;
}
#CookieRunBox li:first-of-type {margin-right:1em;}
#CookieRunBox li span {color:#c92a1a;}
#CookieRunBox #SBCookie{
    position:absolute;
    bottom:-98px;
    right:-9px;
    animation:ball 0.8s alternate infinite;
}
@keyframes ball{
    0% {transform: translate(0%, 0%) rotateX(25deg);}
    100% {transform:translate(0%, -40px);}
}
#CookieRunBox #YKCookie{
    position:absolute;
    bottom:-91px;
    left:-23px;
    animation:pendulum ease-in-out 1s infinite alternate;
}
@keyframes pendulum{
    0% {transform:rotate(3deg);}
    100% {transform:rotate(-3deg);}
}
#CookieRunBox ul + div {text-align:center;}
#CookieRunBox .Title{
    display:inline-block;
    background:linear-gradient(transparent 86%, #1b758e 86%);
    margin-bottom:14px;
    font-size:3.6rem;
    line-height:1;
}
#CookieRunBox .Title + .Title {margin-bottom:24px;}
#CookieRunBox p{
    margin-bottom:1em;
    font-size:2.4rem;
}
#CookieRunBox span {color:#e88278;}
#CookieRunBox .SubTit{
    display:inline-block;
    margin:20px 0 12px;
    padding:8px 1em;
    font-size:3rem;
    line-height:1;
    border:1px solid #dbbf91;
}
#CookieRunBox p a{
    font-size:2rem;
    color:#b4ecb0;
    text-decoration:none;
}
#CookieRunBox p a::before{
    content:">>";
    margin-right:6px;
}
#CookieRunBox a:hover {color:#ddd;}

#CookieRunBox ul.DLbtn{
    background:none;
    width:57%;
    margin:40px auto 8px;
    outline:none;
    border:none;
}
#CookieRunBox ul.DLbtn li{
    margin:0 5px;
    font-size:1.4rem;
}
#CookieRunBox ul.DLbtn li:first-of-type {margin-right:auto;}

}


@media screen and (max-width: 640px) {
#CookieRunBox{
    position:relative;
    background:#4f443e;
    width:90%;
    margin:0 auto 20px;
    padding:1em 1em 7em;
    font-size:1.4rem;
    text-align:center;
    color:#dbbf91;
    line-height:1.4;
    border:2px solid #dbbf91;
    outline:7px solid #4f443e;
    box-sizing:border-box;
}
#CookieRunBox ul{
    background:#dbbf91;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:28px;
    font-weight:bold;
    color:#4f443e;
    outline:5px solid #dbbf91;
    border:5px solid #4f443e;
}
#CookieRunBox li{
    font-size:2rem;
    list-style:none;
}
#CookieRunBox li:first-of-type {margin:0;}
#CookieRunBox li span {color:#c92a1a;}
#CookieRunBox li a img{
    width:100%;
    margin-top:10px;
}
#CookieRunBox ul + div{
    display:block;
    margin-bottom:1em;
    padding:1em;
    font-size:1.4rem;
    border:2px solid #1b758e;
}
#CookieRunBox .Title{
    display:block;
    background:none;
    padding:0;
    font-size:1.6rem;
    text-align:left;
    line-height:1.4;
}
#CookieRunBox .Title + .Title {margin-bottom:0;}
#CookieRunBox p{
    font-size:1.4rem;
    text-align:left;
}
#CookieRunBox span {color:#e88278;}
#CookieRunBox .SubTit{
    display:block;
    margin:1em 0 8px;
    padding:8px 1em;
    font-size:1.6rem;
    text-align:center;
    line-height:1;
    border:1px solid #dbbf91;
}
#CookieRunBox a{
    position:relative;
    color:#b4ecb0;
    text-decoration:none;
    z-index:10;
}
#CookieRunBox p a::before{
    content:">>";
    margin-right:6px;
}

#CookieRunBox #SBCookie{
    position:absolute;
    bottom:-10px;
    right:40px;
    width:80px;
    animation:ball 0.8s alternate infinite;
}
@keyframes ball{
    0% {transform: translate(0%, 0%) rotateX(25deg);}
    100% {transform:translate(0%, -30px);}
}
#CookieRunBox #YKCookie{
    position:absolute;
    bottom:77px;
    right:208px;
    animation:pendulum ease-in-out 1s infinite alternate;
}
@keyframes pendulum{
    0% {transform:rotate(3deg);}
    100% {transform:rotate(-3deg);}
}

#CookieRunBox #YKCookie{
    position:absolute;
    bottom:2px;
    left:40px;
    width:38%;
    margin-bottom:0;
    animation:pendulum ease-in-out 1s infinite alternate;
}
#CookieRunBox #SBCookie img, #CookieRunBox #YKCookie img {width:100%;}
#CookieRunBox ul.DLbtn{
    background:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:nowrap;
    width:100%;
    margin:10px 0 28px;
    outline:none;
    border:none;
}
#CookieRunBox ul.DLbtn li{
    margin:0 5px;
    font-size:1.4rem;
}


}


/* Footer */
.copyright{
    margin-bottom:80px;
    font-size:1.3rem;
    text-align:center;
}

@media screen and (max-width: 640px) {
.copyright {margin-bottom:20px;}
}


/* topへ戻る */
#footerGroup #totop{
    width:40px;
    height:40px;
    padding:0;
    text-indent:-9999px;
    background-color:#0079c7;
    border-radius:100%;
    position:fixed;
    bottom:10px;
    right:0;
    z-index:800;
    display:none;
    cursor:pointer;
}
#footerGroup #totop a {display:block;}
#footerGroup #totop::after{
    content:"\f106";
	font-family:"Font Awesome 5 Free";
    font-size:40px;
    font-weight:900;
    line-height:35px;
    text-indent:0;
    text-align:center;
    color:#fff;
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
}