@charset "UTF-8";
/**
 * Made By MaterializeCSS.com
 * max-width は決まっているようで、.container width % で表示幅を決めた
 * Custom Stylesheet
 * ---
 * ベンダープレフィックス(-webkit-)は、-moz-,-ms-,-o- は今時は不要.
 * transform,animation,keyframes 以外はベンダープレフィックス自体不要
*/
/* 定数定義 */
:root {
  --color-red: #d6002b;
  --color-grey-light: #E1DED9;
  --color-grey-dark: #65615D;
  --color-blue: #00285F;
  --color-black: #000000;
  --color-grey-white:#F0F0F0;
  --color-input-bg: #ececec; /* 入力フィールド 背景グレー */
  --color-input-border: #ccc; /* 入力フィールド 枠 */
  --color-form-forcus-bg: rgb(255, 244, 223); /* 入力フォーム Focus背景色 */
}

/* サイト共通 Materialize標準値の再設定. ABG指定の'ARQUITECTA','Arial'が優先だと英数字がメイリオより小さすぎる */
html {
  font-family: 'メイリオ', Meiryo,'ARQUITECTA','Arial','Museo Sans','Avenir','Helvetica Neue','Helvetica','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
}
.container { min-width: min(100%, 1280px); }
.container .narrow { margin-left: min(10vw, 80px); margin-right: min(10vw, 80px); }
.container .narrow2 { margin-left: min(20vw, 160px); margin-right: min(20vw, 160px); }
@media (max-width: 600px){ .container .narrow, .container .narrow2 { margin-left: 2vw; margin-right: 2vw; } }

.icon-block { padding: 0 0.2em ; position: relative; bottom: -0.25em;}

h2 {
  font-size: clamp(14px, 2.2vw, 28px);
  color: var(--color-grey-dark);
  margin-top: 0;
  margin-bottom: 0;
}
h3 {
  font-size: clamp(12px, 2.0vw, 24px);
  color: var(--color-grey-dark);
  margin-top: 0;
  margin-bottom: 0;
}
h4 {
  font-size: clamp(10px, 1.5vw, 20px);
  color: var(--color-grey-dark);
  margin-top: 0;
  margin-bottom: 0;
}
.h3same {
  font-size: clamp(12px, 2.0vw, 24px);
  color: var(--color-grey-dark);
  margin-top: 0.5em !important;
}

/* ブラウザ デフォルト 未設定に備えた設定 */
input.invalid[type=text], input.invalid[type=password], input.invalid[type=email], input.invalid[type=tel], textarea
 { border-bottom: 3px solid var(--color-red) !important;  box-shadow: 0 0 0 0 var(--color-red) !important; } /* required の時に未入力(invalid) */
input[type=text], input[type=password], input[type=email], input[type=tel], textarea
 { border-bottom: 2px solid var(--color-red) !important; box-shadow: 0 0 0 0 var(--color-red) !important; padding-left: 0.5em !important; font-size: 1.3em !important; } /* フォーカスの当たっていない時 */
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus
 { border-bottom: 2px solid var(--color-red) !important; box-shadow: 0 0 0 0 var(--color-red) !important; background-color: var(--color-form-forcus-bg) !important;} /* フォーカスのある時 */
input[type=text]:disabled, input[type=password]:disabled, input[type=email]:disabled, input[type=tel]:disabled, textarea:disabled
 { border-bottom: 2px solid var(--color-grey-dark) !important; box-shadow: 0 0 0 0 var(--color-grey-light) !important; background-color: var(--color-grey-light) !important;} /* フォーカスのある時 */

select { border-bottom: 2px solid var(--color-red) !important;  }
select:focus { background-color: var(--color-form-forcus-bg) !important; }

#toast-container .toast{ /* Toast 色変更 */
  background-color: var(--color-red);
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.28), 0 1px 10px 0 rgba(0, 0, 0, 0.24), 0 2px 4px -1px rgba(0, 0, 0, 0.6);
}

/*---- オープン前メッセージ ----*/
.card_floating {
  z-index: 100;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -10%);
}
@media only screen and (max-width: 979px) {
  .card_floating {
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-20%, -10%);
  }
}
@media only screen and (max-width: 599px) {
  .card_floating {
    z-index: 100;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-12%, -10%);
  }
}


/* ---- avis Site define ---- */
/*
 * サイト共通
*/
.display-block { display:block; }
.display-inblock { display:inline-block; }
.display-none { display:none; }
.bgcolor-trans-black04 { background-color:rgba(255,255,255,0.4); }
.cursor-pointer { cursor: pointer; }
ul.list-type-disc > li { list-style-type: disc; } /* リストの先頭"・"表示 */
ul.list-type-circle > li { list-style-type: circle; } /* リストの先頭"○"表示 */
ul.list-type-decimal > li { list-style-type: decimal; } /* リストの先頭 1～表示 */

.page-title-area {
  position: relative;
  border-bottom: var(--color-grey-light) 2px solid;
}
  .page-title-area h1{
    position: absolute;
    bottom: 8%;
    margin: 0;
    letter-spacing: 0.2em;
    font-size: clamp(18px, 2.4vw, 35px);
  }
  .page-title-area .menu-ontitle {
     position: absolute;
     bottom: 4%;
     right: 1%;
     margin: 0;
     }
  .page-title-area .menu-ontitle p { margin: 0; }
  @media (min-width: 601px) {
    .page-title-area.menu { height: clamp(2em, 10vw, 8rem); }
    .page-title-area.menu3 { height: 7rem; } /* menu数3 */
    .page-title-area.menu4 { height: 8rem; } /* menu数4 */
  }
  @media (max-width: 600px) {
    .page-title-area .menu-ontitle p { font-size: 12px; }
    .page-title-area.menu { height: clamp(2em, 10vw, 8rem); }
    .page-title-area.menu3 { height: 70px; } /* menu数3 */
    .page-title-area.menu4 { height: 90px; } /* menu数4 */
  }
  @media (max-width: 480px) {
    .page-title-area .menu-ontitle p { font-size: 10px; }
    .page-title-area.menu { height: clamp(2em, 10vw, 8rem); }
    .page-title-area.menu3 { height: 55px; } /* menu数3 */
    .page-title-area.menu4 { height: 75px; } /* menu数4 */
  }
  .page-title-area div.below {
    position: absolute;
    bottom: -1.6em;
    right: 1%;
    margin: 0;
 }

  .page-title-area a{ color:var(--color-grey-dark); }
.page-title-sub {
  position: absolute;
  bottom: 8%;           /* page-title-area h1 と同じ */
  margin: 0 clamp(10em, 26vw, 25em);
  width: 20em;
}
.page-title-sub.right-side{
  position: absolute;
  bottom: 8%;           /* page-title-area h1 と同じ */
  right: 1%;
  margin: unset;
  width: unset;
}
@media (max-width: 750px) {
  .page-title-sub.right-side{ bottom: -4.0vw; /*-20%;*/ }
}
@media (max-width: 700px) {
  .page-title-sub { bottom: -18%; margin: 0;}
}
@media (max-width: 600px) {
  .page-title-sub { bottom: -25%; margin: 0;}
}

/* プライバシーポリシー タイトル,改定日が線の下 */
.page-title-area-pp {
  position: relative;
  border-bottom: var(--color-grey-light) 2px solid;
  height: clamp(2.1em, 3.7vw, 3.6em);
}
  .page-title-area-pp h1{
    margin: 0; /* materializecssのh1設定打消し */
    letter-spacing: 0.2em;
    font-size: clamp(18px, 2.4vw, 36px);
  }
  .page-title-area-pp .revision-date {
     position: absolute;
     bottom: -24px;
     right: 1%;
     margin: 0;
     }
  .page-title-area-pp .revision-date p { margin: 0; }



.page-content-area { margin-top: clamp(24px, 4vw, 36px); }
  .page-content-area h2{ padding-bottom: 2px; border-bottom: var(--color-red) 1px solid; }
  .page-content-area .item {
    display: grid;
    grid-template-columns: 1fr 5fr;
    grid-gap: 1em;
  }
  .page-content-area .item span { padding: 0.4em 1em; }
  .page-content-area .item > span:first-child {
    min-width: 5em;
    max-width: 10em;
    text-align-last: justify; /* Chrome FF */
    text-justify: inter-ideograph; /* IE Edge */
  }
  .page-content-area .item2 {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-gap: 0.4em;
  }
  .page-content-area .item2 span { padding: 0; }
  .page-content-area .item3 span {
    display: inline-block;
    width:14em;
  }

/* 情報、注釈などBOXで表示 */
.page-contentn-box-bg { width: 70%; margin-left: auto !important; margin-right: auto !important; background-color: var(--color-input-bg); padding: 1em; }
.page-contentn-box90-bg {  width: 90%;  margin-left: auto !important;  margin-right: auto !important;  background-color: var(--color-input-bg); padding: 1em; }
.page-contentn-box-brd { width: 70%; margin-left: auto !important; margin-right: auto !important; border: 1px solid var(--color-input-border); padding: 1em; }
.page-contentn-box90-brd {  width: 90%;  margin-left: auto !important;  margin-right: auto !important;  border: 1px solid var(--color-input-border); padding: 1em; }
.page-contentn-box-clr { width: 70%; margin-left: auto !important; margin-right: auto !important; padding: 1em; }
.page-contentn-box90-clr {  width: 90%;  margin-left: auto !important;  margin-right: auto !important; padding: 1em; }
.box-border-red { border: 2px solid var(--color-red);}

/* コンテンツ表示 */
.content-list ul.list-type-disc > li { list-style-type:disc; margin-left: min(10vw, 20px); margin-bottom: 1em; line-height: clamp(1.5em, 3vw, 2em);} /* リストの先頭"・"表示 */
.content-list ul.list-type-disc-narrow > li { list-style-type: disc; margin-left: 2em; }
.content-list ul.list-type-none > li { margin-left: min(10vw, 20px); margin-bottom: 1em; line-height: clamp(1.5em, 3vw, 2em);} /* リストの先頭 表示なし */
.content-list ol.list-type-deci > li { list-style-type:decimal ; margin-left: min(10vw, 20px); margin-bottom: 1em; line-height: clamp(1.5em, 3vw, 2em);} /* リストの先頭"1"表示 */
.content-border-box { border: 1px solid rgba(0,0,0,0.12); padding: 1em 2em;}
.content-sentence  { margin: 1em 1em 1em 0; line-height: clamp(1.5em, 3vw, 2em);} /* コンテンツの文章表示,行間 */
.content-table { margin: 0 2em;}
  .content-table.margin-LR-none{ margin-left: 0 !important; margin-right: 0 !important; }
.content-table th { vertical-align: top;}
.content-table td, th { padding-left: 1em;}
.content-table .border-left { border-left: 1px solid rgba(0,0,0,0.12); }
.content-table .border-right { border-right: 1px solid rgba(0,0,0,0.12); }
.content-table .border-top { border-top: 1px solid rgba(0,0,0,0.12); }
.content-table .cell-center { text-align: center; vertical-align:middle; }
.content-table .notes { font-size: 0.8em; padding-top: 1em; }
.content-paragraph { column-count: 2; } /* 文章2列表示 */
.content-paragraph .content-card { break-inside: avoid; page-break-inside: avoid; margin-bottom: 3vw; padding-right: 2em;} /* 文章区切りが2列に分断しない */
@media only screen and (max-width: 840px) {
  .content-table { margin: 0 ;}
  .content-table th { font-size: 0.8em; font-weight: normal !important;}
  .content-paragraph { column-count: 1; }
}
.subtitle { font-size: large; }

/* ページ全体を覆う. ローディングに使用 */
.pageallcover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 998; /* Materialize .navbar-fixed z-index:997 */
  background: rgba(0,0,0,0.4);
}
  .pageallcover.display-none { display: none; }

/* ローディング 表示 初期非表示 */
.preloader-avis {
  position: fixed;
  top: 30%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  z-index: 999;
}
  .preloader-wrapper.big { /* ローディングサイズ */
      width: 94px;
      height: 94px;
    }
  .spinner-avis-red { border-color: var(--color-red); }
  .preloader-avis-text:before { content: "AVIS"; color: var(--color-red); font-weight:bold;}
  .preloader-avis-text {
    position: relative;
    top: -67px;
    left: 22px;
    font-size: 1.4rem;
  }

