/*
Theme Name: NatureMag Lite
Author: Macho Themes
Author URI: https://www.machothemes.com/
Description: NatureMag Lite is a clean and modern magazine, news or blog WordPress theme for magazines, news websites, blogs and others. It have 3 different blog page style. It is will make your website adaptable with any type of mobile devices. Your site will be adaptive when viewed on a smartphone or tablet. Fully Responsive, Customizable and Search Engine ( SEO ) Friendly Friendly WordPress Theme using Twitter Bootstrap 3, Microformats and Font Awesome icons. You can add Contact Form and Google Maps to contact page. You can also build custom front page to use different widgets styles and slider as unlimited. The theme offers Widgetized Sidebar, four column Footer Widgets. You can add unlimted Widgets in each Sidebar and Footer Column. Theme Features: Advanced Custom Fields, Contact Form, Custom Front Page Settings, Custom Background Support, Custom Menu ( 3 Level on Header, 1 Level on footer ), Custom Colors, Google Fonts, Dynamic Widgets, Slider ( Responsive and Mobile Touch Friendly ), Featured Post Banner, Different Blog Page and Homepage Style, Redux Framework, Post Formats, Microformats, Responsive Video, Popular Posts Widgets. To learn more about the theme please go to the theme uri and read the documentation.
Tags: custom-menu, custom-background, featured-images, translation-ready, threaded-comments, two-columns, news, blog, sticky-post
Version: 1.0.4
Text Domain: naturemag-lite
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/
a {
	word-break: break-word;
    display: inline;
}
img {
	display: block;
	margin: auto;
}
.cat_h3 {
    font-size: 1.4em;
    padding: .25em 0 .25em .25em;
    border-left: 8px solid #88bddd;
	line-height: 1.4em;
}
a.tuduki {
    /* float: inherit; */
    display: block;
}
.explain_waku {
    margin-bottom: 40px;
}
.category-description {
    margin-top: 25px;
    margin-bottom: 30px;
    background-color: #f7f7f7;
    padding: 20px;
    border-radius: 3px;
    border: 1px solid #ddd;
}

.post-img{
	margin-bottom: 40px;
}
figure.onayamibox {
    text-align: center;
}
.onayamithumbs.usuku {
    text-align: center;
}

/* ＝＝＝＝＝＝＝＝＝
 　クイック黄色マーカー
 ＝＝＝＝＝＝＝＝＝＝*/
