@charset "UTF-8";

/*--------------------------------
reset
--------------------------------*/
html,body,div,p,img,iframe,a,span,blockquote,q,address,cite,
pre,code,em,small,strong,b,i,
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer,time,
h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,
table,tbody,thead,tfoot,th,tr,td,
form,fieldset,legend,label,select,input,textarea,button{
    margin: 0;
    padding: 0;
    border: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: baseline;
}
header,article,section,nav,figure,figcaption,hgroup,menu,aside,footer{
    display: block;
}
ul li{
    list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 500;
}
body{
    line-height: 1;
}
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
select,option,input:not([type=checkbox]):not([type=radio]),textarea,button{
    font: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}
blockquote::before,blockquote::after,q::before,q::after{
    content: '';
    content: none;
}
[type=submit],[type=button],[type=reset],[type=file],button{
    cursor: pointer;
}
:focus{
    outline: none;
}

/*--------------------------------
base
--------------------------------*/
html,body,.wrap{
    height: 100%;
}
body{
    margin: auto;
    max-width: 768px;
    background: #b12f64;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
}
h2,h3,h4,h5,h6{
    line-height: 1.3;
    font-weight: bold;
}
img{
    max-width: 100%;
    height: auto;
}
a{
	text-decoration: underline;
	color: black;
}
.h2-box{
    margin: 0 8px;
    text-align: center;
}
.h2{
    text-shadow: -3px -3px 0px #1a1a1a, -3px -2px 0px #1a1a1a, -3px -1px 0px #1a1a1a, -3px 0px 0px #1a1a1a, -3px 1px 0px #1a1a1a, -3px 2px 0px #1a1a1a, -3px 3px 0px #1a1a1a, -2px -3px 0px #1a1a1a, -2px 3px 0px #1a1a1a, -1px -3px 0px #1a1a1a, -1px 3px 0px #1a1a1a, 0px -3px 0px #1a1a1a, 0px 3px 0px #1a1a1a, 1px -3px 0px #1a1a1a, 1px 3px 0px #1a1a1a, 2px -3px 0px #1a1a1a, 2px 3px 0px #1a1a1a, 3px -3px 0px #1a1a1a, 3px -2px 0px #1a1a1a, 3px -1px 0px #1a1a1a, 3px 0px 0px #1a1a1a, 3px 1px 0px #1a1a1a, 3px 2px 0px #1a1a1a, 3px 3px 0px #1a1a1a;
    font-size: 28px;
    font-weight: bold;
    color: white;
}
.contents .h2{
    text-align: center;
}
.hero .inner::after,
.contents .item:last-child::after,
.contents .item.pr-item .h3::before,
.contents .item .balloon::before,
.contents .item .balloon::after{
    margin: auto;
    content: "";
    position: absolute;
}

