@charset "utf-8";
/* CSS Document */

/*******************

 LP style

********************/
:root {
  /* color settings */
  --c-01: #951F36;
  --c-01a: #ffcfd8;
  --c-02: #FCF01C;
  --c-03: #FC0335;
  --c-04: #1CBDFC;
  --c-05: #0B82B0;
  --c-vg: #FC0335;
  --c-good: #e28e07;
  --c-soso: #0bb05d;
  --c-bad: #0B82B0;
  --c-active: #fffcc9;
  --font-marker: rgba(252,240,28,1); 
  --font-marker-bg: rgba(252,240,28,0); 
  --bg-base: #fff;
}

/*---------------------------------------------------------------*/
html , body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  background-color: var(--bg-base);
}

/* content
--------------------------------------------------*/
.article , #arfooter {
  font-size: 16px;
  font-size: 4.2vw;
  font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ','Mayryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  color:var(--color-base);
  line-height:1.75em;
}
@media screen and (min-width:750px){
.article , #arfooter {
    font-size: 18px;
    max-width: 750px;
    margin: 0 auto;
  }
}
.article a , #arfooter a{
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
}
.article a:hover, #arfooter a:hover{
  text-decoration: underline;
}
.article span, #arfooter span {
  font-size: inherit;
  font-weight: inherit;
}
.article img ,
#arfooter img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  vertical-align: bottom;
}
.article img.img-t ,
#arfooter img.img-t {
  vertical-align: top;
}
/* cart css reset */

.article header ,
.article h1 ,
.article h2 ,
.article h3 ,
.article p ,
.article dl ,
.article dt ,
.article dd ,
.article div ,
.article section ,
.article span {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  line-height: 1.75em;
}
#arfooter footer ,
#arfooter div,
#arfooter p {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  line-height: 1.75em;
}
#arfooter ul,
#arfooter li {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
/*----------------------------------------*/
.article .font--bold {
  font-weight: bold;
}
.article .font--color1 {
  color: var(--c-03);
}
.article .font--color2 {
  color: var(--c-05);
}
.article .font--small {
  font-size: 0.7em;
}
.article .font--large {
  font-size: 1.3em;
}
.article .font--marker {
  background: var(--font-marker);
  background: -moz-linear-gradient(0deg, var(--font-marker-bg) 0%, var(--font-marker-bg) 9%, var(--font-marker) 10%, var(--font-marker) 63%, var(--font-marker-bg) 64%, var(--font-marker-bg) 100%);
  background: -webkit-linear-gradient(0deg, var(--font-marker-bg) 0%, var(--font-marker) 9%, var(--font-marker) 10%, var(--font-marker) 63%, var(--font-marker-bg) 64%, var(--font-marker-bg) 100%);
  background: linear-gradient(0deg, var(--font-marker-bg) 0%, var(--font-marker-bg) 9%, var(--font-marker) 10%, var(--font-marker) 63%, var(--font-marker-bg) 64%, var(--font-marker-bg) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--font-marker)",endColorstr="var(--font-marker)",GradientType=1);
}



/*----------------------------------------*/
.article .pagetitle {
  box-sizing: border-box;
  padding: 4%;
  
}
.article .pagetitle h1 {
  display: block;
  font-size: 1.4em;
  line-height: 1.3em;
  position: relative;
  text-align: center;
  padding: .5em 0.1em;
  box-sizing: border-box;
  letter-spacing: 0.08em;
  z-index: 5;
}
.article .pagetitle span {
  color: var(--c-01);
  display: block;
  text-align: center;
  margin: 0 auto;
  font-weight: 500;
  font-size: .8em;
  line-height: 1.5em;
}
.article .pagetitle h1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  z-index: 1;
  box-sizing: border-box;
  border-left: 2px solid var(--c-01);
  border-top: 2px solid var(--c-01);
}
.article .pagetitle h1:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  z-index: 1;
  border-right: 2px solid var(--c-01);
  border-bottom: 2px solid var(--c-01);
}

