@charset "utf-8";

/*---------------------------------
CSS information
file name  :  sub.css
style info :  下層ページ共通スタイル
admin info :  ファースト整骨院
---------------------------------*/


/*------------------------------------------------------
					共通設定
------------------------------------------------------*/

/*------------ヘッダー------------*/
header {
  width: 100%;
  top: 0;
  margin:0 auto;
  text-align: center;
  z-index: 1000;
}

#sub_header{
	width:100%;
	height:90px;
	background-color: #FFF9B2;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff)),
	-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #ffffff), to(#ffffff));
	-webkit-background-size: 4px 4px;
	z-index: 80;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
	padding-top: 5px;
}

#sub_header h1{
	font-size: 10px;
	font-weight: normal;
}
#sub_header img{
	width: 60px;
	height: 60px;
	margin-top: 10px;
}
#sub_header a{
	display: block;
        height:60px;	
	
}

/*------------top_nav（common.cssに追加）------------*/

ul.top_nav {
	padding-top: 12px;
}

/*------------globalmenuの位置調整------------*/

.globalmenu{
	margin-top:0;
}

/*------------パンくずリスト------------*/


.breadcrumb {
	background-color: #f3f3f3;/* #FCF9D9*/
	font-size: 0.8rem;
}


.breadcrumb li{
  float: left;
  list-style: none;
  font-weight: normal;
  padding: 10px;
}

.breadcrumb li:after{
  content: '　　>';
  padding: 0 -10px;
  color: #C5C5C5;
	
}

.breadcrumb li:last-child:after{
  content: '';
}

.breadcrumb li a {
    text-decoration: none;
    color: #333333;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;
}

.breadcrumb li a:hover {
	color:#ffe800;
}


/*------------#mainbox------------*/

div#mainbox{

	padding-top:0;/*80px*/;
	padding-bottom:0/*20px*/;
	box-sizing: border-box;
	overflow: hidden;
}

div#mainbox div{
	width:90%;
	max-width: 960px;
	margin:80px auto;

}

#mainbox h2{
	height:30px;
	margin-bottom:50px;
	padding:20px 5px;
	color:#000;
	font-size:1.5rem;
	font-weight: bold;
	text-align:center;
}

#mainbox #symptom_detail h3{
	height:100%;
	margin-top:-60px;
	margin-bottom:30px;
	color:#FFE800;
	font-size:2.0rem;
	font-weight: bold;
	text-align:center;
	padding:0;
	color:#333333;	background: linear-gradient(rgba(0,0,0,0) 90%, #ffe800 0%);
	display: inline;	
}

#mainbox img{
	width: 100%;
	margin-top:20px;
}

/*
#mainbox .to_top_bnr{
	text-align: center;
	margin: 40px auto;
	padding: 0 10%;
	box-sizing: border-box;
}
*/
#mainbox .to_top_bnr img{
	width: 100%;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all  0.6s ease;}


#mainbox .to_top_bnr img:hover{
	width: 100%;
	opacity: 0.6;

}

/*------------contents_item---------------------------------*/

.contents_item {
  position: relative;
  overflow: hidden;
}

.contents_item ul {
  position: relative;
  left: 50%;
  float: left;
}

.contents_item ul li {
  position: relative;
  left: -50%;
	padding: 5px 20px ;
	margin-bottom: 20px;
  float: left;
	border-right:none;
}
.contents_item ul li:last-child{
	border-right: none;
}

.contents_item ul li a {
	color: #67c5ff;

-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.contents_item ul li a:hover {
	opacity: 0.5;
}
	

/*------------symptom---------------------------------*/
div#symptom{
	width:90%;
	max-width: 960px;
	margin:80px auto;
}

div#symptom h2{
	margin-bottom:20px;
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}

.symptom_block{
	margin-bottom:30px;
	box-sizing: border-box;
	border:solid 1px #e3e3e3;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}

.symptom_block dl dd{
	padding: 10px 10px 0;
	box-sizing: border-box;
}

.symptom_block dl dd h4{
	margin-bottom:0;
	font-size:1.2rem;
	font-weight:bold;
}

.symptom_block dl dd p{
	font-size:1.0rem;
	text-align: justify;
}


.symptom_image img{
	width:100%;
}

div#symptom .symptom_block .sub_head{
	height:30px;
	margin:0 auto;
	font-size:1.0rem;
	font-weight:bold;
	text-align: center;
	line-height:30px;
	}



/*------------icon_doc---------------------------*/
.icon_doc	{position: relative}

.badge	{position: absolute;
	top: -30px;
	right: 0px}

.badge	{

	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}

/*------------other_symptom---------------------------*/

