@charset "utf-8";
/*------------------------------------------------------------
●sp.css 画面の横幅が750pxまで
------------------------------------------------------------*/
@media screen and (max-width: 750px){

.sp {display: block;}

.pc,
#globalnavi {display: none;}


body {font-size: 18px;line-height: 1.5;-webkit-text-size-adjust: none;
    overflow-x: hidden;
}
#container {text-align: left;	padding: 0;margin: 0;}

#container #wrap {
	margin: 0%;
	padding: 0%;
	background-color: #fff;

	text-align: center;
	height: auto;
	float: left;
	clear: both;
}



#container #wrap #wrap-in {
	margin: 0em 0% 0em;
	padding: 0;
	width: 100%;
	/*float: left;*/
	background-color: #fff;
	clear: both;
}









/* ==HEAD ================================ */

#wrap #wrap-in #head{
	margin: 0;
	padding:0;
	float:left;
	width:100%;
	clear: both;

}

#wrap #wrap-in #head .title{
	margin: 0 5% 0 5%;
    float: left;
    width: 90%;
}


#wrap #wrap-in #head .title h1{
	width:65%;
	font-weight: bold;
	float:left;
	font-size:0.8em;
	text-shadow: 1px 1px 3px #fff;
	text-align: center;
	}

/* logo  ============================= */
#wrap #wrap-in #head .title #logo-box,
#wrap #wrap-in #head .title #logo-box a　{
width: 32%;
float: left;
margin: 2% 4% 0 4%;
background-size: 100%;
vertical-align: middle;
	}


#wrap #wrap-in #head .title #logo-box a:hover {
  filter: alpha(opacity=60);
  -ms-filter: "alpha( opacity=60 )";
  -moz-opacity:0.6;
  opacity:0.6;}


#head .title #tel-box,
#head .title #tel-box a　{
float: left;
text-decoration: none;
text-align: left;
width: 30%;
margin: 0.5em 0% 0 5%;

}


#head .title #tel-box .phone{
font-size: 111%;
width: 100%;
background-color: #231815;
border-radius: 5px;
float: left;
background-image: url(../img/common/ic_tel_bk.png);
background-repeat: no-repeat;
background-size: contain;
background-position: 7% 31%;
}

/*
#head .title #tel-box .phone:before{
content: '●';
content: url(../img/common/ic_tel_bk.png);
padding: 2% 1%;
top: 0.3em;
*/
}


#head .title #tel-box .phone a{
text-indent: 1em;
text-decoration: none;
font-size: 70%;
font-weight: bold;
margin: 5% 11% 5% -23%;
float: right;
color: #fff;
}


#head .title #tel-box .memo{
color: #0099F2;
top: 64%;
font-size: 87%;
float: left;
margin: 1.25em 0 0.5em 1em;
}





/* ==HEAD ハンバーガーMENU ===================== */


/*ヘッダーまわりはサイトに合わせて調整してください*/
.header {
padding: 7px;
background: linear-gradient(to top, #10d7f1, #6b8aff);
width: 1.5em;
height: 1.4em;
margin: 0.5em 0 0.5em 0.5%;
float: right;
}

#nav-drawer {
}

.nav-unshown {
  display:none;
}


#nav-open {
  display: inline-block;
  width: 50px;
  height: 42px;
  vertical-align: middle;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 3px;
width: 1.5em;
border-radius: 3px;
background: #fff;
display: block;
content: '';
margin-top: 0.1em;
}

#nav-open span:before {
  bottom: -10px;
}
#nav-open span:after {
  bottom: -20px;
}


/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: #0d3389;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/
width: 90%;
max-width: 80%;
  height: 100%;
  background: rgba(4, 176, 233, 0.3);
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}


#nav-content ul {
float: left;
padding: 0;
margin: 0;
width: 100%;
/*background-color: #364549;*/
}


#nav-content ul li.top-burger {
float: left;
padding: 0.7em 0 0.7em 0;margin: 0;
border-top: 2px solid #cce9fa;
width: 97%;
background-color: #005bac;
font-weight: bold;
font-size: 86%;
}

#nav-content ul li.top-burger a{color: #fff;display: inline-block;}
#nav-content ul li.top-burger a:link {color: #005bac;text-decoration: none;}
#nav-content ul li.top-burger a:hover {color: #ffed20;text-decoration: none;}





#nav-content ul li.burger {
float: left;
padding: 0.7em 0 0.7em 0;
margin: 0;
border-top: 2px solid #fff;
width: 100%;
background-color: #cce9fa;
font-weight: bold;
font-size: 86%;
}



