@charset "utf-8";

/* -------------------------------------------------------
 common
------------------------------------------------------- */
.innerW.others p,
.innerW.others li {
 font-size: 15px;
 line-height: 1.6;
}
.innerW.others p + ol,
.innerW.others p + ul{
 margin-top:18px;
}
.innerW.others ol + p,
.innerW.others ul + p{
 margin-top:18px;
}
.dateUp{
 margin-bottom:30px;
}
h2.listTitle{
 margin:80px 0 18px;
 padding-left:16px;
 font-size: 20px;
 color: #00aeeb;
 font-weight: bold;
 letter-spacing: 1px;
 position: relative;
 line-height: 1.4;
}
h2.listTitle:before {
 content: "";
 width: 2px;
 height: 20px;
 background-color: #00aeeb;
 position: absolute;
 top: 0.17em;
 left: 0;
}
/*ol*/
.innerW.others ol.list{
 counter-reset: number;
}
.innerW.others ol.list li{
 padding-left: 2.5em;
 padding-top: 4px;
 position: relative;
}
.innerW.others ol.list li:before {
 counter-increment: number;
 content: counter(number)". ";
 color: #00aeeb;
 font-weight: bold;
 position: absolute;
 top: 4px;
 left: 0.5em;
 width: 2em;
 height: 1em;
}
/*ul*/
.innerW.others ul.list li{
 padding-left: 2.5em;
 padding-top: 4px;
 position: relative;
}
.innerW.others ul.list li:before {
 content: "- ";
 color: #00aeeb;
 font-weight: bold;
 position: absolute;
 top: 4px;
 left: 0.7em;
 width: 2em;
 height: 1em;
}
.innerW.others ul.list li > ul{
 margin-top:12px;
 margin-bottom:12px;
}
.innerW.others ul.list li > ul li{
 padding-left: 1em;
 font-size: 14px;
 line-height: 1.8;
}
.innerW.others ul.list li > ul li:before {
 content: none;
}
@media screen and (max-width: 767px) {/* SP */
  .innerW.others p,
  .innerW.others li {
   font-size: 13px;
   line-height: 1.6;
  }
  h2.listTitle{
   margin:50px 0 12px;
   padding-left:14px;
   font-size: 15px;
  }
  h2.listTitle:before {
   width: 2px;
   height: 15px;
  }
  /*ol*/
  .innerW.others ol.list li{
   padding-left: 1.5em;
  }
  .innerW.others ol.list li:before {
   top: 4px;
   left: 0;
   width: 1.5em;
   height: 1em;
  }
  /*ul*/
  .innerW.others ul.list li{
   padding-left: 1.5em;
  }
  .innerW.others ul.list li:before {
   top: 4px;
   left: 0.2em;
   width: 1.5em;
   height: 1em;
  }
  .innerW.others ul.list li > ul{
   margin-top:6px;
  }
  .innerW.others ul.list li > ul li{
   margin-top: 0.2em;
   padding-left: 1em;
   font-size: 13px;
   line-height: 1.6;
  }
}

/* -------------------------------------------------------
 terms-of-use (利用規約)
------------------------------------------------------- */
body.tou #ttlText h1 .ttlLine{
 width: 11em;
}


/* -------------------------------------------------------
 privacy-policy (個人情報保護方針)
------------------------------------------------------- */
body.privacy-policy #ttlText h1 .ttlLine{
 width: 12.5em;
}
.inquiryArea{
 width:100%;
 margin: 20px auto 0;
 border:1px solid #00aeeb;
 padding:30px;
}

