@charset "UTF-8";
/* CSS Document */

/* 共通要素 -----------------------------------------------------------------------------*/
html {/* 文字サイズレスポンシブ使用不可 */
  scroll-behavior: smooth;/* ゆっくりスクロール（速度変えられない） */
  font-feature-settings: palt;/* 文字詰め OpenTypeのみ */
  font-size: 62.5%;/* style.cssにあり */
  overflow-y: scroll;/* style.cssにあり */
}
/* 画像 */
img {
  max-width: 100%;
  vertical-align: top;/* 必要 画像下の余白をなくす */
}
.top-wrap {
  width: 100%;/* トップ画像だけ横幅に合わせる */
  height: 100%;
}
/* 文字 種類 */
.biz-udpgothic-regular {
  font-family: "BIZ UDPGothic", sans-serif;/* グーグル モリサワフォント */
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
}
.biz-udpgothic-bold {
  font-family: "BIZ UDPGothic", sans-serif;/* グーグル モリサワフォント */
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.02em;
}
/* 文字一部 橙色 */
.text-orenge {
  color: #FF8C00;
}
/* 外枠 */
.section-wrap {
  display: block;
  position: relative;
  float: none;
  z-index: 998;/* 左の項目表示される */
  width: 100%;
  margin: -6rem 0 -12rem;/* 必要 外枠上下の空きつめる */
  border: 1px solid #66CCFF;
  background-color: #fff;
  text-align: center;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.section-wrap {
  -webkit-text-size-adjust: 100%;/* iPhone Safari文字サイズ調整 */
}
/* テキストナビゲーション */
.navi li a {
	color: #44ADE9;/* リンク文字に指定しないと変わらない */
}
.navi li:hover {
	background-color: #E0FFFF;
}

/* レスポンシブル ここから高解像度パソコン  ----------------------------------------------------*/
@media screen and (min-width: 1367px) {/* hd max 1980px */

/* 画像切替 */
.pc {/* pc */
  display: none;
}
.sp{/* pc */
  display: none;
}
/* 文字　大きさ */
.text-size-title {/* hd */
  font-size: 3.9em;/* 2.9 */
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* hd */
  font-size: 4.6em;/* 3.6 */
}
.text-size-main {/* hd */
  font-size: 2.8em;/* 2.4 */
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* hd */
  font-size: 3.4em;/* 3 */
}
.text-size-sub {/* hd */
  font-size: 2em;/* 1.6 */
  line-height: 1.8;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* hd */
  font-size: 2.4em;/* 2 */
}
.text-size-cap {/* hd */
  margin: 10px;
  font-size: 1.6em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* hd */
  font-size: 1.9em;/* 1.5 */
}

/*------ レイアウト ------*/
.navi ul {/* hd */
	display: flex;
  flex-wrap: wrap;/* 段組にしない */
  justify-content: center;/* ヨコ */ 
  align-items: center;/* タテ */
  z-index: 998;/* 左の項目表示される */
	list-style: none;
	width: 100%;
	margin: 0 auto 60px;/* 下の空き変える */
	text-align: center;
}
.navi li {
	margin: 6px;/* 2行になったときの空き */
	padding: 10px 15px;
	border-radius: 7px;
	line-height: 1.5;/* 必要 2行になったときの文字間 */	
	box-shadow: 0 0 0 2px #FF8C00,0 0 0 0px #fff,0 0 0 4px #66CCFF;
	/* ぼかしのない二重線 内枠 余白 外枠は合計値 */
}
.main-wrap-left {/* hd */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: start;/* ヨコ */ 
  align-items: center;/* タテ */
  z-index: 998;/* 左の項目表示される */
  padding-bottom: 30px;
  border-top: 1px solid #66CCFF;
}
.main-wrap-inside {/* hd */
  width: 93%;/* 罫線内側の左右空き */
  margin: 0 auto;/* 必要 左右中央揃え */
}
.title-wrap {/* hd */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 0 0 30px;
}
.text-sub-wrap {/* hd */
  display: inline-block;
  position: relative;
  padding: 0 150px;/* 文字の収まり具合で横幅調整 */
  line-height: 1.6;
  text-align: left;
}
.text-sub-wrap-bottom {/* hd */
	margin: 0 0 50px 1em;/* インデント2行目 */
	padding: 10px 150px 0;/* 文字の収まり具合で横幅調整 */
  line-height: 1.6;
	text-align: left;
	text-indent: -1em;/* 左インデント */
}
/* サブタイトル帯 */
.title-sub-wrap-left {/* hd */
	position: relative;/* 必要 ないと帯広がらない */
  width: 100%;/* 必要 枠いっぱいに広げる */
  margin-bottom: 30px;/* 帯の下空き */
  padding: 10px 30px;
  background-color: #66CCFF;
  color: #fff;
  text-align: left;
}
/* 1 2 5 */
.grid-container {/* hd */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));/* 1行最小450px */
}
.grid-icon-wrap {/* hd */
  display: inline-block;
  position: relative;
	margin: 10px ;/* 左右の空き */
	padding: 15px 30px 10px;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.grid-icon-wrap img {/* hd */
	padding-bottom: 15px;
}
/* 1 2 */
.text-on-premises {/* hd */
  padding-bottom: 10px;/* リストの下空き */
  color: #44ADE9;
  text-align: left;
}
.text-on-premises-sub {/* hd */
  padding-top: 15px;
  color: #000;
}
.text-on-premises li {/* hd */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 25px;/* 必要 インデント */
  font-size: .7em;
  line-height: 1.6;
}
/* 2 3 */
.arrow-facing-downward {/* hd */
  margin: -15px auto 5px;
  width: 40px;
  height: 40px;
  border-top: solid 1px #44ADE9;
  border-right: solid 1px #44ADE9;
  transform: rotate(135deg);
}
/* 3 */
.icon-wrap {/* hd */
  display: inline-block;/* 必要 中央揃え */
	width: 65%;
	margin: 15px ;/* 左右の空き */
	padding: 15px 0;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.icon-wrap-top {/* hd */
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;/* タテ */
	padding: 10px 30px;
}
.icon-wrap-right-top {/* hd */
  margin-bottom: 10px;
  color: #44ADE9;
}
.icon-wrap-right {/* hd */
  margin-left: 30px;
  text-align: left;
}
.icon-wrap-right li {/* hd */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 24px;/* 必要 インデント */
  color: #000;
  line-height: 1.6;
}
/* 4 */
.chart {/* hd */
  display: flex;
  justify-content: center;
}
.chart img {/* hd */
  padding: 0 30px;
}
/* 5 */
.grid-item-aws-bottom {/* hd */
  padding-top: 10px;/* アイコン下の空き */
}
.grid-item-aws {/* hd */
  padding: 15px 0;/* 文字下の空き */
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* hd */
  width: 100%;
  padding: 30px;
  border-top: 1px solid #66CCFF;
  border-bottom: 1px solid #66CCFF;
  background: #fff;
  color: #44ADE9;
}
/* 行　横並び */
.service-box-2 {/* hd */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
/* 各項目 */
.estimate-box {/* hd */
  display: inline-block;
  position: relative;
  margin: 0 50px;
  padding: 20px 40px;/* 背景色の長さ */
  border-radius: 15px;
  background: #F0FFFF;
  text-align: center;
}
.estimate-text {/* hd */
  margin: 5px 15px 5px .5em;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* hd */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  margin: 30px 0 0;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* hd */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  margin-bottom: 30px !important;/* 必要 2行になったとき社名ロゴの下空きなし */
  font-size: 1.65em !important;/* 必要 右側フォントサイズの基準1.25 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* hd */
  font-size: 2em !important;/* 必要 右側フォントサイズの基準1.6 */
}
.telephone-number {/* hd */
  display: inline-block;
  position: relative;
  margin-top: 5px;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* hd */
  font-size: 2.22em;/* 数値下げる */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* hd */
  font-size: 0.7em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* hd */
  font-size: 0.7em;
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.select-tier-badge-top {/* hd */
	display: inline-block;
  position: relative;
	margin: 30px 0;
	vertical-align: middle;
}
.select-tier-badge {/* hd */
	display: inline-block;
  position: relative;
	margin: 0 50px 30px 0;
	vertical-align: middle;
}
.company-logo {/* hd */
  margin: 0 50px 30px 0;/* 必要 2列になったとき下空き */
	z-index: 1000;
}
	
/* メールボタン案内 */
.footer-under-wrap {/* hd */
  width: 100%;
  border-top: 1px solid #66CCFF;
}
.footer-under-text {/* hd */
  padding: 30px;
  font-size: 2em !important;/* 1.5 */
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* hd */
  font-size: 2.4em !important;/* 1.9 */
}

/*------ ページトップボタン ------*/
.page-top {/* hd */
  position: fixed;
  visibility: hidden;
  right: 7px;
  bottom: 105px;/* お問合せフォームボタンの上 */
  z-index: 1001;
  filter: drop-shadow(2px 2px 3px #B0C4DE);/* X Y ブラー 影#FFC0CB 透明度 */
}
/* カーソル画像きりかえ */
.page-top a:hover {/* hd */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-up.png'), pointer;
}
/* クラス付与時の指定 */
.is-active {/* hd */
  visibility: visible;
  animation-name: fadeinAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeinAnime{
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
/*------ フォームボタン ------*/
#form-button {/* hd */
  position: fixed;
  right: 3px;/* 右下 */
  bottom: 50px;/* 下すぎるとポインターが切り替わらない */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* hd */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-left.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* hd */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(0);
}
}
/* 右の動き */
#form-button.RightMove {/* hd */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(155px);/* 右の文字が隠れる */
}
}
}

/* レスポンシブル ここから低解像度パソコン  ----------------------------------------------------*/
@media screen and (min-width: 769px) and (max-width: 1366px) {/* pc */

/* 画像切替 */
.hd {/* pc */
  display: none;
}
.sp{/* pc */
  display: none;
}
/* 文字 大きさ */
.text-size-title {/* pc */
  font-size: 2.9em;
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* pc */
  font-size: 3.6em;
}
.text-size-main {/* pc */
  font-size: 2.4em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* pc */
  font-size: 3em;
}
.text-size-sub {/* pc */
  font-size: 1.6em;
  line-height: 1.8;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* pc */
  font-size: 2em;
}
.text-size-cap {/* pc */
  margin: 10px;
  font-size: 1.5em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* pc */
  font-size: 1.8em;
}

/*------ レイアウト ------*/
.navi ul {/* pc */
	display: flex;
  flex-wrap: wrap;/* 段組にしない */
  justify-content: center;/* ヨコ */ 
  align-items: center;/* タテ */
  z-index: 998;/* 左の項目表示される */
	list-style: none;
	width: 100%;
	margin: 0 auto 50px;/* 下の空き変える */
	text-align: center;
}
.navi li {
	margin: 6px;/* 2行になったときの空き */
	padding: 10px 15px;
	border-radius: 7px;
	line-height: 1.5;/* 必要 2行になったときの文字間 */	
	box-shadow: 0 0 0 2px #FF8C00,0 0 0 0px #fff,0 0 0 4px #66CCFF;
	/* ぼかしのない二重線 内枠 余白 外枠は合計値 */
}
.main-wrap-left {/* pc */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: start;/* ヨコ */ 
  align-items: center;/* タテ */
  z-index: 998;/* 左の項目表示される */
  padding-bottom: 20px;
  border-top: 1px solid #66CCFF;
}
.main-wrap-inside {/* pc */
  width: 95%;
  margin: 0 auto;/* 必要 左右中央揃え */
}
.title-wrap {/* pc */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 0 0 30px;
}
.text-sub-wrap {/* pc */
  display: inline-block;
  position: relative;
  padding: 0 35px;/* 文字の収まり具合で横幅調整 */
  line-height: 1.6;
  text-align: left;
}
.text-sub-wrap-bottom {/* pc */
  margin: 0 0 40px 1em;/* インデント2行目 */
	padding: 10px 35px 0;/* 文字の収まり具合で横幅調整 */
  line-height: 1.6;
	text-align: left;
	text-indent: -1em;/* 左インデント */
}
/* サブタイトル帯 */
.title-sub-wrap-left {/* pc */
  position: relative;/* 必要 ないと帯広がらない */
  width: 100%;/* 必要 枠いっぱいに広げる */
  margin-bottom: 20px;/* 帯の下空き */
  padding: 10px 30px;
  background-color: #66CCFF;
  color: #fff;
  text-align: left;
}
/* 1 2 5 */
.grid-container {/* pc */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));/* 1行最小450px */
}
.grid-icon-wrap {/* pc */
  display: inline-block;
  position: relative;
	margin: 15px ;/* 左右の空き */
	padding: 15px 30px;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.grid-icon-wrap img {/* pc */
	padding-bottom: 15px;
}
/* 1 2 */
.text-on-premises {/* pc */
  padding-bottom: 10px;/* リストの下空き */
  color: #44ADE9;
  text-align: left;
}
.text-on-premises-sub {/* pc */
  padding-top: 15px;
  color: #000;
}
.text-on-premises li {/* pc */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 25px;/* 必要 インデント */
  font-size: .7em;
  line-height: 1.6;
}
/* 2 3 */
.arrow-facing-downward {/* pc */
  margin: -15px auto 5px;
  width: 40px;
  height: 40px;
  border-top: solid 1px #44ADE9;
  border-right: solid 1px #44ADE9;
  transform: rotate(135deg);
}
/* 3 */
.icon-wrap {/* pc */
  display: inline-block;/* 必要 中央揃え */
	width: 80%;/* 背景の長さ */
	margin: 15px;/* 左右の空き */
	padding: 10px 0;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.icon-wrap-top {/* pc */
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;/* タテ */
	padding: 15px;
}
.icon-wrap-right-top {/* pc */
  margin-bottom: 10px;
  color: #44ADE9;
}
.icon-wrap-right {/* pc */
  margin-left: 15px;/* 文字の左空き */
  text-align: left;
}
.icon-wrap-right li {/* pc */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 24px;/* 必要 インデント */
  color: #000;
  line-height: 1.6;
}
/* 4 */
.chart {/* pc */
  display: flex;
  justify-content: center;
}
.chart img {/* pc */
  padding: 10px 30px;
}
/* 5 */
.grid-item-aws-bottom {/* pc */
	padding-top: 10px;/* アイコン下の空き */
}
.grid-item-aws {/* pc */
  padding: 15px 0;/* 文字下の空き */
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* pc */
  width: 100% ;
  padding: 30px;
  border-top: 1px solid #66CCFF;
  border-bottom: 1px solid #66CCFF;
  background: #fff;
  color: #44ADE9;
}
.service-box-2 {/* pc */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
/* 各項目 */
.estimate-box {/* pc */
  display: inline-block;
  position: relative;
  margin: 0 30px;
  padding: 20px 40px;/* 背景色の長さ */
  border-radius: 15px;
  background: #F0FFFF;
  text-align: center;
}
.estimate-text {/* pc */
  margin: 5px 15px 5px .5em;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* pc */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  margin: 30px 0 0;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* pc */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  margin-bottom: 30px;/* 2行になったとき社名ロゴの下空きなし */
  font-size: 1.25em;/* 右側フォントサイズの基準 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* pc */
  font-size: 1.6em;/* 右側フォントサイズの基準 */
}
.telephone-number {/* pc */
  display: inline-block;
  position: relative;
  margin-top: 5px;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* pc */
  font-size: 2.22em;/* 数値下げる */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* pc */
  font-size: 0.7em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* pc */
  font-size: 0.7em;
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.select-tier-badge-top {/* pc */
	display: inline-block;
  position: relative;
	margin: 25px 0;
	vertical-align: middle;
}
.select-tier-badge {/* pc */
	display: inline-block;
  position: relative;
	margin: 0 50px 30px 0;/* 必要 2列になったとき下空き */
	vertical-align: middle;
}
.company-logo {/* pc */
  margin: 0 50px 30px 0;/* 必要 2列になったとき下空き */
	z-index: 1000;
}
/* メールボタン案内 */
.footer-under-wrap {/* pc */
  width: 100%;
  border-top: 1px solid #66CCFF;
  background: #fff;
}
.footer-under-text {/* pc */
  padding: 30px;
  font-size: 1.6em;
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* pc */
  font-size: 2em;
}

/*------ ページトップボタン ------*/
.page-top {/* pc */
  position: fixed;
  visibility: hidden;
  right: 7px;
  bottom: 105px;/* お問合せフォームボタンの上 */
  z-index: 1001;
  filter: drop-shadow(2px 2px 3px #B0C4DE);/* X Y ブラー 影#FFC0CB 透明度 */
}
/* カーソル画像きりかえ */
.page-top a:hover {/* pc */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-up.png'), pointer;
}
/* クラス付与時の指定 */
.is-active {/* pc */
  visibility: visible;
  animation-name: fadeinAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
@keyframes fadeinAnime{
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}
/*------ フォームボタン ------*/
#form-button {/* pc */
  position: fixed;
  right: 3px;/* 右下 */
  bottom: 50px;/* 下すぎるとポインターが切り替わらない */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* pc */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* pc */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(0);
}
}
/* 右の動き */
#form-button.RightMove {/* pc */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(155px);/* 右の文字が隠れる */
}
}
}

/* ここからタブレット -----------------------------------------------------------------*/
@media screen and (min-width: 441px) and (max-width: 768px) {/* tb */

/* 画像切替 */
.hd {/* tb */
  display: none;
}
.pc{/* tb */
  display: none;
}
/* 文字 大きさ */
.text-size-title {/* tb */
  font-size: 2.4em;/* 2.9 */
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* tb */
  font-size: 3em;
}
.text-size-main {/* tb */
  font-size: 1.9em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* tb */
  font-size: 2.3em;
}
.text-size-sub {/* tb */
  font-size: 1.3em;
  line-height: 1.5;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* tb */
  font-size: 1.6em;
}
.text-size-cap {/* tb */
  margin: 10px;
  font-size: 1.2em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* tb */
  font-size: 1.5em;
}

/*------ レイアウト ------*/
.navi ul {/* tb */
	display: flex;
  flex-wrap: wrap;/* 段組にしない */
  justify-content: center;/* ヨコ */ 
  align-items: center;/* タテ */
  z-index: 998;/* 左の項目表示される */
	list-style: none;
	width: 100%;
	margin: 0 auto 40px;/* 下の空き変える */
	text-align: center;
}
.navi li {
	margin: 6px;/* 2行になったときの空き */
	padding: 10px 15px;
	border-radius: 7px;
	line-height: 1.5;/* 必要 2行になったときの文字間 */	
	box-shadow: 0 0 0 2px #FF8C00,0 0 0 0px #fff,0 0 0 4px #66CCFF;
	/* ぼかしのない二重線 内枠 余白 外枠は合計値 */
}
.main-wrap-left {/* tb */
  display: flex;
  flex-wrap: wrap;/* 段組にする */
  justify-content: start;/* ヨコ */ 
  align-items: center;/* タテ */
  z-index: 998;/* 左の項目表示される */
  padding-bottom: 25px;
  border-top: 1px solid #66CCFF;
}
.main-wrap-inside {/* tb */
  width: 95%;
  margin: 0 auto;/* 必要 左右中央揃え */
}
.title-wrap {/* tb */
  display: block;/* 見出文字とメニューを横に並べない */
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 0 0 25px;
}
.text-sub-wrap {/* tb */
  display: inline-block;
  position: relative;
  padding: 0 35px;
  line-height: 1.6;
  text-align: left;
}
.text-sub-wrap-bottom {/* tb */
	margin: 0 0 30px 1em;/* インデント2行目 */
	padding: 10px 35px 0;/* 文字の収まり具合で横幅調整 */
  line-height: 1.6;
	text-align: left;
	text-indent: -1em;/* 左インデント */
}
/* サブタイトル背景 */
.title-sub-wrap-left {/* tb */
  position: relative;/* 必要 ないと帯広がらない */
  width: 100%;/* 必要 枠いっぱいに広げる */
  margin-bottom: 15px;/* 帯の下空き */
  padding: 10px 30px;
  background-color: #66CCFF;
  color: #fff;
  text-align: left;
}
/* 1 2 5 */
.grid-container {/* tb */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));/* 1行最小450px */
}
.grid-icon-wrap {/* tb */
  display: inline-block;
  position: relative;
	margin: 15px ;/* 左右の空き */
	padding: 15px;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.grid-icon-wrap img {/* tb */
	padding-bottom: 15px;
}
/* 1 2 */
.text-on-premises {/* tb */
  padding-bottom: 10px;/* リストの下空き */
  color: #44ADE9;
  text-align: left;
}
.text-on-premises-sub {/* tb */
  padding-top: 15px;
  color: #000;
}
.text-on-premises li {/* tb */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 25px;/* 必要 インデント */
  font-size: .7em;
  line-height: 1.6;
}
/* 2 3 */
.arrow-facing-downward {/* tb */
  margin: -15px auto 5px;
  width: 40px;
  height: 40px;
  border-top: solid 1px #44ADE9;
  border-right: solid 1px #44ADE9;
  transform: rotate(135deg);
}
/* 3 */
.icon-wrap {/* tb */
  display: inline-block;/* 必要 中央揃え */
	width: 95%;/* 背景の長さ */
	margin: 10px 0;/* 左右の空き */
	padding: 10px 0;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.icon-wrap-top {/* tb */
  display: flex;
  flex-wrap: nowrap;
  justify-content: start;
  align-items: center;/* タテ */
	padding: 10px;
}
.icon-wrap-right-top {/* tb */
  margin-bottom: 10px;
  color: #44ADE9;
}
.icon-wrap-right {/* tb */
  margin-left: 10px;/* 文字の左空き */
  text-align: left;
}
.icon-wrap-right li {/* tb */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 24px;/* 必要 インデント */
  color: #000;
  line-height: 1.6;
}
/* 4 */
.chart {/* tb */
  display: flex;
  justify-content: center;
	width: 100%;/* 必要 左に寄る */
}
.chart img {/* tb */
  margin: 10px 0;
}
/* 5 */
.grid-item-aws-bottom {/* tb */
  padding-top: 10px;/* アイコン下の空き */
}
.grid-item-aws {/* tb */
  padding: 10px 0 30px;/* 文字下の空き */
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* tb */
  width: 100% ;
  padding: 20px;
  border-top: 1px solid #66CCFF;
  border-bottom: 1px solid #66CCFF;
  background: #fff;
  color: #44ADE9;
}
/* 行 横並び */
.service-box-2 {/* tb */
  display: flex;
  flex-wrap: nowrap;/* 段組にしない */
  justify-content: center; 
  align-items: center;
}
/* 各項目 */
.estimate-box {/* tb */
  display: inline-block;
  position: relative;
  margin: 0 10px;
  padding: 20px 5px;/* 背景色の長さ */
  border-radius: 15px;
  background: #F0FFFF;
  text-align: center;
}
.estimate-text {/* tb */
  margin: 5px;
  padding-left: .5em;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* tb */
  display: flex;
  flex-wrap: wrap;
	flex-direction: column; /* 縦並びにする */
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  padding: 30px;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* tb */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  font-size: 1.35em;/* 右側フォントサイズの基準 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* tb */
  font-size: 1.6em;/* 右側フォントサイズの基準 */
}
.telephone-number {/* tb */
  display: inline-block;
  position: relative;
  padding-top: 5px;
  font-weight: bold;
  font-size: 2.6em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* tb */
  font-size: 2.22em;/* 数値下げる */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* tb */
  font-size: 0.7em;
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* tb */
  font-size: 0.7em;
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.select-tier-badge-top {/* tb */
	display: inline-block;
  position: relative;
	margin: 20px 0;
	vertical-align: middle;
}
.select-tier-badge {/* tb */
	display: inline-block;
  position: relative;
	margin-bottom: 30px;/* 必要 2列になったとき下空き */
	vertical-align: middle;
}
.company-logo {/* tb */
  margin-bottom: 30px;/* 必要 2列になったとき下空き */
	z-index: 1000;
}
/* メールボタン案内 */
.footer-under-wrap {/* tb */
  width: 100%;
  border-top: 1px solid #66CCFF;
  background: #fff;
}
.footer-under-text {/* tb */
  padding: 25px 20px;
  font-size: 1.4em;
  line-height: 1.6;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* tb */
  font-size: 1.7em;
}
/*------ ページトップボタン ------*/
.page-top {/* tb */
  display: none !important;/* 必要 消えない */
}
/*------ フォームボタン ------*/
#form-button {/* tb */
  position: fixed;
  right: 23px;/* 右下 */
  bottom: 10px;/* マウスホバーがないので下へ */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* tb */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-left.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* tb */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(291px);/* iPhone別タブを開くと左にずれる */
}
}
/* 右の動き */
#form-button.RightMove {/* tb */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(160px);/* 右の文字が隠れる */
}
}
}

