@charset "utf-8";

/*============================================================
   HANDS-FREE TRAVEL OKINAWA　基本
  ============================================================ */
/*
layout.css
color:#2b2b2b;
point color1:#797cdc
point color2:#F7B703
*/ 


/*----------------------------------------------
 RESPONSIVE
------------------------------------------------*/ 

/* ------------------------------*/ 
@media screen and (min-width: 768px) {
.mobile{
display:none;
}
}
@media screen and (max-width: 767px) {
.pc{
display:none;
}
}

a :hover {
  text-decoration: none;
  color: #000;
}


/*--------------------------------------------------
   TOP
 --------------------------------------------------*/  

/* BASIC
 --------------------------------------------------*/ 

/* ---　base  ------------*/ 
body{
margin:0;
padding:0;
color:#2b2b2b;
letter-spacing:0.08em;
}

/* ---　link img  ---------*/ 
a:active img ,
a:hover img {
outline: 0;
opacity: 0.6;
}

/* ALL CONTENS
-------------------------------------------------------*/
#all{
width: 100%;
text-align:center;
margin-left: auto;
margin-right:auto; 
position: relative;
}


/*---Google ICONS ---*/
.material-icons {
font-family: 'Material Icons Outlined';
font-weight: 300 !important;
color:#787A7E ;
font-style: normal;
font-size: 28px !important;
line-height: 1 !important;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;

display: inline-flex;
vertical-align: middle;
margin-right:2px;
margin-bottom:5px;
}


/* MAIN IMG BASE
--------------------------------------------------------*/
#top-main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

#bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1; /* 背景に回す */
}

/* --- MOB --- */ 
@media (max-width: 767px) {
#top-main {
height: 80vh !important;
}
}

/* --- TITLE COPY --- */
h1.top-title {
 margin: 0;
	width: 54%;
 max-width: 580px;
 padding:35px 0 0 60px;
 text-align: left;
 z-index: 200;
}
.top-copy {
 font-size: 60px;
 margin:0 auto 0;
 padding:18% 70px 5%;
 line-height: 1.2;
 text-align: left;
	font-weight: 700;
 z-index: 200;
}
.button01{
 margin: 0;
	width: 54%;
 max-width: 580px;
 padding:0 0 0 60px;
 text-align: left;
 z-index: 200;
}


/* --- TAB --- */ 
@media screen and (max-width: 867px) {
h1.top-title {
 width: 70%;
	max-width: 480px;
 margin:0 ;
 padding:100px 25px 0 ;
 line-height: 1.1;
	text-align: left;
}
.top-copy {
 font-size: 48px;
 margin:0px auto 12px;
 padding:38% 20px 10% 40px;
	text-align: left;
	}
.button01{
 margin: 0;
	width: 64%;
 max-width: 580px;
 padding:0 0 0 40px;
}
}

/* --- MOB --- */ 
@media screen and (max-width: 428px) {
h1.top-title {
 width: 86%;
 margin:0 auto;
 padding:100px 20px 0 ;
 line-height: 1.1;
	text-align: left;
}
.top-copy {
 font-size: 34px;
 margin:0px auto 12px;
 padding:25% 10px 15% 25px;
	text-align: left;
}
.button01{
 margin: 0;
	width: 64%;
 max-width: 580px;
 padding:0 0 0 20px;
}
}

/* TOP CONCEPT
--------------------------------------------------------*/
.top-concept {
width: 100%;
margin:100px auto 30px;
padding: 0;
}
.top-concept img{
padding:0 25px 40px 25px !important;
}
.top-concept h2{
text-align: left !important;
}
.top-concept p {
font-size: 100%;
margin:40px 0 10px;
padding:10px 0 10px;
line-height: 220%;
text-align: left !important;
}

