@charset "UTF-8";

.page_ttl{background-color:#814994;}
.top_copy{font-size:30px;line-height:1.4;padding-bottom:30px;padding-top:60px;color:#251e1c;}
.top_img_box{padding-bottom:60px;position:relative;}
.top_img_box::after{content:"";display:block;height:16px;width:100%;background:#e5e4e4;position:absolute;bottom:140px;z-index:-1;}
.top_img_box .img_box{}
.top_img_box .txt{font-size:14px;line-height:1.7;color:#251e1c;padding-top:20px;}
.btn_list{padding:0 30px 70px;max-width:960px;margin:0 auto;}
.btn_list ul{display:flex;flex-wrap:wrap;justify-content:center;}
.btn_list ul li{width:calc((100% - 64px)/3);list-style:none;margin-right:32px;margin-bottom:24px;}
.btn_list ul li:nth-of-type(4),
.btn_list ul li:nth-of-type(5),
.btn_list ul li:nth-of-type(9),
.btn_list ul li:nth-of-type(10){width:calc((100% - 32px)/2);;text-align:right;}
.btn_list ul li:nth-of-type(5),
.btn_list ul li:nth-of-type(10){text-align:left;}
.btn_list ul li:nth-of-type(3),
.btn_list ul li:nth-of-type(5),
.btn_list ul li:nth-of-type(8),
.btn_list ul li:nth-of-type(10),
.btn_list ul li:nth-of-type(11){margin-right:0;}
.btn_list ul li a{display:inline-block;width:278px;height:125px;position:relative;background:#5798d4;text-align:center;box-shadow:3px 3px 3px rgba(0,0,0,0.2);border-radius:10px;}
.btn_list ul li a .num{font-size:36px;font-weight:400;color:#050000;position:absolute;top:-7px;left:0;width:50px;text-align:center;}
.btn_list ul li a time{font-size:12px;font-weight:500;color:#050000;position:absolute;top:5px;right:15px;}
.btn_list ul li a .txt{font-size:18px;line-height:1.4;font-weight:500;color:#FFF;padding-top:28px;}
.btn_list ul li a .txt2{font-size:14px;color:#FFF;line-height:18px;font-weight:500;padding-top:2px;}
.btn_list ul li:nth-of-type(1) a{background:#5798d4;}
.btn_list ul li:nth-of-type(2) a{background:#dc9417;}
.btn_list ul li:nth-of-type(3) a{background:#a07a51;}
.btn_list ul li:nth-of-type(4) a{background:#d27497;}
.btn_list ul li:nth-of-type(5) a{background:#7db340;}
.btn_list ul li:nth-of-type(6) a{background:#4aa7b7;}
.btn_list ul li:nth-of-type(7) a{background:#81bce0;}
.btn_list ul li:nth-of-type(8) a{background:#9e9e9f;}
.btn_list ul li:nth-of-type(9) a{background:#82b53f;}
.btn_list ul li:nth-of-type(10) a{background:#ce901f;}
.btn_list ul li:nth-of-type(11) a{background:#b49c6f;}

@media only screen and (min-width: 641px) {
  .btn_list ul li a{transition:background 0.3s;}
  .btn_list ul li:nth-of-type(1) a:hover{background:#65b7ec;}
  .btn_list ul li:nth-of-type(2) a:hover{background:#d16c15;}
  .btn_list ul li:nth-of-type(3) a:hover{background:#c08f57;}
  .btn_list ul li:nth-of-type(4) a:hover{background:#dc9bad;}
  .btn_list ul li:nth-of-type(5) a:hover{background:#9fc238;}
  .btn_list ul li:nth-of-type(6) a:hover{background:#84c0be;}
  .btn_list ul li:nth-of-type(7) a:hover{background:#c6e2f8;}
  .btn_list ul li:nth-of-type(8) a:hover{background:#cfc8c3;}
  .btn_list ul li:nth-of-type(9) a:hover{background:#b4cc3a;}
  .btn_list ul li:nth-of-type(10) a:hover{background:#e4ab47;}
  .btn_list ul li:nth-of-type(11) a:hover{background:#e1d0b4;}
}

@media only screen and (max-width: 640px) {
  .top_copy{font-size:25px;line-height:35px;font-weight:500;box-sizing:border-box;padding:30px 10px;letter-spacing:-0.02em;}
  .top_copy span{display:inline-block;} 
  .top_img_box{padding-bottom:15px;}
  .top_img_box::after{bottom:auto;top:18%;}
  .top_img_box .img_box img{width:90%;height:auto;}
  .top_img_box .txt{font-size:12px;line-height:1.6666;padding-top:15px;box-sizing:border-box;padding:15px 10px 0;text-align:left;}
  .btn_list{padding:0 30px 40px;width:100%;} 
  .btn_list ul{display:block;}
  .btn_list ul li{width:100%;margin-right:0;margin-bottom:15px;}
  .btn_list ul li:nth-of-type(4),
  .btn_list ul li:nth-of-type(5),
  .btn_list ul li:nth-of-type(9),
  .btn_list ul li:nth-of-type(10){width:100%;text-align:center;}
  .btn_list ul li a{width:100%;height:87px;box-sizing:border-box;padding:0 20px;}
  .btn_list ul li a .num{font-size:22px;left:3px;top:0px;text-align:center;width:30px;}
  .btn_list ul li a time{font-size:11px;right:10px;}
  .btn_list ul li a .txt{font-size:15px;padding-top:29px;}
  .btn_list ul li:nth-of-type(9) a .txt{padding-top:15px;}
  .btn_list ul li a .txt2{font-size:11px;padding-top:3px;}
}

@media only screen and (max-width: 374px) {
  .top_copy{font-size:20px;}
  .btn_list{padding:0 10px 40px;} 	
  .btn_list ul li a{padding:0;}
}