@charset "utf-8";

/* ===================================================================
CSS information

 file name  :style.css
 author     :yourName (admin)
 style info :コンテンツエリア関係 他

	このスタイルシートの構成
	基本設定、リンクカラー、レイアウト、横幅設定など
	汎用class
	#contents
	#article
	#aside

=================================================================== */


/*----------------------------------------------------
	基本設定、リンクカラー、レイアウト、横幅設定など
----------------------------------------------------*/


/*--- default */

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body {
  background: #e2e8eb url(../img/share/bg-body.gif) repeat-x 0% 30px;
  color: #444;
  font-size: 76%;
  font-family: verdana, Sans-Serif;
  text-align: center;
}

*:first-child+html body {
  /* for IF7 */
  font-family: "メイリオ", "Meiryo";
}

a:link {
  color: #254692;
}

a:visited {
  color: #254692;
}

a:hover {
  text-decoration: underline;
}

a:active {}


/*----------------------------------------------------
	汎用class
----------------------------------------------------*/

.imgR {
  float: right;
  margin: 0 0 15px 15px;
}

.imgL {
  float: left;
  margin: 0 15px 15px 0;
}


/*  #wrapper
----------------------------------------------------*/

#wrapper {
  width: 100%;
  background: #fff;
  margin: 0 auto;
  text-align: left;
}

#article .title_page {
  font-size: 167%;
  font-weight: bold;
  color: #254692;
  padding-left: 0;
}


/*  #contents
----------------------------------------------------*/

#contents {
  clear: both;
  width: 100%;
}


/*  #article
----------------------------------------------------*/

#article {
  width: 982px;
  margin: 0 auto;
  zoom: 1;
  line-height: 1.7;
}

#article:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}

#article #main {
  width: 700px;
  float: left;
}


/*	セクション(メインタイトルバー以下)
----------------------------------------------------*/

.section {
  zoom: 1;
  margin-bottom: 20px;
}

.section:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}


/*	クリアフィックス
----------------------------------------------------*/

#contents:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}


/*	トピックパス
----------------------------------------------------*/

ul#topic_path {
  padding-top: 20px;
  width: 982px;
  margin-bottom: 40px;
}

ul#topic_path:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}

ul#topic_path li {
  float: left;
  color: #000;
}

ul#topic_path li.tpParent {
  color: #555555;
  text-decoration: none;
  padding-right: 1em;
  margin-right: 0.5em;
  background: url(../img/share/separator.gif) no-repeat 100% 50%;
}

ul#topic_path li a {
  color: #254692;
  text-decoration: none;
  padding-right: 1em;
  margin-right: 0.5em;
  background: url(../img/share/separator.gif) no-repeat 100% 50%;
}


/* -----------------------------------------------------------
	#aside
		サイドバー、サブ
----------------------------------------------------------- */

#aside {
  float: right;
  width: 240px;
  padding-bottom: 160px;
}

#aside .fb_plugin {
  margin-bottom: 20px;
}

#aside #bnr_box {
  padding-top: 0;
  margin-bottom: 10px;
}

#aside .bnr_product {
  margin-bottom: 20px;
}

#aside ul.bnr_area {
  text-align: center;
}

#aside ul.bnr_area li {
  padding-bottom: 10px;
}

#aside ul.bnr_area li.padding_20 {
  padding-bottom: 20px;
}

#aside ul.bnr_area li.seminar_mail {
  position: relative;
}

#aside ul.bnr_area li.seminar_mail div.bnr_mail {
  position: absolute;
  top: 95px;
  left: 20px;
}

#aside dl.twitter_link {
  background: url(../img/share/bg-title-twitter.gif) no-repeat bottom;
  padding-bottom: 10px;
  padding-left: 9px;
  margin-bottom: 10px;
}

#aside dl.twitter_link dt {
  padding-bottom: 8px;
}

#aside dl.twitter_link dd {
  padding-left: 20px;
  padding-bottom: 5px;
}

#contents #article #aside h4 {
  background: #e9ecf4;
  padding-left: 20px;
}

#contents #article #aside h4 a {
  color: #254692;
  text-decoration: none;
  font-size: 134%;
}

#contents #article #aside h4 a:hover {
  text-decoration: underline;
}


/* -----------------------------------------------------------
	#logos
		認証マーク
----------------------------------------------------------- */

ul#logos {
  float: right;
  width: 182px;
  margin: 0 auto;
  padding-right: 20px;
  padding-bottom: 20px;
}

ul#logos:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}

ul#logos li {
  float: left;
  padding-bottom: 5px;
  margin: 0 15px 5px 0;
}

ul#logos li.edge {
  margin: 0 0 5px 0;
}

.index ul#logos {
  padding-bottom: 0px;
}

