@charset "utf-8";

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  ul, li {
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    max-width: 100%;
    vertical-align: bottom;
  }

/* body */
body {
    color: #333;
    font-size: 16px;
    font-family: 'Shippori Mincho', serif;
    line-height: 1.0;
  }

.wrapper {
    /* max-width: 1440px; */
    /* コンテンツの幅はやはり960pxくらいがちょうどいいかも♪ */
    max-width: 960px;
    margin: 0 auto;
}

@media screen and (max-width:640px) {
    .wrapper {
        padding: 0 20px;
    }    
}

main h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 36px;
}

main h3 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
}

main p {
    text-align: center;
    font-size: 28px;
}

/* めんどいので括っちゃいます */
@media screen and (max-width:640px) {
    main h2 {
        font-size: 28px;
        line-height: 1.6;
    }

    main h3 {
        font-size: 20px;
    }

    main p {
        font-size: 18px;
    }
}

/* .container {
    margin-bottom: 40px;
} */

    /* logoはw200px指定 */
    .logo {
        /* padding-top: 30px; */
        display: block;
        margin: 0 auto;
        width: 200px;
        margin-bottom: 20px;
    }

/* --------------------------------------------------------------------------------------------- */
/* header */
.hiro {
    /* background: url(../img/hiro.jpg) no-repeat center top/cover; */
    /* height: calc(100vh - 200px); */
        /* height: 100vh; */
    position: relative;
}

.hiro .logo {
    width: 500px;
    position: absolute;
    top: 50%;
    left: 30%;
    z-index: 1;
}

.slider li {
    height: 100vh;
}

@media screen and (max-width: 640px) {
    .slider li {
        height: 60vh;
    }
}

/* これつけたらスマホ表示でも空白がなくなった♪ */
.slider li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* 画像調整 */
    object-position: top;
}

@media screen and (max-width:640px) {
    .hiro .logo {
        width: 400px;
        position: absolute;
        top: 50%;
        left: 10%;
    }
}
/* スマホでみたら怪しかったので */
@media screen and (max-width:400px) {
    .hiro .logo {
        width: 250px;
        position: absolute;
        top: 50%;
        left: 15%;
    }
}

.hiro h1 {
    font-size: 10px;
    padding: 6px;
    font-weight: normal;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* 割引案内 */
.waribiki_pc {
    text-align: center;
    font-size: 32px;
    line-height: 1.6;
    position: absolute;
    z-index: 2;
    bottom: 10%;
    right: 0;
    background-color: #FFC5D0;
    padding: 20px;
}

@media screen and (max-width: 640px) {
    .waribiki_pc {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .hiro h1 {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .hiro h1 {
        position: static;
        width: auto;
        background-color: #e6e7e899;
    }
}

.hiro h2 {
    position: absolute;
    top: 35%;
    left: 15%;
    padding: 40px 100px;
    background-color: #e6e7e899;
    z-index: 1;
}

@media screen and (max-width:640px) {
    .hiro h2 {
        position: static;
        width: auto;
        font-size: 20px;
        padding: 20px 20px;
        text-align: center;
        /* position: absolute;
        top: 30%;
        left: 15%;
        background-color: #e6e7e899; */
    }
}
/* スマホで見たら怪しかったので */
@media screen and (max-width:400px) {
    .hiro h2 {
        font-size: 16px;
        padding: 10px 10px;
    }
}


/* burgerをスマホ版でのみ表示 */
/* ぶっちゃけスマホ版でのみ表示するときmenuの文字は画像にして、cssで入れ込むしかない? */
@media screen and (max-width:640px) {

    #burger {
        position: fixed;
        z-index: 3;
        width: 100px;
        height: 80px;
        background-color: #fff;
        background-color: #e6e7e899;
        right: 5%;
        top: 30px;
        transition: 0.3s;
        cursor: pointer;
    }

    #burger {
        width: 70px;
        height: 56px;
        top: 50px;
    }

    #burger span {
        display: block;
        position: absolute;
        width: 80%;
        height: 4%;
        background-color: #000;
        inset: 0;
        margin: auto;
        transition: 0.3s;
    }
    
    #burger span:nth-child(1){
        background-color: #000;
        top: -35%;
    }
    #burger span:nth-child(3){
        background-color: #000;
        top: 35%;
    }
    
    #burger p {
        margin-top: 65%;
        text-align: center;
    }

        /* burger-setting */
    /* bgrはここがメンドいよね */
    #burger.active {
        background-color: #FFC5D0;
    }
    #burger.active span:nth-child(1) {
        top: 0;
        transform: rotate(45deg);
    }
    #burger.active span:nth-child(2) {
        opacity: 0;
    }
    #burger.active span:nth-child(3) {
        top:0;
        transform: rotate(-45deg);
    }
}

