/*
Theme Name: Contrail_type02
Theme URI: https://wordpress.org/themes/twentyfifteen/
Author: Kochan
Author URI: https://wordpress.org/
Description: 『contrail』用のテーマ

*/

body {
	font-size:15px;
	overflow-x:hidden;
}

body #pageWide {
	overflow-x:hidden;
	width:100%;
	position:relative;
}

header,
nav,
section,
footer,
figure{
	display:block;
}

img {
	max-width:100%;
	height:auto;
}

.wideFrame {
	width:1024px;
	margin-left:auto;
	margin-right:auto;
}

.clear {
	clear:both;
}
.clearfix:after {
	clear:both;
	visibility:hidden;
	display:block;
	content:" ";
}

.map {
	position:relative;
	width:100%;
	height:0;
	overflow:hidden;
	padding:60% 0 0 0;
	border:solid 1px #ccc;
}
.map iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.textRight {
	text-align:right;
}

#smNav {
	display:none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
	border:solid 1px #ccc;
	padding:7px 0;
	text-indent:1em;
	-webkit-appearance:none;
}

input[type="submit"],
input[type="reset"],
input[type="button"]{
	cursor:pointer;
	padding:5px 9px;
	color:#eef;
	background:#46aabd;
	text-align:center;
	font-size:1.05em;
	-webkit-appearance:none;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover{
	color:#eef;
	background:#68ccce;
}

.fontDelete {
text-decoration:line-through;
}

.textChange {
	text-decoration:underline;
	color:#f63;
}
.texttypeCaution{
	color:#f00;
	font-size:1.13em;
	text-align:center;
	padding:5px 10px;
	border:solid 1px #f33;
}

.iconYcate {
	font-size:0.81em;
	color:#666;
	padding:0.22em 0.1em;
	line-height:1.1em;
	font-weight:bold;
	position:relative;
}
.iconYcate.eal {
	color:#6781D6;
}
.iconYcate.kids {
	color:#ffaf19;
}
.iconYcate:after {
	content:"/";
	/*position:absolute;
	right:-5px;
	top:1px;*/
	margin-left:2px;
	color:#ccc;
	font-size:0.81em;
}

#emaNews {
	border:solid 1px #f00;
	padding:0.7em 1.0em;
	margin-bottom:2.0em;
	text-align:center;
	font-size:1.1em;
	background:#fffed2;
	display:none;
}
#emaNews,
#emaNews a {
	color:#ff0000;
	font-weight:bold;
}

/*************************************************************
※レイアウト関連
*************************************************************/

/* ウィンドウ幅が0〜479pxの場合に適用するCSS */
@media screen and ( min-width:768px ){

	.flex{
		display: flex;
		flex-wrap: wrap;
	}

	.flex_1,.flex_2,.flex_3,.flex_4,.flex_5,.flex_6,.flex_7,.flex_8,.flex_9,.flex_10{padding:0.5em 1.0em;box-sizing:border-box;}

	.flex_1{width:10%;}

	.flex_2{width:20%;}

	.flex_3{width:30%;}

	.flex_4{width:40%;}

	.flex_5{width:50%;}

	.flex_6{width:60%;}

	.flex_7{width:70%;}

	.flex_8{width:80%;}

	.flex_9{width:90%;}

	.flex_10{width:100%;}

}

/*************************************************************
※フォント・テキスト関連
*************************************************************/

.font {}

.font.center{
	text-align:center;
}
.font.right{
	text-align:right;
}

.font.large{
	font-size:1.2em;
}

.font.bold{
	font-weight:bold;
}

.font.p01{
	color:#ff5151;
}
.font.red {
	color:#ff0000!important;
}

.font.brackets::before{
	content:"< ";
}
.font.brackets:after{
	content:" >";
}


/*************************************************************
※リスト関連
*************************************************************/

#contents .framePage li{
	padding:0.3em 0 0.3em 1.5em;
	position:relative;
}
#contents .framePage li span{
	position:absolute;
	left:0.7em;
	top:0.3em;
}
#contents .framePage ul.p01 li::before{
	content:"";
	position:absolute;
	top:0.9em;
	left:0.5em;
	background:#85d1e0;
	display:block;
	width:5px;
	height:5px;
}


