@charset "utf-8";

@media screen and (max-width: 899px) {

html{

}

body{
    font-size:13px;
    letter-spacing: 0.02em;
    line-height:180%;
    color: #333;
    font-family: 'Noto Sans JP',"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","Meiryo",'HiraKakuPro-W3','ＭＳ Ｐゴシック',sans-serif;
	font-feature-settings: "palt" 1;
	font-weight: 400;
    text-rendering: optimizeLegibility;
	background-color: #fff;
	margin: 0;
}

h1{
	font-size: 1.5em;
}

h2{
	font-size: 1.3em;
}

.letter{letter-spacing: -0.1px;}

.br-sp::before {
	content: "\A" ;
	white-space: pre ;
}

.br::before {
	display: none;
}


/*----- フェードイン -----*/
.inviewfadeIn {
        opacity: 0;
        transition: 1s;
    }
    
.fadeIn {
        opacity: 1.0;
    }


/* ------------------------- wrapper */
/* indexページ */
#wrapper {
	margin:0 auto; 
	width:100%; 
	padding:0; 
	position:relative;
	overflow: hidden;
	background-color: #fff;

}
* html #wrapper {text-align:left;} 
#wrapper:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
#wrapper { display: inline-block; }
* html #wrapper { height: 1%; }
#wrapper { display: block; }

#wrapper2 {
	height: 1200px;
	margin:0 auto; 
	width:100%; 
	padding:0; 
	background-color: #fff;

}
* html #wrapper2 {text-align:left;} 
#wrapper2:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
#wrapper2 { display: inline-block; }
* html #wrapper2 { height: 1%; }
#wrapper2 { display: block; }



/* ------------------------- drawer */
/* ドロワーメニュー */


.wrapper-sp {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}
.overlay.open {
  width: 100%;
  height: 100%;
  opacity: 1;

}
main {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding: 0 0px;
  transition: all .5s;
  display: flex;
  flex-direction: column;
  justify-content: top;

}
main.open {
  transform: translateX(-200px);
}
main h1 {
  text-align: center;
  font-weight: 500;
}
main p {
  text-align: left;
}
.menu-trigger {
  display: inline-block;
  width: 28px;
  height: 26px;
  vertical-align: middle;
  cursor: pointer;
  position: fixed;
  top: 23px;
  right: 23px;
  z-index: 99999;
/*   transform: translateX(0);
  transition: transform .5s;
 */}
/* .menu-trigger.active {
  transform: translateX(-250px);
}
 */
.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #666;
  transition: all .5s;
}
.menu-trigger.active span {
  background-color: #333;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  transform: translateY(12px) rotate(-45deg);
}
.menu-trigger span:nth-of-type(2) {
  top: 12px;
}
.menu-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(3) {
  transform: translateY(-12px) rotate(45deg);
}
 
nav {
  width: 200px;
  height: 100%;
  padding-top: 100px;
  background-color: #f8f2e3;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
  transform: translate(200px);
  transition: all .5s;

}
nav.open {
  transform: translateZ(0);
}
nav li {
  color: #333;
  letter-spacing: 0.2em;
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #c3b8ac;
}

nav a{
	color: #333;
	font-weight: 500;
}



/* ------------------------- nav-sp */
.nav-sp{
	margin: 10px 0 0 20px;

}
.nav-sp ul li{
	margin-top: 8px;
	font-size: 18px;
	letter-spacing: 0.1em;
}




/* ------------------------- contents */
/* ヘッダーフッターを除くコンテンツ部分 */

#contents{
	padding-top: 0px !important;
}

#contents:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
#contents { display: inline-block; }
* html #contents { height: 1%; }
#contents { display: block; }


a img:hover {
	text-decoration: none;
	opacity: 0.85;
	-webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
}


/* ------------------------- header */
/* ヘッダー */

.wrapper{
	position: fixed;
	width: 100%;
	margin: 0;
	padding: 10px 0 0;
	background-color: #fff;
	z-index: 99999;
}


#header{
	width: 100%;
	height: 58px;
	margin: 0px;
	padding: 0;
	background: none;
	text-align: left;
	overflow-x: hidden;
	border-bottom: 1px solid #ccc;
}


#ci{
	float: none;
	display: block;
	margin: 2px 0 0 20px;
	position: relative;
	top: -24px;
}

#c-copy-ci{
	font-size: 13px;
	font-weight: 700;
	margin: 4px 0 2px 20px;
	letter-spacing: 0.1em;
	line-height: 140%;
}

#ci img{
	width: 170px;
	height: auto;
}

#h-reserve{
	display: none;
}
#h-tel{
	display: none;
}

@media screen and (max-width: 374px) {
/* ------------------------- 4inchスマホ対応*/
#ci img{
	width: 160px;
	height auto;
}
}



#ci img a:hover{
	opacity: 0.6;
}



#c-copy{
	display: none;
}

/* ------------------------- #g-nav */


#g-nav-back{
	display: none;
}





/*----- フェードイン -----*/
.inviewfadeIn {
        opacity: 0;
        transition: 1.7s;
    }
    
.fadeIn {
        opacity: 1.0;
    }


.item1{
  opacity: 0;    
}

.item:nth-child(1) {
  -webkit-animation: example 2s ease 1s 1 forwards;
  animation: example 2s ease 1s 1 forwards;
}
.item:nth-child(2) {
  -webkit-animation: example 2s ease 3.4s 1 forwards;
  animation: example 2s ease 3.4s 1 forwards;
}
.item:nth-child(3) {
  -webkit-animation: example 1s ease 3.2s 1 forwards;
  animation: example 1s ease 3.2s 1 forwards;
}
.item:nth-child(4) {
  -webkit-animation: example 1s ease 5.7s 1 forwards;
  animation: example 1s ease 5.7s 1 forwards;
}

