@charset "utf-8";

:root {
    --color-genshi: #55001A;
    --color-chusei: #572e00;
    --color-kinsei: #003f3a;
    --color-kingendai: #374800;
}

.wrapper {
    width: clamp(0px, 100vw, 1000px);
}

ruby rt {
    font-size: 0.4em;
    font-weight: 500;
    translate: 0 0.4em;
}

/* firefox用 */
@-moz-document url-prefix() {
    ruby rt {
        position: relative;
        top: 0.4em;
    }
}

/* 最新のsafari用 */
_::-webkit-full-page-media, _:future, :root .convo ruby rt {
    translate: 0 0.4em;
}

/* 古いsafari用 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    ::i-block-chrome, .convo ruby rt {
        translate: 0 0.4em;
    }
}

/* スクロールバーを表示 */
/* ::-webkit-scrollbar {
    display: block;
    -webkit-appearance: auto;
} */

/*-----------------------------------

	header

-----------------------------------*/
#header {
    width: 100%;
    max-width: 1000px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
}

#header .button_top {
    width: clamp(0px, 10vw, 100px);
    aspect-ratio: 1 / 1;
    background: url("../img/button_top.png") no-repeat center center / contain;
    position: absolute;
    top: 1vw;
    left: 1vw;
}

#header .button_top::before {
    content: "";
    visibility: hidden;
}

#header .button_top::before,
#header .button_top:active {
    background-image: url("../img/button_top_on.png");
}

#header .button_howto {
    width: clamp(0px, 10vw, 100px);
    aspect-ratio: 1 / 1;
    background: url("../img/button_howto.png") no-repeat center center / contain;
    position: absolute;
    top: 1vw;
    right: 1vw;
}

#header .button_howto::before {
    content: "";
    visibility: hidden;
}

#header .button_howto::before,
#header .button_howto:active {
    background-image: url("../img/button_howto_on.png");
}

/*-----------------------------------
	popup
-----------------------------------*/
.howto_popup_overlay,
.howto_popup {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.howto_popup_overlay.active,
.howto_popup.active {
    opacity: 1;
    visibility: visible;
}

.howto_popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(33,33,33,0.2);
    z-index: 999;
}

.howto_popup {
    width: clamp(0px, 93vw, 930px);
    position: fixed;
    top: clamp(0px, 10vw, 100px);
    left: 0;
    right: 0;
    margin: 0 auto;
    line-height: 0;
    z-index: 1000;
}

.howto_popup_close {
    width: clamp(0px, 9.5vw, 95px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: url("../img/monoshiri_spot/howto_close.png") no-repeat center center / contain;
    position: absolute;
    bottom: clamp(-50px, -5vw, 0px);
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1001;
}

.howto_popup_close::before {
    content: "";
    visibility: hidden;
}

.howto_popup_close::before,
.howto_popup_close:active {
    background-image: url("../img/monoshiri_spot/howto_close_on.png");
}

.howto_popup_content {
    width: 100%;
    max-height: calc(100vh - clamp(0px, 20vw, 200px));
    border-radius: clamp(0px, 5vw, 50px);
    border: 2px solid #fff;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/*-----------------------------------

	contents

-----------------------------------*/
#page_title {
    width: 71.2%;
    font-size: clamp(0px, 5.4vw, 54px);
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    position: relative;
    border-bottom: clamp(2px, 0.533vw, 4px) solid var(--color-chusei);
    margin: 0 auto;
    padding: 0 0 0.2em 1em;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#page_title .icon {
    width: clamp(0px, 6.7vw, 67px);
    aspect-ratio: 67 / 90;
    -webkit-mask: url("../img/monoshiri_spot/bg_title_num.svg") no-repeat;
    mask: url("../img/monoshiri_spot/bg_title_num.svg") no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background: var(--color-chusei);
    font-family: var(--font-nb);
    font-size: clamp(0px, 3.4vw, 34px);
    font-weight: 400;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    bottom: clamp(-5px, -0.666vw, -3px);
    left: clamp(-35px, -3.5vw, 0px);
}

#page_title .icon > span {
    display: inline-block;
    line-height: 1;
    margin-bottom: 0.35em;
}

.title_line {
    width: clamp(0px, 100vw, 1000px);
    aspect-ratio: 1000 / 8;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.convo {
    font-size: clamp(0px, 4.1vw, 41px);
    font-weight: 400;
    line-height: 1.13em;
    letter-spacing: 0.05em;
    font-variation-settings: "wdth" 100;
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: clamp(-250px, -25vw, 0px);
}

.convo .item {
    overflow: auto;
    position: absolute;
}

.convo .ill {
    position: absolute;
}

.caption {
    font-size: clamp(0px, 2.1vw, 21px);
    font-weight: 400;
    line-height: 1.3;
}

/*-----------------------------------

	解説

-----------------------------------*/
/*----------------------*/
/*	kaisetsu01
/*----------------------*/
body.kaisetsu01 {
    background : linear-gradient(180deg, #fff 0%, #edee97 100%);
    color: #374800;
    padding-top: clamp(0px, 18vw, 180px);
}

.kaisetsu01 .convo {
    aspect-ratio: 1000 / 2000;
    background: url("../img/monoshiri_spot/bg_kaisetsu_01.png") no-repeat top center / contain;
}

.kaisetsu01 #page_title {
    /* font-size: clamp(0px, 6.4vw, 64px); */
    border-bottom-color: #374800;
    padding-left: 0;
    position: relative;
    padding-left: 2em;
    white-space: nowrap;
}

.kaisetsu01 #page_title::before {
    content: "";
    width: clamp(0px, 8vw, 80px);
    height: auto;
    aspect-ratio: 80 / 70;
    background: url("../img/monoshiri_spot/icon_book.svg") no-repeat center center / contain;
    position: absolute;
    bottom: clamp(-6px, -0.6vw, 0px);
    left: clamp(-37px, -3.7vw, 0px);
}

