@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

a {
    color: #202020;
    text-decoration: none;
}

li {
    list-style: none;
}

@font-face {
    font-family: noto-static;
    src: url(../font/noto-static/NotoSerifJP-Regular.ttf);
}

/* 
薄梅鼠 うすうめねず #dcd6d9
白梅鼠 しらうめねず #e5e4e6
灰梅 はいうめ #e8d3c7
栗梅　くりうめ　#e8d3c7
消し炭　けしすずみ　#434343
*/


/* スムーススクロールの記述 */

html {
    scroll-behavior: smooth;
}

.button {
    position: fixed;
    bottom: 0.5vw;
    right: 0.5vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    text-align: center;
    font-size: 1.3vw;
    line-height: 3;
    background-color: #e8d3c7;
    transition: 1s;
}

.button:hover {
    background-color: #E62E42;
    transition: 1s;
}

.button a {
    line-height: 3;
    color: #202020;
    transition: 1s;
}


/* ヘッダー */


.header-flexbox {
    display: flex;
    width: 100%;
}

.header-img {
    width: 85%;
    height: 46vw;
}

.header-flexbox nav {
    width: 15%;
}

.header-flexbox nav h1 {
    width: 80%;
    margin: 5% auto;
}

.header-flexbox nav h1 img {
    width: 100%;
    vertical-align: bottom;
}

.header-flexbox nav ul {
    display: flex;
    justify-content: center;
}


.header-flexbox nav ul:nth-of-type(2) {
    margin-top: 20%;
}

.header-flexbox nav ul li {
    writing-mode: tb-rl;
    transition: 1s;
}

.header-flexbox nav ul li:hover {
    opacity: 0.3;
    transition: 1s;
}

.header-flexbox nav ul li a {
    line-height: 2.5;
    font-family: noto-static;
}

/*=== 画像の表示エリア ================================= */
.slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: auto;
    background: #fff;
}

/*=== 画像の設定 ======================================= */
.slide img {
    display: block;
    position: absolute;
    /* 画像のサイズを表示エリアに合せる */
    width: inherit;
    height: inherit;
    opacity: 0;
    animation: slideAnime 70s ease infinite;
}

/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) {
    animation-delay: 0s
}

.slide img:nth-of-type(2) {
    animation-delay: 7s
}

.slide img:nth-of-type(3) {
    animation-delay: 14s
}

.slide img:nth-of-type(4) {
    animation-delay: 21s
}

.slide img:nth-of-type(5) {
    animation-delay: 28s
}

.slide img:nth-of-type(6) {
    animation-delay: 35s
}

.slide img:nth-of-type(7) {
    animation-delay: 42s
}

.slide img:nth-of-type(8) {
    animation-delay: 49s
}

.slide img:nth-of-type(9) {
    animation-delay: 56s
}

.slide img:nth-of-type(10) {
    animation-delay: 63s
}

