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

* {
	line-height: 1.5;
	font-family:  "游明朝","ＭＳ Ｐ明朝", "ＭＳ 明朝","HG明朝B",  YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	letter-spacing: 0.05em;}

body {
	color: #1d1d1f;
}

.wrap {
	width: 100%;
}
.underbar-gra::after {
    content: '';
    display: block;
    margin: 2.4rem auto 0;
    width: 65px;
    height: 2px;
    background:linear-gradient(to right,#00BAFF,#FCB30B);
	background:-moz-linear-gradient(left,);
	background:-webkit-linear-gradient();
}

.underbar-orange-top::after {
    content: '';
    display: block;
    margin: 8px auto 0;
    width: 6.5rem;
    height: 4px;
    background:#FCB30B;
}

.underbar-orange::after {
    content: '';
    display: block;
    margin: 24px auto 0;
    width: 6.5rem;
    height: 2px;
    background:#FCB30B;
}

.underbar-blue-top::after {
    content: '';
    display: block;
    margin: 8px auto 0;
    width: 6.5rem;
    height: 4px;
    background:#00BAFF;
}

.sidebar-blu {
	border-left: solid 2px #00BAFF;
}

.sidebar-ora {
	border-left: solid 2px #FCB30B;
}

.fc-orange {
	color: #FCB30B;
}

.fc-blue {
	color: #00BAFF;
}

.fc-white {
	color: #ffffff;
}

.header-space {
	height:8.8rem;
}

.bg-gray {
	background-color:#F7F7F7;
}

.bg-white {
	background-color: #fff;
}

.bg-blue {
	background-color: #71c6d4;
}


header {
	width: 100%;
	height: 8.8rem;
	position: fixed;
	top: 0;
	z-index: 100;
	background: #fff;
}

#nav-drawer {
	display:none;
}