.kaisetsu01 .convo .item1 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 16vw, 160px);
    top: 22.8%;
    left: 35%;
}

.kaisetsu01 .convo .item2 {
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 24vw, 240px);
    top: 38.2%;
    left: 20%;
}

.kaisetsu01 .convo .item3 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 56vw, 560px);
    top: 62.6%;
    left: 18%;
}

/*----------------------*/
/*	kaisetsu02
/*----------------------*/
body.kaisetsu02 {
    background : linear-gradient(180deg, #fff 0%, #bedfc2 100%);
    padding-top: clamp(0px, 18vw, 180px);
    color: #003f3a;
}

.kaisetsu02 .convo {
    aspect-ratio: 1000 / 2400;
    background: url("../img/monoshiri_spot/bg_kaisetsu_02.png") no-repeat top center / contain;
}

.kaisetsu02 #page_title .icon {
    background: #003f3a;
}

.kaisetsu02 #page_title {
    font-size: clamp(0px, 6.4vw, 64px);
    border-bottom-color: #003f3a;
}

.kaisetsu02 .convo .item1 {
    width: clamp(0px, 41vw, 410px);
    height: clamp(0px, 9vw, 90px);
    top: 19%;
    left: 36%;
}

.kaisetsu02 .convo .item2 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 9vw, 90px);
    top: 32%;
    left: 28%;
}

.kaisetsu02 .convo .item3 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 25vw, 250px);
    top: 43%;
    left: 36%;
}

.kaisetsu02 .convo .item4 {
    width: clamp(0px, 63vw, 630px);
    height: clamp(0px, 42vw, 420px);
    top: 60%;
    left: 17%;
}

.kaisetsu02 .convo .item5 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 17vw, 170px);
    top: 85%;
    left: 36%;
}

/*-----------------------------------

	原始・古代

-----------------------------------*/
body.genshi {
    background : linear-gradient(180deg, #fff 0%, #f6cdc0 100%);
    color: var(--color-genshi);
    padding-top: clamp(0px, 18vw, 180px);
}

.genshi #page_title .icon {
    background: var(--color-genshi);
}

.genshi #page_title {
    border-bottom-color:var(--color-genshi);
}

/*----------------------*/
/*	page01
/*----------------------*/
.page01 .convo {
    aspect-ratio: 750 / 3000;
    background: url("../img/monoshiri_spot/bg_01.png") no-repeat top center / contain;
}

.page01 .convo .item1 {
    width: clamp(0px, 58vw, 580px);
    height: clamp(0px, 21vw, 210px);
    top: 10.4%;
    left: 18%;
}

.page01 .convo .item2 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 11vw, 110px);
    top: 19.5%;
    left: 33%;
}

.page01 .convo .item3 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 21vw, 210px);
    top: 26.8%;
    left: 28.5%;
}

.page01 .convo .item4 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 21vw, 210px);
    top: 35.5%;
    left: 31%;
}

.page01 .convo .item5 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 37vw, 370px);
    top: 45%;
    left: 22%;
}

.page01 .convo .item6 {
    width: clamp(0px, 58vw, 580px);
    height: clamp(0px, 22vw, 220px);
    top: 63.1%;
    left: 28.5%;
}

.page01 .convo .item7 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 18vw, 180px);
    top: 81.8%;
    left: 36%;
}

.page01 .convo .item8 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 33vw, 330px);
    top: 88.4%;
    left: 19%;
}

.page01 .ill.ill1 {
    width: clamp(0px, 79vw, 790px);
    position: absolute;
    top: 53.8%;
    left: 12.8%;
    display: flex;
    align-items: flex-end;
    gap: clamp(0px, 0.8vw, 8px);
}
.page01 .ill.ill1 .img {
    width: clamp(0px, 53.9vw, 539px);
}
.page01 .ill.ill1 .caption {
    flex: 1;
    margin-bottom: clamp(0px, 12.5vw, 125px);
}

.page01 .ill.ill2 {
    width: clamp(0px, 55vw, 550px);
    position: absolute;
    top: 68.5%;
    left: 30.8%;
    display: flex;
    align-items: flex-end;
}
.page01 .ill.ill2 .img {
    width: clamp(0px, 39.4vw, 394px);
}
.page01 .ill.ill2 .caption {
    flex: 1;
    margin-bottom: clamp(0px, 17vw, 170px);
}

/*----------------------*/
/*	page02
/*----------------------*/
.page02 .convo {
    aspect-ratio: 750 / 2700;
    background: url("../img/monoshiri_spot/bg_02.png") no-repeat top center / contain;
}

.page02 .convo .item1 {
    width: clamp(0px, 49vw, 490px);
    height: clamp(0px, 17vw, 170px);
    top: 10.8%;
    left: 25.5%;
}

.page02 .convo .item2 {
    width: clamp(0px, 38vw, 380px);
    height: clamp(0px, 23vw, 230px);
    top: 28%;
    left: 34%;
}

.page02 .convo .item3 {
    width: clamp(0px, 41vw, 410px);
    height: clamp(0px, 23vw, 230px);
    top: 38%;
    left: 35.6%;
}

.page02 .convo .item4 {
    width: clamp(0px, 40vw, 400px);
    height: clamp(0px, 8vw, 80px);
    top: 48.5%;
    left: 34%;
}

.page02 .convo .item5 {
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 53vw, 530px);
    top: 55%;
    left: 20.5%;
}

.page02 .convo .item6 {
    width: clamp(0px, 39vw, 390px);
    height: clamp(0px, 16vw, 160px);
    top: 73.4%;
    left: 32%;
}

.page02 .convo .item7 {
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 30vw, 300px);
    top: 80%;
    left: 18%;
}

