@charset "utf-8";

/*-----------------------------

　リセットCSS + サイト共通設定

------------------------------*/

/* 全ての要素に対する余白初期値設定 */
body,div,span,object,
h1,h2,h3,h4,h5,h6,
p,blockquote, pre,
ul,ol,dl,dt,dd,li,
abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,samp,
small,strong,sub,sup,var,
b,i,
table,caption,tbody,tfoot,thead,tr,th,td,
fieldset,form,label,legend,select,option,input,
address,pre,strong,em,iframe,img,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video
{
	margin:0;
	padding:0;
	font-size:100%;
	border:0;
}

/* デフォルト文字設定 */
body{
	color:#222;
	font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size:13px;
	*font-size:small;
	line-height:1.4;
}

* html body {	/* for IF6 */
	font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

/* インライン要素をブロック要素に変更 */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

/* リストマーカーを非表示 */
ul,ol{
	list-style-type:none;
}

/* テーブルセルのボーダーの設定 */ 
table {
	border-collapse: collapse; 
	border-spacing: 0;
}

/* 画像とフォームパーツの上下位置をテキストの真ん中に */
img, input, select, textarea { 
	vertical-align: middle;
}

/* デフォルトリンク色の設定 */
a:link { color:#0078ff; }

a:visited { color:#0078ff;}

a:hover { color:#54c5ff; }

/* 画像リンクの設定
a img{
	opacity:1;
	filter: alpha(opacity=100);
}

a:hover img{
	opacity:0.7;
	filter: alpha(opacity=75);
}
*/

/*	clearfix
------------------------------*/
.clearfix:after {/*for modern browser*/
   content: "";
   display: block;
   clear: both;
}

* html .clearfix { zoom:1; } /*for IE6*/
*:first-child+html .clearfix { zoom:1; } /*for IE7*/



/* ########### 基本スタイル ########### */


/* #page
-------------------------------------------------------- */
#page {
	max-width: 960px;
	margin: 0 auto;
	text-align: left;
}

/* header
-------------------------------------------------------- */
#header{ margin-top:30px; }

/* #gnav
-------------------------------------------------------- */
#logo { float:left; }

* html  #gNav { height: 1%; }

#gnav {
	float:right;
	overflow: hidden;
	padding: 0;
	margin-bottom: 14px;
}

#gnav li { float: left; }

#toggle { display: none; }

/* loading
-------------------------------------------------------- */
#loader {
	width: 86px;
	height: 20px;
	display: none;
	position: fixed;
	_position: absolute; /* IE6 */
	top: 50%;
	left: 50%;
	margin-top: -10px; /* heightの半分のマイナス値 */
	margin-left: -43px; /* widthの半分のマイナス値 */
	z-index: 100;
}

#transparency {
	width: 100%;
	height: 100%;
	display: none;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 50;
}

/* index
-------------------------------------------------------- */
#home h2{ display:none; }

#info{ margin-bottom: 22px; }

#info p{
	font-size:108%;
	line-height:1.8;
	padding: 14px 10px 0px 30px;
}

#news {
	float:left;
	padding-left:30px;
	width:410px;
}

#news img { margin-bottom:6px; }

#contact {
	float:right;
	width:440px;
}

img.spot {
	vertical-align: middle;
}

.top_bnr_crystal { margin: 11px 0; }

.new_top {
	font-size: 77%;
	color:#ff69b4;
	font-weight: 400;
}

/* pankuzu
---------------------------*/
#pankuzu{
	margin: 8px 0 20px 0;
	padding-left: 10px;
}

#pankuzu li{
	display:inline;
	font-size:85%;
}

#pankuzu a{
	padding-right:15px;
	background:url(../img/ico_arw.gif) right center no-repeat;
}

.contents_box {
	clear: both;
	max-width: 900px;
	margin:30px 0px 50px 60px;
}

