@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Oswald:wght@500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,900&display=swap');

/*
 * "Comfo
rtaa" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

全体の設定

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media only screen and (max-width: 750px) {
    img { max-width: 100%; }
}


/*基準を1rem=10pxに設定*/
html {
    font-size: 50.5%;
}

/*最小値:1.1rem → 可変（0.9rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.6rem*/
.font-size-S {
    font-size: clamp(1.1rem, calc(0.9rem + 0.625vw), 1.6rem);
}

/*最小値:1.2rem → 可変（1rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:1.7rem*/
.font-size-M {
    font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
}

/*最小値:1.6rem → 可変（2.2rem + 0.625vw（画面幅320px:2px, 800px:5px, 1200px:7.5px））→ 最大値:2.9rem*/
.font-size-L {
    font-size: clamp(2.4rem, calc(2.2rem + 0.625vw), 2.9rem);
}



body {
  color: #28292B;
  font-family: 'Roboto', 'Oswald', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  -height: 1.6;
}



a {
  color: #fffccc;
  text-decoration: none;
}

a:hover {
  opacity: 0.5;
  color: #fffccc;
}

.bg-darkgray {
  background-color: #a9a9a9;
}

.bg-dark2 {
  background-color: #333333;
}

.bg-wt {
  background-color: #ffffff;
}


.container,
.container-fulid {
  overflow: hidden;

}

/* 見出しを太字に */
h1,
h
+
2,
h3,
h4,
h5,
h6 {
  font-weight: bold !important;
}


@media (min-width: 800px){
  .sample{ display: none; }
}



/* 英字タイトルをWEBフォントに */
header a,

.display-3,

.circle-badges {
  font-family: 'Oswald' , 'Comfortaa', cursive;
}

.display-1,

.circle-badges {
  font-family: 'Oswald' , 'Comfortaa', cursive;
}

.lead,
.display-4, {
	font-family: 'Roboto', 'Oswald', 'Noto Sans JP', sans-serif;
}


/* ------------------------------
トップ画像
--------------------------------- */

/* ロゴマーク */
.mark-ap {
	left:2%;
	top: 5%;
	z-index: 999;
	border-radius: 50%;
	height: 240px;
	width: 240px;
	background:#fff;
}
/* ロゴマークの中身 */
.mark-ap img {
	top: 10%;
	left: 10%;
}

/* キャッチコピー */
.r-txt {
	position: relative; 
	left:60%;
	top: 5%;
	z-index: 999;
	display: flex;
	font-family: 'IPA Mincho', serif;
	color:#fff;
}

.main-txt {
  right: 5%;
  bottom:5%;
  background-color: rgb(255 255 255 / 0.8);
  padding: 30px;
}



/* ------------------------------
1day
--------------------------------- */


/* 三角形 */
.triangle {
  position: relative;
  left:0%;
  top: 0%;
  z-index: 999;
  width: 500px;
  height: 500px;
  background-color: #4CAF50; 
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%); /* 左上直角の二等辺三角形 */
}

/* 三角形の上の斜め文字 */
.rotated-text {
  position: absolute; /* 絶対位置で配置 */
  top: 45%;
  left: 8%;
  transform: rotate(-45deg); /* 45度回転 */
  transform-origin: left top; /* 左上を基準に回転 */
  font-size: 30px;
  font-weight: bold; /* 太字 */
}

.rotated-text2 {
  position: absolute; /* 絶対位置で配置 */
  top: 52%;
  left:8%;
  transform: rotate(-45deg); /* 45度回転 */
  transform-origin: left top; /* 左上を基準に回転 */
  font-size: 80px;
  font-weight: bold; /* 太字 */
}


