@charset "UTF-8";

/*
コンセプトカラー
#2ecc71
#27ae60
https://flatuicolors.com/palette/defo
*/



/*----------------------------------------------------
reset css
----------------------------------------------------*/
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, strong, 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-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

html,body{
	background-color:#fff;
	width:100%;
	height: 100%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  	margin: 0;
}



/*------------------------------------------------
ripple
------------------------------------------------*/
.ripple {
	position: relative;
	overflow: hidden;
  }
  
  .ripple .rp-effect {/*エフェクト*/
	position: absolute;
	border-radius: 50%;
	opacity: 0.35;/*波紋の濃さ*/
	transform: scale(0);
	background: #FFF;/*波紋色*/
	animation: ripple 700ms;
	pointer-events: none; 
  }
  
  @-webkit-keyframes ripple {
	to {
	  opacity: 0;
	  transform: scale(2.0);
	}
  }
  
  @keyframes ripple {
	to {
	  opacity: 0;
	  transform: scale(2.0);
	}
  }






/*------------------------------------------------
default config
------------------------------------------------*/
body{
	min-height: 100%;
	flex-direction: column;
	display: flex;
	box-sizing:border-box;
	transition:padding 0s;
	-webkit-transition:padding 0s;
	-moz-transition:padding 0s;
	transition-delay: 0s;
}
.container{
	flex: 1;
	position: relative;
	padding: 0 10px;
}
.container, .header_Container, .footer_Container{
	width:1200px;
	max-width:100%;
	margin:0 auto;
	position:relative;
}

*{
	box-sizing:border-box;
	transition:all 0.2s;
	-moz-transition:all 0.2s;
	-webkit-transition:all 0.2s;
	transition-delay: 0s;
}
a{
	text-decoration:none;
}

.cf{
	clear:both;
}
.dn{
	display:none;
}
.di{
	display:inline-block;
	vertical-align:top;
}


/*各パーツの噛み合わせ調整*/
header{
	position: fixed;
	top:0;
	left:0;

	z-index:999;
}
.SideMenuWrap{
	position:fixed;
	left:0;
	top:0;

	width:300px;
	max-width:90%;
	z-index:1000;
}
#wrap{
	padding-top:65px;
}




/*------------------------------------------------
header
------------------------------------------------*/
header{
	width:100%;
	height:65px;
	box-sizing:border-box;
}
header.Show{
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0px 6px 3px -3px rgba(100,100,100,0.4);
	-webkit-box-shadow: 0px 6px 3px -3px rgba(100,100,100,0.4);
	-moz-box-shadow: 0px 6px 3px -3px rgba(100,100,100,0.4);
}
.header_Container{
	box-sizing:border-box;
	height:100%;
}
.siteLogo{
	position: absolute;
	left:0;
	top:50%;
	transform: translate(0, -50%);
}

.header_IconBox{
	position: absolute;
	right:10px;
	top:50%;
	transform:translate(0, -50%);
	-webkit-transform:translate(0, -50%);
	-moz-transform:translate(0, -50%);
}
.header_IconBox a{
	display:inline-block;
	vertical-align:top;
	width:50px;
	height:50px;
	border-radius:50%;
	text-align:center;
}


.header_HumbMenu{
	margin-left:15px;
	padding:18px 15px;
	box-sizing:border-box;
	cursor:pointer;
	
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	transition-delay: 0s;
}
.header_HumbMenu div{
	position:relative;
	box-sizing:border-box;
	width:100%;
	height:100%;
}
.header_HumbMenu i{
	display:block;
	width:100%;
	height:2px;
	border-radius:5px;
	background-color:#000;
	position:absolute;
	left:0;
	transform-origin:0 0;
}
.header_HumbMenu .header_MenuBarTop{
	top:0px;
}
.header_HumbMenu .header_MenuBarMiddle{
	top:50%;
	transform:translate(0,-50%);
	-webkit-transform:translate(0,-50%);
	-moz-transform:translate(0,-50%);
}
.header_HumbMenu .header_MenuBarBottom{
	bottom:0px;
}

/*ハンバーガー開いてるとき*/
.header_HumbMenu.Open{
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
}
.header_HumbMenu.Open div{
	left:2px;
}
.header_HumbMenu.Open .header_MenuBarTop{
	transform:rotate(45deg) translate(0,-2.1px);
	-webkit-transform:rotate(45deg) translate(0,-2.1px);
	-moz-transform:rotate(45deg) translate(0,-2.1px);
}
.header_HumbMenu.Open .header_MenuBarMiddle{
	display:none;
}
.header_HumbMenu.Open .header_MenuBarBottom{
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
}




/*------------------------------------------------
header colors
------------------------------------------------*/
header{
	background-color:rgba(255, 255, 255, 0);
}



