@charset "utf-8";

/* Cocept */

#topimage .innerPre { height: 667px; padding-top: 64px; padding-left: 240px; background: url("../images/concept/top-bg.jpg") top center no-repeat; background-size: contain;}
#topimage .box { width: 640px; text-align: left;}
#topimage .box .catchBox .catch { margin-bottom: 20px; color: #48C4CB; font-size: 55px; font-weight: bold; line-height: 68px;}
#topimage .box .lead { font-size: 18px; line-height: 175%;}

@media screen and (max-width: 1120px){
	#topimage .innerPre { height: 626px; background: url("../images/concept/top-bg-tab.jpg") top center no-repeat; background-size: contain;}
}
@media screen and (max-width: 767px){
	#topimage .innerPre { height: auto; padding: 0; background: #f4f4f4; background-size: contain;}
	#topimage .box { width: 100%;}
	#topimage .box .catchBox { position: relative; padding-top: 102%; background: #f4f4f4 url("../images/concept/top-bg-mb.jpg") top center no-repeat; background-size: contain;font-size: 28px; line-height: 30px;}
	#topimage .box .catchBox .catch { position: absolute; top: 18%; left: 50px;}
	#topimage .box .catch br.nb { display: block;}
	#topimage .box .catch:before { position: absolute; bottom: -40px; left: -40px; margin-right: 30px; content: url("../images/top-catch-left.png");}
	#topimage .box .catch:after { position: absolute; top: -40px; right: 60px; margin-left: 30px; content: url("../images/top-catch-right.png");}
	#topimage .box .lead { padding: 20px;}
}
@media screen and (max-width: 639px){
	#topimage .box .catchBox .catch { left: 30px; font-size: 40px;  line-height: 48px;}
	#topimage .box .catch:before { left: -20px; }
}
@media screen and (max-width: 479px){
	#topimage .box .catchBox .catch { left: 20px; font-size: 32px;  line-height: 40px;}
	#topimage .box .lead { padding: 10px; line-height: 150%;}
	#topimage .box .lead br { display: none;}
}


#poricy { width: 100%; padding-top: 150px; margin-bottom: 80px; background: url("../images/blue-gradation-s.png") top left repeat-x;}
#poricy ul li { width: 33.33%; margin-bottom: 60px; float: left;}
#poricy ul li .box { position: relative; width: 284px; height: 120px; padding-top: 40px; border-radius: 5px; font-size: 22px; font-weight: bold; line-height: 30px; }
#poricy ul li .box:before { position: absolute; top: -25px; left: -25px; width: 86px; height: 86px; background: url("../images/concept/poricy-slash.png") top left no-repeat; background-size: contain; content: '';}
#poricy ul li:nth-child(1) .box { border: 8px #A1B5F8 solid; color: #A1B5F8;}
#poricy ul li:nth-child(2) .box { border: 8px #DE6888 solid; color: #DE6888;}
#poricy ul li:nth-child(3) .box { border: 8px #E99449 solid; color: #E99449;}
#poricy ul li:nth-child(4) { clear: both; margin-left: 16.66%;}
#poricy ul li:nth-child(4) .box { padding-top: 24px; border: 8px #71C355 solid; color: #71C355;}
#poricy ul li:nth-child(5) .box { border: 8px #B177CC solid; color: #B177CC;}
#poricy .textBox { margin-bottom: 80px;}
#poricy .textBox p { font-size: 19px; line-height: 200%;}

#profile { margin-bottom: 150px;}
#profile .profileImg { margin-bottom: 80px;}

#about {}

@media screen and (max-width: 767px){
	#poricy { padding-top: 60px; margin-bottom: 60px;}
	#poricy ul li { width: 50%; margin-bottom: 30px; padding: 0 20px;}
	#poricy ul li .box { width: 100%; font-size: 20px;}
	#poricy ul li .box:before { top: -20px; left: -20px; width: 40px; height: 40px;}
	#poricy ul li:nth-child(4) { clear: none; margin-left: 0;}
	#profile { margin-bottom: 60px;}
#profile .profileImg { margin-bottom: 60px;}
}
@media screen and (max-width: 639px){
	#poricy ul li { width: 100%; margin-bottom: 20px;}
	#poricy ul li .box { height: auto; padding: 10px 0 !important;}
	#poricy ul li .box:before { top: -10px; left: -10px; }
	#poricy .textBox p { font-size: 18px; text-align: left;}
	#poricy .textBox p br { display: none;}
}
@media screen and (max-width: 479px){
	#poricy { padding-top: 30px; margin-bottom: 30px;}
	#profile { margin-bottom: 30px;}
	#profile .profileImg { margin-bottom: 30px;}
}




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