@charset "UTF-8";
/* ### mixin.scss ### */
/* ### setting.scss ### */
#contents .belonging ul, #contents .belonging .item, #contents .tabipocket .column2 .item, #contents .tabipocket .column2 .item a { *zoom: 1; }
#contents .belonging ul:after, #contents .belonging .item:after, #contents .tabipocket .column2 .item:after, #contents .tabipocket .column2 .item a:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

#contents, #contents .other .other-inner ul.other-area li a span, #contents .other .other-inner ul.bnr li a .bnr-text { font-family: "ヒラギノ角ゴ W3 JIS2004","Hiragino Kaku Gothic W3 JIS2004","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; }

#contents .beach-info .js-menu li a, #contents .recommend .js-menu li, #contents .dep-menu li, #contents .beach .tour a, #contents .other h3, #contents .other p, #contents .other .other-inner ul.other-area li { font-family: "ヒラギノ角ゴ W6 JIS2004","Hiragino Kaku Gothic W6 JIS2004","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; }

#contents .main .main-ttl h2 { font-family: "ヒラギノ角ゴ W7 JIS2004","Hiragino Kaku Gothic W7 JIS2004","Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; }

/* ### contents.scss ### */
#pan li a { color: #000; }

@media screen and (max-width: 657px) { #pan { padding: 7px 10px 7px; display: block !important; font-size: 85%; }
  h1 { font-size: 80% !important; padding: 5px 5px 0 5px; text-align: right; margin: 0; width: auto; } }