.article .subtitle {
  box-sizing: border-box;
  border-left: .3em solid var(--color-sub1);
  border-bottom: 2px solid var(--color-sub1);
  font-size: 1.25em;
  font-feature-settings: 'palt' 1;
  padding: .5em;
  position: relative;
  margin: 2em auto .5em;
  text-align: center;
  background: var(--c-01);
  color: #fff;  
}
.article .subtitle .subtitle__catch {
  display: block;
  font-size: .88em;
}
.article .subtitle .subtitle__catch:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-right: .3em;
  margin-bottom: -.1em;
  background-color: #fff;
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.article .subtitle .subtitle__catch:after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: .3em;
  margin-bottom: -.1em;
  background-color: #fff;
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  transform: rotate(20deg);
}
.article .subtitle--point {
  font-size: 1.15em;
  font-weight: bold;
  text-align: left;
  margin: 1.5em auto 1em;
  box-sizing: border-box;
  padding: 0 .2em;
  border-bottom: 2px solid var(--c-01);
  line-height: 1.5em;
}
.article .subtitle--point span {
  display: block;
  font-size: 0.92em;
  line-height: 1em;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0;
  color: var(--c-01);
}
.article .subtitle--point span:before {
  content: "Point";
  font-size: 0.6em;
  font-weight: 400;
  color: #aaa;
  margin-right: .3em;
}
.article .subtitle--obi {
  background-color: var(--c-01a);
  box-sizing: border-box;
  border-left: .3em solid var(--c-01);
  padding: .4em .3em .2em .3em;
  line-height: 1.5em;
  margin: 2em auto 1em;
  color: var(--c-01);
}
.article .subtitle--c1line {
  box-sizing: border-box;
  border-bottom: 2px solid var(--c-01a);
  padding: 0 .3em 0 .3em;
  line-height: 1.5em;
  margin: 1em auto 0.5em;
  position: relative;
}
.article .subtitle--c1line:before {
  content: "";
  display: block;
  width: 5em;
  height: 2px;
  background-color: var(--c-01);
  position: absolute;
  bottom: -2px;;
  left: 0;
  z-index: 2;
}

.article .textbox {
  box-sizing: border-box;
  padding: 2%;
  margin: 0 auto ;
  width: 100%;
}
.article p {
  letter-spacing: 0.05em;
  line-height: 1.75em;
}
.article p + p {
  margin-top: 2em;
}

.article .textbox__att {
  text-align: right;
  font-size: .7em;
  line-height: 1.3em;
  margin-top: .5em;
}
.article .imgbox {
  box-sizing: border-box;
  display: block;
  margin: 1em auto;
  padding: 0;
}

