@charset "utf-8";

/*
------------------------------------------------------------------------------------------------------------
全体のCSS設定
------------------------------------------------------------------------------------------------------------
*/

body {
  background: #ffffff;
  /*全体の背景色*/
  color: #292929;
  /*全体の文字色*/
  font: 20px/1.6 "Hiragino Kaku GothicProN", "Helvetica Neue";
  /* 全体のフォント設定 */
}

html {
  scroll-behavior: smooth;
}

/*
------------------------------------------------------------------------------------------------------------
リンク（全般）設定のCSS
------------------------------------------------------------------------------------------------------------
*/

a {
  color: #555;
  /*リンクテキストの色*/
  text-decoration: none;
  /* テキストの下線の非表示 */
}


a:hover .btn {
  position: relative;
  /*要素の位置をずらす(相対関係)*/
  top: 3pt;
  /*要素の位置を下に3ptずらす*/
  left: 3pt;
  /* 要素の位置を右に3ptずらす */
}


/*
------------------------------------------------------------------------------------------------------------
コンテナー（HPを囲むブロック）のCSS
------------------------------------------------------------------------------------------------------------
*/

#container {
  width: 1440px;
  /*コンテナー幅*/
  background-color: #fff;
  /*背景色設定*/
  border-left: 1px solid #ccc;
  /*左外枠の設定*/
  border-right: 1px solid #ccc;
  /*右外枠の設定*/
  text-align: center;
  margin: 0 auto;
  /*外側の余白設定*/
  overflow: hidden;
}


@media only screen and (max-width: 768px) {
  #container {
    width: 750px;
  }
}



/*
------------------------------------------------------------------------------------------------------------
CTA周り
------------------------------------------------------------------------------------------------------------
*/
.contact-wrap {
  display: flex;
  flex-direction: column; /* ←縦並び */
  align-items: center; /* ←中央寄せ */
}

/* center クラスの要素が inline のままだと中央寄せしづらいので block 化 */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 画像の横幅調整（必要なら） */
/* .contact-wrap img {
  max-width: 100%;
} */

.contact-wrap {
  width: 100%;
  height: 469px;
  background-image: url(../images/cta-gray-bg-pc.png);
  padding-top: 180px;
}

@media only screen and (max-width: 768px) {
  .contact-wrap {
    width: 100%;
    height: 441px;
    background-image: url(../images/cta-gray-bg-sp.png);
    padding-top: 180px;
  }
  
}

.cta-bg {
  background-image: url(../images/cta-title-pc.png);
  width: 100%;
  height: 565px;
  padding-top: 300px;
}
@media only screen and (max-width: 768px) {
  .cta-bg {
    background-image: url(../images/cta-title-sp.png);
    width: 100%;
    height: 605px;
    padding-top: 330px;
  }
}


/*
------------------------------------------------------------------------------------------------------------
フッターの設定
------------------------------------------------------------------------------------------------------------
*/
footer {
	width: 100%;
	margin: 0 auto;
	font-size: 35%;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 30px;
	color: #fff;
	position: relative;
	background-color: #393939;
	font-size: 90%;
}

footer a {
	color: #fff;
	margin: 10px 0;
  font-size: 14px;
}

footer p {
	margin: 15px 0;
}

.copy {
	color: #fff;
	font-size: 70%;
	text-align: center;
}

.copy a {
	text-decoration: underline;
	color: #ffffd0;
}


/*
------------------------------------------------------------------------------------------------------------
魔法の言葉
------------------------------------------------------------------------------------------------------------
*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }
}

/*
===================================================================================================================================
スマホ版のCSS
===================================================================================================================================
*/

*/ footer {
  /*mobile*/
  width: 100%;
  /*横幅設定*/
  font-size: 60%;
  /*文字サイズ*/
  margin-bottom: 0px;
  /*外側下の余白設定*/
}

.footer__inner li {
  font-size: 120%;
}

/*
------------------------------------------------------------------------------------------------------------
全体の装飾詳細設定
------------------------------------------------------------------------------------------------------------
*/

/* -------      位置       -------- */
.center { text-align: center;}
.left { text-align: left; }
.right { text-align: right; }


/* -------      マージン       -------- */
.mt10 { margin-top: 10px;}
.mt20 { margin-top: 20px;}
.mt30 { margin-top: 30px;}
.mt40 { margin-top: 40px;}
.mt50 { margin-top: 50px;}
.mt60 { margin-top: 60px;}
.mt70 { margin-top: 70px;}
.mt80 { margin-top: 80px;}
.mt90 { margin-top: 90px;}
.mt100 { margin-top: 100px;}

.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }
.mr50 { margin-right: 50px; }
.mr60 { margin-right: 60px; }
.mr70 { margin-right: 70px; }
.mr80 { margin-right: 80px; }
.mr90 { margin-right: 90px; }
.mr100 { margin-right: 100px; }

.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }
.ml60 { margin-left: 60px; }
.ml70 { margin-left: 70px; }
.ml80 { margin-left: 80px; }
.ml90 { margin-left: 90px; }
.ml100 { margin-left: 100px; }

/* -------      パディング       -------- */
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }

.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr70 { padding-right: 70px; }
.pr80 { padding-right: 80px; }
.pr90 { padding-right: 90px; }
.pr100 { padding-right: 100px; }

.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb50 { padding-bottom: 50px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }


.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl90 { padding-left: 90px; }
.pl100 { padding-left: 100px; }