@charset "UTF-8";
/* ---------------------------------
CSS info
 file name  :style.css
 style info :  リセット及びbody初期設定
 notes ： HTML5
------------------------------------ */
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}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
ins{background-color:#ff9;color:#000;text-decoration:none}
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}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}

/*--- default 
------------------------------*/
html,body {
	background-color: "#52d1b8";
	color: #333;
	font-size: medium;
	font-family: "Novel Sans Hair Pro 42","ヒラギノ角ゴ Pro W1","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo",verdana,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 1.5em;
    height: 100%; 
    display: block ; 
    position: relative ; 
    overflow-x: hidden;/*斜め背景*/
}

* html body { /* for IF6 */
	font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

/*float-clear
------------------------------------------------*/
.clearfix:after {
    content: "";
    clear: both;
    display: block;
}


/*header
------------------------------------------------*/

#header {
    height: 150px;
    width; 100%;
	margin: 0 auto;
	padding-top: 0px;
	background-color: #52d1b8;
	background-attachment:fixed;
    opacity: 0.8;
    position: relative;
	z-index: 10;
}

a:link { text-decoration: none; color: #00ced1;}
a:visited { text-decoration: none; color: #478384;}
a:hover { text-decoration: none; color: #3cb371;}
a:active { text-decoration: none; color: #3cb371;}

.flexbox_h{
    display: flex;
}

.flexbox_l {
    display: block;
	width: 50%;
    justify-content: space-between;
    color: white;
	font-size: 14px;
	text-align: left;
    vertical-align: middle;
    padding: 0.6em 0.4em;
	margin: auto;
}

.flexbox_r {
    display: block;
	width: 50%;
    justify-content: space-between;
    color: white;
	font-size: 14px;
	text-align: right;
    vertical-align: middle;
    padding: 0.6em 0.4em;
	margin: auto;
}


/*viewer
------------------------------------------------*/

#viewer {
    position: relative;
    width: auto;
    height: 200px;
    text-align: left;
    overflow: hidden;
}
 
#viewer img {
    position: relative;
    left: 0;
	}


/*contents layout
------------------------------------------------*/

#viewer {
    margin: 0;
    position: relative;
    height: 300px;
}

#bg_fixed1 {
	height: 600px;
	background-image: url('../images/4660.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	z-index: 1;
}

#bg_fixed1_about {
	height: 600px;
	background-image: url('../images/4660.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	z-index: 1;
}

#bg_fixed2 {
	height: auto;
	background-image: url('../images/4817.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	z-index: 1;
}

#bg_fixed2_about {
	height: 600px;
    padding: 30% auto;
	background-image: url('../images/sample2.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	z-index: 1;
}

#bg_fixed3 {
	height: auto;
	background-image: url('../images/n4929.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
    color: #FFF;
	z-index: 1;
}

#bg_fixed4 {
	height: 1000px;
	background-image: url('../images/a0002.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	margin-top: -100px; 
	z-index: 1;
}

#bg_fixed5 {
	height: 1000px;
	background-image: url('../images/a0003.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	z-index: 1;
}

#bg_fixed6 {
	height: auto;
    padding: 20px;
	background-image: url('../images/a0002.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	z-index: 1;
}

#bg_fixed7 {
	height: 180px;
    padding-top: 80px;
    text-align: center;
	background-image: url('../images/a0002.jpg');
	background-size: cover;
	background-attachment:fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	z-index: 1;
}

#bg_white {
	height: auto;
	background-color: #fff;
	padding-top: 50px;
	z-index: 2;
}

#bg_white_consul {
	height: auto;
	background-color: #fff;
	z-index: 2;
}

#bg_white3 {
	height: auto;
	background-image: url('../images/indus_bak.png');
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	position: relative;
	padding-top: 50px;
	z-index: 2;
}

#bg_white4 {
	height: auto;
	background-color: #fff;
	padding-top: 50px;
	z-index: 2;
}

#bg_black {
	height: 100%;
	background-color: #222;
    margin: 0;
	z-index: 2;
}





#main {
	margin: 0 auto;
	padding-top: 0px;
	background-color: #FFF;
	background-attachment:fixed;
	z-index: 2;
}


/*main parts
------------------------------------------------*/

.z3{ z-index: 3}

#mark ul {
    list-style-type: none; 
    text-align:center;
}

#mark ul li { 
	display: inline-block;
	width: 200px;
 	height: 400px;
	padding: 10px 0;
	margin: 10px 20px;
	vertical-align: middle;
	background: #FFF ;
	color: #333;
	text-align:left;
}


/*form
------------------------------------------------*/

.mbox_shade { 
	width:95%; 
	margin: auto;
    padding: 10px;
	text-align: center;
	color: #666;
    background-color: #000;
    background-color: rgba(0,0,0,0.5);
    z-index: 3
}

.mbox_form { 
	width:100%; 
    text-align: left;
	color: #666;
    background-color: #000;
    background-color: rgba(0,0,0,0.5);
}

#form ul {
    width: 100%;
	text-align:left;
    margin: 5px auto;
}

