@charset "UTF-8";

/*detail*/
.detail {
  /*width: 90vw;*/
  padding: 0 15px;
  margin: 0 auto; }
@media (min-width: 1024px) {
   }
.detail dl dt {
  margin: 10px 0 0 0;
  font-size: 2rem;
  font-weight: 500; }
.detail dl dd.date {
  color: cl-dark-gray;
  font-size: 1.2rem; }
.detail dl dd.date i {
  margin-right: 5px;
  font-size: 1.3rem; }
.detail dl dd.content {
  margin: 20px 0; }

/*detail point*/
.point {
  margin: 0 auto;
  padding: 0 15px;
  counter-reset: sections boxes; }
@media (min-width: 1024px) {
  .point {
    } }
.point .point-box {
  display: flex;
  justify-content: space-between;
  counter-increment: boxes;
  position: relative;
  border: 1px solid #CACACA;
  background: white;
  margin: 100px 0;
  flex-direction: column; }
@media (min-width: 1024px) {
  .point .point-box {
    margin: 150px 0;
    flex-direction: row-reverse; } }
.point .point-box img {
  width: 100%; }
@media (min-width: 1024px) {
  .point .point-box img {
    width: 45%; } }
.point .point-box .point-inner {
  width: 100%;
  padding: 20px; }
@media (min-width: 1024px) {
  .point .point-box .point-inner {
    width: 55%; } }
.point .point-box .point-inner h2 {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 300; }
.point .point-box:before {
  content: "POINT" counter(boxes,decimal-leading-zero);
  font-family: 'Fjalla One', sans-serif;
  font-weight: 400;
  color: #F4F5F7;
  position: absolute;
  display: block;
  top: -91px;
  z-index: -1;
  left: 0;
  right: inherit;
  font-size: 7rem; }
@media (min-width: 1024px) {
  .point .point-box:before {
    font-size: 11rem;
    top: -140px; } }
.point .point-box:nth-child(odd) {
  flex-direction: column; }
@media (min-width: 1024px) {
  .point .point-box:nth-child(odd) {
    flex-direction: row; } }
.point .point-box:nth-child(odd):before {
  right: 0;
  left: inherit; }