main{
padding-top: 100px;
}
header{
position: static;
height: 100vh;
padding: 0;
background: none;
}
header .headerInner{
position: relative;
height: 93%;
background: url("/images/index_bg01.png") top left / 15px 15px;
border-top: 20px solid #fca1c3;
border-right: 20px solid #fca1c3;
border-bottom: 20px solid #f62;
border-left: 20px solid #f62;
}
header .headerInner nav{
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 40px);
position: fixed;
padding: 15px;
z-index: 2;
transition: .5s;
}
header .headerInner nav.scroll{
width: 100%;
margin: -20px 0 0 -20px;
padding: 12px 20px;
background: rgb(252,161,195);
background: linear-gradient(90deg, rgba(252,161,195,1) 0%, rgba(255,102,34,1) 100%);
}
header .headerInner nav.scroll .logo{
width: 60px;
}
header .headerInner .globalNav_sp .hamburgerBtn{
position: relative;
width: 68px;
height: 68px;
background: #0B1334;
z-index: 4;
transition: .5s;
}
header .headerInner nav.scroll .globalNav_sp .hamburgerBtn{
width: 52px;
height: 52px;
}
header .headerInner .globalNav_sp .hamburgerBtn i{
position: absolute;
display: block;
width: 70%;
height: 5px;
left: 10px;
background: #fff;
border-radius: 10px;
transition: .5s;
}
header .headerInner .globalNav_sp .hamburgerBtn i:nth-child(1){
top: 15px;
}
header .headerInner .globalNav_sp .hamburgerBtn i:nth-child(2){
top: 32px;
}
header .headerInner .globalNav_sp .hamburgerBtn i:nth-child(3){
top: 49px;
}
header .headerInner nav.scroll .globalNav_sp .hamburgerBtn i{
left: 8px;
}
header .headerInner nav.scroll .globalNav_sp .hamburgerBtn i:nth-child(1){
top: 10px;
}
header .headerInner nav.scroll .globalNav_sp .hamburgerBtn i:nth-child(2){
top: 24px;
}
header .headerInner nav.scroll .globalNav_sp .hamburgerBtn i:nth-child(3){
top: 37px;
}
header .headerInner .globalNav_sp.show .hamburgerBtn{
background: #fff;
}
header .headerInner .globalNav_sp.show .hamburgerBtn i{
background: #0B1334;
}
header .headerInner .globalNav_sp.show .hamburgerBtn i:nth-child(1){
top: 32px;
left: 0;
width: 100%;
transform: rotate(45deg);
}
header .headerInner .globalNav_sp.show .hamburgerBtn i:nth-child(2){
opacity: 0;
}
header .headerInner .globalNav_sp.show .hamburgerBtn i:nth-child(3){
top: 32px;
left: 0;
width: 100%;
transform: rotate(-45deg);
}
header .headerInner nav.scroll .globalNav_sp.show .hamburgerBtn i:nth-child(1){
top: 24px;
left: 0;
}
header .headerInner nav.scroll .globalNav_sp.show .hamburgerBtn i:nth-child(3){
top: 24px;
left: 0;
}
header .headerInner .globalNav_sp .hamburger{
transform: translateX(100%);
position: fixed;
height: 100vh;
width: 65vw;
top: 0;
right: 0;
padding: 40px 20px 20px;
background: #0B1334;
color: #fff;
font-size: 2rem;
font-weight: bold;
z-index: 3;
transition: .5s;
}
header .headerInner .globalNav_sp.show .hamburger{
transform: translateX(0);
}
header .headerInner .hamburger li:nth-of-type(n+2){
padding-top: 10px;
}
header .sticker div{
position: absolute;
}
header .sticker .pizza{
top: 4%;
left: 34%;
width: 60px;
height: 59px;
}
header .sticker .heart{
top: 24%;
left: 12%;
width:137px;
height: 35px;
}
header .sticker .arrow{
top: 13%;
right: 32%;
width: 50px;
height: 49px;
}
header .sticker .peach{
top: 21%;
right: 7%;
width: 69px;
height: 69px;
}
header .sticker .berry{
top: 35%;
left: 4%;
width: 69px;
height: 69px;
}
header .sticker .sabo{
top: 40%;
left: 32%;
width: 44px;
height: 52px;
}
header .sticker .kiwi{
top: 50%;
left: 48%;
width: 69px;
height: 70px;
}
header .sticker .ballon{
top: 36%;
right: 25%;
width: 38px;
height: 53px;
}
header .sticker .bee{
top: 50%;
right: 4%;
width: 50px;
height: 50px;
}
header .sticker .star{
bottom: 40%;
left: 10%;
width: 41px;
height: 40px;
}
header .sticker .apple{
bottom: 23%;
left: 20%;
width: 67px;
height: 69px;
}
header .sticker .car{
bottom: 13%;
right: 33%;
width: 50px;
height: 39px;
}
header .sticker .cherry{
bottom: 15%;
right: 5%;
width: 72px;
height: 64px;
}
header .sticker .gyoniso{
bottom: 26%;
right: 8%;
width: 160px;
height: 59px;
}
header .sticker .pine{
bottom: 10%;
left: 4%;
width: 56px;
height: 81px;
}
header .update{
height: 7vh;
display: flex;
align-items: center;
border-top: 4px solid #1B1334;
border-bottom: 4px solid #1B1334;
font-size: 1.4rem;
overflow: hidden;
}
header .update .tag{
display: flex;
align-items: center;
height: 100%;
padding: 0 10px;
color: #fff;
background: #1B1334;
z-index: 1;
}
header .update .scroll{
display: flex;
white-space: nowrap;
animation: update 35s infinite linear 1s both;
}
header .update .scroll .text{
margin-right: 20px;
display: flex;
align-items: center;
}
@keyframes update {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
header .update .scroll .date{
margin-right: 5px;
padding: 3px 10px;
background: #0B1334;
color: #fff;
border-radius: 50px;
}
header .update .scroll .up{
margin-right: 5px;
padding: 3px 10px;
background: #fca1c3;
color: #fff;
border-radius: 50px;
}
section:nth-of-type(n+2){
margin-top: 50px;
}
.sec_about .aboutInner .introWrap{
text-align: center;
}
.sec_about .aboutInner .intro{
display: inline-block;
margin: 0 auto 25px;
padding: 18px 25px;
border: 4px solid #fca1c3;
border-radius: 45px;
text-align: center;
}
.sec_about .aboutInner .intro .logo{
display: inline-block;
width: 125px;
}
.sec_about .aboutInner .intro .name{
margin: 18px 0 0;
font-size: 1.8rem;
font-weight: bold;
}
.sec_update .updateBox{
margin: 0 20px;
}
.sec_update ul li{
margin: 0 -20px;
padding: 20px 0;
}
.sec_update ul li:nth-of-type(n+2){
border-top: 2px dotted #fca1c3;
}
.sec_update ul li:first-child{
padding-top: 0;
}
.sec_update ul li:last-child{
padding-bottom: 0;
}
.sec_update ul li .info{
display: flex;
margin-bottom: 10px;
color: #fff;
}
.sec_update ul li .date{
margin-right: 10px;
padding: 5px 15px;
background: #0B1334;
border-radius: 50px;
}
.sec_update ul li .up{
padding: 5px 15px;
background: #fca1c3;
border-radius: 50px;
}
.sec_update ul li .new{
padding: 5px 15px;
background: #f62;
border-radius: 50px;
}
.sec_sns ul{
width: 80%;
margin: 0 auto;
}
.sec_sns .snsBox{
display: flex;
align-items: center;
}
.sec_sns .snsBox:nth-of-type(n+2){
margin-top: 15px;
}
.sec_sns .snsBox .icon i{
margin-right: 20px;
}
.sec_sns .text{
width: 80%;
}
.sec_sns .snsName{
font-size: 1.8rem;
}
.sec_other .detail{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 1.5rem;
line-height: 1.2;
}
.sec_other .detail a{
width: 49%;
margin-top: 10px;
padding: 15px;
background: #fca1c3;
border-radius: 20px;
}
.sec_other .detail li:nth-of-type(n+3){
margin-top: 10px;
}
.sec_other .caution li{
position: relative;
margin-left: 18px; 
}
.sec_other .caution li::after{
position: absolute;
display: block;
content: "";
background: #f62;
border-radius: 10px;
width: 10px;
height: 10px;
top: 6px;
left: -15px;
}
.sec_other .caution li:nth-of-type(n+2){
margin-top: 3px;
}

@media screen and (min-width: 600px){
main{
padding-top: 130px;
}
header .headerInner{
border-top: 40px solid #fca1c3;
border-right: 40px solid #fca1c3;
border-bottom: 40px solid #f62;
border-left: 40px solid #f62;
}
header .headerInner nav{
padding: 25px;
justify-content: flex-start;
}
header .headerInner nav.scroll{
margin: -40px 0 0 -40px;
padding: 0;
}
header .headerInner_c{
width: 100%;
justify-content: flex-start;
align-items: center;
margin: 0;
padding: 0;
}
header .headerInner nav.scroll .headerInner_c{
justify-content: space-between;
max-width: 800px;
margin: 0 auto;
padding: 10px 50px;
}
header .headerInner nav.scroll .logo{
width: 80px;
}
header .headerInner .globalNav_pc{
display: flex;
align-items: center;
margin-left: -30px;
padding: 10px 30px 10px 50px;
background: #0B1334;
border-radius: 50px;
color: #fff;
font-size: 2rem;
font-weight: bold;
transition: .5s;
}
header .headerInner nav.scroll .globalNav_pc{
padding: 0;
background: none;
font-size: 1.5rem;
}
header .headerInner .globalNav_pc li:nth-of-type(n+2){
margin-left: 15px;
}
header .headerInner .globalNav_pc .share{
display: none;
}
header .headerInner nav.scroll .globalNav_pc .share{
display: block;
margin-left: 20px;
}
header .sticker .pizza{
top: 4%;
left: 84%;
width: 90px;
height: 88.5px;
}
header .sticker .heart{
top: 20%;
left: 10%;
width: 205.5px;
height: 88.5px;
}
header .sticker .arrow{
top: 13%;
right: 28%;
width: 75px;
height: 73.5px;
}
header .sticker .peach{
top: 25%;
right: 8%;
width: 103.5px;
height: 103.5px;
}
header .sticker .berry{
top: 33%;
left: 4%;
width: 103.5px;
height: 103.5px;
}
header .sticker .sabo{
top: 40%;
left: 28%;
width: 66px;
height: 78px;
}
header .sticker .kiwi{
top: 50%;
left: 46%;
width: 103.5px;
height: 105px;
}
header .sticker .ballon{
top: 30%;
right: 47%;
width: 57px;
height: 79.5px;
}
header .sticker .bee{
top: 40%;
right: 25%;
width: 75px;
height: 75px;
}
header .sticker .star{
bottom: 32%;
left: 15%;
width: 61.5px;
height: 60px;
}
header .sticker .apple{
bottom: 16%;
left: 28%;
width: 100.5px;
height: 103.5px;
}
header .sticker .car{
bottom: 10%;
right: 40%;
width: 75px;
height: 58.5px;
}
header .sticker .cherry{
bottom: 15%;
right: 5%;
width: 108px;
height: 96px;
}
header .sticker .gyoniso{
bottom: 33%;
right: 4%;
width: 240px;
height: 88.5px;
}
header .sticker .pine{
bottom: 6%;
left: 4%;
width: 84px;
height: 121.5px;
}
header .update{
font-size: 1.5rem;
}
header .update .tag{
padding: 0 20px;
}
header .update .scroll .text{
margin-right: 30px;
}
section:nth-of-type(n+2){
margin-top: 80px;
}
.sec_about .aboutInner{
display: flex;
align-items: center;
}
.sec_about .aboutInner .intro{
width: 230px;
margin: 0 20px 0 0;
}
.sec_update .updateBox{
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}
.sec_update ul li{
margin: 0;
}
.sec_update ul li .info{
margin-bottom: 0;
}
.sec_sns ul{
width: 100%;
display: flex;
justify-content: center;
margin: 0;
}
.sec_sns .snsBox{
width: 25%;
display: block;
text-align: center;
}
.sec_sns .snsBox:nth-of-type(n+2){
margin: 0 0 0 30px;
}
.sec_sns .snsBox .icon i{
margin-right: 0;
}
.sec_sns .text{
width: 100%;
}
.sec_sns .snsName{
margin: 10px 0 3px;
text-align: center;
}
.sec_other .detail a{
width: 32%;
}
.sec_other .detail li:nth-of-type(n+3){
margin-top: 0;
}
}

/*
@media screen and (min-width: 900px){
main{
padding-top: 200px;
}
header .headerInner{
max-width: 900px;
}
header .headerInner nav.scroll{
margin: -40px 0 0 -40px;
padding: 0;
}
header .headerInner_c{
width: 100%;
justify-content: flex-start;
align-items: center;
margin: 0;
padding: 0;
}
header .headerInner nav.scroll .headerInner_c{
justify-content: space-between;
max-width: 800px;
margin: 0 auto;
padding: 10px 50px;
}
header .headerInner nav.scroll .logo{
width: 80px;
}
header .headerInner .globalNav_pc{
display: flex;
align-items: center;
margin-left: -30px;
padding: 10px 30px 10px 50px;
background: #0B1334;
border-radius: 50px;
color: #fff;
font-size: 2rem;
font-weight: bold;
transition: .5s;
}
header .headerInner nav.scroll .globalNav_pc{
padding: 0;
background: none;
font-size: 1.5rem;
}
header .headerInner .globalNav_pc li:nth-of-type(n+2){
margin-left: 15px;
}
header .headerInner .globalNav_pc .share{
display: none;
}
header .headerInner nav.scroll .globalNav_pc .share{
display: block;
margin-left: 20px;
}
header .update{
font-size: 1.5rem;
}
header .update .tag{
padding: 0 20px;
}
header .update .scroll .text{
margin-right: 30px;
}
section:nth-of-type(n+2){
margin-top: 80px;
}
.sec_about .aboutInner{
display: flex;
align-items: center;
}
.sec_about .aboutInner .intro{
width: 230px;
margin: 0 20px 0 0;
}
.sec_update .updateBox{
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
}
.sec_update ul li{
margin: 0;
}
.sec_update ul li .info{
margin-bottom: 0;
}
.sec_sns ul{
width: 100%;
display: flex;
justify-content: center;
margin: 0;
}
.sec_sns .snsBox{
width: 25%;
display: block;
text-align: center;
}
.sec_sns .snsBox:nth-of-type(n+2){
margin: 0 0 0 30px;
}
.sec_sns .snsBox .icon i{
margin-right: 0;
}
.sec_sns .text{
width: 100%;
}
.sec_sns .snsName{
margin: 10px 0 3px;
text-align: center;
}
.sec_other .detail a{
width: 32%;
}
.sec_other .detail li:nth-of-type(n+3){
margin-top: 0;
}
}

*/