#form li { 
	display: inline-block;
	padding: 20px;
	vertical-align: middle;
	color: #FFF;
    text-align:left;
}

.form_l {
    width: 200px;
}

.form_r [type=text] {
    box-sizing: border-box;
    width: 80%;
}

.form_area{
    width:90%;
    height:100px;
    display: inline-block;
    box-sizing: border-box;  
    margin: 10px;
}

.form_submit {
    display: inline-block;
    width: 80px;
    margin: 30px;
    text-align: center;
}


/*box parts
------------------------------------------------*/

.box1 {
    width:92%; 
    padding: 0.5em 1em;
    margin-top: 100px;
    margin: 0;
	color: #666;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px); 
}

.box2 {
    width:92%; 
    height: auto;
    padding: 0.5em 1em;
    margin-bottom: 100px;
	color: #666;
    background: #f9fcff;/*背景色*/
}

.mbox1 { 
	width:85%; 
	margin: auto; 
	text-align: left;
	color: #666;
}
.mbox2 { 
	width:100%; 
	padding: 30px ; 
	text-align: center;
    background-color: #222;
	color: #666;
}

.mbox3 { 
	width:90%; 
	margin: auto;
    margin-top: 80px;
	text-align: left;
	color: #666;
    z-index: 3
}


/*banner parts
------------------------------------------------*/

.banner1 {
    padding: 0.5em 1em;
    margin-bottom : 2em;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.banner1 p {
    margin: 0; 
    padding: 0;
    color: #1e90ff;
}

.banner2 {
    padding: 0.5em 1em;
    margin : 2em 0em;
    background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

.banner2 p {
    margin: 0; 
    padding: 0;
    color: #1e90ff;
}


/* table parts
------------------------------------------------*/

table{
    width: 100%;
    border-collapse: collapse;
    border-color: #FFF;
}

table tr{
    border: solid 3px white;
}

table tr:last-child{
    border-bottom: none;
}

table th{
    position: relative;
    width: 30%;
    color: #87cefa;
    font-size: 0.9em;
    background-color: #e9f4ff;
    text-align: center;
    padding: 10px 0;
    border: solid 3px white;
}

table th:after{
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top:calc(50% - 10px);
    right:-10px;
    border-left: 10px solid #e9f4ff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

table td{
    text-align: left;
    width: 70%;
    color: #666;
    font-size: 0.9em;
    background-color: #fcfcfc;
    padding: 10px 40px;
    border: solid 3px white;
}


th,td {
	background: #fff;
	border: 1px solid #BBB;
	padding: .5em;
	text-align: center;
}

.td1{
	width: 200px;
}

.gr{
	background: #EFEFEF ;
}


/* list parts
------------------------------------------------*/

#list ul {
	list-style-type: none; 
	text-align: left; 
    color: #666;
}
#list li { 
	display: inline-block;
	width: 200px;
	padding: 0px;
	margin: 5px 5px;
	vertical-align: middle;
	color: #666;
	text-align:left;
    border-bottom: dashed 1px #c6e2ff;
}

#list_total ul {
	list-style-type: none; 
	text-align: left; 
    color: #666;
}

#list_total li{ 
	display: inline-block;
	width: 97%;
	padding: 0px;
	margin: 5px 5px;
	vertical-align: middle;
	color: #666;
	text-align:right;
    border-bottom: dashed 1px #c6e2ff;
}

#list_about ul {
	list-style-type: none; 
    width: 90%;
    margin: 80px auto;
	text-align: center; 
    color: #666;
}

.li1_about { 
	display: inline-block;
	width: 90%;
    height: auto;
	padding: 0px;
	color: #666;
	text-align: center;
}

.li2_about { 
	display: inline-block;
    vertical-align: top;
	width: 90%;
	color: #666;
	text-align:left;
    padding-bottom: 50px;
}

.list-box { /*説明*/
    display: inline-block;
	width: 90%;
    text-align: center;
}

.list-text {
    width: 50%;
    display: table-cell;
    vertical-align: top;
    padding: 5px;
	text-align:left;
}

#list_dtp ul {
    text-align:center; 
}

#list_dtp li { 
	display: inline-block;
	width: 300px;
 	height: 400px;
	padding: 10px 0;
	margin: 30px;
    vertical-align: middle;
	background-color: #FFF ;
	color: #222;
	text-align:center;
}

#notes_long {
    display: block;
    width: 100%; 
    margin-bottom: 50px;
}

#notes_long ul {
    list-style: none; 
    font-size: 0.8em; 
    padding-left: 2em;
}

#notes_long li {
    margin-right: 1em; 
    text-indent: -1em; 
    line-height: 1.2em; 
    color: #ccc;
    box-sizing: border-box;
 }

.ul2 { list-style: none; width: auto; font-size: 1em; line-height: 1.2;  padding-left: 2em;}

.li2 { margin-bottom: 2px; padding-left: 1em; text-indent: -1em; }


/*text parts
------------------------------------------------*/

.txc { text-align: center;}
.cb { clear: both; }
.nh { clear: both; }
 
