/* ----------------------------------------------------------------


  DP Common Modules Modify


----------------------------------------------------------------- */
/* ----------------------------------------------------------------

  .form-search

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .form-search
----------------------------------------------------------------- */
.pref .form-search{
padding:20px;
border-radius:8px;
}


/* ----------------------------------------------------------------
  .form-search-exec
----------------------------------------------------------------- */
.pref .form-search-exec{
width:140px;
}

.pref .form-search-exec-btn{
--cmn-btn-color:#177BCB;
box-shadow:none;
}

.pref .form-search-exec-btn:active,
.pref .form-search-exec-btn:hover,
.pref .form-search-exec-btn:focus{
background-color:var(--cmn-btn-color);
}



/* ----------------------------------------------------------------

  .seo

----------------------------------------------------------------- */
.seo{
padding-top:0;
border-image:none;
background-color:transparent;
}






/* ----------------------------------------------------------------


  Pref LP Unique Modules


----------------------------------------------------------------- */
/* ----------------------------------------------------------------

  .pref-header

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .pref-header
----------------------------------------------------------------- */
.pref .pref-header{
margin-bottom:48px;
padding:0 20px 20px;
background-color:#f6f6f6;
font-size:14px;
}


/* ----------------------------------------------------------------
  .pref-header-hdg
----------------------------------------------------------------- */
.pref .pref-header-hdg{
margin:0 -20px 20px;
padding:10px 15px 6px;
color:#fff;
font-size:24px;
font-weight:bold;
background-color:#666;
}


/* ----------------------------------------------------------------
  .pref-header-info
----------------------------------------------------------------- */
.pref .pref-header-info{
display:-webkit-box;
display:flex;
-webkit-box-align:start;
align-items:flex-start;
flex-direction:row-reverse;
gap:0 30px;
}

.pref .pref-header-info > div:first-child{
-webkit-box-flex:1;
flex:1;
}

.pref .pref-header-info > div > :first-child{
margin-top:0;
}

/* .pref-header-info-hdg
----------------------------------------------------------------- */
.pref .pref-header-info-hdg{
margin:20px 0 4px;
font-size:16px;
}

/* .pref-header-info > .thumb
----------------------------------------------------------------- */
.pref-header-info .thumb{
width:393px;
position:relative;
}

.pref-header-info .thumb img{
max-width:100%;
}

.pref-header-info .thumb > span{
padding:0 12px 4px;
color:rgba(255,255,255,.7);
display:-webkit-box;
display:flex;
-webkit-box-align:end;
align-items:flex-end;
-webkit-box-pack:end;
justify-content:flex-end;
box-sizing:border-box;
width:100%;
height:3em;
overflow:hidden;
position:absolute;
left:0;
bottom:0;
z-index:1;
background:linear-gradient(transparent 5%, rgba(0,0,0,.1) 25%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.6) 100%);
text-align:right;
font-size:12px;
}

.pref-header-info .thumb > span a{
color:rgba(255,255,255,.7);
text-decoration:none;
}

.pref-header-info .thumb img{
vertical-align:bottom;
}



/* ----------------------------------------------------------------

  .pref-form

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .pref-form-header
----------------------------------------------------------------- */
.pref .pref-form-header{
margin:12px 0;
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
gap:0 20px;
font-size:11px;
}


/* ----------------------------------------------------------------
  .pref-form-header-hdg
----------------------------------------------------------------- */
.pref .pref-form-header-hdg{
font-size:14px;
}



/* ----------------------------------------------------------------

  .pref-cheapest

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .pref-cheapest
----------------------------------------------------------------- */
.pref .pref-cheapest > :first-child{
margin-top:0;
}


/* ----------------------------------------------------------------
  .pref-cheapest-hdg
----------------------------------------------------------------- */
.pref .pref-cheapest-hdg{
margin:20px 0 12px;
padding:10px 8px 6px;
line-height:1;
background-color:#f3f3f3;
font-size:14px;
}

.pref .pref-cheapest-hdg > span{
margin:-2px 4px 0 0;
color:rgba(0,0,0,0);
display:inline-block;
vertical-align:middle;
width:54px;
height:20px;
overflow:hidden;
background-position:50% 50%;
background-repeat:no-repeat;
background-size:90% auto;
text-indent:-100px;
background-color:#fff;
}

.pref .pref-cheapest-hdg > .ana{
background-image:url(/element/j_dp/pref/images/ic_ana.png);
}

.pref .pref-cheapest-hdg > .jal{
background-image:url(/element/j_dp/pref/images/ic_jal.png);
}

.pref .pref-cheapest-hdg > .lcc{
width:223px;
background-image:url(/element/j_dp/pref/images/ic_lcc.png);
background-size:96% auto;
}


