/* ------------------------------------------------
   util
*/
/* ------------------------
   btn/anchor
*/
.btn:hover,
.like-a:hover {
  opacity: .7;
}
.btn,
.like-a {
  cursor: pointer;
}
a.-block {
  display: block;
}
.btn,
.btn a,
a.-block {
  color: inherit;
  text-decoration: none;
}
.btn {
  display: inline-block;
  text-align: center;
  line-height: 1.5;
  padding: .25em 1em;
  border-radius: 2em;
  font-weight: bold;
  color: #000;
  background: #FFF;
}
.btn.-round {
  border-radius: .5em;
}
.btn.-border {
  border: 2px solid #000;
}
.btn.-primary {
  min-width: 140px;
  padding: 1em 2em;
  color: #FFF;
  background: linear-gradient(to bottom right, #B30A1B 50%, #9C0117 50%);
}

/* ------------------------
   clearfix
*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* ------------------------
   reset
*/
.reset,
.reset * {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.reset {
  font-size: 100%;
  line-height: 0;
}
.reset * {
  font-size: inherit;
  line-height: inherit;
}

.txt-red {
  color: #B30A1B;
}

/* color
.txt-black { color: #000; } .bg-black { background-color: #000; }
.txt-yblack { color: #150303; } .bg-yblack { background-color: #150303; }
.txt-lblack { color: #212121; } .bg-lblack { background-color: #212121; }
.txt-gray { color: #676767; } .bg-gray { background-color: #676767; }
.txt-ddwhite { color: #EEE; } .bg-ddwhite { background-color: #EEE; }
.txt-dwhite { color: #FAFAFA; } .bg-dwhite { background-color: #FAFAFA; }
.txt-white { color: #FFF; } .bg-white { background-color: #FFF; }
.txt-pickup { color: #D13B41; } .bg-pickup { background-color: #D13B41; }

.txt-twitter { color: #55acee; } .bg-twitter { background-color: #55acee; }
.txt-facebook { color: #3B5998; } .bg-facebook { background-color: #3B5998; }
.txt-instagram { color: #d93177; } .bg-instagram { background-color: #d93177; }
.txt-line { color: #00b900; } .bg-line { background-color: #00b900; }
.txt-youtube { color: #cd201f; } .bg-youtube { background-color: #cd201f; }
 */
.txt-left {text-align: left;}
.txt-center {text-align: center;}
.txt-right {text-align: right;}

@media screen and (min-width: 768px) {
  .pctb-txt-left {text-align: left;}
  .pctb-txt-center {text-align: center;}
  .pctb-txt-right {text-align: right;}
}
@media screen and (max-width: 767px) {
  .sp-txt-left {text-align: left;}
  .sp-txt-center {text-align: center;}
  .sp-txt-right {text-align: right;}
}


/* ------------------------
   box 
*/
.box {
  padding: 15px;
}
.box.-border {
  border: 1px solid #EEE;
  border-radius: 3px;
}
.box.-bg {
  background: #F6F6F6;
  border-radius: 3px;
}

/* ------------------------
   flex
*/
.flex {
  display: flex;
}
.flex.-between {
  justify-content: space-between;
}
.flex.-wrap {
  flex-wrap: wrap;
}

/* ------------------------
   device
*/
@media screen and (min-width: 1024px) {
  .sptb-only,
  .tb-only,
  .sp-only {
    display: none !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .pc-only,
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc-only,
  .tb-only,
  .pctb-only {
    display: none !important;
  }
}

/* ------------------------------------------------
 */
@media screen and (min-width: 768px) {
  .figcnt,
  .pctb-figcnt {
    display: flex;
    justify-content: space-between;
  }
  .figcnt > *,
  .pctb-figcnt > * {
    flex: 0 0 48%;
  }
  .figcnt.-overlap .-fig,
  .pctb-figcnt.-overlap .-fig{
    flex: 0 0 65%;
  }
  .figcnt.-overlap > :last-child,
  .pctb-figcnt.-overlap > :last-child {
    margin-left: -17%;
  }
  .figcnt.-overlap .-cnt,
  .pctb-figcnt.-overlap .-cnt {
    margin-top: 30px;
    z-index: 2;
  }
  .figcnt.-fig-right .-fig,
  .pctb-figcnt.-fig-right .-fig {
    order: 2;
  }
  .sp-figcnt > :first-child {
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 767px) {
  .figcnt,
  .sp-figcnt {
    display: flex;
    justify-content: space-between;
  }
  .figcnt > *,
  .sp-figcnt > * {
    flex: 0 0 48%;
  }
  .figcnt.-overlap .-fig,
  .sp-figcnt.-overlap .-fig{
    flex: 0 0 65%;
    margin-left: -17%;
  }
  .figcnt.-overlap .-cnt,
  .sp-figcnt.-overlap .-cnt {
    z-index: 2;
  }
  .figcnt.-fig-right .-fig,
  .sp-figcnt.-fig-right .-fig {
    order: 2;
  }
  .pctb-figcnt > :first-child {
    margin-bottom: 20px;
  }
}

/* ------------------------------------------------
 */
.img-list,
.card-list,
.txt-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}
.img-list > li,
.card-list > li,
.txt-list > li {
  margin: 0;
}
.card-list .-fig {
  line-height: 0;
}
.card-list .-cnt {
  line-height: 1.5;
}  
.card-list dt {
  font-weight: bold;
  margin-top: 0;
}
.card-list dd {
  margin-bottom: 0;
}
.img-list a,
.card-list a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.img-list a {
  background-size: cover;
  background-repeat:  no-repeat;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .card-list dd {
    font-size: 14px;
  }
}
@media screen and (max-width: 767px) {
  .card-list dt {
    font-size: 14px;
  }
  .card-list dd {
    font-size: 12px;
  }
}
@media screen and (min-width: 1024px) {
  .pc-tile-3 {
    display: flex;
    flex-wrap: wrap;
  }
  .pc-tile-3 > * {
    flex: 0 0 32%;
    max-width: 32%;
  }
  .pc-tile-3 > *:not(:nth-child(3n)) {
    margin-right: 2%;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .tb-tile-2 {
    display: flex;
    flex-wrap: wrap;
  }
  .tb-tile-2 > * {
    flex: 0 0 49%;
    max-width: 49%;
  }
  .tb-tile-2 > :not(:nth-child(2n)) {
    margin-right: 2%;
  }
}
@media screen and (min-width: 768px) {
  .pctb-tile-2,
  .pctb-tile-3,
  .pctb-tile-4,
  .pctb-tile-5,
  .pctb-tile-7 {
    display: flex;
    flex-wrap: wrap;
  }
  .pctb-tile-2 > * {
    flex: 0 0 49%;
    max-width: 49%;
  }
  .pctb-tile-2.-full > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .pctb-tile-2 > :not(:nth-child(2n)) {
    margin-right: 2%;
  }
  .pctb-tile-2.-full > * {
    margin-right: 0 !important;
  }
  .pctb-tile-3 > * {
    flex: 0 0 32%;
    max-width: 32%;
  }
  .pctb-tile-3 > *:not(:nth-child(3n)) {
    margin-right: 2%;
  }
  .pctb-tile-4 > * {
    flex: 0 0 23%;
    max-width: 23%;
  }
  .pctb-tile-4 > *:not(:nth-child(4n)) {
    margin-right: 2.6%;
  }
  .pctb-tile-5 > * {
    flex: 0 0 18.4%;
    max-width: 18.4%;
  }
  .pctb-tile-5 > *:not(:nth-child(5n)) {
    margin-right: 2%;
  }
  .pctb-tile-7 > * {
    flex: 0 0 13%;
    max-width: 13%;
  }
  .pctb-tile-7 > *:not(:nth-child(7n)) {
    margin-right: 1.5%;
  }
}
@media screen and (max-width: 767px) {
  .sp-tile-2,
  .sp-tile-3 {
    display: flex;
    flex-wrap: wrap;    
  }
  .sp-tile-2 > * {
    flex: 0 0 49%;
    max-width: 49%;
  }
  .sp-tile-2 > *:not(:nth-child(2n)) {
    margin-right: 2%;
  }
  .sp-tile-3 > * {
    flex: 0 0 32%;
    max-width: 32%;
  }
  .sp-tile-3 > *:not(:nth-child(3n)) {
    margin-right: 2%;
  }
}

/* ------------------------------------------------
 */
.point {
  background: #000;
  color: #FFF;
  display: inline-block;
  padding: 0 1.8em;
  clip-path: polygon(.5em 0%, 100% 0%, 100% 100%, 0% 100%);
  margin-bottom: 1em;
}

/* ------------------------------------------------
 */
.yt-wrapper {
  position: relative;
  width: 100%;
}
.yt-wrapper:before {
  content:"";
  display: block;
  padding-top: 56.25%;
}
.yt-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------
 */
.tbl {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
.tbl th,
.tbl td {
  border: 1px solid #EEE;
}
.tbl th {
  background: #F6F6F6;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .tbl table {
    border-spacing: 5px;
  }
  .tbl td,
  .tbl th {
    padding: 10px 30px;    
  }
}
@media screen and (max-width: 767px) {
  .tbl table {
    border-spacing: 3px;
  }
  .tbl td,
  .tbl th {
    padding: 5px 10px;    
  }
}

/* ------------------------------------------------
 */
.js-modal-trigger {
  cursor: pointer;
}
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 900;
}
.modal .-back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.4);
}
.modal .-container {
  position: absolute;
  z-index: 999;
  
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
  max-width: 900px;
  max-height: 80%;
  background: #FFF;

  overflow-y: scroll;
}
.modal .-closer {
  background: url(../images/LafEpAaEXkXX.png) no-repeat;
  background-size: 24px;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .modal .-container {
    padding: 50px 40px 40px;
  }
  .modal dt {
    font-size: 32px;
  }
}
@media screen and (max-width: 767px) {
  .modal .-container {
    padding: 40px 20px 20px;
  }
  .modal dt {
    font-size: 16px;
  }
}

dl.caution-box {
  border: 3px solid #FAE2E2;
}
.caution-box dt {
  background: #FAE2E2;
  color: #F01212;
}
.caution-box dt img {
  vertical-align: text-bottom;
}
.caution-box dt,
.caution-box dd {
  margin: 0;
  padding: .5em 1em;
}

/* ------------------------------------------------
 */
#ez-toc-container .ez-toc-title {
  border-bottom: 1px solid #AAA;
  margin-bottom: .5em;
  padding-bottom: .5em;
  display: block !important;
}
