@charset "UTF-8";
/* -----------------------------------------------------------
CSS Information

File name:     style.css
Created:       2019.11.25
Style Info:    ビーチリゾート グループ特集　CSS
----------------------------------------------------------- */
#beach_group {overflow:hidden;position:relative;background:#fff;color:#555;font-weight:400;}
#beach_group * {font-family:'M PLUS Rounded 1c', sans-serif;}
#beach_group a{text-decoration:none;}
#beach_group a:hover{text-decoration:none;}
#beach_group a:active,
#beach_group a:focus{outline:none;text-decoration:none;}
#beach_group img {vertical-align:bottom;width:100%;height:auto;}
#beach_group .sec_wrap {width:90%;max-width:1080px;margin:0 auto;overflow:hidden;}
#beach_group .sec_tit {text-align:center;}
@media (min-width:768px),print {
	#beach_group a:hover{opacity:.75;}
	#beach_group .dis_sp {display:none;}
}
@media screen and (max-width:767px) {
	#beach_group .dis_pc {display:none;}
}


/* ------------------------------------------------ */
/* 看板 */
/* ------------------------------------------------ */
#beach_group .hero {position:relative;text-align:center;padding:45px 0 92px;background:#e1fcff;}
#beach_group .hero::after {content:"";position:absolute;bottom:0;left:0;width:100%;height:52px;background:url(../img/bg_wave.png) center top / auto 100% repeat-x;}
#beach_group .hero_visual {background:url(../img/visual_img.jpg) center center / auto 100% no-repeat;margin-bottom:40px;}
#beach_group .hero_visual img {max-width:695px;}
#beach_group .hero p {font-size:2rem;line-height:2;width:90%;max-width:1080px;margin:0 auto;font-weight:700;}
@media (min-width:768px),print {
	#beach_group .hero p {-webkit-transform:rotate(0.03deg);transform:rotate(0.03deg);}
}
@media screen and (max-width:980px) {
	#beach_group .hero {padding-top:0;}
	#beach_group .hero p br {display:none;}
}
@media screen and (max-width:767px) {
	#beach_group .hero {padding:0 0 46px;}
	#beach_group .hero::after {height:26px;}
	#beach_group .hero_visual {background:none;margin-bottom:20px;}
	#beach_group .hero p {text-align:left;font-size:1.6rem;line-height:1.6;}
}
@media screen and (max-width:480px) {
}

/* ------------------------------------------------ */
/* お得な割引 */
/* ------------------------------------------------ */
#beach_group .sec_info {position:relative;background:#fff;padding:50px 0 92px;}
#beach_group .sec_info::after {content:"";position:absolute;bottom:0;left:0;width:100%;height:52px;background:url(../img/bg_wave.png) center top / auto 100% repeat-x;transform:rotate(-180deg);}
#beach_group .sec_info .sec_tit img {max-width:687px;width:90%;}
#beach_group .sec_info .list_cnt {position:relative;}
#beach_group .sec_info .list_cnt::before {content:"";display:block;padding-top:calc(607 / 530 * 100%);background:url(../img/frame_01.png) center center / 100% no-repeat;}
#beach_group .sec_info .list_cnt .inner {position:absolute;top:50%;left:0;width:100%;padding:0 18%;transform:translateY(-55%);}
#beach_group .sec_info .cnt_tit {color:#68ccd7;font-weight:700;font-size:3.2rem;line-height:1.66;text-align:center;margin-bottom:15px;}
#beach_group .sec_info .list_cnt p {margin-right:-2%;}
#beach_group .sec_info p {font-size:1.8rem;line-height:1.66;}
#beach_group .sec_info .attention {font-size:1.4rem;color:#999;text-align:right;}
@media (min-width:768px),print {
	#beach_group .sec_info .list_wrap {display:flex;flex-wrap:wrap;justify-content:space-between;margin:40px 0;}
	#beach_group .sec_info .list_cnt {width:29.8%;}
	#beach_group .sec_info .list_cnt p {-webkit-transform:rotate(0.03deg);transform:rotate(0.03deg);}
}
@media screen and (max-width:980px) {
	#beach_group .sec_info .cnt_tit {font-size:2.6rem;margin-bottom:10px;}
	#beach_group .sec_info p {font-size:1.6rem;}
	#beach_group .sec_info .attention {text-align:center;}
}
@media screen and (max-width:980px) and (min-width:768px) {
	#beach_group .sec_info .list_cnt {width:32.8%;}
	#beach_group .sec_info .cnt_tit {margin-bottom:5px;}
}
@media screen and (max-width:767px) {
	#beach_group .sec_info {padding:20px 0 46px;}
	#beach_group .sec_info::after {height:26px;}
	#beach_group .sec_info .list_wrap {margin:20px auto;width:80%;max-width:320px}
	#beach_group .sec_info .list_cnt {margin-bottom:20px;}
}
@media screen and (max-width:480px) {
	#beach_group .sec_info {padding-top:8vw;}
	#beach_group .sec_info .list_wrap {margin:8vw auto;}
	#beach_group .sec_info .list_cnt {margin-bottom:5vw;}
}
@media screen and (max-width:360px) {
	#beach_group .sec_info .list_wrap {width:94%;}
}

