@charset "UTF-8";
/*
@mixin reserve-off{ background: #a88600;
}
@mixin reserve-on{ background: #c3a221;
}
*/
@import url(reset.css);
#main { position: relative; }
#main img { width: 100%; height: auto; }
#main .note { position: absolute; right: 0; bottom: 0; line-height: 1; padding: 5px; }

.contents { padding: 5rem 0; background: url("../images/hulicism/bg01@2x.jpg") right 2rem no-repeat; background-size: 765px 1390px; }

section { max-width: 960px; margin: auto; }

#overview { text-align: center; }
#overview .mainCopy { margin-top: 5rem; }

.point { margin-top: 70px; }
.point::after { content: ''; display: block; clear: both; }
.point .title::after { content: ''; display: block; clear: both; }
.point .title .number { font-family: 'Oswald', sans-serif; -webkit-font-smoothing: antialiased; font-feature-settings: "palt"; font-weight: 300; color: #bcaf75; font-size: 80px; line-height: 1; float: left; display: inline-block; letter-spacing: 0.4rem; margin-top: -15px; margin-right: 10px; }
.point .title .en { font-size: 14px; }
.point .title .jp { font-size: 30px; margin-top: 0.3rem; line-height: 1.4; }
.point .subTitle { color: #bcaf75; font-size: 18px; margin-top: 1.6rem; line-height: 1.2; }
.point .bodyCopy { font-size: 0.85rem; line-height: 2.3; margin-top: 1rem; }
.point .img { text-align: center; }
.point .img img { max-width: 100%; height: auto; }

#point01 .detail { display: flex; justify-content: space-between; flex-flow: row wrap; }
#point01 .detail01, #point01 .detail02 { width: 46.87%; }
#point01 .img { margin-top: 1rem; position: relative; }
#point01 .detail02 .img { max-width: 458px; margin-left: auto; margin-right: auto; }
#point01 .note { color: #222222; position: absolute; right: 5px; bottom: 5px; }

#point02 .detail { display: flex; justify-content: space-between; flex-flow: row wrap; }
#point02 .copy { width: 55.41%; }
#point02 .sample { margin-top: 2rem; }
#point02 .sample .miniTitle { font-size: 0.85rem; }
#point02 .sample .list { border: 1px solid #2f2f2f; font-size: 0.85rem; margin-top: 1rem; padding: 30px 25px; }
#point02 .sample .list li { position: relative; padding-left: 2em; counter-increment: li; margin-top: 1rem; line-height: 1.2; }
#point02 .sample .list li:first-child { margin-top: 0; }
#point02 .sample .list li:before { content: counter(li); display: block; position: absolute; top: 0; left: 0; color: #000; font-size: 12px; line-height: 1; background-color: #bcaf75; width: 14px; height: 14px; border-radius: 50% 50%; text-align: center; }
#point02 .sample .note { margin-top: 0.5rem; }
#point02 .img { width: 36.45%; }

#point03 .detail { display: flex; justify-content: space-between; flex-flow: row wrap; }
#point03 .copys { width: 44.79%; }
#point03 .copys .detail02 { margin-top: 2.5rem; }
#point03 .img { width: 50%; }
#point03 .img .note { text-align: right; margin-top: 1rem; }
#point03 .detail02 .note { margin-top: 1rem; }

#point04 .imgs { color: #000; background-color: #fff; padding: 40px; display: flex; justify-content: space-between; flex-flow: row wrap; margin-top: 2rem; }
#point04 .imgs .miniTitle { font-size: 0.85rem; margin-bottom: 1rem; text-align: left; }
#point04 .imgs .miniTitle:before { content: '■'; }
#point04 .imgs .note { text-align: right; margin-top: 1rem; }
#point04 .imgs .img01 { width: 62.28%; }
#point04 .imgs .img02 { width: 30.86%; }

#point05 .detail { display: flex; justify-content: space-between; flex-flow: row wrap; }
#point05 .copy { width: 72.91%; }
#point05 .img { width: 21.97%; margin-top: 1rem; }

@media screen and (max-width: 768px) { .point .title .number { font-size: 60px; margin-top: -12px; margin-right: 8px; }
  .point .title .en { font-size: 10px; }
  .point .title .jp { font-size: 24px; margin-top: 6px; margin-top: 0.1rem; }
  #point01 .detail01, #point01 .detail02 { width: 100%; }
  #point02 .copy { width: 100%; }
  #point02 .img { width: 100%; margin-top: 2rem; }
  #point03 .copys { width: 100%; }
  #point03 .copys .detail02 { margin-top: 1rem; }
  #point03 .img { width: 100%; margin-top: 2rem; } }
@media screen and (max-width: 480px) { #point04 .imgs { padding: 30px; }
  #point04 .imgs .img01, #point04 .imgs .img02 { width: 100%; }
  #point04 .imgs .img02 { margin-top: 1rem; }
  #point05 .copy, #point05 .img { width: 100%; } }

/*# sourceMappingURL=hulicism.css.map */