@charset "UTF-8";

/*
Theme Name:  ZEAL
Theme URI: http://zeaplus.co.jp/
Description: ZEAL
Version: 1.1
Author: ZEALPLUS
Author URI: http://zeaplus.co.jp/	
*/


/*
===== CONTENTS ================================================================================

	Index:
  - Base Style
  - Layout
  
===============================================================================================
*/


/* 1: Base Style Setting
----------------------------------------------------------------------------------------------*/

/* Base Setting
==========================================================*/

body { font: 14px/1.8 "メイリオ", meiryo, Arial, sans-serif; margin:0; padding: 0; background: #fff; letter-spacing: 0.08em; -webkit-text-size-adjust: 100%; color: #000; }
	  
a { text-decoration: none; }
a { outline:none;}
img { -ms-interpolation-mode: bicubic; vertical-align: bottom; } 
:focus { outline: 0; }

.wide { width:100%; margin: auto; }

/* main-layout
==========================================================*/

html { }
html,body,.contwrap,.cont { width: 100%; height: 100%; box-sizing: border-box; }
html:before,body:before,.contwrap:before,.cont:before { content: ""; box-sizing: border-box; position: fixed; background: #fff; border: 10px solid #0092DA; z-index: 99; }

html:before { width: 100%; height: 50px; border-bottom: none; top: 0; }
body:before { width: 100%; height: 50px; border-top: none; bottom: 0; }
.contwrap:before { width: 50px; height: 100%; border-left: none; right: 0; }
.cont:before { width: 50px; height: 100%; border-right: none; left: 0; }

body {}

.sec { width: 100%; padding-top: 12%; box-sizing: border-box; }

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

h1{ margin:-999px 0 0 -999px; width: 999px; height: 999px; }
a[href^="tel:"] { cursor: default; }


/* common
==========================================================*/

.ttl { text-align: center; font-weight: bold; line-height: 70px; font-size: 70px; font-family: 'Poppins', sans-serif; }
.ttlsub { text-align: center; font-family: 'Noto Sans Japanese', serif; font-size: 16px; margin-bottom: 40px; }

.rotawrap { width: 100%; overflow: hidden; padding:  12% 0;}
.rotate { width: 130%; margin-left: -15%;
	-moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
	 }
	
.norota { 
	-moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
 }

.mail { position: fixed; top: 45%; right: 30px; z-index: 999; }
.triggerBtn { position: fixed; top: 45%; left: 30px; z-index: 999; }
.pgt { width: 50px; position: fixed; bottom: 30px; left: 48%; z-index: 999; }

/* sec01
==========================================================*/


.sec01 { padding: 0; width: 100%; min-height: 100%; background-size: cover; overflow:hidden;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00ffff+0,0092da+50,0092da+100 */
background: #00ffff; /* Old browsers */
background: -moz-linear-gradient(45deg,  #00ffff 0%, #0092da 50%, #0092da 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #00ffff 0%,#0092da 50%,#0092da 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #00ffff 0%,#0092da 50%,#0092da 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffff', endColorstr='#0092da',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }
.sec01 .c { width: 35%; max-width: 600px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); }
.sec01 .logo { width: 25%; max-width: 300px; min-width: 200px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%);  }
.sec01 .logo a { display: block; }
.sec01 .rec { width: 20%; max-width: 250px; bottom: 80px; right: 80px; }
.sec01 .rec:hover { cursor: pointer;}

.modal { color: #fff; }
.modal > label { cursor: pointer; }
.modal-overlay { background:#0092DA; position: fixed; top: 0; bottom: 0; left: 0; right: 0; text-align:center; }
.modal-wrap { position: relative; margin: 0 auto; width: 100%; height: 100%; }
.modal-in { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); }
	.modal-in .ttlsub { margin-bottom: 80px; }
	.modal-in .txtwrap { margin-bottom: 60px; }
	.modal-in .mid { font-size: 24px; margin-bottom: 30px; }
	.modal-in .txt { font-size: 14px; margin-bottom: 10px; }
	.modal-in .border { box-sizing: border-box; font-size: 18px; width: 300px; height: 80px; line-height: 80px; margin: 0 auto; border: 1px solid #fff; }
.modal-wrap label { position: absolute; top: 60px; right: 60px;  cursor: pointer; }
.modal input { position: absolute; -index: -9999; visibility: hidden; }

.modal-overlay {
opacity:0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	-moz-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	-ms-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	-o-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
z-index: -999;
}

.modal input:checked ~ .modal-overlay {
opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-0-transform: scale(1);
	transform: scale(1);
z-index: 999;
}

/* sec02
==========================================================*/

.sec02 {}
.sec02 .ttl { font-size: 50px; margin-bottom: 30px; }
.sec02 .ttlsub { line-height: 2em;}
.sec02 .cut { width: 14%; max-width: 180px; left: 5%; top: 25%; }

/* sec03
==========================================================*/

.sec03 { background: #98D3F0; padding-bottom: 12%; }
.sec03 .inner { width: 670px;}
.sec03 .midwide { margin: 30px 0; width: 100%; box-sizing: border-box; border: 1px solid #000; height: 60px; line-height: 60px; text-align: center; font-size: 25px; font-family: 'Poppins', sans-serif; font-weight: bold; }
.sec03 .works {  margin-left: -10px; margin-bottom: 60px; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.sec03 .works li { width:49%; width: -moz-calc(50% - 10px); width: -webkit-calc(50% - 10px); width: calc(50% - 10px);
    margin-left: 10px; margin-bottom: 10px; }
	.sec03 .works .log { box-sizing: border-box; background: #f5f5f5; width: 100%; height: 160px; position: relative; }
	.sec03 .works .log img { display: block; width: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); }
	.sec03 .works .txtwrap { box-sizing: border-box; width: 100%; min-height: 90px; padding: 20px 10px 15px 20px; background: #fff;  }
    .sec03 .works li.r2 .txtwrap { min-height: 120px; }
	.sec03 .works .txtwrap .mid { font-size: 18px; font-weight: bold; line-height: 1.3; margin-bottom: 10px; }
    .sec03 .works .txtwrap .mid span {font-size: 16px;}
	.sec03 .works .txtwrap .txt {line-height: 1.2;  }
.sec03 .past { }
.sec03 .past li { font-size: 1.1em; line-height: 1.4; font-weight: bold; margin-bottom: 14px; position: relative; padding-left: 1em; }
.sec03 .past li::before{ position: absolute; content: "・"; left: -0.1em; }
.sec03 .past li span { font-weight: normal; font-size: 90%; }
.sec03 .past li.year {  padding-left: 0; margin-top: 20px; padding: 0; display: inline-block; border-bottom: 2px solid #000;}
.sec03 .past li.year:nth-child(1) { margin-top: 0;}
.sec03 .past li.year::before{ display: none; }

.sec03 .past2 { margin-bottom: 30px;}
.sec03 .past2 li { padding-bottom: 10px; border-bottom: 1px dotted #000;}
.sec03 .past2 li span { display: block; position: absolute; right: 0; bottom: 10px;}

@media screen and (max-width: 800px) {
.sec03 .inner { width: auto; }
.sec03 { padding-left:  180px;padding-right:  180px;}
}
@media screen and (max-width: 648px) {
.sec03 .past li.year {margin-top: 0;}
.sec03 .past2 li span { padding-top: 5px; position: inherit; right: 0; bottom: 0;}
}



/* sec05
==========================================================*/

/*.sec05 {background: #98D3F0; }*/
.sec05 { padding-top: 0;}
.sec05 .inner { width: 920px; margin: 0 auto; }
.sec05 .member { margin-left: -60px; display: flex; justify-content: center;}
.sec05 .member li { width: 260px; margin-left: 60px; }
	.sec05 .member .mem { max-width: 160px; width: 100%; margin: 0 auto 20px; }
	.sec05 .member .name { font-family: 'Poppins', sans-serif; font-size: 24px; text-align: center; font-weight: bold; line-height: 1.1; margin-bottom: 10px;  }
	.sec05 .member .kat { font-family: 'Poppins', sans-serif; text-align: center; margin-bottom: 20px; font-weight: bold;  }
	.sec05 .member .txjus { }
	
@media screen and (max-width: 1040px) {
.sec05 .inner { width: 740px; margin: 0 auto; }
.sec05 .member { margin-left: -40px; }
.sec05 .member li { width: 220px; margin-left: 40px; }
}

@media screen and (max-width: 860px) {
.sec05 .inner { width: calc(100% - 120px); margin: 0 auto; }
.sec05 .member {}
.sec05 .member li {width: calc(100% / 3 - 20px);}
.sec05 .member .txjus { font-size: 13px; }
}
	
		
/* sec06
==========================================================*/

.sec06 { background: #0092DA; color: #fff; margin-bottom: -10%; padding-bottom: 20%; }
.sec06 .ttlsub { margin-bottom: 80px; }
 
.sec06 .col-r { max-width: 555px; width: 100%; box-sizing: border-box; }
	.contab { width: 100%; margin: 0 auto; }
	.contab tr {}
	.contab th { padding-right: 10px; font-weight: bold;}
	.contab td { padding:5px 0; }
	.contab td input { padding:6px 4px; width:360px; background:#fff; border: none;  box-sizing: border-box;}
	.contab td textarea { padding:6px; background: #fff; width:360px; border: none; box-sizing: border-box; }
	.submitOuter { }
	.submitOuter [type="submit"] {
		background: none;
		border: none;
		cursor: pointer;
		margin: 0; padding: 0; background: none; border: none; border-radius: 0px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; box-sizing: border-box;
		background-color: #75c9ed;
		color: #fff;
		padding:1.2em 2em;
		font-size: 1.1em;
	}
	.error_box {
		display:none;
		margin:10px 0px 20px; box-sizing: border-box;
		padding:15px 14px 15px;
		border: 1px solid #fff;
		text-align:left;
		color:#fff;
		line-height:1.5;
	}
.sec06 .col-l { box-sizing: border-box;  }
.tel { font-family: 'Poppins', sans-serif; font-size: 35px; margin-bottom: 20px; font-weight: bold;  }
.sec06 .tel { margin-top: -10px; }
.tel a { color: #fff; }
.tel span { font-size: 30px; }
	.comtab { }
	.comtab tr { }
	.comtab th { padding-right: 30px; }
	.comtab td { padding-bottom: 10px; }

@media screen and (max-width: 1100px) {
.sec06 .col-l,
.sec06 .col-r { float: none; width: auto; margin-left: 200px;}
.sec06 .col-r { margin-bottom: 40px;}
.sec06 .col-l .tel { margin-bottom: 10px; }
}

@media screen and (max-width: 750px) {
.contab td input,
.contab td textarea { width: calc(100% - 60px); } 
}

#Maps{  width: calc(100% - 100px); height: 50%; margin: -12% auto 50px; }


/* error-ok
==========================================================*/

.error-ok { }
.error-ok .sec { height: 100%; position: relative; }
.error-ok .wrap { text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%);  }
.error-ok .wrap .mid { font-size: 1.4em; margin-bottom: 60px;}









* html .sampleset{}/*IE6 Hack*/
*:first-child+html .sampleset{}/*IE7 Hack*/
head~/* */body .sampleset{}/*IE8 Hack*/