/* --- MOB --- */ 
@media screen and (max-width: 767px) {
.top-concept {
width: 99%;
margin:0 auto 0 !important;
padding:30px 15px 30px !important;
text-align: center !important;
}
.top-concept img{
margin:20px auto 20px !important;
padding:0 0 0 !important;
text-align: center;
}
.top-concept p {
margin:10px auto 10px;
padding:10px 0 10px;
line-height: 1.9;
text-align: left;
}
}


/* TOP PLAN
--------------------------------------------------------*/
.top-plan {
width: 100%;
margin:0 auto;
padding:50px 10px;
background-color: #FBF8F1;
}	
.top-plan2 {
width: 100%;
margin:0 auto;
padding:50px 10px;
background-color: #F6F0DE;
}	

/* --- CARDSTYLE CONTENTS --- */ 
.card {
	list-style: none;
 display: grid;
 grid-template-columns: repeat(2,1fr);
 gap: 90px;
}
.card__item {
  background: #fff;
  padding: 0 0 20px;
}
.card__img-area {
  aspect-ratio: 3/2.3;
  margin-bottom: 20px;
}
.card__img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text-area{
	width: 96%;
	margin: 0 auto;
	padding: 0 15px;
 color:#787A7E;
	font-size: 17px;
 font-size: 1.7rem;
	letter-spacing: 0.05em;
}
.card__title {
	 color:#2b2b2b;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
/*---- ANA YAMATO ------*/
.smaller-title {
  font-size:98%;
	 letter-spacing: 0.02em;
}

.button02{
 margin: 0 auto 0;
 max-width: 580px;
 padding:5px;
 text-align: center;
 z-index: 200;
}
/*---- TAB ------*/
@media screen and (max-width: 1090px) {	
.card {
	list-style: none;
 display: grid;
 grid-template-columns: repeat(2,1fr);
 gap: 50px;
}
}
/*---- MOB ------*/
@media screen and (max-width: 767px) {	
.card {
	list-style: none;
  display: grid;
 grid-template-columns: repeat(1,1fr);
  gap: 40px;
}
.card__item {
  background: #fff;
  padding: 0 0 20px;
}
.card__img-area {
  aspect-ratio: 3/2.3;
  margin-bottom: 20px;
}
.card__img-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text-area{
	width: 98%;
	margin: 0 auto;
	padding: 0 14px;
 color:#787A7E;
 font-size: 16px;
 font-size: 1.6rem;
	letter-spacing: 0.1em;
}
.card__title {
	 color:#2b2b2b;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}	
}		


.various-items{
 font-weight: 300;
	color:#787A7E ;
	padding:10px 3px 20px;
 font-size: 23px;
 font-size: 2.4rem;
 letter-spacing: 0.05em;
	margin:0 0 15px; 
}
/*---- MOB ------*/
@media screen and (max-width: 767px) {	
	.various-items{
 font-weight: 300;
	padding:10px 3px 20px;
 font-size: 18px;
 font-size: 1.8rem;
}
}

p.sp-line-height{
	margin-top:-15px;
	line-height: 84% !important;
}

/* FOOTER
 ------------------------------------------------------*/
/*footer*/
footer{
width:100%;
min-height:180px;
color:#fff;
margin: 0 auto!important;
padding:20px 0 9px;
background: #797cdc;
z-index: 200;
text-align: center;
}

.footer-logo img{
width:29%;
margin:0 auto;
padding:0 0;
text-align: center;
}
footer p{
font-size:80%;
}
footer a:link{ 
 text-decoration: none; 
 color:#ffffff !important;
}

footer a:visited { 
 color:#ffffff !important;
}

footer a:hover { 
	color: #F7B703 !important;
}

.okinawa_pre img { 
 width: 11%;
}

/*---- MOB ------*/
@media screen and (max-width: 767px) {	
footer{
min-height:160px;
padding:10px 0 8px;
}
.footer-logo img{
width:67%;
margin:0 auto;
padding:0 0;
text-align: center;
}
footer p{
font-size:90%;
}
	
.okinawa_pre img { 
 width: 26%;
}
}	
	
/*copyright*/
.copyright{
font-size:1.2rem;
margin:15px auto 0;
padding: 10px 0 6px;
letter-spacing: 0.1em;
text-align:center ;
}
/*---- MOB ------*/
@media screen and (max-width: 767px) {	
.copyright{
font-size:1.1rem;
margin:10px auto 0;
padding: 10px 0 8px;
}
}

.row-height {
	display: flex;
	flex-wrap: wrap;
}

.service-box {
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height:100%;
  text-align: center;
  border: 2px solid #333;
  padding: 10px 0;
  background: #fff;
}

.jp {
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

.en {
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  line-height: 110%;
}

/* ===== PARTNER 2枚カード ===== */
.partner-cards{
  margin: 24px auto 12px;
  max-width: 980px;
  padding: 0 16px;
}
.pc-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}
.pc-card{
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:22px 20px;
  text-align:center;
  border: 1px solid #000;
  text-decoration:none;
  min-height:120px;
}
.pc-card__title{ line-height:1.35; font-weight:700; font-size:clamp(16px,2.2vw,20px); }
.pc-card__powered{ display:inline-flex; align-items:center; gap:10px; font-size:15px; color:#555; margin:0 auto; text-align: center;}
.pc-card__powered img{ height:33px; width:auto; margin:0 auto; text-align: center; }

@media (max-width:640px){
  .pc-grid{ grid-template-columns:1fr; gap:16px; }
  .pc-links{ justify-content:center; }
}

/* ===== サービス横長バナー ===== */
.svc{ max-width:1100px; margin:30px auto; padding:0 16px; }
.svc__headline{
  text-align:center;
  font-weight:bold;
  font-size:21px;
  margin:10px 0 0;
  padding-bottom: 20px;
  color:#E83828;
}
.svc-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.svc-list > li{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center;
}
.svc-list img{
  width:100%; height:auto; display:block; border:1px solid #e5e5e5; border-radius:4px;
  background:#fff;
}
.svc a{ display:block; }

/* SP は1列に */
@media (max-width:720px){
  .svc-list > li{ grid-template-columns:1fr; }
}

/* ===== MOVIE（横スクロール/スナップ） ===== */
.movie{ max-width:1200px; margin:42px auto 24px; padding:0 16px; }
.movie__lead{ text-align:center; font-size:14px; color:#666; margin:0 0 16px; }

.movie-strip{
  display:flex; gap:16px; overflow-x:auto; padding:6px 4px 10px;
  scroll-snap-type:x mandatory;
}
.movie-card{
  flex:0 0 clamp(240px, 30vw, 360px);
  border:1px solid #e5e5e5; border-radius:6px; background:#fff;
  text-decoration:none; color:#222; scroll-snap-align:center;
}
.movie-card img{ width:100%; height:auto; display:block; border-bottom:1px solid #eee; }
.movie-card__caption{ display:block; padding:8px 10px; font-size:13px; }

.service-box-container {
	padding-bottom: 50px;
}

#map {
    width: 80%;
    height: 500px;
    margin:0 auto;
    max-width:1200px;
}
.svc__headline {
	border-bottom: 3px solid #d2b48c;
}

.svc .container {
	border-bottom: 3px solid #d2b48c;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .svc .container {
        max-width: 867px;
    }
}

.row-eq-heights {
    display: flex;
    flex-wrap: wrap;
}

.d-flex {
	display: flex;
	align-items: center;
}

.content-center {
	display: flex;
	align-items: center;
}

.content-title {
	font-weight: bold;
	text-align: left;
    color: #222;
	padding-left:3%;
}






/* ===== 背景（全幅） ===== */
.movie-bg{
  background-image: url("/img/index/movie_background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background-color: rgba(255,255,255,0.6);
  background-blend-mode: lighten;
  margin-bottom: 80px;
}

.movie-bg { padding: 24px 0 32px; }
.movie-viewport{
  max-width: 1200px;
  margin: 80px auto 0;
  overflow: hidden;
  position: relative;
}

.movie-slider-wrap { position: relative; }
.slider .slide-card{
  background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden; margin:0 8px;
}
.slider .thumb{ width:100%; aspect-ratio:16/9; overflow:hidden; }
.slider .thumb img,
.slider .thumb video,
.slider .thumb iframe{ width:100%; height:100%; display:block; }
.slider .caption{ padding:10px 14px 14px; font-size:16px; margin:0; }
.movie-viewport .slick-prev,
.movie-viewport .slick-next{
  z-index: 2;
}
.slick-prev:before, .slick-next:before{ color:#333; }
.slick-dots{ bottom: -26px; }
.slick-dots li button:before{ color:#bbb; opacity:1; }
.slick-dots li.slick-active button:before{ color:#333; }
.movie-lead{ text-align:center; color:#555; margin:15px 0 30px; font-weight: bold; }



/* PCナビ */
/* PCナビ */
.pc-nav-bar {
  padding: 20px;
  display: none;
}

.pc-nav-list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  gap: 20px; /* 項目間の間隔 */
}

.pc-nav-list li {
  display: inline-block;
  padding: 5px 20px;
  padding-right: 0px;
  position: relative; /* ← 追加 */
}

.pc-nav-list li:not(:last-child)::after {
  content: "|";
  margin-left: 40px;   /* テキストと「｜」の間隔 */
  color: #333;
  position: static;    /* ← absolute は不要 */
}

.pc-nav-list a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}


/* PCのみ表示 (768px以上) */
@media (min-width: 768px) {
  .pc-nav-bar {
    display: block;
  }
}


.mobile_header {
  position: relative;
  padding: 20px;
  display: none;
}

.hamburger {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border: none;
  background: #797cdc;
  cursor: pointer;
}

.hamburger__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #fff;
  transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
  top: 14px;
}
.hamburger__line:nth-of-type(2) {
  top: 23px;
}
.hamburger__line:nth-of-type(3) {
  top: 32px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: #fff;
  box-shadow: 2px 0 4px rgba(0,0,0,.1);
  transform: translateX(-100%);
  transition: transform .4s;
  z-index: 90;
}

.nav.active {
  transform: translateX(0);
}

.nav__list {
  margin: 0;
  padding: 100px 0 0;
  list-style: none;
}

.nav__item {
  padding: 0 20px;
}

.nav__link {
  display: block;
  padding: 15px 0;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

@media (max-width: 768px) {
  .mobile_header {
    display: block;
  }
}

/* URLリンクのスタイル */
.site-link {
  color: blue;                 /* 青色に変更 */
  text-decoration: underline;  /* 下線つき（任意） */
  display: inline-block;       /* 幅を制御するため */
  max-width: 100%;            /* 必要に応じて幅を調整 */
  overflow: hidden;            /* はみ出しを隠す */
  text-overflow: ellipsis;     /* ... を表示 */
  vertical-align: middle;
  word-break: break-all;
}

.google-route-btn {
  display: inline-flex;           /* アイコンと文字を横並び */
  align-items: center;            /* 縦位置を揃える */
  gap: 6px;                       /* アイコンと文字の間隔 */
  padding: 6px 14px;              /* 内側余白 */
  border-radius: 20px;            /* 丸み */
  background-color: #f2f2f2;      /* 背景色 */
  color: #333;                    /* 文字色 */
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;          /* 下線消し */
  transition: background-color 0.2s;
}

.google-route-btn:hover {
  background-color: #e0e0e0;      /* ホバー時に少し濃く */
}

.google-route-btn img,
.google-route-btn svg {
  width: 16px;   /* アイコンサイズ */
  height: 16px;
}

/* MOVIEの表示している数が少ないため、PC の場合だけ transform を消す */
@media (min-width: 769px) {
  .slick-track {
    transform: none !important;
  }
}