@charset "utf-8";

@import url("https://use.typekit.net/gfm6yps.css");

:root{--MainColor:#26a54d;--MainColorThin: #59be28;--MainColorThin02:#a6cd43;--PointColor:#d544a4;--PointColorThin: #ed8dd8;--HighlightColor:#f0f226;--OtherColor:#e56901;--OtherColorThin:#e5ad01;--Width:1000px;--WidthMin: 820px;--gap: 40px;--padding: 60px 0 80px 0;}

/*------------------------------setting*/
article a{
    color: var(--MainColor);
}
article .FontEn{font-family: "oskar", sans-serif;
font-weight: 500;}
article .FontEn_other{font-family: "sharktooth", sans-serif;
font-weight: 500;}

article .photo{}
article img{width:100%; height:auto}

article .TitleEn{
    font-size: 55px;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 10px;
}

article .btn{
    text-align: center;
}
article .btn a{
    background-color: var(--OtherColorThin);
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    display: inline-block;
    position: relative;
    text-align: center;
    border-radius: 3px;
    padding: 25px 110px;
    font-size: 18px;
}
article .btn a:after{position: absolute;right: 8px;top:50%;margin-top:-0.5em;content:"\f105";font-family:FontAwesome;line-height: 1;font-size: 120%;font-weight: normal;}
article .btn a:hover{
    background-color: var(--MainColorThin02);
}


/*------------------------------menu*/
.header_change{position: fixed !important;transition: .5s;width: 100%;z-index: 1000;background-color: #fff;}
.header_change .Sub{
    display: none !important;
}
.header_change.show{top: 0;border: none;border-bottom: 1px solid #ccc;}
.header_change.show:after{}

.menuArea{
    padding: 20px 0 20px 0;
    border-top: 1px solid #ccc;
}
.menuArea .humb{
    display: none;
}
.menuArea .Inner{
    width: var(--Width);
    margin: 0 auto;
}
.menuArea .Inner ul{
    display: flex;
    justify-content: center;
    column-gap: 70px;
    line-height: 1;
}
.menuArea .Inner li{
    position: relative;
}
.menuArea .Inner li + li:before{content: "";width: 1px;display: block;position: absolute;background-color: var(--MainColorThin02);height: 100%;left: -34px;}
.menuArea .Inner li a{
    font-weight: 900;
    text-decoration: none;
}
.menuArea .Inner li a:hover,
.menuArea .Inner li a.active{
    text-decoration: underline;color: var(--MainColorThin02);
}
.menuArea .Inner li a[href="#Tour"]{
    color: var(--PointColor);
}
.menuArea .Inner li a[href="#Tour"]:hover{color: var(--PointColorThin);}


/*-------------------------------------MV*/
.MVbackphoto{width: 100%;overflow: hidden;height: 380px;}
.MVbackphoto .slick-list{
        padding: 0 !important;
}
.MVbackphoto .slick-list li{
        position: relative;
        /* margin: 0px 0 0 5px; */
        height: 380px;
}
.MVbackphoto li .img{}
.MVbackphoto li img{
        width: auto;
        height: 100%;
}
.MVbackphoto li .caption{
        background-color: #000;
        color: #fff;
        font-size: 12px;
        position: absolute;
        bottom: 10px;
        left: 10px;
        padding: 0 3px;
}


/*-------------------------------------TitleArea*/
#TitleArea{background: linear-gradient(to top, rgba(38,165,77,1) 0%,rgba(175,208,61,1) 100%);position: relative;}
#TitleArea:before{content:"";background-image: url(../../images/riocarnival/bg_sunburst_w2000.webp);width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-position: center top;background-repeat: no-repeat;}
#TitleArea .deco{
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
}
#TitleArea .deco.left{background-position: top left;width: 236px;background-image: url(../../images/riocarnival/illut_left.png);height: 270px;}
#TitleArea .deco.right{background-image: url(../../images/riocarnival/illust_right.png);width: 149px;height: 195px;bottom: 0;right: 0;background-position: bottom right;}
#TitleArea .Inner{
    width: var(--WidthMin);
    margin: 0 auto;
    padding-top: 70px;
    position: relative;
    padding-bottom: 70px;
}
#TitleArea .Inner .logo{
    position: absolute;
    width: var(--WidthMin);
    top: -58px;
}
#TitleArea .Inner .circle{
    width: 120px;
    aspect-ratio: 1;
    top: 20px;
    position: absolute;
    right: -140px;
}
#TitleArea .Inner h1{margin-bottom: 30px;}
#TitleArea .Inner .MainTxt{
    color: var(--HighlightColor);
    font-weight: 900;
    text-align: center;
    line-height: 2.2;
    letter-spacing: 1.3px;
    font-size: 15.5px;
    margin-bottom: 40px;
}

