@charset "UTF-8"; /*! stylesheet style mailform v1.00 (http://www.sofrosune.net/) */ /*! Copyright (C) 2015 Sofrosune; http://www.sofrosune.net/ No part of this program may be reproduced or transmitted in any form or by any means without permission from the author, Sofrosune. Version: 1.00, July 27, 2015 Creation date: Wed Apr 26 2023 15:50:23 GMT+0900 */ /*! stylesheet base globals v1.00 (http://www.sofrosune.net/) */ /*! stylesheet mixins v1.00 (http://www.sofrosune.net/) */ /* === mailform === */ /** Usage: .mailform */ .mailform { width: 90%; max-width: 40rem; margin: 0px auto; padding: 5px 0px; } .mailform h2 { margin: 10px 0px 5px 0px; padding: 0px 0px; color: #666; font-size: 1.5rem; } .mailform h2::before { content: "《"; } .mailform h2::after { content: "》"; } .mailform .mailform-header { position: relative; width: 100%; height: 64px; border: 1px solid #c0c0c0; background-color: #e6eefa; background-image: linear-gradient(to top, #d1e0f6, #fff); background-image: -webkit-linear-gradient(to top, #d1e0f6, #fff); border-radius: 5px; } .mailform .mailform-header h1 { position: absolute; top: 50%; left: 15px; margin-top: -0.8rem; font-size: 1.6rem; line-height: 1; } .mailform .mailform-header .mailform-guide { position: absolute; top: 50%; right: 20px; margin-top: -12px; font-size: 12px; line-height: 1; } .mailform .mailform-header .mailform-navi a { display: inline-block; color: #006cb4; font-size: 12px; line-height: 20px; background-color: #ffffff; border: 1px solid #c0c0c0; padding: 2px 5px; } .mailform .mailform-header .mailform-navi a:hover { color: #dc143c; } .mailform .mailform-footer { width: 100%; padding: 5px 10px; border: 1px solid #c0c0c0; background-color: #e6eefa; background-image: linear-gradient(to top, #d1e0f6, #fff); background-image: -webkit-linear-gradient(to top, #d1e0f6, #fff); border-radius: 5px; font-size: 0.875rem; line-height: 1; } .mailform .mailform-footer .site-credit { text-align: right; } .mailform .mailform-body { margin: 0px 0px 2rem 0px; } .mailform .mailform-note { margin: 5px 0px; font-size: 12px; line-height: 1.2; } .mailform .mailform-note .button-blue { display: inline-block; padding: 2px 0.5rem; border: 1px solid #c0c0c0; border-radius: 3px; background-color: #dfedff; } .mailform .mailform-text { margin: 5px 0px; font-size: 1rem; line-height: 1.2; x-border: 1px dotted #c0c0c0; padding: 0.5rem 1rem; } .mailform .mailform-text h3 { margin: 10px 0px 5px 0px; padding: 0px 0px; color: #666; font-size: 1.25rem; } .mailform .mailform-text h3::before { content: "《"; } .mailform .mailform-text h3::after { content: "》"; } .mailform .mailform-report { margin: 5px 0px; font-size: 12px; line-height: 1.2; border: 1px dotted #c0c0c0; padding: 0.5rem 1rem; } @media only screen and (max-width: 719px) { .mailform .mailform-header { height: 48px; } .mailform .form-area { width: 100%; line-height: 1.5; } .mailform .form-field:not(:last-child) { border-bottom: 1px dotted #c0c0c0; } .mailform .form-field::after { display: block; clear: both; content: ""; } .mailform .form-label { display: block; margin: 0px 0px; padding: 4px 0px 2px 8px; color: #666; font-weight: bold; } .mailform .form-label br { display: none; } .mailform .form-label::before { content: "■"; color: #006cb4; } .mailform .form-label.form-required::after { content: " (必須)"; color: #dc143c; } .mailform .form-control, .mailform .form-text { display: block; margin: 0px 0px; padding: 2px 0px 4px 10px; } .mailform .field-memo { border: 1px dotted #c0c0c0; padding: 2px 1rem; } } @media print, screen and (min-width: 720px) { .mailform .form-area { display: table; width: 100%; line-height: 1.2; } .mailform .form-field { display: table-row; } .mailform .form-field .form-label { border-top: 1px solid #c0c0c0; border-left: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; } .mailform .form-field .form-control, .mailform .form-field .form-text { border-top: 1px solid #c0c0c0; border-right: 1px solid #c0c0c0; } .mailform .form-field:last-child .form-label, .mailform .form-field:last-child .form-control, .mailform .form-field:last-child .form-text { border-bottom: 1px solid #c0c0c0; } .mailform .form-label { display: table-cell; margin: 0px 0px; padding: 4px 10px; width: 5rem; text-align: right; vertical-align: top; background-color: #f1f1f5; white-space: nowrap; } .mailform .form-label.form-required::before { content: "(必須) "; color: #dc143c; font-size: 0.75rem; } .mailform .form-control, .mailform .form-text { display: table-cell; margin: 0px 0px; padding: 2px 10px; vertical-align: top; } .mailform .form-text { padding: 4px 10px; } } @media print, screen and (min-width: 960px) { .mailform .form-area, .mailform .form-button { font-size: 0.875rem; } } .mailform .form-caption { color: #666; font-size: 0.75rem; } .mailform .form-control .form-radio, .mailform .form-control .form-checkbox { display: block; } .mailform .form-control .form-radio-inline, .mailform .form-control .form-checkbox-inline { display: inline; white-space: nowrap; } .mailform .form-button { margin-top: 1rem; text-align: center; } .mailform .form-button input { margin: 5px 10%; } .mailform input[type=submit], .mailform select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .mailform select::-ms-expand { display: none; } .mailform input[type=text], .mailform textarea { border-radius: 0; border: 1px solid #c0c0c0; -webkit-appearance: none; } .mailform input[type=radio], .mailform input[type=checkbox], .mailform input[type=button], .mailform input[type=submit], .mailform input[type=reset] { border-radius: 5px; border: 1px solid #c0c0c0; } .mailform input[type=button], .mailform input[type=submit], .mailform input[type=reset] { background-color: #dfedff; } .mailform input[type=text], .mailform input[type=email], .mailform input[type=tel], .mailform input[type=url], .mailform textarea { width: 100%; margin: 2px 0px; padding: 2px 4px; } .mailform input[type=text]:hover, .mailform input[type=email]:hover, .mailform input[type=tel]:hover, .mailform input[type=url]:hover, .mailform textarea:hover { background-color: #faffbd; } .mailform input[type=radio], .mailform input[type=checkbox] { cursor: pointer; vertical-align: -2px; margin-right: 2px; } .mailform input[type=button], .mailform input[type=submit], .mailform input[type=reset] { cursor: pointer; padding: 2px 10px; font-weight: normal; color: #006cb4; text-shadow: 1px 1px 1px #fff, 2px 2px 2px #c0c0c0; } .mailform input[type=button]:hover, .mailform input[type=submit]:hover, .mailform input[type=reset]:hover { color: #dc143c; } .mailform button[type=submit] { cursor: pointer; width: 100%; } .mailform a.submit-button, .mailform button[type=button].submit-button, .mailform input[type=text].button { cursor: pointer; display: inline-block; background-color: #dfedff; border: 1px solid #c0c0c0; border-radius: 5px; padding: 0px 10px; text-shadow: 1px 1px 1px #fff, 2px 2px 2px #c0c0c0; color: #006cb4; } .mailform a.submit-button:hover, .mailform button[type=button].submit-button:hover, .mailform input[type=text].button:hover { color: #dc143c; } .mailform a.submit-button.readonly, .mailform button[type=button].submit-button.readonly, .mailform input[type=text].button.readonly { cursor: default; outline: none; } .mailform a.submit-button.readonly:hover, .mailform button[type=button].submit-button.readonly:hover, .mailform input[type=text].button.readonly:hover { color: #006cb4; } .mailform input[type=text].button { padding: 2px 10px; text-align: center; } .mailform input[type=text].readonly { cursor: default; outline: none; } .mailform input[type=text].readonly:hover { color: #006cb4; } .mailform select { outline: none; padding: 1px 4px; border: 1px solid #c0c0c0; background-color: #dfedff; } .mailform select option { padding: 2px 4px; } .mailform label { display: inline-block; cursor: pointer; padding-right: 5px; } .mailform label:hover { color: #dc143c; } /* end of style */