/*#############################################
 *タイトル：ホームページ用スタイルシート
 *作成日：2018/07/17
 *作成者：務台悠輝
 *備考：
 *Bootstrap4用に作成
 *background-color: #65baad;
 *
 *#############################################*/
/*#############################################
 * 1.site-headerのカスタマイズ
 *#############################################*/
/* .site-headerの最大幅 */
.site-header .container {
  max-width: 1280px;
}

/* .site-headerのカラー */
.site-header {
  background-color: #ffffff;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* .site-headerの文字カラー */
.site-header a {
  color: #999;
  transition: ease-in-out color .15s;
}

/* .site-headerのホバー時の文字カラー */
.site-header a:hover {
  color: #ffb163;
  background-color: #d4ede9;
  text-decoration: none;
}

/*#############################################
 * 2.site-navのカスタマイズ
 *#############################################*/
/* .site-navの最大幅 */
.site-nav .container {
  max-width: 1280px;
}

/* .site-navのカラー */
.site-nav {
  /* background-color: #00111; */
  background-color: #ffffff;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* .site-navの文字カラー */
.site-nav a {
  color: #999;
  transition: ease-in-out color .15s;
}

/* .site-navのホバー時の文字カラー */
.site-nav a:focus,
.site-nav a:hover {
  color: #ffb163;
  background-color: #d4ede9;
  background-color: #6495ed;
}

.navbar-toggler {
  border-color: #ffffff;
  background-color: #000000;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* ドロップダウンをホバー表示 */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* ドロップダウンメニューのカラー */
.dropdown-menu {
  background-color: #ffffff;
}

/*ドロップダウンメニューfocus,hover時のカラー */
.dropdown-menu a:focus,
.dropdown-menu a:hover {
  color: #ffb163;
  background-color: #d4ede9;
  background-color: #6495ed;
}

/* ドロップダウン(子)内の区切り線(class="dropdown-divider")のカラー */
.dropdown-divider {
  border-color: black;
}

/*#############################################
 * メインヘッドラインのカスタマイズ
 *#############################################*/
/* .main-headlineの最大幅 */
.main-headline .container {
  max-width: 1366px;
}

/* .main-headlineのタイトル用フォント */
.main-headline-font-title {
  font-family: "Century";
  font-weight: bold;
  font-style: italic;
  color: #ffffff;
}

/* .main-headlineの説明フォント */
.main-headline-font {
  font-family: "MS P明朝";
  font-weight: bold;
  font-style: italic;
  color: #ffffff;
}

/* .main-headlineのカルーセルの調整 */
.carousel {
  margin-bottom: 4rem;
}

.carousel-caption {
  z-index: 10;
}

/*position: relative;*/
.carousel-item {
  background-color: #777;
  overflow: hidden;
  height: 30rem;
}

.carousel-item img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.carousel .item>img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

.carousel-inner>.item>img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 100%;
}

.carousel-indicators>li {
  margin-bottom: .25rem;
}

/*#############################################
 * campaignのカスタマイズ
 *#############################################*/
 .campaign-mainsize .container {
   max-width: 1280px;
 }

 .campaign-mainsize .container .jumbotron {
  position: relative;
  height: 360px;
  background-image: url("../img/img_main_bg1.gif");
  background-size: cover;
}

/*#############################################
 * サブヘッドラインのカスタマイズ
 *#############################################*/
/* .sub-headlineの最大幅 */
.sub-headline .container {
  max-width: 1280px;
}

/* .sub-headlineのタイトル用フォント */
.sub-headline-font-title {
  font-family: "Century";
  font-weight: bold;
  font-style: italic;
  color: #ffffff;
}

/* .sub-headlineの説明フォント */
.sub-headline-font {
  font-family: "MS P明朝";
  font-weight: bold;
  font-style: italic;
  color: #ffffff;
}

/*#############################################
 * データセンターのカスタマイズ
 *#############################################*/
 .datacenter-mainsize .container {
   max-width: 1280px;
 }

 .datacenter-mainsize .container .jumbotron {
  position: relative;
  height: 360px;
  background-image: url("../img/img_dc_bg2.gif");
  background-size: cover;
}

/*#############################################
 *  * プロダクトの実績のカスタマイズ
 *   #############################################*/
 .productresults-mainsize .container {
   max-width: 1280px;
 }

 .productresults-mainsize .container .jumbotron {
  position: relative;
  height: 360px;
  background-image: url("../img/img_product_bg5.gif");
  background-size: cover;
}


/*#############################################
 * 各プロダクトのカスタマイズ
 *#############################################*/
/* .product-mainsizeの最大幅 */
.product-mainsize .container {
  max-width: 1280px;
}

/* .demand-fontのフォント指定 */
.demand-font {
  font-family: "Century";
  font-weight: bold;
  font-style: italic;
  color: #712000;
}

/* .satellite-fontのフォント指定 */
.satellite-font {
  font-family: "OCRB";
  color: #000000;
}

/* .cats-fontのフォント指定 */
.cats-font {
  font-family: "MS P明朝";
  font-weight: bold;
  font-style: italic;
  color: #36040c;
}

/* .spits-fontのフォント指定 */
.spits-font {
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-style: italic;
  color: #800080;
}

/* .querica-fontのフォント指定 */
.querica-font {
  font-family: "Times New Roman";
  font-weight: bold;
  font-style: italic;
  color: #b450b4;
}

/*#############################################
 *  * ライセンス体系とライフサイクル
 *   #############################################*/
 .product_lifecycle-mainsize .container {
   max-width: 1280px;
 }

 .product_lifecycle-mainsize .container .jumbotron {
  position: relative;
  height: 360px;
  background-image: url("../img/img_product_bg5.gif");
  background-size: cover;
}

/*#############################################
 * DEMAND On Demandのカスタマイズ
 *#############################################*/
 .dod-mainsize .container {
   max-width: 1280px;
 }

 .dod-mainsize .container .jumbotron {
  position: relative;
  height: 360px;
  background-image: url("../img/img_dod_bg1.gif");
  background-size: cover;
}

/*#############################################
 * 事例紹介のカスタマイズ
 *#############################################*/
 .dcresults-mainsize .container {
   max-width: 1280px;
 }

 .dcresults-mainsize .container .jumbotron {
  position: relative;
  height: 360px;
  background-image: url("../img/img_case_bg3.gif");
  background-size: cover;
}

/*#############################################
 * GOOGLE MAPのカスタマイズ
 *#############################################*/
.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*#############################################
 * ダウンロードテーブルのカスタマイズ
 *#############################################*/
.dl_chenge_date {
  width: 200px
}

.dl_title {
  width: 500px
}

.dl_btn {
  width: 400px
}

/*#############################################
 * site footerのカスタマイズ
 *#############################################*/
/* .site-footerの最大幅 */
.site-footer .container {
  max-width: 720px;
}

/* .site-footerの文字カラー */
.site-footer a {
  color: #999;
  transition: ease-in-out color .15s;
}

/* .site-footerのホバー時の文字カラー */
.site-footer a:hover {
  color: #ffb163;
  background-color: #d4ede9;
  text-decoration: none;
}

/* .site-footer-font-titleのフォント指定 */
.site-footer-font-title {
  font-family: "Times New Roman";
  color: #000000;
}

/* .site-footer-font-calのフォント指定 */
.site-footer-font-cal {
  font-family: "Times New Roman";
}

/*
 *  * navbarにロゴをバックグラウンドとして挿入
 *   */
.navbar-company-logo {
  background: url("../img/G-Link2007-sm.bmp") no-repeat left center;
  background-size: contain;
  height: 40px;
  width: 150px;
}

/*
 *  * エクストラユーティリティー
 *   */
.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.flex-equal>* {
  -ms-flex: 1;
  flex: 1;
}

@media (min-width: 768px) {
  .flex-md-equal>* {
    -ms-flex: 1;
    flex: 1;
  }
}

.overflow-hidden {
  overflow: hidden;
}

a.link-hover {
  text-decoration: none;
  background-image: linear-gradient( #696969, #696969 );
  background-size: 0 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: all .3s;
}

a.link-hover:hover {
  background-size: 100% 1px;
}