.marker-yellow {
	font-weight: bold;
	background: linear-gradient(transparent 70%, #fff9aa 70%);
	padding-bottom: 2px;
}

/* ＝＝＝＝＝＝＝＝＝
 　クイック赤マーカー
 ＝＝＝＝＝＝＝＝＝＝*/
.marker-red {
    font-weight: bold;
    background: linear-gradient(transparent 65%, #fcd0d0 65%);
    padding-bottom: 2px;
}

/* ＝＝＝＝＝＝＝＝＝
 　クイック太文字
 ＝＝＝＝＝＝＝＝＝＝*/
.bold {
	font-weight: bold;
}

/* ＝＝＝＝＝＝＝＝＝
 　クイック赤文字
 ＝＝＝＝＝＝＝＝＝＝*/
.red {
	font-weight: bold;
    color: #f46160;
}

/* ＝＝＝＝＝＝＝＝＝
 　クイック吹き出し
 ＝＝＝＝＝＝＝＝＝＝*/
.ballon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
}
.ballon p.icon {
  display: block;
	flex: 1;
  height: auto;
  margin: 0;
	text-align: center;
}
.ballon p.content {
  padding: 15px;
  flex: 6;
  background: #ffffe6;
  border-radius: 4px;
  position: relative;
  border: solid #fff5ca 2px;
  margin: 0;
}
@media screen and (max-width:540px) {
  .ballon p.content {
	  flex: 3;
    padding: 8px 12px;
  }
}
.ballon p.content.editor {
  background: #e6f8ff;
  border: solid #d3f3ff 2px;
}
.ballon p.content.editor::before {
  border-color: transparent #d3f3ff transparent transparent;
}
.ballon p.content.editor::after {
  border-color: transparent #e6f8ff transparent transparent;
}
.ballon p.content.ng {
  background: #fff4f4;
  border: solid 2px #ffe8e8;
}
.ballon p.content.ng::before {
  border-color: transparent #ffe8e8 transparent transparent;
}
.ballon p.content.ng::after {
  border-color: transparent #fff4f4 transparent transparent;
}
.ballon p.content::before {
  position: absolute;
  content: "";
  top: 50%;
  left: -20px;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 10px 18px 10px 0;
  border-color: transparent #fff5ca transparent transparent;
}
@media screen and (max-width:540px) {
  .ballon p.content::before {
    left: -17px;
    border-width: 8px 16px 8px 0;
  }
}
.ballon p.content::after {
  position: absolute;
  content: "";
  top: 50%;
  left: -15px;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 8px 16px 8px 0;
  border-color: transparent #ffffe6 transparent transparent;
}
@media screen and (max-width:540px) {
  .ballon p.content::after {
    left: -14px;
    border-width: 6px 14px 6px 0;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝
 　クイックノーマルリスト
 ＝＝＝＝＝＝＝＝＝＝＝＝*/
.normal-list {
  margin: 25px 0;
  border: solid 2px #d3f3ff;
}
.normal-list p {
  padding: 8px;
  margin: 0;
  line-height: 1;
  background: #d3f3ff;
  text-align: center;
}
.normal-list ul {
  padding: 15px;
  margin: 0;
}
@media screen and (max-width:540px) {
  .normal-list ul {
    padding: 10px 5px 15px;
  }
}
.normal-list ul li {
  margin-left: 30px;
  list-style: none;
  position: relative;
  margin-bottom: 3px;
}
.normal-list ul li:last-child {
  margin-bottom: 0;
}
.normal-list ul li::before {
  content: "✔";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: #a1e6ff;
  font-weight: bold;
}


/* ＝＝＝＝＝＝＝＝＝＝＝
 　クイックポイントリスト
 ＝＝＝＝＝＝＝＝＝＝＝＝*/
.point-list {
  margin: 25px 0;
  border: solid 2px #fec88d;
  position: relative;
}
.point-list::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  top: -20px;
  left: 10px;
  background: url(../..//uploads/2025/11/point-icon.svg) no-repeat center/100%;
}
@media screen and (max-width:540px) {
  .point-list::before {
    top: -17px;
  }
}
.point-list ul {
  padding: 20px 15px;
  margin: 0;
}
@media screen and (max-width:540px) {
  .point-list ul {
    padding: 20px 15px 15px;
  }
}
.point-list ul li {
  margin-left: 20px;
  list-style: none;
  position: relative;
  margin-bottom: 3px;
}
.point-list ul li:last-child {
  margin-bottom: 0;
}
.point-list ul li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fec88d;
}


/* ＝＝＝＝＝＝＝＝＝＝＝
 　クイック注意リスト
 ＝＝＝＝＝＝＝＝＝＝＝＝*/
.attention-list {
  margin: 25px 0;
  border: solid 2px #f46160;
  position: relative;
}
.attention-list::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  top: -20px;
  left: 10px;
  background: url(../..//uploads/2025/11/attention-icon.svg) no-repeat center/100%;
}
@media screen and (max-width:540px) {
  .attention-list::before {
    top: -17px;
  }
}
.attention-list ul {
  padding: 20px 15px;
  margin: 0;
}
@media screen and (max-width:540px) {
  .attention-list ul {
    padding: 20px 15px 15px;
  }
}
.attention-list ul li {
  margin-left: 20px;
  list-style: none;
  position: relative;
  margin-bottom: 3px;
}
.attention-list ul li:last-child {
  margin-bottom: 0;
}
.attention-list ul li::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #f46160;
}


/* ＝＝＝＝＝＝＝＝＝＝＝
 　クイックおすすめリスト
 ＝＝＝＝＝＝＝＝＝＝＝＝*/
.recommend-list {
  margin: 45px 0 25px;
  border: solid 2px #42c2f2;
  position: relative;
}
.recommend-list::before {
  position: absolute;
  content: "おすすめポイント";
  padding: 5px 10px;
  line-height: 1.2;
  top: -30px;
  color: white;
  font-weight: bold;
  left: -2px;
  background: #42c2f2;
}
.recommend-list ol {
  padding: 20px 15px;
  margin: 0;
}
@media screen and (max-width:540px) {
  .recommend-list ol {
    padding: 20px 15px 15px;
  }
}
.recommend-list ol li {
  margin-left: 10px;
  position: relative;
  margin-bottom: 3px;
}
@media screen and (max-width:540px) {
.recommend-list ol li {
  margin-left: 5px;
}
}
.recommend-list ol li:last-child {
  margin-bottom: 0;
}


/* ＝＝＝＝＝＝＝＝＝＝＝
 　クイッククリニック6項目
 ＝＝＝＝＝＝＝＝＝＝＝＝*/
.options {
  margin: 20px 0;
}
.options ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}
.options ul li {
  text-decoration-line: none;
  background: #42c2f2;
  border-radius: 5px;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100%/3.05);
  padding: 5px 0;
  margin: 0;
}
@media screen and (max-width:540px) {
  .options ul li {
	width: calc(100%/2.05);
    font-size: 3vw;
    font-weight: bold;
    border-radius: 3px;
  }
}
@media screen and (min-width: 321px) {
    .options ul li .ssp {
    display: none;
  }
}
.options ul li.gray {
  background: #ececec;
  color: #333;
}

