テンプレート | 株式会社Ace

見出し

  • 見出し1

    SYSTEM料金システム

    コードを表示

    HTML

    <h2 class="ace500_m1">SYSTEM<span class="ace500_s1">料金システム</span></h2>

    CSS

    /* 見出し1 */
h2.ace500_m1 {
  text-align: center;
  line-height: 1.6;
  margin: -10px 0 40px 0;
  padding-top: 12px;
  font-size: 38px;
  color: #634f32;
  font-family: 'Noto Serif JP', serif;
}

span.ace500_s1 {
  display: block;
  font-size: 50%;
}

@media screen and (max-width: 750px) {
  h2.ace500_m1 {
    font-size: 22px;
    margin: -10px 0 30px 0;
  }
}

  • 見出し2

    わずか30分でOK！

    油圧式マシン（上半身30秒）→ランニングボード（30秒）→油圧式マシン（下半身30秒）→ランニングボード（30秒）…
    ひとつのフィットネストレーニングは30秒のみのため体への負担が少なく、上半身・下半身を交互に鍛えるためバランスの取れた体になります。
    8分に一度心拍数を計り、もっとも脂肪が燃焼する状態に達しているかを確認します。

    コードを表示

    HTML

    <div class="ace502_cm1">
  <h3 class="ace502_m1">わずか30分でOK！</h3>
  <div class="ace502_cm2">
    <p class="ace502_t1">
      油圧式マシン（上半身30秒）→ランニングボード（30秒）→油圧式マシン（下半身30秒）→ランニングボード（30秒）…<br>
      ひとつのフィットネストレーニングは30秒のみのため体への負担が少なく、上半身・下半身を交互に鍛えるためバランスの取れた体になります。<br>
      8分に一度心拍数を計り、もっとも脂肪が燃焼する状態に達しているかを確認します。
    </p>
  </div>
</div>

    CSS

    /*見出し2*/
h3.ace502_m1 {
  color: #634f32;
  font-size: 25px;
  font-weight: bold;
  border-bottom: solid 2px #634f32;
  padding: 0 0 5px 30px;
  margin: 3em 0 5px 0;
  font-family: 'Noto Serif JP', serif;
}

.ace502_cm2 {
  margin: 10px 30px 20px 30px;
}

@media screen and (max-width: 750px) {
  h3.ace502_m1 {
    font-size: 16px;
    padding: 0 0 5px 5px;
    margin: 0 0 5px 0;
  }

  .ace502_cm2 {
    margin: 10px 10px 20px;
  }

  p.ace502_t1 {
    font-size: 12px;
  }
}

  • 見出し3

    わずか30分でOK！

    油圧式マシン（上半身30秒）→ランニングボード（30秒）→油圧式マシン（下半身30秒）→ランニングボード（30秒）…
    ひとつのフィットネストレーニングは30秒のみのため体への負担が少なく、上半身・下半身を交互に鍛えるためバランスの取れた体になります。
    8分に一度心拍数を計り、もっとも脂肪が燃焼する状態に達しているかを確認します。

    コードを表示

    HTML

    <div class="ace503_cm1">
  <h3 class="ace503_m1">わずか30分でOK！</h3>
  <div class="ace503_cm2">
    <p class="ace503_t1">
      油圧式マシン（上半身30秒）→ランニングボード（30秒）→油圧式マシン（下半身30秒）→ランニングボード（30秒）…<br>
      ひとつのフィットネストレーニングは30秒のみのため体への負担が少なく、上半身・下半身を交互に鍛えるためバランスの取れた体になります。<br>
      8分に一度心拍数を計り、もっとも脂肪が燃焼する状態に達しているかを確認します。
    </p>
  </div>
</div>

    CSS

    /*見出し3*/
h3.ace503_m1 {
  color: #634f32;
  font-size: 25px;
  font-weight: bold;
  border-bottom: solid 2px #634f32;
  padding: 0 0 5px 0;
  margin: 3em 0 5px 0;
  font-family: 'Noto Serif JP', serif;
}

.ace503_cm2 {
  margin: 10px 0 20px 0;
}