#nav-content ul li.burger a{color: #0d3389;display: block;}
#nav-content ul li.burger a:link {color: #005bac;text-decoration: none; display: block;}
#nav-content ul li.burger a:hover {color: #c1162c;text-decoration: none;}



#nav-content ul li.s-burger {
float: left;
padding: 0.8em 0% 0.8em 3%;
margin: 0;
border-top: 1px solid #cce9fa;
width: 100%;
background-color: #fff;
font-size: 75%;
font-weight: normal;
text-align: left;
position: relative;
}



#nav-content ul li.s-burger a{color: #0d3389;display: inline-block;}
#nav-content ul li.s-burger a:link {color: #005bac!important;text-decoration: none; display: inline-block;}
#nav-content ul li.s-burger a:hover {color: #c1162c;text-decoration: none;}





#nav-content ul li.s-burger:before {
	/*content: '●';*/
	content: url(../img/common/ic_ss-sim.png);
    margin: 0;
    position: absolute;
    top: 0.2em;
    padding-right: 5px;
}






#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .3;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}




/* ======================================== */
/* ==MAIN ================================ */
#main  {
	margin: 0 0 0 0;
	padding:0;
	float:left;
	background-color: #fff;
}



#main .main-title {
	margin: 0 0 0 0;
	padding:0;
	width:100%;
	background: linear-gradient(to top, #10d7f1, #6b8aff);
	float:left;
	padding-bottom: 2.2em;
}


#main .main-title h1 {
	font-size: 124%;
	color: #fff;
	margin:0;
	padding: 10% 0% 1% 15%;
	position: relative;
  display: inline-block;
}

#main .main-title h1:before {
	content: '';
  display: inline-block;
  position: absolute;
  width: 23%;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(../img/pc/ic_hand-s.png);
  background-position: left top;
  /*background-size: contain;*/
  vertical-align: middle;
  margin-right: 0.5em;
  left: -7%;
  top: 29%;
}

#main .main-title h1 img {
  width: 18%;
  vertical-align: middle;
  margin-right: 0;
}



#main .main-title img {
  width: 25%;
  text-align: center;
  margin:1.2em 5% 0 5%;
  bottom: -1em;
  padding: 0;

    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;

}

/*
#main .main-title img:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  }
*/








/* PLAN ============================= */
#main .plan-all{
	float: left;
	margin: 0 0 0 0;
	color: #555555;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 0;
}

#main .plan-all .plan {
	float: left;
	width: 100%;
	margin: 0 auto 2em auto;

		/*background-size: 100%;*/
	background-image: url(../img/pc/ic_line01.png);
	background-repeat: repeat-x;
  background-position: left 4em;
  }

#main .plan-all .plan h2 {
    width: 80%;
    margin: 11% 10% 1em;
    float: left;
    padding: 1%0 2% 1%;
    color: #0b308e;
    font-size: 160%;
    background-color: #fff;



  }


#main .plan-all .plan .intro{
	max-width: 980px;
	margin: 0 auto 1em auto;
	text-align: center;
}





#main .plan-all .plan .intro .list {
	margin: 0 5% 2em;
	width: 90%;
	float: left;
	text-align: left;
	background-color: #0b308e;

	-webkit-box-shadow: 3px 3px 5px 0 #f4f4f4; 
	-moz-box-shadow: 3px 3px 5px 0 #f4f4f4; 
	box-shadow: 3px 3px 5px 0 #f4f4f4; 
	border-radius: 10px;
}


#main .plan-all .plan .intro .list p {
	color: #fff;
	font-size:120%;
	margin: 4% auto 2%;
	line-height: 1.4;
	text-align: center;
	}



#main .plan-all .plan .intro .list .imgbox {
	/*float: left;*/
	text-align: center;
	padding: 0%;
	/*width: 100%*/
	border: 2px solid #0b308e;
	margin: 0% 1% 0em 1%;
}

#main .plan-all .plan .intro .list .imgbox img {
	text-align: center;
	padding: 0;
	margin: 0 auto;
	width: 100%;
}


#main .plan-all .plan .intro .list p.catch {
	color: #0b308e;
	background-color: #fff000;
	border-top: 2px solid #0b308e;
	border-left: 4px solid #0b308e;
	border-bottom: 4px solid #0b308e;
	border-right: 4px solid #0b308e;
	font-size: 140%;
	text-align: center;
	margin: 0 auto 0 0.5%;
	line-height: 1.6;
	text-align: center;
	width: 96.5%;
	float: left;
	padding: 2% 0.5% 1%;
	border-radius: 0 0 10px 10px;
	}