@media screen and (max-width:640px) {
    #burger p {
        margin-top: 60%;
        font-size: 10px;
    }
}




.call_to_action {
    /* height: 200px; */
    background-color: #FFC5D0;
    position: sticky;
    top: 0;
    left: 0;
    /* 本当はposition:stickyを使いたいのやけど、効かないのでホリューで（笑） */
    /* position: sticky;
    top: 0;
    left: 0; */
}

@media screen and (max-width:640px) {
    .call_to_action {
        display: none;
    }
}
/* スマホでみたら怪しかったので */
@media screen and (max-width:400px) {
    .call_to_action {
        height: 200px;
    }
}

.call_to_action .action {
    padding-top: 10px;
    display: flex;
    justify-content: center;
    /* gap: 100px; */
    align-items: center;
    text-align: center;
    /* padding-bottom: 10px; */
}
@media screen and (max-width:640px) {
    .call_to_action .action{
        justify-content: space-between;
        padding: 10px 20px;
        gap: 10%;
        
    }
}

.call_to_action .reserve{
    width: 30%;
    font-size: 24px;
}

@media screen and (max-width:640px) {
    .call_to_action .reserve{
        width: 30%;
        font-size: 18px;
    }
}

.call_to_action .tell{
    width: 30%;
    font-size: 20px;
}

@media screen and (max-width:640px) {
    .call_to_action .tell{
        width: 50%;
        font-size: 18px;
    }
}

/* .call_to_action img {
    width: 80px;
    cursor: pointer;
} */

/* .time {
    padding-top: 20px;
    
    width: 630px;
    margin-left: 286px;
    width: 100%;
    text-align: center;
    line-height: 1.6;
    padding-bottom: 20px;
} */
/* ここの中央よせはwidth指定をして、mlデベロッパーみながら調整するというアナログ笑。
    他に良い方法があるはず。。 */

@media screen and (max-width:640px) {
    .time {
        padding-top: 10px;
    }
}

.time {
    width: 30%;
    font-size: 16px;
}

@media screen and (max-width:640px) {
    .time p {
        font-size: 16px;
    }
}

/* nav settting */
.nav_pc .nav_inner {
    display: flex;
    justify-content: center;
    /* gap: 10%; */
    padding-bottom: 4px;
    align-items: center;
}

.nav_inner .nav_logo{
    width: 20%;
}

.nav_inner a {
    display: block;
    padding: 0 30px;
    /* line-height: 2.0; */
    font-size: 20px;

}

.nav_inner a:hover {
    /* background-color: #FFF5F7; */
    color: #FFF5F7;
    /* border-bottom: 1px solid #FFF5F7; */
}



    /* スマホ用のnav setting */

    #g_nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 100 px;
        background-color: #eee;
        z-index: 2;
        display: none;
    }

    #g_nav .nav_logo_sp img {
        display: block;
        margin: 0 auto;
    }
    
    #g_nav ul {
        font-size: 20px;
    }

    #g_nav .waribiki {
        background-color: #FFF5F7;
    }

    #g_nav a {
        display: block;
        line-height: 70px;
        text-align: center;
        color: #444;
        font-weight: bold;
        transition: 0.4s;
    }

    #g_nav a:hover {
        background-color: #FFF5F7;
    }

