@font-face {
  font-family: 'Noto Sans CJK JP Medium';
  src: url('../fonts/NotoSansCJKjp-Medium.otf') format('opentype');
}

html {
    font-size: 10px;
}

body {
    color: #000000;
    font-family: 'Noto Sans CJK JP Medium', '游ゴシック', 'Yu Gothic', system-ui, monospace;

    font-size: 1.4rem;
    font-weight: 200;
    letter-spacing: 0.1rem;
    line-height: 2.4rem;

    margin: 0;
    padding: 0;
}

h1 {
    width: 50rem;
    margin: 8rem auto 0;
    padding: 0;
}

h1 img {
    width: 50rem;
    height: 7.5rem;
}

.bg {
    position: absolute;
    width: 150rem;
    height: 100rem;
    overflow: hidden;
    z-index: -1;
}

.bg div:first-of-type {
    background: #333;

    width: 300rem;
    height: 56rem;
    opacity: 0.04;
    transform: rotateZ(14.2deg) translateX(-70rem) translateY(45rem);
    transform-origin: center top;
}

.bg div:last-of-type {
    background: #333;

    width: 300rem;
    height: 64rem;
    opacity: 0.04;
    transform: rotateZ(-12.2deg) translateX(-70rem) translateY(-52rem);
    transform-origin: center top;
}

.contact_container {
    text-align: center;
}

.contact_container h2 {
    font-size: 2.4rem;
    font-weight: 200;
    letter-spacing: 0.2rem;
    line-height: 3.4rem;

    margin: 2rem 0 1rem;
}

