@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 {
	height: 100%;
}
body{
    margin: auto;
    padding: 0;
    max-width: 768px;
    height: 100%;
    background: #e6e6e6;
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 16px;
    line-height: 1.4;
}
h2,h3,h4,h5,h6{
    line-height: 1.3;
    font-weight: bold;
}
a{
    color: #ffffff;
}
img{
    max-width: 100%;
    height: auto;
}
.wrap{
    padding: 0 8px;
}
.h2 {
    margin-left: 38px;
    margin-bottom: 8px;
    padding: 8px 16px 8px 4px;
    background: url(../images/heading-peace.webp) no-repeat right center / 10px, #eb6274;
    position: relative;
    font-size: 20px;
    color: white;
}
.h2::before{
    width: 40px;
    height: 42px;
    background: url(../images/heading-icon.webp) no-repeat right center / contain;
    top: 0;
    left: -40px;
}
.h2::after {
    width: 20px;
    height: 100%;
    background: #eb6274;
    top: 0;
    left: -12px;
    z-index: -1;
}
.ani{
	opacity: 0;
	transition: .5s;
	position: relative;
	top: 16px;
}
.ani-active{
	opacity: 1;
	top: 0;
}
.header::after,
.h2::before,
.h2::after,
.menu .li .btn.active::after,
.ranking .item.last::after,
.list .item::before,
.list .item::after,
.list .heading .text::before,
.list .heading .text::after,
.list .icon-tag .tag li::after,
.list .btn-box .btn::after,
.list .btn-box .btn .inner::before,
.list .btn-box .btn .inner::after{
    margin: auto;
    content: "";
    position: absolute;
}

