@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300&display=swap&subset=japanese');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
    /*overflow-x: hidden;*/
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}
/* /リセットCSS */



/****************************************
				Base
*****************************************/
body {
	font-size: 13px;
	line-height: 2;
	letter-spacing: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, "游ゴシック", YuGothic, Arial, sans-serif;
	font-weight: 300;
	max-width: 100%;
	width: 100%;
	color: #5F5F51;
	background: #ffffff;
	margin: 0;
	padding: 0;
	letter-spacing: 2px;
}

a{
	color: unset;
	text-decoration: none;
}

img{
	max-width: 100%;
	vertical-align: bottom;
	padding: 0;
	margin: 0;
	line-height: 0;
}
b{
	font-weight: 800;
}

table{
	border-collapse: separate;
	box-sizing: border-box;
}
td,th{
	box-sizing: border-box;
}

th{
	text-align: left;
	font-weight: 500;
	padding: 10px;
	vertical-align: middle;
    word-break: keep-all;
}
td{
	padding: 10px;
	vertical-align: middle;
}
ul,
li{
	list-style-type: none;
}

a{
	transition: 0.3s;
	display: inline-block;
	text-decoration: none;
	color: inherit;
}
a:hover{
	opacity: 0.8;
	transition: 0.3s;
	text-decoration: underline;
/*	color: inherit;*/
}
/*a:visited {
	color: inherit;
}
a:active {
	color: inherit;
}
a:link {
	color: inherit;
}
*/
br:before {
    content: "\A" ;
    white-space: pre ;
}
iframe{
	vertical-align: bottom;
}

section{
	overflow: hidden;
}
.txt_red{
	color: #AC0000;
}
.txt_center{
	text-align: center;
}
.txt_right{
	text-align: right;
}

.txt_small{
	font-size: 0.8em;
}

.emphasis{
	font-size: 1.3em;
	font-weight: 500;
}

.font_small{
	font-size: 0.7em;
}

.font_big{
	font-size: 1.3em;
}
.serif{
    font-family: 'Noto Serif JP', serif;
}

