@charset "UTF-8";
/* CSS Document */
*,
*:after,
*:before{
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
}

#svg-bg{
	position: absolute;
	bottom: -50px;
	height: 50px;
	left: 0;
	width: 100%;
}
/*PCの場合*/
.pc	{ display:inline!important; }
.mb	{ display:none!important; }
.mp { display:none; }

@media screen and (max-width: 768px) {
/*タブレット、スマホの場合*/
.pc	{ display:none!important; }
.mb { display:inline!important; }
    .mp { display:none; }

}
@media screen and (max-width: 420px) {
/*タブレット、スマホの場合*/
.pc	{ display:none!important; }
    .mb	{ display:none!important; }
.mp { display:inline!important; }
}

.footNavi {
	float: left;
}
  .footNavi ul {
    width: 180px;
    margin-right: auto;
    margin-left: auto;
    *zoom: 1;
    height: 40px; }
    .footNavi ul:before, .footNavi ul:after {
      display: table;
      content: "";
      line-height: 0; }
    .footNavi ul:after {
      clear: both; }
    .footNavi ul li {
      float: left;
      height: 40px;
      vertical-align: middle;
      text-align: center;
      overflow: hidden; }
      .footNavi ul li a:hover img {
        opacity: 0.6;
        filter: alpha(opacity=0.6);
        -ms-filter: "alpha( opacity=$alpha )"; }
      .footNavi ul li:last-child {
        ; }
      .footNavi ul li a {
        color: #333;
        text-decoration: none;
        display: block;
        font-weight: bold;
        text-align: center; }
        .footNavi ul li a:hover {
          background-color: rgba(255, 255, 255, 0.8); }

#page01{color: #424242;
    text-align: left;}



.maincontainer {
      width: 100%;
	margin-right: auto;
	margin-left: auto;
        margin-top: 0;
	margin-bottom: 0;

}

.contwidth {
      width: 90%;
	margin-right: auto;
	margin-left: auto;
    margin-top: 20px;
	margin-bottom: 10px;
    text-align: left;
}
.contwidth70 {
      width: 70%;
	margin-right: auto;
	margin-left: auto;
    margin-top: 0px;
	margin-bottom: 10px;
    text-align: left;
}

.titlewidth {
      width: 90%;
        height: 100%;
	margin-right: auto;
	margin-left: auto;
    
}

