@charset "UTF-8";
/* CSS Document */

html,body {
	max-width: 100%;
	text-align: center;
} 
  
body,td,th {
	font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size: 14px;
	line-height:2.35;
	color: #666666;
}

.midashi {
	font-family:"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 28px;
	line-height:1.45;	
	letter-spacing: 2.3px;
	font-weight:nomal;
	color: #000000;
	text-align:center;
}

.top_part {
	font-size: 14px;
	line-height:2.05;
	color: #666666;
	text-align:center;
}

.midashi2 {
	font-family:"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 26px;
	line-height:1.45;		
	letter-spacing: 2.3px;
	font-weight:nomal;
	color: #000000;
	text-align:left;
}

.midashi3 {
	font-family:"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 20px;
	line-height:1.05;		
	letter-spacing: 2.3px;
	font-weight:nomal;
	color: #000000;
	text-align:left;
}

.textarea{
	width:63%;
	margin-left:18.5%;
	margin-right:18.5%;
	text-align:left;
	line-height:1.85;
	color: #666666;
}


.cap3{
	text-align: justify;
	text-justify: distribute-all-lines; 
	font-size: 13px;
	text-align:left;
	line-height:1.85;
	color: #666666;
}


.itemcap {
  background-color:none;
  border:none;
  font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-size: 13px;
  line-height:1.85;
  font-weight:nomal;
  padding:3%;
  color: #666666;
  text-align:left;
 }
 
 .itemtitle {
  font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-size: 14px;
  line-height:1.85;
  font-weight:midium;
  color: #666666;
  text-align:left;
 }



.topimg {
	text-align: center;
}

.tac {
	text-align: center;
}

.tal {
	text-align: left;
}

.mt1 {
	margin-top:1%;
}

.mt3 {
	margin-top:3%;
}

.mt5 {
	margin-top:5%;
}

.mb1 {
	margin-bottom:1%;
}

.mb3 {
	margin-bottom:3%;
}

.mt10 {
	margin-top:10%;
}

.mt15 {
	margin-top:15%;
}

.mt20 {
	margin-top:20%;
}

.ml1 {
	margin-left:1%;
}

.ml8 {
	margin-left:8%;
}

.ml33 {
	margin-left:33%;
}

.mr33 {
	margin-right:33%;
}

.mtm6 {
	margin-top:-6.8%;
}

.mb10 {
	margin-bottom:10%;
}

.mb20 {
	margin-bottom:20%;
}


.mb30 {
	margin-bottom:30%;
}


.mbm5 {
	margin-bottom:-5%;
}


.ml13 {
	margin-left:13.3%;
}

.ml3 {
	margin-left:-3%;
}



* {
	margin: 0;
	padding: 0;
}

.itemarea {
    background: #f0f4ff;
	padding:3% 0 0 0 ;

}

.item {
	width:90%;
	margin:5% 0 0 5%;
	padding:0 auto;
	text-align: center;
}



ul{
	width:100%; 
	margin:10% auto;
	height:100%;/*指定しないとul:afterで【padding】のように下が広がる*/
	letter-spacing: -.40em;/* 文字間を詰めて隙間を削除する。 */
	text-align: justify;
	text-justify: distribute-all-lines; 
}
ul:after {
	content:"";
	display: inline-block;
	width: 100%;
	line-height:0;
	height: 0;
} 

li{
	letter-spacing:normal;
	display: inline-block;/*ブロックレベル要素に横並びにする*/
	width:22.5%;
	padding:1%;
	height:auto;
	line-height: 1.75;
	text-align: center;
	vertical-align:top;
}

ol{
	text-align: left;
}



ul.menu2 {
	display: table; /* tableプロパティ指定 */
    margin: 10% auto !important;
    padding: 0 !important;
    border: none!important;
    width: 87%;
}

ul.menu2 li {
    display: table-cell;  /* 子要素にtable-cell指定 */
	width:18.5%;
	height:auto;
	padding:1%;
}


.journal {
	text-align: center;
	padding:0 auto;
}


ul.journal {
	width:50%;
	margin-bottom:10%;
	padding:2%;
	text-align: center;	
    border: dashed 1px!important;
}


ul.journal li {
	text-align: left;
	width:48%;
}




.snaparea {
  width: 80%;
  text-align:center;
}

ul.snaparea li {
  padding:0 2%;
  border:none;
  display: inline-block;  
  width: 45%;
  vertical-align:top;
}

ul.snaparea li ol {
  width: 100%;
  text-align: left;
  font-size:12px;
}



.styling2 {
	width:83%;
	margin:0 0 0 8%;
	padding:0 auto;
	text-align: center;
}


ul.styling2 li {
  padding:0 2%;
  border:none;
  display: inline-block;  
  width: 28%;
  vertical-align:top;
}





/*スマホ*/

.topsp {
	margin-top:-5%;
}


.midashisp {
	font-family:"ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
	font-size: 16px;
	line-height:1.35;
	text-align:center;
	font-weight:nomal;
	color: #000000;
}


.midashi2sp {
	font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size: 14px;
	width:90%;
	float:left;
	text-align:left;
	margin-left:5%;
	margin-bottom:10%;
	line-height:1.45;
	font-weight:nomal;
	color: #666666;
}


.itemareasp {
    background: #f0f4ff;
	margin-top:100px;
	padding:2% 0 0 0 ;
}

ul.itemsp {
	width:100%;
	text-align: center;
	
}

ul.itemsp li{
	letter-spacing:normal;
	display: inline-block;/*ブロックレベル要素に横並びにする*/
	width:30%;
	padding:1%;
	text-align: center;
}


.journalsp {
    border: dashed 1px!important;
}




.capsp {
	font-family:"Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	font-size: 12px;
	width:90%;
	line-height:1.75;
	text-align:left;
	color: #666666;
	margin-left:5%;
}



/*動かす系*/

.fade-in {
  transition: opacity 0.8s;
  -moz-transition: opacity 0.8s;
  -webkit-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
}


.line {
  position: relative;
  display: inline-block;
  font-size: 1.6em;
}

.line:before{
  position: absolute;
  top: 2.8em;
  left: 0;
  content: "";
  display: inline-block;
  width: 0;
  height: 1.6px;
  background: #9b8b71;
  transition: 2s;
}

.line:hover:before{
  width: 100%;
}
