@charset "utf-8";

/* HOME */


#sliderWrap { position: relative; width: 100%; margin-bottom: 80px; border-top: 3px #F9E981 solid; border-bottom: 3px #F9E981 solid; z-index: 6000;}
#sliderWrap:after { position: absolute; top: -20px; left: 50%; margin-left: -710px; width: 1420px; height: 710px; background: url("../images/home/slider-over.png") top center no-repeat; background-size: contain; content: ''; z-index: 8000;}
#sliderWrap ul li { width: 100%; text-align: center;}
#sliderWrap ul li img { margin: 0 auto;}
#sliderWrap ul li:nth-child(1) { background: #8ED5D9;}
#sliderWrap ul li:nth-child(2) { background: #FCB9CB;}
#sliderWrap ul li:nth-child(3) { background: #F6B013;}
#sliderWrap ul li:nth-child(4) { background: #B1A0CF;}

@media screen and (max-width: 1500px){
	#sliderWrap:after { margin-left: -530px; width: 1060px; height: 530px;}
}
@media screen and (max-width: 767px){
	#sliderWrap { margin-bottom: 40px;}
	#sliderWrap:after { display: none;}
}
@media screen and (max-width: 639px){
}
@media screen and (max-width: 479px){
}

/* online */
#online { padding-bottom: 80px;}
#online p a img { border: 3px #E0CD67 solid; border-radius: 5px;}

@media screen and (max-width: 767px){
	#online { padding-bottom: 40px;}
}

/* training-course */
#training { padding-bottom: 150px;}

@media screen and (max-width: 767px){
	#training { padding-bottom: 40px;}
}

/* color-art-therapist */
#therapist { padding-bottom: 150px;}
#therapist .h2star h2 br { display: none;}

@media screen and (max-width: 767px){
	#therapist { padding-bottom: 40px;}
}
@media screen and (max-width: 479px){
	#therapist .h2star h2 br { display: block;}
}


/* business-consulting */
#business { padding-bottom: 150px;}
#business .h2star h2 br { display: none;}

@media screen and (max-width: 767px){
	#business { padding-bottom: 40px;}
}
@media screen and (max-width: 479px){
	#business .h2star h2 br { display: block;}
}


/* personal-consulting */

#personal { margin-bottom: 150px; background: #F4F4F4;}
#personal .innerPre { height: 542px; padding: 55px 0 0 560px;  background: url("../images/home/personal-bg.jpg") top left no-repeat;}
#personal .contents { width: 720px;}
#personal .contents .h2personal { width: 100%; padding: 0 50px; margin-bottom: 20px;}
#personal .contents .h2personal h2 span { display: inline-block; width: 100%; color: #48C4CB; font-size: 44px; font-weight: bold; line-height: 140%;}
#personal .contents .h2personal h2 span:first-child{ text-align: left;}
#personal .contents .h2personal h2 span:last-child{ text-align: right;}
#personal .contents .catch { margin-bottom: 20px; font-size: 21px; font-weight: bold;}
#personal .contents .text { margin-bottom: 20px;padding: 0 50px; font-size: 18px; text-align: left; line-height: 175%;}
#personal .contents ul li { width: 50%; padding: 12px 6px; float: left;}
#personal .contents ul li a { display: block; width: 100%; padding: 15px; background: #fff; border: 1px #48C4CB solid; border-radius: 7px; color: #48C4CB; font-size: 21px; font-weight: bold;}

@media screen and (max-width: 1500px){
	#personal .innerPre { height: 542px; padding: 55px 0 0 380px;}
}
@media screen and (max-width: 767px){
	#personal { margin-bottom: 40px;}
	#personal .innerPre { height: auto; padding: 20px 0 0 260px; background: url("../images/home/personal-bg-mb.jpg") bottom left no-repeat;}
	#personal .contents { width: 100%; padding: 0 10px;}
	#personal .contents .h2personal { padding: 0; margin-bottom: 10px; text-align: left;}
	#personal .contents .h2personal h2 span { display: inline !important; font-size: 36px; line-height: 140%;}
	#personal .contents .h2personal h2 br { display: none;}
	#personal .contents .catch { margin-bottom: 10px; text-align: left;}
	#personal .contents .text { margin-bottom: 10px; padding: 0; font-size: 16px; line-height: 175%;}
	#personal .contents ul li { width: 100%; padding: 5px 0; float: none;}
}
@media screen and (max-width: 479px){
	#personal .innerPre { padding: 10px; background: none;}
	#personal .contents .h2personal h2 span { font-size: 28px; line-height: 140%;}


}


/* banner */

#banner { padding-bottom: 150px;}
#banner ul { display: table; table-layout: fixed; width: 100%;}
#banner ul li { display: table-cell;}
#banner ul li a { display: block; width: 100%; max-width: 530px; height: 134px; margin: 0 auto; padding: 30px 0 0 165px; border-radius: 5px; color: #fff;}
#banner ul li.concept a { background: #49C5CB url("../images/home/banner-concept.jpg") top left no-repeat;}
#banner ul li.profile a { background: #49C5CB url("../images/home/banner-profile.jpg") top left no-repeat;}
#banner ul li a p.jp { font-size: 20px; line-height: 30px;}
#banner ul li.profile a p.jp { font-size: 24px;}
#banner ul li a p.en { font-size: 40px; line-height: 48px;}