/* ここからスマートフォン -----------------------------------------------------------------*/
@media screen and (max-width: 440px) {/* sp */
/* iPhone17 Pro Max 440px */
/* Android 412px */

/* 画像切替 */
.hd {/* sp */
  display: none;
}
.pc{/* sp */
  display: none;
}
/* 文字 大きさ */
.text-size-title {/* sp */
  font-size: 2.1em;/* 2.4 */
  line-height: 1.5;/* サファリ高さ同じ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-title {/* sp */
  font-size: 2.6em;/* 3.4 */
}
.text-size-main {/* sp */
  font-size: 1.8em;/* 2 */
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-main {/* sp */
  font-size: 2em;/* 2.8 */
}
.text-size-sub {/* sp */
  font-size: 1.4em;/* 1.5 */
  line-height: 1.8;
  text-align: justify;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-sub {/* sp */
  font-size: 1.7em;/* 2 */
}
.text-size-cap {/* sp */
  margin: 10px;
  font-size: 1.2em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.text-size-cap {/* sp */
  font-size: 1.5em;
}

/*------ レイアウト ------*/
.navi ul {/* sp */
  display: inline-block;
  position: relative;
  z-index: 998;/* 左の項目表示される */
	list-style: none;
	width: 88%;
	margin: 0 auto 20px;/* 下の空き変える */
	color: #44ADE9;
}
.navi li {
	margin: 15px 0;
	padding: 10px;
	border-radius: 7px;
	line-height: 1.5;/* 必要 2行になったときの文字間 */	
	box-shadow: 0 0 0 2px #FF8C00,0 0 0 0px #fff,0 0 0 4px #66CCFF;
	/* ぼかしのない二重線 内枠 余白 外枠は合計値 */
	text-align: center;
}
.main-wrap-left {/* sp */
  z-index: 998;/* 左の項目表示される */
  padding-bottom: 15px;
  border-top: 1px solid #66CCFF;
}
.main-wrap-inside {/* sp */
  width: 95%;/* 横幅狭める 文字の収まり具合 */
  margin: 0 auto;/* 必要 左右中央揃え */
}
.title-wrap {/* sp */
  width: 90%;
  margin: 0 auto;
  padding: 0 0 20px;
}
.text-sub-wrap {/* sp */
  display: inline-block;
  position: relative;
  padding: 0 6%;
  text-align: left;
  line-height: 1.6;
}
.text-sub-wrap-bottom {/* sp */
	margin: 0 0 15px 1em;/* インデント2行目 */
	padding: 10px 6% 0;/* 文字の収まり具合で横幅調整 */
  line-height: 1.6;
	text-align: left;
	text-indent: -1em;/* 左インデント */
}
/* サブタイトル背景 */
.title-sub-wrap-left {/* sp */
  display: flex;/* フレックス以外は左に寄る */
  justify-content: center;/* ヨコ */
  align-items: center;/* タテ */
  position: relative;/* 必要 ないと帯広がらない */
  width: 100%;/* 必要 チャート */
  margin-bottom: 10px;
  padding: 10px;
  background-color: #F0FFFF;
  color: #44ADE9;
  text-align: center;
}
/* 1 2 5 */
.grid-container {/* sp */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));/* 1行最小450px */
}
.grid-icon-wrap {/* sp */
  display: inline-block;
  position: relative;
	margin: 10px ;/* 上下の空き */
	padding: 10px;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.grid-icon-wrap img {/* sp */
	padding-bottom: 5px;
}
/* 1 2 */
.text-on-premises {/* sp */
  padding-bottom: 5px;/* リストの下空き */
  color: #44ADE9;
  text-align: left;
}
.text-on-premises-sub {/* sp */
  padding-top: 10px;
  color: #000;
}
.text-on-premises li {/* sp */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 20px;/* 必要 インデント */
  font-size: .8em;
  line-height: 1.6;
}
/* 2 3 */
.arrow-facing-downward {/* sp */
  margin: -10px auto 5px;
  width: 30px;
  height: 30px;
  border-top: solid 1px #44ADE9;
  border-right: solid 1px #44ADE9;
  transform: rotate(135deg);
}
/* 3 */
.icon-wrap {/* sp */
  display: inline-block;/* 必要 中央揃え */
	width: 95%;/* 背景の長さ */
	margin: 10px 0;/* 背景上の空き */
	padding: 10px 0;
  border: 1px solid #66CCFF;
	border-radius: 7px;
	text-align: center;
}
.icon-wrap-top {/* sp */
	padding: 0;
}
.icon-wrap-right-top {/* sp */
  margin-bottom: 10px;
  color: #44ADE9;
	text-align: center;
}
.icon-wrap-right {/* sp */
	padding: 0 15px 5px;
  text-align: left;
}
.icon-wrap-right li {/* sp */
  list-style-type: disc;/* リスト点表示されない */
  margin-left: 20px;/* 必要 インデント */
  color: #000;
  line-height: 1.6;
}
/* 4 */
.chart {/* sp */
  margin: 0 10px;/* style.css main overflow-x:hiddenのため画像横スクロールできない */
}
.chart img {/* sp */
  margin: 10px 0;
}
/* 5 */
.grid-item-aws-bottom {/* sp */
  padding-top: 5px;/* アイコン下の空き */
}
.grid-item-aws {/* sp */
  padding: 10px 0;/* 文字下の空き */
}

/*------ サービスメニュー ------*/
/* 外枠 */
.service-wrap {/* sp */
  width: 100% ;
  padding: 10px;
  border-top: 1px solid #66CCFF;
  border-bottom: 1px solid #66CCFF;
  color: #44ADE9;
}
/* 行 横並び */
.service-box-2 {/* sp */
  display: inline-block;
  position: relative;
  width: 90%;
}
/* 各項目 */
.estimate-box {/* sp */
  display: inline-block;/* ブロックでは中央配置できない */
  position: relative;
  margin: 10px;
  padding: 10px 20px;/* 文字背景 */
  border-radius: 15px;
  background: #F0FFFF;
  text-align: center;
}
.estimate-text {/* sp */
  width: 100%;
  margin: 0 10px 5px;
  color: #000;
  text-align: left;
  text-indent: -.5em;
  line-height: 1.5;
  vertical-align: text-top;/* 上揃え */
}

/*------ フッター ------*/
/* お問合せ先 */
.footer-wrap {/* sp */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;/* 横の位置 */
  align-items: center;/* 縦の位置 */
  width: 100%;
  padding-top: 25px;/* 必要 2行になったとき社名ロゴの上空き */
  background: #fff;
  color: #000;
}
.text-dial {/* sp */
  display: inline-block;/* 左揃え設定する */
  position: relative;
  margin: 0 30px 20px;/* 2行になったとき社名ロゴの下空きなし */
  font-size: 1.35em;/* 右側フォントサイズの基準 */
  text-align: left;
}
_::-webkit-full-page-media,_:future,:root/* safari */ 
.text-dial {/* sp */
  font-size: 1.5em;/* 1.6 */
}
.telephone-number {/* sp */
  display: inline-block;
  position: relative;
  margin-top: 3px;
  font-weight: bold;
  font-size: 2.2em;/* 2.6 */
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.telephone-number {/* sp */
  font-size: 1.96em;/* 2.22 */
  line-height: 1.2em;/* 上からの高さ大きくなると下へ */
}
.reception-hours {/* sp */
  font-size: .6em;/* .7 */
  line-height: 1.1em;/* 上からの高さ大きくなると下へ */
}
_::-webkit-full-page-media,_:future,:root/* safari */
.reception-hours {/* sp */
  font-size: .59em;/* sp */
  line-height: 1.5em;/* 1.2 */
}
.select-tier-badge-top {/* tb */
	display: inline-block;
  position: relative;
	margin: 15px 0;
	vertical-align: middle;
}
.select-tier-badge {/* sp */
	display: inline-block;
  position: relative;
	margin-bottom: 20px;/* 必要 2列になったとき下空き */
	vertical-align: middle;
}
.company-logo {/* sp */
	z-index: 1000;
  margin-bottom: 20px;/* 1列で下空き */
  text-align: center;
}
.company-logo img {/* sp */
  width: 83% !important;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.company-logo img {/* sp */
  width: 77% !important;/* 必要 サファリ縮小しない */
}
/* メールボタン案内 */
.footer-under-wrap {/* sp */
  width: 100%;
  border-top: 1px solid #66CCFF;
  background: #fff;
}
.footer-under-text {/* sp */
  padding: 15px 10px;
  font-size: 1.4em;
  line-height: 1.5;
}
_::-webkit-full-page-media,_:future,:root/* safari */
.footer-under-text {/* sp */
  font-size: 1.6em;/* 1.9 */
}

/*------ ページトップボタン ------*/
.page-top {/* sp */
  display: none !important;/* 必要 消えない */
}
/*------ フォームボタン ------*/
#form-button {/* sp */
  position: fixed;
  right: 8px;/* 右下 */
  bottom: 10px;/* マウスホバーがないので下へ */
  z-index: 998;
  filter: drop-shadow(2px 2px 3px #B0C4DE);
}
#form-button a:hover {/* sp */
  opacity: 1;/* ホバーで半透明になるので必要 */
  cursor: url('images/cursor-b-left.png'), pointer;
}
/* 左の動き 必要 上にスクロールしたとき */
#form-button.LeftMove {/* sp */
  animation: LeftAnime 0.5s forwards;
}
@keyframes LeftAnime {
from {
  transform: translateX(97px);
}
to {
  transform: translateX(291px);/* iPhone別タブを開くと左にずれる */
}
}
/* 右の動き */
#form-button.RightMove {/* sp */
  animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime {
from {
  transform: translateX(0);
}
to {
  transform: translateX(145px);/* 右の文字が隠れる */
}
}
}