/* headerここまで */
/* ----------------------------------------------------------------------------------------------- */

/* abst */

.abst {
    /* margin-bottom: 40px; */
    background-color: #FFF5F7;
}

.abst p {
    padding-bottom: 40px;
    line-height: 1.6;
}

/* caracter */
.character_img {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* これgridで各要素がY軸中央に並ぶ。めちゃくちゃ便利 */
    justify-items: center;
    gap: 20px 10px;
}

@media screen and (max-width:640px) {
    .character_img {
        grid-template-columns: 1fr;
    }
}

.character .img {
    background-color: #FFC5D0;
    margin-bottom: 20px;
    width: 90%;
}

@media screen and (max-width:640px) {
    .character .img {
        margin-bottom: 10px;
        width: 98%;
        padding: 0 10px;
    }
}

.img img {
    display: block;
    margin: 20px auto;
}

.img p {
    margin-top: 20px;
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 1.6;
}


@media screen and (max-width:640px) {
    .character .number {
        width: 20%;
    }
    .img p {
        font-size: 16px;
        /* padding: 0 10px; */
    }
}

/* menu */
.menu {
    padding-bottom: 40px;
    background-color: #FFF5F7;
}

.menu h3 {
    background-color: #ffc5d0;
    text-align: left;
    /* ここら辺はデバイス対応がめんどいので、％表記 */
    width: 90%;
    margin: 0 auto 20px auto;
    padding: 20px;
}

.menu .box {
    /* ここら辺はデバイス対応がめんどいので、％表記 */
    width: 90%;
    margin: 0 auto;
    border: 1px solid #FFC5D0;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.menu .box_menu {
    border-right: 1px solid #FFC5D0;
    width: 80%;
    /* 残りのPは指定しとらんけど、
    これで20%になる。。はず */
}

.box img {
    margin-bottom: 10px;
}

.box p {
    line-height: 1.6;
    text-align: left;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}

@media screen and (max-width:640px) {
    .box p {
        font-size: 16px;
    }
}



/* flow */
/* ここのgridのかけ方は、.characterを見てください */
.flow_content {
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 20px;
    justify-items: center;
    margin: 0 auto 80px auto;
}

@media screen and (max-width:640px) {
    .flow_content {
        grid-template-columns: 1fr;
    }
}

.flow_content .element {
    width: 90%;
    text-align-last: left;
}

    /* flow各要素の調整 */
    .flow_content h3 {
    /* main h3 でmbが指定されていたため */
        margin-bottom: 20px;
    }
    .flow_content img {
        /* 微妙に線が短かったため、調整 */
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }

    .flow_content p {
        line-height: 1.6;
    }

    @media screen and (max-width:640px) {
        .flow_content p {
            font-size: 16px;
        }
    }

/* discount */
.discount {
    margin-bottom: 40px;
    padding-bottom: 40px;
    background-color: #FFF5F7;
}

.discount p {
    line-height: 1.6;
}

/* family */
.family p {
    line-height: 1.6;
}

/* img指定のみだと上のロゴにもwidthがかかってしまうため */
.family p img {
    width: 60%;
}

@media screen and (max-width:640px) {
    .family p img {
        width: 80%;
    }
}

.family .family_p {
    margin-bottom: 20px;
}

/* staff */
.staff {
    margin-bottom: 40px;
    background-color: #FFF5F7;
}

.staff h3 {
    background-color: #ffc5d0;
    text-align-last: left;
    /* ここら辺はデバイス対応がめんどいので、％表記 */
    width: 90%;
    margin: 0 auto 40px auto;
    padding: 20px;
}

.staff .boss {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap: 4%;
    padding-bottom: 40px;
}

