html {
    max-width: 700px;
    margin: 0 auto;
}
body {
    margin: 0;
    margin-bottom: 80px;
    position: relative;
    background-image: url("/assets/images/background.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-family: "Kiwi Maru", serif;
    color: rgb(21 9 118);
}

header {
    width: 100%;
    height: 50px;
    background-color: rgb(35 175 207);
    font-size: 24px;
    color: rgb(21 9 118);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
}

.header-content-wrapper {
    position: relative;
}

.header-content {
    position: absolute;
    bottom: 0;
    height: 100%;
}

.logo {
    height: auto; /* 高さを自動に設定する */
    max-height: 75%;
    object-fit: contain;
    max-width: 65vw;
    position: absolute;
    bottom: 0;
    margin-bottom: 5px;
    margin-left: 2px;
}

.sns-icons {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    height: 80%;
}

footer {
    position: fixed;
    height: 70px;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    background-color: rgb(16 187 114);
    text-align: center;
    background-image: url("/assets/images/call_now.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.header-tel {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 8px;
    background-color: white;
}

.header-tel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

h2 {
    font-size: 1.2em;
    margin: 0;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -5%;
    width: 110%;
    height: 1px;
    background: rgb(16 187 114);
}

h3 {
    font-size: 1em;
    margin: 0;
}

p {
    margin: 0;
}

p.annotation {
    font-size: 12px;
    text-align: left;
    align-self: flex-start;
}

.staff_description {
    margin: 10px 0;
    margin-left: 10px;
    font-size: 14px;
    width: 60%;
}

.contents {
    background-color: rgba(255, 255, 255, 0);
    height: 100%;
    margin: 20px;
    margin-top: 70px;
}

.contents-body {
    background-color: rgba(124, 217, 196, 1);
    width: 100%;
    height: 100%;
    margin: 15px 0px;
    padding: 10px;
    border-radius: 15px;
    box-sizing: border-box;
}

.eyecatch {
    width: 100%;
    height: auto;
    border-radius: 15px;
}

.tel_button_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

a.tel_button_link {
    width: 80%;
    margin: 0;
}
.tel_button {
    width: 100%;
    margin: 0;
}

.staff-block {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    margin: 10px;
    padding: 0 5px;
}

img.sns-discount {
    width: 90%;
    height: auto;
    display: inline-block;
}

.image-link-wrapper {
    position: relative;
    display: inline-block;
}

.left-overlay-link {
    position: absolute;
    top: 20px;
    left: 60px;
    width: 70px;
    height: 90px;
}

.right-overlay-link {
    position: absolute;
    top: 20px;
    right: 60px;
    width: 70px;
    height: 90px;
}

img.header-sns-icon {
    width: auto;
    height: 100%;
    box-sizing: border-box;
    padding: 8px;
}

.contents-center-block {
    align-items: center;
    justify-content: center;
    text-align: center;
    width: auto;
}

.recruit-link {
    font-size: 12px;
}

a.title {
    color: inherit;
}

.avatar-block {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 40%;
}

img.staff-image {
    width: 100%;
    height: 100%;
}

table {
    border-collapse: collapse;
    table-layout: auto;
    margin: 0 auto;
}

table.full-width {
    width: 100%;
}
td,
th {
    border: 1px solid rgb(35, 175, 207);
    white-space: nowrap;
}

td.no_line,
th.no_line {
    border: none;
}

section.devide {
    margin: 20px;
}

.from_station {
    position: relative;
    padding-right: 10px;
}

.from_station::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 10%;
    bottom: 10%; /* 上下に同じ値を設定 */
    border-right: 1px solid #000;
}

.td_destination,
.td_distance,
.td_distance_price {
    text-align: right;
    border: none;
}

.td_destination {
    margin-left: 20px;
    padding-left: 20px;
}

.unit::after {
    font-size: 9px;
}

.distance::before {
    content: "約";
    font-size: 11px;
}

.distance::after {
    content: "km";
    font-size: 11px;
}

.price::after {
    content: "円";
    font-size: 11px;
}

.distance::after {
    content: "km";
    font-size: 11px;
}

.distance-price::before {
    content: "約";
    font-size: 11px;
}

.distance-price::after {
    content: "円";
    font-size: 11px;
}

.moderate {
    font-size: 11px;
}

.recruit-block {
    margin-bottom: 20px;
}

.right-alignment {
    text-align: right;
}

.left-alignment {
    text-align: left;
}

.regist_info {
    font-size: 12px;
}