@charset "utf-8";
/*------------------------------------------------------------
●pc.css 画面の横幅が751〜pxから
------------------------------------------------------------*/
/*@media screen and (min-width: 751px)   { */


.pc {display: block;}
.sp{display: none;}



#container {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%;
	background-color: #fff;
	clear: both;
}


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

#head{
	margin: 0;
	padding:0;
	float:left;
	width:100%;
	clear: both;
}

#head .title{
	margin: 0 auto 0.6em auto;
	color: #333;
	background-color: #fff;
	font-size: 0.95em;
	font-weight: normal;
	width: 100%;
	max-width: 950px;
}


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

/* logo  ============================= */
#head .title #logo-box,
#head .title #logo-box a　{
	float:left;
	margin: 1em 0 0 1.5em;
	background-size: 100%;
	width: 13%;
	color: #005bac;
	}



#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;
line-height: 1;
text-decoration: none;
text-align: left;
width: 36%;
margin-left: 38%;
}


#head .title #tel-box .phone{
position: relative;
top: 0.5em;
left: 0%;
font-size: 160%;
width: 100%;
text-indent: 1em;
text-decoration: none;
}


#head .title #tel-box .phone:before{
/*content: '●';*/
content: url(../img/common/ic_tel_w.png);
margin: 0;
position: absolute;
top: 0em;
left: -1.6em;
}


#head .title #tel-box .phone a{
text-indent: 1em;
text-decoration: none;
color: #0099F2;

}


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


/* ==HEAD ハンバーガーMENU ===================== */
/*ヘッダーまわりはサイトに合わせて調整してください*/
.header {
  padding:10px;
  /*background: #f7f7f7;*/
  background: linear-gradient(to top, #10d7f1, #6b8aff);
  width: 2em;
  height: 2em;
  margin: 0.5em 2% 0.5em 1%;
  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: 2em;
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
  margin-top: 0.2em;
}

#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: 330px;
  height: 100%;
  /*background: rgba(4, 176, 233, 0.3);*/
  background-color:rgba(0,153,255,0.1);

  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.8em 0 0.8em 0;margin: 0;
border-top: 2px solid #cce9fa;
width: 100%;
background-color: #005bac;
font-weight: bold;
font-size: 115%;
}


#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;
margin: 0;
width: 93%;
background-color: #cce9fa;
padding: 0.7em 2% 0.7em 5%;
border-top: 2px solid #fff;
font-weight: bold;
font-size: 115%;
text-align: left;
}




#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 2% 0.8em 5%;
margin: 0;
border-top: 1px solid #cce9fa;
width: 100%;
background-color: #fff;
font-size: 90%;
font-weight: normal;
text-align: left;
position: relative;
}


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





#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-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);
}




/* GN  ============================= */
#head #globalnavi {
width: 100%;
float: left;
margin: 0em 0em 0 0;
background-color: #003d96;
}


#head #globalnavi ul{
float: left;
width: 100%;
list-style-type: none;
margin-bottom: 0em;
border-bottom: 1px solid #ffffff;

display: flex;
align-items: center;
padding: 0.8em 0 0.7em;
}


#head #globalnavi li{
  width: 50%;
  font-size: 1.1em;
  text-align: center;
}


#head #globalnavi a{
  text-align: center;
  display:block;
  padding: 0.2em 0 0.3em 0;
  width: 100%;
  color: #fff;
  font-weight: bold;
  display: block;
  vertical-align: middle;
  text-decoration: none;

      -webkit-transition: 0.3s ease-in-out;
      -moz-transition: 0.3s ease-in-out;
      -o-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
}


#head #globalnavi a:hover{
text-decoration: none;
color: #FFD00D;
}

#head #globalnavi li.tyumon a{color: #FFD00D;}
#head #globalnavi li.tyumon a:hover{text-decoration: none;color: #ff7a00;}



