@charset "UTF-8";
/* sanpai.CSS Document */

/*================================================
背景色
================================================*/
.Contents-bg01 {
    position: relative;
    background: rgb(245, 237, 225);
    background: linear-gradient(135deg, rgba(245, 237, 225, 1) 0%, rgba(245, 237, 225, 1) 50%, rgba(253, 207, 145, 1) 100%);
    width: 100%;
    height: auto;
}

.Contents-bg02 {
    position: relative;
    background: rgb(245, 237, 225);
    background: linear-gradient(25deg, rgba(245, 237, 225, 1) 0%, rgba(245, 237, 225, 1) 50%, rgba(253, 207, 145, 1) 100%);
    width: 100%;
    height: auto;
    margin-bottom: 40px;
    padding-bottom: 60px;
    z-index: 1;
}

.Contents-bg02::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 calc(100vw - 15px);
    border-color: transparent transparent transparent #fff;
    transform: scale(-1, 1);
    z-index: -1;
}

/*================================================
タイトル
================================================*/
.Keyvisual__outer {
    background-image: url(../images/keyvisual__idx__sanpai-pc.png);
}

.Keyvisual__inner {
    height: 830px;
}

.Keyvisual__inner .Seo {
    z-index: 2;
}

.Keyvisual__inner .Map {
    bottom: 60px;
}

/*================================================
アンカー・ボタン類
================================================*/
.Page__items {
    flex-wrap: wrap;
}

.Page__item {
    width: calc(100% / 3);
}

.Page__item:nth-child(-n+3) {
    margin-bottom: 50px;
}

.Page__item:nth-child(4) {
    border-left: dotted 3px #000;
}

.Page__link::before {
    content: none;
}

/*================================================
コンテンツ
================================================*/
/* 巡礼の服装・巡礼用品 */
.Sec-supplies {
    margin-bottom: 100px;
}

.Sec-supplies .Sec__ttl::after {
    content: "";
    position: absolute;
    top: -50px;
    right: 170px;
    background-image: url(../../common/images/deco01-big.png);
    width: 289px;
    height: 172px;
    z-index: -1;
}

.Supplies-info__inner {
    display: flex;
    justify-content: flex-start;
}

.Supplies-info__inner::before {
    content: "";
    display: block;
    width: 109px;
    height: 93px;
    margin-right: 10px;
}

.Supplies-info__inner.pt01 {
    padding-right: calc(1024px - 670px);
}

.Supplies-info__inner.pt02 {
    padding-left: calc(1024px - 670px);
}

.Supplies-info__inner.pt01::before {
    background-image: url(../images/ig_pt01.png);
}

.Supplies-info__inner.pt02::before {
    background-image: url(../images/ig_pt02.png);
}

.Supplies-info__txt {
    font-size: 14px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
    line-height: 1.8;
    flex: 1;
}

.Supplies-info__txt > p {
    font-size: 22px;
    font-weight: 600;
    font-family: 'Noto Serif JP', serif;
    margin-bottom: 5px;
}

.Supplies-info__txt > p span {
    display: inline-block;
    background:linear-gradient(transparent 70%, #F5EDE1 70%);
}

.Supplies-name {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
}

.Supplies-illust {
    width: 603px;
    height: auto;
    margin-right: 10px;
}

.Supplies-parts {
    flex: 1;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
}

.Supplies-parts > p {
    font-size: 13px;
    margin-bottom: 10px;
    color: #333;
}

.Supplies-parts > p strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

/* 参拝の仕方 */
.Sec-manners {
    margin-bottom: 200px;
}

.Sec-manners .Sec__ttl::after {
    content: "";
    position: absolute;
    top: -80px;
    left: 210px;
    background-image: url(../../common/images/deco01-big.png);
    width: 289px;
    height: 172px;
    transform: scale(-1, 1);
    z-index: -1;
}

.Sec-manners .Common21__inner {
    position: relative;
}

.Sec-manners .Common21__inner::before {
    content: "";
    position: absolute;
    top: calc(50% + 60px);
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    background-color: #fdfaf5;
    width: 80%;
    height: 105%;
    z-index: -1;
}

.Manner__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 100px;
}

.Manner__inner-item {
    background-image: url(../images/deco-manners.png), url(../images/deco-manners.png);
    background-position: top right, bottom left;
    background-repeat: no-repeat;
    width: 321px;
    height: auto;
}

.Manner__inner-item:nth-child(-n+9) {
    margin-bottom: 30px;
}

.Manner-bg01 {
    background-color: #F7E9D7;
}

.Manner-bg02 {
    background-color: #F9E1C1;
}

.Manner-head {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
}

.Manner-head small {
    font-size: 15px;
}

