/*-------------------------------------------------------------------
	
	レイアウト

-------------------------------------------------------------------*/
.right {
	text-align: right;
	}
.left {
	text-align: left;
	}
.center {
	margin:0 auto!important;
	}
.center_text {
	text-align:center;
	}
.f_left {
	float:left;
}
.f_right {
	float: right;
}
.font-b {
	font-weight: bold;
}

.font-40 {
	font-size: 4.0rem;
	line-height: 1.4;
	font-weight: bold;
}
.font-38 {
	font-size: 3.8rem;
	line-height: 1.4;
	font-weight: bold;
}
.font-30 {
	font-size: 3.0rem;
	line-height: 1.4;
	font-weight: bold;
}
.font-24 {
	font-size: 2.4rem;
	line-height: 1.4;
	font-weight: bold;
}
.font-22 {
	font-size: 2.2rem;
	line-height: 1.4;
	font-weight: bold;
}
.font-20 {
	font-size: 2rem;
	line-height: 1.2;
	font-weight: bold;
}
.font-18 {
	font-size: 1.8rem;
	line-height: 1.6;
	font-weight: bold;
}
.font-16 {
	font-size: 1.6rem;
	line-height: 1.4;
}
.font-14 {
	font-size: 1.4rem;
	line-height: 1.8;
}
.font-12 {
	font-size: 1.2rem;
	line-height: 1.4;
}

.mincho {
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-style: italic;
}