.page02 .convo .item8 {
    width: clamp(0px, 60vw, 600px);
    height: clamp(0px, 13vw, 130px);
    top: 92.5%;
    left: 26%;
}

.page02 .ill.ill1 {
    width: clamp(0px, 47vw, 470px);
    position: absolute;
    top: 15%;
    left: 24.8%;
}
.page02 .ill.ill1 .img {
    width: clamp(0px, 42vw, 420px);
}
.page02 .ill.ill1 .caption {
    margin-top: 0.5em;
    letter-spacing: 0.05em;
}

/*----------------------*/
/*	page03
/*----------------------*/
.page03 .convo {
    font-size: clamp(0px, 3.9vw, 39px);
    line-height: 1.3;
    aspect-ratio: 750 / 2500;
    background: url("../img/monoshiri_spot/bg_03.png") no-repeat top center / contain;
}

.page03 .convo .item4 {
    font-size: 0.93em;
}

.page03 .convo .item1 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 17vw, 170px);
    top: 12.5%;
    left: 32%;
}

.page03 .convo .item2 {
    width: clamp(0px, 62vw, 620px);
    height: clamp(0px, 41vw, 410px);
    top: 20.2%;
    left: 17%;
}

.page03 .convo .item3 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 18vw, 180px);
    top: 36.6%;
    left: 33%;
}

.page03 .convo .item4 {
    width: clamp(0px, 61vw, 610px);
    height: clamp(0px, 48vw, 480px);
    top: 53%;
    left: 20%;
}

.page03 .convo .item5 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 12vw, 120px);
    top: 70.5%;
    left: 31%;
}

.page03 .convo .item6 {
    width: clamp(0px, 61vw, 610px);
    height: clamp(0px, 37vw, 370px);
    top: 79%;
    left: 16%;
}

.page03 .convo .item7 {
    width: clamp(0px, 56vw, 560px);
    height: clamp(0px, 16vw, 160px);
    top: 92.4%;
    left: 27%;
}

.page03 .ill.ill1 {
    width: clamp(0px, 64vw, 640px);
    position: absolute;
    top: 42.6%;
    left: 22%;
    display: flex;
    align-items: flex-end;
}
.page03 .ill.ill1 .img {
    width: clamp(0px, 37vw, 370px);
}
.page03 .ill.ill1 .caption {
    flex: 1;
    margin-bottom: clamp(0px, 8vw, 80px);
    letter-spacing: 0.05em;
}

/*----------------------*/
/*	page04
/*----------------------*/
.page04 .convo {
    aspect-ratio: 750 / 2500;
    background: url("../img/monoshiri_spot/bg_04.png") no-repeat top center / contain;
}

.page04 .convo .item2 {
    font-size: 0.9375em;
}

.page04 .convo .item1 {
    width: clamp(0px, 38vw, 380px);
    height: clamp(0px, 19vw, 190px);
    top: 10.6%;
    left: 34%;
}

.page04 .convo .item2 {
    width: clamp(0px, 53vw, 530px);
    height: clamp(0px, 16vw, 160px);
    top: 19%;
    left: 26.5%;
}

.page04 .convo .item3 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 26vw, 260px);
    top: 27.3%;
    left: 33.4%;
}

.page04 .convo .item4 {
    width: clamp(0px, 38vw, 380px);
    height: clamp(0px, 11vw, 110px);
    top: 38.8%;
    left: 33%;
}

.page04 .convo .item5 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 31vw, 310px);
    top: 45.5%;
    left: 31.3%;
}

.page04 .convo .item6 {
    width: clamp(0px, 35vw, 350px);
    height: clamp(0px, 16vw, 160px);
    top: 56.6%;
    left: 38.6%;
}

.page04 .convo .item7 {
    width: clamp(0px, 49.5vw, 495px);
    height: clamp(0px, 43vw, 430px);
    top: 64%;
    left: 26.5%;
}

.page04 .convo .item8 {
    width: clamp(0px, 39vw, 390px);
    height: clamp(0px, 11vw, 110px);
    top: 80%;
    left: 41.5%;
}

.page04 .convo .item9 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 24vw, 240px);
    top: 88.7%;
    left: 24.5%;
}

.page04 .ill.ill1 {
    width: clamp(0px, 17vw, 170px);
    top: 26.3%;
    left: 13.7%;
}
.page04 .ill.ill1 .img {
    width: clamp(0px, 15.8vw, 158px);
    margin: 0 auto;
}
.page04 .ill.ill1 .caption {
    letter-spacing: 0.05em;
}

/*----------------------*/
/*	page05
/*----------------------*/
.page05 .convo {
    aspect-ratio: 750 / 2100;
    background: url("../img/monoshiri_spot/bg_05.png") no-repeat top center / contain;
}

.page05 .convo .item1 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 16vw, 160px);
    top: 14.5%;
    left: 35%;
}

.page05 .convo .item2 {
    width: clamp(0px, 58vw, 580px);
    height: clamp(0px, 60vw, 600px);
    top: 26%;
    left: 20%;
}

.page05 .convo .item3 {
    width: clamp(0px, 47vw, 470px);
    height: clamp(0px, 16vw, 160px);
    top: 54.5%;
    left: 30%;
}

.page05 .convo .item4 {
    width: clamp(0px, 28vw, 280px);
    height: clamp(0px, 8vw, 80px);
    top: 65%;
    left: 39%;
}

.page05 .convo .item5 {
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 49vw, 490px);
    top: 76%;
    left: 19.5%;
}

/*----------------------*/
/*	page06
/*----------------------*/
.page06 .convo {
    aspect-ratio: 750 / 1800;
    background: url("../img/monoshiri_spot/bg_06.png") no-repeat top center / contain;
}

.page06 #page_title {
    padding-left: 0.82em;
}

.page06 #page_title .title {
    margin-right: -1em;
}

.page06 .convo .item1 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 36vw, 360px);
    top: 15%;
    left: 24%;
}

