@charset "utf-8";

html { scroll-behavior: smooth;}
body {
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust: none;
	font-family: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN","Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
	background: #fff;
	color: #333;
	font-size: 16px;
	line-height: 1.8;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-weight: normal;
}
img {
	border: none;
	max-width: 100%;
	height: auto;
}

a {
	color: #33c;
	text-decoration:underline;
}
a:hover {
	color: #ff7043;
	text-decoration:underline;
	cursor: pointer;
}

.b { font-weight:bold;}
.aka { color: #db0000; }
.mizu { color: #0080c0; }

.pink { color: #ff69b4; }
.ao { color: #00c; }
.tya { color: #bd000e}
.gray { color: #3d3737}
.akapink { color: #ec8282;}
.green { color: #369B50;}
.aomidori { color: #2ebab7;}
.enji { color: #9c2662;}
.ora { color: #ff9900;}
.cha { color: #695647;}

.marker_yellow,
.marker_ki {
	background:#fe8;
	padding:2px 0;
}

.marker_red,
.marker_aka {
	background:#fcc;
	padding:2px 0;
}


.under_yellow,
.under_ki {
	background:linear-gradient(transparent 70%, #fe8 70%);
	padding:2px 0;
}

.under_red,
.under_aka{
	background:linear-gradient(transparent 70%, #fcc 70%);
	padding:2px 0;
}


.keiko_yellow { background:linear-gradient(transparent 50%, #FFEE9F 50%); }
.keiko_yellow_a { background-color:#FFEE9F; }
.keiko_red { background:linear-gradient(transparent 50%, #FFBFC8 50%); }
.keiko_red_a { background-color:#FFBFC8; }

.mt0em { margin-top:0em !important; }
.mt1em { margin-top:1em !important; }
.mt2em { margin-top:2em !important; }
.mb0em { margin-bottom:0em !important; }
.mb1em { margin-bottom:1em !important; }
.mb2em { margin-bottom:2em !important; }

.center { text-align:center; }

.imgc {
	display:block;
	text-align:center;
	margin:0 auto 1em;
}

@media only screen and (min-width: 481px) {
	.imglf {
		margin:0 1em 0.5em 0;
		padding:0;
		float: left;
	}
	
	.imgrf {
		margin:0 0 0.5em 1em;
		padding:0;
		float: right;
	}
}
@media only screen and (max-width: 480px) {
	.imglf,
	.imgrf {
		float:none;
		display:block;
		text-align:center;
		margin:0 auto 1em;
	}
}

.button_link{
	margin:0 0 1.0em 0;
	display:block;
	text-align:center;
	padding:0.4em 1.3em;
	border-radius:5px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 2px 3px -2px rgba(0, 0, 0, 0.15);
	color:#fff !important;
	font-weight:bold;
	vertical-align:middle;
	transition:0.3s ease-in-out;
	text-decoration:none !important;
	background:#f88080;
}
.button_link a{
	color:#fff;
	text-decoration:none !important;
}
.button_link:hover,
.button_link:focus {
  box-shadow: 0 13px 20px -3px rgba(0, 0, 0, 0.24);
  text-decoration: none;

  -webkit-tap-highlight-color: transparent;
  
  left:0px;
  top:0px;
}

.button_link.blue{
	background:#4f9df4;
}
.button_link.green{
	background:#38B07A;
}

.sankaku:before {
	padding:5px;
	font-family: "Font Awesome 5 Free";
	content: '\f0da';
	font-weight: 900;
	font-size:1.1em;
	color:#ec4041;
}


/*
	レイアウト
*/
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
}

@media only screen and (min-width: 681px) {
	.container {
		margin: 0 auto;
		padding: 0 20px;
	}
}

header {
	text-align: center;
}

.topimg{
	border-radius: 10px;
	margin:0;
}

.contents {
	padding:0 0;
}
@media screen and (min-width: 361px) and (max-width: 767px) {
	.contents {
		padding:0 0;
	}
}
@media screen and (min-width: 768px) {
	.contents {
		padding:0 10px;
	}
}

.contents h2 {
	clear: both;
	margin:2em 0 1.5em;
	padding:10px 10px;
	/*
	color: #333;
	background: #C8E5C9;
	*/
	/*
	color:#fff;
	background: #F87D16;
	*/
	color:#404048;
	background: #CAE5F3;
	
	
	font-weight:bold;
	font-size:18px;
}
.contents h3 {
	clear: both;
	margin:2em 0 1.5em;
	padding:10px 10px;
	/*
	color: #333;
	border-top:2px solid #C8E5C9;
	border-bottom:2px solid #C8E5C9;
	*/
	/*
	color: #333;
	border-top:2px solid #F87D16;
	border-bottom:2px solid #F87D16;
	*/
	color: #404048;
	border-top:2px solid #CAE5F3;
	border-bottom:2px solid #CAE5F3;
	font-weight:bold;
	font-size:18px;
}

/*
*/
.contents .hh {
	border:none;
	border-color:none;
	background:none;
	padding:0;
}

/*
*/
.contents .hh1 {
	position:relative;
	margin-bottom:30px;
	border-bottom: 3px solid #888;
	background-color:#888;
	color:#fff;
}
.contents .hh1:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 30px;
	width: 0;
	height: 0;
	border: 20px solid transparent;
	border-top: 20px solid #888;
}


.contents .hh2 {
	position:relative;
	margin-bottom:30px;
	border-bottom: 3px solid #888;
}
.contents .hh2:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: solid transparent;
	border-width:10px;
	left: 30px;
	bottom: -22px;
	border-top-color: #888;
	border-left-color: #888;
}
.contents .hh2:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: solid transparent;
	border-width:8px;
	left: 33px;
	bottom: -15px;
	border-top-color: #fff;
	border-left-color: #fff;
}


/*
	h4:チェックマーク
*/
.contents h4 {
	clear: both;
	margin:2em 0 1em;
	position:relative;
	padding-left:30px;
	line-height: 38px;
	font-weight:bold;
	font-size:18px;
}
 
.contents h4:after, h4:before {
	content:''; 
	height:18px;
	width:4px; 
	display:block; 
	background:#98b599; 
	position:absolute; 
	top:8px; 
	left:15px; 
	border-radius:10px;
	transform:rotate(45deg);
}
 
.contents h4:before {
	height:10px; 
	transform:rotate(-45deg);
	top:16px; 
	left:7px
}

.check_mark{
	position:relative;
	padding-left:30px !important;
	line-height: 38px !important;
	color:#333;
	font-weight:bold;
}
.check_mark:after, .check_mark:before {
	content:''; 
	height:18px; 
	width:4px; 
	display:block; 
	background:#98b599; 
	position:absolute; 
	top:8px; 
	left:15px; 
	border-radius:10px;
	transform:rotate(45deg);
}
.check_mark:before {
	height:10px; 
	transform:rotate(-45deg);
	top:16px; 
	left:7px
}

.contents p {
	margin:0 0 1.5em;
	padding: 0;
}


footer {
	clear: both;
	text-align: center;
	padding: 1em 0 10px;
}
footer a {
	text-decoration: none;
	border: none;
}
footer a {
	color: #333;
	text-decoration:none;
}
footer a:hover {
	color: #ff7043;
	text-decoration:none;
	cursor: pointer;
}



.contents ul {
	/*
	margin:1em;
	padding:1em;
	*/
	margin:0 0 1em;
	/*
	border:1px solid #333;
	border-radius:5px;
	*/
	/*
	background:#f0f0f0;
	border-radius:5px;
	*/
}

.contents ul > li {
	margin:0.3em 1em 0.3em 1.5em;
	border-bottom:dotted 1px #ccc;
}

details summary {
	list-style: none;
	cursor:pointor;
}
details summary::-webkit-details-marker {
	display:none;
}

.bc-red {
	background:#fcc;
	margin:0 -40px;
	padding:0 40px;
}
.bc-green {
	background:#daffcc;
	margin:0 -40px;
	padding:0 40px;
}
.bc-blue {
	background:#c8e8f4;
	margin:0 -40px;
	padding:0 40px;
}
.bc-yellow {
	background:#fefde8;
	margin:0 -40px;
	padding:0 40px;
}
.bc-purple {
	background:#dbdbff;
	margin:0 -40px;
	padding:0 40px;
}

.headbox {
    position: relative;
    background-color: #fff;
    border: 2px solid #899297;
    border-radius: 5px;
    margin:2.5em 5px 1.5em 7px;
    padding: 1.0em 20px 0.5em 0;
}
.headbox .headbox-title {
    position: absolute;
    left: -10px;
    top: -20px;
    border-radius: 15px;
    background-color: #899297;
    color: #fff;
    font-family:"FontAwesome", "Helvetica","Yu Gothic";
    font-size: 14px;
    font-weight: bold;
    padding: 5px 20px;
}
.headbox .headbox-title:after {
    position: absolute;
    border-top: 12px solid #899297;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    content: '';
    top: 30px;
    left: 25px;
}
.headbox p {
    margin: 0;
    padding: 0;
}
.headbox ul {
    list-style-type: none;
    border:none;
    margin:0;
    padding:0;
}
.headbox ul li {
    position: relative;
    padding: .2em 0 .2em 1.5em;
	border-bottom:none;
}
.headbox ul li:before {
	position: absolute;
    left: 0;
    font-family: 'Font Awesome 5 Free','FontAwesome','Quicksand','Avenir','Arial',sans-serif;
    font-weight: 900;
    content:'\f138';
    color: #899297;
    margin: 0 16px 20px 0;
}

.headbox.square ul li:before {
    content:'\f0c8';
}
.headbox.circle ul li:before {
    content:'\f111';
}
.headbox.check_circle ul li:before {
    content:'\f058';
}
.headbox.dot_circle ul li:before {
    content:'\f192';
}

.headbox.headbox_red { border: 2px solid #F5797A; }
div.headbox.headbox_red .headbox-title  { background-color: #F5797A; }
div.headbox.headbox_red .headbox-title:after { border-top: 12px solid #F5797A; }
.headbox.headbox_red ul li:before { color: #F5797A; }

.headbox.headbox_orange { border: 2px solid #D9984A; }
div.headbox.headbox_orange .headbox-title { background-color: #F2911D; }
div.headbox.headbox_orange .headbox-title:after { border-top: 12px solid #F2911D; }
.headbox.headbox_orange ul li:before { color: #F2911D; }

.headbox.headbox_green { border: 2px solid #11a093; }
div.headbox.headbox_green .headbox-title { background-color: #11a093; }
div.headbox.headbox_green .headbox-title:after { border-top: 12px solid #11a093; }
.headbox.headbox_green ul li:before { color: #11a093; }

.headbox.headbox_blue { border: 2px solid #2985FB; }
div.headbox.headbox_blue .headbox-title { background-color: #2985FB; }
div.headbox.headbox_blue .headbox-title:after { border-top: 12px solid #2985FB; }
.headbox.headbox_blue ul li:before { color: #2985FB; }



.emphasis{
	margin:1em 0;
	background:#fff;
	color:#333;
	/*font-size:30px;
	line-height:46px;*/
	font-weight:bold;
	text-align:center;
	font-family: YuGothic, "Yu Gothic", "メイリオ", Meiryo, "Helvetica", "Arial", "Hiragino Kaku Gothic ProN","Hiragino Sans", sans-serif;
	/*font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;*/
	
	text-shadow:
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		0 0 3px #fff,
		
		2px 2px 5px #333,
		2px 2px 5px #333;
}

.emphasis_shironuki{
	color:#fff;
	/*font-size:30px;*/
	font-weight:bold;
	text-align:center;
	font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	text-shadow:
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333,
		0 0 3px #333;
}

.emphasis,
.emphasis_shironuki{
	/*font-size:20px;*/
	font-size:24px;
	line-height:1.6;
}
@media screen and (min-width: 361px) and (max-width: 767px) {
	.emphasis,
	.emphasis_shironuki{
		/*font-size:calc( 2.45vw + 11.17px );*/	/* 20～30pxの場合。a=(40-20)/(768-360)=0.0245 */
		/*font-size:calc( 4.9vw + 2.353px );*/	/* 20～40pxの場合。a=(40-20)/(768-360)= */
		font-size:calc( 1.47vw + 18.706px );/**/	/* 24～30pxの場合。a=(30-24)/(768-360)=0.0147 */
	}
}
@media screen and (min-width: 768px) {
	.emphasis,
	.emphasis_shironuki{
		font-size:30px;
		/*font-size:40px;*/
	}
}


.red{
	color:#c00;
	font-weight:900;
}

.font_gothic{
	font-family: YuGothic, "Yu Gothic", "メイリオ", Meiryo, "Helvetica", "Arial", "Hiragino Kaku Gothic ProN","Hiragino Sans", sans-serif;
}
.font_mincho{
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}

.font_size40{
	font-size:40px;
}

/*
	ranking01
*/
.ranking01{
	clear: both;
	padding:0;
	margin:0 0 10px;
	line-height: 1.8em;
	overflow: hidden;
	box-sizing:border-box;
}

.ranking01 a{
	text-decoration:underline;
}

@media screen and (max-width: 480px) {
	.ranking01 .part1{
		clear: both;
		padding:0;
		margin:0 0 10px;
		overflow: hidden;
	}
	.ranking01 .part1_left{
		display:block;
		text-align:center;
		margin:0 auto 10px;
	}
	.ranking01 .part1_right{
		display:block;
		margin:0 auto 10px;
	}
}
@media screen and (min-width: 481px) {
	.ranking01 .part1{
		clear: both;
		padding:0;
		margin:0 0 10px;
		overflow: hidden;
	}
	.ranking01 .part1_left{
		box-sizing:border-box;
		float:left;
		margin:0;
		width:35%;
		overflow:hidden;
	}
	.ranking01 .part1_right{
		box-sizing:border-box;
		float:right;
		margin:0;
		padding:0 0 0 10px;
		width:65%;
		overflow:hidden;
	}
}

.ranking01 .flexbox {
	display: flex;
}

.ranking01 .flexbox .item1{
	flex-basis:auto; /*子要素のサイズに合わせる*/
	/*width:250px;*/
	margin-right:10px;
	margin-bottom:10px;
}

.ranking01 .flexbox .item2 {
	flex-basis:auto;
	flex-grow: 1; /*親要素に余ったスペースがあるときは伸ばす*/
}

.ranking01 .short_info ul {
	position: relative;
	margin:0 0 1.5em !important;
	padding: 1em 0.5em 1em 1.0em;
	border: solid 1px #ccc;
	border-radius: 5px;
}

.ranking01 .short_info li {
	list-style-type: none !important;
	padding: 0.5em 0;
	border-bottom:none;
}
.ranking01 .short_info li:before {
	position: absolute;
	left: 1em;
	color: #888;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
    font-weight: 900;
    margin:0 1em 0 0;
	border-bottom:dotted 1px #ccc;
}

@media (max-width: 480px) {
	.ranking01 .flexbox{
		flex-flow: column;
	}
	.ranking01 .flexbox .item1{
		text-align:center;
		margin:0 auto 1em;
	}
}
@media (min-width: 481px) and (max-width: 768px) {
	.ranking01 .flexbox{
		flex-flow: row;
	}
	.ranking01 .flexbox .item1 {
		max-width:50%;
	}
	.ranking01 .flexbox .item2 {
		max-width:60%;
	}
}
@media (min-width: 769px) {
	.ranking01 .flexbox{
		flex-flow: row;
	}
	.ranking01 .flexbox .item1 {
		max-width:50%;
	}
	.ranking01 .flexbox .item2 {
		max-width:60%;
	}
}


.ranking01 table{
	margin:0 0 10px;
	table-layout:fixed;
	border: solid 1px #ccc;
	border-collapse:collapse;
	width:100%;
	word-wrap: break-word;
	overflow-wrap : break-word;
}

.ranking01 tr{
	border:0 !important;
}

.ranking01 th{
	color:#fff;
	/*font-weight: normal;*/
	border:solid 1px #ccc;
	padding:5px;
	min-width:100px;
	text-align:center;
	font-size:12px;
}


.ranking01 table.gray th{
	background: #f0f0f0;
	color:#333;
}

.ranking01 td{
	border:solid 1px #ccc;
	color: #000;
	padding:5px;
	font-size:12px;
}


.ranking01 .title{
	color:#695647;
	font-weight:bold;
	font-size:16px;
}

.ranking01 .shousai1{
	clear:both;
	margin:5px 0;
	padding:10px;
	border-radius:5px;
	border:1px solid #ddd;
	background:#fcfcfc;
}

.ranking01 .shosai2{
	clear:both;
	margin:10px 0 0;
	padding:10px 5px 0;
	border-top:1px solid #ddd;
}

.ranking01 .border-top-1px{
	border-top:1px solid #ddd;
}

/*順位バナー*/
.ranking01 .banner1{
	clear: both;
	/*margin:0 0 10px;*/
 	margin: 2.5em 0 1em;
	padding:10px 0 5px 80px;
	min-height:30px;
	border-radius:10px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	
	box-shadow: none;
	border:none;
}

.ranking01 .banner2{
	clear: both;
	margin:0 0 10px;
	padding:10px 0 0 80px;
	min-height:30px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
}

/*順位アイコン、テキスト*/
.ranking01 .rank01{
	background:#FED271;
	background-image:url(../images/rank-kuchikomi01-icon.png);
	background-size:72px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
	
	text-shadow: 1px 1px 0 #E7A201,
		-1px 1px 0 #E7A201,
		1px -1px 0 #E7A201,
		-1px -1px 0 #E7A201;
}

.ranking01 .rank02{
	background:#ccc;
	background-image:url(../images/rank-kuchikomi02-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
	
	text-shadow: 1px 1px 0 #888,
		-1px 1px 0 #888,
		1px -1px 0 #888,
		-1px -1px 0 #888;
}

.ranking01 .rank03{
	background:#C90;
	background-image:url(../images/rank-kuchikomi03-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
	
	text-shadow: 1px 1px 0 #9F7F60,
		-1px 1px 0 #9F7F60,
		1px -1px 0 #9F7F60,
		-1px -1px 0 #9F7F60;
}

.ranking01 .rank04{
	background:#A7D2A4;
	background-image:url(../images/rank-kuchikomi04-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
}

.ranking01 .rank05{
	background:#A7D2A4;
	background-image:url(../images/rank-kuchikomi05-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
}

.ranking01 .rank06{
	background:#8B6239;
	background-image:url(../images/rank-kuchikomi06-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
}
.ranking01 .rank07{
	background:#8B6239;
	background-image:url(../images/rank-kuchikomi07-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
}
.ranking01 .rank08{
	background:#8B6239;
	background-image:url(../images/rank-kuchikomi08-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
}
.ranking01 .rank09{
	background:#8B6239;
	background-image:url(../images/rank-kuchikomi09-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
}
.ranking01 .rank10{
	background:#8B6239;
	background-image:url(../images/rank-kuchikomi10-icon.png);
	background-size:77px 36px;
	background-position:left bottom;
	background-repeat:no-repeat;
}


/*リストのバナー*/
.ranking01 .list_banner1{
	clear: both;
 	margin: 2.5em 0 1em;
	padding:10px 0 5px 20px;
	min-height:30px;
	border-radius:10px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	
	box-shadow: none;
	border:none;
}

.ranking01 .list_banner2{
	clear: both;
 	margin: 2.5em 0 1em;
	padding:10px 0 5px 20px;
	min-height:30px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	overflow: hidden;
	
	box-shadow: none;
	border:none;
}


/*リストの順番、テキスト*/
.ranking01 .list01{
	background:#FED271;
	
	text-shadow: 1px 1px 0 #DCB050,
		-1px 1px 0 #DCB050,
		1px -1px 0 #DCB050,
		-1px -1px 0 #DCB050;
}

.ranking01 .list01:before{
	/*content:'\f4d6';*/
	content:'\f559';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:0 5px 0 0;
}

.ranking01 .list02{
	background:#ccc;
	
	text-shadow: 1px 1px 0 #aaa,
		-1px 1px 0 #aaa,
		1px -1px 0 #aaa,
		-1px -1px 0 #aaa;
}

.ranking01 .list03{
	background:#C90;
}

.ranking01 .list04,
.ranking01 .list05{
	background:#A7D2A4;
}

.ranking01 .list06,
.ranking01 .list07,
.ranking01 .list08,
.ranking01 .list09,
.ranking01 .list10{
	background:#8B6239;
}

.ranking01 .list_brown{
	color:#8B6239;
	border-top:solid 3px #8B6239;
	border-bottom:solid 3px #8B6239;
}
.ranking01 .icon_ribbon:before{
	content:'\f4d6';	/* ribbon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:0 5px 0 0;
}

.ranking01 .icon_award:before{
	content:'\f559';	/* award */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:0 5px 0 0;
}

.ranking01 .icon_spinner:before{
	content:'\f110';	/* spinner */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding:0 5px 0 0;
}


.ranking01 .button_yoko{
	display: flex;
	padding: 0;
}
.ranking01 .button_yoko div{
	width: 50%;
	margin: 0;
	padding: 0;
}

/*
	table rating01
*/

table.rating01{
	margin:0 auto;
	padding:0;
	width:100%;
	font-size:14px;
	border:1px solid #ddd;
	border-collapse: collapse;
	word-wrap:normal !important;
	overflow-wrap:normal !important;
}

table.rating01 th{
	margin:0 auto;
	padding:5px;
	width:30%;
	min-width:100px;
	text-align:center;
	font-weight:normal;
	font-size:14px;
	background-color:#0A9A8D;
	background: linear-gradient(to bottom, #26A69A 5%, #009688 100%);
	border:1px solid #ccc;
	color:#fff;
}

table.rating01 td{
	margin:0 auto;
	padding:5px;
	background-color:#fff;
	border:1px solid #ddd;
}

table.rating01 .star-rating {
	position: relative;
	display:inline-block;
	font-size:18px;
	line-height:1.0;
}
table.rating01 .star-rating .star-rating-item{
	position:absolute;
	overflow: hidden;
	white-space: nowrap;
}
table.rating01 .star-rating .star-rating-item:before{
	content:"★★★★★";
	color: #ffcc33;
}
table.rating01 .star-rating:after {
	content:"★★★★★";
	color: #ccc;
}

/*
	米印
*/
.kome {
	color:#888;
	font-size:11px;
}

.sankaku:before {
	padding:5px;
	font-family: "Font Awesome 5 Free";
	content: '\f0da';
	font-weight: 900;
	font-size:1.1em;
	color:#ec4041;
}

/*
	flexbox
*/
.flexbox3{
	display:flex;
	/*justify-content: space-between;	両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置。*/
	justify-content: space-around;	/*両端のアイテムも含めて、均等な間隔を空けて配置*/
}

@media (max-width: 640px) {
	.flexbox3{
		flex-flow: column;
	}
	.flexbox3 .item{
		text-align:center;
		margin:0 auto 1em;
	}
}
@media (min-width: 641px) {
	.flexbox3{
		flex-flow: row;
	}
	.flexbox3 .item{
		max-width:50%;
		margin:10px;
	}
}

.flexbox2{
	display:flex;
	/*justify-content: space-between;	両端のアイテムを余白を空けずに配置し、他の要素は均等に間隔を空けて配置。*/
	justify-content: space-around;	/*両端のアイテムも含めて、均等な間隔を空けて配置*/
}
.flexbox2r{
	display:flex;
	justify-content: space-around;
}

@media (max-width: 640px) {
	.flexbox2{
		flex-flow: column;
	}
	.flexbox2r{
		flex-flow: column;
	}
	
}
@media (min-width: 641px) {
	.flexbox2{
		flex-flow: row;
	}
	.flexbox2r{
		flex-flow: row-reverse;
	}
	.flexbox2 .item1 {
		max-width:50%;
	}
	.flexbox2  .item2 {
		max-width:60%;
	}
	.flexbox2r .item1 {
		max-width:50%;
	}
	.flexbox2r  .item2 {
		max-width:60%;
	}
}

.additional_info{
	padding: 0 20px;
	color:#444;
	font-size:14px;
}

.additional_info h2 {
	clear: both;
	margin:1em 0 1em;
	padding:0 20px;
	color: #444;
	background: #fff;
	font-weight:normal;
	font-size:14px;
}

.additional_info p {
	margin:0;
}

.additional_info a {
	color:#444;
}

/*
	table
*/
.normal_table table{
	margin:0 0 10px;
	table-layout:fixed;
	border: solid 1px #ccc;
	border-collapse:collapse;
	width:100%;
	word-wrap: break-word;
	overflow-wrap : break-word;
}

.normal_table tr{
	border:0 !important;
}

.normal_table th{
	background: #f0f0f0;
	color:#333;
	border:solid 1px #ccc;
	padding:5px;
	min-width:100px;
	text-align:center;
}


.normal_table table.gray th{
	background: #f0f0f0;
	color:#333;
}

.normal_table td{
	border:solid 1px #ccc;
	color: #000;
	padding:5px;
}

/*
	立体的なテーブル
*/
.gr_table table{
	margin:2em 0 2em;
	width: 100%;
	border-collapse:separate;
	border-spacing: 0;
}

.gr_table table th:first-child{
	border-radius: 5px 0 0 0;
}

.gr_table table th:last-child{
	border-radius: 0 5px 0 0;
	border-right: 1px solid #3c6690;
}

.gr_table table th{
	text-align: center;
	color:white;
	background: linear-gradient(#829ebc,#225588);
	border-left: 1px solid #3c6690;
	border-top: 1px solid #3c6690;
	border-bottom: 1px solid #3c6690;
	box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
	/*width: 25%;*/
	padding: 10px 0;
}

.gr_table table td{
	text-align: center;
	border-left: 1px solid #a8b7c5;
	border-bottom: 1px solid #a8b7c5;
	border-top:none;
	box-shadow: 0px -3px 5px 1px #eee inset;
	/*width: 25%;*/
	padding: 10px 0;
}

.gr_table table td:last-child{
	border-right: 1px solid #a8b7c5;
}

.gr_table table tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
}

.gr_table table tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
}

.gr_table th.col1,
.gr_table td.col1 {
	width:30%;
}
.gr_table th.col2,
.gr_table td.col2 {
	width:70%;
}