@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
/*  --balloonColor: #633c1f;*/
  --textColor_bold: #333;
/*  --navColor: #FFF;*/
/*    --fontfamily: 'Noto Sans JP';*/
  --font-round:"M PLUS Rounded 1c", sans-serif;
    --fontfamily: "M PLUS Rounded 1c", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
  font-family: var(--font-round), "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  color: hsl(26, 54%, 25%);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  font-optical-sizing: auto;
  letter-spacing: normal;
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.fukidashiInner {
    position: relative;
/*    padding: 2vw;*/
    padding: 1vw 2vw 0;
}
.fukidashi02 .fukidashiInner {
    padding-bottom: 0;
}
#scene04 .fukidashiInner {
    padding: 2vw 0vw 0;
}
.flex__fukidashi {
    display: flex;
    justify-content: center;
    align-items: center;
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
    padding: 0 0 10px;
    color: var(--textColor_bold, #2d190f);
    font-family: var(--fontfamily);
}
.fukidashi03 .flex__fukidashi,
.fukidashi03 .fukidashiInner {
    padding-bottom: 0;
}

.flex__fukidashi_01 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fukidashi {
    background-image: url(../img/top/fukidashi_00.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-direction: column;
    padding: 3vw 0vw 3vw;
}
.fukidashi.fukidashi01 {
    background-image: url(../img/top/fukidashi_00.png);
}
.fukidashi.fukidashi02 {
    background-image: url(../img/top/fukidashi_02.png);
    text-align: center;
}
.fukidashi.fukidashi03 {
    background-image: url(../img/top/fukidashi_03.png);
    text-align: center;
}
.fukidashi.fukidashi04 {
    background-image: url(../img/top/fukidashi_04.png);
    text-align: center;
    padding: 1rem 3rem 3rem;
}
.fukidashi.fukidashi05 {
    background-image: url(../img/top/fukidashi_05.png);
    text-align: center;
    padding: 2rem 2rem 5rem;
    z-index: 5;
}

#scene02.slide-active .fukidashi {
    padding: 1vw 0vw 3vw;
}


.fukidashiMainText {
    font-size: clamp(15px,1.5vw,2rem);
    line-height: 1.2;
    margin: 0;
    font-weight: bold;
    text-align: center;
    font-feature-settings: "palt";
}
.fukidashi01 .fukidashiMainText {
    text-align: left;
}

.fukidashiSubText {
    margin: 15px 0;
}
.flex__fukidashi .right {
    padding-left: 20px;
    width: 60%;
}
.flex__fukidashi .left {
    width: 40%;
}

.fukidashi01 .flex__fukidashi .right {
    padding: 0 20px;
}
.textCenter {
    text-align: center;
}

img.size {
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.linkButton_more {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #643c1e;
    color: #FFF;
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 20px;
    font-size: clamp(16px, 1.5vw, 2rem);
}
.buttonOuter {
    position: relative;
    z-index: 10;
}
#scene02 .buttonOuter {
    margin-top: 0px;
}
.fukidashi03 .flex__fukidashi {
    padding: 0px 30px 0;
}
.linkButton_more img {
    width: 23px;
    padding-left: 10px;
}
.linkButton_more img.button_arrow2 {
    width: 12px;
}
.button2{
        margin-top: -20px;
}
.fukidashi02 .flex__fukidashi {
    padding: 0 3%;
}
.fukidashi02 .fukidashiSubText {
    margin: 0;
}
.fukidashi03 .imgOuter {
/*    width: 80%;*/
}

.fukidashi04 .flex__fukidashi .left {
    width: 50%;
}
.fukidashi04 .flex__fukidashi .right {
    width: 50%;
}
.fukidashi04 .buttonOuter {
/*    max-width: 180px;*/
    margin: -30px auto 0;
}
.fukidashi04 .flex__fukidashi {
    padding: 10px;
}
.fukidashi.fukidashi05 .fukidashiInner {
    padding-bottom: 1rem;
}
.fukidashi.fukidashi05 .flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fukidashi.fukidashi05 .flex .imgWrap {
    width: 50%;
    padding-right: 20px;
}

.end_card {
    position: relative;
}
.linkButton.end_card01 {
    width: 40%;
    height: 20%;
    bottom: 10%;
    left: 10%;
}
.linkButton.end_card02 {
    width: 40%;
    height: 20%;
    bottom: 10%;
    right: 8%;
}
.end_card #wrapper,
.end_card #slideWrap,
.end_card .scene.slide-active,
.end_card #bg.meeting .bg_road  {
    pointer-events: none;
}

.end_card #bg {
    pointer-events: all;
}
.balloonText_after {
    opacity: 0;
}
.balloon_text_after .balloonText {
    opacity: 0;
}
.balloon_text_after .balloonText_after {
    opacity: 1;
}
.balloon_text_after .balloon {
    transition: opacity 0.5s 1s;
}
#position {
    position: fixed;
    right: 0;
    top: 20%;
    z-index: 100;
/*    display: none;*/
}
.positionItem {
    font-size: 20px;
    padding: 5px;
    background-color: #FFF;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-bottom: 5px;
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
    box-shadow: 0px 0px 10px #646464;
}
.positionItem .positionText {
    position: absolute;
    right: -300px;
    white-space: nowrap;
    transition: all 0.5s;
    background-color: #DDD;
    padding: 9px 15px;
    font-size: 16px;
    top: 0;
    bottom: 0;
    height: 1.5rem;
    margin: auto;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    font-weight: bold;
}
.positionItem:hover .positionText {
    right: 0;
}
.positionItem.active:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: #DDD;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 30px;
}


.heroTextWrap {
    position: absolute;
    top: -65%;
    right: 0%;
    width: 50%;
}

.header {
    z-index: 100;
    position: fixed;
}
.scene_16 #wrapper, .scene_16 #slideWrap {
    pointer-events: none;
    user-select: none;
}
body.top .footer,
body.test_top .footer
 {
    display: none;
}
.hand {
    display: none;
}
.top .page-top {
    display: none;
}

.arrow {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    max-width: 30vh;
    margin: auto;
    touch-action: manipulation;
}
.arrowItem {
    padding: 5px;
    transition: 0.3s;
    user-select: none;
}
.arrowItem.arrowitemClicked{
    pointer-events: none;
    user-select: none;
    animation: arrowitemClicked 0.3s ease-in forwards;
    opacity: 0.5;
}
@keyframes arrowitemClicked {
    0%{
        transform: scale(1.0);
    }
    50%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1.0);
    }

}

#arrow.top #arrow_left {
    pointer-events: none;
    opacity: 0.5;

}
#arrow.end #arrow_right {
    pointer-events: none;
    opacity: 0.5;

}
#positionNumberWrap {
    background-color: #FFF;
    padding: 5px;
    border-radius: 5px;
    border: 2px solid #633c1f;
    pointer-events: none;
    user-select: none;
}
.arrow img {
    display: block;
}

.cache{
width: 0px;
height: 0px;
opacity: 0;
pointer-events: none;
background-image: 
url('../img/top/green_nomal.png'),
url('../img/top/green_hunds_up.png'),
url('../img/top/green_fly.png'),
url('../img/top/red_nomal.png'),
url('../img/top/red_hunds_up.png'),
url('../img/top/red_fly.png')
}


@media screen and (max-width: 500px) {
.heroTextWrap {
    position: absolute;
    top: -100%;
    right: 10%;
    width: 60%;
}
}