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


.as .top_head{ width: 100vw; height: clamp(480px,56vw,560px); padding: 120px 0 0; box-sizing: border-box;
  background-image: linear-gradient(0deg, #e5fdfd, #ffffff); position: relative;}
.as .top_head .copy{ text-align: center; font-size: 30px; letter-spacing: 0.01em; line-height: 1.4; margin-top: 30px;}
.as .top_head .copy span{ margin: 0 -5px 12px; padding: 0 5px; display: inline-block; position: relative;}
.as .top_head .copy span:before { content: ""; display: inline-block; position: absolute; left: 0; bottom: -5px; width: 100%; height: 4px;
  border-radius: 4px; background: #2792ff;}
.as .top_head .copy br.sp{ display: none;}
.as .top_head .top_img{ width: min(99vw,1004px); position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); display: flex; 
  justify-content: center;}
.as .top_head .top_img span{ display: inline-block;}
.as .top_head .top_img span:nth-child(1){ width:274px;}
.as .top_head .top_img span:nth-child(2){ width:412px;}
.as .top_head .top_img span:nth-child(3){ width:310px;}
.as .top_head .top_img img{ width: 100%;}

.as .sec1{ border-bottom: 8px solid #eaeaea;}
.as .sec1 p,.as .sec2 p{ margin-left: 1.5em;}
.as .sec1 ul{ margin: -15px 0 5px 2.5em;}
.as .sec1 ul.mt0{ margin: 0 0 5px 2.5em;}
.as .sec1 h3{ font-size: 22px; color: #ff9f00; margin: 0 0 10px 1em; line-height: 1.3;}
.as .sec1 h3 span{ display: inline-block;}
.as .sec1 .ct{ position: relative;}
.as .sec1 .img{ position: absolute; width: 336px; aspect-ratio: 336 / 218; right: 5%; top: 35%;
  background: url(/_/img/assigner_img1.png) no-repeat; background-size: contain; transform: translateY(-30%);}
.as .sec1 .img2{ width: 308px; aspect-ratio: 308 / 200; right: 35%;
  background: url(/_/img/assigner_img2.png) no-repeat; background-size: contain; transform: translate(50%,-30%);}

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

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

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


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

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

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


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

@media screen and (max-width: 767px) {
    
  .as .top_head { height: clamp(520px,90vw,600px); padding-top: clamp(90px,18vw,120px);}
  .as .top_head .top_img{ padding-bottom: clamp(115px,23vw,180px); justify-content: space-around;}
  .as .top_head .top_img span:nth-child(1){ width: clamp(180px,35.5vw,274px);}
  .as .top_head .top_img span:nth-child(2){ width: clamp(250px,53vw,412px); position: absolute; bottom: 0;}
  .as .top_head .top_img span:nth-child(3){ width: clamp(210px,40vw,310px);}
  
  .as .top_head .copy{ width: calc(100% - 40px); font-size: clamp(22px,4.5vw,26px); letter-spacing: 0; margin-top: 5px;}
  .as .top_head .copy span {font-size: clamp(25px,4.5vw,26px);}
  
  .as .sec1 p, .as .sec2 p{ margin-left: 0;}
  .as .sec1 ul { margin: -15px 0 5px 1em;}
  .as .sec1 ul.mt0 { margin: 0 0 5px 1em;}
  .as .sec1 .img { position: static;  transform: none; margin: 10px auto 20px;}
  .as .sec1 .img2 {margin: 20px auto 10px;}
  
  .as .sec1 h3 { font-size: 20px; margin: 0 0 10px;}
  
  .as .sec3 .day { width: 100%;}
  .as .sec3 h3 { margin-bottom: 10px;}
  .as .sec3 .flx .txt, .as .sec3 .flx.rv .txt { width: 100%; margin: 0 0 20px;}
  .as .sec3 .flx .photo,.as .sec3 .flx .photo span.photo2,.as .sec3 .flx .img{ width: auto;}
  .as .sec3 .flx.rv .photo { text-align: right;}
}

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

@media screen and (max-width: 479px) {
  .lc_nv h1 { font-size: 20px; margin-left: 0;}
  .as .top_head { height: 550px;}
  .as .top_head .copy { margin-top: -10px;}
  .as .top_head .copy br.sp{ display: inherit;}
  .as .top_head .top_img { padding-bottom: 130px;}
  
  .as .sec3 .flx { padding: 10px;}
  .as .sec3 h3 span{ margin: 15px 10px 0 10px;}
  
}