@charset "UTF-8";
/* CSS Document */

/************************************************************
	Clearfix
*************************************************************/
#wrapper:after { content:""; display: table; clear: both;}
#wrapper { zoom: 1;}
.clearfix:after { content: " "; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { display: inline-table; min-height: 1%;}
* html .clearfix { height: 1%;}
.clearfix { display: block;}



#container {
    width: 100%!important;
	margin:0 0 20px!important;
}

img{
    max-width: 100%;
    }


#about{
	color: #333;
	font-family: "游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	line-height: 1.8;
}
#about.list > section {
	width:950px;
	margin:0 auto;
}




/* タイトル */
#titleArea {
background:#FDF2F0;
background-image:url(https://www.nodahoney.com/contents/ex/img/default/about/main_bg_01.jpg);
background-repeat:no-repeat;
background-position:10% center;
background-size:cover;
	padding:30px 0 ;
	margin-bottom:80px;
height:300px;
width:100%;

}

#titleArea h1 {
	text-align:center;
	font-size:18px;
margin-top:150px;
color:#ffffff;
	font-weight:normal;
}


#about> article {
	width:820px;
	margin:0 auto;
}
#about> article > section {
	margin-bottom:100px;
}
#about> article > section.border {
	padding-bottom:60px;
	border-bottom:1px dashed #CCC;
}


#about> article > section > h2 {
	text-align:center;
}
#about> article > section h2 {
    width: 300px;
    font-size: 20px;
    background-color: #ffffff;
	padding:0.5em 1.5em;/*内側余白*/
	border:solid 1px #333;/*線の種類・太さ・色*/
	margin: 0 auto 4rem;
    letter-spacing: 0.12em;
}
#about> article > section table {
    margin: 0 auto;
    font-size: 16px;
    }
#about> article > section h3 ,
#about> article > section p {
	padding:10px 0  30px;
	margin:0;
}
@media only screen and (min-width: 768px) {
#about> article > section h3 ,
#about> article > section p {
font-size:17px;
}
}


#about> article > section h3 {
  padding: 1rem 2rem;
  border-left: 5px solid #000;
  background: #f4f4f4;
}

#about> article > section h3 span {
font-size:14px;
    margin-left: 2rem
}


#about> article > section p:last-child {
	padding:10px 0 30px;
	margin:0;
}

#about> article > section .bold {
		font-weight:bold;
	}
.textcenter {
text-align:center;
    line-height: 2.2
    }

.textright {
text-align:right;
    }


	 
.catch {
    font-family: "Noto Serif JP","Noto Serif SC",-apple-system,BlinkMacSystemFont,Roboto,serif;
	font-size: 30px;
	line-height: 1.8;
    letter-spacing: 0.12em;
    text-align: center;
background-color: #f5f5f5;
padding: 3rem;
    
    }
.catch2 {
    font-family: "Noto Serif JP","Noto Serif SC",-apple-system,BlinkMacSystemFont,Roboto,serif;
	font-size: 25px;
	line-height: 1.8;
    letter-spacing: 0.12em;
    text-align: center;
    
    }

p span{
    font-size: 24px;
    line-height: 1.6;
    letter-spacing: 0.12em;
color:#916f44;
font-weight:700;

     }

.pl-20{padding-left: 20px;
     }

.mb-40{margin-bottom: 60px;
     }


/* 会社概要テーブル */

#abouttable{
padding:4rem 1rem;
background-color: #f5f5f5
     ;}

#table_about{width: 600px
    }

#table_about tr {
  
}

#table_about th,
#table_about td {
  padding: 24px 0;
  border-bottom:1px solid #333  
}

#table_about th {
  width: 40%;
    text-align: left;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table_about th,
  #table_about td {
    width: 100%;
    display: block;
  }

  #table_about th {
    width: 100%;
  }

  #table_about td {
    padding-top: 0;
  }
}

/* 沿革 */
.timeline {
  list-style: none;
}
#abouttable > ul {
  margin: 0 auto;
}

.timeline > li {
  margin-bottom: 60px;
}

/* for Desktop */
@media ( min-width : 640px ){
  .timeline > li {
    overflow: hidden;
    margin: 0;
    position: relative;
  }
  .timeline-date {
    width: 110px;
    float: left;
    margin-top: 20px;
  }
  .timeline-content {
    width: 75%;
    float: left;
    border-left: 1px #222222 solid;
    padding-left: 30px;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #222222;
    position: absolute;
    left: 105px;
    top: 20px;
    border-radius: 100%;
  }
}

ruby {
  ruby-position: over;
}
ruby > rt  {
font-size: 50%;
letter-spacing: 0.1em;
}