/*--------------------------------
contents
--------------------------------*/
.hero{
    background: #ffffe6;
    position: relative;
}
.hero .pr{
    display: inline-block;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 9999;
    font-size: 12px;
    color: white;
}
.hero .inner{
    margin-bottom: -16%;
    position: relative;
    line-height: 0;
}
.hero .inner::after{
	width: 100%;
	height: 10px;
	background: linear-gradient(to bottom, rgba(255,255,228,0) 0%,rgba(255,255,228,1) 100%);
	left: 0;
	bottom: 0;
}
.about{
    background: #ffffe4;
}
.about .item{
	margin: 0 16px 8px;
}
.contents{
    padding: 0 0 16px;
}
.contents .main-list{
    overflow-x: scroll;
    position: relative;
}
.contents .main-list-inner{
    padding: 8px 0 0 0;
    display: flex;
    position: relative;
}
.contents.first .main-list-inner {
    padding: 80px 0 0 0;
}
.contents .item{
    margin: 0 0 0 16px;
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    background: white;
    border: solid 4px #1a1a1a;
    border-radius: 16px;
    position: relative;
}
.contents .item:last-child::after{
	width: 20px;
	height: 100%;
	top: 0;
	right: -20px;
}
.contents .item .h3{
    padding: 8px;
    display: flex;
    background: #ff4c95;
    border-radius: 12px 12px 0 0;
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: white;
}
.contents .item .h3 span{
    display: block;
}
.contents .item .h3 .title{
    flex: 1;
}
.contents .banner .inner{
	margin: 0;
	width: 100%;
	display: block;
	line-height: 0;
	text-align: center;
}
.contents .banner .inner a{
	display: block;
}
.contents .banner .inner img,
.contents .banner .inner video{
    width: 100%;
    max-width: inherit;
    display: inline-block;
    object-fit: contain;
    line-height: 0;
}
.contents .item .btn-balloon{
    margin: 8px 8px 17px;
}
.contents .item .balloon{
    padding: 6px 16px;
    min-height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px #ff4c95;
    border-radius: 100px;
    position: relative;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
    color: #1a1a1a;
}
.contents .item .balloon::before,
.contents .item .balloon::after{
	width: 0;
	left: 0;
	right: 0;
}
.contents .item .balloon::before{
	border: solid 8px transparent;
	border-top: solid 12px #ff4c95;
	bottom: -20px;
}
.contents .item .balloon::after{
	border: solid 8px transparent;
	border-top: solid 12px #ffffff;
	bottom: -19px;
}
.contents .balloon .strong{
	font-weight: bold;
	color: #ff4c95;
}
.btn-box{
    margin: 14px 8px;
    text-align: center;
}
.btn{
    margin: 0 32px;
    padding: 19px 8px;
    display: block;
    background: linear-gradient(to bottom, rgb(80 213 80) 0%, rgb(15 136 15) 100%);
    border: solid 3px #1a1a1a;
    border-radius: 12px;
    position: relative;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
}
.btn.store-btn,
.contents.ua_a .btn.store-btn,
.contents .item.pr-item .btn.store-btn{
    margin: 0 32px;
    padding: 0;
    background: none;
    border: none;
}
.contents.ua_a .btn{
    padding: 12px 8px;
    border-radius: 8px;
}
.contents .item.pr-item{
    margin: 4px 4px 4px 20px;
    border-color: #fde418;
    outline: solid 4px #000;
}
.contents .item.pr-item .h3{
    padding: 4px 8px 8px 90px;
    background: #fde418;
    position: relative;
    color: #1a1a1a;
}
.contents .item.pr-item .h3::before{
    width: 120px;
    height: 90px;
    background: url(../images/pr-balloon.webp?251029) no-repeat center / contain;
    top: -34px;
    left: -24px;
}
.contents .item.pr-item .btn-box{
    margin: 12px 8px;
}
.contents .item.pr-item .btn{
    background: linear-gradient(to bottom, rgba(255, 98, 174, 1) 0%, rgba(249, 31, 117, 1) 100%);
}
.section-banner{
    margin: 0;
    padding: 0;
}
.section-banner .banner-link{
    margin: 0 16px 24px;
    display: block;
    border: solid 4px #31b031;
    border-radius: 20px;
    box-shadow: 0 8px #165b16;
    overflow: hidden;
    line-height: 0;
}
.contents.info{
    margin-bottom: 16px;
    padding: 32px 0 0;
    background: url(../images/heading-woman-L.webp?251029) no-repeat left -8px top / 24%, url(../images/heading-woman-R.webp?251029) no-repeat right -8px top / 24%;
}
.info .h2-box{
    margin: 0 8px 32px;
}
.contents .item.info{
    margin: 0 16px;
    padding: 12px 12px 0;
    background: white;
    border-radius: 16px;
    overflow: hidden;
}
.contents.info .item .h3{
    margin-bottom: 8px;
    padding: 0 0 4px;
    background: none;
    border-bottom: solid 1px;
    font-size: 16px;
    font-weight: bold;
    color: #1a1a1a;
}
.contents .item.info .text{
    margin: 0 0 12px;
}
.footer{
    padding: 20px 10px;
    background: #1a1a1a;
    font-size: 14px;
}
.footer .ul{
    margin-bottom: 10px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.footer .li a{
    text-decoration: underline;
    color: white;
}
.footer .text{
    text-align: center;
    line-height: 1.4;
    color: white;
}
.footer.info{
    position: sticky;
    top: 100vh;
    width: 100%;
}

/*--------------------------------
tablet
--------------------------------*/
@media (min-width: 600px){
	body{
        font-size: 24px;
	}
	.h2-box{
        margin: 0 24px;
    }
	.h2{
		text-shadow: -4px -4px 0px #1a1a1a,-4px -3px 0px #1a1a1a,-4px -2px 0px #1a1a1a,-4px -1px 0px #1a1a1a,-4px 0px 0px #1a1a1a,-4px 1px 0px #1a1a1a,-4px 2px 0px #1a1a1a,-4px 3px 0px #1a1a1a,-4px 4px 0px #1a1a1a,-3px -4px 0px #1a1a1a,-3px 4px 0px #1a1a1a,-2px -4px 0px #1a1a1a,-2px 4px 0px #1a1a1a,-1px -4px 0px #1a1a1a,-1px 4px 0px #1a1a1a,0px -4px 0px #1a1a1a,0px 4px 0px #1a1a1a,1px -4px 0px #1a1a1a,1px 4px 0px #1a1a1a,2px -4px 0px #1a1a1a,2px 4px 0px #1a1a1a,3px -4px 0px #1a1a1a,3px 4px 0px #1a1a1a,4px -4px 0px #1a1a1a,4px -3px 0px #1a1a1a,4px -2px 0px #1a1a1a,4px -1px 0px #1a1a1a,4px 0px 0px #1a1a1a,4px 1px 0px #1a1a1a,4px 2px 0px #1a1a1a,4px 3px 0px #1a1a1a,4px 4px 0px #1a1a1a;
		font-size: 48px;
	}
	.hero .inner::after{
		height: 20px;
	}
    .hero .pr{
		top: 12px;
		right: 16px;
		font-size: 20px;
	}
	.about .item {
        margin: 0 32px 16px;
	}
    .contents .main-list-inner{
        padding: 16px 0 0 0;
    }
	.contents.first .main-list-inner{
        padding: 160px 0 0 0;
	}
    .contents .item{
        margin: 0 0 0 32px;
        flex: 0 0 490px;
        border: solid 8px #1a1a1a;
        border-radius: 32px;
    }
    .contents .item .h3{
        padding: 16px;
        border-radius: 24px 24px 0 0;
        font-size: 32px;
    }
    .btn-box{
        margin: 28px 8px;
    }
    .btn{
        margin: 0 64px;
        padding: 33px 16px;
        border: solid 6px #1a1a1a;
        border-radius: 24px;
        font-size: 34px;
    }
	.btn.store-btn,
    .contents.ua_a .btn.store-btn,
    .contents .item.pr-item .btn.store-btn{
        margin: 0 64px;
        padding: 0;
        background: none;
        border: none;
	}
    .contents.ua_a .btn{
        padding: 20px 16px;
        border-radius: 16px;
    }
	.contents{
		padding: 0 0 32px;
	}
    .contents .item.pr-item{
        margin: 8px 8px 8px 40px;
        outline: solid 8px #000;
    }
    .contents .item.pr-item .h3{
        padding: 12px 16px 16px 180px;
    }
    .contents .item.pr-item .h3::before{
        width: 228px;
        height: 144px;
        top: -53px;
        left: -42px;
    }
    .contents .item.pr-item .btn-box{
        margin: 24px 8px;
    }
    .section-banner .banner-link{
        margin: 0 32px 48px;
        border: solid 8px #31b031;
        border-radius: 40px;
        box-shadow: 0 16px #165b16;
    }
    .contents.info{
        padding: 64px 0 0;
        margin-bottom: 32px;
    }
    .info .h2-box{
        margin: 0 16px 64px;
    }
    .contents .item.info{
        margin: 0 32px;
        padding: 24px 24px 0;
        border-radius: 32px;
    }
    .contents .item.info .text{
        margin: 0 0 32px;
    }
    .contents.info .item .h3{
        margin-bottom: 12px;
        padding: 0 0 8px;
        border-bottom: solid 2px;
        font-size: 24px;
    }
    .contents .item.info .text{
        margin: 0 0 32px;
    }
	.contents .item .btn-balloon {
        margin: 16px 16px 33px;
    }
	.contents .item .balloon {
        padding: 12px 16px;
        min-height: 76px;
        border: solid 2px #ff4c95;
        font-size: 20px;
        line-height: 1.3;
    }
	.contents .item .balloon::before{
        border: solid 16px transparent;
        border-top: solid 24px #fb4e84;
        bottom: -40px;
    }
	.contents .item .balloon::after{
		border: solid 16px transparent;
		border-top: solid 24px #ffffff;
		bottom: -38px;
	}
	.contents .item:last-child::after {
        width: 40px;
        right: -40px;
	}
    .footer{
        padding: 40px 20px;
        font-size: 20px;
    }
	.footer .ul{
		margin-bottom: 20px;
	}
}
@media (min-width: 768px){
	body{
		font-size: 28px;
	}
    .h2{
        font-size: 58px;
    }
    .hero .pr{
        font-size: 24px;
    }
    .contents .item .h3{
        font-size: 40px;
    }
	.contents .item {
        flex: 0 0 550px;
	}
	.contents .item .balloon {
        font-size: 22px;
	}
    .btn{
        padding: 41px 16px;
        font-size: 40px;
    }
    .contents.ua_a .btn{
        padding: 24px 16px;
    }
    .btn.store-btn,
    .contents.ua_a .btn.store-btn,
    .contents .item.pr-item .btn.store-btn{
        margin: 0 64px;
        padding: 0;
        background: none;
        border: none;
    }
	.contents.info .item .h3 {
        font-size: 28px;
	}
    .footer{
        font-size: 24px;
    }
}