@charset "utf-8";
/* CSS Document */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap'); */



/* ==============================================
setting
============================================== */

.arealist * {
margin:0;
padding:0;
}
body{
margin: 0;
}
.arealist h1,.arealist h2,.arealist h3,.arealist h4,.arealist h5,.arealist p,.arealist li {
font-family: 'Roboto',"メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", YuGothic, "游ゴシック", sans-serif;
font-weight: 500;
letter-spacing: 0.5px;
margin:0;
padding:0;
color:#231815;
}
.arealist h1,.arealist h2,.arealist h3,.arealist h4,.arealist h5,.arealist div,.arealist ul,.arealist li,.arealist p,.arealist a,.arealist strong,.arealist span {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.arealist img {
border:none;
vertical-align:middle;
}
.arealist a {
/* text-decoration: none; */
-webkit-transition: 0.2s ease-out;
transition: 0.2s ease-out;
color: #1597FC;
}
.arealist a:hover{
opacity: 0.7;
}
.arealist ul:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html .arealist ul { display:inline-block; }
*:first-child+html .arealist ul { display:inline-block; }



.arealist .sp{
display:none!important;
}

/* ==============================================
#list
============================================== */
.arealist{
  background: #f3f3f3;
  height: 100vh;
  padding: 100px 0;
}
.arealist .container{
    width: 90%;
    margin: 0 auto;
    max-width: 960px;
}
#list2000 .container{
    background-color: #3888e8;
}
#list1500 .container{
    background-color: #35bc22;
}
#list1000 .container{
    background-color: #ea7236;
}
.arealist .container .list{
    padding: 30px 20px;   
}
.arealist .list p {
    color: #fff;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 20px;
}
.arealist .list p span {
    font-size: 36px;
    padding: 10px;
}
.arealist ul {
    list-style: '・';
    text-decoration: underline;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: column;
    background-color: #fff;
    margin: 10px;
    padding: 40px 30px;
}
#list2000.arealist ul {
    grid-template-rows: repeat(12, max-content);
}
#list1500.arealist ul {
    grid-template-rows: repeat(14, max-content);
}
#list1000.arealist ul {
    grid-template-rows: repeat(15, max-content);
}
.arealist li{
    margin: 3px 10px;
}

@media only screen and (max-width:980px){
    .arealist{ padding: 0; }
    .arealist .container{
        width: 100%;
        max-width: unset;
    }
    
    .arealist .list p {
        font-size: 40px;
    }
    .arealist .list p span {
        font-size: 60px;
    }
    .arealist ul {
        grid-template-columns: 100%;
        font-size: 38px;
    }
    #list2000.arealist ul {
        grid-template-rows: repeat(24, max-content);
    }
    #list1500.arealist ul {
        grid-template-rows: repeat(28, max-content);
    }
    #list1000.arealist ul {
        grid-template-rows: repeat(30, max-content);
    }
    .arealist li{
        margin: 6px 20px;
    }
    
}