/* ----------------------------------------------------------- CSS Information File name: style.css Created: 2018.02.09 Style Info: カーディフ特集　CSS ----------------------------------------------------------- */ /*************************************** Base style ****************************************/ #mykonos .content {width: 1140px; margin: 0 auto; padding: 30px 0 70px; background: #fff;} #mykonos .content * {font-size: 13px; color: #323232; text-decoration: none;} #mykonos .content p, #mykonos .content ul, #mykonos .content li, #mykonos .content dl, #mykonos .content dt, #mykonos .content dd {line-height: 180%; padding: 0; margin: 0;} #mykonos .content h2,#mykonos .content h3,#mykonos .content h4,#mykonos .content h5 {padding: 0; margin: 0; line-height: 100%; color: #000;} #mykonos .content ul , #mykonos .content li {list-style: none;} #mykonos .content .c_inner {width: 1040px; margin: 0 auto; padding-bottom: 70px;} #mykonos .content .c_tit {font-size: 27px; font-weight: bold; text-align: center; border-bottom: solid 5px #015EEA; padding-bottom: 15px; margin-bottom: 30px;} #mykonos .content .c_note {text-align: center; margin-bottom: 30px;} #mykonos .content .fl_l {float: left; display: inline;} #mykonos .content .fl_r {float: right; display: inline;} .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /*************************************** Btn style ****************************************/ #mykonos .content .btn_order {width: 390px; height: 45px;} #mykonos .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;} #mykonos .content .btn_order a span {color: #323232; font-weight: bold; text-align: center; line-height: 55px; font-size: 16px;} #mykonos .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%);} #mykonos .content .btn_link {width: 730px; height: 55px; margin: 0 auto;} #mykonos .content .btn_link a {border-radius: 10px; border: solid 2px #00783c; display: block; width: 100%; height: 100%; text-align: center; position: relative; background: #229e8f; background: -moz-linear-gradient(top,#5dafa3,#229e8f); background: -webkit-gradient(linear,left top, left bottom, from(#5dafa3),to(#229e8f)); } #mykonos .content .btn_link a span {color: #fff; font-weight: bold; text-align: center; line-height: 55px; font-size: 16px;} #mykonos .content .btn_link a span: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%);} #mykonos .content .btn_link.back_btn{margin-top: 30px;} #mykonos .content .btn_link.back_btn a span:after {left:20px; right: auto; transform: scale(-1, 1) translate(0,-50%);} /*************************************** box_order style ****************************************/ #mykonos .content .box_order {padding-bottom: 40px; width: 800px; margin: 0 auto;} #mykonos .content .box_order p {padding-left: 50px;} /*************************************** Bl style ****************************************/ /* 都市ページ用では必要 */ /*.content_wrapper {background: #f5f3eb;}*/ .content_wrapper .visual {width: 100%; background: url(../images/visual_bg.jpg) no-repeat top center; padding: 0; text-align: center; margin: 0;} .content_wrapper .visual .h1 {line-height: 100%; padding: 0; margin: 0;} #mykonos .content #bl_01 h2 {background: url(../images/catar_logo.png) top left no-repeat; font-size: 27px; font-weight: bold; height: 59px; line-height: 59px; padding-left: 190px; margin-bottom: 10px;} #mykonos .content #bl_01 .fl_l {width: 271px;} #mykonos .content #bl_01 .fl_r {width: 725px;} #mykonos .content #bl_01 .fl_r p {margin-bottom: 10px;} #mykonos .content #bl_01 .fl_r dl {background: #D4E3FF; padding: 10px;} #mykonos .content #bl_01 .fl_r dl dt {font-weight: bold;} #mykonos .content #bl_02 .bl_tit {position: relative;} #mykonos .content #bl_02 .c_tit_img {position: absolute; top:-10px; right: 0;} #mykonos .content #bl_02 .c_tit_img p {font-size: 10px; line-height: 100%; padding-left: 20px; margin-top: -5px;} #mykonos .content #bl_02 ul li { float: left;display: inline; width: 316px; height: 360px; margin-right:46px; } #mykonos .content #bl_02 ul li:nth-child(3n) {margin-right: 0;} #mykonos .content #bl_02 ul li img {margin-bottom: 5px;} #mykonos .content #bl_02 ul li dt {font-weight: bold; font-size: 16px; margin-bottom: 5px;} #mykonos .content #bl_04 .c_box {padding-bottom:50px; } #mykonos .content #bl_04 .c_box .bl_img {width: 456px;} #mykonos .content #bl_04 .c_box .bl_note {width: 540px;} #mykonos .content #bl_04 .c_box .bl_note h3 {margin-bottom: 30px; font-size: 24px; font-weight: bold;} #mykonos .content #bl_04 .bl_order {border: solid 1px #660033;} #mykonos .content #bl_04 .bl_order .box {width: 950px; margin: 0 auto; padding: 15px 0 0; } #mykonos .content #bl_04 .bl_order .box .img_01 {margin-bottom: 10px; } #mykonos .content #bl_04 .bl_order .box .note { margin-bottom: 25px;} #mykonos .content #bl_04 .bl_order .box p {font-weight: normal;} #mykonos .content #bl_04 .bl_order .box_order {padding-bottom: 30px;} /*************************************** .bl_tour ****************************************/ #mykonos .content .bl_tour {position: relative;} #mykonos .content .bl_tour h2 {text-align: center; margin-bottom: 20px;} #mykonos .content .bl_tour .tub_departure { letter-spacing: -.4em; border-bottom:solid 5px #00783c; margin-bottom: 20px;} #mykonos .content .bl_tour .tub_departure .tub_departure_btn {width: 170px; height: 54px; margin-right: 5px; display: inline-block; letter-spacing:0em; cursor: pointer; background: url(../images/tour_tub_bg_off.png) no-repeat; color: #fff; font-weight: bold; font-size: 18px; line-height: 54px; text-align: center;} #mykonos .content .bl_tour .tub_departure .tub_departure_btn:hover , #mykonos .content .bl_tour .tub_departure .tub_departure_btn.active {background: url(../images/tour_tub_bg_on.png) no-repeat; } #mykonos .content .bl_tour .bl_tour_box {border: solid 1px #c8c8c8; padding: 0; margin-bottom: 10px;} #mykonos .content .bl_tour .bl_tour_box:last-child {margin-bottom: 30px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header {background:#e0f0ee; padding: 10px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header li {float: left; display: inline; margin-right: 20px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_img_box {width: 170px; } #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_code_box {width: 150px; letter-spacing: 0; border: solid 2px #62b0a4; background: #fff; text-align: center;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_code_box dt {border-bottom: solid 2px #62b0a4; color: #62b0a4; font-weight: bold; font-size: 16px; padding: 20px 0; line-height: 100%;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_code_box dd {font-size: 11px; padding: 5px 0;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box {width: 656px; letter-spacing: 0; margin-right: 0!important;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box p {margin-bottom: 10px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box p a {font-size:16px; font-weight: bold; line-height: 140%;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box table {width: 100%;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box table th , #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box table td {font-size: 11px; padding: 3px 5px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box table th {background: #fda01e; color: #fff; width: 85px; text-align: center; vertical-align: middle;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_header .bl_tour_tit_box table td {background: #fff; vertical-align: middle;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_det {padding: 10px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_det .bl_tour_content {width: 400px; float: left; display: inline;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_det .bl_tour_content dt , #mykonos .content .bl_tour .bl_tour_box .bl_tour_det .bl_tour_content dd {font-size: 12px; display: inline; float: left; padding: 2px 0; margin-bottom: 5px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_det .bl_tour_content dt {width: 70px; border: solid 1px #62b0a4; color: #62b0a4; text-align: center;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_det .bl_tour_content dd {width: 330px; padding-left: 10px; border: solid 1px #fff;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_det .bl_tour_content dd span {color:#fda01e; border: solid 1px #fda01e; font-weight: bold;padding: 2px 10px; margin-left: 10px; font-size: 11px; line-height: 11px; border-radius: 10px; display: inline-block;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info {width: 590px; float: right; display: inline; background: #e6e6e6; padding: 5px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_tub_btn {width: 68px; height: 35px; line-height: 35px; margin-right:5px; float: left; display: inline; background: #78bbb1; text-align: center; color: #fff; font-weight: bold; border-radius: 5px 5px 0 0; cursor: pointer; border-bottom: solid 3px #62b0a4;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_tub_btn:nth-child(8) {float: right; margin-right: 0;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_tub_btn:hover , #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_tub_btn.active {background: #fff; border-bottom: solid 3px #fff; color: #fa3734;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel {background: #fff; padding: 10px 10px 10px 0; position: relative;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_icon , #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_btn { position: absolute; } #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_icon { top: 10px; left: 0px; width: 105px; height: 48px; background: url(../images/tour_det_icon.png) ; background-size: 100%; color:#fff; padding: 7px 0 0 15px; line-height: 120%;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_icon span {font-size: 11px; color:#fff; display: block;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_btn {width: 135px; height: 50px; top: 10px; right: 10px; } #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_btn a {background:#0e81e0; border: solid 2px #0064dc; border-radius: 5px; display: block; width:100%; height: 100%; display: block;text-align: center; position: relative; box-shadow:0px 3px 5px 0px #83c1f3 inset; background: -moz-linear-gradient(top, #3095ea, #0066dc); background: -webkit-gradient(linear, left top, left bottom, from(#3095ea), to(#0066dc)); } #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_btn a span {color: #fff; font-size: 15px; font-weight: bold; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_btn a span:after {content: ""; display: block; width:8px; height: 11px; background: url(../images/arrow_right.png) no-repeat; background-size: 100%; position: absolute; top: 50%; right: 10px; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); -moz-transform: translate(0,-50%);} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_note {padding: 0 150px 0 110px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_price {font-size: 24px; color:#fa3734; font-weight: bold; line-height: 110%;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_price span {font-size: 14px; color:#fa3734;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_txt {font-size: 11px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_txt span {color: #fa3734; font-size: 11px; margin-right: 10px;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_txt .att {color: #0064d2; font-size: 11px; margin-left: 10px; text-decoration: underline;} #mykonos .content .bl_tour .bl_tour_box .bl_tour_info .bl_tour_info_panel .bl_tour_info_txt .att:before {content: url(../images/tour_icon_important.png); position: relative; top: 3px; margin-right: 3px;}