#contents .framePage ul.p02 li{
	padding:0.7em 0 0.7em 2.2em;
}
#contents .framePage ul.p02 li::before{
	content:"";
	position:absolute;
	top:0.9em;
	left:0.5em;
	background:#85d1e0;
	display:block;
	width:15px;
	height:15px;
}

/*************************************************************
#header
*************************************************************/

#header {
	background:#58bbce;
	border-bottom:solid 1px #fff;
}
#header .wideFrame {
	height:70px;
	position:relative;
	transition-property: height;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
}

#header h1 {
	position:absolute;
	left:40px;
	top:0;
	z-index:20;
	transition-property:left, top;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
}
#header h1 a {
	width:182px;
	height:0;
	overflow:hidden;
	display:block;
	padding-top:70px;
	background:url(dafault/css/css_img/siteID.png) no-repeat left top;
	background-size:100%;
	transition-property:width, padding-top;
	transition-duration:0.3s;
	transition-timing-function:ease-in-out;
}

#header #btmNavSm {
	display:none;
}

/*************************************************************
#glNav
*************************************************************/

#glNav {
	position:absolute;
	right:0;
	bottom:0;
	z-index:20;
}

#glNav ul {
	border-right:solid 1px #fff;
}
#glNav li {
	float:left;
	border-left:solid 1px #fff;
	position:relative;
	transition-property:background-position-y!important;
	transition-duration:0.25s!important;
	transition-timing-function:ease-in-out!important;
}
#glNav > li {
	position:relative;
}
#glNav > ul > li {
	background-repeat:no-repeat;
	background-image:url(dafault/css/css_img/glNavBtmBox.svg);
}
#glNav li a {
	display:block;
	height:0;
	overflow:hidden;
	padding-top:53px;
	background-repeat:no-repeat;
	background-image:url(dafault/css/css_img/glNavBtm.svg);
}

/*各ナビゲーションボタン設定*/
/*#glNav li#linkIntro a {
	background-position:0 top;
	width:162px;
}
#glNav li#linkIntro a:hover {background-position:0 bottom;}

#glNav li#linkOffice a {
	background-position:-162px top;
	width:185px;
}
#glNav li#linkOffice a:hover {background-position:-162px bottom;}

#glNav li#linkPrivacy a {
	background-position:-347px top;
	width:221px;
}
#glNav li#linkPrivacy a:hover {background-position:-347px bottom;}

#glNav li#linkContact a {
	background-position:-568px top;
	width:157px;
}
#glNav li#linkContact a:hover {background-position:-568px bottom;}*/
#glNav li#linkStudio{
	background-position:0 50px;
}
#glNav li#linkStudio:hover{
	background-position-y:0;
}
#glNav li#linkStudio a{
	background-position:0 top;
	width:166px;
}

#glNav li#linkBegginer{
	background-position:-166px 50px;
}
#glNav li#linkBegginer:hover{
	background-position-y:0;
}
#glNav li#linkBegginer a{
	background-position:-164px top;
	width:106px;
}

#glNav li#linkRelaxation{
	background-position:-162px 50px;
}
#glNav li#linkRelaxation:hover{
	background-position-y:0;
}
#glNav li#linkRelaxation a{
	background-position:-162px top;
	width:185px;
}

#glNav li#linkGallery{
	background-position:-347px 50px;
}
#glNav li#linkGallery:hover{
	background-position-y:0;
}
#glNav li#linkGallery a{
	background-position:-347px top;
	width:113px;
}

#glNav li#linkContact {
	background-position:-460px 50px;
}
#glNav li#linkContact:hover {
	background-position-y:0;
}
#glNav li#linkContact a {
	background-position:-460px top;
	width:107px;
}

#glNav li#linkRecruit {
	background-position:-567px 50px;
}
#glNav li#linkRecruit:hover {
	background-position-y:0;
}
#glNav li#linkRecruit a {
	background-position:-567px top;
	width:163px;
}

