@charset "UTF-8";

/* PCいまログ案内の正本。トップ・メディアで同じHTMLとこのCSSを共有。
 * 修正時はこの既存定義を編集し、ページCSSからの上書きを増やさない。 */

html:where([data-pc-shell="standard"]) body.natural-theme.natural-pc .pc-imlog-badge {
  background: var(--ui-pc-diary-bg-variant-15) !important;
  color: var(--ui-pc-diary-text-variant-11) !important;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-section-head {
  margin-top: 30px;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-area {
  width: 780px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-guide-head::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -42px;
  width: 145px;
  height: 145px;
  border: 1px solid var(--ui-pc-diary-border-variant-10);
  border-radius: 50%;
  box-shadow: 0 0 0 20px var(--ui-pc-diary-shadow-variant-3),0 0 0 42px var(--ui-pc-diary-shadow-variant-4);
  pointer-events: none;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-badge {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 6px 9px 5px;
  border: 1px solid var(--ui-pc-diary-border-variant-11);
  border-radius: 2px;
  background: var(--ui-pc-diary-bg-variant-23);
  color: var(--ui-pc-diary-text-variant-4);
  font: 700 9px/1 Arial,sans-serif;
  letter-spacing: 1.25px;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-guide-head>div {
  position: relative;
  z-index: 1;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-guide-head h3 {
  margin: 0;
  color: var(--ui-pc-diary-text-variant-4);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: .02em;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-register::after {
  content: "";
  position: absolute;
  top: -42px;
  right: 34px;
  width: 130px;
  height: 130px;
  border: 1px solid var(--ui-pc-diary-border-variant-12);
  border-radius: 50%;
  box-shadow: 0 0 0 19px var(--ui-pc-diary-shadow-variant-3);
  pointer-events: none;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-register img {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  margin-right: 13px;
  border: 2px solid var(--ui-pc-diary-border-variant-13);
  border-radius: 11px;
  box-shadow: 0 2px 6px var(--ui-pc-diary-shadow-variant-5);
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-register span {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-register strong {
  color: var(--ui-pc-diary-text-variant-4);
  font-size: 16px;
  line-height: 1.2;
  text-shadow: 0 1px 0 var(--ui-pc-diary-text-shadow);
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-register>b {
  position: relative;
  z-index: 1;
  margin-left: 12px;
  color: var(--ui-pc-diary-text-variant-4);
  font: 400 31px/1 Arial,sans-serif;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-guide {
  position: relative;
  overflow: hidden;
  margin-top: var(--pc-imlog-panel-gap, 16px);
  border: 1px solid var(--ui-pc-diary-border-variant-14);
  box-sizing: border-box;
  border-color: var(--ui-pc-diary-border-variant-15) !important;
  background: var(--ui-pc-diary-bg-variant-24) !important;
  box-shadow: 0 3px 12px var(--ui-pc-diary-shadow-variant-6) !important;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-guide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg,var(--ui-pc-diary-bg-variant-8) 0 18%,var(--ui-pc-diary-bg-variant-7) 18% 72%,var(--ui-pc-diary-bg-variant-8) 72% 100%) !important;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-guide-head p {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.72;
  text-shadow: 0 1px 0 var(--ui-pc-diary-text-shadow-variant-2);
  color: var(--ui-pc-diary-text-variant-12) !important;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-register {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76px;
  margin: 2px 16px 0;
  padding: 11px 16px;
  overflow: hidden;
  border: 1px solid var(--ui-pc-diary-border-variant-2);
  border-radius: 3px;
  color: var(--ui-pc-diary-text-variant-4);
  text-decoration: none;
  box-sizing: border-box;
  border-color: var(--ui-pc-tone-imlog-guide-pc-imlog-register-border-color-69db2, var(--ui-pc-diary-border-variant-16)) !important;
  background: linear-gradient(100deg,var(--ui-pc-tone-imlog-guide-pc-imlog-register-background-8d353, var(--ui-pc-diary-bg-variant-8)) 0%,var(--ui-pc-tone-imlog-guide-pc-imlog-register-background-b6fe6, var(--ui-pc-diary-bg-variant-7)) 100%) !important;
  box-shadow: 0 3px 8px var(--ui-pc-diary-shadow-variant-7) !important;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-register small {
  margin-bottom: 5px;
  font: 700 8px/1 Arial,sans-serif;
  letter-spacing: 1.45px;
  color: var(--ui-pc-diary-text-variant-13) !important;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-note {
  margin: 11px 16px 16px;
  padding: 10px 12px 10px 14px;
  border-left: 4px solid var(--ui-pc-diary-border-variant-17);
  font-size: var(--pc-imlog-note-font, 11px);
  font-weight: 700;
  line-height: 1.65;
  border-left-color: var(--ui-pc-tone-imlog-guide-pc-left-column-pc-imlog-note-border-left-color-a7081, var(--tk-brown)) !important;
  background: var(--ui-pc-diary-bg-variant-21) !important;
  color: var(--ui-pc-tone-imlog-guide-pc-left-column-pc-imlog-note-color-b2185, var(--pc-top-secondary-text, #584a45)) !important;
  box-shadow: inset 0 0 0 1px var(--ui-pc-diary-shadow-variant-8) !important;
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-guide-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 23px 20px 19px;
  border-bottom: 1px solid var(--ui-pc-diary-border-variant-18);
  border-bottom-color: var(--ui-pc-diary-border-variant-16) !important;
  background: linear-gradient(105deg,var(--ui-pc-diary-bg-variant-25) 0%,var(--ui-pc-tone-imlog-guide-pc-imlog-guide-head-background-c7fc8, var(--ui-pc-diary-bg-variant-8)) 42%,var(--ui-pc-diary-bg-variant-26) 100%) !important;
}

:where(html[data-pc-shell="standard"]) .pc-imlog-area {
  --pc-imlog-panel-gap: 0px;
  --pc-imlog-note-font: 13px;
  --pc-top-secondary-text: var(--ui-pc-diary-pc-top-secondary-text);
}

:where(html[data-pc-shell="standard"]) .pc-left-column .pc-imlog-brand-image {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  margin: var(--pc-imlog-banner-top, 16px) 0 0;
  border: 0;
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: linear-gradient(180deg,var(--ui-pc-diary-bg-variant-27) 0%,var(--ui-pc-diary-bg-variant-28) 100%);
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  min-width: 0;
  min-height: 148px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--ui-pc-diary-border-variant-19);
  border-radius: 6px;
  background: var(--ui-pc-diary-bg-variant-29);
  box-shadow: 0 2px 6px var(--ui-pc-diary-shadow-variant-9);
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 14px 10px;
  border-right: 1px solid var(--ui-pc-heading-border-variant-3);
  background: linear-gradient(135deg,var(--ui-pc-heading-bg-variant-8) 0%,var(--ui-pc-heading-bg-variant-9) 100%);
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-group {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 6px;
  align-items: start;
  width: 128px;
  max-width: 100%;
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-no {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 1px solid var(--ui-pc-diary-border-variant-20);
  border-radius: 3px;
  background: linear-gradient(145deg,var(--ui-pc-diary-bg-variant-30) 0%,var(--ui-pc-diary-bg-variant-31) 100%);
  color: var(--ui-pc-diary-text-variant-11);
  font: 700 10px/1 Arial,sans-serif;
  font-variant-numeric: tabular-nums;
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-word {
  grid-column: 2;
  grid-row: 1;
  color: var(--ui-pc-diary-text-variant-14);
  font: 800 15px/1.15 Arial,sans-serif;
  letter-spacing: .65px;
  white-space: nowrap;
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-subtitle {
  grid-column: 2;
  grid-row: 2;
  margin-top: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-pc-heading-border-variant-4);
  color: var(--ui-pc-heading-text-variant-5);
  font: 700 8px/1.25 Arial,sans-serif;
  letter-spacing: .18px;
  white-space: nowrap;
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-label {
  grid-column: 2;
  grid-row: 3;
  margin-top: 7px;
  color: var(--ui-pc-diary-text-variant-14);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

:where(html[data-pc-shell="standard"]) .pc-imlog-detail-description {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 12px;
  color: var(--ui-pc-diary-text-variant-15);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.75;
  overflow-wrap: anywhere;
}