@media screen and (max-width:1500px){
#TitleArea:before{content:"";background-image: url(../../images/riocarnival/bg_sunburst_w1500.webp)}
}


/*-------------------------Seat-*/
#Seat{
    background-color: #f3f2de;
}
#Seat .Intro{
    background-color: #72cd46;
    position: relative;
    padding: 60px 0;
    z-index: 2;
    overflow-x: hidden;
}
#Seat .Intro .deco{
    font-size: 115px;
    position: absolute;
    color: #fff;
    writing-mode: vertical-rl;
    line-height: 1;
}
#Seat .Intro .deco .capital{
    color: var(--HighlightColor);
}
#Seat .Intro .deco.left{
    bottom: 20px;
    left: -20px;
}
#Seat .Intro .deco.right{
    top: 20px;
    right: -27px;
}

#Seat .Intro .map{
    width: 770px;
    margin: 0 auto;
    margin-bottom: 30px;
}
#Seat .Intro .map img{
}

#Seat .Intro .MainTxt{
    width: var(--Width);
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    color: #fff;
    line-height: 2;
    font-weight: bold;
    letter-spacing: 1.3px;
}
#Seat .Intro .MainTxt strong{
    font-weight: 900;
    color: var(--HighlightColor);
}
#Seat .Intro .MainTxt + .MainTxt{
    margin-top: 1.5em;
}

#Seat .Info{
    position: relative;
    z-index: 1;
    padding: var(--padding);
    width: var(--Width);
    margin: 0 auto;
}
#Seat .Info:before{content: "";background-image: url(../../images/riocarnival/deco_hukidashi.png);width: 46px;height: 20px;position: absolute;top: 0px;left: 50%;transform: translate(-50%, 0px);}

#Seat .Info .Entry{
    display: flex;
    align-items: center;
    column-gap: var(--gap);
}
#Seat .Info .Entry:nth-of-type(even){
    flex-direction: row-reverse;
    margin-top: 30px;
}
#Seat .Info .Entry .photo{
    width: 430px;
}
#Seat .Info .Entry dl{
    flex: 1;
    color: var(--MainColorThin);
}
#Seat .Info .Entry dt{
    display: flex;
    font-weight: 900;
    align-items: center;
    font-size: 18px;
    margin-bottom: 10px;
    column-gap: 10px;
}
#Seat .Info .Entry dt .icon{
    background-color: var(--MainColorThin);
    color: #fff;
    line-height: 1;
    display: inline-block;
    padding: 3px 10px 6px 10px;
    font-size: 15px;
}
#Seat .Info .Entry dd{
    font-size: 14.5px;
    line-height: 1.9;
    font-weight: bold;
}


/*-------------------------------------------About*/
#About{
	display: flex;
}
#About:before,
#About:after{content:"";width: 35%;display: block;height: auto;background-position: center;background-repeat: no-repeat;background-size: cover;flex: 1;}
#About:before{ background-image: url(../../images/riocarnival/bg_about_left.webp)}
#About:after{ background-image: url(../../images/riocarnival/bg_about_right.webp)}
#About .Inner{
	min-width: 650px;
	padding: 50px 50px 60px 50px;
	box-sizing: border-box;
	width: 50%;
	position: relative;
	color: var(--MainColor);
}
#About .Inner:before,
#About .Inner:after{content:"";display: block;background-repeat: no-repeat;background-size: contain;width: 174px;height: 80px;position: absolute;top: 0;}
#About .Inner:before{background-image: url(../../images/riocarnival/deco_garland_left.png);background-position: top left;left: 0;}
#About .Inner:after{background-image: url(../../images/riocarnival/deco_garland_right.png);background-position: top right;right: 0;}
#About .Inner .TitleEn{
    color: var(--MainColor);
}
#About .Inner .TitleEn .capital{
    color: var(--MainColorThin02);
}

