@charset "utf-8";
/* CSS Document */

:root {
    --green: #14a596;
    --Lgreen: #dcf1ef;
}
br.sp{
    display:none;
}

body{
    font-family: YakuHanJP,'Noto Sans JP', sans-serif;
}

header{
    width:100%;
    padding:50px;
}
header div{
    max-width: 700px;
    margin:auto;
}
header div h1{
    text-align:center;
    margin: 0;
    font-size:42px;
    font-weight:bold;
    margin-bottom:40px;
}
header div h1 span{
    color:var(--green);
}
header div p{
    text-align:center;
    font-size:16px;
    line-height:1.6;
    margin:0 auto;
    font-weight:500;
}

article * {
    box-sizing: border-box;
}
article {
    width: 100%;
    margin: auto;
    padding: 0;
}
article section {
    width: 100%;
    background: #fff;
    padding: 0;
    /* border: solid 1px #000; */
}
#reception{
    background:var(--Lgreen);
    color:#333;
    padding: 40px 40px 60px;
}
#reception h3{
    font-size:23px;
    font-weight:700;
    text-align:center;
}
#reception div.flex{
    max-width:700px;
    margin:auto;
    display:flex;
    flex-wrap:weap;
    justify-content:space-between;
    align-items:flex-start;
    background:#fff;
    padding: 55px 65px;
    border-radius:20px;
}
#reception div.flex img{
    width: 190px;
    box-shadow:5px 5px 5px #ccc;
}
#reception div.text{
    width: calc(100% - 230px);
}
#reception div.text a{
    display:block;
    width: 100%;
    margin:auto;
    background:#031b51;
    text-align:center;
    color:#fff;
    text-decoration:none;
    padding: 16px;
    font-size:18px;
    font-weight:700;
    border-radius:50px;
    line-height: 1;
}
#reception div.text a.end_accept{
    background:#bbb;
    font-size:16px;
    cursor:default;
}
#reception div.text a +small{
    display:block;
    text-align:center;
    margin-top:10px;
    font-size:12px;
    font-weight:400;
}
#reception div.text dl{
    display:flex;
    flex-wrap:wrap;
    font-size:14px;
    margin: 24px 0 0;
}
#reception div.text dl dt{
    font-weight:700;
    color:var(--green);
    width: 25%;
    margin-top: 8px;
}
#reception div.text dl dd{
    width: 75%;
    margin:0;
    font-weight:500;
    margin-top: 8px;
}

#reception ul{
    max-width:700px;
    margin: 15px auto 0;
    list-style:none;
    padding:0;
    font-size:12px;
    font-weight:500;
}
#reception ul li{
    padding-left:1em;
    text-indent:-1em;
    margin:0.4em 0;
}
#tm{
    max-width: 740px;
    margin:auto;
    padding: 80px 0;
    color:#333;
}
#tm h4{
    text-align:center;
    font-size:32px;
    margin: 0 0 30px;
}
#tm p{
    text-align:center;
    font-size:16px;
    font-weight:500;
    line-height:1.7;
    margin:0 0 30px;
}
#tm > a{
    display:block;
    margin:0 0 50px;
}
#tm  figure{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    width:520px;
    margin:0 auto;
}
#tm  figure img.logo{
    width:60%;
    margin:0 auto 20px;
}
#tm  figure img.image{
    width:100%;
}
#tm  nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
#tm  nav h5{
    width:100%;
    text-align:center;
    margin:0 0 20px;
    font-size:17px;
    color:var(--green);
}
#tm  nav a{
    display:block;
    width:350px;
    border-radius:10px;
    overflow:hidden;
    filter: drop-shadow(4px 4px 4px #bbb);
}
#tm  nav a img{
    width:100%;

}
footer#sp {
    display: none;
}

@media screen and (min-width:768px) {
    #reception div.text a:not(.end_accept):hover,
    #tm  nav a:hover{
        opacity:0.8;
    }
}

@media screen and (max-width:767px) {
    br.sp{
        display:block;
    }
    body {
        min-width: auto;
        min-width: unset;
        width: 100%;
        padding-top: 0;
    }
    header{
        width:100%;
        padding: 10vw 5vw;
    }
    header div{
        margin:auto;
    }
    header div h1{
        font-size: 7vw;
        margin-bottom: 6vw;
    }
    header div h1 span{
        color:var(--green);
    }
    header div p{
        font-size: 4vw;
    }
    
    article * {
        box-sizing: border-box;
    }
    article {
        width: 100%;
        margin: auto;
        padding: 0;
    }
    article section {
        width: 100%;
        background: #fff;
        padding: 0;
        /* border: solid 1px #000; */
    }
    #reception{
        background:var(--Lgreen);
        color:#333;
        padding: 8vw 5vw;
    }
    #reception h3{
        font-size: 4.4vw;
        margin: 0 0 4vw;
    }
    #reception div.flex{
        flex-wrap:wrap;
        justify-content:center;
        align-items:flex-start;
        padding: 5vw;
    }
    #reception div.flex img{
        width: 55%;
        box-shadow:5px 5px 5px #ccc;
        margin-bottom:10vw;
        margin-top: 4vw;
    }
    #reception div.text{
        width: 100%;
    }
    #reception div.text a{
        display:block;
        width: 100%;
        margin:auto;
        background:#031b51;
        text-align:center;
        color:#fff;
        text-decoration:none;
        padding: 4vw;
        font-size:4.5vw;
        font-weight:700;
        border-radius:50px;
        line-height: 1;
    }
    
    #reception div.text a.end_accept{
        background:#bbb;
        font-size:3.6vw;
    }
    
    #reception div.text a +small{
        display:block;
        text-align: left;
        margin-top: 4vw;
        font-size: 3.3vw;
        font-weight: 500;
        padding-left: 3vw;
    }
    #reception div.text dl{
        font-size: 3.3vw;
        margin: 4vw 0 0;
        padding-left: 3vw;
        padding-bottom: 3vw;
    }
    #reception div.text dl dt{

        margin-top: 1.5vw;
    }
    #reception div.text dl dd{
        margin-top: 1.5vw;
    }
    #reception ul{
        margin: 6vw auto 0;
        font-size:2.8vw;
    }
    #reception ul li{
        text-align:justify;
    }
    #tm{
        margin:auto;
        padding:10vw 5vw;
    }
    #tm h4{
        text-align:center;
        font-size:6vw;
        margin: 0 0 6vw;
    }
    #tm p{
        text-align:center;
        font-size: 3.8vw;
        font-weight:500;
        line-height:1.7;
        margin: 0 0 12vw;
    }
    #tm > a{
        display:block;
        margin:0 0 50px;
    }
    #tm  figure{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        width: 100%;
        margin:0 auto;
    }
    #tm  figure img.logo{
        width:60%;
        margin:0 auto 20px;
    }
    #tm  figure img.image{
        width:100%;
    }
    #tm  nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
    }
    #tm  nav h5{
        width:100%;
        text-align:center;
        margin: 0 0 2vw;
        font-size: 4vw;
        color:var(--green);
    }
    #tm  nav a{
        display:block;
        width: 100%;
        border-radius:10px;
        overflow:hidden;
        margin: 2vw 0;
    }

    /*footer ---------------------------------------------------------*/
   #footer_sp{
       padding-bottom:0;
   }
    #pagetop {
        position: fixed;
        right: 5vw;
        bottom: 5vw!important;
        width: 10vw;
        height: 10vw;
    }
    .pagetop a img {
        width: 100%
    }

}