@media screen and (max-width:640px) {
    .staff .boss {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

    /* gridレイアウト調整 */
    .boss_p {
        width: 90%;
    }

    @media screen and (max-width:640px) {
        .boss p img {
            width: 60%;
        }
    }

    .boss_p p {
        text-align: left;
        line-height: 1.6;
    }

    .boss p img {
        width: 80%;
    }

    @media screen and (max-width:640px) {
        .boss p img {
            width: 60%;
        }
    }

    .boss .boss_name {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .boss .boss_aisatu {
        /* 横線はfigmaで画像をひっぱってくるか、
        borderで指定するかどちらにするかは現在悩み中 */
        border-bottom: 1px solid #ffc5d0;
        margin-bottom: 20px;
    }

    /* めんどいので、ここは一括括りです */
    @media screen and (max-width:640px) {
        .boss p img {
            width: 60%;
        }
        .boss .boss_name {
            font-size: 24px;
        }
        .boss .boss_aisatu {
            font-size: 20px;
        }
    }

    .mako-oda {
        font-size: 20px;
        margin-bottom: 20px;
    }

.staff .staff_list {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 40px;
}

    /* 以下staff_listの微調整 */
    .staff_list p {
        text-align: left;
        padding-left: 20px;
        line-height: 1.6;
    }

    .staff_list p img {
        margin-bottom: 40px;
    }

/* acess */

        /* .mapにしておかないと、
        iframeの埋め込みのwidth指定が上手くいかなかったので、
        やりました */
        .access .map {
            width: 60%;
            margin: 0 auto;
            margin-bottom: 20px;
        }

        @media screen and (max-width:640px) {
            .access .map {
                width: 90%;
            }
        }

        .access .map p {
            text-align-last: left;
            margin-bottom: 40px;
        }

.access iframe {
    width: 100%;
    height: 500px;
    margin: 0 auto;
    margin-bottom: 20px;
}

@media screen and (max-width:640px) {
    .access iframe {
        height: 300px;
    }
}

.access h3 {
    background-color: #ffc5d0;
    text-align-last: left;
    /* ここら辺はデバイス対応がめんどいので、％表記 */
    width: 90%;
    margin: 0 auto 40px auto;
    padding: 20px;
}

.access p {
    line-height: 1.6;
}

.access .adress {
    margin: 0 auto;
    padding-left: 20px;
    width: 90%;
    text-align: left;
}

/* others */
.others {
    /* margin-bottom: 40px; */
    padding-bottom: 40px;
    background-color: #FFF5F7;
}

.others img {
    cursor: pointer;
}

.others h2 {
    margin-bottom: 40px;
}

/* なんか知らんけど、↓のように指定せんと、
アイコンが小さくならないです。多分継承とかのCSS仕様 */
@media screen and (max-width:640px) {
    .others .wrapper p {
        width: 25%;
        margin: 0 auto;
    }
}

/* footer */
footer {
    padding: 20px 0 0 0;
    /* height: 120px; */
    background-color: #FFC5D0;
}

@media screen and (max-width:640px) {
    footer {
        padding: 20px 0 10px 0;
    }
}

footer p {
    font-size: 20px;
    text-align: center;
    margin-top: 10px;
    /* padding-bottom: 10px; */
    line-height: 1.6;
}

footer p img {
    width: 40%;
    margin: 0 auto;
    margin-left: 80px;
}

footer p span {
    /* dbにしたら改行されるこれは知っといてよいテクニック */
    display: block;
    font-size: 20px;
}

footer p small {
    font-size: 14px;
}

/* めんどいので、一括指定 */
@media screen and (max-width:640px) {
    footer p {
        margin-top: 4px;
        margin-bottom: 4px;
        font-size: 16px;
    }
    footer p img {
        width: 80%;
        margin-left: 35px;
    }
    footer p span {
        font-size: 16px;
    }
    footer p small {
        font-size: 12px;
    }
}