@charset "UTF-8";
/* 変数 */
/* -------------------------------------------------------- */
/*
$blue:#f00;
$gray2:#f00;
$light_blue:#f00;
*/
/* under
-------------------------------------------------- */
article {
  padding: 300px 5% 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.page_head {
  margin: 0 auto 200px;
  width: 100%;
  max-width: 1040px;
}

.page_head .page_ttl {
  margin-bottom: 360px;
  opacity: 0;
  -webkit-animation: fadeIn 2s 1s ease-in-out forwards;
          animation: fadeIn 2s 1s ease-in-out forwards;
}

.page_head .page_ttl h1 {
  margin-bottom: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.page_head .page_ttl h1 img {
  margin-right: 30px;
}

.page_head .page_ttl h1 span {
  letter-spacing: 1.4em;
}

.page_head .page_ttl .eng {
  color: #2E7776;
  font-size: 1.7rem;
  letter-spacing: 0.6em;
  line-height: 1.76;
  text-align: right;
}

.page_head .page_lead p {
  letter-spacing: 0.2em;
  line-height: 2.18;
}

.sec {
  padding: 0 0 150px;
}

.sec .txtbox {
  /*
    p{
      margin-bottom: 50px;
      line-height:2.18;
    }
    .sec_logo_wrap{
      margin-bottom: 100px;
      display:flex;
      flex-direction: column;
      align-items: flex-start;
      p{
        margin-bottom: 18px;
        font-size:1.2rem;
        line-height:1.5;
      }
      .sec_logo{
        padding-right: 1em;
        max-width:150px;
        img{
          @include width100();
        }
      }
    }
*/
}

.sec .txtbox h2 {
  padding-bottom: 60px;
}

.sec .txtbox h2 span {
  padding: 46px 0 40px 14px;
  font-size: 2.2rem;
  letter-spacing: 0.6em;
  line-height: 1.36;
  display: inline-block;
}

.sec .txtbox .txtinbox {
  margin-bottom: 150px;
}

.sec .txtbox .txtinbox h3 {
  margin-bottom: 30px;
  font-size: 2.2rem;
  letter-spacing: 0.6em;
  line-height: 1.36;
}

.sec .txtbox .txtinbox h3 span {
  padding-top: 10px;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  line-height: 1.31;
  display: block;
}

.sec .txtbox .txtinbox p {
  line-height: 2.18;
}

.sec .txtbox .txtinbox p.sttl {
  margin-bottom: 40px;
  color: #2E7776;
  letter-spacing: 0.36em;
  line-height: 1.31;
}

.sec .txtbox.right {
  text-align: right;
  /*
      .sec_logo_wrap{
        align-items: flex-end;
      }
*/
}

@media screen and (max-width: 768px) {
  article {
    padding: 150px 0 0;
  }
  .page_head {
    margin: 0 0 150px;
    padding-left: 25px;
    padding-right: 25px;
  }
  .page_head .page_ttl {
    margin-bottom: 100px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .page_head .page_ttl h1 {
    margin-bottom: 30px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .page_head .page_ttl h1 img {
    width: 70%;
    height: auto;
  }
  .page_head .page_ttl h1 span {
    font-size: 1.4rem;
    letter-spacing: 0.7em;
  }
  .page_head .page_ttl .eng {
    text-align: left;
    font-size: .9rem;
  }
  .page_head .page_lead p {
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    line-height: 1.78;
  }
  .sec {
    padding: 0 25px 80px;
  }
  .sec .txtbox h2 {
    padding-bottom: 30px;
  }
  .sec .txtbox h2 span {
    padding: 18px 0;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 2.14;
  }
  .sec .txtbox .txtinbox {
    margin-bottom: 80px;
  }
  .sec .txtbox .txtinbox h4 {
    margin-bottom: 16px;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 1.36;
  }
  .sec .txtbox .txtinbox h4 span {
    padding-top: 8px;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    line-height: 1.31;
    display: block;
  }
  .sec .txtbox .txtinbox p {
    font-size: 1.2rem;
    letter-spacing: 0.02em;
    line-height: 1.66;
  }
  .sec .txtbox .txtinbox p.sttl {
    margin-bottom: 20px;
    color: #2E7776;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    line-height: 2;
  }
  .sec .txtbox.right {
    text-align: left;
  }
}

/* imamade
-------------------------------------------------- */
#imamade .sec .side_nav_box {
  margin-right: 100px;
  padding: 40px 0 0 0;
  text-align: right;
}

#imamade .sec .side_nav_box .side_nav {
  position: -webkit-sticky;
  position: sticky;
  padding: 20px 0;
  top: 150px;
  width: 1.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#imamade .sec .side_nav_box .side_nav a {
  position: relative;
  display: block;
}

#imamade .sec .side_nav_box .side_nav a.nav_prev {
  position: absolute;
  content: '';
  width: 10px;
  height: 11px;
  background: url(../img/imamade/icn_side_arrow_up.svg) no-repeat 0 0/contain;
  top: 0;
  left: .5px;
}

#imamade .sec .side_nav_box .side_nav a.nav_prev:hover {
  opacity: .7;
}