@-webkit-keyframes example {
  100% {
    opacity: 1;
  }
}
@keyframes example {
  100% {
    opacity: 0.9;
  }
}


/* ------------------------- アンカーリンク　固定ヘッダー調整用 未使用*/
.unker-just{
	padding-top: 0px;
}

.unker-just-inner{
	padding-top: 65px !important;
    margin-top: -65px !important;
}

/* ------------------------- slider*/
/* スライダー */

.bxslider{
	display: none;
}

.bxslider-wrapper{
	display: none;
}

.bxslider-sp{
	display: flex;
	position: absolute;
	top: 68px;
	width: 100%;
	height: 400px;
}

.bx-wrapper{
	display: block;
	margin: 0 auto;
	padding: 0;
}

.bx-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}


@media screen and (min-width: 481px) and (max-width: 899px) {
.bxslider{
	height: 360px;
}

.bx-wrapper img {
	display: block;
	width: auto;
	height: 100% !important;
}


}


.slider-bgcolor1{
	background-color: #fcf2e3;
}

.slider-bgcolor2{
	background-color: #cfecd4;
}

.slider-bgcolor3{
	background-color: #d7f0f8;
}

.slider-bgcolor4{
	background-color: #fcded4;
}

.slider-bgcolor5{
	background-color: #cacfe1;
}

.slider-bgcolor6{
	background-color: #cee3ab;
}
.slider-bgcolor7{
	background-color: #ffe880;
}

/* ------------------------- wrapper-1100*/
.wrapper-1000{
	width: calc(100% - 40px);
	margin: 0 20px 0px;
	padding: 0;
	clear: both;
}

.wrapper-1000a{
	position: relative;
	top: -30px;
	width: calc(100% - 40px);
	margin: 0 auto 0px;
	padding: 0;
	clear: both;

}

_::-webkit-full-page-media, _:future, :root .wrapper-1000a {
    top: -0px;
}

.wrapper-1100{
	width: calc(100% - 40px);
	margin: 0 auto 0px;
	padding: 0;
	clear: both;
}

.wrapper-900{
	display: block;
	width: calc(100% - 40px);
	margin: 0 auto 0px;
	padding: 0;
	clear: both;
}


.wrapper-800{
	display: block;
	width: calc(100% - 40px);
	margin: 0 auto 0px;
	padding: 0;
	clear: both;
}

.wrapper-1000:after,.wrapper-1100:after,.wrapper-900:after,.wrapper-800:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.wrapper-1000,.wrapper-1100,.wrapper-900,.wrapper-800 { display: inline-block; }
* html .wrapper-1000,* html .wrapper-1100,* html .wrapper-900,* html .wrapper-800{ height: 1%; }
.wrapper-1000,.wrapper-1100,.wrapper-900,.wrapper-800 { display: block; }


/* ------------------------- reserve*/
#reserve{
	display: block;
	width: 100%;
	height: 105px;
	position: relative;
	top: -20px;
	border-bottom: 1px solid #000;
	/*background-image: url(../img/r-staff.png);*/
	background-position: right -10px bottom 0%;
	background-repeat: no-repeat;
	background-size: 110px auto;
	margin: 0px 0 20px;

}

.c-reserve{
	display: block;
	margin: 40px 0 0;
	float: left;
	font-size: 12px;
	font-weight: 500;
	line-height: 200%;
}

.tel,
.tel a{
	margin: 0;
	font-size: 33px;
	color: #036eb8;
	font-weight: 700;
}

.telcomment{
	display: none;
}

.open-l{
	float: none;
	width: 100%;
	font-size: 1em;
	line-height: 170%;
	margin-bottom: 10px;
}

.open-r{
	float: none;
	width: 100%;
}

.open-r img{
	margin-top: 10px;
	width: 100%;
}

.open-tit{
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 10px;
}

.time-info{
	display: block;
	width: 100%;
	margin: -20px 0 20px;
	font-size: 12px;
	font-weight: 500;
	color: #e60012;
	line-height: 160%;
	text-align: left;
}

/* ------------------------- dl#information */
/* お知らせ */

.h2_title_top{
	width: 100%;
	background-color: #f8f2e3;
}

.infoarea{
	width: 100%;
	padding: 10px 0px;
	border-top: 0px solid #ccc;
	border-bottom: 1px solid #ccc;

}

div#information {
	display: block;
	margin: 0 auto 0px;
	list-style: none;
	border: 2px #e0dcd3 solid;
	padding: 15px;
	max-height: 300px;
	max-width: calc(100% - 30px);
	overflow: auto;
	background-color: #fff;

}

.info{
	display: inline-block;
	clear: both;
	margin-bottom: 20px;
}

div#information li a{
	font-size: 1em;
	display: inline-block;
	padding-top: 8px;
	color: #036eb8 !important;
}

div#information li a:hover{
	opacity: 0.7;
}

div#information li a:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 2px;
	background-image: url(../img/linkmark.gif);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 0px;
	width: 12px;
	height: 15px;
	margin-right: 2px;
}

.information-tit{
	margin: 10px auto 0px;
	padding: 10px 10px;
	font-size: 1em;
	border-top: 2px #e0dcd3 solid;
	border-left: 2px #e0dcd3 solid;
	border-right: 2px #e0dcd3 solid;
	text-align: center;
}

.infoarea li:nth-child(1){
	display: block;
	float: left;
	width: 31%;
	max-height: 80px;
	min-height: 50px;
	background-image: url("../img/nanairo-orthopedic_clinic_logo.png");
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #f8f2e3;
}

