@charset "utf-8";

/*
基本的に弄らない記述　↓↓
---------------------------------------------------------------------------*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


body {
	font-family: sans-serif;
	line-height: 1.6;
	color: #333;
	background: #FAFAFD;
}

img,video {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 1.6rem;
}

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

.link_text01 a{
	text-decoration: underline;
	color: #204E99;
}

footer{
	background: #0A123E;
	max-width: 750px;
	margin: 0 auto;
	padding:1rem;
	text-align: center;
	color: #fff;
}

footer ul li{
	list-style: none;
	display: inline-block;
	border-right: 1px solid #fff;
	padding: 0px 5px;
}
footer ul li:last-child{
	border-right: none;
}


/* コンテナ枠：中央揃え、最大幅設定 */
.container {
	width: 100%;
	max-width: 750px; /* PC時の最大幅 */
	margin: 0 auto;
	background: #fff;
}

.fv {
	width: 100%;
	pointer-events: none;
	text-align: center;
	background: #F7F3EB;
}
.fv img {
	width: 100%;
	height: auto;
	margin-bottom: 0px;
}

.pad10{
	padding: 16px;
}

.pad10_color{
	padding: 16px;
	background:#FFFFDF;
}
.pad10_white{
	padding: 16px;
	background:#fff;
}

/********文字*******************************/
p {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 16px;
	color: #333333;
}

h2 {
	font-size: 22px;
	line-height: 1.5;
	margin-top: 24px;
	margin-bottom: 12px;
}

h3 {
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 12px;
}

.kome{
	font-size: 0.6em;
	color: #a9a9a9;
	text-align: right;
}
.kome2{
	font-size: 0.6em;
	color: #a9a9a9;
}
.right01{
	text-align: right;
}
sup{
	font-size: 0.6em;
	color: #a9a9a9;
}

span.del {
    text-decoration-line: line-through;
    text-decoration-style: double;
    text-decoration-color: red;
}

.pr{
	font-size: 0.6em;
	border:1px solid #fff;
	margin-left:10px;
	padding:0px 5px;
	font-weight: normal;
}
/********サイズなど*******************************/
.b{font-weight: bold;}
.noclick{pointer-events: none;}
.w100{width: 100%; height: auto;}
.w90{width: 90%; height: auto; display: block; margin: 0 auto;}
.w80{width: 80%; height: auto; display: block; margin: 0 auto;}
.w50{width: 50%; height: auto; display: block; margin: 0 auto;}
.w20{width: 20%; height: auto;}
.w10{width: 10%; height: auto;}

.mt0{margin-top:0px!important;}
.m0{margin-bottom:0px!important;}
.m5{margin-bottom:5px!important;}

.m1rem{margin-bottom:1rem!important;}
.m2rem{margin-bottom:2rem!important;}
.x0-6em{font-size: 0.6em;}
.x0-8em{font-size: 0.8em;}
.x1-2em{font-size: 1.2em;}
.x1-5em{font-size: 1.5em;}
.x2em{font-size: 2em;}

.pc { display: block !important; }
.sp { display: none !important; }


@media (max-width: 768px){
	.pc { display: none !important; }
    .sp { display: block !important; }
	
	.sp_1rem{font-size: 1rem!important;}
}

@media (max-width: 320px){
	.pc2 { display: none !important; }
    .sp2 { display: block !important; }
}