/*サブメニュー*/
#glNav li ul{
	position:absolute;
	left:0;
	top:53px;
	display:none;
}
/*#glNav li:hover > ul{
	display:block;
}*/
#glNav li li{
	float:none;
	width:250px !important;
	position:relative;
}
#glNav li li a{
	display:block;
	width:auto;
	background:#eee;
	color:#333;
	padding:10px 20px;
	height:auto;
	border:none;
	text-decoration:none;
	width:auto!important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#glNav li li a:hover{
	background:#999;
	color:#eee;
}
#glNav li ul ul{
	left:250px;
	top:0;
}


/*************************************************************
#footer
*************************************************************/

#footer{
	background:#46aabd;
}

#footer a{
	color:#b3f3ff;
	text-decoration:none;
}

#footer .wideFrame{
	position:relative;
	padding-bottom:55px;
}
#footer #boxBnrYogaroom {
	position:absolute;
	left:0;
	top:20px;
	line-height:0;
	z-index:30;
	transition-property: left, top;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
}
#footer #boxBnrYogaroom img {
	border:solid 1px #fff;
}
#footer #boxBnrYogaroom a:hover img {
	opacity:0.8;
}

#footer #navFooter {
	position:absolute;
	right:0;
	top:0;
	max-width:1024px;
	border-right:solid 1px #5f8cd5;
}
#footer #navFooter li {
	float:left;
	border-left:solid 1px #5de5ff;
}
#footer #navFooter li a {
	display:block;
	padding:20px 35px;
}

#footer #txtCopyright {
	width:100%;
	position:absolute;
	bottom:20px;
	left:0;
	text-align:center;
}
#footer #txtCopyright a {
	color:#5de5ff;
}

#footer #btmScroll {
	position:fixed;
	right:10px;
	bottom:15px;
	display:none;
}
#footer #btmScroll a {
	width:100px;
	display:block;
	height:0;
	overflow:hidden;
	padding-top:100px;
	background:url(dafault/css/css_img/btmScrollTop.png) no-repeat left top;
}

/*大マップの定義*/
#footMap {
	line-height:0;
	width:100%;
	/*height:450px;*/
	height:0;
	position:relative;
	overflow:hidden;
	padding-bottom:570px;
	background:#eee;
}
#footMap iframe {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

#listBnrSnspage {
	/*padding-top:135px;*/
	padding-top:240px;
	margin-bottom:35px;
	height:105px;
	position:relative;
}
#listBnrSnspage li.smf {
	display:none;
	bottom:-30px;
	width:100px;
}
#listBnrSnspage li {
	position:absolute;
	z-index:30;
	top:100px;
}
#listBnrSnspage li.fb {
	left:0;
}
#listBnrSnspage li.is {
	right:0;
}
#listBnrSnspage li.other {
	position: relative;
	text-align:center;
	left:auto;
	top:auto;
	float:left;
	padding:0 15px;
}
/*#listBnrSnspage li.other:nth-child(odd) {
	float:left;
}
#listBnrSnspage li.other:nth-child(even) {
	float:right;
}*/


#infoAccess {
	/*background:#e4f4f1;*/
	background:#fff;
	padding:70px 0;
}
#infoAccess .logoShop {
	float:left;
	width:313px;
	margin-right:14px;
	text-align:center;
	transition-property: width, float;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
}
#infoAccess .boxTextShop {
	width:340px;
	float:left;
	transition-property: width, float;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
}
#infoAccess .boxTextShop dl {
	border-bottom:1px #42a9a0 solid;
	padding-bottom:15px;
	margin-bottom:15px;
	font-size:0.93em;
}
#infoAccess .boxTextShop dt {
	width:70px;
	float:left;
	color:#63a9a3;
}
#infoAccess .boxTextShop dd {
	margin-left:85px;
	color:#616161;
}
#infoAccess .photo {
	width:330px;
	float:right;
	line-height:0;
	text-align:right;
	transition-property: width, float;
	transition-duration:0.5s;
	transition-timing-function:ease-in-out;
}

