﻿/* =========================================================
  レイアウト
========================================================= */
/* SP */
@media screen and (max-width: 750px) {
  a:hover{opacity:1}
}

@media screen and (min-width: 751px) {
  div.container_ div.contents_{
    display: flex;
    gap: 50px;
  }
  div.mainframe_{width: 100%;}
}  

.u-title-page,
.u-title{margin: 0 0 calc(20 * (100vw / 375)) calc(20 * (100vw / 375));}
.column-40 {gap: 40px;}

.movie-list-articles-count{display: none;}
.movie-container {
  display: flex;
  gap: 35px;
  margin: 50px 0 0;
}

/* movie-facet */
.movie-search-condition .u-form-text-box input[type="text"].u-form-text-h50 {
  height: 50px;
  border: none;
}

.movie-content {margin: 60px 0 0;}
.movie-content .u-title {margin: 0 0 30px;}

/* movie-card */
.movie-card {
  width: 893px;
  padding: 40px 0;
  border-top: 1px solid #ddd;
  display: flex;
}

.movie-card:last-child {border-bottom: 1px solid #ddd;}
.movie-card-logo {
  width: 120px;
  margin: 0 auto;
}
.address-link {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
}
.address-link i {margin-right: 10px;}
.movie-card-deatil {width: 684px;}
.movie-card-deatil h4 {margin: 0;}

/* SP */
@media screen and (max-width: 750px) {
  .movie-container {
    display: block;
    margin: calc(15 * (100vw / 375)) 0 0;
  }

  h2.u-title-page{display: none;}
  .u-title-page,
  .u-title {margin: 0 0 calc(20 * (100vw / 375)) calc(20 * (100vw / 375)) !important;}

  .movie-facet {
    width: 100%;
    margin: 0 0 calc(40 * (100vw / 375)) 0;
  }

  .movie-facet-button {
    margin: calc(20 * (100vw / 375)) 0 calc(40 * (100vw / 375));
    padding: 0 20px;
  }

  .movie-content {margin: calc(40 * (100vw / 375)) 0 calc(60 * (100vw / 375)) 0;}
  .movie-list-inner div.column-40 {
    display: flex;
    flex-direction: column;
    gap: 38px;
    padding: 0 20px;
  }
}

/* PCのみ */
@media screen and (min-width: 751px) {
  .movie-list-inner div.column-40{
    max-width: 893px;
    display: flex;
    gap: 37px 15px;
    flex-wrap: wrap;
  }

  .movie-list-inner div.column-40 .u-card{width: 287px;}
}