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

/*==================================
	base
==================================*/
*, *::before, *::after { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html { height: 100%; width: 100%; font-size: 62.5%;/* 10px */ -webkit-text-size-adjust: 100%;}
body { height: 100%; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Century Gothic", Arial, "Segoe UI", "Helvetica Neue", HelveticaNeue, Meiryo, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, sans-serif; font-size: 1.6rem; color: #1e1e1e; line-height: 1.5; letter-spacing: 0.02em;}
.wrapper { position: relative; height: 100%; width: 100%;}
section { position: relative; z-index: 1;}
a { color: #0074be; text-decoration: none; display: block;}
a:hover { text-decoration: none;}
img { vertical-align: bottom;}
.inner { max-width: 1280px; width: 100%; margin: 0 auto;}
/* Responsive 1280 */
@media screen and (max-width: 1280px) {
	.inner { padding: 0 1rem;}
}
/* Responsive 751 */
@media screen and (min-width: 751px) {
	.spOnly { display: none;}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	body { font-size: 1.4rem; min-width: 100%;}
	img { width: 100%;}
	.pcOnly { display: none;}
}

/*==================================
	input
==================================*/

input, button, select, textarea { background: transparent; border: none; border-radius: 0; font: inherit; outline: none;}
textarea { resize: vertical;}
input[type='radio'] { display: none;}
input[type='submit'], input[type='button'], label, button, select { cursor: pointer;}
select::-ms-expand { display: none;}

/*----- checkbox -----*/
input[type="checkbox"] { border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; width: 13px; height: 13px; border: 2px solid #c0c0c0; background: #fff; vertical-align: -5px;}
input[type="checkbox"]:checked { border: 2px solid #0074be;}
input[type="checkbox"]:checked:before { position: absolute; top: 0; left: 0.3rem; transform: rotate(50deg); width: 4px; height: 8px; border-right: 2px solid #0074be; border-bottom: 2px solid #0074be; content: '';}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	input[type="checkbox"] { width: 20px; height: 20px;}
	input[type="checkbox"]:checked:before { top: 0; left: 0.5rem; width: 6px; height: 12px; border-right: 3px solid #0074be; border-bottom: 3px solid #0074be;}
}


/*==================================
	loading
==================================*/

.loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; text-align: center; background: #fff; z-index: 9999;}
.loading .loading-inner { width: 100%; margin: 0 auto; text-align: center;}
.loading .loading-inner img { width: 5%; height: auto;}
.loading .txt { margin-top: 2rem; font-size: 2.4rem; font-weight: bold; color: #0074be;}
.loading .fadeUp{ animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
.is-loaded .loading { margin: 0 auto; opacity: 0; pointer-events: none; transition: opacity 2s cubic-bezier(0.42, 0, 0.58, 1);}
.loading .prog-bar { height: 8px;width: 200px; margin: 2rem auto 0 auto; border-radius: 4px; --c:no-repeat linear-gradient(#0074be 0 0); background: var(--c),var(--c),#cfcfcf; background-size: 60% 100%; animation: l16 3s infinite;}
@keyframes l16 {
	0%   {background-position:-150% 0,-150% 0}
	66%  {background-position: 250% 0,-150% 0}
	100% {background-position: 250% 0, 250% 0}
}
@keyframes progress {
    0% { width: 0;}
    100% { width: 100%;}
}
@keyframes fadeUpAnime{
	from { opacity: 0; transform: translateY(100px);}
	to { opacity: 1; transform: translateY(0);}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.loading .loading-inner img { width: 15%; height: auto;}
}

/*==================================
	page top
==================================*/
#pagetop { position: fixed; right: 0; bottom: 3rem; width: 120px; height: 60px; padding: 0 1rem; display: flex; align-items: center; border-radius: 30px 0 0 30px; color: #fff; font-weight: bold; background: #0074be; z-index: 999; cursor: pointer;}
#pagetop:before { content: "▲"; display: block; margin-right: 0.5rem;}

/* Responsive 750 */
@media screen and (max-width: 750px) {
	#pagetop { width: 100px; line-height: 1.2; text-align: center; padding: 0 2rem;}
}

/*==================================
	header
==================================*/
header#hd { position: relative; width: 100%; margin: 0; padding: 0; background: #fff; z-index: 50; box-shadow: 0 1px 10px 0 rgba(30,30,30,0.15)}
header#hd .hd-inner { height: 56px; display: flex; align-items: center; padding-left: 18px;}

/* navigation drawer */
header#hd nav { left: -400px; width: 400px; padding: 4rem 2rem 3rem 5rem; display: block; position: fixed; top: 0; bottom: 0; background: #fff; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .5s; z-index: 20; opacity: 0;}
header#hd #nav-area { position: relative;}
header#hd #nav-area .box h3, #nav-area .box h3 a { font-weight: bold; color: #1e1e1e; margin-top: 2rem;}
header#hd #nav-area .box ul.hd-nav { margin-top: 1rem; font-size: 1.4rem;} 
header#hd #nav-area .box ul.hd-nav a { color: #1e1e1e;} 
header#hd .toggle-btn { display: block; position: absolute; top: 22px; left: 2rem; width: 18px; height: 12px; transition: all .5s; cursor: pointer; z-index: 99;}
header#hd .toggle-btn span { display: block; position: absolute; right: left; width: 18px; height: 2px; background-color: #1e1e1e; transition: all .5s;}
header#hd .toggle-btn span:nth-child(1) { top: 0;}
header#hd .toggle-btn span:nth-child(2) { top: 5px;}
header#hd .toggle-btn span:nth-child(3) { bottom: 0;}
header#hd #mask { display: none; transition: all .5s;}
/*.open { overflow: hidden;}*/
.open header#hd nav { left: 0; opacity: 1;}
.open header#hd .toggle-btn { display: flex; position: fixed;}
.open header#hd .toggle-btn span { background-color: #1e1e1e;}
.open header#hd .toggle-btn span:nth-child(1) { -webkit-transform: translateY(7px) rotate(-45deg); transform: translateY(7px) rotate(-45deg);}
.open header#hd .toggle-btn span:nth-child(2) { opacity: 0;}
.open header#hd .toggle-btn span:nth-child(3) { -webkit-transform: translateY(-3px) rotate(45deg); transform: translateY(-3px) rotate(45deg);}
.open header#hd #mask { display: block; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: #1e1e1e; opacity: .3; z-index: 15; cursor: pointer;}

/* logo */
header#hd .hd-logo { position: relative; left: 4rem; width: 147px; z-index: 10;}
header#hd .hd-logo img { width: 100%;}

/* status */
header#hd .status { position: absolute; right: 0; display: flex; align-items: center; margin: 0;}
header#hd .status .hd-faq { height: 56px; padding: 0.6rem 2rem; font-size: 1.2rem; color: #1e1e1e; border-left: 1px solid #ddd; line-height: 1;}
header#hd .status .hd-faq img { width: 2.5rem;}
header#hd .status .hd-btn { height: 56px; padding: 0.5rem 1.5rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 1.2rem; color: #fff; text-align: center; background: #0074be;}
header#hd .status .hd-btn img { width: 2.5rem;}
header#hd .status .hd-btn p {line-height: 1.2;}

/* Responsive 1201 */
@media screen and (min-width: 1201px) {
	/* main menu*/
	header#hd ul.hd-menu-sp { display: none;}
	header#hd ul.hd-menu-pc { position: relative; left: 6rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: nowrap; height: 100%;}
	header#hd ul.hd-menu-pc li { margin: 0; height: 56px; border-right: 1px solid #ddd; text-align: center;}
	header#hd ul.hd-menu-pc li:first-child { border-left: 1px solid #ddd;}
	header#hd ul.hd-menu-pc li a { width: 100%; height: 100%; padding: 0.2rem 0.8rem; flex-direction: column; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; line-height: 1em; letter-spacing: 0em; background: #fff;}
	header#hd ul.hd-menu-pc li a:hover { background: #0074be; opacity: 1;}
	header#hd ul.hd-menu-pc li a .icon { width: 4rem; margin-bottom: .8rem;}
	header#hd ul.hd-menu-pc li a .icon img { max-height: 2rem;}
	header#hd ul.hd-menu-pc li a:hover .icon img { filter: brightness(0) invert(1);}
	header#hd ul.hd-menu-pc li .menu { color: #1e1e1e; font-size: 1.2rem; line-height: 1;}
	header#hd ul.hd-menu-pc li a:hover .menu { color: #fff;}
}
/* Responsive 1200 */
@media screen and (max-width: 1200px) {
	/* main menu*/
	header#hd ul.hd-menu-pc { display: none;}
	header#hd ul.hd-menu-sp { position: relative; height: 100%; display: flex; justify-content: center; flex-wrap: nowrap; border-top: 1px solid #ddd;}
	header#hd ul.hd-menu-sp li { width: calc(100%/9); margin: 0; border-right: 1px solid #ddd; text-align: center; font-size: 1.2rem; background: #0074be;}
	header#hd ul.hd-menu-sp li:last-child { border-right: 0;}
	header#hd ul.hd-menu-sp li a { height: 100%; flex-direction: column; padding: 1rem 0.5rem; position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: nowrap; color: #fff; line-height: 1em; letter-spacing: 0em; background: #0074be;}
	header#hd ul.hd-menu-pc li a:hover { opacity: 1;}
	header#hd ul.hd-menu-sp li a .icon { width: 6rem; margin-bottom: .8rem;}
	header#hd ul.hd-menu-sp li a .icon img { max-height: 3rem;}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	header#hd .hd-inner { height: 48px;}
	/* navigation drawer */
	header#hd nav { left: -80%; width: 80%;}
	header#hd .toggle-btn { left: 1.5rem; top: 18px;}
	/* main menu*/
	header#hd ul.hd-menu-sp li { width: calc(100%/6); font-size: 1rem;}
	header#hd ul.hd-menu-sp li a .icon { width: 5rem;}
	header#hd ul.hd-menu-sp li a .icon img { max-height: 2rem;}
	header#hd .status .hd-faq { padding: 0.6rem 1.5rem;}
	header#hd .status .hd-btn { padding: 0.5rem 1rem;}
	/* logo */
	header#hd .hd-logo { left: 3rem;}
}
/* Responsive 450 */
@media screen and (max-width: 450px) {
	/* logo */
	header#hd .hd-logo { width: 31%; height: auto;}
}


/*==================================
	breadcrumb - pankuzu
==================================*/
.breadcrumb { background: #dfdfdf; overflow: hidden; width: 100%; font-size: 1rem;}
.breadcrumb li { float: left;}
.breadcrumb a { padding: 0.5rem 1rem 0.5rem 2rem; float: left; position: relative; background: #f8f8f8; opacity: 1;}
.breadcrumb li:first-child a { padding-left: 1rem;}
.breadcrumb a::after, .breadcrumb a::before { content: ""; position: absolute; top: 50%; margin-top: -1.5rem; border-top: 1.5rem solid transparent; border-bottom: 1.5rem solid transparent; border-left: 1rem solid; right: -0.9rem;}
.breadcrumb a::after { z-index: 2; border-left-color: #f8f8f8;}   
.breadcrumb a::before { border-left-color: #ddd; right: -1.1rem; z-index: 1;}   
.breadcrumb .current,
.breadcrumb .current:hover { color: #1e1e1e;}


/*==================================
	urgent-news-list
==================================*/
.urgent-news-list { position: relative; top: 0; margin: 0; padding: 1.5rem 0; font-size: 1.2rem; background: #fff1f1;}
.urgent-news-list .inner h1 { font-weight: bold; color: #f64e83; font-size: 1.2rem;}
.urgent-news-list .inner ul { margin: 0 0 0 2rem;}
.urgent-news-list .inner ul li.item a { display: flex; flex-wrap: nowrap; padding: 0;}
.urgent-news-list .inner ul li.item .date { margin: 0; color: #757575; padding: 0; min-width: 120px;}
.urgent-news-list .inner ul li.item .title { margin: 0; width: 100%;}

/* Responsive 751 */
@media screen and (min-width: 751px) {
	.urgent-news-list .inner { display: flex;}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.urgent-news-list .inner ul { margin: 0.5rem 0 0 0rem;}
	.urgent-news-list .inner .item a { flex-wrap: wrap;}
  	.urgent-news-list .inner .item .title { margin-top: 1rem;}
}

/*==================================
	contents
==================================*/
#contents { padding-bottom: 3rem; background: #bfdcef;}
.error-txt { margin-top: 1rem; font-size: 1.4rem;}
.error-txt a { text-decoration: underline;}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.error-txt { padding: 0 1rem 1rem 1rem;}
}

/*==================================
	main
==================================*/
#main { position: relative; width: 100%; padding: 2rem 0; background: #76bce8;}
#main .search { margin: 1rem auto 0 auto; border-radius: 10px; background-color: rgb(0, 44, 88, 0.52);}
#main .main-copy h1 { font-size: 2.4rem; font-weight: bold; z-index: 1; line-height: 1.5; margin-bottom: 0;}
#main .main-copy .sub-copy { font-size: 1.2rem; z-index: 1; line-height: 1.5;}
/* Responsive 751 */
@media screen and (min-width: 751px) {
	#main .search { max-width: 900px;}
	#main .main-copy { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;}
}
/* Responsive 900 */
@media screen and (max-width: 900px) {
	#main .main-copy { display: flex; flex-wrap: wrap;}
	#main .main-copy .sub-copy { margin: 0.5rem;}
	#main .search { margin: 0.5rem auto 0 auto; }
}

.way { width: 100%; margin: 0 auto; padding: 2rem; }
.way label.way-menu { display: block; float: left; text-align: center; align-items: center; position: relative; padding: 0.8em 2rem 1rem 3rem; font-size: 1.2rem; border: 1px solid #c0c0c0; background-color: #fff; cursor: pointer;}
.way label.wm01 { border-right: 0; border-radius: 6px 0 0 6px; }
.way label.wm03 { border-left: 0; border-radius: 0 6px 6px 0; }
.way label.way-menu:after, .way label.way-menu:before { position: absolute; content: ""; display: block; top: 50%; }
.way label.way-menu:after { left: 1rem; margin-top: -0.6rem; width: 13px; height: 13px; border: 1px solid #c0c0c0; border-radius: 50%; }
.way label.way-menu:before { left: 0; margin-top: 0; width: 7px; height: 7px; background: #0074be; border-radius: 50%; opacity: 0; }
.way input[type=radio]:checked + .way label.way-menu:before { opacity: 1; }
.way label.way-menu:hover:after { border-color: #0074be;}
.way input[name="way-menu"] { display: none;}

.way-contents { position: relative; display: none; padding: 0; clear: both; overflow: hidden; transition: .5s opacity; }
.way-box { width: 100%; margin: 1rem auto 0 auto; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;}
.way input[type="text"] { padding: 0 0.5rem; position: relative; display: flex; align-items: center; border: 1px solid #c0c0c0; border-radius: 6px; background: #fff; cursor: pointer; }
.way input[type="text"].departure { padding-left: 4rem; background: url(/lib/img/common/icon_search_departure.svg) no-repeat #fff; }
.way input[type="text"].arrival { padding-left: 4rem; background: url(/lib/img/common/icon_search_arrival.svg) no-repeat #fff; }
.way .way-txt { position: relative; font-size: 0.8rem; color: #757575; }
.way .way-txt input[type="text"] { padding-top: 0.5rem; font-size: 1.4rem;}
.way .way-txt label { position: absolute; top: 0.2rem; left: 0.5rem; font-size: 0.8rem; color: #757575; }

.way label.direct-txt { font-size: 1.4rem; color: #fff; cursor: pointer;}
.way .way-btn {position: relative; text-align: center;}
.way .way-btn input[type="reset"] { position: absolute; right: 0; bottom: 0; padding: 0; font-size: 1.2rem; color: #fff; cursor: pointer; border-bottom: 1px solid #fff;}
.way .way-btn input[type="reset"]:hover { border: 0;}
.way .way-btn input[type="submit"] { position: relative; margin: 2rem auto 0 auto; padding: 0; text-align: center; border-radius: 6px; color: #fff; background: #f64e83;}
.way .way-btn input[type="submit"]:hover { opacity: .6; transition: 0.8s; -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s; }

.way .exc-way { position: relative; margin: 1rem 0 0 0;}
.way .exc-way h2 { padding: 0.3rem 1rem; font-size: 1.2rem !important; font-weight: bold; color: #fff; background: #525252; }
.way .exc-way .delete { width: 34px; height: 34px; border-radius: 50%; position: absolute; right: 0; top: 50%; cursor: pointer; background: #c0c0c0;}
.way .exc-way .delete:hover { opacity: 0.5;}
.way .exc-way .delete::before, .way .exc-way .delete::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 24px; background: #fff;}
.way .exc-way .delete::before { transform: translate(-50%,-50%) rotate(45deg); }
.way .exc-way .delete::after { transform: translate(-50%,-50%) rotate(-45deg); }
.way .add { margin: 1.5rem 0; font-size: 1.4rem; color: #fff; display: flex; align-items: center; cursor: pointer;}
.way .add p { width: 34px; height: 34px; margin-right: 0.5rem; border: 1px solid #c0c0c0; border-radius: 50%; position: relative; left: 0; top: 0; background: #0074be;}
.way .add p:hover { opacity: 0.5;}
.way .add p::before, .way .add p::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; background: #fff;}
.way .add p::before { transform: translate(-50%,-50%); }
.way .add p::after { transform: translate(-50%,-50%) rotate(90deg); }

#round:checked ~ #round,
#oneway:checked ~ #oneway,
#excursion:checked ~ #excursion { display: block; }
.way input:checked + .way-menu { background-color: #0074be; color: #fff; }
.way input:checked + .way-menu:after { border: 2px solid #fff; }

/* Responsive 751 */
@media screen and (min-width: 751px) {
	.way input[type="text"] { height: 40px;}
	.way input[type="text"].departure { background-size: 26px; background-position: 0.5rem 0.9rem;}
	.way input[type="text"].arrival { background-size: 24px; background-position: 0.5rem 0.7rem; }
	.way input[type="text"].departure, .way input[type="text"].arrival { width: 240px; }
	.way input[type="text"].people, .way input[type="text"].airline, .way input[type="text"].class { width: 204px; }
	.way input[type="text"].departure-date, input[type="text"].return-date { width: 160px; }
	.way .way-btn input[type="submit"] { width: 304px; height: 40px;}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.way .way-txt { width: calc(100%/2 - 0.5rem); }
	.way input[type="text"] { width: 100%; height: 50px;}
	.way input[type="text"].departure { background-size: 34px; background-position: 0.5rem;}
	.way input[type="text"].arrival { background-size: 30px; background-position: 0.6rem 1rem; }
	.way input[type="submit"] { width: 65%; height: 60px;}
	.way .exc-way .delete { width: 20px; height: 20px; top: 2px;}
	.way .exc-way .delete::before, .way .exc-way .delete::after { height: 14px;}
}
/* Responsive 375 */
@media screen and (max-width: 375px) {
	.way input[type="submit"] { width: 60%; height: 50px;}
}

/*==================================
	modal window
==================================*/
.modal { position: relative; height: 100%; margin: 0 auto; padding: 0; display: none;}
/* Responsive 1001 */
  @media screen and (min-width: 1001px) {
	#departure-content, #arrival-content, #airline-content { width: 1000px; height: 600px;}
	.modal.date { width: 1000px; height: 500px;}
	#class-content { width: 300px; height: 300px;}
	#people-content { width: 1000px; height: 500px; }
}
/* Responsive 1000-751 */
  @media screen and (max-width: 1000px) and (min-width: 751px) {
	#departure-content, #arrival-content, .modal.date, #airline-content { width: 750px; height: 600px;}
	.modal.date { width: 100%; width: 750px; height: 400px;}
	#class-content { height: 300px;}
	#people-content { height: 500px; }
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.modal { width: 100%; height: 100%; padding-bottom: 2rem;}
}

/*----- common -----*/
.modal .modal-txtbox { position: sticky; top: 0; left: 0; padding: 3rem 2rem; background: #fff; z-index: 99;}
.modal .on-select { margin: 0 auto; font-size: 1.4rem; text-align: center; display: flex; align-items: center; justify-content: center; }
.modal .on-select .txt { margin-right: 1rem; font-weight: bold; }
.modal .on-select .on { padding: 0.5rem 5rem; background: #f5f7fa; }
.modal .on-select .delete { width: 28px; height: 28px; margin-left: 0.5rem; border-radius: 50%; position: relative; cursor: pointer; background: #c0c0c0;}
.modal .on-select .delete:hover { opacity: 0.5;}
.modal .on-select .delete::before, .modal .on-select .delete::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 18px; background: #fff;}
.modal .on-select .delete::before { transform: translate(-50%,-50%) rotate(45deg); }
.modal .on-select .delete::after { transform: translate(-50%,-50%) rotate(-45deg); }
.modal .modal-txtbox .way-txt { width: 240px; margin: 0 auto; }
.modal .modal-txtbox .way-txt { position: relative; font-size: 0.8rem; color: #757575; }
.modal .modal-txtbox .way-txt label { position: absolute; top: 0.2rem; left: 0.5rem; font-size: 0.8rem; color: #757575; }
.modal input[type="text"] { width: 240px; height: 40px; }
.modal input[type="text"] { padding: 0 0.5rem; position: relative; display: flex; align-items: center; font-size: 1.4rem; border: 1px solid #c0c0c0; border-radius: 6px; background: #fff; cursor: pointer; }
.modal input[type="text"].departure-date, .modal input[type="text"].return-date { padding-top: 0.5rem; }
.modal input[type="text"].airline, .modal input[type="text"].class, .modal input[type="text"].people { padding-top: 0.5rem; margin: 0 auto; }
.modal label.direct-txt { color: #fff; cursor: pointer;}
.modal h3 { position: relative; margin: 0; padding: 0.5rem; font-size: 1.2rem; font-weight: bold; background: #eee;}
.modal .selected, .modal ul li.selected { background: #0074be !important; color: #fff !important; font-weight: bold; }
.modal ul li.selected a { color: #fff !important; }
/* Responsive 751 */
@media screen and (min-width: 751px) {
	.modal .modal-txtbox h2 { display: none; }
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.modal .modal-txtbox { padding: 1rem 0; margin: 0;}
	.modal .modal-txtbox h2 { width: 100%; padding-bottom: 0.5rem; margin-bottom: 1rem; font-size: 1.4rem; font-weight: bold; text-align: center; border-bottom: 1px solid #757575; }
	.modal .on-select .on { padding: 0.5rem 2rem; }
	.modal input[type="text"] { width: 100%; height: 50px; }
}

/*----- city -----*/
.modal .city { position: relative; margin: 2rem auto; }
.modal input[type="text"].departure { margin: 0 auto; padding-left: 4rem; background: url(/lib/img/common/icon_search_departure.svg) no-repeat #fff; }
.modal input[type="text"].arrival { margin: 0 auto; padding-left: 4rem; background: url(/lib/img/common/icon_search_arrival.svg) no-repeat #fff; }
.modal ul.city-list { margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.5rem; }
.modal ul.city-list li { margin: 0; font-size: 1.2rem; color: #1e1e1e; text-align: center; background: #f5f7fa; display: block; }
.modal ul.city-list li a { padding: 1rem 0.5rem; color: #1e1e1e;}
.modal .option-list-city { margin: 1rem 0 0 0; padding: 0 0 1rem 4rem; font-size: 1.6rem; border-bottom: 1px solid #c0c0c0; display: flex; align-items: center; background-image: url(/lib/img/common/icon_search_area.svg); background-repeat: no-repeat; background-position: left top 0.2rem; }
.modal .option-list-city dl dt span { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #c0c0c0; }
.modal .option-list-city dl dd { font-size: 1.2rem; }
.modal .option-list-city p { margin-left: 1rem; }
.modal .option-country { margin: 3rem 0 0 0; padding: 0.2rem 0 1rem 4rem; font-size: 1.6rem; border-bottom: 1px solid #c0c0c0; background-image: url(/lib/img/common/icon_search_country.svg); background-repeat: no-repeat; background-position: left top; }
.modal .accordion-list { width: 90%; margin: 0 auto; }
.modal .accordion-head { position: relative; width: 100%; margin: 0; padding-top: 1rem; cursor: pointer; border-bottom: 1px solid #c0c0c0; background-position: left top 1.3rem; }
.modal .accordion-head:after { content:""; display:block; width: 20px; height: 20px; border-top: #0074be 6px solid; border-right: #0074be 6px solid; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); position:absolute;
right: 0.2rem; top: 0; bottom: 1.2rem; margin: auto; } 
.modal .accordion-item.active .accordion-head::after { content:""; display:block; width: 20px; height: 20px;border-top: #0074be 6px solid; border-right: #0074be 6px solid; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position:absolute; right: 0.2rem; top: 1rem; bottom: 0; margin: auto;}
.modal .accordion-body { overflow: hidden; width: 90%; height: 0; padding: 0; transition: all .25s ease; }
.modal .accordion-item.active .accordion-body { height: auto; padding: 0; }
.modal ul.option-list-airline { margin: 0; padding: 0; width: 100%; font-size: 1.6rem;}
.modal ul.option-list-airline li { margin: 0 auto; padding-left: 4rem; width: 90%;  border-bottom: 1px dotted #c0c0c0; background-image: url(/lib/img/common/icon_search_airport.svg); background-repeat: no-repeat; background-position: left top 0.7rem;}
.modal ul.option-list-airline li a { padding: 1rem 0; width: 100%; color: #1e1e1e; display: block; }
.modal ul.option-list-airline li span { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid #c0c0c0; }
/* Responsive 751 */
@media screen and (min-width: 751px) {
	.modal input[type="text"].departure { background-size: 26px; background-position: 0.5rem 0.9rem;}
	.modal input[type="text"].arrival { background-size: 24px; background-position: 0.5rem 0.7rem; }
	.modal input[type="text"].departure, .modal input[type="text"].arrival { width: 240px; }
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.modal input[type="text"].departure { background-size: 34px; background-position: 0.5rem;}
	.modal input[type="text"].arrival { background-size: 30px; background-position: 0.7rem 1rem; }
}

/*----- date -----*/
.modal .modal-txtbox-inner { margin: 0 auto; display: flex; justify-content: center; }
.modal .modal-txtbox-inner .date-txtbox { display: flex; margin: 0; padding: 0; }
.modal .modal-txtbox-inner .date-txtbox .way-txt { margin: 0 1rem 0 0; padding: 0; width: 100%; }
.modal .modal-txtbox-inner .date-way { border: none; display: flex; margin: 0; padding: 0; }
.modal .modal-txtbox-inner .date-way label { display: flex; align-items: center; gap: 0 .5em; position: relative; margin: 0; padding: 1rem 2rem; font-size: 1.2rem; border: 1px solid #c0c0c0; background: #fff; cursor: pointer;}
.modal .modal-txtbox-inner .date-way label.dw01 { border-radius: 6px 0 0 6px; }
.modal .modal-txtbox-inner .date-way label.dw02 { border-left: 0; border-radius: 0 6px 6px 0; }
.modal .modal-txtbox-inner .date-way label:has(:checked) { background: #0074be; color: #fff;}
.modal .modal-txtbox-inner .date-way label::before,
.modal .modal-txtbox-inner .date-way label:has(:checked)::after { border-radius: 50%; content: '';}
.modal .modal-txtbox-inner .date-way label::before { width: 12px; height: 12px; background: #fff; border: 1px solid #c0c0c0;}
.modal .modal-txtbox-inner .date-way label:has(:checked)::before { border: 1px solid #fff;}
.modal .modal-txtbox-inner .date-way label:has(:checked)::after { position: absolute; top: 1.9rem; left: 2.6rem; transform: translate(-50%, -50%); width: 8px; height: 8px; background-color: #0074be; }
.modal .modal-txtbox-inner .date-way label:hover::before { border-color: #0074be;}
.modal .modal-txtbox-inner .date-way label:has(:checked):hover::before { border: 1px solid #fff;}
.modal .modal-txtbox-inner .date-way input { display: none;}
.modal .date-box { position: relative; width: 100%;}
.modal .date-box .prev-month:before { content:""; display:block; width: 20px; height: 20px; border-top: #0074be 6px solid; border-right: #0074be 6px solid; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); position:absolute; left: 1rem; top: 44%; margin: auto; cursor: pointer; } 
.modal .date-box .next-month:after { content:""; display:block; width: 20px; height: 20px; border-top: #0074be 6px solid; border-right: #0074be 6px solid; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position:absolute; right: -0.5rem; top: 44%; margin: auto; cursor: pointer;  } 
.modal .date-box .calendar-box { margin: 0 auto; }
.modal .date-box .calendar-box h1 { margin: 0; padding: 2rem 0 0 0; text-align: center; font-size: 1.8rem; font-weight: bold;}
.modal .date-box .calendar-box .calendar { padding: 0; }
.modal .date-box .calendar-box table { width: 250px; margin: 0 auto 2rem auto; border: none; border-collapse: collapse; }
.modal .date-box .calendar-box th, .modal .date-box .calendar-box td { width: 35px; height: 35px; text-align: center; vertical-align: middle; padding: 0; margin: 0; }
.modal .date-box .calendar-box th { margin: 0; }
.modal .date-box .calendar-box td { font-weight: bold; border: none; margin: 0; }
.modal .date-box .calendar-box .dow *:first-child,
.modal .date-box .calendar-box .day *:first-child,
.modal .date-box .calendar-box .day .holiday { color: #e91b1b; }
.modal .date-box .calendar-box .dow *:last-child,
.modal .date-box .calendar-box .day *:last-child { color: #0074be; }
.modal .date-box .calendar-box .day .select-start { background:linear-gradient(90deg, #fff 0%, #fff 50%, #eee 50%, #eee 100%);}
.modal .date-box .calendar-box .day .select-end { background:linear-gradient(90deg, #eee 0%, #eee 50%, #fff 50%, #fff 100%);}
.modal .date-box .calendar-box .day .select p,
.modal .date-box .calendar-box .day .select-start p,
.modal .date-box .calendar-box .day .select-end p { width: 35px; height: 35px; line-height: 35px; border-radius: 50%; vertical-align: middle; color: #fff; font-weight: bold; background: #757575;}
.modal .date-box .calendar-box .day .select-between { background: #eee; }
.modal .date-enter  { text-align: center;}
.modal .date-enter input[type="submit"] { position: relative; margin: 2rem auto 0 auto; padding: 0; text-align: center; border-radius: 6px; color: #fff; background: #0074be;}
/* Responsive 1001 */
@media screen and (min-width: 1001px) {
	.modal .date-txtbox { margin: 0; padding: 0; }
	.modal .date-box { display: flex; justify-content: space-between; gap: 1rem; padding: 0 3rem;}
	.modal .modal-txtbox-inner .date-txtbox input[type="text"] { width: 160px;}
	.modal .date-box .calendar-box { width: calc(100%/3);}
}
/* Responsive 1000-750 */
@media screen and (max-width: 1000px) and (min-width: 751px) {
	.modal .date-box { display: flex; justify-content: space-between; gap: 1rem; padding: 0 2rem;}
	.modal .modal-txtbox-inner .date-txtbox input[type="text"] { width: 160px;}
	.modal .date-box .calendar-box { width: calc(100%/3);}
	.modal .date-box .calendar-box table { width: 230px; margin: 0 auto 2rem auto; border: none; border-collapse: collapse; }
	.modal .date-box .calendar-box th, .modal .date-box .calendar-box td { width: 28px; height: 28px; font-size: 1.2rem; text-align: center; vertical-align: middle; padding: 0; margin: 0; }
	.modal .date-box .calendar-box .day .select p,
	.modal .date-box .calendar-box .day .select-start p,
	.modal .date-box .calendar-box .day .select-end p { width: 28px; height: 28px; line-height: 28px;}
	.modal .date-box .prev-month:before { width: 16px; height: 16px; border-top: #0074be 4px solid; border-right: #0074be 4px solid; left: 0.5rem; top: 44%; } 
	.modal .date-box .next-month:after { width: 16px; height: 16px; border-top: #0074be 4px solid; border-right: #0074be 4px solid; right: -1rem; top: 44%; } 
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.modal .date-txtbox { display: none !important;}
	.modal .date-box { padding-bottom: 8rem;}
	.modal .date-box .calendar-box { width: 100%; margin-bottom: 2rem; }
	.modal .date-box .calendar-box table { width: 100%; margin: 0 auto 2rem auto; border: none; border-collapse: collapse; }
	.modal .date-box .calendar-box th, .modal .date-box .calendar-box td { width: 60px; height: 60px; text-align: center; vertical-align: middle; padding: 0; margin: 0; }
	.modal .date-box .calendar-box .day .select p,
	.modal .date-box .calendar-box .day .select-start p,
	.modal .date-box .calendar-box .day .select-end p { width: 60px; height: 60px; line-height: 60px;}
	.modal .date-enter { width: 100%; margin: 0; padding: 0 0 2rem 0; position: fixed; left: 0; bottom: 0; background: #fff; }
}

/*----- people -----*/
ul.people-box { margin-top: 1rem; padding: 0; border-top: 1px solid #c0c0c0;}
ul.people-box li { padding: 1rem; border-bottom: 1px solid #c0c0c0; display: flex;}
ul.people-box li dl { width: 100px; margin: 0 3rem 0 0; padding: 0.5rem 0 0.4rem 3rem;}
ul.people-box li dl.people-adult { background-image: url(/lib/img/common/icon_search_people_adult.svg); background-repeat: no-repeat; background-position: left; background-size: 18px;}
ul.people-box li dl.people-child { background-image: url(/lib/img/common/icon_search_people_child.svg); background-repeat: no-repeat; background-position: 0.2rem 1rem; background-size: 14px;}
ul.people-box li dl.people-baby { background-image: url(/lib/img/common/icon_search_people_baby.svg); background-repeat: no-repeat; background-position: 0.4rem; background-size: 10px;}
ul.people-box li dl dt { font-weight: bold;}
ul.people-box li dl dd { font-size: 1.2rem; }
.people-count { display: flex; align-items: center;}
.people-count .count-plus { width: 44px; height: 44px; position: relative; border-radius: 50%; background: #0074be; cursor: pointer;}
.people-count .count-plus::before, .people-count .count-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; background: #fff; }
.people-count .count-plus::before { transform: translate(-50%,-50%); }
.people-count .count-plus::after { transform: translate(-50%,-50%) rotate(90deg); }
.people-count .count-minus { width: 44px; height: 44px; position: relative; border-radius: 50%; border: 1px solid #0074be; background: #fff; cursor: pointer;}
.people-count .count-minus::before { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 20px; transform: translate(-50%,-50%) rotate(90deg); background: #0074be; }
.people-count .count-plus:hover, .people-count .count-minus:hover { opacity: 0.5; transition: .6s;}
.people-count .tooltip { display: inline-block; position: relative; }
.people-count .tooltip > div { cursor: pointer;}
.people-count .tooltip > span { display: flex; justify-content: center; visibility: hidden; opacity: 0; position: absolute; bottom: -3rem; left: 50%; transform: translateX(-50%); padding: 0.5rem 1rem; border-radius: 3px; background: #fff; font-size: 1.2rem; white-space: nowrap; transition: opacity .3s; box-shadow: 0px 0px 6px 0px rgba(30, 30, 30, 0.25);}
.people-count .tooltip > span::before { position: absolute; top: -5px; width: 9px; height: 6px; background-color: inherit; clip-path: polygon(50% 0, 0 100%, 100% 100%); content: ''; }
.people-count .tooltip:hover > span { visibility: visible; opacity: 1;}
.people-count input[type="number"] { width: 100px; text-align: center; font-size: 1.6rem; font-weight: bold; }
.people-count input[type="number"]::-webkit-outer-spin-button, 
.people-count input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.people-count input[type="number"]{ appearance: textfield; -moz-appearance: textfield; }
.child-age { margin-top: 1rem;}
.child-age p.notes { font-size: 1.2rem; font-weight: bold; color: #e91b1b;}
.child-age .child-age-box { margin-top: 0.5rem; font-size: 1.4rem;}
.child-age .child-age-box .child-age-select { margin-right: 2rem; display: flex; align-items: center; gap: 1rem;}
.child-age .child-age-box .child-age-select .age-select { display: flex; align-items: center; position: relative;}
.child-age .child-age-box .child-age-select .age-select select { appearance: none; min-width: 100px; height: 2.8em; padding: .4em calc(.8em + 30px) .4em .8em; border: 1px solid #c0c0c0; border-radius: 6px; }
.child-age .child-age-box .child-age-select .select-wrap { position: relative; }
.child-age .child-age-box .child-age-select .select-wrap:after { content: ""; display: block; width: 12px; height: 12px; border-top: #0074be 4px solid; border-right: #0074be 4px solid; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); position:absolute; right: 1rem; top: 1.1rem; margin: auto; pointer-events: none; } 
.modal .people-enter  { text-align: center;}
.modal .people-enter input[type="submit"] { position: relative; margin: 2rem auto 0 auto; padding: 0; text-align: center; border-radius: 6px; color: #fff; background: #0074be;}
/* Responsive 751 */
  @media screen and (min-width: 751px) {
	.people-child-box { display: flex;}
	.child-age .child-age-box { display: flex;}
	.child-age { margin-left: 2rem;}
	.modal .people-enter input[type="submit"], .modal .date-enter input[type="submit"] { width: 206px; height: 40px;}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	ul.people-box { margin-top: 0; border-top: 0;}
	ul.people-box li { justify-content: space-between;}
	ul.people-box li dl { width: 120px !important;}
	.child-age .child-age-box .child-age-select { margin-top: 0.5rem;}
	.modal .people-enter input[type="submit"], .modal .date-enter input[type="submit"] { width: 90%; height: 60px;}
	.people-count .tooltip > span { left: 50%; transform: translateX(-93%); }
	.people-count .tooltip > span::before { right: 1rem; }
}

/*----- airline -----*/
.modal .air-box { position: relative; margin: 2rem auto; }
.modal ul.air-list { margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.5rem; }
.modal ul.air-list li { margin: 0; font-size: 1.2rem; color: #1e1e1e; text-align: center; background: #f5f7fa; display: block; }
.modal ul.air-list li a { padding: 1rem 0.5rem; color: #1e1e1e;}
.modal .air-list-all .air-list-all-box { margin-top: 1rem;}
.modal .air-list-all .air-list-all-box .airline-name { padding: 0.5rem; font-size: 1.2rem; font-weight: bold; text-align: center; border: 1px solid #0074be; background: #fff; display: block; }
.modal .air-list-all .air-list-all-box ul { width: 100%; margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 0.5rem; }
.modal .air-list-all .air-list-all-box ul li { margin: 0; font-size: 1.2rem; color: #1e1e1e; text-align: center; background: #f5f7fa; display: block; }
.modal .air-list-all .air-list-all-box ul li a { padding: 1rem 0.5rem; color: #1e1e1e;}

/*----- class -----*/
.modal ul.class-list { margin: 0 auto; padding: 0; font-size: 1.2rem; border-top: 1px solid #c0c0c0; }
.modal ul.class-list li { position: relative; border-bottom: 1px solid #c0c0c0;}
.modal .class-list input { display: none; }
.modal .class-list { border: none;}
.modal .class-list label { display: flex; align-items: center; gap: 0 .5em; position: relative; padding: 1rem .7rem; width: 100%; cursor: pointer;}
.modal .class-list label:hover { background: #f2f2f2; opacity: 0.5; transition: .6s;}
.modal .class-list label::before { width: 20px; height: 20px; border: 2px solid #c0c0c0; background-color: #fff; content: '';}
.modal .class-list label:has(:checked)::before { border: 2px solid #0074be; }
.modal .class-list label:has(:checked)::after { position: absolute; top: 1.3rem; left: 1.4rem; transform: rotate(45deg); width: 6px; height: 12px; border: solid #0074be; border-width: 0 3px 3px 0; content: '';}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.modal ul.class-list { border-top: 0; }
}

/*==================================
	free
==================================*/
.free { margin: 0 auto; padding: 1rem; text-align: center; background: #e3e3e3;}
.free.upper, .free.middle, .free.bottom { margin-top: 1rem;}

/*==================================
	city-list
==================================*/
#city-list { margin: 1.2rem auto 0 auto; padding: 2rem; background: #fff;}
#city-list h2 { font-size: 1.8rem; font-weight: bold;}
#city-list .city-list-box {}
#city-list .city-list-box ul {}
#city-list .city-list-box ul li { margin: 0; padding: 0; font-size: 1.4rem;}
#city-list .city-list-box ul li a {}

/* Responsive 751 */
@media screen and (min-width: 751px) {
	#city-list .city-list-box ul { margin-top: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;}
	#city-list .city-list-box ul li a { text-decoration: underline;}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	#city-list { padding: 1.6rem 0 0 0; margin-top: 1.6rem;}
	#city-list h2 { padding: 0 1.6rem;}
	#city-list .city-list-box ul { border-top: 1px solid #c0c0c0; margin-top: 1.6rem;}
	#city-list .city-list-box ul li { font-size: 1.5rem; padding: 1.2rem 1.6rem; border-bottom: 1px solid #c0c0c0;}
}

/*==================================
	information
==================================*/
#information { position: relative; top: 0; margin: 1rem auto 0 auto; padding: 0;}
/* Responsive 751 */
@media screen and (min-width: 751px) {
	#information { display: flex; justify-content: space-between; gap: 1rem;}
}

/*==================================
	btn-more
==================================*/
.btn-more { margin-top: 1rem; text-align: right; font-size: 1.4rem;}
.btn-more a { text-decoration: underline;}

/*==================================
	news-list
==================================*/
.news-list { position: relative; top: 0; margin: 0; background: #fff;}
.news-list h2 { margin: 0; padding-bottom: 0.5rem; font-weight: bold; border-bottom: 1px solid #c0c0c0;}
.news-list ul { padding: 0;}
.news-list ul li { margin: 0; border-bottom: 1px dotted #c0c0c0;}
.news-list .item a { font-size: 1.2rem;}
.news-list .item .date { margin: 0; min-width: 120px; color: #757575; padding: 0 2rem 0 0;}
.news-list .item .title{ margin: 0; width: 100%;}
.news-list .none-txt { margin-top: 1rem; font-size: 1.4rem;}
/* Responsive 751 */
@media screen and (min-width: 751px) {
	.news-list { width: calc(100%/2); padding: 3rem;}
	.news-list ul { margin: 0;}
	.news-list .item a { display: flex; flex-wrap: wrap; flex-wrap: nowrap; padding: 1rem 0;}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	.news-list { width: 100%; padding: 1rem 0;}
	.news-list h2 { padding-left: 1rem;} 
	.news-list ul { margin: 1rem 0 0 0;}
	.news-list ul li { padding: 1rem 1rem 1.5rem 1rem;}
	.news-list .item .title{ margin-top: 0.5rem;}
	.news-list .btn-more { margin-right: 1rem;}
	.news-list .none-txt { padding: 0 1rem;}
}

/*==================================
	information - free
==================================*/
#contents .free { max-width: 1280px;}

/* Responsive 751 */
@media screen and (min-width: 751px) {
	#information .free { width: calc(100%/2);}
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
	#information .free { width: 100%; margin: 2rem 0 0 0;}
}


/*==================================
	error-block
==================================*/
#error-block h1 { font-size: 2.4rem; font-weight: bold; margin-bottom: 1rem; padding-top: 1.8rem; line-height: 1;}
#error-block #error-box { padding: 2.6rem 0; text-align: center; background: #fff; max-width: 800px; margin: 3.1rem auto;}
#error-block #error-box .error-tit { font-weight: bold; color: #f64e83;}
#error-block #error-box .error-txt { margin-top: 0.4rem; font-size: 1.6rem;}
#error-block #error-box .error-btn { margin-top: 2.2rem;}
#error-block #error-box .error-btn a { min-width: 206px; padding: 1.1rem; display: inline-block;font-size: 1.2rem; text-align: center; border-radius: 6px; color: #fff; background: #0074be;}

/* Responsive 751 */
@media screen and (min-width: 751px) {
}
/* Responsive 750 */
@media screen and (max-width: 750px) {
#error-block #error-box { padding: 3.6rem 0;}
#error-block #error-box.inner { width: 100%;}
#error-block #error-box .error-txt { margin-top: 1.4rem; padding-bottom: 0;}
#error-block #error-box .error-btn { margin-top: 2.1rem;}
}



/*==================================
	footer
==================================*/
footer#ft { margin: 0; padding: 3rem 0; font-size: 1.4rem;; color: #fff; background: #333;}
footer#ft a { color: #fff;}
footer#ft a:hover { color: #ddd;}
footer#ft .inner .main-menu { display: flex; justify-content: center; flex-wrap: wrap;}
footer#ft .inner .main-menu .box { width: calc(100%/2);}
footer#ft .inner .main-menu .box h3 { font-weight: bold;}
footer#ft .inner .main-menu .box ul { margin-top: 0.5rem;}
footer#ft .inner small { margin-top: 2rem;}
/* Responsive 750 */
@media screen and (min-width: 750px) {
	footer#ft .inner { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}
	footer#ft .inner .main-menu { width: 50%;}
	footer#ft .inner .main-menu .box { padding: 0 2rem 0 0;}
	footer#ft .inner .box-wide { width: 22%; padding: 0 0 0 4rem;}
}
/* Responsive 749 */
@media screen and (max-width: 749px) {
	footer#ft .inner .main-menu .box { margin: 0 0 3rem 0; padding: 0 1rem 0 0;}
	footer#ft .inner .box-wide { margin: 0 0 3rem 0; width: 100%;}
}