/*************************************************************
#contents
*************************************************************/

#contents {
	padding:55px 0 100px;
}

#contents .framePage .pageIntro {
	margin-bottom:25px;
}

#contents h2 {
	padding:11px 22px;
	margin-bottom:55px;
	background:#85d1e0;
	color:#fff;
	font-size:1.25em;
}

#contents h3 {
	border-bottom:solid 5px #c1eef7;
	font-size:1.45em;
	color:#595959;
	padding:0 0 11px 23px;
	margin-bottom:45px;
}
#contents h3 a {
text-decoration:none;
color:#FFC648;
}

#contents #areaComment {
	padding-top:55px;
}

#contents #areaComment .commentlist {
	margin-bottom:35px;
}
#contents #areaComment .commentlist .comment {
	padding:20px 35px;
	border:solid 3px #eee;
	margin-bottom:25px;
	background:#fff;
	color:#333;
}
#contents #areaComment .commentlist .comment-author,
#contents #areaComment .commentlist .comment-meta {
	font-size:0.83em;
}
#contents #areaComment .commentlist .comment-meta {
	margin-bottom:15px;
}
#contents #areaComment .commentlist .reply {
	padding-top:15px;
}
#contents #areaComment .commentlist .reply a {
	display:block;
	padding:3px 10px;
	background:#ccc;
	color:#333;
	text-align:center;
	width:50px;
	text-decoration:none;
}

#contents #areaComment #commentform {
}
#contents #areaComment #commentform p {
	margin-bottom:25px;
	padding-left:150px;
	position:relative;
}
#contents #areaComment #commentform p.comment-notes,
#contents #areaComment #commentform p.form-submit {
	padding-left:0;
}
#contents #areaComment #commentform p label {
	position: absolute;
	top:0;
	left:0;
	padding-top:4px;
	width:130px;
	font-size:1.03em;
	color:#333;
}

/*.framePage*/
#contents .framePage{}

#contents .framePage .block{
	padding:1.7em 0;
}

#contents .framePage p,
#contents .framePage .image,
#contents .framePage .photo{
padding:1.3em 0.5em;
}

#contents .framePage strong{
font-weight:bold;
font-size:1.2em;
}

#contents .framePage .image img,
#contents .framePage .photo img{
max-width:100%;
height:auto;
}

.image{
	text-align: center;
}


/*************************************************************
アーカイブページ
*************************************************************/

.boxList {
	float:left;
	width:25%;
	margin-bottom:20px;
}

.boxList .frame {
	margin:0 15px;
	padding:20px;
	background:#fff;
	border:solid 1px #e3e3e3;
}
#contents .boxList .frame h3 {
	font-size:1.05em;
	padding:0 0 15px 0;
	border-bottom:solid 1px #fcc;
	margin-bottom:15px;
}



/**************************************************************************************
**************************************************************************************
画面サイズが1024pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 1024px){
	.wideFrame {
		width:auto;
	}
	
	#contents {
		padding:55px 15px 100px;
	}
	
	#infoAccess .wideFrame {
		position:relative;
	}
	
	#infoAccess {
    padding: 30px 0;
	}
	#infoAccess .logoShop {
    float:none;
    width:auto;
    margin-right:0;
		margin-bottom:20px;
	}
	
	#infoAccess .boxTextShop {
		margin-left:10px;
		margin-right:340px;
		width:auto;
		float:none;
	}
	#infoAccess .photo {
		position:absolute;
		right:10px;
		/*top:133px;*/
		bottom:0;
		float:none;
	}
	
	
	#footer #boxBnrYogaroom {
		left:15px;
	}
	
	/*大マップの定義*/
	#footMap {
	padding-bottom:45%;
	}

}