#About .Inner dl{margin-top: 20px;}
#About .Inner dl + dl{margin-top: 40px;}
#About .Inner dt{text-align: center;font-weight: 900;font-size: 18px;margin-bottom: 10px;color: var(--MainColorThin02);}

#About .Inner dd{
    font-weight: bold;
    line-height: 1.9;
    font-size: 14.5px;
}
#About .Inner dd p{}
#About .Inner dd p + p{}

/*---------------------------------------------City*/
#City{background-image: url(../../images/riocarnival/bg_city.webp);padding: var(--padding);background-position: center top;background-repeat: no-repeat;}
#City .Inner{width: var(--Width);margin: 0 auto;}
#City .Inner .TitleEn{color: var(--PointColor);}
#City .Inner .TitleEn .capital{
    color: var(--PointColorThin);
}
#City .Inner h2{
    text-align: center;
    color: var(--PointColor);
    font-size: 17px;
    font-weight: 900;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    column-gap: 10px;
    flex-wrap: wrap;
}
#City .Inner .Box{}
#City .Inner .Box + .Box{
    margin-top: 50px;
}
#City .Inner .Box h3{
    text-align: center;
    color: var(--PointColorThin);
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 20px;
}

#City .Inner .Box .Data{
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 20px;
}
#City .Inner .Box .Data dl{
    width: 31%;
    display: flex;
    align-items: center;
}
#City .Inner .Box .Data dt{
    background-color: rgb(213 68 164 / 20%);
    width: 5em;
    text-align: center;
    font-weight: 900;
    color: var(--PointColor);
    font-size: 15px;
    line-height: 1;
    padding: 5px 0;
}
#City .Inner .Box .Data dd{
    font-weight: bold;
    flex: 1;
    padding-left: 10px;
    font-size: 15px;
}
#City .Inner .Box .Data dl.long{
    width: 65%;
}

#City .Inner .Box.Climate{}
#City .Inner .Box.Climate .Table{
    display: flex;
    background-color: #fff;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid var(--PointColor);
    border-radius: 3px;
}
#City .Inner .Box.Climate .Table + .Table{
    margin-top: 20px;
}
#City .Inner .Box.Climate .Table dl{
    flex: 1;
    text-align: center;
}
#City .Inner .Box.Climate .Table dl + dl{
    border-left: 1px solid #ccc;
}
#City .Inner .Box.Climate .Table dt{
    background-color: #f5f7fa;
    font-weight: 900;
    color: var(--PointColor);
    padding: 8px 0px;
    border-bottom: 1px solid #ccc;
}
#City .Inner .Box.Climate .Table dd{
    padding: 6px 0;
    line-height: 2;
    font-size: 14px;
}
#City .Inner .Box.Climate .Table dd span{
    display: block;
}
#City .Inner .Box.Climate .Table dl.head{
    width: 6em;
    flex: auto;
}
#City .Inner .Box.Climate .Table dd .high{
    color: #ea2e2e;
}
#City .Inner .Box.Climate .Table dd .low{
    color: #408edf;
}
#City .Inner .Box.Climate .Table dd .rain{}

#City .Inner .Box.Intro{}
#City .Inner .Box.Intro .Entry{}


