/*
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: auto;
    height: 100%;
    vertical-align: bottom;
}

picture {
    height: 100%;
    display: block;
}

.link {
    display: block;
}

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


/*--------------
横スクロール
--------------*/

.js-wrapper {
    display: flex;
    height: 100vh;
    width: max-content;
}

.js-scroll {
    height: 100vh;
    display: flex;
    align-items: center;
}

.js-scrollItem {
    display: flex;
    align-items: center;
    height: 90vh;
}


/*--------------
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 {
    justify-content: center;
    width: 100vw;
}

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

.topKv__title img {
    width: 100%;
}

/* topConcept */

.topConcept {
    margin-left: 200px;
}

.topConcept__mainText {
    height: 90%;
}

.topConcept__content {
    height: 70%;
    margin-left: 150px;
    display: flex;
    align-items: center;
    gap: 80px;
}

.topConcept__contentImage {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    translate: 0 -5%;
}

.topConcept__yakumoImage {
    height: 84%;
}

.topConcept__yakumoName {
    width: fit-content;
    height: 12%;
    margin: 0 auto;
}

.topConcept__contentText {
    width: 800px;
    font-size: 3rem;
}

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

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

.topConcept__contentCopy {
    font-size: 4.4rem;
    font-weight: var(--font-medium);
}


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

/* 共通 */

.topSec {
    padding-right: 300px;
}

.topSecTitle {
    height: 100%;
    translate: -120px 0;
}

.topSecContainer {
    display: flex;
    gap: 150px;
    height: 85%;
}


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

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

.topSecContainer--spot {
    gap: 300px;
}

.spotItem {
    height: 100%;
    display: flex;
    gap: 50px;
    position: relative;
}

.spot__mainContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.spot__titleBox {
    position: absolute;
}

.spot__titleNum {
    position: absolute;
}

.spot__title {
    height: 100%;
}

.spot__mainImage {
    height: 82%;
}

.spot__explanation {
    color: var(--color-White);
    line-height: 1.8;
    position: absolute;
    bottom: 0;
}

.spot__subContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.spot__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 4.4rem;
    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__subImage01 {
    height: 50%;
}

.spot__subContentInner {
    height: 44%;
    display: flex;
    position: relative;
}

.spot__experience {
    width: 42%;
    position: absolute;
    right: 0;
}

