/*
main tone:  #393c52;
dark tone:  #808080;
light tone: #919191;
*/

/* common
------------------------------ */
.section-inner {
  max-width: 480px;
  margin: auto;
  padding: 0 15px;
}

.tab {
  margin: 20px 0 27px;
}

.toggle-btn {
  position: relative;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #393c52;
  font-size: 1.4rem;
  border: 1px solid #393c52;
}

.toggle-btn::after {
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 14px;
  height: 14px;
  margin: auto;
  content: "";
  background: url(../images/common/icon_tab-south-arrow.svg) 50% 50% no-repeat;
}

.toggle-btn.js-open::after {
  background: url(../images/common/icon_tab-north-arrow.svg) 50% 50% no-repeat;
}

.toggle-btn + .toggle-content {
  display: none;
}

@media (min-width: 768px) {
  .section-inner {
    max-width: 890px;
  }

  .tab {
    margin: 47px 0 57px;
  }

  .toggle-btn + .toggle-content {
    display: block;
  }
}

/* menu 01
------------------------------ */
@media (min-width: 768px) {
  .menu-01 .section-inner {
    min-height: 520px;
  }
}

/* mannequin
------------------------------ */
.mannequin {
  position: relative;
  max-width: 290px;
  margin: auto;
}

/* modal trigger */
[id*="ex"] {
  position: absolute;
}

[id*="ex"]:nth-of-type(odd) {
  left: 0;
}

[id*="ex"]:nth-of-type(even) {
  right: 0;
}

[id*="ex"].rectangle {
  width: 27.586206896551722%;
}

[id*="ex"].square {
  width: 15.10204081632653%;
}

[id="ex01"],
[id="ex02"] { top: 12.612612612612612%; }
[id="ex03"],
[id="ex04"] { top: 36.03603603603604%; }
[id="ex05"],
[id="ex06"] { top: 59.909909909909906%; }
[id="ex07"],
[id="ex08"] { top: 83.33333333333334%; }

[id="ex09"] {
  right: 0;
  bottom: 43.78px;
  margin: auto;
}

@media (min-width: 768px) {
  .mannequin {
    max-width: 800px;
  }

  .mannequin > img {
    width: 55.00000000000001%;
    max-width: 440px;
  }

  /* modal trigger */
  [id*="ex"].rectangle {
    width: 15%;
  }

  [id*="ex"].square {
    width: 7.875%;
  }

  [id*="ex"]:nth-of-type(even) {
    right: 44.75%;
  }

  [id="ex01"],
  [id="ex02"] { top: 13.151364764267989%; }
  [id="ex03"],
  [id="ex04"] { top: 37.220843672456574%; }
  [id="ex05"],
  [id="ex06"] { top: 61.04218362282878%; }
  [id="ex07"],
  [id="ex08"] { top: 84.863523573201%; }

  [id="ex09"] {
    left: -45% !important;
  }
}

/* modal
------------------------------ */
.modal__trigger > img {
  position: absolute;
}

.modal__trigger.is-active > img:nth-of-type(2) {
  opacity: 0;
}

.modal .popup-close {
  position: absolute;
  top: -30px;
  right: 0;
  margin: 0;
}

.modal {
  position: fixed;
  top: 0;
  display: none;
  width: 100%;
  max-width: 290px;
  margin: 0;
  vertical-align: middle;
  opacity: 0;
  background: #dfdfdf;
}

.modal dt {
  padding: .5em;
  text-align: center;
  font-size: 1.4rem;
  color: #fff;
  background: #393c52;
}

.modal dd {
  display: list-item;
  margin-left: 3em;
  padding: .25em 2em .25em 0;
  list-style: disc;
}

.modal dd:first-of-type {
  margin-top: .5em;
}

.modal dd:last-of-type {
  margin-bottom: .5em;
}

.modal li {
  padding: .5em 1em;
  border-bottom: 1px solid;
}

.modal a {
  display: block;
}

/* modal [sp only] */
@media (max-width: 767px) {
  .modal {
    z-index: 210;
    width: 290px;
    -webkit-transition: .3s 0s;
            transition: .3s 0s;
    -webkit-transform: scale3d(.5,.5,1) translate3d(0,0,0);
            transform: scale3d(.5,.5,1) translate3d(0,0,0);
  }

  .modal.is-active {
    -webkit-transition: .5s cubic-bezier(.175, .885, .320, 1.275) .2s;
            transition: .5s cubic-bezier(.175, .885, .320, 1.275) .2s;
    -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
            transform: scale3d(1,1,1) translate3d(0,0,0);
    opacity: 1;
  }

  #modal-layer {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    -webkit-transition: .3s;
            transition: .3s;
    opacity: 0;
    background: rgba(57,60,82,.8);
  }

  #modal-layer.is-active {
    -webkit-transition: .5s cubic-bezier(.190, 1.000, .220, 1.000);
            transition: .5s cubic-bezier(.190, 1.000, .220, 1.000);
    opacity: 1;
  }
}