.indigo {color: #4B0082;}
/***********************************************************************************************/
/***********************************************************************************************/
.shoken_point{
	margin-top: 10px;
	border:1px solid #20509b;
}
.shoken_point_in{
	padding:10px;
}
.shoken_point h3{
	background: #20509b;
	color: #fff;
	padding:5px;
	margin-bottom: 0px;
}
.shoken_point p{
	margin-bottom: 0px;
}

.rank_text{
	padding:15px;
	background: #edf2f7;
	margin-bottom: 10px;
	border-radius: 10px;
}

.waku_simple {
  border: 2px solid #0A123E;
  padding: 1rem;
  border-radius: 18px;
  background: #fff;
}

.ribbon-wrapper {
  display: block;
  width: 100%; 
  text-align: center;
  margin: 0px auto; 
  padding: 0 40px; /* 【重要】左右に40pxの空間を作り、リボン端(35px)がはみ出しても切れないようにする */
  box-sizing: border-box;
  position: relative;
  z-index: 1; 
  background: transparent;
  line-height: 1; 
}

.ribbon9 {
  display: inline-block;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
	margin-bottom: 1rem;
}
.ribbon9:before {/*左側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: -2;
  border: 20px solid #ff6464;
  border-left-color: transparent;/*山形に切り抜き*/
}

.ribbon9:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: -2;
  border: 20px solid #ff6464;
  border-right-color: transparent;/*山形に切り抜き*/
}

.ribbon9 h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 30px;
  line-height: 45px;
  font-size: 18px;
  color: #FFF;
  background: #ff4848;/*真ん中の背景色*/
}
@media screen and (min-width: 768px) {
	.ribbon9 h3 {padding: 0 100px!important;}
}

.ribbon9 h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #ce3e3e;/*左の折り返し部分*/
}
.ribbon9 h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #ce3e3e;/*右の折り返し部分*/
}

/*****冒頭TOP3**********/
/*　おすすめ　*/
.pick_wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0rem;
}
.pick_pic {
  flex: 0 0 40%;
}
.pick_pic img {
  width: 100%;
  height: auto;
  display: block;
}

.pick_text {
  flex: 1;    /* 残りの幅すべて */
  display: flex;
  align-items: center;
}
.pick_text p {
  margin: 0;
}


/* 並列レイアウト */
.parallel {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
}