#imamade .sec .side_nav_box .side_nav a.nav_next {
  position: absolute;
  content: '';
  width: 10px;
  height: 11px;
  background: url(../img/imamade/icn_side_arrow_down.svg) no-repeat 0 0/contain;
  bottom: 0;
  left: .5px;
}

#imamade .sec .side_nav_box .side_nav a.nav_next:hover {
  opacity: .7;
}

#imamade .sec .side_nav_box .side_nav a.dot {
  padding: 2px 0;
  color: #BEBEBE;
  font-size: 1rem;
}

#imamade .sec .side_nav_box .side_nav a.dot:hover {
  color: #000;
}

#imamade .sec .side_nav_box .side_nav span {
  display: block;
}

#imamade .sec .side_nav_box .side_nav span.txt {
  margin: 0;
  padding: 10px 0;
  display: inline-block;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: upright;
  word-break: break-all;
  white-space: nowrap;
  font-size: 1.2rem;
  font-family: YuGothic, "游ゴシック体", sans-serif;
}

#imamade .sec01 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#imamade .sec01 .sec01_01 {
  width: calc(100% - 64px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#imamade .sec01 .sec01_01 h2 span {
  background: url(../img/common/mark_flower01.svg) no-repeat 0 0;
}

#imamade .sec02 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#imamade .sec02 .sec02_01 {
  width: calc(100% - 64px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#imamade .sec02 .sec02_01 h2 span {
  padding: 40px 0 40px 14px;
  background: url(../img/common/mark_flower02.svg) no-repeat 0 0;
}

#imamade .sec03 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#imamade .sec03 .sec03_01 {
  width: calc(100% - 64px);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

#imamade .sec03 .sec03_01 h2 span {
  background: url(../img/common/mark_flower03.svg) no-repeat 0 0;
}

@media screen and (max-width: 768px) {
  #imamade .sec {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  #imamade .sec .side_nav_box {
    display: none;
  }
  #imamade .sec01 {
    display: block;
  }
  #imamade .sec01 .sec01_01 {
    width: 100%;
  }
  #imamade .sec01 .sec01_01 h2 span {
    background: url(../img/common/mark_flower01.svg) no-repeat 0 0/33px auto;
  }
  #imamade .sec02 .sec02_01 {
    width: 100%;
  }
  #imamade .sec02 .sec02_01 h2 span {
    padding: 10px 0;
    background: url(../img/common/mark_flower02.svg) no-repeat 0 0/36px auto;
  }
  #imamade .sec03 .sec03_01 {
    width: 100%;
  }
  #imamade .sec03 .sec03_01 h2 span {
    padding: 10px 0;
    background: url(../img/common/mark_flower03.svg) no-repeat 0 0/33px auto;
  }
}

/* korekara
-------------------------------------------------- */
#korekara .sec .txtinbox p {
  margin-bottom: 1em;
}

#korekara .sec01 .sec01_01 h2 span {
  padding: 38px 0 40px 10px;
  background: url(../img/common/mark_flower05.svg) no-repeat 0 0;
}

#korekara .sec02 .sec02_01 h2 span {
  padding: 46px 0 40px 10px;
  background: url(../img/common/mark_flower06.svg) no-repeat 0 0;
}

#korekara .sec03 .sec03_01 h2 span {
  padding: 46px 0 40px 10px;
  background: url(../img/common/mark_flower07.svg) no-repeat 0 0;
}

#korekara dl.license {
  padding: 9px 0;
  color: #2E7776;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: url(../img/common/dotline.svg) repeat-x 0 top, url(../img/common/dotline.svg) repeat-x 0 bottom;
  line-height: 2;
}

#korekara dl.license dt {
  margin-right: 50px;
  font-size: 2.2rem;
  letter-spacing: 0.22em;
}

#korekara dl.license dd {
  margin-right: 10px;
}

@media screen and (max-width: 768px) {
  #korekara .sec {
    padding: 0 25px 200px;
  }
  #korekara .sec01 {
    display: block;
  }
  #korekara .sec01 .sec01_01 h2 span {
    padding: 10px 0;
    background: url(../img/common/mark_flower05.svg) no-repeat 0 0/16px auto;
  }
  #korekara .sec02 .sec02_01 h2 span {
    padding: 10px 0;
    background: url(../img/common/mark_flower06.svg) no-repeat 0 0/30px auto;
  }
  #korekara .sec03 .sec03_01 h2 span {
    padding: 10px 0;
    background: url(../img/common/mark_flower07.svg) no-repeat 0 0/9px auto;
  }
  #korekara dl.license {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    line-height: 1.78;
  }
  #korekara dl.license dt {
    margin-right: 0;
    width: 100%;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
  }
  #korekara dl.license dd {
    margin-right: 0;
    width: 100%;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
  }
}

