@charset "utf-8";
/********************************/
/*         スライダー           */
/********************************/
.cs_slider {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.slides {
    z-index: 10;
}
.slides img {
    width: 100%;
}
@media (min-width: 601px) {
.cs_slider {
    height: 500px;
    clip-path: ellipse(100% 100% at 50% 0%);
}
.slides img {
    height: 500px;
    object-fit: cover;
}
}
@media (max-width: 600px) {
.cs_slider {
    height: 180px;
    clip-path: ellipse(100% 95% at 50% 0%);
}
.slides img {
    height: 180px;
    object-fit: cover;
}
}
.cs_slider p {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    text-align: center;
    color: var(--siro);
    font-weight: bold;
    text-shadow: 
        var(--kuro) 2px  0px, var(--kuro) -2px  0px,
        var(--kuro) 0px -2px, var(--kuro)  0px  2px,
        var(--kuro) 2px  2px, var(--kuro) -2px  2px,
        var(--kuro) 2px -2px, var(--kuro) -2px -2px,
        var(--kuro) 1px  2px, var(--kuro) -1px  2px,
        var(--kuro) 1px -2px, var(--kuro) -1px -2px,
        var(--kuro) 2px  1px, var(--kuro) -2px  1px,
        var(--kuro) 2px -1px, var(--kuro) -2px -1px;
}
@media (min-width: 800px) {
.cs_slider p {
    width: 800px;
}
}
@media (max-width: 799px) {
.cs_slider p {
    width: 100%;
}
}
@media (min-width: 601px) {
.cs_slider p {
    font-size: 2rem;
}
}
@media (max-width: 600px) {
.cs_slider p {
    font-size: 1.4rem;
}
}
/********************************/
/*        枠付きメニュー        */
/********************************/
.cs_main_menu {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}
.cs_main_menu div {
    width: 223px;
    min-height: 148px;
    border: solid 1px var(--gray);
    border-radius: 10px;
    overflow: hidden;
    gap: 20px;
    margin-bottom: 20px;
}
.cs_main_menu div a {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    text-align: center;
    text-decoration: none;
    border-radius: inherit; 
}
.cs_main_menu div a:link,
.cs_main_menu div a:visited {
    color: var(--kuro);
}
@media (min-width: 601px) {
.cs_main_menu div {
    width: 223px;
    min-height: 148px;
    font-size: 1.4rem;
}
}
@media (max-width: 600px) {
.cs_main_menu div {
    width: calc(50% - 10px);
    min-height: 148px;
    font-size: 1.2rem;
}
}
.cs_main_menu a::before {
    content: "";
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto -50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    color: currentColor;
}
.cs_main_menu div:nth-child(1) a::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v6c0 4.7-3 8-7 9-4-1-7-4.3-7-9V6l7-3z'/></svg>");
}
.cs_main_menu div:nth-child(2) a::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='8' r='3'/><circle cx='16' cy='9' r='2.5'/><path d='M4 19c0-2.5 2.5-4 4-4s4 1.5 4 4'/><path d='M14 19c0-2 2-3.2 3.5-3.2S21 17 21 19'/></svg>");
}
.cs_main_menu div:nth-child(3) a::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6-5.2-6-10a6 6 0 1 1 12 0c0 4.8-6 10-6 10z'/><path d='M12 8c1.5 1 2.5 2.3 2.5 3.6a2.5 2.5 0 1 1-5 0c0-1.3 1-2.6 2.5-3.6z'/></svg>");
}
.cs_main_menu div:nth-child(4) a::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='currentColor' fill='none' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='6' width='16' height='14' rx='2'/><line x1='4' y1='10' x2='20' y2='10'/><line x1='8' y1='3' x2='8' y2='7'/><line x1='16' y1='3' x2='16' y2='7'/></svg>");
}
/********************************/
/*       応援の店、ぬりえ       */
/********************************/
.cs_main_content {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.cs_main_content div {
    text-align: center;
}
@media (min-width: 601px) {
.cs_main_content div {
    width: 220px;
}
.cs_main_content div:nth-child(2) {
    padding-left: 50px;
}
}
@media (max-width: 600px) {
.cs_main_content div {
    width: calc(50% - 10px);;
    margin: 0 5px 30px;
}
.cs_main_content div:nth-child(1) img {
    width: 140px;
}
}
/********************************/
/*           QRコード           */
/********************************/
/*
.cs_main_qrcode {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-bottom: 30px;
}
.cs_main_qrcode div {
    margin: 0 30px 30px;
}
*/
.cs_main_qrcode table{
    margin: 0 auto;
/*
    border-radius: 20px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
*/
}
/*
.cs_facebook {
    border: 2px solid var(--blue);
}
.cs_instagram {
    border: 2px solid var(--daid)
}
*/
/*
.cs_main_qrcode table tr th,
.cs_main_qrcode table tr td {
    padding: 5px;
}
*/
/*
.cs_facebook tr th,
.cs_facebook tr td {
    border: 1px solid var(--blue);
}
*/
/*
.cs_facebook tr:nth-child(2) td {
    padding-bottom: 29px !important;
}
*/
/*
.cs_instagram tr th,
.cs_instagram tr td {
    border: 1px solid var(--daid);
}
*/
.cs_main_qrcode table tr td {
    text-align: center;
}
.cs_main_qrcode table tr td a:link,
.cs_main_qrcode table tr td a:visited {
    color: var(--kuro);
}
/********************************/
/*            バナー            */
/********************************/
.cs_main_banner {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 30px;
}
.cs_main_banner div {
    margin: 0 30px 30px;
}
.cs_main_banner_comment {
    width: 100%;
    margin-top: -55px;
    margin-bottom: 60px;
    text-align: center;
}
.cs_main_banner_comment a:link,
.cs_main_banner_comment a:visited {
    color: var(--kuro);
}