@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font-style:normal; font-weight:normal; font-size:100%; vertical-align:baseline;}
strong { margin:0; padding:0; border:0; font-style:normal; font-weight:bold; font-size:100%; vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
html{ overflow-y:scroll;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content:none;}
input, textarea{ margin:0; padding:0;}
ol, ul{ list-style:none;}
table{ border-collapse:collapse; border-spacing:0; table-layout: fixed;}
caption, th{ text-align:left;}
a:focus { outline:none;}

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix { display:inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* End hide from IE-mac */

* { box-sizing:border-box;}

a { text-decoration:none;}
a:hover, button:hover, area:hover { text-decoration:none; opacity:0.75; filter:alpha(opacity=75); -ms-filter:"alpha(opacity=75)";}
a, a:hover, button, button:hover, area, area:hover { -webkit-transition:0.3s; -moz-transition:0.3s; -o-transition:0.3s; transition:0.3s;}

img { max-width:100%; height:auto; vertical-align: bottom;}
.mincho { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}

/*---- body, wrap, inner ----*/

body { width: 100%; min-width: 1100px; line-height: 150%; color: #333; font-size: 16px; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif !important; text-align: center; word-wrap: break-word; overflow: hidden;}

.inner, .innerW { position: relative; width: 1100px; margin: 0 auto; }
.innerPre { position: relative; width: 1500px; margin: 0 auto;}
.mb { display: none !important;}

@media screen and (max-width: 1499px){
	.innerPre { width: 100%;}
}
@media screen and (max-width: 767px){
	body { min-width: 1px;}
	.inner { width: 100%; padding: 0 10px;}
	.innerW { width: 100%;}
	.pc { display: none !important;}
	.mb { display: block !important;}
}
@media screen and (max-width: 639px){

}
@media screen and (max-width: 479px){
}


/*---- header ----*/
header#headerWrap { position: fixed; width: 100%; height: 120px; background: #fff; border-bottom: 2px #F8EA81 solid; z-index: 9999;}
header#headerWrap .inner {background: #fff;}
header#headerWrap .inner .h1box { position: absolute; top: 24px; left:0;}
header#headerWrap .inner .h1box a { display: block;}
header#headerWrap .inner .menu { display: none;}

@media screen and (max-width: 767px){
	header#headerWrap { position: fixed; top:0; left:0; height: 60px;}
	header#headerWrap .inner .h1box { top: 5px; left: 10px;}
	header#headerWrap .inner .h1box a img { height: 50px;}
	header#headerWrap .inner .menu { display: block; position: absolute; top: 0; right:0; width: 60px; height: 60px; padding-top: 6px;}
	header#headerWrap .inner .menu .icon { font-size: 32px; line-height: 32px;}
	header#headerWrap .inner .menu .text { font-size: 11px; font-weight: bold; line-height: 10px;}
}


/* gNavi */
nav#gNavi { position: absolute; top: 48px; left: 300px;}
nav#gNavi > ul { display: table; table-layout: auto; width: 800px;}
nav#gNavi > ul > li { display: table-cell;}
nav#gNavi > ul > li > a { position: relative; display: inline-block; height: 49px; color: #222; font-weight: bold; line-height: 49px;}
nav#gNavi > ul > li.contact > a { padding: 0 1em; color: #fff; background: #48C4CB; border-radius: 5px;}
nav#gNavi > ul > li > a:before, nav#gNavi > ul > li > a:after { position: absolute; top: 38px; content: ""; display: inline-block; width: 0; height: 1px; background: #666; transition: .3s;}
nav#gNavi > ul > li > a:before { left: 50%;}
nav#gNavi > ul > li > a:after { right: 50%;}
nav#gNavi > ul > li > a:hover:before, nav#gNavi > ul > li > a:hover:after{ width: 50%;}
nav#gNavi > ul > li > a.about:before, nav#gNavi > ul > li > a.about:after, nav#gNavi > ul > li > a.recruit:before, nav#gNavi > ul > li > a.recruit:after { background: #333;}
nav#gNavi > ul > li.contact > a:before, nav#gNavi > ul > li.contact > a:after { display: none;}

/* mega menu */
nav#megaMenu { display: none; position: fixed; top: 84px; left: 0px; width: 100%; padding-top: 40px; z-index: 9000;}
nav#megaMenu .mMenuWrap { width: 100%; padding: 30px 0 0 0; background: rgba(72,197,203,0.95);}
nav#megaMenu .mMenuInner { width: 1100px; margin: 0 auto; text-align: left;}
nav#megaMenu .mMenuInner .mMenuBox { width: 33.33%; float: left;}
nav#megaMenu .mMenuInner .mMenuBox:nth-child(4) { clear: both;}
nav#megaMenu .mMenuInner .mMenuBox h2 { position: relative; width: 322px; margin: 0 auto 10px auto; border-radius: 5px; overflow: hidden;}
nav#megaMenu .mMenuInner .mMenuBox h2 a { display: block;}
nav#megaMenu .mMenuInner .mMenuBox h2 a .title { position: absolute; bottom: 0; left: 0; width: 100%; padding-left: 10px; background: rgba(0,0,0,0.5); color: #fff; font-size: 14px;}
nav#megaMenu .mMenuInner .mMenuBox ul { width: 322px; margin: 0 auto 32px auto;}
nav#megaMenu .mMenuInner .mMenuBox ul li a { position: relative; display: inline-block; width: 100%; height: 32px; border-bottom: 1px #fff dotted; color: #fff; font-size: 15px; line-height: 32px;}
nav#megaMenu .mMenuInner .mMenuBox ul li a:after { position: absolute; right: 0px; content: '>';}

/* mobileNavi */
nav#mNavi { display: none;}

@media screen and (max-width: 767px){
	nav#gNavi { display: none;}
	nav#mNavi { position: fixed; top: 60px; left: 0; display: none; width: 100%; background: #fff; border-top: 1px #48C5CB solid; -moz-box-shadow: 1px 1px 3px #666; -webkit-box-shadow: 1px 1px 3px #666; box-shadow: 1px 1px 3px #666; z-index: 9999;}
	nav#mNavi a, nav#mNavi span { position: relative; display: block; width: 100%; height: 40px; padding-left: 10px; color: #48C5CB; font-weight: bold; line-height: 40px; text-align: left;}
	nav#mNavi a:after, nav#mNavi span:after { position: absolute; top: 0; right: 30px; height: 40px; color: #48C4CB; font-family: "Font Awesome 5 Pro"; content: "\f054";}
	nav#mNavi ul.parent > li > a, nav#mNavi ul.parent > li > span { border-bottom: 1px #48C5CB solid;}
	nav#mNavi ul.parent > li.sub > span:after { content: "\f067";}
	nav#mNavi ul.child { display: none;}
	nav#mNavi ul.child > li > a { background: #D9F5F8; border-bottom: 1px #48C5CB dotted;}
}


/*---- main ----*/
main#mainWrap { display: block; padding-top: 120px; padding-bottom: 100px;}

@media screen and (max-width: 767px){
	main#mainWrap { padding-top: 60px; padding-bottom: 100px;}
}


/*---- article ----*/
article#articleWrap {}

.h1title { width: 100%; height: 71px; background: #48C4CB; border-top: 3px #F9E981 solid; text-align: left;}
.h1title .inner { background: url("../images/h1bg2.png") right 0px no-repeat; background-size: contain;}
.h1title .inner h1 { height: 68px; padding-left: 150px; background: url("../images/h1bg.png") 90px 0px no-repeat; color: #fff; font-size: 24px; font-weight: bold; line-height: 68px;}

.breadWrap { width: 100%; padding: 20px 0; color: #444; text-align: left;}
.breadWrap .inner a { color: #222;}
.breadWrap .inner a:after { content: '＞'; margin: 0 0.5em;}

@media screen and (max-width: 767px){
	.h1title { height: 60px;}
	.h1title .inner { height: 57px;}
	.h1title .inner h1 { height: 57px; padding-left: 80px; background: url("../images/h1bg.png") 30px 0px no-repeat; line-height: 57px;}
	.breadWrap { padding: 10px 0; font-size: 14px;}
}


.h2star { display: inline-block; width: 100%; margin: 0 auto 80px auto; text-align: center;}
.h2star h2 { position: relative; display: inline-block; color: #48C4CB; font-size: 36px; font-weight: bold; line-height: 46px;}
.h2star h2::before { position: absolute; left: -104px; top: 50%; display: block; width: 74px; height: 21px; margin-top: -10px; background: url("../images/h2left.png") center center no-repeat; background-size: contain; content: '';}
.h2star h2::after { position: absolute; right: -104px; top: 50%; display: block; width: 74px; height: 21px; margin-top: -10px; background: url("../images/h2right.png") center center no-repeat; background-size: contain; content: '';}

@media screen and (max-width: 767px){
	.h2star { margin: 0 auto 40px auto;}
	.h2star h2 { width: 78%; margin: 0 auto; font-size: 24px; line-height: 36px;}
	.h2star h2 br { display: none;}
	.h2star h2::before { position: absolute; left: -10%; top: 50%; width: 10%; }
	.h2star h2::after { position: absolute; right: -10%; top: 50%; width: 10%; }
}
@media screen and (max-width: 479px){
	.h2star { margin: 0 auto 20px auto;}
	.h2star h2 { font-size: 20px; line-height: 24px;}
}


.blueGradation { width: 100%; background: url("../images/blue-gradation.png") left 180px repeat-x;}

ul.banner { display: table; table-layout: fixed; width: 100%; margin: 0 auto;}
ul.banner.two li { padding: 0 15px;}
ul.banner.three li { padding: 0 10px;}
ul.banner li { display: table-cell; vertical-align: top;}
ul.banner li figure .imgBox img { width: 100%; height: auto; border: 1px #48C4CB solid; border-radius: 7px;}
ul.banner li figure figcaption dl dt { padding: 20px 0; font-size: 28px; font-weight: bold; line-height: 125%;}
ul.banner li figure figcaption dl dt.s { line-height: 250%;}
ul.banner li figure figcaption dl dd { line-height: 200%; text-align: left;}

.threeWrap { width: 1000px; margin: 0 auto 80px auto;}
.threeWrap .inBox { width: 100%; margin-bottom: 50px; display: table; table-layout: fixed;}
.threeWrap .inBox .box { display: table-cell;}

.believeWrap { margin-bottom: 100px;}

@media screen and (max-width: 767px){
	.blueGradation { width: 100%; background: url("../images/blue-gradation.png") left 120px repeat-x;}
	ul.banner.three li { display: block; width: 50%; padding: 0 10px; margin-bottom: 20px; float: left;}
	ul.banner li figure figcaption dl dt { padding: 10px 0; font-size: 22px; line-height: 125% !important;}
}
@media screen and (max-width: 639px){
	ul.banner li figure figcaption dl dt { text-align: left;}
	ul.banner li figure figcaption dl dt br { display: none;}
}
@media screen and (max-width: 479px){
	ul.banner.two li, ul.banner.three li { display: block; width: 100%; float: none;}
}


/*---- footer ----*/
footer#footerWrap .contactWrap { padding: 40px 0 20px 0; background: #F9E981;}
footer#footerWrap .contactWrap .inner { display: table;}
footer#footerWrap .contactWrap .inner .box { display: table-cell; vertical-align: top; padding-right: 20px; text-align: left;}
footer#footerWrap .contactWrap .inner .box:last-child { padding-right: 0;}
footer#footerWrap .contactWrap .inner .box .contactTitle { display: inline-block; padding: 0 20px; border: 1px #333 solid; font-size: 20px; font-weight: bold; line-height: 36px;}
footer#footerWrap .contactWrap .inner .box.banner { text-align: center;}
footer#footerWrap .contactWrap .inner .box.banner a { display: block; background: #fff; padding: 0 30px; margin-bottom: 10px; border: 1px #49C5CB solid; border-radius: 5px; color: #49C5CB; font-size: 20px; font-weight: bold; line-height: 40px;}
footer#footerWrap .contactWrap .inner .box.banner p { font-size: 16px; line-height: 20px;}

footer#footerWrap .fNaviWrap { height: 750px; background: url("../images/footer_bg2.jpg") center top no-repeat #99EEFA;}
footer#footerWrap .fNaviWrap .pagetop { display: block; position: absolute; top: -220px; right: -180px;}
footer#footerWrap .fNaviWrap .pagetop a { display: block; width: 101px; height: 101px; padding-top: 10px; background: #48C5CB; color: #fff; text-align: center; line-height:40px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}
footer#footerWrap .fNaviWrap .pagetop a .arrow { font-size: 22px; line-height: 22px;}
footer#footerWrap .fNaviWrap .pagetop a .page { font-size: 24px; line-height: 24px;}
footer#footerWrap .fNaviWrap .pagetop a .top { font-size: 23px; line-height: 32px;}
footer#footerWrap .fNaviWrap .logo { position: absolute; top: 46px; left: 24px;}

nav#fNavi { position: absolute; top: 48px; left: 420px;}
nav#fNavi ul { width: 680px;}
nav#fNavi ul li { float: left;}
nav#fNavi ul li:after { content: '/'; margin: 0 1em;}
nav#fNavi ul li:last-child:after { display: none;}
nav#fNavi ul li a { position: relative; display: inline-block; height: 49px; color: #222; font-weight: bold; line-height: 49px;}

nav#fMenu { position: absolute; top: 165px; left: 0; width: 100%; text-align: left;}
nav#fMenu .fMenuBox { width: 33.33%; float: left; margin-bottom: 40px;}
nav#fMenu .fMenuBox:nth-child(4) { clear: both;}
nav#fMenu .fMenuBox h2 { margin-bottom: 15px; font-size: 20px; font-weight: bold; white-space: nowrap;}
nav#fMenu .fMenuBox ul { margin-left: 8px; padding-left: 16px; border-left: 1px #222 solid;}
nav#fMenu .fMenuBox ul li a { color: #222; text-decoration: underline;  line-height: 200%;}
nav#fMenu .fMenuBox ul li.s { margin-top: 8px;}
nav#fMenu .fMenuBox ul li.s a { line-height: 16px !important;}
nav#fMenu .fMenuBox:nth-child(5) { width: 66.67%; text-align: center;}
nav#fMenu .fMenuBox:nth-child(6), nav#fMenu .fMenuBox:nth-child(7) { width: 50%; text-align: center;}

nav#fMenu .fMenuBox .online a { display: block; width: 512px; height: 55px; margin: 0 auto 15px auto; padding-left: 150px; background: #fff url("../images/bottom-online.jpg") left center no-repeat; border: 1px #49C5CD solid; border-radius: 15px; color: #222; font-weight: bold;}
nav#fMenu .fMenuBox .online a .name { font-size: 32px; line-height: 55px;}
nav#fMenu .fMenuBox .online a .name span { display: inline-block; margin-left: 10px; font-size: 26px; transform: rotate(-45deg);}

nav#fMenu .fMenuBox .believe a { display: block; width: 512px; height: 55px; margin: 0 auto 15px auto; background: #fff; border: 1px #49C5CD solid; border-radius: 15px; color: #222; font-weight: bold;}
nav#fMenu .fMenuBox .believe a .believeBox { display: table; height: 100%; margin: 0 auto;}
nav#fMenu .fMenuBox .believe a .believeBox div { display: table-cell; vertical-align: middle;}
nav#fMenu .fMenuBox .believe a .believeBox .sub { padding-right: 8px; font-size: 16px; line-height: 16px;}
nav#fMenu .fMenuBox .believe a .believeBox .name { font-size: 32px; line-height: 32px;}
nav#fMenu .fMenuBox .sns .snsBox { display: table; height: 100%; margin: 0 auto;}
nav#fMenu .fMenuBox .sns .snsBox .snsIcon { display: table-cell; vertical-align: middle; padding: 0 20px;}

nav#fMenu .fMenuBox .bn img { border: 1px #49C5CD solid; border-radius: 15px;}

nav#fMenuMobile { display: none;}

@media screen and (max-width: 1120px){
	footer#footerWrap .fNaviWrap .pagetop { right: 10px;}
}
@media screen and (max-width: 767px){
	footer#footerWrap .contactWrap, nav#fNavi, nav#fMenu, footer#footerWrap .fNaviWrap .logo { display: none;}
	footer#footerWrap .fNaviWrap { height: auto;}
	footer#footerWrap .fNaviWrap .pagetop { top: -90px;}
	nav#fMenuMobile { display: block; }
	nav#fMenuMobile .bn { padding: 20px;}
	nav#fMenuMobile .bn .contact a { display: block; width: 100%; max-width: 512px; height: 72px; margin: 0 auto 20px auto; background: #49C5CD; border-radius: 15px; color: #fff; font-size: 32px; font-weight: bold; line-height: 72px;}
	nav#fMenuMobile .bn .online a { display: block; width: 100%; max-width: 512px; height: 72px; margin: 0 auto 15px auto; padding-left: 150px; background: #fff url("../images/bottom-online.jpg") left center no-repeat; background-size: contain; border: 1px #49C5CD solid; border-radius: 15px; color: #222; font-size: 32px; font-weight: bold; line-height: 72px;}
	nav#fMenuMobile .bn .believe a { display: block; width: 100%; max-width: 512px; height: 72px; margin: 0 auto; background: #fff; border: 1px #49C5CD solid; border-radius: 15px; color: #222; font-weight: bold;}
	nav#fMenuMobile .bn .believe a .believeBox { display: table; height: 100%; margin: 0 auto;}
	nav#fMenuMobile .bn .believe a .believeBox div { display: table-cell; vertical-align: middle;}
	nav#fMenuMobile .bn .believe a .believeBox .sub { padding-right: 8px; font-size: 16px; line-height: 16px;}
	nav#fMenuMobile .bn .believe a .believeBox .name { font-size: 32px; line-height: 32px;}
	nav#fMenuMobile .sns { width: 100%; padding: 20px 0;}
	nav#fMenuMobile .sns .snsBox { display: table; height: 100%; margin: 0 auto;}
	nav#fMenuMobile .sns .snsBox .snsIcon { display: table-cell; vertical-align: middle; padding: 0 20px;}
	nav#fMenuMobile .bn img { border: 1px #49C5CD solid; border-radius: 15px;}
}
@media screen and (max-width: 639px){
	footer#footerWrap .fNaviWrap .pagetop { }
	nav#fMenuMobile .bn .contact a { height: 60px; font-size: 28px; line-height: 60px;}
	nav#fMenuMobile .bn .online a { font-size: 24px;}
	nav#fMenuMobile .bn .believe a { height: 60px; line-height: 60px;}
	nav#fMenuMobile .bn .believe a .believeBox .sub { font-size: 14px;}
	nav#fMenuMobile .bn .believe a .believeBox .name { font-size: 24px;}
}
@media screen and (max-width: 479px){
	footer#footerWrap .fNaviWrap .pagetop { top: -40px;}
	footer#footerWrap .fNaviWrap .pagetop a { width: 40px; height: 40px; padding-top: 0;}
	footer#footerWrap .fNaviWrap .pagetop a .arrow { line-height: 40px;}
	footer#footerWrap .fNaviWrap .pagetop a .page, footer#footerWrap .fNaviWrap .pagetop a .top { display: none;}
	nav#fMenuMobile .bn { padding: 10px;}
	nav#fMenuMobile .bn .contact a { height: 50px; margin: 0 auto 10px auto; font-size: 20px; line-height: 50px;}
	nav#fMenuMobile .bn .online a { padding-left: 100px; height: 50px; line-height: 50px; font-size: 20px;}
	nav#fMenuMobile .bn .believe a { height: 50px; line-height: 40px;}
	nav#fMenuMobile .bn .believe a .believeBox .sub { font-size: 9px;}
	nav#fMenuMobile .bn .believe a .believeBox .name { font-size: 20px;}
	nav#fMenuMobile .sns { padding: 10px 0;}

}



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