@import url('../css/reset.css');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@500;700&display=swap');


/* COMMON ================================================================================*/
body{
	font-family: 'Zen Kaku Gothic Antique', sans-serif!important;
	min-width: 1100px;
	background-color: #FFF;
	-webkit-text-size-adjust: 100%;
	animation: fadeIn 2s ease 0s 1 normal;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
	}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
.stopBk {
	overflow: hidden!important;
}


p,
ul li,
table th,
table td{
	color: #144f61;
	font-size: 18px;
	line-height: 1.6;
	}

a{
	display: block;
	color: #144f61;
	text-decoration: none;
	transition-duration: .3s;
	}
a:hover{
	opacity: 0.7;
	transition-duration: .3s;
	}

img{
	width: 100%;
	display: block;
	}

h1, h2, h3, h4, h5{
	font-weight: normal;
	margin: 0;
	}

ul{
	padding: 0;
	}

ul li{
	padding: 0;
	list-style-type: none;
	}
ul.disc li{
	list-style-position: inside;
	list-style-type: disc;
	}
ul.check li::before{
	display: inline-block;
	content: "";
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../img/icon_check.png");
	width: 1em;
	height: 1em;
	margin: -0.3em 0.4em 0 0;
	}

	
table.tb01{
	width: 100%;
	}
table.tb01 th,
table.tb01 td{
	padding: 20px 20px;
	border-bottom: #186e8d 1px solid;
	}
table.tb01 th{
	width: 250px;
	font-weight: normal;
	text-align: right;
	}


address{
	font-style: normal;
	}

section{
	padding: 80px 0;
	}

.wrap{
	width: 1000px;
	margin: 0 auto;
	}

.title01{
	color: #186e8d;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 50px;
	}
.title01::after{
	display: block;
	color: #b8c6ca;
	font-size: 15px;
	font-weight: normal;
	margin-top: 10px;
	}
#news .title01::after{
	content: "information";
	}
#servece .title01::after{
	content: "servece";
	}
#company .title01::after{
	content: "company";
	}
#works .title01::after{
	content: "works";
	}
#contact .title01::after{
	content: "contact";
	}
#confirm .title01::after{
	content: "confirm";
	}
#thanks .title01::after{
	content: "thanks";
	}
#maker .title01::after{
	content: "maker";
	}

.title02{
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 20px;
	}

.title03{
	color: #0B2E38;
	font-size: 22px;
	font-weight: bold;
	border-left: #2a9db0 5px solid;
	background-color: #D1E2E5;
	padding: 10px 10px 10px 15px
	}

.tel{
	color: #186e8d;
	font-size: 34px;
	font-weight: bold;
	line-height: 1;
	}
.tel::before{
	display: inline-block;
	content: "";
	width: 1em;
	height: 1em;
	background-image: url("../img/icon_tel.png");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin: -0.3em 0.2em 0 0;
	}

.mail{
	display: inline-block;
	color: #186e8d;
	font-size: 34px;
	font-weight: bold;
	line-height: 1;
	border: #A1BBC5 5px solid;
	border-radius: 10px;
	padding: 10px 20px;
	}
.mail::before{
	display: inline-block;
	content: "";
	width: 1em;
	height: 1em;
	background-image: url("../img/icon_mail.png");
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	margin: -0.3em 0.2em 0 0;
	}

.more{
	position: relative;
	width: 260px;
	color: #FFF;
	font-size: 20px;
	background-color: #20a9bd;
	padding: 20px 50px 20px 20px;
	box-sizing: border-box;
	}
.more::after{
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	content: "";
	width: 9px;
	height: 14px;
	background-image: url("../img/arrow1.png");
	background-repeat: no-repeat;
	background-size: contain;
	}

.blue{
	color: #2a9db0;
	}

.bdTop{
	border-top: #ccc 1px solid;
	}

/* HEADER --------------------------------------------------- */
header{
	background-color: #FFF;
	}

header .wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 1500px;
	padding: 30px 30px;
	}

header .name p{
	color: #186e8d;
	font-size: 18px;
	}
header .name p:nth-child(2){
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 0.03em;
	}

header .contact{
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	border-bottom: #186e8d 1px solid;
	padding-bottom: 10px;
	margin-bottom: 20px;
	}
header .contact p{
	color: #186e8d;
	font-size: 16px;
	margin-right: 15px;
	}
header .contact .tel{
	font-size: 35px;
	}

ul.menu{
	display: flex;
	justify-content: space-between;
	}
ul.menu li a{
	color: #186e8d;
	font-size: 20px;
	}

.menu-btn,
.bk{
	display: none;
	}


/* FOOTER --------------------------------------------------- */
footer{
	background-color: #133c4b;
	padding: 0;
	}

.contactArea{
	background-color: #f3f3f3;
	text-align: center;
	padding: 50px 0;
	}
.contactArea p{
	color: #2a9db0;
	}
.contactArea p:first-child{
	font-size: 28px;
	font-weight: bold;
	}
.contactArea p:nth-child(2){
	line-height: 1.5;
	margin: 4px 0 12px;
	}
.contactArea .tel{
	width: fit-content;
	font-size: 65px;
	color: #2a9db0;
	margin: 0 auto 10px;
	}
.contactArea .tel::before{
	background-image: url("../img/icon_tel2.png");
	}
.contactArea .tel + p{
	font-size: 35px;
	}

footer .wrap{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 50px 0;
	}

footer p,
footer address{
	color: #FFF;
	}
footer p a{
	display: inline;
	color: #FFF;
	text-decoration: underline;
	}
footer .info > p:first-child{
	font-size: 16px;
	}
footer .name{
	font-size: 30px;
	margin-bottom: 20px;
	}
