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

File name:      style.css
Created:        2020.04.01
Style Info:     バリ島現地ガイド紹介ページ　CSS
----------------------------------------------------------- */



#local_guide {color:#000; line-height: 180%;}

#local_guide.content_wrapper {overflow: hidden; position: relative; background: #f5f3eb; z-index: 10; border-top: 3px solid #d13811;}
#local_guide a{text-decoration:none;}
#local_guide a:hover{opacity:.75;text-decoration:none;}
#local_guide a:active, #local_guide a:focus{outline:none;text-decoration:none;}
#local_guide img{vertical-align:bottom;width:100%;height:auto;}


#local_guide .content {width: 100%; max-width: 1140px; padding: 0; margin: 0 auto; background: #fff;}
#local_guide .main_contents {width: 100%; max-width: 950px; margin: 0 auto;}

#local_guide .container {max-width: 1140px; width: 100%; margin: 0 auto; padding: 0;}
#local_guide .container .fl_l {display: inline; float: left;}
#local_guide .container .fl_r {display: inline; float: right;}
#local_guide .font_y {font-family: 'Yellowtail', cursive;}

@media screen and (max-width:1170px) {
 	#local_guide .container {max-width: 1140px; width: 100%; margin: 0 auto; padding: 0 15px;}
	#local_guide .main_contents {padding: 0 15px;}

}
@media screen and (max-width:480px) {

}
@media screen and (max-width:767px) {
	#local_guide .content {background: #f5f3eb; padding: 0;}
}


#local_guide .bl_tit {max-width: 1140px; margin: 0 auto;}

/* --------------------------------------------------------- */
/* パンくず文字長調整 */
/* --------------------------------------------------------- */

#local_guide  .content_bg {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1800px;
    height: 167px;
    margin: 0 0 0 -900px;
    background: url(../img/content_bg.png) center bottom no-repeat;
}


/* ------------------------------------------------ */
/* 看板 */
/* ------------------------------------------------ */

#local_guide .visual {}
#local_guide .visual .page_lead {max-width: 840px; width: 73%; margin: 0 auto;  margin: -90px auto 55px;}
#local_guide .visual .page_lead p { font-size: 13px; }


@media screen and (max-width:1000px) {
	#local_guide .visual .page_lead {margin: -7.9vw auto 55px;}
	
}


@media screen and (max-width:767px) {
	#local_guide .visual .page_tit {margin-bottom: 15px;}
	#local_guide .visual .page_lead { margin: 0 0 30px; padding: 0 15px; width: 100%;}
}


/* ------------------------------------------------ */
/* 
/* ------------------------------------------------ */

#local_guide .guide_box {display: flex; justify-content: space-between; margin-bottom: 50px;}
#local_guide .guide_box:last-child {margin-bottom: 100px;}
#local_guide .guide_box:not(:last-child) {position: relative; padding-bottom: 110px;}
#local_guide .guide_box:not(:last-child):after { content: ""; background: url("../img/line_flower.png") no-repeat;background-position: center; background-size: 100%; display: block; width: 430px; height: 50px; position: absolute; bottom: 0; left: 50%; transform: translate(-50% , 0);}
#local_guide .guide_box .bl_pic { width: 51%;}
#local_guide .guide_box .bl_note {width: 43%;}

#local_guide .guide_box .guide_name {font-size: 38px; font-weight: bold; color: #d13811; margin-bottom: 35px;}
#local_guide .guide_box .guide_name span {font-family: 'Yellowtail', cursive; font-size: 40px; margin-left: 25px;}

#local_guide .guide_box .guide_com {border: solid 3px #d13811; border-radius: 10px; width: 100%; padding: 15px 15px 13px; margin-bottom: 30px; box-shadow:0 5px 5px #ccc; position: relative;background: #fff;}
#local_guide .guide_box .guide_com:before {content: "▼"; font-size: 20px; display: block; color: #d13811; width: 20px; height: 20px; position: absolute; bottom: -16px; left: 50%; transform: translate(-50%,0);text-shadow:0 5px 5px #ccc; }
#local_guide .guide_box .guide_com:after {content: "▼"; font-size: 20px; display: block; color: #fff; width: 20px; height: 20px; position: absolute; bottom: -10px; left: 50%; transform: translate(-50%,0);}
#local_guide .guide_box .guide_com p {color:#d13811; font-weight: bold;font-size: 16px;}

