@charset "utf-8";
/*==========================
RISU算数 キャンペーンページ用CSS
==========================*/


 

.container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3列 */
      gap: 20px;
      width: 790px;           /* 固定幅 */
      margin: 0 auto;         /* 中央寄せ */
	margin-top: 30px;
	padding: 0px 15px;
    }

    .card {
      background: #f6feff;
      border: 4px solid #76c9d0;
      text-align: center;
      padding: 10px;
    }

    .image-box {
      height: 150px;
      background: #eef9fa;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.2rem;
      color: #00748d;
      margin-bottom: 10px;
    }

    .title {
      /*font-size: 1rem;*/
		font-size: 0.85rem;
      margin-bottom: 10px;
    }

    .buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .buttons button {
		font-size: 0.8rem;
		width: 45%;
      padding: 10px 20px;
      background: #92d600;
      color: #fff;
      /*font-weight: bold;*/
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }


.message01{
	font-size: 15px;
	color: #0c6980;
	font-weight: bold;
	text-align: center;
	margin-top: 30px;
}

.message-terms{
	font-size: 14px;
	color: #333333;
	font-weight: normal;
	text-align: center;
	margin: 12px 0px 50px 0px;
}




.risu-cta-message-terms{
	font-size: 14px;
	line-height: 1.7em;
	color: #333333;
	font-weight: normal;
	text-align: center;
	margin: 12px 0px 0px 0px;
}

.deadline-message{
font-size: 14px;
	color: #fc807c;;
	font-weight:bold;
	text-align: center;
	margin: 12px 0px 0px 0px;
}





button:disabled {
  background: #ccc;
  color: #666;
  cursor: not-allowed;
}






.buttons a {
  font-size: 0.8rem;
  width: 45%;
  padding: 10px 20px;
  background: #92d600;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  text-decoration: none; /* 下線を消す */
  display: inline-block;
}
.buttons a:hover {
  background: #7bb500; /* ホバー時の色変化 */
}












    @media (max-width: 790px) {
      .container {
        grid-template-columns: 1fr;
        width: 100%;
        padding: 0 10px;
      }
		
	 .image-box {
      height:auto;	
		
    }
}













/*CTA*/

 .cta-wrapper {
      display: inline-block;
      position: relative;
	 margin: 65px 0px 0px 0px;
	 width: 100%;
	 text-align: center;
    }

     .cta-button {
      display: inline-block;
      background-color: #fc807c;
      color: white;
      font-weight: bold;
      font-size: 1.6rem;
      padding: 1.9rem 3rem 1rem;
      border-radius: 9999px;
      box-shadow: 0 8px 0 #d26561;
  text-decoration: none;
  min-width: 600px;
  line-height: 1.4;
  text-align: center;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.cta-button:hover {
  background-color: #f45f5a;
  box-shadow: 0 8px 0 #b94b47;
}


    .cta-deadline {
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      background: white;
      color: #fc807c;
      padding: 0.4rem 1.2rem;
      font-size: 1rem;
      font-weight: bold;
      border: 2px solid #fc807c;
      border-radius: 9999px;
      white-space: nowrap;
    }

    .cta-main {
      display: flex;
      align-items: center; /* ★ 縦中央に揃える */
      justify-content: center;
      gap: 0.5em;
      font-size: 1.6rem;
      font-weight: bold;
    }

    .cta-arrow {
      font-size: 1.6rem;
      line-height: 1;
      margin-top: 0.1em;
    }

    .cta-note {
      display: block;
      font-size: 0.9rem;
      margin-top: 0.4em;
      font-weight: normal;
		text-align: center;
    }

    @media (max-width: 650px) {
      .cta-button {
        min-width: 95%;
        font-size: 1.2rem;
        padding: 1.3rem 1rem 1.0rem;
      }

      .cta-main {
        font-size: 1.0rem;
      }

      .cta-deadline {
        font-size: 0.8rem;
      }

      .cta-note {
        font-size: 0.7rem;
      }

      .cta-arrow {
        font-size: 1.0rem;
      }
    }




/* スマホの時だけ改行させるクラス */
.br-sp {
    display: none;
}

@media (max-width: 650px) {
    .br-sp {
        display: block;
    }
}