@charset "Shift_JIS";
/* リンク */
.main-box { padding-bottom: 100px; }



/* ---------------------------------------------------------------------------------------------------- */
/* 「リンクについて」 */
.my-link { margin-left: 1em; }

.my-link table { border-collapse: collapse; border: 1px solid #000000; margin: 20px auto 20px 2em; }
.my-link td { white-space: nowrap; border: 1px solid #000000; padding: 5px; }
.my-link img { width: 200px; height: 40px; }

.ML-past { text-align: center; border: 1px solid #000000; width: fit-content; padding: 0px 5px 5px; margin-left: 2em; }
.ML-past h3 , .ML-past h4 { font-size: 0.75rem; padding: 3px; }
.ML-past h4:before { color: var(--main-blue); font-weight: bold; content: "＊\A"; }
.ML-past h4:after { color: var(--main-blue); font-weight: bold; content: "\A＊"; }
.ML-past div { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5px; row-gap: 5px; }


/* 「メールフォーム」 */
.mail { font-size: 0.75rem; margin-left: 2em; }
.mail-top { text-indent: -1em; line-height: 150%; max-width: 500px; padding: 0px 10px 10px 1em; }
.mail-explan { line-height: 150%; max-width: 500px; padding: 0px 10px; }
.mail h3 { margin: 20px 0px 5px; }
.mail p { width: 75%; margin-left: 1em; }
.mail p a { padding: 3px; }
.mail p a:hover { color: #ffffff; background-color: var(--main-blue); }

.mail .A { margin: 10px 0px 100px 4em; }
.mail .required { color:#ff0000; font-size: 0.5rem; font-weight: bold; }

.mail-form { max-width: 500px; border: 1px solid #000000; padding: 10px; }
.form-grid { display: grid; grid-template-columns: min-content 1fr; column-gap: 10px; }
.mail-form-item { white-space: nowrap; }
.mail-form-name { width: 200px; }
.mail-form-content { height: 150px; }
.mail-form-send { text-align: center; margin-top: 20px; }



/* リンク集 */
.material { margin: 0px 0.5em; }
.material h3 { margin-top: 30px; }
.material h3:before { color: var(--main-blue); font-weight: bold; content: "○"; }
.material h3:first-child { margin-top: 0px; }
.material-link { font-size: 0.75rem; margin: 3px 1em; }
.material-link a { color: #000000; padding: 3px; margin: 5px 2px; }
.material-link a:hover { color: var(--main-blue); background-color: var(--main-blue-pale); }
.material-link a.non:hover { color: #000000; background-color: #7e8f8f; }





/* ---------------------------------------------------------------------------------------------------- */
/* スマホ対応用 */
@media (max-width: 480px) {
    .my-link { margin: 0px 10px; }
    .my-link table { margin: 20px 10px; }
    .my-link td:last-child { white-space: normal; word-break: break-all; }
    .ML-past { margin: 0px auto; }
    .ML-past div { grid-template-columns: 1fr; }
    
    .mail { margin: 0px 10px; }
    .mail p { width: auto; }
}
/* ---------------------------------------------------------------------------------------------------- */