@charset "utf-8";
/* -----------------------------------------------------------------
	toppage css Document
	@subpackage aircycle_tmpl
	communication.or.jp　toppage.css
 ----------------------------------------------------------------- */

/* Slider-new（jQuery使用）
-------------------------------------------------- */
#slider_txtWrap{
	width: 100%;
	position: relative;
}
#slider-txt{
	margin: 0 auto;
	width: 1000px;
	padding: 0 30px;
}
#slider-txt img{
	margin:auto;
	position: absolute;
	top: 0;
	left:0;
	right:15%;
	bottom:0;
	z-index:99;
}
.slideFrame {
	margin:0 auto;
	padding: 0;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	overflow-x: auto;
	z-index: -1;
	background:rgb(255,255,255);
	border-top: solid 20px #DCDDDD;
	border-bottom: solid 20px #DCDDDD;
}
.slideGuide {
	width: 150%;
	height: 100%;
	margin:0;
	padding:0;
}

.slideCell {
	display: block;
	float: left;
	width: 1425px; /* widthサイズを画像サイズの70%程度で指定する */
	height: 100%;
}
.slideCell a {
	display: block;
	width: 100%;
	height: 100%;
	}
.slideCell a:hover {
}



/* トップバナーエリア contents
----------------------------------------------------------------- */
ul.top-banner-box-contents {
	margin:0;
	margin-bottom:0.4em;
	padding:0;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
}
ul.top-banner-box-contents li {
	margin:3%;
	padding:0;
	width:27%;
}

