@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.p-articleMetas {
	margin-bottom: 15px; 
}

.swl-format-2 {
	font-weight: bold;
    background: linear-gradient(transparent 60%,#cce3ee 60%);
}

.swl-format-1 {
	font-weight: bold;
	background: linear-gradient(transparent 64%,var(--color_mark_yellow) 0%);
}

/* global */
#search-icon {
color: #ddd;
}
.bgcolorgray {
	background: #f7f7f7 !important;
}
.star_yellow {
	color: #FFC312;
}
.opacity1 {
	opacity: 1;
}
.opacity4 {
	opacity: 0.4;
}
.underline {
	text-decoration: underline !important;
}
.searchicon {
color: #ddd;	
}
.displayblock { 
	display: block !important;
}
.linkdesignnone {
	text-decoration: none !important;
	color: var(--color_text) !important;
}
.post_content h4 {
	margin: 20px 0px 10px 0px;
	font-size: 1em;
}
.pink {
	color: #ff7675 !important;
}
.link_design_none {
	text-decoration: none !important;
}
.textaligncenter {
	text-align: center !important;
}
.textalignleft {
	text-align: left;
}
.displayblock {
	display: block;
}
.paddingright10 {
padding-right: 10px; 	
}
.paddingleft10 {
padding-left: 10px;	
}
.bg_green {
background: #01aa95;
color: #fff;
padding: 5px 10px;
margin-left: 10px; 
font-weight: bold;
}
.no1bg {
	background: #ffffe3 !important;
}
.maxheightnone {
	max-height: none !important;
}

#kaitori-search { background: #fff; }
/*._sticky_a img { width: 130px !important; }*/
a img:hover { opacity: .7; }
.bold { font-weight: bold;}
.bgwhite { background: #fff !important; }
.obj-inline-b { display: inline-block; }
.boxshadow {
box-shadow: 0 1px 5px rgba(0,0,0,.2); 
}
.fontsize1 { font-size: 1em !important; }
.post_content h2:not(.section-title):not(.section-gray-title) { margin: 2em 0 2em; color: #047973; font-size: 1.5em; background: #f4f4f4; }
.l-mainContent__inner>.post_content { margin: 1em 0; }
.u-fz-s { font-size: 1em !important; font-weight: bold; }
.-circle>.c-balloon__iconImg { border: none; }

.post_content table caption { text-align: left; }
.c-balloon__body { padding: 4px 10px; font-size: 0.9em; }
.post_content td { vertical-align: middle; }
.small { font-size: 0.8em; }
.small2 { font-size: 0.9em; }
.big { font-size: 1.5em !important; }
.big2 { font-size: 1.3em !important; }
.big3 { font-size: 3em !important; }
.big4 { font-size: 1.2em !important; }
.big5 { font-size: 2em !important; }
.big6 { font-size: 1.1em !important; }
.paddingleft10 {
	padding-left: 10px; 
}
.paddingtop10 {
	padding-top: 10px;
}
.paddingbottom10 {
	padding-bottom: 10px;
}
.col333 { color: #333; }
.post_content thead td, .post_content thead th { background: #f4f4f4; color: #333; }
.post_content th { background: #f4f4f4; font-size: 0.9em; }
.post_content td { background: #fff; font-size: 0.85em; }
div.chart_box { border: dashed 6px #f4f4f4; padding: 30px 10px 10px 10px; }
.add_point { font-size: 1.2em !important; }
.big12 { font-size: 1.1em !important; }
.big20 { font-size: 2em !important; }
.col_333 { color: #333 !important; }
.black { color: #333 !important; }
.c-postTitle__ttl { 
	color: #047973; 
}

.green { color: #00aa94 !important; }
.deepgreen { color: #047973 !important; }
.red { color: #ee5253 !important; }
.gray { color: #333; }
.cyan { color: #3ba5b5; }
.white { color: #fff !important; }
.small3 { font-size: 0.7em; }
.post_content h3 { border-left: solid 5px var(--color_htag); padding: .5em 0 .5em 16px; }
.ffb_catch{ font-size: 12px !important; margin-bottom: -3px; }
.hide { display: none !important; }
.c-scrollHint {
	margin-top: 0px;
}
.jump {
	cursor: pointer;
    text-decoration: underline;
    color: var(--color_link) !important;
}
.jump:hover {
	cursor: pointer;
    text-decoration: underline;
    color: #ccc;
}
.linkc {
	cursor: pointer;
    text-decoration: underline;
    color: #008db7;
}
.linkc:hover {
	cursor: pointer;
    text-decoration: underline;
    color: #ccc;
}
.underline {
	text-decoration: underline; 
}
.post_content blockquote::before {
	border-left: 5px #eee solid;
	border-right: none !important;
	left: 0; 
}
input {
margin-right: 3px; 
}
label {
margin-right: 10px; 
}
.white {
	color: #fff !important;
}
.bg_green {
	background: #01aa95;
	padding: 5px 10px; 
}
.inline {
	display: inline !important;
}
.simple_btn {
	background-color: #01aa95;
    border-radius: 50px;
    color: #fff !important;
    padding: 8px 16px;
    font-weight: bold;
	text-decoration: none !important;
}

/* チェックボックスのデザイン */

.goodcheckbox {
padding: 10px;
background: #fff;
border-radius: 4px; 
margin-top: 10px; 
margin-bottom: 10px; 
font-weight: bold;
font-size: 0.9em !important;
}

.goodcheckbox input {
width: 25px;
height: 15px;
}

.yn-chart label {
	display: block;
	max-height: 60px;
	margin-right: 0px !important;
	font-size: 0.9em;
}

/* ボックスのデザイン */

.is-style-intext>.cap_box_ttl {
font-weight: bold; 
}
.is-style-intext>.cap_box_ttl::before {

}

/* 2カラム　レスポンシブじゃない */

/* 全体のコンテナ */
.container-2col {
  display: flex; /* フレックスボックスで配置 */
  width: 100%; /* 親要素に合わせる */
  margin: 0 auto; /* センタリング */
}

/* 各カラムのスタイル */
.column-2col {
  flex: none; /* 各カラムの幅を固定するためにフレックスを無効化 */
}

/* 左カラム */
.column-left-2col {
width: 50%;
}

/* 右カラム */
.column-right-2col {
width: 50%;
}

/* .search_box { margin-top: 40px; } */

.underlogotext { 
	font-size: 0.8em; 
	padding: 4px 8px; 
}
@media screen and (max-width:480px) { 
	.underlogo {
  margin-bottom: 10px; 
}
}

@media screen and (min-width:960px) {
.underlogo {
  margin-top: 10px; 
}
}

/* 画像 */

.imgborder {
	border: 8px solid #f4f4f4;
}

/* 口コミボックスのデザイン */

.kuchikomi-box2 {
background: #e9f5f4;
font-size: 0.9em;
padding: 10px;
margin-bottom: 10px;
margin-top: 10px; 
}

/* 目次のデザイン */
/* .p-fixBtnWrap {
	display: none; 
}
@media screen and (max-width:480px) { 
.p-fixBtnWrap { 
	display: block !important; 
	right: 4px;
	bottom: 4px; 
}
	.p-indexModal__inner {
		padding: 10px !important; 
	}
	#ffb_content {
width: calc(100% - 52px) !important; 
	}
	.ffb_in, .ffb_ex {
		width: 95% !important;
		margin: 0 !important;
		max-width: none !important;
		height: 52px;
		line-height: 34px; 
	}
	.c-modal {
		font-size: 1.2em;
	}
}
.p-toc__ttl:before {
content: "" !important; 
} */
/* 横スクロールを可能にする */
@media screen and (max-width:480px) { 
.p-breadcrumb {
  padding: 8px 1em 4px;
}

.p-breadcrumb__list {
  overflow: scroll;
  padding-left: 0;
  padding-bottom: 8px;
}
}

/* タブCSS */
div.tab-wrapper {
	position: fixed;
	bottom: 0;
	z-index: 999;
	width: 100vw;
    margin-left: calc(-50vw + 50%);
    left: 0px;
}
div.tab-wrapper ul.tab{
/*   width: 100vh;  */
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-wrap: wrap;
}

@media screen and (max-width:480px) { 
div.tab-wrapper ul.tab{
  width: 100%; 
}
}

div.tab-wrapper ul.tab li {
  width: calc((100% - 15px) / 2); 
  margin: 5px 5px 0 0;
  box-sizing: border-box;
  list-style-type: none; 
}
div.tab-wrapper ul.tab li a {
  display: block;
  padding: 10px 5px;
  background: #eee;
  text-align: center;
height: 100%; 
  color: #bbb;
  font-weight: bold;
/* 	opacity: 0.9; */
	border-radius: 15px 15px 0 0;
}
div.tab-wrapper ul.tab li a.is-active{
  background: #047973;
  color: #fff;
  font-weight: bold;
height: 100%; 
}
div.tab-wrapper ul.tab li:nth-child(4n+4){
  margin-right: 0;
}
.tab-content{
display: none;
/* border-top: 4px solid #01aa95; */
position: relative;
top: -5px; 
padding: 10px; 
background: #fff;
}
.tab-content.is-active{
  display: block;
}

/* セレクト */
.categoryType {
font-size: 0.7em; 
border: none; 
padding: 5px 10px; 
background: #eee; 
}
.selectLoading {
background: #01aa95;
opacity: 0.95;
position: fixed;
overflow: auto;
max-width: 100% !important;
max-height: 100% !important; 
inset: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
color: #fff; 
}

/* フッターのデザイン */
.l-footer__foot {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', "メイリオ", sans-serif;
	background: #00aa94; 
	color: #fff;
    padding: 25px 0 20px; 
}

.l-footer .copyright {
	font-size: 14px; 
}

#footer { padding: 0px 0 0 0; font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', "メイリオ", sans-serif; }
#footer .foot_content { margin: 0 0 0px; }
#page_top { background: #00aa94; text-align: center; }
#page_top a { display: block; padding: 21px 0 18px; }
#page_top2 { background: #00aa94; text-align: center; }
#page_top2 a { display: block; padding: 21px 0 18px; }
#footer .foot_nav { margin: 0 0 33px; }
#footer .foot_nav li { display: inline-block; margin: 0 43px 0 0; }
#footer .foot_nav li a { color: #00aa94; font-weight: 600; }
.l-content { margin-bottom: 2em; }
.w-beforeFooter { margin: 0px; }
.cf_nav li {
	display: inline-block;
	margin-left: 20px; 
}
.c-widget__title {
	color: #00aa94 !important
}

/* ヘッダーのデザイン */
#header {background: #f6fffe; }
.l-header { box-shadow: none; }
.l-header__bar { margin: 0 auto; }
.l-header__bar .c-catchphrase { font-size: 14px; line-height: 30px !important; padding: 0px; }
.c-gnav>.menu-item>a .ttl { font-size: 16px; font-weight: bold; }
#breadcrumb {
	margin-top: 20px; 
}
@media screen and (max-width:480px) { 
#breadcrumb { 
	margin-top: 0px; 
	}
}	
.icon_yellow {
	color: #fef100; 
}
.original_nav { 
	background: #f6fffe; 
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', "メイリオ", sans-serif; 
}

.lookatme {
	display: block !important; 
}




@media screen and (max-width:480px) { 

#header {background: #fff; }
.original_nav li.cf_item {
	position: relative; 
	background: #01aa95; 
	margin-bottom: 5px; 
		font-weight: bold; 
}
.original_nav li.cf_item > div > i {
	position: absolute; 
	top: 30px; 
	right: 20px; 
	color: #fff; 
	cursor: pointer; 
	display: none;
}

.original_nav li.cf_item > div.cf_item_a {
	display: inline-block; 
	padding: 20px; 
	font-weight: bold; 
	color: #fff; 
	width: 100%; 
	
}
	
.original_nav div.cf_item_child {
/*display: none;*/
	background: #fff;
	padding: 20px 0px; 
}
.original_nav div.cf_item_child li {
	margin-bottom: 10px; 
	background: #f4f4f4; 
	padding: 10px; 
}
.original_nav div.cf_item_child li > a {
	color: #01aa95; 
}
.c-widget__title.-spmenu {
	color: #333;
	background: #fff; 
}
	
}
@media screen and (min-width:480px) and ( max-width:959px) {
#header {background: #fff; }
.original_nav li.cf_item {
	position: relative; 
	background: #01aa95; 
	margin-bottom: 5px; 
		font-weight: bold; 
}
.original_nav li.cf_item > div > i {
	position: absolute; 
	top: 25px; 
	right: 20px; 
	color: #fff; 
		cursor: pointer; 
}

.original_nav li.cf_item > div.cf_item_a {
	display: inline-block; 
	padding: 20px; 
	font-weight: bold; 
	color: #fff; 
	width: 80%; 
}
	
.original_nav div.cf_item_child {
display: none;
	background: #fff;
	padding: 20px 0px; 
}
.original_nav div.cf_item_child li {
	margin-bottom: 10px; 
	background: #f4f4f4; 
	padding: 10px; 
}
.original_nav div.cf_item_child li > a {
	color: #01aa95; 
}
.c-widget__title.-spmenu {
	color: #333;
	background: #fff; 
}
		
}
@media screen and (min-width:960px) {
#header {background: #f6fffe; }
	.original_nav li.cf_item > div > i {
		display: none; 
	}
.original_nav ul.cf { display: flex;  justify-content: center; margin: 0 auto; max-width: 1200px; }
.original_nav ul.cf > li {
	margin: 0 30px; 
    border-bottom: solid 4px #01aa95;
	width: 100%; 
}
.original_nav ul.cf > li > div > a { 
	display: block;
    font-weight: bold;
	color: #01aa95; 
	padding: 20px 20px 19px;
	text-align: center; 
	height: 100%; 
	text-decoration: none;
}
.original_nav ul.cf > li > div > a:hover {
	background: #01aa95;
    color: #fff;
}
.original_nav { display: block; }
.original_nav ul.cf {
		position: relative;
	}
.original_nav div.cf_item_child {
		display: none;
		position: absolute; 
		background: #f6fffe;
		width:100%;
		height: 250px; 
		left: 0px;
		top: 90px; 
		border: 4px solid #01aa95; 
		font-weight: bold; 
		padding: 20px; 
		z-index: 50; 
		overflow-y: scroll;
	}
.original_nav div.cf_item_child a {
		display: inline; 
	}
	.original_nav .cf_item_a i {
		display: none; 
	}
.l-header__logo { 
	padding: 27px 0 27px !important;
	}
}
.l-header, .l-header__inner {
	position: initial; 
}
.l-content {
	padding-left: 10px;
	padding-right: 10px; 
}














/* 記事上の余白を調整 */
.l-content { padding-top: 1em; }

/* ナビゲーションメニューのデザイン */
.c-smallNavTitle { color: #333 !important; padding-top: 5px; font-size: 0.7em; }

/* 目次のデザイン */
#main_content .p-toc { 
	border: none; 
	width: 100%; 
	margin: 1em auto; 
	max-width: 900px !important; 
	border: 1px solid #01aa95; 
    border-radius: 10px; 
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2);
	margin-bottom: 20px; 
	padding: 0px; 
	background: #f6fffe;
	    position: relative;
}
#main_content .p-toc::before {
	content: url(https://topcreca.com/article/wp-content/uploads/2023/12/content-img.png);
    position: absolute;
    top: -1px;
    left: -1px;
}


.p-toc__ttl {
  position: relative !important;
  color: #01aa95 !important;
  padding: 20px 15px 0px 15px!important;
  margin: 0px !important; 
  margin-bottom: 40px !important; 
  border-radius: 8px 8px 0px 0px !important;
  text-align: center !important;
  font-size: 1.3em !important; 
  font-weight: bold !important; 
border-left: none !important;
border-bottom: none !important;
}
/* .p-toc__ttl:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #01aa95 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
} */
.p-toc__list li { 
	line-height: 1.8em; 
	list-style-type: none; 
	margin-left: 0px; 
	margin-right: 10px; 
	padding-left: 15px !important;
}
.p-toc__list li a { 
	font-size: 0.9em; 
	color: #008db7 !important; 
	text-decoration: underline; 
}
.p-toc__list > li {
	margin-bottom: 15px; 
}
ul.is-style-index li:before {
	width: 0px;
}

/* リンクのデザイン */
.link-sankou {
  padding: 6px 10px;
  margin-right: 6px;
  color: white;
white-space: nowrap;
	background: #047973;
	font-size: 0.9em; 
}

.link-sankou-gray {
  padding: 6px 10px;
  margin-right: 6px;
  color: white;
white-space: nowrap;
	background: #3ba5b5;
	font-size: 0.9em; 
}
.link-gray {
  padding: 6px 10px;
  margin-right: 6px;
  font-size: 75%;
  color: #333;
white-space: nowrap;background: #f4f4f4;border-radius: 6px; 
}

.link-koushiki {
  padding: 6px 10px;
  margin-right: 6px;
  font-size: 75%;
  color: white;
white-space: nowrap;background: #f74a4a;border-radius: 6px; 
}

.link-red {
  padding: 6px 10px;
  margin-right: 6px;
  font-size: 75%;
  color: white;
white-space: nowrap;background: #f74a4a;border-radius: 6px; 
}

/* リンクの下線 */

a.kasen {
  border-bottom: 1px dashed #aaa;
  padding-bottom: 2px;
  display: inline;
  line-height: 2;
	padding-bottom: 3px; 
}

a.kasen_line {
  border-bottom: 1px solid #333;
  padding-bottom: 2px;
  display: inline;
  line-height: 2;
	padding-bottom: 3px; 
}

.p-blogCard__title { font-weight: bold; }

/* 広告を掲載するblockquoteのデザイン */
blockquote.blockquote_koukoku { text-align: center; background: none; padding: 0; padding: 60px 20px 20px 20px; }
blockquote.blockquote_koukoku::before { width: 0 !important; height: 0 !important; }
blockquote.blockquote_koukoku a { border-bottom: none !important; color: #333 !important; text-decoration: none !important; }
.blockquote_koukoku_text  { font-size: 0.7em; opacity: 0.6; }
blockquote.blockquote_koukoku img { display: inline-block; }
blockquote.blockquote_sankou { background: none !important; padding: 20px; }
.blockquote_sankou_text { font-size: 0.7em; opacity: 0.6; margin-bottom: 20px; margin-top: 5px; }
blockquote.blockquote_none { padding: 0; background-color: transparent; }
blockquote.blockquote_none::before { border-left: none; }

/* ブログカード */

.p-blogCard { margin: 1.5em auto 1em; background: #fff; }
.p-blogCard__excerpt { display: none !important; }
.swell-block-accordion { margin-bottom: 10px !important; }
.p-blogCard__inner:before { border: 1px solid #f4f4f4 !important; box-shadow: var(--swl-img_shadow); }
.p-blogCard__caption { font-size: 0.8em; }
.p-blogCard__caption__design {
    color: #fff;
    background: #047973;
    font-size: 0.7em;
}

/* 見出しデザイン（吹き出し）  */
.balloon1 {
    position: relative;
    border-radius: 30px;
    background-color: #047973;
    color: white;
	display: inline-block;
	font-size: 0.9em; 
	margin-bottom: 10px; 
	padding: 5px 14px;
	font-weight: bold; 
}

.balloon1:before {
    position: absolute;
    top: 100%;
    left: 40px;
    height: 0;
    width: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: #047973;
    border-width: 8px;
    content: "";
}

.fukidashi_midashi {
    position: relative;
    padding: 10px 15px;
    margin-bottom: 0.2rem;
    border-bottom: 5px solid;
    color: black;
    font-weight: bold;
    text-align: center;
    background: #00aa94; 
    color: #fff; 
}
.fukidashi_midashi:before,
.fukidashi_midashi:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}
.fukidashi_midashi:before {
    border: 16px solid;
    border-color: transparent;
    border-top-color: #00aa94;
    margin-left: -16px;
}
.fukidashi_midashi:after {
    border: 10px solid;
    border-color: transparent;
    border-top-color: #00aa94;
    margin-left: -10px;
}

.heading_pickup {
	position: relative;
	font-size: 1.5em;
        color: #047973;
        font-weight: bold; 
        text-align: center;
        padding-bottom: 10px; 
	margin-bottom: 30px; 
}
.heading_pickup span {
	position: relative;
	z-index: 2;
}
.heading_pickup::before {
    content: attr(data-en);
    top: -40px;
    color: #047973;
font-size: 0.8em;
display: block;
    font-weight: bold;
	font-weight: bold;
}
.heading_pickup::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	background-image: repeating-linear-gradient(45deg, #047973 0px, #047973 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}


/* h2デザイン */
/* h2 {
  position: relative;border-bottom: 2px solid #eee;padding-bottom: 10px; 
}
    
h2::before {
  content: "";
  position: absolute !important;
  left: 0;
  bottom: -2px; 
  width: 40%;
  height: inherit;
  border-bottom: 2px solid #ba9c7e;
} */


/* ボックスのデザイン */

.adj_box { background: #fff; padding: 10px 10px 0px 10px; margin-top: 50px; border-top: 6px dashed #f4f4f4; margin-bottom: 0px; }

.simple_box {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
		width: 95%; 
}

.simple_box_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 .3em .75em;
	margin-bottom: 20px; 
}

.simple_box_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f31c";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
}

.simple_box_width100 { 
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
}

.top_under_box {
	border-top: 6px dashed #f4f4f4; border-bottom: 6px dashed #f4f4f4; padding: 10px; 
}

.check_box {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
		width: 95%; 
}

.check_box_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 .3em .75em;
	margin-bottom: 20px; 
}

.check_box_title::before {
	/* font-family: "Font Awesome 5 Free"; */
	content: "✓";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
}

.review_box_good {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
		width: 95%; 
}

.review_box_good_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 .3em .75em;
	margin-bottom: 20px; 
}

.review_box_good_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f118";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
}







.review_box_bad {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
		width: 95%; 
}

.review_box_bad_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 .3em .75em;
	margin-bottom: 20px; 
}

.review_box_bad_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f11a";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
}

.profile_box {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
	font-size: 0.9em; 
}

.profile_box_title {
	border-bottom: dashed 6px #eee;
	font-weight: bold; 
	display: block;
	padding: 0 0 .5em 0;
	margin-bottom: 20px; 
	font-size: 1.2em; 
}

.profile_box_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f5ad";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
}

.editorialteam_box {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
	font-size: 0.9em; 
}

.editorialteam_box_title {
	border-bottom: dashed 6px #eee;
	font-weight: bold; 
	display: block;
	padding: 0 0 .5em 0;
	margin-bottom: 20px; 
	font-size: 1.2em; 
}

.editorialteam_box_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\e533";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
}



.simple_box_noicon {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
		width: 95%; 
}

.simple_box_noicon_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 .3em .75em;
	margin-bottom: 20px; 
}

.merit_box {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em;  
	width: 95%; 
}

.merit_box_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 0 .8em 0 !important;
	margin-bottom: 15px !important; 
font-size: 1em !important;
	border-left: none !important; 
	left: -3px; 
	
}

.merit_box_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f004";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
	color: #f74a4a; 
}

.demerit_box {
	border: dashed 6px #f4f4f4;
	margin: 30px auto; 
	padding: 1.25em; 
	width: 95%; 
}

.demerit_box_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 0 .8em 0 !important;
	margin-bottom: 15px !important; 
font-size: 1em !important;
	border-left: none !important; 
	left: -3px; 
}

.demerit_box_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f7a9";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
	color: #3498db; 
}

.q_box {
	border: dashed 6px #f4f4f4;
	margin: 20px auto; 
	padding: 1.25em; 
	width: 95%; 
}
.q_box p {
	margin-bottom: 20px; 
}
.q_box_title {
	font-weight: bold; 
	display: block;
	padding: 0 0 .8em 0 !important;
	margin-bottom: 0px !important; 
font-size: 1.05em !important;
	padding-left: 25px !important; 
	border-left: none !important; 
	left: 0; 
		color: #459a95; 
}
.q_box_dot_title {
border-bottom: dashed 6px #f4f4f4;
margin-bottom: 20px !important;
}
.q_box_title::before {
	content: "Q" !important;
	display: inline-block !important;
	padding-bottom: 2px !important;
	margin-right: 0.2em !important; 
	vertical-align: middle !important; 
	opacity: 1 !important;
	background: none !important;
	left: -2px !important; 
	font-size: 1.6em; 
	bottom: 6px !important; 
	color: #459a95; 
}
.a_box_title { font-weight: bold; color: #459a95; }
.a_box_title::before {
	content: "A" !important;
	display: inline-block !important;
	padding-bottom: 2px !important;
	margin-right: 0.2em !important; 
	vertical-align: middle !important; 
	opacity: 1 !important;
	background: none !important;
	left: 0 !important; 
	bottom: 30px !important; 
	font-size: 1.5em; 
	color: #459a95; 
}

.question_box_title {
	border-bottom: dashed 6px #f4f4f4;
	font-weight: bold; 
	display: block;
	padding: 0 0 .8em 0 !important;
	margin-bottom: 15px !important; 
font-size: 1em !important;
	border-left: none !important; 
	left: -3px; 
}

.question_box_title::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f059";
	display: inline-block;
	padding-bottom: 2px;
	margin-right: 0.2em; 
	vertical-align: middle; 
	color: #333; 
	font-size: 1.2em; 
}


/* 固定テーブルのデザイン */

table.fixed-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: 0.9em;
}
table.fixed-table th, td {
  vertical-align: middle;
  /*padding: 10px;*/
  border: 1px solid #e7e7e7;
  text-align: center;
  white-space: nowrap;
}
table.fixed-table th {
  background: #fff;
	z-index: 1;
}
table.fixed-table td {
  background: #fff;
		z-index: 0;
}
table.fixed-table input[type=checkbox] {
transform: scale(1.2);
}
table.fixed-table td.good, td.soso, td.bad, td.sankaku {
	position: relative;
}

/* table.fixed-table td.good::before {
    font-family: "Font Awesome 5 Free";
	content: "\f004";
	display: inline-block;
	font-size: 6em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #ffa9a9;
	opacity: 0.4;
} */

/* table.fixed-table td.soso::before {
    font-family: "Font Awesome 5 Free";
	content: "\f111";
	display: inline-block;
	font-size: 6em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #e9e2b9;
	opacity: 0.4;
} */

/* table.fixed-table td.sankaku::before {
    font-family: "Font Awesome 5 Free";
	content: "\f11a";
	display: inline-block;
	font-size: 6em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #c7ecee;
	opacity: 0.4;
} */

/* table.fixed-table td.sankaku::before {
    font-family: "Font Awesome 5 Free";
	content: "\f11a";
	display: inline-block;
	font-size: 6em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #c7ecee;
	opacity: 0.5;
	font-weight: bold; 
} */

/* table.fixed-table td.bad::before {
    font-family: "Font Awesome 5 Free";
	content: "\f5b3";
	display: inline-block;
	font-size: 6em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #c7ecee;
	opacity: 0.4;
} */

/* table.fixed-table td.bad::before {
	content: "✕";
	display: inline-block;
	font-size: 6em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #ffa9a9;
	opacity: 0.7;
} */

/* table.fixed-table td.sankaku::before {
	content: "△";
	display: inline-block;
	font-size: 6em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #c7ecee;
	opacity: 0.7;
	font-weight: bold; 
} */


/* 
table.fixed-table td.good::before {
	content: "";
	width: 80px;
	height: 80px;
	position: absolute; 
	vertical-align: middle; 
	border: solid #abdb8f 5px;
	border-radius: 50%;
	box-sizing: border-box;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1; 
	opacity: 0.5;
} */

/* table.fixed-table td.soso::before {
	content: "";
	width: 80px;
	height: 80px;
	position: absolute; 
	vertical-align: middle; 
	border: solid #e9e2b9 5px;
	border-radius: 50%;
	box-sizing: border-box;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1; 
	opacity: 0.5;
} */


table.fixed-table td span.point {
	position: absolute;
	bottom: 0; 
	right: 3px;
	font-size: 0.9em; 
	color: #7f7f7f;
}

._sticky_a {
  position: sticky !important;
  top: 0;
  left: 0;
  background: none;
  border-left: none;
  border-right: none;
		color: #646360 !important;
}
._sticky_a:before {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
/*   border-left: 1px solid #f00;
  border-right: 1px solid #f00; */
  background: #f4f4f4;
  z-index: -1;
}
._sticky_b {
  position: sticky !important;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
	color: #646360 !important;
	font-size: 0.8em !important;
}
._sticky_b:before {
  content: "";
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #f4f4f4;
  z-index: -1;
}
._sticky_ab {
  position: sticky !important;
  top: 0;
  left: 0;
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-right: none;
  z-index: 100 !important;
}
._sticky_ab:before {
  content: "";
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100%;
  height: 100%;
/*   border-top: 1px solid #f00;
  border-bottom: 1px solid #f00;
  border-left: 1px solid #f00;
  border-right: 1px solid #f00; */
  background: #f4f4f4;
  z-index: -1;
}

/*===========
.scroll-box
===========*/

.scroll-box {
  max-height: 400px;
  overflow-x: auto;
  overflow-y: auto;
  padding-right: 10px;
  padding-bottom: 0px;
  -webkit-overflow-scrolling: touch;
}

/*===========
scrollbar
===========*/

/*スクロールバー全体の高さ*/

.scroll-box::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/*スクロールバー全体の背景*/

.scroll-box::-webkit-scrollbar-track {
  background: #eee;
}

/*スクロールバーの動く部分*/

.scroll-box::-webkit-scrollbar-thumb {
  background: #aaa;
  border: none;
}

/*スクロールバーの動く部分のホバー（マウスオーバー）*/

.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #999;
}