/* -------------------------------------------------------
 social-media-policy (ソーシャルメディアポリシー)
------------------------------------------------------- */
body.smp #ttlText h1 .ttlLine{
 width: 17.2em;
}
body.smp .mt{
 margin-top:40px!important;
}
.account{
 width:100%;
 margin:20px auto 0;
 display: flex;
 flex-direction:row;
 flex-wrap: wrap;
 justify-content: space-between;
}
.account a{
 position: relative;
 display: flex;
 align-items: center;
 justify-content: start;
 width: 48%;
 height:80px;
 padding: 0 48px 0 140px;
 margin-top:20px;
 color:#000;
 border:1px solid #00aeeb;
}
.innerW.others .account a > p{
 line-height: 1.3;
 letter-spacing: 0.5px;
}
.account a.youtube{
 background: url(../../social-media-policy/image/yt_logo.png) left 20px center no-repeat;
 background-size: 90px auto;
}
.account a::after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 16px;
 margin: auto;
 content: "";
 width: 30px;
 height: 1px;
 vertical-align: middle;
 background: #00aeeb;
}
.account a::before{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 18px;
 margin: auto;
 content: "";
 width: 12px;
 height: 12px;
 vertical-align: middle;
 border-top: 1px solid #00aeeb;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
@media screen and (min-width: 768px) and (max-width: 989px) {/* TB */
  .account a{
   padding: 0 48px 0 100px;
  }
  .account a.youtube{
   background: url(../../social-media-policy/image/yt_logo.png) left 15px center no-repeat;
   background-size: 70px auto;
  }
}
@media screen and (max-width: 767px) {/* SP */
  .account{
   flex-direction:column;
  }
  .account a{
   position: relative;
   width: 100%;
   height:60px;
   padding: 0 30px 0 90px;
  }
  .account a.youtube{
   background: url(../../social-media-policy/image/yt_logo.png) left 15px center no-repeat;
   background-size:60px auto;
  }
  .account a::after{
   width: 15px;
  }
  .account a::before{
   width: 10px;
   height: 10px;
  }
}

/* -------------------------------------------------------
 sitemap
------------------------------------------------------- */
body.sitemap #ttlText h1 .ttlLine{
 width: 6.5em;
}
.sitemapArea{
 display: flex;
 flex-wrap: wrap;
 align-items: start;
}
.sitemapArea div{
 width:50%;
 padding-left:30px;
 border-left:1px solid #fff;
}
.sitemapArea div.mt{
 margin-top:90px;
}
.sitemapArea div h2{
 font-size:20px;
 font-weight: bold;
}
.sitemapArea div ul{
 margin-top:7px;
 width:210px;
}
.sitemapArea div ul li{
 font-size:15px;
 padding:12px 0 0;
}
.sitemapArea div ul li a{
 display: block;
 padding:2px 0;
 position: relative;
}
.sitemapArea div ul li a::after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 margin: auto;
 content: "";
 width: 20px;
 height: 1px;
 vertical-align: middle;
 background: #fff;
}
.sitemapArea div ul li a::before{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 2px;
 margin: auto;
 content: "";
 width: 10px;
 height: 10px;
 vertical-align: middle;
 border-top: 1px solid #fff;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
.sitemapArea div ul li a.outside::before,
.sitemapArea div ul li a.outside::after{
 content: none;
}
@media screen and (max-width: 767px) {/* SP */
  .sitemapArea div{
   width:100%;
   padding-left:15px;
   margin-top:30px;
  }
  .sitemapArea div.mt{
   margin-top:30px;
  }
  .sitemapArea div h2{
   font-size:17px;
  }
  .sitemapArea div ul{
   width:100%;
  }
  .sitemapArea div ul li{
   font-size:14px;
   padding:8px 0 0;
  }
  .sitemapArea div ul li a{
   display: block;
   padding:4px 0;
   position: relative;
  }
}


/* -------------------------------------------------------
 error
------------------------------------------------------- */
#ttlText.error h1 .ttlLine{
 width: 8.6em;
}
.erroeText h2{
 font-size:28px;
 font-weight: bold;
}
.erroeText p{
 padding-top:20px;
 font-size:16px;
 line-height: 1.8;
}
.linkBtn a {
 display: flex;
 align-items: center;
 width: 430px;
 height: 82px;
 margin-top:40px;
 padding-left: 30px;
 outline: 1px solid #fff;
 outline-offset: -1px;
 color: #fff;
 font-size: 16px;
 text-decoration: none;
 line-height: 1.4;
 font-weight: bold;
 transition: background-color 0.3s;
 position: relative;
}
.linkBtn a::after{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 16px;
 margin: auto;
 content: "";
 width: 30px;
 height: 1px;
 vertical-align: middle;
 background: #fff;
}
.linkBtn a::before{
 position: absolute;
 top: 0;
 bottom: 0;
 right: 18px;
 margin: auto;
 content: "";
 width: 12px;
 height: 12px;
 vertical-align: middle;
 border-top: 1px solid #fff;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
.linkBtn a:hover{
 background-color: rgba(255, 255, 255, 0.15);
}
.linkBtn a:active{
 background-color: rgba(255, 255, 255, 0);
 outline: 2px solid #fff;
 outline-offset: -2px;
}
@media screen and (max-width: 767px) {/* SP */
  .erroeText h2{
   font-size:18px;
   line-height: 1.6;
  }
  .erroeText p{
   padding-top:20px;
   font-size:14px;
   line-height: 1.6;
  }
  .erroeText span{
   display: inline-block;
  }
  .linkBtn a {
   display: flex;
   align-items: center;
   width: 100%;
   height: 60px;
   padding-left: 10px;
   padding-right: 10px;
   outline: 1px solid #fff;
   outline-offset: -1px;
   color: #fff;
   font-size: 13px;
   text-decoration: none;
   line-height: 1.4;
   font-weight: bold;
   transition: none;
   letter-spacing: 0;
   position: relative;
  }
  .linkBtn a::after{
 width: 20px;
  }
}


/* -------------------------------------------------------
 career
------------------------------------------------------- */
body.career .box a{
  color:#000;
}
h2.careerTitle{
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
 font-size:38px;
 font-weight: bold;
 line-height: 1.4;
 letter-spacing: 4px;
 padding-bottom: 35px;
 position: relative;
}
h2.careerTitle:after{
 content: "";
 display: block;
 height: 2px;
 width: 50px;
 background: #000;
 position: absolute;
 left: 0;
 bottom: 0;
}
#careerCopy{
 margin-top:35px;
}
#careerCopy p{
 font-size:17px;
 line-height: 1.6;
}
#careerCopy p + p{
 margin-top:20px;
}
h3.blue{
 margin:80px 0 30px;
 display: inline-block;
 padding:10px 15px;
 background-color: #00aeeb;
 font-size:18px;
 line-height: 1;
 color:#fff;
 font-weight: bold;
}
ul.joblist{
 margin-top: 30px;
}
ul.joblist li{
 padding: 10px 0 10px 1em;
 position: relative;
 font-size: 16px;
}
ul.joblist li:before {
 content: "- ";
 color: #00aeeb;
 font-weight: bold;
 position: absolute;
 top: 10px;
 left: 0;
 width: 1em;
 height: 1em;
}
ul.joblist li a{
  text-decoration: underline;
}
ul.joblist li a:hover{
  color:#00aeeb;
}
.careermail{
  width:178px;
  height:22px;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {/* SP */
  h2.careerTitle{
   font-size:19px;
   letter-spacing: 1px;
   padding-bottom: 20px;
  }
  h2.careerTitle:after{
   height: 1px;
   width: 25px;
  }
  #careerCopy{
   margin-top:20px;
  }
  #careerCopy p{
   font-size:14px;
  }
  h3.blue{
   margin:50px 0 20px;
   font-size: 16px;
   line-height: 1.4;
   padding: 6px 15px 4px;
   letter-spacing: 0.5px;
  }
  h3.blue + p{
    line-height: 1.4;
  }
  ul.joblist{
   margin-top: 20px;
  }
  .careermail{
   width:140px;
   height:auto;
  }
}