/* トップバナーエリア内 スライド */
.top-banner-slider img {
	border-radius:10px;
}
/* レイアウト 横4件並び用 画像
----------------------------------------------------------------- */
ul.img-box4 {
	margin:1% auto 7% auto;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.img-box4  li {
	margin:0 .25% .25%;
	padding:0;
	width:24.5%;
}

/* レイアウト 横2件並び用 two-box
----------------------------------------------------------------- */
ul.two-box {
	margin:5%;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	justify-content:center;
}
ul.two-box li {
	margin:0 2% 3%;
	padding:0;
	width:45%;
}


/* レイアウト 横4件並び用 seminar-box
----------------------------------------------------------------- */
ul.four-blef-box-seminar {
	margin:1% auto 7% auto;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.four-blef-box-seminar li {
	margin:0 .25% .25%;
	padding:0;
	width:24.5%;
}
ul.four-blef-box-seminar li .ap-label {
	position: absolute;
}


/* レイアウト 横4件並び用 appearance
----------------------------------------------------------------- */
ul.four-blef-box-appearance {
	margin:1% auto 7% auto;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.four-blef-box-appearance li {
	margin:0 .25% .25%;
	padding:0;
	width:24.5%;
}
ul.four-blef-box-appearance li .ap-label {
	position: absolute;
}
.top-appearance-title {
	padding:3%;
	color:#fff;
	background-color:#231815;
}

/* レイアウト 横5件並び用 BLOG
----------------------------------------------------------------- */
ul.five-blef-box {
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.five-blef-box li {
	margin:0 .5% .5%;
	padding:0;
	width:19%;
	color:#fff;
	background-color:#231815;
}


/* レイアウト 横6件並び用 BLOG
----------------------------------------------------------------- */
ul.six-blef-box {
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.six-blef-box li {
	margin:0 1% 1%;
	padding:0;
	width:18%;
}

ul.six-blef-box-blog {
	margin:0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	list-style:none;
}
ul.six-blef-box-blog li {
	margin:0 1% 1%;
	padding:0;
	width:18%;
	border: solid 1px #c9caca;
	background-color:#fff;
}

/* 更新用 Works、Project、Voice等
----------------------------------------------------------------- */
.top-entry-box {
	margin:0;
	padding:1.0% 0;
}
.top-entry-box-info {
	margin:0;
	padding:3.0% 0;
}
.top-entry-box-banner {
	margin:0;
	padding:1.0% 0;
}
.top-entry-box-blog {
	margin:0;
	padding:1.0% 0;
}

.top-entry-box-contents {
	margin:0;
	padding:3.0% 0;
	background:url(images/contents-badge.svg) no-repeat top left;
}

.top-entry-box-voice {
	margin:0;
	padding:3.0% 0;
	background:url(images/voice-badge.svg) no-repeat top right #efefef;
}
.top-entry-box-notice {
	margin: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefef+83,ffffff+100 */
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #efefef 83%, #ffffff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #efefef 83%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #efefef 83%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
Color format:
Comments
}

.top-entry-box h2,
.top-entry-box-notice h2 {
	margin:1% 0 .5%;
	padding:0;
	text-align:center;
	font-family:'A1 Mincho';
	font-size:150%;
	border-bottom: solid 3px skyblue;
position: relative;
}
.top-entry-box h2:after,
.top-entry-box-notice h2:after {
	position: absolute;
	content: " ";
	display: block;
	border-bottom: solid 3px #ffc778;
	bottom: -3px;
	width: 25%;
}

.top-entry-box-notice h2 {
	margin:1% 0 5%;
}

.top-entry-box h3 {
	margin:2% 0 2%;
	text-align: center;
	font-family:'Gothic MB101 Bold','Mplus 1p';
	color:#ee3586;
	font-size:160%;
}
 
.top-entry-box h3 span{
     position: relative;
     display: inline-block;
     padding-bottom:0.5em;
     border-bottom: 1px solid #ee3586;
}
      
.top-entry-box h3 span::before,
.top-entry-box h3 span::after {
     position: absolute;
     top: 100%;
     left:50%;
     transform:translateX(-50%);
     content: '';
     border: 10px solid transparent;
}
 
.top-entry-box h3 span::before {
     border-top: 10px solid #ee3586;
}
 
.top-entry-box h3 span::after {
     margin-top: -1px;
     border-top: 10px solid white;
}

.top-photo-box {
	margin-bottom:3.0%;
}
.top-photo-box img {
	/* border-radius:10px; */
}
.top-photo-box p {
	margin:1.5% 0;
	padding:0;
	font-size:95%;
	line-height:130%;
}
.top-photo-box p span {
	font-size:85%;
}
.top-photo-box a:link,
.top-photo-box a:visited {
	color:#696969;
}
.top-photo-box a:active,
.top-photo-box a:hover {
	text-decoration:underline;
}

/* house・renovation バッジ設定
----------------------------------------------------------------- */
.house-badge:after,
.renovation-badge:after {
	position:absolute;
	left:0;
	bottom:0;
	opacity:0.7;
	background-repeat:no-repeat;
	background-size: cover;
}
.house-badge:after {
	background-image:url(images/house-badge.svg);
}
.renovation-badge:after {
	background-image:url(images/renovation-badge.svg);
}

/* 更新履歴一覧
----------------------------------------------------------------- */
.top-news-box {
	/* margin:0 0 6%; */
	padding:1.5%;
}

.top-news-box ul {
	margin:0;
	padding:0;
	list-style:none;
	overflow:auto;
	border-top:solid 1px #c9caca;
}
.top-news-box ul li {
	margin:0 0 1.5%;
	padding:1%;
	line-height:135%;
	border-bottom:solid 1px #c9caca;
}
.top-news-box ul li a {
	display:block;
}
.top-news-box ul li a:link,
.top-news-box ul li a:visited {
}
.top-news-box ul li a:hover,
.top-news-box ul li a:active {
	margin:-2.0% -1% -0.5% -1%;
	padding:2.0% 1% 0.5% 1%;	
	/* background-color:#f7e1d4; */
	/*text-decoration:underline; */
}
.top-news-box ul li span {
	margin-right:0;
	font-size:85%;
}

.top-news-box ul li .info-title {
	margin:0;
	padding:0;
	font-weight:bold;
}
.top-news-box ul li span.info-mark {
	margin:0;
	padding:0;
}
.top-news-box .info-text {
	font-weight:bold;
	color: #4c4948;
}
/*.top-news-box .info-text::before {
	color: #dcdddd;
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0);
	content: "\f0da";
	padding-right:5px;
}*/
.top-news-thumbnail,
.top-news-thumbnail-trim {
	margin:0 1.5% 1.5%;
	padding:0;
	width: 65px;
	height: 65px;
	float:left;
}
.top-news-thumbnail-trim {
	position: relative;
	overflow: hidden;
}
.top-news-thumbnail-trim img {
	max-width: none !important;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


/* 無料相談会
----------------------------------------------------------------- */
.top-consultation {
	text-align:center;
}
.top-consultation img {
	width:100%;
	height:auto;
}

/* 社長あいさつ
----------------------------------------------------------------- */
.top-greeting {
	margin-bottom:6.5%;
}

/* TELフッター
----------------------------------------------------------------- */
.top-telfooter {
	border:solid 3px #f29600;
	padding-top: 2%;
	margin-top: 1.9%;
}
.top-telfooter-f {
	position: relative;
}
.top-telfooter-f img {
	position: absolute;
	right: 0%;
}

ul.se-blef-box {
	margin:2% auto;
	padding:0;
	display:flex;
	width: 60%;
	list-style:none;
}
ul.se-blef-box li {
	margin:0 1% 1%;
	padding:0;
	width:50%;
}

/* セミナー切り替え用タブ
----------------------------------------------------------------- */
/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
border: none;
width: 100%;
margin: 0 auto;
border-bottom: 1px solid #ccc;
}
/*タブのスタイル*/
.tab_item4,
.tab_item4-f {
	width: calc(100%/4);
	height: 30px;
/*border-bottom: 3px solid #5ab4bd;
background-color: #d9d9d9;
border-right:1px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.2);*/
	line-height: 30px;
	font-size: 16px;
	text-align: center;
	display: block;
	float: left;
	text-align: center;
	transition: all 0.2s ease;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color:rgba(116,203,191,0.3);
	color: #565656;
}
/*タブのスタイル*/
.tab_item,
.tab_item-f {
	width: calc(100%/5);
	height: 30px;
/*border-bottom: 3px solid #5ab4bd;
background-color: #d9d9d9;
border-right:1px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.2);*/
	line-height: 30px;
	font-size: 16px;
	text-align: center;
	display: block;
	float: left;
	text-align: center;
	transition: all 0.2s ease;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color:rgba(116,203,191,0.3);
	color: #565656;
}
.tab_item-f,
.tab_item4-f  {
	/*border-left:1px solid rgba(0, 0, 0, 0.2);*/
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color:rgba(116,203,191,0.3);
	color: #565656;
}
.bk-color-step1 {
	background-color:rgba(116,203,191,0.3);
}
.bk-color-step2 {
	background-color:rgba(203,203,67,0.2);
}
.bk-color-step3 {
	background-color:rgba(203,115,112,0.2);
}
.bk-color-step4 {
	background-color:rgba(132,203,149,0.2);
}
.bk-color-step5 {
	background-color:rgba(54,132,221,0.2);
}
.tab_item:hover,
.tab_item-f:hover {
	opacity: 0.75;
}
/*ラジオボタンを全て消す*/
input[name="commuup-tab_item"],
input[name="counseling-tab_item"],
input[name="therapist-tab_item"],
input[name="psychology-tab_item"],
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 20px 40px 0;
	clear: both;
	overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示（コミュニケーションの基本講座）*/
#commuup-step1:checked ~ #commuup-step1_content,
#commuup-step2:checked ~ #commuup-step2_content,
#commuup-step3:checked ~ #commuup-step3_content,
#commuup-step4:checked ~ #commuup-step4_content {
display: block;
}
/*選択されているタブのコンテンツのみを表示（カウンセリング & コーチングの基本）*/
#counseling-step1:checked ~ #counseling-step1_content,
#counseling-step2:checked ~ #counseling-step2_content,
#counseling-step3:checked ~ #counseling-step3_content,
#counseling-step4:checked ~ #counseling-step4_content {
display: block;
}
/*選択されているタブのコンテンツのみを表示（心を癒すコミュニケーションの基本）*/
#therapist-step1:checked ~ #therapist-step1_content,
#therapist-step2:checked ~ #therapist-step2_content,
#therapist-step3:checked ~ #therapist-step3_content,
#therapist-step4:checked ~ #therapist-step4_content {
display: block;
}
/*選択されているタブのコンテンツのみを表示（自分とまわりを変える心理学）*/
#psychology-step1:checked ~ #psychology-step1_content,
#psychology-step2:checked ~ #psychology-step2_content,
#psychology-step3:checked ~ #psychology-step3_content,
#psychology-step4:checked ~ #psychology-step4_content {
display: block;
}
/*選択されているタブのコンテンツのみを表示（メンタリング入門講座）*/
#step1:checked ~ #step1_content,
#step2:checked ~ #step2_content,
#step3:checked ~ #step3_content,
#step4:checked ~ #step4_content,
#step5:checked ~ #step5_content {
display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item4,
.tabs input:checked + .tab_item4-f,
.tabs input:checked + .tab_item,
.tabs input:checked + .tab_item-f {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	/*background-color:rgba(116,203,191,0.3);
	color: #565656;*/
	background-color:rgba(116,203,191,1);
	color: #fff;
	font-weight: bold;
}

.tabs input:checked + .bk-color-step1 {
	background-color:rgba(116,203,191,1);
}
.tabs input:checked + .bk-color-step2 {
	background-color:rgba(255,204,64,1);
}
.tabs input:checked + .bk-color-step3 {
	background-color:rgba(221,60,119,0.8);
}
.tabs input:checked + .bk-color-step4 {
	background-color:rgba(152,221,31,1);
}
.tabs input:checked + .bk-color-step5 {
	background-color:rgba(54,132,221,1);
}

[type="radio"] + label.tab_item4,
[type="radio"] + label.tab_item4-f,
[type="radio"] + label.tab_item,
[type="radio"] + label.tab_item-f {
margin: 0;
}

.top-seminar-box {
	font-size:120%;
	line-height: 200%;
	display: flex;
	align-items: center;
}
.top-photo-box {
	display:block;
}
.top-se-photo-box img {
	border:solid 4px #FFF;
	box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
}
.top-seminar-box .sub-title {
	font-size:115%;
	font-weight: bold; 
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color:#ee3586;
}
.top-seminar-box .title {
	font-size:120%;
	font-weight: bold;
}
.top-link-box a {
	width:100%;
	height:auto;
}
.top-link-box a:link,
.top-link-box a:visited {
	padding:2% 0 2%;
	display:flex;
}
.top-link-box a:hover,
.top-link-box a:active {
	padding:2% 0 2%;
	background-color:#D7EEFF;
}


/* Media-Query タブレット以下用
------------------------------------------------------------ */
@media only screen and (max-width: 1023px){
	/* スライダーエリア
	----------------------------------------------------------------- */
	.slider-images .slick-slide:not(.slick-center):after {
		content:none;
	}
	
	.top-telfooter-f img {
		display:none;
	}
	.top-telfooter {
		padding:2%;
	}
	ul.se-blef-box {
		width: 98%;
		display: block;
		text-align: center;
	}
	ul.se-blef-box li {
		width:100%;
		margin:2%;
	}
	
	/* レイアウト 横6件並び用
	----------------------------------------------------------------- */
	ul.six-blef-box li {
		margin:0 1.5% 2.5%;
		width:30.5%;
	}
	ul.six-blef-box-blog li {
		margin:0 1.5% 2.5%;
		width:30.5%;
	}
	ul.six-blef-box-blog li img {
		width:100%;
	}
	
	.top-tel-box {
	margin:0 auto;
	width: 100%;
}
}


/* Media-Query 1024px以上用
------------------------------------------------------------ */
@media only screen and (min-width: 1024px) {
}


/* Media-Query 640px以下用
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
	.top-link-box a:link,
	.top-link-box a:visited {
		display:inline;
	}
	/* Slider（jQuery使用）
	-------------------------------------------------- */
	#slider_txtWrap{
		width: 100%;
	}
	#slider-txt{
		padding: 0 10px;
	}
	#slider-txt img{
		width:100%;
		height:auto;
		max-width:80%;
	}
	.slideFrame {
		width: 100%;
		height: 100%;
	}
	.slideGuide {
		width: 150%;
		height: 100%;
	}
	.slideCell {
		width: 700px; /* widthサイズを画像サイズの70%程度で指定する */
		height: 100%;
	}
	.slideCell a {
	}
	.slideCell a:hover {
	}

	/* トップバナーエリア
	----------------------------------------------------------------- */
	ul.top-banner-box {
	}
	ul.top-banner-box li.first,
	ul.top-banner-box li.third {
		width:100%;
	}
	ul.top-banner-box li.first {
		margin-right:1.5%;
	}
	ul.top-banner-box li.third {
		margin-left:1.5%;
	}
	ul.top-banner-box li.second {
		display:none;
	}
	
	/* トップバナーエリア contents
	----------------------------------------------------------------- */
	ul.top-banner-box-contents {
	}
	ul.top-banner-box-contents li {
		margin:1.5%;
		width:47%;
	}
	
	.top-entry-box-voice h2,
	.top-entry-box-contents h2 {
		font-size:130%;
	}
	.top-entry-box-voice h2 br,
	.top-entry-box-contents h2 br {
		display:none;
	}

	.top-entry-box-voice h3,
	.top-entry-box-notice h3,
	.top-entry-box-blog h3 {
		font-size:110%;
	}
	
	.top-entry-box-contents {
		background:none;
	}

	.top-entry-box-voice {
		background:#efefef;
	}
	
	/* レイアウト 横4件並び用 voice
	----------------------------------------------------------------- */
	ul.four-blef-box-appearance {
	}
	ul.four-blef-box-appearance li {
		margin:1.5%;
		width:47%;
	}
	.top-appearance-title {
	}
	
	h2.news-title::after {
	background-color: transparent;
	}
	/* 更新用 Works、Project、Voice等
	----------------------------------------------------------------- */
	.top-entry-box {
		margin:0;
		padding:3.0% 0;
	}
	.top-entry-box h2 {
		margin:1% 0 0.5%;
		padding:0 0;
		font-size:120%;
	}
	.top-entry-box h2 br {
		display:block;
	}
	.top-entry-box h3 {
		margin:3% 0 3% 0;
		padding:0.5% 0;
		font-size:99%;
	}
	/* 更新履歴一覧
	----------------------------------------------------------------- */
	.top-news-box ul {
	}
	.top-news-box ul li {
		font-size:85%;
	}

	/* レイアウト 横5件並び用
	----------------------------------------------------------------- */
	ul.five-blef-box li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	ul.five-blef-box-blog li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	/* レイアウト 横6件並び用
	----------------------------------------------------------------- */
	ul.six-blef-box li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	ul.six-blef-box-blog li {
		margin:0 1.5% 2.5%;
		width:47%;
	}
	/*
	.top-news-box ul li a br {
		display:block;
	}
	*/
	
	[type="radio"] + label.tab_item4, [type="radio"] + label.tab_item4-f, [type="radio"] + label.tab_item, [type="radio"] + label.tab_item-f {
    		font-size: 80%;
	}
	.top-seminar-box {
		font-size:90%;
	}
	/*タブ切り替えの中身のスタイル*/
	.tab_content {
		padding: 5px 10px 0;
	}
	.top-seminar-box {
	margin-left:3%;
	}
	}
	
	@media screen and (min-width: 650px){	
 	 .br-pc { display:block; margin:0;padding:0;}
 	 .br-sp { display:none; margin:0;padding:0;}
	}
	@media screen and (max-width: 650px){	
 	 .br-pc { display:none; margin:0;padding:0;}
 	 .br-sp { display:block; margin:0;padding:0;}
	}