/**************************************************************************************
**************************************************************************************
画面サイズが920pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 920px){
	
	#glNav {
		display:none;
	}

	#smNav {display:block;}
	#smNav ul {
		display:none;
		background:#a4e6ff;
	}
	#smNav li {
		position:relative;
	}
	#smNav li a.plus {
		position: absolute;
		right:10px;
		top:11px;
		width:32px;
		padding:32px 0 0 0;
		border:none;
		height:0;
		overflow:hidden;
		display:block;
		background: url(dafault/css/css_img/btmSubMenu_sm.png) no-repeat left top!important;
		background-color: inherit!important;
		background-size:100%!important;
		cursor:pointer;
	}
	#smNav li a.plus.close {
		background: url(dafault/css/css_img/btmSubMenu_sm.png) no-repeat left bottom!important;
		background-color: inherit!important;
		background-size:100%!important;
		cursor:pointer;
		z-index:30;
	}
	#smNav li a {
		padding:15px 20px 15px 55px;
		display:block;
		text-decoration:none;
		border-bottom:solid 1px #73caeb;
		background:#a4e6ff;
		color:#4fb9e1;
	}
	#smNav li a:hover {
		background:#b8ebff;
	}
	

	#header #btmNavSm {
		display: block;
		position:absolute;
		top:10px;
		right:10px;
	}
	#header #btmNavSm a {
		display:block;
		background:url(dafault/css/css_img/btmMenuSubnv.png) no-repeat left top;
		background-size:100%;
		width:50px;
		height:0;
		overflow:hidden;
		padding-top:50px;
	}
	#header #btmNavSm.close a {
		background:url(dafault/css/css_img/btmMenuSubnv_close.png) no-repeat left top;
		background-size:100%;
	}
	
	#infoAccess .boxTextShop {
    margin-right: 260px;
	}
	#infoAccess .photo {
		width:230px;
	}

}

/**************************************************************************************
**************************************************************************************
画面サイズが736pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 736px){
	
	#listBnrSnspage {
		height:105px;
	}
	#listBnrSnspage li {
		width:50%;
	}
	#listBnrSnspage li img {
		width:95%;
	}
}

/**************************************************************************************
**************************************************************************************
画面サイズが640pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 640px){
	
	#header .wideFrame {
		height:50px;
	}
	
	#header h1 {
    left:9px;
    top:0;
	}
	#header h1 a {
    width: 135px;
    padding-top: 50px;
	}
	
	#header #btmNavSm {
    top: 5px;
    right: 10px;
	}
	#header #btmNavSm a {
    width: 38px;
    padding-top: 38px;
	}
	
	#footer #navFooter {
		display:none;
	}

	#footer .wideFrame{
		/*height:170px;*/
		height:auto;
		padding-bottom:85px;
	}
	
	#footMap {
		padding-bottom:65%;
	}
	
	#footer #boxBnrYogaroom {
		position:relative;
		top:auto;
		left:auto;
		text-align:center;
		padding-top:20px;
	}
	
	#infoAccess .boxTextShop {
    margin-right:0;
		margin-bottom:50px;
	}
	#infoAccess .photo {
		width:auto;
		position:relative;
		right:auto;
		bottom:auto;
		text-align:center;
	}
	
	#listBnrSnspage {
		/*padding-top:55px;*/
		padding-top:135px;
		min-height:180px;
	}
	#listBnrSnspage li {
		display:none;
		top:22px;
	}
	#listBnrSnspage li.smf {
		display:block;
	}
	
	#listBnrSnspage li.other {
		display:block;
		width:auto;
		text-align:center;
		margin:0 0 10px;
		line-height:0;
		float:none;
	}
	#listBnrSnspage li.other img {
		max-width:100%;
		width:auto;
		height:auto;
	}
}

/**************************************************************************************
**************************************************************************************
画面サイズが460pxより小さい場合
**************************************************************************************
**************************************************************************************/


@media screen and (max-width: 460px){
	#header h1 {
    left: 9px;
    top: 2px;
	}
	#header h1 a {
    width: 120px;
    padding-top: 45px;
	}
	
	#infoAccess .boxTextShop dt {
    width:auto;
    float:none;
		margin-bottom:5px;
	}
	#infoAccess .boxTextShop dd {
    margin-left:0;
	}
	
	#listBnrSnspage li.smf {
	  width:80px;
	}
	
}