/* ------------------------------------------------ */
/* おすすめツアー */
/* ------------------------------------------------ */
#beach_group .sec_tour {background:#e1fcff;}
#beach_group .sec_tour .sec_tit {position:relative;padding:90px 0 55px;}
#beach_group .sec_tour .sec_tit img {position:relative;z-index:2;}
#beach_group .sec_tour .sec_tit::before,
#beach_group .sec_tour .sec_tit::after {z-index:1;content:"";position:absolute;top:0;height:100%;}
#beach_group .sec_tour .sec_tit::before {background:url(../img/tour_bg_01.png) left center / 100% auto no-repeat;}
#beach_group .sec_tour .sec_tit::after {background:url(../img/tour_bg_02.png) left center / 100% auto no-repeat;}
#beach_group .sec_tour .tour_area {display:flex;align-items:center;justify-content:center; background:#68ccd7;font-size:3rem;font-weight:700;height:50px;text-align:center;border-radius:8px 8px 0 0;color:#fff;}
#beach_group .sec_tour .tour_cnt .inner {padding:15px;background:#fff;}
#beach_group .sec_tour .tour_tokuten {color:#68ccd7;line-height:1.5;font-size:1.8rem;margin-bottom:15px;font-weight:700;}
#beach_group .sec_tour .tour_img {margin-bottom:15px;}
#beach_group .sec_tour .tour_img a {display:block;}
#beach_group .sec_tour .tour_name {font-size:1.5rem;margin-bottom:15px;}
#beach_group .sec_tour .tour_link {width:100%;display:table;table-layout:fixed;margin-top:15px;}
#beach_group .sec_tour .tour_link li {display:table-cell;margin-top:15px;}
#beach_group .sec_tour .tour_link li a {display:flex;align-items:center;justify-content:center;height:40px;font-size:1.6rem;text-align:center;color:#fff;font-weight:700;background:#92d3da;border-radius:4px;line-height:1.6;position:relative;margin:0 5px;}
#beach_group .sec_tour .tour_info_tab {overflow:hidden;}
#beach_group .sec_tour .tour_info_tab_nav {overflow:hidden;table-layout:fixed;display:table;width:100%;}
#beach_group .sec_tour .tour_info_tab_nav li {display:table-cell;}
#beach_group .sec_tour .tour_info_tab_nav li span {display:block;cursor:pointer;margin:0 2px;font-size:1.1rem;background:#ace2e8;border-radius:4px 4px 0 0;padding:5px 0;color:#fff;text-align:center;line-height:1.2;}
#beach_group .sec_tour .tour_info_tab_nav li.active span {color:#fff;background:#68ccd7;}
#beach_group .sec_tour .tour_info_tab_nav li:first-child span {margin-left:0;}
#beach_group .sec_tour .tour_info_tab_nav li:last-child span {margin-right:0;}
#beach_group .sec_tour .tour_info_tab_nav li span strong {display:block;font-size:1.6rem;font-weight:700;}
#beach_group .sec_tour .tour_info_tab_panel {background:#fff;overflow:hidden;margin:0;border:2px solid #68ccd7;border-top-width:6px;}
#beach_group .sec_tour .tour_info_tab_panel .panel_cnt {display:none;position:relative;min-height:70px;padding:10px }
#beach_group .sec_tour .tour_info_tab_panel .panel_cnt.active {display:block;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_tit {width:80px;float:left;margin-left:-15px;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_tit span {position:relative;display:flex;line-height:1.4;height:48px;background:#323232;color:#fff;font-size:1.2rem;padding-left:10px;align-items:center;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_tit span:after {content:"";position:absolute;top:0;right:-10px;width:0;height:0;border-style:solid;border-width:24px 0 24px 10px;border-color: transparent transparent transparent #323232;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_tit span strong {font-size:1.2rem;display:block;font-weight:400;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt {padding-left:90px;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .price {color:#fa3734;font-weight:700;line-height:1.2;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .min_price {font-size:2rem;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .max_price {font-size:1.4rem;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .att {margin-top:5px;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .att p {display:inline;font-size:1.2rem;line-height:1.2;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .att .att_01 {color:#fa3734;display:block;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .att .att_02 {}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .att .att_03 {color:#0064d2;padding-left:17px;margin-left:5px;background:url(../img/icon_attention.png) left center no-repeat;}
#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt .att .att_03 span {text-decoration:underline;}
#beach_group .sec_tour .tour_info_tab_panel .tour_btn {margin-top:10px;height:44px;}
#beach_group .sec_tour .tour_info_tab_panel .tour_btn a {position:relative;display:block;height:44px;border-radius:8px;color:#fff;font-size:1.5rem;line-height:44px;text-align:center;font-weight:700;background:#fd9595;text-decoration:none;}
#beach_group .sec_tour .tour_info_tab_panel .tour_btn a:after {font-size:1.2rem;position:absolute;top:50%;right:5px;width:10px;height:10px;line-height:10px;margin-top:-5px;content:"\f105";font-family:FontAwesome;}
@media (min-width:768px),print {
	#beach_group .sec_tour .tour_list {display:flex;flex-wrap:wrap;justify-content:space-between;}
	#beach_group .sec_tour .tour_list::after {display:block;content:"";width:31.8%;}
	#beach_group .sec_tour .tour_cnt {width:31.8%;margin-bottom:60px;}
	#beach_group .sec_tour .tour_tokuten {min-height:calc(18px * 1.5 * 2);-webkit-transform:rotate(0.03deg);transform:rotate(0.03deg);}
	#beach_group .sec_tour .tour_name {min-height:calc(15px * 1.4 * 2);-webkit-transform:rotate(0.03deg);transform:rotate(0.03deg);}
	#beach_group .sec_tour .tour_img a {position:relative;height:auto;padding-top:calc(375 / 500 * 100%);overflow:hidden;}
	#beach_group .sec_tour .tour_img img {width:auto;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
	#beach_group .sec_tour .tour_info_tab * {font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', Osaka, sans-serif;}
	#beach_group .sec_tour .tour_info_tab_nav li span:hover {opacity:.65;}
	#beach_group .sec_tour .tour_info_tab_nav li.active span:hover {opacity:1;}
	#beach_group .sec_tour .tour_link li a {-webkit-transform:rotate(0.03deg);transform:rotate(0.03deg);}
}
@media (min-width:981px),print {
	#beach_group .sec_tour .sec_tit::before,
	#beach_group .sec_tour .sec_tit::after {left:50%;}
	#beach_group .sec_tour .sec_tit::before {margin-left:-605px;width:274px;}
	#beach_group .sec_tour .sec_tit::after {margin-left:320px;width:183px;}
	#beach_group .sec_tour .sec_tit img {width:auto;}
}
@media screen and (max-width:980px){
	#beach_group .sec_tour .sec_tit {padding:40px 0;}
	#beach_group .sec_tour .sec_tit img.dis_pc {display:none;}
	#beach_group .sec_tour .sec_tit img.dis_sp {display:block;width:100%;}
	#beach_group .sec_tour .sec_tit::before {left:-3%;width:28%;height:70%;}
	#beach_group .sec_tour .sec_tit::after {right:0;width:20%;height:90%;}
}
@media screen and (max-width:980px) and (min-width:768px) {
	#beach_group .sec_tour .tour_list::after {width:48%;}
	#beach_group .sec_tour .tour_cnt {width:48%;margin-bottom:40px;}
}
@media screen and (max-width:767px) {
	#beach_group .sec_tour .tour_cnt {margin-bottom:30px;}
	#beach_group .sec_tour .tour_area {font-size:2.3rem;height:40px;}
	#beach_group .sec_tour .tour_tokuten {font-size:1.7rem;margin-bottom:10px;}
	#beach_group .sec_tour .tour_img {margin-bottom:10px;}
	#beach_group .sec_tour .tour_name {font-size:1.5rem;margin-bottom:10px;}
	#beach_group .sec_tour .tour_link {margin-top:10px;}
	#beach_group .sec_tour .tour_link li {margin-top:10px;}
	#beach_group .sec_tour .tour_link li a {margin:0 2px;}
}
@media screen and (max-width:480px) {
	#beach_group .sec_tour .sec_tit {padding:7vw 0;}
	#beach_group .sec_tour .tour_cnt {margin-bottom:8vw;}
}
@media screen and (max-width:360px) {
	#beach_group .sec_tour .tour_link li a {font-size:1.4rem}
}
@media screen and (max-width:320px) {
	#beach_group .sec_tour .tour_info_tab_panel .tour_price_tit {width:70px;}
	#beach_group .sec_tour .tour_info_tab_panel .tour_price_tit span {font-size:1.1rem;}
	#beach_group .sec_tour .tour_info_tab_panel .tour_price_txt {padding-left:85px;}
}

