@charset "utf-8";
/* CSS Document */


html,  body {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px;
	font:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}
@media screen and (max-width: 767px) {
	body {font-size: 12px;}
}

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
}
/* What it does: Stops email clients resizing small text. */
* {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
	margin: 0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */

/* What it does: Uses a better rendering method when resizing images in IE. */
img {
	-ms-interpolation-mode: bicubic;
}

#mask{font-family
	:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/********************タイトル***********************/

#Title_content {
	background:#39aaf4;
margin-top: 100px;
}
#Title_content .title{	
max-width:1000px;
margin: 0 auto 0;
background-image:url("../images/img_mask04.jpg") ;
background-size: contain;
background-repeat:  no-repeat;
background-position: center;
}



#Title_content .title h1{
	display: block;
	width: 44%;
	max-width: 515px;
margin:  0 auto;
	text-align: center;
	padding:23% 0 0;
}
#Title_content .title_txt{
	color: #FFFFFF;
	text-align: center;
	margin:   0 auto ;
	padding: 2% 0 15%;
	font-size: 0.9em;
	line-height: 1.8em;
	font-weight: bold;
	letter-spacing: 0.2em;	
}
#Title_content .title_txt2{
	color: #FFFFFF;
	font-size: 0.9em;
	line-height: 1.8em;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-align: left;
    margin: 0;
	padding: 4% 0 4% 3%;
	
}



@media screen and (max-width: 767px) {
	#Title_content {
margin-top: 56px;
}
	#Title_content .title{background:#39aaf4;
	display: block;
	background-image:url("../images/img_mask03.jpg") ;
	background-size: contain;
	background-repeat:  no-repeat; 
	background-position: center;
	}
#Title_content .title h1{
	display: block;
	width: 60%;
margin:   0 auto;
	text-align: center;
	padding:50% 0 0;
}
#Title_content .title .title_txt{
	padding: 2% 0 50%;
	font-size: 0.8em;
	line-height: 1.8em;
	font-weight: 500;
	letter-spacing: 0.2em;
}
	
#Title_content .title .title_txt2{
	color: #FFFFFF;
	font-size: 0.8em;
	line-height: 1.8em;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-align: right;
    margin: 0;
	padding: 4% 5% 10% 0;
	
}
	

}
@media screen and (max-width: 414px) {
	#Title_content .title .title_txt{
font-size: 0.7em;letter-spacing: 0.08em;
padding: 1% 0 50%;line-height: 1.6em;		
}
#Title_content .title .title_txt2{
	font-size: 0.6em;
	padding: 4% 4% 10% 0;
	letter-spacing: 0.1em;line-height: 1.6em;
}	
}



/********************info***********************/
#Info_content {
    padding: 100px 0 ;
	width: 100%;
	text-align: left;
background-color: #FFFFFF;}

#Info_content .info{
width: 90%;
margin: 0 auto ;
max-width:1000px;
}
#Info_content .info h2 {
/*border-bottom: dotted 1px #3c3c3c;*/
    padding: 0 ;
    margin: 0 0 15px;
    clear: both;
    overflow: hidden;
/*
	font-family: "Courier New", Courier, monospace;
	*/
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #555 ;}

#Info_content .info h2 span {font-size: 50%;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

   }

#Info_content .info li {
	width: 100%;
	float: left;
	 line-height:1.5em;
  padding: 1.5em 0 0.5em 0;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
  vertical-align: bottom;
  font-size: 14px;
	
}

#Info_content .info .day{
color:#39aaf4;}


#Info_content .info .text{margin-left: 10px;}

#Info_content .button1,#Message_content2 .button1
{
	margin: 60px auto 40px;
    width:350px;
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:15px 0;
    color:#fff;
    background-color: #56a7d5;
	border-radius:30px;
}

#Info_content .button2,#Message_content2 .button2
{
	margin: 40px auto;
    width:350px;
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
    display:block;
    text-align:center;
    padding:15px 0;
    color:#fff;
    background-color: #4cc4d2;
	border-radius:30px;
}
#Info_content a,#Message_content2 a
{text-decoration:none;
color:#fff;}
#Info_content a:hover,#Message_content2 a:hover
{color:
	#DFDFDF;
font-size:0.9em;}
#Info_content a:visited,#Message_content2 a:visited
{color:
	#fff;}


/************************** smartPhone ***************************/
@media screen and (max-width: 767px) {
#Info_content {
    padding: 80px 0 60px;
}	
#Info_content .info h2 {
    font-size: 20px;
}

#Info_content .info h2 span {font-size:12px;
}
#Info_content .info li {
  font-size: 12px;
}
	
#Info_content .button1,#Message_content2 .button1 {
	margin: 40px auto 30px;
    width:70%;
    font-size:16px;
}

#Info_content .button2,#Message_content2 .button2 {
	margin: 30px auto;
    width:70%;
    font-size:16px;
}	
	
}


@media screen and (max-width: 414px) {
#Info_content .button1 {
	margin: 40px auto 30px;
    width:80%;
    font-size:15px;
}

#Info_content .button2 {
	margin: 30px auto;
    width:80%;
    font-size:15px;
}}