footer address{
	font-size: 18px;
	line-height: 1.7;
	}

ul.footerMenu{
	display: flex;
	flex-wrap: wrap;
	width: 400px;
	}
ul.footerMenu li{
	width: 33.33%;
	margin-top: 25px;
	}
ul.footerMenu li a{
	color: #FFF;
	font-size: 18px;
	}
ul.footerMenu li a::before{
	display: inline-block;
	content: "";
	background-size: contain;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-image: url("../img/arrow2.png");
	width: 0.8em;
	height: 0.8em;
	margin: -0.2em 0.5em 0 0;
	}

.copy{
	width: 1000px;
	font-size: 16px;
	text-align: right;
	margin: 0 auto;
	padding-bottom: 50px;
	}

/* index.html --------------------------------------------------- */
.eyecatch{
	position: relative;
	max-width: 1500px;
	margin: -20px auto 0;
	}
.eyecatch img{
	object-fit: cover;
	object-position: center center;
	}
.eyecatch .catch{
	position: absolute;
	right: 5%;
	bottom: 70px;
	text-shadow: 0 0 5px rgba(255,255,255,0.9), 0 0 10px rgba(255,255,255,0.9);
	}
.catch h1{
	color: #133c4b;
	font-size: 34px;
	font-weight: bold;
	letter-spacing: 0.07em;
	margin-bottom: 15px;
	}
.catch h2{
	color: #133c4b;
	font-size: 22px;
	line-height: 1.8;
	}

ul.point{
	display: flex;
	justify-content: space-between;
	margin-bottom: 80px;
	}
ul.point li{
	width: 315px;
	text-align: center;
	border: #d8d8d8 2px solid;
	border-radius: 15px;
	padding: 35px 0;
	}
ul.point li img{
	width: 60px;
	margin: 0 auto 15px;
	}
ul.point li p{
	line-height: 1.6;
	}


.double{
	display: flex;
	justify-content: space-between;
	}
.double > div{
	width: 480px;
	}
.feature.double {
	margin-bottom: 50px;
	}
.feature.double > div{
	position: relative;
	}
.feature.double > div .more{
	position: absolute;
	right: 0;
	bottom: 0;
	}

ul.image{
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
	}
ul.image li{
	width: 300px;
	}

.worksLink{
	display: flex;
	align-items: center;
	justify-content: space-between;
	}
.feature.double h2,
.worksLink p{
	color: #133c4b;
	font-size: 25px;
	font-weight: normal;
	}

ul.linkList{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-around;
	}
ul.linkList li{
	position: relative;
	width: 470px;
	min-height: 130px;
	border: #d8d8d8 2px solid;
	border-radius: 15px;
	padding: 30px 25px 30px 100px;
	margin:  0 0 30px 0;
	}
ul.linkList li::before{
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	display: block;
	content: "";
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../img/icon_pdf.png");
	width: 4em;
	height: 4.5em;
	margin: -0.2em 0.5em 0 0;
	}
ul.linkList li.takaraLink{
	padding: 30px 25px;
	margin: 0;
	}
ul.linkList li.takaraLink::before{
	content: none;
	}
ul.linkList li .title02{
	margin-bottom: 5px;
	}

ul.linkList li a{
	width: fit-content;
	color: #2a9db0;
	font-size: 16px;
	border-bottom: #2a9db0 2px solid;
	margin: 10px 0 0 auto;
	padding-bottom: 5px;
	}


dl.newsList{
	display: flex;
	flex-wrap: wrap;
	border-top: #186e8d 1px solid;
	}
dl.newsList dt,
dl.newsList dd{
	
	font-size: 18px;
	line-height: 1.4;
	border-bottom: #186e8d 1px solid;
	padding: 15px 0;
	}
dl.newsList dt{
	width: 130px;
	color: #2a9db0;
	}
dl.newsList dd{
	width: calc(100% - 130px);
	font-weight: 500;
	}
dl.newsList::after{
	display: block;
	clear: both;
	content: "";
	}

/* service --------------------------------------------------- */
.servicebox{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 50px;
	}
.servicebox > div{
	width: 300px;
	margin-bottom: 40px;
	}

.maker{
	margin-bottom: 30px;
}
	.maker img{
	width: 200px;
}

.servicebox > div img{
	margin: 20px 0;
	}

#maker ul.check{
	display: flex;
	flex-wrap: wrap;
	}

#maker ul.check li{
	width: 260px;
	}


/* work --------------------------------------------------- */
.worksArea .detail:not(:last-child){
	margin-bottom: 80px;
	}
.worksArea h2{
	position: relative;
	z-index: 1;
	display: inline-block;
	color: #FFF;
	font-size: 24px;
	background-color: #186e8d;
	padding: 10px 20px;
	}
.worksArea .comment{
	margin: 20px 0;
	}
.worksArea .images{
	display: flex;
	justify-content: space-between;
	}
.worksArea .images img{
	width: 490px;
	margin: -20px 0 0 0;
	}
.worksArea dl.info{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border-bottom: #545454 3px solid;
	}
.worksArea dl.info dt,
.worksArea dl.info dd{
	font-size: 18px;
	line-height: 1.6;
	padding: 5px 10px;
	border-top: #545454 1px solid;
	}
.worksArea dl.info dt:nth-child(4n + 1),
.worksArea dl.info dd:nth-child(4n + 2) {
  	background-color: #ebebeb;
	}

.worksArea dl.info dt{
	width: 180px;
	font-weight: bold;
	}
.worksArea dl.info dd{
	width: 820px;
	}

/* contact --------------------------------------------------- */
.inner{
	padding: 20px 0 40px 40px
	}
.hour{
	margin-top: 20px
}