/*
Theme Name:MatsueYuugenKitan
Theme URI:
Author: 
Author URI: https://yoshida-designbu.com
License: 
*/

/*--------------
リセットCSS
--------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}

q,
blockquote {
    quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none;
}

img {
    vertical-align: bottom;
}

a img {
    border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}

input[type="button"],
input[type="submit"] {
    -webkit-appearance: none;
}

br.clear {
    clear: both;
}

/*リセットcssここまで*/


/*--------------
common
--------------*/

html {
    font-size: 62.5%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --color-White: #ffffff;
    --color-Black: #333333;
    --color-Navy: #0d0c2b;
    --color-Orange: #c65626;
    --color-Green: #0f8b7c;
    --font-16px: 1.6rem;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    --font-ZenOldMincho: "Zen Old Mincho", "游明朝", "YuMincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}

body {
    background-color: var(--color-White);
    color: var(--color-Black);
    font-family: var(--font-ZenOldMincho);
    font-size: var(--font-16px);
    line-height: 1.6;
    font-weight: var(--font-regular);
    font-feature-settings: "palt";
}

a {
    text-decoration: none;
    transition: all 0.3s;
    color: var(--color-Black);
}

img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

picture {
    display: block;
}

.link {
    display: block;
}

.hidden {
    visibility: hidden;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/*--------------
main
--------------*/

.mainContainer--top::after {
    content: "";
    width: 100vw;
    height: 100vh;
    background: url(./img/common/mainBg.webp) center no-repeat;
    background-size: cover;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}


/*--------------
KV
--------------*/

/* topKV */

.topKV {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.topKv__title {
    width: 85%;
    padding-bottom: 5%;
}

/* topConcept */

.topConcept__mainText {
    max-width: 200px;
    width: 50%;
    margin: 0 auto;
}

.topConcept__contentImage {
    margin-top: 50px;
}

.topConcept__yakumoImage {
    max-width: 400px;
    width: 90%;
    margin: 0 auto;
}

.topConcept__yakumoName {
    max-width: 300px;
    width: 60%;
    margin: 20px auto 0;
}

.topConcept__contentText {
    width: 90%;
    margin: 30px auto 0;
    font-size: 1.8rem;
}

.topConcept__contentText p {
    margin-top: 15px;
}

.topConcept__contentText p:first-of-type {
    margin-top: 60px;
}

.topConcept__contentCopy {
    font-size: 3rem;
    font-weight: var(--font-medium);
    text-align: center;
}


/*--------------
トップ
--------------*/

/* 共通 */

.topSec {
    padding-bottom: 200px;
}

.topSecTitle {
    translate: 0 -60%;
}


/*--------------
スポット
--------------*/

.topSec--spot {
    background: url(./img/common/subBg01-sp.webp) center left no-repeat;
    background-size: cover;
    margin-top: 250px;
}

.topSec--spot .topSecTitle {
    translate: 0 -34%;
}


.spotItem {
    margin-top: 100px;
    position: relative;
}

.spotItem:first-of-type {
    margin-top: 0;
}

.spot__mainContent {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.spot__titleBox {
    position: absolute;
}

.spot__explanation {
    margin-top: 20px;
    color: var(--color-White);
}

.spot__subContent {
    width: 90%;
    margin: 40px auto 0;
    position: relative;
}

.spot__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 3.8rem;
    font-weight: var(--font-bold);
    color: var(--color-Navy);
}

.spot__copy span {
    height: fit-content;
    display: block;
    background-color: var(--color-White);
    line-height: 1;
}

.spot__subContentInner {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.spot__subImage02, .spot__experience {
    width: 48%;
}

.spot__experienceTitle {
    background-color: var(--color-White);
    color: var(--color-Navy);
    font-weight: var(--font-bold);
}

.spot__experienceText {
    margin-top: 10px;
    font-size: 1.4rem;
    line-height: 2;
    color: var(--color-White);
}

.spot__subContentDeco {
    position: absolute;
}

.spot__footprints {
    position: absolute;
}

/* ギリギリ井戸 */

.spotItem--girigiriido .spot__titleBox {
    width: 30%;
    top: 0;
    left: 3%;
}

.spotItem--girigiriido .spot__titleNum {
    width: 52%;
    position: absolute;
    top: 0;
    left: -12%;
}

.spotItem--girigiriido .spot__subContent {
    position: initial;
}

.spotItem--girigiriido .spot__copy {
    rotate: -7deg;
    top: 0;
    right: 8%;
}

.spot__footprints01 {
    width: 35%;
    rotate: 150deg;
    right: 8%;
    bottom: 0;
}

/* 塩見縄手 */

.spotItem--shiominawate .spot__titleBox {
    width: 51%;
    top: 6%;
    left: 16%;
}

.spotItem--shiominawate .spot__titleNum {
    width: 31%;
    position: absolute;
    top: 48%;
    left: -34%;
}

.spotItem--shiominawate .spot__copy {
    rotate: 7deg;
    top: 0;
    right: 5%;
}

.spotItem--shiominawate .spot__subContentInner {
    align-items: flex-end;
}

.spotItem--shiominawate  .spot__subContentDeco {
    width: 24%;
    bottom: 22%;
    right: 14%;
}

.spot__footprints02 {
    width: 28%;
    rotate: 60deg;
    bottom: -13%;
    left: 5%;
}

/* 月照寺 */

.spotItem--geshoji {
    margin-top: 300px;
}

.spotItem--geshoji .spot__titleBox {
    width: 32%;
    top: 2%;
    left: 0;
}

.spotItem--geshoji .spot__titleNum {
    width: 50%;
    position: absolute;
    top: 0;
    right: -6%;
}

.spotItem--geshoji .spot__subContent {
    position: initial;
}

.spotItem--geshoji .spot__copy {
    rotate: 9deg;
    top: 0;
    right: 10%;
}

.spotItem--geshoji .spot__subContentInner {
    align-items: flex-end;
}

.spotItem--geshoji .spot__subContentDeco {
    width: 30%;
    right: 5%;
    bottom: 11%;
    transform: scaleX(-1);
}

/* 大雄寺 */

.spotItem--daioji {
    margin-top: 300px;
}

.spotItem--daioji .spot__titleBox {
    width: 38%;
    top: 2%;
    left: 0;
}

.spotItem--daioji .spot__titleNum {
    width: 42%;
    position: absolute;
    top: -42%;
    left: 24%;
}

.spotItem--daioji .spot__copy {
    top: -2%;
    right: 5%;
}

.spotItem--daioji .spot__subContentDeco {
    width: 22%;
    right: 2%;
    bottom: 8%;
}

.spot__footprints03 {
    width: 29%;
    rotate: 170deg;
    right: 8%;
    bottom: -15%;
}


/*--------------
語り部
--------------*/

.topSec--storyteller {
    background: url(./img/common/subBg02-sp.webp) center left no-repeat;
    background-size: cover;
}

.storyteller__intro {
    display: flex;
    flex-direction: column-reverse;
}

.storyteller__titleBox {
    display: flex;
    flex-direction: column-reverse;
    max-width: 400px;
    width: 90%;
    margin: 0 auto;
}

.storyteller__title {
    width: 70%;
    margin: 30px auto 0;
}

.storyteller__job {
    margin-top: 30px;
}

.storyteller__job li {
    width: fit-content;
    margin: 0.5em auto 0;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: var(--font-bold);
    color: var(--color-Orange);
    background-color: var(--color-White);
}

.storyteller__job li:first-of-type {
    margin-top: 0;
}

.storyteller__image {
    max-width: 400px;
    width: 90%;
    margin: 0 auto;
}

.storyteller__profile {
    width: 90%;
    margin: 50px auto 0;
}

.storyteller__profileItem {
    margin-top: 30px;
}

.storyteller__profileItem:first-of-type {
    margin-top: 0;
}

.storyteller__profileTitle {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 15px;
    font-size: 2.4rem;
    font-weight: var(--font-bold);
    color: var(--color-White);
}

.storyteller__profileText {
    color: var(--color-White);
    line-height: 2;
}


/*--------------
参加案内
--------------*/

.topSec--guidance {
    background: url(./img/common/subBg03-sp.webp) center left no-repeat;
    background-size: cover;
}

.topSecContainer--guidance {
    width: 90%;
    margin: 0 auto;
}

.guidanceContent {
    margin-top: 50px;
}

.guidanceContent--days {
    margin-top: 0;
}

.guidance__contentTitle {
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 15px;
    font-size: 2.4rem;
    font-weight: var(--font-bold);
    color: var(--color-White);
}

.guidance__daysListItem {
    margin-top: 50px;
    display: flex;
    align-items: flex-end;
    gap: 3vw;
}

.guidance__daysListItem:nth-of-type(1) .guidance__date {
    width: 60%;
}

.guidance__daysListItem:nth-of-type(2) .guidance__date, 
.guidance__daysListItem:nth-of-type(3) .guidance__date {
    width: 67%;
}

.guidance__time {
    width: 30%;
}

.guidance__tourTime {
    margin-top: 50px;
    border: 1px solid var(--color-White);
    padding: 15px;
    font-size: 3rem;
    color: var(--color-White);
    text-align: center;
}

.guidance__priceList {
    width: 90%;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.guidance__people {
    width: 90%;
    margin: 50px auto 0;
}

.guidance__contactButton a {
    display: block;
    margin-top: 50px;
    border: 1px solid var(--color-White);
    padding: 15px;
    font-size: 3rem;
    color: var(--color-White);
    text-align: center;
}

.guidance__note {
    margin-top: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 40px;
}

.guidance__noteTitle {
    margin-bottom: 0.8em;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: var(--font-bold);
    color: var(--color-White);
    text-align: center;
}

.guidance__noteListItem {
    margin-top: 0.5em;
    padding-left: 1em;
    text-indent: -1em;
    color: var(--color-White);
    line-height: 1.8;
}

.guidance__noteListItem:first-of-type {
    margin-top: 0;
}

.guidance__noteListItem::before {
    content: "・";
}


/*--------------
参加者の声
--------------*/

.topSec--voice {
    background: url(./img/common/subBg04-sp.webp) center left no-repeat;
    background-size: cover;
}

.voice__list {
    width: 90%;
    margin: 0 auto;
}

.voice__listItem {
    margin-top: 80px;
}

.voice__listItem:first-of-type {
    margin-top: 0;
}

.voice__listTitle {
    margin: 0 auto;
}

.voice__listItem:nth-of-type(1) .voice__listTitle {
    width: 98%;
}

.voice__listItem:nth-of-type(2) .voice__listTitle {
    width: 97%;
}

.voice__listItem:nth-of-type(3) .voice__listTitle {
    width: 80%;
}

.voice__listText {
    margin-top: 30px;
    color: var(--color-White);
}


/*--------------
footer
--------------*/

.footerContainer {
    padding: 200px 0;
    position: relative;
}

.footerTitle {
    width: 85%;
    margin: 0 auto;
}

.footerNav {
    margin-top: 40px;
}

.footerNav__list {
    display: flex;
    justify-content: center;
}

.footerNav__listItem {
    margin-right: 2em;
    padding-right: 2em;
    border-right: 2px solid rgba(13, 12, 43, 0.5);
}

.footerNav__listItem a {
    font-size: 1.8rem;
    color: var(--color-Navy);
}

.footer__contactButton {
    width: 85%;
    margin: 0 auto;
}

.footer__contactButton a {
    display: block;
    width: 100%;
    margin-top: 40px;
    border: 1px solid var(--color-Navy);
    padding: 15px;
    font-size: 1.8rem;
    color: var(--color-Navy);
    text-align: center;
}

.footer__copyright {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}