@media screen and (max-width: 767px){
	#banner { padding-bottom: 40px;}
	#banner ul li { display: block; margin-bottom: 20px;}
}
@media screen and (max-width: 479px){
	#banner ul li { padding: 0 10px;}
	#banner ul li a { padding: 40px 0 0 160px;}
	#banner ul li a p.jp { font-size: 12px; line-height: 28px;}
	#banner ul li.profile a p.jp { font-size: 20px;}
	#banner ul li a p.en { font-size: 24px; line-height: 28px;}
}

/* information */

#information { padding-bottom: 150px;}
#information .wrap { display: table; table-layout: fixed; width: 100%;}
#information .box { display: table-cell;}
#information .box:nth-child(2) { width: 530px;}

#information .box .h2wrap { width: 226px; height: 38px; padding-right: 25px; background: url("../images/home/information-h2.png") top left no-repeat; text-align: center;}
#information .box .h2wrap h2 { color: #fff; font-size: 20px; font-weight: bold;line-height: 38px;}
#information .box .logo { float: right;}

#information .box .border { width: 530px; padding: 25px; margin-bottom: 40px; border: 1px #FFCC00 solid; text-align: left;}

#information ul.newsList { width: 100%; height: 320px; padding-right: 15px; overflow-y: scroll;}
#information ul.newsList li { width: 100%; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px #A58C57 dotted;}
#information ul.newsList li .meta { margin-bottom: 8px;}
#information ul.newsList li .meta .date { display: inline-block; width: 120px; color: #A58C57;}
#information ul.newsList li .meta .cate { display: inline-block; padding: 0 20px; color: #49C5CB; border: 1px #49C5CB solid;}
#information ul.newsList li .title { color: #333;}

#information .more { width: 530px;}
#information .more a { display: block; width: 320px; height: 54px; margin: 0 auto; border: 1px #49C5CB solid; border-radius: 7px; color: #49C5CB; font-size: 18px; line-height: 54px;}
#information .more a img { vertical-align: middle;}

@media screen and (max-width: 767px){
	#information { padding-bottom: 40px;}
	#information { padding: 0 10px; }
	#information .box { display: block; width: 100% !important; margin-bottom: 20px;}
	#information .box .border { width: 100%; padding: 20px; margin-bottom: 10px;}
	#information .more { width: 100%;}
}
@media screen and (max-width: 479px){
	#information { padding-bottom: 0;}
	#information .box .border { padding: 10px;}
}


/* CSS memo

Font Awesome
https://fontawesome.com/icons?d=gallery&m=free

角丸
border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;

テキストシャドウ
text-shadow:1px 1px 3px #666;
text-shadow:1px 1px 3px #666; text-shadow:-1px 1px 3px #666; text-shadow:1px -1px 3px #666; text-shadow:-1px -1px 3px #666;

ボックスシャドウ
-moz-box-shadow: 1px 1px 3px #666; -webkit-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666;

ボックスシャドウ内側
-moz-box-shadow: inset 1px 1px 3px #666; -webkit-box-shadow: inset 1px 1px 3px #666; box-shadow: inset 1px 1px 3px #666;

トランジション
-webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; transition: 1.5s;

要素全部を透明
filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25;

背景のみ透明
background-color:rgba(255,255,255,0.2);

:first-child
:last-child
:nth-child(odd)　･･･　奇数番目の要素に適用
:nth-child(even)　･･･　偶数番目の要素に適用
:nth-child(n)　･･･　n番目の要素に適用
:nth-child(2n+1)　･･･　奇数番目の要素に適用
:nth-child(2n)　･･･　偶数番目の要素に適用
:nth-child(3n)　･･･　3,6,9,12…番目の要素に適用
:nth-child(3n+1)　･･･　1,4,7,10…番目の要素に適用


テキスト省略
.container { overflow: hidden; width: 100%;}
.container  p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

可変Youtube埋め込み
.youtube { position: relative; width: 100%; padding-top: 56.25%;}
.youtube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important;}

要素を横スクロール
.scroll { width: 100%; padding-bottom: 10px; overflow-y: hidden; overflow-x: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch;}

その他メモ JavaScript
javascript:void(0);
javascript:history.back();

画像の縦長自動調整
img { max-width: 100%; max-height: 100%; height: 100vh; width: auto\9; margin: 0 auto;}

WPページナビ
.wp-pagenavi { text-align: center;}
.wp-pagenavi span, .wp-pagenavi a { display: inline-block; width: 32px; height: 32px; border: 1px #2E7BB1 solid; color: #2E7BB1; font-size: 14px; text-align: center; line-height: 32px;}
.wp-pagenavi span.pages { width: auto; padding: 0 8px;}
.wp-pagenavi .current { background: #2E7BB1; color: #fff;}

背景を左右で分ける（左から0～50％と50％～100％）
background:linear-gradient(90deg,blue 0%,blue 50%,red 50%,red 100%);

CSS memo */