/* 24時間料金 */
.mark-24 {
  position: relative; /* relativeにして内部の要素を絶対位置で配置できるようにする */
  right:5%;
  top: 5%;
  z-index: 999;
  height: 240px;
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ロゴマークの中身 */
.mark-24 img {
  height:100%;
  width: 100%;
}







.mark2 {
  position: relative; /* relativeにして内部の要素を絶対位置で配置できるようにする */
  right:5%;
  top: 50px;
  z-index: 999;
  height: 240px;
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ロゴマークの中身 */
.mark2 img {
  height:100%;
  width: 100%;
}


.mark3 {
  position: relative; /* relativeにして内部の要素を絶対位置で配置できるようにする */
  right:5%;
  top: 50px;
  z-index: 999;
  height: 240px;
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ロゴマークの中身 */
.mark2 img {
  height:100%;
  width: 100%;
}




/* ロゴマーク */
.logo-mark {
  left:5%;
  top: 100px;
  z-index: 999;
  border-radius: 50%;
  height: 240px;
  width: 240px;

}

/* ロゴマークの中身 */
.logo-mark img {
  top: 10%;
  left: 10%;
}



.logo-mark1 {
  position: relative; /* relativeにして内部の要素を絶対位置で配置できるようにする */
  right:50%;
  top: 50px;
  z-index: 999;
  border-radius: 50%;
  height: 240px;
  width: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 快適宣言 */
.kaiteki-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: rgb(255 255 255 / 0.8);
}




/* 快適宣言　マーク */
.kaiteki-mark {
  top: 2%;
  left: 5%;
  z-index: 999;
  border-radius: 50%;
  height: 240px;
  width: 240px;

}

/* 快適宣言　マーク　の中身 */
.kaiteki-mark img {
  top: 10%;
  left: 100%;
}

.image-container {
  position: relative;
  display: inline-block;
}

.image-container img {
  display: block;
  width: 100%; /* 必要に応じてサイズ調整 */
}

.text-overlay {
  background-color: rgba(255, 255, 255, 0.7); /* 背景の透明な白 */
  padding: 10px 20px;
  border-radius: 5px; /* 角を丸くするオプション */
  color: #333; /* テキストの色 */
  font-size: 16px; /* 必要に応じて調整 */
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 軽い影をつけて立体感を追加（オプション） */
}


@font-face {
  font-family: 'IPA Mincho';
  src: url('/path/to/ipam.ttf') format('truetype');
}



.logo-text {
  position: absolute;
  color: #333; /* テキスト色 */
  font-weight: bold; /* テキストの太さ */
}



.
main-txt2 {
  right: 40%;
  bottom: 30px;
  background-color: rgb(255 255 255 / 0.8);
  padding: 50px;
}

.main-txt-3 {
  right: 5%;
  bottom: 50%;
  background-color: rgb(255 255 255 / 0.8);
  padding: 50px;
}

.main-txt4 {
  right: 5%;
  bottom: 15px;
  background-color: rgb(255 255 255 / 0.8);
  padding: 50px;
}


.intro {
  position: relative;
  padding: 0;
  background-color:#F4E3D3;
  color: #fff;
}


.intror {
  position: relative;
  padding: 0;
  background-color:#AD002D;
  color: #fff;
}

.introo2 {
  position: relative;
  padding: 0;
  background-color:#E6E0D5;
  color: #212529;
}

.introo {
  position: relative;
  padding: 0;
  background-color:#FFF9EE;
  color: #212529;
}


.introb {
  position: relative;
  padding: 0;
  background-color:#212529;
  color: #fff;
}


.accsess a {
	color: red;
	font-size: 1.5rem;
  font-weight: bold;
  font-family: 'Roboto', 'Oswald', 'Noto Sans JP', sans-serif;
}



/* 普通 */
.access {
  position: relative;
  padding: 0;
  background-color: #fff3b8;
}



/* コピーライト*/
.copy {
  position: relative;
  padding-top: 5%;
  background-color: #333333;
}




/* ------------------------------
地図サイズ
--------------------------------- */
iframe {
  display: block;
  width: 100%;
  height: 600px;
}


/* ------------------------------
フッター
--------------------------------- */
.stitch {
  padding:2.5rem !important;
  color: #565656;
  background-color: #212529;
}

.stitch p {
  margin-bottom: .5rem;
}

/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

トップページ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* トップ画像 */
.top-image {
  background-image: url("../img/cafe-image.jpg") ;
  background-size: cover;
  background-position: center center;
  height: 600px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}


/* 画像② */
.top-image2 {
  background-image: url("../img/cafe-image2.jpg");
  background-size: cover;
  background-position: center center;
  height: 900px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}


/* 快適宣言　画像② */
.top-kaiteki {
  background-image: url("../img/cafe-image2.jpg");
  background-size: cover;
  background-position: center center;
  height: 900px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}


/* 快適宣言　文言（親） */
.parent {
  position: relative; /* 子要素の基準を親要素に設定 */
  background-size: cover;
  background-position: center center;
  height: 900px;
  background-image: url("../img/cafe-image2.jpg");
}

/* 快適宣言　文言（子） */
.child {
  position: absolute;
  left: 50%; /* 横中央揃え */
  transform: translateX(-50%); /* 中央揃え調整 */
  bottom: 1%; /* 画面の下から の位置に配置 */
  padding: 20px; /* 内側の余白 */
  text-align: center; /* テキスト中央揃え */
}


/* 画像③ */
.top-image3 {
  background-image: url("../img/cafe-image3.jpg");
  background-size: cover;
  background-position: center center;
  height: 600px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}


/* 画像④ */
.top-image4 {
  background-image: url("../img/cafe-image4.jpg");
  background-size: cover;
  background-position: center center;
  height: 600px;
  box-shadow: 0px 5px 6px 0px #e2e2e2;
  border-radius: 0;
}

/
* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

メディアクエリ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */



/* 小デバイス（横向きモバイル, 768px 未満）
============================================== */
@media screen and (max-width: 767.98px) {



/* キャッチコピー */
.r-txt {
	position: relative; 
	left:3%;
	top: 48%;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'IPA Mincho', serif;
}

}
/* END */


/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
******************************************
****    縦向きモバイル, 576px 未満）
******************************************
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media screen and (max-width: 575.98px) {
	.display-3,
	.display-4 {
	font-size: 2rem;
	}

	.top-image {
	background-image: url("../img/cafe-image-s1.jpg") ;
	}
	.top-image2 {
	background-image: url("../img/cafe-image-s2.jpg") ;
	}
	.top-image3 {
	background-image: url("../img/cafe-image-s3.jpg") ;
	}
	



/* ロゴマークを小さく設定 */
	.mark-ap {
	left:5%;
	top:5%;
	z-index: 999;
	border-radius: 50%;
	height: 100px;
	width: 100px;
	}
	.mark-ap img {
	top: 0%;
	left:0%;
	}


/* ロゴマークを小さく設定 */
	.mark {
	left:10%;
	top:30px;
	z-index: 999;
	border-radius: 50%;
	height: 100px;
	width: 100px;
	}
	.mark img {
	top: 25%;
	left: 25%;
	}


	.access {
	margin:15% 0;
	}
	.stitch img {
	width:100%;
	}


/* キャッチコピー */
.r-txt {
	position: relative; 
	left:3%;
	top: 48%;
	z-index: 999;
	display: flex;
	font-family: 'IPA Mincho', serif;
	color:#fff;
}

/* 三角形 */
.triangle {
  position: relative;
  left:0%;
  top: 0%;
  z-index: 999;
  width: 180px;
  height: 180px;
  background-color: #4CAF50; 
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 100% 0%, 0% 100%); /* 左上直角の二等辺三角形 */
}

/* 三角形 上の文字 */
.rotated-text {
  position: absolute; /* 絶対位置で配置 */
  top: 46%;
  left: 4%;
  transform: rotate(-45deg); /* 45度回転 */
  transform-origin: left top; /* 左上を基準に回転 */
  font-size: 12px;
  font-weight: bold; /* 太字 */
}

/* 三角形 下の文字 */
.rotated-text2 {
  position: absolute; /* 絶対位置で配置 */
  top: 55%;
  left: 8%;
  transform: rotate(-45deg); /* 45度回転 */
  transform-origin: left top; /* 左上を基準に回転 */
  font-size: 30px;
  font-weight: bold; /* 太字 */
}


/* 24h */
.mark-24 {
	right:10%;
	top:0%;
	z-index: 999;
	border-radius: 50%;
	height: 100px;
	width: 100px;
}

.mark-24 img {
	top: 25%;
	left: 25%;
}


/* 快適宣言　マーク */
.kaiteki-mark {
  top: -6%;
  left: 5%;
  z-index: 999;
  border-radius: 50%;
  height: 100px;
  width: 100px;

}

/* 快適宣言　マーク　の中身 */
.kaiteki-mark img {
  top: 10%;
  left: 100%;
}


	.access {
	margin:15% 0;
	}
	.stitch img {
	width:100%;
	}



	.access {
	margin:15% 0;
	}
	.stitch img {
	width:100%;
	}



	/* ロゴマークを小さく設定 */
	.logo-mark {
	left:10%;
	top:30px;
	z-index: 999;
	border-radius: 50%;
	height: 100px;
	width: 100px;
	}
	.logo-mark img {
	height:30%;
	width: 30%;
	}
	.access {
	margin:15% 0;
	}
	.stitch img {
	width:100%;
	}


	/* 2 */
	.logo-mark2 {
	right:5%;
	top:10px;
	z-index: 999;
	border-radius: 50%;
	height: 100px;
	width: 100px;
	}
	.logo-mark img {
	top: 25%;
	left: 25%;
	}
	.access {
	margin:15% 0;
	}
	.stitch img {
	width:100%;
	}


}


#wrap {
    position: relative;
	}

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700');


/*PAGE TOPボタン追加*/
#pagetop {
	display:in-block;
	position:fixed;
	bottom:0;
	right:0;
	}
