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

body {font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic UI", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Segoe UI", sans-serif;
  /*font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;*/
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.clearfix::after { content: ""; display: block; clear: both;}

.wrap{ overflow: hidden;}
.sp_only { display: none;}
.sp_nav{ display: none;}

.t_right { text-align: right;}
a{ text-decoration: none;}

.anchor{ display: block; padding-top: 100px; margin-top: -100px;}

.page_top{ position: fixed; z-index: 11; display: block; width: 50px; height: 50px; text-align: center; background: #14519c;
  border: 1px solid #ffffff; bottom: -100px; right: 30px; cursor: pointer;}
.page_top:hover{ background: #5480b7;}
.page_top img{ width: 28px;  margin-top: 12px;}

.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; background: #004180; opacity: 0.7; filter: alpha(opacity=70);
    z-index: 89;}

.inner_ct{ width: min(calc(100% - 40px),1200px); margin: 0 auto; box-sizing: border-box;}

.nav{ position: fixed; z-index: 10; width: 100%; background: #ffffff; padding: 15px 0 10px;}
.gl_nv{ display: flex; justify-content: space-between; padding: 0 clamp(10px,1.2vw,25px);}
.gl_nv .logo h2,.gl_nv .logo a{ display: flex; font-size: 24px; color: #000000;}
.gl_nv .logo span{ margin: 15px 0 0 15px;}
.gl_nv .logo span.img{ display: inline-block; width: 116px; margin: 0;}
.gl_nv .logo span img{ width: 100%;}
.btns a{ display: inline-block; width: 150px; text-align: center; font-size: 20px; color: #ffffff; font-weight: 500; 
  background-color: #1b54b4; border-radius: 4px; padding: 10px; box-sizing: border-box; transition: background-color 0.4s;}
.btns a.youkou{ background-color: #ffab04; margin-right: 10px;}
.btns a:hover{ background-color: #234a7c;}
.btns a.youkou:hover{ background-color: #f2921c;}

.lc_nv{ display: flex; justify-content: space-between; align-items: center; width: max(890px,calc(100% - 148px)); border-top: 1px solid #aac2d3; 
  padding: 10px 0 0 5px; margin: -10px 0 0; float: right; box-sizing: border-box; position: relative;}
.lc_nv h1{ color: #234a7c; font-size: 24px; margin-left: clamp(-30px, calc(100vw - 1100px), 0px);}
.lc_nv h1 span{ font-size: 90%; margin-left: -5px;}
.lc_nv ul{ display: flex; justify-content: flex-end; list-style: none;}
.lc_nv ul a{ display: inline-block; color: #234a7c; font-weight: 500; font-size: clamp(15px,1.7vw,19px); margin: 0 clamp(12px,1.3vw,20px);}
.lc_nv ul a:hover{ color: #000067;}

.nav.scrl{ border-bottom: 1px solid #d9d9d9; padding: 5px 0;}
.nav.scrl .gl_nv{ height: 58px;}
.nav.scrl .gl_nv .logo span{ margin: 10px 0 0 15px;}
.nav.scrl .gl_nv .logo span.img { margin: 0; width: 100px;}
.nav.scrl .gl_nv .btns a { padding: 8px 10px;}
.nav.scrl .lc_nv { margin: -15px 0 0; padding: 8px 0 0 0; width: max(890px,calc(100% - 128px));}
.nav.scrl .lc_nv h1{ margin-top: -3px;}

footer{ background: #f2f3f3; padding: 30px 0 50px;}
footer .inner_ct{ display: flex;  justify-content: space-around;}
footer .logos{ padding-right: 50px; margin-top: 15px;}
footer .logos a{ display: block; width: 300px;}
footer p{ font-size: 16px;  line-height: 1.5;}
footer p.h{ color: #00004f; margin-top: 15px;}
footer span{ display: inline-block;}
footer li{ list-style: none; font-size: 16px; line-height: 1.3; margin-bottom: 5px; position: relative; padding-left: 1em;} 
footer li::before{ content:"・"; position: absolute; left:0.2em; color: #999999;} 
footer .copyright{ font-size: 15px; color: #00004f; margin: 5px 0 15px;}

.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 .section{ padding: 50px 0; }
.tc .section h2{ font-size: 28px; color: #234a7c; line-height: 1.4; margin-bottom: 20px;}
.tc .section h2 span{ display: inline-block;}
.tc .section .inner_ct{ max-width: 1100px;}
.tc .section p{ font-size: 18px; line-height: 1.5; margin-bottom: 20px;}
.tc .section ul.def{ list-style: none; font-size: 18px; line-height: 1.3;}
.tc .section ul.def li{ padding-left: 1em; margin-bottom: 10px; position: relative;}
.tc .section ul.def li::before{ content: "•"; position: absolute; left: 0;}

.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 .steps{ max-width: 1040px; margin: 30px auto;}
.tc .steps h3{ background: #fffae7; font-size: 22px;}
.tc .steps h3 .step{ display: inline-block; background: #ffab04; color: #ffffff; padding:6px 15px 7px; margin-right: 20px;}
.tc .steps h3 .step span{ font-size: 150%; margin-left: 8px; vertical-align: -3px;}
.tc .steps .cont{ margin: 5px 0 15px min(5vw,50px); padding: 15px 5px 15px 40px; border-left: 5px #e5e5e5 solid; position: relative;}
.tc .steps .cont.last{ border-color: #ffffff;}
.tc .steps .cont:not(.last)::after{ position: absolute; content:url(/_/img/arr_gr.svg); width: 22px; height: 22px; left: -13px; 
  bottom: -10px;}
.tc .steps .cont ul{  margin-left: 35px;}
.tc .steps .training{ display: flex; margin-left: 30px;}
.tc .steps .training h4{ font-size: 20px; font-weight: 400; color: #6b6b6b; }
.tc .steps p.caution{ color: #d86d00; font-size: 16px;}

.tc .steps .period{ border: 2px solid #e5e5e5; padding: 10px; border-radius: 6px; display: flex; align-items: center;}
.tc .steps .period h4{ font-size: 22px; width: 240px; text-align: center;}
.tc .steps .period p{ margin-bottom: 0; padding: 10px 0 10px 30px; border-left: 2px solid #e5e5e5; margin-left: 10px;}

.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;}


.tc .f_q{ max-width: 1000px; border: 2px solid #c7c7c7; border-radius: 6px; margin: 0 auto 15px; box-sizing: border-box;}
.tc .f_q .q{ padding: 15px 50px; position: relative; cursor: pointer;}
.tc .f_q .q p{ line-height: 1.3; margin-bottom: 0;}
.tc .f_q .q::before{ position: absolute; content:"Q."; font-size: 20px; top:15px; left: 20px; color: #fe9718;}
.tc .f_q .q::after{ position: absolute; content: ""; top: 50%; right: 20px; width: 24px; height: 24px; mask-position: top center; mask-repeat: no-repeat;
  mask-size: cover; mask-image: url(/_/img/plus_n.svg); background: #acacac; transform: translateY(-50%);}
.tc .f_q .q:hover{ background-color: #fffaef;}
.tc .f_q .q:hover::after{ background: #ff7400;}
.tc .f_q .q.open::after{ mask-image: url(/_/img/minus_n.svg);}
.tc .f_q .a{ display: none; padding: 15px 20px 15px 40px; border-top: 2px dotted #c7c7c7; margin: 0 50px 0 10px;}
.tc .f_q .a p{ line-height: 1.4; margin-bottom: 0;}

.tc .cta{ padding: 0 0 60px; text-align: center;}
.tc .cta a{ display: block; width: 360px; text-align: center; font-size: 22px; color: #ffffff; font-weight: 500; margin: 20px auto;
  background-color: #ffab04; border-radius: 4px; padding: 15px 10px; box-sizing: border-box; transition: background-color 0.4s;}
.tc .cta a:hover{ background-color: #f2921c;}


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

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

@media screen and (max-width: 1023px) {
  .nav { padding: 10px 0;}
  
  .lc_nv,.nav.scrl .lc_nv { width: 100%; border: none; align-items: baseline;}
  .lc_nv h1 { font-size: 23px; margin-left: 10px;}
  .lc_nv h1 span { font-size: 70%; margin-left: 0; display: inline-block;}
  .lc_nv ul a { margin: 0 8px;}
  
  .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 .section { padding: 40px 0;}
  .tc .section h2 { font-size: 24px;}
  .tc .section p,.tc .section ul.def{ font-size: 17px;}
  
  .tc .steps h3 { font-size: 20px;}
  .tc .steps .training h4 { font-size: 18px;}
  .tc .steps .period h4 { font-size: 20px; width: 200px;}
  .tc .steps .period p { padding: 10px 0 10px 20px;}
  
  .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)); }
  
  .tc .cta { padding: 0 0 40px;}
  footer .inner_ct { flex-wrap: wrap; justify-content: flex-start;}
  
}


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

@media screen and (max-width: 767px) {
  .gl_nv .btns,.lc_nv ul{ display: none;}
  .gl_nv .logo span,.nav.scrl .gl_nv .logo span{ margin: 0 0 0 15px;}
  .lc_nv,.nav.scrl .lc_nv{ padding: 0 0 0 132px; margin: -30px 0 0;}
  .nav.scrl { padding: 10px 0 5px;}
  .nav.scrl .gl_nv { height: auto;}
  .nav.scrl .gl_nv .logo span.img { width: 116px;}
  .nav.scrl .lc_nv h1 { margin-top: 0;}
  
  .sp_nav { margin: 0; position: fixed; top: 0; right: 0; z-index: 90; display: block; }
  .sp_nav .nav_ico { display: block; width: 45px; height: 45px; position: absolute; top: 10px; right: 15px; cursor: pointer;
    z-index: 91; transition: all .3s ease-in-out; }
  .sp_nav .nav_ico span { display: block; height: 4px; width: 35px; margin: 9px auto; background: #004180; transition: all .5s ease-in-out;
    border-radius: 1px;}
  .sp_nav.navOpen .nav_ico span:nth-of-type(1) { transform: translateY(14px) translateX(0) rotate(45deg); background: #4593d0;}
  .sp_nav.navOpen .nav_ico span:nth-of-type(2) { opacity: 0;}
  .sp_nav.navOpen .nav_ico span:nth-of-type(3) { transform: translateY(-12px) translateX(0) rotate(-45deg); background: #4593d0;}
  .sp_nav.navOpen .nav_sp { opacity: 1; right: 0;}
  
  .sp_nav .nav_sp{ overflow: auto; position: fixed; top: 0; bottom: 0; right: -1000px; width: calc(100% - 40px); background: #ffffff; 
    padding: 70px 15px 15px; box-sizing: border-box; opacity: 0; z-index: 90; transition: 0.3s ease-in-out; text-align: center;
    line-height: 1.3;}
  
  .sp_nav .nav_sp .btns{ position: absolute; left: 0; right: 0; bottom: 30px;}
  .sp_nav .nav_sp p{ color: #234a7c; font-size: 22px; margin-bottom: 20px;}
  .sp_nav .nav_sp li{ list-style: none; margin-bottom: 15px;}
  .sp_nav .nav_sp li a{ font-size: 20px; color: #000000;}
  
  .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 .section { padding: 30px 0;}
  .tc .section h2 { font-size: 22px; margin-bottom: 15px;}
  .tc .section p, .tc .section ul.def { font-size: 16px;}
  .tc .sec1 p, .tc .sec2 p{ margin-left: 0;}
  .tc .sec1 ul { margin: -15px 0 5px 1em;}
  
  .tc .steps .training h4 { font-size: 17px; }
  .tc .steps .period { flex-direction: column;}
  .tc .steps .period h4 { width: auto; text-align: left;}
  .tc .steps .period p { border-left: none; margin-left: 0; padding: 10px 0 0;}
  .tc .steps .cont { margin: 5px 0 15px max(15px, 3.5vw); padding: 15px 5px 15px 20px;}
  .tc .steps .cont.last { padding: 15px 5px 10px 0;}
  .tc .steps .cont ul { margin-left: 20px;}
  
  .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;}
  
  .tc .f_q .q { padding: 10px 40px 10px 30px;}
  .tc .f_q .q::before { top: 9px; left: 8px; font-size: 19px;}
  .tc .f_q .q::after { right: 10px; width: 20px;height: 20px;} 
  .tc .f_q .a { padding: 10px; margin: 0 5px;}
  

  .tc .cta a { width: 340px; font-size: 20px;}
  .page_top{ display: none;}
}

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

@media screen and (max-width: 479px) {
  .gl_nv .logo h2, .gl_nv .logo a { font-size: 17px;}
  .gl_nv .logo span.img,.nav.scrl .gl_nv .logo span.img{ width: 100px;}
  .gl_nv .logo span, .nav.scrl .gl_nv .logo span { margin: 0 0 0 5px;}
  .lc_nv, .nav.scrl .lc_nv { padding: 0 0 0 115px; margin: -28px 0 0;}
  
  .lc_nv h1 { font-size: 20px; margin-left: 0;}
  
  .sp_nav .nav_ico { right: 10px;}
  
  .inner_ct { width: calc(100% - 20px);}
  .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;}
  
}