.header_IconBox a:hover{
	background-color:#ddd;
}

.header_HumbMenu .header_MenuBarMiddle{
	background-color:#2ecc71;
}

/*ハンバーガー開いてるとき*/
.header_HumbMenu.Open .header_MenuBarTop{
	background-color:#2ecc71;
}
.header_HumbMenu.Open .header_MenuBarBottom{
	background-color:#2ecc71;
}


/*------------------------------------------------
footer
------------------------------------------------*/
footer{
	text-align:center;
	box-sizing:border-box;
	position: relative;
	margin-top:50px;
	padding-bottom:10px;
}


.footer_SiteName{
	text-align:center;
	margin-bottom:10px;
}
.footer_SiteName .e{
	font-family: 'ZCOOL KuaiLe', cursive;
	font-weight:bold;
	padding-left:10px;
	box-sizing:border-box;
	font-size:20px;
}

.footer_SiteText{
	font-size:10px;
	color:#fff;
	letter-spacing:3px;
	text-align:center;
	margin-bottom:25px;
}

.footer_Menu{
	text-align:center;
	margin-bottom:25px;
}
.footer_Menu li{
	display:inline-block;
}
.footer_Menu li a{
	font-size:12px;
	color:#fff;
	text-decoration:underline;
}
.footer_Menu li a:hover{
	text-decoration:none;
}

.footer_CopyRight{
	text-align:center;
	font-size:10px;
	color:#999;
}



/*------------------------------------------------
footer colors
------------------------------------------------*/
footer{
	background-color:#000;
}

.footer_SiteName span{
	color:#e74c3c;
}




/*------------------------------------------------
side menu
------------------------------------------------*/
.SideMenuWrap{
	height:100%;
	transform:translate(-150%, 0);

	background-color:rgba(240,240,240,0.95);
	box-shadow: 5px 0px 3px -3px rgba(100,100,100,0.4);
	-webkit-box-shadow: 5px 0px 3px -3px rgba(100,100,100,0.4);
	-moz-box-shadow: 5px 0px 3px -3px rgba(100,100,100,0.4);
}

/*js用*/
.SideMenuWrap.Show{
	transform:translate(0,0);
	-webkit-transform:translate(0,0);
	-moz-transform:translate(0,0);
}
.SideMenuBG{
	cursor:pointer;
	background-color:rgba(0, 0, 0, 0.8);;
	z-index:998;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
}


.SideMenu{
	height:100%;
	overflow-y:scroll;
}
.SideMenu li a{
	display:block;
	width:100%;
	height:75px;
	line-height:75px;
	color:#555;
	padding:0 15px;
	box-sizing:border-box;
	font-size:15px;
}
.SideMenu li a:hover{
	background-color:#ddd;
	color:#000;
}
.SideMenu li a i{
	font-size:20px;
	line-height:15px;
	color:#27ae60;
	margin-right:10px;
	position: relative;
	top:1px;
}
.SideMenu li.Selected a{
	background-color:#ddd;
}




/*------------------------------------------------
media screen
------------------------------------------------*/
@media screen and (min-width:0px){

	/*container内部パーツ調整*/
	.MainContainer{
		width:100%;
		padding:0 0 40px 0;
	}
	.SideContainer{
		width:100%;
	}
}

@media screen and (min-width:800px){

	/*container内部パーツ調整*/
	.MainContainer{
		width:70%;
		padding:0 20px 0 0;
	}
	.SideContainer{
		width:30%;
	}

}

@media screen and (min-width:1300px){

	/*container内部パーツ調整*/
	.MainContainer{
		width:75%;
		padding:0 20px 0 0;
	}
	.SideContainer{
		width:25%;
	}

}








/*------------------------------------------------
main
------------------------------------------------*/


/*****************************
共通見出し
******************************/
.heading {
	font-size: 2.0rem;
	position: relative;
	padding-bottom:15px;
	text-align: center;
	margin: 80px 0 15px 0;
}

.heading span {
	font-size: 1.2rem;
	margin-top:6px;
	display: block;
}

/*
.heading:before {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100px;
	height: 5px;
	content: '';
	border-radius: 10px;
	background: #27ae60;
}
*/



/*****************************
パンくず
******************************/
.Pankuzu{
	position: absolute;
	top:80px;
	left:0;
	background-color:#000;
	width:100%;
	white-space:nowrap;
	overflow:hidden;
}
.Pankuzu li{
	display:inline-block;
	padding-right:20px;
	vertical-align:top;
	position: relative;
	font-size:0;
}
.Pankuzu li:before{
	content:"";
	width:5px;
	height:5px;
	border-right:1px solid #e74c3c;
	border-top:1px solid #e74c3c;
	position: absolute;
	right:8px;
	top:50%;
	transform:translate(0, -50%) rotate(45deg);
	-webkit-transform:translate(0, -50%) rotate(45deg);
	-moz-transform:translate(0, -50%) rotate(45deg);
}
.Pankuzu li a{
	color:#fff;
	font-size:10px;
}
.Pankuzu li a:hover{
	text-decoration:underline;
}
.Pankuzu li:last-child:before{
	display:none;
}
.Pankuzu li:last-child a{
	pointer-events:none;
	color:#e74c3c;
	font-weight:bold;
}