.page06 .convo .item2 {
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 40vw, 400px);
    top: 35.4%;
    left: 19%;
}

.page06 .convo .item3 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 16vw, 160px);
    top: 59%;
    left: 30%;
}

.page06 .convo .item4 {
    width: clamp(0px, 59vw, 590px);
    height: clamp(0px, 38vw, 380px);
    top: 75%;
    left: 18.6%;
}

/*----------------------*/
/*	page07
/*----------------------*/
.page07 .convo {
    aspect-ratio: 750 / 2000;
    background: url("../img/monoshiri_spot/bg_07.png") no-repeat top center / contain;
}

.page07 #page_title {
    font-size: clamp(0px, 4.7vw, 47px);
}

.page07 .convo .item1 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 24vw, 240px);
    top: 15%;
    left: 34.7%;
}

.page07 .convo .item2 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 21vw, 210px);
    top: 28%;
    left: 33%;
}

.page07 .convo .item3 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 62vw, 620px);
    top: 42.3%;
    left: 20%;
}

.page07 .convo .item4 {
    width: clamp(0px, 42vw, 420px);
    height: clamp(0px, 18vw, 180px);
    top: 71%;
    left: 31.4%;
}

.page07 .convo .item5 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 30vw, 300px);
    top: 82%;
    left: 24%;
}

/*----------------------*/
/*	page08
/*----------------------*/
.page08 .convo {
    aspect-ratio: 750 / 2400;
    background: url("../img/monoshiri_spot/bg_08.png") no-repeat top center / contain;
}

.page08 .convo .item1 {
    width: clamp(0px, 41vw, 410px);
    height: clamp(0px, 26vw, 260px);
    top: 11.2%;
    left: 27.8%;
}

.page08 .convo .item2 {
    width: clamp(0px, 37vw, 370px);
    height: clamp(0px, 21vw, 210px);
    top: 22.4%;
    left: 35.5%;
}

.page08 .convo .item3 {
    line-height: 1.125;
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 60vw, 600px);
    top: 33.5%;
    left: 22%;
}

.page08 .convo .item4 {
    width: clamp(0px, 41vw, 410px);
    height: clamp(0px, 15vw, 150px);
    top: 56%;
    left: 34.4%;
}

.page08 .convo .item5 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 79vw, 790px);
    top: 68%;
    left: 21.2%;
}

/*-----------------------------------

	中世

-----------------------------------*/
body.chusei {
    background : linear-gradient(180deg, #fff 0%, #f6daa2 100%);
    color: var(--color-chusei);
    padding-top: clamp(0px, 18vw, 180px);
}

.chusei #page_title .icon {
    background: var(--color-chusei);
}

.chusei #page_title {
    border-bottom-color:var(--color-chusei);
}

/*----------------------*/
/*	page09
/*----------------------*/
.page09 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_09.png") no-repeat top center / contain;
}

.page09 .convo .item3 {
    font-size: 0.875em;
}

.page09 .convo .item1 {
    width: clamp(0px, 31vw, 310px);
    height: clamp(0px, 20vw, 200px);
    top: 20%;
    left: 28%;
}

.page09 .convo .item2 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 26vw, 260px);
    top: 37.2%;
    left: 26%;
}

.page09 .convo .item3 {
    width: clamp(0px, 49vw, 490px);
    height: clamp(0px, 65vw, 650px);
    top: 55.5%;
    left: 23%;
}

/*----------------------*/
/*	page10
/*----------------------*/
.page10 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_10.png") no-repeat top center / contain;
}

.page10 .convo .item1 {
    width: clamp(0px, 39vw, 390px);
    height: clamp(0px, 16vw, 160px);
    top: 21.5%;
    left: 28.1%;
}

.page10 .convo .item2 {
    width: clamp(0px, 34vw, 340px);
    height: clamp(0px, 24vw, 240px);
    top: 35%;
    left: 29.5%;
}

.page10 .convo .item3 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 75vw, 750px);
    top: 52.4%;
    left: 25%;
}

/*----------------------*/
/*	page11
/*----------------------*/
.page11 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_11.png") no-repeat top center / contain;
}

.page11 .convo .item1 {
    width: clamp(0px, 40vw, 400px);
    height: clamp(0px, 28vw, 280px);
    top: 20%;
    left: 29%;
}

.page11 .convo .item2 {
    width: clamp(0px, 36vw, 360px);
    height: clamp(0px, 18vw, 180px);
    top: 39%;
    left: 30%;
}

.page11 .convo .item3 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 60vw, 600px);
    top: 55%;
    left: 25%;
}

/*----------------------*/
/*	page12
/*----------------------*/
.page12 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_12.png") no-repeat top center / contain;
}

.page12 .convo .item1 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 16vw, 160px);
    top: 21.5%;
    left: 33%;
}

.page12 .convo .item2 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 20vw, 200px);
    top: 38%;
    left: 32.2%;
}

.page12 .convo .item3 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 65vw, 650px);
    top: 57%;
    left: 27%;
}

/*----------------------*/
/*	page13
/*----------------------*/

.page13 .convo {
    aspect-ratio: 750 / 1300;
    background: url("../img/monoshiri_spot/bg_13.png") no-repeat top center / contain;
}

.page13 #page_title {
    font-size: clamp(0px, 4.7vw, 47px);
}

.page13 .convo .item1 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 24vw, 240px);
    top: 23.5%;
    left: 25.5%;
}

.page13 .convo .item2 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 54vw, 540px);
    top: 45%;
    left: 21%;
}

.page13 .convo .item3 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 16vw, 160px);
    top: 83.5%;
    left: 27.2%;
}

/*----------------------*/
/*	page14
/*----------------------*/
.page14 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_14.png") no-repeat top center / contain;
}

