@charset "utf-8";

/* online-counrse */

.trapezoidWrap.online .box { width: 24%;}
.trapezoidWrap.online .box .w { padding: 5px 0; line-height: 22px;}

.leadBox { margin-bottom: 20px;}
.leadBox p { color: #48c4cb; font-size: 20px;}

@media screen and (max-width: 767px){
    .trapezoidWrap.online .box .w { padding: 0; line-height: 40px;}
    .trapezoidWrap.online .box .w br { display: none;}
    .leadBox { padding: 0 10px;}
    .leadBox p { text-align: left;}
}


#color { margin-bottom: 100px;}
#color .corumnWrap { margin-bottom: 50px;}
#color .corumnWrap .box { padding: 0 25px; text-align: left;}
#color .corumnWrap .box .blueBox { background: #D9F5F7; padding: 20px 30px; border-radius: 5px; font-size: 18px; text-align: left; line-height: 150%;}
#color table.default a { color: #48C4CB; text-decoration: underline;}

@media screen and (max-width: 767px){
	#color .corumnWrap { margin-bottom: 0;}
    #color .corumnWrap .box { margin-bottom: 30px; padding: 0 10px;}
    #color .corumnWrap .box .blueBox { padding: 20px;}
}
@media screen and (max-width: 639px){
}
@media screen and (max-width: 479px){
	.h2image { margin: 0 auto 80px auto;}
	#color .corumnWrap .box { padding: 0;}
}


#therapy { margin-bottom: 100px;}
#therapy .corumnWrap { margin-bottom: 50px;}
#therapy .corumnWrap .box { padding: 0 25px; text-align: left;}
#therapy .corumnWrap .box .blueBox { background: #D9F5F7; padding: 20px 80px; border-radius: 5px; font-size: 18px; text-align: left; line-height: 150%;}
#therapy table.default a { color: #48C4CB; text-decoration: underline;}

@media screen and (max-width: 767px){
	#therapy .corumnWrap { margin-bottom: 0;}
    #therapy .corumnWrap .box { margin-bottom: 30px; padding: 0 10px;}
    #therapy .corumnWrap .box .blueBox { padding: 20px;}

}
@media screen and (max-width: 639px){
}
@media screen and (max-width: 479px){
	.h2image { margin: 0 auto 80px auto;}
	#therapy .corumnWrap .box { padding: 0;}
}


#elm { margin-bottom: 100px;}
#elm .corumnWrap { margin-bottom: 50px;}
#elm .corumnWrap .box { padding: 0 25px; text-align: left;}
#elm .corumnWrap .box .blueBox { background: #D9F5F7; padding: 20px 80px; border-radius: 5px; font-size: 18px; text-align: left; line-height: 150%;}
#elm .lead p + p { margin-top: 1em;}
#elm table.default a { color: #48C4CB; text-decoration: underline;}

@media screen and (max-width: 767px){
	#elm .corumnWrap { margin-bottom: 0;}
    #elm .corumnWrap .box { margin-bottom: 30px; padding: 0 10px;}
    #elm .corumnWrap .box .blueBox { padding: 20px;}

}
@media screen and (max-width: 639px){
}
@media screen and (max-width: 479px){
	.h2image { margin: 0 auto 80px auto;}
	#elm .corumnWrap .box { padding: 0;}
}


#shine { margin-bottom: 100px;}
#shine .corumnWrap { margin-bottom: 50px;}
#shine .corumnWrap .box { padding: 0 25px; text-align: left;}
#shine .corumnWrap .box .blueBox { background: #D9F5F7; padding: 20px 80px; border-radius: 5px; font-size: 18px; text-align: left; line-height: 150%;}
#shine .lead p + p { margin-top: 1em;}
#shine table.default a { color: #48C4CB; text-decoration: underline;}

@media screen and (max-width: 767px){
	#shine .corumnWrap { margin-bottom: 0;}
    #shine .corumnWrap .box { margin-bottom: 30px; padding: 0 10px;}
    #shine .corumnWrap .box .blueBox { padding: 20px;}

}
@media screen and (max-width: 639px){
}
@media screen and (max-width: 479px){
	.h2image { margin: 0 auto 80px auto;}
	#shine .corumnWrap .box { padding: 0;}
}

.bottomBlueBox { width: 100%; padding: 60px 20px; background: #48C4CB; border-radius: 9px;}
.bottomBlueBox p { color: #fff; font-size: 30px; line-height: 150%;}
.bottomBlueBox p + p { margin-top: 0.5em;}
.bottomBlueBox p a { color: #fff; text-decoration: underline;}

@media screen and (max-width: 767px){
    .bottomBlueBox { padding: 20px; text-align: left;}
    .bottomBlueBox p { font-size: 24px; line-height: 150%;}
    .bottomBlueBox p br { display: none;}

}
@media screen and (max-width: 479px){
    .bottomBlueBox { padding: 10px;}
    .bottomBlueBox p { font-size: 20px; line-height: 150%;}
}






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