@charset "UTF-8";
/* top_style.css		for JSGHP2017
	build  20170507
	update 20170523
	update 20171002
	update 20180527
	Copyright 2017-2018 Hishida,H. All rights reserved.
 ---------------------------------------------------------------------------- */
/*
* boxのbackground-color、140X140以外のbox size、iconの位置は、個別設定すること
*/
body{
/* 背景画像
 ---------------------------------------------------------------------------- */
  background-image: url("../top_bgi.jpg");		/* ブラウザ背景画像の設定 */
  background-repeat: no-repeat;			/*     背景画像の繰り返しなし */
  background-attachment: fixed;			/*     背景画像位置を固定 */
  -moz-background-size: cover;
  background-size: cover;			/*     縦横比は保持し、背景領域を完全に覆う最小サイズに設定 */
}

a{
  text-decoration: none;			/* リンクの下線を表示しない設定 */
}
img {
/*
  z-index: 0;
  margin: 0;
  padding: 0;
*/
}
img:hover {
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}
/*
.img_comment {
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  padding:10px;
  margin:0;
}
.img_comment a:hover {
  color:blue;
}
*/

/* JSGHP TopPage標準
 ---------------------------------------------------------------------------- */
.jsghp_box_shadow2{
  box-shadow: 2px 2px 2px rgba(0,0,0,0.3); /* シャドウ - 長さ2、濃さ3 */
}
.jsghp_box_shadow3{
  box-shadow: 3px 3px 3px rgba(0,0,0,0.3); /* シャドウ - 長さ3、濃さ3 */
}
.jsghp_box_shadow4{
  box-shadow: 4px 4px 4px rgba(0,0,0,0.3); /* シャドウ - 長さ4、濃さ3 */
}
.jsghp_box_shadow5{
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3); /* シャドウ - 長さ5、濃さ3 */
}
.jsghp_filter_alpha{
  filter:alpha(opacity=85);   /* 透過 */
  -moz-opacity:0.85;
  -khtml-opacity: 0.85;
  opacity:0.85;
}

/* .box共通&標準値
 ---------------------------------------------------------------------------- */
.box{
  position: relative;
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 20px 20px 0;
/* background-color: transparent; */
  float: left;				/* 左に配置 */
}
.box p{
  padding: 10px 0px 0px 10px;
  font-size: x-small;		/* 文字サイズ - 極小 */
}

/* .box_type01の設定
 -------------------------------------------------- */
.box_type01, .box_type01 a{
  display: block;
  width: 150px;
  height: 70px;
}
.box_type01 li{
  list-style:none;
  word-break: break-all;	/* 単語の途中で改行 */
  float: left;
}
.box_type01 .li01{}
.box_type01 .li01 a{
  background-image: url("../image/box00_li01_icon.png?20180623");
  background-repeat: no-repeat;
  background-position: 5px 50%;
}
.box_type01 .li02{}
.box_type01 .li02 a{
  background-image: url("../image/box00_li02_bkimg.png?20180623");
  background-repeat: no-repeat;
  background-position: 5px 50%;
}
.box_type01 .li03{}
.box_type01 .li03 a{}
.box_type01 .li04{}
.box_type01 .li04 a{}

/* .box_type02の設定
 -------------------------------------------------- */
.box_type02, .box_type02 a{
  display: block;
  width: 140px;
  height: 140px;
}
.box_type02 .box_title{		/** タイトル **/
  font-size: small;
}
.box_type02 .box_icon{		/** アイコン **/
  position: absolute;
}
.box_type02 .box_remark{	/** 説明文 **/
  position: absolute;
  font-size:x-small;
}

/* .box_type03の設定
 -------------------------------------------------- */
.box_type03{
  display: block;
  width: 300px;
  height: 140px;
}
.box_type03 .box_title{		/** タイトル **/
 font-size:small;
}
.box_type03 .box_topic{     /** トピックorUpdate **/
  font-size: x-small;
  margin: 3px 10px 0px 10px;
  padding: 0;                   /* boxのpaddingをクリア */
  text-align: justify;			/* 両端揃え */
  text-justify: inter-ideograph;	/* for IE */
  white-space: nowrap;			/* 改行させない */
  overflow: hidden;			    /* はみ出しを非表示 */
  -moz-text-overflow: ellipsis;	/* 「…」Firefox */
  -o-text-overflow: ellipsis;	/* 「…」Opera */
  text-overflow: ellipsis;		/* 「…」 */
  line-height: 1.3;			    /* 6行 */
}

/* .box_type04の設定
 -------------------------------------------------- */
.box_type04{}

/* .box_type05の設定
 -------------------------------------------------- */
