@charset "UTF-8";

/*********************************************
RESPONSIVE STYLE （タブレット／スマートフォン対応）

・common.css の「後」に読み込むこと（上書き専用の追加ファイル）
・common.css / HTML の構造には一切手を入れない
・1024px 以下の既存 @media（common.css 末尾）はそのまま残る
・PC 幅は common.css の元デザインのまま。このファイルの中身は
  すべて下記メディアクエリの内側にあり、PC 表示には影響しない

・ブレイクポイント
    ┌ 1カラム化＋ハンバーガー ─────────────────────┐
    │ (A) ～979px（向き問わず）                              │
    │      スマートフォン（横向き 932px 等も含む）／iPad 縦 768px │
    │ (B) 980～1024px かつ「縦向き」                          │
    │      12.9インチ iPad Pro・13インチ iPad Air の縦（1024px）  │
    └──────────────────────────────────────┘
    ～599px : 上記に加えてスマートフォン向けの調整

・(B) で「縦向き」を条件にしている理由
    通常の iPad は【横】が 1024px、大型 iPad は【縦】が 1024px で、
    幅だけでは両者を区別できない。orientation を併用することで
      ・iPad 縦  → ハンバーガー
      ・iPad 横  → サイドメニューを維持
    を両立させている。
**********************************************/


/* ハンバーガーボタン（JS が body 直下に生成）は PC 表示では出さない
--------------------------------------------*/
#navToggle{
display:none;
}


/* 会社概要：表と契約書ボタンの左右をそろえる
   表は width:98% + margin:0 5px で左右非対称（PC で左40/右47）
   だったため、コンテナいっぱいに広げて基準をそろえる。
--------------------------------------------*/
#company #info table{
width:100%;
margin-left:0;
margin-right:0;
}

/* #info は 35px、#contract は 40px と外側の余白がずれていたので
   表側に合わせる（タブレット幅以下は後段で両方とも同値に上書き） */
#company #contract{
margin-left:35px;
margin-right:35px;
}


/* 会社概要の契約書ボタンを 2 列で幅いっぱいに
   （45% + 20px だと右側に 48〜66px の余りが出ていた）
   ※ここはメディアクエリの外なので PC 幅にも適用される。
     スマホ幅（～599px）は後段のブロックで 1 列に上書きされる。
--------------------------------------------*/
#company #contract ul{
float:none;
width:100%;
}

#company #contract ul li{
width:48%;
margin-right:4%;
}

#company #contract ul li:nth-child(2n){
margin-right:0;
}


/*********************************************
TABLET & SMARTPHONE
  (A) ～979px（向き問わず）
  (B) 980～1024px かつ縦向き（大型 iPad の縦）
**********************************************/
@media only screen and (max-width: 979px),
       only screen and (min-width: 980px) and (max-width: 1024px) and (orientation: portrait) {

/* 最小幅の解除
--------------------------------------------*/
#wr,
header,
footer{
min-width:0;
}

footer{
min-height:0;
}


/* はみ出し防止
--------------------------------------------*/
#wr img,
footer img{
max-width:100%;
height:auto;
}

#wr table{
max-width:100%;
}


/* 2カラム → 1カラム
   #sd を display:contents で分解し、
   ロゴ／ナビ → 本文 → SNS・バナー・住所 の順に並べ替える
--------------------------------------------*/
#wr{
display:-webkit-flex;
display:flex;
-webkit-flex-direction:column;
flex-direction:column;
max-width:none;
}

#wr:after{
display:none;
}

#sd{
display:contents;
}

#sd:after{
display:none;
}

#sd h1{-webkit-order:1; order:1;}
#sd h2{-webkit-order:2; order:2;}
nav#gn {-webkit-order:3; order:3;}
#mn    {-webkit-order:4; order:4;}
#sns   {-webkit-order:5; order:5;}
#bn    {-webkit-order:6; order:6;}
#sd address{-webkit-order:7; order:7;}
#sd p.copy {-webkit-order:8; order:8;}

/* display:contents で失われる #sd の指定を子要素に振り直す */
#sd h1,
#sd h2,
#sns,
#bn,
#sd address,
#sd p.copy{
text-align:center;
}


