@charset 'UTF-8';
html { scroll-behavior: smooth;}

h1 {
padding:0;
text-align:center;
}
h1 img {
width:100%;
border:none !important;
}

h1 p {
    display: none;
}

.explanation {
margin:5px auto;
    padding: 1%;
    background: #ffffff;
}
.explanation p {
    display: inline-block;
    width: 100%;
    font-size: 0.9em;
    line-height: 1.4em;
    text-align: left;
    padding: 1%;
    font-weight: normal;
    background: #ffffff;
margin:0;
}
.explanation p b {
    font-size: 1.1em;
color:#eb032e;
}


.information {
background:#ffffff;
padding:1%;
text-align:left;
}
.information em {
font-size:1em;
font-weight:bold;
font-style:normal;
text-align:center;
display:block;
margin:0 auto 3%;
}


.information p {
font-size:0.8em;
padding-left:1em;
text-indent:-1em;
    margin-bottom: 3%;
}
.information p:last-child {
margin-bottom:none;
}

.caption {
    background-color: #ea2545 !important; /* 背景色 */
    color: #fff; /* 文字色 */
    font-weight: bold;
    font-size: 1.1em;
    /* overflow: hidden; */
    padding: 0;  /* 余白 */
    margin: 0.5em auto 0;
    position: relative;
    border-bottom:none !important;
    display:flex;  /* 0430岡村追加*/
    align-items: center; /* 0430岡村追加*/
    -moz-border-radius: 50px 0 0 50px;
    -webkit-border-radius: 50px 0 0 50px;
    }

    .caption img {
    width:15%;
    display:inline-block;
    vertical-align:middle;
    overflow: none;
}
.caption span {
vertical-align:middle;
margin-left:10px;
}
.caption.weekday {
background-color: #32c400 !important;
}
.caption.saturday {
background-color: #0680dd !important;
}


h3 {
color: #fff;
border: 2px dashed #fff;
background-color: #d92d29;
box-shadow: 0px 0px 0px 10px #d92d29;
padding: 10px;
margin: 30px auto 15px;
}

#container{
background-color: #fff;
}

article {
padding:0.5em;
text-align: center;
/* margin-bottom: 30px; */
}

article p {
font-size: 1em;
line-height: 1.4em;
text-align: left;
margin: 0.5em auto 0.9em;
background: #fff3ca;
padding: 0.5em;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
}

article p span {
display:block;
font-size: 0.8em;
}



article a {
display:inline-block;
width:100%;
}
article a img {
width:100%;
vertical-align:middle;
}
article a:hover{
opacity:0.8;
}

article ul {
width:100%;
display:inline-block;
}
article ul li {
width:100%;
display:inline-block;
}

.banner_link{
z-index: 1;
position: relative;
overflow: hidden;
}
.banner_link img {
width:100%;
}
.banner_link span {
    color: #FFF;
    padding: 5px 0px 50px;
    position: absolute;
    left: -70px;
    bottom: -30px;
    text-align: center;
    width: 150px;
    font-size: 1.4em;
    line-height: 1.1em;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    font-weight: bold;
    background: rgba(255,0,0,0.8);
    z-index: 1000;

}
.notice div {
z-index: 2;
    background: rgba(0,0,0,0.6);
height:100%;
width:100%;
position:absolute;
}

.end div {
z-index: 2;
    background: rgba(0,0,0,0.7);
height:100%;
width:100%;
position:absolute;
vertical-align:middle;
}
.end div p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
background: none;
    color: #ffffff;
font-size: 2em;
    letter-spacing: 0.2em;}


.banner_link {
margin: 0.5em auto;
}

.banner_link a {
background:#000000;
}

.banner_link a p {
    margin: 0;
    padding: 0.5em;
    color: #ffffff;
    background: #333333;
font-size:0.8em;
}

.list_index ul {
width:100%;
text-align:left;
}
.list_index ul li {
width:100%;
display:inline-block;
border-bottom: 1px solid #e9e9e9;
line-height: 1em;
}