/* 完売しました */
#beach_group .sec_tour .soldout_info {background:#f4f4f4;padding:30px 0;text-align:center;color:#666;font-size:1.5rem;font-weight:700;}

/* -------------------------------------------------------- */
/* フリーオーダー (共通記述) */
/* -------------------------------------------------------- */
#beach_group .contact_box {z-index:2;position:relative;overflow:hidden;border:solid 1px #c8c8c8;background:#fff;width:90%;margin:60px auto 90px;max-width:970px;}
#beach_group .contact_box p {color:#787878;}
@media (min-width:981px),print{
	#beach_group .contact_box {margin:60px auto 90px;}
	#beach_group .contact_box .tit_01 br {display:none;}
}
@media (min-width:768px),print{
	#beach_group .contact_box {padding:30px 40px;}
	#beach_group .contact_box p {font-size:1.4rem;line-height:1.4;}
	#beach_group .contact_box .tit_01{font-size:2.2rem;margin-bottom:10px;}
	#beach_group .contact_box .wrap_01{float:left;width:50%;}
	#beach_group .contact_box .wrap_02{float:right;width:45%;max-width:400px;}
	#beach_group .contact_box .contact_tel{color:#38aac1;font-weight:700;font-size:5.4rem;line-height:1;font-family:'arial', sans-serif;margin:0 auto;letter-spacing:-0.02em;}
	#beach_group .contact_box .contact_tel::before{display:inline-block;content:"\f095";font-family:FontAwesome;transform:rotate(10deg);font-size:4.8rem;margin-right:10px;}
	#beach_group .contact_box .link_btn{margin-top:10px;}
	#beach_group .contact_box .link_btn a{border:1px solid #ff9c9c;color:#fff;background:#ff9c9c;padding-right:10px;display:block;margin:0 3px;border-radius:5px;font-size:1.6rem;position:relative;height:44px;line-height:42px;text-decoration:none;font-weight:700;text-align:center;}
	#beach_group .contact_box .link_btn a::after{left:130px;content:"\f054";font-size:0.9em;font-family:FontAwesome;position:relative;font-weight:400;}
}
@media screen and (max-width:980px) and (min-width:768px){
	#beach_group .contact_box .wrap_01,
	#beach_group .contact_box .wrap_02{float:none;width:100%;margin:0 auto;}
	#beach_group .contact_box .wrap_01{margin-bottom:20px;}
	#beach_group .contact_box .tit_01{font-size:2.7rem;margin-bottom:20px;}
}
@media screen and (max-width:980px){
	#beach_group .contact_box {max-width:640px;width:90%;margin:0 auto;border:none;padding:30px 0;text-align:center;}
}
@media screen and (max-width:767px){
	#beach_group .contact_box .tit_01 {line-height:1.4;font-size:2rem;margin-bottom:10px;font-weight:700;}
	#beach_group .contact_box p {line-height:1.8;font-size:1.3rem;}
	#beach_group .contact_box .btn_wrap{overflow:hidden;margin:15px -3px 0;}
	#beach_group .contact_box .btn_wrap li{float:left;width:50%;}
	#beach_group .contact_box .btn_wrap li a{display:block;margin:0 3px;border-radius:5px;font-size:1.6rem;position:relative;height:44px;line-height:40px;text-decoration:none;font-weight:700;}
	#beach_group .contact_box .btn_wrap li a::before{position:absolute;height:100%;top:0;}
	#beach_group .contact_box .btn_wrap li.tel a{border:2px solid #68ccd7;color:#68ccd7;padding-left:10px;background:#fff;}
	#beach_group .contact_box .btn_wrap li.tel a::before {content:"\f095";font-family:FontAwesome;position:absolute;	left:5px;font-size:3rem;transform:rotate(10deg);}
	#beach_group .contact_box .btn_wrap li.order a{border:1px solid #ff9c9c;color:#fff;background:#ff9c9c;padding-right:10px;}
	#beach_group .contact_box .btn_wrap li.order a::before{right:10px;content:"\f054";font-size:1.1rem;font-family:FontAwesome;}
}
@media screen and (max-width:480px){
	#beach_group .contact_box {padding:5vw 0;}
	#beach_group .contact_box .tit_01 {font-size:5vw;}
	#beach_group .contact_box p {margin-bottom:15px;}
}
@media screen and (max-width:360px){
	#beach_group .contact_box .btn_wrap li.order a::before{right:5px;}
}