#other_symptom {
	width: 100%;
	text-align: center;
}

 #other_symptom h3{
	margin:0 auto 20px auto;
	 padding: 20px ;
	 background-color: #C3C3C3;
	color:#ffffff;
	font-size:1.0rem;
	font-weight: bold;
	text-align:left;
}
#other_symptom .wrap{width:100%;display:flex;justify-content: center;padding:0;list-style: none;}
#other_symptom .box1{width:calc(100% / 3);margin:2px; background-color: #ffe800; transition: .6s;}
#other_symptom .box2{width:calc(100% / 4);margin:2px;background-color: #ffe800; transition: .6s;}
#other_symptom .box1:hover, .box2:hover{opacity:0.6;}
#other_symptom p{text-align:center;color:#333333;font-weight:bold;margin:35px auto;display: block; width: 100%; height: 100%;}




/*------------treatment_menu---------------------------*/


#treatment_menu{
	width:90%;
	max-width: 960px;
	margin:0 auto 60px auto;
	padding-top:80px;
	padding-bottom:20px;
	background-color:#f3f3f3;
	box-sizing: border-box;
}

#treatment_menu h2{
	height:30px;
	margin-bottom:30px;
	padding:20px 5px;
	color:#000;
	font-size:18px;
	font-weight: bold;
	text-align:center;
}


div#youtube{
	width:90%;
	max-width: 960px;
	margin:80px auto;
}

div#youtube h2{
	margin-bottom:40px;
	color:#000;
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}

.youtube_video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.youtube_video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


#treatment_menu ul li{
	width:90%;
	height: auto;
	margin:0 auto 20px;
	padding:20px 15px;
	background-color:#fff;
	box-sizing: border-box;
	border-radius: 10px;
	/*border:solid 1px #000;*/
	/*list-style: square url('../images/logo_black_mini.png') inside;*/
}


#treatment_menu ul li dl dt h4{
	color:#000;
	font-size:1.2rem;
	font-weight: bold;

}

#treatment_menu ul li dl dt img{
	margin: 20px auto;
	text-align: center;
	width: 100%;

}


#treatment_menu ul li dl{
	margin-bottom:20px;
}

#treatment_menu ul li .button{
	width:60%;
	margin:0 auto;
	padding:5px;
	background-color:#ffe800;
	color:#000;
	text-align: center;
	border-radius: 50px;
  -moz-transition:0.6s ease;
  -webkit-transition:0.6s ease;
  -o-transition:0.6s ease;
  -ms-transition:0.6s ease;
		
}

#treatment_menu ul li .button a{
	color:#000;
	font-weight:500;
	}

#treatment_menu ul li .button:hover{
	background-color:#ffb800;
	}

#treatment_menu ul li .button a:hover{
	color:#000;
	}





/*------------------------------------------------------
タブレット向けのスタイル:
------------------------------------------------------*/

@media screen and (min-width: 640px){
	
	
	
/*------------contents_item---------------------------------*/

.contents_item {
  position: relative;
  overflow: hidden;
}

.contents_item ul {
  position: relative;
  left: 50%;
  float: left;
}

.contents_item ul li {
  position: relative;
  left: -50%;
	padding: 5px 20px ;
  float: left;
	border-right: #999999 1px solid;
}
.contents_item ul li:last-child{
	border-right: none;
}

.contents_item ul li a {
	color: #67c5ff;

-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.contents_item ul li a:hover {
	opacity: 0.5;
}	
	
/*------------icon_doc---------------------------*/

.badge	{
	right: 200px
}


/*------------other_symptom---------------------------*/

#other_symptom {
	width: 100%;
	text-align: center;
}


#other_symptom h3{
	font-size:1.2rem;
	font-weight: bold;
	text-align:center;
}
/*-------------------treatment--------------------------*/

#treatment_menu ul li .button{
	width:40%;
}

div#treatment_menu h2{
	margin-bottom:40px;
	font-size:24px;
}
	
	
	
	
/*-------------------symptom--------------------------*/

div#symptom{
	width:94%;
	margin:80px auto 30px;
}

div#symptom h2{
	margin-bottom:40px;
	font-size:1.2rem;
}

.symptom_block{
	float:left;
	width:50%;
	padding:10px;
	box-sizing: border-box;
	border:none;
	box-shadow: none;
}

section#symptom_detail h4:before {
content: '●';
color: #f3f3f3;
margin-right: 8px;
}
		



	
}


/*------------------------------------------------------
						PC
------------------------------------------------------*/
@media screen and (min-width: 768px){



.breadcrumb {
	background-color: #f3f3f3;
	font-size: 1.0rem;
}


.breadcrumb li{

  padding: 30px;
}

	
.symptom_block{
	float:left;
	width:33.333333%;
	padding:10px;
	box-sizing: border-box;
	border:none;
}
	
	
	
	
	




}


/*------------------------------------------------------
						PC
------------------------------------------------------*/
@media screen and (min-width: 960px){


}

@media screen and (min-width: 1280px){
	
	

	
}