@charset "UTF-8";
/*
  contents.css
  固有の箇所に使用するスタイル
*/
/*------------------------------------------------
  nav
------------------------------------------------*/
@media screen and ( min-width: 768px ){ /* PC */
  .nav {
    display: flex;
    align-items: center;
    background: #ad061d;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
  }
  .nav > :first-child {
    margin-right: auto;
  }
}
/*------------------------------------------------
  header
------------------------------------------------*/
.header_logo {
  display: block;
  padding: 3px 5px 8px 15px;
}
.header_logo img {
  width: 136px;
}
@media screen and ( max-width: 767px ){ /* SP */
  .header {
    background: #ad061d;
  }
}
/*------------------------------------------------
  nav_list
------------------------------------------------*/
@media screen and ( min-width: 768px ){ /* PC */
  .nav_list {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav_list > * {
    margin: auto 1em;
  }
  .nav_list a {
    display: block;
  }
  .nav_list a:not(.btn) {
    padding: 0.5em;
    font-size: 1.4rem;
    text-decoration: none;
    color: #fff;
  }
  .sp_tracking_wrapper {
    display: none;
  }
}
@media screen and ( max-width: 767px ){ /* SP */
  .nav_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: auto;
    position: fixed;
    top: 0; bottom: 0; right: 0;
    z-index: 100;
  }
  .nav_list > * {
    margin: 0 auto;
  }
  .nav_list a {
    width: 20px;
    padding: 1em 0 1em .5em;
    text-decoration: none;
    color: rgba(0,0,0, .4);
    font-size: 1.2rem;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    -webkit-text-orientation: upright;
    text-orientation: upright;
  }
}
/*------------------------------------------------
  sp_tracking_wrapper
------------------------------------------------*/
.sp_tracking_wrapper {
  height: 30px;
  margin: auto;
  background: #333;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  text-align: center;
  z-index: 100;
  transition: .5s;
}
.sp_tracking_wrapper.hide {
  transform: translateY(200%);
  opacity: 0;
}
.sp_tracking_wrapper > * {
  margin: auto;
  transform: translateY(-50%);
}
/*------------------------------------------------
  hero
------------------------------------------------*/
.hero {
  max-width: 1000px;
}
.hero_catch {
  font-family: 'Noto Serif JP', serif;
  line-height: 1.6;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: .05em;
}
.hero_catch b {
  line-height: 3;
}
.hero_txt {
  color: #4d4d4d;
}
@media screen and ( max-width: 767px ){ /* SP */
  .hero {
    padding: 20px 15px 0px;
  }
  .hero_catch {
    text-align: center;
    font-size: 2.4rem;
  }
  .hero_img {
    display: block;
    width: 300px;
    margin: 25px auto;
  }
  .hero_txt {
    display: table;
    margin: auto;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .hero {
    margin: 140px auto auto;
    padding: 0 20px;
  }
  .hero_body {
    display: flex;
    align-items: center;
  }
  .hero_body > :first-child {
    margin-top: -40px;
    flex-shrink: 0;
  }
  .hero_body > :nth-child(2) {
    margin-left: auto;
  }
  .hero_catch {
    font-size: 3.9rem;
  }
  .hero_img {
    max-width: 490px;
    width: 100%;
  }
  .hero_txt {
    margin-top: -20px;
    margin-bottom: 60px;
  }
}
/*------------------------------------------------
  summary
------------------------------------------------*/
.summary {
}
.summary_item img {
  display: block;
  margin: auto;
}
.summary_item .hl2 {
  text-align: center;
  margin: 1em auto;
}
.summary_txt {
  color: #4d4d4d;
}
@media screen and ( max-width: 767px ){ /* SP */
  .summary {
    margin: auto 15px;
  }
  .summary_item {
    margin: 30px auto 60px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .summary {
    max-width: 1060px;
    margin: 80px auto;
  }
  .summary_body {
    display: flex;
  }
  .summary_item {
    flex-basis: 100%;
    margin: auto 30px;
  }
}
/*------------------------------------------------
  system
------------------------------------------------*/
.system_img { width: 100%;}

@media screen and ( max-width: 767px ){ /* SP */
  .system {
    margin: auto 15px;
  }
  .system_img {
    margin-top: 20px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .system {
    max-width: 1040px;
    padding: 0 20px;
    margin: 80px auto;
  }
}
/*------------------------------------------------
  example
------------------------------------------------*/
.example_img { width: 100%;}

@media screen and ( max-width: 767px ){ /* SP */
  .example {
    margin: auto 15px;
  }
  .example_img.pc { display: none;}
  .example_img {
    margin-top: 20px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .example {
    max-width: 1040px;
    padding: 0 20px;
    margin: 80px auto;
  }
  .example_img.sp { display: none;}
}
/*------------------------------------------------
  functions
------------------------------------------------*/
.function_item .hl {
  font-weight: bold;
  margin-bottom: 1em;
}
@media screen and ( max-width: 767px ){ /* SP */
  .functions {
    margin: auto 15px;
  }
  .function_item {
    margin: 30px auto;
  }
  .function_item .hl {
    padding-left: 5px;
    border-left: 5px solid #ccc;
  }
  .function_item .txt {
    color: #4d4d4d;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .functions {
    max-width: 1040px;
    margin: 80px auto;
    padding: 0 20px;
  }
  .function_item {
    border-left: 5px solid #ccc;
    margin: 50px auto;
    padding: 10px 0 10px 25px;
  }
}
/* sub_functions */
.sub_functions {
  background: #f4f4f4;
}
.sub_function_item .hl {
  margin-bottom: 10px;
  padding-left: 20px;
  font-weight: bold;
  position: relative;
}
.sub_function_item .hl::before {
  display: block; content: '';
  width: 7px; height: 7px;
  margin: auto;
  border: solid #666;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
  position: absolute;
  top: 0; bottom: 0; left: 0;
}
@media screen and ( max-width: 767px ){ /* SP */
  .sub_functions {
    margin: 30px -5px;
    padding: 20px 15px 1px;
  }
  .sub_function_item {
    margin: 30px auto;
  }
  .sub_function_item .txt {
    color: #4d4d4d;
    font-size: 1.5rem;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .sub_functions {
    margin: 80px auto;
    padding: 40px 40px 1px;
  }
  .sub_function_item {
    margin: 50px auto;
  }
  .sub_function_item .txt {
    padding-left: 20px;
  }
}
/*------------------------------------------------
  howto_introduce
------------------------------------------------*/
.howto_intro_item .step {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7931e;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
}
.howto_intro_item .step .num {
  display: inline-block;
  margin-left: 5px;
  font-weight: bold;
}
.howto_intro_item > img {
  display: block;
  margin: 20px auto;
  width: 100%;
  max-width: 300px;
}
.howto_intro_item .hl {
  font-weight: bold;
  text-align: center;
}
.howto_intro_item .note {
  display: table;
  margin: 1em auto;
  font-size: 1.3rem;
  color: #666;
}

@media screen and ( max-width: 767px ){ /* SP */
  .howto_introduce {
    margin: 40px 20px;
  }
  .howto_intro_item {
    margin: 20px auto;
  }
  .howto_intro_item .step {
    height: 40px;
    position: relative;
  }
  .howto_intro_item .step::after {
    display: block; content: '';
    width: 0; height: 0;
    margin: auto;
    border-style: solid;
    border-width: 10px 25px 0 25px;
    border-color: #f7921e transparent transparent transparent;
    position: absolute;
    bottom: -10px; left: 0; right: 0;
  }
  .howto_intro_item .step .num {
    font-size: 1.6em;
    margin-bottom: 5px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .howto_introduce {
    padding: 0 20px;
  }
  .howto_intro_body {
    display: flex;
    max-width: 1040px;
    margin: auto auto 80px;
  }
  .howto_intro_body > * {
    flex-basis: 100%;
  }
  .howto_intro_item .step {
    height: 50px;
    position: relative;
  }
  .howto_intro_item:not(:last-child) .step::after {
    display: block; content: '';
    width: 44px; height: 44px;
    border: solid #fff;
    border-width: 8px 8px 0 0;
    transform: rotate(45deg);
    position: absolute;
    right: -10px;
    z-index: 1;
  }
  .howto_intro_item .step .num {
    font-size: 2.2em;
    margin-bottom: 3px;
  }
}
/*------------------------------------------------
  download
------------------------------------------------*/
.docset_img {
  margin-bottom: 1em;
}
.docset_list {
  margin-bottom: 1em;
  padding-left: 2em;
  list-style: disc;
}
.mail_send {
  margin: 40px auto;
  padding: 20px;
  background: #fdf69c;
  border-radius: 10px;
  text-align: center;
}
.mail_send p {
  margin-bottom: 1em;
}
.personal_info {
  margin: 40px auto;
  font-size: 1.5rem;
}
@media screen and ( max-width: 767px ){ /* SP */
  .download {
    padding: 1px 20px;
  }
  .docset { margin: 40px auto;}
  .mail_send .btn_download { width: 240px;}
  #first_name, #last_name {
    display: block;
    width: 100%;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .download {
    padding: 1px 0;
  }
  .download .hl1 + p { padding: 0 20px;}
  .download_body {
    display: flex;
    justify-content: space-between;
    max-width: 1040px;
    margin: auto;
  }
  .download_body > * {
    margin: 40px 20px;
  }
  .download_body > :first-child {
    width: 340px;
  }
  .download_body > :last-child {
    width: 570px;
  }
}
/*------------------------------------------------
  footer
------------------------------------------------*/
.footer {
  background: #333;
  color: #fff;
  text-align: center;
}
.footer p {
  margin-bottom: 1em;
  font-size: 1.4rem;
}
@media screen and ( max-width: 767px ){ /* SP */
  .footer {
    padding: 20px 10px 70px;
  }
}
@media screen and ( min-width: 768px ){ /* PC */
  .footer {
    padding: 80px 20px;
  }
}