@charset "UTF-8";
/*--------------------------------------------------------------------------
	◆jn_image	メイン部分
--------------------------------------------------------------------------*/
/*--大枠--*/
#jn_image { width: 100%; position: relative; overflow: hidden; border-bottom: 1px solid #ddd; }
#jn_image img { vertical-align: bottom; }
#jn_image #img_list { width: 100%; overflow: hidden; z-index: 5000; background: url(../img/loading.gif) center center no-repeat; }
#jn_image.loaded #img_list { background: none; }

/*--表示画像--*/
#jn_image #img_list > div { position: absolute; width: 100%; top: 0; opacity: 0; transition-property: opacity; transition-duration: 1s; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; }
#jn_image #img_list > div img { position: absolute; }
#jn_image #img_list div.active { opacity: 1; transition-duration: 1s; -webkit-transition-duration: 1s; }
#jn_image #img_list div img { position: absolute; bottom: 0; }

/*--------------------------------------------------------------------------
	◆jn_image	メイン部分　※カスタマイズ追加分
--------------------------------------------------------------------------*/
/*画像上にコピー画像を追加する moto*/
#jn_image #img_list > div p.c_copy { margin: auto; position: absolute; z-index: 6001; top: 0; right: 0; bottom: 0; left: 0; width: 100%; text-align: center; }
#jn_image #img_list > div p.c_copy img { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; position: inherit; vertical-align: middle; width: auto !important; height: auto !important; }

/*画像上にコピー画像を追加する コピー別*/
#jn_image #img_list > div p.c_copy { height: 130px; /*配置画像の最大の高さ*/ line-height: 130px; /*配置画像の最大の高さ*/ /* background: rgba(255,255,255,0.7); */ /* 参考 --> https://www.granfairs.com/blog/staff/centering-by-css */ }
#jn_image #img_list > div p.c_copy.com1 { top: auto; right: auto; bottom: auto; left: auto; height: auto; line-height: 100%; text-align: left; }
#jn_image #img_list > div p.c_copy.com1 > span { margin: 100px auto 0 auto; padding: 0 20px; display: block; width: 100%; color: #3692b5; font-size: 32px; font-weight: 400; max-width: 840px; letter-spacing: 0.2em; text-shadow: 1px 1px 6px #fff, -1px 1px 6px #fff, 1px -1px 6px #fff, -1px -1px 6px #fff; }

/*--------------------------------------------------------------------------
	◆jn_image	メイン部分・スマートフォン版　※カスタマイズ追加分
--------------------------------------------------------------------------*/
@media screen and (max-width: 768px) { /*画像上にコピー画像を追加する コピー別*/
  #jn_image #img_list > div p.c_copy.com1 > span { margin: 50px auto 0 auto; font-size: 24px; max-width: 600px; } }
/*768px*/
@media screen and (max-width: 640px) { /*画像上にコピー画像を追加する コピー別*/
  #jn_image #img_list > div p.c_copy.com1 > span { margin: 40px auto 0 auto; font-size: 22px; } }
/*640px*/
/*--------------------------------------------------------------------------
	◆装飾・PC版
--------------------------------------------------------------------------*/
/*--前後送り--*/
#jn_image #img_control { position: absolute; width: 100%; top: 50%; z-index: 5002; }
#jn_image #img_control div { position: absolute; top: 0; width: 70px; height: 70px; margin-top: -35px; padding: 23px 0 0; text-align: center; background-color: rgba(255, 255, 255, 0.5); }
#jn_image #img_control div:hover { cursor: pointer; color: #fff; background: #aaa; }
#jn_image #img_control div img { vertical-align: middle; }
#jn_image #img_control .jn_prev { left: 0; }
#jn_image #img_control .jn_next { right: 0; }

/*--サムネイル--*/
#jn_image #img_thumbnail { position: absolute; width: 100%; bottom: 20px; left: 30px; text-align: left; letter-spacing: 0.5em; z-index: 5002; }
#jn_image #img_thumbnail div { display: inline-block; position: relative; width: 30px; height: 3px; background: #fff; }
#jn_image #img_thumbnail div.active { background: #222; }
#jn_image #img_thumbnail div:hover { cursor: pointer; background: #222; }

/*--------------------------------------------------------------------------
	◆装飾・PC版　※カスタマイズ追加分
--------------------------------------------------------------------------*/
/*--ロゴ--*/
#jn_image #fix_logo { position: absolute; width: 235px; left: 50px; top: 50%; z-index: 5002; }
#jn_image #fix_logo img { width: 100%; }

/*--スクロール--*/
#jn_image #img_scroll { position: absolute; left: 50%; bottom: 20px; width: 50px; height: 50px; margin-left: -25px; padding: 0; color: #333; opacity: 1; text-align: center; z-index: 5003; background: #fff; border-radius: 25px; transition-property: opacity; transition-duration: 0.5s; -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; }
#jn_image #img_scroll:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.6); }
#jn_image #img_scroll.active { opacity: 0; }
#jn_image #img_scroll.active:hover { cursor: default; }

/*--------------------------------------------------------------------------
	◆装飾・スマートフォン版
--------------------------------------------------------------------------*/
@media screen and (max-width: 768px) { /*--前後送り--*/
  #jn_image #img_control div { width: 40px; height: 40px; margin-top: -20px; padding: 8px 0 0; }
  /*--サムネイル--*/
  #jn_image #img_thumbnail { bottom: 10px; left: 15px; }
  #jn_image #img_thumbnail div { width: 15px; height: 5px; } }
/*768px*/
/*--------------------------------------------------------------------------
	◆装飾・スマートフォン版　※カスタマイズ追加分
--------------------------------------------------------------------------*/
@media screen and (max-width: 768px) { /*--ロゴ--*/
  #jn_image #fix_logo { left: 35%; top: 40%; width: 275px; } }
/*768px*/

/*# sourceMappingURL=jn_image.css.map */