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


.tc .top_head{ width: 100vw; height: clamp(420px,48vw,520px); padding: 120px 0 0; box-sizing: border-box;
  background-image: linear-gradient(0deg, #fffdee, #ffffff); position: relative;}
.tc .top_head .copy{ width: min(calc(100% - 60px), 1200px); font-size: 30px; letter-spacing: 0.01em; line-height: 1.4; margin-top: 20px;}
.tc .top_head .copy span{ margin: 0 -5px 12px; padding: 0 5px; display: inline-block; position: relative;}
.tc .top_head .copy span:before { content: ""; display: inline-block; position: absolute; left: 0; bottom: -5px; width: 100%; height: 4px;
  border-radius: 4px; background: #ffb059;}
.tc .top_head .tourists{ width: clamp(840px,75vw,1118px); position: absolute; bottom: -30px; left: 50%; 
  transform: translateX(-40%);  z-index: 2;}
.tc .top_head .tourists img{ width: 100%;}

.tc .appeal{ background: #fff1bf; padding: 40px 0 30px;}
.tc .appeal .inner_ct{ background: #ffffff; padding: 20px; border-radius: 10px; display: flex; align-items: center;}
.tc .appeal h2{ font-size: 24px; letter-spacing: 0.01em; position: relative; width: 45%; min-width: 300px; text-align: center;}
.tc .appeal h2::before{ content: url(/_/img/krkr1.png); position: absolute; left: 0; top: -15px;}
.tc .appeal h2::after{ content: url(/_/img/krkr2.png); position: absolute; right: 10px; top: -25px;}
.tc .appeal ul{ list-style: none; display: flex; flex-wrap: wrap; font-size: 20px; padding: 10px 0 10px 40px; margin-left: 20px; 
  border-left: 2px solid #ffd35b;}
.tc .appeal li{ position: relative; padding-left: 40px; margin: 20px 30px 20px 0;}
.tc .appeal li::before{ position: absolute; content: url(/_/img/good.png); left: 0; top: -18px; }

.tc .sec1{ border-bottom: 8px solid #eaeaea;}
.tc .sec1 .inner_ct{ position: relative;}
.tc .sec1 p,.tc .sec2 p{ margin-left: 1.5em;}
.tc .sec1 ul{ margin: -15px 0 5px 2.5em;}
.tc .sec1 .img{ position: absolute; width: clamp(320px,37vw,410px); aspect-ratio: 410 / 256; right: max(-20px, -0.5vw); top: 50%;
  background: url(/_/img/tour-conductor.png) no-repeat; background-size: contain; transform: translateY(-30%);}

.tc .sec3{ background: #ecf9ff; padding: 50px 0 30px;}
.tc .sec3 .day{ background: #ffffff; border-radius: 10px; padding: 10px 20px 20px; width: min(calc(100% - 20px),1060px); margin: 20px auto; 
  box-sizing: border-box;}
.tc .sec3 h3{ color: #75ab36; font-size: 22px; margin-bottom: 20px;}

.tc .sec3 h3 span{ color: #8b8b8b; font-size: 18px; margin: 20px 10px 0 20px; font-weight: 400; display: inline-block;}
.tc .sec3 .flx{ display: flex; justify-content: space-between; padding: 20px; flex-wrap: wrap;}
.tc .sec3 .day1 .flx { padding-top: 0; }
.tc .sec3 .flx .txt{ width: max(350px, calc(100% - 320px));}
.tc .sec3 .flx .txt p:last-of-type{ margin-bottom: 0;}

.tc .sec3 .flx.rv{ flex-direction: row-reverse; justify-content: flex-end;}
.tc .sec3 .flx.rv .txt{ margin-left: 20px; width: max(350px,calc(100% - 360px));}
.tc .sec3 .flx .photo,.tc .sec3 .flx .img{ width: clamp(240px, 29vw, 300px); display: inline-block; text-align: right; flex-grow: 1}
.tc .sec3 .flx .photo span{ display: inline-block;}
.tc .sec3 .flx .photo span.photo2{ width: 80%; margin-top: 20px;}
.tc .sec3 .flx .photo img,.tc .sec3 .flx .img img{ max-width: 100%;}
.tc .sec3 .flx .img{ margin: 0 10px;}
.tc .sec3 .flx2{ padding: 0 20px;}
.tc .sec3 .flx2 .photos{ display: flex; justify-content: flex-end; flex-wrap: wrap;}
.tc .sec3 .flx2 .photos span{ display: inline-block; margin: 0 0 10px 20px;}
.tc .sec3 .flx2 p.cap{ font-size: 16px; margin-bottom: 0; text-align: right;}
.tc .sec3 .uline{ border-bottom: 2px dashed #b8b8b8; margin-bottom: 10px; padding-bottom: 20px;}


/**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/**=========================================  tablet  ===============================================================**/

@media screen and (max-width: 1023px) {
  
  .tc .top_head .copy { font-size: 26px;}
  .tc .top_head .tourists { width: clamp(748px,calc(100% - 20px),840px); transform: translateX(-50%);}
  
  
  .tc .appeal .inner_ct { flex-direction: column;}
  .tc .appeal h2 { font-size: 22px; width: auto; min-width: unset; margin: 15px 0 20px;}
  .tc .appeal h2::before { left: -40px;}
  .tc .appeal h2::after { right: -25px;}
  .tc .appeal ul { font-size: 18px; padding: 20px 5px 0; margin-left: 0; border-left: none; border-top: 2px solid #ffd35b; 
    justify-content: center;}
  
  .tc .sec3 h3 { font-size: 20px;}
  .tc .sec3 .day { padding: 10px;}
  
  .tc .sec3 .flx .txt{ width: max(350px, calc(100% - 280px)); margin-right: 10px;}
  .tc .sec3 .flx.rv .txt{ width: max(350px, calc(100% - 300px)); }
  
}


/**================================================    【sp】  ===================================================**/

@media screen and (max-width: 767px) {
  
  .tc .top_head .copy{ width: calc(100% - 40px); font-size: clamp(22px,4.5vw,26px); letter-spacing: 0; margin-top: 5px;}
  .tc .top_head .copy span {font-size: clamp(25px,4.5vw,26px);}
  .tc .appeal .inner_ct { padding: 10px;}
  .tc .appeal ul { font-size: 17px; padding: 20px 10px 0; justify-content: flex-start; }
  .tc .appeal li { margin: 10px 10px 20px;}
  
  .tc .sec1 .img { position: static;  transform: none; margin: 10px auto 0; width: clamp(300px,70vw,410px);}
  .tc .sec1 p, .tc .sec2 p{ margin-left: 0;}
  .tc .sec1 ul { margin: -15px 0 5px 1em;}
  
  .tc .sec3 .day { width: 100%;}
  .tc .sec3 h3 { margin-bottom: 10px;}
  .tc .sec3 .flx .txt, .tc .sec3 .flx.rv .txt { width: 100%; margin: 0 0 20px;}
  .tc .sec3 .flx .photo,.tc .sec3 .flx .photo span.photo2,.tc .sec3 .flx .img{ width: auto;}
}

/**================================================    【sp2】  ===================================================**/

@media screen and (max-width: 479px) {
  .lc_nv h1 { font-size: 20px; margin-left: 0;}
  
  .tc .top_head .copy { margin-top: -10px;}
  .tc .top_head .tourists { width: 650px;}
  
  .tc .appeal ul { padding: 20px 0 0;}
  .tc .sec3 .flx { padding: 10px;}
  .tc .sec3 h3 span{ margin: 15px 10px 0 10px;}
  
}