/*--------------------------------
contents
--------------------------------*/
.header {
    padding: 8px 0;
    background: white;
    text-align: center;
    position: relative;
}
.header::after{
    width: 16px;
    height: 14px;
    background: url(../images/header-peace.webp) no-repeat center / contain;
    left: 8px;
    bottom: -13px;
}
.header img {
    width: 252px;
    display: inline-block;
}
.hero{
    margin-bottom: 8px;
}
.hero img{
    margin-bottom: 3px;
}
.hero .text{
    padding: 0 8px;
    text-align: center;
    font-size: 12px;
}
.menu {
    padding: 0 4px 8px;
}
.menu .ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.menu .ul .li{
    margin-bottom: 12px;
    width: calc(50% - 6px);
}
.menu .ul .li:nth-child(odd){
	margin-right: 6px;
}
.menu .ul .li:nth-child(odd):last-child{
	margin-right: 0;
}
.menu .ul .li:nth-child(even){
	margin-left: 6px;
}
.menu .li .btn {
    height: 96px;
    display: block;
    border-radius: 16px;
    box-shadow: 0 0 4px black;
    position: relative;
    overflow: hidden;
}
.menu .li:nth-child(1) .btn{
    background: url(../images/menu-bg1.webp) no-repeat center / cover;
}
.menu .li:nth-child(2) .btn{
    background: url(../images/menu-bg2.webp) no-repeat center / cover;
}
.menu .li:nth-child(3) .btn{
    background: url(../images/menu-bg3.webp) no-repeat center / cover;
}
.menu .li:nth-child(4) .btn{
    background: url(../images/menu-bg4.webp) no-repeat center / cover;
}
.menu .li .btn.active{
    box-shadow: none;
    position: relative;
    top: 4px;
    pointer-events: none;
}
.menu .li .btn.active::after{
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.menu .btn .text{
    padding: 4px 0;
    display: block;
    background: #323232;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-size: 14px;
    color: white;
}
.menu .text .vhr{
	margin: 0 2px;
}
.ranking{
	margin-bottom: 16px;
}
.ranking .item-wrap{
	position: relative;
}
.ranking .item-wrap .scroll-hand{
    margin: auto;
    width: 120px;
    height: 100px;
    display: none;
    flex-direction: column;
    background: rgba(0,0,0,0.5);
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
.ranking .item-wrap .scroll-hand .img-box{
    flex: 1;
    position: relative;
}
.ranking .item-wrap .scroll-hand img{
    margin: auto;
    width: 60px;
    animation: hand_animation 3s ease-in-out infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(65px);
    opacity: 0;
}
@keyframes hand_animation{
    0%{
        transform: translateX(65px);
        opacity: 0;
    }
    50%{
        transform: translateX(32px);
        opacity: 1;
    }
    100%{
        transform: translateX(0);
        opacity: 0;
    }
}
.ranking .item-wrap .scroll-hand .text{
    padding: 0 10px 10px;
    text-align: center;
    color: white;
}
.ranking .item-box{
    padding: 4px 0;
    display: flex;
    overflow-x: scroll;
    position: relative;
}
.ranking .item{
    margin: 0 0 0 12px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
    border-radius: 16px;
    box-shadow: 0 0 4px black;
}
.ranking .item:first-child{
	margin-left: 4px;
}
.ranking .item:last-child{
	margin-right: 4px;
}
.ranking .item .rank{
	margin-bottom: 8px;
	padding: 24px 0 1px;
	background: url(../images/crown-pink.webp) no-repeat center / contain;
	text-align: center;
	font-size: 14px;
	color: white;
}
.ranking .item:nth-child(1) .rank{
	background: url(../images/crown-gold.webp) no-repeat center / contain;
}
.ranking .item:nth-child(2) .rank{
	background: url(../images/crown-silver.webp) no-repeat center / contain;
}
.ranking .item:nth-child(3) .rank{
	background: url(../images/crown-bronze.webp) no-repeat center / contain;
}
.ranking .item .icon{
	width: 80px;
	border-radius: 16px;
	overflow: hidden;
}
.ranking .icon img{
	width: 100%;
}
.list .h2{
	margin-bottom: 3px;
}
.list > .text{
	text-align: center;
	font-size: 12px;
}
.list .item{
    margin: 16px 0 32px;
    background: #fff;
    position: relative;
}
.list .item::before,
.list .item::after{
    width: 16px;
    height: 14px;
}
.list .item::before{
    background: url(../images/article-top-peace.webp) no-repeat center / contain;
    top: -13px;
    left: 8px;
}
.list.info .item::before{
    background: url(../images/info-top-peace.webp) no-repeat center / contain;
}
.list .item::after{
    background: url(../images/article-btm-peace.webp) no-repeat center / contain;
    right: 8px;
    bottom: -14px;
}
.list .item .heading{
	margin-bottom: 2px;
	display: flex;
	border-bottom: solid 1px #e6e6e6;
}
.list .heading .h3,
.list .heading .text{
	padding: 8px;
	min-height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	text-align: center;
}
.list .heading .h3{
	padding: 12px 12px 12px 4px;
	background: #cce0ff;
	border-right: solid 1px #e6e6e6;
	font-size: 16px;
}
.list .heading .text{
	padding: 12px 8px;
	background: #ffccd3;
	position: relative;
	line-height: 1.2;
}
.list .heading .text::before{
    width: 14px;
    height: 16px;
    background: url(../images/subtitle-peace.webp) no-repeat center / contain;
    top: 0;
    left: -13px;
    bottom: 0;
}
.list .heading .text::after{
    width: 16px;
    height: 14px;
    background: url(../images/article-in-peace.webp) no-repeat center / contain;
    right: 8px;
    bottom: -2px;
}
.list .item .icon-tag{
	margin-bottom: 4px;
	padding: 0 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.list .icon-tag .icon{
	margin: 6px 8px 6px 0;
	width: 95px;
}
.list .icon-tag .icon img{
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
}
.list .icon-tag .tag{
	margin-top: 6px;
	flex: 1;
}
.list .icon-tag .tag li{
	margin: 0 16px 6px 0;
	padding: 4px 6px 4px 16px;
	display: inline-block;
	background: url(../images/tag-left.webp) no-repeat center left / 10px 29px, #eb6274;
	position: relative;
	font-size: 14px;
	color: white;
}
.list .icon-tag .tag li::after{
	width: 10px;
	height: 29px;
	background: url(../images/tag-right.webp) no-repeat center left / 10px 29px;
	top: 0;
	right: -10px;
	bottom: 0;
}
.list .icon-tag .tag li.strong{
	background: url(../images/tag-strong-left.webp) no-repeat center left / 10px 29px,url(../images/tag-strong-right.webp) no-repeat center right / 10px 29px, #507fcc;
}
.list .icon-tag .tag li.strong::after{
	background: url(../images/tag-strong-right.webp) no-repeat center left / 10px 29px;
}
.list .review {
    margin-bottom: 8px;
    padding: 0 8px;
    display: flex;
    justify-content: space-around;
}
.list .review .num,
.list .review .score{
	padding: 0 0 0 32px;
	line-height: 1;
}
.list .review .num{
	background: url(../images/review-num-icon.webp) no-repeat left center / 28px;
}
.list .review .score{
	background: url(../images/review-score-icon.webp) no-repeat left center / 28px;
}
.list .review .num .strong,
.list .review .score .strong{
	font-size: 28px;
}
.list .review .num .strong{
	color: #3b73cc;
}
.list .review .score .strong{
	color: #eb4b60;
}
.list .comment{
	padding: 0 8px 8px;
}
.list .comment strong{
	font-weight: normal;
	color: #ff3853;
}
.list .btn-box {
    padding: 8px 12px 20px;
}
.list .btn-box .btn{
	position: relative;
}
.list .btn-box .btn::after{
	height: 0;
	border: solid 10px transparent;
	border-left: solid 14px white;
	top: 0;
	right: 9px;
	bottom: 0;
}
.list .btn-box .btn .inner{
	padding: 16px 64px 16px 16px;
	display: block;
	background: #ed5fbe;
	box-shadow: 0 0 4px black;
	border-radius: 100px;
	overflow: hidden;
	position: relative;
	text-align: center;
	line-height: 1.3;
	font-size: 20px;
	font-weight: bold;
	color: white;
}
.list .btn-box .btn .inner::before{
	width: 50px;
	height: 100%;
	background: #60cc52;
	border-left: solid 2px #8b8b8b;
	top: 0;
	right: 0;
	bottom: 0;
}
.list .btn-box .btn .inner::after{
	width: 13px;
	height: 18px;
	background: url(../images/btn-peace.webp) no-repeat center / contain;
	top: 0;
	right: 50px;
	bottom: 0;
}
.list.info .item {
    margin: 20px 0 24px;
    padding: 8px;
}
.list.info .item .h3 {
	margin-top: 16px;
	margin-bottom: 8px;
	padding: 4px 4px 4px 8px;
	border-left: solid 4px #eb6274;
	font-size: 16px;
	color: #eb6274;
}
.list.info .item .h3.mtn{
	margin-top: 8px;
}
.list.info .item .text{
	margin-bottom: 8px;
}
.qr{
	margin-bottom: 20px;
	position: relative;
}
.qr .qr-box .qr-img{
	width: 18%;
	position: absolute;
	right: 7.6%;
	bottom: 6%;
}
.qr .qr-box .qr-img canvas{
	border: solid 4px white;
}
.qr .qr-box canvas{
	width: 100%;
}
.footer {
    padding: 16px 8px;
    background: #1a1a1a;
    position: sticky;
    top: 100vh;
    text-align: center;
    font-size: 14px;
    color: white;
}
.footer .ul{
	margin-bottom: 8px;
	display: flex;
	justify-content: space-around;
}
.footer .li{
    margin-bottom: 4px;
}
.footer .li a{
    text-decoration: underline;
}

/*--------------------------------
tablet
--------------------------------*/
@media (min-width: 600px){
	body{
		font-size: 24px;
	}
	.wrap{
		padding: 0 16px;
	}
	.h2 {
		margin-left: 76px;
		margin-bottom: 16px;
		padding: 16px 32px 16px 0;
		background: url(../images/heading-peace.webp) no-repeat right center / 19px, #eb6274;
		font-size: 32px;
	}
	.h2::before{
		width: 70px;
		height: 73px;
		left: -79px;
	}
	.h2::after {
		width: 40px;
		left: -30px;
	}
	.header {
		padding: 16px 0;
	}
	.header::after {
		width: 30px;
		height: 25px;
		left: 16px;
		bottom: -25px;
	}
	.header img {
		width: 433px;
	}
	.hero {
		margin-bottom: 16px;
	}
	.hero img {
		margin-bottom: 6px;
	}
	.hero .text {
		padding: 0 16px;
		font-size: 16px;
	}
	.menu {
		padding: 0 8px 16px;
	}
	.menu .ul .li {
		margin-bottom: 24px;
		width: calc(50% - 12px);
	}
	.menu .ul .li:nth-child(odd) {
		margin-right: 12px;
	}
	.menu .ul .li:nth-child(even) {
		margin-left: 12px;
	}
	.menu .li .btn {
		height: 150px;
		border-radius: 24px;
		box-shadow: 0 0 8px black;
	}
	.menu .li .btn.active{
	    top: 8px;
	}
	.menu .btn .text {
		font-size: 20px;
	}
	.ranking {
		margin-bottom: 32px;
	}
	.ranking .item-box {
		padding: 8px 0;
	}
	.ranking .item {
		margin: 0 0 0 24px;
		padding: 12px;
		border-radius: 24px;
		box-shadow: 0 0 8px black;
	}
	.ranking .item:first-child {
		margin-left: 8px;
	}
	.ranking .item:last-child {
		margin-right: 8px;
	}
	.ranking .item .rank {
		margin-bottom: 12px;
		padding: 44px 0 2px;
		font-size: 20px;
	}
	.ranking .item .icon {
		width: 120px;
		border-radius: 24px;
	}
	.ranking .item-wrap .scroll-hand {
		width: 200px;
		height: 160px;
		border-radius: 10px;
	}
	.ranking .item-wrap .scroll-hand img {
		width: 120px;
		transform: translateX(65px);
	}
	@keyframes hand_animation{
		0%{
			transform: translateX(65px);
			opacity: 0;
		}
		50%{
			transform: translateX(40px);
			opacity: 1;
		}
		100%{
			transform: translateX(15px);
			opacity: 0;
		}
	}
	.list .h2 {
		margin-bottom: 6px;
	}
	.list > .text {
		font-size: 16px;
	}
	.list .item {
		margin: 32px 0 64px;
	}
	.list .item::before,
	.list .item::after{
		width: 32px;
		height: 28px;
	}
	.list .item::before{
		top: -26px;
		left: 16px;
	}
	.list .item::after {
		right: 16px;
		bottom: -26px;
	}
	.list .item .heading {
		margin-bottom: 4px;
		border-bottom: solid 2px #e6e6e6;
	}
	.list .heading .h3 {
		padding: 24px 24px 24px 8px;
		border-right: solid 2px #e6e6e6;
		font-size: 24px;
	}
	.list .heading .text {
		padding: 24px 16px;
	}
	.list .heading .text::before {
		width: 28px;
		height: 32px;
		left: -27px;
	}
	.list .heading .text::after {
		width: 32px;
		height: 28px;
		right: 16px;
		bottom: -3px;
	}
	.list .item .icon-tag {
		margin-bottom: 8px;
		padding: 0 16px;
	}
	.list .icon-tag .icon {
		margin: 12px 16px 12px 0;
		width: 124px;
	}
	.list .icon-tag .tag {
		margin-top: 8px;
	}
	.list .icon-tag .tag li {
		margin: 0 23px 8px 0;
		padding: 4px 12px 4px 24px;
		background: url(../images/tag-left.webp) no-repeat center left / 15px 34px, #eb6274;
		font-size: 20px;
	}
	.list .icon-tag .tag li.strong {
		background: url(../images/tag-strong-left.webp) no-repeat center left / 15px 40px, url(../images/tag-strong-right.webp) no-repeat center right / 15px 40px, #507fcc;
	}
	.list .icon-tag .tag li::after {
		width: 15px;
		height: 34px;
		background: url(../images/tag-right.webp) no-repeat center left / 15px 34px;
		right: -15px;
	}
	.list .icon-tag .tag li.strong::after{
		background: url(../images/tag-strong-right.webp) no-repeat center left / 15px 34px;
	}
	.list .review {
		margin-bottom: 16px;
		padding: 0 16px;
	}
	.list .icon-tag .icon img {
		border-radius: 24px;
	}
	.list .review .num,
	.list .review .score{
		padding: 0 0 0 64px;
	}
	.list .review .num {
		background: url(../images/review-num-icon.webp) no-repeat left center / 50px;
	}
	.list .review .score {
		background: url(../images/review-score-icon.webp) no-repeat left center / 50px;
	}
	.list .review .num .strong,
	.list .review .score .strong {
		font-size: 46px;
	}
	.list .comment {
		margin-bottom: 16px;
		padding: 0 16px;
	}
	.list .btn-box {
		padding: 16px 24px 40px;
	}
	.list .btn-box .btn .inner {
		padding: 32px 128px 32px 32px;
		box-shadow: 0 0 8px black;
		border-radius: 200px;
		font-size: 32px;
	}
	.list .btn-box .btn .inner::before {
		width: 100px;
		border-left: solid 3px #8b8b8b;
	}
	.list .btn-box .btn .inner::after {
		width: 26px;
		height: 36px;
		right: 100px;
	}
	.list .btn-box .btn::after {
		border: solid 16px transparent;
		border-left: solid 26px white;
		right: 22px;
	}
	.list.info .item {
		margin: 40px 0 74px;
		padding: 16px;
	}
	.list.info .item .h3 {
		margin-top: 32px;
		margin-bottom: 16px;
		padding: 8px 8px 8px 16px;
		border-left: solid 8px #eb6274;
		font-size: 24px;
	}
	.list.info .item .text {
		margin-bottom: 16px;
	}
	.footer {
		padding: 32px 16px;
		font-size: 20px;
	}
	.footer .ul {
		margin-bottom: 16px;
	}
	.footer .li {
		margin-bottom: 8px;
	}
}
@media (min-width: 768px){
	body{
		font-size: 28px;
	}
	.h2{
		font-size: 36px;
	}
	.hero .text {
		font-size: 20px;
	}
	.menu .btn .text {
		font-size: 24px;
	}
	.ranking .item .rank {
		padding: 50px 0 2px;
		font-size: 24px;
	}
	.ranking .item .icon {
		width: 168px;
	}
	.list > .text {
		font-size: 24px;
	}
	.list .heading .h3 {
		font-size: 28px;
	}
	.list .icon-tag .tag li {
		font-size: 24px;
	}
	.list .review .num .strong,
	.list .review .score .strong {
		font-size: 52px;
	}
	.list .btn-box .btn .inner {
		font-size: 36px;
	}
	.list.info .item .h3 {
		font-size: 28px;
	}
	.footer {
		font-size: 24px;
	}
}