.tbView{ display: block;}

/*タイトル -------------------------------------------*/
/* =========================================
   SECTION
========================================= */

#tourTitleImg {

}

/* flex崩れ防止 */
#tourTitleImg > div {
    width: 90%;
    max-width: 1100px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 auto;
    position: relative;
}

.backCbox {
  background: linear-gradient(
    to top,
    #83ccd2 0%,
    #83ccd2 26%,
    transparent 26%,
    transparent 100%
  );
}

.rigthBox{ width: 60%;}

/* =========================================
   画像
========================================= */
#tourTitleImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   テキストエリア
========================================= */

.proBox{
  display: flex;
  align-items: center;
  height: 26%;
  position: absolute;
  bottom: 0;
  
}

/* =========================================
   テキスト
========================================= */
.tourTitleBox{
  display: flex;
  align-items: center;
  height: 72%;
}
.tourTitle {
  text-align: center;
    margin: 0 auto;
}

.tourTitle h2 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 0.8;
  margin: 0.2em 1rem;
}

.tourTitle p {
  font-size: 1.6rem;
  line-height: 1.6;
  margin: 0;
}

.tourTitle .subeT {
  display: block;
  width: 50%;
  max-width: 130px;
  font-size: 2rem;
  padding: 0.5rem;
  margin: 0.8rem auto 0;
}
.date{ 
    display:flex; 
    justify-content: center;
    align-items: center;
    padding: 0 0 1rem 0;
}
.date span{
    background: #000;
    border-radius: 40px;
    color: #fff;
    font-size: 1rem;
    padding: 0 0.3rem;
}
.atherText{
    font-size: 0.8rem;
    line-height: 2;
    display: block;
    padding: 1rem 0 0 0;
}
.colorP {
  color: #b06caa;
}

/* =========================================
   PROFILE
========================================= */
.profile {
  width: 100%;
  box-sizing: border-box;
  color: #000;
  line-height: 1.6;
  padding-left: 2rem;
  font-size: 1rem;
}

.midashi {
  font-size: 1.6rem;
  margin: 0 0 0.8rem;
}

/* =========================================
   背景
========================================= */
.pro {
  background: #83ccd2;
}

/* =========================================
   TB
========================================= */
@media (max-width: 1024px) {
  .tbView{ display: block;}

  .tourTitle{ zoom: 0.9;}
  .profile{ zoom: 0.9;}

  #tourTitleImg > div > div {
    width: 80%;
    display: block;
  }
  .rigthBox {
    width: 60%;
}
.backCbox{background: linear-gradient(to top, #83ccd2 0%, #83ccd2 33%, transparent 33%, transparent 100%);}
.tourTitleBox {height: 65%;}
.proBox{ height: 33%;}

.tourTitle h2{ font-size: 3rem;}
.tourTitle .subeT{ font-size: 1.6rem; max-width: 120px; margin: 0 auto 0.8rem;}
.tourTitle p{ font-size: 1.2rem;;}
}

/* =========================================
   SP
========================================= */
@media (max-width: 640px) {

  .tbView{ display: none;}

  #tourTitleImg {
    display: block;
    background: #fff;
  }

  #tourTitleImg > div {
    width: 100%;
    min-width: auto;
    display: block;
  }
  #tourTitleImg > div > div {
    width: 100%;
    display: block;
  }
  .tourTitle,
  .profile {
    padding: 1rem;
  }

  .tourTitle h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin: 0 1rem;
  }
.proBox{ position: relative; }

.rigthBox{ width: 100%;}

.vsText h4 span {
    display: block;
    width: 33%;
    max-width: 100px;
    padding: 0 0 0  0.4rem!important;
  }
}