.bg-white {
	background-color:#fff;
}
.bg-flow {
	background-color:#f4fffb;
}
.bg-gd-1 {
  background: -moz-linear-gradient(left, #bce0f3, #c6f7ec);
  background: -webkit-linear-gradient(left, #bce0f3, #c6f7ec);
  background: linear-gradient(to right, #bce0f3, #c6f7ec);
  /*グラデーション以外は省略*/
}
.bg-gd-2 {
  background: -moz-linear-gradient(left, #c6f7ec, #bce0f3);
  background: -webkit-linear-gradient(left, #c6f7ec, #bce0f3);
  background: linear-gradient(to right, #c6f7ec, #bce0f3);
  /*グラデーション以外は省略*/
}
.bg-gd-slide {
  background: -moz-linear-gradient(left, #4ee6c4, #2a96db);
  background: -webkit-linear-gradient(left, #4ee6c4, #2a96db);
  background: linear-gradient(to right, #4ee6c4, #2a96db);
  /*グラデーション以外は省略*/
}

}


.f-bk {
	color:#422b09;
}
.f-white {
	color:#fff;
}
.f-green {
	color: #4ee6c4;
}
.f-blue {
	color:#2a96db;
}







/*マージン設定　----------------------------------------------------------*/
.mb15 {
	margin-bottom:15px;
	}
.mb20 {
	margin-bottom:20px;
	}
.mb30 {
	margin-bottom:30px;
	}
.mb40 {
	margin-bottom:40px;
	}
.mb60 {
	margin-bottom:60px;
	}
.mb100 {
	margin-bottom:100px;
	}
.mt20 {
	margin-top:20px;
	}
.mt40 {
	margin-top:40px;
	}
.mt50 {
	margin-top:50px;
	}
.mt60 {
	margin-top:60px;
	}
.mt80 {
	margin-top:80px;
	}
.mt100 {
	margin-top:100px;
	}
.pt05 {
	padding-top:5px;
	}
.pt10 {
	padding-top:10px;
	}
.pt20 {
	padding-top:20px;
	}
.pt30 {
	padding-top:30px;
	}
.pt40 {
	padding-top:40px;
	}
.pt60 {
	padding-top:60px;
	}
.pt80 {
	padding-top:80px;
	}
.pt100 {
	padding-top:100px;
	}
.pt160 {
	padding-top:160px;
	}
.pb05 {
	padding-bottom:5px;
	}
.pb10 {
	padding-bottom:10px;
	}
.pb20 {
	padding-bottom:20px;
	}
.pb30 {
	padding-bottom:30px;
	}
.pb40 {
	padding-bottom:40px;
	}
.pb60 {
	padding-bottom:60px;
	}
.pb100 {
	padding-bottom:100px;
	}
.pr15 {
	padding-right:15px;
	}
.pl15 {
	padding-left:15px;
	}
.ml30 {
	margin-left:30px;
	}
.ml40 {
	margin-left:40px;
	}




@media (min-width:768px){
.box {
 margin: 0 auto!important;
 background-color: #fff;
 padding: 40px 40px;
 border-radius: 10px;
box-shadow: 0 0 8px #0899af;
}
.box-2 {
 margin: 0 auto!important;
 background-color: #fff;
 border: solid #000000 1px;
 padding: 20px 20px;
 border-radius: 10px;
}
}

@media (max-width:767px){
.box {
 margin: 0 auto!important;
 background-color: #fff;
 padding: 20px 20px;
 border-radius: 10px;
box-shadow: 0 0 8px #0899af;
}
.box-2 {
 margin: 0 auto!important;
 background-color: #fff;
 border: solid #000000 1px;
 padding: 20px 20px;
 border-radius: 10px;
}
}

.box-link {
 background-color: #57c8d3;
 color: white;
 text-align: center;
 padding: 10px 10px;
 border-radius: 10px;	
	}

.img-fluid {
	width:100%;
	height:auto;
	vertical-align: bottom!important;
	}


/*　SP/PC 個別設定　*/
@media only screen and (min-width:768px) {
.title {
	font-size: 34px;
	line-height: 1.6;
}
.title-2 {
	font-size: 20px;
	font-weight: bold;
	line-height: 1.6;
}
.space {
	padding: 80px 0;
	}
.space-top {
	padding-top:140px ;
	}
.icon {
	width: 70px;
	}
.title-line {
	width: 80px;	
	}
.tri-line {
	width: 60px;	
	}
}

@media only screen and (max-width:767px) {
.title {
	font-size: 26px;
	line-height: 1.4;
}
.title-2 {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
}
.space {
	padding: 50px 0;
	}
.space-top {
	padding-top:80px ;
	}
.icon {
	width: 60px;
	}
.title-line {
	width: 120px;	
	}
.tri-line {
	width: 100px;	
	}
.space-sp {
	margin-botom: 20px;
	}
}



/*以下コンテンツ----------------------------------------------------------*/

/*　メイン　*/
.container-main {
    width: 100%;
	margin: 0 auto;
  }
.container-main-2 {
    width: 650px;
	margin: 0 auto!important;
	padding: 0 20px;
  }
.container-main-2-2 {
    width: 650px;
	margin: 0 auto;
  }
.container-main-3 {
    width: 500px;
	margin: 0 auto;
	padding: 0 20px;
  }


@media only screen and (max-width:767px)  {
  .container-main {
    width: 100%;
	margin: 0 auto;
	padding: 0 20px;
  }
  .container-main-2 {
    width: 100%;
	margin: 0 auto;
	padding: 0 20px;
  }
  .container-main-2-2 {
    width: 100%;
	margin: 0 auto;
	padding: 0 20px;
  }
  .container-main-3 {
    width: 80%;
	margin: 0 auto; 
	padding: 0 20px;
  }
}


/*　カラムコンテンツ　*/
.container-flex {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.container-flex-100 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.column-left-2 {
  width: 55%;
  padding: 20px 15px;
  box-sizing: border-box;
}
.column-right-2 {
  width: 45%;
  padding: 20px 15px;
  box-sizing: border-box;
}


.column-left-2-2 {
  width: 50%;
  padding: 20px 25px;
  box-sizing: border-box;
}
.column-right-2-2 {
  width: 50%;
  padding: 15px 25px;
  box-sizing: border-box;
}


.column-1 {
  width: 25%;
  padding: 10px 10px;
  box-sizing: border-box;
}
.column-2 {
  width: 25%;
  padding: 10px 10px;
  box-sizing: border-box;
}
.column-3 {
  width: 25%;
  padding: 10px 10px;
  box-sizing: border-box;
}
.column-4 {
  width: 25%;
  padding: 10px 10px;
  box-sizing: border-box;
}


.column-left-3 {
  width: 33.33%;
  padding: 10px 10px;
  box-sizing: border-box;
}
.column-center-3 {
  width: 33.33%;
  padding: 10px 10px;
  box-sizing: border-box;
}
.column-right-3 {
  width: 33.33%;
  padding: 10px 10px;
  box-sizing: border-box;
}


@media only screen and (max-width: 767px) {
.container-flex {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  }
.container-flex-100 {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
  .column-left-2 {
    width: 100%;
    padding: 10px 0px;
  }
  .column-right-2 {
    width: 100%;
    padding: 10px 0px;
  }
	
  .column-left-2-2 {
    width: 100%;
    padding: 0px;
  }
  .column-right-2-2 {
    width: 100%;
    padding: 0px;
  }
	
.column-1 {
  width: 100%;
  padding: 10px 5px;
}	
.column-2 {
  width: 100%;
  padding: 10px 5px;
}	
.column-3 {
  width: 100%;
  padding: 10px 5px;
}	
.column-4 {
  width: 100%;
  padding: 10px 5px;
}	

  .column-left-3 {
    width: 100%;
    padding: 5px;
  }
  .column-center-3 {
    width: 100%;
    padding: 5px;
  }
  .column-right-3 {
    width: 100%;
    padding: 5px;
  }
}


/*　見出しライン　*/
.ti-line {
  border-bottom: solid 4px #74e2ed;
  position: relative;
}

.ti-line:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 4px #57c8d3;
  bottom: -4px;
  width: 40%;
}


.tri-line {
  border-bottom: solid 4px #41a0dd;
  position: relative;
}

.tri-line:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 4px #a1d8fb;
  bottom: -4px;
  width: 30%;
}


/*　背景画像　*/
@media (min-width:768px){
.mv {
background-image: url('../imgs/bg-mv.jpg');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
	}	
}

@media (min-width:768px){
.trouble {
background-image: url('../imgs/bg-trouble.jpg');
background-position: center top;
background-size: contain;
background-repeat:repeat-y;
	}	
}

.specialist {
background-image: url('../imgs/bg-specialist.jpg');
background-size: cover;
background-position: center top;
	}


/*　金額　*/
table {
  margin: 10px auto;
	width: 100%;
}
.tbl-r02 th {
  background: #57c8d3;
  color: #fff;
  padding: 10px;
}
.tbl-r02 td {
 background: #E9E9E9;
padding: 10px;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    width: 100%;
  }
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {

    display: block;
    width: 100%;
  }
}




/*　横スクロール　*/
.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 5px;/*スライド左右の余白調整*/
}



/*　角丸　見出し　*/
.circle {
    margin-bottom: 0.2rem;
    padding: 1rem;
    color: #fff;
    background-color: #f9a877;
    border-radius: 5rem;
    text-align: center;
}


/*　上下線　見出し　*/
.access {
    padding: 0.8rem 0;
    margin-bottom: 0.2rem;
    border-top: 3px solid #63b7ed;
    border-bottom: 3px solid #63b7ed;
    font-weight: bold;
}


/*　左右線　見出し　*/
.diagonal {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  line-height: 2;
  color: #f9a877;
}

.diagonal::before,.diagonal::after {
  width: 2px;
  height: 28px;
  content: "";
  background-color: #f9a877;
}

.diagonal::before {
  margin-right: 1.2em;
  transform: rotate(-30deg);
}

.diagonal::after {
  margin-left: 1.2em;
  transform: rotate(30deg);
}



/* FAQ区切り線 */
.hr2 {
  height: 0;
  margin: 10px 0;
  padding: 0;
  border: 0;title
}
.hr2 {
  border-top: 1px solid #BFBFBF;
}


/* 黒い区切り線 */
.hr3 {
  height: 0;
  margin: 10px 0;
  padding: 0;
  border: 0;title
}
.hr3 {
  border-top: 1px solid #333;
}


/*　テキストにアンダーライン、蛍光マーカー　*/
.underline01 {
  background: #fef4d9;
}

.underline02 {
  background: linear-gradient(transparent 40%, #fef4d9 60%);
}

.underline03 {
  background: linear-gradient(transparent 80%, #fef4d9 20%);
}

/*　テキストにアンダーラインのアニメーション　*/
.anim-underline01 {
  position: relative;
}

.anim-underline01::before {
  content:"";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent 40%, #fef4d9 60%);
  animation: underlineAnim 2s ease-in;
  z-index: -1;
}

@keyframes underlineAnim {
  0% {
    right: 100%;
  }
  100% {
    right: 0;
  }
}




/*　LP用ロゴ（今だけ使用）　*/
.pc-logo {
	width: 450px;
}


/*----------------------フェードイン・スクロールで表示 */
.element {
  /* 最初は非表示 */
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: transform 2s, opacity 2s, visibility 2s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}


/* スクロール　フェードイン表示 */
/*1.フェードインアニメーションの指定*/
.scrollanime {opacity: 0;} /*一瞬表示されるのを防ぐ*/
.fadeInDown {
    animation-name: fadeInDown;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;         
    }
    100% {
    opacity: 1.5;
    transform: translate(0);
    }
}
 
/*2.上下の動きを指定*/
.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}
 
/*3.左右の動きを指定*/
.sect02{overflow: hidden;} /*横スクロールバーを隠す*/
.slide-right {transform: translateX(200px);}
.slide-left {transform: translateX(-200px);}


/*　プロフィール　*/
.profile {
width: 100%;
}

.profile th,
.profile td {
padding: 5px;
}

.profile th {
text-align: left;
font-weight: bold;
background-color: #fff;
width: 40%;
}

@media screen and (max-width: 767px) {
.profile,
.profile tr,
.profile td,
.profile th {display:block;}
.profile th {width:auto;}
}