/* dialigモーダル */

dialog {
  width: 100% !important;
  height: 100% !important; 
}

.modal-dialog {
  overflow: auto;
	background-color: rgba(0, 0, 0, 0.85);
  max-width: 100% !important;
  max-height: 100% !important; 
}
.modal-content-dialog {
    background: #FFF;
    overflow-y: auto;
    padding: 45px 15px 0px 15px;
    width: 95%;
    max-width: 800px;
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 450px;
    animation: show 0.6s linear 0s;
}
.modal-top-dialog {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
}
.modal-close-dialog {
    text-decoration: none;
    font-size: 2.5rem;
    line-height: 1;
}
.modal-close-dialog:hover, .modal-close-dialog:focus {
  text-decoration: none;
  cursor: pointer;
}

.focusnone {
	outline: none; padding: 0px; position: absolute; top: 0; left: 0; 
}

/* モーダルウィンドウのデザイン */

.modal {
  display: none; 
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  transition: all 1s ease-in-out;
			z-index: 101;
}
.modal-container .img {
    background: #f1f1f1;
    margin-bottom: 15px;
}
.modal-container p {
    margin-bottom: 10px;
}
.modal-container p:last-child {
    margin-bottom: 0;
}
.modal-content {
    background: #FFF;
    overflow-y: auto;
    padding: 40px 25px 20px 25px;
    width: 92%;
    max-width: 800px;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 430px;
    animation: show 0.6s linear 0s;
}
.modal-top {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
}
.modal-close {
    text-decoration: none;
    font-size: 2rem;
    line-height: 1;
}
.modal-close:hover, .modal-close:focus {
  text-decoration: none;
  cursor: pointer;
}
.modal-title {
  color: #FFF;
}
@keyframes show{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.btn-modalstyle {
	background: #fff !important; 
	border: 1px solid #ddd;
	padding: 5px 10px; 
	color: #333 !important;
	font-size: 0.8em;
	display: inline !important;
}
.btn-modalstyle:hover {
	opacity: 0.6;
}


.text-modalstyle {
	cursor: pointer; 
	/*padding: 3px 5px; */
	text-decoration: underline;
}

/* アコーディオン */

.accordion__item {
  margin-top: 10px;
border: 1px solid #01aa95;
border-radius: 10px; 
box-shadow: 0 1px 5px rgba(0,0,0,.2); 
}

.accordion__title {
  position: relative;
  padding: 15px 60px 15px 20px;
  font-weight: bold;
  cursor: pointer;
	color: #01aa95;
}

.accordion__title::after {
	transform: translateY(-25%) rotate(45deg) !important;
    width: 10px !important;
    height: 10px !important;
    margin-left: 10px !important;
    border-bottom: 3px solid #01aa95 !important;
    border-right: 3px solid #01aa95 !important;
    content: '' !important;
    transition: transform .5s !important;
	display: block; 
	position: absolute; 
	right: 25px; 
	bottom: 43%; 
}

.accordion__title[open]::after {
	transform: rotate(225deg) !important;
}

h3.accordion__title {
	margin: 0;
	font-size: 1em; 
  position: relative;
  padding: 15px 60px 15px 20px;
  font-weight: bold;
	line-height: 1.8 !important;
	border-left: none !important; 
}
h3.accordion__title::before {
	left: auto !important;
	opacity: 1; 
	background-size: 0; 
}

/* アコーディオンのコンテンツ */
.accordion__content {
  padding: 0 20px 15px 20px;
  display: none;
}

.accordion__content.is-open {
  display: block;
}

/* アコーディオン展開時の(-)アイコン */
.accordion__item.is-active .accordion__title::before {
transform: rotate(225deg) !important;
}

.accordion__item.is-active .accordion__title::after {
transform: rotate(225deg) !important;
}

.h2designnone {
margin: 0 !important;
    font-size: 1em !important;
    background: none !important;
    padding-right: 60px !important;
    border-left: none !important;
    color: #01aa95 !important;
    line-height: 1.8 !important;
}




/


/* 調整 */

.pickup {
	position: relative;
}

.pickup::after{
	content: url(https://topcreca.com/article/wp-content/uploads/2023/06/pickup_green.png);
	position: absolute; 
	top:1px;
	left:1px; 
}

.rank_one {
	position: relative;
}

.rank_one::after{
	content: url(https://topcreca.com/article/wp-content/uploads/2023/06/one.png);
	position: absolute; 
	top:1px;
	left:1px; 
}

.rank_two {
	position: relative;
}

.rank_two::after{
	content: url(https://topcreca.com/article/wp-content/uploads/2023/06/two.png);
	position: absolute; 
	top:1px;
	left:1px; 
}

.rank_three {
	position: relative;
}

.rank_three::after{
	content: url(https://topcreca.com/article/wp-content/uploads/2023/06/three.png);
	position: absolute; 
	top:1px;
	left:1px; 
}


/* セクションのデザイン */
/* cyan */
.section-bg {
width: 100vw;
margin: 0 calc(50% - 50vw);
padding-left: 10px;
padding-right: 10px; 
margin-bottom: 0px; 
padding-top: 10px;
padding-bottom: 10px;
	margin-bottom: 0px;
}
.section-bg-content {
max-width: 866px; 
margin: 0 auto;
padding: 0px 0px 10px 0px;
}
.section-bg-title {
display: inline-block;
position: relative;
padding: 10px !important;
font-size: 2em !important;
width: 100%;
border-left: none !important;
margin-bottom: 30px !important;
}
.section-bg-cyan {
background: #ecf8f9 !important;
}
.section-col-cyan {
color: #3ba5b5 !important;
}
.section-bg-green {
background: #f6fffe !important;
}
.section-col-green {
color: #01aa95 !important;
}
.section-bg-opal {
background: #e7f3f2 !important;
}
.section-col-opal {
color: #459a95 !important;
}
.section-bg-white {
background: #fff !important;
}
.section-col-white {
color: #00aa94 !important;
}

.section-h4-cyan { 
position: relative;
font-size: 1em !important;
padding: 0.3em;
display: inline; 
color: #3ba5b5;
}
.section-h4-cyan:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px !important;;
  width: 100%;
  height: 9px;
  background: repeating-linear-gradient(-45deg, #3ba5b5, #3ba5b5 2px, white 2px, white 4px);
}
.section-h4-opal { 
position: relative;
font-size: 1em !important;
padding: 0.3em;
display: inline; 
color: #459a95;
}
.section-h4-opal:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px !important;;
  width: 100%;
  height: 9px;
  background: repeating-linear-gradient(-45deg, #459a95, #459a95 2px, white 2px, white 4px);
}
/* kuchikomi */
.section-kuchikomi-good {
color: #01aa95;
}
.section-kuchikomi-good::before {
font-family: "Font Awesome 5 Free";
content: "\f118";
margin-right: 5px;
}
.section-kuchikomi-bad {
color: #50768f;
}
.section-kuchikomi-bad::before {
font-family: "Font Awesome 5 Free";
content: "\f11a";
margin-right: 5px;
}
.section-kuchikomi-check {
color: #01aa95;
}
.section-kuchikomi-check::before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin-right: 5px;
}
.kuchikomi-box {
background: #f9f9f9;
padding: 10px 20px;
font-size: 0.9em; 
margin-bottom: 10px;
border: 1px solid #eee;
}
/* ボックス */
.normal-box-good {
color: #01aa95;
	margin-bottom: 15px; 
}
.normal-box-good::before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin-right: 5px;
}
.normal-box {
background: #fff;
padding: 10px 20px;
margin-bottom: 20px;
box-shadow: 0 1px 5px rgba(0,0,0,.2);
}
/* 調整 */
.mb0 { margin-bottom: 0px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mt0 { margin-top: 0px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.ml0 { margin-left: 0px !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.mr0 { margin-right: 0px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }

/* ピックアップボックス */
.pickup_box {
	position: relative; 
	background: #fff;
	border: dashed 6px #f4f4f4; padding: 20px;
	/*
	background: #f4f4f4;
	box-shadow: 0 1px 5px rgba(0,0,0,.2); 
	*/
}

.pickup_box:before {
	content: url(https://topcreca.com/article/wp-content/uploads/2023/06/pickup_green.png);
	position: absolute; 
	top: -6px;
	left: -6px; 
}


.normal_box {
	border: dashed 6px #f4f4f4; padding: 18px;
}

.normal_box p { margin-bottom: 20px; }


/* h3ランキング見出しデザイン */
h3.rank {
	position: relative; 
	margin-bottom: 0px !important; 
	padding: 0 0 0 10px; 
	font-size: 1.5em; 
	border-left: none; 
	position: relative; 
	padding-left: 33px; 
	color: #00aa94; 
}

h3.rank::before {
	content: "";
	background-image: url(https://topcreca.com/article/wp-content/uploads/2023/08/rank_icon2.png);
	background-repeat: no-repeat; 
	position: absolute;
	text-align: center; 
    width: 30px; 
	height: 30px;
	top: 0px; 
}


p.rank {
	position: relative; 
	margin-bottom: 0px !important; 
	padding: 0 0 0 10px; 
	font-size: 1.5em; 
	border-left: none; 
	position: relative; 
	padding-left: 33px; 
	color: #00aa94; 
	font-weight: bold;
}

p.rank::before {
	content: "";
	background-image: url(https://topcreca.com/article/wp-content/uploads/2023/06/rank_icon.png);
	background-repeat: no-repeat; 
	position: absolute;
	text-align: center; 
    width: 30px; 
	height: 30px;
	bottom: 9px; 
	left: 0px; 
}

.rank_subtitle {
	margin-top: 0px !important;
	margin-bottom: 5px !important;
	font-weight: bold;
	color: #00aa94;
}


/* マーカー */
.p_line {
	 background: #fff5c5;
}

.p_line_s {
	background: linear-gradient(transparent 60%, #fff5c5 60%);  
}
.p_line_yellow {
	background: linear-gradient(transparent 60%, #fff5c5 60%);  
}
.p_line_blue {
	background: linear-gradient(transparent 60%, #cce3ee 60%);  
}
.emp {
font-size: 1.3em;
font-weight: bold;
background: linear-gradient(transparent 60%, #fff5c5 60%);
}
.emp_blue {
font-size: 1.3em;
font-weight: bold;
background: linear-gradient(transparent 60%, #cce3ee 60%);
}
.emp_yellow {
font-size: 1.3em;
font-weight: bold;
background: linear-gradient(transparent 60%, #fff5c5 60%);
}

.p_blue {
	 color: #008db7;
}

.p_red {
	 color: #e74c3c;
}

.p_green {
	 color: #27ae60;
}

/* 見出し */
p.h3_gizi {
  padding: .75em;
  border-left: solid 5px var(--color_htag);
	font-weight: bold;
	font-size: 1.1em; 
	
}

/* シンプルテーブル */
.simple_table { table-layout: fixed; text-align: center !important; }
.simple_table thead th { background: #f4f4f4 !important; border: 1px solid #eee !important; }
.simple_table th { background: #f9f9f9 !important; border: 1px solid #eee !important; }
.simple_table td { background: #fff; white-space: normal; padding-left: 10px !important; min-height: 200px; border: 1px solid #eee !important; }

/* 評価テーブル */
.evaluation_table { table-layout: fixed; text-align: center !important; }
.evaluation_table thead th { background: #f4f4f4 !important; border: 1px solid #eee !important; }
.evaluation_table th { background: #f9f9f9 !important; border: 1px solid #eee !important; height: 100px; vertical-align:middle; }
.evaluation_table td { background: #fff !important; white-space: normal; padding-left: 10px !important; min-height: 200px; }

table.evaluation_table td.good, td.soso, td.bad, td.sankaku, td.like, td.dislike, td.average {
	position: relative;
 	/*z-index: 1; */
}
/* table.evaluation_table td span {
		position: relative;
	z-index: 2;
} */
table.evaluation_table td.good::before {
    font-family: "Font Awesome 5 Free";
	content: "\f004";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 0;
	color: #ffa9a9;
	opacity: 0.4;
}

table.evaluation_table td.soso::before {
    font-family: "Font Awesome 5 Free";
	content: "\f111";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #e9e2b9;
	opacity: 0.4;
}

table.evaluation_table td.sankaku::before {
    font-family: "Font Awesome 5 Free";
	content: "\f11a";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #c7ecee;
	opacity: 0.4;
}

table.evaluation_table td.bad::before {
    font-family: "Font Awesome 5 Free";
	content: "\f5b3";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #c7ecee;
	opacity: 0.4;
}

table.evaluation_table td.average::before {
    font-family: "Font Awesome 5 Free";
	content: "\f118";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #e9e2b9;
	opacity: 0.4;
}

table.evaluation_table td.like::before {
    font-family: "Font Awesome 5 Free";
	content: "\f164";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #ffa9a9;
	opacity: 0.4;
}

table.evaluation_table td.dislike::before {
    font-family: "Font Awesome 5 Brands";
	content: "\f165";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #c7ecee;
	opacity: 0.4;
}

table.winner_table td.winner {
	position: relative;
 	z-index: 1; 
}

table.winner_table th.winner_table_sticky {
	position: sticky; top: -50px; z-index: 100; background: #f2f2f2 !important; 
}

table.winner_table td.winner::before {
    font-family: "Font Awesome 5 Free";
	content: "\f164";
	display: inline-block;
	font-size: 3em; 
	position: absolute; 
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: -1;
	color: #ffb2b2;
	opacity: 0.4;
}

.fixed-table-eval {position: relative;}
.fixed-table-eval td.sankaku::before {
    font-family: "Font Awesome 5 Free";
	content: "\f11a";
	display: inline-block;
	font-size: 2em; 
	position: absolute; 
	top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 1;
	color: #c7ecee;
	opacity: 0.5;
}
.fixed-table-eval td.soso::before {
    font-family: "Font Awesome 5 Free";
	content: "\f118";
	display: inline-block;
	font-size: 2em; 
	position: absolute; 
	top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 1;
	color: #e9e2b9;
	opacity: 0.5;
}
.fixed-table-eval td.good::before {
    font-family: "Font Awesome 5 Free";
	content: "\f59b";
	display: inline-block;
	font-size: 2em; 
	position: absolute; 
	top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	z-index: 1;
	color: #ffa9a9;
	opacity: 0.4;
}

/* ランキングテーブル */
.rank_table { 
	table-layout: fixed;
}
.rank_table th { 
	background: #fff !important; 
	border-top: 6px dashed #f4f4f4 !important;
	border-bottom: 6px dashed #f4f4f4 !important;
	border-left: none; 
	border-right: none; 
	width: 40%; 
}
.rank_table th::before { 
	background: #fff !important; 
}
.rank_table td { 
	background: #fff !important; 
	white-space: normal; 
	text-align: left !important; 
	padding-left: 10px !important; 
	border-top: 6px dashed #f4f4f4 !important;
	border-bottom: 6px dashed #f4f4f4 !important;
	border-left: none; 
	border-right: none !important; 
}
.rank_table td {
	position: relative;
}
.rank_table td p {
	margin-bottom: 0px !important;
}
.rank_table td.good::before {
content: '◎';
    font-size: 3em;
    opacity: 0.15;
    color: #ff4757;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rank_table td.soso::before {
content: '〇';
    font-size: 2.5em;
    opacity: 0.25;
    color: #eccc68;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rank_table td.bad::before {
content: '△';
    font-size: 2.5em;
    opacity: 0.3;
    color: #3498db;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.rank_table td.good span.eval {
	font-size: 2em;
	font-weight: bold;
	color: #ff4757;
}
.rank_table td.soso span.eval {
	font-size: 2em;
	font-weight: bold;
	color: #eccc68;
}

/* eval_table */
.eval_table td {
	position: relative;
}
.eval_table td.good::before {
content: '◎';
    font-size: 3em;
    opacity: 0.15;
    color: #ff4757;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.eval_table td.soso::before {
content: '〇';
    font-size: 2.5em;
    opacity: 0.25;
    color: #eccc68;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.eval_table td.bad::before {
content: '△';
    font-size: 2.5em;
    opacity: 0.3;
    color: #3498db;
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* open */
.open {background: #f4f4f4; padding: 3px 6px; border-radius: 6px; font-size: 0.7em; font-weight: normal; 
 margin-left: 5px; }

/* attention_arrow */
.attention_arrow i { color: #f74a4a; }
.attention_arrow a { color: #f74a4a; border-bottom: 1px dashed #f74a4a; font-weight: bold; padding-bottom: 3px; }

/* ul_link */

.ul_link { padding-left: 5px !important; }
.ul_link a { margin-left: 3px; border-bottom: 1px dashed #aaa; padding-bottom: 3px; }
.ul_link li { line-height: 2; list-style: none; }
.ul_link li::before { 
font-family: "Font Awesome 5 Free";
content: "\f358";
}

.ul_link_up { padding-left: 5px !important; }
.ul_link_up a { margin-left: 3px; border-bottom: 1px dashed #aaa; padding-bottom: 3px; }
.ul_link_up li { line-height: 2; list-style: none; }
.ul_link_up li::before { 
font-family: "Font Awesome 5 Free";
content: "\f35b";
}


.ul_link_out { padding-left: 5px !important; }
.ul_link_out a { margin-left: 3px; border-bottom: 1px dashed #aaa; padding-bottom: 3px; }
.ul_link_out li { line-height: 2; list-style: none; }
.ul_link_out li::before { 
font-family: icomoon;
content: "\e9c5";
	margin-right: 3px; 
}



/* 会話風吹き出し */

.saysprp { 
margin-bottom: 20px; 
	margin-top: 20px; 
}

.saysprp .fuki { 
	margin: 0.7em 0 1.5em 0;
	background-color: #f4f4f4; 
	border: 2px solid #f4f4f4; 
	position: relative; 
	padding: 1em; 
}

.saysprp .fuki p { 
	margin-bottom: 20px; 
}

.saysprp .fuki:before {
	border: 10px solid transparent; 
	border-bottom-color: #f4f4f4; 
	border-top-width: 0; 
	top: -12px; 
	content: "";
	display: block; 
	left: 60px; 
	position: absolute; 
	width: 0; 
	z-index: 1; 
}
.saysprp .fuki-white { 
	margin: 0.7em 0 1.5em 0;
	background-color: #fff; 
	border: 2px solid #fff; 
	position: relative; 
	padding: 1em; 
}

.saysprp .fuki-white p { 
	margin-bottom: 20px; 
}

.saysprp .fuki-white:before {
	border: 10px solid transparent; 
	border-bottom-color: #fff; 
	border-top-width: 0; 
	top: -12px; 
	content: "";
	display: block; 
	left: 60px; 
	position: absolute; 
	width: 0; 
	z-index: 1; 
}
.saysprp .fuki-bgcol-white { 
	background-color: #fff !important; 
	border: 2px solid #fff !important; 
}

.saysprp .fuki_right { 
	margin: 0.7em 0 1.5em 0;
	background-color: #f4f4f4; 
	border: 2px solid #f4f4f4; 
	position: relative; 
	padding: 1em; 
}

.saysprp .fuki_right p { 
	margin-bottom: 20px; 
}

.saysprp .fuki_right:before {
	border: 10px solid transparent; 
	border-bottom-color: #f4f4f4; 
	border-top-width: 0; 
	top: -12px; 
	content: "";
	display: block; 
	right: 60px; 
	position: absolute; 
	width: 0; 
	z-index: 1; 
}

.saysprp > p > img {
	width: 150px; 
	height: 150px; 
}

.saysprp > div > p > img {
	width: 150px; 
	height: 150px; 
}

.saysprp .pickup_box {
	margin-bottom: 20px; 
}

/* 疑似見出し */

.h2_gizi {
	margin: 2em 0 2em;
	color: #047973;
	font-size: 1.5em;
	font-weight: bold; 
	background: #f4f4f4;
	border-left: solid 8px var(--color_htag);
	padding: .75em 1em; 
}

/* spanタグボタンデザイン */

.button003 span {
    background: #f74a4a;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
	width: 80%;
    padding: 15px;
    color: #fff !important;
    transition: 0.3s ease-in-out;
    font-weight: bold;
	text-decoration: none; 
}
.button003 span:hover {
    background: #f74a4a;
    color: #fff !important;
	opacity: 0.6; 
}
.button_mini {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #fff00a;
  color: #000 !important;
  border-bottom: solid 4px #dad032;
  border-radius: 5px;
	text-decoration: none !important; 
	font-weight: bold; 
}
.button_mini:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/* テーブルボタン */
a.btn_03 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
  background: #27acd9;
  border: 1px solid #27acd9;
  border-radius: 100vh;
  box-sizing: border-box;
  padding: 10px 15px;
  color: #fff;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  transition-duration: 0.3s;
  max-width: 120px; 
}
a.btn_03:hover {
  background: #fff;
  color: #27acd9;
}

a.btn_table {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
	text-decoration: none;
	width: 100%;
	max-width: 200px; 
	margin: 0 auto;
	padding: 1rem 3rem 1rem 3rem;
	font-weight: bold;
	background: #27acd9;
	color: #fff;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
	border:solid 2px #27acd9;
	text-decoration: underline;
}

a.btn_table:hover {
	background: #fff;
	color: #27acd9;
}


/* 最後の要素のマージンボトム調整 */
.post_content div>:last-child:not(.container-fluid):not(.bg-light):not(.row):not(.form-select):not(.tab):not(.author-box):not(.author-content):not(.author-info):not(.author-description) , .post_content>:last-child:not(.container-fluid):not(.bg-light):not(.row):not(.form-select):not(.tab):not(.author-box):not(.author-content):not(.author-info):not(.author-description) {
	margin-bottom: 10px !important;
}
/* ステップ */

.step { border: dashed 6px #f4f4f4; padding: 0 15px; width: 95%; }
.step_content { display: -webkit-flex; display: flex; padding: 20px 0; }
.step > div.step_content:not(:last-child) { border-bottom: dashed 6px #f4f4f4; }
.step_content_left { width: 30%; margin-right: 15px; }
.step_content_right { width: 70%; text-align: left; }
.step_content_right p { margin-bottom: 20px;  }
.step_title { color: #333; font-weight: bold; }

@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
.step_content { display: block; }
.step_content_left { width: 100%; margin-bottom: 20px; }
.step_content_right { width: 100%; }
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
.step_content { display: block; }
.step_content_left { width: 100%; margin-bottom: 20px; }
.step_content_right { width: 100%; }
}

.step_num { 
	color: #fff; 
	background: #01aa95; 
	padding: 3px 16px; 
	margin-bottom: 5px; 
	border-radius: 10px; 
	font-weight: bold; 
	font-size: 1em; 
	display: inline-block;
}

.step_num_in_nav {
	color: #fff; 
	background: #01aa95; 
	padding: 3px 6px !important; 
	margin-bottom: 5px; 
	font-weight: bold; 
	font-size: 0.8em; 
	display: inline-block;
	margin-right: 5px; 
}

.step_num_in_nav2 {
	color: #fff; 
	background: #01aa95; 
	padding: 2px 10px !important; 
	margin-bottom: 5px; 
	font-weight: bold; 
	font-size: 0.8em; 
	display: inline-block;
	margin-right: 5px; 
}

.stepbar .stepbarwrap {
  margin: 2em 0;
  position: relative;
}

.stepbar .stepbarwrap .steptitle {
  display: inline-flex;
  align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
  display: inline-block;
  width: 1em;
  height: 1em;
  content: "";
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #01aa95;
z-index: 2;
}

.stepbar .stepbarwrap .steptitle .stepnum {
  padding-left: 1em;
  font-size: 0.8em;
  color: #333;
}

.stepbar .stepbarwrap .steptxt {
  padding-left: 2em;
}

.stepbar .stepbarwrap .steptxt .title {
  margin: 0.5em 0;
  font-weight: bold;
  font-size: 1.2em;
	color: #00aa94;
}

.stepbar .stepbarwrap .steptxt .txt {
  font-size: 0.9em;
}

.stepbar .stepbarwrap .stepline {
  width: 1px;
  height: calc(100% + 1em);
  background-color: #01aa95;
  position: absolute;
  top: 1em;
  left: 0.5em;
  z-index: 1;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
  display: none;
}

@media screen and (max-width: 960px) {
  .stepbar {
    width: 95%;
  }
}
	
/* リンク下線 */ 
.kasen_down { border-bottom: 1px dashed #aaa !important; padding-bottom: 3px; }
.kasen_down::before { font-family: "Font Awesome 5 Free";  content: "\f358"; margin-right: 3px; }
.kasen_up { border-bottom: 1px dashed #aaa !important; padding-bottom: 3px; }
.kasen_up::before { font-family: "Font Awesome 5 Free";  content: "\f35b"; margin-right: 3px; }
.kasen_asp { border-bottom: 1px dashed #aaa !important; padding-bottom: 3px; }
.kasen_asp::before { font-family: "Font Awesome 5 Free";  content: "\f35a"; margin-right: 3px; }


/* チャート */ 
@media screen and (min-width: 751px) {
  .pie-chart-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.box_cir {
  position: relative;
}
@media screen and (max-width: 750px) {
  .box_cir {
    width: 100%;
  }
}
.box_cir .percent {
  position: relative;
  width: 150px;
  height: 150px;
}
.box_cir .percent svg {
  position: relative;
  width: 150px;
  height: 150px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.box_cir .percent svg circle {
  position: relative;
  fill: none;
  stroke-width: 10;
  stroke: #f4f4f4;
  stroke-dasharray: 440;
  stroke-dashoffset: 0;
  stroke-linecap: round;
}
.box_cir .percent .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #333;
}
.box_cir .percent .number .title {
  font-size: 50px;
}
.box_cir .percent .number .title span {
  font-size: 22px;
}
.box_cir .text {
  padding: 10px 0 0;
  text-align: center;
  font-weight: bold;
}
.box_cir .percent .line {
  -webkit-animation: circleAnim 1s forwards;
          animation: circleAnim 1s forwards;
}
.box_cir.point_10 .percent .line {
  stroke-dashoffset: 0;
  stroke: #abdb8f;
}
.box_cir.point_9 .percent .line {
  stroke-dashoffset: 45;
  stroke: #e9e2b9;
}
.box_cir.point_8 .percent .line {
  stroke-dashoffset: 90;
  stroke: #e9e2b9;
}
.box_cir.point_7 .percent .line {
  stroke-dashoffset: 135;
  stroke: #e74c3c;
}
.box_cir.point_6 .percent .line {
  stroke-dashoffset: 180;
  stroke: #e74c3c;
}
@-webkit-keyframes circleAnim {
  0% {
    stroke-dasharray: 0 440;
  }
  99.9%, to {
    stroke-dasharray: 440 440;
  }
}
@keyframes circleAnim {
  0% {
    stroke-dasharray: 0 440;
  }
  99.9%, to {
    stroke-dasharray: 440 440;
  }
}

/* 〇✕ */ 

.maru{background-image:radial-gradient(circle  closest-side, transparent calc(100% - 25px), #e9e2b9 calc(100% - 25px),#e9e2b9 80%,transparent 80%)!important;}
.batsu{background-image: radial-gradient(circle  closest-side, transparent 99.9%,#fff 100%),linear-gradient(45deg,transparent calc(50% - 10px), #ffa9a9 calc(50% - 10px),#ffa9a9 calc(50% + 5px),transparent 50%),linear-gradient(-45deg,transparent calc(50% - 5px), #ffa9a9 calc(50% - 6px),#ffa9a9 calc(50% + 9px),transparent 50%)!important;}
.maru,.batsu{
  width:200px;
  height:70vh;
  max-height:150px;
display:flex;
justify-content: center;
  align-items: center;
  overflow-y: auto;
}




.search-item h4 {
    color: #01aa95;
    font-size: 1.1em;
}

.navi_5 {
background: #01aa95; padding: 2px 8px; color: #fff; font-size: 0.8em; border-radius: 10px; margin-left: 5px; font-weight: bold;
}


/* topクレカボタン */ 

.btn span {
	position: relative;
    display: block;
    background: #fff00a;
    color: #000;
    font-weight: bold;
    transition-property: transform;
    transition-duration: .4s;
    padding: 20px 30px;
    text-decoration: none;
    width: 350px;
    max-width: 95%;
    border-radius: 100vh;
    border-bottom: 4px solid #9b9100;
    margin: auto;
}
.btn span::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 27px;
	width: 10px;
	height: 10px;
	margin: auto;
	border-top: 2px solid #000;
	border-right: 2px solid #000;
	transform: rotate(45deg);
	box-sizing: border-box;
}

.btn span:hover {
	color: #000;
    border-bottom: 5px;
    margin-top: 10px !important;
}

.btn_mini {
	text-align: center; 
}

.btn {
    position: relative; /* 追加 */
    z-index: 0; /* 追加 */
}
.btn a {
    position: relative;
    display: block;
    background: #fff00a;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    transition-property: transform;
    transition-duration: .4s; 
    padding: 20px 30px; 
    text-decoration: none; 
    width: 350px; 
    max-width: 95%; 
}
.btn a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(https://topcreca.com/article/wp-content/uploads/2023/06/btn_bg.png);
    border-radius: 4px;
    bottom: -10px; 
    left: 10px; 
    z-index: -1;
}

.btn a:hover {
	background: #fff667; 
	color: #000; 
	left: 3px; 
	top: 3px; 
}



/* パッと情報 */ 

.patto_info {
margin-bottom: 5px; 
margin-top: 5px; 
display: flex;
width: 100%; 
text-align: center;
}
.patto_info a { color: #fff; }
.patto_info a.kasen_line { border-color: #fff !important; }
.patto_info a.kasen { border-color: #fff !important; }
.patto_info .item {
width: 100%;
padding: 5px 10px; 
margin-left: 5px; 
}
.patto_info .item:first-child {
	margin-left: 0px; 
}
.green_box {
background: #00aa94;
color: #fff;
font-weight: bold; 
}
.gray_box {
background: #f4f4f4;
color: #ccc;
}
@media screen and (max-width: 480px) {
.patto_info {
display: flex;
flex-flow: column;
}
.patto_info .item {
margin-left: 0px; 
margin-bottom: 5px; 
}
}

.patto_info_3col {
margin-bottom: 5px; 
margin-top: 5px; 
display: flex;
width: 100%; 
text-align: center;
}
.patto_info_3col a { color: #fff; }
.patto_info_3col a.kasen_line { border-color: #fff !important; }
.patto_info_3col a.kasen { border-color: #fff !important; }
.patto_info_3col .item {
width: 100%;
padding: 5px 10px; 
margin-left: 5px; 
}
.patto_info_3col .item:first-child {
margin-left: 0px; 
}
.green_box {
background: #00aa94;
color: #fff;
font-weight: bold; 
}
.gray_box {
background: #f4f4f4;
color: #ccc;
}
@media screen and (max-width: 480px) {
.patto_info_3col {
font-size: 0.8em; 
}
.patto_info_3col .item {
padding: 5px; 
}
}

/* ポップアップ（はい） */

.mottoinfo {
background: #f4f4f4;
padding: 5px 10px; 
display: flex; 
width: 100%; 
max-width: 500px; 
}
.mottoinfo_left {
width: 70%; 
}
.mottoinfo_left_item {
font-size: 0.9em; 
}
.mottoinfo_right {
width: 30%; 
text-align: right; 
}
.mottoinfo_right_item {
background: #fff; 
border: 1px solid #ddd;
border-radius: 3px; 
padding: 5px 10px; 
font-size: 0.8em; 
}
.mottoinfo_right_item span {
text-decoration: none !important;
color: #333 !important;
padding: 0px !important;
}
.mottoinfo_right_item span:hover {
opacity: 0.6;
}
.mottoinfo_right_item i {
color: #333; 
border-radius: 100%; 
}

/* 検索周り */

.display_none {
display: none !important; 
}
.search_message {
margin-bottom: 20px; 
}
.search_table {
border: 1px solid #ddd; 
margin-bottom: 15px; 
}
.search_table_1 {
border-bottom: 1px solid #ddd; 
}
.search_table_2 {
}
.search_table_title {
padding: 10px; 
}
.search_table_content {
padding: 10px; 
font-size: 0.9em;
}
.search_fukidashi {
margin-bottom: 30px; 
}
.search_icon {
text-align: center;
}
.search_icon i {
color: #ddd; 
}
.hikaku_icon {
text-align: center;
}
.hikaku_icon i {
color: #ddd; 
}
.button_search {
display: inline-block;
    padding: 0.4em 3em;
    background-color: #f4f4f4;
    box-shadow: 0 4px 0 #ddd;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ddd;
}
.button_search:active {
  box-shadow: none;
  transform: translateY(5px);
}
.button_search:hover {
	opacity: 0.8;
}
.button_search_hikaku {
display: inline-block;
    padding: 0.4em 1.5em;
    background-color: #f4f4f4;
    box-shadow: 0 4px 0 #ddd;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ddd;
}
.button_search_hikaku:active {
  box-shadow: none;
  transform: translateY(5px);
}
.button_search_hikaku:hover {
	opacity: 0.8;
}


.button_yellow {
display: inline-block;
    padding: 0.4em 5em;
    background-color: #ffe001;
    box-shadow: 0 4px 0 #f2d81f;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none !important;
    font-weight: bold;
    border: 1px solid #f2d81f;
	color: #000 !important;
	width: 100%;
	text-align: center;
}
.button_yellow:active {
  box-shadow: none;
  transform: translateY(5px);
}
.button_yellow:hover {
	opacity: 0.8;
}
.button_gray {
display: inline-block;
    padding: 0.4em 5em;
    background-color: #f4f4f4;
    box-shadow: 0 4px 0 #ddd;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #ddd;
	width: 100%;
	text-align: center;
}
.button_gray:active {
  box-shadow: none;
  transform: translateY(5px);
}
.button_gray:hover {
	opacity: 0.8;
}

/* sectionのデザイン */

.section {
  border: 1px solid #01aa95; 
  border-radius: 10px; 
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2);
	margin-bottom: 20px; 
}
.section-white {
	background: #fff;
}
.section-green {
	background: #f6fffe;
}
.section-title {
  position: relative !important;
  background: #01aa95 !important;
  color: #fff !important;
  padding: 1em !important;
  margin: 0px !important; 
  margin-bottom: 40px !important; 
  border-radius: 8px 8px 0px 0px !important;
  text-align: center !important;
  font-size: 1.5em !important; 
  font-weight: bold !important; 
border-left: none !important;
}
.section-title:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #01aa95 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}
.section-h3 {
  border-width: 1px;
  border-style: solid;
  border-radius: 10px; 
  box-shadow: 0 1px 5px rgba(0,0,0,.2);
  -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2);
	margin-bottom: 20px; 
}
.section-title-h3-cyan {
  position: relative !important;
  color: #fff !important;
  padding: 1em !important;
  margin: 0px !important; 
  margin-bottom: 40px !important; 
  border-radius: 8px 8px 0px 0px !important;
  text-align: center !important;
  font-size: 1.5em !important; 
  font-weight: bold !important; 
  border-left: none !important;
}
.section-title-h3-cyan:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #3ba5b5 transparent transparent transparent;
}
.section-bg-opal {
	counter-reset: number 0;
}
.section-title-h3-opal {
  position: relative !important;
  color: #fff !important;
  padding: 1em !important;
  margin: 0px !important; 
  margin-bottom: 40px !important; 
  border-radius: 8px 8px 0px 0px !important;
  text-align: center !important;
  font-size: 1.5em !important; 
  font-weight: bold !important; 
  border-left: none !important;
}

.section-title-h3-opal:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #459a95 transparent transparent transparent;
}
.section-h3-green { 
position: relative;
font-size: 1.1em !important;
padding: 0.3em;
display: inline; 
color: #01aa95;
border-left: none !important;
padding: 5px 0px !important;
font-weight: bold;
line-height:  1em;
}
.section-h3-green:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px !important;;
  width: 100%;
  height: 9px;
  background: repeating-linear-gradient(-45deg, #01aa95, #01aa95 2px, white 2px, white 4px);
}
.section-h3-deepgreen { 
position: relative;
font-size: 1.1em !important;
padding: 0.3em;
display: inline; 
color: #047973;
border-left: none !important;
padding: 5px 0px !important;
font-weight: bold;
line-height:  1em;
}
.section-h3-deepgreen:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px !important;;
  width: 100%;
  height: 9px;
  background: repeating-linear-gradient(-45deg, #047973, #047973 2px, white 2px, white 4px);
}
.section-bgcol-cyan {
  background: #3ba5b5 !important;
}
.section-bdcol-cyan {
  border-color: #3ba5b5; 
}
.section-bgcol-opal {
  background: #459a95 !important;
}
.section-bdcol-opal {
  border-color: #459a95; 
}

.section-content > p {
padding: 0px 20px; 
	margin-bottom: 20px; 
/* margin-bottom: var(--swl-block-margin,2em); */
}
.section-content > h3 {
margin: 20px; 
}
.section-content > .heading_pickup {
margin: 20px; 
}
.section-content > .pickup_box {
margin: 20px; 
}
.section-content > .saysprp .fuki {
margin: 0.7em 0px 1.5em 0px; 
}

.section-content > .saysprp .fuki_right {
margin: 0.7em 20px 1.5em 20px; 
}
.section-content > table {
margin: 20px;
	width: 95%;
}
.section-content > ul li {
margin-left: 20px;
	margin-right: 10px; 
}
.section-content > ol li {
margin-left: 20px;
	margin-right: 10px; 
}
.section-content > .p-blogCard {
margin: 20px;
	width: 90%;
}
.section-content > div {
margin: 20px;
}
.section-content > h4 {
margin: 20px;
}
/* 著者情報 */

.pr-box {
position: relative; 
border: 1px solid #01aa95; 
border-radius: 10px; 
box-shadow: 0 1px 5px rgba(0,0,0,.2); 
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2); 
margin-bottom: 20px; 
padding: 20px 20px 0px 20px; 
}
.pr-box-bgcol-green {
background: #f6fffe;
}
.pr-box-bgcol-white {
background: #fff;
}
.pr-box p { font-size: 0.9em; }
.pr-box:before {
content: url(https://topcreca.com/article/wp-content/uploads/2023/06/pickup_green.png);
position: absolute;
top: -1px;
left: -1px;
}

.qa_box {
	padding: 20px 20px 0px 20px; 
	border: 1px solid #459a95; 
	border-radius: 10px; 
}
.qa_box_bgcol_green {
		background: #f6fffe; 
}
.qa_box_bgcol_white {
		background: #fff; 
}
.qa_box p {
	margin-bottom: 20px !important;
}

/* コメントボックスのデザイン */
.new_comment_box {
position: relative;
padding: 40px 20px 10px 20px; 
margin-top: 60px !important;
margin-bottom: 30px !important;
box-shadow: 0 1px 5px rgba(0,0,0,.2);
background: #fff;
margin-left: 0px !important;
margin-right: 0px !important;
}
.new_comment_box_img {
position: absolute;
top: -50px;
left: 0;
}
.new_comment_box p {
	margin-bottom: 20px; 
}
/* h2h3ボックスのデザイン */
.h2-box {
border: 1px solid #01aa95;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.2);
margin-bottom: 20px;
padding: 0;
}
.h2-box-bg-col-white {
	background: #fff;
}
.h2-box-bg-col-green {
	background: #f6fffe;
}
.h2-box-content {
padding: 15px 15px 0px 15px;
}
.h2-box-title {
	margin-bottom: 30px !important;
}
.h2-box-title-gizi {
	position: relative !important;
    background: #01aa95 !important;
    color: #fff !important;
    padding: 1em !important;
    margin: 0px !important;
    margin-bottom: 40px !important;
    border-radius: 8px 8px 0px 0px !important;
    text-align: center !important;
    font-size: 1.5em !important;
    font-weight: bold !important;
    border-left: none !important;
}
.h2-box-title-gizi:after {
content: "";
    position: absolute;
    right: 0;
    bottom: -20px;
    left: 0;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #01aa95 transparent transparent transparent;
    border-width: 20px 20px 0 20px;
}
.h2-box p {
		margin-bottom: 20px; 
}
.h3-box {
border: 1px solid #01aa95;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.2);
margin-bottom: 20px;
padding: 15px 15px 0px 15px;
}
.h3-box p {
	margin-bottom: 20px; 
}
.h3-box-bg-col-white {
	background: #fff;
}
.h3-box-bg-col-green {
	background: #f6fffe;
}
.h3-box-headline {
text-align: center; 
}
.h3-box-headline {
border-left: none !important;
color: #01aa95 !important;
font-size: 1.3em !important;
padding: 0 !important;
}
.h3-box-decoration-pickup {
position: relative;
}
.h3-box-decoration-pickup::before {
content: url(https://topcreca.com/article/wp-content/uploads/2023/06/pickup_green.png);
position: absolute;
top: -1px;
left: -1px;
}
.h3-box-decoration-content {
position: relative;
}
.h3-box-decoration-content::before {
content: url(https://topcreca.com/article/wp-content/uploads/2023/12/content-img.png);
position: absolute;
top: -1px;
left: -1px;
}
.h3-box-decoration-author {
position: relative;
}
.h3-box-decoration-author::before {
content: url(https://topcreca.com/article/wp-content/uploads/2023/08/ahthor.png);
position: absolute;
top: -1px;
left: -1px;
}
.h3-box-decoration-check {
position: relative;
}
.h3-box-decoration-check::before {
content: url(https://topcreca.com/article/wp-content/uploads/2023/07/check-img.png);
position: absolute;
top: -1px;
left: -1px;
}
.h3-box-author .h3-box-content p {
font-size: 0.9em !important;
margin-bottom: 10px !important;
}
.h3-box-pickup .h3-box-content p {
font-size: 0.9em !important;
		margin-bottom: 10px !important;
}

/* フッターリンクデザイン */
#footer_internal_link {
            background: #f6fffe;
            width: 100%;
        }

        #footer_internal_link_content {
            padding: 20px;
            max-width: 1100px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        #footer_internal_link_content ul li {
            display: inline-block;
            padding: 3px 7px;
            margin: 5px 5px 5px 0;
            font-size: 0.8em;
            text-decoration: none;
            border: 1px solid #00aa94;
            border-radius: 5px;
            background: #fff;
        }

        #footer_internal_link_content ul li a {
            text-decoration: none !important;
        }

        #footer_internal_link_content ul li a:hover {
            opacity: 0.7;
        }

/*         #footer_internal_link_content ul li:first-child {
            display: block;
            font-size: 1.1em;
            font-weight: bold;
            border: none;
            background: #f6fffe;
        }

        #footer_internal_link_content ul li:first-child a {
            border-bottom: 1px dotted #00aa94;
            padding-bottom: 3px;
        } */
.footer_list_first {
	            display: block !important;
            font-size: 1.1em !important;
            font-weight: bold !important;
            border: none !important;
            background: #f6fffe !important;
}
.footer_list_first a {
	            border-bottom: 1px dotted #00aa94 !important;
            padding-bottom: 3px !important;
}

p:empty{display: none;}

.osusume-point-box-list ul {
  padding: 0.5em 0;
  list-style-type: none;
  border: none;
}
.osusume-point-box-list ul li {
  position:relative;
  font-size: 0.9em;
  line-height: 1.5;
}
.osusume-point-box-list ul li:before{
  color: #01aa95;
  font-family: FontAwesome;
  content: "\f00c";
margin-right: 5px; 
}
.osusume-point-box {
  position: relative;
  display: inline-block;
  padding: 4px 18px;
  min-width: 120px;
  max-width: 100%;
  background: #01aa95;
  color: #fff;
  border-radius: 20px;
  font-weight: bold;
  margin-bottom: 10px; 
font-size: 0.9em; 
}
.osusume-point-box:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #01aa95;
}




/* エリア絞り込み検索 */

.filter {
padding-left: 0!important; 
}
.filter li {
padding: 3px 12px;
border-radius: 20px;
border: 1px solid #01aa95;
background: #fff; 
display: inline-block;
font-size: 0.8em;
margin-bottom: 5px; 
cursor: pointer;
}
.area-box-table {
margin-top: 20px;
margin-bottom: 20px; 
word-break: break-all;
}
@media only screen and (max-width:991px){
	.area-box-table {
	}
	.area-box-table th,
	.area-box-table td{
		display: block;
min-height: 10px; 
	}
}
.filter li:nth-child(n+2) {
margin-right: 6px; 
}

#road-side-store-list > div {
  display: none;
}
.is-show-area {
  display: block !important;
}
.is-active-area {
color: #fff !important;
background: #01aa95 !important;
}
.mb20 {
margin-bottom: 20px !important; 
}
.area-box {
    position: relative;
    border: 1px solid #01aa95;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,.2);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2);
    margin-bottom: 20px;
    padding: 20px 20px 0px 20px;
    background: #fff;
}
.area-box-headline {
    border-left: none !important;
    color: #01aa95 !important;
    font-size: 1.3em !important;
    padding: 0 !important;
    font-weight: bold;
    margin-bottom: 20px; 
background-color: transparent !important;
}
.area-box-btn {
    position: relative;
    display: block;
    background: #fff00a;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    transition-property: transform;
    transition-duration: .4s;
    padding: 20px 30px;
    text-decoration: none;
    width: 350px;
    max-width: 95%;
margin-bottom: 20px; 
}
.area-box-btn a {
text-decoration: none; 
display: block;
}
.area-box-btn:hover {
opacity: 0.7;
}

/* normal headline */
.normal_headline_h4 {
	background: #c4e5e1; padding: 3px 10px; color: #01aa95; font-weight: bold; font-size: 1em !important; margin-top: 10px !important; margin-bottom: 10px !important; 
}
.normal_headline_gizi {
	background: #c4e5e1; padding: 3px 10px; color: #01aa95; font-weight: bold; 
}

/* new box */

.infomation_items {
display: flex; 
margin-bottom: 0px; 
}
.infomation_item {
width: 25%;
}
.infomation_item2 {
width: 50%;
}
.infomation_item_title {
color: #01aa95;
font-weight: bold;
background: #c4e5e1;
text-align: center; 
font-size: 0.9em;
}
.infomation_item_content {
text-align: center; 
font-size: 0.9em;
}


.scroll_content { /* リスト全体のスタイル */
  display: flex;
  margin: auto;
  overflow-x: auto;
}
.scroll_content .scroll_content_box { /* 各リストのスタイル */
  width: 80%;
  padding: 8px;
  margin: 5px;
  flex-shrink: 0;
 background: #f4f4f4; 
}

.scroll_content::-webkit-scrollbar {
  height: 12px; /* スクロールバーの高さ */
}
.scroll_content::-webkit-scrollbar-thumb {
  background: #aaa; /* ツマミの色 */
  border-radius: 6px; /* ツマミ両端の丸み */
}
.scroll_content::-webkit-scrollbar-track {
  background: #ddd; /* トラックの色 */
  border-radius: 6px; /* トラック両端の丸み */
}
@media screen and (min-width: 450px) {
  .scroll_content .scroll_content_box {
    width: 45%;
  }
}
.p-toc.is-omitted:not([data-omit=nest]):after {
background: transparent;
}

/* 再チェックボタン */

/* solid015 */
.button_solid015 {
    text-align: center;
}
.button_solid015 .recheck-copy {
    margin-bottom: 5px;
    font-weight: 600;
    color: #6bb6ff;
    letter-spacing: 0.04rem;
    display: inline-block;
    position: relative;
}
.button_solid015 .recheck-copy:before, .button_solid015 .recheck-copy:after {
    display: inline-block;
    position: absolute;
    top: 45%;
    width: 20px;
    height: 3px;
    border-radius: 5px;
    background-color: #6bb6ff;
    content: "";
}
.button_solid015 .recheck-copy:before {
    left: -30px;
    -webkit-transform: rotate( 50deg );
    transform: rotate( 50deg );
}
.button_solid015 .recheck-copy:after {
    right: -30px;
    -webkit-transform: rotate( -50deg );
    transform: rotate( -50deg );
}
.button_solid015 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    padding: 20px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #6bb6ff;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 50px;
}
.button_solid015 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
.button_solid015 a:after {
    position: absolute;
    top: 50%;
    right: 20px;
    transition: 0.2s ease-in-out;
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: translateY(-54%);
}

/* 広告３選のデザイン */

div.imgadjst img {
width: 300px !important; 
height: 250px !important; 
}

.box3sen {
border: 1px solid #01aa95;
background: #f6fffe;
box-shadow: 0 1px 5px rgba(0,0,0,.2);
border-radius: 10px; 
padding: 10px 10px 0 10px; 
}

.padding10 {
padding: 10px; 
}

.borderbottm {
border-bottom: 2px solid #f4f4f4; 
}

.button3sen span.jump {
    background: #fff00a;
    border-radius: 3px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 10px 25px;
    font-family: "Noto Sans Japanese";
    color: #000;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: bold;
}
.button3sen span.jump:hover {
opacity: 0.7;
}
.button3sen span.jump:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #333;
    border-right: 3px solid #333;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button a:hover:after {
    border-color: #FFF;
}


/* タブ */

[data-tab-content]{
  display: none
}

[data-tab-content].active{
  display: block;
}

nav.tabs__nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0 0 1rem;
font-weight: bold;
    border: none;
    border-radius: 3px;
    /*background: #f6fffe;*/
}

.tabs__body {
	margin-bottom: 0 !important;
}

span.tabs__item {
    width: calc(100% / 3);
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    text-decoration: none;
cursor: pointer;
}
span.tabs__item.active {
    position: relative;
    z-index: 1;
		color: var(--color_text) !important;
}
.tabs__item:first-child.active ~ .Tabs__presentation-slider {
  transform: translateX(0) scaleX(0.333);
}
.tabs__item:nth-child(2).active ~ .Tabs__presentation-slider {
  transform: translateX(33.333%) scaleX(0.333);
}
.tabs__item:nth-child(3).active ~ .Tabs__presentation-slider {
  transform: translateX(calc(33.333% * 2)) scaleX(0.333);
}



span.tabs__item2 {
    width: calc(100% / 2);
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    text-decoration: none;
cursor: pointer;
}
span.tabs__item2.active {
    position: relative;
    z-index: 1;
		color: var(--color_text) !important;
}
.tabs__item2:first-child.active ~ .Tabs__presentation-slider {
  transform: translateX(0) scaleX(0.5);
}
.tabs__item2:nth-child(2).active ~ .Tabs__presentation-slider {
  transform: translateX(50%) scaleX(0.5);
}


.Tabs__presentation-slider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform 0.25s;
	border-bottom: 1px solid var(--color_text) !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}
.tabs__content.active {
    animation: fadeIn 0.7s ease 0s 1 normal;
}

/* ギフトカードカテゴリーのテーブルデザイン */
.giftcard_table { table-layout: fixed; }
.giftcard_table th, .giftcard_table td { border: none !important; background: transparent; }
.giftcard_table th { background: #c4e5e1; color: #01aa95; font-size: 1em; padding: 5px 10px; }
/* .giftcard_table tr:nth-child(even) td { background: #fff !important; } */
.giftcard_table tr:nth-child(odd) td { background: #e9f5f4 !important; }
.giftcard_table td {
overflow-wrap: break-word;
  word-wrap: break-word;
  white-space: normal;	
}

.giftcard_list_table {
	display: flex;
	flex-wrap: wrap;
}

.giftcard_list_table_item {
text-align: center;
width: 33%;
padding: 10px; 
}

.giftcard_list_table_item:nth-child(2n+1) {
	background: #e9f5f4 !important
}

/* フッターフローティングボタン共通設定 */
#fix_bottom_menu3 {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f36060;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    left: 0;
    text-align: center;
    opacity: 0.9;
border-radius: 6px;
    padding: 0;
margin-bottom: 3px !important;
    margin-left: 3px !important;
    width: 98%;
}


#fix_bottom_menu3 .menu_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

#fix_bottom_menu3 .menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
padding: 5px 0px;
font-weight: bold;
}


#fix_bottom_menu3 .menu-item span.jump {
    text-align: center;
    color: #fff;
    text-decoration: none;
width: 100%;
display: block;
}

/* スマホ用四角い広告ボタン */
#fix_bottom_menu3 .menu-item:first-child {
    flex-grow: 1;
}

/* 丸い目次ボタン */
#fix_bottom_menu3 .menu-item[data-onclick="toggleIndex"] {
    position: absolute;
    right: 0px;
    bottom: 74px; /* 広告ボタンの上に配置 */
    background-color: #f8f9fa;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
}
#fix_bottom_menu3 .menu-item[data-onclick="toggleIndex"] span {
display: block;
}


/* スマホのみ表示 */
@media (min-width: 768px) {
    #fix_bottom_menu3 {
        display: none;
    }
}

/* フッターフローティングメニュー プライムウォレット */
#fix_bottom_menu4 {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    left: 0;
    text-align: center;
    padding: 0;
	margin-bottom: 0px !important;
}
#fix_bottom_menu4 .menu_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
}

#fix_bottom_menu4 .menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
font-weight: bold;
	margin: 0 !important;
}

#fix_bottom_menu4 .menu-item span.jump {
text-align: center;
width: 100%;
display: block;
color: #fff !important;
text-decoration: none;
}

#fix_bottom_menu4 .menu-item a {
text-decoration: none !important;
	color: #fff !important;
}

#fix_bottom_menu4 .menu-item img {
margin-right:10px; 
}

/* スマホ用四角い広告ボタン */
#fix_bottom_menu4 .menu-item:first-child {
    flex-grow: 1;
}

/* 丸い目次ボタン */
#fix_bottom_menu4 .menu-item[data-onclick="toggleIndex"] {
    position: absolute;
    right: 5px;
    bottom: 10px; /* 広告ボタンの上に配置 */
    background-color: var(--color_main);
    border-radius: 50%;
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
	color: #fff;
	opacity: .9;
}
#fix_bottom_menu4 .menu-item[data-onclick="toggleIndex"] span {
display: block;
}

/* スマホのみ表示 */
@media (min-width: 768px) {
    #fix_bottom_menu4 {
        display: none;
    }
}

/* morebtn css */

.open-read-more {
	cursor: pointer; background: #f4f4f4; padding: 4px 8px; border: 1px solid #eee; font-size: 0.8em; 
}

.open-read-more2 {
	background: #4caf50;
	border-radius: 20%;
	padding: 10px 20px;
	
}

.readMoreWrapper {
    display: block;
    position: relative;
}
.content-hidden::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(    to bottom,
    rgba(255, 255, 255, 0.3) 0%,
    rgb(250, 250, 250) 100% );
  pointer-events: none;
}
.readMore {
  transition: max-height 0.4s ease-out;
  position: relative;
  overflow: hidden;
  max-height: 0px;
}
.read-more-container {
    text-align: center;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}
.read-more-container2 {
    text-align: center;
    position: absolute;
    bottom: -40px;
}
.readMore p:last-child {
    margin-bottom: 0;
}


/* 続きを読む */

.readMoreBlock {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding: 0;
	margin-top: 30px; 
}

.readMoreInner {
  width: 100%;
  border-radius: 3px;
  box-sizing: border-box;
  background: #FFF;
}
.readMoreContainer {
  position: relative;
  height: auto;
  /*max-height: 450px;*/
	max-height: 0px;
  overflow: hidden;
  transition: max-height 0.6s;
}
.readMoreContainer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: 1s;
  background: linear-gradient(to bottom, transparent 40%, #ffffff 100%);
  pointer-events: none;
	z-index: 100;
}
.readMoreContainer.show:after {
  z-index: -1;
  opacity: 0;
}
.readMoreBtn {
  display: block;
  margin: 0 auto;
  padding: 20px 40px;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
	background: #00235c;
	opacity: 0.9;
}

.readMoreContainer p:last-child {
    margin-bottom: 10px;
}



/* タブ */

.tab {
  width: 100%;
  margin-top: 0px;
	margin-bottom: 25px; 
}

.tab__list {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0 !important;
}

.tab__item {
  border-bottom: 3px solid #047973;
  opacity: 0.3;
list-style-type: none; 
}

.tab__item.is-active {
  opacity: 1;
background: #00aa94;
color: #fff;
font-weight: bold; 
}

.tab__text {
  display: block;
  padding: 0.5rem 1rem;
  cursor: pointer;
text-align: center;
}

.tab__content {
  background: #f6fffe;
padding: 10px; 
box-shadow: 0 1px 5px rgba(0,0,0,.2); 
}

.tab__content-item {
  display: none;
}

.tab__content-item.is-active {
  display: block;
}

.tab14 {
width: 25% !important;
}

.tab13 {
width: 33% !important;
}

.tab12 {
width: 50% !important;
}
/* タイマーのデザイン */
.message {
        display: inline-block;
        background-color: #FF5579;
        color: white;
        padding-top: 10px;
        padding-bottom: 4px; 
		padding-left: 10px; 
	    padding-right: 10px; 
        border-radius: 50px;
        position: relative;
        font-size: 1em;
        text-align: center;
        margin: 20px auto;
        font-weight: bold;
	    margin-bottom: 35px; 
    }
    .message::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 20px 20px 0;
        border-style: solid;
        border-color: #FF5579 transparent;
        display: block;
        width: 0;
    }
    .timer {
        background-color: white;
        color: #FF5579;
        padding: 0px 10px;
        border-radius: 10px;
        display: inline-block;
        margin: 0 5px;
        font-size: 1.2em;
    }
    .highlight {
        color: black;
    }

    /* スマホ用のスタイル */
    @media (max-width: 600px) {
        .message {
            font-size: 1.0em;
        }
        .timer {
            font-size: 1.0em;
            padding: 5px 10px;
        }
    }

/* ギフトカード 換金率セクションのデザイン */
.rate-section-title {
	color: #3ba5b5; border-left: none !important; font-size: 1.4em !important; margin-bottom; 0px !important; 
}

/* レスポンシブテーブル */

.responsive-table {
	margin-bottom: 10px; 
	table-layout: fixed;
}
.responsive-table th {
	background: #f7f7f7;
	border: 1px solid #efefef;
}
.responsive-table td {
	border: 1px solid #efefef;
	text-align: left;
	word-wrap: break-word;
    white-space: normal;
}

/* スマホ */
@media screen and (max-width: 480px) {

	.responsive-table th {
		width: 100%;
		display: block;
	}
	.responsive-table td {
		width: 100%;
		display: block;
	}

}

/* 検索比較表のデザイン */

.scroll-box {
max-height: 450px; 
}

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
right: 0; 
  width: 100%;
  padding: 1.25rem 1rem 1rem;
  background-color: #fff;
box-shadow: 0 -8px 16px rgba(0,0,0,.08);
z-index: 1000;
margin-bottom: 0 !important; 
}

/* スマホ */
@media (width < 600px) {
.sticky-footer-1 {
width: 55%;

}
.sticky-footer-2 {
width: 20%;
}
.sticky-footer-3 {
width: 24%;
}
.sticky-footer-4 {
width: 1%;
}
.hikaku-btn {
}
}

/* PC */
@media (1200px <= width) {
.sticky-footer-1 {
width: 83%;

}
.sticky-footer-2 {
width: 8%;
}
.sticky-footer-3 {
width: 8%;
}
.sticky-footer-4 {
width: 1%;
}
.hikaku-btn {
padding: 5px 15px; 
}
}

/* タブレット */
@media (600px <= width < 1200px) {

}




/* クリック、タッチを無効化 */
.pointer_events_none {
pointer-events: none; 
}

/* 比較ボタンのデザイン */
.hikaku-btn {
background: #047973 !important; 
font-weight: bold; 
opacity: 0.5;
pointer-events: none; 
color: #fff !important; 
font-size: 1.2em;
}
.hikaku-btn-on {
opacity: 1;
pointer-events: auto; 
}
/* リセットボタンのデザイン */
.reset-btn {
margin-top: 6px; 
padding: 5px 10px; 
background: #fff; 
font-size: 0.9em;
border: none;
}


.rank::before {
background: #047973;
position: relative;
top: -19px;
left: -16px;
color: #fff;
padding: 5px 15px; 
font-size: 1.5em;
font-weight: bold; 
}
.numcounter1::before {
content: "1";	
}
.numcounter2::before {
content: "2";	
}
.numcounter3::before {
content: "3";	
}
.numcounter4::before {
content: "4";	
}
.numcounter5::before {
content: "5";	
}
.numcounter6::before {
content: "6";	
}
.numcounter7::before {
content: "7";	
}
.numcounter8::before {
content: "8";	
}
.numcounter9::before {
content: "9";	
}
.numcounter10::before {
content: "10";	
}
.numcounter11::before {
content: "11";	
}
.numcounter12::before {
content: "12";	
}
.numcounter13::before {
content: "13";	
}
.numcounter14::before {
content: "14";	
}
.numcounter15::before {
content: "15";	
}
.numcounter16::before {
content: "16";	
}
.numcounter17::before {
content: "17";	
}
.numcounter18::before {
content: "18";	
}
.numcounter19::before {
content: "19";	
}
.numcounter20::before {
content: "20";	
}
.numcounter21::before {
content: "21";	
}
.numcounter22::before {
content: "22";	
}
.numcounter23::before {
content: "23";	
}
.numcounter24::before {
content: "24";	
}
.numcounter25::before {
content: "25";	
}
.numcounter26::before {
content: "26";	
}
.numcounter27::before {
content: "27";	
}
.numcounter28::before {
content: "28";	
}
.numcounter29::before {
content: "29";	
}
.numcounter30::before {
content: "30";	
}

/* table_counterのデザイン */

.table_counter {
display: inline-block;
color: #fff;
background: var(--color_main);
padding: 2px 7px;

font-size: 0.8em;
position: absolute;
top: 5px;
left: 5px; 
opacity: 0.8;
}


/* 検索ボックス */

.search_box {
display: flex;
flex-wrap: wrap;
	margin-bottom: 0px; 
}
.search_box_item {
border: 1px solid #e7e7e7;
padding: 4px 8px;
border-radius: 2px; 
margin-right: 5px; 
cursor: pointer; 
margin-bottom: 5px; 
}
.search-box-item-check {
background: #f5fcf6; 
border: #0eb03a 1px solid;
color: #0eb03a;
}


.modal-dialog-footer {
background: rgb(247, 247, 247);
padding: 0px; 
border-top: 1px solid rgb(239, 239, 239);
position: sticky;
left: 0px;
right: 0px;
bottom: 0px; 
height: 50px; 
}
.modal-dialog-content {
padding: 45px 15px 15px 15px;
}
.modal-dialog-footer-items {
padding: 8px 12px;
display: flex;
justify-content: flex-end;
}
.modal-dialig-footer-item-btn {
cursor: pointer;
padding: 4px 12px;
background-color: rgb(14, 176, 58);
border-radius: 4px;
color: #fff; 
font-weight: bold; 
height: 40px; 
}
.modal-dialig-footer-item-btn-on {
	pointer-events: auto;
	opacity: 1;
}
.modal-dialig-footer-item-reset {
padding: 4px 12px;
cursor: pointer;
}



.search-item {
border: 1px solid #01aa95;
border-radius: 4px; 
padding: 10px; 
margin-bottom: 10px; 
	box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
	background: #f6fffe;
	
}
.search-item-num {
display: inline-block; 
padding: 5px 15px; 
background: rgb(14, 176, 58); 
color: #fff; 
font-weight: bold;
}
.search-item-num2 {
display: inline-block; 
padding: 2px 8px; 
background: rgb(14, 176, 58); 
color: #fff; 
font-weight: bold;
}

.search-item-h3 {
margin: 0px !important; 
margin-top: 10px !important;
	border-left: none !important;
	padding-left: 0 !important;
	padding-top: 0px !important; 
	font-size: 1.5em !important;
}
.search-item-h3::before {
background: none !important; 
}
.search-item-h3 small {
color: #666;
}
.search-item-content {
display: flex;
}
.search-item-content-left {
width: 35%;
margin-right: 10px; 
}
.search-item-content-right {
width: 65%;
}
@media all and (max-width: 600px) {

.search-item-content {
display: block;
}
.search-item-content-left {
width: 100%;
}
.search-item-img {
text-align: center;
}
.search-item-content-right {
width: 100%;
margin-top: 8px; 
}

}

.search-item-number {
display: inline-block;
padding: 5px 10px;
background: var(--color_main);
color: #fff;
font-weight: 700;
}

/* 地域エリア検索システムデザイン */

.search-check-items {
display: flex;
flex-wrap: wrap;
}
.search-check-item {
border: 1px solid #e7e7e7; 
border-radius: 20px; 
padding: 2px 8px; 
font-size: 0.9em; 
display: inline; 
margin-right: 5px; 
margin-bottom: 5px; 
cursor: pointer; 
background: #fff;
}
.search-check-item:hover {
opacity: 0.7;
}
.search-check-item-checked {
background: #f5fcf6;
border: 1px solid #0eb03a !important;
color: #0eb03a;
background: #fff;
}
.search-check-item-checked::before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin-right: 5px; 
}
.search-check-item-announce {
border: 1px solid #e7e7e7; 
border-radius: 20px; 
padding: 5px 10px; 
font-size: 0.9em; 
display: inline; 
margin-right: 5px; 
margin-bottom: 5px; 
cursor: pointer; 
background: #fff;
}





.search-radio-items {
display: flex;
padding: 10px; 
margin-bottom: 0px; 
}
.search-radio-item-left {
width: 40px;
display: flex;
align-items: center; /* 上下中央寄せ */
justify-content: center; /* 左右中央寄せ（必要なら） */
}
.search-radio-item-right {
}
.radio-check-btn {
border: 1px solid #666;
border-radius: 50%;
width: 16px; 
height: 16px; 
cursor: pointer;
display: flex;
align-items: center; /* 上下中央寄せ */
justify-content: center; /* 左右中央寄せ（必要なら） */
}
.radio-check-btn-checked {
border: 1px solid #005cc8;
}
.radio-check-btn-inner {
border-radius: 50%;
width: 8px; 
height: 8px; 
}
.radio-check-btn-inner-checked {
background: #005cc8;
}

/* ボタンのデザイン */

.is-style-btn_solid span.jump {
    box-shadow: 0 6px 0 #069583;
    color: #fff;
    font-weight: 700;
    transition: box-shadow .25s, -webkit-transform .25s;
    transition: transform .25s, box-shadow .25s;
    transition: transform .25s, box-shadow .25s, -webkit-transform .25s;
    z-index: 1;	
	background: #01aa95;
	color: #fff !important;
    display: inline-block;
    letter-spacing: var(--swl-letter_spacing, 1px);
    line-height: 1.5;
    margin: 0;
    min-width: var(--the-min-width);
    padding: var(--the-padding);
    position: relative;
    text-decoration: none;
    width: 100% !important;
	margin-bottom: 7px !important;
	position: relative;
	top: 0;
	font-size: 1.1em;
}

.is-style-btn_solid span.jump:hover {
	transform: translate3d(0, 5px, 0);
	opacity: 0.9;
}

/* チェックリスト */

.checklist {
display: flex;
flex-wrap: wrap;
}
.checklist2 {
}
.checklist .checklist_item, .checklist2 .checklist_item {
margin-right: 8px; 
}
.checklist .checklist_item::before, .checklist2 .checklist_item::before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
margin-right: 2px; 
font-weight: bold;
}



/* スマホ固定メニュー */

[data-scrolled=true] #fix_bottom_menu2 {
    bottom: 0;
}
@media not all and (min-width: 960px) {
    #fix_bottom_menu2 {
        display: block;
        padding-bottom: calc(env(safe-area-inset-bottom)* .5);
    }
}

#fix_bottom_menu2 {
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    transition: bottom .4s;
    width: 100%;
    z-index: 100;
}
#fix_bottom_menu2 {
    color: #333;
}
#fix_bottom_menu2 {
    bottom: -60px;
    /* display: none; */
    left: 0;
    position: fixed;
margin-bottom: 0px !important;
}
#fix_bottom_menu2:before {
    display: block;
    z-index: 0;
}
#fix_bottom_menu2::before {
    background: #fff;
    opacity: 0.9;
}
#fix_bottom_menu2:before {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}
#fix_bottom_menu2 .menu_list {
    align-items: center;
    display: flex;
    height: 50px;
    justify-content: space-between;
    padding: 2px 0 0;
    position: relative;
    z-index: 1;
margin-bottom: 0px !important;
}
#fix_bottom_menu2 .menu-item {
    flex: 1 1 100%;
    margin: 0;
    padding: 0;
    text-align: center;
list-style: none;
/* font-size: 0.7em; */
}
#fix_bottom_menu2 .menu_btn .open_btn {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
#fix_bottom_menu2 .menu-item i {
    color: inherit;
    display: block;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}
#fix_bottom_menu2 span {
    color: inherit;
    display: block;
    line-height: 1;
    margin-top: 4px;
    width: 100%;
	font-size: 12px; 
}

