@charset "utf-8";

/*
@media (min-width: 992px) | PC
@media screen and (min-width: 767px) | PC & TAB
@media screen and (max-width: 991px) and (min-width:767px) | TAB
@media screen and (max-width: 767px) | SP
*/

body {   
	background-color: #fff;
	color: #1f1f1f;
	font-size: 16px;	
	font-family: 'Noto Sans', "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
	line-height: 2em;
}

@media screen and (max-width: 767px) {
	body { font-size: 14px;}
}

a { color: #1f1f1f; text-decoration: none;}
a:visited, a:focus { color: #1f1f1f; text-decoration: none;}
a:hover { color: #1f1f1f; text-decoration: none; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}
a:hover img { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}
input:hover { color: #1f1f1f; opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)";}
a.under { text-decoration: underline;}


@media (min-width: 576px) {
  .container { max-width: 100%; padding-right: 20px; padding-left: 20px;}
}

@media (min-width: 768px) {
  .container { max-width: 100%; padding-right: 20px; padding-left: 20px;}
}

@media (min-width: 992px) {
  .container { max-width: 90%;}
}

@media (min-width: 1200px) {
  .container { max-width: 90%;}
}


.main { margin-top: 160px;}
.section { padding: 80px 0;}
#section01 { padding: 0;}
#section03, #section05 { background: #e8e8e8;}

.section h2 { font-family: 'Poppins', sans-serif; text-align: center; letter-spacing: 2px; font-size: 60px; line-height: 1em; margin-bottom: 50px;}
.section h2 span { font-size: 18px; font-family: 'Noto Sans', sans-serif; display: block; line-height: 1em; position: relative; margin-top: 45px;}
.section h2 span:before { content: ''; position: absolute; left: 50%; top: -25px; display: inline-block; width: 5em; height: 5px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #8f8f8f;}

@media screen and (max-width: 992px) {
	.section h2 { font-size: 45px;}
}

@media screen and (max-width: 767px) {
	.main { margin-top: 100px;}
	.section { padding: 40px 0;}
	#section03 { padding: 30px 0 40px;}
	.section h2 { letter-spacing: 1px; font-size: 34px; margin-bottom: 30px;}
	.section h2 span { font-size: 16px; margin-top: 33px;}
	.section h2 span:before { top: -20px;}
}

/* header --------------------*/
#header { overflow: hidden; background: rgba(255,255,255,0.8);}

@media screen and (min-width: 767px) {
	#header h1 { text-align: center; position: absolute; left: 0; width: 100%;}
	#header h1 img { width: auto; margin: 0; vertical-align: top;}

	.navBtn { display: none;}

	.headNav ul { position: relative; left: 50%; float: left; margin: 0 0 0 29px; padding: 0;}
	.headNav li { font-family: 'Poppins', sans-serif; font-size: 18px; letter-spacing: 1px; list-style: none; float:left; padding: 0 20px; position: relative; left: -50%;}
	.headNav li:nth-child(2) { margin-right: 192px;}

	.navFst { padding: 30px 0;}
	.navFst h1 { top: 30px;}
	.navFst h1 img { height: 100px;}
	.navFst .headNav ul { height: 100px;}
	.navFst .headNav li { line-height: 100px;}

	.navFix { padding: 15px 0;}
	.navFix h1 { top: 15px;}
	.navFix h1 img { height: 50px;}
	.navFix .headNav ul { height: 50px;}
	.navFix .headNav li { line-height: 50px;}
}

@media screen and (max-width: 992px) {
	.headNav li { padding: 0 10px;}
}

@media screen and (max-width: 767px) {
	#header h1 { text-align: center; width: 100%; margin: 0;}
	#header h1 img { width: auto; margin: 0; vertical-align: top;}
	
	.navBtn { z-index: 2000; position: absolute; margin: 0; cursor: pointer;}
	
	.headNav { display: none;}
	.headNav ul { margin: 0; padding: 20px 0 0;}
	.headNav li { font-family: 'Poppins', sans-serif; font-size: 18px; letter-spacing: 1px; list-style: none; margin: 0; background: rgba(31,31,31,0.5);}
	.headNav li a { display: block; line-height: 50px; text-align: center; color: #fff;}
	
	.navFst {padding: 20px 0;}
	.navFst h1 img { height: 60px;}
	.navFst .navBtn { top: 20px; right: 20px; font-size: 40px;}
	.navFix {padding: 10px 0;}
	.navFix h1 img { height: 45px;}
	.navFix .navBtn { top: 10px; right: 20px; font-size: 36px;}
}

/* main bn --------------------*/
#section01 p { margin: 0;}

@media screen and (min-width: 767px) {
	#section01 p.bnSP { display: none;}
}

@media screen and (max-width: 767px) {
	#section01 p.bnPC { display: none;}
}

/* news --------------------*/
.news { width: 60%; margin: 0 auto;}
.news dl, .news dt, .news dd { margin: 0;}
.news dl { overflow: hidden; border-top: 1px solid #e8e8e8;}
.news dt { float: left; font-family: 'Poppins', sans-serif; letter-spacing: 1px; text-indent: 10px; padding: 15px 0;}
.news dd { width: 100%; border-bottom: 1px solid #e8e8e8; position: relative; padding: 15px 40px 15px 18%;}
.news dd:after { position: absolute; top: 15px; right: 10px; font-family: "Font Awesome 5 Free"; content: "\f054"; font-weight: 900;}
.news .newsLnk { margin: 10px 0 0; text-align: right;}
.news .newsLnk:before { font-family: "Font Awesome 5 Free"; content: "\f101"; font-weight: 900; margin-right: 7px;}

@media screen and (max-width: 1200px) {
	.news { width: 100%; margin: 0 auto;}
}

@media screen and (max-width: 767px) {
	.news { width: 100%;}
	.news dl, .news dt, .news dd { line-height: 2em;}
	.news dl { border-bottom: 1px solid #e8e8e8; border-top: none;}
	.news dt { float: none; border-top: 1px solid #e8e8e8; padding-top: 15px;}
	.news dd { border-bottom: none;}
	.news dd { padding: 0 10px; border-top: none; position: relative; padding-bottom: 15px; padding-right: 30px;}
	.news dd:after { top: 0;}
}

/* service --------------------*/
.srvcCnt { height: 100%;  background: #fff; padding: 30px; position: relative;}
.srvcCnt a { display: block;}
.srvcCnt:before { font-family: "Font Awesome 5 Free"; content: "\f35d"; font-weight: 900; position: absolute; right: 15px; bottom: 10px; font-size: 18px; color: rgba(31,31,31,0.2);}
.srvcCnt h3 { text-align: center; font-size: 24px; font-weight: bold; position: relative; margin: 0 0 35px;}
.srvcCnt h3:after { content: ''; position: absolute; left: 50%; bottom: -20px; display: inline-block; width: 36px; height: 5px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #8f8f8f;}
.srvcCnt .srvcImg { text-align: center; margin: 0 0 20px;}
.srvcCnt .srvcImg img { width: 100%; max-width: 400px; height: auto;}
.srvcCnt .srvcTxt { margin: 0;}

@media screen and (max-width: 767px) {
	.srvc .col-md-6 { margin-top: 15px;}
	.srvc .col-md-6:first-child { margin-top: 0px;}
	.srvcCnt { padding: 20px 20px 30px;}
	.srvcCnt:before { right: 13px; bottom: 10px; font-size: 22px;}
	.srvcCnt .srvcImg img { width: 100%; height: auto}
}

/* company --------------------*/
.company dl, .company dt, .company dd { margin:0;}
.company { overflow: hidden; line-height: 68px; border-top: 1px solid #e8e8e8;}
.company dt { float: left; text-indent: 10px;}
.company dd { width: 100%; border-bottom: 1px solid #e8e8e8; padding-left: 25%;}

@media screen and (max-width: 767px) {
	.company { line-height: 2em; }
	.company dt { padding: 15px 0;}
	.company dd { padding: 15px 0 15px 10%;}
	#section04 iframe { height: 300px; margin-top: 15px;}
	}


/* contact --------------------*/
.frmTxt { text-align: center; margin: 0 auto 30px;}
.frm { width: 60%; margin: 0 auto;}
.frm label { font-weight: bold;}
.frmBtn { margin: 30px auto 0; text-align: center;}
.frmBtn button { background: #1f1f1f; width: 30%; color: #fff; line-height: 50px; border: none; padding: 0;}

.frmDl { border: 2px solid #1f1f1f; overflow: hidden; padding: 30px 20px; width: 80%; margin: 80px auto 0;}
.frmDl h3 { text-align: center; font-family: 'Poppins', sans-serif; font-size: 28px;}
.frmDl h3 span { font-family: 'Noto Sans', sans-serif; font-size: 16px; display: block; line-height: 1em; position: relative; margin-top: 30px;}
.frmDl h3 span:before { content: ''; position: absolute; left: 50%; top: -20px; display: inline-block; width: 8em; height: 5px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #8f8f8f;}
.frmDl ul { overflow: hidden; margin: 30px 0 0; padding: 0;}
.frmDl li { float: left; width: 33.333%; list-style: none; text-align: center; margin: 0;}
.frmDl li a { border: 1px solid rgba(31,31,31,0.2); display: block; line-height: 50px; margin: 0 10px;}
.frmDl li a:before { font-family: "Font Awesome 5 Free"; content: "\f0da"; font-weight: 900; margin-right: 10px;} 

@media screen and (max-width: 1200px) {
	.frm { width: 100%;}
	.frmDl { width: 100%;}
}

@media screen and (max-width: 767px) {
	.frmTxt { text-align: left;}
	.frm { width: 100%;}
	.frmBtn { margin: 30px auto 0;}
	.frmBtn button { width: 50%;}
	.frmDl { width: 100%; padding: 30px; margin: 40px auto 0;}
	.frmDl ul { margin: 20px 0 0;}
	.frmDl li { float: none; width: 100%; text-align: left; margin: 10px 0 0 0;}
	.frmDl li a { border: 1px solid rgba(31,31,31,0.2); display: block; margin: 0; font-size: 16px; padding-left: 20px;}
}

.frmMail { width: 30%; margin: 0 auto 50px;}
.frmMail a { border: 1px solid rgba(31,31,31,0.5); display: block; line-height: 50px; text-align: center;}
.frmDtl { font-size: 20px; font-weight: bold; text-align: center;}
.frmUl { margin: 0 auto; width: 170px;}

@media screen and (max-width: 767px) {
	.frmMail { width: 80%; margin: 0 auto 30px;}
	.frmDtl { font-size: 20px; font-weight: bold; text-align: left; text-indent: 15px;}
	.frmUl { margin: 0; width: 100%;}
}

/* footer --------------------*/
#footer { background: #1f1f1f; padding:  50px 0 20px; color: #fff;}
#footer h2 { text-align: center; margin: 0 auto 30px;}
#footer h2 img { width: 90px; height: auto;}
#footer .copy { text-align: center; font-family: 'Poppins', sans-serif; letter-spacing: 1px; margin-bottom: 0;}
#footer ul { overflow: hidden; padding: 0; margin: 0 0 50px;}
#footer li { float: left; width: 50%; text-align: center; list-style: none;}
#footer li a, #footer li span { border: 1px solid rgba(255,255,255,0.2); display: block; color: #fff; line-height: 50px; margin-right: 10px;}
#footer li:last-child a, #footer li:last-child span { margin-right: 0; margin-left: 10px;}

.topBack { z-index: 1000; position: fixed; bottom: 20px; right: 20px; width: 50px; line-height: 50px; text-align: center; font-size: 26px; background: rgba(255,255,255,0.3); border: 1px solid rgba(31,31,31,0.8); display: block;}

@media screen and (max-width: 767px) {
	#footer { padding: 20px 0;}
	#footer h2 { margin: 0 auto 20px;}
	#footer h2 img { height: 60px; width: auto;}
	#footer .copy { font-size: 12px; letter-spacing: 0;}
	#footer ul { margin: 0 0 30px;}
	#footer li { float: none; width: 100%;}
	#footer li a, #footer li span { margin-right: 0;}
	#footer li:last-child a, #footer li:last-child span { margin: 10px 0 0 0;}
	#top-link { display: none;}
}

/* animation --------------------*/
.move { 
	animation: btnSld 1.5s ease-out;
	-moz-animation: btmSld 1.5s ease-out;
	-ms-animation: btmSld 1.5s ease-out;
	-webkit-animation: btmSld 1.5s ease-out;
} 
@-webkit-keyframes btmSld {
  0% { -webkit-transform: translateY(200px);}
  100% { -webkit-transform: translateY(0);}
}
@-moz-keyframes btmSld {
  0% { -moz-transform: translateY(200px);}
  100% { -moz-transform: translateY(0);}
}
@-ms-keyframes btmSld {
  0% { -moz-transform: translateY(200px);}
  100% { -moz-transform: translateY(0);}
}
@keyframes btmSld {
  0% { transform: translateY(200px);}
  100% { transform: translateY(0);}
}


/* common --------------------*/
.common { width: 70%; max-width: 960px;  margin: 0 auto; padding: 80px 0;}
.common h2 { font-size: 28px; font-weight: bold; line-height: 1.6em; margin: 0 0 30px; text-align: center; border-bottom: 1px solid #1f1f1f; padding-bottom: 10px;}

.privacy h3 { font-size: 20px; font-weight: bold; margin: 60px 0 15px;}
.privacy ul { padding-left: 1.6em;}
.privacy .prvDate { padding: 0; margin: 0 0 60px;}
.privacy .prvDate li { list-style: none;}

.privacy dl { margin: 0 0 30px;}
.privacy dt, .privacy dd { margin:0; padding: 20px;}
.privacy dl { overflow: hidden; border: 1px solid #ccc; border-top: none;}
.privacy dt { float: left; width: 30%; border-top: 1px solid #ccc;}
.privacy dd { float: left; width: 70%; border-left: 1px solid #ccc; border-top: 1px solid #ccc;}
.privacy dd ul, .privacy dd li { margin: 0;}
.privacy dt.prcDl, .privacy dd.prcDl { padding: 15px 20px;background: #e8e8e8; font-weight: bold;}

.privacy a { text-decoration: underline; font-weight: bold;}

@media screen and (max-width: 767px) {
	.common { width: 100%; padding: 40px 20px;}
	.common h2 { font-size: 22px;}
	.privacy h3 { font-size: 18px; margin: 40px 0 15px;}
	.privacy dt, .privacy dd { margin:0; padding: 10px;}
	.privacy .prvDate { padding: 0; margin: 0 0 40px;}
}