@charset "utf-8";
/* CSS Document */
main.syaksm-top-page {
    max-width: 90%;
    margin: 0 auto;
    width: 700px;
    font-size: 1.4rem;
}
.syaksm-top-page h2 {
    background: transparent linear-gradient(149deg, #211e55 0%, #790f0f 100%) 0% 0% no-repeat padding-box;
}
.syaksm-top-page h3 , .syaksm_h3{
    font-weight: bold;
    margin: 2em 0 1.2em;
    padding: 0.25em 0.5em;
    border-bottom: 4px solid;
    border-image: linear-gradient(to right, #dfdee5 0%, #ebdcdc 100%);
    border-image-slice: 1;
    font-size: 1.6rem;
}
.syaksm-top-page section {
    margin: 5em 0;
}
.syaksm-top-page section:first-of-type {
    margin-top: 0;
}
.syaksm-top-page a{
    color: #721014;
    text-decoration: underline;
}
.center {
    text-align: center;
}
/* ======================================================= */
header.syaksm-top-header {
    margin: 0;
    padding: 0 5%;
    width: 100%;
    height: 30vh;
    max-height: 240px;
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D3BFC1;
    background-image: url(img/mv_syaksm_l.jpg),url(img//mv_syaksm_r.jpg); 
    background-size: 50% auto,50% auto;
    background-position: left top,right top;
    background-repeat: no-repeat,no-repeat;
}
h1#logo {
    position: absolute;
    bottom: -10px;
    left: 0;
    display: block;
}
h1#logo img {
    height: 93px;
    max-height: 100%;
    width: auto;
    display: block;
}
/* ======================================================= */
.syaksm-top-page dl {
    box-sizing: border-box;
    border-bottom: solid 1px #211e5545;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 20px auto;
    width: 100%;
}
.syaksm-top-page dt , .syaksm-top-page dd {
    padding: 15px;
    border-top: solid 1px #211e5545;
    margin: 0;
}
.syaksm-top-page dt {
    font-weight: bold;
    text-align: center;
    width: 30%;
    background: #f5f5f7;
}
.syaksm-top-page dd {
    vertical-align: baseline;
    width: 70%;
}
/* ======================================================= */
.ul_genre a {
    display: block;
}
.ul_genre a img{
    display: block;
    max-width: 250px;
}
.ul_genre .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 30px;
    justify-content: center;
}
.ul_genre .syaksm_h3 {
    margin: 2em 0 1em;
}
/* ======================================================= */
.ul_sns {
    margin: 1em 0 0;
}
.ul_sns li {
    display: flex;
    gap: 0 10px;
    align-items: center;
    margin: 0.5em 0;
}
.ul_sns .icon_sns {
    width: 25%;
    max-width: 30px;
    display: block;
}
a.icon_wavebox {
    display: block;
    max-width: 85%;
    margin: 0 auto 1em;
    border: solid 1px #dfdee5;
}
/* ======================================================= */
/* 
以下PC用
===============================================================
=============================================================== */
@media screen and (min-width: 768px) {
    body {
        margin: 0 auto;
    }
    header.syaksm-top-header {
        background-size: auto 150%,auto 150%;
        background-position: 30% top,73% 10%;
    }
    h1#logo img {
        margin: 0 auto;
    }
    h1#logo {
        left: 0;
        right: 0;
        bottom: 70px;
    }
}
@media screen and (min-width: 1025px) {}
@media print {}