#pagetop a {
	padding:20px 10px;
	display:block;
	background:#008b8b;
	color:#fff;
	text-align:center;
	}


.tbl01 {
	text-align: center;
	border-collapse: collapse;
	border-spacing: 0;
	background: #E9E3DD;
	}
.tbl01 p{
	display: in-block;        /* インラインブロック要素にする */
	padding: 10px 0 0 0 ;
	font-weight: bold;
	}
.tbl01 tr:nth-child(2n+1) {
	background: E4DEBE;
	}
.tbl01 th {
	padding: 10px;
	border: solid 1px #ffffff;
	background: #2D2A29;
	color: #ffffff;
	vertical-align: bottom;
	}
.tbl01 td {
	padding: 10px;
	border: solid 3px #ffffff;
	color: #000;
	}
.tbl-b th {
	color: #fff;
	padding: 0.6em;
	}




.design10 {
 text-align: center;
 border-collapse: collapse;
 border-spacing: 0;
}
.design10 p{
	display: in-block;        /* インラインブロック要素にする */
	padding: 10px 0 0 0 ;
	font-weight: bold;
	}
.design10 th {
 padding: 10px;
 background: #333333;
 color: #fff;
}
.design10 td {
 padding: 10px;
 border-bottom: solid 1px #778ca3;
}





