@charset "UTF-8";

/* -----------------------------------------------------------
CSS Information

File name:      style.css
Created:        2018.02.09
Style Info:     カーディフ特集　CSS
----------------------------------------------------------- */



/***************************************
Base style
****************************************/


#mykonos {background:#d2e1ff; color: #333333; text-align: center;}
#mykonos a{text-decoration:none;color:#0068e1;}
#mykonos ul,
#mykonos ol,
#mykonos li ,
#mykonos p ,
#mykonos dl,
#mykonos dd  {list-style:none;margin:0;padding:0;font-size:14px;line-height:1.5;}
#mykonos img {vertical-align:bottom;width:100%;height:auto;}
#mykonos h1,
#mykonos h2,
#mykonos h3,
#mykonos h4 {margin:0;padding:0; font-size: 1em;}
#mykonos strong {font-weight: normal;}
#mykonos .co_red {color: #ff0000;}
#mykonos .co_glay {color: #696969;}

#mykonos .content {overflow:hidden;max-width:640px;margin:0 auto;}

#mykonos .content_box {width: 93%; margin: 0 auto; background: #fff;}
#mykonos #bl_01.content_box {width: 93%; margin: -20px auto 20px; z-index: 10; position: relative;}


#mykonos *, *:before, *:after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#mykonos .content_inner {width: 93%; padding: 3% 0; margin: 0 auto; text-align: left;}





/***************************************
Btn style
****************************************/
#mykonos .btn_type_01 { background: #0059ee; width: 100%;}
#mykonos .btn_type_01 .btn_tit { padding: 0 3%; height: 70px; width: 100%;position: relative; text-align: left;}
#mykonos .btn_type_01 .btn_tit span { color: #fff; font-size: 4.2vw; font-weight: bold; line-height: 120%;  display: block; position: absolute; top: 50%; left: 5%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
#mykonos .btn_type_01 .btn_tit:after {content: "▼"; background: #fff; font-size: 4.4vw; line-height: 100%; padding: 3.5% 3% 2.5% 3%; color: #0059ee; border-radius: 50px; position: absolute; top: 50%; right: 3%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
#mykonos .accordion_btn.btn_type_01.is_active .btn_tit span:after { transform: translate(0,-50%) rotate(180deg); -webkit-transform: translate(0,-50%) rotate(180deg);}

#mykonos .btn_type_02 ,
#mykonos .btn_type_03 {width: 100%; height: 60px;}
#mykonos .btn_type_02 a {background: #ffe300; display: block; width: 100%; height: 100%; padding: 0 4%; position: relative; text-align: left; border-radius: 5px; box-shadow: 0 5px 0 #e2a900;}
#mykonos .btn_type_02 a span ,
#mykonos .btn_type_03 a span { color: #000; font-size: 5vw; font-weight: bold; line-height: 110%; display: block; position: absolute; top: 50%; left: 5%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
#mykonos .btn_type_02 a:after ,
#mykonos .btn_type_03 a:after {content: "▼"; background: #fff; font-size: 4.4vw; line-height: 100%; padding: 3.5% 3% 2.5% 3%; color: #e2a900; border-radius: 50px; position: absolute; top: 50%; right: 3%; transform: translate(0,-50%) rotate(-90deg); -webkit-transform: translate(0,-50%) rotate(-90deg);}


#mykonos .btn_type_03 a {background: #0e81e0; display: block; width: 100%; height: 100%; padding: 0 4%; position: relative; text-align: left; border-radius: 5px; box-shadow: 0 5px 0 #0064dc;}
#mykonos .btn_type_03 a span{ color: #fff;}
#mykonos .btn_type_03 a:after {color: #0e81e0;}


#mykonos .accordion_cl_btn {background:#c0c0c0; font-size: 16px; color: #fff; font-weight: bold; text-align: center;}
#mykonos .accordion_cl_btn {width: 100%; position: relative;}
#mykonos .accordion_cl_btn p {width: 100%; height: 100%; padding: 3.5% 3% 2.5%; font-size: 4.4vw;}
#mykonos .accordion_cl_btn p:after {content: "×"; position: absolute; right: 6%; top:50%; transform: translate(0,-50%); -webkit-transform: translate(0,-50%);}
@media (min-width:640px) {
	#mykonos .accordion_cl_btn p {font-size: 30px;}
}