.infoarea li:nth-child(1) img{
	width: 100%;
	height: auto;
	background-color: #fff;

}

.infoarea li:nth-child(2){
	width: 64%;
	display: block;
	float: right;
	margin-left: 10px;
	line-height: 150%;
}

.infoarea li:nth-child(2) p{
	margin-top: -5px;
}

.infoarea h3{
	font-size: 1em;
	padding-bottom: 10px;
	border-bottom: dotted 1px #ccc;
	line-height: 160%;
}

.infoarea li img{
	width: 100%;
	height: auto;
}



/* ------------------------- はじめましてホーム*/

#hajimemashite{
	display: flex;
	width: 100%;
	margin-top: 10px;
	background-color: #f8f2e3;
	text-align: center;
	padding: 40px 0 0;
}

#hajimemashite img{
	width: 90%;
}

#hajimemashite .wrapper-1100 p img{
	width: 100%;
	margin: 0 auto -20px;
}




/* ------------------------- 特長ホーム*/

.feature-home:nth-child(1){
	margin: 40px 0 0;
}

.feature-home{
	display: inline-block;
	width: calc(100% - 30px);
	margin: 20px 0 0;
	padding: 15px;
	background-color: #ebebeb;
	border-radius: 10px;
	font-size: 1em;
	vertical-align: middle;
}

/* ------------------------- 特長カラー*/
.feature-home:nth-child(1){background-color: #f8f2e3;}
.feature-home:nth-child(2){background-color: #e7f3e4;}
.feature-home:nth-child(3){background-color: #e5f0f8;}
.feature-home:nth-child(4){background-color: #fcded4;}
.feature-home:nth-child(5){background-color: #d8cde3;}
.feature-home:nth-child(6){background-color: #e2e7a2;}
.feature-home:nth-child(7){background-color: #f6df86;}


.feature-home a:hover{
	opacity: 0.6;
}


.feature-home:nth-child(1) a:before,
.feature-home:nth-child(2) a:before,
.feature-home:nth-child(3) a:before,
.feature-home:nth-child(4) a:before,
.feature-home:nth-child(5) a:before,
.feature-home:nth-child(6) a:before,
.feature-home:nth-child(7) a:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 8px;
	background-image: url(../img/no1-arrow.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 2px 0px;
	width: 55px;
	height: 30px;
	margin-right: 10px;
}

.feature-home:nth-child(2) a:before{background-image: url(../img/no2-arrow.png);}
.feature-home:nth-child(3) a:before{background-image: url(../img/no3-arrow.png);}
.feature-home:nth-child(4) a:before{background-image: url(../img/no4-arrow.png);}
.feature-home:nth-child(5) a:before{background-image: url(../img/no5-arrow.png);}
.feature-home:nth-child(6) a:before{background-image: url(../img/no6-arrow.png);}
.feature-home:nth-child(7) a:before{background-image: url(../img/no7-arrow.png);}


.margin-40{
	margin-top: -40px;
}

.left80{
	margin-left: 2px;
}

.left40{
	margin-left: 2px;
}

.big-tit{
	font-size: 1.6em;
	font-weight: 500;
}

.big-tit2{
	font-size: 1.4em;
	font-weight: 500;
	position: relative;
	top: -3px;
}


.feature-home li:nth-child(1){
	float: none;
	width: 100%;
	vertical-align: middle;
	font-weight: 500;
}



.feature-home li:nth-child(2){
	float: none;
	width: 100%;
	vertical-align: middle;
	line-height: 160%;
}



/* ------------------------- 見出しが２行のための調整*/
.feature-home:nth-child(2) li:nth-child(1){
	position: relative; top: -10px; 
}

.feature-home:nth-child(2) a:before{
	top: 10px;
}



.feature-home:nth-child(3) a:before,
.feature-home:nth-child(4) a:before,
.feature-home:nth-child(5) a:before,
.feature-home:nth-child(6) a:before,
.feature-home:nth-child(7) a:before{
	top: 6px;
}

.feature-home:nth-child(2),
.feature-home:nth-child(3),
.feature-home:nth-child(4),
.feature-home:nth-child(5),
.feature-home:nth-child(6),
.feature-home:nth-child(7){
	padding: 0px auto;
}


.feature-home br {
display: none;
}

.feature-home:nth-child(2){
	padding-top: 20px !important;
}




/* ------------------------- treatment-home*/

#treatment{
	display: block;
	width: 100%;
	height: 250px;
	margin-top: 0px;
	background-color: #e2eddf;
	text-align: center;
	padding: 0px 0 0;
	background: linear-gradient(180deg, #fff 0%, #fff 30%, #e2eddf 30%, #e2eddf 100%);

}
#treatment .wrapper-900{
	display: block;
	width: 100%;
	height: 250px;
	text-align: center;
	padding: 100px 0 0 20px;
	background-image: url(../img/treatment.png);
	background-position: right -35px bottom 100px;
	background-repeat: no-repeat;
	background-size: 55% auto;
	text-align: left;
}

#treatment h2{
	font-size: 1.4em;
	width: 50%;
	font-weight: 500;
}
#treatment h3{
	font-size: 1em;
	line-height: 170%;
	width: 90%;
	width: 50%;
}


/* ------------------------- button*/

.link-button a{
	display: block;
	width:calc(100% - 30px);
	margin: 20px 0;
	padding: 15px;
	font-size: 1.3em;
	font-weight: 500;
	border: 2px solid #036eb8;
	border-radius: 10px;
	background-image: url(../img/arrow1.png);
	background-position: top 15px left 30px;
	background-repeat: no-repeat;
	background-size: 15px auto;
	text-align: center;
}

.link-button a:hover{
	display: block;
	font-size: 1.3em;
	background-color: #036eb8;
	color: #fff;
	background-image: url(../img/arrow1w.png);
	background-position: top 15px left 30px;
	background-repeat: no-repeat;
	background-size: 15px auto;
	opacity: 1;
}

.link-button.column2-l a{
	margin: 30px 0 0 !important;
}

.link-button.clear-fix a{
	margin: 20px 0 30px !important;
}

.column2-l{
	display: block;
	float:none;
	width:calc(100% - 0px);
}
.column2-r{
	display: block;
	float:none;
	width:calc(100% - 0px);
}

.column2-l img{
	width: 100%;
}

/* ------------------------- line*/

#line{
	display: block;
	padding: 20px;
	background-color: #f1f7f0;
	border-radius: 10px;
	border: 2px solid #06c755;
}

#line h1{
	display: block;
	margin: 0 auto 20px;
	padding: 10px;
	background-color: #06c755;
	color: #fff;
	font-size: 1.3em;
	text-align: center;
	letter-spacing: 1px;
}

#line h2{
	font-size: 1.2em;
	text-align: left;
	letter-spacing: 0em;
	margin: 15px auto 15px;
	font-weight: 500;
}

#line h3{
	font-size: 1em;
	line-height: 170%;
	margin-bottom: 0;
}