.tbl-b tr:nth-child(odd) th {
	background: #141414;
	}
.tbl-b tr:nth-child(odd) td {
	background: #141414;
	}
.tbl-b td {
	padding: 1.2em;
	}

@media screen and (max-width:480px) {
	.tbl-b {
	width: 100%;	
	}
	.tbl-b th,
	.tbl-b td {
	border-bottom: none;
	display: block;
	width: 100%;
	padding:1.0em;
  	}
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}



.u {
	padding-bottom: 8px;
	border-bottom: 2px solid #000;
	display: in-block;
}

.uy {
	background: ar-gradient(transparent 60%, yellow 30%);
	display: in-block;
}


.c1 {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



@media screen and (max-width: 768px) {
  .box_map{
    position: relative;
    width: 100%;
    padding: calc(500 / 560 * 100%) 0 0;
  border: 3px solid #333333;
  }
  .box_map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}





header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}

#container {
  padding-top: 45px;
}


---------------------------------------------
services
---------------------------------------------
*/ 

section.services {
  margin-top: 90px;
}

.services .service-item {
  border-radius: 5px;
  padding: 5px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
}

.services .service-item:hover i {
  margin-top: 15px;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

.services .service-item i {
  transition: all .5s;
  float: left;
  font-size: 64px;
  color: #43ba7f;
  margin-bottom: 30px;
  margin-right: 30px;
}



/* アクセス電車
-------------------------------------*/

        .box2 {
            border: 1px solid black;
  	background-color:#E6E0D5;
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .box3 {
            border: 1px solid black;
  	background-color:#B4AEA3;
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
            font-weight: bold;
            margin-bottom: 10px;
        }

	.line {
            width: 2px;
            height: 50px;
            background-color: black;
        }
        .line-container {
            display: flex;
            align-items: center; /* 縦線とテキストを中央揃え */
            margin-bottom: 10px; /* 各行の間の余白 */
            margin-left: 50px; /* 縦線の右に配置 */
        }
        .line-text {
            margin-left: 30px; /* 縦線の右に配置 */
            font-size: 14px;
            color: black;
        }




/* 近隣のおすすめ
-------------------------------------*/
        .custom-table td, .custom-table th {
            background-color: #E6E0D5 !important; /* 背景色を強制的に適用 */
            border-top: 1px solid black; /* 横線のみ表示 */
            border-left: none;
            border-right: none;
            border-bottom: none;
        }






/* 角丸 */
.r-d15 {
  border-radius: 15px; /* 角を丸くする */
}







.ribon h2 {
    position: relative;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    color: #000;
    font-weight: bold;
    text-align: center;
}

.ribon h2::before,
.ribon h2::after {
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border-color: #fff transparent;
    border-style: solid;
    content: '';
}

.ribon h2::before {
    left: -15px;
    border-width: 25px 0px 25px 15px;
}

.ribon h2::after {
    right: -15px;
    border-width: 25px 15px 25px 0px;
}



.mi-01 h2 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
}

.mi-01 h2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}