.article .imgbox__att {
  text-align: right;
  font-size: .7em;
  line-height: 1.3em;
  margin-top: .5em;
}
.article .voicebox {
  background: var(--bg-base);
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: block;
  padding: 4%;
  position: relative;
  margin: 2em auto;
  width: 92%;
}
.article .voice__title {
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.article .voicebox .imgbox {
  margin-top: 0.5em;
}
.article .voicebox__att {
  margin: 0 auto;
  font-size: 0.7em;
  text-align: right;
}

/* table */
.article .comptable {
  margin: 1em auto;
  max-width: 750px;
  position: relative;
}
.article .comptable__title {
  text-align: center;
  letter-spacing: 0.08em;
  box-sizing: border-box;
  padding: .5em 0;
  background: var(--c-01);
  color: #fff;
  margin: .5em auto;
}
.article .comptable__title span {
  display: block;
  text-align: center;
  font-size: 0.8em;
  margin: .3em auto;
}
.article .comptable__text {
  text-align: center;
  font-weight: 700;
  margin: 0.5em auto;
}
.article .comptable__table {
  overflow-x:  scroll;
  width: 100%;
  box-sizing: border-box;
}
.article .comptable table {
  width: calc(8em * 5);
}
.comptable tbody th {
  width: 8em;
}
.comptable tbody th img {
  display: block;
  margin: 0 auto;
  width: 92%;
}
.comptable tbody th + th {
  border-left: 1px dashed #ccc;
}
.comptable tbody .comptable__tr ,
.comptable tbody th[colspan="5"] {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 2em;
}
.comptable tbody .comptable__th {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  border-top: 1px solid var(--c-01);
  border-bottom: 1px solid var(--c-01);
  color: var(--c-01);
  box-sizing: border-box;
  padding: .3em 0;
  font-size: .88em;
  line-height: 1.2em;
  background-color: #fff;
}
.comptable tbody td {
  width: 8em;
  text-align: center;
  font-size: .92em;
  line-height: 1.5em;
  vertical-align: top;
}
.comptable td p {
  text-align: left;
  font-size: .82em;
  line-height: 1.5em;
  box-sizing: border-box;
  padding: .3em;
}
.comptable td + td {
  border-left: 1px dashed #ccc;
}  
.comptable .comptable__imgtr > th:first-child ,
.comptable tr > td:first-child {
  background-color: var(--c-active);
}
.comptable .comptable__table a {
  font-weight: bold;
  font-size: 1.15em;
  text-decoration: underline;
}
.comptable .comptable__total{
  font-size: 1.15em;
  font-weight: bold;
  padding: .5em 0;
  box-sizing: border-box;
  display: inline-block;
}
.comptable .font--s {
  font-size: .8em;
}
.comptable .comptable__tdicon--01 {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-size: 4em;
  font-weight: bold;
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  padding: 0;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  color: var(--c-vg);
}
.comptable .comptable__tdicon--02 {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  font-size: 4em;
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  padding: 0;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
  color: var(--c-good);
}
.comptable .comptable__tdicon--03 {
  display: block;
  margin: 0 auto;
  font-weight: bold;
  text-align: center;
  font-size: 4em;
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  padding: 0;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
  color: var(--c-soso);
}
.comptable .comptable__tdicon--04 {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  font-size: 4em;
  width: 1em;
  height: 1em;
  box-sizing: border-box;
  padding: 0;
  vertical-align: middle;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
  color: var(--c-bad);
}



@media screen and (min-width:750px){
  .article .comptable__text {
    display: none;
  }
  .article .comptable__table {
    overflow: hidden;
  }
  .article .comptable table {
    width: 100%;
  }
  .comptable tbody th {
    width: 20%;
  }
  .comptable tbody td {
    width: 20%;
  }
}
/*----------------------------------------*/
.osusume__title {
  background-color: #f0f0f0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
}
.osusume__title .osusume__bal {
  width: 4.4em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  flex-direction: column;
  height: 4.4em;
  border-radius: 4em;
  background-color:var(--c-01);
  box-sizing: border-box;
  padding-top: .3em;
  position: relative;
}
.osusume__title .osusume__bal:after {
  content: "▼";
  color: var(--c-01);
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transform: rotate(70deg)translate3d(0.1em,0.1em,0);
  -ms-transform: rotate(70deg)translate3d(0.1em,0.1em,0);
  -o-transform: rotate(70deg)translate3d(0.1em,0.1em,0);
  transform: rotate(70deg) translate3d(0.1em,0.1em,0);
  font-size: 1.4em;
}
.osusume__title .osusume__baltext {
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 1.25em;
  line-height: 1.25em;
}
.osusume__title .osusume__baltext span {
  font-size: .62em;
  display: block;
  line-height: 1em;
}
.osusume__title .osusume__titletext {
  font-size: 1.12em;
}
.osusume__title .osusume__titletext span {
  font-size: 1.4em;
}
.article  sub {
  font-size: .6em;
  vertical-align: baseline;
}

.article .osusume__detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: flex-start;
  margin: 1em auto 0;
}
.article .osusume__detailitem {
  box-sizing: border-box;
  border: 1px solid #aaa;
  position: relative;
  margin: -0.5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  width: 50%;
}
.article .osusume__detailitem dt {
  background-color: #fffcc9;
  border-bottom: 1px solid #aaa;
  width: 100%;
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
  padding: .2em;
  font-size: 0.88em;
}
.article .osusume__detailitem dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  font-size: .88em;
  box-sizing: border-box;
  padding: .5em 0;
  text-align: center;
  line-height: 1.5em;
}
.article .osusume__detailitem dd span {
  line-height: 1.25em;
}