.text {
	color: white;
    height: 100%;
	font-size: 2em;
	font-weight: bold;
	line-height: 2.5em;
	text-align: center;
    vertical-align: middle;
	width: 70%;
	margin: 0 auto;
	padding-top: 250px;
    text-shadow: 1px 1px 3px #333;
}

.text_under {
	color: white;
    height: 100%;
	font-size: 2em;
	font-weight: bold;
	line-height: 2.5em;
	text-align: center;
    vertical-align: middle;
	width: 70%;
	margin: 0 auto;
	padding-top: 25%;
    text-shadow: 1px 1px 3px #333;
}

.text1 {
	color: white;
	font-size: 2em;
	font-weight: bold;
	line-height: 2.5em;
	text-align: center;
	width: 90%;
    padding-top: 200px;
	margin: 0 auto;
    text-shadow: 1px 1px 3px #333;
}

.text1_consul {
	color: #FFF;
	font-size: 1.5em;
	font-weight: bold;
	line-height: 2.5em;
	text-align: left;
    vertical-align: middle;
	width: 90%;
    padding: 20px;
	margin: 0 auto;
    text-shadow: 1px 1px 3px #333;
}

.text2 {
	color: #333;
	font-size: 1.8em;
    line-height: 1.8em;
	text-align: center;
	width: 80%;
	margin: 50px auto;
}

.text2_l {
    display: inline-block;
	color: #333;
	font-size: 1.8em;
    line-height: 1.8em;
	text-align: left;
	width: 90%;
	margin: -30px auto 50px auto;
}

.text2_l2 {
	color: #FFF;
    font-family: "Novel Sans Hair Pro 42","ヒラギノ角ゴ Pro W1","Hiragino Kaku Gothic Pro",Osaka,"メイリオ","Meiryo",verdana,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size: 1.8em;
	line-height: 1.8em;
	text-align: left;
	width: 90%;
	margin-top: 80px;
	margin-bottom: 40px;
}

.text3 {
	color: #FFF;
	font-size: 24px;
	text-align: left;
	width: 1000px;
	margin: 0 auto;
}

.text4 {
	color: #FFF;
	font-size: 18px;
	text-align: left;
	width: 1000px;
	margin: 0 auto;
}

.text5 {
	color: #FFF;
	font-size: 1em;
	text-align: left;
	width: 100%;
	margin: 0 auto;
}

.text6 {
	color: #666;
	font-size: 0.9em;
    line-height: 1.5em;
	text-align: left;
	width: auto;
}

.text7 {
	color: #666;
	font-size: 1em;
    line-height: 2em;
	text-align: left;
	width: auto;
}

.text8 {
	color: #ccc;
	font-size: 1em;
	text-align: left;
	width: 85%;
	margin: 0 auto;
}

.text_ena {
	color: #666;
	font-size: 1em;
	text-align: center;
	width: auto;
    margin: 10px auto 30px auto;
}

.text_logo {
	color: #f0f8ff;
	font-size: 100px;
    line-height: 0.8em;
    font-family: "Novel Sans Hair Pro 42",verdana,Sans-Serif;
	text-align: left;
	padding-top: 0px;
}

.text_logo2 {
	color: #2c2c2c;
	font-size: 100px;
    line-height: 0.8em;
    font-family: "Novel Sans Hair Pro 42",verdana,Sans-Serif;
	text-align: left;
	padding-top: 50px;
}

.notes {
    font-size: 14px;
    color: #999;
    margin: 30px 30px;
    text-align: left;
}

.notes_y {
    font-size: 12px;
    color: #ffff00;
    margin: 30px 10px;
    text-align: center;
}

.det{
	width: 80%;
    border: 1px solid #BBB;
	margin: 0 auto;
    background: #fff;
    padding: 50px;
    border-collapse: collapse;
	margin: 30px auto;
}

.btn-contact {
    font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
    color: #FFF;
    text-align: center;
    width: 65%;
    margin: 10px auto;
    padding: 20px;
	font-weight: bold;
    font-size: 1.8em;
    background-color: rgba(0,0,0,0.5);
}

.btn-contact:hover {
    background-color: rgba(0,0,0,0.3);
}

/*footer
------------------------------------------------*/

#footer {
    width: 100%;
	height: auto;
    bottom: 0;
	background-color: #52d1b8;
	padding-top: 10px;
	z-index: 2;
	text-align: center;
}

#footer a:link { text-decoration: none; color: #C0FFBC;}
#footer a:visited { text-decoration: none; color: #DDD;}
#footer a:hover { text-decoration: none; color: #FFF;}
#footer a:active { text-decoration: none; color: #FFF;}

#ftr_list ul {
	list-style-type: none; 
	text-align: center; 
}
#ftr_list ul li { 
	display: inline-block;
	width: 100px;
 	height: 50px;
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
	color: #FFF;
	text-align:center;
}

#copyright { 
    width: 100%; 
    margin: 5px; 
    text-align: center; 
    color: aquamarine; 
    font-size: 0.6em;
}

/* pagetop navigation
------------------------------------------------*/

h2{
  text-align: center;
  margin-bottom: 30px;
}
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 30px;
  bottom: 50px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '▲';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}