/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");


/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {
	border: none;
	max-width: 100%;
	vertical-align: middle;
}

/*スライドショー（slickを使用）
---------------------------------------------------------------------------*/

@media screen and (max-width:520px) {
	.top_slide{
		display: none;
	}
}

@media screen and (min-width:521px){
.responsive_slide{
	display: none;
}
}

@media screen and (max-width:520px) {
	.responsive_slide{
		visibility: visible;
	}
}


/*丸いページナビボタン全体を囲むブロック*/
ul.slick-dots {
	margin:0;padding: 0;
	line-height: 1;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 10px;	/*下からの配置場所指定*/
}

/*丸いページナビボタン１個あたりの設定*/
ul.slick-dots li {
	display: inline-block;
	margin: 0 10px;
	cursor: pointer;
}

/*buttonタグ*/
ul.slick-dots li button {
	border: none;padding: 0;
	display: block;
	text-indent: -9999px;	/*デフォルトで文字が出るので画面の外に追い出す指定*/
	width: 12px;			/*ボタンの幅*/
	height: 12px;			/*ボタンの高さ*/
	border-radius: 50%;		/*丸くする指定*/
	cursor: pointer;		/*クリックで画像へジャンプするので、わかりやすいようhover時にpointerになるように。*/
	background: #fff;		/*背景色。白。*/	
}

/*buttonのアクティブ時（現在表示されている画像を示すボタン）*/
ul.slick-dots li.slick-active button {
	background: #e87300;	/*色*/
}


/*一覧ブロック（listタイプ）
---------------------------------------------------------------------------*/

/*listボックスを囲むボックス*/
.list-container {
	flex-direction: row;	/*子要素を横並びにする*/
}

/*listボックス。１個あたりのボックスの指定です。*/
.list-container .list {
	width: 49%;	/*ボックスの幅*/
}

/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) {

/*全体の設定
---------------------------------------------------------------------------*/


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
}


/*Offer
---------------------------------------------------------------------------*/
.headline {
	background:#ff964b;
	text-align: center;
	margin: 0 auto;
	padding: 40px 0;
  }

	@media screen and (max-width:520px) {
	.headline{
		padding: 25px 0;
	}
	}

.headline_p{
	font-size: 23px;
	color:#FFF;
	padding:10px;
	letter-spacing: 0.1em;
	font-weight: 500;
}

@media screen and (max-width:520px) {
	.headline_p{
		font-size: 20px;
	}
	}

/*改行レスポンシブ*/
  @media screen and (min-width:520px) {
	.br_mobile{
		display: none;
	}
	}

.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #404040;
border-radius: 0.5rem;
}

.btn--white {
color: #404040;
background-color: #ffff;
font-size: 19px;
}

.btn--white:hover {
color: #404040;
background: rgb(220, 220, 220);
}
  

/*ゆめ整骨院が選ばれる理由
---------------------------------------------------------------------------*/
.subtitle{
    text-align: center;
    padding-top: 20px;   /*サブタイトル上のマージン*/
 /*	padding-bottom: 10px;  サブタイトル下のマージン*/
	max-width: 520px; /* 最大幅 */
    min-width: 320px; /* 最小幅 */
    }

    @media screen and (max-width: 960px) {
      .subtitle{
          display: block;
      }
    }
    
    /* モバイル向けレイアウト */
    @media screen and (max-width: 520px) {
      .subtitle{
          display: none;
      }
    }  
.subtitle_icon{
	display: flex;
}
  @media screen and (max-width:960px){
    .subtitle_icon {
      display: flex;
    }
  }
  @media screen and (max-width:520px){
    .subtitle_icon {
		display: flex;
    }
  }

  .hone_logo{
	width: 100px;
	height: auto;
  }
    
  .subtitle_text{
    margin-top: 34px;
	color:#404040;
  }

  @media screen and (max-width:959px){
    .subtitle_text{
      margin-top: 30px;
    }
  }
  @media screen and (max-width:520px){
    .subtitle_text{
      margin-top: 10px;
    }
  }