/* ヘッダーバー（ロゴを固定バー化）
   #sd h1 そのものをバーとして使う（要素を増やさない）
--------------------------------------------*/
body{
padding-top:56px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

#sd h1{
position:fixed;
z-index:1002;
top:0;
left:0;
width:100%;
height:56px;
padding:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
text-align:left;
background:#fff;
border-bottom:1px solid #e0e0e0;
}

#sd h1 a{
display:inline-block;
padding:6px 0 0 12px;
}

#sd h1 img{
width:auto;
height:44px;
}

/* キャッチコピーはバーに入らないため非表示（footer 側に情報あり） */
#sd h2{
display:none;
}


/* ハンバーガーボタン
--------------------------------------------*/
#navToggle{
position:fixed;
z-index:1003;
top:0;
right:0;
display:block;
width:56px;
height:56px;
margin:0;
padding:0;
border:0;
outline:0;
background:transparent;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
}

#navToggle span,
#navToggle span:before,
#navToggle span:after{
content:"";
position:absolute;
display:block;
width:24px;
height:2px;
background:#4faee7;
-webkit-transition:all .25s ease;
transition:all .25s ease;
}

#navToggle span{
top:50%;
left:50%;
margin:-1px 0 0 -12px;
}

#navToggle span:before{ top:-8px; left:0; }
#navToggle span:after { top:8px;  left:0; }

/* 開いている時は × に変化 */
.nav-open #navToggle span{
background:transparent;
}

.nav-open #navToggle span:before{
top:0;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

.nav-open #navToggle span:after{
top:0;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}


/* ドロップダウンするナビ本体
   .js-nav（JS が動いた時だけ付く）を条件にすることで、
   JS 無効時はナビが従来どおり本文の上に表示されて操作できる
--------------------------------------------*/
.js-nav nav#gn{
position:fixed;
z-index:1001;
top:56px;
left:0;
width:100%;
max-height:-webkit-calc(100% - 56px);
max-height:calc(100% - 56px);
overflow-y:auto;
-webkit-overflow-scrolling:touch;
border-bottom:1px solid #e0e0e0;
-webkit-box-shadow:0 6px 12px rgba(0,0,0,.12);
box-shadow:0 6px 12px rgba(0,0,0,.12);
-webkit-transform:translateY(-120%);
transform:translateY(-120%);
-webkit-transition:-webkit-transform .25s ease;
transition:transform .25s ease;
}

.js-nav.nav-open nav#gn{
-webkit-transform:translateY(0);
transform:translateY(0);
}

/* パネル内は縦積みのリストに戻す */
nav#gn ul.mn{
margin:0;
border-top:none;
}

nav#gn ul.mn li{
font-size:15px;
font-size:1.5rem;
}

nav#gn ul.mn li a{
padding:15px 12px 15px 26px;
background-position:10px 50%;
}

nav#gn ul.sb{
margin:0;
padding:6px 0 10px;
}

nav#gn ul.sb li{
font-size:13px;
font-size:1.3rem;
}

nav#gn ul.sb li a{
padding:11px 12px 11px 26px;
}


/* SNS・バナー・住所（本文の下へ）
--------------------------------------------*/
#sns{
margin:30px 0 0;
}

#sns li{
display:inline-block;
margin:0 4px;
}

#bn{
margin:14px auto 0;
max-width:600px;
}

#bn li{
display:inline-block;
width:47%;
max-width:180px;
margin:0 1% 6px;
vertical-align:top;
}

#sd address p{
margin:20px 0 0;
}

#sd p.copy{
margin:10px 0 30px;
}


/* 本文カラム
--------------------------------------------*/
#mn{
float:none;
width:auto;
margin:0;
}

/* 左右はブラウザの端から 5px（スマホ幅と揃える） */
#mn #in{
margin:20px 5px 0;
padding:60px 0 0;
background-position:50% 4px !important;
}

#mn #plane{
display:none;
}

#mn #in h1{
padding:9px 0 0 58px;
font-size:16px;
font-size:1.6rem;
background-position:0 100%;
}

#mn #in #ct .mn{
float:none;
width:auto;
margin:0;
}

#mn #in #ct .mn .in{
margin:25px 20px 0;
}

#mn #in #ct .sb{
float:none;
width:auto;
max-width:400px;
margin:25px auto 0;
}

/* 絶対配置のキャプションを通常配置へ */
#about #htc .sb dl dt,
#voice #profile .sb dl dt{
position:static;
margin:12px 0 0;
}