.spot__experienceTitle {
    background-color: var(--color-White);
    color: var(--color-Navy);
    font-size: 1.8rem;
    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 {
    height: 48%;
    top: 0;
    left: 0;
}

.spotItem--girigiriido .spot__titleNum {
    height: 38%;
    top: 0;
    left: -40px;
}

.spotItem--girigiriido .spot__copy {
    rotate: -10deg;
    top: -2%;
    left: -22%;
}

.spotItem--girigiriido .spot__experience {
    top: 0;
}

.spot__footprints01 {
    height: 20%;
    right: -15%;
    bottom: 0;
}

/* 塩見縄手 */

.spotItem--shiominawate .spot__titleBox {
    height: 30%;
    top: 6%;
    left: 16%;
}

.spotItem--shiominawate .spot__titleNum {
    height: 61%;
    left: -36%;
    bottom: -30px;
}

.spotItem--shiominawate .spot__copy {
    rotate: 10deg;
    top: -2%;
    right: -8%;
}

.spotItem--shiominawate .spot__experience {
    bottom: 0;
}

.spotItem--shiominawate .spot__subContentDeco {
    height: 35%;
    left: 62%;
    bottom: 26%;
}

.spot__footprints02 {
    height: 16%;
    right: -15%;
    bottom: 28%;
}

/* 月照寺 */

.spotItem--geshoji .spot__titleBox {
    height: 40%;
    top: 2%;
    left: 0;
}

.spotItem--geshoji .spot__titleNum {
    height: 46%;
    right: 0;
}

.spotItem--geshoji .spot__subContentInner {
    flex-direction: row-reverse;
}

.spotItem--geshoji .spot__experience {
    bottom: 0;
    left: 0;
}

.spotItem--geshoji .spot__subContentDeco {
    height: 36%;
    bottom: 22%;
}

.spotItem--geshoji .spot__copy {
    rotate: 10deg;
    top: 0;
    left: -28%;
}

.spot__footprints03 {
    height: 27%;
    right: -19%;
    bottom: 12%;
}

/* 大雄寺 */

.spotItem--daioji .spot__titleBox {
    height: 38%;
    top: 0;
    left: -10%;
}

.spotItem--daioji .spot__titleNum {
    height: 48%;
    left: 18%;
    top: -12%;
}

.spotItem--daioji .spot__subContentInner {
    flex-direction: row-reverse;
}

.spotItem--daioji .spot__experience {
    top: 0;
    left: 0;
}

.spotItem--daioji .spot__subContentDeco {
    height: 18%;
    left: 18%;
    bottom: 0;
}

.spotItem--daioji .spot__copy {
    rotate: 10deg;
    top: 0;
    left: -28%;
}


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

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

.storyteller__intro {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

.storyteller__image {
    height: 70%;
}

.storyteller__titleBox {
    height: 22%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

.storyteller__title {
    width: fit-content;
    height: 42%;
    margin: 0 auto;
}

.storyteller__job li {
    width: fit-content;
    margin: 0.5em auto 0;
    font-size: 2.4rem;
    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__profile {
    width: 600px;
}

.storyteller__profileItem {
    margin-top: 50px;
}

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

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

.storyteller__profileText {
    color: var(--color-White);
    font-weight: var(--font-medium);
}

.storyteller__profileText p {
    line-height: 2;
}


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

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

.guidanceContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.guidance__contentTitle {
    height: 8%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 3.2rem;
    line-height: 1;
    font-weight: var(--font-bold);
    color: var(--color-White);
}

.guidance__daysInner {
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.guidance__daysList {
    height: 73%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

.guidance__daysListItem {
    height: 24%;
    display: flex;
    align-items: flex-end;
    gap: 30px;
}

.guidance__date {
    height: 100%;
}

.guidance__time {
    display: block;
    height: 50%;
}

.guidance__tourTime {
    height: 15%;
    border: 1px solid var(--color-White);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-White);
    text-align: center;
}

.guidance__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.guidanceContent--price {
    height: 45%;
}

.guidanceContent--price .guidance__contentTitle {
    height: 18%;
}

.guidance__priceList {
    height: 68%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.guidance__priceListItem {
    height: 48%;
}

.guidanceContent--people {
    height: 45%;
}

.guidanceContent--people .guidance__contentTitle {
    height: 18%;
}

.guidance__people {
    height: 18%;
}

.guidance__contactButton {
    height: 29%;
}

.guidance__contactButton a {
    display: block;
    height: 100%;
    background-color: var(--color-White);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--color-Green);
    text-align: center;
}

.guidance__note {
    width: 850px;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 2%;
}

.guidance__noteTitle {
    margin-bottom: 0.8em;
    font-size: 4.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::before {
    content: "・";
}

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


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

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

.voice__list {
    width: 1640px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.voice__listItem {
    width: 770px;
    height: 42%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.voice__listTitle {
    width: 100%;
    display: flex;
    justify-content: center;
}

.voice__listTitle img {
    width: 100%;
}

.voice__listText {
    font-size: 1.8rem;
    line-height: 2.2;
    font-weight: var(--font-bold);
    color: var(--color-White);
}


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

.footerContainer {
    background: url(./img/common/footerBg.webp) center left no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 80px;
}

.footerTitle {
    height: 28%;
    margin: 0 auto;
}

.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:last-of-type {
    margin-right: 0;
    padding-right: 0;
    border-right: 0;
}

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

.footer__contactButton {
    width: 70%;
    height: 10%;
}

.footer__contactButton a {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-Navy);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    color: var(--color-Navy);
}