.subtitle_textjp{
	font-size: 30px;
	font-weight: bold;
}

@media screen and (max-width:520px){
    .subtitle_textjp{
		padding-top: 30px;
		font-size: 22px;
    }
  }

@media screen and (max-width:520px){
.br_none{
	display: none;
}
}

.ordermade{
color: #404040;
font-weight: bold;
font-size: x-large;
}

.description{
	text-align: center;
	padding-top: 5px;
	padding-bottom: 30px;
	color:#404040;
	font-size: 19px;
}

@media screen and (max-width:520px){
    .description{
		font-size: 19px;
		line-height: 26px;
    }
  }

/* mobileタイトル
------------------------------------------------------------*/
.relative {
	position: relative;
	width: 100%;
  }
  @media screen and (min-width:521px){
	.relative {
		display: none;
    }
  }

  .absolute {
	position: absolute;
	top:40px;
	left: 20px;
	bottom: 0px;
	color: #404040;
	width: 400px;
	padding: 10px 0;
	font-size:24px;
	font-weight:bold;
	text-align: center;
  }

/* SEC03 
------------------------------------------------------------*/
.sec03_frame{
	width: 1200px;
}
@media screen and (max-width:1200px){
  .sec03_frame{
	 width: 100%;
	 margin-left: 0px;
	 margin-right: 0px;
   }
  }
  @media screen and (max-width:520px){
  .sec03_frame{
	width: 100%;
	margin-left: 5px;
	margin-right: 5px;
   }
  }
  
.sec03_frame_box1{
display: flex;
text-decoration: none;
text-align: center;
/* width: 70%; */
} 
  
	@media screen and (max-width:800px){
	.sec03_frame_box1{
	  display: block;
	 }
	}

.sec03_frame_box2{
color:#404040;
}

.sec03_text{
	font-weight: bold;
	font-size: 24px;
	padding-bottom: 15px;
}

.sec03_text2{
	font-size:19px;
}

.sec03_img {
  max-width:300px;
  min-width: 100px;
  height:auto;
  height:300px;
  border-radius:50%;
  text-align: center;
}

@media screen and (max-width:1050px){
	.sec03_img {
	width: 80%;
	height: auto;
	}
	}

@media screen and (max-width:520px){
	.sec03_img {
	width: 60%;
	height: auto;
	}
	}

/*========= もっと見るボタン ===============*/
  
  .btn--orange{
	color: #ffff;
	background-color: #FCB55d;
	font-size: smaller;
  }
  
  .btn--orange:hover {
	color: #ffff;
	background: #fcb45dc4;
  }
  
  .more{
	margin: 50px auto;
	text-align: center;
  }
/*========= Banners ===============*/
.banner-contact{
	width: 800px;
	height: auto;
	text-align: center;
	padding-top: 120px;
	padding-bottom: 80px;
}

@media screen and (max-width:520px){
	.banner-contact{
		width: 80%;
		height: auto;
		padding-top: 50px;
		padding-bottom: 40px;
		}
	}

.front-content{
	width: 1000px;
	height: auto;
	padding-bottom: 100px;
}
@media screen and (max-width:520px){
	.front-content{
		width: 100%;
		height: auto;
		padding-bottom: 50px;
		}
	}


.news{
	padding: 30px 50px;
	border-radius: 10px;
	/* display: inline-block; */
	background: #FFF;
	border: solid 3px #FCB55D;
	width: 800px;
	height: 400px;
  }
  
  @media screen and (max-width:960px){
	.news{
	  width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	  }
	}
	@media screen and (max-width:520px){
	  .news{
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	  }
	}
  
   dt{
	 float:left;
   }
  
   dd{
	margin-left:120px;
  }
  
  .news-subtitle{
	color: #404040;
	text-align: center;
  }
  
  .news-date{
	color: #404040;
  }
  
  .news-title{
	color: #404040;
  }
  
  .more-news{
	display: flex;
	justify-content: end;
  }