.header-colorbar {
	height: 0.4rem;
	background:linear-gradient(to right,#00BAFF,#FCB30B);
	background:-moz-linear-gradient(left,);
	background:-webkit-linear-gradient();
}

.header-container {
	margin: 0 auto;
	width: 92%;
	height: 8.4rem;
	display: flex;
	justify-content:space-between;
	align-items: center;
	background: #fff;
}

.header-logo {
	width: 80px;
	height: 75px;
	background-image:url("../logo.svg");
	background-size: cover;
	bacground-position: center;
	background-repeat: no-repeat;
}

.header-first {
	height: 75px;
}

.header-catch {
	padding: 0 1.6rem;
	font-size: 3.2rem;
    font-weight: bold;
}


nav {
	width: 60%;
	max-width: 572px;
}

.gnav {
	display: flex;
	justify-content: space-around;
	height: 8.4rem;
	font-size: 1.6rem;
}

.nav-parent {
	width: 33%;
	line-height: 8.4rem;
	background: #fff;
}

.nav-menu {
	display:block;
	background: #fff;
	height: 8.4rem;
	line-height: 8.4rem;
}

.nav-menu, .nav-child > li > a {
	color: #000;
}

.nav-child li {
	height: 0rem;
	overflow: hidden;
	transition: 0.2s;
}

.nav-child li a {
	display: block;
	height: 4.0rem;
	line-height: 4.0rem;
	background: #fff;
	border-top: 0.5px solid gray;
	font-size: 1.2rem;
}

.nav-parent:hover .nav-child li {
	overflow: visible;
	height: 4.0rem;
	
}

.content {
	width: 100%;
	padding: 12.6rem 0 8.2rem 0;
}

.heading {
	margin: 0 0 1.6rem 0;
	text-align: center;
	font-size: 2.0rem;
	font-weight: bold;
}

.catch {
	margin: 0 0 3.2rem 0;
	font-size: 4.0rem;
	font-weight: bold;
}

.tac{
	text-align: center;
}

.article {
	margin: 0 0 5.6rem 0;
	font-size: 2.2rem;
	line-height: 2.0;
}

.container {
	width: 95%;
	max-width: 1096px;
	margin: 0 auto;
}

.bggradient {
	background: linear-gradient(to bottom, #71c6d4, #29abe2);
	color: #fff;
}

.form p {
	font-size: 1.6rem;
}

.tel-to {
	display: block;
	width: 70%;
	margin: 0 auto 2.4rem;
	padding: 14px 8px;
	font-size: 2.4rem;
	color: #fff;
	background-color: rgb(255, 255, 255, 0.3);
}

.form-icon-container {
	display: flex;
	margin: 3.2rem 0 0 0;
	justify-content: space-around;
	align-items: center;
}

.form-icon-container-btw {
	width: 16%;
}

.mail-icon, .tel-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 16%;
	border-radius: 50%;
	color: #fff;
}

.mail-icon::before, .tel-icon::before {
	content: "";
	display: block;
	padding-top: 100%;
}

.mail-icon {
	background: #26BEF7;
}

.tel-icon {
	background: #FCB30B;
}

.fa-envelope,.fa-phone {
	color: #fff;
}

.snsbtn {
	display: block;
	margin: 0 auto;
	width: 40%;
	height: 3.2rem;
	line-height: 3.2rem;
	border: solid 1px #000;
	border-radius: 1.6rem;
	text-align: center;
	font-size: 1.6rem;
	color: #000;
}

.snsbtn-container {
	display: flex;
	width: 100%;
	padding: 3.2rem 0 0 0;
	justify-content: space-between;
	align-items: center;
}

.sns ul {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	margin: 4.8rem 0;
}
.sns ul li {
	width: 23%;
	border: solid 1px #000;
}

.sns ul li::before {
	content: "";
	display: block;
	padding-top: 100%;
}

footer {
	padding: 24px 0 0 0;
	background: #fff;
}

.footertop {
	padding: 1.6rem 0;
	display:flex;
	justify-content: space-between;
}

.footertop-btn {
	padding: 4px 16px;
	display: block;
	background: gray;
	color:#fff;
	font-size: 1.6rem;	
}

.footertop-pagetop {
	padding: 4px 16px;
	display: block;
	color: gray;
	font-size: 1.2rem;	
}

.footermiddle{
	padding: 1.6rem 0;
	margin: 0 0 1.6rem 0;
	display:flex;
	justify-content: space-between;
	font-size: 1.2rem;
}

.footermiddle > ul > li, .footermiddle > ul > li > a{
	color: #000;
}

.footermiddle ul {
	width: 33%;
}

.footermiddle li{
	margin: 0 0 1.6rem 0;
}



.footerbottom {
	margin-bottom: 3.2rem;
	
}

.footer-sns {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3.6rem;
}

.footer-sns li {
	margin: 0 8px;
}

.youtube-icon {color: #ff0000;}
.facebook-icon {color: #4267b2;}
.instagram-icon {color: #fff;}

.footerlogo {
	display: inline-block;
	margin: 0 auto;

	display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
	min-width: none;
}

.company-info {
	display: inline-block;
	font-size: 1.2rem;
}

.copyright {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4px 0;
	background: #000;
	color: #fff;
	width: 100%;
}

.sp-display {
		display: none;
	}

.ul-orange {
	background:linear-gradient(transparent 80%, #FFDA84 0%);
	}

.ul-black {
	background:linear-gradient(transparent 85%, #FFDA84 0%);
	}

/*ipad縦以下*/
@media screen and (max-width: 1024px) {
	
	nav {
		display: none;
	}
	
	.heading {
		margin: 0 0 2.4rem 0;
	}

	.header-space {
	height: 6.4rem;
}
	
	header {
	height: 6.4rem;
}

.header-colorbar {
	height: 0.2rem;
}

.header-container {
	width: 100%;
	height: 6.2rem;
}

.header-logo {
	width: 62px;
    height: 58px;
}

.header-catch {
    font-size: 3rem;
}

.gnav {
	height: 6.2rem;
}

.nav-parent {
	line-height: 6.2rem;
}

.nav-menu {
	height: 6.2rem;
	line-height: 6.2rem;
}

	
	
	/*ハンバーガーアイコン*/
#nav-drawer {
  position: relative;
	display: block;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
	position: fixed;
  width: 8.0rem;
  right: -20px;
  vertical-align: middle;
  cursor: pointer;
  float: left;
    background-color: #fff;
    z-index: 10000;
    opacity: 0.9;
}

/*ハンバーガーアイコンをCSSだけで表現*/
.top, .middle, .bottom {
  position: absolute;
  height: 2px;/*線の太さ*/
  width: 48px;/*長さ*/
  border-radius: 3px;
  background: #333333;
  display: inline-block;
  content: '';
    top: calc(50% - (1px / 2));
    transition: .3s;
}

.top {
    transform: translate(0, -11px);
}

.middle {
      
}
.bottom {
    transform: translate(0, 11px);
}

    

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
  cursor: pointer;
}


/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  padding-top: 8.8rem;
  top: 0;
  right: 0;
  z-index: 9999;/*最前面に*/
  width: 40%;/*左側に隙間を作る（閉じるカバーを表示）*/
  max-width: 800px;/*最大幅（調整してください）*/
  height: 100%;
  background: #F5F5F5;/*背景色*/
  transition: .2s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(105%);
  transform: translateX(105%);/*左に隠しておく*/
	
  /*以下オリジナル*/
	opacity: 0.9;
}

#nav-content ul {
	width: 100%;
	margin-bottom: 4.0rem;
	margin-left: 2.0rem; 
	text-align: left;
}
	
	#nav-content > ul > li {
		font-size: 1.8rem;
		color: #1d1d1f;
	}

	#nav-content > ul > li > a {
		font-size: 1.8rem;
		color: #1d1d1f;
	}

.nav-sns{
	display: flex;
	width: 240px!important;
	margin:0 auto!important;
	justify-content: space-around;
	align-items: center;
	font-size: 3.2rem!important;
}
	



/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0px);
  transform: translateX(0px);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

#nav-input:checked ~ #nav-open .middle {
        opacity: 0;
    }
    
#nav-input:checked ~ #nav-open .top {
        transform: rotate(-45deg) translateY(0px);
    }
    
#nav-input:checked ~ #nav-open .bottom {
        transform: rotate(45deg) translateY(0px);
    }


	.snsbtn-container {
		flex-direction: column;
	}
	
	.snsbtn {
		width: 60%;
	}
	
	.tel-to {
		font-size: 2.0rem;
		width: 90%;
	}
	
	.facebook {
		margin: 0 0 3.2rem 0;
	}
	
	
	.catch {
		font-size: 3.4rem;
	}
	
	.pc-display {
		display:none;
	}
	
	.sp-display {
		display: block;
	}

	.article {
    margin: 0 0 5.6rem 0;
    font-size: 1.8rem;
    line-height: 1.6;
}

	
}

@media screen and (max-width: 460px) {
	
	.content {
    padding: 5.6rem 0 5.2rem 0;
}

	.catch {
		font-size:2.4rem;
	}
	
.heading {
    margin: 0 0 2.4rem 0;
    font-size: 1.6rem;
}

	.header-catch {    
	font-size: 1.5rem;
}

	.header-logo{
		width: 64px;
		height: 60px;
	}

	#nav-content {
		width: 100%;
	}

	
	
	
	.footermiddle{
		flex-direction: column;
	}
	
	.footermiddle ul{
		width: 100%;
		margin-bottom: 2.4rem;
	}

}