@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,200;6..12,300;6..12,800;6..12,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
* {box-sizing: border-box;}

/* All settings for bright and dark colors are in this line. */
body {font-family: 'Nunito Sans', sans-serif;background-color: #fff;transition: background-color 0.0s ease;}
body.light {background-color: #fff;color: #333;}
body.dark {background-color: #0c1324;color: #fff;}
body.dark {background-color: #0c1324;} /* #9b59b6 */
body.dark h1, body.dark .support a {color: #fff;}
body.dark nav, body.dark .nav-item a {color: #fff;}
body.dark nav, body.dark .nav-item:focus a {color: #fff;}
body.dark nav, body.dark .link a {color: #fff;}
body.dark nav, body.dark .logo {color: #fff;}
body.dark nav, body.dark .navbar {background-color: #1e293b;}
body.dark nav, body.dark .bg-putih {background-color: #000000;}
body.dark input, body.dark .text-putih {color: #fff;}
body.dark input, body.dark .text-du {color: #fff;}
p .sdbr-link{color:#000000;}
.sdbr-links{color:#000000;}
body.dark .sdbr-links{color:#ffc007;}
li .sdbr-link{color:#000000;}
body.dark p, body.dark .sdbr-link{color:#ffffff;}

/* Categories */
.日記 {background-color: rgba(29,137,205,.1);color: #1d89cd;}
.備忘録 {background-color: rgba(256,161,105,.1);color: #e96e6a;}
.その他 {background-color: rgba(56,161,105,.1);color: #38a169;}
.videos {background-color: rgba(246,79,33,.1);color: #f64f21;}
.radio {background-color: rgba(255,102,82,.1);color: #ff6652;}
.Instagram {background-color: rgba(178,146,65,.1);color: #b29241;}
.twitter {background-color: rgba(255,192,7,.1);color: #ffc007;}
.affiliates {background-color: rgba(16,202,240,.1);color: #10caf0;}
.みんなを紹介 {background-color: rgba(111,66,193,.1);color: #6f42c1;}
.便利系 {background-color: rgba(135, 207, 122, .1);color: #25a244;}
.商品ワンポイント {background-color: rgba(255, 120, 32, .1);color: #ff7820;}
.レビュー {background-color: rgba(51, 197, 240, .12);color: #22aeea;}
.お知らせ {background-color: rgba(242, 70, 177, .1);color: #f246b1;}

.bg-putih {background-color: #fff;}
.text-putih {color: #000;}
.text-du {color: #000;}
.form-control::placeholder {color:#333;}
.card {border-style: solid;border-width: 1px;border-color: #dee2e6;}
.cards {border-style: solid;border-width: 1px;border-color: #dee2e6;}
.editor {color:#64748b;}
.editors {color:#000000;}
.sdbr {color:#000000;}
.btn-dsc {background-color: #e9ecef;}
.btn-dsc:hover {background-color: #dee2e6;}
body.dark .btn-dsc {background-color: #0c1324;color:#fff;}
body.dark .btn-dsc:hover {background-color: #000000;color:#fff;}
body.dark .sdbr {color:#ffffff;}
body.dark .editors {color:#ffffff;}
body.dark .card{background-color: #1e293b;color: #fff;border-width: 1px;border-color: #0c1324;color:#cbd5e1;}
body.dark .cards{background-color: #1e293b;color: #fff;border-width: 1px;border-color: #0c1324;color:#cbd5e1;}
.navbar {background-color: #f8f9fa;}
body.dark nav, body.dark .dropdown-menu {background-color: #000000;}
.bg-news a{background-color: #f2f2f2;color:#000;border-width: 1px}
.bg-news a:hover{background-color: #f2f2f2;color:#000;}
body.dark .bg-news a{background-color: #1e293b;color:#fff;}
body.dark .bg-news a:hover{background-color: #1e293b;color:#fff;}
.bg-foot{background-color: #f8f9fa;color:#000;}
body.dark .bg-foot{background-color: #000000;color:#fff;}
p img{width: 100%;border-radius:5px;}
p a{font-weight: bold;color:#000000;}
p a:hover{font-weight: bold;color:#fdc10d;}
body.dark p a{font-weight: bold;color:#fdc10d;}
body.dark p a:hover{font-weight: bold;color:#ffffff;}

/* Sticky Share Button */
.sticky {position: sticky;top: 90px;}

/* Card hover */
.bnr-f {transition: transform 0.3s ease;}
.bnr-f:hover {transform: translateY(-5px);}

/* All settings for Checkbox are in this line. */
.checkbox {
  opacity: 0;
  position: absolute;
}
.checkbox-label {
  background-color: #111;
  width: 50px;
  height: 26px;
  border-radius: 50px;
  position: relative;
  padding: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fa-moon {color: #f1c40f;}
.fa-sun {color: #f39c12;}
.checkbox-label .ball {
  background-color: #fff;
  width: 22px;
  height: 22px;
  position: absolute;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  transition: transform 0.2s linear;
}
.checkbox:checked + .checkbox-label .ball {
  transform: translateX(24px);
}


/*control button styles*/
.bn-controls button{
  background:#FF0000;
}
/*links hover styles*/
.bn-news ul li a:hover{
  color:#FF0000;
}

/*prefix styles*/
.bn-prefix{
  color:#0000FF;
  font-size:18px;
}


/* Numbering List Post */
#zero {
    list-style-type: none;
    counter-reset: li;
}
#zero li{
    display: flex;
    font-size: 16px;
}
#zero li:before {
    font-family: 'Abril Fatface', serif;
    counter-increment: li;
    content: counter(li, decimal-leading-zero) ". ";
    font-weight: 600;
    padding-right: 0.5em; /* Sesuaikan nilai sesuai kebutuhan Anda */
}
body.dark #zero li {
  display: flex;
  color:#ffc007;
  font-size: 16px;
}

/* Language Selector */
select {
    word-wrap: normal;
    padding: 7px;
    border-radius: 5px;
    border-color: rebeccapurple;
    border-width: 0;
}

/* デザイン見出し */
.midashi_h_12{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
position: relative;
padding: 0.6em;
margin-bottom: 2em;
background-color: #6196e0;/* 背景色 */
color:#ffffff;/* フォント色 */
}

.midashi_h_12:after {
position: absolute;
content: '';
top: 99%;
left: 25px;
width: 0;
height: 0;
border: 15px solid transparent;
border-top: 15px solid #6196e0;
}

.midashi_h_13{
	--baloon-color:#a5c9c1;
	position: relative;
	padding: 1rem 2rem;
	background: var(--baloon-color);
	color: #fff;
}
.midashi_h_13:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	bottom: -10px;
	left: 1.5em;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: var(--baloon-color) transparent transparent transparent;
}


/* 囲み枠 */
blockquote {
  position: relative;
  padding: 2em 3em 1em 4em;
  border-left: 5px solid #007acc;
  background-color: rgba(0, 122, 204, 0.06);
}
blockquote::before {
  position: absolute;
  top: 0.8em;
  left: 1em;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  content: "";
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%232589d0%22%20d%3D%22M21.8%2012H18V9c0-1.7%201.3-3%203-3h.4c.6%200%201.1-.5%201.1-1.1V2.6c0-.6-.5-1.1-1.1-1.1H21c-4.1%200-7.5%203.4-7.5%207.5v11.2c0%201.2%201%202.2%202.2%202.2h6c1.2%200%202.2-1%202.2-2.2v-6C24%2013%2023%2012%2021.8%2012zM8.2%2012H4.5V9c0-1.7%201.3-3%203-3h.4C8.5%206%209%205.5%209%204.9V2.6c0-.6-.5-1.1-1.1-1.1h-.4C3.4%201.5%200%204.9%200%209v11.2c0%201.2%201%202.2%202.2%202.2h6c1.2%200%202.2-1%202.2-2.2v-6c.1-1.2-.9-2.2-2.2-2.2z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
}
blockquote cite {
  font-size: 0.8em;
  display: block;
  text-align: right;
  color: #737373;
}

blockquote,
[class*="mybox-"] {
  margin-top: 3em;
  padding: 2em;
}

.mybox-border {
  border: 1px solid #ccc;
}

.mybox-border2 {
  border: 4px double #ccc;
}

.mybox-bg {
  background: rgba(239, 239, 239, 0.6);
}

.mybox-paper {
  position: relative;
  background: rgba(239, 239, 239, 0.6);
}
.mybox-paper::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: "";
  border-width: 0 0 1.2em 1.2em;
  border-style: solid;
  border-color: #ccc #fff #fff #ccc;
}

.mybox-bold {
  font-weight: bolder;
  border: 3px solid #111;
}

.mybox-brackets {
  position: relative;
}
.mybox-brackets:before,
.mybox-brackets:after {
  position: absolute;
  display: inline-block;
  width: 2em;
  height: 2em;
  content: "";
}
.mybox-brackets:before {
  top: 0;
  left: 0;
  border-top: 1px solid #111;
  border-left: 1px solid #111;
}
.mybox-brackets:after {
  right: 0;
  bottom: 0;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
}

.mybox-question,
.mybox-exclamation {
  position: relative;
  padding: 1em 1em 1em 4em;
  border-radius: 0.3em;
}
.mybox-question {
  background-color: #e8f9ff;
}
.mybox-exclamation {
  background-color: #feefee;
}
.mybox-question::before,
.mybox-exclamation::before {
  font-size: 1em;
  font-weight: 700;
  line-height: 2em;
  position: absolute;
  top: 1em;
  left: 1em;
  width: 2em;
  height: 2em;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  border-radius: 100vh;
}
.mybox-question::before {
  content: "?";
  background: #06a0d3;
}
.mybox-exclamation::before {
  content: "!";
  background: #cf3a29;
}

.mybox-point {
  position: relative;
  margin-top: 3em;
  border: 2px solid #c52b1a;
  border-radius: 0.3em;
}
.mybox-point::before {
  font-size: 1.2em;
  font-weight: bolder;
  position: absolute;
  top: -0.7em;
  left: 1em;
  padding: 0 0.8em;
  content: "POINT";
  color: #c52b1a;
  background-color: #fff;
}

.mybox-text {
  position: relative;
  margin-top: 3em;
  border: 2px solid #c52b1a;
  border-radius: 0.3em;
}
.mybox-text strong {
  font-size: 1.2em;
  font-weight: bolder;
  position: absolute;
  top: -0.7em;
  left: 1em;
  padding: 0 0.8em;
  color: #c52b1a;
  background-color: #fff;
}

.mybox-annotation {
  font-size: 0.8em;
  display: block;
  color: rgba(17, 17, 17, 0.8);
}

/* ===== アニメーション系 ===== */
.animate-on-scroll {
  transition: opacity 1s ease, transform 1s ease;
  opacity: 0;
}

.animate-on-scroll.in-view {
  opacity: 1;
}

.animate-on-scroll.in-view.from-left {
  animation: fromLeft 1s ease forwards;
}
.animate-on-scroll.in-view.from-right {
  animation: fromRight 1s ease forwards;
}
.animate-on-scroll.in-view.from-bottom {
  animation: fromBottom 1s ease forwards;
}
.animate-on-scroll.in-view.scale-up {
  animation: scaleUp 1s ease forwards;
}

@keyframes fromLeft {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fromRight {
  0% {
    transform: translateX(20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fromBottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== ふきだしデザイン ===== */
.speech {
  display: flex;
  margin: 2em 1em;
  justify-content: flex-start;
  align-items: start;
  gap: 0 20px;
}
.speech span {
  font-size: 0.8em;
  display: block;
  text-align: center;
}
.speech .face {
  width: 20%;
  max-width: 80px;
}
.speech img {
  width: 100%;
  height: auto;
  border: 3px solid #e6edf3;
  border-radius: 50%;
}
.speech p {
  position: relative;
  width: calc(80% - 20px);
  padding: 0.8em 1em;
  color: #fff;
  border-radius: 6px;
  background-color: #26324f;
}
.speech p::before {
  position: absolute;
  left: -13px;
  width: 15px;
  height: 25px;
  content: "";
  background-color: #e0efff;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.speech.left-face {
  justify-content: flex-start;
}
.speech.right-face {
  text-align: right;
  flex-direction: row-reverse;
}
.speech.right-face p::before {
  right: -13px;
  left: auto;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ===== ライトボックスの調整 ===== */
.gslide-image img { object-fit: contain !important; }

article img,
.article-content img,
.page-content img,
p img {
  width: auto !important;
  height: auto !important;
  max-width: 30vw !important;    /* 画面幅の30%まで */
  max-height: 20vh !important;   /* 画面高さの20%まで */
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}