/* Logo */
.avis-logo {
  background-image: url("../img/global_sprite.png");
  background-size: 600px; /* 求める画像サイズに縮小*/
  background-position: -20px 414px;
  width: 188px;
  height: 50px;
  margin-top:4px;
  margin-left: 1vw;
}
.avis-logo-title {margin-left: 150px; color: var(--color-black); font-size: 1.4rem; }
@media only screen and (max-width: 550px) {
  .avis-logo-title {margin-left: 130px; font-size: 1.0rem; }
}
/* Color : Text, background */
.avis-red { color: var(--color-red); }
.avis-grey-light { color: var(--color-grey-light); }
.avis-grey-dark { color: var(--color-grey-dark); }
.avis-white { color: #FFFFFF; }
.avis-black { color: var(--color-black); }
.avis-blue { color: var(--color-blue); }
.attention-red { color: #cc5252 }
.attention-yellow { color: gold;}
.bg-avis-red {background-color: var(--color-red);}
  /*.bg-avis-red:visited,
  .bg-avis-red:focus {background-color: var(--color-red);}
  .bg-avis-red:hover {background-color: rgb(212, 57, 42);}*/
.bg-grey-light {background-color: var(--color-grey-light);}
  /*.bg-grey-light:visited,
  .bg-grey-light:focus {background-color: var(--color-grey-light);}
  .bg-grey-light:hover {background-color: rgb(246, 243, 237);}*/
.bg-grey-dark {background-color: var(--color-grey-dark);}
  /*.bg-grey-dark:visited,
  .bg-grey-dark:focus {background-color: --color-grey-dark;}
  .bg-grey-dark:hover {background-color: rgb(127, 122, 117);}*/
.bg-grey-white {background-color: var(--color-grey-white);}
.bg-prepaid-red {background-color: #FCBBBB; }
.bg-paylater-blue {background-color: #B2D0E7; }
.avis-header { background: linear-gradient(rgb(248, 248, 248) 0px, rgb(204, 204, 204) 100%); }

/* ボタン */
button.btn, button.btn:focus { background-color: var(--color-red); } /* Materialize css 標準の緑色を変更 */
button.btn:hover { background-color: rgb(228, 0, 46) ;}
a.btn { background-color: var(--color-red) !important; } /* materialize css override */
a.btn:hover {background-color: rgb(228, 0, 46) !important;}
button.btn.btn-wide { height: 4em; width: 20em; line-height: 1.4em; }
a.btn.btn-wide { height: 4em; width: 20em; padding-top: 0.8em; }
.submit-btn.btn-right { display: flex; justify-content: flex-end;}
.submit-btn.btn-center { display: flex; justify-content: space-around; flex-wrap: wrap;}
@media only screen and (max-width: 800px) {
  .submit-btn.btn2-row-column > a:first-child { margin-bottom: 2vw; }
}
.btn-small-2line { height: 40px !important; line-height: 18px !important; padding-top: 3px !important; }

/* 配置調整 */
.left-space1 { margin-left: 1em; }
.left-space { margin-left: 2em; }
.left-space3 { margin-left: 3em; }
.left-space4 { margin-left: 4em; }
.left-padding { padding-left: 2em !important; }
.left-padding100 { padding-left: 100px !important; }
.right-space { margin-right: 2em; }
.top-space05 { margin-top: 0.5em !important; }
.top-space1 { margin-top: 1em !important; }
.top-space { margin-top: 2em !important; }
.top-space3 { margin-top: 3em !important; }
.top-space4 { margin-top: 4em !important; }
.top-padding05 { padding-top: 0.5em !important; }
.top-padding1 { padding-top: 1em !important; }
.top-padding15 { padding-top: 1.5em !important; }
.top-padding2 { padding-top: 2em !important; }
.bottom-space15 { padding-bottom: 1.5em !important; }
.bottom-space2 { padding-bottom: 2em !important; }
.bottom-space4 { padding-bottom: 4em !important; }
.bottom-space20p { margin-bottom: 20px !important; }
.line-space-3rem { height: 3rem; }
.line-space-4rem { height: 4rem; }
.line-space-10rem { height: 10rem; }
.text-xxs { font-size: xx-small; }
.text-s { font-size: small; }
.text-m { font-size: medium; }
.text-m2 { font-size: 20px; }
.text-l { font-size: x-large; font-weight: bolder; }
.text-vws { font-size: clamp(8px, 1.0vw, 14px); }
.text-vwm { font-size: clamp(12px, 1.24vw, 15px); } /*(12px, 1.24vw, 18px)*/
.text-vwl { font-size: clamp(18px, 1.84vw, 20px); } /*(18px, 1.84vw, 24px)*/
.text-vwlb {font-size: clamp(18px, 1.84vw, 18px); font-weight: bolder; } /*(18px, 1.84vw, 24px)*/
.text-vwxl {font-size: clamp(20px, 2.2vw, 28px); font-weight: bolder; } /*(18px, 1.84vw, 24px)*/
.text-weight-b { font-weight: bolder; }
.material-icons.right { float: right !important; font-size: 18px;}
.table-caption-bottom-left { caption-side: bottom; text-align: left; }

/* 罫線 */
  /* 左側 縦線 */
.v_line_left, .v_line_left_ml { border-left: 1px solid var(--color-grey-light); padding-left: 10px; }
  @media (max-width: 640px) {
    .v_line_left_ml { border-left: none; padding-left: 0px; }
  }
  /* 左側 横線、右端に文字OK */
.h_line_left { display: flex; align-items: center; /* 垂直中心 */ }
.h_line_left::before { border-top: 1px solid var(--color-grey-light); content: ""; flex-grow: 1; /* 線幅100% */ }
.h_line_left::before { margin-right: 1em; /* 文字の右隣 */ }
  /* 右側 横、左端に文字OK , h_line_left と組み合わせて ------ 文字 ------ とできる */
.h_line_right { display: flex; align-items: center; /* 垂直中心 */ }
.h_line_right::after { border-top: 1px solid var(--color-grey-light); content: ""; flex-grow: 1; /* 線幅100% */ }
.h_line_right::after { margin-left: 1em; /* 文字の左隣 */ }
  /* 下線 */
.text-underline { text-decoration-line: underline; }
.line-sepa { padding-bottom: 2px; border-bottom: var(--color-grey-light) 1px solid; margin: 2vw 0;}

/* 入力フィールドのLabel 位置調整 */
.input-field > label { left: 1em; } /* 入力フィールドのラベル(placefolder風)の左に空き */
.input-field > label:not(.label-icon).active {/*入力時*/
  transform: translateY(-2px) scale(0.8);
}
.input-field > label.labelup { transform: translateY(-2px) scale(0.8); }

/* 日本語段折れ制御 <budoux-jp>は unsafe-hashedエラーのため、CSSで制御 */
.word-break-auto {
  word-break: auto-phrase;
}

/*
 * Header, Footer, sidebar Setting
 */
nav {
  height: 70px !important;
  padding-top:6px;
}
@media only screen and (max-width: 992px) {
  nav .brand-logo {  /* SP表示でロゴを左寄せ */
  left: 1% ;
  transform: none ;
}}
nav .container { max-width: 1200px; }
  nav li > a { color: var(--color-black) !important; }
  /*nav li:last-child a { color: white; }*/

.page-footer {
  background-color: var(--color-grey-dark);
}
.page-footer .container.menu {
  padding: 0 4vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) ;
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 4%;
}
  @media (max-width: 550px) {
    .page-footer .container.menu { padding-bottom: 10vw; }
    .page-footer .container.menu .nodisp-sp { display: none; }
    .page-footer .container.menu .height-sp { height: 380px; }
  }
  .page-footer .container.menu .title { font-size: clamp(14px, 0.9vw, 18px); font-weight: bold;  }
  .page-footer li { margin-bottom: 20px; font-size: clamp(12px, 0.8vw, 16px); }
.page-footer .copyright { background-color: var(--color-black); }
  .page-footer .copyright .container {
    padding: 0 4vw;
    display: grid;
    grid-template-columns: 8fr 2fr 1fr ;
  }
  @media (max-width: 480px) {
    .footer-copyright { grid-column: 1/4; grid-row: 1; };
    .footer-blog { grid-column: 1; grid-row: 2; };
    .footer-sns { grid-column: 2; grid-row: 2; };
  }
  .footer-blog, .footer-sns {  /* same materialize footer-copyright */
    display: flex;
    padding: 10px 0;
    align-items: center;
    font-size: clamp(10px, 0.8vw, 14px);
    }
  .footer-blog a { color: white; }
  .footer-sns {
    background-image: url("../img/global_sprite.png");
    background-size: 500px; /* 求める画像サイズに縮小*/
    background-position: 443px -46px;
    width: 12px;
    height: 38px;
    margin-top:2px;
  }
  .footer-sns a { padding: 6px 4px; } /* background-image に空白文字置いてクリック幅高得るため */
    /* navbar-fixed併用でサイドメニューがグレーで覆われて使えなくなるので対応 */
@media (max-width: 992px) { /* SPで右上に表示 */
  .hummenu-right-fixed {
  position: fixed;
  top: 20px;
  right: 30px;
  z-index: 998;
  }
}
@media (min-width: 993px) { /* PCで非表示 */
  .hummenu-right-fixed {
    display: none;
  }
}
.sidenav > li:first-child a {padding:0;} /* "Close" X mark */

/* Contentをセンタリング, 必須入力マーク*/
.center-box {
  /* max-width: 880px;    各指定場所でサイズ指定する */
  left: 0;  /* left,right,marginでセンタリング */
  right: 0;
  margin: auto;
}
.require-mark::after { content: '*'; color: #ED5505; vertical-align: top; font-size: x-large;}

/* UL, LI の標準 not(none)をOverride */
ul.attention  { padding-left: 1em ; }
ul.attention >li { list-style-type: disc; }

/* サーバー処理でページエラー/正常処理 メッセージ表示 */
.disperror {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  /*font-size: large;*/
  text-align: center;
  background-color: rgb(255, 228, 228);
}
.dispmessage {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  font-size: large;
  text-align: center;
  background-color: rgb(208, 228, 251);
}

/* ページトップへ フローティングボタン */
#pageTop {
  position: fixed;
  bottom: 2px;
  right: 14px;
  z-index: 7;
  opacity: 0.7;
  width:50px;
  height: 50px;
  border-radius: 5%;
  -webkit-border-radius: 5%;
  background: var(--color-red);
  -moz-border-radius: 5%;
  -ms-border-radius: 5%;
  -o-border-radius: 5%;
}
  #pageTop a:hover {
    text-decoration: none;
    opacity: 0.7;
  }
  #pageTop a i {
    position: absolute;
    top: -4px;
    left: -3px;
    color: white;
  }

/* ページ下部のOTA連絡先BOX, ヘッダ上部にスペース */
.ota-pagebottom{
  margin-top: 10px;
  margin-bottom: 20px;
  max-width: 640px;
  padding: 10px 0;
  left: 0;  /* センタリング*/
  right: 0;
  margin:  auto;
}
  .ota-box {
    max-width: 500px;
    min-width: 320px;
    left:0;
    right: 0;
    margin: auto;
  }
  .ota-box .row { margin-bottom: 0 !important; } /* .row の bottom 20px を削除 */

/* アフィリエイト ロゴ、アイコン サイズ */
.af-logo {  /* af/his */
  position: absolute ;
  top: 8% ;
  left: 3% ;
}
.af-logo-yoko-small { width:125px; height: 35px; }
.af-logo-square-small { width:80px; height: 85px; }
@media (max-width: 840px){
  .af-logo-yoko { width:125px; height: 35px; }
  .af-logo-square { width:80px; height: 85px; }
}
@media (min-width: 841px){
  .af-logo-yoko { width:250px; height: 70px; }
  .af-logo-square { width:160px; height: 170px; }
}

/* メンテナンス表示 */
.maintenance {
  margin-top: 90px;
  margin-bottom: -90px;
  left: 0;  /* センタリング*/
  right: 0;
 }

/* リンク一覧 書式 1行3列レスポンシブ */
.links3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  /*grid-auto-columns: minmax(200px, auto);*/
  grid-gap: 1vw;
  padding: 0 min(5vw, 8em);
}

/* トップページ 最上部のバナー表示 */
.head-bunner { padding: 2em; text-align: center;}
@media (max-width: 600px){
  .head-bunner { padding: 2em 0 0 0; }
}
.head-bunner a.bnt { display: inline; }
div.head-bunner:not(:has(span)){
  display: none !important;
}

/*
 * トップページ以外 設定(Materialize標準値の再設定も)
*/
i + span { vertical-align: super; margin-left: 0.5em;}  /* Materialize ICON と文字の上下ズレを補正 */
i.space { vertical-align: sub; margin-right: 0.3em; margin-left: 0.3em; }
/* Materialize Dropdown List幅を拡張. 1項目に特定できない. ↓カレンダーの年月選択が壊れるので止め
ul.select-dropdown,ul.dropdown-content{ width:150% !important; }*/

/* ----------------------
 * Top page
*/
/* h1 非表示 */
.avis-top-search h1 { height: 0px; margin: 0; padding: 0; opacity: 0.0; }
/* 上部画像・検索 */
/* <header></header> で表示する場合に有効
header {
  background: url(/img/_top.jpg) no-repeat right;
  height: 474px;
}*/
.top-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
@media (max-width: 600px){
  .top-image { margin: 14px auto ; }
}
@media (max-width: 1000px){ /*740px for AVIS Inclusive*/ /* → 820*/
  .top-image {         /* 検索BOX2段になり表示高さが必要 :  min-width:100%; で画像幅を元画像幅とする */
    min-width: 100%;
    /*height: 500px;     for AVIS Inclusive */
  }
  .top-image.top-page {
    min-width: 100%;
    height: 450px; /*500*/
  }
};

/* アフィリエイト アイコン */
@media (max-width: 840px){
  .ico-affiliate-ontop { width:125px; }
}
@media (min-width: 841px){
  .ico-affiliate-ontop { width:250px; }
}
.ico-affiliate {
  position: absolute;
  top: 5%;
  right: 3%;
  z-index: 5;
}

/* トップページ, Location お知らせ */
/* ウィジェット全体 */
.news-widget {
  position: relative;
  width: 96%;
  /*max-width: 600px;*/ /* 幅の制限 */
  margin: 0 auto;
}

/* メインのベージュ色のボックス */
.news-box {
  background-color: #e9e9e961;
  border-radius: 10px 10px 10px 10px;
  padding: 22px 20px 0 30px;
  /*height: 250px;*//*高さを固定*/
  min-height: 80px;
  max-height: 250px;
  overflow-y: auto;/*縦スクロールを有効に*/
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
}

/* リストのリセット */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各ニュース項目 */
.news-item {
  border-bottom: 1px dotted #8c7b63; /* 点線 */
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.news-item:last-child {
  border-bottom: none; /* 最後の項目は線を消す */
  margin-bottom: 0;
  margin-top: 10px;
}

/* メタ情報（日付とタグの行） */
.news-meta {
  display: flex;
  align-items: center;
}

/* 日付 */
.news-date {
  color: #5c4a38; /* 濃い茶色の文字 */
  font-style: italic; /* 斜体 */
  font-weight: bold;
  font-size: 14px;
  margin-right: 15px;
  letter-spacing: 1px;
  min-width: 10em;
}

/* 記事タイトル */
.news-title {
  display: block;
  color: #4a3b2c;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  transition: opacity 0.2s;
  overflow: hidden;        /* はみ出したテキストを隠す */
  text-overflow: ellipsis; /* はみ出した部分に省略記号を表示 */
  white-space: nowrap;     /* テキストを1行に制限 */
}

.news-title:hover {
  opacity: 0.7;
}
.news-title-sm {
  display: none;
  color: #4a3b2c;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  transition: opacity 0.2s;
  overflow: hidden;        /* はみ出したテキストを隠す */
  text-overflow: ellipsis; /* はみ出した部分に省略記号を表示 */
  white-space: nowrap;     /* テキストを1行に制限 */
}

@media (max-width: 640px){
  .news-widget { width: 90%; }
  .news-box { padding: 24px 10px 6px 10px; }
  .news-item:last-child { margin-top: 0px; }
  .news-date {
    font-size: 12px;
    margin-right: 5px;
    letter-spacing: 0;
    min-width: 9em;
  }
  .news-title { display: none; }
  .news-title-sm { display: block; }
}

/* --- スクロールバーのカスタマイズ (Webkit系ブラウザ: Chrome, Safari, Edge) --- */
.news-box::-webkit-scrollbar {
  width: 8px; /* スクロールバーの幅 */
}

.news-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5); /* 背景の白い線 */
  border-radius: 4px;
  margin: 10px 0; /* 上下の余白 */
}

.news-box::-webkit-scrollbar-thumb {
  background: #8c7b63; /* つまみの色（茶色） */
  border-radius: 4px;
}



/* タイトル区切り線 */
.title-border {
  display: flex;
  align-items: center; /* 垂直中心 */
  /*justify-content: center; / * 水平中心 線幅100%未満指定の時 */
}
.title-border:before, .title-border:after {
  border-top: 2px solid var(--color-grey-light);
  content: "";
  flex-grow: 1; /* 線幅100% */
  /*width: 3em; / * 線幅指定の時、左右ずつの線の長さ */
}
.title-border:before { margin-right: 1em; /* 文字の右隣 */ }
.title-border:after { margin-left: 1em; /* 文字の左隣 */ }

.line-border {
  display: flex;
  align-items: center; /* 垂直中心 */
}
.line-border:before, .line-border:after {
  border-top: 2px solid var(--color-grey-light);
  content: "";
  flex-grow: 1;
}

/* キャンペーン バナー カード */
.top-plan  {
  background-size: contain;
  background-repeat: no-repeat;
  width:auto;
  height: 100%;
}
/* キャンペーンバナー */
.camp-banner { padding: clamp(0.5em, 2vw, 2.3em); } /*padding: 3em 3vw;*/
.camp-banner2 { padding: 0.5em 5vw; }
  .top-banners {
    display: grid;
    grid-gap: 4vw;
    /*grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));*/
    /*grid-auto-rows: minmax(220px, auto);*/
    /*padding: 2rem 3rem;*/
  }
  .top-banner {
    aspect-ratio: 1280/200 auto; /* 1280px x 200px */
  }
  .plan-us-inclgas {
    background-image: url("../img/cmp/plan-us-inclgas.png");
  }
  .plan-euro-inclusive {
    background-image: url("../img/cmp/plan-euro-inclusive.png");
  }
  .plan-aunz-zeroexcess {
    background-image: url("../img/cmp/plan-aunz-zeroexcess.png");
  }
  .plan-nz-multi-island {
    background-image: url("../img/cmp/nz-multi-island.png");
  }