/* trをクリックさせないようにするcss */
.overlay {
 position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* 薄い膜の色 */
}
tr:has(.overlay) {
pointer-events: none; /* 下の内容にクリックが届かないようにする */	
	z-index: 100;
}


/* セル自体にrelativeを指定して、overlayを重ねやすく */
.disabled-row th,
.disabled-row td {
  position: relative;
}

/*--------------------------------------
コンバージョンアップボタン 吹き出し赤色（中央寄せ）
--------------------------------------*/
.button2,
span.button2,
button.button2 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
.button2-c-wrap {
  margin: 0;
  text-align: center;
margin-top: 30px; 
}
span.button2-c {
  font-size: 1em;
  width: 100%;
  position: relative;
  padding: 0.5rem 2rem 1rem 1.8rem;
  color: #000;
  background: #fff00a;
  -webkit-box-shadow: 0 5px 0 #ffde00;
  box-shadow: 0 5px 0 #ffde00;
max-width: 400px; 
text-decoration: underline;
}
span.button2-c span {
  position: absolute;
  top: -1.5rem;
  left: calc(50% - 170px);
  display: block;
  width: 340px;
  padding: 0.25rem 0;
font-size: 0.9em;
  color: #000;
  border: 3px solid #ffde00;
  border-radius: 100vh;
  background: #fff;
}
span.button2-c span:before,
span.button2-c span:after {
  position: absolute;
  left: calc(50% - 10px);
  content: "";
}
span.button2-c span:before {
  bottom: -10px;

  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #ffde00 transparent transparent transparent;
}