.box_type05{
  width: 300px;
  height: 140px;
}
.box_type05 li{
  list-style: none;
  word-break: break-all;
  float: left;
}
.box_type05 .li01{
  width: 160px;
  height: 140px;
}
.box_type05 .box_date, .box_type05 .box_title, .box_type05 .box_remark{
  padding: 0 0 0 10px;
  top: 50%;					/* ここから4行で上下中央 */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;			/* 文字サイズ - 中 */
}
.box_type05 .box_title{		/** タイトル **/
  position: relative;
  font-weight: 700;			/* 太字 */
}
.box_type05 .box_date{		/** 開催日 **/
  position: absolute;
  top: calc(50% - 24px);
  font-size: x-small;		/* 文字サイズ - 極小 */
}
.box_type05 .box_remark{	/** 説明文 **/
  position: absolute;
  top: calc(50% + 20px);
  font-size: x-small;		/* 文字サイズ - 極小 */
}

/* .box_type06の設定
 -------------------------------------------------- */
.box_type06, .box_type06 a{
  display: block;
  width: 300px;
  height: 140px;
}
.box_type06 .box_title{		/** タイトル **/
  font-size:small;
}
.box_type02 .box_remark{	/** 説明文 **/
  font-size:x-small;
}

/* .box_type07の設定
 -------------------------------------------------- */
.box_type07, .box_type07 a{
  display: block;
  width: 140px;
  height: 128px;
}
.box_type07{
  border-top: solid #8DC440;	/* 枠線上（実線、緑色） */
  border-top-width: 12px;		/* 枠線上（太さ12px） */
  height: 128px;				/* box高さ */
}
.box_type07 .box_title{		/** タイトル **/
  font-size:small;
}
.box_type07 .box_icon{		/** アイコン **/
  position: absolute;
  top: 30px;
  left: 5px;
}
.box_type07 .box_remark{	/** 説明文 **/
  position: absolute;
  font-size: x-small;
}

/* .box_type08の設定
 -------------------------------------------------- */
.box_type08 li, .box_type08 a{
  display: block;
  width: 140px;
  height: 70px;
}
.box_type08 li{
  list-style: none;
  word-break: break-all;
}
.box_type08 .box_title{		/** タイトル **/
  font-size:small;
}
.box_type08 .box_remark{	/** 説明文 **/
  font-size: x-small;
}

/* .box_type09の設定
 -------------------------------------------------- */
.box_type09 p{				/* タイトルをbox中央に配置 */
  position: relative;
  margin: 0;
  padding: 0;
  top: 50%;					/* ここから4行で上下中央 */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;			/* ここで左右中央 */
}
.box_type09 li, .box_type09 a{
  display: block;
  width: 140px;
  height: 46.666px;
}
.box_type09 li{
  list-style:none;
}
.box_type09 .box_title{		/** タイトル **/
  font-size:small;
}

/* .box_type10の設定
 -------------------------------------------------- */
.box_type10{
  font-size: 80%;			/* 文字サイズ（80%に縮小） */
}
.box_type10 p{				/* タイトルをbox中央に配置 */
  position: relative;
  margin: 0;
  padding: 0;
  top: 50%;					/* ここから4行で上下中央 */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;		/* ここで左右中央 */
}
.box_type10 li, .box_type10 a{
  display: block;
  width: 70px;
  height: 70px;
}
.box_type10 li{
  list-style:none;
  word-break: break-all;
  float: left;
}

@media screen and (min-width: 340px) {
  .container {
    width: 303px;/*750px*/
    margin: 0 auto;
  }
}
@media screen and (min-width: 660px) {
  .container {
    width: 623px;/*750px*/
    margin: 0 auto;
  }
}
@media screen and (min-width: 980px) {
  .container {
    width: 943px;/*970px*/
    margin: 0 auto;
  }
}
@media screen and (min-width: 1320px) {
  .container {
    width: 1263px;/*1170px*/
    margin: 0 auto;
  }
}
/* #box00の設定
 -------------------------------------------------- */

/* #boxの個別設定
 ---------------------------------------------------------------------------- */
#box00{
  width: 300px;
  height: 140px;
}

#box01 .box_icon{
  top: 30px;
  left: 6px;
}
#box01 .box_remark{
  top: 80px;
}

#box03 .box_icon{
  top: 28px;
  left: 4px;
}

#box07{
  background-image: url("../image/box07_bkimg.png");
}
#box08 .box_icon{
  top: 25px;
  left: 6px;
}
#box08 .box_bkimg{
  width: 18px;
  height: 34px;
}
#box08 .box_remark{
  top: 70px;
}

#box10 .box_title{
  line-height:1.0;
}

#box11 .box_icon{
  top: 38px;
  left: 0px;
}
#box15 .box_icon{
  padding: 5px 0 0 10px;
}
#box18 .li02 .box_bkimg{
  padding-top: 4px ;
}
#box19 .box_icon{
  top: 25px;
  left: 6px;
}
#box19 .box_remark{
  top: 70px;
}
#box20 .box_title span{
  font-size: 20px;
  font-weight: 800;
  line-height:1.0;
}
#box20 .box_remark{
  padding-right: 18px;
  font-size: 16px;
  font-weight: 800;
  text-align: right;
}
#box21 .box_title span{
  font-size: 14px;
  font-weight: 800;
  line-height:1.0;
}
#box21 .box_remark{
  padding-right: 18px;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

#box81{
  width: 300px;
  height: 140px;
}
#box83 {
  display: none;
}

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