/* modal [pc only] */
@media (min-width: 768px) {
  .modal {
    position: absolute;
    z-index: 0;
    top: 12.935323383084576%;
    right: 0;
    left: auto;
    opacity: 1;
    margin: auto;
  }

  .modal.is-active {
    display: block;
  }

  .modal dt {
    font-size: 1.8rem;
  }
}

/* tab list
------------------------------ */
.tab-list {
  display: -ms-flexbox;
  display: -webkit-flex;
  display:         flex;
  margin: 1.0135135135135136% -1.0135135135135136% 0;
  text-align: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.tab-list li {
  height: 30px;
  margin: 1.0135135135135136%;
  line-height: 30px;
  border-radius: 6px;
  background: #393c52;
  -webkit-flex: 0 0 47.97297297297297%;
      -ms-flex: 0 0 47.97297297297297%;
          flex: 0 0 47.97297297297297%;
}

.tab-list li.rows {
  display: -ms-flexbox;
  display: -webkit-flex;
  display:         flex;
  height: auto;
  padding: .667em 0;
  line-height: 1.2;
  -webkit-align-items: center;
       -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
            -ms-flex-pack: center;
          justify-content: center;
}

.tab-list a {
  display: block;
  letter-spacing: -.05em;
  color: #fff;
}

@media (min-width: 768px) {
  .tab-list {
    margin: 0 -0.5747126436781609%;
  }

  .tab-list li {
    margin: 0.5747126436781609%;
    -webkit-flex: 0 0 32.18390804597701%;
        -ms-flex: 0 0 32.18390804597701%;
            flex: 0 0 32.18390804597701%;
  }

  .tab-list li.rows {
    display: block;
    height: 30px;
    padding: 0;
    line-height: 30px;
  }

  .tab-list a {
    letter-spacing: 0;
  }
}

/* other contents
------------------------------ */
.description p {
  margin: 30px 0;
  text-align: justify;
}

.menu-01 h1 {
  margin: 10px 0;
  text-align: center;
  font-size: 2.0rem;
  color: #393c52;
}

.gatter-box {
  margin: 30px 0;
}

.menu--marble-bg {
  padding: 26px 0;
  background: url(../images/common/bg_contents@2x.png) 50% 50% no-repeat;
  background-size: cover;
}

@media (min-width: 768px) {
  .description p {
    margin: 50px 0;
    text-align: center;
  }

  .menu-01 h1 {
    margin: 0 0 30px;
    font-size: 2.8rem;
  }

  .gatter-box {
    margin: 60px 0;
  }

  .menu--marble-bg {
    padding: 52px 0;
    background: url(../images/common/bg_contents@1x.png) 50% 50% no-repeat;
    background-size: cover;
  }
}

/* menu lower
------------------------------ */
.tab__heading {
  margin-bottom: .5em;
  text-align: center;
  font-size: 1.6rem;
  font-weight: bold;
}

.menu-lower-box {
  margin-bottom: 30px;
}

.heading-border {
  margin-bottom: 1em;
  padding-bottom: .25em;
  text-align: center;
  font-size: 1.4rem;
  color: #393c52;
  border-bottom: 1px solid;
}

.img-col__img {
  position: relative;
  width: 106px;
  margin: auto;
}

.img-col__img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  border: 1px solid #393c52;
}

.img-col__txt,
.difinition-text {
  margin: 1em 0;
  text-align: justify;
}

.difinition-text dt {
  color: #393c52;
}

.difinition-text dd + dt,
.difinition-box,
.tab-table {
  margin-top: 1em;
}

.difinition-box,
.tab-table th,
.tab-table td {
  border: 1px solid #393c52;
}

.difinition-box dt,
.tab-table th {
  padding: .25em;
  text-align: center;
  color: #fff;
  background: #393c52;
}

.difinition-box dd {
  padding: 1em;
}

.tab-table {
  width: 100%;
}

.tab-table td {
  padding: .75em;
  vertical-align: middle;
  text-align: center;
}

.tab-table th:nth-child(n+2),
.tab-table td:nth-child(n+2) {
  white-space: nowrap;
}

.toggle-content .gatter-box {
  margin: 1em 0 0;
}