.page14 .convo .item1 {
    width: clamp(0px, 37vw, 370px);
    height: clamp(0px, 24vw, 240px);
    top: 20.5%;
    left: 23.5%;
}

.page14 .convo .item2 {
    width: clamp(0px, 42vw, 420px);
    height: clamp(0px, 11vw, 110px);
    top: 37.5%;
    left: 26.8%;
}

.page14 .convo .item3 {
    width: clamp(0px, 49vw, 490px);
    height: clamp(0px, 65vw, 650px);
    top: 54.5%;
    left: 24%;
}

/*----------------------*/
/*	page15
/*----------------------*/
.page15 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_15.png") no-repeat top center / contain;
}

.page15 .convo .item1 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 21vw, 210px);
    top: 26%;
    left: 25.5%;
}

.page15 .convo .item2 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 68vw, 680px);
    top: 48.5%;
    left: 27.5%;
}

/*----------------------*/
/*	page16
/*----------------------*/
.page16 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_16.png") no-repeat top center / contain;
}

.page16 .convo .item1 {
    width: clamp(0px, 42vw, 420px);
    height: clamp(0px, 24vw, 240px);
    top: 26%;
    left: 30%;
}

.page16 .convo .item2 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 31vw, 310px);
    top: 51.5%;
    left: 18.5%;
}

/*----------------------*/
/*	page17
/*----------------------*/
.page17 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_17.png") no-repeat top center / contain;
}

.page17 .convo .item1 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 30vw, 300px);
    top: 24.5%;
    left: 28%;
}

.page17 .convo .item2 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 54vw, 540px);
    top: 48.5%;
    left: 22.6%;
}

/*----------------------*/
/*	page18
/*----------------------*/
.page18 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_18.png") no-repeat top center / contain;
}

.page18 #page_title .title {
    font-size: clamp(0px, 4.7vw, 47px);
    margin-right: -2em;
    margin-left: -1em;
    line-height: 1.3;
}

.page18 .convo .item1 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 25vw, 250px);
    top: 25.8%;
    left: 27%;
}

.page18 .convo .item2 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 63vw, 630px);
    top: 50.2%;
    left: 22.6%;
}

/*----------------------*/
/*	page19
/*----------------------*/
.page19 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_19.png") no-repeat top center / contain;
}

.page19 .convo .item1 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 16vw, 160px);
    top: 28.5%;
    left: 25.7%;
}

.page19 .convo .item2 {
    width: clamp(0px, 51vw, 510px);
    height: clamp(0px, 55vw, 550px);
    top: 53%;
    left: 18.2%;
}

/*----------------------*/
/*	page20
/*----------------------*/
.page20 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_20.png") no-repeat top center / contain;
}

.page20 .convo .item1 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 16vw, 160px);
    top: 28%;
    left: 28.4%;
}

.page20 .convo .item2 {
    width: clamp(0px, 49vw, 490px);
    height: clamp(0px, 59vw, 590px);
    top: 51%;
    left: 21%;
}

/*----------------------*/
/*	page21
/*----------------------*/
.page21 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_21.png") no-repeat top center / contain;
}

.page21 #page_title {
    padding-left: 0.75em;
}

.page21 .convo .item1 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 16vw, 160px);
    top: 29%;
    left: 28.4%;
}

.page21 .convo .item2 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 67vw, 670px);
    top: 51%;
    left: 20%;
}

/*----------------------*/
/*	page22
/*----------------------*/
.page22 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_22.png") no-repeat top center / contain;
}

.page22 #page_title {
    font-size: clamp(0px, 4.7vw, 47px);
}

.page22 .convo .item1 {
    width: clamp(0px, 37vw, 370px);
    height: clamp(0px, 21vw, 210px);
    top: 27%;
    left: 29%;
}

.page22 .convo .item2 {
    width: clamp(0px, 49vw, 490px);
    height: clamp(0px, 62vw, 620px);
    top: 50.5%;
    left: 21%;
}

/*----------------------*/
/*	page23
/*----------------------*/
.page23 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_23.png") no-repeat top center / contain;
}

.page23 .convo .item1 {
    width: clamp(0px, 40vw, 400px);
    height: clamp(0px, 16vw, 160px);
    top: 27.5%;
    left: 28%;
}

.page23 .convo .item2 {
    width: clamp(0px, 59vw, 590px);
    height: clamp(0px, 44vw, 440px);
    top: 51%;
    left: 16.7%;
}

/*----------------------*/
/*	page24
/*----------------------*/
.page24 .convo {
    aspect-ratio: 750 / 1200;
    background: url("../img/monoshiri_spot/bg_24.png") no-repeat top center / contain;
}

.page24 .convo .item1 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 16vw, 160px);
    top: 29%;
    left: 33%;
}

.page24 .convo .item2 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 67vw, 670px);
    top: 48%;
    left: 24%;
}

/*-----------------------------------

	近世

-----------------------------------*/
body.kinsei {
    background : linear-gradient(180deg, #fff 0%, #bddec1 100%);
    color: var(--color-kinsei);
    padding-top: clamp(0px, 18vw, 180px);
}

.kinsei #page_title .icon {
    background: var(--color-kinsei);
}

.kinsei #page_title {
    border-bottom-color:var(--color-kinsei);
    white-space: nowrap;
}

/*----------------------*/
/*	page25
/*----------------------*/
.page25 .convo {
    aspect-ratio: 750 / 2000;
    background: url("../img/monoshiri_spot/bg_25.png") no-repeat top center / contain;
}

.page25 .convo .item1 {
    width: clamp(0px, 37vw, 370px);
    height: clamp(0px, 12vw, 120px);
    top: 17%;
    left: 34%;
}

.page25 .convo .item2 {
    width: clamp(0px, 37vw, 370px);
    height: clamp(0px, 12vw, 120px);
    top: 28%;
    left: 34%;
}