#about #htc .sb dl dd.photo,
#voice #profile .sb dl dd.photo{
margin:0;
}


/* ヘッダーの企画ボタン（/plan/）
--------------------------------------------*/
header{
position:static;
}

header a,
header a:hover{
margin-top:0;
padding:18px 0 40px;
}


/* ローカルナビ
--------------------------------------------*/
.ln ul li.lv1 a{
padding:0 20px 0 10px;
line-height:36px;
font-size:13px;
font-size:1.3rem;
}

.ln ul li.lv1 .lv2{
max-width:90vw;
}

.ln ul li.lv1 dl.lv2{
width:auto;
max-width:300px;
}

.ln ul li.lv1 dl.lv2 dt,
.ln ul li.lv1 dl.lv2 dd.desc,
.ln ul li.lv1 dl.lv2 dd.photo{
float:none;
width:auto;
margin:5px 0 0;
}


/* フォームのはみ出し防止
--------------------------------------------*/
#slick fieldset.blocks{
float:none;
width:100%;
min-width:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

/* 入力ヒントの吹き出し。white-space:nowrap で最大 483px あり、
   絶対配置のままスクロール領域を広げてページ全体の横幅を
   押し広げてしまうため、折り返し可にして幅を制限する */
#slick span.slick-tip{
white-space:normal;
max-width:200px;
}


/* 送信中オーバーレイ（固定ヘッダーより前面に出す）
--------------------------------------------*/
#wait div{
z-index:1100;
}

#wait p{
left:5%;
width:90%;
margin:0 !important;
z-index:1110;
}


/*********************************************
TOP
**********************************************/

/* --- #top #news （イスラエル観光親善大使からの一言）-----------
   デザインは PC と同じ common.css の元のまま（bg_balloonL.png /
   bg_balloonR.png）。ただし写真が吹き出しより 34px 下にはみ出し、
   43px の吹き出しに対して 77px の高さを占有していたため、
   写真の下部を切り取って上下の余白を詰める。
   （背景画像を使わない CSS 版はスマホ幅～599px のみ）
------------------------------------------------------------ */
#top #news{
position:relative;
margin:8px 0 0;
}

/* 写真は絶対配置にして通常の流れから外す。
   ・#news の高さは吹き出しの 43px ちょうどになる
   ・下部はメインビジュアル（「エルサレム近郊」ラベルの側）に
     潜り込んで隠れるので、切り取り線が出ない
   DOM 上 #news は #mv より前にあり、どちらも z-index:auto の
   位置指定要素なので、#mv が後から描画されて写真が背面になる。
   z-index の指定は不要。 */
#top #news div{
position:absolute;
top:-16px;
right:10px;
width:95px;
height:auto;
overflow:visible;
margin:0;
}

#top #mv{
margin:10px 0 0;
}

/* 元デザインの縦横比（1004 x 340）を保ったまま可変に */
#top #mv dl{
height:0;
padding-bottom:33.8%;
background-size:cover !important;
background-position:50% 50% !important;
}

/* 幅が狭いとタイトル・説明文が MORE ボタンに重なるため右を空ける。
   折り返すと下段の説明文とぶつかるので 1 行に固定する */
#top #mv dl dt{
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding-right:175px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

#top #mv dd.desc{
right:175px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

#top #mv p{
top:12%;
}

/* --- カードグリッドを float から flex へ ---------------------
   float 並びはカードの高さが揃わないと次の段が引っかかり、
   段が崩れる。flex-wrap にすると
     ・同じ行の要素は自動的に同じ高さになる（align-items:stretch）
     ・行の折り返しが常に正しい位置で起きる
   ため、段崩れが構造的に発生しなくなる。

   ※ DOM 構造が2種類あるので、それぞれ別に指定している。
     #feature … <a> の中に <dl>（＝ flex アイテムは <a>）
     #voice / #site … <a> と <dl> が並列（＝ flex アイテムは <dl>）
       index.html で <a> が入れ子になっているため、
       ブラウザのパーサが <a> を分割してこうなる。
------------------------------------------------------------ */
/* float:left / width:100% は common.css のまま維持する。
   直前の #mv が float:left のため、ここで float を外すと
   回り込んで潰れてしまう。追加するのは flex 指定だけ。 */
