/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *

 */

:root {
  scroll-padding: 80px;
  /* scroll-behavior: smooth; アンカーリンクの位置ズレが起こる*/
  --primary-main-01: #ff7f7f;
  --primary-main-02: #f0ede8;
  --primary-main-03: #92b898;
  --text-inverted: #ffffff;
  --text-01: #473120;
  --text-02: #806d6d;
  --text-03: #b2a3a3;
  --brand-amazon: #febd68;
  --brand-rakuten: #bf0000;
  --brand-yahoo: #ff8400;
  --article-yellow: #d55e38;
  --article-blue: #589acc;
  --article-green: #92b898;
  --background: #323232;
  --divider: #7e6c6c;
  --divider-02: #e8e2db;
}

body {
  color: var(--text-01);
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
}

h1, h2, h3 {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
}

img {
  height: 100%;
  object-fit: contain;
  vertical-align: top;
  width: 100%;
}

p {
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover, .btn:hover {
  opacity: 0.6;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

b {
  background: linear-gradient(transparent 60%, rgb(242 214 91 / 60%) 40%);
  padding: 0 2px 2px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.bold {
  font-weight: 600;
}

.font_10 {
  font-size: 10px;
}

.font_12 {
  font-size: 12px;
}

.font_16 {
  font-size: 16px;
}

.font_20 {
  font-size: 20px;
}

.text_ine-through {
  text-decoration: line-through;
}

.search::before {
  content: '🔍'; /* LCPが悪化するため、webフォント使わない */
  font-size: 12px;
  margin-right: 3px;
  opacity: 0.8;
}

.twitter {
  background: var(--background);
  border-radius: 4px;
  padding: 6px;
  max-width: 14px;
}

.line {
  margin: 0 4px;
  max-width: 26px;
}

.sns_share {
  border-bottom: 1px solid var(--divider-02);
  border-top: 1px solid var(--divider-02);
  padding: 8px 0;
  text-align: center;
}

.blink {
  animation: fade-blink 8s linear infinite;
}
@keyframes fade-blink {
  0%, 20%, 40%, 60% { opacity: 1; }   /* 表示 */
  10%, 30%, 50% { opacity: 0; }       /* 非表示（3回点滅） */
  100% { opacity: 1; }                /* 5秒間静止 */
}

/* header */
.header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}

.header .logo_wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.header .logo {
  height: 40px;
  width: 240px;
  /* font-size: 20px;
  font-family: chalkboard, serif;
  font-weight: 600; */
}

.header .message {
  font-size: 12px;
  margin: 0 2px;
}

.header .icon {
  color: var(--text-03);
  margin: 0 2px;
}

@media screen and (max-width:750px) {
  .header .logo {
    height: 32px;
    width: 156px;
  }
  
  .header .message {
    font-size: 10px;
    margin: 0 4px;
  }
}

/* footer */
.footer_wrapper {
  background: var(--background);
  bottom: 0;
  position: absolute;
  width: 100%;
}

.footer {
  align-items: center;
  color: var(--text-inverted);
  display: flex;
  font-size: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: relative;
}

.footer .navigation_item {
  margin: 0 8px;
}

.footer .page_top {
  color: var(--text-01);
  position: absolute;
  top: -36px;
}

/* container */
.view_container {
  padding: 0 16px;
  margin: 12px auto;
  max-width: 1050px;
}

.container_wrapper {
  padding-bottom: 100px;
}

.separate_container {
  display: flex;
}

.main_container {
  padding-right: 12px;
  width: 70%;
}

.sub_container {
  width: 30%;
}

@media screen and (max-width:750px) {
  .separate_container {
    display: block;
  }

  .main_container {
    width: 100%;
  }
  
  .sub_container {
    width: 100%;
  }
}

/* wrapper */
.wrapper {
  margin: 20px 0;
  width: 100%; /* for ad width */
}

.wrapper_8 {
  margin: 8px 0;
}

.wrapper_12 {
  margin: 12px 0;
}

.wrapper .title {
  font-size: 20px;
  font-weight: 600;
  margin: 12px 0;
}

.wrapper .title2 {
  font-size: 16px;
  font-weight: 600;
  margin: 4px 0;
}

.wrapper .title2_with_icon::before {
  content: '◆';
  color: var(--primary-main-01);
  position: relative;
  right: 4px;
}

.wrapper .sub_title {
  color: var(--primary-main-03);
  font-size: 14px;
  font-weight: 600;
}

.tag {
  border: 1px solid var(--text-03);
  border-radius: 4px;
  color: var(--text-03);
  font-size: 10px;
  padding: 2px 4px;
  white-space: nowrap;
}

.info {
  border: 1px solid var(--text-03);
  border-radius: 20px;
  font-size: 9px;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", sans-serif;
  padding: 0 2px;
  color: var(--text-03);
}

.review_score {
  color: orange;
  font-size: 12px;
  font-weight: 300;
}

.review_count {
  color: #4aafdb;
  font-size: 10px;
}

.memo_list {
  display: inline-block;
  margin: 0 4px;
}

.memo_atention {
  background: rgb(255 127 127 / 10%);
  border-radius: 8px;
  margin: 4px 0;
  padding: 4px 12px;
}

.marker::before {
  content: '🉐';
  position: relative;
  right: 4px;
}

.link {
  border-bottom: 1px solid;
  color: #4aafdb;
  display: inline-block;
  font-size: 10px;
  margin: 8px 0;
  text-align: center;
}

.ad_wrapper {
  margin: 0 auto;
  max-width: 300px;
  position: relative;
}

.ad_wrapper::before {
  background: var(--background);
  color: var(--text-inverted);
  content: 'PR';
  font-size: 10px;
  padding: 0 4px;
  top: 0;
  right: 0;
  position: absolute;
}

.banner_top {
  /* background-image: radial-gradient(#f7f1df 30%, transparent 33%), radial-gradient(#fef7df 30%, transparent 33%);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px; */
  background: repeating-linear-gradient(-135deg, #f1dfda, #f1dfda 2px, #fff 4px, #fff 6px); */
  background: var(--primary-main-02);
  font-size: 12px;
  padding: 4px;
  text-align: center;
}

.banner_top img {
  max-width: 400px;
}

.banner_top_ad {
  background: var(--text-inverted);
  display: flex;
  align-items: center;
  font-size: 10px;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 400px;
  padding: 0 8px;
  position: relative;
  text-align: left;
}

.banner_top_ad::before {
  background: rgb(50 50 50 / 70%);
  border: 1px solid #f1dfda;
  color: var(--text-inverted);
  content: 'PR';
  font-size: 8px;
  padding: 0 4px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}

.banner_top_main {
  margin: 0 8px;
  width: 70%;
}
.banner_top_ad img {
  max-width: 50px;
}
.banner_top_ad_link {
  background: var(--brand-amazon);
  border-radius: 12px;
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
  padding: 2px 8px;
}
.banner_top_info {
  color: var(--text-02);
  display: flex;
  justify-content: space-between;
}

.banner_top_title {
  color: #4aafdb;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.banner_top_price {
  font-family: futura, 'Century Gothic', sans-serif;
}

/* slide */
.slider_wrapper {
  height: 50px;
  overflow: hidden;
}

.slide {
  height: 50px;
  animation: slide 12s infinite;
}

@keyframes slide {
  0%, 16.66%   { transform: translateY(0%); }
  33.33%, 49.99% { transform: translateY(-100%); }
  66.66%, 83.32% { transform: translateY(-200%); }
  100%         { transform: translateY(0%); }
}

/* modal */
.modal_container {
  background: rgb(50 50 50 / 50%);
  display: none;
  height: 100%;
  top: 0;
  position: fixed;
  z-index: 100;
  width: 100%;
}

.modal_wrapper {
  background: var(--text-inverted);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  max-width: 400px;
  text-align: center;
  margin: 0 auto;
  min-height: 100px;
  overflow: hidden;
  width: 80%;
}

.modal_close {
  background: var(  --background);
  border-radius: 16px;
  color: var(--text-inverted);
  display: inline;
  position: absolute;
  top: 8px;
  right: 8px;
  height: 20px;
  line-height: 20px;
  width: 20px;
  z-index: 10;
}

.modal_icon {
  margin: 16px;
  width: 60px;
}

.modal_title {
  font-weight: 600;
  margin: 8px 16px;
}

.modal_message {
  font-size: 12px;
  margin: 16px 32px 56px;
  text-align: left;
}

.modal_link {
  border: 1px solid;
  border-radius: 12px;
  font-size: 12px;
  padding: 2px 12px;

  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

#modal_banner_click {
  display: none;
}

.list {
  border-bottom: 1px solid var(--divider-02);
  font-size: 12px;
  list-style: none;
  padding: 8px;
  position: relative;
}

.list::after {
  content: '》';
  right: 0;
  position: absolute;
}

.tag_list {
  border: 1px solid var(--divider-02);
  border-radius: 24px;
  display: inline-block;
  font-size: 12px;
  list-style: none;
  margin: 4px 0;
  padding: 4px 12px;
}

/* snackbar */
.snackbar {
  background: rgb(255 255 255 / 90%);
  border: 1px solid rgb(255 127 127 / 60%);
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: var(--text-02);
  font-size: 10px;
  display: none;
  padding: 4px 12px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  z-index: 10;
}

.snackbar_wrapper {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 1050px;
}

.snackbar_icon {
  margin-right: 4px;
  width: 30px;
}

.c_items {
  padding: 8px 16px;
  background: var(--primary-main-02);
  font-size: 12px;
  border-radius: 12px;
}

.message_icon {
  display: block;
  margin: 12px auto;
  width: 52px;
}