/* 書類ダウンロード */

.commn-inner{
  width: min(90%, 960px);
  margin: 50px auto 80px;
}

.download-btn-wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:40px;
}

.download-btn-wrap .existing-download-btn{
  max-width: 500px;
  background-image: linear-gradient(49deg, #5a5a5a, #080808);
  padding: 40px 35px 35px 35px;
  border-radius: 10px;
  transition: all .6s;
}

.download-btn-wrap .new-download-btn{
  max-width: 500px;
  background-image:linear-gradient(24deg, #c3f7ff, #64c0e6 58%);
  padding: 40px 35px 35px 35px;
  border-radius: 10px;
  transition: all .6s;
}

.download-btn-wrap .existing-download-btn:hover{
  opacity: 0.8;
}

.download-btn-wrap .new-download-btn:hover{
  opacity: 0.8;
}

.download-btn-wrap .existing-download-btn h3,.download-btn-wrap .new-download-btn h3{
  font-size: 25px;
  line-height: 1.8;
  color: #ffffff;
  font-weight: 600;
  padding-bottom: 10px;
  letter-spacing: 1.5px;
}

.download-btn-wrap .existing-download-btn p,.download-btn-wrap .new-download-btn p{
  font-size: 15px;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.6;
  padding-block-start: 10px;
}

.link_btn{
  display: grid;
  place-items: end;
  padding: 20px 0 0;
}

/* ボタンの基本スタイル */
.circle-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;          /* ボタンの幅 */
  height: 80px;         /* ボタンの高さ */
  border-radius: 50%;   /* 完全な丸にする */
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  color: #222222;       /* 矢印の色 */
  /* 動き（アニメーション）を滑らかにする設定 */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 矢印（SVG）のアニメーション設定 */
.circle-btn svg {
  transition: transform 0.3s ease;
}

/* 動き1：ホバー時（マウスを乗せた時） */
/* .circle-btn:hover {
  transform: translateY(-2px);
} */

/* 動き2：ホバー時に矢印だけ少し右に動かす（「進む」ニュアンスを強調） */
.existing-download-btn:hover .circle-btn svg,.new-download-btn:hover .circle-btn svg{
  transform: translateX(4px);
}

/* 動き3：アクティブ時（クリックした瞬間） */
/* .circle-btn:active {
  transform: translateY(1px);
} */


.sh_award {
  position: absolute;
  bottom: 10%;
  right: 5%;
  width: 300px;
  padding: 5px;
  background: #ffffff00;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  z-index: 10;
}

.app-btn-inner{
  max-width: 800px;
  margin: 0 auto 50px;
}


/*///////////////////////////////////////////////

for SmartPhone

///////////////////////////////////////////////*/
@media (max-width: 767px) {

.download-btn-wrap {
	grid-template-columns: 1fr;
	gap: 30px;
}

.download-btn-wrap .existing-download-btn
{
	padding: 40px 30px 35px 30px;
}

.circle-btn {
	width: 55px;
	height: 55px;
}

.download-btn-wrap .existing-download-btn, .download-btn-wrap .new-download-btn{
	padding: 20px 25px 25px;
}
.download-btn-wrap .existing-download-btn h3, .download-btn-wrap .new-download-btn h3 {
	font-size: 22px;
	padding-bottom: 0px;
	line-height: 1.6;
}

.download-btn-wrap .existing-download-btn p, .download-btn-wrap .new-download-btn p {
	font-size: 14px;
}

.link_btn {
	padding: 0px 0 0;
}

.commn-inner{
  margin: 0px auto 50px;
}

.app-btn-inner {
  margin: 0 auto 30px;
}

}