body {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	background-color: #141920;
	font-size: 18px;
	line-height: 30.6px;
	}
	#container {
	width: 100%;
	max-width: 800px;
	background-color: #141920;
	box-shadow:0px 0px 8px #eee;
	margin: 0 auto;
	word-wrap: break-word;
	}
	#header	{
	margin: 0;
	border-bottom: 10px solid #719DDC;
	background-color: #141920;
	}

	#breadcrumb	{
	margin: 0;
	padding: 10px 10px 0 10px;
	font-size: 0.8em;
	color: #eee;
	}

    #wrap {
	display: flex;
	/* 全体を横並びに */
	flex-wrap: wrap;
	/* 下に回り込む設定 */
	justify-content: center;
	/* flexboxの要素をセンターに寄せる */
	margin: auto;
	height: auto;
    }
    #main {
	width: 780px;
	padding: 0 10px 0 10px;
	/* mainとside-barで3:1に設定 */
    }
    #sidebar {
	width: 300px;
	padding: 0 10px 0 10px;
    }

	#wrap img {
	width: 100%;
	max-width: 100%;
	height: auto;
	-webkit-backface-visibility: hidden;
	}

	h1 {
	padding: 20px 10px;
	font-size: 1em;
	text-align: center;
	color: #eee;
	}
	
	h1 img {
	width: 70px;
	height: 70px;
	border-radius: 50%;  /* 円形にする */
	}
	
	
	h2 {
	margin: 10px 0;
	padding: 10px;
	font-size: 1em;
	border-left: 5px solid #719DDC;
	border-bottom: 1px solid #719DDC;
	background: #000;
	color: #eee;
	}
	h3 {
	margin: 10px 0;
	padding: 10px;
	font-size: 1em;
	border-left: 5px solid #719DDC;
	border-bottom: 1px solid #719DDC;
	background: #000;
	color: #eee;
	}
	h4 {
	margin: 0;
	padding: 10px;
	font-size: 1em;
	background: #999;
	color: #fff;
	}
	p {
	margin: 5px 0;
	padding: 5px 0;
	font-size: 1em;
	color: #eee;
	line-height: 170%;
	}

	a {
	text-decoration: none;
	}
	a:hover{
	text-decoration: underline;
	}

	ul li{
	list-style-type: none;
	line-height: 1.5em;
	}


	#mokuji {
	color: #1e366a;
	border: dotted #1e366a 2px;/*ドット 色 太さ*/
	padding: 0.5em 0.5em 0.5em 2em;
	}
	#mokuji p {
	font-weight: bolder;
	}
	#mokuji ul li, ol li {
	line-height: 1.5;
	padding: 0.5em 0;
	}


	.al-c {
	text-align: center;
	font-size: 1.5em;
	}

	table {
	border: 1px solid #999;
	border-collapse: collapse;
	}
	th,td {
	border: 1px solid #999;
	padding: 10px;
	}

	#sidebar ul{
	border-top: 1px solid #336699;
	border-left: 1px solid #336699;
	border-right: 1px solid #336699;
	}
	#sidebar li{
	border-bottom: 1px solid #336699;
	list-style-type: none;
	}
	#sidebar li a{
	display: block;
	padding: 0.7em;
	}

	#policy	{
	width: 98%;
	margin-top: 30px;
	padding: 0 1%;
	border-top: 2px solid #719DDC;
	}
	#policy	h2 {
	margin: 10px 0;
	padding: 10px 10px;
	font-size: 1em;
	border-left: 5px solid #719DDC;
	background: #000;
	}
	#policy	p {
	padding: 5px 0;
	font-size: 0.6em;
	line-height: 170%;
	}
	#footer	{
	margin: 0;
	padding: 10px 0;
	border-top: 2px solid #719DDC;
	background-color: #141920;
	text-align: center;
	}

	#date {
	text-align: right;
	font-size: 0.8em;
	}

	a.btn-style-link {
	display: inline-block;
	width: calc(100% - 48px);
	padding: 16px 24px;
	text-decoration: none;
	border: 1px;
	background: #0c0;
	color: #fff;
	border-radius: 5px;
	}

	.scroll-table {
	overflow: auto;
	white-space: nowrap;
	}

.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%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星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 */


.grid{
    display: grid;
    width: 100%;
    grid-auto-rows: auto;
    grid-template-columns: 50% 50%;
    border-left: solid #ccc 1px;
    border-top: solid #ccc 1px;
}
@media screen and (max-width: 480px) {
    .wrap{
        grid-auto-columns: auto;
    }
}
.ttl,.itm{
    padding: 0.5rem;
    color: #444;
    border-bottom: solid #ccc 1px;
    border-right: solid #ccc 1px;
}
.ttl{
}
.itm{
}
@media screen and (max-width: 480px) {
    .ttl,.itm{
        grid-column: 1 / 3;
    }
}


    @media screen and (max-width: 768px) {
      #main {
        width: 100%;
      }

      #sidebar {
        width: 100%;
      }
    }