@charset "UTF-8";

/*===========
  COLOR SET
=============*/
:root {
    --main-bg: #FFFFFF;
    --sub-bg: #1F1F1F;
    --text: #000000;
    --sub-text: #797979;
    --main-color: #0078d7;
    --sub-color: #30D158;
}
@media (prefers-color-scheme: dark) {
    :root {
        --main-bg: #000000;
        --sub-bg: #1F1F1F;
        --text: #FFFFFF;
        --sub-text: #797979;
        --main-color: #0078d7;
        --sub-color: #30D158;
    }
}


/*
GENERAL STYLING
================================================ */
html {
    font-size: 100%;
    scroll-behavior: smooth;
}
body {
	background-color: var(--main-bg);
    color: var(--text);
	font-family: sans-serif;
}

/*
COMMON
================================================ */
.title {
    /*font-family: 'Dancing Script', cursive;*/
    font-size: 7rem;
    margin-bottom: 2rem;
}
.title2 {
    /*font-family: 'Dancing Script', cursive;*/
    font-size: 5rem;
    margin-bottom: 2rem;
}
p {
    line-height: 1.7;
	font-family: "Sawarabi Mincho", sans-serif;
    font-size: 1.125rem;
}

.container {
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
}

section {
    /*height: 100vh;*/
    height: 100%;
    /*
    scroll-snap-align: start;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    */
}

/*
HEADER
================================================ */
/*
	別cssで設定
*/

/*
HEADCOM
================================================ */
    .headcom {
        text-align: center;
        padding-top: 20vh;
    }

/*
MENU
================================================ */
    .menu {
        /*background-image: url(../images/bread2.jpg);*/
        display: flex;
        /*align-items: center;*/
        padding-top: 15vh;
    }

    section .wrapper {
        max-width: 800px;
        width: 100%;
        margin: 0 auto;
        padding: 0 0rem;
    }

    .menu-list {
        margin-left: 1rem;
    }
    .menu-list tr {
        margin-bottom: .5rem;
        line-height: 1.7;
    }
    .menu-list th {
        text-align: center;
        font-weight: normal;
        font-size: 1.2rem;
    }
    .menu-list td {
        font-size: 1.2rem;
        padding-left: 1rem;
    }
    .menu-list .data2{
        background: linear-gradient(transparent 85%, #0078d7 50%);
    }

    .grid-img{
        display: grid;
        width: 90%;
        margin: auto;
        gap: 2vw;
        grid-template-columns: repeat(4,25%);
        justify-content: center;
    }
    .grid-1{
        width: 100%;
        text-align: center;
        margin: auto;
        
    }
    .grid-1 a{
        /*width: 100%;*/
        background: #3c6ffd;
        font-size: 1.5rem;
        color: #fff;
        width: 70px;
        height: 100px;
        /*padding: 1rem 3.5rem;*/
        border-radius: 12px;    /*角の丸み*/
        display: inline-block;
    }
    .grid-1 a img{
        height: 50px;
        margin: 5px;
        padding: 5px;
    }
    .grid-1 a p{
        margin: 5px;
        padding: 0px;
    }
/*
CONTACT
================================================ */
    .contact {
        /*background-image: url(../images/cafe.jpg);*/
        /*text-align: center;*/
        padding-top: 8vh;
    }
    .btn {
        background: #555;
        font-size: 1.5rem;
        color: #fff;
        padding: 1rem 3.5rem;
        border-radius: 6px;
        display: inline-block;
        /*margin: 2rem 0 2.25rem;*/
    }
    .btn:hover {
        background: #777;
    }
/*
    .contact-sns {
        display: flex;
        justify-content: center;
    }
    .contact-sns a {
        background: #fff;
        width: 3.75rem;
        height: 3.75rem;
        display: inline-block;
        margin: 0 .5rem;
        border-radius: 50%;
        font-size: 2rem;
        padding: .75rem 0 0 .125rem;
        color: #555;
    }
    .contact-sns a:hover {
        background: rgba(255,255,255,.5);
    }
*/

/*
MOBILE SIZE
================================================ */
@media (max-width: 700px) {
    .title {
        font-size: 4rem;
    }
    .title2 {
        font-size: 3rem;
        margin-left: 1rem;
    }
    p {
        font-size: 1rem;
        padding: 0 1rem;
    }
    .menu-list li,
    .menu-list th {
        font-size: 1rem;
    }
    .menu-list td{
        display: none;
    }
    .btn{
        margin-left: 2rem;
    }
    .hero {
        padding-top: 12vh;
    }
}