.contents_box h1{
	font-size: 154%;
	color: #0096ff;
	border-bottom:#ccc 1px dotted;
    padding: 5px 15px 2px 0;
	margin-bottom: 20px;
}

.contents_box h2{
	font-size: 154%;
	color: #0096ff;
	border-bottom:#ccc 1px dotted;
    padding: 5px 15px 2px 0;
	margin-bottom: 20px;
}
	
.contents_box p {
	font-size: 116%;
	line-height: 1.8em;
	color: #333;
	margin-bottom: 10px;
}

.contents_box .sub_img {
	float: right;
	padding: 20px 10px 0 0;
}

.emphasis { color:#0096ff; }

.emphasis_star { color:#f93; }

.emphasis_heart { color:#f9c; }

.comment_txt {
	font-size: 100%;
	color: #007cd6;
	text-align: right;
	margin: 20px 20px 0px 0px;
}


/* contact
------------------------------------------*/
.top_column { 
	clear: both;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	padding-top: 40px;
}

#fb_box {
	float:left;
	padding-left: 30px;
	width: 350px;
}

#fb_box h3 { 
	text-align: left;
	margin-bottom: 5px;
}

#Instagram_box {
	float: right;
	width: 370px;
	text-align: left;
	max-height: 380px;
	padding-top: 26px;
}

#Instagram_box h3 { margin-bottom: 11px; }

.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe[style]{
    width: 100% !important;
}


/* main_menu
---------------------------*/
.menu_box {
	clear: both;
	max-width: 960px;
	margin:30px 0px 50px 0px;
}

.menu_main{
	width:700px;
	margin-bottom:40px;
	float:right;
}

.menu_box h1{
	font-size: 154%;
	color: #0096ff;
	border-bottom:#ccc 1px dotted;
	padding-left: 2px;
	margin-bottom: 20px;
}

.menu_box h2{
	font-size: 154%;
	color: #0096ff;
	border-bottom:#ccc 1px dotted;
	padding-left: 2px;
	margin-bottom: 20px;
}
	
.menu_box p {
	font-size: 116%;
	line-height: 1.8em;
	color: #333;
	margin-bottom: 10px;
}

.menu_box .notes {
	font-size: 100%;
	line-height: 2em;
	color: #333;
	margin-bottom: 10px;
}

.new_ttl { margin-bottom: 10px; }

.new_bnr { margin: 0 0 15px 20px; }

/* side
---------------------------*/
.side{
	max-width:220px;
	margin-bottom:40px;
	padding-top: 2px;
	float:left;
}

/* menu_nav
------------------------------------------*/
.menu_nav {
	font-size: 100%;
	font-weight: bold;
	list-style: none;
	margin-bottom:30px;
}

.menu_nav h3 {
	font-size: 139%;
	color: #0096ff;
	border-bottom:#ccc 1px dotted;
	padding-left: 6px;
	margin-bottom: 12px;
}

.menu_nav li a {
	text-decoration: none;
	display: block;
	color: #666;
	background: #fff;
	width: 200px;
	padding: 2px 0 8px 20px;
	background: url(../img/ico_menu_arw.gif) no-repeat 3px 0.5em;
}

.menu_nav li a:hover { color: #fff; }

.preparation {
	display: block;
	color: #b6b4b4;
	width: 200px;
	padding: 2px 0 8px 20px;
	background: url(../img/allow2.gif) no-repeat 3px 0.5em;
}

.new {
	font-size: 77%;
	color:#ff69b4;
}

/* pagetop
---------------------------*/
.pagetop {
	clear:both;
	float:right;
	overflow: hidden;
	margin:0px 30px 0px 0px;
}

#main h2{ margin-bottom:30px; }

#main p{
	margin-bottom:15px;
	line-height:1.7;
}

.icon{ text-align:right; }

.icon a{
	padding-left:10px;
	background:url(../img/ico_arw02.gif) left center no-repeat;
}