#line-button{
	margin-top: 0px;
	padding-left: 70px;
	text-indent: -70px;
	letter-spacing: 0.1em;
}


#line-button a{
	font-size: 1.3em;
	font-weight: 500;
	color: #06c755;
	position: relative;
	top: -10px;

}


#line-button a:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 30px;
	left: 0px;
	background-image: url(../img/LINE_Brand_icon.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: 0px 0px;
	width: 50px;
	height: 50px;
	margin-right: 20px;
}

#line-wp{
	display: none;
}



/* ------------------------- price*/

.tit-bar{
	margin: 40px 0 20px;
	width: calc(100% - 30px);
	padding: 10px 15px;
	background-color: #036eb8;
	color: #fff;
	font-size: 1.2em;
	font-weight: 500;
	border-radius: 10px;
	text-align: left;
}

#price{
	font-size: 14px;
}

#price h1{
	margin: 40px 0 20px;
	padding: 10px 0px;
	border: 2px solid #036eb8;
	border-radius: 10px;
	font-size: 1.1em;
}

.price-list li{
	margin-top: 0px;
}


#price.wrapper-800{
	width: 100%;
}

#price.wrapper-800 h1{
	font-size: 1.1em;
	text-align: left;
	padding-left: 15px;
}

h2 #price{
	font-size: 0.9em;
	width: calc(100% - 2px);
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	margin: 0 auto;
}

#price table{
	font-size: 18px;
	width: 100%;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;	
	margin: 0 auto;
}

#price td,
#price th{
	padding: 5px 10px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

#price th{
	background: #e5f0f8;
}

#price td:nth-child(2n-1){
	width: 73%;
}

#price td:nth-child(2n){
	text-align: center;
}


/* ------------------------- access*/

.wrapper-1000 .wrapper-800{
	width: 100% !important;
	padding: 0;
}
.wrapper-1000 .wrapper-800 h2{
	font-size: 1.2em;
	padding-bottom: 5px;
	border-bottom: 1px dotted #ccc;
}

#price.wrapper-800 h2{
	border-bottom: 0px dotted #ccc;
}



.wrapper-1000 .wrapper-800 h3{
	font-size: 1em;
	margin: -10px 0 30px;
}

.map-b{
	display: block;
	padding: 20px;
	background-color: #ebebeb;
}

.map-b .column2-l{
	width: 100%;
	margin-right: 0px;
}

.map-b .column2-l img{
	width: 100%;
}

.map-b .column2-r img{
	width: 100%;
	margin-top: 30px;
}

.map-b:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.map-b { display: inline-block; }
* html .map-b{ height: 1%; }
.map-b{ display: block; }

.g-map{
	margin-top: 20px;

}

.g-map iframe{
	width: 100% !important;
	margin-bottom: 20px;
}




/* ------------------------- 初めての方へ*/

/* ------------------------- 挨拶文*/

#hajime p{
	width: 100%;
	margin: 20px auto;
	text-align: left;
	line-height: 180%;
}

#sign{
	display: block;
	width: 100%;
	margin: 20px auto 20px;
	text-align: right;
}

.m-top-30{
	margin-top:40px;
}

.m-top50{
	margin:30px 0;
}




/* ------------------------- スタッフ紹介*/

#staff-tit,
#feature-tit{
	display: block;
	width: 45%;
	margin: 20px auto 10px;
}

#staff-tit img,
#feature-tit img{
	width: 100%;
}



.staff{
	display: block;
	float: none;
	margin: 0 10px;
	border-bottom: 1px dotted #ccc;
	padding: 0;
}

.staff:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.staff { display: inline-block; }
* html .staff{ height: 1%; }
.staff{ display: block; }


.staff:nth-child(3){
	float: none;
}

.staff:last-child{
	float: none;
}


.staff img{
	display: block;
	margin: 0 auto;
	float:left;
	width: 30%;
}

.staff .s-name{
	float:right;
	width: 65%;
	margin: 10px 0 5px;
	font-size: 1em;
	font-weight: 500;
}


.staff .intro{
	font-size: 1em;
	float:right;
	width: 65%;
	line-height: 160%;
	margin: 0 0 20px;
}

/* -------------------------　mov*/
.mov{
	width: 100%;
	margin: 0 auto;
	text-align: center;
}


/* -------------------------　特長ページ　特長*/