.parallel_in {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid #7187a8;/*#4D4D4D*/;
  background: #fff;
  border-radius: 18px;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
.parallel_in_pad{
	padding:0.3rem 0.5rem 1rem;
  flex: 1;  
  display: flex; 
  flex-direction: column;
}
.parallel_title{
	background-color: #204E99;
	border-radius: 15px 15px 0px 0px;
	padding:5px;
	color: #fff;
}

.link_text01 .crown_name{
	font-size: 18px;
}

.parallel_in:first-child{
	background: #FFF7DE;
/*	border:2px dotted #fdee7c;*/
	/*outline:2px solid #fcec5e;
	outline-offset: -4px;*/
	
}

.parallel_in:first-child .parallel_title{
	background-color: #ff4848;
	border-radius: 15px 15px 0px 0px;
	padding:5px;
	text-align: center;
	font-weight: bold;
}

/* --- PC表示 (768px以上) --- */
@media screen and (min-width: 768px) {
  .parallel {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* --- スマホ表示 (767px以下) --- */
@media screen and (max-width: 767px) {
  .parallel {
    grid-template-columns: 1fr 1fr;
  }
  .parallel_in:first-child {
    grid-column: 1 / -1; 
  }
	.parallel_in:first-child .crown_name{
		font-size: 21px;
	}
}

.parallel_in p{
	margin-bottom: 0px;
}

.cta_wrap {
  margin-top: auto;
  padding-top: 1rem;
}

/* --- 画像サイズ調整（レスポンシブ必須） --- */
.parallel_in img {
  max-width: 100%;
  height: auto;
	margin-bottom: 10px;
}

/* --- 新しい箱の基本設定（PC含む） --- */
.p_body {
  display: block; /* 通常は縦積み */
  width: 100%;
  /*margin-top: 10px;*/
}
.p_img {
  text-align: center; /* PCでは画像を中央に */
}

.p_body2 .crown_name{
	justify-content: left;
	margin-bottom: 10px;
}

/* --- スマホ表示 (767px以下) の特別ルール --- */
@media screen and (max-width: 767px) {
  
  .parallel_in:first-child .p_body {
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    text-align: left; 
  }

  .parallel_in:first-child .p_img {
    width: 40%; 
    flex-shrink: 0;
    margin-bottom: 0; 
  }

  .parallel_in:first-child .p_body p {
    margin: 0;
    font-size: 14px;  
    line-height: 1.5;
  }
	.parallel_in:first-child img{
		margin-bottom: 0px;
	}
}

/****************ボタン*******************************/
.custom-button {
	width: 100%;
	margin: 0px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #FF1D25;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 10px;
	font-size: 1.2rem;
	font-weight: bold;
	box-shadow: 0 5px 0 #BC0900;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: all 0.1s ease-in-out;
	margin-bottom: 2em;
}

/* 光沢のオーバーレイ */
.custom-button::before {
	content: "";
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    position: absolute;
    /*top: 0;*/
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ホバーでへこむ */
.custom-button:hover {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #BC0900;
}

/* 矢印を右端に固定 */
.custom-button .arrow {
  position: absolute;
  right: 16px;
  pointer-events: none;
	margin-left: 10px;
}

/****タブ切り替えBOX****************/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #194085;
  display: block;
  order: -1;
}
.tab-label {
  color: #fff;
  background: #D3D3D3;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
.tab-switch:checked+.tab-label {
  background: #194085;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  opacity: 1;
  transition: .5s opacity;
/*  box-shadow: 0 0 3px rgba(0,0,0,.2);*/
}
/* ラジオボタン非表示 */
.tab-switch {
  display: none;
}
/*****比較表************************************************************************/
/**********************************************************************************/
table{
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	text-align: center;
}
table th,table td{
	border: 1px solid #eee;
	padding:5px;
}

.scroll_table {
  position: relative;
  overflow-x: auto;
	font-size: 0.7rem;
}

.scroll_table .icon{
	font-size: 1rem;
}

.scroll_table table th{
	background:#0A123E;
	color: #fff;
	width:90px;
}

.scroll_table td{
	vertical-align: middle;
}

/*デモ取引を隠す*/
.tab01 .scroll_table table th:nth-child(6){display: none;}
.tab01 .scroll_table table td:nth-child(7){display: none;}

/*タブごとの幅*/
.tab01 .scroll_table table th:nth-child(2) {width: 130px;}
.tab02 .scroll_table table th{width: 80px;}
.scroll_table table th:last-child{width: 150px;}

/*@media only screen and (max-width: 749px) {
	.scroll_table table th{width:100px;}
}*/



/* 通常行 */
.scroll_table td:nth-child(odd) {background: #fff;}
.scroll_table td:nth-child(even) {background: #FAFBFC;}
/*.scroll_table td:nth-child(8){font-size: 1rem;}*/
.scroll_table td .custom-button{margin-bottom: 0px;min-height: 80px;font-size: 0.9rem!important;}

/* 1位 */
.scroll_table tr:nth-child(2) {border-top:5px solid #fffacd;font-weight: bold;}
.scroll_table tr:nth-child(2) {border-bottom:5px solid #fffacd;}
.scroll_table tr:nth-child(2) td:first-child {border-left:5px solid #fffacd;}
.scroll_table tr:nth-child(2) td:last-child {border-right:5px solid #fffacd;}
.scroll_table tr:nth-child(2) td:nth-child(odd) {background: #FFF9EE;}
.scroll_table tr:nth-child(2) td:nth-child(even) {background: #fff5db;}
.scroll_table td:first-child {background: #fff;}

/*ピックアップの区切り*/
.scroll_table tr {border-bottom: 4px double #eee;}
/*.scroll_table tr:nth-child(4) {border-bottom: 7px double #eee;}*/

.scroll_table table img{margin-bottom: 0px;}
.scroll_table .title_img{justify-content: center;}
.scroll_table .title_img img{border: none;}

/**比較表内の星評価*************/
.rating_list li {
	background: #fff;
	margin-bottom: 3px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px;
	border:1px solid #F2F2F2;
}
.scroll_table tr:nth-child(2) td:nth-child(2) .rating_list li{background: #FFF;}
.rating_list .label {flex: 1;text-align: left;}
.rating_list .rate_wrap {flex-shrink: 0;text-align: right;}
/**************************/

.table__header {
	font-weight:bold;
	font-size:0.8em;
	width: 100px!important;
	position: sticky;
	left: 0;
	color: #fff;
	border: 1px solid #eee;
	z-index: 1;
}

.scroll-hint {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
  display: none;
  animation: scroll-hint-animation 2s infinite ease;
	width:60%;
	text-align: center;
	z-index: 2;
}
@keyframes scroll-hint-animation {
  0% {transform: translate(-50%, -50%);}
  50% {transform: translate(-40%, -50%);}
  100% {transform: translate(-50%, -50%);}
}
.scroll-hint--show {display: block;}

.tag_genre{
	display: block;
	color: #fff;
	font-weight: bold;
	background:#FF5043;
	border:1px solid #F4F4F4;
		font-size: 0.8rem;
	line-height: 1rem;
}

.pickup .tag_genre{
	display: block;
	color: #FF5043;
	font-weight: bold;
	background:#fff;
	border:1px solid #FF5043;
		font-size: 0.8rem;
	line-height: 1rem;
}

/*アイコン類*/
.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
  position: relative;
  margin: 0.5em;
  vertical-align: middle;
}

.double-circle {
  border: 5px solid #FF5043;
  border-radius: 50%;
}
.double-circle::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 5px solid #FF5043;
  border-radius: 50%;
}

.circle {
  border: 5px solid #ff6347;
  border-radius: 50%;
}

.triangle::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-bottom: 1.7em solid #778899;
}



/* readmore 基本 */
.readmore {
  --collapsed-height: 40px;
  --transition-duration: 360ms;
  --easing: cubic-bezier(.22,.9,.35,1);
  position: relative;
  font-family: system-ui, sans-serif;
}

/* 隠しチェックボックス */
.readmore-toggle {
  position: absolute;
  left: -9999px;
}

/* 表示枠 */
.readmore .content {
  position: relative;
  overflow: hidden;
  width: 100%;
	background: none;
	padding:0.5rem;
}

/* 内容 */
.readmore .content-inner {
  max-height: var(--collapsed-height);
  overflow: hidden;
  transition:
    max-height var(--transition-duration) var(--easing),
    opacity calc(var(--transition-duration) * 0.9) var(--easing),
    transform calc(var(--transition-duration) * 0.9) var(--easing);
  opacity: 1;
  transform: translateY(0);
}

/* フェード部分 */
.readmore .fade-overlay {
  pointer-events: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  transition: opacity var(--transition-duration) var(--easing);
}

/* ▼ボタン部分 */
.readmore-label {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: -1px;
  cursor: pointer;
  background: #fff;
}

.readmore-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px dotted #a9a9a9;
  transform: translateY(-50%);
}

/* ▼アイコン */
.readmore-label .arrow-down {
  position: relative;
  background: #fff;
  border: 1px dotted #a9a9a9;
  border-radius: 50px;
  padding: 0px 1.5rem;
}

.readmore-label .arrow-down::before {
  content: "▼";
  font-size: 0.7rem;
  color: #a9a9a9;
}

/* チェックが入ったら展開 */
.readmore-toggle:checked ~ .content .content-inner {
  max-height: 2000px;
}

.readmore-toggle:checked ~ .content .fade-overlay {
  opacity: 0;
}

/* 開いた後は▼を非表示に（閉じるボタン不要） */
.readmore-toggle:checked + .content + .readmore-label {
  display: none;
}

@media (max-width: 768px) {
	.w90{width: 100%;}
	.table_rank,
	.table_rank p{font-size: 0.8rem;}
	.icon{font-size: 1rem;}
}

/*******************************************************************/
/* 口座の選び方＿下線つき見出し */
.midashi01{
	font-size: 1.3rem;
	font-weight: bold;
	text-align: center;
	color: #5788CE;
}
.midashi01:after {
  content: "";
  display: block;
  width: 10rem;
  height: 0.2rem;
  background: #5788CE;
  border-radius: 0.3rem;
  margin: 0.6rem auto 1rem;
}

/*　口座の選び方＿テーブル　*/
.reco table{
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	border:2px solid #0A123E;
}

.reco table th,table td{
	border: none;
	padding:5px;
		vertical-align: top;
}

.reco table th{
	background: #0A123E;
	color: #fff;
}

.reco table th.meri{
	background: #B4B6C1;
	color: #0A123E;
}

.reco table td{
	font-size: 0.8rem;
	text-align: left;
}

.reco table td:first-child{
	background: #F7F3EB;
}

.reco table tr:nth-child(2) td{
	text-align: center;
}

table.osusume tr:nth-child(2) td{
	text-align: left;
}
/*.reco table td .type2 {
  display: grid;
  grid-template-columns: 80px 1fr;
  column-gap: 10px;
  row-gap: 6px;
  margin-top: 10px;
}*/
.type1{
	font-size: 1rem;
}
.type2_title {
  font-weight:bold;
	border: 1px solid #eee;
	text-align: center;
	background: #fff;
	border-radius: 5px;
	margin-top: 10px;
}

.obi{
	background: #ED1C24;
	color: #fff;
	text-align: center;
	margin: 0 auto 5px;
	font-size: 1rem;
	font-weight: bold;
}

/*****案件部************************************************************************/
/**********************************************************************************/

/*****枠*********************/
.waku_round_title{
  border: 2px solid #0A123E;
  border-radius: 10px;
	background: #fff;
}
.waku_round_title .inner{
  padding: 1rem;
}

.waku_round_title .inner p:last-child{
	margin-bottom: 0px;
}

.waku_round_title h3 {
  display: flex;
  align-items: center;
  font-size: 24px;
	font-weight: bold;
	background: #0A123E;
	color: #fff;
	padding:10px 5px 10px 15px;
	margin-bottom: 0px;
}

.waku_round_title h3 img {
  display: inline-block;
  height: 1em; 
  width: auto;
  vertical-align: middle;
	margin:0em 0.3em 0em 0em;
}

/*****表2*********************/
.rank_info2 table{
	width: 100%;
	border-collapse: collapse;
}

.rank_info2 table th{
	background: #B4B6C1;
	color: #0A123E;
	border: 1px solid #0A123E;
}

.rank_info2 table tr:nth-child(2) th{
	font-size: 0.8rem;	
}

.rank_info2 table td{
	border: 1px solid #0A123E;
}

/*キャンペーン部分*/
/*.campaign h4{
	color: #FC2A63;
	border-bottom: 2px solid #FC2A63;
	border-left: 8px solid #FC2A63;
}*/
.campaign h4 {
    background-color: #fff;
    color: #FC2A63;
}

.campaign h4::before {
    background-color: #FC2A63;
}

.campaign .pad10_color{
	border-radius: 10px;
	margin-bottom: 1rem;
	background: #ffedf1;
}
.campaign .pad10_color img{
	border:3px dotted #fff;
}

/*タグ*/
.tag li{
	display: inline-block;
	margin: 0 .1em .6em 0;
	padding: .5em;
	line-height: 1;
	text-decoration: none;
	color: #0A123E;
	background-color: #fff;
	border: 1px solid #0A123E;
	border-radius: 2em;
	font-size: 0.8rem;
	background: #F9F4F2;
}
.tag li:before {
	content: "#";	
}

/*リスト*/
.list01 ul {
	padding: 0 0.5em;
	margin-bottom: 2em;
	list-style-position: outside;
	padding-left:1.5em;
}

.list01 li {
	position: relative;
	margin: 0.8em 0;
	font-size: 1rem;
	list-style-type: disc;
	border-bottom: dashed 1px silver;
}
.list01 ul li:last-of-type {
	border-bottom: none;
}

.list02 ul {
	padding: 0 0 0 2em;
	margin-bottom: 1em;
}

/***口座の選び方内のリスト*******/
/*.reco ul.list01 {
	list-style-position: outside;
	padding-left:1.5em;
}

.reco .list01 li {
	font-size: 0.8rem;
	border-bottom: none;
	margin:0.4em 0em;
}*/

.reco ul {
  list-style: none; /* デフォルトの黒点を消す */
  padding-left: 0;  /* リスト全体の余白リセット */
  margin: 0;
}

.reco ul li {
  position: relative; /* 黒点の基準位置にする */
  padding-left: 1em;  /* ★ここを減らすと、文字全体が左に寄る（黒点との距離が縮まる） */
  line-height: 1.5;
	margin:0.4em 0em;
}

.reco ul li::before {
  content: '';
  display: block;
  position: absolute; /* 自由に動かせるようにする */
  
  /* --- 黒点の見た目 --- */
  width: 5px;         /* 黒点の幅 */
  height: 5px;        /* 黒点の高さ */
  background: #333;   /* 黒点の色 */
  border-radius: 50%; /* 丸くする */
  
  /* --- 黒点の位置調整 --- */
  top: 0.6em;         /* 上からの位置（文字サイズに合わせて微調整） */
  left: 0.3em;        /* 左からの位置（padding-leftの中に配置） */
}

.triangle1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 64px solid transparent;
  border-left: 64px solid transparent;
  border-top: 32px solid #B4B6C1;
  border-bottom: 0;
}

/*****レビュー星***************/
.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; color: #FF5043;} /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; color: #FF5043;} /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

/****帯・枠・背景***********************************************************************************/
/***********************************************************************************************/

/****下に▼のついた背景*****/
.section {
  position: relative;
  background: #F7F3EB;
  padding: 0;
	margin-bottom: 40px;
}
.section::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: #F7F3EB;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.section_blue .section,
.section_blue .section::after,
.section_blue .section2{background: #194085;}

.section_in{padding:16px;}

/****下に▼のつかないシンプルな背景*****/
.section2{
	padding:0px;
	background: #F7F3EB;
	position: relative;
	padding:16px;
}

/****上が白い▼でくぼんでいる背景*****/
.section3 {
  position: relative;
  background: #F7F3EB;
  padding-top: 40px;
  padding: 40px 20px 20px;
  margin-bottom: 40px;
}
.section3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}



.surveyinfo{
	background: #F4F5F7;
	border-radius: 10px;
	  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
	padding:1.5em;
	font-size: 0.7em;
margin-top:5em;
}

/*****文字*************************************************************************************/
/**********************************************************************************************/
.red{color: #ff4848;}
.white{color: #fff;}
.white{color: #fff;}
.yel{color: #ffff00;}

.marker {
	background:linear-gradient(transparent 70%, rgba(255, 228, 0,0.7) 0%);
	display: inline;
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition:background-size 1.5s;
}
.marker.on {background-size: 100% 100%;}

.under_yel {
  text-decoration: underline;
  text-decoration-thickness: 0.7em;
  text-decoration-color: rgba(255, 228, 0, 0.5);
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
}

.under_bl {
  text-decoration: underline;
  text-decoration-thickness: 0.7em;
  text-decoration-color: rgba(138, 182, 164, 0.3);
  text-underline-offset: -0.4em;
  text-decoration-skip-ink: none;
}

.under_wht {
  text-decoration: underline;
  text-decoration-thickness: 0.7em;
  text-decoration-color: rgba(255, 255, 255, 1);
  text-underline-offset: -0.4em;
  text-decoration-skip-ink: none;
}


/*記事見出し*/
.komidashi_hukidashi{
	font-size: 26px;
	line-height: 1.4;
	font-weight: bold;
  position: relative;
  margin: 0 auto 20px;
  background-color: #fff;
  color: #194085;
  text-align: center;
  padding:10px;
  border-radius: 15px;
  box-shadow: 0 4px 0 #0A123E;
  line-height: 1.5;
}

.komidashi_hukidashi::after {
  content: "";
  position: absolute;
  bottom: -15px; /* 三角の位置 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-width: 15px 15px 0 15px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

.komidashi_hukidashi span {
  display: inline-block;
  background: #194085;
  color: #fff;
  font-weight: bold;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 0.8em;
  margin-bottom: 5px;
}

/*案件部の小見出し*/
/*h4{
	color: #0A123E;
	border-bottom: 2px solid #0A123E;
	border-left: 8px solid #0A123E;
	padding-left: 8px;
	font-size: 24px;
	margin-bottom: 1rem;
}*/

h4 {
    display: flex;
    align-items: center;
    padding: .5em .7em;
    background-color: #f2f2f2;
    color: #333333;
	font-size: 20px;
}

h4::before {
    display: inline-block;
    width: 5px;
    height: 1.5em;
    margin-right: .5em;
    background-color: #0a123e;
    content: '';
}

/*案件部の小見出しの中の見出し*/
h5{
	color: #c69c6d;
	background: #f2f2f2;
	padding:3px 8px;
	font-size: 16px;
	margin-bottom: 0.5rem;
}

h5::before {
  content: "●";
  color: #c69c6d;
  margin-right: 0.4em;
  font-size: 1em;
  line-height: 1;
}

/*冠と案件名*/
.crown_name {
  display: flex;
  align-items: center;
	justify-content: center; 
  font-size: 16px;
	font-weight: bold;
}

.crown_name img {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: middle;
	margin:0em 0.3em 0em 0em;
}

.above_btn{
	text-align: center;
	font-weight: bold;
	margin-bottom: 5px;
}


/******************************************キュレーション******************************************/
/*.cura_back{background:#f5f5f5;padding:2em;}
.cura_backin{background: #fff;border-radius: 10px; padding:1em;}
.cura_title{background:#0A123E; color: #fff; font-weight: bold;font-size: 1.1em;text-align: center;margin-bottom: 0em!important;border-radius: 15px 15px 0px 0px;padding: 0.5em 0em 0em;}
.formbox { border: none;background: #fff;padding:10px;}
.formbox select {margin: 5px auto;color: #4C4C4C;border-radius:50px;font-size: 1em;}
.form_contents {text-align: center;background-color: transparent;color: #0A123E; font-weight: bold;
	font-size: 1.1em;border-top: 1px solid #0A123E;border-bottom: 1px solid #0A123E;padding:0px;margin-top: 0.5em;}
@media only screen and (max-width: 768px){
	.cura_back{padding:1em;}	
}

.formbox input[type=checkbox] {display: none;}
.formbox input[type=checkbox]:checked + .checkbox03::before {border-color: #666;}
.formbox input[type=checkbox]:checked + .checkbox03::after {opacity: 1;transform: rotate(45deg) scale3d(1,1,1);}
.checkbox03 {box-sizing: border-box;cursor: pointer;display: block;padding: 5px 30px; position: relative;width: auto;}
.checkbox03::before { background: #FCF8EA;border: 1px solid #ccc; border-radius: 3px;content: '';display: block;
	height: 16px;left: 5px;margin-top: -9px;position: absolute; top: 50%;width: 16px;}
.checkbox03::after { border-right: 6px solid #fedd1e; border-bottom: 3px solid #fedd1e;content: '';display: block;height: 20px;left: 7px;margin-top: -16px;
    opacity: 0;position: absolute; top: 50%; transform: rotate(45deg) translate3d(0,2px,0) scale3d(.7,.7,1);transition: transform .2s ease-in-out, opacity .2s ease-in-out; width: 9px;}

.formbox input[type=radio] {display: none;}
.formbox input[type=radio]:checked + .radio03::before {border-color: #666;}
.formbox input[type=radio]:checked + .radio03::after {opacity: 1;transform: scale3d(1,1,1);}
.radio03 {box-sizing: border-box;cursor: pointer;display: inline-block;padding: 5px 30px;position: relative;width: auto;}
.radio03::before {background: #fff;border: 1px solid #ccc;border-radius: 50%;content: '';
	display: block;height: 16px;left: 5px;margin-top: -8px;position: absolute;top: 50%;width: 16px;}
.radio03::after {background: #fedd1e;border-radius: 50%;content: ''; display: block;height: 10px;left: 9px;
    margin-top: -4px;opacity: 0; position: absolute; top: 50%;transform: scale3d(.3,.3,1);transition: transform .2s ease-in-out, opacity .2s ease-in-out;width: 10px;}
input[type='submit'] {border: none;background-color: transparent;color: #fff; font-weight: bold; font-size: 1.1em;padding: 0em;}*/


.cura_title{
	background:#0A123E;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	border-radius: 15px 15px 0px 0px;
	padding: 0.5em;
}

.cura_back{
	background: #fff;
	border-radius: 18px 18px 0px 0px;
	border:1px solid #0A123E;
}

.cura_back table{
	padding:5px;
	border-collapse: separate;
	border-spacing: 8px;
}

.cura_back table th{
	width: 30%;
    background: #E7E7EC;
	color: #0A123E;
    padding: 0.5rem;
    vertical-align: middle;
    box-sizing: border-box;
	border-bottom: 4px double #85899F;
}

.cura_back table td{
	background: #fff;
    padding: 1rem;
    text-align: left;
    box-sizing: border-box;
    vertical-align: middle;
	border-bottom: 4px double #85899F;
}

.cura_back table td select {
	/*-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;*/
	margin: 5px auto;
	color: #4C4C4C;
	border:1px solid #4C4C4C;
	border-radius:5px;
	font-size: 1em;
	padding:10px;
	background: #fff;
}

.box_0{
    padding: 10px 0px;
	width: 100%;
    text-align: center;
}

form .custom-button{
	background: #545978;
	box-shadow: 0 5px 0 #3B4165;
}

form .custom-button:hover {
  box-shadow: 0 2px 0 #3B4165;
}


.search_box input{
    margin: 0px 6px 0px 0px;
}
.search_box li{
    list-style: none;
}

.search_plus_wrap{
    display: flex;
    margin: 0px auto 10px auto;
    justify-content: center;
    cursor: pointer;
}
.plus_txt{
    margin: 0px 0px 0px 5px;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 30px;
}
.plus_icon_wrap{
    position: relative;
    width: 30px;
    height: 30px;
    background: #0A123E;
    border-radius: 50%;
}
.plus_icon {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.plus_icon:before,
.plus_icon:after {
    position: absolute;
    content: "";
    display: block;
    transition: all 0.4s;
    background: #fff;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 2px;
    transform: translate(-50%, -50%);
}
.plus_icon:before {
  transform: translate(-50%, -50%) rotate(90deg);
}
.plus_icon.open:before {
  transform: translate(-50%, -50%) rotate(0deg);
}
/****モーション***********************************************************************************/
/***********************************************************************************************/
/*ぽよぽよ*/
.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
 

/*上下に動く*/
.updown{
animation-name:UpDown;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes UpDown{
	0%{transform: translateY(5px);}
	100%{transform: translateY(15px);}
}

/*点滅*/
.flashing01{animation: flash01 1s ease-in-out infinite alternate;}
@keyframes flash01 {
   0% {opacity: 0.3;}
   100% {opacity: 1;}
}

/* トップへ戻るボタン */
.page_top_btn {
width: 60px;
height: 60px;
position: fixed;
right: 5px;
bottom: 10px;
background: #000;
border-radius: 50%;
/*opacity: 0.6;*/
	opacity: 0;
	pointer-events: none;
	z-index: 999;
	 transition: opacity 0.5s ease;
}

.page_top_btn::before {
content: '▲';
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}

/* マウスオーバー時 */
.page_top_btn:hover {
background: rgb(0, 0, 0, 0.8);
color: rgb(255, 255, 255, 0.8);
}

/* フェードイン用クラス */
.page_top_btn.show {
  opacity: 0.6;
  pointer-events: auto;
}