/* ----------------------------------------------------------- CSS Information File name: style.css Created: 2022.10.25 Style Info: ヨーロッパ×ドーハ特集　CSS ----------------------------------------------------------- */ /*************************************** Base style ****************************************/ #doha.content {width: 1140px; margin: 0 auto; padding: 30px 0 5px; background: #fff;font-size: 13px;} #doha.content * {/*font-size: 13px; color: #323232; */text-decoration: none;} #doha.content p, #doha.content ul, #doha.content li, #doha.content dl, #doha.content dt, #doha.content dd {line-height: 180%; padding: 0; margin: 0;} #doha.content h2,#doha.content h3,#doha.content h4,#doha.content h5 {padding: 0; margin: 0; line-height: 100%; color: #000;} #doha.content ul , #doha.content li {list-style: none;} #doha.content .c_inner {width: 1040px; margin: 0 auto; padding-bottom: 70px;} #doha.content .c_tit {font-size: 27px; font-weight: bold; text-align: center; border-bottom: solid 5px #a6004e; padding-bottom: 15px; margin-bottom: 30px; line-height: 1.4;} #doha.content .c_note {text-align: center; margin-bottom: 30px;} #doha.content .fl_l {float: left; display: inline;} #doha.content .fl_r {float: right; display: inline;} .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /*************************************** Btn style ****************************************/ #doha.content .btn_order {width: 390px; height: 45px; margin: 0 auto;} #doha.content .btn_order a {border-radius: 10px; display: block; width: 100%; height: 100%; text-align: center; position: relative;background: #ffe200; box-shadow: 0 5px 0 #e2a800;} #doha.content .btn_order a span {color: #323232; font-weight: bold; text-align: center; line-height: 48px; font-size: 16px;} #doha.content .btn_order a span:after {content:""; background: url(../images/arrow_glay.png) no-repeat; background-size: 100%; display: block; width: 10px; height: 14px; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%);} #doha.content .btn_link {width: 730px; max-width: 90%; min-height: 55px; margin: 0 auto;} #doha.content .btn_link a {border-radius: 10px; display: block; width: 100%; height: 100%; text-align: center; position: relative; background: #ff6e00; color: #fff; font-weight: bold; text-align: center; line-height: 1.4; font-size: 16px;padding: 20px 30px 20px 12px; display: block; } #doha.content .btn_link a:after {content:""; background: url(../images/arrow_right.png) no-repeat; background-size: 100%; display: block; width: 10px; height: 14px; position: absolute; top: 50%; right: 20px; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%);} #doha.content .btn_link a span {display: inline-block;} /*************************************** box_order style ****************************************/ #doha.content .box_order {padding-bottom: 40px; width: 100%; max-width: 800px; margin: 0 auto;} #doha.content .box_order p {padding-top: 10px; text-align: center;} #doha.content .box_order .box_order_tel{font-family: Arial, Helvetica, "sans-serif"; font-weight: bold; font-size: 5.0rem; line-height: 1; color: #a6004e;} #doha.content .box_order .box_order_tel::before{content:""; display:inline-block; margin: 0 10px 0 0; background: url(../images/icon_tel_main.svg) center center / 100% auto no-repeat;aspect-ratio: 1 / 1;width:37px;} @media screen and (max-width:767px){ #doha.content .box_order .box_order_tel{background: #a6004e;color: #fff; border-radius: 50px; padding: 12px 10px 9px; font-size: 2.4rem; display: flex;align-items: center; justify-content: center; box-shadow: 0 5px 0 #780039;} #doha.content .box_order .box_order_tel::before {background-image:url(../images/icon_tel_white.svg);width:18px;margin:0 10px 0 0} #doha.content .box_order .box_order_tel .dis_sp{font-weight: normal; font-size: 1.3rem; padding-left: 10px;} } /*************************************** Bl style ****************************************/ .content_wrapper {background: #f5f3eb;} .content_wrapper .visual {width: 100%; max-width: 1600px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; background: #fff;} .content_wrapper .visual img{width: 100%;} .content_wrapper .visual .title_pc{position: absolute; top: 15px; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, 0%);} .content_wrapper .visual .title_sp{display: none;} /*.content_wrapper .visual h1{width: 100%; margin-top: -456px;} .content_wrapper .visual h1 img{width: 100%;}*/ #doha.content #bl_01 .start {background: url(../images/catar_logo.png) top left no-repeat; padding-left: 190px; font-size: 26px; font-weight: bold; line-height: 59px; margin-bottom: 10px;} #doha.content #bl_01 .fl_l {width: 70%;} #doha.content #bl_01 .fl_r img{max-width: 100%;} #doha.content #bl_01 .fl_r {width: 27%;} #doha.content #bl_01 .fl_l p {margin-bottom: 10px; font-size: 1.6rem;} #doha.content #bl_01 .fl_l dl {background: #dff4f3; padding: 10px;} #doha.content #bl_01 .fl_l dl dt {font-weight: bold;} #doha.content .bl_tit {position: relative;} #doha.content .c_tit_img {position: absolute; top:-10px; right: 0;} #doha.content .c_tit_img p {font-size: 10px; line-height: 100%; padding-left: 20px; margin-top: -5px;} #doha.content .spot_info{display: flex; flex-wrap: wrap; justify-content: space-between;} #doha.content .spot_info li{flex-basis: 30%; margin-bottom: 30px;} #doha.content .spot_info li img{margin-bottom: 5px; width: 100%;} #doha.content .spot_info li dt {font-weight: bold; font-size: 16px; margin-bottom: 5px;} /*#doha.content #bl_02 ul li { float: left;display: inline; width: 316px; height: 360px; margin-right:46px; } #doha.content #bl_02 ul li:nth-child(3n) {margin-right: 0;} #doha.content #bl_02 ul li img {margin-bottom: 5px;} #doha.content #bl_02 ul li dt {font-weight: bold; font-size: 16px; margin-bottom: 5px;}*/ #doha.content #bl_04 .c_box {padding-bottom:50px; } #doha.content #bl_04 .c_box .bl_img {width: 45%;} #doha.content #bl_04 .c_box .bl_img img{max-width: 100%;} #doha.content #bl_04 .c_box .bl_note {width: 52%;} #doha.content #bl_04 .c_box .bl_note h3 {margin-bottom: 30px; font-size: 24px; font-weight: bold; line-height: 1.4;} #doha.content #bl_04 .bl_order {border: solid 1px #a6004e;} #doha.content #bl_04 .bl_order .upgrade{background: #a6004e; color: #fff; font-size: 26px; line-height: 1.4; letter-spacing: 1px; font-weight: bold; padding: 15px 20px;} #doha.content #bl_04 .bl_order .upgrade img{padding-right: 20px; width: 144px;} #doha.content #bl_04 .bl_order img{max-width: 385px; width: 100%;} #doha.content #bl_04 .bl_order .box {width: 90%; margin: 0 auto; padding: 15px 0 0; } #doha.content #bl_04 .bl_order .box .img_01 {margin-bottom: 10px; background: #dff4f3; padding: 10px; font-size: 22px; font-weight: bold; letter-spacing: 1px; text-align: center; border-radius: 5px;} #doha.content #bl_04 .bl_order .box .img_01 .red{color: #ff0000;} #doha.content #bl_04 .bl_order .box .img_01 .red b{font-size: 38px; font-family: roboto, sans-serif;} #doha.content #bl_04 .bl_order .box .note { margin-bottom: 25px;} #doha.content #bl_04 .bl_order .box p {font-weight: normal;} #doha.content #bl_04 .bl_order .box_order {padding-bottom: 30px;} /*************************************** tourlist ****************************************/ #doha.content .tourlist {position: relative; line-height: 1.4; display: flex;flex-wrap: wrap; justify-content: space-between;} #doha.content .tourlist .wrap {flex: 0 0 30%; margin-bottom: 40px;} #doha.content .tourlist .tour_name {font-size: 1.6rem; font-weight: bold; line-height: 1.4; margin: 13px 0 10px;} #doha.content .tourlist .tour_img {display: block; width: 100%; position: relative; padding: 75% 0 0; overflow: hidden; background: #ddd; font-size: 1.8rem;} #doha.content .tourlist .tour_img img {width: auto; height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #doha.content .tourlist .tour_info_tab {overflow:hidden; margin:0;} #doha.content .tourlist .tour_info_tab .soldout_info{text-align: center; font-size: 1.6rem; color: #fa3734; font-weight: bold; padding: 10px 0; border-top: 2px solid #a6004e; border-bottom: 1px dashed #aaa;} #doha.content .tourlist .tour_info_tab_nav {overflow:hidden;table-layout:fixed;display:table;width:100%;} #doha.content .tourlist .tour_info_tab_nav li {display:table-cell;} #doha.content .tourlist .tour_info_tab_nav li span:hover{opacity: 0.7;} #doha.content .tourlist .tour_info_tab_nav li > span {display: block; cursor: pointer; padding: 5px 0; margin: 0 2px; font-size: 1rem; font-weight: bold; text-align: center; line-height: 1; background: #e9c4d5; border-bottom: 0; border-radius: 5px 5px 0 0;} #doha.content .tourlist .tour_info_tab_nav span.date{display: block; font-size: 1.8rem; line-height: 1; font-weight: bold; padding: 0;} #doha.content .tourlist .tour_info_tab_nav li span strong {font-size:130%;font-weight:700;display:block;} #doha.content .tourlist .tour_info_tab_nav li.active span {background:#a6004e; color: #fff;} #doha.content .tourlist .tour_info_tab_nav li.active span:hover {opacity:1;} #doha.content .tourlist .tour_info_tab_nav li:first-child span {margin-left:0;} #doha.content .tourlist .tour_info_tab_nav li:last-child span {margin-right:0;} #doha.content .tourlist .tour_info_tab_panel {padding: 10px 0; border-top: 2px solid #a6004e; border-bottom: 1px dashed #aaa;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt {display:none;position:relative;font-size:1.7rem;font-weight:700;padding-right:75px;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .tour_dep {font-size:1.7rem;font-weight:700;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .tour_price {color:#fa3734;font-weight:700;line-height:1;font-size:1.7rem;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .tour_price .att {font-size: 11px; line-height: 1.4; color: #555;font-weight: 500;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .min_price {font-size:130%;margin-right:5px;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .max_price {margin-left:5px;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .tour_att {line-height:1;margin-top:3px;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .tour_att > div {font-weight:normal;display:inline-block;font-size:1.2rem;} #doha.content .tourlist .tour_info_tab_panel .panel_cnt .tour_att .att_01 {color:#fa3734;margin-right:5px;} #doha.content .tourlist .tour_info_tab_panel .tour_btn {position:absolute;top:50%;right:0;width:70px;transform:translateY(-50%);} #doha.content .tourlist .tour_info_tab_panel .tour_btn a {display:block;height:40px;font-size:1.4rem;line-height:40px;text-align:center;position:relative;background:#a6004e;color:#fff;font-weight:700;border-radius:5px;padding-right:10px;} #doha.content .tourlist .tour_info_tab_panel .tour_btn a:hover{opacity: 0.7;} #doha.content .tourlist .tour_info_tab_panel .tour_btn a::after {content:"";position: absolute;top:50%;right:10px;width:6px;aspect-ratio: 7 / 12;background:url(../images/arr_white.svg) center center / 100% auto no-repeat;transform: translateY(-50%);display: block;} #doha.content .tour_list_btn{text-align: center;} #doha.content .tour_list_btn a {display:inline-block;height:50px;font-size:1.5rem;line-height:50px;text-align:center;position:relative;background:#a6004e; box-shadow: 0 5px 0 #780039;color:#fff;font-weight:700;border-radius:5px;padding:0 50px;} #doha.content .tour_list_btn a:hover{opacity: 0.7;} #doha.content .tour_list_btn a::after {content:"";position: absolute;top:50%;right:15px;width:8px;aspect-ratio: 7 / 12;background:url(../images/arr_white.svg) center center / auto 100% no-repeat;transform: translateY(-50%);display: block;} /*************************************** back_btn ****************************************/ #doha.content .btn_link.back_btn{margin: 0 auto 60px; width: 60%;} #doha.content .btn_link.back_btn a{display: block; border-radius: 5px; background: #a6004e; color: #fff; padding: 15px; position: relative;} #doha.content .btn_link.back_btn a:after {transform: scale(-1,1); right: auto; left: 20px; margin-top: -5px;} @media screen and (max-width: 1139px){ #doha.content {width: 100%; padding-top: 15px;} .content_wrapper .visual {width: 100%; max-width: 1600px; margin: 0 auto; padding: 0; text-align: center; position: relative; overflow: hidden} #doha.content .c_inner{width: 90%;} /*#doha.content #bl_01 .start {background:url(../images/catar_logo.png) top center /90px no-repeat; padding: 40px 0 0; font-size: 19px; font-weight: bold; line-height: 1.4; margin-bottom: 20px;} #doha.content #bl_02{padding-bottom: 40px;} #doha.content #bl_02 .c_tit_img{margin-top: -35px;}*/ #doha.content .box_order{text-align: center;} #doha.content .box_order .fl_l, #doha.content .box_order .fl_r{float: none;} #doha.content .box_order p{padding: 15px 0;} #doha.content .btn_order {width: 70%;} #doha.content #bl_04 .c_tit span{display: inline-block;} #doha.content #bl_04 .c_box .bl_note h3{font-size: 20px;} } @media screen and (max-width: 768px){ /*#doha.content #bl_02 .spot_lead br:nth-child(2){display: none;}*/ } @media screen and (max-width: 767px){ #doha.content .c_note{text-align:left;} #doha.content .spot_lead br{display: none;} #doha.content .spot_info li{flex-basis: 100%;} #doha.content .tourlist .wrap {flex: 0 0 100%;} #doha.content .tour_list_btn a {background:#b19475; box-shadow: 0 5px 0 #806242; padding: 0; width: 100%;} } @media screen and (max-width: 640px){ #doha.content .fl_l, #doha.content .fl_r{float: none; width: 100%;} #doha.content .c_tit{font-size: 22px;} #doha.content #bl_01 .fl_l img{display: block; margin: 0 auto 20px;} /*#doha.content #bl_02 .c_tit_img{display: none;} #doha.content #bl_02 .spot_info li{flex-basis: 48%;}*/ #doha.content .btn_order{width: 100%;} #doha.content #bl_04 .c_box .bl_note h3{margin: 15px 0;} #doha.content #bl_04 .c_box .bl_img img{display: block; margin: 0 auto;} #doha.content #bl_04 .bl_order .upgrade{font-size: 20px;} #doha.content #bl_04 .bl_order .upgrade img{display: block; padding-bottom: 8px;} #doha.content #bl_04 .bl_order .box .img_01{font-size: 16px;} #doha.content #bl_04 .bl_order .box .img_01 span{display: block;} #doha.content .c_inner{padding-bottom: 30px;} #doha.content .btn_link.back_btn{margin: 0 auto 60px; width: 100%;} }