.page25 .convo .item3 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 30vw, 300px);
    top: 37%;
    left: 30%;
}

.page25 .convo .item4 {
    width: clamp(0px, 59vw, 590px);
    height: clamp(0px, 28vw, 280px);
    top: 55.5%;
    left: 21%;
}

.page25 .convo .item5 {
    width: clamp(0px, 47vw, 470px);
    height: clamp(0px, 16vw, 160px);
    top: 87.5%;
    left: 36%;
}

.page25 .ill.ill1 {
    width: clamp(0px, 30.5vw, 305px);
    position: absolute;
    top: 67.8%;
    left: 33.5%;
}
.page25 .ill.ill1 .caption {
    text-align: center;
    white-space: nowrap;
    margin-top: 0.5em;
    letter-spacing: 0.03em;
}

/*----------------------*/
/*	page26
/*----------------------*/
.page26 .convo {
    aspect-ratio: 750 / 1800;
    background: url("../img/monoshiri_spot/bg_26.png") no-repeat top center / contain;
}

.page26 .convo .item1 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 15vw, 150px);
    top: 17%;
    left: 30%;
}

.page26 .convo .item2 {
    width: clamp(0px, 43vw, 430px);
    height: clamp(0px, 16vw, 160px);
    top: 44%;
    left: 25%;
}

.page26 .convo .item3 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 12vw, 120px);
    top: 59%;
    left: 35.5%;
}

.page26 .convo .item4 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 15vw, 150px);
    top: 72%;
    left: 20%;
}

.page26 .ill.ill1 {
    width: clamp(0px, 43.5vw, 435px);
    position: absolute;
    top: 23.5%;
    left: 30%;
}
.page26 .ill.ill1 .caption {
    letter-spacing: 0.02em;
    text-align: center;
    white-space: nowrap;
}

.page26 .ill.ill2 {
    width: clamp(0px, 44.5vw, 445px);
    position: absolute;
    top: 78.5%;
    left: 23.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page26 .ill.ill2 .caption {
    text-align: left;
    letter-spacing: 0.02em;
    margin-top: 0.1em;
}

/*----------------------*/
/*	page27
/*----------------------*/
.page27 .convo {
    aspect-ratio: 750 / 2200;
    background: url("../img/monoshiri_spot/bg_27.png") no-repeat top center / contain;
}

.page27 #page_title {
    font-size: clamp(0px, 4.9vw, 49px);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.page27 .convo .item1 {
    width: clamp(0px, 40vw, 400px);
    height: clamp(0px, 12vw, 120px);
    top: 14.5%;
    left: 34%;
}

.page27 .convo .item2 {
    width: clamp(0px, 48vw, 480px);
    height: clamp(0px, 35vw, 350px);
    top: 30%;
    left: 24%;
}

.page27 .convo .item3 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 12vw, 120px);
    top: 60%;
    left: 34%;
}

.page27 .convo .item4 {
    width: clamp(0px, 53vw, 530px);
    height: clamp(0px, 30vw, 300px);
    top: 71%;
    left: 18.5%;
}

.page27 .convo .item5 {
    width: clamp(0px, 60vw, 600px);
    height: clamp(0px, 8vw, 80px);
    top: 91%;
    left: 25%;
}

.page27 .ill.ill1 {
    width: clamp(0px, 57vw, 570px);
    position: absolute;
    top: 20%;
    left: 27%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page27 .ill.ill1 .caption {
    text-align: left;
    letter-spacing: 0.02em;
    margin-top: 0.2em;
}

.page27 .ill.ill2 {
    position: absolute;
    top: 42.5%;
    left: 36.5%;
    display: flex;
    align-items: center;
    gap: 0 0.5em;
}
.page27 .ill.ill2 .img {
    width: clamp(0px, 24vw, 240px);
}
.page27 .ill.ill2 .caption {
    line-height: 1.3em;
    letter-spacing: 0.02em;
}

/*----------------------*/
/*	page28
/*----------------------*/
.page28 .convo {
    aspect-ratio: 750 / 1700;
    background: url("../img/monoshiri_spot/bg_28.png") no-repeat top center / contain;
}

.page28 .convo .item1 {
    width: clamp(0px, 37vw, 370px);
    height: clamp(0px, 21vw, 210px);
    top: 18%;
    left: 32.5%;
}

.page28 .convo .item2 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 30vw, 300px);
    top: 33%;
    left: 18.5%;
}

.page28 .convo .item3 {
    width: clamp(0px, 30vw, 300px);
    height: clamp(0px, 39vw, 390px);
    top: 52.5%;
    left: 28.5%;
}

.page28 .convo .item4 {
    width: clamp(0px, 56vw, 560px);
    height: clamp(0px, 39vw, 390px);
    top: 77.2%;
    left: 20%;
}

.page28 .ill.ill1 {
    width: clamp(0px, 26.5vw, 265px);
    position: absolute;
    top: 48.5%;
    left: 58.5%;
}
.page28 .ill.ill1 .caption {
    text-align: right;
}

/*----------------------*/
/*	page29
/*----------------------*/
.page29 .convo {
    aspect-ratio: 750 / 1700;
    background: url("../img/monoshiri_spot/bg_29.png") no-repeat top center / contain;
}

.page29 .convo .item1 {
    width: clamp(0px, 49vw, 490px);
    height: clamp(0px, 16vw, 160px);
    top: 34.3%;
    left: 27%;
}

.page29 .convo .item2 {
    width: clamp(0px, 40vw, 400px);
    height: clamp(0px, 16vw, 160px);
    top: 46.5%;
    left: 29%;
}

.page29 .convo .item3 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 44vw, 440px);
    top: 62%;
    left: 18%;
}

.page29 .convo .item4 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 16vw, 160px);
    top: 87%;
    left: 29%;
}