span.button2-c span:after {
  bottom: -7px;

  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

span.button2-c i {
  margin-right: 0.75rem;
}

span.button2-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
opacity: 0.9;
  color: #000;
  -webkit-box-shadow: 0 2px 0 #ffde00;
  box-shadow: 0 2px 0 #ffde00;
}
/*--------------------------------------
コンバージョンアップボタン 緑色（中央寄せ）
--------------------------------------*/
.button1,
a.button1,
button.button1 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.button1-wrap {
  margin: 30px 0;
  text-align: center; 
}

a.button1-c {
    font-size: 1.15rem;
    width: 100%;
    position: relative;
    padding: 0.25rem 2rem 0.5rem 3.5rem;
    color: #fff;
    background: #32b16c;
    -webkit-box-shadow: 0 5px 0 #2c9d60;
    box-shadow: 0 5px 0 #2c9d60;
}

a.button1-c span {
  font-size: 0.8rem;

  position: absolute;
  top: -10px;
  left: calc(50% - 150px);

  display: block;

  width: 300px;
  padding: 0.2rem 0;

  color: #32b16c;
  border: 2px solid #32b16c;
  border-radius: 0.5rem;
  background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.button1-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);

  color: #fff;
  background: #30a967;
  -webkit-box-shadow: 0 2px 0 #2c9d60;
  box-shadow: 0 2px 0 #2c9d60;
}

