@charset "UTF-8";

/* generic styles */

* {
	margin: 0;
	padding: 0;
}

body {
	color: #000000;
	margin: 0;
	padding: 0;
	font-family:
		/* Verdana, */
		"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	width: 100%;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 100%;
	font-weight: normal;
}

img {
	border: 0;
	margin: 0;
	vertical-align: bottom;
}

table,
tr,
td {
	border-collapse: collapse;
}

a img {
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
}

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.clear {
	clear: both;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.row {
	display: flex;
	flex-wrap: wrap;
}

.col-3 {
	-ms-flex: 0 0 25%;
	flex: 0 0 25%;
	max-width: 25%;
}

.col-4 {
	-ms-flex: 0 0 33.3333%;
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}

.col-6 {
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
}

.w-100 {
	width: 100% !important;
}

.w-50 {
	width: 50% !important;
}

.d-flex {
	display: flex !important;
}

.pos_rel {
	position: relative !important;
}

.pos_abs {
	position: absolute !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-1 {
	margin-bottom: .25rem !important;
}

.mb-2 {
	margin-bottom: .5rem !important;
}

.mb-3 {
	margin-bottom: 1rem !important;
}

.mb-4 {
	margin-bottom: 1.5rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

/* custom styles */

body {
	box-sizing: border-box;
	border: 2px #e8e8e8 solid;
	color: #333333;
	line-height: 1.3;
}

/* header */

header {
	padding: 1rem;
}

.header_logo {
	float: left;
}

.header_logo img {
	width: 180px;
}

.header_copy {
	float: right;
}

.header_copy img {
	height: 40px;
}

/* content */

.op_headline {
	position: relative;
	margin-top: 1.5rem;
	margin-bottom: .5rem;
}

.op_headline img {
	width: 100%;
}

.op_headline h2 {
	position: absolute;
	width: 100%;
	text-align: center;
	font-weight: bold;
	color: white;
	padding: 1vw 0;
	font-size: 4.5vw;
	inline-size: 100%;
}

.op_content {
	padding: 0 1rem;
	margin-bottom: 1.5rem;
}

.op_content .img_center {
	text-align: center;
	width: 100%;
}

.op_button {
	margin: 1rem 0;
}

.op_button img,
.op_button input[type="image"] {
	width: 100%;
}

.op_content .border_text {
	padding: 1rem;
	border-radius: 1rem;
}

.border_text.yellow {
	border: 2px #fbc846 solid;
}

.border_text.green {
	border: 2px #a7cc78 solid;
}

.border_text.blue {
	border: 2px #0064e8 solid;
}

/* list_green */

ul.list_green {
	list-style-type: none;
}

ul.list_green li {
	padding-left: 1.5rem;
	margin: 0 0 .5rem;
	background: url("../img/copy1_list_icon.jpg") no-repeat left 0;
	background-size: 18px;
}

ul.list_green ol {
	padding: 1rem 0 1rem 1.5rem;
	border-bottom: 1px #aaaaaa solid;
	background: no-repeat left 1rem;
	background-size: 18px;
}

ul.list_green ol:nth-of-type(1) {
	background-image: url("../img/point_list_icon1.jpg");
}

ul.list_green ol:nth-of-type(2) {
	background-image: url("../img/point_list_icon2.jpg");
}

ul.list_green ol:nth-of-type(3) {
	background-image: url("../img/point_list_icon3.jpg");
	border-bottom: none;
}

ul.list_green ol span {
	color: #ff5811;
}

/* maker_logo */

.maker_logo_box {
	padding: 0 4.5%;
	margin: 6% 0 8%;
}

.maker_logo {
	margin-bottom: 6%;
}

.maker_logo img {
	width: 100%;
}

/* q_and_a */

.q_and_a dt,
.q_and_a dd {
	padding: 0 0 1rem 1.25rem;
	background: no-repeat 0 .1rem;
	background-size: 16px;
}

.q_and_a dt {
	background-image: url("../img/q_and_a_q.jpg");
}

.q_and_a dd {
	background-image: url("../img/q_and_a_a.jpg");
	color: #ff5811;
	border-bottom: 1px #aaaaaa solid;
	margin-bottom: 1rem;
}

/* company box */

.company_box {
	padding: 0 6%;
	margin: 11% 0 4%;
}

.company_title {
	padding: 0 2% 2%;
	color: #444444;
	font-size: 1.4em;
}

.company_box table {
	width: 100%;
	border: 2px #000 solid;
	font-size: 0.8em;
}

.company_box table th {
	padding: 2% 5% 2% 3%;
	text-align: left;
	font-weight: normal;
}

.company_box table td {
	padding: 2% 5% 2% 0;
}

.company_box table tr:first-child th {
	padding-top: 4%;
}

.company_box table tr:first-child td {
	padding: 4% 0 2%;
}

.company_box table tr:last-child th {
	padding-bottom: 4%;
}

.company_box table tr:last-child td {
	padding: 2% 0 4%;
}

.company_logo img {
	width: 100%;
}

/* footer */

footer {
	padding: 0 0 1rem;
	text-align: center;
	font-size: 0;
	line-height: 0;
}

footer a {
	display: inline-block;
	color: #444444;
	font-size: 0.8rem;
	line-height: 0.9rem;
	padding: 0 .5rem;
}

footer a:not(:first-child) {
	border-left: 1px #444444 solid;
}