.features {
}
.features .features__title {
  text-align: center;
  font-size: 1.12em;
  font-weight: bold;
}
.features span {
}

.features .features__title span:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-right: .3em;
  margin-bottom: -.1em;
  background-color: #000;
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.features .features__title span:after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: .3em;
  margin-bottom: -.1em;
  background-color: #000;
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  transform: rotate(20deg);
}
.features .features__box {
  box-sizing: border-box;
  padding: 2.66%;
  background-color: #fffcc9;
}
.features .features__item {
  margin: .5em auto;
  box-sizing: border-box;
  padding-left: 0.9em;
  text-indent: -0.9em;
  font-size: .92em;
  line-height: 1.5em;
}
.features .features__item:before {
  content: "";
  width: .4em;
  height: .8em;
  color: var(--c-01);
  border-bottom: .15em solid;
  border-right: .15em solid;
  display: inline-block;
  -webkit-transform: rotate(35deg) translate3d(0,-0.1em,0);
  -ms-transform: rotate(35deg) translate3d(0,-0.1em,0);
  -o-transform: rotate(35deg) translate3d(0,-0.1em,0);
  transform: rotate(35deg) translate3d(0,-0.1em,0);
  margin-right: .4em;
}
.article .kuchikomi {
  display: block;
  margin: 1em auto;
  border: 2px solid var(--c-01);
  padding: 0;
  box-sizing: border-box;
  padding-bottom: .5em;
}
.article .kuchikomi__title  {
  text-align: center;
}
.article .kuchikomi .kuchikomi__title span{
  background-color: var(--c-01);
  color: #fff;
  font-weight: bold;
  padding: 0.2em 1em;
  clip-path: polygon(0 1%, 100% 0, 95% 100%, 5% 100%);
}
.kuchikomi .kuchikomi__box {
  box-sizing: border-box;
  padding: 2.66%;
}
.kuchikomi .kuchikomi__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -ms-align-items: flex-start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
}
.kuchikomi .kuchikomi__item + .kuchikomi__item {
  margin-top: 0.5em;
}
.kuchikomi .kuchikomi__img {
  width: 2em;
  padding-top: 0.5em;
  margin: 0
}
.kuchikomi .kuchikomi__text {
  width: calc(100% - 3em);
  box-sizing: border-box;
  padding: .5em .5em .5em .5em;
  margin: 0;
  background-color: #fffcc9;
  border-radius: .5em;
  position: relative;
}
.kuchikomi .kuchikomi__text:before {
  content: "▲";
  display: block;
  position: absolute;
  top: 0.3em;
  left: -0.5em;
  color: #fffcc9;
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
.kuchikomi .kuchikomi__text p {
  font-size: .92em;
  line-height: 1.75em;
  
}
.article .buttonarea {
  margin: 1em auto;
  display: block;
  box-sizing: border-box;
  padding: 0 .5em;
  text-align: center;
}
.buttonarea .buttonarea__catch {
  text-align: center;
  font-weight: bold;
}
.buttonarea .buttonarea__catch:before {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-right: .3em;
  margin-bottom: -.1em;
  background-color: #000;
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.buttonarea .buttonarea__catch:after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: .3em;
  margin-bottom: -.1em;
  background-color: #000;
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  transform: rotate(20deg);
}
.article .buttonarea__btn {
  display: inline-block;
  background-color: #f0f;
  margin: 0 auto;
  text-align: center;
  text-decoration: none;
  border: 1px solid #ccc;
  background: #f1e767;
  background: -webkit-gradient(linear, left top, left bottom, from(#9e8e49), to(#72621c));
  background: -webkit-linear-gradient(top, #9e8e49 0%, #72621c 100%);
  background: linear-gradient(to bottom, #9e8e49 0%, #72621c 100%);
  border-radius: 3em;
  padding: 1em;
  font-weight: bold;
  font-size: 1.08em;
  color: #fff;
  opacity: 1;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.article .buttonarea a {
  opacity: 1;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

.article .buttonarea a:hover {
  text-decoration: none;
  opacity: 0.8;
}
.article .other {
  text-align: center;
  margin: 3em auto 1em;
}
.article .other h2 {
  box-sizing: border-box;
  text-align: center;
  position: relative;
  padding: 0.5em 0.5em 1em;
  width: 92.75%;
  margin: 0 auto;
}
.article .other h2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--c-01a);
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  clip-path: polygon(0 0, 100% 0%, 100% 55%, 50% 100%, 0 55%);
}
.article .other h2 span {
  color: var(--c-01);
  box-sizing: border-box;
  line-height: 1.3em;
  display: block;
  position: relative;
  z-index: 3;
  margin: 0 auto;
}



@media screen and (min-width:750px){
  .article .pagetitle h1 {
    font-size: 2.2em;
  }
  .article .comptable__title {
    font-size: 2em;
    line-height: 1em;
  }
  .comptable tbody .comptable__th {
    font-size: 1em;
    padding: .5em;
  }
  .comptable td p {
    padding: 0;
  }
  .comptable tbody td {
    padding: 10px;
  }
  .article .osusume__detailitem {
    width: calc(100% / 3);
  }
  .comptable tbody .comptable__tr, .comptable tbody th[colspan="5"] {
   padding-bottom: 42px; 
  }
  .buttonarea .buttonarea__catch {
    font-size: 1.35em;
  }
  .article .subtitle {
    font-size: 1.8em;
  }
  .article .subtitle--obi {
    font-size: 1.8em;
  }
  .article .subtitle--c1line {
    font-size: 1.5em;
  }
  .article .subtitle--point {
    font-size: 1.5em;
  }
  .osusume__title .osusume__bal {
    margin: 0 10px;
  }
  .osusume__title .osusume__titletext {
    margin: 0 10px;
    font-size: 1.6em;
  }
  .osusume__title {
    justify-content: center;
  }
}



/*-------------------------------------------
 footer
-----------------------------------------------*/
#arfooter .footer__link {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 2em;
}
#arfooter .footer__link li{
  font-size: 1em;
  margin-bottom: 1em;
}
#arfooter #copy {
  text-align: center;
  font-size: .75em;
  border-top: 1px solid;
  box-sizing: border-box;
  padding: .5em;
}


/*-------------------------------------------
 about
-----------------------------------------------*/
.article .mailaddr__at:after {
  content: "@";
  display: inline;
}
.article .article__dl {
  display: block;
  width: 100%;
  margin: 0 auto;
}
.article .article__dl dl {
  display: block;
  width: 100%;
}
.article .article__dl dt {
  border-bottom: 1px solid var(--c-01);
  display: block;
  box-sizing: border-box;
  padding: .5em;
  width: 100%;
  text-align: center;
  vertical-align: middle;
}
.article .article__dl dd {
  display: block;
  box-sizing: border-box;
  padding: .5em;
  vertical-align: middle;
  box-sizing: border-box;
  border-bottom: 1px solid var(--c-01);
}


@media screen and (min-width:750px){
  .article .article__dl {
  display: table;
  width: 100%;
  margin: 0 auto;
}
.article .article__dl dl {
  display: table-row;
  width: 100%;
}
.article .article__dl dl + dl dt ,
.article .article__dl dl + dl dd {
  border-top: 1px solid var(--c-01);
}
.article .article__dl dt {
  display: table-cell;
  box-sizing: border-box;
  padding: .5em;
  width: 8.2em;
  text-align: center;
  vertical-align: middle;
  border-bottom: none;
}
.article .article__dl dd {
  display: table-cell;
  width: calc(100% - 8.2em);
  vertical-align: middle;
  box-sizing: border-box;
  padding: .5em;
  border-bottom: none;
}
}