.Manner-head::before {
    content: "";
    display: block;
    background-repeat: no-repeat;
    margin-right: 10px;
    opacity: 0.5;
}

.Manner-head.num-01::before {
    background-image: url(../images/num-01.svg);
    width: 68px;
    height: 66px;
}

.Manner-head.num-02::before {
    background-image: url(../images/num-02.svg);
    width: 82px;
    height: 65px;
}

.Manner-head.num-03::before {
    background-image: url(../images/num-03.svg);
    width: 81px;
    height: 65px;
}

.Manner-head.num-04::before {
    background-image: url(../images/num-04.svg);
    width: 85px;
    height: 65px;
}

.Manner-head.num-05::before {
    background-image: url(../images/num-05.svg);
    width: 82px;
    height: 65px;
}

.Manner-head.num-06::before {
    background-image: url(../images/num-06.svg);
    width: 83px;
    height: 65px;
}

.Manner-head.num-07::before {
    background-image: url(../images/num-07.svg);
    width: 84px;
    height: 65px;
}

.Manner-head.num-08::before {
    background-image: url(../images/num-08.svg);
    width: 83px;
    height: 65px;
}

.Manner-head.num-09::before {
    background-image: url(../images/num-09.svg);
    width: 82px;
    height: 65px;
}

.Manner-head.num-10::before {
    background-image: url(../images/num-10.svg);
    width: 77px;
    height: 65px;
}

.Manner-txt {
    font-size: 14px;
    line-height: 1.6;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
    color: #333;
    padding: 15px 15px 0;
}

.Manner-txt:last-child {
    margin-bottom: 30px;
}

.Manner__link {
    text-align: right;
    padding: 0 15px 30px;
}

.Manner__link-text {
    position: relative;
    font-size: 14px;
    color: #9B630A;
    font-weight: 600;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
    text-decoration: underline;
    padding-right: 1em;
}

.Manner__link-text::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #9B630A;
    border-right: 2px solid #9B630A;
    transform: translateY(-50%) rotate(45deg);
}
.manner__height {
    height: 290px;
}
.photo-01,
.photo-02 {
    position: relative;
}

.photo-01::before,
.photo-02::before {
    content: "";
    display: block;
    position: absolute;
    background-repeat: no-repeat;
}

.photo-01::before {
    top: -80px;
    right: -150px;
    width: 440px;
    height: 297px;
    background-image: url(/attending/kokunai/junrei/shikoku88/images/BP18-053497-pc.jpg);
}

.photo-02::before {
    bottom: -40px;
    left: -130px;
    width: 424px;
    height: 290px;
    background-image: url(/attending/kokunai/junrei/shikoku88/images/AS22-036373-pc.jpg);
}

/* 納札の書き方 */
.Sec-write {
    margin-bottom: 100px;
}

.Sec-write .Sec__ttl::after {
    content: "";
    position: absolute;
    top: -50px;
    right: 200px;
    background-image: url(../../common/images/deco01-big.png);
    width: 289px;
    height: 172px;
    z-index: -1;
}

.Sec-write .Caption {
    text-align: center;
    margin-bottom: 30px;
}

.Write-name {
    display: flex;
    justify-content: space-between;
    width: 760px;
    height: auto;
    margin: 0 auto;
}

.Write-parts {
    flex: 1;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
}

.Write-parts > p {
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

.Write-parts > p strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
}

.Write-illust {
    width: 278px;
    height: auto;
    margin-left: 50px;
}

/* お遍路の心得 */
.Sec-knowledge {
    position: relative;
    padding-bottom: 150px;
}

.Sec-knowledge::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 calc(100vw - 15px);
    border-color: transparent transparent transparent #F5F3F0;
    transform: scale(-1, 1);
    z-index: -3;
}

.Sec-knowledge .Sec__ttl {
    margin-bottom: 100px;
}

.Sec-knowledge .Sec__ttl::after {
    content: "";
    position: absolute;
    top: -60px;
    left: 200px;
    background-image: url(../../common/images/deco01-big.png);
    width: 289px;
    height: 172px;
    transform: scale(-1, 1);
    z-index: -1;
}

.Group__knowledge {
    position: relative;
    background-color: #F7E9D7;
    width: 960px;
    height: auto;
}

.Knowledge-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.Knowledge-item {
    width: calc(100% / 2);
    margin-bottom: 10px;
}

.Group__knowledge-01,
.Group__knowledge-02 {
    position: relative;
    background-color: #f7e9d7;
    background-image: url(../images/deco-knowledge-pc.png), url(../images/deco-knowledge-pc.png);
    background-position: top right, bottom left;
    background-repeat: no-repeat;
    margin-left: calc(1024px - 960px);
    margin-bottom: 100px;
    padding: 20px 30px 20px 100px;
}