#main .plan-all .plan .intro .list .pricebox {
	float: left;
	margin: 0.6em auto 1.2em;
	width: 100%;
	font-size: 1.2em;
	color: #444444;
	text-align: center;
}

#main .plan-all .plan .intro .list .pricebox:after {
	content: '円（不課税）';
	font-size: small;
}






/* material ============================= */
#main .material-all{
	float: left;
	margin: 0 0 0 0;
	color: #555555;
	font-weight: bold;
	width: 100%;
	text-align: center;
	padding: 0;

}

#main .material-all .material {
	float: left;
	width: 100%;
	margin: 0 auto 2em auto;
	/*background-size: 100%;*/
	background-image: url(../img/pc/ic_line01.png);
	background-repeat: repeat-x;
  background-position: left 2em;
  }


#main .material-all .material h2 {
width: 80%;
    margin: 0 10% 0;
    float: left;
    padding: 3% 1%0.7em 1%;
    color: #0b308e;
    font-size: 150%;
    text-shadow: 0px 1px 3px #ffffff;
    background-color: #fff;
    line-height: 1.3;
  }


#main .material-all .material p {
color: #555555;
font-size: 95%;
text-align: center;
margin: 1em 5% 1em;
line-height: 1.5;
text-align: center;
font-weight: normal;
	}



#main .material-all .material .list-eria {
	margin: 0 auto 0 auto;
	width: 100%;
	text-align: center;

	/*
	-webkit-box-shadow: 3px 3px 5px 0 #f4f4f4; 
	-moz-box-shadow: 3px 3px 5px 0 #f4f4f4; 
	box-shadow: 3px 3px 5px 0 #f4f4f4; 
	border-radius: 10px;
	*/
}


#main .material-all .material .list-eria iframe {
height: auto; 
width: 95%!important;
border: 0;
margin:0 2.5% 0 2.5%;

}







/* kiyaku ============================= */
#main .kiyaku-all{
float: left;
margin: 0 auto 0 auto;
color: #555555;
font-weight: bold;
width: 100%;
text-align: center;
padding: 0;
}

#main .kiyaku-all .kiyaku {
	float: left;
	width: 100%;
	margin: 0% auto 0 auto;
	/*background-size: 100%;*/
	background-image: url(../img/pc/ic_line01.png);
	background-repeat: repeat-x;
  background-position: left 2em;

  }


#main .kiyaku-all .kiyaku h2 {
width: 80%;
margin: 6% 10% 0;
float: left;
padding: 0 0 0.7em 0;
color: #0b308e;
font-size: 160%;
text-shadow: 0px 1px 3px #ffffff;
background-color: #fff;
line-height: 1.3;
  }


#main .kiyaku-all .kiyaku p {
color: #555555;
font-size: 95%;
text-align: center;
margin: 3% 5% 0em;
line-height: 1.5;
text-align: center;
font-weight: normal;
	}





#main .kiyaku-all .kiyaku .list-eria {
	margin: 0 auto 0;
	width: 100%;
	text-align: center;
	/*border:1px solid #ccc;*/
	padding: 0em 0 1em 0;
	position: relative;
}


#main .kiyaku-all .kiyaku .kanban{
float: left;
position: absolute;
top: -1em;
left: 4%;
}






#main .kiyaku-all .kiyaku .list-eria iframe {
height: 58rem;
    width: 94%;
    border: 0;
    margin: 0 2.5% 0 2.5%;

}







/* TOP NEWS ============================= */

.topnews-all{
	float: left;
	text-align: center;
	width: 95%;
	margin: 2em 2.5% 0 2.5%;
	}

.topnews{
	float: left;
	font-size: 70%;	
	margin:0;
	width: 100%;
	position: relative;
	text-align: center;
}



.topnews:before {
  content: '<Information>';
  /*display: inline-block;
  position: absolute;
  width: 20%;
  */
  background: none;
  margin-right: 0.5em;
  margin-bottom: 2em;
  font-weight: bold;
  letter-spacing:0.1em;
}


.topnews ul{
	margin:0;
	padding-left: 2em;
    width: 90%;
	text-align: left;
}


.topnews ul li{
	font-size: 110%;
	margin:0 0 1em 0%;
	padding: 0%;
	text-indent: -1.25em;
}


.topnews ul li:before{
	content:"\0bb";
	padding-right: 0.7em;
	font-weight: bold;
	font-size: 80%;
}


/* 注意事項 ============================= */
.atten-all {
	margin: 0 0 2em 0;
	float: left;
	color: #333;
	background-color: #fafafa;
	font-size: 100%;
	font-weight: normal;
	width: 100%;
}