@media (max-width: 720px){
  .top-banners {
    display: grid;
    grid-gap: 4vw;
    grid-template-columns: repeat(auto-fill, minmax(251px, 1fr));
  }
  .top-banner {
    aspect-ratio: 720/405 auto;
  }
  .plan-us-inclgas {
    background-image: url("../img/cmp/plan-us-inclgas720.png");
  }
  .plan-euro-inclusive {
    background-image: url("../img/cmp/plan-euro-inclusive720.png");
  }
  .plan-aunz-zeroexcess {
    background-image: url("../img/cmp/plan-aunz-zeroexcess720.png");
  }
  .plan-nz-multi-island {
    background-image: url("../img/cmp/nz-multi-island720.png");
  }
}
@media (max-width: 561px){
  .top-banners {
    display: grid;
    padding: 6vw;
  }
}

/* キャンペーンカード */
.top-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 最小幅220px か 幅1 で1行を埋める */
  /*grid-auto-rows: minmax(220px, auto); */
  padding: 2rem 3rem;
  grid-gap: 4vw;
}
.top-cards2 {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 1行を 幅2 と幅1 に分ける */
  /*grid-auto-rows: minmax(10px, 200px);*/
  padding: 2vw 3rem;
  grid-gap: 4vw;
}

.top-cards .top-card { aspect-ratio: 1; } /* 旧キャンペーンBOX(400x400)、便利ツール */
.top-cards .top-camp { aspect-ratio: 1; } /* 新キャンペーンBOX(400x400か400x200) */
.top-cards2 .top-card2 { aspect-ratio: 22/5; }