.graybox{
    clear: both;
        width: 100%;
    background: #e6e6e6;
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.graybox02{
    clear: both;
        width: 100%;
    background: #e6e6e6;
    margin-top: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 0px;
    border-top: solid 20px #00498f;
}
.nowcont {
      width: 90%;
	margin-right: auto;
	margin-left: auto;
    height: 70px;
    
}

.whitebox{
        width: 100%;
    background: #ffffff;
    padding: 40px;
    margin-top: 20px;
}
.whitebox02{
        width: 100%;
    background: #ffffff;
    padding:20px 50px 20px 50px ;
    margin-top: 20px;
    border-radius: 20px;
}

.contwrapper {
    width: 100%;
  overflow: hidden;
    margin-bottom: 15px;
}
.layout001 {
  float: left;
   width: 350px;
   text-align: left;
}
.layout002 {
  float: right;
      width: 100%;
  margin-left: -370px;
  padding-left: 370px;
    padding-top: 20px;
  box-sizing: border-box;
   text-align: right;
    vertical-align: middle;
}

.layout01 {
  float: left;
   width: 470px;
   text-align: left;
}
.layout02 {
  float: right;
      width: 100%;
  margin-left: -480px;
  padding-left: 480px;
  box-sizing: border-box;
   text-align: left;

}
.layout03 {
  float: left;
   width: 120px;
   text-align: left;
}
.layout04 {
  float: right;
      width: 100%;
  margin-left: -130px;
  padding-left: 130px;
  box-sizing: border-box;
   text-align: left;

}
.layout05 {
    float: left;
    width: 550px;
    text-align: left;
}
.layout06 {
    float: right;
    width: 100%;
    margin-left: -550px;
    padding-left: 550px;
    box-sizing: border-box;
}
.layout07 {
  float: left;
   width: 86px;
   text-align: left;
}
.layout08 {
  float: left;
      width: 700px;
  margin-left: -100px;
  padding-left: 100px;
  box-sizing: border-box;
   text-align: left;

}
.pbox{
    width: 100%;
       text-align: center;
}
.layoutpbox {
  float: left;
   width: 25%;
   text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
}
.layoutpbox02 {
  float: left;
   width: 25%;
   text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}
.layoutpbox02p {
  float: left;
   width: 50%;
   text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}

.layoutpbox03 {
   width: 50%;
    display: block;
margin-left: auto;
margin-right: auto;
}
.layoutpbox04 {
  float: left;
   width: 33.3%;
   text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 20px;
}
.txtbox04 {
   text-align: left;
    width: 100%;
margin-top: 10px;
    margin-bottom: 20px;
}

.pbox02{
    width: 70%;
       text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.layoutpboxleft {
  float: left;
   width: 280px;
   text-align: left;
        margin-bottom: 20px;

}
.layoutpboxright {
  float: right;
      width: 100%;
  margin-left: -320px;
  padding-left: 320px;
  box-sizing: border-box;
   text-align: left;

}
.layoutpbox05 {
   width: 50%;
   text-align: center;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.layoutpbox06 {
  float: left;
   width: 30%;
   text-align: center;
        padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}
.layoutpbox06b {
    height: 300px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
  float: left;
   width: 5%;
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}
.layoutpbox07 {
  float: left;
   width: 50%;
   text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 20px;
}
.layoutpbox08 {
  float: left;
   width: 47%;
   text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 20px;
}
.layoutpbox08b {
    height: 100%;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
  float: left;
   width: 6%;
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}
.layoutpbox09 {
  float: left;
   width: 33%;
   text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}
.ti01 {
    height: 60px;
        width: 100%;
    margin-top: 0px;
    margin-bottom: 30px;
        background-image: url("../image/ti01.jpg")

}
.workshop {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
@media only screen and (max-width: 768px) {

    .layout001 {
  float: none;
   width: 300px;
   text-align: center;
    margin-left: auto;
        margin-right: auto;
}
.layout002 {
  float: none;
      width: 100%;
    margin-top: 5px;
  margin-left: 0px;
  padding-left: 0px;
  box-sizing: border-box;
   text-align: center;
    padding-top: 0px;

}

    .layout01 {
  float: none;
   width: 360px;
   text-align: center;
    margin-left: auto;
        margin-right: auto;
}
.layout02 {
  float: none;
      width: 100%;
    margin-top: 10px;
  margin-left: 0px;
  padding-left: 0px;
  box-sizing: border-box;
   text-align: left;

}
.layout03 {
  float: left;
   width: 100px;
   text-align: left;
}
.layout04 {
  float: right;
      width: 100%;
  margin-left: -130px;
  padding-left: 130px;
  box-sizing: border-box;
   text-align: left;

}
    .layout05 {
  float: none;
   width: 300px;
   text-align: center;
   margin-left: auto;
   margin-right: auto;

}
.layout06 {
  float: none;
      width: 100%;
    margin-top: 10px;
  margin-left: 0px;
  padding-left: 0px;
  box-sizing: border-box;
   text-align: left;
}
.layout07 {
  float: left;
   width: 50px;
    margin-right: 10px;
   text-align: left;
}
    .layout08 {
  float: none;
      width: 100%;
  margin-left: auto;
        margin-right: auto;
  box-sizing: border-box;
   text-align: left;
line-height: 70px;
}

.footwrapper {
    clear: both;
    width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.copywrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.circle{
  display: inline-block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #00498f;
  line-height: 90px;
    font-size: 21px;
        font-family: "Folk Medium";
    color: #ffffff;
    text-align: center;
}
.layoutpbox {
  float: left;
   width: 33%;
   text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
}
.layoutpbox02 {
  float: left;
   width: 33%;
   text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.layoutpbox02p {
  float: left;
   width: 50%;
   text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}

.layoutpbox03 {
   width: 50%;
    display: block;
margin-left: auto;
margin-right: auto;
}
.pbox02{
    width: 90%;
       text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.layoutpboxleft {
  float: left;
   width: 200px;
   text-align: left;
        margin-bottom: 20px;

}
.layoutpboxright {
  float: right;
      width: 100%;
  margin-left: -220px;
  padding-left: 220px;
  box-sizing: border-box;
   text-align: left;

}
.layoutpbox04 {
  float: left;
   width: 50%;
   text-align: center;
    padding-left: 4px;
    padding-right: 4px;
    margin-bottom: 20px;
}
.layoutpbox05 {
   width: 100%;
   text-align: center;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}
.layoutpbox06 {
  float: none;
   width: 60%;
   text-align: center;
        padding-left: 0px;
    padding-right: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
}
.layoutpbox06b {
    height: 40px;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
  float: left;
   width: 100%;
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}
    .layoutpbox07 {
  float: left;
   width: 100%;
   text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 20px;
}
    .layoutpbox08 {
  float: left;
   width: 100%;
   text-align: center;
    padding-left: 12px;
    padding-right: 12px;
    margin-bottom: 20px;
}
.whitebox02{
        width: 100%;
    background: #ffffff;
    padding:20px;
    margin-top: 20px;
    border-radius: 20px;
       text-align: left;

}

.ti01 {
    height: 40px;
        width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
        background-image: url("../image/ti01.jpg")

}

}
@media only screen and (max-width: 420px) {

.layout03 {
   width: 100%;
   text-align: center;
    margin-top: 15px;
}
.layout04 {
      width: 100%;
  margin-left: 0px;
  padding-left: 0px;
  box-sizing: border-box;
   text-align: left;

}
.layout07 {
  float: left;
   width: 40px;
    margin-right: 10px;
   text-align: left;
}
    .layout08 {
  float: none;
      width: 100%;
  margin-left: auto;
        margin-right: auto;
  padding-left: 0px;
  box-sizing: border-box;
   text-align: left;
line-height: 30px;
}

.footwrapper {
    clear: both;
    width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.copywrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.circle{
  display: inline-block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #00498f;
  line-height: 90px;
    font-size: 21px;
        font-family: "Folk Medium";
    color: #ffffff;
    text-align: center;
}
.layoutpbox {
  float: left;
   width: 50%;
   text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
}
.layoutpbox02 {
  float: left;
   width: 50%;
   text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.layoutpbox02p {
  float: left;
   width: 50%;
   text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}

.layoutpbox03 {
   width: 100%;
    display: block;
margin-left: auto;
margin-right: auto;
}
.pbox02{
    width: 80%;
       text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.layoutpboxleft {
  float: none;
   width: 160px;
   text-align: center;
        margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;

}
.layoutpboxright {
  float: none;
      width: 100%;
  margin-left: 0px;
  padding-left: 0px;
  box-sizing: border-box;
   text-align: left;
        margin-bottom: 20px;

}
.layoutpbox04 {
  float: left;
   width: 100%;
   text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 20px;
}
.whitebox{
        width: 100%;
    background: #ffffff;
    padding:20px;
    margin-top: 20px;
}

.layoutpbox09 {
  float: none;
   width: 100%;
   text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 20px;
}
    .ti01 {
    height: 40px;
        width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
        background-image: url("../image/ti01.jpg")

}


}


.subbanners {
			width: 197px;
     margin-left:0px;
		float: left;
	}
.subbanners a:hover img {
      opacity: 0.6;
      filter: alpha(opacity=0.6);
      -ms-filter: "alpha( opacity=$alpha )"; }