@charset "utf-8";

/* business-consulting */

.trapezoidWrap.business .box:nth-child(1) { width: 50%;}
.trapezoidWrap.business .box:nth-child(2) { width: 49%;}

#enter { margin-bottom: 100px;}
#enter .lead { padding-top: 30px;}
#enter .lead .catch { margin-bottom: 30px; color: #48C4CB; font-size: 22px; font-weight: bold; text-align: center;}
#enter .lead .catch2 { margin: 30px 0; color: #48C4CB; font-size: 22px; font-weight: bold; line-height: 150%;}
#enter .corumnWrap { margin-bottom: 50px;}
#enter .corumnWrap .box { padding: 0 25px; text-align: left;}
#enter table.default { margin: 0 auto 10px auto;}

#salon { margin-bottom: 100px;}
#salon .lead .catch { margin-bottom: 30px; color: #48C4CB; font-size: 22px; font-weight: bold; text-align: center;}
#salon .corumnWrap { margin-bottom: 40px;}
#salon .notice { width: 100%; max-width: 640px; margin-bottom: 100px; padding: 20px 70px; margin: 0 auto 100px auto; background: #48C4CB; border-radius: 7px;}
#salon .notice p { color: #fff; font-size: 21px; text-align: left;}
#salon table.default { margin: 0 auto 10px auto;}

@media screen and (max-width: 767px){
	#enter .corumnWrap { margin-bottom: 0;}
	#enter .corumnWrap .box { margin-bottom: 30px; padding: 0 10px;}
	#salon .notice { padding: 20px 40px; margin: 0 auto 60px auto;}
	#salon .notice p { font-size: 20px;}
	#salon .corumnWrap { margin-bottom: 0;}
	#salon .corumnWrap .box { margin-bottom: 30px; padding: 0 10px;}
}
@media screen and (max-width: 639px){
	#salon .notice { padding: 20px 40px; margin: 0 auto 60px auto;}
	#salon .notice p br { display: none;}
}
@media screen and (max-width: 479px){
	.h2image { margin: 0 auto 80px auto;}
	#enter .lead .catch { margin-bottom: 30px; color: #48C4CB; font-size: 18px; font-weight: bold; text-align: center;}
	#enter .lead .catch2 { margin: 10px 0; font-size: 18px; font-weight: normal;}
	#enter .corumnWrap .box { padding: 0;}
	#salon .notice { padding: 20px; margin: 0 auto 30px auto;}
	#salon .notice p { font-size: 18px;}
	#salon .corumnWrap .box { padding: 0;}
	.trapezoidWrap.business .box:nth-child(2) a span, .trapezoidWrap.business .box:nth-child(2) p span { font-size: 14px !important;}
}


/* 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 */