@charset "utf-8";
/* CSS Document */

.content-colum {width:800px; margin: 10px 0; font-size:16px; line-height:190%;}

.colum-a {margin-top: 80px; margin-bottom:100px;}
.colum-a h2 {font-size:28px!important; background-color:#fff!important; margin-top:20px!important;}
.colum-a h3 {font-size:22px; color:#C00;}
.colum-a h4 {font-size:18px; color:#d96b09; margin-top:70px; margin-left:10px; margin-bottom:0px;}
.colum-a p {margin-top:15px; margin-left:15px;}
.colum-a p.bold {margin-top:30px; margin-left:5px; font-weight:bold;} /*小見出しの中のポイント時に使用*/
.colum-a p.margin {margin-top:30px;}
.colum-a p.img-margin{margin:100px 0 0;}

.colum-title h3 {font-size:16px; color:#000; margin:30px 10px 0; font-weight:normal;}

.colum-end {margin-top: 80px; margin-bottom:100px;}
.colum-end p {margin-top:15px; margin-left:15px;}


.marker {
 background: linear-gradient(transparent 40%, #ffff7f 0%);
font-weight: bold; 
}


.colum-a ol {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  border: solid 2px #5c9ee7;
  margin:20px 10px 50px; /*上下左右のスペース*/
}
.colum-a ol li {
  position: relative;
  padding: 0.5em 0.5em 0.5em 35px;
  border-bottom: dashed 1px silver;
  line-height: 1.5em;
}
.colum-a ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #5c9ee7;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;/*円にする*/
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.colum-a ol li:after {/*吹き出しのちょこんと出た部分*/
  content: '';
  display: block;
  position: absolute;
  left: 20px;/*左からの位置*/
  height: 0;
  width: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #5c9ee7;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}



.list-check ul {
  list-style-type: none;
}
.list-check li {
  position: relative;
  line-height: 1.8;
  left: 4em;
}
.list-check li::after {
  content: '';
  display: block;
  position: absolute;
  top: .5em;
  left: -1.5em;
  width: 10px;
  height: 5px;
  border-left: 3px solid #9c9c9c;
  border-bottom: 3px solid #9c9c9c;
  transform: rotate(-45deg);
}


.list-point ul {
  border: solid 2px #ffb03f;
  padding: 0 0.5em;
  position: relative;
  margin:25px 20px;
}

.list-point ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 1.4em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}

.list-point ul li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 0.5em; /*左端からのアイコンまで*/
  color: #ffb03f; /*アイコン色*/
}

.list-point ul li:last-of-type {
  border-bottom: none;
}



.item-box1{
    position: relative;
    background: #fff0cd;
    box-shadow: 0px 0px 0px 5px #fff0cd;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
	margin:20px 50px 0; /*上下左右のスペース*/
}
.item-box1:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.item-box1 p {
    margin: 5; 
    padding: 0;
}

.item-box2{
    position: relative;
    background: #dadada;
    box-shadow: 0px 0px 0px 5px #dadada;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
	margin:20px 50px 0; /*上下左右のスペース*/
}
.item-box2:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #5c5c5c #fff #5c5c5c;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.item-box2 p {
    margin: 5; 
    padding: 0;
}

.item-box3 {
 position: relative;
 margin: 3em auto;
 padding: 4.5em 2em .8em 0.8em;
 width: 87%; /* ボックス幅 */
 border-style: solid;
 border-width: 10px 0 0 0;
 border-color: #776124; /* 枠の色 */
 background-color: #f3efe3; /* 背景色 */
 color: #4f4f4f; /* テキスト色 */
 box-shadow: 0 0 3px #999; /* 影の色 */
}
.item-box3-title{
 position: absolute;
 top: 35px;
 left: 15px;
 background-color: #f3efe3; /* タイトル背景色 */
 color: #3f3d37; /* タイトル色 */
 font-size: 1.1em;
 font-weight: bold;
 border-style: none none double;
 border-color: #907b6e; /*タイトル下線 */
 border-width: 3px;
}
.btn-item {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #fff!important;
  background: #776124;
  transition: .4s;
  margin:0 5px;
}

.btn-item:hover {
  background: #95792d;
  color: #fff;
}



/* 問い合わせ・リンクボタン*/
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: auto;
	height: 60px;
	color: #333;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
}
.btn a:hover {
	color: #f2f2f2;
}
.colum-btn a {
	background-color: #c9bea3;
	border: 1px solid transparent;
	border-radius: 35px;
}

.colum-btn a::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	width: 100%;
	height: 100%;
	background-color: transparent;
	border: 1px solid #333;
	border-radius: 35px;
}

.colum-btn a:hover {
	background-color: #a6966c;
	color: #fff!important;
}

/* アイコン */
i{
	margin:0 0 3px 5px;
}




@media only screen and (max-width: 750px) {
    img { max-width: 100%; }
	.content-colum {width:100%; margin: 10px 0; font-size:100%!important; line-height:150%;}
	.colum-a h2 {font-size:120%!important; background-color:#fff!important; margin-top:20px!important;}
	.colum-a h3 {font-size:100%; color:#C00;}

}