#top #feature,
#top #voice,
#top #site{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}

#top #feature:after,
#top #voice:after,
#top #site:after{
display:none;   /* common.css の div:after クリアフィックスを無効化 */
}

/* パーサが生成した中身の無い <a>（幅・高さとも 0）を列から外す */
#top #voice > a,
#top #site > a{
display:none;
}

/* common.css の dd.photo{height:100%} を打ち消す。
   float だった頃は dl の高さが auto だったため 100% は auto に
   解決されていたが、dl が flex アイテムになって高さが確定すると
   写真がカード全体を占有し、名前（dd.cate）とタイトル（dt）が
   カードの外へ押し出されてしまう。 */
#top #voice dd.photo,
#top #site dd.photo{
height:auto;
}


/* 特徴：PC と同じ 4 列 */
#top #feature > a{
display:block;
width:24%;
margin:0 1.33% 20px 0;
}

#top #feature > a:nth-of-type(4n){
margin-right:0;
}

#top #feature dl{
float:none;
width:100%;
height:100%;   /* 行の高さいっぱいに広げてカード高を揃える */
margin:0;
}

#top #feature dl dd.desc{
margin:12px 12px 15px;
}


/* 過去のツアー：2 列 */
#top #voice > dl{
float:none;
width:49%;
margin:0 2% 20px 0;
}

#top #voice > dl:nth-of-type(2n){
margin-right:0;
}

#top #voice dd.desc{
margin-bottom:15px;
}


/* 観光地：3 列 */
#top #site > dl{
float:none;
width:32%;
margin:0 2% 25px 0;
}

#top #site > dl:nth-of-type(3n){
margin-right:0;
}


/*********************************************
ABOUT
**********************************************/
#about #feature dl{
width:100%;
}



/*********************************************
VOICE
**********************************************/
#voice #profile h2{
padding:30px 20px 0;
}

#voice #profile h3{
padding:0 20px 10px;
}

#voice #schedule dl{
width:50%;
}


/*********************************************
COMPANY
**********************************************/
#company #info,
#company #contract,
#faq #list,
#privacy #info,
#plan #form,
#contact #form{
margin:25px 20px 0;
}

#company #info table th{
white-space:normal;
}


/*********************************************
TOUR （/tour/ 配下の各ツアーページ）

これらのページは common.css ではなく form.css を読み込むが、
#wr / #sd / #mn / #in / nav#gn という骨格は common.css と同一
なので、上の共通指定がそのまま効く。
ここではツアーページ固有の中身だけを調整する。
**********************************************/
#tour #about,
#tour #schedule,
#tour #term,
#tour #contact{
padding:0 12px;
}

/* ツアータイトル（枠付きの大見出し）。PC は 40px */
#tour #mn #in #ct h1{
margin:8px;
padding:12px 16px 10px;
font-size:26px;
font-size:2.6rem;
line-height:1.35;
}

#tour #mn h2{
margin-top:30px;
padding:28px 3px 0;
font-size:24px;
font-size:2.4rem;
}

#tour #mn h3,
#tour #form h3{
font-size:18px;
font-size:1.8rem;
}

#tour #contact h4{
font-size:20px;
font-size:2.0rem;
}

#tour #form.thankyou h4{
font-size:17px;
font-size:1.7rem;
}

#tour #mn p{
font-size:15px;
font-size:1.5rem;
line-height:1.7;
}

/* ツアー情報・日程表の表 */
#tour #about .mn table,
#tour #about .mn.full table,
#tour #schedule .mn table{
width:100%;
margin:10px 0 0;
}

#tour #about .mn table th,
#tour #about .mn table td,
#tour #schedule .mn table th,
#tour #schedule .mn table td{
padding:8px 10px;
font-size:14px;
font-size:1.4rem;
}

/* ツアー情報の見出し列は width:1% + nowrap で内容に合わせて
   縮む作りなので nowrap のまま残す。normal にすると 1 文字ずつ
   縦に潰れてしまう（～599px では下のブロックで縦積みにする）。
   日程表の td だけは nowrap のままだと横にはみ出すので解除する。 */
#tour #schedule .mn table td{
white-space:normal;
}

/* 旅行条件 */
#tour #mn #in #ct #term .mn{
width:auto;
margin:20px 0 0 !important;
}

