@charset "utf-8";
/* CSS Document */

.hero {
  /* 例: Bulmaの.heroクラスの一般的なスタイル */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.5rem;
  background-color: #f5f5f5; /* ここはBulmaのデフォルト色を参考に変更 */
}

/* hero-1クラスのカスタムスタイル */
.hero-1 {
  display: flex; /* .heroのスタイル */
  align-items: center; /* .heroのスタイル */
  justify-content: center; /* .heroのスタイル */
  padding: 1rem 1.5rem; /* .heroのスタイル */
  background-color: #f5f5f5; /* .heroのスタイル */
  background-size: cover;
  background-position: center;
}
.hero-body{
padding:5rem 1.5rem;

}
 .button-container {
      display: flex;
      flex-direction: column; /* 縦に並べるため */
      gap: 16px; /* ボタン間のスペース */
    }


	.main-button{
	text-align: left;
	 display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
	}

    .button-text {
      margin-right: auto; /* アイコンを右端に寄せるため */
	  word-break: break-all;
	  white-space: normal;
	  /*font-size:.85rem;*/
    }

    .icon {
      margin-left: 8px; /* アイコンとテキストの間にスペースを追加 */
    }
	.flex-container {
            display: flex;
            justify-content: space-between;
        }
	.content-nav {
      display: flex;
      justify-content: space-around;
      padding: 0.5rem 1rem;
      background-color: #f5f5f5;
    }
    .content-nav-item {
      position: relative;
    }
    .content-nav-item.is-active::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: -10px;
      height: 3px;
      width: 100%;
      background-color: #3273dc;
    }