@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: 1vw;
    right: 1vw;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    text-align: center;
    font-size: 2.8vw;
    line-height: 1.8;
    background-color: #e8d3c7;
    transition: 1s;
}


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


/* ヘッダー */


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

.header-img {
    width: 100%;
    height: 65vw;
}


/*ナビメニューのスタイルを指定*/
nav.NavMenu {
    position: fixed;
    /*表示位置を固定*/
    z-index: 2;
    /*重ね順を変更*/
    top: 0;
    /*表示位置を指定*/
    left: 0;
    /*表示位置を指定*/
    text-align: center;
    /*テキストを中央揃え*/
    width: 100%;
    /*全幅表示*/
    transform: translateX(-100%);
    /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。
    Xに変えると横から出てくる。*/
    transition: 0.6s;
    /*アニメーションの時間を指定*/
}

.NavMenu h1 {
    display: none;
}

nav.NavMenu ul {
    background: #e8d3c7;
    /*背景をグレーにする*/
}



nav.NavMenu ul li {
    font-size: 1.1em;
    list-style-type: none;
    border-bottom: 1px dotted #333;
}

nav.NavMenu ul:nth-child(3) li:last-child {
    border-bottom: none;
    /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a {
    display: block;
    /*クリックできる領域を広げる*/
    color: #000;
    padding: 1em 0;
    text-decoration: none;
}


/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active {
    transform: translateX(0%);
    /*上から出したい場合は、transform: translateYを使う。
    Xに変えると横から出てくる。*/
}

/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active {
    transform: translateX(0%);
    /*上から出したい場合は、transform: translateYを使う。
    Xに変えると横から出てくる。*/
}


/*トグルボタンのスタイルを指定*/
.Toggle {
    position: fixed;
    /* bodyに対しての絶対位置指定 */
    right: 13px;
    top: 12px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    /*divだけどカーソルが変わるようにしている*/
    z-index: 3;
    /*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle span {
    display: block;
    position: absolute;
    left: 6px;
    width: 30px;
    border-bottom: solid 3px #000;
    /* heightでも可可 */
    transition: .35s ease-in-out;
    /*変化の速度を指定*/

}

.Toggle span:nth-child(1) {
    top: 9px;
}

.Toggle span:nth-child(2) {
    top: 18px;
}

.Toggle span:nth-child(3) {
    top: 27px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    transform: rotate(45deg);
}


/*=== 画像の表示エリア ================================= */
.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%;
    margin: 5% auto;
    padding: 3% 0 3% 0;
}

.flex-inbox {
    width: 20%;
    padding-top: 4%;
    text-align: center;
    font-family: noto-static;
}



.flex-inbox h2 {
    writing-mode: tb-rl;
    width: 4.5vw;
    margin: 0 auto;
    text-align: center;
    font-size: 3.5vw;
    line-height: 1.2;
    font-weight: normal;
}


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

.notice-box {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 3%;
}

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

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

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


/* 行事のお知らせ */

.event-announcement {
    display: none;
}

.tablet-event-announcement {
    width: 100%;
    margin: 5% 0 10% 0;
    padding: 5% 0 5% 0;
    background-color: #dcd6d9;
}

.tablet-event-announcement-flexbox {
    display: flex;
}

.tablet-event-announcement .tablet-event-flexbox {
    display: flex;
    width: 80%;
    margin-left: auto;
}

.tablet-event-announcement .tablet-event-flexbox .tablet-eventbox {
    width: 48%;
}

.tablet-event-announcement .tablet-event-flexbox .tablet-eventbox:nth-child(2) {
    margin-left: 2%;
}

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


.tablet-eventbox h3 {
    width: 90%;
    margin: 5% auto;
    color: rgb(255, 0, 76);
    font-size: 3.4vw;
    font-family: noto-static;
    font-weight: lighter;
}

.tablet-eventbox p {
    display: none;
    font-size: 2.8vw;
    font-family: noto-static;
    font-weight: lighter;
}



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


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

.prayer-box {
    width: 38%;
}



.prayer-box:nth-of-type(3) {
    margin-left: 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: 3.4vw;
    font-family: noto-static;
    font-weight: normal;
}

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


.prayer-wrapper {
    display: none;
    width: 80%;
    margin-left: 20%;
    margin-right: 5%;
    margin-bottom: 5%;
}

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

.wrapper-box:nth-child(2) {
    margin-left: 2%;
    margin-right: 2%;
}

.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: 3.4vw;
    font-family: noto-static;
    font-weight: normal;
}

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

.tablet-ichiran-btn {
    display: block;
    width: 40%;
    margin: 5% auto;
    text-align: center;
    border-radius: 1vw;
    color: #fff;
    font-size: 2.3vw;
    line-height: 2.3;
    font-family: noto-static;
    background-color: #434343;
}



/* 参拝のご案内 */

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

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

.vis-information-box {
    width: 38%;
}



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

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

.vis-information-box h3 {
    width: 90%;
    margin: 5% auto;
    text-align: center;
    font-size: 3.4vw;
    color: rgb(255, 0, 76);
    font-weight: lighter;
}

.vis-information-box p {
    display: none;
    width: 100%;
    font-size: 2.2vw;

}


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

.address-flexbox {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.gmap {
    width: 90%;
    height: fit-content;
    margin: 5% auto;
}

.gmap iframe {
    width: 100%;
    vertical-align: bottom;
}

.address-rightbox {
    width: 80%;
    margin: 0 auto;
}


.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%;
    font-size: 3.4vw;
}

.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-size: 3.4vw;
    font-weight: lighter;
}

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

.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-size: 3.4vw;
    font-weight: lighter;
}

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

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


/* フッター */
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: 80%;
    margin: 0 auto;
    text-align: center;
    font-size: 4vw;
    color: #202020;
}

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



.footer-flexbox {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    height: 20vw;
}

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



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


.sns-icon {
    width: 25%;
    margin-right: 6%;
    text-align: center;
}

.sns-icon i {
    display: block;
    margin-bottom: 15%;
    font-size: 5vw;
}


/* 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: 50%;
}

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

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


footer p:nth-child(3) {
    width: 60%;
    margin: 10% auto 3% auto;
    text-align: center;
}