.contact_container h2:after {
    background: linear-gradient(-90deg, #1b6099, #6fb9ba);
    content: '\a';

    font-size: 1rem;
    letter-spacing: 0;
    line-height: 2rem;
    white-space: pre;

    display: block;
    width: 60rem;
    height: 5rem;
    margin: 0 auto;
    transform: scale(0.1) translateY(6rem);
}

.contact_text1 {
    font-size: 1.6rem;
    line-height: 2.6rem;
}

.contact_text2 {
    font-size: 1.6rem;
    line-height: 2.6rem;
    margin: 6rem 0;
}

.contact_table {
    border-collapse: collapse;

    display: table;
    margin: 3rem auto;
}

.contact_tr {
    display: table-row;
}

.contact_tr .contact_td:first-of-type {
    text-align: right;
}

.contact_td {
    display: table-cell;

    padding: 0.5rem;
    text-align: left;
    vertical-align: middle;
}
.contact_td p{
	margin: 0!important;
}
.contact_td .required {
    background-color: #d00;

    color: #fff;
    font-size: 1rem;

    margin-left: 0.8rem;
    padding: 0.1rem 0.5rem;
}
.contact_td .optional {
    background-color: gray;

    color: #fff;
    font-size: 1rem;

    margin-left: 0.8rem;
    padding: 0.1rem 0.5rem;
}

.contact_td input[type^=text],
.contact_td input[type^=email],
.contact_td input[type^=tel]{
    border: 0.1rem solid #ccc;
    border-radius: 0.5rem;

    font-size: 1.6rem;

    width: 54rem;
    height: 1rem;
    padding: 1.5rem 1rem;
}

input[type^=text].short {
    width: 18rem;
}

.contact_td textarea {
    border: 0.1rem solid #ccc;
    border-radius: 0.5rem;

    font-size: 1.6rem;

    width: 54rem;
    height: 14rem;
    padding: 1.5rem 1rem;
}

.contact_tr:last-child .contact_td:first-child {
    padding-top: 1.2rem;
    vertical-align: top;
}

input[type^=submit],
.contact_back {
    background: linear-gradient(-90deg, #1b6099, #6fb9ba);
    border-style: none;
    border-radius: 0.5rem;
    cursor: pointer;

    color: #fff;
    font-size: 2.6rem;
    letter-spacing: 1rem;

    width: 70.5rem;
    height: 6.5rem;
    transform: translateY(-1rem);
}

.contact_back {
    background: linear-gradient(-90deg, #5c5c5c, #a0a0a0);
}

.contact_submit:hover,
.contact_back:hover {
    background: linear-gradient(-90deg, #3e79b5, #89d4d4);
}

.contact_back:hover {
    background: linear-gradient(-90deg, #797979, #bbbbbb);
}

.contact_submit.half,
.contact_back.half {
    width: 35.25rem;
}

.contact_back.half {
    margin-left: 1rem;
}

.contact_attention {
    line-height: 2rem;
    white-space: nowrap;

    display: flex;
    width: 65rem;
    margin: 0 auto;
    text-align: left;
}

.contact_attention img {
    margin: 1.5rem;
}

/* confirmation.php */

dl {
    font-size: 1.6rem;

    display: table;
    width: 64rem;
    margin: 0 auto;
}

dl:first-of-type {
    margin-top: 6rem;
}

dl:last-of-type {
    margin-bottom: 6rem;
}

dt {
    font-weight: bold;
    white-space: nowrap;

    display: table-cell;
    width: 16rem;
    height: 5rem;
    text-align: left;
}

dd {
    word-break: break-all;

    display: table-cell;
    width: 48rem;
    height: 5rem;
    text-align: left;
}

dd p {
    margin: 0;
}

.err {
    color: #f00;
    font-weight: bold;
}

.contact_spbr {
    display: none;
}
div.wpcf7 .wpcf7-spinner {
    display: block;
}


.common_request,
.common_contact {
    font-size: 1.6rem;
    line-height: 4rem;
text-align: center;
    position: relative;
	margin: 0 auto;
}

.common_request div,
.common_contact div {
    background: linear-gradient(-90deg, #1b6099, #6fb9ba);
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 50rem;
    height: 9.5rem;
    margin: 0 auto;
    transform: skew(-15deg);
}

.common_request > span,
.common_contact > span:first-of-type {
    color: #51c8dc;
    font-family: serif;
}

.common_request div:hover,
.common_contact div:hover {
    background: linear-gradient(-90deg, #3e79b5, #89d4d4);
}

.common_request div > span {
    color: #fff;
    font-size: 2.8rem;
    letter-spacing: 0.8rem;

    transform: skew(15deg);
}

.common_contact > span:last-of-type {
    color: #fff;
    font-size: 1.3rem;
    line-height: 2rem;
    white-space: nowrap;

    position: absolute;
    top: 7rem;
    right: 9.5rem;
    text-align: left;
}

.common_request div > span:after {
    content: '▲';

    color: #51c8dc;
    font-size: 1.6rem;
    font-family: serif;

    display: inline-block;
    position: absolute;
    top: 0.5rem;
    right: -5rem;
    transform: rotateZ(90deg);
}

.common_request a{
	 background: linear-gradient(-90deg, #1b6099, #6fb9ba);
    cursor: pointer;
	position: relative;
color: #fff;
 font-size: 2.8rem;
    letter-spacing: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width: 50rem;
    height: 9.5rem;
    margin: 0 auto;
    transform: skew(-15deg);
}
.common_request a::after{
content: '▲';

    color: #51c8dc;
    font-size: 1.6rem;
    font-family: serif;

    display: inline-block;
    position: absolute;
    top: 25px;
    right: 15px;
    transform: rotateZ(90deg);
}
.common_request img {
    display: none;
}

.common_contact > span:last-of-type:after {
    content: '▲';

    color: #51c8dc;
    font-size: 1.6rem;
    font-family: serif;

    display: inline-block;
    position: absolute;
    top: 1.2rem;
    right: -3rem;
    transform: rotateZ(90deg);
}

.common_contact div img {
    float: left;
    width: 31.2rem;
    height: 4.2rem;
    margin-right: 14rem;
    transform: skew(15deg);
}