a.button1-c:hover:before {
  left: 2rem;
}
/*--------------------------------------
コンバージョンアップボタン 黄色（中央寄せ）
--------------------------------------*/
.button3,
a.button3,
button.button3 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.button3-wrap {
  margin: 30px 0;
  text-align: center; 
}

a.button3-c {
    font-size: 1.15rem;
    width: 100%;
    position: relative;
    padding: 0.25rem 2rem 0.5rem 2.1rem;
    color: #333;
    background: #fff100;
    -webkit-box-shadow: 0 5px 0 #2c9d60;
    box-shadow: 0 5px 0 #ccc100;
}

a.button3-c span {
    font-size: 0.8rem;
    position: absolute;
    top: -10px;
    left: calc(50% - 150px);
    display: block;
    width: 300px;
    padding: 0.2rem 0;
    color: #333;
    border: 2px solid #333;
    border-radius: 0.5rem;
    background: #fff;
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.button3-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #333;
  background: #fff100;
  -webkit-box-shadow: 0 2px 0 #ccc100;
  box-shadow: 0 2px 0 #ccc100;
}

a.button3-c:hover:before {
  left: 2rem;
}



/* YES・NO チャート */
.yn-chart{
  margin:0 auto 2rem;
  padding: 15px 15px 20px 15px;
  background:#f7f7f7 !important;
border: 1px solid #efefef !important;
}
.yn-chart__add{
  background: #4C53E6;
  color:#fff;
  padding: 5px 10px !important;
  margin:0 !important;
  text-align:center;
  display:inline-block;
  line-height: 1.5 !important;
	font-weight: bold;
}
.yn-chart__title{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 1em !important;
  font-size:1.2em !important;
  font-weight: 600 !important;
  color:#26231f;
  letter-spacing: 1px !important;
  line-height:1.5 !important;
}
.yn-chart__title:before,.yn-chart__title:after {
  content: "";
  flex: 1;
  height: 1px;
  background: #26231f;
  display: block;
}
.yn-chart__title:before {
  margin-right: 0.7em;
}
.yn-chart__title:after {
  margin-left: 0.7em;
}
.yn-chart__ex{
  text-align:center;
	margin-bottom: 20px; 
}
.yn-chart > div{
  display:none;
  padding-top: 100px;
  margin-top: -100px;
}
.yn-chart > div.yn-chart__display{
  display:block;
}
.yn-chart > div > figure{
  margin:1em 0 2em;
}
.yn-chart > div > figure img{
  display:block;
}
.yn-chart > div > p{
  margin:2em 0 0 !important;
  padding: 0.8em 1em 0.8em 4.3em !important;
  background:#fff;
  position:relative;
}
.yn-chart > div > p:before{
  content: "Q";
  background: #4C53E6;
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1em;
  min-width: 48px;
}
.yn-chart > div ul{
  margin:2em 0 0 !important;
  padding:0 !important;
  list-style:none !important;
  border:none;
}
.yn-chart > div ul li {
  margin: 0 0 10px 0px!important;
  padding: 0 !important;
}
.yn-chart > div ul li:last-child{
  margin:0px !important;
}
.yn-chart > div ul li a{
  background: #4C53E6;
  display: block;
  padding: 1em;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0,0,0,.07);