.page29 .ill.ill1 {
    position: absolute;
    top: 17.5%;
    left: 27%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page29 .ill.ill1 .img {
    width: clamp(0px, 43vw, 430px);
}
.page29 .ill.ill1 .caption {
    text-align: left;
    margin-top: 0.2em;
    letter-spacing: 0.02em;
}

/*----------------------*/
/*	page30
/*----------------------*/
.page30 .convo {
    aspect-ratio: 750 / 2500;
    background: url("../img/monoshiri_spot/bg_30.png") no-repeat top center / contain;
}

.page30 #page_title {
    font-size: clamp(0px, 4.9vw, 49px);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.page30 .convo .item1 {
    width: clamp(0px, 60vw, 600px);
    height: clamp(0px, 25vw, 250px);
    top: 21%;
    left: 23.5%;
}

.page30 .convo .item2 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 12vw, 120px);
    top: 41.5%;
    left: 24%;
}

.page30 .convo .item3 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 45vw, 450px);
    top: 49%;
    left: 21%;
}

.page30 .convo .item4 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 16vw, 160px);
    top: 69%;
    left: 26.5%;
}

.page30 .convo .item5 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 30vw, 300px);
    top: 78.5%;
    left: 26.5%;
}

.page30 .convo .item6 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 16vw, 160px);
    top: 91%;
    left: 32%;
}

.page30 .ill.ill1 {
    width: clamp(0px, 53vw, 530px);
    position: absolute;
    top: 10.8%;
    left: 22.5%;
}
.page30 .ill.ill1 .caption {
    text-align: right;
    padding-right: 1em;
}

.page30 .ill.ill2 {
    width: clamp(0px, 52.5vw, 525px);
    position: absolute;
    top: 29.3%;
    left: 24.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page30 .ill.ill2 .caption {
    text-align: left;
    letter-spacing: 0.02em;
}

/*----------------------*/
/*	page31
/*----------------------*/
.page31 .convo {
    aspect-ratio: 750 / 1700;
    background: url("../img/monoshiri_spot/bg_31.png") no-repeat top center / contain;
}

.page31 #page_title {
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.page31 .convo .item1 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 16vw, 160px);
    top: 19.5%;
    left: 32.5%;
}

.page31 .convo .item2 {
    font-size: clamp(0px, 3.7vw, 37px);
    width: clamp(0px, 61vw, 610px);
    height: clamp(0px, 28vw, 280px);
    top: 33%;
    left: 18%;
}

.page31 .convo .item3 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 12vw, 120px);
    top: 57.5%;
    left: 30.7%;
}

.page31 .convo .item4 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 20vw, 200px);
    top: 78%;
    left: 19%;
}

.page31 .ill.ill1 {
    position: absolute;
    top: 45.5%;
    left: 17.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page31 .ill.ill1 .img {
    width: clamp(0px, 63vw, 630px);
}
.page31 .ill.ill1 .caption {
    text-align: left;
    margin-top: 0.2em;
    letter-spacing: 0;
}

.page31 .ill.ill2 {
    width: clamp(0px, 76vw, 760px);
    position: absolute;
    top: 70.2%;
    left: 12.5%;
}
.page31 .ill.ill2 .caption {
    text-align: right;
}

/*----------------------*/
/*	page32
/*----------------------*/
.page32 .convo {
    aspect-ratio: 750 / 1700;
    background: url("../img/monoshiri_spot/bg_32.png") no-repeat top center / contain;
}

.page32 .convo .item1 {
    font-size: clamp(0px, 3.7vw, 37px);
    width: clamp(0px, 70vw, 700px);
    height: clamp(0px, 24vw, 240px);
    top: 21%;
    left: 15%;
}

.page32 .convo .item2 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 16vw, 160px);
    top: 45%;
    left: 24%;
}

.page32 .convo .item3 {
    width: clamp(0px, 33vw, 330px);
    height: clamp(0px, 34vw, 340px);
    top: 56.5%;
    left: 25%;
}

.page32 .convo .item4 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 21vw, 210px);
    top: 78.5%;
    left: 18%;
}

.page32 .ill.ill1 {
    width: clamp(0px, 33.5vw, 335px);
    position: absolute;
    top: 35%;
    left: 9.5%;
}
.page32 .ill.ill1 .caption {
    text-align: right;
    margin: 0.2em 0.5em 0 0;
}

.page32 .ill.ill2 {
    width: clamp(0px, 25.5vw, 255px);
    position: absolute;
    top: 32%;
    left: 45%;
}
.page32 .ill.ill2 .caption {
    text-align: right;
    margin-top: 0.2em;
}

.page32 .ill.ill3 {
    position: absolute;
    top: 56%;
    left: 61%;
}
.page32 .ill.ill3 .img {
    width: clamp(0px, 24vw, 240px);
}
.page32 .ill.ill3 .caption {
    text-align: left;
    letter-spacing: 0.05em;
    margin-top: 0.2em;
}


/*-----------------------------------

	近現代

-----------------------------------*/
body.kingendai {
    background : linear-gradient(180deg, #fff 0%, #edee97 100%);
    color: var(--color-kingendai);
    padding-top: clamp(0px, 18vw, 180px);
}

.kingendai #page_title .icon {
    background: var(--color-kingendai);
}

.kingendai #page_title {
    border-bottom-color:var(--color-kingendai);
}

/*----------------------*/
/*	page33
/*----------------------*/
.page33 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_33.png") no-repeat top center / contain;
}

.page33 .convo .item1 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 28vw, 280px);
    top: 19%;
    left: 25%;
}

.page33 .convo .item2 {
    width: clamp(0px, 46vw, 460px);
    height: clamp(0px, 52vw, 520px);
    top: 38.5%;
    left: 27%;
}

.page33 .convo .item3 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 38vw, 380px);
    top: 69%;
    left: 27.5%;
}

/*----------------------*/
/*	page34
/*----------------------*/
.page34 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_34.png") no-repeat top center / contain;
}