#local_guide .guide_box .guide_pic {box-shadow:0 0 10px #666; padding:10px;}


#local_guide .guide_box .guide_pro {width: 100%; margin-bottom: 40px; }
#local_guide .guide_box .guide_pro li:not(:last-child) { margin-bottom: 15px;}
#local_guide .guide_box .guide_pro span {font-weight: bold;}


#local_guide .guide_box .guest_com dt { width: 100%; border-radius: 10px 10px 0 0; background:#d13811 url("../img/icon_01.png") no-repeat; background-position: 25px center; background-size: 20px; color: #fff;  font-weight: bold; padding: 18px 15px 12px 60px; }
#local_guide .guide_box .guest_com dd {border: solid 3px #d13811; width: 100%; border-radius: 0 0 10px 10px; padding: 25px 20px 40px; background: #f5f3eb; }

#local_guide .guide_box .guide_pro li ,
#local_guide .guide_box .guest_com dt ,
#local_guide .guide_box .guest_com dd {font-size: 17px;}

#local_guide .guide_box:nth-of-type(2n) {flex-direction: row-reverse;}


#local_guide .bl_bana {background: #ffe5e5; text-align: center; padding: 35px 40px 40px;}
#local_guide .bl_bana .bl_tit {color:#ff4a4a; font-weight: bold; font-size: 24px; margin-bottom: 30px; position: relative;}
#local_guide .bl_bana .bl_tit:before {content: ""; display: block; width:100%; height: 2px; background-size: 12px 2px;background-image: linear-gradient(to right, #ff4a4a, #ff4a4a 8px, transparent 8px, transparent 12px);background-repeat: repeat-x; position: absolute; top:calc(50% - 1px);}
#local_guide .bl_bana .bl_tit span { background: #ffe5e5; position: relative; padding: 0 30px;}


#local_guide .bl_bana .bl_bana_wrap {display: flex; width:calc(100% - 40px); margin: 0 auto; justify-content: space-between; }
#local_guide .bl_bana .bl_bana_wrap .bana_01 {width: 62.7%}
#local_guide .bl_bana .bl_bana_wrap .img_01 {width:calc(37.3% - 20px);}

@media screen and (max-width:767px) {
	#local_guide .guide_box {flex-wrap: wrap; margin-bottom: 10vw;}
	#local_guide .guide_box .bl_pic ,
	#local_guide .guide_box .bl_note {width: 100%;}
	#local_guide .guide_box .bl_pic {margin-bottom: 20px;}
	#local_guide .guide_box .guide_name {font-size: 30px; margin-bottom: 15px;}
	#local_guide .guide_box .guide_name span {font-size: 33px;}

	#local_guide .guide_box .guide_com p {line-height: 1.6;}
	#local_guide .guide_box .guest_com dt {padding: 15px 15px 8px 50px; background-position: 20px center;}
	#local_guide .guide_box .guest_com dd {padding: 15px 15px 13px; line-height: 1.6; background: #fff;}
	#local_guide .guide_box .guide_pro {margin-bottom: 20px; }
	#local_guide .guide_box:last-child {margin-bottom: 9.3vw;}
	#local_guide .guide_box:not(:last-child) {position: relative; padding-bottom: 17vw;}
	#local_guide .guide_box:not(:last-child):after { width: 70vw; height: 8vw; }
	#local_guide .guide_box .guide_com p ,
	#local_guide .guide_box .guest_com dd ,
	#local_guide .guide_box .guide_pro li ,
	#local_guide .guide_box .guest_com dt ,
	#local_guide .guide_box .guest_com dd {font-size: 16px;}
	
	#local_guide .bl_bana {padding: 4vw 15px 2.4vw; border-top:solid 2px #ff4a4a;border-bottom:solid 2px #ff4a4a;}
	#local_guide .bl_bana .bl_tit {font-size: 4.8vw; margin-bottom: 4vw; }
	#local_guide .bl_bana .bl_tit:before {display: none;}
	#local_guide .bl_bana .bl_tit span {padding: 0; line-height: 1.4;}
	#local_guide .bl_bana .bl_bana_wrap {display: block; width: 100%;}
	#local_guide .bl_bana .bl_bana_wrap .bana_01 {width: 100%; margin-bottom: 3.33vw; border:solid 1px #ff4a4a;}
	#local_guide .bl_bana .bl_bana_wrap .img_01 {width:75vw; margin: 0 auto;}

	
}