.mi-02 h2 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #2589d0;
  color:#fff;
}

.mi-02 h2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}



.hd-01 {
    display: flex;
    justify-content: start;
    align-items: center;
    position: relative;
    padding: 1em 1em;
    overflow: hidden;
    border: 3px solid #2589d0;
    border-radius: 5px;
    color: #333333;
}

.hd-01:before {
    position: absolute;
    top: -70%;
    left: -50px;
    z-index: -1;
    transform: rotate(25deg);
    width: 100px;
    height: 200%;
    background-color: #2589d0;
    content: '';
}

.hd-01 span {
    margin-right: 2em;
    color: #fff;
    font-size: 1.1em
}

.hd-02 {
  position: relative;
  overflow: hidden;
  padding: 1.5em;
  padding-left: 8em; /* 親要素の左余白を増やす */
  border: solid 2px #2589d0;
  background-color: rgba(255, 255, 255, 0.8); /* 背景が白で透明50% */
  text-align: left; /* テキストを左寄せ */
}

.hd-02:before {
  position: absolute;
  content: '';
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  transform: rotate(25deg);
  background: #2589d0;
}

.hd-02 span {
  position: absolute;
  left: 2em; /* 番号を右に移動 */
  font-size: 1.2em;
  color: #fff;
  z-index: 1;
}



.hd-9 {
    position: relative;
    padding: 1.2em 1.7em;
    border-radius: 10px;
    background-color:#fff100;
    color: #000;
}

.hd-9::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 30px;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-top: 20px solid #fff100;
}



.hd-8 {
    display: inline-block;
    position: relative;
    padding: .5em 1.9em .5em .7em;
    margin: 0 1em 0 0;
    border-radius: 50px 0 0 50px;
    background-color: #2589d0;
    color: #fff;
}

.hd-8::before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 20px;
    border-radius: 50%;
    background: #fff;
}


.hd-2{
  padding: 1em;
  border-left: 10px solid  #2589d0;
  background: #eee;

}


.balloon-bottom-border{
  position: relative;
  background-color: #fff100;
  border: 3px solid #333333;
  margin-bottom: 2em;
}

.balloon-bottom-border::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #333333;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

.balloon-bottom-border::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -11px;
  border-top: 15px solid #fff100;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}



.balloon2-bottom-border{
  position: relative;
  background-color: #fff;
  border: 3px solid #333333;
  margin-bottom: 2em;
}

.balloon2-bottom-border::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -15px;
  border-top: 15px solid #333333;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}

.balloon2-bottom-border::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 20px;
  bottom: -11px;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
}




.box29 {
    background: #dcefff;
  border:2px solid #2589d0;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #2589d0;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}


  .box_map{
    position: relative;
  border: 3px solid #333333;
  }



/* END */