#tour #term .mn .in{
padding:15px 16px;
}

#tour #contact address{
font-size:14px;
font-size:1.4rem;
line-height:1.7;
}

/* 申込フォーム。form.css の margin-right:0 !important のせいで
   右端だけ白い背景に接してしまうため、白背景の内側に
   左右そろえて 5px の余白を確保する（元指定が !important なので
   こちらも !important が必要）。 */
#tour #mn #in #ct #form .mn .in{
margin-left:5px !important;
margin-right:5px !important;
}

/* 旅券の有効満了日。赤枠付きの日付が途中で改行されると
   枠が分断されてしまうので、1 行に固定する。
   inline のままだと枠が行をまたいで崩れるため inline-block にする。 */
#tour #form div.notes strong span{
display:inline-block;
white-space:nowrap;
/* li のぶら下げインデント（text-indent:-1em）は継承プロパティ。
   inline-block にすると span 自身の 1 行目に効いてしまい、
   文字が赤枠の外へずれるので打ち消す。 */
text-indent:0;
}

/* 上の nowrap で行が早く折り返されるため、両端揃えのままだと
   その行の文字間が大きく開いてしまう。この箇所だけ左揃えにする。 */
#tour #form div.notes li{
text-align:left;
}

}




/*********************************************
SMARTPHONE ( ～599px )
**********************************************/
@media only screen and (max-width: 599px) {

/* 見出しの縮小
--------------------------------------------*/
#about #htc .mn h2,
#site #area .mn h2,
#voice #profile h2,
#faq #list h2,
#privacy #info h2,
#plan #form h2,
#contact #form h2{
font-size:28px;
font-size:2.8rem;
}

#about #htc .mn h3,
#site #area .mn h3,
#voice #profile h3,
#company #info h2,
#plan #form h3,
#contact #form h3{
font-size:18px;
font-size:1.8rem;
}

#site .site h3,
#voice #schedule h3{
font-size:24px;
font-size:2.4rem;
}

#faq #list p,
#privacy #info p,
#privacy #info ul,
#plan #form p,
#contact #form p{
font-size:15px;
font-size:1.5rem;
}


/* 本文まわり
--------------------------------------------*/
#mn #in{
margin:15px 5px 0;
padding-top:48px;
background-size:auto 34px !important;   /* ページタイトル画像を縮小 */
}

#mn #in #ct .mn .in{
margin:20px 12px 0;
}

#company #info,
#company #contract,
#faq #list,
#privacy #info,
#plan #form,
#contact #form{
margin:20px 12px 0;
}

#site .site,
#site .nextarea{
width:96%;
margin:0 2%;
padding:35px 0;
}

#site .site div,
#site .site p{
width:100%;
}

#site .site div img{
border-width:5px;
}

#site .nextarea p{
width:100%;
}

#site .nextarea p a{
font-size:22px;
font-size:2.2rem;
}

#about #feature dl dt,
#about #feature dl dd.desc,
#about #feature dl dd.photo,
#about #feature dl.i2 dt,
#about #feature dl.i2 dd.desc,
#about #feature dl.i2 dd.photo,
#about #feature dl.i4 dt,
#about #feature dl.i4 dd.desc,
#about #feature dl.i4 dd.photo{
float:none;
width:auto;
}

#about #feature dl dt{
margin:20px 20px 0;
font-size:18px;
font-size:1.8rem;
}

#about #feature dl dt span{
font-size:28px;
font-size:2.8rem;
}

#about #feature dl dd.desc{
margin:12px 20px 20px;
}

#voice #profile .mn table th{
white-space:normal;
}

/* ul が float:left で内容幅に縮むため、li を width:auto に
   しても広がらない。ul の float を外して全幅にする。 */
#company #contract ul{
float:none;
width:100%;
}

#company #contract ul li{
float:none;
width:auto;
margin-right:0;
}


/* 会社概要・プロフィールの表を縦積みに
--------------------------------------------*/
#company #info table,
#company #info table tbody,
#company #info table tr,
#company #info table th,
#company #info table td{
display:block;
width:auto;
}

#company #info table th{
border-right:none;
text-align:left;
padding:10px 10px 0;
font-weight:bold;
}

#company #info table td{
padding:0 10px 10px;
}


