/*======================
base
=======================*/
html{
height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
font-size: 62.5%; /*-- ベースのフォントサイズを10pxに指定 各要素のフォントサイズ指定はremで --*/
overflow: hidden;
}

body{
font-family: 'M PLUS 1p', sans-serif;
font-size: 1.4em; /*-- bodyのフォントサイズを14pxに指定 --*/
font-weight: 300;
color: #222525;
display: flex; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
flex-direction: column; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
/*height: 100%; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
-webkit-text-size-adjust: 100%;/*-- iOSのSafariで意図せずフォントサイズが大きくなるのを防ぐ --*/
background: #FFFFFE;
user-select: none;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

header, footer {
flex: 0 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

.contents {
/*flex: 1 0 auto; /*-- フッターを最下部に固定するための指定 ※IE10以上 --*/
}

header {
display: flex;
justify-content: center;
padding: 1em 0;
}

footer {
text-align: center;
font-size: 1.1rem;
padding: 1em 0;
background: #eaddcf;
}

.contents {
background: #f8f5f2;
}

.page-title {
font-family: 'Hina Mincho', serif;
writing-mode: vertical-rl;
font-size: 2.0rem;
letter-spacing: -.15em;
}

.page-lead {
text-align: center;
font-size: 1.4rem;
line-height: 1.6em;
margin: 4em auto 0;
width: 80%;
text-align: left;
}

.page-lead br {
display: none;
}

.applist {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 3em auto 0;
gap: 3em;
}

.applist-item {
display: flex;
flex-direction: column;
width: calc(100% / 2 - 1.5em);
}

.applist-item__title {
text-align: center;
font-size: 1.4rem;
margin: 1em 0 0;
font-weight: 500;
}

.applist-item__thumb-wrapper {
width: 100%;
aspect-ratio: 1/1;
background: #CCC;
overflow: hidden;
position: relative;
}

.applist-item__thumb {
width: auto;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.applist-item__summary {
font-size: 1.3rem;
margin: 1em 0;
line-height: 1.6em;
}

.applist-item__btn {
display: flex;
flex-wrap: wrap;
gap: .5em;
margin: auto 0 0;
}

.btn {
display: block;
width: 100%;
font-size: 1.2rem;
font-weight: 500;
text-align: center;
background: #232946;
padding: .5em 0;
color: #FFFFFE;
border-radius: 100vw;
text-decoration: none;
}

.btn:link,
.btn:visited,
.donation_btn:link,
.donation_btn:visited {
background: #232946;
}

.btn:hover,
.btn:active,
.donation_btn:hover,
.donation_btn:active {
background: #232946;
opacity: .7;
}

.applist-item__type {
margin: .5em 0 0;
display: flex;
flex-wrap: wrap;
gap: .5em;
}

.type-list__item {
display: inline-block;
font-size: 1.1rem;
font-weight: 500;
padding: .2em .5em;
color: #716040;
border: solid 1px #716040;
}


.donation {
padding: 2em;
background: #f5eee7;
text-align: center;
margin: 3em 0 0;
}

.donation_btn {
display: inline-block;
font-size: 1.2rem;
font-weight: 500;
text-align: center;
background: #232946;
padding: .8em 2em;
color: #FFFFFE;
border-radius: 100vw;
text-decoration: none;
}


@media screen and (min-width: 600px) {
/*-- min-width: 600px //--*/

.page-title {
font-size: 2.4rem;
}

.page-lead {
font-size: 1.6rem;
}

.applist {
width: 90%;
}

.applist-item {
width: calc(100% / 3 - 2em);
}

.applist-item__title {
font-size: 2.0rem;
}

.applist-item__summary {
font-size: 1.4rem;
}


/*--// min-width: 600px --*/
}

@media screen and (min-width: 1025px) {
/*-- min-width: 1025px //--*/

.page-lead {
max-width: 960px;
text-align: center;
}

.page-lead br {
display: block;
}

.applist {
max-width: 960px;
gap: 4em;
}

.applist-item {
width: calc(100% / 4 - 3em);
}

.btn {
width: calc(50% - .5em);
}

/*--// min-width: 1025px --*/
}