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

.rally .inner img{ width: 100%;}



/* ランゲージボタン
---------------------------------------------*/
.langebt {
	text-align: center;
	width: 100%;
	margin: 3em auto;
    padding: 3em 0;
	max-width: 1024px;
}
.langebt li {
	display: inline-block;
	width: 47%;
	margin-right: 1%;
	font-size: xx-large;
}
.langebt li a {
	display: block;
	width: 94%;
	padding: 3%;
    color: #FFFFFF;
	background-color: #a3116b;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #d0d0d0;
}
.langebt li a:hover {
	text-decoration: underline;
	background-color: #C941A8;
	border-radius: 15px;
}

#top-receipt {
    background-color: #bdf8f9;
	border-radius: 20px;
	padding: 5%;
    margin-bottom: 100px;
}

#top-receipt img{
max-width: 420px;
width: 100%;
margin: 0 auto;
display: block;
}

/* 参加はスマホから！
---------------------------------------------*/
#top-smaho {
background: #ffffff;
}
#top-smaho p {
    font-size: 1.6;
}
#top-smaho-left {
    display: inline-block;
    width: 60%;
    text-align: left;
    padding: 2em 0;
}
#top-smaho-left img {
    width: 90%;
}
.smahoimg {
    display: inline-block;
    width: 35%;
    margin-right: 3em;
}

.smaho-step {
    background-color: #fff300;
    display: inline-block;
    padding: 0 .5em;
    margin-top: 2em;
    font-weight: bold;
}

/* 達成後は
---------------------------------------------*/
.tassei-t {
    background-color: #ac4cad;
    display: block;
    font-size: 4rem;
    padding: .5em 1em;
    margin-bottom: 1em;
    color: #FFFFFF;
	text-align: center;
}
#top-tassei {
    background-color: #f9ecfb;
    padding: 5%;
}

#top-tassei img{
max-width: 600px;
width: 100%;
margin:  0 auto;
display: block;
}

#top-tassei img.present{
max-width: 100%;
width: 100%;
margin:  0 auto;
display: block;
}

#top-tassei iframe{
aspect-ratio: 16/9;
}



/* 八景の紹介
---------------------------------------------*/
#top8kei {
	display: flex;
	justify-content: space-between;
}



.top8kei-cors {
    vertical-align: top;
    width: 45%;
    display: inline-block;
    text-align: left;
}
#topgreen {
    background-color: #D6E8CD;
    padding: 5%;
}

.top8_t {
    font-size: x-large;
    font-weight: bold;
    margin: 1em 0 .5em 0;
}

.top8kei-ts {
    font-size: medium;
}

.top8kei-name {
    display: inline-block;
    margin-top: 1em;
    font-weight: bold;
    color: #7A0980;
    border-bottom: 2px solid #7A0980;
	margin-bottom: 20px;
}
.top8kei-wrap{min-height: 450px;}

