@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
.header-box {
position: relative;
}

.income-svg {
width: 120px;
height: auto;
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%)translateY(-50%);
}


.income-bg {
background-image: linear-gradient(to bottom, #fff 0%, #93e9f5 100%) ;
}

.h2-green span {
background-image: linear-gradient(to right, #5ed1e1 0%,#bfc2fe 50%, #e8bddb 100%);
display: block;
}

.h2-red span {
background-image: linear-gradient(to right, #5ed1e1 0%,#bfc2fe 50%, #e8bddb 100%);
display: block;
}

.h2-purple span {
background-image: linear-gradient(to right, #5ed1e1 0%,#bfc2fe 50%, #e8bddb 100%);
display: block;
}

.h2-blue span {
background-image: linear-gradient(to right, #5ed1e1 0%,#bfc2fe 50%, #e8bddb 100%);
display: block;
}

@media screen and (max-width:1199px) {
.pc-block {
display: none;
}
.sp-block {
display: block;
}
#mokuji {
margin: 30px 10px 20px 10px;
}

.income-block {
width: 90%;
}
.h2-green img,.h2-blue img {
padding: 1rem 0.5rem;
width: 90%;
height: auto;
margin: 0 auto;
}
.h2-red img, .h2-purple img {
padding: 1rem;
width: 80%;
height: auto;
margin: 0 auto;
}
.h2-red img, .h2-purple img, .h2-blue img {
margin-top: -50px;
}
.h2-green span,.h2-red span,.h2-purple span,.h2-blue span{color: #fff;font-size: 20px;padding: 2rem 1rem;}

.h2-green::before {
content: '';
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
width: 200px;
height: 200px;
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.h2-red::before, .h2-purple::before, .h2-blue::before {
content: '';
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 100px;
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%)translateY(-50%);
}
.h2-green::before {
background-image: url('https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/income-sp-title-1-warp.svg')
}
.h2-red::before, .h2-purple::before, .h2-blue::before {
background-image: url('https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/income-poke-ic2.svg')
}
.h2-green, .h2-red, .h2-purple, .h2-blue {
text-align: center;
position: relative;
margin-top: 100px;
}
.income-bg {
padding: 50px 0px;
}
.income-content{padding: 1rem;}
.income-content p {
padding: 1.5rem;
line-height: 2;
font-size: 14px;
}
}

@media screen and (min-width:1200px) {
.pc-block {
display: block;
}
.sp-block {
display: none;
}
#mokuji {
margin: 100px 0px 50px 0px;
}

.income-block {
width: 1200px;
}
.h2-green img, .h2-red img, .h2-purple img, .h2-blue img {
padding: 1rem;
padding-left: 3rem;
width: 50%;
height: auto;
}
.h2-green::before {
content: '';
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
width: 200px;
height: 200px;
position: absolute;
top: 170px;
left: 88%;
transform: translateX(-50%)translateY(-50%);
}
.h2-green span,.h2-red span,.h2-purple span,.h2-blue span{
color: #fff;
font-size: 30px;
padding: 1rem;
}

.h2-red::before, .h2-purple::before, .h2-blue::before {
content: '';
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
width: 130px;
height: 130px;
position: absolute;
top: 120px;
left: 90%;
transform: translateX(-50%)translateY(-50%);
}
.h2-green, .h2-red, .h2-purple, .h2-blue {
text-align: center;
padding-top: 100px;
position: relative;
}
.h2-green::before {
background-image: url('https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/income-sp-title-1-warp.svg');
}
.h2-red::before, .h2-purple::before, .h2-blue::before {
background-image: url('https://pokewaku.jp/wp-content/themes/blankslate-child/assets/images/income-poke-ic2.svg');
}
.income-bg {
padding: 2rem;
}
.income-content p {
padding: 2rem;
margin-top: 60px;
font-size: 16px;
width: 70%;
line-height: 2;
}
}

.flex {
display: flex;
width: 100%;
}

.flex img {
display: inline-block;
}

.income-block {
margin: 0 auto;
background: #fff;
}

.income-content {
max-width: 1000px;
margin: 0 auto;
}

.sp-cont {
text-align: center;
padding: 15px;
}

.pc-cont {
position: absolute;
top: 30%;
left: 75%;
}

.sp-cont-warp {
padding-bottom: 10px;
padding-left: 5px;
}

.dis-ib {
display: inline-block;
}

.po-l {
position: relative;
}

.ad-table, .ma-table, .no-table {
width: 90%;
border: solid 2px #000000;
text-align: center;
border-collapse: collapse;
}

.ad-table th, .ma-table th, .no-table th {
color: #fff;
border: solid 1px #000000;
padding: 0.3rem 0rem;
}

.ad-table td, .ma-table td, .no-table td {
border: solid 1px #000000;
font-weight: 700;
padding: 0.3rem 0rem;
}

.ad-table th {
background-color: #E13D0A;
}

.ma-table th {
background-color: #8C0AE1;
}

.no-table th {
background-color: #0A6EE1;
}

@media screen and (max-width:1199px) {
.ad-table, .ma-table, .no-table {
margin: 0 auto;
}
.income-entry {
width: 70%;
padding: 1.5rem 0rem;
}
}

@media screen and (min-width:1200px) {
.ad-table, .ma-table, .no-table {
width: 70%;
font-size: 18px;
margin-bottom: -40px;
}
.pc-mg-t-20 {
margin-top: -20px;
}
.income-entry {
width: 40%;
padding: 2rem 0rem;
font-size: 25px;
}
}

.under-yellow {
background: linear-gradient(transparent 60%, rgb(255, 255, 0) 60%);
font-weight: 700;
}

.income-entry {
background: #000;
color: #fff;
border-radius: 50px;
text-align: center;
font-weight: 700;
display: block;
margin: 0 auto;
margin-top: 30px;
}

a.income-entry:hover {
opacity: 0.8;
}

/*アニメーション*/

@media screen and (max-width:1199px) {
.fadein {
transition: all 1200ms ease-out;
}
.fadein.toUp {
transform: translateY( 30px);
opacity: 0;
}
.fadein.show {
transform: translate( 0);
opacity: 1;
}
}

@media screen and (min-width:1200px) {
.fadein {
transition: all 1500ms ease-out;
}
.fadein.toUp {
transform: translateY( 50px);
opacity: 0;
}
.fadein.show {
transform: translate( 0);
opacity: 1;
}
}

.cp-fade-block {animation: cpfade 2.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;}
@keyframes cpfade {0% {opacity: 0;}100% {opacity: 1;}}