.feature{
	display: inline-block;
	width: calc(100% - 30px);
	margin: 20px auto 10px;
	padding: 15px;
	background-color: #ebebeb;
	border-radius: 12px;
	font-size: 1em;
	vertical-align: middle;
}

/* ------------------------- 特長カラー*/
.feature:nth-child(2){background-color: #f8f2e3;}
.feature:nth-child(3){background-color: #e7f3e4;}
.feature:nth-child(4){background-color: #e5f0f8;}
.feature:nth-child(5){background-color: #fcded4;}
.feature:nth-child(6){background-color: #d8cde3;}
.feature:nth-child(7){background-color: #e2e7a2;}
.feature:nth-child(8){background-color: #f6df86;}

.feature-home a:hover{
	opacity: 0.6;
}

/* ------------------------- 特長カード*/

.feature-head{
	width: 100%;
}

.feature-head-l{
	float:none;
	width: 100%;
}
.feature-head-r{
	float:none;
	width: 100%;
}

.feature-head img{
	display: block;
	position: relative;
	bottom: -79px;
	height: 140px;
	margin: 0 auto;
}

.feature:nth-child(8) .feature-head img{
	display: none;
}

.feature-head-7{
	display: block;
	margin: 10px 10px 0px;
	font-size: 1.1em;
	font-weight: 500;
	position: relative;
	bottom: 140px;

}
.feature-head-tit{
	display: block;
	margin: 0 0 0 10px;
	font-size: 1.1em;
	font-feature-settings: "palt" 1;
	position: relative;
	bottom: 140px;
}

#feature07 .feature-head-7{
	position: static !important;
}
#feature07 .feature-head-tit{
	position: static;
}


.feature-head-tit .big-tit{
	font-size: 1.4em;
}

.feature:nth-child(2) .feature-head-tit:before,
.feature:nth-child(3) .feature-head-tit:before,
.feature:nth-child(4) .feature-head-tit:before,
.feature:nth-child(5) .feature-head-tit:before,
.feature:nth-child(6) .feature-head-tit:before,
.feature:nth-child(7) .feature-head-tit:before,
.feature:nth-child(8) .feature-head-tit:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 5px;
	background-image: url(../img/no1.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 0px;
	width: 30px;
	height: 30px;
	margin-right: 2px;
}

.feature:nth-child(3) .feature-head-tit:before{background-image: url(../img/no2.png);}
.feature:nth-child(4) .feature-head-tit:before{background-image: url(../img/no3.png);}
.feature:nth-child(5) .feature-head-tit:before{background-image: url(../img/no4.png);}
.feature:nth-child(6) .feature-head-tit:before{background-image: url(../img/no5.png);}
.feature:nth-child(7) .feature-head-tit:before{background-image: url(../img/no6.png);}
.feature:nth-child(8) .feature-head-tit:before{background-image: url(../img/no7.png);}



/* ------------------------- 特長カード　詳細*/
.feature-cont{
	display: block;
	clear: both;
	margin-top: 10px;
	background: #fff;
	padding: 15px 15px;
}
.feature-cont img{
	width: 100%;
}

.feature-cont .column2-l{
	display: block;
	float: none;
	width: 100%;
	margin-bottom: 10px;
}

.feature-cont .column2-r{
	display: block;
	float: none;
	width: 100%;
	margin-bottom: 30px;
	font-weight: 500;
}

.feature-cont .column2-r p{
	margin-top: 5px !important;
	font-weight: 400;
}

.feature-cont .time-info{
	margin: 0px 0 20px;
	font-size: 0.9em;
	font-weight: 500;
	color: #e60012;
	line-height: 160%;
	text-align: left;
}



.column2-l:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.column2-l { display: inline-block; }
* html .column2-l{ height: 1%; }
.column2-l{ display: block; }

.column2-l img{
	width: 100%;
}

.intro{
	display: block;
	margin-bottom: 10px;
}


.img80 img{
	display: block;
	width: 100%;
	margin: 40px auto 0;
}

.img100 img{
	display: block;
	width: 100%;
	margin: 20px auto 0;
}

.inner-link a{
	color: #036eb8;
}

.map-c img{
	width: 100%;
}







/* ------------------------- 施術　treatmentページ*/
/* ------------------------- treatmentヘッダー*/


#treatment-topimg{
	background-color: #e2eddf;
}

.headache{background-color: #dfeaf8;}
.neck-pain{background-color: #fbe8cd;}
.stiff-shoulder{background-color: #f0e0d8;}
.arm-hand-pain{background-color: #dae6d6;}
.back-pain{background-color: #c5d8e8;}
.knee-foot-pain{background-color: #f4eecf;}
.insomnia{background-color: #b8ced7;}
.dizzy{background-color: #d2d7ed;}
.traffic-accident{background-color: #dadbda;}
.qa{background-color: #edefe9;}


#treatment-topimg .wrapper-1000{
	display: block;
	width: 100%;
	height: 140px;
	text-align: center;
	padding: 68px 0 0;
	background-image: url(../img/treatment.png);
	background-position: right -20px bottom 0px;
	background-repeat: no-repeat;
	background-size: 50% auto;
	text-align: left;
}

#treatment-topimg01 .wrapper-1000{
	display: block;
	width: 100%;
	height: 150px;
	text-align: center;
	padding: 68px 0 0;
	background-image: url(../img/topimg.png);
	background-position: right 30px bottom 0px;
	background-repeat: no-repeat;
	background-size: 30% auto;
	text-align: left;
}

#treatment-topimg01.headache .wrapper-1000{background-image: url(../img/topimg01.png); background-size: 26% auto; background-position: right 30px bottom 0px;}
#treatment-topimg01.neck-pain .wrapper-1000{background-image: url(../img/topimg02.png);}
#treatment-topimg01.stiff-shoulder .wrapper-1000{background-image: url(../img/topimg03.png); background-size: 35% auto; background-position: right 20px bottom 0px;}
#treatment-topimg01.arm-hand-pain .wrapper-1000{background-image: url(../img/topimg04.png); background-size: 35% auto; background-position: right 20px bottom 0px;}
#treatment-topimg01.back-pain .wrapper-1000{background-image: url(../img/topimg05.png); background-size: 35% auto; background-position: right 5px bottom 0px;}
#treatment-topimg01.knee-foot-pain .wrapper-1000{background-image: url(../img/topimg06.png); background-size: 35% auto; height: 150px; background-position: right 15px bottom 0px;}
#treatment-topimg01.insomnia .wrapper-1000{background-image: url(../img/topimg07.png);background-size: 34% auto; background-position: right 20px bottom 0px;}
#treatment-topimg01.dizzy .wrapper-1000{background-image: url(../img/topimg08.png);}
#treatment-topimg01.traffic-accident .wrapper-1000{background-image: url(../img/topimg09.png); background-position: right 10px bottom 20px;}
#treatment-topimg01.qa .wrapper-1000{background-image: url(../img/topimg-qa.png);}



#treatment-topimg h1,
#treatment-topimg01 h1{
	width: 65%;
	margin-top: 20px;
	font-size: 1.1em;
	border-bottom: 1px dotted #333;
	padding-bottom: 10px;
	text-align: left;
	line-height: 150%;
}
#treatment-topimg h2,
#treatment-topimg01 h2{
	font-size: 0.85em;
	width: 65%;
	line-height: 160%;
}




/* ------------------------- treatment-cont2*/

.treatment-cont2{
	display: block;
	margin-bottom: 20px;
}

.treatment-cont2:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.treatment-cont2 { display: inline-block; }
* html .treatment-cont2{ height: 1%; }
.treatment-cont2{ display: block; }

.treatment-cont h1{
	margin-top: 20px;
	padding: 15px 20px;
	border: 3px solid #036eb8;
	border-radius: 10px;
	font-size: 1.1em;
}


/* ------------------------- 体の部位から探す*/

.jintai-pc{
	display: none;
}


.jintai-sp{
	width: 250px;
	float: none;
	margin: 0 auto;
	text-align: center;
}

.jintai-sp img{
	width: 250px;
	height: auto;
}

.jintai-r{
	float: none;
	width: 100%;
	margin: 20px 0 20px;
	font-size: 0.9em;
}

.jintai-r h3{
	width: 100%;
	margin: 10px 0 0;
	font-size: 1em;
	line-height: 160%;
}



.flow-wrapper{
	display: block;
	width: 900px;
	min-height: 150px;
	margin: 0 auto 0px;
	padding: 0;
	clear: both;
}


.flow-wrapper:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.flow-wrapper{ display: inline-block; }
* html .flow-wrapper{ height: 1%; }
.flow-wrapper{ display: block; }



/* ------------------------- 症状から探す*/

.treatment-cont2 .wrapper-900{
	width: calc(100% - 0px);
}


.treatment-cont2 li a{
	float: none;
	width: calc(100% - 4px);
	padding: 10px 0;
	font-size: 1.1em;
	font-weight: 500;
	border: 2px solid #036eb8;
	border-radius: 10px;
	height: 50px;
	margin: 14px 0;
	background-image: url(../img/nayami01.png);
	background-position: left -9px bottom 0px;
	background-repeat: no-repeat;
	background-size: 24% auto;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
}

.treatment-cont2 li a:hover{
	color: #fff;
	background-color: #036eb8;
	opacity: 1;
	border: 2px solid #036eb8;
}

.treatment-cont2 li:nth-child(2) a{background-image: url(../img/nayami02.png);}
.treatment-cont2 li:nth-child(3) a{background-image: url(../img/nayami03.png);}
.treatment-cont2 li:nth-child(4) a{background-image: url(../img/nayami04.png);}
.treatment-cont2 li:nth-child(5) a{background-image: url(../img/nayami05.png);}
.treatment-cont2 li:nth-child(6) a{background-image: url(../img/nayami06.png);}
.treatment-cont2 li:nth-child(7) a{background-image: url(../img/nayami07.png);}
.treatment-cont2 li:nth-child(8) a{background-image: url(../img/nayami09.png);}
.treatment-cont2 li:nth-child(9) a{background-image: url(../img/nayami08.png);}

.treatment-cont2 li a:nth-child(2n-1){
	margin-right: 0px;
}
.treatment-cont2 li a:nth-child(2n){
	margin-left: 0px;
}

.treatment-cont2 li a:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 10px;
	left: 23%;
	background-image: url(../img/arrow1.png);
	background-repeat: no-repeat;
	background-size: 11px;
	background-position: 0 0px;
	width: 28%;
	height: 40px;
	margin-right: 2px;
}

.treatment-cont2 li a:hover:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 10px;
	left: 23%;
	background-image: url(../img/arrow1w.png);
	background-repeat: no-repeat;
	background-size: 11px;
	background-position: 0 0px;
	width: 28%;
	height: 40px;
	margin-right: 2px;
}


.treatment-cont2 h1{
	margin-top: 20px;
	padding: 10px 15px;
	color:#fff;
	border: 3px solid #036eb8;
	border-radius: 10px;
	background-color: #036eb8;
	clear: both;
	font-size: 1em;
	text-align: left;
	line-height: 160%;
}

.treatment-cont2 h2{
	display: block;
	border-bottom: 1px solid #ccc;
	margin: 20px 0px ;
	padding-bottom: 10px;
	font-size: 1.1em;
	font-weight: 500;
}

.treatment-cont2 h3{
	display: block;
	margin: 0 0 10px;
	font-size: 0.9em;
	line-height: 170%;
}



/* ------------------------- 施術の流れ*/

.flow-wrapper{
	display: block;
	width: 100%;
	min-height: 150px;
	margin: 0px auto 0px;
	padding: 0;
	clear: both;
}


.flow-wrapper:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.flow-wrapper{ display: inline-block; }
* html .flow-wrapper{ height: 1%; }
.flow-wrapper{ display: block; }


.treatment-cont2 .m-bottom30{
	margin: 40px 0 20px;
}

.flow{
	float: none;
	margin: 0px;
	padding: 10px auto;
	width: calc(100% - 6px);
	font-size: 1.1em;
	font-weight: 500;
	border: 3px solid #999;
	border-radius: 10px;
	height: 40px;
	line-height: 260%;
	text-align: center;
}


.flow-r:after{
	content: '';
	display: block;
	position: relative;
	bottom: -5px;
	left: 47%;
	background-image: url(../img/arrow-down-g.png);
	background-repeat: no-repeat;
	background-size: 40% 80%;
	background-position: 0 0px;
	width: 120px;
	height: 50px;
}

.flow-wrapper:last-child .flow-r:after{
	content: '';
	display: none;
}

.flow-r{
	float: none;
	margin: 10px 0;
	font-size: 1em;
	width: calc(100% - 22px);
}


/* ------------------------- 施術詳細各ページ*/


.treatment-box{
	display: block;
	background-color: #fbfaf2;
	padding: 15px 10px;
	border-bottom: 1px solid #ccc;
}

.condition{
	min-height: 60px;
	font-size: 1em;
	font-weight: 500;
	line-height: 180%;
	margin-top: 10px;
	border-bottom: 1px solid #ccc;
	padding: 10px 20px 10px 80px;
	background-image: url(../img/icon-condition.png);
	background-repeat: no-repeat;
	background-size: 60px;
	background-position: 10px 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
}



.condition:hover{
	color: #036eb8;
	cursor: pointer;
}

.cause{
	min-height: 60px;
	font-size: 1em;
	line-height: 180%;
	border-bottom: 1px solid #ccc;
	padding: 10px 10px 10px 70px;
	background-image: url(../img/icon-cause.png);
	background-repeat: no-repeat;
	background-size: 60px;
	background-position: 0px 0px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
}

.cause2{
	min-height: 60px;
	font-size: 1em;
	line-height: 180%;
	border-bottom: 1px solid #ccc;
	padding: 10px 10px 10px 70px;
	background-image: url(../img/icon-cause.png);
	background-repeat: no-repeat;
	background-size: 60px;
	background-position: 0px 0px;
	display: block;
}

.treatment-nanairo{
	min-height: 60px;
	font-size: 1em;
	line-height: 180%;
	margin-top: 10px;
	padding: 10px 10px 10px 70px;
	background-image: url(../img/icon-treatment.png);
	background-repeat: no-repeat;
	background-size: 60px;
	background-position: 0px 0px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
	flex-wrap:wrap;
}

.treatment-nanairo a{
	color: #036eb8;
}


.treatment-nanairo a:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 2px;
	background-image: url(../img/linkmark.gif);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 0px;
	width: 12px;
	height: 15px;
	margin-right: 2px;
}

.treatment-nanairo img{
	width: 100%;
	height: auto;
}

.open-contents li{
	list-style: disc;
	margin-left: 24px;
}

ul.traffic li{
	position: static;
	list-style: disc;
	margin-left: 24px;
	font-size: 0.9em;
}

.treatment-nanairo li{
	display: block;
	float: left;
	margin-right: 10px;

}


.treatment-nanairo li a{
	display: block;
	font-size: 1.4em;
	border: 2px solid #036eb8;
	border-radius: 10px;
	height: 20px;
	width: 80px;
	background-image: none !important;
	padding: 0 0 40px 20px;
	line-height: 120%;
}

.treatment-nanairo li a:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 20px;
	left: 10%;
	background-image: url(../img/arrow1.png);
	background-repeat: no-repeat;
	background-size: 11px;
	background-position: 0 0px;
	width: 28%;
	height: 40px;
	margin-right: 2px;
}

.treatment-nanairo li a:hover:before{
	content: '';
	display: inline-block;
	position: relative;
	top: 20px;
	left: 10%;
	background-image: url(../img/arrow1w.png);
	background-repeat: no-repeat;
	background-size: 11px;
	background-position: 0 0px;
	width: 28%;
	height: 40px;
	margin-right: 2px;
}

.bold-line{
	font-weight: 500;
	color: #0071bb;
}


/* ------------------------- 各施術ページの相談枠*/
.contact-area{
	display: none;
}

.contact-area-sp img{
	width: 100%;
}

.contact-area-sp{
	max-width: 400px !important;
	display: block;
	margin: 10px auto 0;
}


/* ------------------------- よくある質問*/


.question{
	min-height: 50px;
	font-size: 1em;
	font-weight: 500;
	line-height: 180%;
	margin-top: 10px;
	border-bottom: 1px solid #ccc;
	padding: 10px 10px 10px 70px;
	background-image: url(../img/icon-question.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: 10px 10px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
}

.question:nth-child(1){
	margin-top: 20px;
}

.question:hover{
	color: #036eb8;
	cursor: pointer;
}

.answer{
	min-height: 50px;
	font-size: 1em;
	line-height: 180%;
	padding: 10px 0 10px 60px;
	background-image: url(../img/icon-answer.png);
	background-repeat: no-repeat;
	background-size: 50px;
	background-position: 0px 0px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	align-items: center; /* 縦方向中央揃え */
}



/* ------------------------- news*/

#news-topimg{
	background-color: #f8f2e3;
}

#news-topimg .wrapper-900{
	display: block;
	width: calc(100% - 30px);
	height: 40px;
	text-align: center;
	padding: 90px 15px 10px;
}

#news-topimg .wrapper-900 h1{
	text-align: left;
	font-size: 1.3em;
}

.news{
	width: calc(100% - 30px);
	margin: 30px auto;
	font-size: 1em;
	line-height: 180%;
}


.news h1{
	font-size: 1.3em;
	font-weight: 700;
	border-bottom: 2px solid #036eb8;
	padding-bottom: 10px;
	color: #333;
	text-align: left;
}

.news h2{
	font-size: 1.1em;
	font-weight: 700;
	margin: 40px 0 0px;
	padding: 0;
	border-bottom: 1px dotted #036eb8;
	padding-bottom: 10px;
	color: #036eb8;
	text-align: left;
}



.news h2:before{
	content: '●';
	display: inline-block;
	position: relative;
	margin-right: 2px;
}

.news h3{
	font-size: 1.1em;
	font-weight: 700;
	margin: 20px 0;
	padding: 0;
	color: #333;
	text-align: left;
}


#news-topimg h1 .t16{
	font-size: 12px;
}

.news img{
	display: block;
	width: 100%;
	height: auto;
	padding-bottom: 20px;
}


/* ---------------------------お問合せ先- contact*/


#contact-wrapper{
	display: block;
	width: calc(100% - 40px);
	margin-top: 80px;
	border-top: 1px solid #999;
	padding: 0 20px;
}


#contact{
	position: relative;
	display: block;
	width: 100%;
	padding: 20px 0 20px;
	margin: 0 auto 0px;
	letter-spacing: 0em;
}


#contact h1{
	width: 100%;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 3px solid #488a5d;
	padding: 0px 0 10px;
	margin: 20px 0 10px;
	text-align: left;
}