font-size: 1.1em;
font-weight: bold;
}
.yn-chart > div ul li a:hover{
  //box-shadow: inset 2px 2px 0 0 #ee8f81, 2px 2px 0 0 #ee8f81, 2px 0 0 0 #ee8f81, 0 2px 0 0 #ee8f81;
  //transition: 0.1s ease-in-out;
  //opacity:1;
  //transform: translateY(3px);
opacity: 0.8;
  box-shadow: 0 2px 2px rgba(0,0,0,.22);
}

.simple_purple_btn {
  background: #4C53E6;
  display: block;
  padding: 1em;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0,0,0,.07);
font-size: 1.1em;
font-weight: bold;
}
.simple_purple_btn:hover{
  //box-shadow: inset 2px 2px 0 0 #ee8f81, 2px 2px 0 0 #ee8f81, 2px 0 0 0 #ee8f81, 0 2px 0 0 #ee8f81;
  //transition: 0.1s ease-in-out;
  //opacity:1;
  //transform: translateY(3px);
opacity: 0.8;
  box-shadow: 0 2px 2px rgba(0,0,0,.22);
}


.yn-chart > div ul li:before{
  content:unset !important;
}
.yn-chart__result{
  background:#fff;
  padding:1em;
}
.yn-chart__result-title{
  color: #26231f;
  font-size: 1.2em !important;
  font-weight:600 !important;
  padding: 0 !important;
  margin: 0 0 1em !important;
  border-bottom: 1px dashed #26231f;
}
@media screen and (max-width: 560px) {
  .yn-chart{
    padding:10px;
  }
  .yn-chart > div > figure {
    margin: 0.5em 0;
  }
  .yn-chart > div > p {
    margin: 1em 0 0 !important;
   padding: 0.8em 1em 0.8em 2.5em !important;
  }
  .yn-chart > div ul {
    margin: 1em 0 0 !important;
  }
  .yn-chart__title{
    font-size:1.2em !important;
  }
  .yn-chart__title:before {
    margin-right:0.3em;
  }
  .yn-chart__title:after {
    margin-left:0.3em;
  }
  .yn-chart__ex,.yn-chart__add{
    font-size:0.9em !important;
  }
  .yn-chart > div > p:before{
    min-width: 30px;
  }
}

