@charset 'UTF-8';
/* #####################################################
 * common.css
 * - Core
 * - Layout
 * - Modules
 * - Pages
 * ################################################## */

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/* =====================================================
 * Base
 * ================================================== */

/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-family: sans-serif;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	margin: 0.67em 0;
	font-size: 2em;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	margin: 0;
	color: inherit;
	font: inherit;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
	cursor: pointer;
	-webkit-appearance: button;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}

input {
	line-height: normal;
}

input[type='checkbox'],
input[type='radio'] {
	box-sizing: border-box;
	padding: 0;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
	height: auto;
}

input[type='search'] {
	box-sizing: content-box;
	-webkit-appearance: textfield;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
	border: 1px solid #c0c0c0;
}

legend {
	padding: 0;
	border: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}

/* -----------------------------------------------------
 * Font
 * -------------------------------------------------- */
@font-face {
	font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
}

/* -----------------------------------------------------
 * Init
 * -------------------------------------------------- */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* normalize overwrite */
html {
	position: relative;
	min-height: 100%;
	font-family: 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, sans-serif;
	font-size: 62.5%;
	scroll-behavior: smooth;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #333;
	font-size: 1.6rem;
	line-height: 1.2;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: unset;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

a {
	color: #333;
}

a:visited {
	color: #333;
}

a:hover {
	color: #595959;
}

a:active,
a:focus {
	color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dt,
dd,
ol,
ul,
li,
figure,
figcaption,
small {
	margin: 0;
	font-size: 100%;
	font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.2;
}

img {
	vertical-align: bottom;
}

ul {
	list-style-type: none;
	padding: 0;
}

ol {
	padding: 0;
}

th {
	font-weight: normal;
	text-align: left;
}

p {
	font-size: 1.4rem;
	line-height: 1.6;
}

/* =====================================================
 * Layout
 * ================================================== */

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/**
 * Header module
 */
@media print, screen and (max-width: 767px) {
	.menu__show {
		overflow: hidden;
	}

	.header {
		position: relative;
		z-index: 2;
		width: 100%;
	}

	.header__logo {
		position: relative;
		padding: 20px 70px 20px 20px;
	}

	.header__logo h1 a {
		display: block;
		position: relative;
		height: 30px;
		font-size: 1.1rem;
		text-decoration: none;
	}

	.header__logo h1 a img {
		width: 100%;
		max-width: 156px;
		margin-right: 11px;
	}

	.header__logo h1 a span {
		display: inline-block;
		position: absolute;
		bottom: 3px;
		left: auto;
	}

	.header__logo h1 a span br {
		display: none;
	}
}

@media print, screen and (max-width: 767px) and (max-width: 380px) {
	.header__logo h1 a span br {
		display: block;
	}
}

@media print, screen and (max-width: 767px) {
	.header__spbtn {
		display: inline-block;
		position: absolute;
		top: 0;
		right: 0;
		box-sizing: border-box;
		width: 70px;
		height: 70px;
		margin: 0;
		padding: 0;
		border: none;
		background-color: #33b668;
		transition: all 0.4s;
	}

	.header__spbtn span {
		display: inline-block;
		position: absolute;
		right: 0;
		left: 0;
		box-sizing: border-box;
		width: 33px;
		height: 4px;
		margin: auto;
		background-color: #fff;
		transition: all 0.4s;
	}

	.header__spbtn span:nth-of-type(1) {
		top: 15px;
	}

	.header__spbtn span:nth-of-type(2) {
		top: 25px;
	}

	.header__spbtn span:nth-of-type(3) {
		top: 35px;
	}

	.header__spbtn img {
		position: absolute;
		top: 47px;
		right: 0;
		left: 0;
		margin: auto;
	}

	.header__spbtn img.menu__open {
		display: block;
		height: 8px;
	}

	.header__spbtn img.menu__close {
		display: none;
		height: 11px;
	}

	.header__spbtn.active {
		background-color: #f0f0f0;
	}

	.header__spbtn.active span {
		background-color: #33b668;
	}

	.header__spbtn.active span:nth-of-type(1) {
		top: 5px;
		-webkit-transform: translateY(20px) rotate(-315deg);
		transform: translateY(20px) rotate(-315deg);
	}

	.header__spbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.header__spbtn.active span:nth-of-type(3) {
		top: 45px;
		-webkit-transform: translateY(-20px) rotate(315deg);
		transform: translateY(-20px) rotate(315deg);
	}

	.header__spbtn.active img.menu__open {
		display: none;
	}

	.header__spbtn.active img.menu__close {
		display: block;
	}

	.header__spmenu {
		display: none;
	}

	.header__spmenu > div {
		display: flex;
		position: absolute;
		flex-direction: column;
		width: 100%;
		padding: 21px 20px;
		background-color: #fff;
	}

	.header__nav {
		order: 2;
	}

	.header__nav li {
		margin-bottom: 15px;
	}

	.header__subnav {
		display: flex;
		position: relative;
		flex-direction: column;
		order: 1;
		margin-bottom: 30px;
	}

	.header__subnav ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		order: 2;
	}

	.header__subnav ul li {
		width: 50%;
		padding-bottom: 15px;
	}

	.header__subnav ul li:nth-child(1) {
		padding-right: 5px;
	}

	.header__subnav ul li:nth-child(2) {
		padding-left: 5px;
	}

	.header__subnav ul li:nth-child(3) {
		width: 50px;
		padding-bottom: 0;
	}

	.header__subnav ul li .btn {
		width: 100%;
		padding: 15px 0;
		font-size: 1.3rem;
		text-align: center;
	}

	.header__subnav ul li .btn.btn__fb img {
		height: 28px;
	}



	.header__subnav ul li.lng {
		width: 20%;
		padding-bottom: 15px;
		padding-left: 10px;
	}

	.header__subnav ul li .btn.btn__jp img {
		height: 28px;
	}
	.header__subnav ul li .btn.btn__en img {
		height: 28px;
	}



	.header__subnav address {
		display: block;
		position: absolute;
		bottom: 0;
		left: 0;
		order: 1;
		width: 200px;
		margin-right: 10px;
	}

	.header__subnav address span {
		display: block;
	}

	.header__subnav address span img {
		width: 100%;
	}

	.header__subnav address span:last-child {
		margin-top: 6px;
	}
}

@media print, screen and (min-width: 768px) {
	.header {
		width: 100%;
	}

	.header__inner {
		position: relative;
	}
}

@media print, screen and (min-width: 768px) and (min-width: 768px) {
	.header__inner {
		max-width: 1300px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 50px;
		padding-left: 50px;
	}
}

@media print, screen and (min-width: 768px) and (max-width: 767px) {
	.header__inner {
		padding-right: 15px;
		padding-left: 15px;
	}
}

@media print, screen and (min-width: 768px) and (min-width: 768px) {
	.header__inner {
		margin-top: 40px;
	}
}

@media print, screen and (min-width: 768px) {
	.header__logo {
		height: 43px;
	}

	.header__logo a {
		text-decoration: none;
	}

	.header__logo a img {
		height: 43px;
		margin-right: 14px;
	}

	.header__logo a span br {
		display: none;
	}

	.header__spbtn {
		display: none;
	}

	.header__nav {
		padding-top: 27px;
	}

	.header__nav ul {
		display: flex;
		width: 100%;
		margin: 0 -10px;
	}

	.header__nav ul li {
		flex-basis: 100%;
		max-width: 100%;
		margin-right: 5px;
		margin-left: 5px;
	}

	.header__subnav {
		display: flex;
		position: absolute;
		top: 0;
		right: 50px;
	}

	.header__subnav ul {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.header__subnav ul li {
		margin-left: 5px;
	}

	.header__subnav ul li .btn {
		width: 200px;
		padding: 12px 0;
		text-align: center;
	}

	.header__subnav ul li .btn.btn__fb {
		width: 50px;
	}

	.header__subnav ul li .btn.btn__fb img {
		height: 21px;
	}



	.header__subnav ul li .btn.btn__jp {
		width: 50px;
	}

	.header__subnav ul li .btn.btn__jp img {
		height: 21px;
	}

	.header__subnav ul li .btn.btn__en {
		width: 50px;
	}

	.header__subnav ul li .btn.btn__en img {
		height: 21px;
	}



	.header__subnav address {
		display: block;
		width: 200px;
		margin-right: 10px;
	}

	.header__subnav address span {
		display: block;
	}

	.header__subnav address span img {
		width: 100%;
	}

	.header__subnav address span:last-child {
		margin-top: 6px;
	}
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
	.header__logo {
		height: 65px;
	}

	.header__logo a {
		text-decoration: none;
	}

	.header__logo a img {
		margin-bottom: 5px;
	}

	.header__logo a span {
		display: block;
	}

	.header__logo a span br {
		display: none;
	}

	.header__nav {
		padding-top: 20px;
	}
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) and (max-width: 1000px) {
	.header__nav ul li .btn {
		padding-top: 10px 0;
		font-size: 1.3rem;
	}
}

@media print, screen and (min-width: 768px) and (max-width: 1200px) {
	.header__subnav {
		top: -18px;
		flex-direction: column;
	}

	.header__subnav ul li {
		margin-left: 5px;
	}

	.header__subnav ul li .btn {
		width: 180px;
	}

	.header__subnav address {
		display: flex;
		width: auto;
	}

	.header__subnav address span {
		margin-bottom: 10px;
	}

	.header__subnav address span img {
		width: auto;
		height: 17px;
	}

	.header__subnav address span:last-child {
		margin-top: 3px;
		margin-left: 15px;
	}
}

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/**
 * Footer module
 */
@media print, screen and (min-width: 768px) {
	.footer {
		margin-top: 120px;
	}
}

@media print, screen and (max-width: 767px) {
	.footer {
		margin-top: 100px;
	}
}

.footer__pagetop {
	position: fixed;
	z-index: 3;
	overflow: hidden;
}

@media print, screen and (min-width: 768px) {
	.footer__pagetop {
		right: 0;
		bottom: 40px;
	}
}

@media print, screen and (max-width: 767px) {
	.footer__pagetop {
		right: 0;
		bottom: 30px;
	}
}

.footer__pagetop a {
	margin-right: -5px;
	padding: 10px 30px 0;
	border: none;
	border-radius: 10px 0 0 0;
	background: linear-gradient(#33b668 20%, #33b668 50%, rgba(255, 255, 255, 0));
}

.footer__pagetop a img {
	height: 32px;
}

.footer__pagetop a::before {
	display: none;
}

@media print, screen and (min-width: 768px) {
	.footer__inner {
		max-width: 1300px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 50px;
		padding-left: 50px;
	}
}

@media print, screen and (max-width: 767px) {
	.footer__inner {
		padding-right: 15px;
		padding-left: 15px;
	}
}

@media print, screen and (max-width: 767px) {
	.footer__inner {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@media print, screen and (min-width: 768px) {
	.footer__inner {
		padding-top: 15px;
		padding-bottom: 32px;
	}
}

.footer__infomation {
	background-color: #303030;
}

.footer__infomation h3,
.footer__infomation p {
	color: #fff;
}

@media print, screen and (max-width: 767px) {
	.footer__infomation h3,
	.footer__infomation p {
		font-size: 1.2rem;
	}
}

@media print, screen and (min-width: 768px) {
	.footer__infomation h3 {
		margin-bottom: 15px;
		font-size: 2.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.footer__infomation h3 {
		margin-bottom: 8px;
		font-size: 1.8rem;
		font-weight: bold;
	}
}

.footer__link {
	padding-top: 25px;
}

.footer__link li a {
  color: #fff;
  text-decoration: none
}

@media print, screen and (max-width: 767px) {
	.footer__link li a {
		height: 55px;
		margin-bottom: 14px;
	}
}

@media print, screen and (min-width: 768px) {
	.footer__link li a {
		height: 75px;
	}
}

.footer__link li a img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: 25px;
	margin: auto;
}

.footer__link li:last-child a img {
	height: 30px;
}

.footer__menu {
  color: #fff;
  font-size: 1.4rem;
  padding-left: 10px;
  padding-bottom: 6px;
}
.footer__menu_title {
  padding-bottom: 3px;
  border-bottom: solid 1px #fff;
}

.footer__menu a:hover {
  text-decoration: underline;
}

.footer__menu_sub {
  color: #fff;
  font-size: 1.4rem;
  line-height: 1.6;
  padding-top: 10px;
  padding-left: 10px;
}

.footer__menu_sub a:hover {
  text-decoration: underline;
}


.footer__copyright {
  height: 56px;
  background-color: #000;
  color: #fff;
  font-size: 1.4rem;
}

.footer__copyright small {
  float: left;
  padding-top: 20px;
  padding-left: 20px;
}

.footer__copyright a {
  color: #fff;
  text-decoration: none;
}

.footer__copyright a:hover {
  text-decoration: underline;
}

.footer__kozosystemgroup {
  float: left;
  padding-top: 20px;
  padding-left: 20px;
}

.footer__innerlink {
  float: right;
  padding: 20px 20px 10px 0;
}

@media print, screen and (max-width: 767px) {
.footer__copyright {
  height:140px;
  padding-top:20px;
  text-align:center;
}

.footer__copyright small {
  float:none;
  padding-left:0px;
  text-align:center;
}

.footer__kozosystemgroup {
  float:none;
  padding:0px;
  padding-top:5px;
}

.footer__innerlink {
  float:none;
  padding:0px;
  padding-top:5px;
}

}

@media print, screen and (min-width: 768px) {


}


/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.breadcrumbs {
	width: 100%;
	background-color: #333;
}

@media print, screen and (max-width: 767px) {
	.breadcrumbs {
		min-width: auto;
	}
}

.breadcrumbs__inner {
	position: relative;
	color: #fff;
}

@media print, screen and (min-width: 768px) {
	.breadcrumbs__inner {
		max-width: 1300px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 50px;
		padding-left: 50px;
	}
}

@media print, screen and (max-width: 767px) {
	.breadcrumbs__inner {
		padding-right: 15px;
		padding-left: 15px;
	}
}

.breadcrumbs__inner ol {
	list-style: none;
	padding: 14px 0;
}

@media print, screen and (max-width: 767px) {
	.breadcrumbs__inner ol {
		padding: 7px 0;
	}
}

.breadcrumbs__inner ol li {
	display: inline-block;
	background: url('/img/icon-arrow.svg') no-repeat;
	background-position: right;
}

@media print, screen and (min-width: 768px) {
	.breadcrumbs__inner ol li {
		margin-right: 15px;
		padding-right: 25px;
		font-size: 1.4rem;
	}
}

@media print, screen and (max-width: 767px) {
	.breadcrumbs__inner ol li {
		margin-right: 10px;
		padding-right: 20px;
		font-size: 1.1rem;
	}
}

.breadcrumbs__inner ol li:last-child {
	margin: 0;
	padding: 0;
	background: none;
}

.breadcrumbs__inner ol li a {
	color: #fff;
}

.contents {
	flex-grow: 1;
}

.block__inner {
	position: relative;
}

@media print, screen and (min-width: 768px) {
	.block__inner {
		max-width: 1300px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 50px;
		padding-left: 50px;
	}

	.block__inner-event2023 {
		max-width: 1390px;
		margin-right: auto;
		margin-left: auto;
		padding-right: 50px;
		padding-left: 50px;
	}
}

@media print, screen and (max-width: 767px) {
	.block__inner {
		padding-right: 15px;
		padding-left: 15px;
	}
}

.block__contents {
	padding-top: 50px;
}

@media print, screen and (min-width: 768px) {
	.block__form {
		max-width: 740px;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 70px;
	}
}

@media print, screen and (max-width: 767px) {
	.block__form {
		padding-right: 15px;
		padding-bottom: 30px;
		padding-left: 15px;
	}
}

@media print, screen and (max-width: 767px) {
	.title {
		margin: 30px 0;
	}
}

@media print, screen and (min-width: 768px) {
	.title {
		margin: 70px 0;
	}
}

.title h1 {
	text-align: center;
}

.title h1 span {
	display: block;
}

.title h1 span img {
	height: 25px;
}

@media print, screen and (max-width: 767px) {
	.title h1 span img {
		height: 17px;
	}
}

.title h1 strong {
	display: block;
	color: #333;
	-webkit-transform: skewX(-5deg);
	transform: skewX(-5deg);
}

@media print, screen and (max-width: 767px) {
	.title h1 strong {
		margin-top: 12px;
		font-size: 2.4rem;
	}
}

@media print, screen and (min-width: 768px) {
	.title h1 strong {
		margin-top: 25px;
		font-size: 4rem;
	}
}

/*
#styleguide
flex grid layout

```
<div class="grid">

<div class="grid-column1">
column1
</div>

<div class="grid-column11">
column11
</div>

<div class="grid-column10">
column10
</div>

<div class="grid-column2">
column2
</div>

<div class="grid-column9">
column9
</div>

<div class="grid-column3">
column3
</div>

<div class="grid-column8">
column8
</div>

<div class="grid-column4">
column4
</div>

<div class="grid-column7">
column7
</div>

<div class="grid-column5">
column5
</div>

<div class="grid-column6">
column6
</div>

<div class="grid-column6">
column6
</div>

<!-- /.grid --></div>
```
*/
.grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-right: -15px;
	margin-bottom: -30px;
	margin-left: -15px;
}

.grid__content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin-right: 30px;
    margin-bottom: 15px;
    margin-left: 45px;
}

.grid > div {
	margin-bottom: 30px;
}

.grid-column {
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column1 {
	flex-basis: calc(8.33333% - 30px);
	max-width: calc(8.33333% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column2 {
	flex-basis: calc(16.66667% - 30px);
	max-width: calc(16.66667% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column3 {
	flex-basis: calc(25% - 30px);
	max-width: calc(25% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column3-1 {
	flex-basis: calc(21% - 30px);
	max-width: calc(21% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column4 {
	flex-basis: calc(33.33333% - 30px);
	max-width: calc(33.33333% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column5 {
	flex-basis: calc(41.66667% - 30px);
	max-width: calc(41.66667% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column6 {
	flex-basis: calc(50% - 30px);
	max-width: calc(50% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column7 {
	flex-basis: calc(58.33333% - 30px);
	max-width: calc(58.33333% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column8 {
	flex-basis: calc(66.66667% - 30px);
	max-width: calc(66.66667% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column9 {
	flex-basis: calc(75% - 30px);
	max-width: calc(75% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column10 {
	flex-basis: calc(83.33333% - 30px);
	max-width: calc(83.33333% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column11 {
	flex-basis: calc(91.66667% - 30px);
	max-width: calc(91.66667% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column12 {
	flex-basis: calc(100% - 30px);
	max-width: calc(100% - 30px);
	margin-right: 15px;
	margin-left: 15px;
}

.grid-column13 {
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
    margin-right: 12px;
    margin-left: 15px;
    margin-top: 30px;
}

@media print, screen and (max-width: 767px) {
	.grid__sp-cancel,
	.grid__m50 {
		display: block;
		margin-bottom: 0;
	}

	.grid__sp-cancel div,
	.grid__m50 div {
		margin-bottom: 0;
	}

	.grid__sp-cancel > *,
	.grid__m50 > * {
		display: block;
		max-width: 100%;
	}

	.grid > div {
		margin-bottom: 15px;
	}

	.grid__sp {
		margin-right: -10px;
		margin-bottom: -20px;
		margin-left: -10px;
	}

	.grid__sp2column {
		flex-basis: calc(50% - 30px);
		max-width: calc(50% - 30px);
		margin-right: 15px;
		margin-left: 15px;
	}

	.grid__sp1column {
		flex-basis: calc(100% - 30px);
		max-width: calc(100% - 30px);
		margin-right: 15px;
		margin-left: 15px;
	}
}

/* =====================================================
 * Module
 * ================================================== */

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/*
#styleguide
Headings

```
<h1 class="mod-heading1">Heading1</h1>
<h2 class="mod-heading2">Heading2</h2>
<h3 class="mod-heading3">Heading3</h3>
<h4 class="mod-heading4">Heading4</h4>
<h5 class="mod-heading5">Heading5</h5>
<h6 class="mod-heading6">Heading6</h6>
```
*/
.mod-heading1 {
	font-size: 4rem;
}

.mod-heading2 {
	font-size: 3.5rem;
}

.mod-heading3 {
	color: #33b668;
}

@media print, screen and (min-width: 768px) {
	.mod-heading3 {
		font-size: 1.8rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-heading3 {
		font-size: 1.4rem;
	}
}

.mod-heading4 {
	margin-top: 1em;
	font-weight: bold;
}

@media print, screen and (min-width: 768px) {
	.mod-heading4 {
		font-size: 1.6rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-heading4 {
		font-size: 1.1rem;
	}
}

.mod-heading5 {
	font-size: 2rem;
}

.mod-heading6 {
	font-size: 1.8rem;
}

/*
#styleguide
Paragraph

```
<p class="mod-p">Lorem ipsum dolor sit amet, <a href="#">test link</a> adipiscing elit. Nullam
dignissim convallis
est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at,
tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu
volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante.
Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

```
*/
.mod-p {
	margin: 2em 0 0;
	line-height: 1.6;
}

@media print, screen and (min-width: 768px) {
	.mod-p {
		font-size: 1.6rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-p {
		font-size: 1.0rem;
	}
}

.mod-p * {
	vertical-align: middle;
}

.mod-sign {
	margin-top: 1em;
	text-align: right;
}

.mod-sign-inner {
	display: inline-block;
	width: 13em;
	text-align: left;
}

@media print, screen and (min-width: 768px) {
	.mod-sign-inner {
		font-size: 1.6rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-sign-inner {
		font-size: 1.0rem;
	}
}

/*
#styleguide
Unordered List

```
<ul class="mod-ul">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
```
*/
.mod-ul {
	display: table;
	margin: 1em 0 0;
}

.mod-ul > li {
	position: relative;
	margin: 0 0 0.5em;
	padding-left: 1.2em;
	line-height: 1.5;
}

@media print, screen and (min-width: 768px) {
	.mod-ul > li {
		font-size: 1.6rem;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-ul > li {
		font-size: 1.0rem;
	}

	.mod-ul-fmint > li {
		font-size: 1.4rem;
	}

}

.mod-ul > li:before {
	content: '•';
	position: absolute;
	top: 0;
	left: 3px;
	padding-right: 0.4em;
	color: #333;
	font-weight: bold;
}

/*
#styleguide
Ordered List

```
<ol class="mod-ol">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
```
*/
.mod-ol {
	list-style-type: decimal;
	margin: 0 0 32px 1.5em;
}

.mod-ol > li {
	list-style-type: decimal;
	margin: 0 0 10px;
	line-height: 1.5;
}

/*
#styleguide
Description List

```
<dl class="mod-dl">
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>
```
*/
.def dt {
	margin: 0 0 10px;
	font-weight: bold;
}

.def dd {
	margin: 0 0 10px 10px;
}

/*
#styleguide
Infomation List

```
<dl class="mod-info">
<dt>2018.01.10</dt>
<dd><a href="#">ホームページをリニューアルしました</a></dd>
<dt>2018.01.01</dt>
<dd>ホームページをリニューアルしました</dd>
```
*/
.mod-info:after {
	content: '';
	display: block;
	clear: both;
}

.mod-info dt {
	float: left;
	width: 6em;
	margin: 0 0 10px;
}

.mod-info dd {
	margin: 0 0 10px 7em;
}

/*
---
name: section
category: module
---
```html

```
*/
.mod-section {
	margin: 0 0 2em;
}

/*
---
name: Alignment classes
category: module
---
```html

```
*/
.mod-left {
	text-align: left !important;
}

.mod-center {
	text-align: center !important;
}

.mod-right {
	text-align: right !important;
}

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/*
#styleguide
ベーシック

```
<a href="#" class="btn">ベーシック</a>
<a href="#" class="btn btn__nav">お問い合わせ</a>
<a href="#" class="btn btn__bk">ご購入・お問い合わせはこちら</a>
<a href="#" class="btn btn__attn">オンライン販売</a>
```
*/
.btn {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin-right: 3px;
	padding: 18px 28px;
	border: 2px solid #33b668;
	border-radius: 10px 0 10px 0;
	background-color: #33b668;
	color: #fff;
	text-decoration: none;
	transition: 0.2s;
	-webkit-transform: skewX(-5deg);
	transform: skewX(-5deg);
}

.btn:visited {
	color: #fff;
}

.btn::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: #fff;
	transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	transition: transform 0.3s, -webkit-transform 0.3s;
	-webkit-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: right top;
	transform-origin: right top;
}

.btn:hover::before {
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: left top;
	transform-origin: left top;
}

.btn:hover,
.btn:active {
	color: #33b668;
}

.btn:hover:after {
	width: 100%;
	opacity: 1;
}

.btn:active:after {
	width: 100%;
	opacity: 1;
}

.btn.btn__mini {
	padding: 12px 0;
}

.btn.btn__left {
	text-align: left;
}

.btn.btn__nav {
	width: 100%;
	padding: 15px 0;
	border: none;
	background: linear-gradient(170deg, #eee 10%, #fff 50%, #fff);
	background-position: 0 0;
	color: #333;
	font-size: 1.6rem;
	font-weight: normal;
	text-align: center;
}

.btn.btn__nav:before,
.btn.btn__nav:after {
	display: none;
}

@media print, screen and (min-width: 768px) {
	.btn.btn__nav:hover {
		margin-top: -5px;
		background-position: 100% 100%;
	}
}

.btn.btn__bk {
	border-color: #303030;
	background: #303030;
	color: #fff;
}

.btn.btn__bk:hover {
	color: #303030;
}

.btn.btn__wh {
	border: none;
	background: #fff;
	color: #333;
}

.btn.btn__wh:before {
	background-color: #33b668;
}

.btn.btn__wh:hover {
	color: #fff;
}

.btn.btn__attn {
	border-color: #b20000;
	background: #b20000;
	color: #fff;
}

.btn.btn__attn:hover {
	color: #b20000;
}

.btn.btn__fb {
	border-color: #103583;
	background: #103583;
	color: #fff;
	text-indent: -9999px;
}

.btn.btn__fb i {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 9px;
	height: 21px;
	margin: auto;
}

.btn.btn__fb i:before,
.btn.btn__fb i:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 9px;
	height: 21px;
	background-repeat: no-repeat;
	background-position: right;
	background-size: 9px 21px;
	transition: 0.2s;
}

.btn.btn__fb i:before {
	z-index: 2;
	background-image: url('/img/common/img-facebook.png');
	opacity: 1;
}

.btn.btn__fb i:after {
	z-index: 1;
	background-image: url('/img/common/img-facebook_on.png');
	opacity: 0;
}

.btn.btn__fb:hover i:before {
	opacity: 0;
}

.btn.btn__fb:hover i:after {
	opacity: 1;
}



.btn.btn__jp {
	border-color: #103583;
	background: #103583;
	color: #fff;
	text-indent: -9999px;
}

.btn.btn__jp i {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 21px;
	margin: auto;
}

.btn.btn__jp i:before,
.btn.btn__jp i:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: right;
	background-size: 18px 21px;
	transition: 0.2s;
}

.btn.btn__jp i:before {
	z-index: 2;
	background-image: url('/img/common/img-japanese.png');
	opacity: 1;
}

.btn.btn__jp i:after {
	z-index: 1;
	background-image: url('/img/common/img-japanese_on.png');
	opacity: 0;
}

.btn.btn__jp:hover i:before {
	opacity: 0;
}

.btn.btn__jp:hover i:after {
	opacity: 1;
}

.btn.btn__en {
	border-color: #103583;
	background: #103583;
	color: #fff;
	text-indent: -9999px;
}

.btn.btn__en i {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 21px;
	margin: auto;
}

.btn.btn__en i:before,
.btn.btn__en i:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 18px;
	height: 21px;
	background-repeat: no-repeat;
	background-position: right;
	background-size: 18px 21px;
	transition: 0.2s;
}

.btn.btn__en i:before {
	z-index: 2;
	background-image: url('/img/common/img-english.png');
	opacity: 1;
}

.btn.btn__en i:after {
	z-index: 1;
	background-image: url('/img/common/img-english_on.png');
	opacity: 0;
}

.btn.btn__en:hover i:before {
	opacity: 0;
}

.btn.btn__en:hover i:after {
	opacity: 1;
}




.btn.btn__down {
	position: relative;
	text-align: center;
}

.btn.btn__down i {
	display: inline-block;
	width: 16px;
	height: 33px;
	margin: -10px 0 -10px 5px;
	background-image: url('/img/common/icon-arrow-down.png');
	background-repeat: no-repeat;
}

.btn.btn__arrow {
	position: relative;
}

@media print, screen and (max-width: 767px) {
	.btn.btn__arrow {
		padding-right: 30px;
		padding-left: 30px;
	}
}

@media print, screen and (min-width: 768px) {
	.btn.btn__arrow {
		padding-right: 110px;
		padding-left: 110px;
	}
}

.btn.btn__arrow i {
	display: block;
	position: absolute;
	top: 0;
	right: 25px;
	bottom: 0;
	width: 100px;
	height: 1em;
	margin: auto;
}

.btn.btn__arrow i:before,
.btn.btn__arrow i:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 1em;
	background-repeat: no-repeat;
	background-position: right;
	transition: 0.2s;
}

.btn.btn__arrow i:before {
	z-index: 2;
	background-image: url('/img/obj-btnarrow.svg');
	opacity: 1;
}

.btn.btn__arrow i:after {
	z-index: 1;
	background-image: url('/img/obj-btnarrow_grn.svg');
	opacity: 0;
}

.btn.btn__arrow:hover i:before {
	opacity: 0;
}

.btn.btn__arrow:hover i:after {
	opacity: 1;
}

.btn.btn__arrow.btn__left {
	padding-left: 30px;
}

.btn.btn__arrow.btn__wh i:before {
	background-image: url('/img/obj-btnarrow_grn.svg');
}

.btn.btn__arrow.btn__wh i:after {
	background-image: url('/img/obj-btnarrow.svg');
}

.btn.btn__arrow.btn__bk i:after {
	background-image: url('/img/obj-btnarrow_bk.svg');
}

.btn.btn__arrow.btn__attn i:after {
	background-image: url('/img/obj-btnarrow_attn.svg');
}

@media print, screen and (min-width: 768px) {
	.btn.btn__arrow {
		padding-right: 110px;
		padding-left: 110px;
	}
}


/*
#styleguide
矢印付き

```
<a href="#" class="btn btn__arrow">製品情報一覧へ<i></i></a> <a href="#" class="btn btn__arrow">製品情報一覧へ<i></i></a>
```
*/

/*
#styleguide
矢印付き

```
<a href="#" class="btn btn__down">ご購入検討・お見積り<i></i></a>
<a href="#" class="btn btn__down">資料請求<i></i></a>
```
*/

/*
#styleguide
ボタングループ(2個)

```
<div class="btn-group btn-group__product btn-group__2items">
<a href="#" class="btn btn__bk btn__arrow">ご購入・お問い合わせ<i></i></a> <a href="#" class="btn btn__attn btn__arrow">オンライン販売<i></i></a>
</div>
```
*/
@media print, screen and (min-width: 768px) {
	.btn-group {
		text-align: center;
	}

	.btn-group .btn {
		display: inline-block;
		margin-left: 3px;
		vertical-align: top;
	}

	.btn-group .btn:last-child {
		margin-left: 0;
	}

	.btn-group__product {
		font-size: 2.2rem;
		font-weight: bold;
	}

	.btn-group__product > * {
		width: 370px;
		margin-top: 15px;
	}

	.btn-group__product .btn__arrow {
		padding-left: 20px;
	}

	.btn-group__product .contact {
		display: inline-block;
		text-align: center;
	}

	.btn-group__product .contact img {
		height: 66px;
	}
}

@media print, screen and (max-width: 767px) {
	.btn-group {
		text-align: center;
	}

	.btn-group .btn {
		margin-bottom: 13px;
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 15px;
	}

	.btn-group__product {
		font-weight: bold;
	}

	.btn-group__product > * {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	.btn-group__product .contact img {
		width: 100%;
	}
}

/* -----------------------------------------------------
 * Alignment classes
 * -------------------------------------------------- */
.mod-left {
	text-align: left !important;
}

.mod-center {
	text-align: center !important;
}

.mod-right {
	text-align: right !important;
}

/* -----------------------------------------------------
 *
 * -------------------------------------------------- */
.txt-notice {
	color: #d9534f;
}

@media print, screen and (min-width: 768px) {
	.is-pc-hide {
		display: none;
	}
}

@media print, screen and (max-width: 767px) {
	.is-sp-hide {
		display: none;
	}
}

.mod-center {
	text-align: center !important;
}

.mod-right {
	text-align: right !important;
}

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/*
#styleguide
見出し
```
<div class="hl">Heading1</div>
```
*/
.hl {
	display: inline-block;
	width: 100%;
	margin-right: 3px;
	padding: 20px 25px;
	border-radius: 10px 0 10px 0;
	background: linear-gradient(170deg, #eee 10%, #fff 50%, #fff);
	color: #33b668;
	font-size: 1.6rem;
	text-decoration: none;
	-webkit-transform: skewX(-5deg);
	transform: skewX(-5deg);
}

.hl.hl__long {
	background: linear-gradient(175deg, #eee 10%, #fff 40%, #fff);
}

.hl.hl__black {
	color: #333;
}

@media print, screen and (min-width: 768px) {
	.hl.hl__black {
		font-size: 2.2rem;
	}
}

@media print, screen and (max-width: 767px) {
	.hl.hl__black {
		font-size: 1.6rem;
	}
}

.hl.hl__green {
	background: #33b668;
	color: #fff;
}

/*
#styleguide
見出し
```
<div class="hl hl__green">Heading1</div>
```
*/

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/*
#styleguide
flex grid layout

```

<table class="table1">
<thead>
<tr>
<th>機能<br class="is-pc-hide">分類</th>
<th>機能</th>
<th>説明</th>
<th>KIT</th>
<th>CL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nowrap">項目1<b>※1</b></td>
<td class="nowrap">項目2</td>
<td class="mod-left">説明</td>
<td><span>●</span></td>
<td><span>●</span></td>
</tr>
</tbody>
</table>



```
*/
.table1 {
	border-collapse: separate;
	border-spacing: 1px;
	width: 100%;
	background-color:#bbb;
}

@media print, screen and (min-width: 768px) {
	.table1 {
		font-size: 1.6rem;
	}
}

@media print, screen and (max-width: 767px) {
	.table1 {
		font-size: 1.1rem;
	}
}

.table1 th,
.table1 td {
	padding: 15px;
	line-height: 1.6;
	text-align: center;
	word-break: break-all;
}

.table1 th b,
.table1 td b {
	color: #d9534f;
}

.table1 th {
	background-color: #33b668;
	color: #fff;
}

.table1 th.nowrap {
	white-space: nowrap;
}

@media print, screen and (max-width: 767px) {
	.table1 th {
		white-space: nowrap;
	}
}

@media print, screen and (min-width: 768px) {
	.table1 th.thead_15em {
		width: 15em;
	}
}

.table1 td {
	background-color: #fff;
}

.table1 td.gray {
  background-color: #eee;
}

.table1 td span {
	color: #33b668;
}

@media print, screen and (min-width: 768px) {
	.table1 td.nowrap {
		white-space: nowrap;
	}
}

/*
#colors

@main-color #33b668
@text-color #333333
@base-color #fff
@body-color #eee
@form-color #f5f5f5
@notice-color #d9534f
@attention-color #b20000



*/

/*
#styleguide
label

```

<span class="label">必須</span>

```
*/
.label {
	display: inline-block;
	margin: 0 5px;
	padding: 5px;
	border-radius: 5px;
	background: #d9534f;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
}

/*
#styleguide
input

```
<input type="text" class="form-input size-m">

```
*/

/*
#styleguide
input

```
<input type="text" class="form-input size-l">

```
*/

/*
#styleguide
input

```
<input type="text" class="form-input size-max">

```
*/

/*

#styleguide
textarea

```
<textarea class="textarea" cols="40" rows="4" maxlength="20"></textarea>
```
*/
.form-input,
.textarea {
	border: none;
	border-radius: 5px;
	background: #f3fbff;
	box-shadow: 1px 1px rgba(0, 0, 0, 0.1) inset;
}

.form-input.size-m,
.textarea.size-m {
	width: 5em;
}

.form-input.size-l,
.textarea.size-l {
	width: 21em;
}

.form-input.size-max,
.textarea.size-max {
	width: 100%;
}

.form-input {
	height: 2.5em;
	padding: 0 10px;
}

.textarea {
	padding: 10px 10px;
}

/*
#styleguide
select

```
<div class="form-select">
<select>
<option>AAA</option>
<option>VVV</option>
<option>TTT</option>
</select>

</div>
```
*/
.form-select {
	display: inline-block;
	position: relative;
	border-radius: 5px;
	background: #e9fff4;
	box-shadow: 1px 1px rgba(0, 0, 0, 0.1) inset;
}

.form-select:before {
	/*content: '';*/
	position: absolute;
	z-index: 1;
	top: 0;
	right: 10px;
	bottom: 0;
	width: 14px;
	height: 10px;
	margin: auto;
	background: url('/img/common/icon-select-pc.png') no-repeat;
}

.form-select select {
	outline: none;
	position: relative;
	height: 2.5em;
	padding: 0 30px 0 10px;
	border: none;
	background: #f3fbff;
	color: inherit;
	font-size: inherit;
	vertical-align: middle;
	text-indent: 0.01px;
	text-overflow: '';
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
}

.form-select select option {
	background-color: #ffffff;
	color: #333;
}

.form-select select::-ms-expand {
	display: none;
}

.form-select select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #828c9a;
}

/*
#styleguide
checkbox

```
<div class="radio-group">

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer1" value="1">
<label for="JobTransfer1" class="icon-check">はい</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer2" value="2">
<label for="JobTransfer2" class="icon-check">いいえ</label>
</div>

<div class="radio">
<input type="radio" name="data[Job][transfer]" id="JobTransfer3" value="3">
<label for="JobTransfer3" class="icon-check">どちらでもない</label>
</div>

<!-- /.radio-group --></div>
```
*/
.radio {
	display: inline-block;
}

.radio input {
	display: none;
}

.radio input:checked + label {
	color: #33b668;
	font-weight: bold;
}

.radio input:checked + label:after {
	border: 3px solid #eee;
	background-color: #33b668;
}

.radio label {
	position: relative;
	margin-right: 20px;
	padding-left: 25px;
}

.radio label:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	border-radius: 50%;
	background-color: #eee;
}

/*
#styleguide
checkbox

```
<div class="checkbox-group">

<div class="checkbox">
<input type="checkbox" name="checkbox" value="" id="checkbox1">
<label class="icon-check" for="checkbox1">ご飯派</label>
</div>

<div class="checkbox">
<input type="checkbox" name="checkbox" value="" id="checkbox2">
<label class="icon-check" for="checkbox2">パン派</label>
</div>

<div class="checkbox">
<input type="checkbox" name="checkbox" value="" id="checkbox3">
<label class="icon-check" for="checkbox3">炭水化物反対派</label>
</div>

<!-- /.radio-group --></div>
```
*/
.checkbox {
	display: inline-block;
}

.checkbox input {
	display: none;
}

.checkbox input:checked + label {
	color: #33b668;
	font-weight: bold;
}

.checkbox input:checked + label:after {
	background-color: #33b668;
}

.checkbox input:checked + label:before {
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	background: url('/img/common/icon-check.png') no-repeat 50% 50%;
	background-size: 14px auto;
	font-size: 1.6rem;
	line-height: 1.2;
	text-align: center;
}

.checkbox label {
	display: block;
	position: relative;
	margin-right: 20px;
	padding-left: 25px;
}

.checkbox label:after {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	border-radius: 3px;
	background-color: #eee;
}

.checkbox label:before {
	content: '';
	display: none;
	z-index: 2;
}

/*
#styleguide
button

```
<button class="form-button">住所確認</button>
```
*/
.form-button {
	height: 2.5em;
	background: linear-gradient(#fff 10%, #fff 50%, #eee);
}

/*
#styleguide
button

```
<button class="form-button">住所確認</button>
```
*/
.submit-group {
	text-align: center;
}

@media print, screen and (min-width: 768px) {
	.submit-group button {
		width: 200px;
		padding: 15px;
	}
}

@media print, screen and (max-width: 767px) {
	.submit-group button {
		width: 45%;
		padding: 10px 0;
		font-size: 1.4rem;
	}
}

/* -----------------------------------------------------
 * FM-Integration #feature
 * -------------------------------------------------- */


@media print, screen and (min-width: 768px) {
	.mod-center-feature {
		text-align: center !important;
		margin-top: 40px;
	}
}

@media print, screen and (max-width: 767px) {
	.mod-center-feature {
		text-align: center !important;
		margin-top: 40px;
	}

}