/*コンテンツ -------------------------------*/
/*風景*/
.landscape{ 
    display: flex;
    align-items: center;
    width: 90%;
    max-width: 1000px;
    border: 5px solid #000;
    margin: 4rem auto;
    position: relative;
}
.lsMidashi{ 
    font-size: 1.2rem;
    font-weight: bold;
    background: #fff;
    padding: 0.5rem;
    border: 4px solid #000;
    top: -1.4rem;
    left: 0.5rem;
    position: absolute;
}
.landscape > img{
    width: 100%;
    max-width:398px ;
}
.leadSentence{
    line-height: 1.6;
    padding: 1rem;
}

/* =========================================
   SP
========================================= */
@media (max-width: 640px) {
    .landscape{ 
        display: block;
    }
    .lsMidashi{ top: -1.4rem;}
}


/* 見学スタート -------------------------------*/
#visitBox{ 
    width: 90%;
    max-width: 1000px;
    border: #000 5px solid;
    position: relative;
    padding: 2.6rem;
    margin: 0 auto;
}
#visitStart{
    display: block;
    font-size: 2rem;
    text-align: center;
    width: 50%;
    max-width: 320px;
    background: #fff;
    left: 0;
    right: 0;
    top: -1rem;
    margin: 0 auto;
    position: absolute;
}

.visitStage{
    padding: 0 0 2rem 0;
    margin: 0 0 2rem 0;
    border-bottom: #000 solid 2px;
    position: relative;
}
.vsCont{
    display: flex;
}
.vsText h4{ 
    font-size: 1.6rem; 
    font-weight: 100; 
    line-height: 1.6; 
    padding:0 0 1rem 0;
}
.vsText h4 span{
    background: #83ccd2;
    padding: 0.3rem 0 0.3rem 0.4rem;
    margin: 0 0.5rem 0 0;
}
.visitStageText{
    width: 95%;
    line-height: 1.6;
}
.vsImg{ 
    width: 100%;
    max-width:331px ;
}
.arrow{ display: block; margin: 1rem auto 0;}
.noborder{ border-bottom: none; margin: 0; padding: auto;}
.goal{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    font-size: 2rem;
    bottom: -1rem;
    background: #fff;
    width: 74%;
    max-width: 220px;
}
/* =========================================
   SP
========================================= */
@media (max-width: 640px) {
    #visitBox{ padding: 2rem 1rem;}
    #visitStart{ width: 88%;}

    .vsCont{ display: block;}
    .visitStageText{ width: 100%; padding: 0 0 2rem 0;}

    .landscape > img{ max-width: 100%;}
    .vsImg{ max-width: 100%;}
}


/*感想など -------------------------------------*/
#attheendCont{
    display: flex;
    width: 90%;
    max-width: 1000px;
    min-width: 900px;
    margin: 2rem auto 4rem;
}

.photo { 
    width: 100%; 
    max-width: 461px; 
    height: auto; 
    border: #000 5px solid;
}
.photo2{
    width: 100%;
    max-width: 131px;
    height: auto;
    aspect-ratio: 131 / 146;
    max-height: 146px;
}

.greetingBox{ 
    width: 51%;
    padding: 0.7rem;
    margin: 0 0 0 2rem;
    background: #d9fdff;
    border: #000 5px solid;
}
.greeting{ display: flex;}
.greeting div{
    padding: 0 0 0 1rem;
}
.textB{     
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.2;
    padding: 0 0 1rem 0;
}
.textB span{background:linear-gradient(transparent 60%, #ff6 60%);}
.nemuBox{ line-height: 1.4;}
.nemu{ font-size: 1.6rem;}
.greetingText{
    line-height: 1.6;
    padding: 0.6rem 0 0 0;
}
@media (max-width: 1024px) {
    .tbView{ display: none;}
    .photo{ max-width: none;}
    #attheendCont{ display: block; min-width: auto; margin: 2rem auto;}
    .greetingBox{ width: 100%; margin: 2rem 0;}
}
@media (max-width: 640px) {
  .tbView{ display: block;}
.textB{ font-size: 1.2rem;}
.nemuBox{ font-size: 0.9rem;}
}

@media (max-width: 380px) {
.textB{ font-size: 1.1rem;}
}