@media (min-width: 768px) {
  .tab__heading {
    margin-bottom: .05em;
    font-size: 2.8rem;
  }

  .menu-lower-box {
    margin-bottom: 60px;
  }

  .heading-border {
    margin-bottom: 0.6153846153846154em;
    padding-bottom: 0;
    font-size: 2.6rem;
    text-align: left;
  }

  .img-col {
    display: -ms-flexbox;
    display: -webkit-flex;
    display:         flex;
    -webkit-align-items: flex-start;
         -ms-flex-align: start;
            align-items: flex-start;
  }

  .img-col__img {
    margin: 0;
    -webkit-flex: 0 0 170px;
        -ms-flex: 0 0 170px;
            flex: 0 0 170px;
  }

  .img-col__body {
    margin: 0 0 0 20px;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }

  .img-col__txt {
    margin: 0 0 1em;
  }

  .difinition-box {
    margin-top: 2em;
  }

  .difinition-box dt,
  .tab-table th {
    padding: .5em;
  }

  .tab-table {
    margin-top: 1.5em;
  }
}

/* menu injection
------------------------------ */
[class*="injection-"] {
  padding: 25px 0 35px;
}

[class*="injection-"]:nth-of-type(even) {
  background: #ebebee;
}

/* img-box */
.img-box {
  margin-bottom: 20px;
}

.img-box h1 {
  text-align: center;
  font-size: 1.6rem;
  color: #393c52;
}

.img-box__item + .img-box__item {
  margin-top: 20px;
}

.img-box__item dt {
  text-align: center;
  font-size: 1.1rem;
  color: #393c52;
}

.img-box__item dd {
  margin-top: .5em;
  text-align: justify;
  font-size: 1.0rem;
}

.img-box__item dd + dt {
  margin-top: 1.5em;
}

.img-box__item img {
  display: block;
  width: 106px;
  margin: 10px auto 0;
}

/* box-content */
.box-content {
  padding-top: 10px;
}

[class*="injection-"]:nth-of-type(odd) .box-content__item {
  background: #ebebee;
}

[class*="injection-"]:nth-of-type(even) .box-content__item {
  background: #fff;
}

.box-content__item {
  padding: 15px;
}

.box-content__item + .box-content__item {
  margin-top: 10px;
}

.box-content__item img {
  margin-bottom: 10px;
}

.box-content__item a {
  display: table;
  margin: auto;
  text-decoration: underline;
  font-size: 1.5rem;
  color: #393c52;
}

.box-content__item dd {
  margin-top: 1em;
  text-align: justify;
  font-size: 1.0rem;
}

@media (min-width: 768px) {
  [class*="injection-"] {
    padding: 50px 0 80px;
  }

  /* img-box */
  .img-box {
    margin-bottom: 50px;
    padding-left: 24px;
    border-left: 3px solid #393c52
  }

  .img-box__item + .img-box__item {
    margin-top: 50px;
  }

  .img-box h1 {
    text-align: left;
    font-size: 2.8rem;
  }

  .img-box__item {
    display: -ms-flexbox;
    display: -webkit-flex;
    display:         flex;
    -webkit-align-items: flex-start;
         -ms-flex-align: start;
            align-items: flex-start;
  }

  .img-box__item dl {
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }

  .img-box__item dt {
    text-align: left;
    font-size: 1.8rem;
  }

  .img-box__item dd {
    font-size: 1.4rem;
  }

  .img-box__item img {
    margin: 0 0 0 24px;
    -webkit-flex: 0 0 220px;
        -ms-flex: 0 0 220px;
            flex: 0 0 220px;
  }

  [class*="injection-"] .img-box__item:first-of-type img {
    margin-top: -45px;
  }

  /* box-content */
  .box-content__heading {
    text-align: center;
    font-size: 2.2rem;
    color: #393c52;
    border-bottom: 1px solid;
  }

  .box-content {
    display: -ms-flexbox;
    display: -webkit-flex;
    display:         flex;
    margin: 0 -1.1363636363636365%;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }

  .box-content__item {
    margin: 1.1363636363636365%;
    -webkit-flex: 0 0 47.72727272727273%;
        -ms-flex: 0 0 47.72727272727273%;
            flex: 0 0 47.72727272727273%;
  }

  .box-content__item a {
    font-size: 2.2rem;
    text-decoration: none;
  }

  .box-content__item a::after {
    position: relative;
    top: -5px;
    display: block;
    width: 100%;
    height: 1px;
    content: "";
    border-bottom: 1px solid;
  }

  .box-content__item dd {
    font-size: 1.4rem;
  }
}

/* menu brow
------------------------------ */
.menu-lower-box .difinition-text {
  margin: 1em 0 0;
}

.menu-lower-box .difinition-text dt > a {
  text-decoration: underline;
}

.menu-lower-box .img-col__img {
  margin: 0 auto 1em;
}

@media (min-width: 768px) {
  .menu-lower-box .difinition-text {
    margin: 0;
  }
}