.top-card,
.top-camp,
.top-card2 { position: relative;   /*padding-top: 50%;*/ }
.top-card1 { position: relative; border: 1px #000000 solid; }

/* BOX内に背景薄い黒に文字を表示 <p>ANA<br />お得にマイルをためよう</p> */
.top-card p { position: absolute; top:20%; left:50%; transform: translate(-50%,-50%);
    color: white; width: 80%; text-align: center;
    background-color: rgba(0,0,0,0.3);
    padding: 0.5em 0;
  }
.top-card2 p { position: absolute; top:0; left:0; transform: translate(20%,20%);
    color: white;
    background-color: rgba(0,0,0,0.3);
    padding: 0.5em 1.5em;
  }
.top-card1 p { position: absolute; top:14%; left:50%; transform: translate(-50%,-50%);
    color: var(--color-red);
    font-size: large;
    font-weight: bold;
  }
 /* BOX内に赤いボタン <a href="/campaigns#ana" class="btn">詳しく見る</a> */
.top-card  a.btn { position: absolute; bottom:10%; left:50%; transform: translate(-50%,-50%); font-size: clamp(11px, 1.2vw, 14px); padding-left: 0.8em; padding-right: 0.8em; } /* materialize css override */
.top-card2 a.btn { position: absolute; bottom:0; right:0; transform: translate(-30%, -2vw); font-size: clamp(11px, 1.2vw, 14px); padding-left: 0.8em; padding-right: 0.8em; } /* materialize css override */
.top-card1 a.btn { position: absolute; bottom:0; right:50%; transform: translate(50%, -2vw); font-size: clamp(11px, 1.2vw, 14px); padding-left: 0.8em; padding-right: 0.8em; } /* materialize css override */

/* htmlで画像指定 */
.top-card img,
.top-card2 img {
    /*object-fit: cover;*/
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

.top-card.disable { border: none; }
  .top-card.disable p { color: var(--color-red); background-color: white; }
  .top-card.disable a.btn { cursor:default ; background-color: rgba(0,0,0,0.3) !important; color: black;}

  @media (max-width: 780px){
    .top-cards2, .top-cards2-1 { padding-top: 0; }
    .top-card2 { grid-column: 1/3; grid-row: 1; }
    .top-card1 { grid-column: 1/3; grid-row: 2; aspect-ratio: 22/3;}
    .top-card1 p { position: absolute; top:0; left:0; transform: translate(20%,-24%);
      color: var(--color-red);
      font-size: large;
      font-weight: bold;
      padding: 0.5em 1.5em;
    }
    .top-card1 a.btn { position: absolute; bottom:0; right:0; transform: translate(-30%,-30%); -webkit-transform: translate(-30%,-30%); -moz-transform: translate(-30%,-30%); -ms-transform: translate(-30%,-30%); -o-transform: translate(-30%,-30%); } /* materialize css override */
  }
  @media (max-width: 500px){
    .top-card1 { aspect-ratio: 22/5;}
    .top-card2 p { position: absolute; top:0; left:0; transform: translate(8%,10%);
      color: white;
      font-size: 2.4vw;
      background-color: rgba(0,0,0,0.3);
      padding: 0.5em 1.5em;
    }
    .top-card2 a.btn { position: absolute; bottom:0; right:0; transform: translate(-20%,-50%); }
    .top-card1 p { position: absolute; top:0; left:0; transform: translate(8%,10%);
      color: var(--color-red);
      font-size: 3.4vw;
      font-weight: bold;
    }
    .top-card1 a.btn { position: absolute; bottom:0; right:0; transform: translate(-20%,-50%); }
  }

  /* キャンペーン カード(PC表示で 400x400)画像, 便利ツールは含んでいない. 終わったキャンペーンの設定は次回のアップ時に削除する */
  .top-cards .camp-earlysummer2026bplus {    background-image: url("../img/cmp/earlysummer2026bplus.png");  }
  .top-cards .camp-jafb {    background-image: url("../img/cmp/cmp_jafb.png");  }
  .top-cards .camp-jalb {    background-image: url("../img/cmp/cmp_jalb14.png");  }
  .top-cards .camp-anab {    background-image: url("../img/cmp/cmp_anab.png");  }
  .top-cards .camp-jcbb {    background-image: url("../img/cmp/cmp_jcbb.png");  }
  .top-cards .camp-mufjb {    background-image: url("../img/cmp/cmp_mufj2b.png");  }
  .top-cards .camp-aupay {    background-image: url("../img/cmp/aupayb.png");  }
  .top-cards .camp-jaccs {    background-image: url("../img/cmp/jaccscardb.png");  }
  @media (max-width: 720px){
    .top-cards .top-camp { aspect-ratio: 2 / 1; } /* 新キャンペーンBOX(400x200) */
    .top-cards .camp-earlysummer2026bplus {    background-image: url("../img/cmp/earlysummer2026splus.png");  }
    .top-cards .camp-jafb {    background-image: url("../img/cmp/cmp_jafs.png");  }
    .top-cards .camp-jalb {    background-image: url("../img/cmp/cmp_jals14.png");  }
    .top-cards .camp-anab {    background-image: url("../img/cmp/cmp_anas.png");  }
    .top-cards .camp-jcbb {    background-image: url("../img/cmp/cmp_jcbs.png");  }
    .top-cards .camp-mufjb {    background-image: url("../img/cmp/cmp_mufj2s.png");  }
    .top-cards .camp-aupay {    background-image: url("../img/cmp/aupays.png");  }
    .top-cards .camp-jaccs {    background-image: url("../img/cmp/jaccscards.png");  }
  }

  /* キャンペーンランディングページ */
  .sub-title { margin-top: 0.3em; padding-left:3vw; letter-spacing: 0.3vw;}
  .table-camp-condition { width: 90%; border-collapse: collapse; margin-left: 5%;}
    .table-camp-condition td:first-child { width: 160px; }
    .table-camp-condition + div { margin-left: 5%; margin-top: 1em; }
  .table-camp-exclude { width: 90%; border-collapse: collapse; margin-left: 5%; }
    .table-camp-exclude td:nth-child(2), .table-camp-exclude td:nth-child(4) { width: 100px; text-align: center;}
    .table-camp-exclude td:nth-child(3) { width: 2em; text-align: center; }

  /* Avis
.top-card .card-title {
  font-size: 18px !important;   / * 通常カード24px より小さく * /
  white-space: nowrap;          / * 段折れしない * /
}*/

/* ----------------------
 * キャンペーン一覧ページ
*/
/* ヘッダ画像とヘッダメニューの間 */
.camp-header-space { margin-top: 7px; }
/* BOX、書式 */
.camp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); /* BOXの最低幅とそれを超えた時の最高幅 */
  grid-auto-rows: minmax(420px, auto); /* BOXの最低高と最高高(auto) */
  padding: 2rem 0;
  grid-gap: 5vw; /* BOX間隔 */
}
.camp-cards .camp-card { border: #ccc 1px solid; padding-top: 1em; padding-bottom: 1em; }
/* BOX内配置 */
.camp-card .card-head { padding: 0 1em; display: inline-block; width: 100%; }
.camp-card .card-head > div { display: inline-block; vertical-align: top; line-height: 1.8em; }
.camp-card .card-head > div:nth-child(2) { text-align: center; padding-left: 2vw; }
.camp-card .card-head > img.box-border { border: 1px solid #9e9e9e; }
.camp-card .card-attention { text-align: center; line-height: 2em; background-color: var(--color-red); color: white; margin: 0.4vw 0; }
.camp-card .card-desc { padding: 1em; }
.camp-card .card-target { padding: 0 1em;  }
.camp-card .card-target > div { margin-top: 0.3em; display: flex;}
.camp-card .card-target > div > div:first-child { flex:1 5em; } /* 1列目幅6em固定 */
.camp-card .card-target > div > div:nth-child(2) { flex:20; }  /* 2列目最大幅として左寄 */
.camp-card .card-coution { padding: 1em 1em 0; color: var(--color-red);  } /*margin-left: min(10vw, 20px); margin-bottom: 1em; line-height: clamp(1.5em, 3vw, 2em);*/
.camp-card .card-coution ul { padding-left: 2.2em; margin-top: 0.1em; }
.camp-card .card-code { padding: 0 1em ; }
.camp-card .card-code ul { padding-left: 2.2em; margin-top: 0.1em; }
.camp-card .card-btn { display: table; width: 100%; padding-left: 2vw; padding-right: 2vw;} /* tableで1行にボタンを左右に配置 */
.camp-card .card-btn a { display: inline-block; width: 12em; text-align: center; padding-top: 0.4em; padding-bottom: 0.2em; line-height: 1.3em;}
.camp-card .card-btn span { display: inline-block; width: 1vw;} /* 狭幅時ボタンが引っ付くのを防ぐ */
.camp-card .card-btn .paylater {
  display: table-cell;
  color: black;
  background: linear-gradient(180deg, rgba(179, 179, 179, 0) 0%, rgba(238, 238, 238, 0.505208) 0.01%, #C4C4C4 100%);
  border: 1px solid #BCBCBC;
  box-sizing: border-box;
  border-radius: 4px;
}
.camp-card .card-btn .prepaid {
  display: table-cell;
  color: white;
  background: #D4002A;
  border: 1px solid #D4002A;
  box-sizing: border-box;
  border-radius: 4px;
}
.camp-card.center { display: flex;} /* コンテンツ(配下要素をセンタリング) */
.camp-card .card-link.box { margin: auto; padding-top:1em; } /* センタリング */
.camp-card .card-link.box a { display: block; width: 18em; text-align: center; padding-top:1em; padding-bottom: 1em; border: #ccc 1px solid;}
.camp-card .card-link { display: flex; flex-direction: row; margin-top: 2em;}
.camp-card .card-link a { color: var(--color-red); margin-right: 1em;}
.camp-card .card-redbox { text-align: center; line-height: 2em; border: 1px solid var(--color-red); color: var(--color-red); margin: 0.4vw 0; margin-left: 1em; margin-right: 1em;}
.camp-card .card-3col { display: table; width: 100%; padding-left: 2vw; padding-right: 2vw; margin-top: 1em;}
.camp-card .card-3col div:first-child { display: table-cell; text-align: center; color: var(--color-red); }
.camp-card .card-3col div:nth-child(2) { display: table-cell; padding-left: 1em; }
.camp-card .card-3col div:nth-child(3) { display: table-cell; width: 3em; font-size: x-large; color: var(--color-red); font-weight: bolder; }
.camp-card .card-3col div:nth-child(3) span { color: #000000; font-size: small;}
.camp-card hr { width: 80%; }
.frydrv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); margin-top: 2rem; grid-row-gap: 2rem;}


      /* コンテンツ */
      .campaign-box {
        max-width: 1080px;  /* 880 del */
        left: 0;  /* left,right,marginでセンタリング */
        right: 0;
        margin: auto;
      }
        .campaign-box .card-title { margin: 10px 0 0 10px; }
        .campaign-box .logo-campaign {
          position: absolute ;
          top: 3% ;
          left: 3% ;
        }

        .campaign-box .card-action{ background-color: var(--color-blue); } /* org override */
        .card.horizontal .card-image {
          max-width: 400px;
          background-color: rgb(245, 247, 251);
        }
        .campaign-box .card-content .sub-content { margin: 0.5em 1em; display: inline-block; }

.table-2col { display: table; width: 100%; padding-right: 2vw; margin-top: 0.6em; }
.table-2col div:first-child { display: table-cell; text-align: center; width: 3em; }
.collapsible.no-border { border-top: none; border-right: none; border-left: none; box-shadow: none; -webkit-box-shadow: none; } /* collapsible の 枠線を消去 */
/*.collapsible.no-border .collapsible-header, .collapsible-body { border-bottom: none; }*/ /* 問いと回答の下線を消去 */
.collapsible.no-border .collapsible-header { padding: 0; }
.collapsible.no-border .collapsible-body { padding: 0.5em; margin-left: 2.4em; }
.img-center { display: grid;  justify-items: center;  align-items: center; }
.img-center img { width: min(100%, 750px); border: var(--color-grey-light) 1px solid; margin: 1em; }
.img-center img.img-s { width: min(100%, 420px); }
table.column5 { margin: 1em 0 2em; }
table.column5 thead tr:first-child { border-bottom: none !important; }
table.column5 thead tr:first-child th:not(:first-child) { border-bottom: 1px solid rgba(0,0,0,0.12); }
table.column5 td:not(:first-child), th:not(:first-child) { text-align: center; }
table.column5 thead tr th:not(:first-child) { background-color: rgba(196, 80, 103, 0.1); border-left: var(--color-input-border) 1px solid;}
table.column5 thead tr:nth-child(2) th:first-child { text-align: right; }
table.column5 thead tr:nth-child(2) th:not(:first-child) { font-size: large; font-weight: bold;}
table.column5 tbody tr:first-child td { background-color: var(--color-form-forcus-bg); }
table.column5 tbody td:not(:first-child) { border-left: var(--color-input-border) 1px solid;}
table .border { border: 1px solid var(--color-grey-light); }
table .bgcolor { background-color: var(--color-grey-light); }

/* ----------------------
 * 商品プラン・価格
 */
.planlist { padding: 4em 6vw 2em; }
/* 表示しない .planlist .planlistimg img{ width: max(100%, 400px); } */
.plandesclist { display: flex; flex-direction: column;}
.plandesc { display: flex; flex-direction: row; margin-top: 2em;}
@media (max-width: 740px){ .plandesc { display: flex; flex-direction: column; margin-top: 2em;} }
.plandesc > div:first-child { text-align: center; }
.plandesc .plan { width:17em; padding-top:1em; padding-bottom: 1em; border: #ccc 1px solid; }
.plandesc .desc { padding-left: 2em; }
.plandesc .desc .ttl { font-weight: bold;}
.plandesc .desc .area { background-color: #f0f0f0; padding: 0.3em 0.5em 0.2em;}
.plandesc .desc .notes { font-size: 0.8em; padding-top: 1em;}
.pricelistbutton { display: flex; flex-direction: row; margin-top: 2em; text-align: center;}
.pricelistbutton div { flex: 1; }
.pricelist { margin-top: 1em; }
.pricelist.hwi.invisible, .pricelist.usa.invisible { display: none; }
.carprice { display: flex; flex-direction: row; margin-top: 3em; }
@media (max-width: 840px){ .carprice { display: flex; flex-direction: column; margin-top: 4em;} }
.pricelist .car { flex: 2; }
.pricelist .car .ttl { font-size: 1.2em; }
.pricelist .car .type { font-size: 0.8em;}
.pricelist .car img { width: 100%;}
.pricelist .car .equip { font-size: 0.8em; padding-bottom: 1em; padding-left: 3em;}
.pricelist .price { flex: 4; }
.pricelist .price table thead > tr:first-child th:first-child { border-bottom: 1px white solid;} /* 下線消す */
.pricelist .price table thead > tr:first-child th {  text-align: center;}
.pricelist .price .notes { font-size: 0.8em; padding-top: 1em; }

/* ----------------------
 * 車種一覧
 */
.car-country { width: 50%;}
.car-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); /* 元380px BOXの最低幅とそれを超えた時の最高幅 */
  grid-auto-rows: minmax(280px, auto); /* BOXの最低高と最高高(auto) */
/*  padding: 1em ;*/
  grid-gap: 20px; /* 元5vw BOX間隔 */
}
.car-cards .car-card { border: #ccc 1px solid; padding: 0.4em 1em; }
/* [注意] .car-card は"予約 - プラン選択" .car .car-card でも使用 */
.car-card .cargroup { text-align: right; }
/*.car-card .carname { border: #022211 1px solid;}
.car-card .carkind { border: #022211 1px solid;}*/
.car-card .carimg { max-width: 220px; } /* 元510px; max-height: 240px; 表示幅によって車画像と装備が重なる */
.car-card .carimg img { width: 100%; }
.car-card .carequips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  grid-gap: 0.6vw ;
  font-size: 0.8em;
}
.car-card .carequips .door span{ background-image: url("../img/resflow_sprite.png"); background-size: 900px; /* 求める画像サイズに縮小*/
  background-position: -580px 327px; width: 22px; height: 22px; padding-left: 26px; }
.car-card .carequips .seat span { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
  background-position: -308px 327px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
.car-card .carequips .aircon span { background-image: url("../img/resflow_sprite.png"); background-size: 780px; /* アイコン高い */
  background-position: -445px 284px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
.car-card .carequips .automatic span { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
  background-position: -648px 327px; width: 22px; height: 22px; padding-left: 26px; }
.car-card .carequips .largebag span { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
  background-position: -377px 327px; width: 22px; height: 22px; padding-left: 26px; }
.car-card .carequips .smallbag span { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
  background-position: -377px 272px; width: 22px; height: 22px; padding-left: 26px; }
.car-card .carequips .mpg span { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
  background-position: -446px 327px; width: 22px; height: 22px; padding-left: 26px; }

/* ----------------------
 * FAQ
 */
 .faq-menu {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   /*grid-auto-columns: minmax(200px, auto);*/
   grid-gap: 1vw;
   padding: 0 min(5vw, 8em);
}
  .faq-menu a{ color:var(--color-red); }
/* 下記.faqでBOX罫線削除 */
/*.page-content-area.faq .collapsible { border-top: none; border-right: none; border-left: none;} / * collapsible の 枠線を消去 */
.page-content-area.faq .collapsible,
.page-content-area.faq .collapsible > li,
.page-content-area.faq .collapsible ul.collapsible { box-shadow: none; -webkit-box-shadow: none; }
/*.page-content-area.faq .collapsible-header, .page-content-area .collapsible-body { border-bottom: none; } *//* 問いと回答の下線を消去 */
.page-content-area.faq .collapsible-header { padding-left: 0; padding-bottom: 0.5rem; }
.page-content-area.faq .collapsible-body { padding: 1em; background-color: var(--color-grey-white); margin-left: 3em; }

/* 縦型タブ */
@media (max-width: 810px){
  .vertical-tabs {
    display: flex;
    flex-direction: column;
    height: 160px;
  }
  .vertical-tabs .tab {
    width: 100%;
  }
}

/* ---------------------
 * 問い合わせ , 問合せ受付
 */
 .contact { width: min(90%, 600px); margin: auto; border: #ccc 1px solid; padding: 3vw 4vw; }
 .contact .flex-wrap { display: flex; } /* 項目を横並び */
 .contact .flex-wrap .input-field:first-child { margin-right: 4vw; } /* 入力域2つの間に間隔 */
 .contact-links a{ color:var(--color-grey-dark); }


/* ----------------------
 * レンタルガイド
 */
.grid-list {
  padding: 2vw 4vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) ;
  grid-gap: 4%;
}
.guide-movie { padding: 2vw 4vw; text-align: center;}


/* ----------------------
 * プラン
 * 保険・補償について
 * 会社概要
 */
.normal-card .card-title { border-bottom: solid 2px #F78B00; }
.normal-card .card-title-noline { font-size: x-large; }
  .normal-card .article-card { margin-top: 2em; }
  .normal-card .article-card p span { margin: 0 1em;}
  .normal-card .part-card { margin-top: 2em; }
  .normal-card .part-card h4 {
    padding-bottom: 8px;
    margin-bottom:  1em;
    border-bottom: solid 1px #F78B00;
  }
  .normal-card .part-card li { margin-left: 2em; }
  .normal-card .part-card li span {
    display: inline-block;
    width: 9em;
    padding-bottom: 4px;
  }

  .normal-card .line-card { margin: 2em 1em; display: inline-block; }
  .normal-card .line-card div { display: inline-block; }
  .normal-card .line-card p { display: inline-block; }
.gmaps { padding-left: 1em; }
.gmaps iframe {
  width: 100%;
  border: none;
  aspect-ratio: 2/1;
}

.grid-list3 {
  padding: 2vw 4vw;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) ;
  grid-gap: 4%;
}
/* 保険・保障の表(2列) レスポンシブ */
.resp-table th { border: 1px solid rgba(0,0,0,0.12); padding: 10px; }
.resp-table td { border: 1px solid rgba(0,0,0,0.12); padding: 10px; }
.resp-table th.w16 { width: 16em; }
 @media screen and (max-width: 780px) {
  .last td:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); width: 100%; }
  .resp-table th,
  .resp-table td { border-bottom: none; display: block; width: 100%; }
  .resp-table th.w16 { width: 100%; }
  .resp-table th { background-color: var(--color-input-border);}
}
/* 各地域の保険の表(3列) レスポンシブ */
.resp-table3 { width: 94%; }
.resp-table3 th { border: 1px solid rgba(0,0,0,0.12); padding: 10px; background-color: var(--color-input-border); }
.resp-table3 td { border: 1px solid rgba(0,0,0,0.12); padding: 10px; }
.resp-table3 > caption { text-align: left; }
.resp-table3 th.w16 { width: 16em; }
/*.resp-table3 th.w12 { width: 12em; }*/
@media screen and (max-width: 780px) {
  .resp-table3 .thead { display: none; }
  .resp-table3 tr { width: 100%; }
  /*.resp-table3 th.w12 { width: 100%; }*/
  .resp-table3 td {
    display: block;
    width: 100%;
  }
  .resp-table3 th.w16 { width: 100%; }
  .resp-table3 td:first-child {
    background: var(--color-input-border);
    /*color: #fff;*/
    font-weight: bold;
    text-align: center;
  }
  .resp-table3 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 4em;
  }
}
.text-right { text-align: right; margin-right: 6%;}



/* ----------------------
 * プリファード会員
 */
.member-img img { width: min(100%, 800px); border: var(--color-grey-light) 1px solid; }
.member-img2 img { width: min(100%, 750px); border: var(--color-grey-light) 1px solid; }
.member-img3 img { width: min(100%, 600px); border: var(--color-grey-light) 1px solid; }

.memberdesc { display: flex; padding-left: 4em;}
.memberdesc div:first-child { flex: 3 ; }
.memberdesc div:last-child { flex: 2 ; padding-left: 1.5em;}
@media (max-width: 840px){
  .memberdesc { display: flex; flex-direction: column; padding-left: 4em; }
}

/* ----------------------
 * サイトマップ
 */
.sitemap {
    padding: 2vw 4vw;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) ;
    grid-gap: 4%;
}
.sitemap .title { font-size: clamp(16px, 1.7vw, 24px); }
.sitemap div { margin-bottom: 20px; }
.sitemap li { margin-bottom: 20px; }
.sitemap a { color: #000000; }

/* ---------------------
 * 営業所検索
 */
.loc-search { width: max(60%, 380px); display: flex; flex-direction: column; margin: auto; }
 .loc-search button { width: 10em; margin:auto; }
 .loc-search input[type=text], .loc-search input[type=text]:focus {
    border-top: 1px solid var(--color-grey-light);
    border-left: 1px solid var(--color-grey-light);
    border-right: 1px solid var(--color-grey-light);
  }
  .loc-search input[type=text] { background-color: white; }

  .loc-box > div { width: 100%; }
  .loc-box .loc-name { display: table; color: var(--color-red) ; }
  .loc-box .loc-name > div { display:inline-block; display: table-cell; }
  .loc-box .loc-name > div:first-child { text-align: left; font-size: clamp(14px, 1.24vw, 18px); font-weight: bolder;}
  .loc-box .loc-name > div:nth-child(2) { text-align: right;}
  .loc-box .loc-name a { color: var(--color-red) !important; }
  .loc-box .loc-infos { display: flex; padding: 1vw; font-size: clamp(12px, 1.24vw, 16px);}
  .loc-box .loc-infos.underline { border-bottom: 2px solid var(--color-red); padding: 0 !important; }
  .loc-box .loc-infos > div { margin: 0 1vw; flex:1; }
  .loc-box .loc-infos > div { display: flex; flex-direction: row;}
  .loc-box .loc-tel, .loc-box .loc-tel-head { flex:1; }
  .loc-box .loc-time, .loc-box .loc-time-head { flex:1; }
  .loc-box .loc-infos.underline #loc-area-head { font-size: clamp(24px, 2vw, 32px); font-weight: bolder; color: var(--color-red); }
  .loc-box .loc-infos.underline .loc-tel-head, .loc-time-head { padding-top: 1vw; }
/*「営業時間を表示する」リンクの表示  .loc-box .loc-time { display: block; cursor: pointer; color: var(--color-blue); text-decoration: underline var(--color-blue); text-underline-offset: 4px; }*/
  @media (max-width: 780px){
    .loc-box > div { margin: auto; width: max(80%, 360px); }
    .loc-box .loc-infos { display: flex; flex-direction: column; }
    .loc-box .loc-infos > div { margin: 1vw 0; }
    .loc-box .loc-addr, .loc-box .loc-addr-head { flex: 1; }
    .loc-box .loc-tel { flex: 1; }
    .loc-box .loc-time { flex: 1; }
   }


/* for BUDGET ---------------------*/
.loc-area { padding: 1.5em; }
  .loc-title {
    border-bottom: 2px solid #F78B00;
    padding-bottom: 6px;
  }
  .loc-title > div:first-child { font-size: large; }
  .loc-state { font-size: large; margin: 0 0 10px 10px; }
  .loc-line {
    border-bottom: 1px solid rgb(185, 185, 185);
    padding-bottom: 10px;
  }
  .loc-item { margin-left: 1em !important; }
  .shopmap {
    background: url("../img/_DEL_jp_sprite.png");
    background-position: -526px -114px;
    width: 23px;
    height: 24px;
    display: inline-block;
    position: relative;
    left:10px;
    top: 4px;
  }
  .loc-link {
    margin-left:3em;
    cursor:pointer;
  }
.margin-left1em { margin-left:1em; }
.horizon-line { width:96%; color: var(--color-input-border) }


/* ---------------------
 * ご利用後の明細書発行 / マイル積算
 */
.ht-step {  padding: 1rem 2rem; }
  .ht-step h2 {
    font-size: large;
    color: var(--color-blue);
    margin-top: 0;
    margin-bottom: 0;
    text-indent:-1.5rem;
  }
  .ht-step div:nth-child(2) { padding-top:2rem; }
  .ht-step img { border: 1px solid lightgray; }

/* ---------------------
 *  旅行会社 登録申請
 */
.regist { width: min(90%, 800px); margin: auto; border: #ccc 1px solid; padding: 3vw 4vw; }
  .regist .input-field .helper-text { margin-top: -8px; }
  .regist .flex-wrap-corp {  /* 会社情報 6項目 4行2列 */
    display: grid;
    grid-template-rows: 60px 60px 60px 60px;
    grid-template-columns: 1fr 50%;
  }
  .regist .flex-wrap-corp .input-field:first-child  { grid-row: 1; grid-column: 1 / 3;}
  .regist .flex-wrap-corp .input-field:nth-child(2),
  .regist .flex-wrap-corp .input-field:nth-child(3) { grid-row: 2; margin-right: 2vw; }
  .regist .flex-wrap-corp .input-field:nth-child(4),
  .regist .flex-wrap-corp .input-field:nth-child(5) { grid-row: 3; margin-right: 2vw; }
  .regist .flex-wrap-corp .input-field:last-child   { grid-row: 4; margin-right: 2vw; }

  .regist .flex-wrap-addr {  /* 住所 3項目 3行2列 */
    display: grid;
    grid-template-rows: 60px 60px 60px;
    grid-template-columns: 50% 1fr;
  }
  .regist .flex-wrap-addr .input-field:first-child  { grid-row: 1; grid-column: 1 / 2; }
  .regist .flex-wrap-addr .input-field:nth-child(2) { grid-row: 2; grid-column: 1 / 3; }
  .regist .flex-wrap-addr .input-field:last-child   { grid-row: 3; grid-column: 1 / 3; }

  .regist .flex-wrap-staff {  /* 担当者 3項目 2行2列 */
    display: grid;
    grid-template-rows: 60px 60px;
    grid-template-columns: 50% 1fr;
  }
  .regist .flex-wrap-staff .input-field:first-child { grid-row: 1; grid-column: 1 / 2; margin-right: 2vw; }
  .regist .flex-wrap-staff .input-field:nth-child(2) { grid-row: 1; grid-column: 2 / 3; }
  .regist .flex-wrap-staff .input-field:last-child  { grid-row: 2; grid-column: 1 / 2; }

  .regist .flex-wrap-res {  /* 予約の連絡先 1項目 1行1列 */
    display: grid;
    grid-template-rows: 60px;
    grid-template-columns: 50%;
  }

  .regist .flex-wrap-bank {  /* 振込口座 5項目 2行3列 */
    display: grid;
    grid-template-rows: 60px 60px;
    grid-template-columns: 25% 25% 1fr;
  }
  .regist .flex-wrap-bank .input-field:first-child { grid-row: 1; grid-column: 1 / 3; margin-right: 2vw; }
  .regist .flex-wrap-bank .input-field:nth-child(2) { grid-row: 1; grid-column: 3 / 4; }
  .regist .flex-wrap-bank .input-field:nth-child(3) { grid-row: 2; grid-column: 1 / 2; margin-right: 2vw; }
  .regist .flex-wrap-bank .input-field:nth-child(4) { grid-row: 2; grid-column: 2 / 3; margin-right: 2vw; }
  .regist .flex-wrap-bank .input-field:last-child { grid-row: 2; grid-column: 3 / 4; }

  @media (max-width: 740px){
    .regist { width: 95%; margin: auto; border: #ccc 1px solid; padding: 3vw 4vw; }
    .regist .flex-wrap-corp {  /* 会社情報 6項目 4行2列 */
      display: grid;
      grid-template-rows: 60px 60px 60px 60px 16px 60px;
      grid-template-columns: 1fr;
    }
    .regist .flex-wrap-corp .input-field:first-child { grid-row: 1; }
    .regist .flex-wrap-corp .input-field:nth-child(2) { grid-row: 2; margin-right: unset; }
    .regist .flex-wrap-corp .input-field:nth-child(3) { grid-row: 3; margin-right: unset; }
    .regist .flex-wrap-corp .input-field:nth-child(4) { grid-row: 4; margin-right: unset; }
    .regist .flex-wrap-corp .input-field:nth-child(5) { grid-row: 5; margin-right: unset; }
    .regist .flex-wrap-corp .input-field:last-child  { grid-row: 6; margin-right: unset; }
    .regist .flex-wrap-corp .input-field.input-comment { margin-top: -0.5em; }
    .regist .flex-wrap-corp .input-field.input-comment label { font-size: x-small;}

    .regist .flex-wrap-addr {  /* 住所 3項目 3行1列 */
      display: grid;
      grid-template-rows: 60px 60px 60px;
      grid-template-columns: 1fr;
    }
    .regist .flex-wrap-addr .input-field:first-child  { grid-row: 1; }
    .regist .flex-wrap-addr .input-field:nth-child(2) { grid-row: 2; }
    .regist .flex-wrap-addr .input-field:last-child   { grid-row: 3; }

    .regist .flex-wrap-staff {  /* 担当者 3項目 3行1列 */
      display: grid;
      grid-template-rows: 60px 60px 60px;
      grid-template-columns: 1fr;
    }
    .regist .flex-wrap-staff .input-field:first-child { grid-row: 1; margin-right: unset; margin-right: unset;}
    .regist .flex-wrap-staff .input-field:nth-child(2) { grid-row: 2; grid-column: unset;}
    .regist .flex-wrap-staff .input-field:last-child { grid-row: 3; grid-column: unset; }

    .regist .flex-wrap-res {  /* 予約の連絡先 1項目 1行1列 */
      display: grid;
      grid-template-rows: 60px;
      grid-template-columns: 1fr;
    }
    .regist .flex-wrap-res .input-field:first-child { grid-row: 1; /*margin-right: unset;*/ }

    .regist .flex-wrap-bank {  /* 振込口座 5項目 5行1列 */
      display: grid;
      grid-template-rows: 60px 60px 60px 60px 60px;
      grid-template-columns: 1fr;
    }
    .regist .flex-wrap-bank .input-field:first-child { grid-row: 1; grid-column: unset; margin-right: unset;}
    .regist .flex-wrap-bank .input-field:nth-child(2) { grid-row: 2; grid-column: unset;}
    .regist .flex-wrap-bank .input-field:nth-child(3) { grid-row: 3; grid-column: unset; margin-right: unset;}
    .regist .flex-wrap-bank .input-field:nth-child(4) { grid-row: 4; grid-column: unset; margin-right: unset;}
    .regist .flex-wrap-bank .input-field:last-child { grid-row: 5; grid-column: unset; }
  }
/* ---------------------
 * お客様ログイン, 旅行会社ログイン
 */
.login { width: max(40%, 500px); position: relative; margin: auto; }
.login .flex-wrap { display: flex; } /* 項目名と入力域を横並び */
.login .flex-wrap > div:first-child { flex: 1 ; padding-top:1.2em; width:10em; } /* 項目名 */
.login .flex-wrap > div:last-child { flex: 2 ; margin-left: 4vw; width:20em;} /* 入力域 */
.login .flex-wrap .input-field { margin-top: 0 !important; } /* 入力域の幅 最小200px */
.login .flex-wrap .input-field:first-child { margin-right: 1vw; } /* 入力域2つの間に間隔 */
.login .input-field input#resno,
  .login .input-field input#email { max-width: 14em; } /* 入力文字数少ない幅 */
  @media (max-width: 600px){
    .login { width: 100%; /*position: relative; margin: auto;*/ }
    .login .flex-wrap > div:last-child { margin-left: 0vw;  width:20em;} /* 入力域 */
    .login .input-field input#resno,
    .login .input-field input#email,
    .login .input-field input#login_agtcode,
    .login .input-field input#login_agtpwdin { max-width: 10em; } /* 入力文字数少ない幅 */
  }
/* ---------------------
 * お客様, 旅行会社 マイページ申込内容
 */
.custinfo-ttl { position: relative; margin-top: 6vw; }
.custinfo-ttl div {  /* ページタイトル 右側サブメニュー */
  position: absolute;
  bottom: 4%;
  right: 0;
  margin: 0;
}
.custinfo .flex-wrap { display: flex; } /* 項目名と入力値を横並び */
.custinfo .flex-wrap > div { margin-top: 0.5em; }
.custinfo .flex-wrap > div:first-child { flex: 1 200px; padding-top: 6px;} /* 項目名 */
.custinfo .flex-wrap > div:last-child { flex: 2 350px; margin-left: 4vw; } /* 入力値 */

.resinfo .flex-wrap { display: flex; }

/* for BUDGET  but use Avis,too                                   */
.custinfo-area { padding: 0 0.5em 1.5em; }
  .custinfo-title {
    border-bottom: 2px solid #F78B00;
    padding-bottom: 6px;
  }
  .custinfo-line {
    border-bottom: 1px solid rgb(185, 185, 185);
    padding-bottom: 10px;
  }
  .custinfo-item { padding-left: 2em !important; }
  .res-print { margin-left: 1em; margin-top: 0.3em; }
  .disable-btn { color: darkgray;}

/* チェックボックスで表示・非表示 */
.segs-visible { display: table-row;} /* visibility: visible; */
.segs-invisible { display: none;} /* visibility: collapse; iPhoneでエリア残 */
.segs-item-price { text-align: right; padding-right: 3em;}

label.hidden_tr_btn {
  /*申し込み内容表示ボタン装飾*/padding: 5px 5px;
  border: solid 2px white;
  font-weight: bold;
  border-radius: 5px;
  cursor:pointer;
  transition: .5s;
  color: slategray;
  font-weight: normal;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
  input#hidden_tr_btn {  /*チェックは見えなくする*/
    display: none;
  }
label.hidden_sl_btn {  /*お支払い明細表示ボタン装飾*/
  padding: 5px 10px;
  font-weight: bold;
  background: #efefef;
  border-radius: 5px;
  cursor :pointer;
  transition: .5s;
}
  label.hidden_sl_btn:hover {  /*ボタンホバー時*/
    background: silver;
  }
  input#hidden_sl_btn {  /*チェックは見えなくする*/
    display: none;
  }

@media (min-width:840px) and (max-width:1250px){
  .sp-br { display: block; margin-top: -16px;}
  .sp-br::before {
    content: "\A";
    white-space: pre;
  }
  .sp-fixed{ width: 80px;}
}


/* 個人 申込内容 */
.sp-table-rental thead tr th:nth-child(6) { width: 13em; }
@media (max-width: 840px){
  .sp-center-align {      /* この設定は旅行会社・個人で共有 */
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  /* 個人レンタル情報 申込*/
  .sp-table-rental th {
    display: none;
  }
    .sp-table-rental td {
      display: block;
      padding: 0%;
    }
    .sp-table-rental td:nth-child(1) {
      background-color:silver;
    }
    .sp-table-rental td:nth-child(1)::before {
      content: '予約番号: ';
    }
    .sp-table-rental td:nth-child(2)::before {
      content: '申込日: ';
    }
    .sp-table-rental td:nth-child(3)::before {
      content: '貸出営業所: ';
    }
    .sp-table-rental td:nth-child(4)::before {
      content: '利用開始日時: ';
    }
    .sp-table-rental td:nth-child(5)::before {
      content: '申込詳細を表示: ';
    }
    .sp-table-rental td:nth-child(6)::before {
      content: '確認書の印刷: ';
    }
    .sp-table-rental td:nth-child(6){
      padding-bottom: 1em;
    }
  /* 個人レンタル情報 SEG*/
  .sp-table-rentalseg td {
    display: block ;
    padding: 0%;
  }
    .sp-table-rentalseg th:first-of-type {
      margin-top: 1em;
    }
    .sp-table-rentalseg th:first-of-type td:nth-child(1)::before {
      content: 'No: ';
    }
    .sp-table-rentalseg td:nth-child(2)::before {
      content: '申込日: ';
    }
    .sp-table-rentalseg td:nth-child(3)::before {
      content: '貸出営業所: ';
    }
    .sp-table-rentalseg td:nth-child(4)::before {
      content: '利用日: ';
    }
    .sp-table-rentalseg td:nth-child(5)::before {
      content: '料金 / 手配状況: ';
    }
    .sp-table-rentalseg td:nth-child(6)::before {
      content: '確認書の印刷: ';
    }
    .sp-table-rentalseg td:nth-child(6){
      padding-bottom: 1em;
    }

  /* お支払い情報 総額*/
  .sp-table-pay-ttl { font-size: medium; font-weight: bolder; }
  .sp-table-payttl th {
    display: none;
  }
    .sp-table-payttl td {
      display: block ;
      padding: 0%;
    }
    .sp-table-payttl td:nth-child(1)::before {
      content: 'ご利用総額 (日本払い): ';
      font-size: medium;
      font-weight: bolder;
    }
    .sp-table-payttl td:nth-child(2)::before {
      content: 'お支払い済み額: ';
    }
    .sp-table-payttl td:nth-child(3)::before {
      content: 'ご請求額: ';
    }
    .sp-table-payttl td:nth-child(4)::before {
      content: '状況: ';
    }
    .sp-table-payttl td:nth-child(5)::before {
      content: 'カード決済: ';
    }
    .sp-table-payttl td:nth-child(5){
      padding-bottom: 1em;
    }
  /* お支払い情報 レンタカー以外の費用 */
  .sp-table-payexp { margin-left: 2rem; }
  .sp-table-payexp th {
    display: none;
  }
    .sp-table-payexp td {
      display: block ;
      padding: 0%;
    }
    .sp-table-payexp td:nth-child(1)::before {
      content: '費用名目: ';
    }
    .sp-table-payexp td:nth-child(2)::before {
      content: 'お支払額: ';
    }
  /* お支払い情報 支払い状況 */
  .sp-table-payreceipt { margin-left: 2rem; }
  .sp-table-payreceipt th {
    display: none;
  }
    .sp-table-payreceipt td {
      display: block ;
      padding: 0%;
    }
    .sp-table-payreceipt td:nth-child(1)::before {
      content: '弊社処理日: ';
    }
    .sp-table-payreceipt td:nth-child(2)::before {
      content: 'お支払額: ';
    }
  /* お支払い情報 クレジットカード明細 */
  .sp-table-paycc { margin-left: 2rem; }
  .sp-table-paycc th {
    display: none;
  }
    .sp-table-paycc td {
      display: block ;
      padding: 0%;
    }
    .sp-table-paycc td:nth-child(1)::before {
      content: 'お支払い手続き日時: ';
    }
    .sp-table-paycc td:nth-child(2)::before {
      content: 'お支払額: ';
    }
    .sp-table-paycc td:nth-child(3)::before {
      content: '状況: ';
    }
    .sp-table-paycc td:nth-child(4)::before {
      content: '決済番号: ';
    }
    .sp-table-paycc td:nth-child(4){
      padding-bottom: 1em;
    }
} /* end of @media */

/*
 * 旅行会社 申込内容
 */
/* 表示内容の絞り込み */
.agent-info-filter {
 margin: 0px 10px 10px 10px;
 border-radius: 4px;
 border: gray 1px solid;
}

.sp-table-rental-agt thead tr th:nth-child(6) { width: 13em; }
@media (max-width: 840px){
  /* 旅行会社レンタル情報 申込*/
  .sp-table-rental-agt th {
    display: none;
  }
    .sp-table-rental-agt td {
      display: block;
      padding: 0%;
    }
    /* 申込内容 */
    .sp-table-rental-agt td.restitle{
      background-color:silver;
    }
    .sp-table-rental-agt td.restitle:nth-child(1)::before {
      content: '問合せ番号: ';
    }
    .sp-table-rental-agt td.resitem:nth-child(2)::before {
      content: '申込日: ';
    }
    .sp-table-rental-agt td.resitem:nth-child(3)::before {
      content: 'ドライバー名 / 貸出営業所: ';
    }
    .sp-table-rental-agt td.resitem:nth-child(4)::before {
      content: '出発日 / 利用日: ';
    }
    .sp-table-rental-agt td.resitem:nth-child(5)::before {
      content: '申込詳細を表示: ';
    }
    .sp-table-rental-agt td.resitem:nth-child(6)::before {
      content: '確認書の印刷: ';
    }
    .sp-table-rental-agt td.resitem:nth-child(6){
      padding-bottom: 1em;
    }
    /* SEG内容 */
    .sp-table-rental-agt td.segtitle:nth-child(1)::before {
      content: 'No: ';
    }
    .sp-table-rental-agt td.segitem:nth-child(2)::before {
      content: '申込日: ';
    }
    .sp-table-rental-agt td.segitem:nth-child(3)::before {
      content: '貸出営業所: ';
    }
    .sp-table-rental-agt td.segitem:nth-child(4)::before {
      content: '利用日: ';
    }
    .sp-table-rental-agt td.segitem:nth-child(5)::before {
      content: '料金 / 手配状況: ';
    }
    .sp-table-rental-agt td.segitem:nth-child(6)::before {
      content: '確認書の印刷: ';
    }
    .sp-table-rental-agt td.segitem:nth-child(6){
      padding-bottom: 1em;
    }


  /* レンタル情報 SEG*/
  .sp-table-rentalseg-agt td {
    display: block ;
    padding: 0%;
  }
    .sp-table-rentalseg-agt th:first-of-type {
      margin-top: 1em;
    }
    .sp-table-rentalseg-agt th:first-of-type td:nth-child(1)::before {
      content: 'No: ';
    }
    .sp-table-rentalseg-agt td:nth-child(2)::before {
      content: '申込日: ';
    }
    .sp-table-rentalseg-agt td:nth-child(3)::before {
      content: '貸出営業所: ';
    }
    .sp-table-rentalseg-agt td:nth-child(4)::before {
      content: '利用日: ';
    }
    .sp-table-rentalseg-agt td:nth-child(5)::before {
      content: '料金 / 手配状況: ';
    }
    .sp-table-rentalseg-agt td:nth-child(6)::before {
      content: '確認書の印刷: ';
    }
    .sp-table-rentalseg-agt td:nth-child(6){
      padding-bottom: 1em;
    }

  /* お支払い情報 総額*/
  .sp-table-payttl-agt th {
    display: none;
  }
    .sp-table-payttl-agt td {
      display: block ;
      padding: 0%;
    }
    .sp-table-payttl-agt td.restitle{
      background-color:silver;
    }
    .sp-table-payttl-agt td:nth-child(1)::before {
      content: '問合せ番号または請求日: ';
    }
    .sp-table-payttl-agt td:nth-child(2)::before {
      content: 'ドライバー名: ';
    }
    .sp-table-payttl-agt td:nth-child(3)::before {
      content: '出発日まで: ';
    }
    .sp-table-payttl-agt td:nth-child(4)::before {
      content: '料金/内訳表示: ';
    }
    .sp-table-payttl-agt td:nth-child(5)::before {
      content: '請求書の印刷: ';
    }
    .sp-table-payttl-agt td:nth-child(5){
      padding-bottom: 1em;
    }
  /* お支払い情報 明細*
  .sp-table-pay-ttl-agt { font-size: medium; font-weight: bolder; }
  .sp-table-pay-agt { margin-left: 2rem; }
  .sp-table-pay-agt th {
    display: none;
  }
    .sp-table-payttl-agt td {
      display: block ;
      padding: 0%;
    }*/
    .sp-table-payttl-agt td.segtitle { font-weight: bolder; }
    .sp-table-payttl-agt td.segtitle:nth-child(1)::before { content: ' '; }
    .sp-table-payttl-agt td.segitem:nth-child(2)::before {
      content: '貸出営業所: ';
    }
    .sp-table-payttl-agt td.segitem:nth-child(3)::before {
      content: '車タイプ: ';
    }
    .sp-table-payttl-agt td.segitem:nth-child(4)::before {
      content: 'レンタル料: ';
    }
    .sp-table-payttl-agt td.segitem:nth-child(5)::before { content: ' '; }
    .sp-table-payttl-agt td.segitem:nth-child(5){
      padding-bottom: 1em;
    }

    .sp-table-payttl-agt td.exptitle { font-weight: bolder; }
    .sp-table-payttl-agt td.exptitle:nth-child(1)::before { content: ' '; }
    .sp-table-payttl-agt td.expitem:nth-child(2)::before {
      content: '名目: ';
    }
    .sp-table-payttl-agt td.expitem:nth-child(3)::before {
      content: '料金: ';
    }
    .sp-table-payttl-agt td.expitem:nth-child(4)::before { content: ' '; }
    .sp-table-payttl-agt td.expitem:nth-child(4){
      padding-bottom: 1em;
    }

    .sp-table-payttl-agt td.ttltitle { font-weight: bolder; }
    .sp-table-payttl-agt td.ttltitle:nth-child(1)::before { content: ' '; }
    .sp-table-payttl-agt td.ttlitem:nth-child(2)::before {
      content: ' ';  /* ここはHTML(CFM)で表示 */
    }
    .sp-table-payttl-agt td.ttlitem:nth-child(3)::before {
      content: ' ';  /* ここはHTML(CFM)で表示 */
    }
    .sp-table-payttl-agt td.ttlitem:nth-child(4)::before {
      content: ' ';  /* ここはHTML(CFM)で表示 */
    }
    .sp-table-payttl-agt td.ttlitem:nth-child(5)::before { content: ' '; }
    .sp-table-payttl-agt td.ttlitem:nth-child(5){
      padding-bottom: 1em;
    }
    .sp-table-payttl-agt td.bottomspace{ margin-bottom: 1.5em; }
    .sp-table-payttl-agt td.bottomspace::before { content: ' '; }
}


.rentalinfo-box {
  border: 1px solid var(--color-input-border);
/*  max-width:90%; */
  min-width:200px;
  padding: 10px ;
}
.res-equip { vertical-align: top;}  /* 車装備の位置揃え. 画像はcqr-equipの設定 */

/* ---------------
 * メンテ・お知らせ
 */
.news .news-title { font-size: clamp(16px, 1.8vw, 20px) !important; }
.news .news-content { margin: 1vw 0 1vw 2vw; }
.news .news-date { margin-left: 2vw; color: var(--color-grey-dark); font-size: 0.8em; }
.news .news-link { margin: 1vw 0 1vw 4vw; }

/* ---------------
 * 運転免許証翻訳サービス
 */
 /* 免許証画像ドロップBOX */
.drv-box { padding: 3em 3vw 3em 6vw; }
.jpgdrop-box {
  width: 376px;
  height: 236px;
  border: dashed 3px gray;
  margin-top: 6px;
  text-align:center;
  background-color: #f5f5f5;
}
.drv { display: flex; } /* 項目名と入力域を横並び */
.drv > div:first-child { flex: 1 ; margin-right: 4vw; } /* 項目名 */
.drv > div:last-child { flex: 1 ; margin-right: 4vw; } /* 入力域 */
.drv .input-field { margin-top: 0 !important; padding-top: 1em; } /* 入力域の幅 最小200px */
@media (max-width: 840px){
  .drv { display: flex; flex-direction: column; /*padding-left: 4em;*/ }
}

/* ----------------
 * 予約の流れ共通 - 表示幅、h1、ボタン、ul>li リスト
 */
 .container.reserve { position: relative; } /* トップページ、予約-利用場所ページで画像上に検索BOX表示(.container.reserve .page-reserve-area)に必要 */
 .page-reserve-area { margin-left: min(10vw, 20px); margin-right: min(10vw, 20px); }
 .page-reserve-area h1 { height: 0px; margin: 0; padding: 0; opacity: 0.0; }/* h1 非表示 */
 .page-reserve-area button { width: 160px;} /* Materialize css 標準の緑色を変更 */
 .page-reserve-area button.prevbutton { width: unset; background-color: #fff; border: none; cursor:pointer; color: var(--color-red);}/* 戻るボタン(aリンクをsubmitできない...??) */
 .page-reserve-area ul.list-type-disc > li { list-style-type: disc; margin-left: min(10vw, 20px); margin-bottom: 1em;} /* リストの先頭"・"表示,行間 */
/*.reserve-area {  max-width: 1024px;  left: 0;  / * センタリング* /  right: 0;  margin: auto;}*/

/* ---------------
 * 予約の流れ共通 - 予約ステップの上部にバナー表示
 */
 .reserve-head-banner {
    border: 2px solid var(--color-black);
    border-radius: 5px;
    background-color: rgba(101,97,93,0.3);
    color: var(--color-black) !important;
    padding: 15px;
    margin: 30px auto 20px;
    width: 40em;
    text-align: center;
}
 .reserve-head-banner:hover { text-shadow: 0.7px 0.7px 0.7px rgba(101,97,93,0.7); }
 .reserve-head-banner a { color: var(--color-black) !important; }
@media (max-width: 600px){
  .reserve-head-banner { width: 90%;}
}

/* ---------------
 * 予約の流れ共通 - 予約ステップ表示
 */
  .reservestep {
    display: flex;
    flex-direction: row;
    margin-top: min(10vw, 30px);
    margin-bottom: min(10vw, 20px);
  }
  .reservestep div {
    flex: 1 200px;
    margin: 0 4px;
    padding-bottom: 0.6em;
    border-bottom: var(--color-grey-light) 3px solid;
    color: var(--color-grey-light);
    font-size: clamp(10px, 2vw, 14px);
  }
  .reservestep div.now {
    border-bottom: var(--color-red) 3px solid;
    color: var(--color-red);
  }

  .reservestep .step1::before { content: "1 利用場所・利用日"; }
  .reservestep .step2::before { content: "2 車種・プラン"; }
  .reservestep .step3::before { content: "3 追加サービス"; }
  .reservestep .step4::before { content: "4 ドライバー"; }
  .reservestep .step5::before { content: "5 確認・完了"; }

@media (max-width: 740px){
  .page-reserve-area { margin-left: 2vw; margin-right: 2vw; }
  .reservestep .step1.now::before { content: "1 利用場所・利用日"; }
  .reservestep .step1:not(.now)::before { content: "1"; }
  .reservestep .step2.now::before { content: "2 車種・プラン"; }
  .reservestep .step2:not(.now)::before { content: "2"; }
  .reservestep .step3.now::before { content: "3 追加サービス"; }
  .reservestep .step3:not(.now)::before { content: "3"; }
  .reservestep .step4.now::before { content: "4 ドライバー"; }
  .reservestep .step4:not(.now)::before { content: "4"; }
  .reservestep .step5.now::before { content: "5 確認・完了"; }
  .reservestep .step5:not(.now)::before { content: "5"; }
}

/* ----------------
 * 予約の流れ共通 - 選択内容表示BOX: 利用営業所・日
 */
.reserveselect { display: grid; grid-template-columns: repeat(12, 1fr); }
  .reserveselect .pickup {   grid-column: 1/6; grid-row: 1; }
  .reserveselect .dropoff {   grid-column: 6/11; grid-row: 1; }
  .reserveselect .pickup .loc-addr,
  .reserveselect .dropoff .loc-addr {
    display: flex;
    flex-direction: column;
    position: absolute;
    z-index:3;
    width: 380px;
    background-color: rgb(244, 244, 244);
    border: 1px solid #ccc;
    padding: 1em;
  }
  .reserveselect .days {   grid-column: 11/13; grid-row: 1; }
  .reserveselect .chg-location {   grid-column: 1/13; grid-row: 2; }
  .reserveselect .discount {   grid-column: 1/13; grid-row: 3; }
  .reserveselect .chg-discount {   grid-column: 1/13; grid-row: 4; }
@media (max-width: 640px){
  .reserveselect .pickup {   grid-column: 1/11; grid-row: 1; }
  .reserveselect .dropoff {   grid-column: 1/9; grid-row: 2; }
  .reserveselect .days {   grid-column: 9/13; grid-row: 2; }
  .reserveselect .chg-location {   grid-column: 1/13; grid-row: 3; }
  .reserveselect .discount {   grid-column: 1/13; grid-row: 4; }
  .reserveselect .chg-discount {   grid-column: 1/13; grid-row: 5; }
}
.reserveselect .discount{ display: grid; grid-template-columns: repeat(12, 1fr); }
  .reserveselect .discount .disco-wzd { grid-column: 1/4; grid-row: 1; } /* "Wizard Number" */
  .reserveselect .discount .disco-wzd-no { grid-column: 4/7; grid-row: 1; }
  .reserveselect .discount .disco-wzd-name { grid-column: 7/12; grid-row: 1; }
  .reserveselect .discount .disco-code { grid-column: 1/4; grid-row: 2; } /* "割引コード" */
  .reserveselect .discount .disco-code-awd { grid-column: 4/7; grid-row: 2; } /* AWD番号 */
  .reserveselect .discount .disco-code-coupon { grid-column: 7/10; grid-row: 2; } /* クーポンコード */
  /*.reserveselect .discount .disco-code-rate { grid-column: 9/12; grid-row: 2; } / * レートコード */
@media (max-width: 640px){
  .reserveselect .discount .disco-wzd { grid-column: 1/13; grid-row: 1; }
  .reserveselect .discount .disco-wzd-no { grid-column: 2/7; grid-row: 2; }
  .reserveselect .discount .disco-wzd-name { grid-column: 7/12; grid-row: 2; }
  .reserveselect .discount .disco-code { grid-column: 1/13; grid-row: 3; }
  .reserveselect .discount .disco-code-awd { grid-column: 2/7; grid-row: 4; }
  .reserveselect .discount .disco-code-coupon { grid-column: 7/12; grid-row: 4; }
  /*.reserveselect .discount .disco-code-rate { grid-column: 10/13; grid-row: 4; } */
}
.reserveselect #lbl_includes { cursor: pointer; }

/* ----------------
 * 予約の流れ共通 - 選択内容表示BOX: 車種・プラン表示
 */
.reserveselect .car { grid-column: 1/5; grid-row: 1; padding-right: 1em;}
.reserveselect .equips { grid-column: 5/8; grid-row: 1; padding-top: 3em; }
.reserveselect .plan { grid-column: 8/13; grid-row: 1; }

.reserveselect .car .cargroup { text-align: right; }
  .reserveselect .car .carimg { max-width: 310px; max-height: 200px; margin-left:auto; margin-right:auto;}
  .reserveselect .car .carimg img { width: 100%; }
  .reserveselect .equips .carequips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* minを120にすると2列*/
    grid-gap: 0.6vw ;
    font-size: 0.8em;
  }
  .reserveselect .equips .carequips .door span, .item-equip .img-car-doors
     { background-image: url("../img/resflow_sprite.png"); background-size: 900px; /* 求める画像サイズに縮小*/
       background-position: -580px 327px; width: 22x; height: 16px; padding-left: 26px; display: inline-block; }
  .reserveselect .equips .carequips .seat span, .item-equip .img-car-seats
     { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
       background-position: -308px 327px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
  .reserveselect .equips .carequips .aircon span, .item-equip .img-car-ac
     { background-image: url("../img/resflow_sprite.png"); background-size: 780px; /* アイコン高い */
       background-position: -445px 284px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
  .reserveselect .equips .carequips .automatic span, .item-equip .img-car-automatic
     { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
       background-position: -648px 327px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
  .reserveselect .equips .carequips .largebag span, .item-equip .img-car-largebags
     { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
       background-position: -377px 327px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
  .reserveselect .equips .carequips .smallbag span, .item-equip .img-car-smallbags
     { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
       background-position: -377px 272px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
  .reserveselect .equips .carequips .mpg span, .item-equip .img-car-mpg
     { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
       background-position: -440px 327px; width: 22px; height: 22px; padding-left: 26px; display: inline-block; }

.reserveselect .plan { display: grid; grid-template-columns: repeat(12, 1fr); padding-top: 1em; }
  .reserveselect .plan .specialrate { grid-column: 1/13; grid-row: 1;
     font-size: large; text-align: center; padding-top: 0.4em; margin-bottom: 1em; background-color:var(--color-red); color:white; }
  .reserveselect .plan .plan-ttl { grid-column: 1/8; grid-row: 2; }
  .reserveselect .plan .plan-price { grid-column: 8/13; grid-row: 2; }
  .reserveselect .plan .tax-ttl { grid-column: 1/8; grid-row: 3; }
  .reserveselect .plan .tax-price { grid-column: 8/13; grid-row: 3; }
  .reserveselect .plan .option-ttl { grid-column: 1/8; grid-row: 4; }
  .reserveselect .plan .option-price { grid-column: 8/13; grid-row: 4; }
  .reserveselect .plan .oneway-ttl { grid-column: 1/8; grid-row: 5; }
  .reserveselect .plan .oneway-price { grid-column: 8/13; grid-row: 5; }
  .reserveselect .plan .drv25under { grid-column: 1/13; grid-row: 6; }
  .reserveselect .plan .total-ttl { grid-column: 1/8; grid-row: 7; }
  .reserveselect .plan .total-price { grid-column: 8/13; grid-row: 7; }
  .reserveselect .plan .plan-disc { grid-column: 1/13; grid-row: 8; }
  .reserveselect .chg-plan { grid-column: 1/13; grid-row: 9; }

.reserveselect .plan .plan-price, .reserveselect .plan .oneway-price, .reserveselect .plan .option-price,
.reserveselect .plan .tax-price, .reserveselect .plan .total-price { padding-right: 1vw; text-align: right; }
.reserveselect .plan .plan-ttl, .reserveselect .plan .oneway-ttl, .reserveselect .plan .option-ttl,
.reserveselect .plan .tax-ttl, .reserveselect .plan .total-ttl { padding-left: 1vw;}
.reserveselect .plan .total-ttl, .reserveselect .plan .total-price {
  font-size: clamp(14px, 2vw, 20px);
  font-weight: bold;
  background-color: rgba(200, 200, 200, 0.3);
  padding-top: 10px;
}
.reserveselect .plan-disc { font-size: 0.8em; margin-top: 0.4em;}  /* 含まれる保険・補償の表示 */
.reserveselect .plan-disc .plan-includes,
.reserveselect .plan-disc .plan-includes-dyna
    { display: flex; flex-direction: column; position: absolute; z-index:3; width: 380px; background-color: #fff; border: 1px solid #ccc; }
.reserveselect .plan-disc .plan-includes div,
.reserveselect .plan-disc .plan-includes-dyna div { padding: 5px 1em 2px; }
.reserveselect .plan-disc .plan-includes span:first-child { display: inline-block; width: 90%;}
.reserveselect .plan-disc .plan-includes span:last-child { display: inline-block; width: 10%;}

.box-display { display: block; }
.box-nonedisplay { display: none; }

@media (max-width: 640px){
  .reserveselect .car { grid-column: 1/7; grid-row: 1; grid-gap: 0;}
  .reserveselect .equips { grid-column: 7/13; grid-row: 1; grid-gap: 0;}
  .reserveselect .plan { grid-column: 3/11; grid-row: 2; }
  .reserveselect .car .carimg { grid-column: 1/13; grid-row: 2; }
  .reserveselect .car .carname { grid-column: 1/13; grid-row: 1; }
  .reserveselect .car .equip { grid-column: 1/13; grid-row: 3; }
  .reserveselect .car .carimg img{ width: min(100%, 240px); }
  .reserveselect .car .carname p { margin-top: 0; margin-bottom: 0; }
  .reserveselect .equips .carequips { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ----------------
 * 予約の流れ共通 - 保険・補償等の説明表示. ブラウザ下部にモードレス固定表示
 */
.show-expl { display: inline-block; padding: 0 1em 0.5em 0;}
.foot-modal {
  display: none;
  position: fixed;
  background-color: var(--color-grey-light);
  /*padding: 0;*/
  overflow-y: auto;
  will-change: top, opacity;   /* アニメーション */
  z-index: 6;
/*  opacity: 1;
  bottom: 0;*/

  border: 0.3px solid var(--color-grey-dark);
  resize: both;
}
.foot-modal.bottom-box {
  top: auto;
  bottom: 0px;
  margin: 0;
  width: 50%;
  max-width: 700px;
  /*height: 45%;*/
  max-height: 50%;
  /*min-height: 25%;*/
  border-radius: 0;
  will-change: bottom, opacity;   /* アニメーション */
}
@media (min-width:705px) and (max-width:900px) {
  .foot-modal.bottom-box { width: 60%; }
 }
 @media (max-width:704px) {
  .foot-modal.bottom-box { width: 80%; max-height: 300px; }
 }

.foot-modal .header {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  padding: 1em 1em 0 1.5em;
}
.foot-modal .header > * {
  display: grid;
  align-items: center;
}
.foot-modal .header .close {
  justify-content: right;
}
.foot-modal .foot-modal-content {
  padding: 0 1.4vw;
}
.foot-modal .foot-modal-content .collection-item .title {
  font-size: clamp(12px, 1.5vw, 18px);
}
.foot-modal .foot-modal-content .collection-item p {
  font-size: clamp(12px, 1.5vw, 14px);
  padding-left: 1em;
  margin-block-start: 0.3em;
  margin-block-end: 0;
}
@media (max-width: 640px){
  .foot-modal.bottom-box {
    width: 80%;
    max-width: 80%;
    min-width: 30%;
    height: 35%;
    max-height: 75%;
    min-height: 25%;
  }
  .foot-modal .foot-modal-content .collection-item p { padding: 10px 6px !important; }
}


/* ----------------
 * 予約 - 利用場所・価格 検索  注意:トップページの検索BOXでも使用
 */
 /* 検索BOX */
.container.reserve .page-reserve-area {
   position: absolute; /* トップページ、予約-利用場所ページで画像上に検索BOX表示(.container.reserve)に必要 */
   top: 15%; /*min(8vw, 25%);*/
   left: 0;
   right: 0;
   margin: auto;
   padding: 0 20px;;
}
/* トップページ最上部バナー .head-bunner の有無で検索BOXの表示位置が変わる */
.container.reserve .page-reserve-area:has(.head-bunner) {top: 35% !important;} /*min(18vw, 35%)*/
@media (max-width: 1100px){ /*990px*/
  .container.reserve .page-reserve-area:not(:has(.head-bunner)) { top: 10%; }
  .container.reserve .page-reserve-area:has(.head-bunner) {top: 32% !important;} /*35%*/
}
@media (max-width: 1000px){ /*820*/
  .container.reserve .page-reserve-area:not(:has(.head-bunner)) { top: 8%; } /*min(8vw, 25%)*/
  .container.reserve .page-reserve-area:has(.head-bunner) {top: 22% !important;} /*25%*/
}

.search-box {
  max-width:730px;
  background-color: rgba(247, 247, 247, 0.6);
  top: 0;  bottom: 0;  left: 0;  right: 0;  margin: auto; /* 以下、中央寄せ for AVIS Inclusive */
}

.search-box .inputfld-from { display: grid; grid-template-columns: 4fr 2fr 1fr;}
.search-box .inputfld-to { display: grid; grid-template-columns: 4fr 2fr 1fr;}
.search-box .inputfld-oth { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr ;}
.search-box .discount-area { display: grid; grid-template-columns: 1fr ;}   /* 追加 AVIS Inclusive */
@media (max-width: 1000px){  /* 740px for AVIS Inclusive */ /* → 820*/
  .search-box .inputfld-from { display: grid; grid-template-columns: repeat(12, 1fr); }
    .search-box .inputfld-from .location {   grid-column: 1/13; grid-row: 1; }
    .search-box .inputfld-from .datepicker { grid-column: 2/7; grid-row: 2; }
    .search-box .inputfld-from .timeselect { grid-column: 7/13; grid-row: 2; }
  .search-box .inputfld-to { display: grid; grid-template-columns: repeat(12, 1fr); }
    .search-box .inputfld-to .location {   grid-column: 1/13; grid-row: 1; }
    .search-box .inputfld-to .datepicker { grid-column: 2/7; grid-row: 2; }
    .search-box .inputfld-to .timeselect { grid-column: 7/13; grid-row: 2; }
  .search-box .inputfld-oth { display: grid; grid-template-columns: repeat(12, 1fr); }
    .search-box .inputfld-oth .ageselect {   grid-column: 1/7; grid-row: 1; }
    .search-box .inputfld-oth .residencyselect { grid-column: 7/13; grid-row: 1; }
    .search-box .inputfld-oth .wizawdnumber { grid-column: 1/7; grid-row: 2; }
    .search-box .inputfld-oth .discountcode { grid-column: 7/13; grid-row: 2; }
}

/* 貸出/返却営業所選択リスト */
.search-box .inputfld-from #suggestions-container-pickup,
.search-box .inputfld-from #suggestions-container-dropoff,
.search-box .inputfld-to #suggestions-container-pickup,
.search-box .inputfld-to #suggestions-container-dropoff { position:absolute; z-index:4; }
.search-box .inputfld-from .ui-widget, .search-box .inputfld-to .ui-widget { z-index:5; }

/* デフォルトの設定を営業所・車検索は別とする */
.search-box .inputfld-from .input-field, .search-box .inputfld-to .input-field,
  .search-box .inputfld-oth .input-field { margin-top: 0; margin-bottom: 0;  border-bottom: var(--color-red) 2px solid; height: 49px;}

  .search-box select { height: 100% !important; border-bottom: 0px solid white !important; }
  .search-box input[type='text'] { height: 46px; }
  .search-box input.invalid[type=text] { border-bottom: 0px solid white !important; } /* required の時に未入力(invalid) */
  .search-box input[type=text] { border-bottom: 0px solid white !important; padding-left: unset !important;} /* フォーカスの当たっていない時 */
  .search-box input[type=text]:focus { border-bottom: 0px solid white !important; } /* フォーカスのある時 */

/* 入力クリア アイコン */
.search-box > div.location, .search-box .wizawdnumber .switch_content { position: relative; }
.search-box i.icon { position: absolute; right:0; top: 24%; cursor: pointer; }
.switch_content .contentsbox i.icon, .switch_content_cd .contentsbox i.icon { top: 4px; right: -4px;} /* プリファード,優待コード アイコン位置調整 */

/* 割引き指定 for AVIS Inclusive */
.search-box .discount-area { text-align: center; }
.search-box .discount-area > label { color: var(--color-grey-white); }
.search-box .discount-area .disc-select { padding: 0.4em 1em; background-color: var(--color-red); position: relative; height: 2.6em;}
.search-box .discount-area .disc-select span { font-size: 1.4em; }
@media (max-width: 500px){
  .search-box .discount-area .disc-select span { font-size: 3vw; }
}
.search-box ul.collapsible { border: none !important; margin: 0 !important; }
.search-box ul.collapsible .collapsible-body { padding: 0 !important; }


/* プリファード番号, 優待コード入力 ここから */
  .switch_content, .switch_content_cd {
    border-top: 1px solid #ccc; /* 全体を囲む枠線 */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-color: rgb(236, 236, 236);
    height: 47px;
  }
  .switch_content #switch, .switch_content_cd #switch_cd { display: none; } /* チェックボックスを除去 */
  .switch_content .button, .switch_content_cd .button {
    display: inline-block;
    position: relative;
    height: 43px;
    width: 100%;
  }
  .switch_content label.button, .switch_content_cd label.button { font-size: unset; color: unset; padding-top: 13px}
  /*
  .switch_content .icon, .switch_content_cd .icon { / * アイコン全体のスタイル * /
    display: inline-block;
    position: absolute;
    top: 30%;
    width: 22px;
    right: 6px;
  }
  .switch_content .icon::before, .switch_content .icon::after,
  .switch_content_cd .icon::before, .switch_content_cd .icon::after { / * 「×」印のスタイル * /
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .switch_content .open, .switch_content .close,
  .switch_content_cd .open, .switch_content_cd .close  { margin-left: 10px; }
  .switch_content .open, .switch_content_cd .open { display: inline-block; / * デフォルトは表示 * / } / * 表示ボタンのスタイル * /
  .switch_content .close, .switch_content_cd .close {display: none; / * デフォルトは非表示 * / } / * 閉じるボタンのスタイル * /
  */
  .switch_content .contentsbox { /* プリファード番号表示のスタイル */
    display: none; /* デフォルトは非表示 */
    padding: 15px; /* クリアアイコンあり:15px 30px 15px 15px*/
    position: absolute;
    /*left: -30vw; */
    right: 0;
    top: 48px;
    width: min(80vw, 470px); /*min(56vw, 460px)*/
    /*height: 70px;*/
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(172, 172, 172);
    z-index: 211;
  }
  .switch_content_cd .contentsbox { /* 優待コード表示のスタイル */
    display: none; /* デフォルトは非表示 */
    padding: 15px ; /* クリアアイコンあり:15px 30px 15px 15px*/
    position: absolute;
    /*left: -45vw;*/
    right: 0;
    top: 48px;
    width: min(80vw, 470px); /* レーコード表示時 min(80vw, 700px) */
    /*height: 70px;*/
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(172, 172, 172);
    z-index: 212;
  }

  .switch_content .contentsbox .flex-wrap, .switch_content_cd .contentsbox .flex-wrap { display: flex; justify-content: center; align-items: center; } /* 項目名と入力域を横並び,縦横中央 */
  .switch_content .contentsbox .flex-wrap button:first-child, .switch_content_cd .contentsbox .flex-wrap button:first-child { width:100px !important; margin-top:1em; margin-right: 1.5em; }
  .switch_content .contentsbox .flex-wrap button:last-child,  .switch_content_cd .contentsbox .flex-wrap button:last-child  { width:100px !important; margin-top:1em; }
  .switch_content .contentsbox .flex-wrap > p:first-child  { flex: 1 100px; margin-right: 1.5em; }
  .switch_content_cd .contentsbox .flex-wrap > p:first-child { flex: 1 100px; margin-right: 1.5em; }
  /*.switch_content_cd .contentsbox .flex-wrap > p:nth-child(2) { flex: 1 100px; margin-right: 1.5em; } 優待コードが3つあるとき*/
  .switch_content .contentsbox .flex-wrap > p:last-child { flex: 1 100px; }
  .switch_content_cd .contentsbox .flex-wrap > p:last-child { flex: 1 100px; }
  @media (max-width: 1000px){
    .switch_content .contentsbox { right: unset; } /* 表示BOXが項目右側合わせだと左端が画面からはみ出る */
  }
  @media (max-width: 600px){ /* 740px */
    .switch_content .contentsbox { left: 100%; width: 130%; transform: translate(-50%, -100%); } /* left: 0; width: 130%; → スマホ表示時中央表示 */
    .switch_content_cd .contentsbox { left: 0%; right: 0; width: 130%; transform: translate(-50%, -100%); } /* right: 0; width: 130%; → スマホ表示時中央表示 */
    .switch_content .contentsbox .flex-wrap,
    .switch_content_cd .contentsbox .flex-wrap { display: flex; flex-direction: column; } /* 項目名と入力域を縦並び */
    .switch_content .contentsbox .flex-wrap > p:first-child,
    .switch_content_cd .contentsbox .flex-wrap > p:first-child
    /*, .switch_content_cd .contentsbox .flex-wrap > p:nth-child(2) 優待コードが3つあるとき*/ { flex: 1 ; margin-right: unset; }
    .switch_content .contentsbox .flex-wrap > p:last-child,
    .switch_content_cd .contentsbox .flex-wrap > p:last-child { flex: 1 ; }
    .switch_content .contentsbox .flex-wrap button:first-child,
    .switch_content_cd .contentsbox .flex-wrap button:first-child { flex: 1 ; margin-right: unset; }
    .switch_content .contentsbox .flex-wrap button:last-child,
    .switch_content_cd .contentsbox .flex-wrap button:last-child { flex: 1 ; margin-right: unset; }
  }
  .switch_content #switch:checked ~ .contentsbox,
  .switch_content_cd #switch_cd:checked ~ .contentsbox { display: block; } /* コンテンツを表示 */
  /* プリファード番号入力の為の設定値変更 */
  .search-box .switch_content .contentsbox .input-field,
  .search-box .switch_content_cd .contentsbox .input-field { height: 47px;}
  .search-box .switch_content .contentsbox input[type='text'],
  .search-box .switch_content_cd .contentsbox input[type='text'] { height: 44px; }
  .search-box .switch_content .contentsbox input,
  .search-box .switch_content_cd .contentsbox input { border-right: var(--color-input-border) 1px solid !important;}
  @media (max-width: 600px){ /* 740px */
    .search-box .switch_content .contentsbox input,
    .search-box .switch_content_cd .contentsbox input { margin-bottom: 0;}
  }
/* ここまで プリファード番号, 優待コード入力   下の設定との重複をチェックすること TODO*/

/* カレンダー、プリファード番号, 優待コード表示時の背景色グレー */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒 */
  display: none; /* 初期状態では非表示 */
  z-index: 200; /* モーダル:200(カレンダー:210,プリファード番号:211, 優待コード:212)より後ろ */
}




.search-box .inputfld-from .input-field, .search-box .inputfld-to .input-field,
  .search-box .inputfld-oth .input-field { margin-top: 2px; margin-bottom: 2px; margin-right:unset;}
  @media (max-width:1000px){ /* PickupLoc, DropoffLic 入力右端飛び出しを消す */ /* → 820px*/
    .search-box .inputfld-from .input-field.location, .search-box .inputfld-to .input-field.location{
      margin-right: 2px !important;
    }
  }
.search-box .inputfld-from .location input, .search-box .inputfld-to .location input {
  background-color: white;
  border-top: 1px solid var(--color-input-border);
  border-left: 1px solid var(--color-input-border);
  border-right: 1px solid var(--color-input-border);
}
.search-box .inputfld-from .datepicker input, .search-box .inputfld-to .datepicker input {
  padding-left: 4px;
  background-color: white;
  border-top: 1px solid var(--color-input-border);
  border-right: 0;
  border-left: 1px solid var(--color-input-border);
}
.search-box .inputfld-from select, .search-box .inputfld-to select {
  height: 3.21em;
  background-color: white;
  border-top: 1px solid var(--color-input-border);
  border-right: 1px solid var(--color-input-border);
  border-left: 1px solid var(--color-input-border);
}
.search-box .inputfld-oth .wizawdnumber input, .search-box .inputfld-oth .discountcode input {
  padding-left: 4px;
  background-color: var(--color-input-bg);
  border-top: 1px solid var(--color-input-border);
  border-right: 0;
  border-left: 1px solid var(--color-input-border);
}
.search-box .inputfld-oth .ageselect select {
  height: 3.2em;
  background-color: var(--color-input-bg);
  border-top: 1px solid var(--color-input-border);
  border-right: 0;
  border-left: 1px solid var(--color-input-border);
}
.search-box .inputfld-oth .residencyselect select {
  height: 3.2em;
  background-color: var(--color-input-bg);
  border-top: 1px solid var(--color-input-border);
  border-right: 0;
  border-left: 1px solid var(--color-input-border);
}

/*
.pickupdatetime { margin-top: 16px;}
  .datepicker { width: 140px !important; }
  .timepicker { width: 100px !important; }
  .dateselect { width: 70px !important; }
  .timeselect { width: 70px !important; }
  .dateselect label,
  .timeselect label {
    transform: translateY(8px) scale(0.9);
    -webkit-transform: translateY(8px) scale(0.9);
  }
  #driverage { width: 100px; }
#open-dropoffloc {
  margin-left: 2em;
}
.inline-field p {
  display: inline-block;
  clear: both;
  float: none;
}
.discount-line { padding-left: 50px; }
.discount { text-align: center; }
  .discount p { margin-left:10px !important; }
  .discount p input { width: 120px !important; }
.search-line { margin-top: 1em;}
*/
#pickuploc, #dropoffloc, #pickupdate, #dropoffdate,
#wizardno, #wizardname, #awdno, #couponcode, #wizardtitle, #codetitle {
  padding-left: 0.5em !important;
}
@media (max-width: 1000px){ /* PickupLoc, DropoffLic 入力右端飛び出しを消す */ /* → 820px*/
  #pickuploc, #dropoffloc {
    padding-left: unset !important;
  }
}
#dropoffloc::placeholder{
  font-size: 1rem;
  color:#65615D;
  padding-left: 1em;
}

.search-error {
  margin-bottom:1em;
  color: #cc5252;
}


/* ----------------
 * 予約 - プラン選択
 */
.carplans {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(326px, 1fr)); /* プランBOXを1行に1つ～3つ表示*/
  grid-gap: 1vw ;
}
.carplan { max-width: 490px; } /* プランBOX最大幅 */
.carplan {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border: 1px solid var(--color-grey-light);
  border-radius: 14px;
}
/* プランBOXは3つに分けた car:車名・画像 equips:装備 plan:価格・申込ボタン */
.carplan > div:first-child { margin: 10px 10px 0 10px; }
.carplan > div:not(:first-child,:last-child) { margin: 0 10px 10px 10px; }
.carplan > div:last-child { margin: 0 10px 10px 10px; }
.carplan .car    { grid-row: 1; grid-column: 1/13; } /* 行1の先頭フレーム1から末尾13までの1行を使う */
.carplan .equips { grid-row: 2; grid-column: 1/13; padding-top: 0px;}
.carplan .plan   { grid-row: 3; grid-column: 1/13; }
@media (min-width: 500px) and (max-width: 704px){
  .carplan { max-width: 600px; margin-left: 1vw; } /* 1行1つ表示の場合は幅広にする */
  .carplan .car    { grid-row: 1; grid-column: 1/8; } /* 行1の先頭フレーム1から末尾13までの1行を使う */
  .carplan .equips { grid-row: 1; grid-column: 8/13; padding-top: 53px; } /* 画像の右に装備を表示 */
  .carplan .plan   { grid-row: 2; grid-column: 1/13; }
}
/* AVIS Inclusiveなど特別価格の表示 */
.carplan .plan .specialrete { text-align: center; margin: 0 1.4em 0.4em 0; color: white; background-color: var(--color-red); } /* 価格の上の帯 */

.carplan .car { /* 車種一覧 .car-cardsと同じ */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 680px)); /* BOXの最低幅とそれを超えた時の最高幅 */
  text-align: center;
}
.carplan .car .carimg { padding: 0 15%; } /* 画像を小さくして中央 */
.carplan .car .carimg img { width: 100%; height: auto; object-fit: contain; } /* これ無いと幅狭ではみ出す */

.carplan .equips .carequips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  grid-gap: 0.2vw ;
  font-size: 0.8em;
  padding-left: 15px;
}
.carplan .equips .carequips .door span, .item-equip .img-car-doors
   { background-image: url("../img/resflow_sprite.png"); background-size: 900px; /* 求める画像サイズに縮小*/
     background-position: -580px 327px; width: 22x; height: 16px; padding-left: 26px; display: inline-block; }
.carplan .equips .carequips .seat span, .item-equip .img-car-seats
   { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
     background-position: -308px 327px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
.carplan .equips .carequips .aircon span, .item-equip .img-car-ac
   { background-image: url("../img/resflow_sprite.png"); background-size: 780px; /* アイコン高い */
     background-position: -445px 284px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
.carplan .equips .carequips .automatic span, .item-equip .img-car-automatic
   { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
     background-position: -648px 327px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
.carplan .equips .carequips .largebag span, .item-equip .img-car-largebags
   { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
     background-position: -377px 327px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
.carplan .equips .carequips .smallbag span, .item-equip .img-car-smallbags
   { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
     background-position: -377px 272px; width: 22px; height: 16px; padding-left: 26px; display: inline-block; }
.carplan .equips .carequips .mpg span, .item-equip .img-car-mpg
   { background-image: url("../img/resflow_sprite.png"); background-size: 900px;
     background-position: -440px 327px; width: 22px; height: 22px; padding-left: 26px; display: inline-block; }
.carplan .plan { display: table; width: 100%;
  /* TODO 後で消す* / background-color: rgba(200, 200, 200, 0.3); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; */
    }

/* ---- プランの価格表示 */
/*.plan-list {
  margin-bottom: 1.5vw;
}*/
.plan-list > .flex-wrap { display: flex; flex-wrap: wrap; justify-content: space-around; } /* flex-direction: row; (横並び) */
.plan-list .plan-box {
  width: 144px;
  /* min-height: 100px;    / * TODO 予約ボタンの下に空白できる. 不要なら削除する */
  margin-right: 10px;
  margin-bottom: 14px;
  background-color: white;
  text-align: center;
  /* 下 BOX内の項目もFLEX入れ子*/
  display: flex;
  flex-direction: column; /* 入れ子 縦並び */
  justify-content: space-between;
}
/*.plan-list .plan-box:last-child { margin-right: 0px; }*/
.plan-list button.paynow, .plan-list button.paylater {
  width: 145px;
  line-height: normal;
  border-radius: 40px;
}
.plan-list button.paylater {
  background: #fff !important;
  border: 2px solid var(--color-red) ;
  color: var(--color-red);
}

/* 含まれる保険・補償の表示 */
.plan-list .plan-disc { font-size: 0.8em; margin-top: 0.4em; text-align: center;}
.plan-list .plan-disc .plan-includes,
.plan-list .plan-disc .plan-includes-dyna {
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index:3;
  width: clamp(320px, 320%, 380px); /* 380px */
  text-align: left;
  background-color: #fff;
  border: 1px solid #ccc;
 }
 @media (min-width:705px) and (max-width:992px) {
  .plan-list .plan-disc .plan-includes-dyna { width: clamp(280px, 46%, 360px); }
 }
 @media (max-width:704px) {
  .plan-list .plan-disc .plan-includes-dyna { width: 80%; right: 10%; left: 10%;}
 }
.plan-list .plan-disc .plan-includes div,
.plan-list .plan-disc .plan-includes-dyna div { padding: 5px 1em 2px; }
.plan-list .plan-disc .plan-includes span:first-child { display: inline-block; width: 90%;}
.plan-list .plan-disc .plan-includes span:last-child { display: inline-block; width: 10%;}

.box-display { display: block; }
.box-nonedisplay { display: none; }



/* ----------------
 * 予約 - オプション選択
 */
.options {
  margin-bottom: 1.5vw;
  padding: 1em ;/*2em;*/
  background-color: rgba(200, 200, 200, 0.3);
}
.options > .flex-wrap { display: flex; flex-wrap: wrap; } /* flex-direction: row; (横並び) */
.options .option-box {
  width: 250px;
  min-height: 140px; /* 200px*/
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 1em;
  background-color: white;
  /* 下 BOX内の項目もFLEX入れ子*/
  display: flex;
  flex-direction: column; /* 入れ子 縦並び */
  justify-content: space-between;
}
.options .option-box:last-child { margin-right: 0px; }

/* チェックボックスの色を変更 オプション選択とフライト・確認 Materialize標準 見づらい*/
.cb-color[type="checkbox"].filled-in:not(:checked)+span:not(.lever):after{ border: 2px white solid !important; top: 2px;} /* chk off*/
.cb-color[type="checkbox"].filled-in:checked+span:not(.lever):after{ border: 2px white solid !important; background-color: #800517; top: 2px; } /* chk on */
.cb2-color[type="checkbox"]:checked+span:not(.lever)::before { border-right: 2px var(--color-red) solid; border-bottom: 2px var(--color-red) solid; }

/* */
.options .option-box .option-select { padding: 0.4em 1em; background-color: var(--color-red); position: relative; height: 2.6em;}
.options .option-box .option-select select {
  position: absolute;
  display: inline-block;
  padding: 0;
  height: 2em;
  width: 50px;
}
.options .option-box .option-select span { font-size: 1.5em; color: white; }
.options .option-box .option-select span.right { font-size: 1.5em; color: white; position: absolute; right: 0.4em; }

/* ----------------
 * 予約 - 申込者情報入力
 */
.applicant .title {
  font-size: clamp(14px, 1.8vw, 20px);
  margin: 2.5em 0 1.5em;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-grey-light);
}
.applicant .flex-wrap { display: flex; flex-wrap: wrap; } /* 項目名と入力域を横並び */
.applicant .flex-wrap > div:first-child { flex: 1 200px; padding-top:1em; } /* 項目名 */
.applicant .flex-wrap > div:last-child { flex: 2 350px; margin-left: 4vw;  /* 入力域 */
  /* 下 BOX内の項目もFLEX入れ子*/
  display: flex;
  flex-direction: row; /* 入れ子 横並び */
}
.applicant .flex-wrap .input-field { flex:1 200px; margin-top: 0 !important; } /* 入力域の幅 最小200px */
.applicant .flex-wrap .input-field:first-child { margin-right: 6vw; } /* 入力域2つの間に間隔 */
.applicant .input-field input#phone, .applicant .input-field select#driverage,
  .applicant .input-field input#deptdate { max-width: 10em; } /* 入力文字数少ない幅 */
.applicant .flex-wrap .radio-field {padding-top: 1em; } /* 上のdiv:first-child{ paddind-top:1em; */
/* ラジオボタン 色 */
.rd-color[type="radio"]:checked+span:after { background-color: var(--color-red); border: 2px solid var(--color-red); } /* ON */
.rd-color[type="radio"]:not(:checked)+span:before { background-color: white; border: 2px solid var(--color-red); } /* OFF */

/* ----------------
 * 予約 - 申込内容確認
 */
.confirm .title-area {
  position: relative;
  height: clamp(2em, 10vw, 8rem);
  border-bottom: var(--color-grey-light) 2px solid;
}
  .confirm .title{
    position: absolute;
    bottom: 0;
    font-size: clamp(14px, 1.8vw, 20px);
  }
  .confirm .changevalue {  /* "*の変更" の位置 右端 */
    position: absolute;
    bottom: -2px;
    right: 0;
  }
  .confirm .changevalue a { font-size: small;}

.confirm .flex-wrap { display: flex; } /* 項目名と入力値を横並び */
.confirm .flex-wrap > div { margin-top: 1vw; }
.confirm .flex-wrap > div:first-child { flex: 1 5em;  } /* 項目名 */
.confirm .flex-wrap > div:nth-child(2) { flex: 1 5em; display: inline-block; text-align: right; margin-right: 4vw; } /* 項目名 */
.confirm .flex-wrap > div:last-child { flex: 1; } /* 入力値 */


.confirmation > div { margin-bottom: 1em; }
.confirmation label { color: black;}


/* -------------------
 * 予約 - 完了
 */
 .booked .title, .paid .title {
  font-size: clamp(14px, 1.8vw, 20px);
  margin: 2.5em 0 1.5em;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--color-red);
}
.booked .flex-wrap { display: flex; margin-bottom: clamp(18px, 2vw, 30px); }
.booked .flex-wrap > div:first-child { flex: 1 200px; padding-top: 0.6em; }
.booked .flex-wrap > div:last-child { flex: 2 350px; margin-left: 4vw; }


/* -------------------
 * 申し込み内容確認
 */

/* for Budget
#newbook,
#pagereload,
#otherres { margin-top: 10px; }
*/

/* ----------------
 * Materialize Checkbox 表示 で ゆっくり表示/非表示 CSSのみ
 書き方
  <label for="hidden-boc-cbx">
    <input type="checkbox" id="hidden-box-cbx" class="filled-in" />
    <span>別の営業所へ返す</span>
    <div class="hidden_show_cbx">
      <p>ここが表示/非表示</p>
    </div>
  </label>
 */
.hidden_show_cbx {  /* BOXを非表示 */
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
input#hidden-box-cbx:checked + span + .hidden_show_cbx {  /* OnでBOXを表示 */
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

/* ----------------
 * 一般的 Checkbox でテキストのみ表示 で ゆっくり表示/非表示 CSSのみ
 書き方
  <input type="checkbox" id="hidden-box-txt" />
  <label class="hidden-box-txt blue-text" for="hidden-box-txt">詳しい内容を表示</label>
  <div class="row rentalinfo-box hidden_show_txt">
    <p>ここが表示/非表示</p>
  </div>
 */
.hidden-box-txt {  /* マウスポインタ、下線 */
  cursor :pointer;
  text-decoration-line: underline;
}
.hidden_show_txt {  /* BOXを非表示 */
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
input#hidden-box-txt:checked + label + .hidden_show_txt {  /* OnでBOXを表示 */
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

/* ----------------
 * 一般的なcheckbox で ボタン表示 でゆっくり表示/非表示 CSSのみ
 */
 .hidden_box {    /* 全体div */
  margin: 2em 0;
  padding: 0;
}
label.hidden_box_btn {  /*ボタン装飾*/
  padding: 5px 10px;
  font-weight: bold;
  background: #efefef;
  border-radius: 5px;
  cursor :pointer;
  transition: .5s;
}
label.hidden_box_btn:hover {  /*ボタンホバー時*/
  background: silver;
}
input#hidden_box_btn {  /*チェックは見えなくする*/
  display: none;
}
.hidden_show_btn {  /*中身を非表示にしておく*/
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}
input#hidden_box_btn:checked + label + .hidden_show_btn {  /*クリックで中身表示*/
  padding: 10px 0;
  height: auto;
  opacity: 1;
}

/* ----------
 * 送信メール
 */
.mail-name { font-size: 18px; font-weight: bold; }