@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/*
theme Name: Amon Base
Author: GRAVITI
Description: Amon Base オリジナルテーマ
version： 1.0
*/
/*cssのリセット*/
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:normal}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}

html, body {
  overflow-x: hidden;
}
html {
  font-size:62.5%;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #261C19;
  background: #FFF;
  font-size: 1.6rem;
  height: 100%;
}

:target::before {
  content: "";
  display: block;
  height: 100px;
  margin-top: -100px;
}

/* 基本の表示状態 */
.pcOnly {
	display: block;
}
.tbOnly, .mbOnly, .pctbOnly, .tbmbOnly {
	display: none;
}
/* タブレットだけの表示（1024px以下） */
@media screen and (max-width: 1024px) {
	.pcOnly {
		display: none;
	}
	.pctbOnly {
		display: block; /* PCとタブレットのみ表示 */
	}
	.tbOnly {
		display: block; /* タブレットのみ表示 */
	}
	.tbmbOnly {
		display: block; /* タブレットとモバイルのみ表示 */
	}
}
/* モバイルだけの表示（767px以下） */
@media screen and (max-width: 767px) {
	.pcOnly, .pctbOnly {
		display: none;
	}
	.tbOnly {
		display: none; /* タブレットのみ表示 */
	}
	.mbOnly {
		display: block; /* モバイルのみ表示 */
	}
	.tbmbOnly {
		display: block; /* タブレットとモバイルのみ表示 */
	}
}

/* ---------------------------------
	TOPページ記事表示数
--------------------------------- */
@media (min-width: 1025px) {
  .homeArticle .elementor-loop-container .e-loop-item {
	display: block;
  }
}
@media (max-width: 1024px) {
  .homeArticle .elementor-loop-container .e-loop-item:nth-of-type(n+3) {
	display: none !important;
  }
}