#City .Inner .Box.Intro .Entry{
    display: flex;
    align-items: center;
    column-gap: var(--gap);
}
#City .Inner .Box.Intro .Entry + .Entry{
    margin-top: 25px;
}
#City .Inner .Box.Intro .Entry:nth-of-type(even){
    flex-direction: row-reverse;
}
#City .Inner .Box.Intro .Entry .photo{
    width: 430px;
}
#City .Inner .Box.Intro .Entry dl{
    flex: 1;
}
#City .Inner .Box.Intro .Entry dt{
    display: flex;
    font-weight: 900;
    align-items: center;
    font-size: 17px;
    margin-bottom: 10px;
    column-gap: 10px;
    color: var(--PointColor);
}
#City .Inner .Box.Intro .Entry dt .icon{
    background-color: var(--MainColorThin);
    color: #fff;
    line-height: 1;
    display: inline-block;
    padding: 3px 10px 6px 10px;
    font-size: 15px;
}
#City .Inner .Box.Intro .Entry dd{
    font-size: 14px;
    line-height: 1.9;
    font-weight: bold;
}

/*--------------------------Notes*/
#Notes{
    background-color: #efefef;
    padding: var(--padding);
}
#Notes .Inner{
    width: var(--Width);
    margin: 0 auto;
}
#Notes .Inner .TitleEn{
    color: var(--OtherColor);
    margin-bottom: 20px;
}
#Notes .Inner .TitleEn .capital{
    color: var(--OtherColorThin);
}

#Notes .Inner .Box{}
#Notes .Inner .Box + .Box{
    margin-top: 50px;
}
#Notes .Inner .Box h3{color: var(--OtherColorThin);font-weight: 900;font-size: 20px;margin-bottom: 20px;text-align: center;}

#Notes .Inner .Box.notes{}
#Notes .Inner .Box.notes dl{
    display: flex;
}
#Notes .Inner .Box.notes dt{
    width: 11em;
    background-color: var(--OtherColorThin);
    color: #fff;
    font-weight: 900;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
}
#Notes .Inner .Box.notes dd{
    flex: 1;
    font-size: 14.5px;
    font-weight: bold;
    padding-left: 15px;
    line-height: 1.8;
}
#Notes .Inner .Box.notes dl + dl{
    margin-top: 25px;
}


#Notes .Inner .Box.faq{}
#Notes .Inner .Box.faq dl{
    padding: 25px;
    background-color: #fff;
    border-radius: 5px;
}
#Notes .Inner .Box.faq dt,
#Notes .Inner .Box.faq dd{    display: flex;
    align-items: baseline;}
#Notes .Inner .Box.faq dt{
    font-size: 17px;
    font-weight: 900;
    color: var(--OtherColor);
    margin-bottom: 5px;
}
#Notes .Inner .Box.faq dd{
    font-size: 14px;
    font-weight: bold;
    margin-left: 2px;
}
#Notes .Inner .Box.faq dl + dl{
    margin-top: 25px;
}
#Notes .Inner .Box.faq dt:before,
#Notes .Inner .Box.faq dd:before{font-family: "sharktooth", sans-serif;font-size: 25px;line-height: 1;margin-right: 5px;}
#Notes .Inner .Box.faq dt:before{content:"Q"}
#Notes .Inner .Box.faq dd:before{content:"A";}



/*----------------------------------Tour*/
#Tour{background-image: url(../../images/riocarnival/bg_tour.webp);background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;}
#Tour:before{content: "";background-color: rgb(0 0 0 / 40%);position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
#Tour .Inner{
	position: relative;
	color: #fff;
	width: var(--Width);
	margin: 0 auto;
	padding: 60px 0;
	text-align: center;
}
#Tour .Inner h2{
	margin-bottom: 20px;
	font-size: 24px;
	line-height: 1.8;
}

#Tour .Inner dl{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
	line-height: 1;
}
#Tour .Inner dt{
	font-weight: bold;
	font-size: 15px;
	padding-right: 8px;
}
#Tour .Inner dd{
	font-size: 20px;
}
#Tour .Inner dd strong{
	font-size: 50px;
	color: var(--MainColorThin02);
}
#Tour .Inner dd.atte{
	width: 100%;
	font-size: 13px;
	padding-top: 13px;
}
#Tour .Inner .btn{}
#Tour .Inner .btn a{

background-color: var(--MainColorThin);
}
#Tour .Inner .btn a:hover{
	color: #fff;
	background-color: var(--MainColor);
	}