@charset "utf-8";
/*使用する文字コード*/
@import url(//use.fontawesome.com/releases/v5.0.11/css/all.css);


/* ブラウザの標準に設定されている、htmlタグの設定をクリア */
BODY,
H1,
H2,
H3,
H4,
H5,
H6,
P,
TH,
TD,
OL,
UL,
LI,
DL,
DT,
DD,
FORM,
PRE {
  /* Netscape6 は * が未対応なので、全てのタグを記述して指定 */
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

BODY {
  background-color: #FFFFFF;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

H1,
H2,
H3,
H4,
H5,
H6,
P {
  font-size: 100%;
  font-weight: normal;
}

BODY,
H1,
H2,
H3,
H4,
H5,
H6,
P,
TD,
TH,
DIV,
INPUT,
TEXTAREA,
OL,
UL,
LI,
PRE {
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  line-break: strict;
}

IMG {
  border: none;
}

OL {
  padding-left: 0;
}

UL {
  padding-left: 0;
  list-style: none;
}

a {
  text-decoration: none;
  box-sizing: border-box;
}

HR {
  height: 1px;
  border-width: 0px 0px 1px 0px;
  color: #000000;
}

TABLE {
  border-collapse: collapse;
}

TH {
  text-align: left;
  font-weight: normal;
}

IMG {
  vertical-align: bottom;
}

.clearfix{
  display: block;
}


/*フレックス*/

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
}

.flexs {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flexb {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.columnreverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/*align-item*/

.itemstart {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.itemcenter {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.itemend {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
}

/*align-content*/

.contentstart {
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
}

.contentcenter {
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

.contentend {
  -webkit-align-content: flex-end;
  -ms-flex-line-pack: end;
  align-content: flex-end;
}

/*align-self*/

.selfstart {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.selfcenter {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}

.selfend {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

/* 見たまま編集バリデーション */

.flex>div[data-collection-list-content],
.flexc>div[data-collection-list-content],
.flexs>div[data-collection-list-content],
.flexb>div[data-collection-list-content] {
  width: 100%;
}

.flex>div[data-recommend-collection-list-content],
.flexc>div[data-recommend-collection-list-content],
.flexs>div[data-recommend-collection-list-content],
.flexb>div[data-recommend-collection-list-content] {
  width: 100%;
}

.flex>div[data-collection-filtered-content],
.flexc>div[data-collection-filtered-content],
.flexs>div[data-collection-filtered-content],
.flexb>div[data-collection-filtered-content] {
  width: 100%;
}

.flex>div[data-collection-archive-content],
.flexc>div[data-collection-archive-content],
.flexs>div[data-collection-archive-content],
.flexb>div[data-collection-archive-content] {
  width: 100%;
}

.flex>div[data-collection-list-content] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexc>div[data-collection-list-content] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
}

.flexs>div[data-collection-list-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flexb>div[data-collection-list-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex>div[data-recommend-collection-list-content] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexc>div[data-recommend-collection-list-content] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
}

.flexs>div[data-recommend-collection-list-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flexb>div[data-recommend-collection-list-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex>div[data-collection-filtered-content] {
  display: -webkit-box;
  display: -ms-flexsbox;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexc>div[data-collection-filtered-content] {
  display: -webkit-box;
  display: -ms-flexsbox;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
}

.flexs>div[data-collection-filtered-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexsbox;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flexb>div[data-collection-filtered-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexsbox;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.flex>div[data-collection-archive-content] {
  display: -webkit-box;
  display: -ms-flexsbox;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexc>div[data-collection-archive-content] {
  display: -webkit-box;
  display: -ms-flexsbox;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
}

.flexs>div[data-collection-archive-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexsbox;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.flexb>div[data-collection-archive-content] {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexsbox;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

[data-element-id] [class*="heightLine"] {
  height: auto !important;
}

/*---------- 幅  ----------*/

.w100 {
  width: 100%;
}

.w80 {
  width: 80%;
}

.w70 {
  width: 70%;
}

.w68 {
  width: 68%;
}

.w65 {
  width: 65%;
}

.w60 {
  width: 60%;
}

.w55 {
  width: 55%;
}

.w50 {
  width: 50%;
}

.w48 {
  width: 48%;
}

.w46 {
  width: 46%;
}

.w45 {
  width: 45%;
}

.w40 {
  width: 40%;
}

.w38 {
  width: 38%;
}

.w35 {
  width: 35%;
}

.w34 {
  width: 34%;
}

.w30 {
  width: 30%;
}

.w27 {
  width: 27%;
}

.w25 {
  width: 25%;
}

.w23 {
  width: 23%;
}

hr {
  display: block;
  unicode-bidi: isolate;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  overflow: hidden;
  border-style: inset;
  border-width: 1px;
}

/*---------------------------*/
.bkimg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: -1;
}
.bkimg img {
  width: 100%;
  height: 100%;
  min-width: 1200px;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  font-family: 'object-fit: cover; object-position: center center;';
}

.bkimg.top img{
  object-position: top center;
  font-family: 'object-fit: cover; object-position: top center;';
}

/*_______________________________________
  
  object-fit
  _______________________________________*/
.of_img {
  overflow: hidden;
  position: relative;
  display: block;
}

.of_img img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100% !important;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
  font-family: 'object-fit: cover; object-position: center center;';
}

.of_img img.top-p img{
  -o-object-position: top center;
  object-position: top center;
  font-family: 'object-fit: cover; object-position: top center;';
}

.of_img:before {
  content: '';
  display: block;
}

.of_img.fit20:before {
  padding-top: 20%;
}

.of_img.fit25:before {
  padding-top: 25%;
}

.of_img.fit30:before {
  padding-top: 30%;
}

.of_img.fit35:before {
  padding-top: 35%;
}

.of_img.fit40:before {
  padding-top: 40%;
}

.of_img.fit48:before {
  padding-top: 48%;
}

.of_img.fit50:before {
  padding-top: 50%;
}

.of_img.fit55:before {
  padding-top: 55%;
}

.of_img.fit60:before {
  padding-top: 60%;
}

.of_img.fit65:before {
  padding-top: 65%;
}

.of_img.fit70:before {
  padding-top: 70%;
}

.of_img.fit75:before {
  padding-top: 75%;
}

.of_img.fit80:before {
  padding-top: 80%;
}

.of_img.fit85:before {
  padding-top: 85%;
}

.of_img.fit90:before {
  padding-top: 90%;
}

.of_img.fit95:before {
  padding-top: 95%;
}

.of_img.fit100:before {
  padding-top: 100%;
}

.of_img.fit110:before {
  padding-top: 110%;
}

.of_img.fit120:before {
  padding-top: 120%;
}

.of_img.fit110:before {
  padding-top: 130%;
}

.of_img.fit120:before {
  padding-top: 120%;
}

.of_img.fit130:before {
  padding-top: 130%;
}

.of_img.fit140:before {
  padding-top: 140%;
}

.of_img.fit150:before {
  padding-top: 150%;
}

.z1 {
  position: relative;
  z-index: 1;
}