@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

.come-link-box a:hover{background: #ff0000;transition: 0.3s;border: solid 3px #000;}
.come-link-box a{transition: 1s}
body {
margin: 0;

}

main {
animation: main ease 2s;
overflow-x: hidden;
}

.come-main {
position: relative;
}

@keyframes main {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@keyframes fast- {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.come-link-box {
margin: 0 auto;
text-align: center;
}

.come-link-box a {
background: #000;
color: #fff;
animation: fast- 1s;
opacity: 0;
;
animation-delay: 1s;
animation-fill-mode: forwards;
}

@media screen and (max-width:1200px) {
.come-link-box {
margin-bottom: 80px;
}
}

@media screen and (min-width:1201px) {
.come-link-box {
margin-bottom: 100px;
}
}

@media screen and (max-width:1200px) {
.come-main {
max-width: 600px;
margin: 0 auto;
}
.come-main-box {
width: 90%;
margin: 0 auto;
height: 520px;
max-width: 300px;
background-image: linear-gradient(to right, #ffffff 5%, #ffffff 5%, #F9B52C 5%, #F9B52C 20%, #ffffff 20%, #ffffff 25%, #87C6E5 25%, #87C6E5 40%, #ffffff 40%, #ffffff 45%, #FAFF03 45%, #FAFF03 60%, #ffffff 60%, #ffffff 65%, #FF7E71 65%, #FF7E71 80%, #ffffff 80%, #ffffff 85%, #01A29A 85%, #01A29A 100%, #ffffff 100%);
}
.come-link-box a {
background: #000;
color: #fff;
font-size: 18px;
padding: 1.5rem 5rem;
border-radius: 40px;
text-decoration: none;
font-weight: 900;
}
.come-main-box::before {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.7);
width: 80%;
height: 80%;
left: 50%;
transform: translateX(-50%);
}
@keyframes main-anime {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
}
}
.come-main-box h1 {
font-size: 22px;
font-weight: 900;
filter: drop-shadow(0px 0px 6px rgb(255, 255, 255));
font-family: 'M PLUS Rounded 1c', sans-serif;
color: #ff0000;
}
.come-main-box h2 {
font-weight: 900;
background: rgba(0, 0, 0, 1);
display: inline-block;
color: #fff;
width: 100px;
height: 100px;
border-radius: 50%;
}
.come-main-box h2 span {
line-height: 1.2;
padding-top: 30px;
display: block;
font-size: 18px;
}
.come-main-box h3 {
font-size: 70px;
font-weight: 900;
line-height: 1.1;
filter: drop-shadow(0px 0px 6px rgb(255, 255, 255));
font-family: 'M PLUS Rounded 1c', sans-serif;
animation: main-anime 0.5s ease;
animation-delay: 0.5s;
opacity: 0;
animation-fill-mode: forwards;
}
.come-main-box h3 span {
font-size: 40px;
font-weight: 900;
display: block;
position: relative;
}
/*
.come-main-box h3 span::before {
content: '';
position: absolute;
display: inline-block;
width: 60px;
height: 6px;
background: #000;
border-radius: 6px;
top: 50px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}*/
.come-main-box h4 {
font-size: 75px;
font-weight: 900;
line-height: 1;
filter: drop-shadow(0px 0px 6px rgb(255, 255, 255));
letter-spacing: -1px;
font-family: 'M PLUS Rounded 1c', sans-serif;
animation: main-anime 1s ease;
animation-delay: 0.5s;
opacity: 0;
animation-fill-mode: forwards;
}
.come-main-box h4 span {
font-size: 25px;
}
.come-main-box h5 {
font-size: 16px;
font-weight: 900;
background: #ff0000;
color: #fff;
display: inline;
padding: 1rem;
border-radius: 10px;
}
.come-main-box p {
background: #fff;
border: solid 3px #000;
padding: 1rem 1rem;
font-size: 40px;
font-weight: 900;
letter-spacing: -1px;
position: relative;
line-height: 1.2;
font-family: 'M PLUS Rounded 1c', sans-serif;
display: inline-block;
border-radius: 10px;
}
.come-main-box span {
font-size: 20px;

letter-spacing: 1px;
}
.come-main-box p::before {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/pokegif.gif);
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: -55px;
background-repeat: no-repeat;
background-size: contain;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(1) {
position: absolute;
text-align: center;
width: 100%;
top: 100px;
left: 65%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(2) {
position: absolute;
text-align: center;
width: 100%;
top: 60px;
left: 18%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(3) {
position: absolute;
text-align: center;
width: 100%;
top: 180px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(4) {
position: absolute;
text-align: center;
width: 100%;
top: 280px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(5) {
position: absolute;
text-align: center;
width: 100%;
top: 60px;
left: 65%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(6) {
position: absolute;
text-align: center;
width: 100%;
top: 420px;
left: 65%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-h2 {
background: #ff0000;
color: #fff;
margin-top: 0;
font-size: 16px;
text-align: center;
padding: 1rem 0rem;
margin-bottom: 0rem;
position: relative;
margin-bottom: 60px;
}
.come-main-h2:after {
position: absolute;
bottom: -19px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
content: '';
border-width: 20px 20px 0 20px;
border-style: solid;
border-color: #ff0000 transparent transparent transparent;
}
.come-main-box div:nth-of-type(6)::before {
content: '期間';
position: absolute;
top: -10px;
left: 75%;
transform: translateX(-50%) translateY(-50%);
background: #000;
color: #fff;
width: 50px;
height: 50px;
z-index: 2;
border-radius: 50px;
line-height: 50px;
font-size: 13px;
font-weight: 700;
}
}

@media screen and (min-width:1201px) {
@keyframes main-anime {
0% {
opacity: 0;
transform: translateX(-50%);
}
50% {
opacity: 1;
transform: translateX(10%);
}
100% {
opacity: 1;
transform: translateX(0%) translateY(0%);
}
}
.come-link-box a {
background: #000;
color: #fff;
font-size: 30px;
padding: 2rem 10rem;
border-radius: 60px;
text-decoration: none;
font-weight: 900;
}


.come-main {
max-width: 1500px;
margin: 0 auto;
background-image: linear-gradient(to right, #ffffff 2%, #ffffff 2%, #ffffff 3%, #F9B52C 3%, #F9B52C 8%, #ffffff 8%, #ffffff 9%, #87C6E5 9%, #87C6E5 14%, #ffffff 14%, #ffffff 15%, #FAFF03 15%, #FAFF03 20%, #ffffff 20%, #ffffff 21%, #FF7E71 21%, #FF7E71 26%, #ffffff 26%, #ffffff 27%, #01A29A 27%, #01A29A 32%, #ffffff 32%, #ffffff 33%, #F9B52C 33%, #F9B52C 38%, #ffffff 38%, #ffffff 39%, #87C6E5 39%, #87C6E5 44%, #ffffff 44%, #ffffff 45%, #FAFF03 45%, #FAFF03 50%, #ffffff 50%, #ffffff 51%, #FF7E71 51%, #FF7E71 56%, #ffffff 56%, #ffffff 57%, #01A29A 57%, #01A29A 62%, #ffffff 62%, #ffffff 63%, #F9B52C 63%, #F9B52C 68%, #ffffff 68%, #ffffff 69%, #87C6E5 69%, #87C6E5 74%, #ffffff 74%, #ffffff 75%, #FAFF03 75%, #FAFF03 80%, #ffffff 80%, #ffffff 81%, #FF7E71 81%, #FF7E71 86%, #ffffff 86%, #ffffff 87%, #01A29A 87%, #01A29A 92%, #ffffff 92%, #ffffff 93%, #F9B52C 93%, #F9B52C 98%, #ffffff 0%);
}
.come-main-box::before {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.7);
width: 85%;
height: 85%;
left: 50%;
transform: translateX(-50%);
}
.come-main-box {
position: relative;
width: 100%;
max-width: 1200px;
height: 600px;
margin: 0 auto;
animation: main-anime 1s ease;
animation-delay: 0.5s;
opacity: 0;
animation-fill-mode: forwards;
}
.come-main-box h1 {
font-size: 36px;
font-weight: 900;
filter: drop-shadow(0px 0px 6px rgb(255, 255, 255));
font-family: 'M PLUS Rounded 1c', sans-serif;
color: #ff0000;
}
.come-main-box h2 {
font-weight: 900;
background: #000;
display: inline-block;
color: #fff;
width: 130px;
height: 130px;
border-radius: 50%;
position: relative;

}
.come-main-box h2 span {
line-height: 1.2;
padding-top: 40px;
display: block;
font-size: 24px;
width: 100%;

}
.come-main-box h3 {
font-size: 70px;
font-weight: 900;
line-height: 1.2;
filter: drop-shadow(0px 0px 6px rgb(255, 255, 255));
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.come-main-box h3 span {
font-size: 70px;
font-weight: 900;
position: relative;
padding-left: 10px;
}
/*
.come-main-box h3::before {
content: '';
position: absolute;
display: inline-block;
width: 60px;
height: 6px;
background: #000;
border-radius: 6px;
top: 90px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}*/
.come-main-box h4 {
font-size: 110px;
font-weight: 900;
line-height: 1;
filter: drop-shadow(0px 0px 6px rgb(255, 255, 255));
letter-spacing: -1px;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
.come-main-box h4 span {
font-size: 50px;
}
.come-main-box h5 {
font-size: 30px;
font-weight: 900;
background: #ff0000;
color: #fff;
display: inline;
padding: 1rem 1rem;
border-radius: 10px;
}
.come-main-box p {
background: #fff;
border: solid 5px #000;
padding: 1rem 0rem;
font-size: 60px;
font-weight: 900;
letter-spacing: -1px;
position: relative;
line-height: 1.2;
font-family: 'M PLUS Rounded 1c', sans-serif;
display: inline-block;
width: 40%;
text-align: center;
border-radius: 10px;
}
.come-main-box span {
font-size: 30px;
letter-spacing: 1px;
}
.come-main-box p::before {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/pokegif.gif);
position: absolute;
width: 300px;
height: 300px;
top: 50px;
left: -160px;
background-repeat: no-repeat;
background-size: contain;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(1) {
position: absolute;
text-align: center;
width: 100%;
top: 120px;
left: 68%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(2) {
position: absolute;
text-align: center;
width: 100%;
top: 170px;
left: 5%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(3) {
position: absolute;
text-align: center;
width: 100%;
top: 210px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(4) {
position: absolute;
text-align: center;
width: 100%;
top: 330px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(5) {
position: absolute;
text-align: center;
width: 100%;
top: 120px;
left: 31%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(6) {
position: absolute;
text-align: center;
width: 100%;
top: 500px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.come-main-box div:nth-of-type(6)::before {
content: '期間';
position: absolute;
top: 0px;
left: 70%;
transform: translateX(-50%) translateY(-50%);
background: #000;
color: #fff;
width: 60px;
height: 60px;
z-index: 2;
border-radius: 60px;
line-height: 60px;
font-size: 18px;
font-weight: 700;
}
.come-main-h2 {
position: relative;
background: #ff0000;
color: #fff;
margin-top: 0;
font-size: 40px;
text-align: center;
padding: 1rem 0rem;
z-index: 2;
margin-bottom: 80px;
}
.come-main-h2:after {
position: absolute;
bottom: -29px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
content: '';
border-width: 30px 30px 0 30px;
border-style: solid;
border-color: #ff0000 transparent transparent transparent;
}
}



/*既存css*/

@media screen and (max-width:1199px) {
.come-box ul {
margin-left: 0%;
width: 90%;
}
.come-contents-warp {
width: 90%;
margin: 0 auto;
max-width: 1000px;
padding-top: 60px;
padding-bottom: 0px;
}
.come-block-title {
margin: 0 auto;
padding: 2rem;
border-radius: 10px;
width: 90%;
margin-bottom: 60px;
}
.come-block-title .come-block-title-warp {
font-size: 2rem;
padding: 0 5px;
line-height: 1;
top: -20px;
left: 30px;
}
.come-box {
background-color: #fff;
position: relative;
border: 1px solid #000;
border-radius: 10px;
color: #000;
margin-bottom: 40px;
padding: 1rem;
padding-top: 5rem;
z-index: 2;
}
.come-box .come-box-title {
background-color: #000;
font-size: 1.5rem;
color: #fff;
padding: 0.8rem 2rem;
line-height: 1;
position: absolute;
top: -1.5rem;
left: -3px;
}
.come-box table th {
padding: 1rem 0.5rem;
font-size: 1.1rem;
font-weight: 700;
}
.come-box table td {
padding: 0.7rem 0.5rem;
font-size: 1rem;
font-weight: 700;
}
.come-box h3 {
font-size: 1.2rem;
padding: 1rem;
margin-top: 60px;
line-height: 1.2;
}
/*
.come-box table::before {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-ic-1.svg);
position: absolute;
width: 150px;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
left: 92%;
top: 5%;
transform: translateX(-50%)translateY(-50%);
z-index: 3;
}*/
.come-box table::after {
content: '';
display: inline-block;
background-size: contain;
width: 20px;
height: 20px;
margin-top: 20px;
position: absolute;
border-bottom: solid;
left: 50%;
border-color: #000;
transform: translateX(-50%) rotate(-90deg);
animation: table-border 1.3s infinite;
transition: 0.5s;
}
@keyframes table-border {
0% {
width: 20px;
height: 20px;
}
100% {
width: 30px;
height: 20px;
}
}
.come-box li::before {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-ic-2.svg);
position: absolute;
width: 50px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
left: 8%;
top: 0;
transform: translateX(-50%);
z-index: 3;
}
.come-box li {
padding-bottom: 2rem;
margin: 0rem 1rem 2rem;
width: 100%;
font-weight: 700;
}
/*
.come-contents::before {
content: '';
position: absolute;
left: 0%;
transform: translateX(-50%);
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-bg-item.svg);
background-size: contain;
width: 40px;
height: 100%;
background-repeat: repeat;
background-position: top;
top: 0;
}
.come-contents::after {
content: '';
position: absolute;
left: 100%;
transform: translateX(-50%);
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-bg-item.svg);
background-size: contain;
width: 40px;
height: 100%;
background-repeat: repeat;
background-position: top;
top: 0px;
}*/
}

@media screen and (min-width:1200px) {
.come-block-warp {
max-width: 1200px;
margin: 0 auto;
}
.come-block-title {
margin: 2rem auto;
padding: 3rem 2.5rem;
border-radius: 20px;
width: 85%;
max-width: 800px;
margin-top: 80px;
font-size: 1.5rem;
line-height: 2;
position: relative;
}
.come-block-title .come-block-title-warp {
font-size: 4rem;
padding: 0 20px;
line-height: 1;
top: -40px;
left: 30px;
}
.come-block-title::before {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-ch-sp.svg);
position: absolute;
width: 200px;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
left: -13%;
top: 0;
transform: translateX(-50%);
}
.come-block-title::after {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-ch-sp-2.svg);
position: absolute;
width: 200px;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
left: 115%;
top: 0;
transform: translateX(-50%);
}
.come-box {
margin: 2rem auto;
background-color: #fff;
padding: 8rem 6rem 6rem 6rem;
position: relative;
border: 3px solid #000;
border-radius: 20px;
font-size: 1.5rem;
margin-bottom: 80px;
}
.come-box .come-box-title {
background-color: #000;
font-size: 2.5rem;
color: #fff;
padding: 1rem 2rem;
line-height: 1;
position: absolute;
top: -3rem;
left: -3px;
}
.come-box table {
position: relative;
font-weight: 700;
}
.come-box table th {
padding: 1.5rem 0.5rem;
}
.come-box table td {
padding: 1rem 0.5rem;
}
.come-box h3 {
font-size: 2.5rem;
padding: 1rem;
margin-top: 80px;
}
.come-box table::before {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-ic-1.svg);
position: absolute;
display: inline-block;
width: 200px;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
left: 92%;
top: 5%;
transform: translateX(-50%)translateY(-50%);
z-index: 3;
}
.come-box table::after {
content: '';
display: inline-block;
background-size: contain;
width: 40px;
height: 40px;
margin-top: 20px;
position: absolute;
border-bottom: solid;
left: 50%;
border-color: #000;
transform: translateX(-50%) rotate(-90deg);
animation: table-border 1.3s infinite;
transition: 0.5s;
}
@keyframes table-border {
0% {
width: 20px;
height: 40px;
}
100% {
width: 50px;
height: 40px;
}
}
.come-box li::before {
content: '';
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-ic-2.svg);
position: absolute;
width: 70px;
height: 70px;
background-size: contain;
background-repeat: no-repeat;
left: 10%;
top: -1rem;
transform: translateX(-50%);
z-index: 3;
}
.come-box li {
padding-bottom: 3rem;
margin: 0rem 1rem 3rem;
font-weight: 700;
}
/*
.come-contents::before {
content: '';
position: absolute;
left: 0%;
transform: translateX(-50%);
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-bg-item.svg);
background-size: contain;
width: 100px;
height: 100%;
background-repeat: repeat;
background-position: top;
top: 0;
}
.come-contents::after {
content: '';
position: absolute;
left: 100%;
transform: translateX(-50%);
background-image: url(/wp-content/themes/blankslate-child/assets/images/come-bg-item.svg);
background-size: contain;
width: 100px;
height: 100%;
background-repeat: repeat;
background-position: top;
top: 0px;
}*/
.come-contents-warp {
width: 80%;
margin: 0 auto;
max-width: 1000px;
padding-top: 60px;
}
}

.come-box table {
width: 100%;
border: solid 2px #000;
position: relative;
border-collapse: collapse;
}

.come-box table tr {
text-align: center;
width: calc(100%/3);
}

.come-box table th {
background: #000;
color: #fff;
border: solid 1px #000;
}

.come-box table td {
color: #000;
border: solid 1px #000;
}

.come-box h3 {
background: #ff0000;
color: #fff;
text-align: center;
}

.come-block-title {
background-color: #fff;
position: relative;
border: 3px solid #000;
color: #000;
}

.come-block-title .come-block-title-warp {
background-color: #ffffff;
background-size: 0%;
font-weight: 900;
color: #000;
line-height: 1;
position: absolute;
}

.come-contents {
background: linear-gradient(to bottom, rgba(250, 255, 3,0.4) 50%, rgba(255, 255, 255, 0.9)100%),url(/wp-content/themes/blankslate-child/assets/images/come-cont-bg.webp);
background-size: 10%;
position: relative;
font-family: 'M PLUS Rounded 1c', sans-serif;
margin-bottom: 0px;
padding-bottom: 40px;

}

.come-box li {
border-bottom: solid 2px #000;
color: #000;
list-style: none;
position: relative;
}

.come-box li span {
margin-left: 20%;
display: block;
line-height: 1.2;
}

.come-box h4 {
background: #000;
color: #fff;
display: inline-block;
}

.come-box h5 {
border-bottom: solid 3px;
display: inline-block;
color: #000;
}

.come-box-item {
border: solid 3px #000;
padding: 1rem;
color: #000;
margin: 1rem 0.5rem;
font-weight: 900;
}

.c-FF7976 {
color: #FF7976;
font-weight: 900;
}



.bururi  {
animation: bururi 1s infinite;
}
@keyframes bururi {
50% {
transform: scale(1, 1);
}
52% {
transform: scale(0.98, 0.95)
}
54% {
transform: scale(1, 1);
}
56% {
transform: scale(0.98, 0.95)
}
58% {
transform: scale(1, 1);
}
60% {
transform: scale(0.98, 0.95)
}
}

.yureru-js {
animation: yureru-js 0.4s infinite;
}
@keyframes yureru-js {
0% {
transform: translate(1px, 1px);
}
25% {
transform: translate(1px, -1px);
}
50% {
transform: translate(-1px, -1px);
}
75% {
transform: translate(-1px, 1px);
}
100% {
transform: translate(1px, 1px);
}
}

.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 65%, #fdf8ad 0%) repeat scroll 0 0;font-weight: 900;}