.atten-all .tyuki{
	/*width: 92%;*/
	margin: 0em 2% 1em 2%;
padding: 2%;
color: #ec0056;
font-size: 80%;
}
.atten-all .tyuki2{
	/*width: 92%;*/
	margin: 0em 2% 1em 2%;
font-size: 80%;
}



.atten-all .atten-eria{
    width: 82%;
    margin: 0.5em 1.9% 0 1.9%;
    padding: 1% 6% 1% 7%;
    border: 1px solid #ccc;
    background-color: #fff;
}



.atten-all h3{
	color: #ec0056;
	font-weight: bold;
	text-align: center;
	font-size: 1.1em;
	margin-top: 1em;
}



.atten-all h4{
	color: #333;
	font-weight: bold;
	text-align: center;
	font-size: 1.1em;
	margin: 0.5em auto 1em;
}

.atten-all p{
	color: #333;
	text-align: left;
	font-size: 90%;
	margin-top: 1.2em;

}

.atten-all p.kizitsu{
	color: #333;
	text-align: right;
	font-size: 80%;
	margin-top: 1.2em;

}

.atten-all ul {
	text-align: left;
	font-size: 83%;
	margin-top:1em;
	text-indent: -5%;
	font-weight: bold;
}


.atten-all ul li {
	font-size: 90%;
	line-height: 1.4;
	padding: 0 0 0 0;
	/*list-style-type: none!important;*/
	list-style-type: decimal;
	text-align: left;
	text-indent: 0em;
	font-weight: normal;
}


.atten-all ul li ul {
	line-height: 1.4;
	padding: 0.4em 0 0 0;
	/*list-style-type: none!important;*/
	list-style-type: decimal;
	text-align: left;
	text-indent: 0em;
	font-weight: normal;
}

.atten-all ul li ul li {
line-height: 1.4;
padding: 0 0 0.5em 0;
	/*list-style-type: none!important;*/
list-style-type: square;
text-align: left;
text-indent: 0em;
font-weight: normal;
font-size: 127%;
margin: 0 0 0 1em;
}



.atten-all ul li:last-of-type {
  border-bottom: none;
}




/* --- お問い合わせフォーム --- */
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}




/* ==FOOTER ================================ */
#footer-all  {
	margin: 0 auto 0 auto;
	padding:0;
	text-align: center;
	width: 100%;
	overflow: hidden;
}

.footer  {
	margin: 0 auto;
	text-align: center;
	background-color: #fff;
	width: 90%;
	border-top: 2px solid #ecf0f1;
	height: auto;
}

.footer .f-title {
	margin:0 auto 0;
	padding:5px;
	padding-bottom: 0;
}
.footer .f-title .f-text-box {
    margin: 1em 0 1em 0;
    background-size: 100%;
    font-size: 0.8em;
    font-weight: bold;
    color: #444444;
    text-align: left;
}
.footer .f-title #logo-box {
    width: 100%;
    padding: 0 0 1em;
    border-bottom: 2px solid #ecf0f1;
    overflow: hidden;
}
.footer .f-title #logo-box > img {
	float: left;
	width: 24.305%;
}


.footer .f-title .f-text {
	float: right;
	width: 70%;
    margin: 0;
    font-size: 0.65em;
    text-align: left;
}
.footer .service-text {
	padding: 1.0em 0 2.0em;
	font-weight: bold;
	font-size: 0.65em;
}
.footer .service-text span {
	font-size: 0.75em;
}




/* ==BTN ================================ */
.btnbox{
width: 100%;
text-align: center;
margin: 2em auto 0 auto;
float: left;
}




/* blue */
.button01 {
/*margin: -3em 10% 1em 10%;
width: 80%;*/
text-align: center;
font-size: 77%;
}



.button01 a {
    position: relative;
    display: inline-block;
    padding: 2% 0em 1.5%;
    background-color: #9d9d9d;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 1em;
    width: 100%;
    margin: 0 auto 0.5em auto;
    font-size: 119%;

}


/*
.button01 a:hover{
	background-color: #E70E65;
	transition: 0.6s ;
	color: #fff;
	text-decoration: none;
}

*/







/* blue */
.button02 {
margin: -3em 10% 1em 10%;
width: 80%;
text-align: center;
font-size: 77%;
}



.button02 a {
    position: relative;
    display: inline-block;
    padding: 2% 0em 1.5%;
    background-color: #9d9d9d;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 1em;
    width: 100%;
    margin: 0 auto 0.5em auto;
    font-size: 119%;

}


/*
.button01 a:hover{
	background-color: #E70E65;
	transition: 0.6s ;
	color: #fff;
	text-decoration: none;
}

*/











}