.freespace_wrapper {
  display: flex;

  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;

  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: flex-start;
  -ms-flex-wrap: flex-start;
  -o-flex-wrap: flex-start;
  flex-wrap: wrap;

}

.theme_selected {
  width: 100%;
  position: relative;
  margin-bottom: 4px;
}

.theme_other_l {
  width: calc(50% - 2px);
  position: relative;
  margin-right: 2px;
}


.theme_other_r {
  width: calc(50% - 2px);
  position: relative;
  margin-left: 2px;
}

.theme_selected > img, .theme_other_l > img, .theme_other_r > img{
  width: 100%;
}

.theme_other_inner > a {
  z-index: 2;
}

.shader_selected{
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background: #000000;
  opacity: 0.25;
}


.shader{
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  background: #000000;
  opacity: 0.5;
  transition: opacity 0.4s;
}

.theme_selected_inner, .theme_other_inner{
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.def_text {
    width: 100%;
    color: #ffffff;
    margin: auto !important;
    text-align: center;
    z-index: 1;
    opacity: 1;
}

.def_text_selected {
  padding: 1% 0
}

.def_text_selected >span:nth-child(3){
  margin-top: 18px;
}

.def_text_other {
  padding: 1% 0 3%;
}

.def_text > span {
  padding: 0 10%;
  display: block;
}

.alt_text {
  position: absolute;
  bottom: 10%;
  opacity: 0;
  width: 0;
  z-index: 1;
  color: #ffffff;
}


.theme_other_l:hover > .theme_other_inner > .shader {
  opacity: 0.2;
}

.theme_other_l:hover > .theme_other_inner > .alt_text {
  opacity: 1;
  width: 100%;
  transition: opacity 0.4s 0.2s, width 0s 0.2s;
}

.theme_other_r:hover > .theme_other_inner > .shader {
  opacity: 0.2;
}

.theme_other_r:hover > .theme_other_inner > .alt_text {
  opacity: 1;
  width: 100%;
  transition: opacity 0.4s 0.2s, width 0s 0.2s;
}

/* カテゴリ・グループのフリースペース内全体の指定 */
.cg_freespace_01 {
  padding:0;
  /* margin:20px 0 20px 0; */
}
.cg_freespace_02 {
  padding:0;
  margin:20px 0 20px 0;
}
/* カテゴリ・グループのフリースペース内の<p>タグの余白設定 */
.cg_freespace_01 p,
.cg_freespace_02 p {
  margin:0 0 10px 0;
}
/* カテゴリ・グループのフリースペース内の<ul>タグの余白設定 */
.cg_freespace_01 ul,
.cg_freespace_02 ul {
  margin:0 0 10px 20px;
  padding:0;
}

#sub_text{
  text-align:center;
  font-size:20px;
}


/* for top-group */
.subsection_tg{
  width: 960px;
  margin: 5px auto;
  display: flex;
}

.subsection_tg div{
  position: relative;
}

.subsection_tg > div > .ss_one_section > a {
  z-index: 2;
}

.subsection_tg > div > div.ss_one_section > .shader{
  background: #000000;
  opacity: 0.5;
  transition: opacity 0.4s;
}

.subsection_tg > div > div.ss_one_section > p.alt_text{
  position: absolute;
  bottom: 10%;
  opacity: 0;
  width: 0;
  padding: 1% 0;
  z-index: 1;
  transition: opacity 0.4s, width 0s 0.4s;
}

.subsection_tg > div > div.ss_one_section:hover > p.alt_text{
  opacity: 1;
  width: 100%;
  transition: opacity 0.4s 0.4s, width 0s 0.4s;
}

.subsection_tg > div > div.ss_one_section:hover > .shader{
  opacity: 0.3;
}

.subsection_tg > div.ss_one_section p {
  color: white;
  margin: auto;
  text-align: center;
  padding: 1% 0;
}

.subsection_tg > div.ss_one_section p span {
  padding: 0 10%;
  display: block;
  margin-top: 18px;
}

.subsection_tg div img{
  width: 100%;
}

.subsection_tg div div{
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;

}

.subsection_tg > div > div.ss_one_section > p.def_text{
  z-index: 1;
  opacity: 1;
  transition: opacity 0.4s 0.4s;
}

.subsection_tg > div > div.ss_one_section > p.def_text > span:nth-child(1){
  margin-bottom: 14px;
}