/********************Message***********************/
#Message_content{
background-color: #f6f6f6;
padding: 100px 0 30px;
width: 100%;
text-align: left;

}
#Message_content .message,#Message_content2 .message
{
max-width: 1000px;
margin: 0 auto;
}

#Message_content .message h2,#Message_content2 .message h2{
padding: 0 ;
margin: 0 0 30px;
clear: both;
overflow: hidden;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #555 ;}
#Message_content .message .text,#Message_content2 .message .text
{
width: 60%;
margin: 0 auto;
font-size: 14px;
padding-bottom: 25px;line-height: 1.6em;	
}
#Message_content .message .text2{
width: 60%;
margin: 0 auto;
font-size: 14px;
padding-bottom: 75px;
text-align: right;
}

@media screen and (max-width: 767px) {
	
#Message_content{
padding: 80px 0 20px;

}	
#Message_content .message h2,#Message_content2 .message h2
{font-size: 20px;
}
	
#Message_content .message .text,#Message_content2 .message .text
{
width: 80%;
margin: 0 auto;
font-size: 12px;
padding-bottom: 25px;	
}
#Message_content .message .text2{
width: 80%;
margin: 0 auto;
font-size: 12px;
padding-bottom: 75px;
text-align: right;
}
}

@media screen and (max-width: 414px) {
#Message_content .message h2,#Message_content2 .message h2{
font-size: 16px;
}
}
/********************Project***********************/
#Project_content {
width: 100%;	
background-color: #39aaf4;
padding: 100px 0 30px;
text-align: left;
color: #fff;
}

#Project_content .project .title01{
width: 13%;
text-align: center;
margin: 0 auto;
max-width: 165px;
}

#Project_content .project .title02 {
width: 35%;
max-width: 462px;
text-align: center;
margin: 20px auto;}

#Project_content .project .title03 {
width: 50%;
max-width: 902px;
text-align: center;
margin: 30px auto 60px;
}

#Project_content .project .text{
width: 60%;
margin: 0 auto;
font-size: 14px;
padding-bottom: 25px;
text-shadow:2px 2px 3px #117bc0;
}

#Project_content .project .text2
{
width: 60%;
margin: 0 auto;
font-size: 14px;
padding-bottom: 75px;
text-align: right;
text-shadow:2px 2px 2px #117bc0;
}



@media screen and (max-width: 767px) {
#Project_content {

padding: 80px 0 50px;

}	

#Project_content .project .title01{
width: 16.5%!important;
text-align: center;
margin: 0 auto;
max-width: 165px;
}

#Project_content .project .title02 {
width: 46%;
max-width: 462px;
text-align: center;
margin: 20px auto;}

#Project_content .project .title03 {
width: 80%;
max-width: 902px;
text-align: center;
margin: 30px auto;}

#Project_content .project .text{
width: 60%;
margin: 0 auto;
font-size: 14px;
padding-bottom: 25px;
text-shadow:2px 2px 3px #117bc0;
}
}
	

/********************Message2**********************/
#Message_content2 {
background-color: #ffffff;
padding: 100px 0 70px;
width: 100%;
text-align: left;

}
#Message_content2 h4{
padding: 40px 0 ;
font-size: 26px;
font-weight: bold;
text-align: center;
color: #555 ;}

#Message_content2 .parent {
justify-content: center;
display: flex;
}


#Message_content2 .parent .children01,#Message_content2 .parent .children02,#Message_content2 .parent .children03
{width:8%;
padding: 0 20px;
list-style: none;
}

@media screen and (max-width: 767px) {
#Message_content2 {
padding: 80px 0 60px;

}	
#Message_content2 h4
{font-size: 20px;
padding: 20px 0 40px;
}
}

@media screen and (max-width: 414px) {
#Message_content2 h4{
font-size: 16px;
}
}

/*********************************************/
footer {
	margin: 0;
	padding: 3em 0 3em 0;
	text-align: center;
	background: #35a3ec;
}
footer > div {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
}


.footer-mask img{
	width: 150px;
	text-align: center;

}
.footer-sec {
color: #fff;
}


.footer-mask .parent {
justify-content: center;
display: flex;
}
.footer-mask .parent .children01,.footer-mask .parent .children02,.footer-mask .parent .children03
{
display: block;	
width: 150px;
padding: 1em 20px;
}


.footer-sec {
	display: block;
	text-align: center;
	font-size: 14px;
	font-weight: 100;
	margin-top: 20px;
}
.footer-sec a {
	color: #fff;
}
.footer-sec a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
.footer-mask img{
	width: 100px;
	text-align: center;

}	
.footer-mask .parent {
-webkit-flex-direction:column;
flex-direction: column;
display: flex;
}	
.footer-mask .parent .children01,.footer-mask .parent .children02,.footer-mask .parent .children03
{
display: block;	
width:100%;
padding: 10px 0;
}	
}



.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
/**************************************fadein ******************************************
 .fadein {
    animation-name: fadein;
    animation-duration: 2s;

  }
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/**************************************************/
.clear{clear:both;
}

.clearfix::after {
   content: "";
   display: block;
   clear: both;
}

a {text-decoration:none;
}
a:hover{opacity: 0.5 ;}