@charset "utf-8";

/* PC：style-chart-sp.css
 * おまかせプラン ver.6
 * 健康保険のしくみ
 * **************************************************
 * Elements
 * **************************************************
 */


/* Elements
------------------------------------------------------------------ */
.sp_none{
	display:none;
}

.line2{
    display: flex;
    align-items: flex-start;
	flex-wrap:wrap;
}
.line2 li{
	width:100%;
	margin:2% 0;
}

.chart-box{
	border:1px dashed #74bf8b;
	padding:20px;
	border-radius:10px;
}

.chart a{
	display:flex;
	justify-content:center;
	align-items:center;
	padding:20px 40px 20px 20px;
	font-size:1.5em;
	text-decoration:none;
	color:#fff;
	background:#fba66d;
	border-radius:10vw;
	font-weight:bold;
	position:relative;
}

.chart a:hover{
	opacity:.8;
}



.chart a::before,
.chart a::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 20px;
  width: 12px;
  height: 2px;
  border-radius: 9999px;
  background-color: #fff;
  transform-origin: calc(100% - .5px) 50%;
}

.chart._yes a{
	background:#1a4899;
}


.chart a::before {
  transform: rotate(45deg);
}

.chart a::after {
  transform: rotate(-45deg);
}

.chart-start{
	background:#feede1;
	color:#fba66d;
	text-align:center;
	font-size:1.8em;
	font-weight:bold;
	padding:5px 10px 2px;
}

.chart-t{
	text-align:center;
	margin:20px 0 10px;
	font-size:1.8em!important;
}
.chart-b{
	text-align:center;
	margin:10px 0 10px;
	font-size:1.8em!important;
	font-weight:bold;
	color:#e24e57;
}



h3.h3_normal{
  background: #70ba77;
  color:#fff!important;
  padding:5px 10px;
  margin:40px 0 20px!important;
}

.chart-link{
	text-align:left;
	padding-left:20px;}
.chart-link br{
	display:none;
}


.chart-link a{
	position:relative;
}

.chart-link a::before{
  content: "";
  margin: auto;
  position: absolute;
  top: 5px;
  left: -20px;
  width: 8px;
  height: 10px;
  background: #70ba77;
}
 
.chart-link a::after {
  content: "";
  margin: auto;
  position: absolute;
  top: 2.5px;
  left: -12px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 10px solid #70ba77;
}


.chart-link a span{
	position:relative;
}

.chart-link a[href$=".pdf"] span:after{
	position:absolute;
  content: "";
  margin: auto;
  bottom:5px;
  right: -22px;
  width: 16px;
  height: 16px;
  background: url(../../images/common/link-pdf.png) no-repeat center right/contain;
}

.chart-blue{
	font-size:1.8em;
	text-align:left;
	background:#70ba77;
	color:#fff;
	font-weight:bold;
	padding:15px;
	border-radius:10px;
	margin-bottom:10px;
	line-height:1.3;
}


/* SPのみtableに横スクロール */
.sp_scroll_table {
	overflow-x: scroll;
	padding-bottom: 1em;
}

.join-table{
	width:100%;
}
.join-table th,
.join-table td {
    white-space: nowrap;
}

.join-table thead th{
	width:calc(100%/3);
}

.join-table tbody td{
	text-align:left!important;
}
.join-table td.center{
	text-align:center!important;
}
.join-table._04 tbody th{
	background:#b0ddd2!important;
}

#subPage .main .join-table td.link {
	width: 5em;
	text-align:center!important;
}

#subPage .main .join-table td.link a {
	display: block;
	padding: 1px 5px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-weight: bold;
	text-decoration: none; 
}
#subPage .main .join-table td.link.app a{
	background-color: #fba66d;
	color:#ffffff;
}
#subPage .main .join-table td.link.example a{
	background-color: #eeeeee;
	color:#000000;
}
#subPage .main .join-table td.link a:hover {
   -webkit-opacity:0.7;
   -moz-opacity:0.7;
   opacity:0.7;
}