ul.last {
  padding-bottom: 20px;
}


/*--------------------------------
    トップページ
        zac_renewal
---------------------------------*/

body {
  background: #fff;
  color: #666666;
  font-family: 'Noto Sans Japanese', sans-serif;
}

#contents {
  width: 100%;
  background: url(../img/share/bg-contents_nomal.gif) top repeat-x;
}

#article h1 {
  margin-bottom: 50px;
}

#article #main h2 {
  padding-left: 22px;
  background: url(../img/share/ico-title.gif) left no-repeat;
  margin-bottom: 20px;
  font-size: 135%;
}

.section em {
  font-weight: bold;
  color: #c9004c;
}

.section em.color2 {
  color: #0092d7;
}

.section:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}


/*右ローカルナビ*/

div.local_nav {
  background: #e9ecf4;
  width: 240px;
  margin-bottom: 20px;
}

div.local_nav h4 {
  padding: 9px 0 10px 40px;
  color: #fff;
}

div.local_nav ul {
  width: inherit;
  background: #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

div.local_nav ul li {
  border-bottom: 1px solid #eaeaea;
  font-weight: bold;
  color: #000000;
  position: relative;
}

div.local_nav ul li:hover a {
  background-color: #f4f6f9;
}

div.local_nav ul li span {
  padding: 10px 20px;
  display: block;
}

div.local_nav ul li span:before {
  position: absolute;
  display: block;
  content: '';
  width: 8px;
  height: 1px;
  background: #254692;
  left: 5px;
  top: 0;
  margin-top: 19px;
}

div.local_nav ul li a {
  padding: 10px 20px;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  display: block;
}

div.local_nav ul li span.new {
  color: #ff0000;
  display: block;
}

div.local_nav ul li span.newSide {
  color: #ff0000;
  float: left;
  padding: 0;
  margin-top: 10px;
  margin-left: 20px;
  position: relative;
  z-index: 10;
}

div.local_nav ul li ul {
  width: 160px;
  font-weight: 100;
  border: none;
  padding: 0;
}

div.local_nav ul li ul li {
  padding-top: 5px;
  padding-bottom: 0;
  padding-left: 10px;
}


/*Button Aside*/

.button_aside a {
  display: block;
  width: inherit;
  border-radius: 4px;
  font-size: 117%;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  position: relative;
  -webkit-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.button_aside a:after {
  content: "";
  position: absolute;
  width: 7px;
  height: 12px;
  right: 15px;
  top: 50%;
  margin-top: -6px;
  background: url(/zac/img/share/ico-arrow_button_aside.png) no-repeat 0 0;
  -webkit-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}

.button_aside a:hover:after {
  right: 13px;
}

.button_aside.button_pink a {
  background: #ee4466;
  padding: 18px 15px;
}

.button_aside.button_pink a:hover {
  background: #eb234b;
}

.button_aside.button_blue a {
  background: #254692;
  padding: 8px 15px;
}

.button_aside.button_blue a:hover {
  background: #0c3186;
}

.button_aside.bnr_mail a {
  width: 170px;
  padding: 5px 15px;
}

/*===================================================
  Youtube Videos
===================================================*/
.btn_video {
  margin: 0 auto;
  -webkit-transition: opacity 0.2s cubic-bezier(.17,.67,.83,.67);
  -o-transition: opacity 0.2s cubic-bezier(.17,.67,.83,.67);
  transition: opacity 0.2s cubic-bezier(.17,.67,.83,.67);
  cursor: pointer;
}
.btn_video a {
  display: block;
  border: 1px solid #ccdaea;
  width: 238px;
  height: 98px;
}
.btn_video a img {
  margin-left: -1px;
  margin-top: -1px;
}
.btn_video:hover {
  opacity: 0.7;
}
#overlay_bg {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
  background: #000;
  opacity: 0.5;
}
#popup {
  width: 994px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 100000;
  display: none;
}
#popup.open {
  display: block;
}
#video_block {
  height: 559px;
  overflow: hidden;
  opacity: 0;
}
#video_block iframe,
#video_block object,
#video_block embed {
  overflow: hidden;
}

#close_popup {
  display: inline-block;
  position: absolute;
  width: 45px;
  height: 45px;
  top: -55px;
  z-index: 10;
  cursor: pointer;
  right: 0;
}
#close_popup:before, #close_popup:after {
  display: block;
  content: "";
  top: 15px;
  width: 45px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  -webkit-transition: all 0.5s cubic-bezier(.17,.67,.83,.67);
  -o-transition: all 0.5s cubic-bezier(.17,.67,.83,.67);
  transition: all 0.5s cubic-bezier(.17,.67,.83,.67);
}
#close_popup:before {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#close_popup:after {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
iframe[name="google_conversion_frame"] {
  display: none;
}