/*八景ラリー*/
.rally .main-image{max-width: 100%; width: 100%; margin: 0 auto;display: block;  padding-top: 100px;}
.rally .main_illust{max-width: 1024px; width: 100%; display: block; margin: 0 auto;}
.rally h3{line-height: 1.5;}
.rally h4{font-size: 5rem;}
.rally h5{font-size: 3.6rem; margin: 40px auto 0;}
.rally .mb20{margin-bottom: 20px;}
.rally .mb100{margin-bottom: 100px;}
.rally .pt100{padding-top: 100px;}
.rally .pb100{padding-bottom: 100px;}
.rally .bg{background: #f3ebf4; border-radius: 30px; padding: 5%; margin-bottom: 100px;}
.rally .icon{max-width: 60px; max-height: 60px; margin-right: 10px;}
.rally .course{width: calc(100% - 70px);}
.rally .course p span{font-size: 3rem; font-weight: 900; color: #7f3d83; background: linear-gradient(transparent 60%, #ffe66d 60%);}

.rally .flex{flex-wrap: wrap;}
.rally .w45p{width: 45%; height: auto; background: #fff; border: #7f3d83 5px solid; padding: 20px; margin-bottom: 100px;}
.rally .w100p{width: 100%; height: auto; max-width: 600px; background: #fff; border: #7f3d83 5px solid; padding: 20px;margin: 0 auto 100px;}
.rally p.course{font-size: 2.4rem; font-weight: 900; color: #7f3d83; width: 100%;}
.rally .item{max-width: 150px; height: auto; margin: 10px auto; display: block;}
.rally .month{max-width: 200px; margin: 0 auto 20px; display: block;}
.rally .rallybg {background: #fff; overflow: hidden; margin-bottom: 100px;}
.rally img.smaho{width: 35%; display: block;}
.rally .smaho-explanation{width: 60%; display: block;}
.rally .smaho-explanation .present{width: 100%;}
.rally .mei22{max-width: 200px; position: absolute; right: -10px; top: -50px;}
.rally .hakkei_t{max-width: 560px; width: 100%; margin: 0 auto; display: block;}
.rally .sentyaku{position: relative;}
.rally .sentyaku .taisyou{background: #7f3d83; color: #fff; border-radius: 20px; display: inline-block; padding: 3px 10px; margin: 20px auto;}
.rally .sentyaku p.people {font-size: 4rem; font-weight: 900;}
.rally .sentyaku p.people span{font-size: 5rem; font-weight: 900;}
.rally .sentyaku ul{padding: 0;margin: 0;}
.rally .sentyaku ul li{position: relative; font-size: 1.6rem; line-height: 1.6; list-style: none; padding-left: 20px; min-height: 24px;display: flex;align-items: center;}
.rally .sentyaku ul li::before{content: "";width: 12px;height: 12px;border-radius: 50%;background: #7f3d83;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
.rally .sentyaku .laveton-sns{position: absolute; bottom: 0%; right: 5%; max-width: 350px;}
.rally .beer{max-width: 450px; margin-bottom: 40px; display: block; margin: 0 auto;}
.rally hr{border: none; height: 2px; background-color: #7f3d83; margin-bottom: 40px;}
.rally .back{position: absolute; z-index: 1; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1024px; margin-top: 0;}
.rally .comprehensive{max-width: 200px; margin: 0 auto; display: block;}
.rally  .comprehensive-wrap{position: relative;z-index: 2;}
.rally  .comprehensive-wrap h4{color: #7f3d83; font-size: 3rem;}
.rally  .comprehensive-wrap h5{font-size: 2rem; margin-top: 20px; margin-bottom: 20px;}
.rally .bg02{background-image:  radial-gradient(#d2cce6 2px, transparent 2px), radial-gradient(#d2cce6 2px, #ffffff 2px); background-size: 40px 40px; background-position: 0 0,20px 20px;
}
#top-smaho .flex{align-items: flex-start; padding: 5%;}
.rally .smaho_sanka{max-width: 560px;}
.rally h2::after,.rally h2::before{display: none;}
.rally h4::after,.rally h4::before{display: none;}
.rally .relative {position: relative;}

.rally .slider-8map {display: flex; width: max-content; animation: scroll-left 40s linear infinite;}
.rally .slider-8map.reverse {animation: scroll-right 40s linear infinite; margin-bottom: 40px;}
.labeton-wrap{display: flex; align-items: center;justify-content: center; margin-top: -50px;transform: translateX(100%);}
.labeton-wrap.show {animation: slide-slowdown 2.5s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;}

@media (max-width: 766px) {
.rally .mb100{margin-bottom: 50px;}
.rally .pt100{padding-top: 50px;}
.rally .main-image{padding-top: 80px;}
#topgreen{padding: 0; padding-bottom: 50px;}
#top8kei{display: block;}
.top8_t{font-size: 1.8rem;}
#top8kei{margin: 0; padding: 0;}
#top8kei p{font-size: 1.4rem;}
.top8kei-cors{width: 100%;}
#top8kei p.top8kei-name{font-size: 2rem;}
.top8kei-wrap{min-height: auto;}
.explanation{width: 100%;}
.langebt{width: 100%; margin: 20px auto 0; padding: 0;}
.langebt li{display: block; font-size: 1.6rem; width: 100%; margin: 0 auto 20px; max-width: 300px;}
.rally h3{line-height: 1.5;}
.rally h4{font-size: 2rem; padding: 0; line-height: 1.5;}
.rally h5{font-size: 1.8rem; margin: 40px auto 0;}
.rally .course p span {font-size: 2rem;}
.rally .icon{max-width: 45px; max-height: 45px;}
.rally .course{width: calc(100% - 55px);}
.rally .mei22{max-width: 100px;}
.rally .bg{margin-bottom: 50px;}
.rally .w45p{width: 100%;  padding: 15px; margin-bottom: 20px;}
.rally p.course{font-size: 1.6rem;}
.rally .item{max-width: 100px;}
.rally  .comprehensive-wrap h4{font-size: 2rem;}
.rally .beer{max-width: 100%; margin-bottom: 20px;}
.rally .sentyaku{padding-bottom: 120px;}
.rally .sentyaku p.people{font-size: 2rem;}
.rally .sentyaku p.people span{font-size: 2.4rem;}
.rally .sentyaku .laveton-sns{max-width: 250px;}
#top-smaho .flex{padding: 20px; flex-direction: column-reverse;}
.rally img.smaho{max-width: 250px; width: 100%; margin: 0 auto;}
.rally .smaho-explanation{width: 100%;}

#top-smaho p {font-size: 1.4rem;}
#top-tassei{padding: 0; padding-bottom: 50px;}
.tassei-t{font-size: 1.6rem;}
#top-receipt {margin-bottom: 50px;}
}

@media screen and (min-width: 768px) and (max-width: 1024px)  {
.top8kei-wrap {min-height: 300px;}
.rally p{font-size: 1.6rem!important;}
.rally h4{font-size: 2rem; padding: 0; line-height: 1.5;}
.rally h5{font-size: 1.8rem; margin: 40px auto 0;}
.tassei-t{font-size: 1.6rem;}
}