/*****************************
loading
******************************/
.loaderBG{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:#27ae60;
	z-index:1001;
}

.loader2{
    width:200px;
    height:60px;
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index:1002;
}
.circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.loader2 span{
    text-align:center;
    position: absolute;
    top:75px;
    font-family: 'Lato';
    font-size: 20px;
    letter-spacing: 12px;
    color: #fff;
    left:15%;
    line-height:2;
}

#loader.hidden{
	display:none;
}







/*****************************
SideContainer
******************************/
.SideHeading{
	text-align:center;
	font-weight:bold;
	color:#333;
	font-size:14px;
	margin-bottom:5px;
}



/*****************************
company
******************************/
.company-body{
	margin-bottom:20px;
	font-size:16px;
    letter-spacing:3px;
    line-height:1.7;
}
.company-body img{
	max-width:100%;
	height:auto;
}
.company-info{
	text-align: center;
	margin-top:50px;
	position: relative;
}
.company-info .name{
	font-size:22px;
	font-weight:bold;
	color:#333;
	margin-bottom:10px;
	letter-spacing: 5px;
}
.company-info .address{
	color:#666;
	font-size:14px;
}
.company-info > img{
	position: absolute;
	right:0px;
	top:50%;
	transform: translate(0, -50%);
	width:100px;
	z-index:-1;
}
.company-wrap .google-map{
	width: 100%;
    position: relative;
    padding-top: 40%;
}
.company-wrap .google-map iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.company-wrap .company-contact{
    margin-top:50px;
}
.company-wrap .company-contact li{
    display: inline-block;
    vertical-align: top;
    width:48%;
    position: relative;
    border: solid 2px black;
    background-color: #fff;
    padding:15px;
    text-align:center;
}
.company-wrap .company-contact li:last-child{
    margin-left:4%;
}
.company-wrap .company-contact li::before,
.company-wrap .company-contact li::after {
  position: absolute;
  content: "";
  display: block;
  background-color: #fff;
}
.company-wrap .company-contact li::before {
    top: -3px;
    bottom: -3px;
    left: 5px;
    right: 5px;
}

.company-wrap .company-contact li::after {
    top: 5px;
    bottom: 5px;
    left: -3px;
    right: -3px;
}

.company-wrap .company-contact li > div {
    position: relative;
    z-index: 1;
}
.company-wrap .company-contact li > div > p{
    font-size:1.25rem;
    border-bottom: solid 2px;
    display: inline-block;
    margin-bottom: 20px;
    padding:0 5px 10px 5px;
    font-weight:bold;
}
.company-wrap .company-contact li > div > a{
    display:block;
    width:100%;
    height:45px;
    line-height:45px;
    color:#fff;
    font-size:1.25rem;
    margin-bottom:20px;
    border-radius:10px;
}
.company-wrap .company-contact li > div > a i{
    margin-right:10px;
}
.company-wrap .company-contact li > div > div{
    font-size:.875rem;
    line-height:1.8;
}
.company-wrap .company-contact li > div > div i{
    margin-right:5px;
}

/*カラー設定*/
.company-wrap .company-contact li.line{
    border-color:#00b900;
}
.company-wrap .company-contact li.line > div > p{
    color:#00b900;
    border-color:#00b900;
}
.company-wrap .company-contact li.line > div > a{
    background-color:#00b900;
}
.company-wrap .company-contact li.line > div > a:hover{
    background-color:#007e00;
}
.company-wrap .company-contact li.line > div > div{
    color:#00b900;
}
.company-wrap .company-contact li.tel{
    border-color:#333;
}
.company-wrap .company-contact li.tel{
    border-color:#333;
}
.company-wrap .company-contact li.tel > div > p{
    color:#333;
    border-color:#333;
}
.company-wrap .company-contact li.tel > div > a{
    background-color:#333;
}
.company-wrap .company-contact li.tel > div > a:hover{
    background-color:#000;
}
.company-wrap .company-contact li.tel > div > div{
    color:#333;
}

@media screen and (max-width: 767px){
	.company-info > img{
		width:50px;
	}
	.company-wrap .google-map{
		padding-top:55%;
	}
	.company-wrap .company-contact li{
		width:100%;
	}
	.company-wrap .company-contact li:last-child{
		margin:20px 0 0 0;
	}
}

/*company ▲*/