
div.col-md-12 h1 { letter-spacing: 0.05em; font-family: 'EB Garamond', serif; font-size: 400% !important; line-height: 0.5em; }
div.col-md-12 h1 span { font-size: 30%; font-weight: bold; letter-spacing: 0; }

@media screen and (max-width: 549px){
	div.col-md-12 h1 { text-align: center; }
}

.rsystem_column { color: #000; }
.rsystem_column a { text-decoration: none; color: #000; }
.rsystem_column:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }

@media screen and (min-width: 800px) {
	.rsystem_column .left { width: 48%; padding-bottom: 30px; float: left; }
	.rsystem_column .right { width: 48%; padding-bottom: 30px; float: right; }
}
@media screen and (max-width: 799px) {
	.rsystem_column .left { padding-bottom: 30px; float: none; }
	.rsystem_column .right { padding-bottom: 30px; float: none; }
}
.rsystem_column .menu_head { border-left: solid 9px #000; padding: 0 0 0 20px; }
.rsystem_column .menu_head h2 { margin: 0 !important; padding: 0 !important; font-size: 14pt; font-weight: bold; border-bottom: none !important; }
.rsystem_column .menu_head p { margin: 0; padding: 0 0 0 1px; font-size: 9pt; font-weight: bold; }
.rsystem_column .menu_head p.sub_text { font-weight: bold; }
.rsystem_column .menu_head p.sub_text span { font-weight: normal; }
.rsystem_column dl { padding: 15px 10px 0 29px; font-weight: bold; }
.rsystem_column dl:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
.rsystem_column dt { width: 15%; margin: 0; padding: 2px 0; font-size: 9.5pt; line-height: 1.2em; float: left; clear: left; }
.rsystem_column dd { width: 85%; margin: 0; padding: 2px 0; font-size: 9.5pt; line-height: 1.2em; float: left; }
.rsystem_column dd:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; }
.rsystem_column dd > span { font-weight: normal; }
.rsystem_column span.new { margin: -1px 0 0 10px; padding: 2px 3px; font-size: 7pt; color: #fff; font-weight: bold; line-height: 1; background: #dc3a18; display: inline-block; }
.off { opacity: 0.3; }
div.logo { padding: 80px 0 40px 0; text-align: center; }
div.logo img { width: 180px; height: auto; }

section.gr2840l, section.gr2840r { margin: 100px 0 50px 0; padding: 0 10px; font-family: 'EB Garamond', serif; font-size: 50px; color: #ccc; letter-spacing: -0.01em; line-height: 1em; background: #eee; }
section.gr2840l span, section.gr2840r span { color: #555; }
section.gr2840l { text-align: left; }
section.gr2840l { text-align: right; }

ul.img_list { margin: 80px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; }
ul.img_list li { width: 20%; position: relative; }
ul.img_list li:before { padding-top: 100%; content: ""; display: block; }
ul.img_list img { width: 100%; height: 100%; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; object-fit: cover; opacity: 1.0; }
ul.img_list img:hover { opacity: 0.5; }

div.review_link .col-md-6 { padding: 10px; }
div.review_link p.img { width: 30%; margin: 0 5% 0 0; padding: 0; float: left; }
div.review_link p.img img { width: 100%; height: auto; margin-bottom: 0px; border-radius: 3px; }
div.review_link p.txt { width: 65%; margin: 0; padding: 0; font-size: 95%; font-weight: bold; line-height: 1.5; text-align: left; float: left; }
div.review_link p.txt span { font-size: 100%; font-weight: normal; }
div.review_link a { padding: 14px; color: #000; text-decoration: none; background: #eee; border: none; border-radius: 5px; display: block; }
div.review_link a:hover { color: #000; background: #aaa; }
div.review_link a:after { content: "."; height: 0; clear: both; display: block; visibility: hidden;  }

ul.gr_list { }
ul.gr_list li { text-align: center; }
ul.gr_list li p { margin: 15px 0 25px 0; font-size: 120%; text-align: center; }
ul.gr_list li h2 { margin: 40px 0 0 0; padding: 0; font-family: 'EB Garamond', serif; font-size: 80pt !important; letter-spacing: 0.05em; line-height: 0.4em; text-align: center; font-weight: normal; }
ul.gr_list li h2 span { font-size: 30%; letter-spacing: 0; }
ul.gr_list li a { color: #000 !important; border: solid 1px #aaa; border-radius: 10px; background: #fff; display: block; opacity: 0.8; }
ul.gr_list li a:hover { border: solid 1px #111; opacity: 1.0; }
ul.gr_list img { width: 80% !important; height: auto !important; }
@media screen and (max-width: 600px) {
ul.gr_list li h2 { font-size: 40pt !important; }
ul.gr_list img { width: 90% !important; height: auto !important; }
}