/* ＝＝＝＝＝＝＝＝＝＝＝
 　クイックボタン
 ＝＝＝＝＝＝＝＝＝＝＝＝*/
a.cta {
  display: block;
  margin: 35px auto;
  color: white;
  border: solid 3px white;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.4;
  max-width: 360px;
  width: 100%;
  padding: 25px 0;
  border-radius: 55px;
  background: linear-gradient(to bottom, #48c6ef 0%, #4784ff 100%);
}
@media screen and (max-width:540px) {
  a.cta {
    font-size: 1.2rem;
    padding: 20px 0;
  }
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 　クイッククリニック一覧テーブル
 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.all-table {
  margin: 30px 0;
  width: 100%;
  overflow-x: auto;
}
.all-table table {
  width: auto;
  table-layout: fixed;
  border-spacing: 0;
  border: none;
  font-size: 12px;
  border-collapse: collapse;
  text-align: center;
}
.all-table table tr th {
  width: 80px;
  max-width: 100%;
  line-height: 1.3;
  background: #eefaff;
  border-spacing: 0;
  border: solid 1px #dcdcdc;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  left: 0;
}
@media screen and (max-width:540px) {
  .all-table table tr th {
    padding: 5px;
  }
}
.all-table table tr td {
  max-width: 100%;
  padding: 6px 10px;
  text-align: center !important;
  border-bottom: 1px solid #ccc;
  border-left: none;
  border-right: none;
  border-top: none;
  line-height: 1.8;
}
@media screen and (max-width:540px) {
  .all-table table tr td {
    font-size: 10px;
    padding: 6px;
    line-height: 1;
  }
}
.all-table table tr td.red {
  color: #e2597b;
}
.all-table table tr td a {
  display: block;
  padding: 8px 15px;
  border-radius: 30px;
  background: #42c2f2;
  color: #fff;
  font-weight: 700;
  position: relative;
  text-decoration: none;
}
@media screen and (max-width:540px) {
  .all-table table tr td a {
    font-size: 9.5px;
  }
}
.all-table table tr td a:before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width:540px) {
  .all-table table tr td a:before {
    right: 7px;
  }
}
.all-table table tr td img {
  display: block;
  max-width: 100%;
  height: auto;
}
.all-table table tr.price td {
  font-size: 14px;
}
.all-table table tr.left td {
  text-align: left;
  vertical-align: top;
}
.all-table table tr:first-child th {
  background: #fff;
}
.all-table table tr:first-child td {
  font-weight: 700;
  line-height: 1.3;
  background: #f5f5f5;
}
.all-table table tr:nth-child(2) td a {
  padding: 0;
  font-weight: normal;
  color: inherit;
  background: none;
  border-radius: 0;
  min-width: 140px;
}
@media screen and (max-width:540px) {
  .all-table table tr:nth-child(2) td a {
    min-width: 120px;
  }
}
.all-table table tr:nth-child(3) td {
  font-size: 12px;
  line-height: 1.5 !important;
  text-align: left !important;
}
.all-table table tr:last-child td a {
  background: #4784ff;
}


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
 　クイックアクセス情報
 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.access {
  margin: 30px 0;
  position: relative;
}
.access ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 0;
  align-items: stretch;
}
.access ul li {
	display: none; /* ← まず全部非表示 */
	padding: 15px;
	font-size: 12px;
	border: solid 1px #cdcdcd;
	width: 49.504950495%;
	margin: 0 0 0.5em;
}
.access ul li:nth-child(-n+4) {
  display: block;
}
.access ul li a {
  font-size: 13px;
  text-decoration-line: none;
  color: #999;
  position: relative;
}
.access .more-btn {
  position: absolute;
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgb(255, 255, 255));
  width: 100%;
  height: 60px;
  cursor: pointer;
  text-align: center;
  color: #666;
  font-weight: bold;
  text-decoration: none;
  border: none;
  transition: bottom 0.3s ease;
}

.rank table tr td p {
	margin: 0 auto;
}
.rank table tr td p a.cta {
	margin: 0 auto;
	font-size: 14px;
	padding: 15px 0;
}