#mykonos .bl_btn .btn_type_01 ,
#mykonos .navi_btn li {margin-bottom: 20px;}
#mykonos .bl_btn .btn_type_01 ,
#mykonos .navi_btn .btn_type_01 {position: relative;}
#mykonos .bl_btn .btn_type_01 .btn_tit span:after ,
#mykonos .navi_btn .btn_type_01 .btn_tit span:after { transform: translate(0,-50%) rotate(-90deg); -webkit-transform: translate(0,-50%) rotate(-90deg);}
#mykonos .bl_btn .btn_type_01 a ,
#mykonos .navi_btn .btn_type_01 a{position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; text-indent: -9999px;}


@media (min-width:640px) {
	#mykonos .btn_type_01 .btn_tit span ,
	#mykonos .btn_type_01 .btn_tit:after ,
	#mykonos .btn_type_02 a span ,
	#mykonos .btn_type_02 a:after ,
	#mykonos .btn_type_03 a span ,
	#mykonos .btn_type_03 a:after {font-size: 28px;}
	
}


/***************************************
accordion_box
****************************************/
#mykonos .accordion {margin-bottom: 20px;}
#mykonos .accordion_box {background: #fff; display: none;}
#mykonos .accordion_box.on {display: block}
#mykonos .accordion_box .content_inner {padding: 3% 0;}
#mykonos .accordion_box .note {padding-bottom: 3%;}
#mykonos .accordion_box dl dt { padding: 3.5% 3% 2.5%; font-weight: bold; font-size: 16px; background: #0059ee; line-height: 120%; color: #fff;}
#mykonos .accordion_box dl dd { padding: 0 0 5%;}



/***************************************
Page top
****************************************/
.pagetop {cursor:pointer;width:44px;height:44px;right:5px;text-indent:-9999px;z-index:300;
  background:rgba(0,0,0,0.6) url(../img/pagetop.png) center center no-repeat;
  -webkit-background-size:100% auto;
  background-size:100% auto;}






