@charset "utf-8";

/**********************************************/
/*祈祷*/
/**********************************************/

#kitou {
    padding: 100px 0 0;
    text-align: center;
}

/*内枠*/
#kitou .contents {
    background-image: url(../images/illust/kumo.png),url(../images/illust/bird.png);
    background-repeat: no-repeat, no-repeat;
    background-position: 10% top, right 100px;
    background-size: 180px, 160px;
}

/*余白*/
.kitou-inner {
    padding: 0 20px;
}

/*見出し*/
#kitou .header-ttl .h2-header {
    margin-bottom: 30px;
}

/*祈祷立てメニュー*/
#kitou-menu {
    padding:80px 0 40px;
    background-image: url("../images/illust/obousan.png"), url("../images/illust/tree.png");
    background-repeat: no-repeat, no-repeat;
    background-position: left bottom, 95% 90%;
    background-size: 250px, 200px;
}

/*縦書き*/
.tategaki {
    width: 100%;
    max-width:500px;
    margin:0 auto;
    padding:0;
    list-style-type:none;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: center;
    justify-content: space-around;
    flex-direction: row-reverse ;
}
.tategaki li {
    font-size: 2.5rem;
    letter-spacing:1rem;
    text-align:left;
    /*-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;*/
   writing-mode: tb-rl;/* IE独自 */
   writing-mode: vertical-rl;
　-moz-writing-mode: vertical-rl;
　-o-writing-mode: vertical-rl;
　-webkit-writing-mode: vertical-rl;
}


/****************************/
/*授与品*/
/****************************/
#googs {
    padding: 100px 0 30px;
    text-align: center;
}

/*内枠*/
#googs .contents {}

/*余白*/
.googs-inner {
    padding: 0 20px;
}

/*見出し*/
#googs .header-ttl .h2-header {
    margin-bottom: 30px;
}

/*一覧*/
.googs-list {
    width: 100%;
    margin: 100px 0 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.googs-list li {
    width:calc(8.333% * 3);
    padding: 0 20px;
    margin-bottom: 50px;
}
.googs-photo {
    margin-bottom: 30px;
    clip-path: circle(50% at 50% 50%);
}
.googs-text {}
.googs-text p {
    text-align: left;
}
.googs-text h3 {
    margin-bottom: 30px;
}




/****************************/
/*レスポンシブ*/
/****************************/
@media screen and (max-width: 1240px) {
}

@media screen and (max-width: 980px) {
}

@media screen and (max-width: 800px) {
    .tategaki {
        max-width:80%;
    }
    .tategaki li {
    font-size: 2rem;
}
    #kitou {
        padding: 120px 0 0;
        background: url("../images/illst_2.png") no-repeat 90% 30px;
        background-size: 180px;
    }
    #kitou .contents {
        background-image: none;
    }
    #kitou-menu {
        padding:250px 0 200px;
        background-position: center 30px, 90% bottom;
        background-size: 140px, 160px;
    }
    #kitou .header-ttl p {
       text-align:left;
    }
    #googs {
        padding: 50px 0 30px;
    }
    #googs .header-ttl p {
        text-align:left;
    }
    .googs-list li {
        width: 100%;
        margin-bottom: 50px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: -moz-flex;
        display: flex;
        -webkit-box-lines: multiple;
        -moz-box-lines: multiple;
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        text-align:left;
    }
    .googs-photo {
         /*width:calc(8.333% * 3);*/
         margin-bottom: 0px;
         margin-right: 30px;
    }
    .googs-text {
        /* width:calc(8.333% * 9 - 30px);*/
    }
    .googs-text h3 {
        text-align: center;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 540px) {
.message-txt span {
    height: 110%;
}
}

@media screen and (max-width: 380px) {
}