/* Twitterシェアボタンなど */
.p-tw-btn,.p-check-btn{
  text-align:center;
  margin:10px 0px !important;
  padding:0 !important;
}
.p-tw-btn a,.p-check-btn a{
  display:block;
  box-shadow: 0 3px 5px rgba(0,0,0,.15);
  color:#fff !important;
  font-weight:600 !important;
  text-decoration:none !important;
  padding:1em;
  border-radius:5px;
font-size: 1.1em;
font-weight: bold;
}
.p-tw-btn a{
  background:  #00acee;
}
.p-check-btn a{
  background:#4C53E6;
font-size: 1.1em;
}
.p-tw-btn a:hover,.p-check-btn a:hover{
  //transform: translateY(3px);
opacity: 0.8;
  box-shadow: 0 2px 2px rgba(0,0,0,.22);
}
.yn-chart > div > p.p-check-btn{
  background: none !important;
  padding: 0 5em !important;
}
.yn-chart > div > p.p-check-btn:before{
  content:unset !important;
}
@media screen and (max-width: 800px) {
  .p-tw-btn,.p-check-btn{
  margin:10px 0px !important;
  }
}
@media screen and (max-width: 560px) {
  .p-tw-btn,.p-check-btn{
  margin:10px 0px !important;
  }
  .yn-chart > div > p.p-check-btn{
    padding: 0 3em !important;
  }
}
.yn-chart__big {
font-size: 1.2em;
font-weight: bold; 
}
.yn-chart-btn {
  border-radius: 5px;
}

/* ランキングへGO */

.simple_btn_blue a {
	display: block;
	background-color: #007bff;
	font-size: 1.1em;
	box-shadow: 0 3px 5px rgba(0,0,0,.15);
	color: #fff;
	text-decoration: none;
	width: 100%;
	padding: 1em;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

.bgcolgray td {
	background: #f9f9f9 !important;
}
.bgcolyellow td {
	background: yellow !important;
}
#breadcrumb a {
	color: #333 !important;
}

/* 口コミのデザイン */
.reveiw_system_box {
color: #444;
box-shadow: 0 0 5px rgba(0,0,0,.16);
padding: 15px 15px 0px 15px;
display: flex;
position: relative; /* 子要素を基準に位置を指定するため */
align-items: center; /* 子要素を中央縦寄せ */
margin-bottom: 20px;
background: #f4f4f4;
}
.reveiw_system_box_left {
width: 15%;
    display: flex; /* 子要素を中央寄せするためにflexを設定 */
    flex-direction: column; /* 子要素を縦方向に配置 */
    justify-content: center; /* 縦方向の中央寄せ */
    align-items: center; /* 横方向の中央寄せ */
}
.reveiw_system_box_right {
width: 85%;
}
.reveiw_system_box_left span.reveiw_system_img {
height: 80px; 
}
.reveiw_system_box_right {
margin-left: 10px; 
}
.reveiw_system_box_title {
font-weight: bold;
/*border-bottom: 2px solid #EB2353;*/
margin-top: 30px; 
}
.reveiw_system_box_star {
margin-right: 10px; 
}
.reveiw_system_box_published {
margin-right: 10px; 
}
.reveiw_system_box_tag {
font-size: 0.8em; 
padding-right: 10px; 
}

/* 右上に配置するためのスタイル */
.reveiw_system_box_up {
    position: absolute; /* 親要素の位置を基準に配置 */
color: #047973;
border: 1px solid #047973;
border-radius: 50px !important; 
    top: 7px; /* 上端から10px離す */
    right: 5px; /* 右端から10px離す */
    padding: 5px 10px; /* 内側の余白 */
    font-size: 0.6em; /* 文字サイズ調整 */
    border-radius: 5px; /* 角を丸める */
    cursor: pointer; /* マウスホバー時にポインタ表示 */
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .reveiw_system_box {
        flex-direction: column; /* 子要素を縦に並べる */
    }
.reveiw_system_box_title {
margin-top: 0px; 
}
    .reveiw_system_box_left,
    .reveiw_system_box_right {
        width: 100%; /* 幅を100%に */
        margin-left: 0; /* 右側の余白をリセット */
    }
    .reveiw_system_box_left {
padding-top: 20px; 
}
    .reveiw_system_box_right {
        margin-top: 10px; /* 左側のコンテンツとの間に余白を追加 */
    }
}

.review_system_headline {
display: flex;
border: 1px solid #00235c;
background: #00235c;
		max-width: 300px; 
}
.review_system_headline_left {
width: 100px;
padding: 5px 10px; 
background: #fff;
    display: flex; /* フレックスボックスを有効化 */
    align-items: center; /* 垂直方向の中央寄せ */
    justify-content: center; /* 水平方向の中央寄せ */
}
.review_system_headline_right {
width: 200px;
color: #fff;
padding: 5px 10px; 
    display: flex; /* フレックスボックスを有効化 */
    align-items: center; /* 垂直方向の中央寄せ */
	    justify-content: center; /* 水平方向の中央寄せ */
	margin-top: 10px; 
}

.bar-chart-002 {
    font-size: .9em;
}

.bar-chart-002 > div {
    display: flex;
    align-items: center;
    margin-bottom: -4px;
}

.bar-chart-002-box {
cursor: pointer;
color: #007185;
}
.bar-chart-002-box:hover {
text-decoration: underline;
	color: #EB2353 !important;	
}