/***************************************
bl_tour
****************************************/



	#mykonos .bl_tour .tub_departure { letter-spacing: -0.4em; border: none; width: 100%; margin: 0 auto 10px; padding-top: 10px;}
	#mykonos .bl_tour .tub_departure .tub_departure_btn {width: 49%; height: auto;margin-right: 2%; display: inline; float: left; letter-spacing:0em; position: relative; margin-bottom: 12px; cursor: pointer; background: none;}
	#mykonos .bl_tour .tub_departure .tub_departure_btn:nth-child(2n) {margin-right: 0;}
	#mykonos .bl_tour .tub_departure .tub_departure_btn span { display: block; background: #ff496e; border-radius: 5px; color: #fff; text-align: center; font-weight: bold; padding: 10px 0;}
	#mykonos .bl_tour .tub_departure .tub_departure_btn:hover ,
	#mykonos .bl_tour .tub_departure .tub_departure_btn.active {background: none;}
	#mykonos .bl_tour .tub_departure .tub_departure_btn.active span {background: #323232;}
	#mykonos .bl_tour .tub_departure .tub_departure_btn.active:after {content: ""; display: block; width: 10px; border:8px solid transparent; border-top:8px solid #323232; position: absolute;  left: 50%; top:99%; transform: translate(-50%,0);}

	#mykonos .bl_tour .bl_tour_box {border-top: solid #cccccc 1px; background: #fff; padding: 20px 0 0; width: 100%; margin: 0 auto;}

	#mykonos .bl_tour .bl_tour_box:last-child:after {content: ""; height: 25;}

	#mykonos .bl_tour .bl_tour_box .bl_tour_wrap {margin-bottom: 10px;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_wrap .bl_tour_img {float: left; margin-right: 10px; width: 40%; max-width: 180px;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_wrap .bl_tour_tit a {color: #646464;}
	
	#mykonos .bl_tour .bl_tour_box .bl_tour_info {width: 100%; float: none;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_tub .bl_tour_info_tub_btn {width:11.5%; margin-right: 1.1%; background: #b3d9d3; display: inline; float: left; text-align: center; color: #fff; font-weight: bold; padding: 1% 0 1%; font-size: 1.2rem; line-height: 110%; border-radius: 5px 5px 0 0; cursor: pointer;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_tub .bl_tour_info_tub_btn.active {background: #46b89f;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_tub .bl_tour_info_tub_btn:nth-child(8) {margin-right: 0; float: right;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_tub .bl_tour_info_tub_btn span {display: block; font-weight: normal; font-size: 0.9rem; color: #fff;}


	#mykonos .bl_tour .bl_tour_box .bl_tour_info_panel {border: solid 5px #46b89f; padding: 10px 0 15px; margin-bottom: 20px; position: relative;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_icon { position: absolute; top: 10px; left: 0px; width: 105px; height: 48px; background: url(../img/tour_det_icon.png) ; background-size: 100%;  color:#fff; font-size: 0.8rem; line-height: 120%; padding: 7px 10px; }
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_icon p {line-height: 120%; font-size: 0.9rem; color: #fff;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_icon p span {display: block; font-size: 0.8rem; color: #fff;}

	#mykonos .bl_tour .bl_tour_box .bl_tour_info_note {padding: 0 10px 10px 110px;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_note .bl_tour_info_price {font-size: 1.4rem; color:#fa3734; font-weight: bold; line-height: 110%;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_note .bl_tour_info_price span {font-size: 1rem; color:#fa3734;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_txt {font-size: 0.8rem;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_txt span {color: #fa3734; display: block; font-size: 0.8rem;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_btn {margin: 0 10px;}

	#mykonos .bl_tour .bl_tour_box .bl_tour_info_btn a {background:#0e81e0; border-radius: 5px; box-shadow: 0 3px 0 #0064dc; display: block; width:100%; text-align: center; color: #fff; font-weight: bold; padding: 3%; position: relative;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_btn a span {color: #fff;}
	#mykonos .bl_tour .bl_tour_box .bl_tour_info_btn a span:after {content: ""; display: block; width:2.7%; padding-top:3.6%; background: url(../img/arrow_right.png) no-repeat; background-size: 100%; position: absolute; top: 50%; right: 3%; transform: translate(0,-50%);}

/* 編集 */
	#mykonos .bl_tour .bl_btn {width:100%; margin: 0 auto; padding: 10px 0 0px;}	


	#mykonos .bl_tour .bl_btn {width: 100%;}
	#mykonos .bl_tour .bl_btn .btn_link span {padding: 5px 20px 0 20px; line-height: 130%;}






/***************************************
bl_style
****************************************/


#mykonos #bl_01.content_box {width: 93%; margin: -20px auto 20px; z-index: 10; position: relative;}
#mykonos #bl_01 img {padding-bottom: 10px;}

#mykonos #bl_01 h3  {color: #ff0000; font-weight: bold;}

#mykonos #bl_01 .note {padding-bottom: 3%;}
#mykonos #bl_01 .bord {background: #d2e1ff; padding: 6%;}

#mykonos .order_box { margin-bottom: 30px;}
#mykonos .order_box p {font-size: 10px; padding: 10px 0; margin-left: 20%;}
#mykonos #bl_02 dd img ,
#mykonos #bl_04 dd img {margin-bottom: 10px;}

#mykonos #bl_03 .bl_btn ,
#mykonos #bl_04 .bl_btn {margin-bottom: 30px;}

#mykonos #content_footer {background:#f5f5f5; padding: 3% 0;}
#mykonos #content_footer .txt_01 {padding-bottom: 6%;}
#mykonos #content_footer .txt_01 span {color:#f9504e; }
#mykonos #content_footer .content_footer_btn {width: 80%; margin: 0 auto 20px;}
#mykonos #content_footer .content_footer_btn a {background:#0e81e0; border-radius: 5px; box-shadow: 0 3px 0 #0064dc; display: block; width:100%; text-align: center; color: #fff;  padding: 3%; position: relative;}
#mykonos #content_footer .content_footer_btn a span:after {content: ""; display: block; width:2.7%; padding-top:3.6%; background: url(../img/tour_arrow_right.png) no-repeat; background-size: 100%; position: absolute; top: 50%; right: 3%; transform: translate(0,-50%);}

#mykonos #content_footer .bl_info {border: soli 2px #e9e9e9; background: #fff; padding: 3% 0;}
#mykonos #content_footer .bl_info h2 {background: #670033; color: #fff; font-weight: bold; width: 85%; border-radius: 50px; text-align: center; margin: 0 auto 10px; padding: 5px 0 3px;}
#mykonos #content_footer .bl_info p {padding-left: 6%;}

/***************************************
back_btn
****************************************/
#mykonos .content .btn_link.back_btn{margin: 30px auto; width: 90%;}
#mykonos .content .btn_link.back_btn a{display: block; border-radius: 5px; background: #0059EE; color: #fff; padding: 15px; position: relative;}
#mykonos .content .btn_link.back_btn a span:after {position: absolute; top: 50%; left: 10px; width: 10px; height: 10px; line-height: 10px; margin-top: -5px; content: "\f104"; font-family: FontAwesome;}