/* .viewer
------------------------- */
.viewer {
    margin: 0 auto 32px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.viewer ul {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.viewer ul li {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
}
.viewer ul li img { width: 100%; }
.viewer ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
.viewer ul {
    display: inline-block;
    overflow: hidden;
}

/* profile
------------------------------------------*/
#profile {
	clear:both;
	width: 360px;
	height: 509px;
	text-align: left;
	overflow: hidden;
	position: relative;
}

#profile img {
	top: 0;
	left: 0;
	position: absolute;
}

.closebtn {
	text-align:center;
	padding-bottom: 40px;
}

/* event
------------------------------------------*/
#event {
	width: 960px;
	margin-top: 5px;
}

/* footer
------------------------------------------*/
#sns {
	clear:both;
	height:26px;
	float:right;
	margin-bottom: 14px;
}

.fb {
	width:26px;
	height:26px;
	float:left;
	padding-right: 9px
}

.instagram {
	width:26px;
	height:26px;
	float:right;
	padding-right: 3px
}

.privacy {
	clear:both;
	width:110px;
	height:16px;
	float:right;
}

#footer ul { margin:7px 0px 0px 0px; }

#footer ul li {
	display: inline;
	padding:0px 0px 0px 20px;
}

#footer .copyright {
	clear:both;
	text-align:center;
	padding-bottom:20px;
}

/* カレンダー
------------------------------------------*/
.cal_img {
	clear:both;
	text-align:center;
	padding:5px 0 10px 0;
}

.cal_wrapper {
	max-width: 800px; /* 最大幅 */
	min-width: 300px; /* 最小幅 */
	margin: 2.0833% auto;
}
     
.googlecal {
	position: relative;
	padding-bottom: 100%; /* 縦横比 */
	height: 0;
	overflow: hidden;
}

.googlecal iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
     
@media only screen and (min-width: 600px) {
	/* 画面幅が600px以上の場合の縦横比の指定 */
	.googlecal { padding-bottom: 75%; }
}


/* ########### 630px以下 ########### */
@media (max-width: 630px) {

#logo {
	width:80%;
	margin-bottom: 10px;
}

.contents_box .sub_img { float: none; }

.privacy {
	float:left;
	width:auto;
	margin: 20px 0;
}

#sns {
	float:left;
	padding-left: 10px;
	margin-bottom: 8px;
}

.instagram, .fb { width:auto; }

.menu_main,.side {
	float:none;
	margin-left: 10px;
}

#header {
  margin: 10px 0 30px;
  background: #fff;
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: "alpha(opacity=100)";
  -moz-box-shadow: 0 10px 6px -7px #eae7de;
  -webkit-box-shadow: 0 10px 6px -7px #eae7de;
  box-shadow: 0 10px 6px -7px #eae7de;
}

#news {
	width:94%;
	border-bottom: dotted 1px #CFCFCF;
}

#contact, #fb_box, #Instagram_box { width:94%; }

#news, #info p{	padding-left:10px; }

#news h3::after,#contact h3::after,#Instagram_box h3::after,#fb_box h3::after{
	display: inline-block;
	content: attr(data-label); /*contentでdata-label属性を指定*/
	color: #003d94;
	font-size: 20px;
	font-weight: normal;
	line-height: 18px;
}

#news span::after{
	display: inline-block;
	content: attr(data-label); /*contentでdata-label属性を指定*/
	padding: 0 10px 10px;
	color: #0096ff;
	font-size: 14px;
	text-decoration:underline;
	line-height: 24px;
}

#news h3 img,#news span img,#contact h3 img,#Instagram_box h3 img,#fb_box h3 img{ display: none; }

#news h3, #contact h3, #Instagram_box h3, #fb_box h3 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	font-family: 'Sorts Mill Goudy', serif;
    padding: 0.4em 0 0 3.5em ;
    background: url(../img/ttl_sp_bg.png) no-repeat 0px 0px;
	background-size: 50px 20px;
}

