.sidebar_fixed {
  position: sticky;
  top: 60px;
}

h2 {
	padding-bottom: .5em;
	padding-left: .5em;
	border-bottom: 1px solid #0033CC;
    color: #3366CC;
}

h3 {
	padding-bottom: .5em;
    color: #3366CC;
}

h4 {
	padding-bottom: .5em;
	border-bottom: 1px solid #0033CC;
    color: #3366CC;
}

.bg-img {
  background-image: url("../img/top_img.jpg");
    background-repeat:  no-repeat;                         /* 画像の繰り返しを指定  */              
    background-position:center center;                     /* 画像の表示位置を指定  */
    width:100%;                                            /* 横幅のサイズを指定    */
    height:500px;                                          /* 縦幅のサイズを指定    */
}


  .text-red{
    color: #84154B;
  }

  .text-green{
    color: #004000;
  }

  .text-blue{
    color: #3366CC;
  }

  .text-white{
    color: #FFF;
  }

  .text-b{
	font-weight: bold;
  }

  .text16{
	font-size: 16px;
  }

  .text18{
	font-size: 18px;
  }

  .text20{
	font-size: 20px;
  }

  .text24{
	font-size: 24px;
  }

  .text28{
	font-size: 28px;
  }

  .t-middle{
	vertical-align: middle;
  }
  
  .bg-red{
     background-color: #84154B;
  }

  .bg-orange{
     background-color: #FFDFBF;
  }

  .bg-blue{
     background-color: #003366;
  }

  hr.style1 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border-color: #99CCCC;
  }

.title01{
  border-left:16px solid #84154B;  
  border-bottom:1px dashed #84154B;  
  padding:.1em .8em  
}  


.google-maps {
  position: relative;
  padding-bottom: 30%; // これが縦横比
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.mt0{margin-top:0px;}
.mb0{margin-bottom:0px;}
.ml0{margin-left:0px;}
.mr0{margin-right:0px;}

.mt10{margin-top:10px;}
.mb10{margin-bottom:10px;}
.ml10{margin-left:10px;}
.mr10{margin-right:10px;}

.ml15{margin-left:15px;}
.mr15{margin-right:15px;}

.mt20{margin-top:20px;}
.mb20{margin-bottom:20px;}
.ml20{margin-left:20px;}
.mr20{margin-right:20px;}

.mt30{margin-top:30px;}
.mb30{margin-bottom:30px;}
.ml30{margin-left:30px;}
.mr30{margin-right:30px;}

.mt50{margin-top:50px;}
.mb50{margin-bottom:50px;}
.ml50{margin-left:50px;}
.mr50{margin-right:50px;}



.pt10{padding-top:10px;}

.pt15{padding-top:15px;}
.pb15{padding-bottom:15px;}
.pl15{padding-left:15px;}
.pr15{padding-right:15px;}

.pt20{padding-top:20px;}
.pb20{padding-bottom:20px;}

.pt30{padding-top:30px;}
.pb30{padding-bottom:30px;}
.pl30{padding-left:30px;}
.pr30{padding-right:30px;}

.pl50{padding-left:30px;}

.l-height150{line-height: 150%;}
.l-height200{line-height: 200%;}

.box1 {
    padding: 0.1em 1em;
    margin: 1em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box1 p {
    margin: 1em 1em;
    padding: 0;
}

.box2 {
    padding: 0.5em 1em;
    margin: 1em 1.5em;
    font-weight: bold;
    background: #f0fff0;
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}

.box2-2 {
    padding: 0.5em 1em;
    margin: 2em 1.5em;
    font-weight: bold;
    background: #fdf5e6;
    border: solid 0px #228b22;/*線*/
    border-radius: 10px;/*角の丸み*/
    text-align: center;
}
.box2-2 p {
    margin: 0; 
    padding: 0;
}

.box3 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box3 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box3 p {
    margin: 0; 
    padding: 0;
}

table{
  width: 100%;
  border-collapse: collapse;
}

table tr{
  border-bottom: solid 2px white;
}

table tr:last-child{
  border-bottom: none;
}

table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #52c2d0;
  color: white;
  text-align: center;
  padding: 10px 0;
}

table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #52c2d0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

table td{
  text-align: left;
  width: 70%;
  background-color: #eee;
  padding: 10px 30px;
}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

.balloon1-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 15px;
  padding: 15px 10px;
  min-width: 150px;
  max-width: 150%;
  color: #555;
  font-size: 18px;
  background: #e0edff;
}

.balloon1-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 10px solid #e0edff;
}

.balloon2-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 15px;
  padding: 15px 10px;
  min-width: 150px;
  max-width: 150%;
  color: #555;
  font-size: 18px;
  background: #fffacd;
}

.balloon2-right:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -10px;
  border: 10px solid transparent;
  border-left: 10px solid #fffacd;
}

/* パソコンで見たときは"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; }
}