/* atelier505
-------------------------------------------------- */
#atelier505 .sec {
  padding: 150px 0;
}

#atelier505 .sec01 {
  background: #FCF6F5;
  text-align: center;
}

#atelier505 .sec01 p {
  margin-bottom: 1.5em;
  letter-spacing: 0.3em;
  line-height: 2.18;
}

#atelier505 .sec02 dl {
  margin-bottom: 80px;
  text-align: center;
}

#atelier505 .sec02 dl dt {
  margin-bottom: 20px;
  padding-bottom: 20px;
  font-size: 2.2rem;
  letter-spacing: 0.22em;
}

#atelier505 .sec02 dl dd {
  letter-spacing: 0.22em;
  line-height: 1.875;
}

#atelier505 .sec02 dl dd span {
  font-size: 2.2rem;
  display: block;
}

#atelier505 .sec02 dl.dl01 dt {
  color: #91B0DC;
  background: url(../img/common/dotline_b.svg) no-repeat center bottom;
}

#atelier505 .sec02 dl.dl02 dt {
  color: #96D0D5;
  background: url(../img/common/dotline_g.svg) no-repeat center bottom;
}

#atelier505 .sec02 dl.dl03 dt {
  color: #9DC172;
  background: url(../img/common/dotline_lg.svg) no-repeat center bottom;
}

#atelier505 .sec02 dl.dl04 dt {
  color: #938ABD;
  background: url(../img/common/dotline_p.svg) no-repeat center bottom;
}

#atelier505 .sec02 dl.dl05 dt {
  background: url(../img/common/dotline_r.svg) no-repeat center bottom;
}

@media screen and (max-width: 768px) {
  #atelier505 .sec {
    padding: 70px 0 60px;
  }
  #atelier505 .sec01 {
    text-align: left;
  }
  #atelier505 .sec01 .txtinbox {
    padding-left: 25px;
    padding-right: 25px;
  }
  #atelier505 .sec01 p {
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    line-height: 1.78;
  }
  #atelier505 .sec02 dl {
    margin-bottom: 40px;
  }
  #atelier505 .sec02 dl dt {
    margin-bottom: 12px;
    padding-bottom: 12px;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 1.78;
  }
  #atelier505 .sec02 dl dd {
    font-size: 1.2rem;
  }
  #atelier505 .sec02 dl dd span {
    font-size: 1.4rem;
  }
}

/* sitemap
-------------------------------------------------- */
#sitemap .page_head {
  margin: 0 auto 350px;
}

#sitemap .page_head .page_ttl h1 {
  margin-bottom: 25px;
  font-size: 2.8rem;
  letter-spacing: 1.4em;
  line-height: 2.14;
}

#sitemap .page_head .page_ttl h1::after {
  content: " ";
  margin-left: -1.4em;
}

#sitemap .sec .inner {
  margin: 0 auto 100px;
  padding-bottom: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: url(../img/common/dotline.svg) repeat-x 0 bottom;
}

#sitemap .sec .inner:last-of-type {
  padding-bottom: 0;
  background: none;
}

#sitemap .sec .inner:last-of-type .txtbox h2 span {
  padding: 10px 0 50px 14px;
}

#sitemap .sec .inner .txtbox {
  width: 50%;
}

#sitemap .sec .inner .txtbox h2 {
  padding-bottom: 0;
}

#sitemap .sec .inner .txtbox h2 span {
  padding: 30px 0 40px 14px;
  font-size: 2.2rem;
  letter-spacing: 0.6em;
  line-height: 1.36;
  display: inline-block;
}

#sitemap .sec .inner .txtbox h2.h2_01 span {
  background: url(../img/common/mark_nav01.svg) no-repeat 0 0;
}

#sitemap .sec .inner .txtbox h2.h2_02 span {
  background: url(../img/common/mark_nav03.svg) no-repeat 0 0;
}

#sitemap .sec .inner .txtbox h2.h2_03 span {
  background: url(../img/common/mark_nav04.svg) no-repeat 0 0;
}

#sitemap .sec .inner .txtbox h2.h2_04 span {
  background: url(../img/common/mark_nav05.svg) no-repeat 0 0;
}

#sitemap .sec .inner .txtbox h2.h2_05 span {
  padding: 10px 0 50px 14px;
  background: url(../img/common/mark_nav06.svg) no-repeat 0 0;
}