.fleft{
	float: left;
}
.fright{
	float: right;
}
.img_left{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
.img_right{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
}
.flex_box{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.col2{
	margin-top: -1.85%;
}
.col2 > div,
.col2 > li{
	width: 49%;
	margin-right: 1.85%;
	margin-top: 1.85%;
	float: left;
	box-sizing: border-box;
}
.col3{
	margin-top: 2.7%;
}
.col3 > div,
.col3 > li{
	width: 31.5%;
	margin-right: 2.7%;
	margin-top: 2.7%;
	float: left;
	box-sizing: border-box;
}

.col4{
	margin-top: -1.85%;
}
.col4 > div,
.col4 > li{
	width: 23.6%;
	margin-right: 1.85%;
	margin-top: 1.85%;
	float: left;
	box-sizing: border-box;
}

.col5{
	margin-top: -3.25%;
}
.col5 > div,
.col5 > li{
	width: 17.4%;
	margin-right: 3.25%;
	margin-top: 3.25%;
	float: left;
	box-sizing: border-box;
}

.col6{
	margin-top: -1.5%;
}
.col6 > div,
.col6 > li{
	width: 15.41%;
	margin-right: 1.5%;
	margin-top: 1.5%;
	float: left;
	box-sizing: border-box;
}
.col2,
.col3,
.col4,
.col5,
.col6{
	overflow: hidden;
}
.col2 a,
.col3 a,
.col4 a,
.col5 a,
.col6 a{
	display: block;
}
.col2 > li > img,
.col3 > li > img,
.col4 > li > img,
.col5 > li > img,
.col6 > li > img{
	width: 100%;
}
.col2 > li > a > img,
.col3 > li > a > img,
.col4 > li > a > img,
.col5 > li > a > img,
.col6 > li > a > img{
	width: 100%;
}

@media (min-width: 1025px) {
	.col2 > div:nth-of-type(2n) + div,
	.col2 > li:nth-of-type(2n) + li{
		clear: both;
	}
	.col3 > div:nth-of-type(3n) + div,
	.col3 > li:nth-of-type(3n) + li{
		clear: both;
	}
	.col4 > div:nth-of-type(4n) + div,
	.col4 > li:nth-of-type(4n) + li{
		clear: both;
	}

	.col5 > div:nth-of-type(5n) + div,
	.col5 > li:nth-of-type(5n) + li{
		clear: both;
	}
	.col6 > div:nth-of-type(6n) + div,
	.col6 > li:nth-of-type(6n) + li{
		clear: both;
	}
	
	.col2 > div:nth-of-type(2n),
	.col2 > li:nth-of-type(2n){
		margin-right: 0;
	}
	.col3 > div:nth-of-type(3n),
	.col3 > li:nth-of-type(3n){
		margin-right: 0;
	}
	.col4 > div:nth-of-type(4n),
	.col4 > li:nth-of-type(4n){
		margin-right: 0;
	}
	.col5 > div:nth-of-type(5n),
	.col5 > li:nth-of-type(5n){
		margin-right: 0;
	}
	.col6 > div:nth-of-type(6n),
	.col6 > li:nth-of-type(6n){
		margin-right: 0;
	}
}

@media (max-width: 1024px) {
	.col2 > div,
	.col2 > li{
		margin-right: 0;
		width: 100%;
		float: none;
	}

	.col3 > div,
	.col3 > li{
		margin-right: 0;
		width: 100%;
		float: none;
	}
	
	.col4{
		margin-top: -6%;
	}
	.col4 > div,
	.col4 > li{
		width: 47%;
		margin-right: 6%;
		margin-top: 6%;
	}
	
	.col4 > div:nth-of-type(2n),
	.col4 > li:nth-of-type(2n){
		margin-right: 0;
	}
	
	.col4 > div:nth-of-type(2n) + div,
	.col4 > li:nth-of-type(2n) + li{
		clear: both;
	}
	
	.col5{
		margin-top: 2.7%;
	}
	.col5 > div,
	.col5 > li{
		width: 31.5%;
		margin-right: 2.7%;
		margin-top: 2.7%;
	}
	.col5 > div:nth-of-type(3n),
	.col5 > li:nth-of-type(3n){
		margin-right: 0;
	}
	.col5 > div:nth-of-type(3n) + div,
	.col5 > li:nth-of-type(3n) + li{
		clear: both;
	}
	
	.col6{
		margin-top: 2.7%;
	}
	.col6 > div,
	.col6 > li{
		width: 31.5%;
		margin-right: 2.7%;
		margin-top: 2.7%;
	}
	.col6 > div:nth-of-type(3n),
	.col6 > li:nth-of-type(3n){
		margin-right: 0;
	}
	.col6 > div:nth-of-type(3n) + div,
	.col6 > li:nth-of-type(3n) + li{
		clear: both;
	}
}

a.more{
	font-weight: bold;
	margin-top: 1.4em;
}

.inner{
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
}
.inner2{
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
}
.section_title{
	font-size: 50px;
	font-family: arial;
	font-weight: 100;
	line-height: 1.2;
	color: #464646;
	font-weight: 600;
	position: relative;
}

.section_title .ja{
	font-size: 0.4em;
	display: block;
	margin-top: 5px;
	font-family: -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "游ゴシック", YuGothic, Arial, "メイリオ", Meiryo, sans-serif;
}

main{
	display: block;
	/*overflow: hidden;*/
}

/****************************************
		clearfix
*****************************************/
.cf::before,
.cf::after {
	content: " ";
	display: table;
}
.cf::after {
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.cf {
	display: block;
	*zoom: 1;
}

* html .cf {
	height: 1%;
}

/****************************************
			HEADER
*****************************************/
header {
	width: 100%;
	margin: 0 auto;
	background: #ffffff;
	top: 0;
	position: fixed;
	z-index: 999;
}

header .inner {
	width: 90%;
	margin: 25px auto;
	display: block;
	overflow: hidden;
}

header .header-inner {
	width: 90%;
	max-width: 1280px;
	margin: 25px auto 0 auto;
	display: block;
	overflow: hidden;
}

header .header-link {
	overflow: hidden;
	display: block;
}

header .website {
	float: left;
	margin-left: 10px;
}

header a.tel {
	background: url("../images/icon_tel.png") no-repeat 0 40%;
	background-size: 12px;
	float: right;
	margin-right: 10px;
	padding-left: 18px;
	
}

header .logo {
	display: block;
	text-align: center;
	margin: 10px auto;
}

/****************************************
			NAV
*****************************************/

nav {
	display: block;
	height: 38px;
	width: 100%;
}

nav ul {
	width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}

nav ul li {
	text-align: center;
	width: 160px;
	line-height: 38px;
}

nav ul li a {
	display: block;
	height: 38px;
}





/****************************************
			footer
*****************************************/
footer {
	background: #EFEFE8;
	width: 100%;
	overflow: hidden;
}

.footer-inner {
	width: 90%;
	max-width: 1280px;
	margin: 100px auto 130px auto;
	padding: 0 5%;
	overflow: hidden;
	display: block;
}

.com-left {
	float: left;
}

.com-right {
	float: right;
}

.sub-ttl {
	font-size: 13px;
	display: block;
}

.com-name {
	font-size: 20px;
	display: block;
}

.com-name span {
	font-size: 15px;
	margin-right: 5px;
}

.com-right img {
	width: 200px;
	height: auto;
}

.com1 {
	border-bottom: #94948C 1px solid;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.com2 {
	float: left;
}

.com3 {
	float: left;
	margin-left: 40px;
}

.com3 .com-name span {
	margin-left: 5px;
}

/****************************************
		floatmenu
*****************************************/
.floatmenu{
	position: fixed;
	bottom: 0;

	background: rgba(0, 0, 14, 0.6);
	color: #ffffff;
	box-sizing: border-box;
	width: 100%;
}
.floatmenu ul{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.floatmenu ul li{
	width: 50%;
	text-align: center;
	line-height: 1.1em;
}
.floatmenu ul li:nth-of-type(2n){
	background: url(../images/floatmenu_line.png) left center/auto 80% no-repeat;
}

.floatmenu ul li a{
	display: block;
	width: 100%;
	padding: 1em;
}

/****************************************
		totop
*****************************************/
.totop{
	position: fixed;
	right: 5%;
	bottom: 60px;

}
.totop a{
	text-decoration: none;
	display: inline-block;
}
.totop a img{
	width: 40px;
	height: auto;
}

/****************************************
			トップページ
*****************************************/
main {
	margin-top: 136px;
	width: 100%;
}

main .hero {

}

main .hero img {
	width: 100%;
}

/* スライドショー */
/* .viewer
------------------------- */
.viewer {
    margin: 0 auto;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.viewer ul {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.viewer ul li {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
}
.viewer ul li img {
    width: 100%;
}
 
/* sideNavi
------------------------- */
.viewer .btnPrev,
.viewer .btnNext {
    margin-top: -25px;
    top: 50%;
    width: 50px;
    height: 50px;
    position: absolute;
    z-index: 101;
}
.viewer .btnPrev {
    left: 10px;
    background: #ccc url(../img/btnPrev.jpg) no-repeat center center;
}
.viewer .btnNext {
    right: 10px;
    background: #ccc url(../img/btnNext.jpg) no-repeat center center;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
.viewer ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
.viewer ul {
    display: inline-block;
    overflow: hidden;
}









/* YOUTUBE レスポンシブ */
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  z-index: 0;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 0;
}

.youtube img {
	width: 100%;
	height: auto;
}

/* //YOUTUBE レスポンシブ */


main .comcept {

	background: url("../images/bg_main_image.png") no-repeat center center;
	background-size:cover;
	text-align: center;
	color: #FFFFFF;
}

main .comcept h1 {
	font-size: 4vw;
	line-height: 5em;
	padding: 2% 0 30% 0;
}

main .comcept p {
	display: block;
	font-size: 2.5vw;
	line-height: 2.5em;
	padding-top: 10%;
	padding-bottom: 3%;
}


/* FUNCTION */

.function-wrap01 {
	background: #EFEFE8;
	width: 100%;
	display: block;
}

.function-wrap02 {
	background: #FFFFFF;
	width: 100%;
	display: block;
}

.function-left {
	float: left;
}

.function-right {
	float: right;
}

/* FUNCTION 01 */

.function01 {
	width: 1280px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
}

.function01 .function-left {
	margin-top: 140px;
	margin-left: 120px;
}

.function01 .function-right {
	margin-top: 328px;
}

.function01 h2 {
	color: #5F5F51;
	font-size: 30px;
	margin-bottom: 40px;
}

.function01 h2 img {
	width: 100px;
	height: auto;
	display: block;
	margin-bottom: 90px;
}

.function01 h2 span {
	font-size: 20px;
	line-height: 2em;
	display: block;
}

.function01 img.function-illust {
	width: 400px;
	height: auto;
	margin-bottom: 20px;
}

.function01 p {
	font-size: 16px;
	width: 400px;
	margin-bottom: 190px;
}

/* FUNCTION 02 */

.function02 {
	width: 1280px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
}

.function02 .function-left {
	margin-top: 255px;
	margin-left: 120px;
}

.function02 .function-right {
	margin-top: 165px;
	margin-right: 120px;
}

.function02 h2 {
	color: #5F5F51;
	font-size: 30px;
	margin-bottom: 40px;
}

.function02 h2 img {
	width: 100px;
	height: auto;
	display: block;
	margin-bottom: 90px;
}

.function02 h2 span {
	font-size: 20px;
	line-height: 2em;
	display: block;
}

.function02 img.function-illust {
	width: 393px;
	height: auto;
	margin-bottom: 20px;
}

.function02 p {
	font-size: 16px;
	width: 400px;
	margin-bottom: 190px;
}

.function02 .function-left p {
	font-size: 12px;
	width: 440px;
}

.function02 .function-left img {
	width: 460px;
	height: auto;
	margin-bottom: 70px;
}

/* FUNCTION 03 */
.function03 {
	width: 1280px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
}

.function03 .function-left {
	margin-top: 140px;
	margin-left: 120px;
}

.function03 .function-right {
	margin-top: 328px;
	margin-bottom: 165px;
}

.function03 h2 {
	color: #5F5F51;
	font-size: 30px;
	margin-bottom: 40px;
}

.function03 h2 img {
	width: 100px;
	height: auto;
	display: block;
	margin-bottom: 90px;
}

.function03 h2 span {
	font-size: 20px;
	line-height: 2em;
	display: block;
}

.function03 img.function-illust {
	width: 400px;
	height: auto;
	margin-bottom: 20px;
}

.function03 p {
	font-size: 16px;
	width: 540px;
	margin-bottom: 190px;
}

/* FUNCTION 04 */

.function04 {
	width: 1280px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
}

.function04 .function-left {
	margin-top: 255px;
	margin-left: 0;
	display: block;
}

.function04 .function-right {
	margin-top: 165px;
	margin-right: 120px;
	display: block;
}

.function04 h2 {
	color: #5F5F51;
	font-size: 30px;
	margin-bottom: 40px;
}

.function04 h2 img {
	width: 100px;
	height: auto;
	display: block;
	margin-bottom: 90px;
}

.function04 h2 span {
	font-size: 20px;
	line-height: 2em;
	display: block;
}

.function04 img.function-illust {
	width: 393px;
	height: auto;
	margin-bottom: 20px;
}

.function04 p {
	font-size: 16px;
	width: 400px;
	margin-bottom: 190px;
}

.function04 .function-left p {
	font-size: 12px;
	width: 440px;
}

.function04 .function-left img {
	width: 590px;
	height: auto;
	margin-bottom: 0;
}

.function04 .caption {
	font-size: 16px;
	line-height: 3em;
	display: inline;
	vertical-align: top;
}

.function04 p span.caption {
	font-size: 14px;
}

.function04 h3 {
	font-size: 30px;
	margin-left: 120px;
	margin-bottom: 20px;
	text-align: center;
}

.function04 .center {
	margin-left: 120px;
	text-align: center;
}

.function04 img.class6 {
	width: 444px;
	height: auto;
	margin-right: 120px;
	margin-bottom: 160px;
}

/* FUNCTION 05 */
.function05 {
	width: 1040px;
	padding: 125px 120px 0 120px;
	margin: 0 auto;
	display: block;
	overflow: hidden;
}

.function05 h2 {
	color: #5F5F51;
	font-size: 30px;
	margin-bottom: 40px;
}

.function05 h2 span {
	font-size: 20px;
	line-height: 2em;
	display: block;
}

.function05 h2 img {
	width: 100px;
	height: auto;
	display: block;
	margin-bottom: 55px;
}

.function05 p {
	font-size: 16px;
	/* line-height: 3em; */
	width: 100%;
	text-align: right;
	margin-bottom: 60px;
	margin-top: 0.5em;
}

.function05 p span{
	text-align: left;
	padding-left: 1em;
	text-indent: -1em;
	display: block;
}

.function05 .area-head {

}

.function05 .area-graph {
	background: #DFDBD2;
	padding: 10px 60px;
}

.function05 .area-graph h3 {
	margin-top: 100px;
	margin-bottom: 60px;
	display: block;
	font-size: 23px;
	text-align: center;
}

.function05 .area-graph ul {
	overflow: hidden;

}


.function05 .area-graph ul li {
	float: left;
	margin-bottom: 25px;
}

.function05 .area-graph ul li:nth-child(even) {
	float: right;
}

/* MAINTENANCE */

.maintenance-wrap {
	background: #FFFFFF;
	width: 100%;
	display: block;
}

.maintenance {
	width: 1040px;
	margin: 100px auto;
	display: block;
	overflow: hidden;

}

.maintenance-left {
	float: left;
	width: 480px;
	height: 350px;
}

.maintenance-right {
	float: right;
	width: 540px;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}

.maintenance-left2 {
	width: 210px;
	float: left;
}

.maintenance-right2 {
	width: 830px;
	float: left;
}

.maintenance h2 {
	color: #5F5F51;
	font-size: 30px;
	margin-bottom: 100px;
}

.maintenance h3 {
	color: #5F5F51;
	font-size: 25px;
	margin-bottom: 15px;
	display: block;
}

.maintenance-left img {
	margin-left: 20px;
	width: 448px;
	height: auto;
}


.maintenance-right dl {
	margin-bottom: 20px;
	margin-left: 20px;

}

.maintenance-right dl dt {
	font-size: 18px;
	width: 250px;
}

.maintenance-right dl dd {
	width: 250px;
}

.maintenance-left2 {
	margin-top: 100px;
}

.maintenance-right2 {
	margin-top: 100px;
}

.maintenance-left2 h3 {

}

.maintenance-right2 p {
	line-height: 1.8em;
	color: #5F5F51;
	font-size: 25px;
	margin-bottom: 15px;
}

.maintenance-right2 p span {
	font-size: 12px;
	line-height: 3em;
	display: inline;
	vertical-align: top;
}

.maintenance-right2 span.caption {
	display: block;
	width: 690px;
	margin-left: 4em;
	text-indent: -2.1em;
}

/* Q&A */

/* アコーディオン */
.q-a .menu {
    max-width: 1040px;
    border-bottom: #5F5F51 1px solid;
	margin-bottom: 125px;
}

.q-a .menu a {
    display: block;
    padding: 15px;
    text-decoration: none;
    pointer-events:none;
    cursor: default;
}

.q-a label {
	border-top: #5F5F51 1px solid;
    display: block;
    margin: 0 0 0 0;
    padding : 30px 20px;
    font-size: 16px;
    line-height: 1;
    background : #EFEFE8 url("../images/allow_down.png") no-repeat 100% 50%;
    cursor :pointer;
}


.q-a input {
    display: none;
}

.q-a .menu ul {
    margin: 0;
    padding: 0;
    background :#DFDBD2;
    list-style: none;

}

.q-a .menu li {
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li,
#menu_bar10:checked ~ #links10 li {
    height: auto;
    padding: 20px 40px 20px 80px;
    font-size: 14px;
    text-indent: 0;
    opacity: 1;
}

#menu_bar10:checked ~ #links9 li,
#menu_bar11:checked ~ #links10 li {
text-indent: 0px;
}

/* //アコーディオン */

.q-a-wrap {
	background: #EFEFE8;
	display: block;
}

.q-a {
	max-width: 1040px;
	margin: 0 auto;
	padding: 100px 170px;
	display: block;
}

.q-a h2 {
	color: #5F5F51;
	font-size: 30px;
	margin-bottom: 40px;
	text-align: center;
}

.btn-contact {

}

.btn-contact a {
	display: block;
	width: 100%;
	background: #5E5F51;
	color: #FFFFFF;
	text-align: center;
	font-size: 24px;
	line-height: 3em;
}

.btn-contact a:hover {
	text-decoration: none;
}

/* 仕様 */
.spec-wrap {
	background: #FFFFFF;
	display: block;
}

.spec {
	max-width: 1040px;
	margin: 0 auto;
	padding: 100px 170px;
	display: block;
}

.spec h2 {
	color: #5F5F51;
	font-size: 30px;
	line-height: 40px;
	text-align: center;
	margin-top: 160px;
	margin-bottom: 90px;
	display: block;
}

.spec h2 span {
	color: #5F5F51;
	font-size: 20px;
	padding: 10px;
	display: inline-block;
}

.spec h2 img {
	width: 260px;
	height: auto;
}

.spec-img {
	width: 691px;
	margin: 0 auto;
}


.spec table {
	max-width: 1040px;
	display: block;
	margin: 0 auto;
	font-size: 15px;
	margin-top: 130px;
}

.spec table tr {

}

.spec table th {
	width: 20%;
	border-bottom: #D1D1CD 2px solid;
	padding: 1em 0;
}

.spec table td {
	width: 30%;
	border-bottom: #D1D1CD 2px solid;
	border-left: #D1D1CD 1px dotted;
	padding: 1em 1em 1em 3em;
}

.spec p {
	display: block;
	text-align: right;
	line-height: 3em;
}

.spec dl {
	margin: 60px 0;
	float: left;
	width: 33%;
}

.spec dl dt {
	text-align: center;
}

.spec dl dt.giteki img {
	margin: 23px 0;
}

.spec dl dd p {
	line-height: 1.5em;
	width: 230px;
	margin: 0 auto;
	padding: 20px 0;
	text-align: left;
}

/****************************************
			アニメーション
*****************************************/
.text_anime{
	margin-right: -0.5em;
}

.fade_top{
    animation-name: fadein;
    animation-duration: 2.5s;
}
@keyframes fadein {
	from {
	    opacity: 0;
	    transform: translate(0,30px);
	}
	to {
	    opacity: 1;
	    transform: translate(0,0);
	}
}

.anime {
	opacity: 0;
	transform: translate3d(0, 10%, 0);
	transition: all 1s ease;
}
.anime.fade-left {
	transform: translate3d(-100%, 0, 0);
}
.anime.fade-right {
	transform: translate3d(100%, 0, 0);
}
.anime.fade-delay {
	transition: all 2s ease;
}
.anime.fade-fast {
	transition: all 0.5s ease;
}

.anime.active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

/****************************************
		レスポンシブ対応
*****************************************/
.pc{
	display: inline-block;
}
.sp{
	display: none ;
}
.sp2{
	display: none ;
}

@media (max-width: 1280px) {

	.spec dl {
		float: none;
		width: 100%;
		overflow: hidden;
		margin: 60px 0;
	}

	.spec dl dt {
		text-align: left;
	}

	.spec dl dt.giteki img {
		margin: 0;
	}

	.spec dl dt {
		float: left;
		text-align: center;
		width: 50%;
	}

	.spec dl dd {
		float: right;
		width: 45%;
	}

	.spec dl dd p {
		line-height: 1.5em;
		width: auto;
		margin: 0 auto;
		padding: 20px 0;
		text-align: left;
	}



}

@media (max-width: 768px) {
	.pc{
		display: none;
	}
	.sp{
		display: inline-block;
	}
	.sp2{
		display: block;
	}
	body{
		font-size: 14px;
	}
	
	header {
		width: 100%;
		margin: 0 auto;
		background: #ffffff;
		top: 0;
		position: fixed;
		z-index: 999;
	}

	header .inner {
		width: 90%;
		margin: 25px auto;
		display: block;
		overflow: hidden;
	}

	header.sp2 .header-inner {
		width: 90%;
		margin: 20px auto;
		display: block;
		overflow: hidden;
		
	}

	header.sp2 .header-link {
		overflow: hidden;
		display: block;
	}

	header.sp2 .header-link img {
		width: 27px;
		height: auto;
	}

	header .website {
		float: left;
		margin-left: 10px;
	}

	header.sp2 .menu-content .tel {
		float: none;
		margin: 30px auto;
		padding-left: 0;
		display: block;
		text-align: center;
		width: 300px;
	}

	header.sp2 .menu-content .tel a {
		background: url("../images/icon_tel.png") no-repeat 0 50%;
		background-size: 12px;
		padding-left: 18px;
		margin-left: 0;
	}

	header.sp2 .logo {
		display: block;
		text-align: center;
		margin: 0 auto;
		margin-top: -28px;
		width: 89px;
	}
	
	header.sp2 .menu-content .logo {
		margin-top: 50px;
	}
	
	/* ハンバーガーメニュー */
	header.sp2 .menu-btn {
	    position: fixed;
	    top: 5px;
	    right: 20px;
	    display: flex;
	    height: 60px;
	    width: 60px;
	    justify-content: center;
	    align-items: center;
	    z-index: 90;
	    background-color: #FFFFFF;
	}
	header.sp2 .menu-btn span,
	header.sp2 .menu-btn span:before,
	header.sp2 .menu-btn span:after {
	    content: '';
	    display: block;
	    height: 3px;
	    width: 25px;
	    border-radius: 3px;
	    background-color: #5F5F51;
	    position: absolute;
	}
	header.sp2 .menu-btn span:before {
	    bottom: 8px;
	}
	header.sp2 .menu-btn span:after {
	    top: 8px;
	}



	header.sp2 #menu-btn-check:checked ~ .menu-btn span {
	    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	header.sp2 #menu-btn-check:checked ~ .menu-btn span::before {
	    bottom: 0;
	    transform: rotate(45deg);
	}
	header.sp2 #menu-btn-check:checked ~ .menu-btn span::after {
	    top: 0;
	    transform: rotate(-45deg);
	}


	
	header.sp2 #menu-btn-check {
	    display: none;
	}
	
	
	header.sp2 .menu-content {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 80;
	    background-color: #FFFFFF;
	}
	header.sp2 .menu-content ul {
	    padding: 35px 10px 0;
	}
	header.sp2 .menu-content ul li {
	    border-bottom: solid 1px #5F5F51;
	    list-style: none;
	}
	header.sp2 .menu-content ul li a {
	    display: block;
	    width: 100%;
	    font-size: 15px;
	    box-sizing: border-box;
	    color:#5F5F51;
	    text-decoration: none;
	    padding: 9px 15px 10px 0;
	    position: relative;
	}
	header.sp2 .menu-content ul li a::before {
	    content: "";
	    width: 7px;
	    height: 7px;
	    border-top: solid 2px #5F5F51;
	    border-right: solid 2px #5F5F51;
	    transform: rotate(45deg);
	    position: absolute;
	    right: 11px;
	    top: 16px;
	}
	
	header.sp2 .menu-content {
	    width: 100%;
	    height: 100%;
	    position: fixed;
	    top: 0;
	    left: 100%;/*leftの値を変更してメニューを画面外へ*/
	    z-index: 80;
	    background-color: #FFFFFF;
	    transition: all 0.5s;/*アニメーション設定*/
	}
	
	header.sp2 #menu-btn-check:checked ~ .menu-content {
	    left: 0;/*メニューを画面内へ*/
	}
	
	
	/* //ハンバーガーメニュー */
	
	main {
		margin-top: 70px;
		width: 100%;
	}
	
	
	div.text {
		padding: 1em 0;
	}

	div.text p {
		text-align: center;
		font-size: 4vw;
		display: block;
	}
	
	.function-wrap01 {

	}

	.function-wrap02 {

	}

	.function-left {
		float: none;
	}

	.function-right {
		float: none;
	}
	/* FUNCTION 01 */

	.function01 {
		width: 90%;
	}

	.function01 .function-left {
		margin-top: 40px;
		margin-left: 0;
	}

	.function01 .function-right {
		margin-top: 20px;
		margin-bottom: 40px;
	}

	.function01 h2 {
		color: #5F5F51;
		font-size: 26px;
		margin-bottom: 30px;
		line-height: 1.5em;
	}

	.function01 h2 img {
		width: 100px;
		height: auto;
		display: block;
		margin-bottom: 40px;
	}

	.function01 h2 span {
		font-size: 20px;
		line-height: 2em;
		display: block;
	}

	.function01 img.function-illust {
		width: 100%;
		height: auto;
		margin-bottom: 30px;
	}

	.function01 p {
		font-size: 16px;
		width: 100%;
		margin-bottom: 0;
	}

	/* FUNCTION 02 */

	.function02 {
		width: 90%;
	}

	.function02 .function-left {
		margin-top: 40px;
		margin-left: 0;
	}

	.function02 .function-right {
		margin-top: 40px;
		margin-right: 0;
	}

	.function02 h2 {
		color: #5F5F51;
		font-size: 30px;
		margin-bottom: 40px;
		line-height: 1.5em;
	}

	.function02 h2 img {
		width: 100px;
		height: auto;
		display: block;
		margin-bottom: 40px;
	}

	.function02 h2 span {
		font-size: 18px;
		line-height: 2em;
		display: block;
	}

	.function02 img.function-illust {
		width: 100%;
		height: auto;
		margin-bottom: 40px;
	}

	.function02 p {
		font-size: 16px;
		width: 100%;
		margin-bottom: 0;
	}

	.function02 .function-left p {
		font-size: 16px;
		width: 100%;
		margin: 20px 0 40px 0;
	}

	.function02 .function-left img {
		width: 100%;
		height: auto;
		margin-bottom: 0;
	}

	/* FUNCTION 03 */
	.function03 {
		width: 90%;
	}

	.function03 .function-left {
		margin-top: 40px;
		margin-left: 0;
	}

	.function03 .function-right {
		margin-top: 40px;
		margin-bottom: 0;
	}

	.function03 h2 {
		color: #5F5F51;
		font-size: 30px;
		margin-bottom: 40px;
		line-height: 1.5em;
	}

	.function03 h2 img {
		width: 100px;
		height: auto;
		display: block;
		margin-bottom: 40px;
	}

	.function03 h2 span {
		font-size: 20px;
		line-height: 2em;
		display: block;
	}

	.function03 img.function-illust {
		width: 400px;
		height: auto;
		margin-bottom: 20px;
	}

	.function03 p {
		font-size: 16px;
		width: 100%;
		margin-bottom: 40px;
	}

	/* FUNCTION 04 */

	.function04 {
		width: 90%;
	}

	.function04 .function-left {
		margin-top: 40px;
		margin-left: 0;
	}

	.function04 .function-right {
		margin-top: 40px;
		margin-right: 0;
	}

	.function04 h2 {
		color: #5F5F51;
		font-size: 30px;
		margin-bottom: 20px;
		line-height: 1.5em;
	}

	.function04 h2 img {
		width: 100px;
		height: auto;
		display: block;
		margin-bottom: 40px;
	}

	.function04 h2 span {
		font-size: 20px;
		line-height: 2em;
		display: block;
	}

	.function04 img.function-illust {
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}

	.function04 p {
		font-size: 16px;
		width: 100%;
		margin-bottom: 40px;
	}

	.function04 .function-left p {
		font-size: 12px;
		width: 100%;
	}

	.function04 .function-left img {
		width: 100%;
		height: auto;
		margin-bottom: 0;
		display: none;
	}

	.function04 .caption {
		font-size: 16px;
		line-height: 3em;
		display: inline;
		vertical-align: top;
	}

	.function04 h3 {
		font-size: 6vw;
		margin-left: 0;
		margin-bottom: 0;
		text-align: center;
	}

	.function04 .center {
		margin-left: 0;
		text-align: center;
	}

	.function04 img.class6 {
		width: 100%;
		height: auto;
		margin-right: 0;
		margin-bottom: 40px;
	}

	/* FUNCTION 05 */
	.function05 {
		width: 90%;
		padding: 40px 0;
		margin: 0 auto;
		display: block;
		overflow: hidden;
	}

	.function05 h2 {
		color: #5F5F51;
		font-size: 30px;
		margin-bottom: 20px;
		line-height: 1.5em;
	}

	.function05 h2 span {
		font-size: 20px;
		line-height: 2em;
		display: block;
	}

	.function05 h2 img {
		width: 100px;
		height: auto;
		display: block;
		margin-bottom: 55px;
	}

	.function05 p {
		font-size: 12px;
		line-height: 1.5em;
		width: 100%;
		text-align: left;
		margin-bottom: 2px;
	}

	.function05 .area-head {

	}

	.function05 .area-graph {
		background: #DFDBD2;
		padding: 10px 20px;
		margin-bottom: 10px;
	}

	.function05 .area-graph h3 {
		margin-top: 40px;
		margin-bottom: 40px;
		display: block;
		font-size: 23px;
		text-align: center;
	}

	.function05 .area-graph ul {
		overflow: hidden;

	}


	.function05 .area-graph ul li {
		float: left;
		margin-bottom: 25px;
	}

	.function05 .area-graph ul li:nth-child(even) {
		float: none;
	}

	/* MAINTENANCE */

	.maintenance-wrap {
		background: #FFFFFF;
		width: 100%;
		display: block;
	}

	.maintenance {
		width: 90%;
		margin: 60px auto;
		display: block;
		overflow: hidden;
	}

	.maintenance-left {
		float: none;
		width: 100%;
		height: auto;
	}

	.maintenance-right {
		float: none;
		width: 100%;
		margin-top: 30px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-bitween;
	}

	.maintenance-left2 {
		width: 100%;
		float: none;
	}

	.maintenance-right2 {
		width: 100%;
		float: none;
	}

	.maintenance h2 {
		color: #5F5F51;
		font-size: 5.5vw;
		margin-bottom: 60px;
	}

	.maintenance h3 {
		color: #5F5F51;
		font-size: 4.5vw;
		margin-bottom: 15px;
		display: block;
	}

	.maintenance-left img {
		margin-left: 0;
		width: 100%;
		height: auto;
	}


	.maintenance-right dl {
		margin-bottom: 20px;
		margin-left: 0px;
		float: none;
		width: 44%;
		padding: 2%;
	}

	.maintenance-right dl dt {
		font-size: 3.2vw;
		width: 100%;
	}

	.maintenance-right dl dd {
		font-size: 3vw;
		width: 100%;
		line-height: 1.5em;
	}

	.maintenance-left2 {
		margin-top: 0px;
	}

	.maintenance-right2 {
		margin-top: 0;
	}

	.maintenance-left2 h3 {
		margin-bottom: 0;
	}

	.maintenance-right2 p {
		line-height: 1.5em;
		color: #5F5F51;
		font-size: 4.6vw;
		margin-bottom: 15px;
	}

	.maintenance-right2 p span {
		font-size: 12px;
		line-height: 2em;
		display: inline;
		vertical-align: top;
	}

	.maintenance-right2 span.caption {
		display: block;
		width: 100%;
		margin-left: 0;
		text-indent: 0;
		line-height: 1.5em;
	}

	/* Q&A */

	/* アコーディオン */
	.q-a .menu {
	    max-width: 100%;
	    border-bottom: #5F5F51 1px solid;
		margin-bottom: 60px;
	}

	.q-a .menu a {
	    display: inline-block;
	    padding: 15px;
	    text-decoration: none;
	    pointer-events:none;
	    cursor: default;
	}

	.q-a label {
		border-top: #5F5F51 1px solid;
	    display: block;
	    margin: 0 0 0 0;
	    padding : 30px 20px;
	    font-size: 3vw;
	    line-height: 1.5em;
	    background : #EFEFE8 url("../images/allow_down.png") no-repeat 100% 50%;
	    cursor :pointer;
	}


	.q-a input {
	    display: none;
	}

	.q-a .menu ul {
	    margin: 0;
	    padding: 0;
	    background :#DFDBD2;
	    list-style: none;

	}

	.q-a .menu li {
	    height: 0;
	    overflow: hidden;
	    -webkit-transition: all 0.5s;
	    -moz-transition: all 0.5s;
	    -ms-transition: all 0.5s;
	    -o-transition: all 0.5s;
	    transition: all 0.5s;
	}

	#menu_bar01:checked ~ #links01 li,
	#menu_bar02:checked ~ #links02 li,
	#menu_bar03:checked ~ #links03 li,
	#menu_bar04:checked ~ #links04 li,
	#menu_bar05:checked ~ #links05 li,
	#menu_bar06:checked ~ #links06 li,
	#menu_bar07:checked ~ #links07 li,
	#menu_bar08:checked ~ #links08 li,
	#menu_bar09:checked ~ #links09 li,
	#menu_bar10:checked ~ #links10 li {
	    height: auto;
	    padding: 20px 10px 20px 40px;
	    font-size: 3vw;
	    text-indent: 0;
	    opacity: 1;
	}

	#menu_bar10:checked ~ #links9 li,
	#menu_bar11:checked ~ #links10 li {
		text-indent: 0px;
	}

	/* //アコーディオン */

	.q-a-wrap {
		background: #EFEFE8;
		display: block;
	}

	.q-a {
		max-width: 85%;
		margin: 0 auto;
		padding: 0;
		display: block;
	}

	.q-a h2 {
		color: #5F5F51;
		font-size: 30px;
		margin-top: 40px;
		margin-bottom: 40px;
		text-align: center;
	}

	.btn-contact {
		width: 100%;
		margin-bottom: 40px;
	}

	.btn-contact a {
		display: block;
		background: #5E5F51;
		color: #FFFFFF;
		text-align: center;
		font-size: 24px;
		line-height: 3em;
	}

	.btn-contact a:hover {
		text-decoration: none;
	}

	/* 仕様 */
	.spec-wrap {
		background: #FFFFFF;
		display: block;
	}

	.spec {
		max-width: 90%;
		margin: 0 auto;
		padding: 0;
		padding-bottom: 40px;
		display: block;
	}

	.spec h2 {
		color: #5F5F51;
		font-size: 40px;
		line-height: 1em;
		text-align: center;
		margin-top: 90px;
		margin-bottom: 90px;
		display: block;
	}

	.spec h2 span {
		color: #5F5F51;
		font-size: 20px;
		padding: 0;
		display: block;
	}

	.spec h2 img {
		width: 100%;
		max-width: 200px;
		height: auto;
	}

	.spec-img {
		width: 100%;
		margin: 0 auto;
	}


	.spec table {
		max-width: 100%;
		display: block;
		margin: 0 auto;
		font-size: 15px;
		margin-top: 30px;
		line-height: 1.5em;
	}

	.spec table tr {

	}

	.spec table th {
		width: 10%;
		border-bottom: #D1D1CD 2px solid;
		padding: 1em 1em 1em 0;
	}

	.spec table td {
		width: 40%;
		border-bottom: #D1D1CD 2px solid;
		border-left: #D1D1CD 1px dotted;
		padding: 1em;
	}

	.spec p {
		display: block;
		text-align: right;
		line-height: 3em;
	}




	/****************************************
				footer
	*****************************************/
	footer {
		background: #EFEFE8;
		width: 100%;
		overflow: hidden;
	}

	.footer-inner {
		max-width: 80%;
		margin: 100px auto 130px auto;
		overflow: hidden;
		display: block;
		line-height: 1.5em;
		font-size: 3.5vw;
	}

	.com-left {
		float: none;
	}

	.com-right {
		float: none;
	}

	.sub-ttl {
		font-size: 3.2vw;
		display: block;
		letter-spacing: 0;
	}

	.com-name {
		font-size: 4.6vw;
		display: block;
		line-height: 1.8em;
	}

	.com-name span {
		font-size: 3.5vw;
		margin-right: 5px;
		letter-spacing: 0;
	}

	.footer-logo {
		width: 300px;
		margin: 0 auto;
		margin-bottom: 50px;
		text-align: center;
	}

	.com-right img {
		max-width: 300px;
		width: 75%;
		height: auto;
	}

	.com1 {
		border-bottom: #94948C 1px solid;
		margin-bottom: 15px;
		padding-bottom: 15px;
	}

	.com2 .com-name,
	.com3 .com-name {
		font-size: 4.4vw;

	}

	.com2 {
		float: none;
		width: 100%;
		margin-bottom: 1em;
	}

	.com3 {
		float: none;
		width: 100%;
		margin-left: 0;
	}

	.com3 .com-name span {
		margin-left: 5px;
	}


}
@media (max-width: 480px) {


	
}