#news span {
	padding:0 0 15px 15px;
	margin-bottom: 20px;
	background: url(../img/ico_arw2.png) no-repeat 15px 0.3em;
}

#sns .fb span {
	display: inline-block;
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background:#3b5998 url(../img/ico_fb_sp.png) no-repeat center;
}

#sns .instagram span {
	display: inline-block;
	width: 50px;
	height: 50px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background:#00bbdd url(../img/ico_instagram_sp.png) no-repeat center;
}

#sns span img {	display: none; }

#sns span {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.privacy span::after{
	display: inline-block;
	content: attr(data-label); /*contentでdata-label属性を指定*/
	padding: 8px;
	color: #0096ff;
	font-size: 14px;
	text-decoration:underline;
	line-height: 24px;
}

.privacy span img{ display: none; }

.privacy span{
	padding:0 0 15px 15px;
	margin-bottom: 20px;
	background: url(../img/ico_arw2.png) no-repeat 15px 0.3em;
}

#footer .copyright { padding-top: 10px; }


#therapist h2::after{
	display: inline-block;
	content: attr(data-label); /*contentでdata-label属性を指定*/
	padding: 0 2px 5px;
	color: #0096ff;
	font-size: 18px;
	line-height: 18px;
}

#therapist h2 img{ display: none; }

#therapist h2 {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0.2em;
	border-bottom: dotted 1px #CFCFCF;
}


}

/* ########### 910px以下 ########### */
@media (max-width: 910px) {

/* img調整
------------------------------------------*/
img{
    max-width: 98%;
    height: auto;
}

/* gnav
------------------------------------------*/
#gnav {
	 width: 100%;
	 margin-bottom: 0;
}

#gnav { background: none; }

#gnav ul {
	 width: 100%;
	 border-top: solid 1px #fff;
}

#gnav li { float: none; }

#gnav ul li img { display: none; }

#gnav li a {
	 display: block;
     border-bottom: solid 1px #fff;
     text-decoration: none;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

#gnav li a:before { content: attr(data-label); }

#spmenu li{
	display: block;
	float: left;
}

#spmenu li a {
	display: block;
	width: 94%;
	margin: 0 auto;
	padding: 10px 0 10px;
	background-color: #4cb4f4;
	font-size: 16px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
}

#spmenu li:last-child a{ border: none; }

#spmenu li a:hover{	background: #0195ff; }

#spmenu { display: none; }

#spmenu li { width: 100%; }

#toggle {
	display: block;
	background: #4cb4f4;
	-webkit-appearance: none;
	appearance: none;
	position:absolute;
	top:20px;
	right: 15px;
	width: 32px;
	height: 32px;
	margin: 20px 0 5px 32px;
	background-color: transparent;
	border: none;
}

.bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #757575;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
}

.bar-01 { top: 0; }

.bar-02 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.bar-03 { bottom: 0; }

#toggle.is--active .bar {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#toggle.is--active .bar-02 {
  display: none;
}

#toggle.is--active .bar-03 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#toggle.is--active .bar-01 {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#contact, #Instagram_box, #gnav { float:left; }

#news, #fb_box { padding-left: 10px; }

#contact {
	padding-left: 10px;
	margin:30px 0px 0px;
}
	
#Instagram_box {
	padding-left: 10px;
	margin:50px 0px 10px;
}

.pagetop { margin:0px 10px 0px 0px; }

.pagetop img { margin-right: 1px; }

.menu_main,.side {
	float:none;
	width:90%;
    margin-left: auto;
    margin-right: auto;
}

.side {
	width:90%;
    margin-left: 10px;
	padding: 14px 10px 10px;
	border:2px solid #EBEBEB;
	border-radius: 4px;
}

.contents_box {
	width:90%;
    margin-left: auto;
    margin-right: auto;
}

}

#fade {
    position:absolute; /* ie6 */
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}