@charset "shift_jis";
/* CSS Document */

.Only_PC{
}

.kaji_T{
}

.bute_T{
	display:none;
}

.bute_M{
	display:none;
}

img.max100{
	max-width:100%;
	height:auto;
}

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

---------------------------------------------- */

div.main{
	background:#00B8EE;
	padding:20px;

-moz-box-shadow:rgba(50,50,50,0.8) 5px 2px 7px ;
-webkit-box-shadow:rgba(50,50,50,0.8) 5px 2px 7px ;
box-shadow:rgba(50,50,50,0.8) 5px 2px 7px ;
 box-shadow:rgba(50,50,50,0.8) 5px 2px 7px ;
}

div#teduri{
	background:#fff;
}

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

---------------------------------------------- */

html, body, .container, .header {
	height: 100%; min-width: 320px;
}

/* Header */
.header {
	position: relative;
	margin: 0 auto;
	min-height: 700px;
	width: 100%;
}

.bg-img {
	position: absolute;
	overflow: hidden;
	top: 0;
    left: 0;
	right: 0;
	bottom: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bg-img img {
position: absolute;
    top: 0;
    left: 50%;
    margin-left: -900px;
	display: block;
	min-width: 100%;
	min-height: 100%;
}

.logoimg{
	text-align: center;
	padding-top:10px;
}

.title {
	position: absolute;
	top:25%;

    z-index: 1000;
    width: 100%;
	height:100%;
    text-align: center;
    position: absolute;
	padding:10px;
}

.title h1 {
background:rgba(0,0,0,0.4);
border:1px solid #fff;
max-width:700px;
padding:30px 10px;
height: 100%;

font-family: "Helvetica Neue", Helvetica, Arial,"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;

	color: #fff;
	font-weight: none;
	font-size:50px;
	margin: 0 auto;
}

.title p {
	color: #fff;
	padding: 0 0 0.6em;
	font-weight: 300;
	font-size: 0.85em;
	margin: 0 auto;
}

.title h1 img{
	margin:5% 0;
	border-bottom:1px solid rgba(255,255,255,1);
}

.title h1,
.title p.subline {
	line-height: 1.5;
}

.title p.subline {
	font-size: 1.75em;
}

/* Trigger Button */
button.trigger {
    position: fixed;
    bottom: 10px;
    left: 50%;
    z-index: 5000;
    display: block;
    margin-left: -30px;
    padding: 0;
    width: ;
    height: auto;
    border: none;
    background: transparent;
    color: transparent;
    font-size: 2em;
    cursor: pointer;
}

.container:not(.notrans) button.trigger {
	-webkit-transition: opacity 0.3s 0.5s;
	transition: opacity 0.3s 0.5s;
}

.container.modify:not(.notrans) button.trigger {
	opacity: 0;
	pointer-events: none;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

button.trigger::before {
	position: absolute;
	bottom: 100%;
	left:-50%;
	padding:0 15px 10px ;
	width: 200%;
	color: #fff;
	content: attr(data-info);
    font-size: 13px;
    line-height: 1.2;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	font-family: "Helvetica Neue", Helvetica, Arial,"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
}

button.trigger:focus {
	outline: none;
}

/* Conent */

/***** Individual effects *****/

/* -------------------------- */
/* Push */
/* -------------------------- */
.intro-effect-push:not(.notrans) .header,
.intro-effect-push:not(.notrans) > .title,
.intro-effect-push:not(.notrans) .content > div {
	-webkit-transition-property: opacity, -webkit-transform;
	transition-property: opacity, transform;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
}

.intro-effect-push:not(.notrans) .header {
	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
	-webkit-transition-duration: 1.2s;
	transition-duration: 1.2s;

	background:#fff url(../img/back10.png);
}

.intro-effect-push .codrops-demos a {
	color:;
}

.intro-effect-push .header {
	position: absolute;
	z-index: 1500;
}

.intro-effect-push > .title {
	position: relative;
	top: auto;
	left: auto;
	padding: 6em 1em 2em;
}

.intro-effect-push .content > div {
	margin-top: 50px;
	color: #b2b2c0;
}

.intro-effect-push > .title,
.intro-effect-push .content > div {
	-webkit-transform: translateY(400px);
	transform: translateY(400px);
	opacity: 0;
}

.intro-effect-push.modify > .title,
.intro-effect-push.modify .content > div {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}

.intro-effect-push.modify .header {
	opacity: 0;
	-webkit-transform: translateY(-100%) scale(0.9);
	transform: translateY(-100%) scale(0.9);
}

/* Delays */
.intro-effect-push.modify:not(.notrans) > .title {
	-webkit-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.intro-effect-push.modify:not(.notrans) .content > div {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}

/* ---------------------------------------------
               campaign

---------------------------------------------- */
div.teduin{
	background:#2BA6E0 url(../img/back05_a.png) center bottom no-repeat;
	background-size:450px;
	padding:140px 0 0;
}

/*------campaign--------*/

div.campaign{
	color:#fff;
	text-align: center;
	clear: both;
	position: ;
	padding: 50px 10px 0 10px;
	font-weight: normal;

	font-family:"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
	background:#2BA6E0 url(../img/back05.png) center bottom no-repeat;
	background-size:670px;

-moz-box-shadow:rgba(0,0,0,0.8) 0px 2px 7px;
-webkit-box-shadow:rgba(0,0,0,0.8) 0px 2px 7px;
box-shadow:rgba(0,0,0,0.8) 0px 2px 7px;
 box-shadow:rgba(0,0,0,0.8) 0px 2px 7px;
}

div.cambox00{
	padding:25px 0;
	font-size:25px;
	margin: 0 auto;
	text-align:center;
}

div.cambox00 span{
	padding:0 10px;
	margin-right:10px;
	border:1px solid #fff;
}

div.cambox01{
	margin:0 auto;
	max-width:740px;
	text-align:left;
	padding:20px;
	border:2px solid #fff;
	font-size:18px;
}

div.cambox01_s{
	max-width:740px;
	margin:0 auto;
	text-align:center;
		height:10px;}

div.cambox01_s img{
	width:10px;
	vertical-align:top;
	margin:0;
	padding:0;
}
div.cambox01_s div{
	margin: 0 auto;
    text-align: center;
    padding: 0;
    /* display: inline; */
    width: 720px;
    height: 10px;
    float: left;
    background: #fff;
}

div.cambox01_s img:first-child{
	padding:0;
	margin:0;
	float: left;
}

div.cambox01_s div{
	margin:0 auto;
	text-align:center;
	padding:0;
	display:inline;
	max-width:720px;
	background:#fff;
}

div.campaign div.cambox01 p:nth-child(even) {
	border-bottom:1px solid #fff;
	padding-bottom:20px;
	margin-bottom:20px;
}

p.camback01{
	padding-left:60px;
	background:url(../img/img08.png) center left no-repeat;
}
p.camback02{
	padding-left:60px;
	background:url(../img/img09.png) center left no-repeat;
}

div.cambox02{
	width:100%;
	margin:0 auto;
	text-align:center;
	font-size:20px;
	padding:20px;
}

div.cambox02 div{
	float:none;

display: -moz-inline-box; /* For FF<3 */
 -moz-box-orient: vertical; /* For FF<3 */
 display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
 vertical-align: top; /* explicitly declare your preference as Moz inline-box auto aligns to top */
}

div.box02_p01{
	width:110px;
	height:110px;
	text-align: center; /* to left align text within divs when container has been set to center */

	background:#fff;
	background-size:20px;
	line-height:1.2;
	color:#2BA6E0;
	font-weight:500;
	padding-top:30px;
	margin-top:10px;

border-radius:110px;
-o-border-radius: 110px;
-moz-border-radius: 110px;
-webkit-border-radius: 110px;
}

div.box02_p02 p:nth-last-child(3){
	border-bottom:0px solid #fff;
	padding-top:15px;
	margin-top:5px;
}

div.box02_p02{
	text-align: left;
	border-left:0px solid #fff;
	padding:5px 10px;
	font-size:18px;
}

div.box02_p02 a{
	color:#fff;
}

p.tel,
p.mail{
	padding-left:35px;
}

p.tel{
	background:url(../img/img10.png) center left no-repeat;
	background-size:25px;
}

p.mail{
	background:url(../img/img11.png) center left  no-repeat;
	background-size:25px;
}

.totop {
    padding: 150px 0 0;
	font-size:30px;
}

.demo-drawings a.topa {
	color:#2BA6E0;
}

/*-----form------*/
div#contactBox{
	margin:0 auto;
	text-align:center;
	max-width:750px;
	padding:10px;
	background:rgba(33, 115, 163, 0.27);
	font-size: 16px;

border-radius: 10px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

dl {
    line-height: ;
}

dl.contactDL {
    padding-bottom:10px ;
}

dl.contactDL dt {
    float: left;
	color:#2BA6E0;
}

dl.contactDL dt, dl.contactDL dd {
    padding: 10px;
}

dl.contactDL dd {
    border: 1px solid #2BA6E0;
    border-bottom: none;
	padding-left:220px;
    background:#fff url(../img/back14.png) 210px top repeat-y;
}

dl.contactDL dd.lastddbox {
    border-bottom: 1px solid #2BA6E0;
}

input[type=text], input[type=email], input[type=tel], textarea {
    border: 2px solid #2BA6E0;
    padding: 1%;
    width:100% ;
}

input[type=submit]{
width: 120px;

 background: #fff;
    border: none;
    color: #2BA6E0;
	font-family:"ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
    font-size: 20px;
	font-weight:500;
    padding: 10px 0;
    width: 150px;
    cursor: pointer;
}

div.submit{
	float: none;
	width:150px;
    padding-bottom: 5px;
	background: url(../img/back001.png) center bottom no-repeat;

	display: -moz-inline-box; /* For FF<3 */
 -moz-box-orient: vertical; /* For FF<3 */
 display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
 vertical-align: top; /* explicitly declare your preference as Moz inline-box auto aligns to top */
 text-align: left; /* to left align text within divs when container has been set to center */
}

div.submit:hover{
	padding-top: 4px;
	padding-bottom: 0;
	border-bottom:1px solid #1880A7;
}

/* ---------------------------------------------
              submit@page

---------------------------------------------- */