/* -------------------------------------------------------- */
/* フリーオーダー (共通記述) */
/* -------------------------------------------------------- */
#local_guide .sec_contact {width: calc(100% - 40px);margin: 30px auto 0;}
#local_guide .contact_box {overflow:hidden;width: 100%; padding:20px 30px;border:solid 1px #c8c8c8; display: flex; justify-content: space-between; flex-wrap: wrap; text-align: left; background: #fff;}
#local_guide .contact_box p {font-size:14px;line-height:1.6;color:#999999;}
#local_guide .contact_box .tit {font-size:24px;margin-bottom:10px; color: #555; font-weight: bold;}
#local_guide .contact_box .btn_wrap {display:none;}
#local_guide .contact_box .bl_btn {margin-top:10px;width: 100%; height: 40px;}
#local_guide .contact_box .bl_btn a {width: 100%; height: 100%; background: #ff4a4a; font-size:16px; font-weight: bold;display: flex; justify-content: center; align-items: center; color: #ffffff; border-radius: 5px; position: relative;}
#local_guide .contact_box .bl_btn a:after {content:""; width: 8px; height: 8px; display: block; border-top: solid 1px #ffffff; border-right: solid 1px #ffffff; transform: rotate(45deg); position: absolute; right: 20px;}
#local_guide .contact_box .contact_tel {font-size:50px;line-height:1;margin:0 auto;letter-spacing:-.02em;color:#ff4a4a; text-align: center; font-family: Arial, Helvetica, "sans-serif";font-weight: bold;}
#local_guide .contact_box .contact_tel::before {font-family:'FontAwesome';font-size:80%;display:inline-block;margin-right:10px;content:'\f095';-webkit-transform:rotate(10deg);transform:rotate(10deg);}
@media (min-width: 769px), print {
  #local_guide .contact_box .wrap_01 {width:calc(100% - 370px);}
  #local_guide .contact_box .wrap_02 {width:370px;}
}
@media screen and (max-width: 768px) {
  #local_guide .sec_contact {padding:50px 0 ; margin: 30px auto; width: 100%;}
  #local_guide .contact_box {width: 100%; padding:30px 20px;text-align:center;}
  #local_guide .contact_box p {font-size:14px;margin-bottom:20px;}
  #local_guide .contact_box .tit {font-size:20px;}
  #local_guide .contact_box .wrap_01 {width: 100%;}
  #local_guide .contact_box .wrap_02 {max-width:400px;margin:0 auto;}
  #local_guide .contact_box .contact_tel {display:inline-block;}
}
@media screen and (max-width: 640px) {
  #local_guide .sec_contact {background: none; padding:0 0 ;}
  #local_guide .contact_box {margin-bottom:0;padding:20px 20px 10px;border:0;border:1px solid #dddddd;}
  #local_guide .contact_box .wrap_02 {display:none;}
  #local_guide .contact_box .tit {font-size:18px;}
  #local_guide .contact_box .btn_wrap {display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-box-align:stretch;align-items:stretch;-ms-flex-align:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:15px 0;}
  #local_guide .contact_box .btn_wrap li {width:49%;}
  #local_guide .contact_box .btn_wrap li a {font-size:14px;font-weight:bold;line-height:42px;position:relative;display:block;height:44px;text-align:center;text-decoration:none;border-radius:5px;}
  #local_guide .contact_box .btn_wrap li.tel a {padding-left:10px;color:#ff4a4a;border:2px solid #ff4a4a;background:#fff;}
  #local_guide .contact_box .btn_wrap li.tel a::before {font-family:'FontAwesome';font-size:20px;position:absolute;left:5px;content:'\f095';-webkit-transform:rotate(10deg);transform:rotate(10deg);}
  #local_guide .contact_box .btn_wrap li.order a {padding-right:10px;color:#fff;border:2px solid #ff4a4a;background:#ff4a4a;}
  #local_guide .contact_box .btn_wrap li.order a::before {font-family:'FontAwesome';font-size:14px;font-weight:bold;line-height:20px;position:absolute;top:50%;right:10px;height:20px;margin-top:-10px;content:'\f054';}
}