@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;}

body{
    background:url(../images/brush.png) center top no-repeat fixed, linear-gradient(to left, #fee5ec, #fff 36%, #fee5ec);
}

/* PC */
@media screen and (min-width: 641px) {

/* header */
header{
    width:1080px;
    margin:0 auto 30px;
    padding:28px 0;
}
header h1 {display:none;}


/* ギネス */
section{
    background:#fff;
    width:1020px;
    margin:0 auto 4em;
    padding:24px 0 12px 24px;
    line-height:1.6;
    border:5px solid #50afe2;
    border-radius:8px;
    box-sizing:border-box;
}
.Tit{
    position:relative;
    left:-56px;
    background:#fb8aa7;
    width:1016px;
    padding:6px 0;
    font-size:3rem;
    font-weight:bold;
    color:#fff;
    line-height:1.4;
}
.Tit:before{
    position:absolute;
    content:"";
    top:100%;
    left:0;
    border:none;
    border-bottom:15px solid transparent;
    border-right:28px solid rgb(149, 158, 155);
}
.Tit p{
    margin-right:12px;
    padding:12px 12px 8px 32px;
    border-top:2px dashed #fff;
    border-bottom:2px dashed #fff;
    box-sizing:border-box;
}
.Tit span{
    display:inline-block;
    font-size:1.6rem;
    vertical-align:top;
}
.CatchBlue{
    padding:1em 0;
    font-size:2rem;
    font-weight:bold;
    color:#50afe2;
    line-height:1.4;
}
#GuinnessCertification img, #Guinness img {width:960px;}
 .Txt{
    width:940px;
    margin:0 auto;
    padding:2rem 0;
    font-size:1.4rem;
    text-align:left;
}
#GuinnessCertification .Tit + img {margin-top:24px;}
.CatchBlue + .Txt {padding-top:0;}
#GuinnessCertification .Txt + b{
    display:inline-block;
    font-size:1.8rem;
    text-indent:1em;
}
#GuinnessCertification dl.Txt{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    padding-top:0.4em;
}
#GuinnessCertification dl.Txt dt{
    background:#50afe2;
    width:5em;
    margin-bottom:8px;
    padding-top:3px;
    color:#fff;
    text-align:center;
}
#GuinnessCertification dl.Txt dd{
    width:calc(100% - 5em - 1em);
    margin:0 0 8px 1em;
    padding-top:3px;
}
#GuinnessCertification dl.Txt dd span{
    display:inline-block;
    font-size:1rem;
    vertical-align:top;
}


/* 生配信 */
.Period .Txt {padding-bottom:0;}
.Period dl.Txt{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
}
.Period dl.Txt dt{
    background:#50afe2;
    width:5em;
    margin-bottom:8px;
    padding-top:3px;
    color:#fff;
    text-align:center;
}
.Period dl.Txt dd{
    width:calc(100% - 5em - 1em);
    margin:0 0 8px 1em;
    padding-top:3px;
}
#GuinnessDelivery a {color:#50afe2;}
#GuinnessDelivery a:hover {color:#ccc;}


/* 年表 */
#Chronology{
}
.Mt20 {margin-top:20px;}


/* 色紙*/
#ColoredPaper{
}


/* footer */
footer{
    margin-bottom:2em;
    text-align:center;
}



}




/* スマホ */
@media screen and (max-width: 640px) {

.pcOnly {display:none;}

/* header */
header{
    width:94%;
    margin:0 auto;
    padding:28px 0;
}
header h1 {display:none;}
header img {width:96%;}


/* ギネス */
section{
    background:#fff;
    width:94%;
    margin:0 auto 2em;
    padding:1em 2em 1em 2em;
    border:3px solid #50afe2;
    line-height:1.6;
    box-sizing:border-box;
}
.Tit{
    position:relative;
    left:-14%;
    background:#fb8aa7;
    width:120%;
    padding:6px 0;
    font-size:1.5rem;
    font-weight:bold;
    color:#fff;
    line-height:1.4;
}
.Tit:before{
    position:absolute;
    content:"";
    top:100%;
    left:0;
    border:none;
    border-bottom:10px solid transparent;
    border-right:10px solid rgb(149, 158, 155);
}
.Tit p{
    margin-right:12px;
    padding:8px 0 4px 16px;
    border-top:2px dashed #fff;
    border-bottom:2px dashed #fff;
    box-sizing:border-box;
}
.Tit span{
    display:inline-block;
    font-size:1rem;
    vertical-align:top;
}
.CatchBlue{
    padding:1em 0;
    font-size:1.4rem;
    font-weight:bold;
    color:#50afe2;
    line-height:1.4;
}
#GuinnessCertification img, #Guinness img {width:100%;}
.Txt{
    padding:2rem 0;
    font-size:1.2rem;
    text-align:left;
}
.CatchBlue + .Txt {padding-top:0;}
#GuinnessCertification .Tit + img {margin-top:24px;}
.CatchBlue + .Txt {padding-top:0;}
#GuinnessCertification .Txt + b{
    display:inline-block;
    font-size:1.5rem;
}
#GuinnessCertification dl.Txt {padding-top:0.4em;}
#GuinnessCertification dl.Txt dt{
    background:#50afe2;
    width:100%;
    padding-top:3px;
    color:#fff;
    text-align:center;
}
#GuinnessCertification dl.Txt dd{
    width:100%;
    margin:0 0 8px;
    padding-top:3px;
}
#GuinnessCertification dl.Txt dd span{
    display:inline-block;
    font-size:1rem;
    vertical-align:top;
}


/* 生配信 */
.Period .Txt {padding-bottom:0;}
.Period dl.Txt {}
.Period dl.Txt dt{
    background:#50afe2;
    width:100%;
    padding-top:3px;
    color:#fff;
    text-align:center;
}
.Period dl.Txt dd{
    width:100%;
    margin:0 0 8px;
    padding-top:3px;
}
.Period a {color:#50afe2;}
.Period img {width:100%;}


/* 年表 */
#Chronology{
}
.Mt20 {margin-top:20px;}


/* 色紙*/
#ColoredPaper{
}


/* footer */
footer{
    margin-bottom:2em;
    font-size:1rem;
    text-align:center;
}


}


/* 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:"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;
}