#sitemap .sec .inner .txtbox ul li {
  position: relative;
  padding: 0 0 0 60px;
  line-height: 2.5;
}

#sitemap .sec .inner .txtbox ul li::before {
  position: absolute;
  content: '';
  width: 40px;
  height: 1px;
  background: #BFD6D5;
  top: 50%;
  left: 0;
}

@media screen and (max-width: 768px) {
  #sitemap .page_head {
    margin: 0 auto 100px;
  }
  #sitemap .page_head .page_ttl h1 {
    margin-bottom: 18px;
    font-size: 1.4rem;
    letter-spacing: 0.7em;
  }
  #sitemap .sec .inner {
    margin: 0;
    padding-bottom: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    background: none;
  }
  #sitemap .sec .inner:last-of-type .txtbox h2 span {
    padding: 2px 0 20px 5px;
  }
  #sitemap .sec .inner .txtbox {
    margin-bottom: 70px;
    width: 100%;
  }
  #sitemap .sec .inner .txtbox h2 span {
    font-size: 1.4rem;
    line-height: 1;
  }
  #sitemap .sec .inner .txtbox h2.h2_01 span {
    padding: 12px 0 20px 5px;
    background: url(../img/common/mark_nav01.svg) no-repeat 0 0/23px auto;
  }
  #sitemap .sec .inner .txtbox h2.h2_02 span {
    padding: 12px 0 20px 5px;
    background: url(../img/common/mark_nav03.svg) no-repeat 0 0/15px auto;
  }
  #sitemap .sec .inner .txtbox h2.h2_03 span {
    padding: 12px 0 20px 5px;
    background: url(../img/common/mark_nav04.svg) no-repeat 0 0/16px auto;
  }
  #sitemap .sec .inner .txtbox h2.h2_04 span {
    padding: 12px 0 20px 5px;
    background: url(../img/common/mark_nav05.svg) no-repeat 0 0/16px auto;
  }
  #sitemap .sec .inner .txtbox h2.h2_05 span {
    padding: 2px 0 20px 5px;
    background: url(../img/common/mark_nav06.svg) no-repeat 0 0/16px auto;
  }
  #sitemap .sec .inner .txtbox ul li {
    padding: 0 0 0 30px;
    line-height: 2;
  }
  #sitemap .sec .inner .txtbox ul li::before {
    width: 20px;
  }
  #sitemap .sec .inner .txtbox ul li a {
    font-size: 1.2rem;
  }
}

/* contact
-------------------------------------------------- */
#contact .icn {
  margin: 0 auto 40px;
}

#contact .icn.tel {
  width: 60px;
}

#contact .icn.mail {
  width: 58px;
}

#contact h2 {
  margin-bottom: 60px;
  text-align: center;
  font-size: 3rem;
}

#contact .sec01 {
  padding: 200px 0 150px;
}

#contact .sec01 .sec01_01 {
  padding: 60px 60px 12px;
  background: #2E7776;
  border-radius: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#contact .sec01 .sec01_01 dl {
  margin-bottom: 48px;
  width: 30%;
  color: #fff;
}

#contact .sec01 .sec01_01 dl dt {
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

#contact .sec01 .sec01_01 dl dd {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

#contact .sec01 .sec01_01::after {
  content: '';
  width: 30%;
  display: block;
}

#contact .sec02 {
  padding: 0;
}

#contact .sec02 .sec02_01 .contact_box {
  padding: 75px 70px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #2E7776;
}

.contact_recruit .sec02,
.confirm .sec02 {
  padding: 100px 0 0 !important;
}

.contact_recruit .sec02 h3,
.confirm .sec02 h3 {
  margin-bottom: 20px;
  font-size: 3rem;
}

.contact_recruit .sec02 p,
.confirm .sec02 p {
  line-height: 2;
}

@media screen and (max-width: 420px) {
  #contact h2 {
    font-size: 2.2rem;
  }
  #contact .sec01 {
    margin: 0 auto 50px;
    padding: 0 0 50px;
    width: 94%;
  }
  #contact .sec01 .sec01_01 {
    padding: 40px 15px 30px;
    display: block;
  }
  #contact .sec01 .sec01_01 dl {
    margin-bottom: 20px;
    width: 100%;
    text-align: center;
  }
  #contact .sec02 .sec02_01 .contact_box {
    padding: 15px 15px 30px;
  }
  .contact_recruit .sec02,
  .confirm .sec02 {
    margin: 0 auto 50px;
    padding: 0 !important;
  }
  .contact_recruit .sec02 h3,
  .confirm .sec02 h3 {
    margin-bottom: 20px;
    font-size: 2.2rem;
  }
  .contact_recruit .sec02 p,
  .confirm .sec02 p {
    line-height: 1.8;
  }
}