.bar-chart-002 dt.chart-002-first {
    width: 50px;
    min-width: 50px;
	font-weight: normal;
}

.bar-chart-002 dt.chart-002-second {
    width: 40px;
    min-width: 40px;
margin-left: 5px; 
	font-weight: normal;
}


.bar-chart-002 dd {
    width: 100%;
    margin: 0;
    border-radius: 3px;
    background-color: #eee;
}

.bar-chart-002 span {
    display: inline-block;
    padding-right: 15px;
    border-radius: inherit;
    background-color: #FFC312;
    color: #fff;
    font-weight: 600;
    line-height: 25px;
    text-align: right;
    white-space: nowrap;
}

.review_modal {
	color: #EB2353;
	font-size: 0.8em;
	border: 1px solid #EB2353;
	padding: 5px 10px;
	box-shadow: 2px 3px rgba(0,0,0,.16);
	background: #fff;
}

.review_headline {
position: relative;
  padding: 1.5rem;
  text-align: center;
  border: 2px solid #000;
  background: #fff;	
}

.review_headline:before,
.review_headline:after {
  position: absolute;
  content: '';
}

.review_headline:before {
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
}

.review_headline:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.review_headline i {
  font-size: 30px;
  line-height: 60px;
  position: absolute;
  z-index: 1;
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  text-align: center;
}

.review_headline span {
  position: relative;
  z-index: 1;
	font-size: 1.2em;
	font-weight: bold;
}
/* FAQのh3のデザイン */
h3.faq_q {
	border-left: none !important; 
}

/* PRのデザイン */
.c-prNotation[data-style=small] {
	font-size: 0.9em;
}

/* ヘッダーのデザイン */
#content {
	padding-top: 2em;
}



/* 比較表デザイン */

.table-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    scrollbar-width: none;
}

.table-scroll {
    overflow-x: auto;
    position: relative;
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
}

.custom-table {
    width: max-content; /* テーブルの内容に合わせて幅を設定 */
    min-width: 100%;    /* 最小幅を親要素に合わせる */
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
}

/* 通常のセルのスタイル */
.custom-table th {
    padding: 5px;
    border: 1px dashed #7bd6cb;
    white-space: nowrap;
color: #2b3333;
}


.custom-table td {
    padding: 5px;
    border: 1px dashed #7bd6cb;
    white-space: nowrap;
color: #2b3333;
}

/* ヘッダー行のベーススタイル */
.custom-table thead th {
    background-color: var(--color_main);
    font-weight: bold;
    position: sticky;
    top: 0;
color: #fff;
}

/* 左列（名前列）のベーススタイル */
.custom-table td:first-child,
.custom-table th:first-child {
    position: sticky;
    left: 0;
    
}

/* 左上のヘッダーセル（「名前」）の特別なスタイル */
.custom-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 4;  /* 最前面 */
    background-color: var(--color_main);
	color: #fff;
}

/* 名前列（データ部分）のz-index */
.custom-table tbody td:first-child {
    z-index: 2;  /* グラデーションより下、他のセルより上 */
    background-color: white;
    border-right: 1px dashed #7bd6cb;
}

/* 非表示行の制御 */
.custom-table tr.hidden-row {
    display: none;
}

.custom-table2 {
    border-collapse: collapse;
    margin: 20px 0;
    background-color: white;
}
.custom-table2 thead th {
    background-color: #f5f5f5;
    font-weight: bold;
    position: sticky;
    top: 0;
color: #2b3333;
}
/* 左列（名前列）のベーススタイル */
.custom-table2 td:first-child,
.custom-table2 th:first-child {
    position: sticky;
    left: 0;
}

/* グラデーション効果のオーバーレイ */
.gradient-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 20%,
        rgba(255, 255, 255, 0.5) 40%,
        rgba(255, 255, 255, 0.8) 60%,
        rgba(255, 255, 255, 0.9) 80%,
        rgba(255, 255, 255, 1) 100%
    );
    pointer-events: none;
    z-index: 3;  /* 固定データ列より上、ヘッダーより下 */
}

.show-more-btn {
    display: block;
    width: 200px;
    margin: 0px auto;
    padding: 5px 30px;
    background-color: var(--color_main);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-align: center;
font-weight: bold;
}

.show-more-btn:hover {
    opacity: 0.8;
}

/* 展開時のスタイル */
.table-scroll.expanded .gradient-overlay {
    display: none;
}

.table-scroll.expanded .custom-table tr.hidden-row {
    display: table-row;
}
.table-scroll.expanded .custom-table2 tr.hidden-row {
    display: table-row;
}

.mtm5 {
margin-top: -5px;
}

.bglightgreen {
background: #f7f9ff !important;
}


.toc-original {
position: relative !important;
    padding: 20px 15px 15px 15px !important;
    margin: 0px !important;
    margin-bottom: 15px !important;
    border-radius: 8px !important;
    text-align: center !important;
    width: 100%;
    max-width: 900px !important;
    border: 1px solid #01aa95;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
    background: #f6fffe;
}
.toc-original::before {
    content: url(https://topcreca.com/article/wp-content/uploads/2023/12/content-img.png);
    position: absolute;
    top: -1px;
    left: -1px;
}
.toc-original-ttl {
    position: relative !important;
    color: #01aa95 !important;
    padding: 20px 15px 0px 15px !important;
    margin: 0px !important;
    margin-bottom: 10px !important;
    border-radius: 8px 8px 0px 0px !important;
    text-align: center !important;
    font-size: 1.3em !important;
    font-weight: bold !important;
    border-left: none !important;
    border-bottom: none !important;
}
.toc-original-ttl:before {
    content: "\e918";
    display: inline-block;
    font-family: icomoon;
    margin-right: .5em;
    padding-bottom: 2px;
    vertical-align: middle;
}
.toc-original-ul {
padding-left: 0px !important; 
}
.toc-original-ul li {
text-align: left;
font-weight: normal;
list-style-type: none;
margin: 10px 0;
}
.toc-original-ul li a {
text-decoration: underline;
color: #008db7 !important; 
}
.toc-original-ul-child {
padding-left: 20px !important; 
}

.toc-original-ul-child li {
font-size: 0.95em;
}

.toc-original-ul-child li:before {
    background: none;
    border-bottom: 2px solid;
    border-left: 2px solid;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    content: "" !important;
    height: calc(1em - 2px);
    left: -10px;
    opacity: .75;
    position: absolute;
    top: 0;
    -webkit-transform: none;
    transform: none;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    width: 6px;
padding-left: -10px; 
color: var(--color_text);
}


:where(figure) {
margin: 0 0 1em !important;
}

.textaligncenter {
text-align: center;
}

.width33 {
width: 33% !important;
}

.width50 {
width: 50% !important;
}

.width800 {
max-width: 750px !important; 
}
.width400 {
max-width: 400px !important; 
}
.margin0auto {
margin: 0 auto;
}

.bgwhite {
background: #fff !important;
}

.swell-block-fullWide__inner {
padding: 10px;
position: relative;
z-index: 1;
}


/* 3カラムテーブル */

.three-emp-table thead th {
background: var(--color_main) !important;
color: #fff !important;
text-align: center;
font-size: 0.95em !important;
padding: 2px;
border: 1px dashed #7bd6cb;
}

.three-emp-table tbody td {
padding: 4px 10px;
border: 1px dashed #7bd6cb;
}

/* タブ */
.tabs {
  display: flex;
  flex-wrap: wrap;
}

.tab_label {
  color: var(--color_main);
  font-weight: bold;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  padding: 5px 0;
  margin: 0 5px; 
  text-align: center;
  background: #e7f7ef;
  border-radius: 50px;
}

.tab_label:hover {
  opacity: 0.75;
}

.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}

input[name^="tab_switch"] {
  display: none;
}

.tabs input:checked + .tab_label {
  color: #fff;
  background-color: var(--color_main);
  border-radius: 50px;
}

.tabs input:checked + .tab_label::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: var(--color_main) transparent transparent transparent;
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

.tab_content {
  position: relative;
  animation: fadeIn 1s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* シンプルなテーブルのデザイン */

.genkinka_table_parent {
  width: 100%;
  max-width: 100%;
}

.genkinka_table {
  width: 100%;
  table-layout: fixed; /* 重要：テーブルの幅を固定 */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.genkinka_table td,
.genkinka_table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all; /* 強制的に折り返し */
  white-space: normal;   /* 改行を許可 */
  vertical-align: middle;   /* 上揃え（見た目を整える） */
}




/* 画像とテキスト */

    .tiny-layout {
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 12px 0;
    }
    
    .tiny-image {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
    }
    
    .tiny-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* 必要に応じて角を丸くする場合は下記を有効に */
      /* border-radius: 50%; */
    }
    
    .tiny-text {
      font-weight: bold;
    }

.review_system_box_pickup {
	font-size: 0.8em;
	font-weight: bold;
	position: absolute;
	top: 5px;
	left: 10px;
}



/* 続きを読む機能のスタイル（グラデーション効果付き） */
.readmore {
  position: relative;
}

.readmore-preview {
  max-height: 130px;
  overflow: hidden;
  position: relative;
}

.readmore-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
}

.readmore-toggle {
  cursor: pointer;
  margin-bottom: 20px;
  margin-top: 5px;
  position: relative;
  z-index: 2;
font-size: 0.9em;
}

.readmore-toggle:hover {
  color: #004080;
}

.readmore-content {
  display: none;
  padding: 10px 0;
}

.readmore-content.open {
  display: block;
  animation: fadeIn 0.5s;
background: transparent;
font-size: 1em;
margin-left: 0;

}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* リボンのデザイン */

.ribbon-wrapper {  
  display: block;
  position: relative;
  box-sizing: border-box;
  }

.ribbon {  
  display: inline-block;
  position: absolute;
  top: -6px;
  left: 10px;
  margin: 0;
  padding: 10px 0;
  z-index: 2;
  width: 56px;
  text-align: center;
  color: white;
  font-size: 17px;
  background: linear-gradient(#a6ffae 0%, var(--color_main) 100%);
  border-radius: 2px 0 0 0;
  }

.ribbon:before {
  position: absolute;
  content: '';
  top: 0;
  right: -6px;
  border: none;
  border-bottom: solid 6px var(--color_main);
  border-right: solid 6px transparent;
}
.ribbon:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 28px solid var(--color_main);
  border-right: 28px solid var(--color_main);
  border-bottom: 10px solid transparent;
}


/* ボタンのデザイン */

.btn2 {
    position: relative;
    z-index: 0;
}

.btn2 span,.btn2 a {
    position: relative;
    display: block;
    background: #fff00a;
    color: #000 !important;
    font-weight: bold;
    border-radius: 4px;
    transition-property: transform;
    transition-duration: .4s;
    padding: 20px 30px;
    width: 350px;
    max-width: 95%;
text-align: center;
font-size: 1em;
}

.btn2 span::after,.btn2 a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(https://topcreca.com/article/wp-content/uploads/2023/06/btn_bg.png);
    border-radius: 4px;
    bottom: -10px;
    left: 10px;
    z-index: -1;
}

.btn2 a:hover,.btn2 span:hover {
	background: #fff667; 
	color: #000; 
	left: 3px; 
	top: 3px; 
}

/* 続きを読む */

.readMoreBlock {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0px;
	margin-top: 20px; 
}

.readMoreInner {
  width: 100%;
  border-radius: 3px;
  box-sizing: border-box;
}
.readMoreContainer {
  position: relative;
  height: auto;
  /*max-height: 450px;*/
	max-height: 0px;
  overflow: hidden;
  transition: max-height 0.6s;
}
.readMoreContainer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: 1s;
  background: linear-gradient(to bottom, transparent 40%, #ffffff 100%);
  pointer-events: none;
	z-index: 100;
}
.readMoreContainer.show:after {
  z-index: -1;
  opacity: 0;
}
.readMoreBtn {
  display: block;
  margin: 0 auto;
  padding: 15px;
  border: 0;
  background: none;
  cursor: pointer;
  color: #fff;
  font-weight: bold;
	background: #ff9600;
	opacity: 0.9;
	width: 100%;
	text-decoration: underline;
	border-radius: 50px;
    font-size: 1.1em;
    box-shadow: 4px 3px rgba(0, 0, 0, .16);
}

.readMoreContainer p:last-child {
    margin-bottom: 10px;
}

/* セクションの背景 */

.section-full-bgcol-gray {
background: #f7f7f7;
}
.section-full-bgcol-white {
background: #fff;
}
.section-full-bgcol-lightgreen {
background: #f6fffe;
}

.section-full-headline-title {
	display: block; 
	font-size: 1.5em !important; 
	font-weight: bold !important; 
	color: #2b3333 !important; 
	background: transparent !important;
	margin-top: 0px !important; 
border-left: none !important;
}
.section-full-headline-copy {
	display: block; 
	font-size: 3em !important; 
	font-weight: bold !important; 
	margin-bottom: 0px !important; 
}

@supports (--css:variables) {
	.alignfull {
		left: calc(50% - 50vw);
		width: 100vw;
	}
}


/* 黄色いボタン */

.button__yellow span.jump, .button__yellow a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    max-width: 350px;
    padding: 10px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #fff00a;
    border-radius: 50px;
    border: 0.2rem solid var(--color_text);
    box-shadow: 0.2rem 0.2rem 0px 0.1rem #ddd;
    color: var(--color_text) !important;
}
.button__yellow span.jump:hover, .button__yellow a:hover {
  transform: translate3d(0.2rem, 0.2rem, 0);
  box-shadow: none;
  opacity: 1;
  transition: all 0.2s;
}
.button__yellow span.jump:after, .button__yellow a:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid #543618;
    border-right: 3px solid #543618;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

/* 著者情報ボックス */

.author-box {
            border: 1px solid #01aa95;
            border-radius: 8px;
            padding: 20px 16px;
            background-color: #f6fffe;
            transition: all 0.3s ease;
	margin-bottom: 10px;
        }

        .author-box:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .author-content {
            display: grid;
            grid-template-columns: 80px 1fr;
            gap: 20px;
            align-items: start;
        }

        .author-image {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
        }

        .author-info {
            min-width: 0;
        }

        .author-name {
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 8px;
            line-height: 1.3;
        }

        .author-role {
            font-size: 0.8em;
            color: #7f8c8d;
            margin-bottom: 12px;
            font-weight: 500;
        }

        .author-description {
            font-size: 0.9em;
            line-height: 1.5;
            margin-bottom: 12px;
        }

        .description-text {
            display: inline;
        }

        .description-hidden {
            display: none;
        }

        .description-hidden.show {
            display: inline;
        }

        .ellipsis {
            display: inline;
        }

        .ellipsis.hide {
            display: none;
        }

        .read-more-btn {
            background: none;
            border: none;
            color: var(--color_text);
            font-size: 0.9em;
            cursor: pointer;
            text-decoration: underline;
            padding: 0;
            font-weight: 500;
            transition: color 0.3s ease;
            margin-left: 4px;
        }
        .read-more-btn:hover {
opacity: 0.8;
        }

        .author-meta-expanded {
            display: none;
            margin-top: 12px;
        }

        .author-meta-expanded.show {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #7f8c8d;
            background-color: #ecf0f1;
            padding: 5px 10px;
            border-radius: 12px;
			font-size: 0.85em;
        }
.meta-item a:hover { opacity: 0.8; }
        .meta-icon {
            width: 14px;
            height: 14px;
            opacity: 0.7;
        }

        /* スマホ対応（レスポンシブ） */
        @media (max-width: 768px) {
            .container {
                padding: 20px;
                margin: 10px;
            }

            .author-content {
                grid-template-columns: 1fr;
                gap: 16px;
                text-align: center;
            }

            .author-image {
                justify-self: center;
                width: 100px;
                height: 100px;
            }

            .author-description {
                text-align: left;
            }

            .author-meta-expanded {
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .container {
                padding: 16px;
                margin: 5px;
            }

            .author-box {
                padding: 20px 16px;
            }

            .author-content {
                gap: 12px;
            }

            .author-image {
                width: 80px;
                height: 80px;
            }

            .meta-item {
                padding: 3px 6px;
            }
        }