.Group__knowledge-01.label-01::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -64px;
    background-image: url(../images/knowledge-vertical-01.png);
    width: 132px;
    height: 190px;
    z-index: 1;
}

.Group__knowledge-02.label-02::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -64px;
    background-image: url(../images/knowledge-vertical-02.png);
    width: 132px;
    height: 190px;
    z-index: 1;
}

.Group__knowledge-01 .Caption {
    line-height: 1.8;
    margin-bottom: 30px;
}

.Group__knowledge-01 .Knowledge-dl {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
}

.Group__knowledge-02 .Knowledge-dl {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
    margin-bottom: 10px;
}

.Group__knowledge-01 .Knowledge-dt {
    display: flex;
    align-items: center;
    width: 210px;
    font-weight: 500;
}

.Group__knowledge-02 .Knowledge-dt {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
}

.Knowledge-dd {
    color: #333;
}

.Knowledge-dt::before {
    font-size: 22px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    color: #9b630a;
    margin-right: 10px;
}

.Knowledge-dt.num-01::before {
    content: "一";
}

.Knowledge-dt.num-02::before {
    content: "二";
}

.Knowledge-dt.num-03::before {
    content: "三";
}

.Knowledge-dt.num-04::before {
    content: "四";
}

.Knowledge-dt.num-05::before {
    content: "五";
}

.Knowledge-dt.num-06::before {
    content: "六";
}

.Knowledge-dt.num-07::before {
    content: "七";
}

.Knowledge-dt.num-08::before {
    content: "八";
}

.Knowledge-dt.num-09::before {
    content: "九";
}

.Knowledge-dt.num-10::before {
    content: "十";
}

/* 参拝のよくある質問 */
.Sec-question {
    position: relative;
    background-color: #F5F3F0;
    margin-bottom: 100px;
    padding-bottom: 150px;
}

.Sec-question::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 150px 0 0 calc(100vw - 15px);
    border-color: transparent transparent transparent #fff;
    transform: scale(-1, 1);
}

.Sec-question .Sec__ttl::after {
    content: "";
    position: absolute;
    top: -80px;
    right: 160px;
    background-image: url(../images/deco01__sanpai.png);
    width: 289px;
    height: 172px;
    z-index: -1;
}

.Group__question {
    background-color: #fff;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", sans-serif;
    margin-bottom: 20px;
    padding: 20px;
}

.Query-title {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.Query-title::before {
    content: "Q";
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #9B630A;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 25px;
    font-weight: 600;
    font-family: 'Noto Serif JP', serif;
    color: #fff;
    margin-right: 30px;
    padding-bottom: 5px;
}

.Query-title__inner {
    position: relative;
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.Query-title__inner::before,
.Query-title__inner::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    display: block;
    background-color: #9B630A;
    width: 10px;
    height: 2px;
    transform: translateY(-50%);
    z-index: 10;
}

.Query-title__inner::before {
    transform: translateY(-50%) rotate(90deg);
}

.open .Query-title__inner::before {
    transform: translateY(-50%) rotate(0);
}

.Query-contents {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-top: 20px;
}

.Query-contents::before {
    content: "A";
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #D5A861;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 25px;
    font-weight: 600;
    font-family: 'Noto Serif JP', serif;
    color: #fff;
    margin-right: 30px;
    padding-bottom: 5px;
}

.Query-contents__inner {
    flex: 1;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 10px;
}

.Query-contents__inner a {
	text-decoration: underline;
}

.Query-contents__inner a:hover {
	opacity: 0.7;
}

.Query__link {
    width: 100%;
    text-align: right;
}

.Query__link-text {
    position: relative;
    font-size: 14px;
    color: #9B630A;
    font-weight: 600;
    text-decoration: underline;
    padding-right: 1em;
}

.Query__link-text::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #9B630A;
    border-right: 2px solid #9B630A;
    transform: translateY(-50%) rotate(45deg);
}

/* ツアーを探す */
.Sec-tour .Sec__ttl {
    margin-bottom: 100px;
}

.Sec-tour .Sec__ttl::after {
    top: -40px;
    left: 210px;
    transform: scale(-1, 1);
}
.Feature__other-items {
    flex-wrap: wrap;
    width: 1024px;
}

.Feature__other-item:nth-child(1) {
    width: 570px;
    margin: 0 auto 30px;
}

.Feature__other-item:nth-child(2),
.Feature__other-item:nth-child(3) {
    width: 486px;
}

.Sec-tour .Temple__tour-link {
    padding: 15px 160px;
}

#Sec-question .Temple__tour-link {
  background-color: #fff;
}

#Sec-question .Temple__tour-link:hover {
  background-color: #ebfa72;
}