#contact h2{
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px 0 30px;
	text-align: left;
}

#contact-for{
	position: static;

}

#contact-form{
	font-size: 21px;
	margin: 40px 0 30px;
	border-bottom: 1px dotted #999;
	padding-bottom: 5px;
}

#contact-form .t12{
	font-size: 10px;
}

#contact-tel{
	font-size: 28px;
	letter-spacing: 0.05em;
}

@media screen and (max-width: 374px) {
/* ------------------------- 4inchスマホ対応*/
#contact-tel{
	font-size: 24px;
	letter-spacing: 0em;
}
#contact h2{
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 10px 0 30px;
	text-align: left;
	letter-spacing: 0em;
}
}

#contact-form a{
	color: #006e50;
}


#contact-form a:hover{
	opacity: 0.6;
}



#contact-form a::before{
	content: '';
	display: inline-block;
	background-image: url(../img/link-contact.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 0 2px;
	width: 18px;
	height: 24px;
}


.cont404{
	margin: 20px 0 10px;
	font-size: 1em;
	line-height: 1.3em;
	text-align: center;
}


/* ------------------------- footer */
/* フッター */

#footer{
	width: 100%;
	margin: 30px auto 100px;	
	padding-top: 25px 0;
	background-color: #fff;
	border-top: 1px solid #ccc;
}

