@CHARSET "UTF-8";



/**********************************************************************
* [mainvisual]
**********************************************************************/
.mainvisual {
 position: relative;
}

.main-image img {
 width: 100%;
 height: auto;
 margin: 0 auto;
}

.girls-text {
 position: absolute;
 bottom: 20%;
 left: 5%;
}

.girls-text h1 {
 padding: 0;
 color: #333;
 font-weight: normal;
}

.girls-text h1 .title {
 font-size: 36px;
 margin-bottom: -0.3em;
}

.girls-text h1 .index {
 display: block;
 font-size: 14px;
}

@media (min-width: 768px) {
 .girls-text {
  left: 8%;
 }

 .girls-text h1 .title {
  font-size: 42px;
 }

 .girls-text h1 .index {
  font-size: 16px
 }
}

@media (min-width: 992px) {
 .girls-text {
  left: 10%;
 }
 
 .girls-text h1 .title {
  font-size: 63px;
 }

 .girls-text h1 .index {
  font-size: 22px;
 }
}

/**********************************************************************
* [Cherish Girls]
**********************************************************************/
.cherish-girls {
 margin: 4% 0;
}

.h2-title {
 color: #aad4f1;
 font-size: 1.5em;
 font-weight: normal;
}

.sub-title {
 color: #ebafce;
 font-size: 1.2em;
}

.text {
 color: #333;
 font-size: 1.0em;
}

/**********************************************************************
* [Girls一覧]
**********************************************************************/
.girls-list {
 display: flex;
 margin-top: 1.5em;
 margin-left: -1em;
 flex-wrap: wrap;
 justify-content: space-between;
 }
 
.girls-list .person {
 background-color: #ddd;
 padding: 4%;
}

.girls-list .person img {
 width: 100%;
}

.girls-list .person .girl-name {
 position: absolute;
 background-color: rgba(255,255,255,0.7);
 bottom: 0;
 left: 0;
 right: 0;
 margin: 4%;
 text-align: center;
}

.girls-list .col {
 display: inline-block;
 position: relative;
 width: 100%;
 margin-bottom: 1em;
 margin-left: 1em;
 overflow: hidden; /* 画像をズームした場合のはみ出た部分を非表示 */
}

.girls-list .col-sm {
 width: 44.95%;
}

.empty {
 height: 0;
 padding-top: 0;
 padding-bottom: 0;
 margin-top: 0;
 margin-bottom: 0;
}

@media (min-width: 768px) {
 .girls-list .col-sm {
  width: 30.4%;
 }
}

@media (min-width: 992px) {
 .girls-list .col-sm {
  width: 17.48%;
 }
}

@media (min-width: 1170px) {
 .girls-list .col-sm {
  width: 17.86%;
 }
}

/**********************************************************************
* [footer]
**********************************************************************/
footer {
 margin-top: 7%;
}