@charset "utf-8";
body {
    font-family: "游ゴシック","Yu-Gothic","sans-serif";
}

img {
    max-width: 100%;
}

.section-inner {
    max-width:960px;
    margin: 0 auto;
}

p.large {
    font-size: 18px;
    font-weight: bold;
    color: #898383;
}

p.medium {
    font-size: 16px;
    color: #898383;
    padding-left: 30px;
}



/* pc pcの時は（横幅769px以上の時）表示する */
.pc-only {
    display: block;
}
    
/* spの時は（768px以下の時）表示しない */
.sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .section-inner {
    padding: 0 24px;
    max-width: 550px;
    }

    .pc-only {
    display: none;
    }

    .sp-only{
    display: block;
    }

    p.large {
    font-size: 15px;
    font-weight: bold;
    }

    p.medium {
    font-size: 14px;
    padding-left: 30px;
    }
    
    
}

/* ヘッダー */
#header {
    width: 100vw;
}

h1 .header-logo img {
    width: 134px;
    height: 154px;
}

.header-logo {
    text-align: center;
}



/* 詳細 */
#info {
    padding-top: 50px;
    text-align: center;
}

.item {
    display: flex;
    padding-left: 10%;
}

.item .list {
    width: 15%;
    text-align: right;
}

.item .medium {
    flex-grow: 2;
    text-align: left;
}

@media screen and (max-width: 768px) {
    .item {
        display: flex;
        padding-left: 0;
    }
    
    .item .list {
        width: 30%;
        text-align: right;
    }
}


/* ボタン */
.btn-gmap {
    font-size: 16px;
    color: #898383;
    background-color: #fff;
    border: 1px solid #898383;
    padding: 15px 15px;
    text-decoration: none;
}

.btn--gmap:hover,
a.btn-gmap:hover {
    color: #fff;
    background: #b375b4;
}

a.btn-gmap {
    border-radius: 30px;
    transform: translate(-150px)
}

.hover {
	display: inline-block;
	transition: all .3s ease 0s;
	text-decoration: none;
    color: #898383;
    font-size: 18px;
    
}

.hover:hover {
	cursor: pointer;
	text-shadow: 2px 2px 4px #b375b4;
}


@media screen and (max-width: 768px) {
    
    a.btn-gmap {
    display: none;
    }
}

/* フッター */
#footer {
    border-top: solid 2px #b375b4;
    width: 100%;
    height: 100px;   
}

#footer .wrapper {
    text-align: center;
    margin-top: 50px;
}

@media screen and (max-width: 768px) {
    #footer .wrapper {
    margin-top: 30px;
    font-size: 11px;
    } 
}