/*********************************************
TOUR
**********************************************/
#tour #mn #in #ct h1{
margin:6px;
padding:10px 12px 8px;
font-size:19px;
font-size:1.9rem;
border-width:3px;
}

#tour #mn h2{
font-size:20px;
font-size:2.0rem;
margin-top:24px;
padding:24px 3px 0;
}

#tour #mn h3,
#tour #form h3{
font-size:16px;
font-size:1.6rem;
}

#tour #contact h4{
font-size:18px;
font-size:1.8rem;
}

#tour #mn p{
font-size:14px;
font-size:1.4rem;
}

#tour #about,
#tour #schedule,
#tour #term,
#tour #contact{
padding:0 8px;
}

/* ツアー情報の表を縦積みに（項目名と内容が横に並ぶと窮屈なため） */
#tour #about .mn table,
#tour #about .mn table tbody,
#tour #about .mn table tr,
#tour #about .mn table th,
#tour #about .mn table td{
display:block;
width:auto;
}

#tour #about .mn table th{
border-right:none;
text-align:left;
padding:10px 10px 0;
font-weight:bold;
white-space:normal;   /* 縦積みなので長い項目名も折り返してよい */
}

#tour #about .mn table td{
padding:0 10px 10px;
}

#tour #term .mn .in{
padding:14px 12px;
}

/* お問合わせ：PC 向けの深い字下げ（h3 は左 55px、
   電話番号の枠は左マージン 62px + ボーダー 8px + パディング 20px
   ＝実質 90px、p は左 50px）を詰める */
#tour #contact h3{
margin:28px 0 0;
}

/* 引用バーは残しつつ、PC 向けの深い字下げ
   （左マージン62px + ボーダー8px + パディング20px ＝ 実質90px）を詰める */
#tour #contact div{
margin:5px 0 16px;
padding:2px 0 8px 10px;
border-left-width:4px;
}

#tour #contact p{
margin:12px 0 20px;
}

/* ご案内とご注意：左右のパディングと箇条書きの字下げを詰める */
#tour #form div.notes{
padding:16px 12px 20px;
}

#tour #form div.notes li{
margin-left:0;
}


/*********************************************
TOP
**********************************************/
/* --- #top #news （イスラエル観光親善大使からの一言） -----------
   PC・タブレットは common.css の元デザイン（bg_balloonL.png /
   bg_balloonR.png）のまま。スマホ幅だけは横幅が足りないので、
   背景画像を使わず CSS で描いた縦積みのカードに差し替える。
------------------------------------------------------------ */
#top #news{
float:none;
display:-webkit-flex;
display:flex;
-webkit-align-items:center;
align-items:center;
margin:14px 0 0;
}

#top #news:after{
display:none;   /* common.css の div:after クリアフィックスを無効化 */
}

/* 吹き出し本体（右端は絶対配置の写真ぶんを空ける） */
#top #news dl{
position:relative;
-webkit-flex:1 1 auto;
flex:1 1 auto;
display:block;
float:none;
width:auto;
min-width:0;
margin:0 84px 0 0;
background:#fff;
border-radius:10px;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.10);
box-shadow:0 1px 3px rgba(0,0,0,.10);
}

/* しっぽ（右の写真の方を向く） */
#top #news dl:after{
content:"";
position:absolute;
top:50%;
left:100%;
width:0;
height:0;
margin-top:-9px;
border:9px solid transparent;
border-left-color:#fff;
}

/* 見出しラベル（旧 bg_balloonL.png） */
#top #news dl dt{
display:block;
float:none;
width:auto;
height:auto;
padding:7px 14px;
text-indent:0;   /* 画像に頼らず本文テキストを表示する */
font-size:11px;
font-size:1.1rem;
font-weight:500;
line-height:1.4;
letter-spacing:.02em;
color:#fff;
white-space:normal;
border-radius:10px 10px 0 0;
background:#4faee7;
background:-webkit-linear-gradient(top,#5fb8ef,#3f9fd9);
background:linear-gradient(to bottom,#5fb8ef,#3f9fd9);
}

/* メッセージ（旧 bg_balloonR.png） */
#top #news dl dd{
display:block;
height:auto;
margin:0;
padding:9px 14px 10px;
font-size:13px;
font-size:1.3rem;
line-height:1.5;
color:#444;
background:none;
border-radius:0 0 10px 10px;
}

