/*
Grid 960 Syetem
Clearfix
2020.09.01
*/
/*----------------------------------------
Grid 960 Syetem
----------------------------------------*/
/* ---- Clearfixes ---- */
.row:before, .row:after, .fix:before, .fix:after {
content: '';
display: table;
}
.row:after, .fix:after {
clear: both;
}
/* ---- Grid Layout ---- */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0 auto;
color: #666666;
}
.container {
margin: 0 auto;
width: 976px;
}
.row {
width: 100%;
margin: 0 auto;
}
/* ---- Max Image Size ---- */
.row img {
max-width: 100%;
height: auto;
}
/* ---- Block 1/2 3/1 4/1 ---- */
.block2 li {
width: 47%;
margin-right: 6%;
float: left;
}
.block2 li:nth-child(2n) {
margin-right: 0%;
}
.block3 li {
width: 32%;
margin-right: 2%;
float: left;
}
.block3 li:nth-child(3n) {
margin-right: 0%;
}
.block4 li {
width: 24%;
margin-right: 1.3333%;
float: left;
}
.block4 li:nth-child(4n) {
margin-right: 0%;
}
.block2 li, .block3 li, .block4 li {
margin-bottom: 1rem;
}
.block2 li img, .block3 li img, .block4 li img {
max-width: 100% !important;
}
ul.block2:after, ul.block3:after, ul.block4:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
/* ---- Mobile switch ---- */
.show-mobile, .mobile-only {
display: none;
}
.show-pc, .pc-only, .hide-mobile, .mobile-off {
display: block;
}
.centered {
float: none;
margin: auto;
}
#wide {
width: 94%;
float: left;
margin-right: auto;
margin-left: 3%;
margin-top: 2em;
margin-bottom: 3em;
display: block;
}
#wide img {
max-width: 100%;
height: auto;
}
/* Mobile Float Box */
.leftcol {
width: 47%;
margin-right: 6%;
float: left;
display: block;
}
.rightcol {
width: 47%;
margin-right: 0;
float: left;
display: block;
}
.leftbox {
width: 40%;
float: left;
margin-right: 4%;
display: block;
}
.rightbox {
width: 55%;
float: left;
display: block;
}
.leftcol img, .rightcol img, .leftbox img, .rightbox img {
max-width: 100%;
height: auto;
}
/* Mobile Setting under 640px
-------------------------------------------------------- */
@media all and (max-width: 640px) {
body {
font-size: 90%;
}
.container {
width: 97%;
margin: 0 auto;
}
.row {
width: 100%;
margin-bottom: 1em;
padding: 0 10px;
}
.block2 li, .block3 li, .block4 li, .block5 li {
width: 100%;
margin: 0;
margin-bottom: 0.7em;
padding: 0 10px;
clear: both;
float: none;
}
.block2 li img, .block3 li img, .block4 li img, .block5 li img {
max-width: 100%;
}
/* Mobile switch */
.show-pc, .pc-only, .hide-mobile, .mobile-off {
display: none;
}
.show-mobile, .mobile-only {
display: block;
}
#wide {
width: 100%;
margin-right: 0;
margin-left: 0;
display: block;
margin-top: 1em;
margin-bottom: 1em;
float: none;
}
.leftcol, .rightcol, .leftbox, .rightbox {
width: 100%;
display: block;
margin-bottom: 1rem;
clear: both;
float: none;
}
/* Heading */
h1 {
font-size: 0.9em;
}
h2 {
font-size: 1.12em;
}
h3 {
font-size: 1.12em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h4 {
font-size: 1em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
h5 {
font-size: 1em;
margin-top: 0.3em;
margin-bottom: 0.3em;
}
h6 {
font-size: 0.9em;
}
p {
font-size: 0.9em;
margin-bottom: 0.8em;
}
/* Mobile switch */
.show-pc, .pc-only, .hide-mobile, .mobile-off {
display: none;
}
.show-mobile, .mobile-only {
display: block;
}
}
/* Display
-------------------------------------------------------- */
.hide, .hidden {
display: none;
}
.show {
display: block;
}
/* Clearfix: contain floats
-------------------------------------------------------- */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* Horizontal Rule
-------------------------------------------------------- */
hr.line {
clear: both;
border-bottom: 0;
border-top: 1px solid #ccc;
border-right: 0;
border-left: 0;
margin: 14px 0;
min-height: 0px;
height: 1px;
}
hr.dott {
clear: both;
border-bottom: 0;
border-top: 1px dotted #ccc;
border-right: 0;
border-left: 0;
margin: 14px 0;
min-height: 0px;
height: 1px;
}
hr.clears {
clear: both;
border-bottom: 0;
border-top: 1px solid #fff;
filter: alpha(opacity=0); /*ie100*/
-moz-opacity: 0.0; /*fx1.0*/
opacity: 0.0; /*wk1.0*/
border-right: 0;
border-left: 0;
margin: 1px 0;
min-height: 0px;
height: 1px;
}
hr.space {
clear: both;
border-bottom: 0;
filter: alpha(opacity=0); /*ie100*/
-moz-opacity: 0.0; /*fx1.0*/
border-top: 1px solid #fff;
opacity: 0.0; /*wk1.0*/
border-right: 0;
border-left: 0;
margin: 24px 0;
min-height: 0px;
height: 1px;
}
hr.spacer {
clear: both;
border-bottom: 0;
filter: alpha(opacity=0); /*ie100*/
-moz-opacity: 0.0; /*fx1.0*/
border-top: 1px solid #fff;
opacity: 0.0; /*wk1.0*/
border-right: 0;
border-left: 0;
margin: 48px 0;
min-height: 0px;
height: 1px;
}
/* Text Align
-------------------------------------------------------- */
.right, .t-right, .text-right {
text-align: right;
}
.left, .t-left, .text-left {
text-align: left;
}
.center, .t-center, .text-center {
text-align: center;
}
/* Float
-------------------------------------------------------- */
img {
margin: 0;
padding: 0;
display: inline-block;
position: relative;
}
.alignleft {
float: left;
margin-right: 1.5em;
}
.alignright {
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
a img.alignright {
float: right;
margin: 0.313rem 0 1.25rem 1.25rem;
}
a img.alignnone {
margin: 0.313rem 1.25rem 1.25rem 0;
}
a img.alignleft {
float: left;
margin: 0.313rem 1.25rem 1.25rem 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
@media all and (max-width: 480px) {
img.img-left, img.alignleft, img.img-right, img.alignright {
float: none;
width: 80%;
margin: 0.5rem 10%;
border: none; /*clear: both;*/
}
}
/* Table
-------------------------------------------------------- */
table {
width: 100%;
margin: 0;
text-align: left;
border-collapse: collapse;
background: #ffffff;
margin-bottom: 1rem;
}
thead, tbody {
margin: 0;
padding: 0;
}
table.line tbody {
border-bottom: 1px solid #dcdcdc;
}
table.line th, table.line td {
padding: 10px;
font-size: 1em;
font-weight: normal;
border-top: 1px solid #dcdcdc;
text-align: left;
}
table.line th {
white-space: nowrap;
text-align: center;
background: #f5f5f5;
font-weight: bold;
}
table.box {
width: 100%;
margin: 0;
text-align: left;
vertical-align: top;
box-sizing: border-box;
border-bottom: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
}
table.w90 {
width: 90%;
margin: 0 auto;
}
table.w80 {
width: 80%;
margin: 0 auto;
}
table.w70 {
width: 70%;
margin: 0 auto;
}
table.box thead, table.box tbody {
margin: 0;
padding: 0;
}
table.box th, table.box td {
padding: 5px 10px;
vertical-align: top;
font-size: 1em;
font-weight: normal;
border-top: 1px solid #dcdcdc;
border-left: 1px solid #dcdcdc;
text-align: left;
}
table.box th {
text-align: center;
font-weight: bold;
background: #f8f4e6;
}
table.box.center td {
text-align: center;
}
table.box td.center {
text-align: center;
vertical-align: middle;
}
@media all and (max-width: 640px) {
table.box.responsive th {
display: none;
}
table.box.responsive tbody td {
display: block;
}
table.box.responsive tbody td::before {
content: attr(label);
display: block;
clear: both;
font-weight: bold;
padding-bottom: 0.2em;
margin-bottom: 0.3em;
border-bottom: 1px solid #dcdcdc;
}
}
@media all and (max-width: 640px) {
	.table-responsive {
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	}
	table.w90,
	table.w80,
	table.w70 {
	width: 95%;
	margin: 0 auto;
	}
}
/* Definition List FAQ
-------------------------------------------------------- */
dl.numbers {
margin: 2em 0;
}
dl.numbers dt {
font-size: 1.15em;
line-height: 45px;
font-weight: bold;
color: #1c305c;
margin-bottom: 0.3em;
position: relative;
counter-increment: titleNum;
padding-left: 3.3em;
}
dl.numbers dt:before {
position: absolute;
top: 0;
left: 0;
content: counter(titleNum);
width: 45px;
height: 45px;
line-height: 45px;
background-color: #c8c2be;
border-radius: 23px;
color: #ffffff !important;
font-size: 1.3em;
text-align: center;
}
dl.numbers dd {
margin-left: 4em;
font-size: 0.95em;
margin-bottom: 1em;
}
@media all and (max-width: 640px) {
	dl.numbers dd {
	margin-left: 1em;
	}
}
dl.faq {
margin: 1em 0 2em 0;
}
dl.faq dt {
font-size: 1.08em;
font-weight: bold;
color: #1c305c;
margin-bottom: 0.5em;
position: relative;
counter-increment: titleNum;
padding-left: 3.5em;
}
dl.faq dt::before {
position: absolute;
top: 0;
left: 0;
content: "Q."counter(titleNum);
width: 45px;
height: 24px;
line-height: 24px;
background-color: #c70067;
border-radius: 12px;
color: #ffffff !important;
font-size: 0.85em;
text-align: center;
}
dl.faq dd {
padding-left: 3.8em;
font-size: 1em;
margin-bottom: 1em;
position: relative;
}
dl.faq dd:before {
position: absolute;
top: 0;
left: 0;
content: "Ans.";
width: 45px;
height: 24px;
line-height: 24px;
background-color: #aaaaaa;
border-radius: 12px;
color: #ffffff !important;
font-size: 0.85em;
text-align: center;
}
/* Breadcrumbs
-------------------------------------------------------- */
.breadcrumbs {
margin-bottom: 1.65em;
}
.breadcrumbs:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs ul {
font-size: .9em;
color: rgba(0, 0, 0, 0.4);
list-style: none;
margin: 0;
}
.breadcrumbs ul:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs ul:after {
content: "";
display: table;
clear: both;
}
.breadcrumbs li {
float: left;
margin-right: 5px;
}
.breadcrumbs li + li:before {
content: " > ";
color: #aaa;
font-size: 12px;
margin: 0 7px 0 5px;
position: relative;
top: -1px;
}
.breadcrumbs.breadcrumbs-path li + li:before {
content: " / ";
top: 0;
}
.breadcrumbs a {
color: #0f0f0f;
text-decoration: none;
}
.breadcrumbs a:hover {
color: #0f0f0f;
text-decoration: underline;
}
.breadcrumbs li.active a, .breadcrumbs span, .breadcrumbs li.active a:hover {
text-decoration: none;
cursor: text;
color: rgba(0, 0, 0, 0.4);
}
/* Pagination
-------------------------------------------------------- */
.pagination {
position: relative;
left: -9px;
margin-left: 0;
list-style: none;
}
.pagination:after {
content: "";
display: table;
clear: both;
}
.pagination:after {
content: "";
display: table;
clear: both;
}
.pagination li {
float: left;
margin-right: 2px;
}
.pagination a, .pagination span {
display: block;
padding: 7px 9px;
line-height: 1;
border-radius: 2px;
color: #0f0f0f;
text-decoration: none;
}
.pagination span, .pagination li.active a, .pagination li.active a:hover {
color: #ffffff;
background-color: #0f0f0f;
cursor: text;
}
.pagination a:focus, .pagination a:hover {
text-decoration: none;
background-color: #0f0f0f;
color: #fff;
}
/* Labels
-------------------------------------------------------- */
.label, .badge {
background: #e0e3e5;
font-size: 12.75px;
display: inline-block;
line-height: 1;
padding: 4px 7px 3px 7px;
color: #0f0f0f;
text-align: center;
font-weight: normal;
text-transform: uppercase;
}
.label-outline {
background: none;
border: 1px solid #0f0f0f;
padding: 3px 6px 2px 6px;
}
.badge {
border-radius: 15px;
}
/* Form
-------------------------------------------------------- */
form {
padding: 0;
margin: 0;
}
form p {
margin-bottom: 0.8em !important;
}
fieldset {}
legend {}
label {}
input {
display: inline-block;
*display: inline;
vertical-align: middle;
width: auto;
zoom: 1;
border: 1px solid #ccc;
font-size: 0.9em;
padding: 6px 0;
text-indent: 5px;
background: #fafafa;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0px auto 5px auto;
}

label.radio {
display: block;
margin-top: -24px;
margin-bottom: 24px;
}
label.radio.last {
margin-top: -24px;
margin-bottom: 0;
}
input::-webkit-input-placeholder, input:-moz-placeholder, .placeholder {
color: #bbb;
}
input::-moz-focus-inner {
border: 0;
}
input[disabled="disabled"], input.disabled {
color: #999;
background: #f5f5f5;
}
/* Foucus */
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, button:focus, a.button:focus, select:focus {
border: 1px solid #50B1FE;
outline: none;
}
/* Mobile setting */
input[type="number"] {
width: 6em;
padding: 6px 0;
}
input[type="date"] {
width: 11em;
padding: 6px 0;
}
input[type="tel"] {
width: 13em;
}
input[type="text"], input[type="email"], input[type="password"] {
max-width: 280px;
}
textarea {
width: 380px;
height: 150px;
margin: 0;
border: 1px solid #ccc;
padding: 5px;
vertical-align: middle;
font-family: inherit;
font-size: 0.9em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="radio"], input[type="checkbox"] {
position: relative;
width: 24px;
height: 24px;
margin: 0 5px 0 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
vertical-align: middle;
}
input[type="radio"] {
border-radius: 12px;
}
input[type="radio"]:checked, input[type="checkbox"]:checked {
background-color: #F4F8FB;
}
input[type="radio"]:checked:before, input[type="checkbox"]:checked:before {
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -5px 0 0 -5px;
content: "";
width: 10px;
height: 10px;
background-color: #007bbb; /*#778EA2;*/
}
input[type="radio"]:checked:before {
border-radius: 5px;
}
select {
min-width: 3em;
height: 36px;
font-size: 0.9rem;
padding: 0 10px;
-moz-appearance: button;
-webkit-appearance: button;
appearance: button;
text-overflow: clip;
background: #fafafa;
border: 1px solid #dcdcdc;
-moz-border-radius: 2px;
border-radius: 2px;
}
@media all and (max-width: 640px) {
textarea, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"] {
max-width: 320px;
}
input[type="date"] {
height: 32px;
line-height: 21px;
}
}
/* Buttons
-------------------------------------------------------- */
input[type="submit"], input[type="button"] {
display: block;
font-size: 14px;
line-height: 1.5;
width: 200px;
margin: 0.5em auto;
padding: 0.52em 0;
text-align: center;
text-decoration: none;
color: #ffffff;
-webkit-appearance: none;
outline: none;
border: none;
border-radius: 2px;
box-shadow: none;
cursor: pointer;
background: #ed6d35;
}
nput[type="submit"]:hover, input[type="button"]:hover {
color: #ffffff;
background: #2b2b2b;
}
input[type="submit"].btn-big {
font-size: 16px;
}
input[type="submit"].btn-small {
font-size: 12px;
}
.btn-orange, .btn-blue, .btn-red, .btn-green {
position: relative;
height: auto;
padding: 5px 32px 5px 24px;
line-height: 1.6;
white-space: normal;
display: inline-block;
border-radius: 5px;
text-align: center;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
a.btn-orange, a.btn-blue, a.btn-red, a.btn-green {
color: #fff !important;
}
.btn-orange:before, .btn-blue:before, .btn-red:before, .btn-green:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 16px;
width: 9px;
height: 9px;
margin: auto;
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(45deg);
}
.btn-orange {
background: #ed6d46; /*chinese-red*/
}
.btn-blue {
background: #00608d; /*madonna-blue*/
}
.btn-red {
background: #c70067; /*ruby*/
}
.btn-green {
background: #25b7c0; /*cambridge-blue*/
}
a.btn-orange:hover, a.btn-blue:hover, a.btn-red:hover, a.btn-green:hover {
font-weight: bold;
background: #1a1a1a !important;
}
.btn-orange, .btn-blue, .btn-red, .btn-green {
font-size: 1em;
}
.btn, a.btn, button.btn, .btns, a.btns, button.btns {
line-height: 1.5;
position: relative;
display: inline-block;
padding: 0.5em 3em;
max-width: 90%;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.linebtn {
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1em 3em;
border: 1px solid #aaaaaa;
margin: 1em 0;
max-width: 95%;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
color: #111111;
}
.linebtn:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 16px;
width: 9px;
height: 9px;
margin: auto;
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(45deg);
}
a.linebtn {
color: #111111!important;
}
.linebtn:hover {
border: 1px solid #111111;
}
a.btn-contact {
display: block;
font-size: 16px;
color: #fff;
background: #25b7c0;
}
a.btn-contact .hours {
line-height: 1;
font-size: 13px;
display: inline-block;
margin-top: 0.5rem;
padding: 0.25rem 2rem;
letter-spacing: 0;
color: #25b7c0;
border-radius: 0.5rem;
background: #fff;
}
a.btn-contact i {
font-size: 20px;
}
a.btn-contact i.fa-position-left {
font-size: 24px;
left: 0.5em;
}
a.btn-contact :hover {}
a.btn-tel {
display: block;
margin-top: 15px;
color: #fff;
background: #00afcc;
}
a.btn-tel i {
font-size: 25px;
}
a.btn-tel i.fa-position-left {
font-size: 24px;
left: 1em;
}
a.btn-tel .number {
line-height: 1;
display: inline-block;
margin-top: 0.5rem;
padding: 0.25rem 2rem;
letter-spacing: 0;
color: #00afcc;
border-radius: 0.5rem;
background: #fff;
}
a.btn-tel:hover {
color: #fff;
}
.fa-position-left {
position: absolute;
top: calc(50% - 0.5em);
left: 0.5em;
}
.fa-position-right {
position: absolute;
top: calc(50% - 0.5em);
right: 0.5em;
}
a.btn-flat {
overflow: hidden;
padding: 1.5rem 6rem;
color: #fff;
border-radius: 0;
background: #000;
}
a.btn-flat span {
position: relative;
}
a.btn-flat:before {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
content: '';
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-80%) translateY(-25px);
transform: translateX(-80%) translateY(-25px);
border-radius: 50%;
background: #eb6100;
}
a.btn-flat:hover:before {
width: 400px;
height: 400px;
-webkit-transform: translateX(-1%) translateY(-175px);
transform: translateX(-1%) translateY(-175px);
}
/* Form
-------------------------------------------------------- */
/* Block After
-------------------------------------------------------- */
block:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
/* Box
-------------------------------------------------------- */
/*共通の設定*/
.green-box, .red-box, .ivory-box, .orange-box {
margin: 0 0 1.2em 0 !important;
padding: 0.8em 1em 0.7em 1em;
background: #efefef;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.green-box {
background: rgba(237, 247, 248, 1);
}
.red-box {
background: rgba(254, 244, 246, 1);
}
.ivory-box {
background: #f5f0e9;
}
.orange-box {
background: #fff5e3;
}
.ivory-box p, .green-box p, .red-box p, .orange-box p {
margin: 0.2em 0 !important;
}
.info-box, .warning-box, .success-box {
margin: 0.6em 0 0.8em 0;
padding: 0.8em 1em 0.8em 1em;
background: #f1f1f1;
color: #1a1a1a;
}
.info-box, .warning-box, .success-box {
font-size: 0.9em;
}
.success-box {
background: #bce2e8;
}
.warning-box {
background: #fdeff2;
}
.info-box {
background: #f8f4e6;
}
.round {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.pad-reset {
padding: 0.3em 1em;
}
.box90 {
width: 90%;
margin: 1em auto;
}
.box80 {
width: 80%;
margin: 1em auto;
}
.box70 {
width: 70%;
margin: 1em auto;
}
@media screen and (max-width: 640px) {
.box90, .box80, .box70 {
width: 98%;
margin: 1em auto;
}
}
.info {
margin: 0.6em 0 1.2em 0;
padding: 0.5em 1em 0.5em 1em;
background: #fdeff2;
color: #1a1a1a;
border-radius: 4px;
font-size: 0.85em;
}
.note {
margin: 0.6em 0 1.2em 0;
padding: 0.5em 1em 0.5em 1em;
background: #ebf6f7;
color: #1a1a1a;
border-radius: 4px;
font-size: 0.85em;
}
.info1em {
margin: 0.6em 0 0.8em 0;
font-size: 1em;
}
.note1em {
margin: 0.6em 0 0.8em 0;
font-size: 1em;
}
.inlinebox {
display: inline-block;
text-align: center;
padding: 1em 2em;
}
/*ボックスのpタグのマージン調整*/
.info-box p, .warning-box p, .success-box p .info p, .note p {
/*width:100%;*/
margin: 0.1em 0 !important;
}
.info-box ul, .warning-box ul, .success-box ul, .info ul, .note ul, .info-box ol, .warning-box ol, .success-box ol, .info ol, .note ol {
/*width:100%;*/
margin: 0.1em 0 !important;
}
/* Font Color
-------------------------------------------------------- */
.color-black {
color: #2b2b2b;
}
.color-gray {
color: #9fa09e; /*ash-gray*/
}
.color-blue {
color: #00608d; /*madonna-blue*/
}
.color-green {
color: #25b7c0; /*cambridge-blue*/
}
.color-yellow {
color: #fdd35c; /*naples-yellow*/
}
.color-orange {
color: #ed6d46; /*chinese-red*/
}
.color-red {
color: #c70067; /*ruby*/
}
/* マーカー色の変更
-------------------------------------------------------- */
/*太マーカー*/
.marker-Gray {
background: linear-gradient(transparent 35%, #ff6600 35%);
}
.marker-Green {
background: linear-gradient(transparent 35%, #59b9c6 35%);
}
/*中マーカー*/
.marker-halfGray {
background: linear-gradient(transparent 60%, #ff6600 60%);
}
.marker-halfGreen {
background: linear-gradient(transparent 60%, #59b9c6 60%);
}
/*細マーカー*/
.marker-thinGray {
background: linear-gradient(transparent 85%, #ff6600 85%);
}
.marker-thinGreen {
background: linear-gradient(transparent 85%, #59b9c6 85%);
}
.easebox {
width: 33%;
background: #F36;
transition-delay: 1s;
transition-duration: 2s;
}
.easebox:hover {
width: 100%;
}
/*tabの全体枠*/
.tab_container {
padding-bottom: 1em;
background-color: #fff;
border:1px solid #37beb0;
margin: 0 auto;}
.tab_item {
width: calc(100%/2);    /*100%/4を100%/2に変更*/
padding:15px 0;
border-bottom: 3px solid #37beb0 ;
background-color: #ececec;
text-align: center;
color: #37beb0 ;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}
input[name="tab_item"] {
display: none;
}
.tab_content {
display: none;
padding: 1em 1em 0;
clear: both;
overflow: hidden;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content {  /*, #tab3:checked ~ #tab3_content , #tab4:checked ~ #tab4_contentを削除*/
display: block;
}
.tab_container input:checked + .tab_item {
background-color: #37beb0 ;
color: #fff;
}