@media screen and (max-width: 750px) {
  h3.ace503_m1 {
    font-size: 16px;
    padding: 0 0 5px 0;
    margin: 0 0 5px 0;
  }

  .ace503_cm2 {
    margin: 10px 0 20px;
  }

  p.ace503_t1 {
    font-size: 12px;
  }
}

  • 見出し4

    わずか30分でOK！

    コードを表示

    HTML

    <h3 class="ace504_m1">わずか30分でOK！</h3>

    CSS

    /*見出し4*/
h3.ace504_m1 {
  color: #634f32;
  font-size: 25px;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
  margin-bottom: 1.5em;
}

@media screen and (max-width: 750px) {
  h3.ace504_m1 {
    font-size: 16px;
  }
}

  • 見出し5

    ボディトリートメント

    コードを表示

    HTML

    <h2 class="ace505_m1">ボディトリートメント</h2>

    CSS

    /*見出し5*/
h2.ace505_m1 {
  background-color: #9c7654;
  color: #fff;
  text-align: center;
  font-size: 22px;
  padding: 15px;
  line-height: 2;
  margin-bottom: 1.5em;
  box-shadow: inset 0 0 0 5px #9c7654, inset 0 0 0 6px #fff;
}

@media (max-width: 1151px) {
  h2.ace505_m1 {
    font-size: 18px;
  }
}

@media (max-width: 750px) {
  h2.ace505_m1 {
    padding: 12px;
    line-height: 2.5;
    margin: 0 -20px 20px;
  }
}

  • 見出し6

    ハウスクリーニング業界最安値

    コードを表示

    HTML

    <h3 class="ace506_m1">ハウスクリーニング業界最安値</h3>

    CSS

    /*見出し6*/
#container h3.ace506_m1 {
  color: #267adf;
  font-size: 22px;
  line-height: 1.5;
  padding: 0;
  margin-top: 30px;
  text-align: center;
}

#container h3.ace506_m1::after,
#container h3.ace506_m1::before {
  content: "";
  width: 3px;
  height: 30px;
  background: #267adf;
  display: inline-block;
  margin-bottom: -3px;
}

#container h3.ace506_m1::before {
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
  margin-right: 15px
}

#container h3.ace506_m1::after {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
  margin-left: 15px
}

@media (max-width: 750px) {
  #container h3.ace506_m1 {
    font-size: 16px;
    margin: 1em 0 0.5em;
  }

  #container h3.ace506_m1::after,
  #container h3.ace506_m1::before {
    width: 2px;
    height: 18px
  }
}

  • 見出し7

    テンプレート

    コードを表示

    HTML

    <h3 class="ace500_m210">見出し7</h3>

    CSS

    /*見出し7*/
h2.ace507_m1 {
  position: relative;
  padding: .3em 0 .2em 1em;
  border-bottom: 3px solid #2589d0;
  color: #333333;
}

h2.ace507_m1::before {
  position: absolute;
  top: 0;
  left: .3em;
  transform: rotate(55deg);
  height: 11px;
  width: 12px;
  background: #2589d0;
  content: '';
}

h2.ace507_m1::after {
  position: absolute;
  transform: rotate(15deg);
  top: .6em;
  left: 0;
  height: 8px;
  width: 8px;
  background: #2589d0;
  content: '';
}

  • 見出し8

    アクセスマップ

    コードを表示

    HTML

    <h2 class="ace508_m1" data-en="Access Map">アクセスマップ</h2>

    CSS

    /*見出し8*/
.ace508_m1 {
	position: relative;
	padding-top: 50px;
	padding-bottom: 50px;
	font-size: 26px;
	text-align: center;
	color: #333;
}

.ace508_m1 span {
	position: relative;
	z-index: 2;
}

.ace508_m1::before {
	content: attr(data-en);
	position: absolute;
	top: -58px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(224, 66, 114, 0.2);
	font-size: 80px;
	font-style: italic;
	width: 100%;
}

.ace508_m1::after {
	content: '';
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translate(-50%) rotate(30deg);
	width: 1px;
	height: 40px;
	background-color: rgba(224, 66, 114, 1);
}

@media (max-width: 750px) {
	.ace508_m1::before {
		font-size: 43px;
		top: -23px;
	}

	.ace508_m1::after {
		bottom: -56px;
	}
}