/* ----------------------------------------------------------------
  .pref-cheapest-list
----------------------------------------------------------------- */
.pref .pref-cheapest-list{
display:-webkit-box;
display:flex;
flex-wrap:wrap;
gap:12px 36px;
}

.pref .pref-cheapest-list > li{
padding-bottom:10px;
border-bottom:1px solid #ddd;
width:calc(50% - 18px);
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
gap:0 20px;
}

.pref .pref-cheapest-list > li > div:first-child{
-webkit-box-flex:1;
flex:1;
}



/* ----------------------------------------------------------------

  .pref-sopt

----------------------------------------------------------------- */
/* ----------------------------------------------------------------
  .pref-sopt
----------------------------------------------------------------- */
.pref .pref-sopt{
margin-bottom:-36px;
display:-webkit-box;
display:flex;
flex-wrap:wrap;
gap:12px 8px;
}


/* ----------------------------------------------------------------
  .pref-sopt-item
----------------------------------------------------------------- */
.pref .pref-sopt-item{
border-radius:6px;
box-shadow:0 0 6px rgba(0,0,0,.3);
width:calc((100% - 16px) / 3);
position:relative;
overflow:hidden;
display:-webkit-box;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:reverse;
flex-direction:column-reverse;
background-color:#fff;
font-size:12px;
}

.pref-sopt > .pref-sopt-item:not(.pref-sopt-btn):nth-child(n+4){
display:none;
}

.pref-sopt.is-active > .pref-sopt-item:not(.pref-sopt-btn):nth-child(n+4){
display:-webkit-box;
display:flex;
}

/* .pref-sopt-item > .icon
----------------------------------------------------------------- */
.pref-sopt-item .icon{
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
-webkit-box-pack:center;
justify-content:center;
width:27px;
height:32px;
overflow:hidden;
position:absolute;
top:0;
left:12px;
z-index:1;
line-height:1;
filter:drop-shadow(rgba(0,0,0,.5) 0 1px 1px);
transform:translateZ(0);
background:url(/element/j_dp/shared/images/icon-ranking.svg) 0 0 no-repeat;
font-size:16px;
font-family:Arial;
}

.pref-sopt-item .icon > span{
overflow:hidden;
position:absolute;
height:0;
}

/* .pref-sopt-item > .data
----------------------------------------------------------------- */
.pref-sopt-item .data{
padding:8px 8px 12px;
-webkit-box-flex:1;
flex:1;
display:-webkit-box;
display:flex;
flex-direction:column;
gap:4px 0;
}

.pref-sopt-item .data .name{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:14px;
}

/* .pref-sopt-item > .desc
----------------------------------------------------------------- */
.pref .pref-sopt-item .desc{
margin-top:4px;
}

.pref .pref-sopt-item .desc p button{
border:none;
padding:0;
color:#a4a4a4;
display:inline-block;
background:none;
font-size:12px;
}

.pref .pref-sopt-item .desc p button::before{
margin:0 2px;
color:var(--cmn-font-color-base);
display:inline-block;
content:'...';
vertical-align:bottom
}

.pref .pref-sopt-item .desc.is-active p button{
display:none;
}

.pref .pref-sopt-item .desc > button{
margin:12px 0 0 auto;
padding:0 0 0 12px;
border:none;
display:none;
background:url(/element/j_dp/shared/images/icon-arrow-up.svg) 0 49% no-repeat;
background-size:8px auto;
font-size:12px;
}

.pref .pref-sopt-item .desc.is-active > button{
display:block;
}

/* .pref-sopt-item > .more
----------------------------------------------------------------- */
.pref-sopt-item .more{
margin-top:auto;
text-align:right;
}

/* .pref-sopt-item > .thumb
----------------------------------------------------------------- */
.pref-sopt-item .thumb{
height:125px;
}

.pref-sopt-item .thumb img{
width:100%;
height:100%;
object-fit:cover;
}

.pref-sopt-item .thumb.no-photo{
box-shadow:0 -1px 0 #dadce0 inset;
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
-webkit-box-pack:center;
justify-content:center;
}

.pref-sopt-item .thumb.no-photo img{
width:100px;
height:auto;
}


/* ----------------------------------------------------------------
  .pref-sopt-btn
----------------------------------------------------------------- */
.pref .pref-sopt-btn{
width:100%;
text-align:right;
}

.pref .pref-sopt-btn button{
border:none;
padding:0 0 0 16px;
display:inline-block;
background:url(/element/j_dp/shared/images/icon-arrow-down.svg) 0 49% no-repeat;
background-size:8px auto;
font-size:14px;
}

.pref-sopt.is-active .pref-sopt-btn button{
background-image: url(/element/j_dp/shared/images/icon-arrow-up.svg);
}