@charset "UTF-8";

.breadcrumbs{
    /* position: relative!important; */
}


.main-container{
    position: relative;
    overflow: hidden;
}

.contents-wrap{
    width: 100%;
    position: relative;
    padding: 0 20px;
    
}
.contents-inner{
    /* text-align: right; */
    width: 100%;
    max-width: 1000px;
    margin:-40px auto 30px;
    font-size: 1.5rem;
    letter-spacing: 0.01rem;
}
h1{
    font-size:3rem;
    font-weight:700;
    line-height:1;
    width: 100%;
    max-width: 1000px;
    background-color: #f7f7f7;
    background-image: url(../img/hexagon_back.png);
    background-repeat: repeat;
    background-size:  50px;
    padding: 30px 30px 35px;
    position: relative;
    z-index:-10;
    margin: 45px auto 80px ;
}

h2{
    color: #006b31;
    font-size: 1.8rem;
    font-weight:600;
    margin: 20px 0 0;
}

.m-content_list li{
    text-indent: -1.5em;
    padding-left: 1.5em;
    
}
.m-content_text, .m-content_list {
  margin-bottom: 25px;
}
.m-content_list li a{
    color: #009c00;
}

.m-content_list li a:hover{
    text-decoration: underline;
}
.u-ml20 {
  margin-left: 20px;
}
.u-cf {
  zoom: 1;
 }
.u-cf:after {
  content: "";
  display: block;
  clear: both;
  overflow: hidden;
}
.u-iblock {
  display: inline-block;
}
.u-fs_s {
  font-size: 0.75rem;
}
.u-fw_b {
  font-weight: bold;
}
.u-mb0 {
  margin-bottom: 0;
}
.u-mb7 {
  margin-bottom: 7px;
}
.u-mb15 {
  margin-bottom: 15px;
}
.u-ml20 {
  margin-left: 20px;
}
    
/*-------------------------------*/

/*@media screen and (min-width : 768px)

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

@media screen and (max-width : 768px) {
 
.main-visual-container{
     position: relative; 
    top:40px;
}

.hexagon{
    background-size:  30px;
}

.title-box{
    width: 90%;
    position: absolute;
    top:10px;
    padding:0 20px;
    left:50%;
    -webkit-transform: translateX(-50%); /* Safari用 */
    transform: translateX(-50%);
}    

    
}

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

/*@media screen and (min-width : 640px)

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

@media screen and (max-width : 640px) {
.title-box{
    width: 90%;
    position: absolute;
    top:-20px;
    padding:0 20px;

}   
    
.about_title{
    max-width:auto;
    width: 20%;
}

.contents-wrap{
    padding: 0 15px; 
}   

.se{
    display:none;
}
   
h1{
    font-size:2.8rem;
    margin: 0px auto 60px ;
    line-height:1.5;
}
    
}

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

/*@media screen and (min-width : 320px)

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

@media screen and (max-width : 320px) {
.se{
    display:block;
}

}



.contents-wrap-n{
    width: 100%;
    position: relative;
    margin-top: 110px;
    padding: 0 20px;
    
}



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

/*@media screen and (max-width : 640px)

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

@media screen and (max-width : 640px) {
.contents-wrap-n{
    padding: 0 15px;
}
}