html, body {
  height: 100%;
}

body {
  background-color: #ffffff;
  font-family: -apple-system , BlinkMacSystemFont , 'Helvetica Neue' , '游ゴシック' , 'Yu Gothic' , '游ゴシック体' , YuGothic , Verdana , 'メイリオ' , Meiryo , sans-serif;
 /* GoogleChromeのバグ対策 */
  font-weight: 500;
  margin: 0.5rem 0;
}

.outerframe {
  min-height: 100%;
  position: relative;
}

.outerframe > .container {
  padding-bottom: 7.25rem;
  max-width: 60rem;
  margin: 0.6875rem auto 0rem auto;
  text-align: center;
}

/* ヘッダーのスタイル */
.outerframe .navbar {
  width: 100%;
  height: 2.875rem;
  background-color: #ffffff;
  border-top: 0.25rem solid #FF5F81;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outerframe .navbar .navbar-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 60rem;
}

.outerframe .navbar .navbar-brand {
  position: absolute;
  height: 2rem;
  left: 50%;
  bottom: 0rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.outerframe .navbar .navbar-brand img {
  width: 6.5rem;
  height: auto;
}

.outerframe .navbar .navbar-brand p {
  color: #333333;
  font-size: 0.3rem;
  margin: 0rem;
  text-decoration: none;
}

/* 新たに追加した.icon-areaに対するスタイル */
.outerframe .navbar .icon-area {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

/* 新たに追加した.search-iconに対するスタイル */
.navbar .search-icon {
  width: 2.125rem;
  height: 2.125rem;
  background: #ffffff;
  border-radius: 17px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}

.navbar .search-icon img {
  width: 70%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* ヘッダーのアイコン */
.outerframe .navbar .user-icon {
  position: relative;
  width: 2.125rem;
  height: 2.125rem;
  background: #D9D9D9;
  border-radius: 17px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .user-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* フッターのスタイル */
.outerframe > footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 7.25rem;
  text-align: center;
  background-color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outerframe > footer .footer-container {
  width: 100%;
  height: 100%;
  max-width: 60rem;
}

.outerframe > footer img {
  width: 6.5rem;
  height: auto;
  margin-top: 0.75rem;
}

.outerframe > footer p {
  color: #ffffff;
  font-size: 0.75rem;
  margin-top: 0rem;
  margin-bottom: 0.75rem;
}

.outerframe > footer .details-wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
  margin-bottom: 0.5rem;
}

.outerframe > footer ul {
  list-style-type: none;
  display: flex;
  margin: 0.5rem 0rem;
  padding: 0rem;
}

.outerframe > footer ul li {
  width: 50%;
  text-align: left;
}

.outerframe > footer ul li a {
  text-decoration: none;
  font-size: 0.75rem;
  color: #ffffff;
}

/* ボタンのスタイル */
.btn-primary {
  font-size: 1.5rem;
  background-color: #333333;
  color: #ffffff;
  border-radius: 1.5rem;
  border: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

.btn-primary:hover {
  background-color: #555555;
}

.delete-button {
  background-color: #FF5F81;
  border-radius: 1.5rem;
}

.delete-button:hover {
  background-color: #FF819A;
}

/* ベースのボタンスタイル */
.base-button-style {
  width: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.base-button-style > .rectangle {
  position: absolute;
  width: 8rem;
  height: 2.125rem;
  background: #333333;
  border-radius: 4rem;
}

.base-button-style > .text {
  position: absolute;
  font-size: 0.875rem;
  line-height: 1.0625rem;
  color: #FFFFFF;
}

/* タイトルのスタイル */
h1 {
  font-size: 1rem;
  color: #8c8c8c;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 1rem;
  text-align: left;
  margin-left: 0.5rem;
}

.error-message {
  font-size: 8rem;
  color: #FF5F81;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ボーダー */
.border {
  width: 85%;
  height: 0.0625rem;
  background: #D9D9D9;
  margin-left: auto;
  margin-right: auto;
}

/* イメージのスタイル */
img{
  /* PCの右クリック禁止 */
  /*pointer-events: none;*/

  /* SPの長押し禁止 */
  /*-webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  user-select:none;*/
}

/* 文字崩れに対しての制御 */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}