@charset "UTF-8";
/* ### setting.scss ### */
/* ### contents.scss ### */
/* CSS Document */
#wrapper { /* main */ /* container */ /* detail */ /* area */ /* section */ /* section　color */ /* order */ /* side */ /* pagetop */ }
#wrapper body { font-family: "ヒラギノ角ゴ W3 JIS2004","Hiragino Kaku Gothic W3 JIS2004"; }
#wrapper h1 { left: -1000px; opacity: 0; position: absolute; top: 0; }
#wrapper #main { overflow: hidden; position: relative; width: auto; height: 400px; text-align: center; background-image: url(../images/main_bg.jpg); }
#wrapper #main h2 { position: relative; z-index: 10; width: 634px; padding-top: 60px; margin: 0px auto 20px auto; }
#wrapper #main .theme img { width: 100%; }
#wrapper #main h2 img { width: 100%; height: auto; }
#wrapper #main .txt { position: relative; z-index: 10; display: inline-block; border-top: 1px solid #fff; border-bottom: 1px solid #fff; padding-top: 25px; }
#wrapper #main .txt p { color: #fff; font-size: 14px; font-weight: bold; line-height: 1.5em; padding: 0px 5px 25px 5px; text-shadow: 0px 0px 12px #000; -moz-box-shadow: 0px 0px 12px #000; }
#wrapper #container { position: relative; background-image: url(../images/bg.jpg); background-repeat: repeat; background-position: center top; }
#wrapper #container img { vertical-align: top; }
#wrapper #detail { width: 1200px; padding: 70px 0px 40px 0px; margin: 0 auto; }
#wrapper #detail h3 { width: 500px; margin: 0px auto 50px auto; }
#wrapper #detail h3 img { width: 100%; height: auto; }
#wrapper #detail .theme { text-align: center; margin-bottom: 40px; }
#wrapper #area ul { font-size: 0px; margin-right: -12px; }
#wrapper #area ul li { position: relative; display: inline-block; vertical-align: top; width: 190px; font-size: 13px; font-weight: bold; margin: 0px 12px 20px 0px; font-family: "ヒラギノ角ゴ W5 JIS2004", "Hiragino Kaku Gothic W5 JIS2004"; }
#wrapper #area ul li a { position: relative; overflow: hidden; display: block; width: 100%; height: 90px; margin-bottom: 3px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; z-index: 2; cursor: pointer; }
#wrapper #area ul li a img { position: absolute; left: 0px; bottom: 0px; z-index: 1; width: auto; height: 100%; margin-left: -5px; -moz-transition: -moz-transform 0.2s linear; -webkit-transition: -webkit-transform 0.2s linear; -o-transition: -o-transform 0.2s linear; -ms-transition: -ms-transform 0.2s linear; transition: transform 0.2s linear; }
#wrapper #area ul li a img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
#wrapper #area ul li a .sp_btn { display: none; }
#wrapper .section { display: block; background-color: #fff; padding: 50px 50px 40px 50px; border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-bottom: 50px; }
#wrapper .section .main { position: relative; min-height: 240px; margin-bottom: 25px; }
#wrapper .section .photo { position: absolute; top: 0px; left: 0px; overflow: hidden; width: 530px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; }
#wrapper .section .photo img { width: 100%; height: auto; }
#wrapper .section .txt { margin-left: 570px; padding-top: 5px; }
#wrapper .section .txt h4 { font-size: 30px; color: #542218; font-family: "黎ミン B", "Reimin Bold"; padding-left: 5px; margin-bottom: 5px; }
#wrapper .section .txt h4 small { font-size: 18px; }
#wrapper .section .txt h4 img { display: block; /*  height:28px; */ width: auto; margin-bottom: 10px; }
#wrapper .section .txt h4 span { display: none; /*  display:block; */ font-size: 18px; }
#wrapper .section .txt strong { display: block; font-size: 20px; margin-bottom: 10px; color: #542218; font-family: "黎ミン B", "Reimin Bold"; }
#wrapper .section .txt p { margin-bottom: 20px; line-height: 1.5em; }
#wrapper .section .txt .btn { overflow: hidden; font-size: 0px; }
#wrapper .section .txt .btn li a { display: block; width: 100%; height: 35px; padding-top: 15px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; background-position: left center; background-repeat: repeat-x; background: #542218; border-radius: 6px; }
#wrapper .section .txt .btn li a:hover { text-decoration: none; opacity: 0.6; }
#wrapper .section .txt .btn li a i { right: -1px; top: -1px; }
#wrapper .section .txt .btn li a i:after { left: 6px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#wrapper .section .arrow { position: relative; display: inline-block; padding: 0 0 0 16px; color: #000; vertical-align: middle; text-decoration: none; }
#wrapper .section .arrow::before, #wrapper .section .arrow::after { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; }
#wrapper .section h5 { background-image: url(../images/txt_line.png); background-position: left center; background-repeat: repeat-x; margin-bottom: 15px; }
#wrapper .section h5 span { font-size: 22px; display: inline-block; background-color: #fff; padding-right: 5px; color: #542218; font-family: "黎ミン B", "Reimin Bold"; }
#wrapper .section .plus { text-align: center; width: 500px; margin: 0px auto 15px auto; }
#wrapper .section .plus img { width: 100%; height: auto; }
#wrapper .section .list ul { overflow: hidden; font-size: 0px; margin-right: -10px; }
#wrapper .section .list li { display: inline-block; vertical-align: top; width: 175px; font-size: 13px; font-weight: bold; margin: 0px 10px 10px 0px; font-family: "ヒラギノ角ゴ W5 JIS2004", "Hiragino Kaku Gothic W5 JIS2004"; }
#wrapper .section .list li a { position: relative; overflow: hidden; display: block; width: 100%; height: 80px; margin-bottom: 5px; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; color: #542218; font-size: 14px; }
#wrapper .section .list li a:hover { text-decoration: none; }
#wrapper .section .list li a img { position: absolute; left: 0px; bottom: 0px; width: 100%; height: auto; }
#wrapper .section .list li span { color: #fff; position: absolute; bottom: 3px; right: 5px; font-size: 12px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.52), -1px 1px 1px rgba(0, 0, 0, 0.52), 1px -1px 1px rgba(0, 0, 0, 0.52), -1px -1px 1px rgba(0, 0, 0, 0.52); }
#wrapper .section .list .keyword li { background: url(../images/icon_arrow.png) #f6ede4 no-repeat; background-size: 7px; background-position: 7px 9px; padding: 5px 10px 2px 21px; width: auto; margin: 0 10px 10px 10px; border-radius: 3px; }
#wrapper .section .list .keyword li a { height: auto; }
#wrapper .section#singapore .txt h4 { border-left: 10px solid #00796f; }
#wrapper .section#singapore strong { color: #00796f; }
#wrapper .section#hongkong .txt h4 { border-left: 10px solid #cf7f95; }
#wrapper .section#hongkong strong { color: #cf7f95; }
#wrapper .section#taipei .txt h4 { border-left: 10px solid #b33000; }
#wrapper .section#taipei strong { color: #b33000; }
#wrapper .section#hanoi .txt h4 { border-left: 10px solid #456200; }
#wrapper .section#hanoi strong { color: #456200; }
#wrapper .section#hochiminh .txt h4 { border-left: 10px solid #0a1763; }
#wrapper .section#hochiminh strong { color: #0a1763; }
#wrapper .section#seoul .txt h4 { border-left: 10px solid #9a1400; }
#wrapper .section#seoul strong { color: #9a1400; }
#wrapper .section#malaysia .txt h4 { border-left: 10px solid #4f2f02; }
#wrapper .section#malaysia strong { color: #4f2f02; }
#wrapper .section#bangkok .txt h4 { border-left: 10px solid #9b1f00; }
#wrapper .section#bangkok strong { color: #9b1f00; }
#wrapper .section#angkor .txt h4 { border-left: 10px solid #00528e; }
#wrapper .section#angkor strong { color: #00528e; }
#wrapper .section#phuket .txt h4 { border-left: 10px solid #134427; }
#wrapper .section#phuket strong { color: #134427; }
#wrapper .section#bali .txt h4 { border-left: 10px solid #6a6d0b; }
#wrapper .section#bali strong { color: #6a6d0b; }
#wrapper #order { width: 300px; margin: 0 auto; }
#wrapper #order a { display: block; width: 100%; height: 45px; padding-top: 15px; color: #fff; font-size: 18px; font-weight: bold; text-align: center; background-position: left center; background-repeat: repeat-x; background: #542218; }
#wrapper #order a:hover { text-decoration: none; opacity: 0.6; }
#wrapper #order a span { display: inline-block; padding-left: 40px; padding-top: 5px; height: 25px; background-image: url(../images/order_icon.png); background-size: 30px 30px; background-position: left center; background-repeat: no-repeat; }
#wrapper #side { position: absolute; top: 0px; right: 0px; padding: 15px 15px 0px 0px; }
#wrapper #side li { margin-bottom: 5px; }
#wrapper #side li:last-child { margin-bottom: 20px; }
#wrapper #side li a { display: block; font-size: 14px; font-weight: bold; cursor: pointer; }
#wrapper #side li a:hover { text-decoration: none; color: #999; }
#wrapper #side li a span { overflow: hidden; display: inline-block; vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; margin-right: 6px; }
#wrapper #side li a span img { width: auto; height: 50px; margin-left: -30px; }
#wrapper #side .order { overflow: hidden; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; margin-bottom: 20px; }
#wrapper #side .order a { display: block; width: 100%; height: 35px; padding-top: 15px; color: #fff; font-size: 14px; font-weight: bold; text-align: center; background-position: left center; background-repeat: repeat-x; background: #542218; }
#wrapper #side .order a:hover { text-decoration: none; opacity: 0.6; }
#wrapper #side .order a span { display: inline-block; padding-left: 25px; padding-top: 2px; height: 18px; background-image: url(../images/order_icon.png); background-size: 20px 20px; background-position: left center; background-repeat: no-repeat; }
#wrapper .pagetop { bottom: 10px; display: none; position: fixed; right: 20px; z-index: 100; }
#wrapper .pagetop a { background-color: #ccc; color: #222; display: block; font-size: 12px; padding: 20px 10px; text-align: center; text-decoration: none; }
#wrapper .pagetop a:hover { background-color: #222; color: #fff; display: block; font-size: 12px; padding: 20px 10px; text-align: center; text-decoration: none; }
@media screen and (max-width: 1700px) { #wrapper { /* side */ }
  #wrapper #side { display: none; } }
@media screen and (max-width: 1240px) { #wrapper { /* detail */ /* area */ /* section */ /*.section .txt .btn li{ margin-left:4%;
} */ /* section list */ }
  #wrapper #detail { width: auto; padding-left: 20px; padding-right: 20px; min-height: 0px; }
  #wrapper #area ul { margin-right: -1%; }
  #wrapper #area ul li { width: 19%; margin: 0px 1% 20px 0px; }
  #wrapper #area ul li a img { width: 110%; height: auto; margin-left: -5%; }
  #wrapper .section .main { min-height: 240px; }
  #wrapper .section .photo { width: 400px; height: 240px; }
  #wrapper .section .photo img { height: 100%; width: auto; margin-left: -50px; }
  #wrapper .section .txt { margin-left: 440px; }
  #wrapper .section .txt .btn { text-align: center; }
  #wrapper .section .txt .btn li { width: 100%; }
  #wrapper .section .txt .btn li a { font-size: 16px; }
  #wrapper .section .list ul { margin-right: -1%; }
  #wrapper .section .list li { width: 19%; margin: 0px 1% 10px 0px; } }