/* ======================================== */
/* ==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: 1.8em;
	color: #fff;
	margin:0;
	padding-top: 3.5%;
	padding-bottom: 0.8%;
	position: relative;
  display: inline-block;
}

#main .main-title h1:before {
	content: '';
  display: inline-block;
  position: absolute;
  width: 27%;
  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: -26%;
  top: 27%;
}

#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: 50%;
	margin: 1.5em 25% 3em;
	float: left;
  padding:1em 0 0.7em 0;
  color: #0b308e;
  font-size: 1.5em;
  text-shadow:0px 1px 3px #ffffff;
  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 1% 0;
	width: 30%;
	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:100%;
	text-align: center;
	margin: 1em 5% 1em;
	line-height: 1.6;
	text-align: center;
	letter-spacing: 0.1em;
	}



#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: 121%;
	text-align: center;
	margin: 0;
	line-height: 1.6;
	text-align: center;
	width: 96%;
	float: left;
	padding: 2% 0.55%;
	letter-spacing: 0em;

	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 0 auto;

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

#main .material-all .material h2 {
	width: 50%;
	margin: 1.5em 25% 1em;
	float: left;
  padding:1em 0 0.7em 0;
  color: #0b308e;
  font-size: 1.5em;
  text-shadow:0px 1px 3px #ffffff;
  background-color: #fff;
  }


#main .material-all .material p {
color: #555555;
font-size: 105%;
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;
	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;
	*/
}




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

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

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

#main .kiyaku-all .kiyaku h2 {
	width: 50%;
	margin: 1.5em 25% 1em;
	float: left;
  padding:1em 0 0.7em 0;
  color: #0b308e;
  font-size: 1.5em;
  text-shadow:0px 1px 3px #ffffff;
  background-color: #fff;
  }


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



#main .kiyaku-all .kiyaku .list-eria {
	margin: 0 auto 3em;
	width: 100%;
	max-width: 950px;
	min-width: 750px;
	text-align: center;
	border:1px solid #ccc;
	padding: 2em 0 1em 0;
	position: relative;
}


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


}



#main .kiyaku-all .kiyaku .list-eria iframe {
height: 1000px; 
max-width: 950px; 
width: 100%; 
border: 0;
}

#main .kiyaku-all .kiyaku .list-eria iframe::-webkit-scrollbar {
    display: none;
  }

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

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


.topnews{
	font-size: 78%;	

	position: relative;
	text-align: center;
}



.topnews:before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 10%;
  min-height: 200px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url(../img/common/ic_topnews.png);
  background-position: left top;
  /*background-size: contain;*/
  vertical-align: middle;
  margin-right: 0.5em;
  left: 0;
}


.topnews ul{
	margin:0;
	padding-left: 3em;
	width: 100%;
	text-align: left;
	float: left;
}


.topnews ul li{
	font-size: 120%;
	width: 90%;
	margin:0 0 1em 10%;
	padding: 0%;
	text-indent: -1.5em;
	text-align: left;
}


.topnews ul li:before{
	content:"\0bb";
	padding-right: 1em;
}





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

.atten-all .tyuki{
	width: 84%;
	margin: 0.5em 9% 1em 9%;
	color: #ec0056;
	font-size: 90%;
}

.atten-all .atten-eria{
margin: 0 auto 1.6em auto;
max-width: 850px;
padding: 4%;
border: 1px solid #ccc;
height: 300px;
overflow-y: scroll;
}



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


.atten-all h4{
	color: #333;
	font-weight: bold;
	text-align: center;
	font-size: 1.1em;
	margin-bottom: 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: -1em;
	font-weight: bold;
}


.atten-all ul li {
	font-size: 90%;
	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 {
	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:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}




/* ==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: 78%;
	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: 1.3em;
    font-weight: bold;
    color: #444444;
    text-align: left;
}
.footer .f-title #logo-box {
    width: 100%;
    padding: 0 1em 2em;
    border-bottom: 2px solid #ecf0f1;
    overflow: hidden;
}

.footer .f-title #logo-box img {
    float: left;
    width: 24%;
}

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






/* ==BTN ================================ */
.btnbox{
width: 80%;
text-align: center;
margin: 0.5em auto 5em auto;
max-width: 700px;
}




/* blue */
.button01 {
margin: 2em 5% 1em 5%;
width: 90%;
text-align: center;
font-size: 1.2em;
max-width: 600px;
/*float: left;*/
}



.button01 a {
  position: relative;
  display: inline-block;
  padding: .3em 0em;
  background-color: #fff;
  border: 1px solid #9d9d9d;
  color: #444444;
  text-align: center;
  text-decoration: none;
  border-radius: 2em;
  width: 100%;

font-size: 80%;
float: left;
bottom: 1.25em;
}

.button01 a:hover{
	background-color: #fff;
  border: 1px solid #E70E65;
	transition: 0.6s ;
	color: #E70E65;
	text-decoration: none;
}




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



.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;
}

*/

















/*下からふわっとでてくる*/  
.fade-up {
  transition: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -webkit-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  transition: transform 0.8s;
  -moz-transition: transform 0.8s;
  -webkit-transition: transform 0.8s;
  -o-transition: transform 0.8s;
}