.footer-l{
	float:none;
	width: 100%;
}

.footer-r{
	float:none;
	width: 100%;
	font-size: 12px;
	font-weight: 500;
	text-align: left;
	margin: 20px 0 0 0px;
}

.footer-r img{
	margin-top: 10px;
	width: 100%;
	border-top: 0px solid #ccc;
	padding-top: 0px;
}


#f-ci-g{
	float:none;
	margin: 10px 0 0;
}

#f-c-copy-ci{
	display: block;
	font-size: 14px;
	font-weight: 500;
	position: relative;
	letter-spacing: 0.1em;
	top: 15px;
	margin: 0;
}

#f-ci{
	position: relative;
	top: -10px;
	display: block;
	margin: 0;
}

#f-ci img{
	width: 180px;
	height auto;
}



#f-ci img a:hover{
	opacity: 0.6;
}

#f-c-wrapper{
	clear: both;
	margin-top: 0px;
}

#f-c-copy{
	float:left;
    line-height:150%;
	font-size: 12px;
	font-weight: 700;
	margin: 3px 0 0 0;
}

#f-address{
	font-size: 12px;
	margin-bottom:12px;
}


#f-reserve{
	display: none;
	float:left;
	padding: 2px 0px;
	background-color: #000;
	border-radius: 4px;
	font-size: 10px;
	color: #fff;
	margin: 0px 0 0 0px;
}
#f-tel,
#f-tel a{
	float:none;
	color: #036eb8;
	font-size: 40px;
	font-weight: bold;
	margin: 0px 0 0px 0px;
}

#sns{
	display: block;
	clear:both;
	margin-bottom:20px;
	height: 80px;
}

.sns a{
	width: calc(33% - 27px);
	float: left;
	display: inline-block;
	margin-top: 30px;
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-weight: 500;
	line-height: 250%;
	font-size: 0.9em;
	letter-spacing: 0;
}

#sns .sns:nth-child(1) a{
	margin-right: 5px;
}

#sns .sns:last-child a{
	margin-left: 5px;
}


.sns img{
	height:20px;
	margin-right: 5px;
}


.sns-i{
	display: inline-block;
	float: left;
	margin-top: 0px;
}
.sns-f{
	line-height: 140%;
	display: inline-block;
}


#pagetop{
	position: fixed;
	bottom: -60px;
	right: 30px;
}

#pagetop img{
	width: 40px;
}


small{
	float: left;
	margin: 20px 0;
}


}