/* ---------------------------------
	記事テキストアニメーション
--------------------------------- */
.underLinePost:hover img {
	transform: scale(1.2);
}
.underLinePost .underLineTxt a {
	display: inline;
	background-image: linear-gradient(to right, #000 100%, transparent 0);
	background-repeat: no-repeat;
	background-size: 0% 1px;
	background-position: 0 100%;
	transition: background-size 0.4s ease;
}

.underLinePost:hover .underLineTxt a {
	background-size: 100% 1px;
}

.post-views {
	display: flex;
	align-items: center;
	gap: 3px;
}
.singleCount .post-views-count {
	font-size: 2rem;
}


/* ---------------------------------
	カテゴリ表記
--------------------------------- */
.categoryWrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.categoryBadge {
	display: inline-block;
	color: #fff;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	border-radius: 5px 5px 5px 0;
}
.categoryBadge-parent {
	background-color: #E60012;
}
.categoryBadge-child {
	background-color: #333;
}
.single .categoryLine {
	padding: 0;
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1;
}

/* ---------------------------------
	SNSアイコンリスト
--------------------------------- */
.sns-share {
	display: flex;
	gap: 10px;
	margin: 0;
	}
.sns-btn {
	width: 100%;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s;
	padding: 1rem 0;
}
.sns-btn .snsIcon {
	height: 20px;
}
.sns-btn:hover {
	opacity: 0.8;
}
.sns-btn.facebook { background-color: #3b5998; }
.sns-btn.x        { background-color: #333; }
.sns-btn.line     { background-color: #00c300; }
.sns-btn.mail     { background-color: #f39c12; }

/* ---------------------------------
	タグ一覧表示
--------------------------------- */
.tag-cloud-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tag-item {
	display: inline-flex;
	align-items: center;
	background: #eee;
	color: #333;
	padding: 0.4em 0.8em;
	border-radius: 5px;
	font-size: 1.2rem;
	text-decoration: none;
	transition: background 0.3s;
}
.tag-item:hover {
	background: #ddd;
}
.tag-count {
	font-size: 1rem;
	color: #888;
	margin-left: 4px;
}
.favoriteArchive .tag-item {
	background: #fff;
}
.favoriteArchive .tag-item:hover {
	color: #fff;
	background: #333;
}

/* ---------------------------------
	パンくず
--------------------------------- */
.breadcrumb-category {
  font-size: 1rem;
  line-height: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  white-space: normal;
}

.breadcrumb-category span,
.breadcrumb-category a {
  display: inline;
  white-space: nowrap;
}

.breadcrumb-category span::after,
.breadcrumb-category a::after {
  content: '>';
  margin: 0 0.5em;
  color: #aaa;
}

.breadcrumb-category span:last-child::after,
.breadcrumb-category a:last-child::after {
  content: '';
  margin: 0;
}

/* ---------------------------------
	メルマガフォーム
--------------------------------- */
.newsletter-form {
	display: flex;
	flex-direction: row;
	gap: 1em;
	max-width: 100%;
	margin: 0 auto;
	justify-content: center;
	align-items: flex-end;
}
.newsletter-form input,
.newsletter-form button {
	padding: 0.8em 1em;
	font-size: 1em;
	border: 1px solid #efefef;
	border-radius: 4px;
	width: 100%;
	box-sizing: border-box;
}
.newsletter-form input:focus,
.newsletter-form button:focus {
border-color: #333;
outline: none;
}
.newsletter-form button {
	background-color: #333;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s;
}
.newsletter-form button:hover {
	background-color: #E60012;
}
@media screen and (max-width: 767px) {
	.newsletter-form {
		flex-direction: column;
		align-items: stretch;
	}
	.newsletter-form input,
	.newsletter-form button {
		width: 100%;
	}
}

/* ---------------------------------
	Pochip スタイル変更
--------------------------------- */
.postContents .pochipp-box .pochipp-box__logo,
.postContents .pochipp-box__info {
	display: none!important;
}
.postContents .pochipp-box {
	width: 100%;
	margin: 0!important;
	padding: 2rem 0!important;
	border: none!important;
	box-shadow: none!important;
}
.postContents .pochipp-box__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.postContents .pochipp-visible-wrapper .pochipp-box:nth-of-type(n+1) {
	border-bottom: 1px solid #efefef!important;
}
.postContents .pochipp-visible-wrapper .pochipp-box:last-child {
	margin-bottom: 0!important;
	border-bottom: none !important;
}
.postContents .pochipp-box__price {
	font-size: 1.8rem;
}
.pochipp-box__btnwrap.-rakuten a[href*="search.rakuten.co.jp"],
.pochipp-box__btnwrap.-yahoo a[href*="search.yahoo.co.jp"] {
	display: none !important;
}
@media (max-width: 767px) {
	.pochipp-box__title {
		font-size: 1.3rem;
		line-height: 1.6rem;
	}
}


/* ---------------------------------
	ランキング
--------------------------------- */
.rankingList .elementor-loop-container {
	counter-reset: rank;
}
.rankingList .e-loop-item {
	counter-increment: rank;
	position: relative;
}
.rankingList .e-loop-item::before {
	content: counter(rank);
	position: absolute;
	top: -6px;
	left: -6px;
	width: 24px;
	height: 24px;
	color: #111;
	background: #fff;
	border: 1px solid #111;
	font-weight: 800;
	font-size: 1rem;
	border-radius: 5px 5px 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
}
.rankingList .elementor-loop-container > .e-loop-item:first-of-type::before {
	color: #e60033;
	background: #fff;
	border: 1px solid #e60033;
}


/* ---------------------------------
	並び替えボタン
--------------------------------- */
.sort-buttons {
	font-size: 1.4rem;
}
.sort-buttons a {
  color: #666;
  text-decoration: none;
  padding: 4px 8px;
}
.sort-buttons a.active {
  color: #e60033;
  font-weight: bold;
  border-bottom: 2px solid #e60033;
}


/* ---------------------------------
	サーチフォーム
--------------------------------- */
.e-search-form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.e-search-input-wrapper {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}
.e-search-input {
  width: 100%;
  min-width: 0;
  flex: 1;
}
.e-search-submit {
  flex-shrink: 0;
  padding: 0 1em;
  white-space: nowrap;
}

/* ---------------------------------
	関連記事
--------------------------------- */
@media (max-width: 1024px) {
	.moreLikeThis .e-loop-item:last-child .elementor-element {
		border-bottom: none !important;
	}
}
@media (max-width: 768px) {
	.rankingList .e-loop-item:last-child .elementor-element {
		border-bottom: none !important;
	}
}

/* ---------------------------------
	H2 テキスト装飾
--------------------------------- */
.postContents h2 {
	font-size: 2rem;
	line-height: 2.2rem;
	border-left: 5px solid #e60033;
	padding: 0 0 0 1rem;
}
.postContents h3 {
	font-size: 1.7rem;
	line-height: 2.5rem;
}

/* ---------------------------------
	テキスト装飾（注意）
--------------------------------- */
.postContents .caution {
	position: relative;
	padding: 4rem 2rem 2rem 2rem;
	text-align: center;
	color: #e60033;
	border-radius: 5px;
	background: rgba(230, 0, 51, 0.1);
	text-align: justify;
	font-weight: bold;
	border: 2px solid #e60033;
}
.postContents .caution:before {
	font-size: 1.4rem;
	position: absolute;
	top: 0;
	left: -2px;
	height: 30px;
	padding: 0 1.3em;
	content: '⚠️ 注意';
	color: #fff;
	border-radius: 0 0 5px 0;
	background: #e60033;
	line-height: 2.8rem;
}

/* ---------------------------------
	テキスト装飾（注意）黄色
--------------------------------- */
.postContents .caution-y {
	position: relative;
	padding: 4rem 2rem 2rem 2rem;
	text-align: center;
	color: #f39c12;
	border-radius: 5px;
	background: rgba(255, 192, 72, 0.1);
	text-align: justify;
	font-weight: bold;
	border: 2px solid #f39c12;
}
.postContents .caution-y:before {
	font-size: 1.4rem;
	position: absolute;
	top: 0;
	left: -2px;
	height: 30px;
	padding: 0 1.3em;
	content: '⚠️ 注意';
	color: #fff;
	border-radius: 0 0 5px 0;
	background: #f39c12;
	line-height: 2.8rem;
}


/* ---------------------------------
	ポイント黒
--------------------------------- */
.postContents .point {
	position: relative;
	padding: 4rem 2rem 2rem 2rem;
	text-align: center;
	color: #333;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.1);
	text-align: justify;
	font-weight: bold;
	border: 2px solid #333;
}
.postContents .point:before {
	font-size: 1.3rem;
	position: absolute;
	top: 0;
	left: -2px;
	height: 30px;
	padding: 0 1.4em;
	content: '👀 ポイント';
	color: #fff;
	border-radius: 0 0 5px 0;
	background: #333;
	line-height: 2.8rem;
}

/* ---------------------------------
	ポイント緑
--------------------------------- */
.postContents .point-g {
	position: relative;
	padding: 4rem 2rem 2rem 2rem;
	text-align: center;
	color: #4cd137;
	border-radius: 5px;
	background: rgba(76, 209, 55, 0.1);
	text-align: justify;
	font-weight: bold;
	border: 2px solid #4cd137;
}
.postContents .point-g:before {
	font-size: 1.4rem;
	position: absolute;
	top: 0;
	left: -2px;
	height: 30px;
	padding: 0 1.4em;
	content: '👀 ポイント';
	color: #fff;
	border-radius: 0 0 5px 0;
	background: #4cd137;
	line-height: 2.8rem;
}

/* ---------------------------------
	ポイント黄色
--------------------------------- */
.postContents .point-y {
	position: relative;
	padding: 4rem 2rem 2rem 2rem;
	text-align: center;
	color: #f39c12;
	border-radius: 5px;
	background: rgba(255, 192, 72, 0.1);
	text-align: justify;
	font-weight: bold;
	border: 2px solid #f39c12;
}
.postContents .point-y:before {
	font-size: 1.4rem;
	position: absolute;
	top: 0;
	left: -2px;
	height: 30px;
	padding: 0 1.4em;
	content: '👀 ポイント';
	color: #fff;
	border-radius: 0 0 5px 0;
	background: #f39c12;
	line-height: 2.8rem;
}

/* ---------------------------------
	ポイント青色
--------------------------------- */
.postContents .point-b {
	position: relative;
	padding: 4rem 2rem 2rem 2rem;
	text-align: center;
	color: #1e90ff;
	border-radius: 5px;
	background: rgba(30, 144, 255, 0.1);
	text-align: justify;
	font-weight: bold;
	border: 2px solid #1e90ff;
}
.postContents .point-b:before {
	font-size: 1.4rem;
	position: absolute;
	top: 0;
	left: -2px;
	height: 30px;
	padding: 0 1.4em;
	content: '👀 ポイント';
	color: #fff;
	border-radius: 0 0 5px 0;
	background: #1e90ff;
	line-height: 2.8rem;
}