#top #news dl dd table{
height:auto;
}

/* 石田氏の写真
   タブレット幅と同じく絶対配置にして、下部をメインビジュアルの
   背面に潜り込ませる。こうしないと画像の下端（水平の切り口）が
   そのまま見えてしまう。
   吹き出しの右マージンで写真ぶんの幅を確保している。 */
#top #news div{
position:absolute;
top:auto;   /* ～979px 側の top:-16px を解除。両方効くと箱が縦に伸びる */
right:0;
bottom:-22px;
width:80px;
height:auto;
overflow:visible;
float:none;
margin:0;
}

#top #news div img{
width:100%;
}


#top #mv dl{
height:180px;
padding-bottom:0;
}

#top #mv dl dt{
bottom:0;
height:50px;
padding:7px 8px 0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
font-size:12px;
font-size:1.2rem;
line-height:1.5;
}

#top #mv dt strong{
margin:0 5px 0 0;
font-size:14px;
font-size:1.4rem;
}

#top #mv dd.desc,
#top #mv dd.more{
display:none;
}

#top #mv dd.cate a{
font-size:11px;
font-size:1.1rem;
}

/* カードグリッドの列数（flex の指定は ～979px 側に集約。
   ここでは列数と文字サイズだけを上書きする） */

/* 特徴：2 列 */
#top #feature > a{
width:49%;
margin:0 2% 20px 0;
}

#top #feature > a:nth-of-type(4n){
margin-right:2%;
}

#top #feature > a:nth-of-type(2n){
margin-right:0;
}

#top #feature dl dt{
font-size:14px;
font-size:1.4rem;
}

#top #feature dl dd.desc{
min-height:0;
margin:8px 10px 12px;
}

/* 過去のツアー：1 列 */
#top #voice > dl{
width:100%;
margin:0 0 20px;
}

#top #voice dl dt{
font-size:15px;
font-size:1.5rem;
}

/* 観光地：2 列 */
#top #site > dl{
width:49%;
margin:0 2% 20px 0;
}

#top #site > dl:nth-of-type(3n){
margin-right:2%;
}

#top #site > dl:nth-of-type(2n){
margin-right:0;
}

#top #site dl dt{
font-size:13px;
font-size:1.3rem;
}


/*********************************************
FOOTER
**********************************************/
footer ul.mn{
padding:30px 10px 0;
}

footer ul.mn li{
font-size:14px;
font-size:1.4rem;
margin-bottom:8px;
}

footer ul.sb{
margin:8px 10px 0;
}

footer ul.sb li{
font-size:12px;
font-size:1.2rem;
margin-bottom:8px;
}

footer address{
margin:20px 12px;
}

footer address p{
font-size:12px;
font-size:1.2rem;
line-height:1.6;
}

footer p{
padding:0 12px;
font-size:12px;
font-size:1.2rem;
line-height:1.6;
}


/*********************************************
FORM ( /plan/ )
**********************************************/
#slick dt{
float:none;
width:auto;
margin:14px 0 5px;
text-align:left;
}

#slick dd.field{
float:none;
width:auto;
}

/* .field は中の input が float:left なので、float を外すと
   高さを失う（PC では .field 自身が float していて中身を
   含んでいた）。高さが 0 になると position:absolute かつ
   height:100% のアイコンが消えるため、clearfix で高さを戻す。 */
#slick dd.field:after{
content:"";
display:block;
clear:both;
}

/* .half（49%）や .two-third（65%）が単独で置かれている項目
   （年齢・国籍・郵便番号・電話番号・携帯番号など）は、
   右側にだけ大きな余白が残ってしまうので全幅にする。
   姓／名や生年月日のように複数の入力が横に並ぶ組は
   :only-of-type に該当しないため、そのまま維持される。
   元の指定が !important のため、こちらも !important が必要。 */
#slick dd.field input:only-of-type,
#slick dd.field select:only-of-type,
#slick dd.field textarea:only-of-type{
width:100% !important;
}

/* iOS でのフォーカス時ズームを防ぐ */
#slick input[type="text"],
#slick input[type="email"],
#slick input[type="tel"],
#slick select,
#slick textarea{
font-size:16px;
}

#slick .btn{
margin:20px 0 0 !important;
}

#voice #schedule dl{
width:100%;
float:none;
}

}