@charset "utf-8";

/*========================================================================================================================


  のしについて

  
========================================================================================================================*/

html,
body {
  height:inherit;
  min-height:inherit;
  min-width:inherit;
}

body {
  padding:0 1.25em;
}


/*-----------------------------------------------------------------------------------
  見出し
-----------------------------------------------------------------------------------*/

.sbj {
  background-color:#646464;
  color:#fff;
  padding:0.5em;
  line-height:1.4;
}


/*----------------------------------------------------------------------------------------------------

  のしについて
  
----------------------------------------------------------------------------------------------------*/

.guide-block {
  padding-top:1.75em;
}

.guide__img {
  text-align:center;
  padding-bottom:1.5em;
}

.guide__img img {
  max-width:260px;
  width:100%;
}

.guide-block ul {
  line-height:1.6;
}

.guide-block li {
  padding-bottom:0.75em;
}

.guide-at {
  padding-top:0.5em;
}

@media screen and (max-width:600px) {
  .guide__img img {
    width:50%;
  }
}


/*----------------------------------------------------------------------------------------------------

  のしの種類
  
----------------------------------------------------------------------------------------------------*/

.type {
  margin-top:2em;
}

.type-at {
  padding-top:1em;
}

.type-block {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  margin-top:1.5em;
}

.type__img img {
  border:1px solid #646464;
}

.type__use {
  align-self:flex-end;
}

@media print,screen and (min-width:601px) {
  .type__img {
    -webkit-box-ordinal-group:2;
    -ms-flex-order:1;
    order:1;
    align-self: flex-end;
    width:200px;
  }
  
  .type__use {
    align-self: flex-end;
    width:-webkit-calc(100% - 200px);
    width:calc(100% - 200px);
    padding-right:1.5em;
  }
}

@media screen and (max-width:600px) {
  .type-block {
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
  }
  
  .type__img {
    margin-bottom:1em;
    text-align:center;
  }
  
  .type__img img {
    max-width:260px;
    width:50%;
  }
  
  .type__use {
    width:100%;
  }
  
  .type__use:not(:last-of-type) {
    margin-bottom:1em;
  }
  
  .type__use h3 {
    text-align:center;
  }
}

.type__use dl {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  border-top:1px solid #c8c8c8;
  line-height:1.4;
  font-size:0.9em;
  margin-top:1em;
}

.type__use dt,
.type__use dd {
  border-bottom:1px solid #c8c8c8;
  padding:0.75em;
}

.type__use dt {
  width:6em;
  background-color:#f0f0f0;
  text-align:center;
}

.type__use dd {
  width:-webkit-calc(100% - 6em);
  width:calc(100% - 6em);
}

.type__use dd ul {
  list-style:none;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
}

.type__use dd li:not(:last-child):after {
  content:"、";
}