/*=== スライドのアニメーション ========================= */
@keyframes slideAnime {
    0% {
        opacity: 0
    }

    1% {
        opacity: 1
    }

    9% {
        opacity: 1
    }

    10% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

/* メインセクション */

.notice-flexbox {
    display: flex;
    width: 100%;
    height: 30vw;
    margin-top: 5%;
}

.flex-inbox {
    width: 35%;
    padding-top: 4%;
    font-family: noto-static;
}



.flex-inbox h2 {
    writing-mode: tb-rl;
    width: 2.8vw;
    margin: 0 auto;
    text-align: center;
    font-size: 1.8vw;
    font-weight: normal;
}


.flex-inbox h2 img {
    width: 100%;
    vertical-align: bottom;
}

.notice-box {
    width: 60%;
    padding-left: 3%;
}

.notice-box ul {
    height: 90%;
}

.notice-box ul li {
    padding-left: 5%;
    border-bottom: 0.1vw solid #202020;
    font-size: 1.5vw;
    line-height: 5;
    font-family: noto-static;
}

.notice-box ul li:nth-of-type(1) {
    border-top: 0.1vw solid #202020;
    margin-top: 5%;
}

.notice-box ul li a:hover {
    transition: 1s;
    opacity: 0.3;
}



/* 行事のお知らせ */

.event-announcement {
    width: 100%;
    margin: 5% 0;
    padding: 3% 0;
    background-color: #dcd6d9;
    /* うすうめねず */
}

.event-announcement img {
    display: block;
    width: 3%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
}

.event-announcement h2 {
    width: 30%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: noto-static;
    font-weight: normal;
}

.event-announcement .event-flexbox {
    display: flex;
    width: 90%;
    margin: 0% auto;
}

.eventbox {
    width: 32%;
    margin-bottom: 3%;
    transition: 0.8s;
    background-color: #fff;
    transition: 0.5s;
}

.eventbox a:hover {
    opacity: 0.7;
    transition: 0.5s;
}

.eventbox:nth-last-of-type(2) {
    margin-left: auto;
    margin-right: auto;
}

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

.eventbox h3 {
    width: 90%;
    height: 10%;
    margin: 5% auto;
    text-align: center;
    font-size: 1.4vw;
    color: rgb(255, 0, 76);
    font-family: noto-static;
    font-weight: normal;
}

.eventbox p {
    width: 90%;
    margin: 5% auto;
    padding-bottom: 5%;
    font-size: 1vw;
    font-family: noto-static;

}

.ichiran-btn {
    display: block;
    width: 15%;
    margin: 5% auto;
    text-align: center;
    border-radius: 3vw;
    font-size: 1.1vw;
    line-height: 3;
    font-family: noto-static;
    background-color: #fff;
    transition: 1s;
}

.ichiran-btn:hover {
    background-color: #E62E42;
    color: #fff;
    transition: 1s;
}

.tablet-event-announcement {
    display: none;
}

/* ご祈祷・授与品 */
.prayer-flexbox {
    display: flex;
    width: 100%;
    margin-top: 5%;
    margin-bottom: 10%;
}

.flex-inbox {
    width: 35%;
}


.prayer-flexbox img {
    width: 100%;
    vertical-align: bottom;
}

.prayer-box {
    width: 29%;
    transition: 0.5s;
}

.prayer-box a:hover {
    opacity: 0.5;
    transition: 0.5s;
}

.prayer-box:nth-of-type(2) {
    margin-right: 2%;
}

.prayer-box h3 {
    width: 90%;
    margin: 0 auto;
    padding: 5% 0;
    text-align: center;
    color: rgb(255, 0, 76);
    font-size: 1.4vw;
    font-family: noto-static;
    font-weight: normal;
}

.prayer-box p {
    width: 100%;
    line-height: 1.7;
    font-size: 1.1vw;
    font-family: noto-static;
}


.prayer-wrapper {
    display: flex;
    width: 60%;
    margin-left: 35%;
    margin-right: 5%;
    margin-bottom: 5%;
}

.wrapper-box {
    width: 49%;
    transition: 0.5s;
}

.wrapper-box a:hover {
    opacity: 0.5;
    transition: 0.5s;
}

.wrapper-box:nth-child(1) {
    margin-right: 3.5%;
}

.wrapper-box img {
    width: 100%;
    vertical-align: bottom;
}

.wrapper-box h3 {
    width: 90%;
    margin: 0 auto;
    padding: 5% 0%;
    text-align: center;
    color: rgb(255, 0, 76);
    font-size: 1.4vw;
    font-family: noto-static;
    font-weight: normal;
}

.wrapper-box p {
    width: 100%;
    font-size: 1.1vw;
    font-family: noto-static;
}

.tablet-ichiran-btn {
    display: none;
}

/* 参拝のご案内 */

.vis-information {
    padding-top: 5%;
    background-color: #dcd6d9;
    /* うすうめねず */
    font-family: noto-static;
}

.vis-information-flexbox {
    display: flex;
    width: 100%;
    margin-top: 5%;
}

.flex-inbox {
    width: 35%;
}


.vis-information-box {
    width: 29%;
    transition: 0.5s;
}

.vis-information-box a:hover {
    opacity: 0.5;
    transition: 0.5s;
}

.vis-information-box:nth-of-type(2) {
    margin-right: 2%;
}

.vis-information-box img {
    width: 100%;
    vertical-align: bottom;
}

.vis-information-box h3 {
    width: 90%;
    margin: 3% auto;
    text-align: center;
}

.vis-information-box p {
    width: 90%;
    margin: 3% auto;
}


/* 地図・住所 */
.address {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #dcd6d9;
    /* うすうめねず */
    font-family: noto-static;
}

.address-flexbox {
    display: flex;
    width: 60%;
    margin-left: 35%;
    margin-right: 5%;
}

.gmap {
    width: 47%;
    height: fit-content;
}

.address-rightbox {
    width: 49%;
    margin-left: 4%;
}


.rightbox1 {
    font-style: normal;
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    border-top: 0.1vw solid #202020;
}


.rightbox1 p {
    width: 70%;
    margin-left: 5%;
    margin-bottom: 2%;
}

.rightbox2 {
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    border-top: 0.1vw solid #202020;
    border-bottom: 0.1vw solid #202020;
}

.rightbox2 h3 {
    width: 70%;
    margin-left: 5%;
    margin-bottom: 3%;
    font-weight: lighter;
}

.rightbox2 p {
    width: 97%;
    margin-left: 5%;
}

.rightbox3 {
    width: 100%;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    border-bottom: 0.1vw solid #202020;
}

.rightbox3 h3 {
    width: 70%;
    margin-left: 5%;
    margin-bottom: 3%;
    font-weight: lighter;
}

.rightbox3 h4 {
    width: 70%;
    margin-left: 5%;
    margin-bottom: 5%;
    font-weight: lighter;
}

.rightbox3 p {
    width: 97%;
    margin-left: 5%;
    font-size: 1vw;
}


/* フッター */
footer {
    font-family: noto-static;
}

footer .inquiry {
    width: 65%;
    margin: 5% auto;
    padding: 5% 0%;
    border-top: 0.1vw solid #202020;
    border-bottom: 0.1vw solid #202020;
}

footer .inquiry p {
    width: 35%;
    margin: 0 auto;
    text-align: center;
    font-size: 2.6vw;
    color: #202020;
}

footer .inquiry a {
    width: 30%;
    margin: 0 auto;
    text-align: center;
    font-size: 1.8vw;
    color: #202020;
    transition: 0.5s;
}

footer .inquiry a:hover {
    opacity: 0.3;
    transition: 0.5s;
}

.footer-flexbox {
    display: flex;
    width: 100%;
    height: 20vw;
}

.footer-flexbox h2 {
    width: 8%;
    transition: 0.5s;
}

.footer-flexbox h2:hover {
    opacity: 0.5;
    transition: 0.5s;
}

.footer-flexbox img {
    width: 100%;
    vertical-align: bottom;
}


.sns-icon {
    width: 30%;
    text-align: center;
}

.sns-icon i {
    margin-top: 50%;
    margin-right: 5%;
    font-size: 2vw;
    transition: 1s;
}

.sns-icon i:hover {
    opacity: 0.3;
    transition: 1s;
}

/* facebook : #1877f2
   innstagram : #5655CD、#9D3BC4、#DC2E74、#FDB34F
   line : #00B900
   youtube : #FF0000 
*/
.fa-facebook {
    color: #1877f2;
}

.fa-instagram {
    color: #DC2E74;
}

.fa-youtube {
    color: #FF0000;
}

.fa-line {
    color: #00B900;
}

.footer-box {
    width: 40%;
}

.footer-box ul {
    display: flex;
    justify-content: center;
}

.footer-box ul li {
    writing-mode: tb-rl;
    line-height: 4;
}

.footer-box ul li:hover {
    opacity: 0.3;
    transition: 1s;
}

footer p:nth-child(3) {
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}