#contents { position: relative; font-family: -apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium","游ゴシック体",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif; font-size: 13px; line-height: 1.3; letter-spacing: 1px; color: #000; width: 100%; margin: 0 auto; /*-----------------find_destination_days--------------*/ /*-----------------find_destination_area--------------*/ /*-----------------belonging--------------*/ /*---------------tabipocket----------------*/ /*--------bannerarea-------------*/ }
#contents * { box-sizing: border-box; }
#contents img { vertical-align: top; }
#contents a, #contents a:visited, #contents a:hover, #contents a:focus, #contents a:active { color: #000; }
#contents a:hover { text-decoration: none; opacity: 1; }
#contents a:hover img { opacity: 1; }
#contents .sp { display: none !important; }
@media screen and (max-width: 657px) { #contents { width: auto; } }
@media screen and (max-width: 657px) { #contents .sp { display: block !important; }
  #contents .pc { display: none !important; }
  #contents img { width: 100%; } }
#contents .right_tab { display: none; position: fixed; right: 0; top: 0; bottom: 0; height: 618px; margin: auto 0; z-index: 30; align-items: center; }
@media screen and (max-width: 657px) { #contents .right_tab { top: auto; bottom: 20px; display: none; } }
@media screen and (max-width: 657px) { #contents .right_tab .map img { width: 45px; height: auto; } }
#contents .right_tab .season { margin-top: -50px; }
@media screen and (max-width: 657px) { #contents .right_tab .season img { width: 45px; height: auto; } }
#contents .right_tab_content { width: 100%; height: 100%; text-align: center; }
#contents .right_tab_content .map { height: 100%; width: 100%; text-align: center; background: #D0F1FD; opacity: 1; position: fixed; top: 0; bottom: 0; margin-left: 100%; z-index: 20; display: flex; justify-content: center; align-items: center; opacity: 0.97; }
#contents .right_tab_content .season { height: 100%; width: 100%; text-align: center; background: #D0F1FD; opacity: 1; position: fixed; top: 0; bottom: 0; margin-left: 100%; z-index: 20; display: flex; justify-content: center; align-items: center; opacity: 0.97; }
#contents .main { background: url(../images/main.jpg) no-repeat top center; height: 560px; position: relative; }
#contents .main .main-ttl { width: 522px; height: 380px; margin: 0 auto; background: #ffffff; position: relative; top: 79px; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; letter-spacing: 0.15em; line-height: 1.5; }
#contents .main .main-ttl h2 { text-align: right; font-size: 42px; padding-bottom: 10px; }
#contents .main .main-ttl h2 img { vertical-align: middle; margin-right: 5px; }
#contents .main .main-ttl p { padding-top: 30px; font-size: 15px; }
@media screen and (max-width: 657px) { #contents .main { background: url(../images/main_sp.jpg) no-repeat top center; background-size: auto 60vh; height: 0; padding-top: 60vh; }
  #contents .main .main-ttl { width: 100%; background: none; height: auto; top: 0; display: block; }
  #contents .main .main-ttl img { width: 35vw; margin-bottom: auto; position: absolute; top: -40.5vh; margin: auto; right: 0; left: 0; }
  #contents .main .main-ttl h2 { font-size: 7vw; padding-bottom: 0; position: absolute; top: -53.5vh; text-align: center; margin: auto; right: 0; left: 0; }
  #contents .main .main-ttl h2 img { width: 12vw; height: auto; position: static; }
  #contents .main .main-ttl p { display: none; } }
#contents .read { margin: 0 auto; text-align: center; padding: 50px 0 0; line-height: 1.5; }
@media screen and (max-width: 657px) { #contents .read { display: none; } }
#contents .tablist { z-index: 1; width: 960px; margin: 0 auto; margin: 30px auto; padding: 0; box-sizing: border-box; font-size: 15px; font-weight: 600; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; position: relative; border-left: #bcbcbc 1px solid; }
@media screen and (max-width: 657px) { #contents .tablist { width: auto; } }
@media screen and (max-width: 657px) { #contents .tablist { border: none; font-size: 13px; } }
#contents .tablist li { width: 100%; text-align: center; border-right: #bcbcbc 1px solid; }
@media screen and (max-width: 657px) { #contents .tablist li:last-child { border: none; } }
#contents .tablist li a { padding: 15px 0; width: 100%; display: block; position: relative; }
#contents .tablist li a::after { content: ""; width: 0%; height: 1px; background: #000; position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; display: table; transition: all 0.6s ease 0s; }
#contents .tablist li a:hover { text-decoration: none; }
#contents .tablist li a:hover::after { width: 80%; height: 1px; background: #000; position: absolute; left: 0; right: 0; display: table; }
#contents .tablist li.current a { position: relative; }
#contents .tablist li.current a::after { content: ""; width: 80%; height: 1px; background: #000; position: absolute; bottom: -1px; left: 0; right: 0; margin: auto; display: table; transition: all 0.6s ease 0s; }
#contents .flexblock { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }
@media screen and (max-width: 657px) { #contents .flexblock { flex-wrap: wrap; } }
#contents .tour_recommend { height: 555px; box-sizing: border-box; margin: 40px 0 155px; padding: 30px 0 0; background: #ffdce4; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffdce4), color-stop(1, #fff)); background-image: -webkit-linear-gradient(left, #ffdce4 0%, #fff 100%); background-image: -moz-linear-gradient(left, #ffdce4 0%, #fff 100%); background-image: -ms-linear-gradient(left, #ffdce4 0%, #fff 100%); background-image: linear-gradient(to left, #ffdce4 0%, #fff 100%); position: relative; z-index: 1; }
#contents .tour_recommend.tour_recommend_none { height: auto; background: none; margin: 0; }
#contents .tour_recommend.tour_recommend_none h3, #contents .tour_recommend.tour_recommend_none .gradient_bg_bottom { display: none; }
@media screen and (max-width: 657px) { #contents .tour_recommend { background: #ffdce4; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #ffdce4), color-stop(1, #fdf2f5)); background-image: -webkit-linear-gradient(left, #ffdce4 0%, #fdf2f5 100%); background-image: -moz-linear-gradient(left, #ffdce4 0%, #fdf2f5 100%); background-image: -ms-linear-gradient(left, #ffdce4 0%, #fdf2f5 100%); background-image: linear-gradient(to left, #ffdce4 0%, #fdf2f5 100%); height: auto; margin: 30px 0 100px; padding: 30px 0 20px; } }
#contents .tour_recommend .gradient_bg_bottom { z-index: 2; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: url(../images/gradient_bg.jpg) repeat left top; }
@media screen and (max-width: 657px) { #contents .tour_recommend .gradient_bg_bottom { background: none; } }
#contents .tour_recommend .flexblock { width: 960px; margin: 0 auto; z-index: 3; position: relative; }
@media screen and (max-width: 657px) { #contents .tour_recommend .flexblock { width: auto; } }
@media screen and (max-width: 657px) { #contents .tour_recommend .flexblock { display: block !important; justify-content: unset; } }
#contents .tour_recommend h3 { font-size: 22px; text-align: center; position: relative; padding: 10px 0 70px 0; display: table; margin: 0 auto; }
@media screen and (max-width: 657px) { #contents .tour_recommend h3 { color: #000; font-size: 16px; padding: 10px 0 30px 0; } }
#contents .tour_recommend h3::after { content: ""; position: absolute; margin: auto; left: 0; right: 0; bottom: 25px; width: 102px; height: 26px; background: url(../images/bribeach_txt.png) no-repeat; }
@media screen and (max-width: 657px) { #contents .tour_recommend h3::after { content: none; } }
#contents .tour_recommend .slick { width: 960px; margin: 0 auto; z-index: 3; height: 300px; position: relative; }
@media screen and (max-width: 657px) { #contents .tour_recommend .slick { width: 100%; height: 310px; overflow-x: hidden; } }
#contents .tour_recommend .tour_item { width: 306px !important; margin: 0 7px; padding-bottom: 30px; }
@media screen and (max-width: 657px) { #contents .tour_recommend .tour_item { padding: 0 10px 0; width: 75vw; margin: 0 0; } }
#contents .tour_recommend .tour_item a { display: block; background: #fff; padding-bottom: 13px; border: 7px solid #fff; border-bottom: none; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1); position: relative; }
#contents .tour_recommend .tour_item a::after { position: absolute; content: ""; width: calc(100% + 14px); height: 2px; background: #f9423a; bottom: 0; left: -7px; margin: auto; }
@media screen and (max-width: 657px) { #contents .tour_recommend .tour_item a::after { width: calc(100%); left: 0; } }
@media screen and (max-width: 657px) { #contents .tour_recommend .tour_item a { box-shadow: none; border: 0; } }
#contents .tour_recommend .tour_item a h4 { font-size: 16px; margin: 10px 0 26px 0; text-align: center; letter-spacing: 0; position: relative; }
#contents .tour_recommend .tour_item a h4::after { position: absolute; content: ""; width: 80px; height: 1px; background: #f9423a; margin: 0 auto; bottom: -10px; left: 0; right: 0; }
@media screen and (max-width: 657px) { #contents .tour_recommend .tour_item a h4 { font-size: 14px; margin: 6px 0 20px 0; } }
#contents .tour_recommend .tour_item a .txt { font-size: 12px; color: #333333; line-height: 1.8; margin: 0 10px 0 15px; font-weight: bold; }
#contents .tour_recommend .tour_item a .txt li { padding-left: 15px; background: url(../images/icon_below_right.png) no-repeat left center; background-size: 5px auto; }
#contents .tour_recommend .tour_item a figure { width: 100%; height: 180px; margin: 0 0 13px; overflow: hidden; background: url("../images/loading.gif") center center no-repeat; background-size: 30px auto; }
@media screen and (max-width: 657px) { #contents .tour_recommend .tour_item a figure { height: 150px; overflow: hidden; } }
#contents .tour_recommend .tour_item a figure img { width: 100%; height: 180px; object-fit: cover; transition: 0.5s; }
@media screen and (max-width: 657px) { #contents .tour_recommend .tour_item a figure img { height: 150px; } }
#contents .tour_recommend .tour_item a .price { margin-top: 12px; font-size: 17px; color: #f9423a; text-align: center; font-weight: bold; }
@media screen and (max-width: 657px) { #contents .tour_recommend .tour_item a .price { font-size: 15px; } }
#contents .tour_recommend .tour_item a:hover figure img { transform: scale(1.1); }
#contents .tab_title { text-align: center; font-size: 26px; font-weight: bold; margin: 50px auto 50px; padding: 0 30px; display: table; background-image: url(../images/ttl_left_icon.png), url(../images/ttl_right_icon.png); background-repeat: no-repeat, no-repeat; background-position: 0px center, right 0 center; }
@media screen and (max-width: 657px) { #contents .tab_title { text-align: center; font-size: 22px; font-weight: bold; margin: 30px auto 40px; padding: 0 20px; background-size: 8px auto; } }
#contents .find_destination_tab { border-bottom: 2px solid #000; background: #fff; }
#contents .find_destination_tab ul { width: 960px; margin: 0 auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; position: relative; margin-top: 60px; }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul { width: auto; } }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul.pc { display: none !important; }
  #contents .find_destination_tab ul.sp { display: flex !important; } }
#contents .find_destination_tab ul::before { content: ""; position: absolute; right: -50px; top: -60px; width: 267px; height: 24px; background: url(../images/findbeach_txt.png) no-repeat right top; }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul::before { right: 0; left: 0; margin: auto; top: -60px; width: 160px; height: 30px; background: url(../images/sp_findbeach_txt.png) no-repeat center top; background-size: contain; } }
#contents .find_destination_tab ul li { width: calc((100% - 2px) / 3); position: relative; }
#contents .find_destination_tab ul li::after { content: ""; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; width: 15px; height: 7px; display: table; background: url(../images/icon_below.png) no-repeat center center; }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul li::after { right: 0; left: 0; top: auto; bottom: 10px; margin: 0 auto; width: 10px; background-size: 10px auto; } }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul li { width: calc((100% - 2px) / 3); height: 55px; } }
#contents .find_destination_tab ul li a { display: block; height: 65px; background: #d2f1ff; display: flex; justify-content: center; align-items: center; font-size: 16px; transition: all 0.6s ease 0s; }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul li a { font-size: 12px; height: 55px; line-height: 20px; display: block; text-align: center; line-height: 40px; } }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul li.current, #contents .find_destination_tab ul li:hover { margin-top: 0; } }
#contents .find_destination_tab ul li.current::after, #contents .find_destination_tab ul li:hover::after { background: url(../images/icon_below_on.png) no-repeat center center; }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul li.current::after, #contents .find_destination_tab ul li:hover::after { right: 0; left: 0; top: auto; bottom: 10px; margin: 0 auto; width: 10px; background-size: 10px auto; } }
#contents .find_destination_tab ul li.current a, #contents .find_destination_tab ul li:hover a { height: 65px; background: #000; color: #fff; font-weight: bold; }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul li.current a, #contents .find_destination_tab ul li:hover a { height: 55px; } }
#contents .find_destination_tab ul li:nth-child(1) a { background: #d2f1ff url(../images/find_tab_icon02.png) no-repeat 20px center; }
#contents .find_destination_tab ul li:nth-child(2) a { background: #d2f1ff url(../images/find_tab_icon01.png) no-repeat 40px center; }
#contents .find_destination_tab ul li:nth-child(3) a { background: #d2f1ff url(../images/find_tab_icon03.png) no-repeat 60px center; }
#contents .find_destination_tab ul li:nth-child(1).current a, #contents .find_destination_tab ul li:nth-child(1):hover a { background: #000 url(../images/find_tab_icon02_on.png) no-repeat 20px center; }
#contents .find_destination_tab ul li:nth-child(2).current a, #contents .find_destination_tab ul li:nth-child(2):hover a { background: #000 url(../images/find_tab_icon01_on.png) no-repeat 40px center; }
#contents .find_destination_tab ul li:nth-child(3).current a, #contents .find_destination_tab ul li:nth-child(3):hover a { background: #000 url(../images/find_tab_icon03_on.png) no-repeat 60px center; }
@media screen and (max-width: 657px) { #contents .find_destination_tab ul li:nth-child(1) a { background-image: none; }
  #contents .find_destination_tab ul li:nth-child(2) a { background-image: none; }
  #contents .find_destination_tab ul li:nth-child(3) a { background-image: none; }
  #contents .find_destination_tab ul li:nth-child(1).current a, #contents .find_destination_tab ul li:nth-child(1):hover a { background-image: none; }
  #contents .find_destination_tab ul li:nth-child(2).current a, #contents .find_destination_tab ul li:nth-child(2):hover a { background-image: none; }
  #contents .find_destination_tab ul li:nth-child(3).current a, #contents .find_destination_tab ul li:nth-child(3):hover a { background-image: none; } }
#contents .find_destination_tab.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 20000; }
#contents .find_destination_tab.fixed ul { margin-top: 0; }
#contents .find_destination_tab.fixed ul li { width: calc((100% - 2px) / 3); }
#contents .find_destination_tab.fixed ul li a { height: 65px; }
@media screen and (max-width: 657px) { #contents .find_destination_tab.fixed ul li a { height: 55px; } }
#contents .find_destination_tab.fixed ul li.current, #contents .find_destination_tab.fixed ul li:hover { height: 65px; margin-top: 0; }
@media screen and (max-width: 657px) { #contents .find_destination_tab.fixed ul li.current, #contents .find_destination_tab.fixed ul li:hover { height: 55px; } }
#contents .find_destination_pursose { width: 960px; margin: -90px auto 40px; padding-top: 90px; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose { width: 100%; margin: -55px auto 0; padding-top: 55px; } }
#contents .find_destination_pursose .tablist { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; frex-direction: row; flex-wrap: wrap; justify-content: flex-start; border-left: 0; margin-bottom: 50px; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .tablist { border: none; font-size: 13px; } }
#contents .find_destination_pursose .tablist li { width: 25%; height: 70px; border-right: #000 1px solid; border-bottom: #000 1px solid; position: relative; transition: 0.5s; }
#contents .find_destination_pursose .tablist li:nth-child(5) { border-left: #000 1px solid; border-bottom: 0; }
#contents .find_destination_pursose .tablist li:nth-child(6) { border-bottom: 0; }
#contents .find_destination_pursose .tablist li:nth-child(7) { border-bottom: 0; }
#contents .find_destination_pursose .tablist li:first-child { border-left: #000 1px solid; }
#contents .find_destination_pursose .tablist li:after { position: absolute; vertical-align: middle; top: 0; bottom: 0; right: 25px; margin: auto; content: ""; width: 6px; height: 6px; border-bottom: 1px solid #000; border-right: 1px solid #000; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: 0.5s; }
#contents .find_destination_pursose .tablist li a { padding: 25px 0 25px 0; }
#contents .find_destination_pursose .tablist li a::after { content: none; }
#contents .find_destination_pursose .tablist li:hover { border-bottom: #000 1px solid; }
#contents .find_destination_pursose .tablist li:hover:after { border-bottom: 2px solid #000; border-right: 2px solid #000; top: 8px; right: 24px; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .tablist li { width: 50%; border-right: #bcbcbc 1px solid; }
  #contents .find_destination_pursose .tablist li:nth-child(1) { border-bottom: 1px solid #bcbcbc; border-left: none; }
  #contents .find_destination_pursose .tablist li:nth-child(2) { border-bottom: 1px solid #bcbcbc; border-right: none; }
  #contents .find_destination_pursose .tablist li:nth-child(3) { border-bottom: 1px solid #bcbcbc; }
  #contents .find_destination_pursose .tablist li:nth-child(4) { border-bottom: 1px solid #bcbcbc; border-right: none; }
  #contents .find_destination_pursose .tablist li:nth-child(5) { border-bottom: 1px solid #bcbcbc; border-left: none; }
  #contents .find_destination_pursose .tablist li:nth-child(6) { border-bottom: 1px solid #bcbcbc; border-right: none; }
  #contents .find_destination_pursose .tablist li:nth-child(7) { border-bottom: 0; } }
#contents .find_destination_pursose .clearfix { display: block; }
#contents .find_destination_pursose h3 { text-align: center; font-size: 22px; width: auto; margin: 10px 0 20px; position: relative; letter-spacing: 0.1em; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose h3 { float: none; width: auto; text-align: center; font-size: 16px; margin: 0 10px 25px; background: #000; color: #fff; padding: 5px 0; border-radius: 30px; } }
#contents .find_destination_pursose h3 span { font-size: 17px; margin-left: 5px; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose h3 span { font-size: 13px; } }
#contents .find_destination_pursose h3:after { content: ""; position: absolute; height: 1px; width: 60%; background: #0049bd; bottom: -10px; left: 0; right: 0; margin: auto; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose h3:after { content: none; } }
#contents .find_destination_pursose .copy { font-size: 13px; width: auto; color: #0049bd; text-align: center; margin-bottom: 35px; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .copy { display: none; } }
#contents .find_destination_pursose .purpose_block { margin-top: -100px; padding-top: 100px; margin-bottom: 35px; padding-bottom: 0px; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .purpose_block { margin-top: -120px; padding-top: 120px; margin-bottom: 20px; } }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .purpose_block .flexblock { display: block; width: auto; padding-bottom: 0; } }
#contents .find_destination_pursose .des_item { width: 307px; background: #fff; padding: 0px 0px 15px; box-shadow: 1px 0px 8px rgba(0, 0, 0, 0.15); margin-right: 15px; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .des_item { margin: 0; width: auto; padding: 0 0 20px 0; box-shadow: none; }
  #contents .find_destination_pursose .des_item:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } }
#contents .find_destination_pursose .des_item a { position: relative; display: block; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .des_item a { width: 100%; display: block; height: calc(50vw * 2/3); } }
#contents .find_destination_pursose .des_item a h4 { position: absolute; left: -5px; top: -5px; font-size: 14px; background: #fff; border: 1px solid #000; padding: 5px 10px; line-height: 1; display: table; z-index: 2; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .des_item a h4 { display: inline-block; left: 5px; top: -8px; } }
#contents .find_destination_pursose .des_item a .figure { width: 100%; height: 198px; position: relative; overflow: hidden; z-index: 1; margin: 0; }
#contents .find_destination_pursose .des_item a .figure img { width: 100%; height: 198px; object-fit: cover; transition: 0.5s; }
#contents .find_destination_pursose .des_item a .figure .link { z-index: 2; position: absolute; padding: 0 39px 5px 0; right: 0; bottom: 0; color: #fff; font-style: italic; font-size: 12px; display: inline-block; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
#contents .find_destination_pursose .des_item a .figure .link::after { content: ""; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; background: url(../images/des_link_icon.png) no-repeat right center; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .des_item a .figure { width: 50vw; height: calc(50vw * 1.9 / 3); float: left; padding-left: 10px; box-sizing: border-box; }
  #contents .find_destination_pursose .des_item a .figure img { height: calc(50vw * 1.9 / 3); } }
#contents .find_destination_pursose .des_item a .txt { margin-top: 10px; padding: 5px 10px; font-size: 12px; color: #333333; line-height: 1.5; letter-spacing: 0; }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .des_item a .txt { width: 50vw; box-sizing: border-box; float: right; text-align: left; margin: 0 0 20px 0; padding: 0 10px 0 10px; font-size: 11px; display: block; } }
@media screen and (max-width: 657px) { #contents .find_destination_pursose .des_item a .txt .link { text-align: right; z-index: 2; margin: 20px 10px 0 0; padding: 0 35px 7px 0; color: #000; font-weight: bold; font-size: 12px; display: block !important; position: relative; }
  #contents .find_destination_pursose .des_item a .txt .link::after { content: ""; position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; background: url(../images/des_link_icon.png) no-repeat right 0px; background-size: 25px auto; } }
#contents .find_destination_pursose .des_item a:hover .figure { overflow: hidden; }
#contents .find_destination_pursose .des_item a:hover .figure img { transform: scale(1.1); }
#contents .find_destination_pursose .des_item a:nth-child(3n) { margin: 0; }
#contents .beach-info { background: #d1f1fe; position: relative; margin-top: 100px; }
#contents .beach-info .js-menu { width: 522px; margin: 0 auto; position: absolute; margin: auto; left: 0; right: 0; top: -50px; display: flex; justify-content: center; align-items: center; }
@media screen and (max-width: 657px) { #contents .beach-info .js-menu { width: auto; } }
#contents .beach-info .js-menu li a { width: 261px; height: 50px; background: #000; color: white; transition: .3s; display: flex; justify-content: center; align-items: center; }
#contents .beach-info .js-menu li a:hover { background: #d1f1fe; color: #000; }
#contents .beach-info .js-menu li.active a { background: #d1f1fe; color: #000; border-bottom: none; }
#contents .beach-info .js-tab { width: 960px; margin: 0 auto; }
@media screen and (max-width: 657px) { #contents .beach-info .js-tab { width: auto; } }
#contents .beach-info .tab1 ul { display: none; }
@media screen and (max-width: 657px) { #contents .beach-info { border: none; margin-top: 0; }
  #contents .beach-info .js-menu { width: 100%; position: static; justify-content: space-between; }
  #contents .beach-info .js-menu li { width: 50%; }
  #contents .beach-info .js-menu li a { width: 100%; box-shadow: inset 0px -2px 2px 0px rgba(0, 0, 0, 0.15); border: none; background: white; color: #000; }
  #contents .beach-info .js-menu li:first-child a { box-shadow: inset 0px -2px 2px 0px rgba(0, 0, 0, 0.15); }
  #contents .beach-info .js-menu li.active a { box-shadow: none; border: none; }
  #contents .beach-info .js-tab { width: 100%; position: relative; }
  #contents .beach-info .tab1 ul { position: absolute; margin: auto; top: 0; left: 0; right: 0; width: 55vw; height: 100%; padding: 15vw 0 20vw; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
  #contents .beach-info .tab1 ul li { width: 100%; }
  #contents .beach-info .tab1 ul li a { font-size: 12px; padding: 2vw 10vw 2vw 2vw; display: block; background: white; position: relative; }
  #contents .beach-info .tab1 ul li a:before { content: ""; display: block; width: 12px; height: 12px; background: url("../images/sp/plus.png") no-repeat; -webkit-background-size: 12px 12px; -moz-background-size: 12px 12px; -ms-background-size: 12px 12px; background-size: 12px 12px; }
  #contents .beach-info .tab1 ul li a:before { position: absolute; margin: auto; top: 0; bottom: 0; right: 2vw; }
  #contents .beach-info .tab1 ul li .asia { border: 1px solid #00aacf; color: #00aacf; }
  #contents .beach-info .tab1 ul li .micro { border: 1px solid #29bad4; color: #29bad4; }
  #contents .beach-info .tab1 ul li .hawaii { border: 1px solid #53c5dd; color: #53c5dd; }
  #contents .beach-info .tab1 ul li .oceania { border: 1px solid #4fcde4; color: #4fcde4; }
  #contents .beach-info .tab1 ul li .europe { border: 1px solid #009ccf; color: #009ccf; }
  #contents .beach-info .tab1 ul li .america { border: 1px solid #53b8d9; color: #53b8d9; } }
#contents .recommend { width: 960px; margin: 0 auto; padding: 0; }
@media screen and (max-width: 657px) { #contents .recommend { width: auto; } }
#contents .recommend .js-menu { display: flex; align-items: center; padding: 0 0 30px 0; }
#contents .recommend .js-menu li { width: 192px; position: relative; font-size: 15px; font-weight: bold; }
#contents .recommend .js-menu li a { display: flex; justify-content: center; align-items: center; width: 100%; height: 26px; position: relative; }
#contents .recommend .js-menu li a:after { content: ""; width: 192px; height: 26px; position: absolute; margin: auto; top: 0; bottom: 0; right: 0; background: url(../images/navi_bg.png) no-repeat center center; background-size: auto 40px; z-index: -1; transition: .3s; opacity: 0; }
@media screen and (min-width: 658px) { #contents .recommend .js-menu li a:hover:after { opacity: 1; } }
#contents .recommend .js-menu li:after { content: ""; width: 1px; height: 25px; background: #000; position: absolute; margin: auto; top: 0; bottom: 0; right: 0; }
#contents .recommend .js-menu li.active { background: url(../images/navi_bg.png) no-repeat center center; background-size: auto 40px; }
#contents .recommend .js-menu li:first-child:before { content: ""; width: 1px; height: 25px; background: #000; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; }
#contents .recommend .js-menu.dec { justify-content: center; }
#contents .recommend .js-menu li.addline:before { content: ""; width: 1px; height: 25px; background: #000; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; }
@media screen and (max-width: 657px) { #contents .recommend .js-menu li.addline:before { content: none; } }
#contents .recommend h2 { text-align: center; padding: 30px 0 40px; font-size: 20px; letter-spacing: 0.13em; }
@media screen and (max-width: 657px) { #contents .recommend h2 { font-size: 18px; } }
#contents .recommend h2 .num { font-size: 33px; font-family: serif; padding-left: 10px; }
@media screen and (max-width: 657px) { #contents .recommend h2 .num { font-size: 27px; } }
#contents .recommend h2 .blue { color: #009ccf; }
#contents .recommend dl { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 800px; margin: 0 auto; }
#contents .recommend dl dt { width: 120px; }
#contents .recommend dl dd { width: 650px; }
#contents .recommend .js-tab ul { display: flex; flex-wrap: wrap; }
@media screen and (max-width: 657px) { #contents .recommend { padding: 0 0 0; width: 100%; }
  #contents .recommend dl { width: 90%; margin: 1.5em auto 0; padding: 10px 20px; background: #fff; z-index: 1001; position: fixed; display: none; }
  #contents .recommend dl dt { width: 150px; }
  #contents .recommend dl dd { width: auto; }
  #contents .recommend .modal-open { display: block; width: 45%; margin: 0 15px 0 auto; text-align: center; border: 1px solid; font-size: 13px; padding: 5px 0; border-radius: 50px; }
  #contents .recommend .js-menu { padding: 0 0 12px; }
  #contents .recommend .js-menu li { font-size: 13px; }
  #contents .recommend .js-menu li:first-child:before { display: none; }
  #contents .recommend .js-menu li:nth-child(5):after { display: none; }
  #contents .recommend .js-menu li.active { background-size: auto 26px; }
  #contents .recommend .js-tab h2 { padding: 0 0 10px; margin: 0 15px 45px; border-bottom: 1px solid; position: relative; font-size: 17px; }
  #contents .recommend .js-tab h2:after { content: ""; position: absolute; border-right: 1px solid #000; border-top: 1px solid #000; height: 8px; width: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin: auto; bottom: -25px; right: 0; left: 0; }
  #contents .recommend .js-tab ul { justify-content: center; } }
#contents .dep-menu { display: flex; align-items: center; }
#contents .dep-menu li { position: relative; font-size: 15px; display: flex; justify-content: center; align-items: center; width: 100%; height: 26px; }
#contents .dep-menu li:first-child { flex: 0 0 192px; }
#contents .dep-menu li input { display: none; }
#contents .dep-menu li input:checked + label:after { position: absolute; content: ''; top: 3px; left: 5px; width: 13px; height: 6px; border-left: 3px solid #000000; border-bottom: 3px solid #000000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#contents .dep-menu li label { position: relative; display: inline-block; padding: 0 0 0 30px; cursor: pointer; }
#contents .dep-menu li label:before { position: absolute; content: ''; top: -2px; left: 0; width: 20px; height: 20px; background: #d1f1fe; border: 1px solid #000000; }
@media screen and (max-width: 657px) { #contents .dep-menu { display: none; } }
#contents .dep-menu-sp { display: none; }
@media screen and (max-width: 657px) { #contents .dep-menu-sp { display: flex; align-items: center; margin: 0 15px; }
  #contents .dep-menu-sp p { font-family: "ヒラギノ角ゴ W6 JIS2004","Hiragino Kaku Gothic W6 JIS2004"; }
  #contents .dep-menu-sp select { width: 100px; padding: 5px 10px; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
  #contents .dep-menu-sp select::-ms-expand { display: none; }
  #contents .dep-menu-sp .select-inner { margin-left: auto; position: relative; }
  #contents .dep-menu-sp .select-inner:after { content: ""; position: absolute; border-right: 1px solid #000; border-top: 1px solid #000; height: 8px; width: 8px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin: auto; top: 10px; right: 15px; } }
#contents .beach { width: 307px; position: relative; margin-bottom: 45px; margin-right: 15px; }
#contents .beach .photo { width: 100%; overflow: hidden; }
#contents .beach h3 { position: absolute; left: -5px; top: -5px; font-size: 14px; background: #fff; border: 1px solid #000; padding: 5px 10px; line-height: 1; display: table; z-index: 2; }
#contents .beach h3 small { font-size: 15px; }
@media screen and (max-width: 657px) { #contents .beach h3 small { font-size: 13px; } }
#contents .beach:nth-child(3n) { margin-right: 0; }
#contents .beach .area { display: none; position: absolute; padding: 2px 10px; right: 0; top: 0; background: white; }
#contents .beach .micro { border: 1px solid #29bad4; color: #29bad4; }
#contents .beach .asia { border: 1px solid #00aacf; color: #00aacf; }
#contents .beach .oceania { border: 1px solid #4fcde4; color: #4fcde4; }
#contents .beach .europe { border: 1px solid #009ccf; color: #009ccf; }
#contents .beach .america { border: 1px solid #53b8d9; color: #53b8d9; }
#contents .beach .hawaii { border: 1px solid #53c5dd; color: #53c5dd; }
#contents .beach .news { position: absolute; right: 0; background: white; top: 110px; transition: .3s; width: 70px; height: 70px; }
#contents .beach .news a img { width: 100%; height: auto; }
#contents .beach .news:hover { background: #fff777; }
@media screen and (max-width: 657px) { #contents .beach .news { top: 90px; } }
#contents .beach .tour { box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.1); }
#contents .beach .tour a { width: 100%; height: 70px; display: flex; align-items: center; padding: 0 15px; font-size: 14px; transition: .3s; position: relative; }
#contents .beach .tour a:after { content: ""; color: black; border-right: 1px solid; border-top: 1px solid; height: 8px; width: 8px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
#contents .beach .tour a:after { position: absolute; margin: auto; top: 0; bottom: 0; right: 20px; }
#contents .beach .tour a .type:after { content: ""; width: 280px; height: 1px; background: #000; position: absolute; margin: auto; bottom: 0; left: 0; right: 0; }
#contents .beach .tour a .price { font-size: 17px; color: #f9423a; padding-right: 30px; margin-left: auto; }
#contents .beach .tour a .price span { font-family: 'Open Sans', sans-serif; font-weight: bold; }
#contents .beach .tour a:hover { opacity: 0.5; }
#contents .beach .tour div:nth-of-type(1) a { position: relative; }
#contents .beach .tour div:nth-of-type(1) a:before { content: ""; display: block; width: 100px; height: 30px; background: url("../images/price_icon.png") no-repeat; -webkit-background-size: 100px 30px; -moz-background-size: 100px 30px; -ms-background-size: 100px 30px; background-size: 100px 30px; }
#contents .beach .tour div:nth-of-type(1) a:before { position: absolute; top: -10px; left: -12px; }
#contents .beach .tour div:nth-of-type(2) a { position: relative; }
#contents .beach .tour div:nth-of-type(2) a:before { content: ""; display: block; width: 100px; height: 30px; background: url("../images/stay_icon.png") no-repeat; -webkit-background-size: 100px 30px; -moz-background-size: 100px 30px; -ms-background-size: 100px 30px; background-size: 100px 30px; }
#contents .beach .tour div:nth-of-type(2) a:before { position: absolute; top: -10px; left: -12px; }
#contents .beach .tour .value { border-left: 4px solid #fff778; }
#contents .beach .tour .stay { border-left: 4px solid #d3f1ff; }
#contents .beach .tour .all { height: 40px; border-left: 4px solid; background: #d2f1ff; }
#contents .beach .tour .all .type:after { display: none; }
@media screen and (max-width: 657px) { #contents .beach { width: 100%; margin: 0 15px 30px; }
  #contents .beach:nth-child(3n) { margin: 0 15px 20px; }
  #contents .beach h3 { font-size: 14px; text-align: center; padding: 5px 10px; line-height: 1; }
  #contents .beach .photo { position: relative; height: 160px; overflow: hidden; }
  #contents .beach .photo img { height: 100%; width: 100%; object-fit: cover; position: absolute; margin: auto; left: 0; right: 0; }
  #contents .beach .tour { font-size: 85%; }
  #contents .beach .tour a { height: 60px; font-size: 13px; }
  #contents .beach .tour a .price { font-size: 15px; padding-right: 25px; }
  #contents .beach .tour a .type:after { width: 100%; }
  #contents .beach .tour a:hover { opacity: 1; }
  #contents .beach .tour div:nth-of-type(1) a { position: relative; }
  #contents .beach .tour div:nth-of-type(1) a:before { content: ""; display: block; width: 112px; height: 34px; background: url("../images/sp/price_icon_sp.png") no-repeat; -webkit-background-size: 112px 34px; -moz-background-size: 112px 34px; -ms-background-size: 112px 34px; background-size: 112px 34px; } }
@media screen and (max-width: 657px) and (max-width: 657px) { #contents .beach .tour div:nth-of-type(1) a { position: relative; }
  #contents .beach .tour div:nth-of-type(1) a:before { content: ""; display: block; width: 90px; height: 26px; background: url("../images/sp/price_icon_sp.png") no-repeat; -webkit-background-size: 90px 26px; -moz-background-size: 90px 26px; -ms-background-size: 90px 26px; background-size: 90px 26px; } }
@media screen and (max-width: 657px) { #contents .beach .tour div:nth-of-type(2) a { position: relative; }
  #contents .beach .tour div:nth-of-type(2) a:before { content: ""; display: block; width: 112px; height: 34px; background: url("../images/sp/stay_icon_sp.png") no-repeat; -webkit-background-size: 112px 34px; -moz-background-size: 112px 34px; -ms-background-size: 112px 34px; background-size: 112px 34px; } }
@media screen and (max-width: 657px) and (max-width: 657px) { #contents .beach .tour div:nth-of-type(2) a { position: relative; }
  #contents .beach .tour div:nth-of-type(2) a:before { content: ""; display: block; width: 90px; height: 26px; background: url("../images/sp/stay_icon_sp.png") no-repeat; -webkit-background-size: 90px 26px; -moz-background-size: 90px 26px; -ms-background-size: 90px 26px; background-size: 90px 26px; } }

#contents .find_destination_days { margin: -90px auto 0; padding: 90px 0 0; }
@media screen and (max-width: 657px) { #contents .find_destination_days { margin: -55px auto 0; padding: 55px 0 0; } }
#contents .find_destination_area { position: relative; border-bottom: 2px solid #7d7d7d; margin: -90px auto 100px; padding: 90px 0 40px; }
@media screen and (max-width: 657px) { #contents .find_destination_area { margin: -55px auto 80px; padding: 55px 0 0; border-bottom: 0; } }
#contents .find_destination_area ul { width: 960px; margin: 0 auto; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; }
@media screen and (max-width: 657px) { #contents .find_destination_area ul { width: auto; } }
#contents .find_destination_area ul li { width: calc((100% - 2px) / 3); height: 165px; overflow: hidden; margin-bottom: 20px; }
@media screen and (max-width: 657px) { #contents .find_destination_area ul li { margin-bottom: 10px; height: 100px; width: calc((100% - 10px) / 2); } }
#contents .find_destination_area ul li a { width: 100%; height: 165px; overflow: hidden; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; color: #fff; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); position: relative; z-index: 1; }
@media screen and (max-width: 657px) { #contents .find_destination_area ul li a { height: 100px; font-size: 14px; } }
#contents .find_destination_area ul li a:after { content: ""; position: absolute; right: 0; bottom: 0; width: 40px; height: 40px; z-index: 10; background: url(../images/area_btn_icon.png) no-repeat center center; }
@media screen and (max-width: 657px) { #contents .find_destination_area ul li a:after { width: 30px; height: 30px; background: url(../images/area_btn_icon.png) no-repeat center center; background-size: 30px auto; } }
#contents .find_destination_area ul li a span { display: block; margin: auto; z-index: 10; }
#contents .find_destination_area ul li a img { position: absolute; left: 0; top: 0; z-index: 9; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: 0.5s; }
#contents .find_destination_area ul li a:hover img { transform: scale(1.1); }
#contents .belonging { width: 960px; margin: 0 auto; background: url(../images/belonging_bg.jpg) repeat left top; border-radius: 30px; padding: 65px 30px 30px; font-size: 13px; line-height: 25px; font-weight: 600; position: relative; margin: 0 auto 60px auto; }
@media screen and (max-width: 657px) { #contents .belonging { width: auto; } }
@media screen and (max-width: 657px) { #contents .belonging { border-radius: 0; padding: 55px 20px 0; } }
#contents .belonging h3 { position: absolute; left: 0; right: 0; top: -35px; margin: auto; height: 75px; text-align: center; font-size: 20px; display: flex; justify-content: center; align-items: center; background: url(../images/belong_ttl_bg.png) no-repeat center center; }
@media screen and (max-width: 657px) { #contents .belonging h3 { padding-top: 17px; box-sizing: border-box; font-size: 14px; line-height: 1.4; display: block; background: url(../images/sp_belong_ttl_bg.png) no-repeat center center; background-size: 90% 60px; } }
#contents .belonging h3 span { color: #298bcf; font-size: 16px; display: inline; }
#contents .belonging h4 { background: #fff45c; border-radius: 30px; padding: 7px 20px; color: #000; line-height: 1; display: table; font-weight: bold; font-size: 14px; float: left; }
@media screen and (max-width: 657px) { #contents .belonging h4 { float: none; font-size: 13px; } }
#contents .belonging ul { float: right; width: 80%; margin-bottom: 10px; }
@media screen and (max-width: 657px) { #contents .belonging ul { margin-top: 15px; margin-bottom: 20px; float: none; width: auto; } }
#contents .belonging ul li { width: 33%; float: left; background: url(../images/belong_check.png) no-repeat left center; padding: 0 0 0 25px; }
@media screen and (max-width: 657px) { #contents .belonging ul li { width: 50%; font-size: 12px; background: url(../images/belong_check.png) no-repeat left top 3px; }
  #contents .belonging ul li:last-child { width: 100%; } }
#contents .belonging .bottom { padding: 20px 20px 0; width: 100%; box-sizing: border-box; display: block; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; }
@media screen and (max-width: 657px) { #contents .belonging .bottom { display: block; padding: 10px 0 0; } }
#contents .belonging .item { width: 100%; }
@media screen and (max-width: 657px) { #contents .belonging .item { margin-bottom: 0; }
  #contents .belonging .item:nth-child(2) { margin-bottom: 20px; } }
#contents .belonging .illust { float: left; margin: 20px 20px 0 0; }
@media screen and (max-width: 657px) { #contents .belonging .illust { transform: scale(0.6); margin: -15px 10px 0 0; } }
#contents .belonging h5 { display: table; font-size: 14px; border-bottom: 3px dotted #00a0e9; position: relative; margin: 0 0 10px 50px; }
@media screen and (max-width: 657px) { #contents .belonging h5 { margin-left: 10px; font-size: 13px; } }
#contents .belonging h5::before { content: ""; position: absolute; left: -40px; top: -5px; background: url(../images/hitode.png) no-repeat left center; width: 41px; height: 40px; }
@media screen and (max-width: 657px) { #contents .belonging h5::before { left: -30px; top: -1px; width: 30px; height: 30px; background-size: cover; } }
#contents .belonging .txt { line-height: 1.5; }
@media screen and (max-width: 657px) { #contents .belonging .txt { font-size: 11px; } }
#contents .tabipocket { width: 960px; margin: 0 auto; margin: 0 auto 100px; }
@media screen and (max-width: 657px) { #contents .tabipocket { width: auto; } }
@media screen and (max-width: 657px) { #contents .tabipocket { padding: 0 10px; margin: 0 auto 40px; box-sizing: border-box; } }
#contents .tabipocket h3 { margin: 0 auto; display: table; font-size: 18px; position: relative; margin-bottom: 20px; }
@media screen and (max-width: 657px) { #contents .tabipocket h3 { font-size: 16px; margin-bottom: 30px; } }
#contents .tabipocket h3::after { content: ""; position: absolute; bottom: -20px; left: 0; right: 0; margin: auto; width: 76px; height: 12px; background: url(../images/trend_txt.png) no-repeat left top; }
@media screen and (max-width: 657px) { #contents .tabipocket h3::after { bottom: -17px; width: 62px; height: 10px; background: url(../images/trend_txt.png) no-repeat left top; background-size: contain; } }
#contents .tabipocket h3 span { font-size: 25px; }
@media screen and (max-width: 657px) { #contents .tabipocket h3 span { font-size: 20px; } }
#contents .tabipocket .pocket { text-align: right; }
@media screen and (max-width: 657px) { #contents .tabipocket .pocket { display: none; } }
#contents .tabipocket .pocket img { width: 90px; height: auto; }
#contents .tabipocket .column2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; position: relative; padding: 30px 0; margin: 15px 0 0; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 { display: block; padding: 0 0 1px; justify-content: unset; } }
#contents .tabipocket .column2::before { content: ""; position: absolute; top: 0; left: 0; margin: 0 -10%; width: 120%; height: 2px; background: url(../images/pocket_border.gif) repeat-x left top; background-size: auto 2px; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2::before { margin: 0 0; width: 100%; content: none; } }
#contents .tabipocket .column2::after { content: ""; position: absolute; bottom: 0; left: 0; margin: 0 -10%; width: 120%; height: 2px; background: url(../images/pocket_border.gif) repeat-x left top; background-size: auto 2px; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2::after { margin: 0 0; width: 100%; } }
#contents .tabipocket .column2 .item { width: 50%; padding: 0 30px 0 0; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 .item { width: auto; padding: 15px 0; margin-bottom: 0; display: block; clear: both; background: url(../images/pocket_border.gif) repeat-x left top; background-size: auto 2px; } }
#contents .tabipocket .column2 .item a { height: 100%; position: relative; display: block; transition: all 0.6s ease 0s; }
#contents .tabipocket .column2 .item a h4 { font-size: 16px; font-weight: bold; line-height: 1.7; margin-bottom: 10px; transition: all 0.4s ease 0s; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 .item a h4 { font-size: 14px; margin-bottom: 5px; } }
#contents .tabipocket .column2 .item a .update { font-weight: normal; font-size: 10px; margin: 0 5px 15px 0; text-align: right; color: #333; }
#contents .tabipocket .column2 .item a p.img { float: left; margin-right: 30px; overflow: hidden; width: 240px; height: 150px; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 .item a p.img { width: 160px; height: 110px; margin-right: 20px; } }
#contents .tabipocket .column2 .item a p.img img { transform: scale(1); transition: all 0.4s ease 0s; width: 100%; height: 100%; object-fit: cover; }
#contents .tabipocket .column2 .item a p.lead { line-height: 20px; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 .item a p.lead { font-size: 11px; line-height: 1.7; } }
#contents .tabipocket .column2 .item a p.btn { background: #f9423a; width: 30px; height: 30px; display: block; position: absolute; right: 0; bottom: 0; transition: all 0.4s ease 0s; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 .item a p.btn { right: 0px; bottom: -15px; background: #FB3D3E; margin-bottom: 6px; } }
#contents .tabipocket .column2 .item a p.btn::after { visibility: visible; position: absolute; top: 0; bottom: 0; margin: auto; content: ""; vertical-align: middle; transition: all 0.6s ease 0s; right: 4px; left: 0; margin: auto; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#contents .tabipocket .column2 .item a:hover { text-decoration: none; opacity: 1; }
#contents .tabipocket .column2 .item a:hover h3 { text-decoration: underline; }
#contents .tabipocket .column2 .item a:hover p.img img { transform: scale(1.1); opacity: 1; }
#contents .tabipocket .column2 .item a:hover p.btn { width: 40px; height: 40px; }
#contents .tabipocket .column2 .item a::after { visibility: visible; content: ""; position: absolute; right: -30px; top: 0; margin: 0; width: 1px; height: 100%; background: #f9423a; z-index: 10; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 .item a::after { content: none; } }
#contents .tabipocket .column2 .item:last-child { padding: 0 0 0 30px; }
#contents .tabipocket .column2 .item:last-child a::after { content: none; }
@media screen and (max-width: 657px) { #contents .tabipocket .column2 .item:last-child { padding: 15px 0; } }
#contents .tabipocket .pocketLink { display: none; }
@media screen and (max-width: 657px) { #contents .tabipocket .pocketLink { width: auto; margin: 0; padding: 10px 0; display: block; text-align: center; background: #f9423a url(../images/pocket_border.gif) repeat-x left bottom; background-size: auto 2px; }
  #contents .tabipocket .pocketLink img { width: 100px; height: auto; } }
#contents .banner_block { width: 960px; margin: 0 auto; margin-bottom: 60px; }
@media screen and (max-width: 657px) { #contents .banner_block { width: auto; } }
@media screen and (max-width: 657px) { #contents .banner_block { margin-bottom: 0; padding: 0 10px; } }
@media screen and (max-width: 657px) { #contents .banner_block .inner { padding: 20px 10px; } }
#contents .banner_block h3 { font-size: 24px; margin: 0 0 30px 0; text-align: center; }
@media screen and (max-width: 657px) { #contents .banner_block h3 { font-size: 20px; margin-bottom: 20px; } }
#contents .banner_block .bnrItem { width: 25%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); box-sizing: border-box; overflow: hidden; }
@media screen and (max-width: 657px) { #contents .banner_block .bnrItem { width: 50%; margin-bottom: 10px; } }
#contents .banner_block .bnrItem a { display: block; }
#contents .banner_block .bnrItem a figure { margin-bottom: 10px; }
@media screen and (max-width: 657px) { #contents .banner_block .bnrItem a figure { margin-bottom: 5px; } }
#contents .banner_block .bnrItem a figure img { width: 100%; height: 152px; object-fit: cover; }
@media screen and (max-width: 657px) { #contents .banner_block .bnrItem a figure img { height: 110px; } }
#contents .banner_block .bnrItem a h4 { line-height: 1.6; margin: 0 0 10px; padding: 0 15px; font-size: 14px; height: 3em; }
@media screen and (max-width: 657px) { #contents .banner_block .bnrItem a h4 { height: 2.2em; margin-bottom: 3px; padding: 0 10px; font-size: 13px; line-height: 1.4; } }
#contents .banner_block .bnrItem a .txt { line-height: 1.6; padding: 15px; font-size: 12px; }
@media screen and (max-width: 657px) { #contents .banner_block .bnrItem a .txt { padding: 10px; line-height: 1.4; } }
#contents .banner_block .bnrItem a:hover { text-decoration: none; }
#contents .other { border-bottom: none; text-align: center; background: #d1f1fe; padding: 0 0 100px; position: relative; }
#contents .other h3 { font-size: 20px; margin-bottom: 30px; width: 960px; margin: 0 auto; position: relative; top: -30px; padding-bottom: 30px; }
#contents .other p { font-size: 15px; }
#contents .other .other-ttl { margin-bottom: 20px; }
#contents .other .other-inner { width: 960px; margin: 0 auto; }
@media screen and (max-width: 657px) { #contents .other .other-inner { width: auto; } }
#contents .other .other-inner ul.other-area { margin-bottom: 30px; display: flex; justify-content: space-between; align-content: space-between; flex-wrap: wrap; text-align: center; height: 272px; }
#contents .other .other-inner ul.other-area li { box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); width: 313px; height: 131px; }
#contents .other .other-inner ul.other-area li a { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; align-content: center; height: 100%; background: rgba(255, 255, 255, 0.7); position: relative; transition: .3s; border: 10px solid white; font-size: 15px; }
#contents .other .other-inner ul.other-area li a:hover { background: none; }
#contents .other .other-inner ul.other-area li a span { font-size: 12px; padding: 0 10px; width: 100%; }
@media screen and (max-width: 657px) { #contents .other .other-inner ul.other-area { float: none; width: auto; margin: 0; height: auto; }
  #contents .other .other-inner ul.other-area li { width: 100%; height: 110px; font-size: 10px; box-shadow: none; }
  #contents .other .other-inner ul.other-area li:nth-of-type(1), #contents .other .other-inner ul.other-area li:nth-of-type(2), #contents .other .other-inner ul.other-area li:nth-of-type(3), #contents .other .other-inner ul.other-area li:nth-of-type(4), #contents .other .other-inner ul.other-area li:nth-of-type(5), #contents .other .other-inner ul.other-area li:nth-of-type(6), #contents .other .other-inner ul.other-area li:nth-of-type(7), #contents .other .other-inner ul.other-area li:nth-of-type(8), #contents .other .other-inner ul.other-area li:nth-of-type(9), #contents .other .other-inner ul.other-area li:nth-of-type(10), #contents .other .other-inner ul.other-area li:nth-of-type(11), #contents .other .other-inner ul.other-area li:nth-of-type(12) { background-size: 100% auto; background-position: center center; }
  #contents .other .other-inner ul.other-area li a { border: none; border-bottom: 1px solid #98d8ec; background: rgba(0, 50, 58, 0.5); color: white; font-size: 13px; }
  #contents .other .other-inner ul.other-area li a span { padding: 0 5px; }
  #contents .other .other-inner ul.other-area li a:hover { background: rgba(0, 50, 58, 0.5); } }
#contents .other .other-inner ul.bnr { display: flex; justify-content: space-between; align-content: space-between; text-align: left; margin-bottom: 30px; }
#contents .other .other-inner ul.bnr li { width: 233px; height: 300px; box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25); overflow: hidden; display: flex; flex-wrap: wrap; background: white; }
#contents .other .other-inner ul.bnr li a { height: 100%; display: block; position: relative; transition: .3s; }
#contents .other .other-inner ul.bnr li a img { width: 233px; }
#contents .other .other-inner ul.bnr li a img { transition: .3s; border: solid 10px white; }
@media screen and (min-width: 658px) { #contents .other .other-inner ul.bnr li a:hover img { opacity: 0.5; } }
#contents .other .other-inner ul.bnr li a .bnr-name { padding: 10px 10px 0 10px; height: 85px; }
#contents .other .other-inner ul.bnr li a .bnr-text { font-size: 13px; padding: 0 50px 0 10px; margin-bottom: auto; }
@media screen and (max-width: 657px) { #contents .other .other-inner ul.bnr { flex-wrap: wrap; margin: 0 10px; }
  #contents .other .other-inner ul.bnr li { width: 100%; height: 110px; margin-bottom: 1px; border-left: 6px solid white; }
  #contents .other .other-inner ul.bnr li a { display: flex; width: 100%; position: relative; }
  #contents .other .other-inner ul.bnr li a img { width: auto; height: 110px; border: none; }
  #contents .other .other-inner ul.bnr li a .bnr-name { height: auto; font-size: 13px; padding: 10px; height: 50px; }
  #contents .other .other-inner ul.bnr li a .bnr-text { display: none; }
  #contents .other .other-inner ul.bnr li a:after { content: ""; color: black; border-right: 1px solid; border-top: 1px solid; height: 8px; width: 8px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
  #contents .other .other-inner ul.bnr li a:after { position: absolute; margin: auto; top: 0; bottom: 0; right: 20px; } }
@media screen and (max-width: 657px) { #contents .other { border: none; padding-bottom: 0; padding: 0 0 35px; }
  #contents .other h3 { display: none; }
  #contents .other .other-inner { width: 100%; }
  #contents .other .other-inner .other-ttl { font-size: 13px; margin: 0; padding: 35px 0; } }
#contents .other2 { padding: 70px 0 100px; background: white; }
@media screen and (max-width: 657px) { #contents .other2 { padding: 0 0 70px; } }
#contents .modal-content { width: 90%; margin: -55px auto 0; padding: 0; background: none; z-index: 1001; position: fixed; display: none; text-align: center; }
#contents .modal-content .modal_close { color: white; margin: 10px auto 0; position: relative; top: 10px; left: 0; right: 0; width: 60px; }

#modal-overlay { z-index: 1000; display: none; position: fixed; top: 0; left: 0; width: 100%; height: 120%; background-color: rgba(0, 0, 0, 0.75); }

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