.page34 .convo .item1 {
    width: clamp(0px, 47vw, 470px);
    height: clamp(0px, 29vw, 290px);
    top: 20.8%;
    left: 29%;
}

.page34 .convo .item2 {
    width: clamp(0px, 40vw, 400px);
    height: clamp(0px, 16vw, 160px);
    top: 41.5%;
    left: 29%;
}

.page34 .convo .item3 {
    font-size: clamp(0px, 3.9vw, 39px);
    line-height: 1.2em;
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 54vw, 540px);
    top: 57.5%;
    left: 19.5%;
}

.page34 .ill.ill1 {
    position: absolute;
    top: 82.5%;
    left: 22.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page34 .ill.ill1 .img {
    width: clamp(0px, 24vw, 240px);
}
.page34 .ill.ill1 .caption {
    text-align: left;
    margin-left: 3em;
}

.page34 .ill.ill2 {
    position: absolute;
    top: 82.5%;
    left: 51.5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.page34 .ill.ill2 .img {
    width: clamp(0px, 24vw, 240px);
}
.page34 .ill.ill2 .caption {
    text-align: left;
}

/*----------------------*/
/*	page35
/*----------------------*/
.page35 .convo {
    aspect-ratio: 750 / 1400;
    background: url("../img/monoshiri_spot/bg_35.png") no-repeat top center / contain;
}

.page35 .convo .item1 {
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 44vw, 440px);
    top: 24.5%;
    left: 19%;
}

.page35 .convo .item2 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 30vw, 300px);
    top: 53.5%;
    left: 25%;
}

.page35 .convo .item3 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 30vw, 300px);
    top: 74%;
    left: 28%;
}

/*----------------------*/
/*	page36
/*----------------------*/
.page36 .convo {
    aspect-ratio: 750 / 1500;
    background: url("../img/monoshiri_spot/bg_36.png") no-repeat top center / contain;
}

.page36 .convo .item1 {
    width: clamp(0px, 40vw, 400px);
    height: clamp(0px, 14vw, 140px);
    top: 22%;
    left: 28%;
}

.page36 .convo .item2 {
    font-size: clamp(0px, 3.6vw, 36px);
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 59vw, 590px);
    top: 37%;
    left: 24%;
}

.page36 .convo .item3 {
    width: clamp(0px, 63vw, 630px);
    height: clamp(0px, 41vw, 410px);
    top: 71.5%;
    left: 20.6%;
}

/*----------------------*/
/*	page37
/*----------------------*/
.page37 .convo {
    aspect-ratio: 750 / 1600;
    background: url("../img/monoshiri_spot/bg_37.png") no-repeat top center / contain;
}

.page37 #page_title {
    font-size: clamp(0px, 5.3vw, 53px);
    letter-spacing: 0;
    white-space: nowrap;
}

.page37 .convo .item1 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 26vw, 260px);
    top: 20%;
    left: 33%;
}

.page37 .convo .item2 {
    width: clamp(0px, 47vw, 470px);
    height: clamp(0px, 16vw, 160px);
    top: 37.5%;
    left: 29%;
}
.page37 .convo .item3 {
    width: clamp(0px, 52vw, 520px);
    height: clamp(0px, 75vw, 750px);
    top: 54.5%;
    left: 23.5%;
}

/*----------------------*/
/*	page38
/*----------------------*/
.page38 .convo {
    aspect-ratio: 750 / 1400;
    background: url("../img/monoshiri_spot/bg_38.png") no-repeat top center / contain;
}

.page38 #page_title {
    font-size: clamp(0px, 5.3vw, 53px);
    letter-spacing: 0;
    white-space: nowrap;
}

.page38 .convo .item1 {
    width: clamp(0px, 44vw, 440px);
    height: clamp(0px, 16vw, 160px);
    top: 23%;
    left: 28.8%;
}

.page38 .convo .item2 {
    width: clamp(0px, 57vw, 570px);
    height: clamp(0px, 50vw, 500px);
    top: 41.5%;
    left: 24%;
}

.page38 .convo .item3 {
    width: clamp(0px, 50vw, 500px);
    height: clamp(0px, 30vw, 300px);
    top: 77%;
    left: 28.4%;
}

/*----------------------*/
/*	page39
/*----------------------*/
.page39 .convo {
    aspect-ratio: 750 / 1400;
    background: url("../img/monoshiri_spot/bg_39.png") no-repeat top center / contain;
}

.page39 .convo .item1 {
    width: clamp(0px, 42vw, 420px);
    height: clamp(0px, 16vw, 160px);
    top: 23.5%;
    left: 35%;
}

.page39 .convo .item2 {
    width: clamp(0px, 45vw, 450px);
    height: clamp(0px, 50vw, 500px);
    top: 40%;
    left: 26%;
}

.page39 .convo .item3 {
    width: clamp(0px, 54vw, 540px);
    height: clamp(0px, 32vw, 320px);
    top: 75%;
    left: 28%;
}

/*----------------------*/
/*	page40
/*----------------------*/
.page40 .convo {
    aspect-ratio: 750 / 1400;
    background: url("../img/monoshiri_spot/bg_40.png") no-repeat top center / contain;
}

.page40 #page_title {
    letter-spacing: 0;
    white-space: nowrap;
}

.page40 .convo .item1 {
    width: clamp(0px, 55vw, 550px);
    height: clamp(0px, 20vw, 200px);
    top: 22.5%;
    left: 32.8%;
}

.page40 .convo .item2 {
    width: clamp(0px, 59vw, 590px);
    height: clamp(0px, 66vw, 660px);
    top: 41%;
    left: 20%;
}

.page40 .convo .item3 {
    width: clamp(0px, 60vw, 600px);
    height: clamp(0px, 20vw, 200px);
    top: 82.5%;
    left: 27%;
}