.list_index ul li a {
width:100%;
display:inline-block;
font-weight:bold;
font-size:1em;
padding:5%;
position: relative;
color:#333333;
}
.list_index ul li a:after {
display: block;
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 8px;
height: 8px;
margin: -4px 0 0 0;
border-top: solid 2px #333333;
border-right: solid 2px #333333;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}




.list_detail li {
display:inline-block;
width:100%;
background:#ffffff;
padding: 0;
border-bottom: 1px solid #e9e9e9;
line-height: 1em;
}
.list_detail li a {
 position:relative;
display:inline-block;
width:100%;
background:#ffffff;
padding: 5px;

}
.list_detail li a figure {
width:24%;
display: table-cell;
vertical-align: middle;
position: relative;
}
.list_detail li a figure span {
position: absolute;
bottom: -0.2em;
left: 0;
}
.list_detail li a img {
width:100%;
}
.list_detail li a p {
width:75%;
padding-right:30px;
padding-left: 5px;
font-size: 0.8em;
display: table-cell;
vertical-align: middle;
}

.list_detail li a p em {
display: inline-block;
padding: 3px 20px 2px;
background: #88c800;
margin: 0 5px 3px 0;
font-style: normal;
font-weight: bold;
color: #ffffff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

.list_detail li a:after{
 content: '';
display: block;
position: absolute;
top: 50%;
margin-top: -0.3em;
right: 10px;
width: 0.6em;
height: 0.6em;
border-top: #ababab 3px solid;
border-right: #ababab 3px solid;
transform: rotate(45deg);
}


.pageback {
margin: 10px auto 15px;
}
.pageback a {
display: inline-block;
font-size: 1em;
background: #484848;
color: #ffffff;
width: 75%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 0.5em;
}



table , tr, th {
border-collapse: collapse;
border-spacing: 0;
width:auto;
}
td {
vertical-align: top;
line-height: 0;
width: 33%;
padding: 2%;
}
td a, td figure {
width: 100%;
display:block;
}
td a img, td img {
width: 100%;
}



td a figure {
background:#ffffff;
position: relative;
width: auto;
height: auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
td a figure span {
position:absolute;
display:block;
width:100%;
height:100%;
background-image:url(https://f8iv0sxb7k.user-space.cdn.idcfcloud.net/stamp-ap/images/sp/202012_gensoustamp/sample.png);
background-size:cover;
opacity: 0.2;
}


.sitelink {
border: 4px solid #895d02;
border-image: linear-gradient(to right, #bf4706 0%, #c67209 25%, #f2cb20 50%, #983804 75%, #ffc500 100%);
border-image-slice: 1;
padding: 2%;
margin: 3% auto;
    background: #ffffff;

}


.sitelink a {
display:table;
width:100%;
}
.sitelink a figure {
display: table-cell;
background:#ffffff;
position: relative;
width: 33%;
height: auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sitelink a figure span {
position:absolute;
display:block;
width:100%;
height:100%;
background-image:url(https://f8iv0sxb7k.user-space.cdn.idcfcloud.net/stamp-ap/images/sp/202012_gensoustamp/sample.png);
background-size:cover;
opacity: 0.2;
}
.sitelink a p {
width: 67%;
font-size: 1.1em;

font-weight:bold;
text-align:center;
display: table-cell;
vertical-align: middle;
}
.sitelink a p em {
width: 80%;
text-align: center;
display: inline-block;
color: #ffffff;
margin: 3% auto;
padding: 3% 0;
font-style: normal;
background: #ff0000;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-bottom: 5px solid #890202;
}
.sitelink a p em:hover {
background: #890202;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
border-bottom:none;

}
.sitelink a p em:active {
background: #890202;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}





table td button {
background: #38c310;
width:100%;
text-align:center;
cursor:pointer;
margin: 3% auto;
border:none;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-bottom: 5px solid #269906;
}
table td button:hover {
background: #2ca20a;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
border-bottom:none;

}
table td button:active {
background: #2ca20a;
-webkit-transform: translateY(3px);
-moz-transform: translateY(3px);
transform: translateY(3px);
}
table td button a {
color:#ffffff !important;
font-weight:bold;
font-size:1.1em;
display:block;
width:100%;
padding:5% 0;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}


table td button.link_button {
background: #e30101;
    border-bottom: 5px solid #8c0404;
}
table td button.link_button a {
    font-size: 0.9em;
    line-height: 1.9em;
}

.schedule {
margin:0 auto 1em;
}
.schedule ul {
text-align:center;
margin:5px auto;
width:100%;
display:inline-block;
}
.schedule ul li {
width:15%;
display:inline-block;
margin: 2px;
}
.schedule ul li a img {
width:100%;
}
.schedule em {
text-align: left;
    background: #06b513;
    color: #ffffff;
    padding: 0.5em;
    margin: 0.5em auto;
    display: block;
    font-weight: bold;
    font-size: 1em;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
letter-spacing: 0.2em;
}

a.anchor{
    display: block;
    padding-top: 45px;
    margin-top: -45px;
}

.pagetop {
    margin:5px auto 1em;
}

.banner img {
    width:100%;
    border:none !important;
    }



@charset "UTF-8";
/* CSS Document */
/**********背景************/

#container{
    background-color: #ffffff; /*色をつけるとき*/
    /* background:url(https://f8iv0sxb7k.user-space.cdn.idcfcloud.net/stamps/images/sp/20221226_nenmatsu/BG.png)repeat,100% ; 画像を使うときはこれ　リピート以外にしたいときはググってみてください */
    background-size:100%;　
}

/**********バナー************/

h1.bn img{
width:100%;
}

.bn_other img{
width:100%;
}

.bncaption {
    width: 100%;
    position: relative;
    margin: 0px auto;
    padding: 8px;
    color: #ffffff;
    background: #ff1616;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
}

/**********コメント************/
.comment {
    text-align:center;
    font-size: 0.9em;
    font-weight: bold;
    padding: 6px;
    background-color: #ffffff;
    color: #855848;
}

.comment_under { /*ページ下部のコメント用　上部にスペースつきます*/
    text-align:center;
    font-size: 0.9em;
    font-weight: bold;
    margin-top:2em; /*上部のスペース*/
    margin-bottom:0; /*下部のスペース。0にしているので適宜追加してください*/
    padding: 6px;
    background-color: #ffffff;
    color: #855848;
}


/**********見出し************/

.midashi_normal{
    color: #fff;
    background-color: #d92d29;
    margin-top: 1em;
    padding: 10px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

.midashi_dash{
    color: #fff;
    border: 2px dashed #fff;
    background-color: #d92d29;
    box-shadow: 0px 0px 0px 8px #d92d29;
    padding: 7px;
    margin: 20px 8px 10px 8px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

/**********スタンプ配置************/

.stamplist_grid ul{
width:100%;
padding:10px;
display:grid;
grid-template-columns:repeat(3, 1fr);
column-gap:10px;
row-gap:10px;
}

.waku li{ /*スタンプに枠つけたい場合これを追加*/
    column-gap:8px;
    border:solid 1px red;
    border-radius: 15px;
}

.twocolumn ul{/*2列にしたいときはこれ*/
    grid-template-columns: repeat(2, 1fr); 
}

div.image{
margin:auto;
}

.stamplist_grid a div{
background-color:#fff;
border-radius:15px;
height:100%;
text-align:center;
display:flex;
flex-direction: column;
justify-content: flex-end;
}

.stamplist_grid li img{
width:100%;
margin:0px;
border: 1px solid #aaa;
border-radius:15px 15px 0 0;
}


.stamplist_grid ul li div a div{
    background-color:#fff;
    border-radius:15px;
    height:100%;
    text-align:center;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    }

.stamplist_grid::after{
    position:absolute;
    display:block;
    background-image:url("https://f8iv0sxb7k.user-space.cdn.idcfcloud.net/stamp-ap/images/sample.png");
    }

.stamplist_grid li img::after{
    position:absolute;
    display:block;
    background-image:url("https://f8iv0sxb7k.user-space.cdn.idcfcloud.net/stamp-ap/images/sample.png");
    }
    

.stamplist_grid span.dlbutton{
display:block; /*「ダウンロード」ボタン表示させたいときはblock いらないときはnone*/
width:100%;  /* ダウンロードボタンの横幅はカードの100％*/
background-color:red;  /* ダウンロードボタンの背景色 */
color:#fff;  /* ダウンロードボタンの文字色 */
border-radius:0 0 15px 15px;
padding:3px;
font-size: 0.9em;
}

.twocolumn span.dlbutton{
    display:block; /*「ダウンロード」ボタン表示させたいときはblock いらないときはnone*/
    width:100%;  /* ダウンロードボタンの横幅はカードの100％*/
    background-color:red;  /* ダウンロードボタンの背景色 */
    color:#fff;  /* ダウンロードボタンの文字色 */
    border-radius:0 0 15px 15px;
    padding:5px;
    }

.stamplist_grid span.none{ /*「ダウンロード」ボタン表示させない場合*/
display:none; 
}


/* このやり方だとBIGスタンプにかぶせるサンプルの透かしがずれるので、新しく設定*/

.guard_new{
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    /* background-image:url("https://f8iv0sxb7k.user-space.cdn.idcfcloud.net/stamp-ap/images/sample.png"); */
    background-size:cover;
    }
    
    
    span.guard_05 {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url(../../images/img_NG_ap_05.png);
        background-size: cover;
    }

    .stamplist_grid ul li a span.guard_gw {
        position: absolute;
        display: block;
        width: 110px;
        height: 120px;
        background-image: url("https://stamps.gsj.mobi/images/img_NG_ap_05.png");
        background-size: cover;
    }

    .coment {
        text-align: center;
        font-size: 1.1em;
        font-weight: bold;
        padding: 6px;
        padding-bottom: 4px;
        color: #ffffff;
        background-color: #ffffff;
    }

    .bottom {
        font-size: 0.9em;
        color: #ff0000;
        padding-top: 10px;
    }