@media screen and (max-width: 1180px) { #wrapper { /* main */ }
  #wrapper #main #map { right: 0; margin-right: 10px; } }
@media screen and (max-width: 1055px) { #wrapper { /* section list */ }
  #wrapper .section .list ul { margin-right: -1%; }
  #wrapper .section .list li { width: 24%; margin: 0px 1% 10px 0px; } }
@media screen and (max-width: 1038px) { #wrapper { /* area */ }
  #wrapper #area ul { margin-right: -1%; }
  #wrapper #area ul li { width: 24%; margin: 0px 1% 20px 0px; } }
@media screen and (max-width: 1000px) { #wrapper { /* main */ /* section */ }
  #wrapper #main h2 { padding-top: 40px; }
  #wrapper #main #map { display: none; }
  #wrapper .section { padding: 30px; }
  #wrapper .section .main { min-height: 0px; }
  #wrapper .section .photo { position: static; width: auto; max-width: 610px; height: auto; margin: 0px auto 20px auto; }
  #wrapper .section .photo img { height: auto; width: 100%; margin-left: 0px; }
  #wrapper .section .txt { max-width: 610px; width: auto; margin: 0px auto; }
  #wrapper .section .txt h4 { font-size: 25px; margin-bottom: 10px; }
  #wrapper .section .txt h4 img { margin-bottom: 5px; }
  #wrapper .section .txt strong { margin-bottom: 5px; color: #542218; font-family: "黎ミン B", "Reimin Bold"; }
  #wrapper .section .txt .btn { max-width: 480px; margin: 0px auto; } }
@media screen and (max-width: 930px) { #wrapper { /* tab */ }
  #wrapper #tab { left: 0px; width: 100%; margin-left: 0px; }
  #wrapper #tab ul { margin: 0px 5px; }
  #wrapper #tab li { width: 32.6%; margin-left: 1.1%; }
  #wrapper #tab li a { font-size: 16px; }
  #wrapper #detail .theme img { width: 100%; } }
@media screen and (max-width: 870px) { #wrapper { /* section list */ }
  #wrapper .section .list ul { margin-right: -1.1%; }
  #wrapper .section .list li { width: 32.2%; margin: 0px 1.1% 10px 0px; } }
@media screen and (max-width: 836px) { #wrapper { /* area */ }
  #wrapper #area ul { margin-right: -1.1%; }
  #wrapper #area ul li { width: 32.2%; margin: 0px 1.1% 20px 0px; } }
@media screen and (max-width: 657px) { #wrapper { /* detail */ /* main */ /* tab */ /* detail */ /* area */ /* section */ /* section list */ /* order */ }
  #wrapper #detail { padding-left: 0px; padding-right: 0px; }
  #wrapper #main { height: 222px; padding: 0px 20px; }
  #wrapper #main h2 { width: 280px; margin: 0px auto 5px auto; padding-top: 40px; /*  padding-top:20px; */ }
  #wrapper #main .txt { padding-top: 20px; }
  #wrapper #main .txt p { font-size: 12px; padding: 0px 0px 20px 0px; }
  #wrapper #tab li a { font-size: 12px; height: 44px; }
  #wrapper #tab li a strong { text-align: left; text-align: center; }
  #wrapper #tab li a strong img { height: 26px; }
  #wrapper #tab li a strong span { padding-top: 5px; margin-left: 5px; text-align: left; }
  #wrapper #tab li a strong span br { display: inline-block; }
  #wrapper #detail { padding-top: 25px; }
  #wrapper #detail h3 { max-width: 320px; width: auto; margin-bottom: 10px; padding: 0px 20px; }
  #wrapper #area { width: auto; margin: 0 20px; }
  #wrapper #area ul { margin-right: 0px; }
  #wrapper #area ul li { width: 49.3%; margin-right: 0px; margin-bottom: 15px; }
  #wrapper #area ul li:nth-child(odd) { margin-right: 1.4%; }
  #wrapper #area ul li a { height: 100px; }
  #wrapper #area ul li a img { width: 100%; height: auto; margin-left: 0px; }
  #wrapper #area ul li a .sp_btn { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
  #wrapper .section { display: none; padding: 20px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; margin-bottom: 20px; }
  #wrapper .section.select { display: block !important; }
  #wrapper .section .txt h4 small { display: none; }
  #wrapper .section .txt h4 img { height: 20px; }
  #wrapper .section .txt h4 span { font-size: 14px; }
  #wrapper .section .txt strong { font-size: 14px; }
  #wrapper .section .txt .btn li { width: 100%; }
  #wrapper .section .txt .btn li a { font-size: 13px; height: 30px; padding-top: 15px; }
  #wrapper .section .plus { width: auto; margin: 0px auto 20px auto; padding: 0px; }
  #wrapper .section h5 { text-align: center; }
  #wrapper .section h5 span { font-size: 18px; padding: 0px 5px; }
  #wrapper .section .list { margin-right: 0px; }
  #wrapper .section .list li { width: 49.3%; margin-right: 0px; margin-bottom: 10px; font-size: 14px; }
  #wrapper .section .list li:nth-child(odd) { margin-right: 1.4%; }
  #wrapper .section .list li a { height: 100px; }
  #wrapper .section .list li a img { width: 100%; height: auto; margin-left: 0px; }
  #wrapper #order { width: 240px; margin: 0 auto; }
  #wrapper #order a { height: 35px; padding-top: 15px; font-size: 16px; }
  #wrapper #order a span { padding-left: 30px; padding-top: 1px; height: 19px; background-size: 20px 20px; } }
@media screen and (max-width: 500px) { #wrapper { /* area */ /* section */ /* section list */ }
  #wrapper #area ul li a { height: auto; }
  #wrapper #area ul li a img { position: static; margin-top: 0px; }
  #wrapper .section .txt .btn li a { font-size: 12px; }
  #wrapper .section .list ul { max-width: 320px; width: auto; margin: 0px auto; }
  #wrapper .section .list li { width: 100%; }
  #wrapper .section .list li a { width: 100%; height: 100px; } }

/*# sourceMappingURL=style.css.map */