@charset "utf-8";

@media only screen and (min-width: 1450px) {
  .title_wrapper .title, .title_wrapper .subtitle { display: inline-block; width: calc(50% - 440px); }
  .title_wrapper .title { text-align: right; margin: 0px; }
  .title_wrapper .subtitle { text-align: left; }
  .header_placeholder { width: 880px; display: inline-block; vertical-align: top; }
}

@media only screen and (min-width: 1024px) and (max-width: 1250px) {
  #keyvisual, #keyvisual .cm-slides-addon { height: 320px; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .centerer { width: 100%; }
  .header_wrapper { padding: 0px; }
  .title { display: block; width: 90%; margin: 0px auto 1em; }
  .subtitle { display: block; width: 90%; margin: 0px auto 1em; }
  #logo { height: 170px; width: 100%; border-top: 20px solid transparent; background-size: contain !important; background-position: center center !important; }
  .navigation_wrapper { display: none; }
  #keyvisual, #keyvisual .cm-slides-addon { height: 270px; }
  .navigation_wrapper_mobile { display: block; }
  .toggle_navigation { display: inline-block; }
  .toggle_wrapper--contain { display: flex; justify-content: center; align-items: center; width: 55px; height: 55px; }
  .navigation_wrapper_mobile { padding-top: 100px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .centerer { width: 100%; }
  .header_wrapper { padding: 0px; }
  #logo { height: 130px; width: 100%; border-top: 10px solid transparent; background-size: contain !important; background-position: center center !important; }
  .title { display: block; width: 90%; margin: 0px auto 1em; }
  .subtitle { display: block; width: 90%; margin: 0px auto 1em; }
  .navigation_wrapper { display: none; }
  #keyvisual, #keyvisual .cm-slides-addon { height: 240px; }
  .navigation_wrapper_mobile { display: block; }
  .toggle_navigation { display: inline-block; }
  .design_content { padding: 30px 20px; }
  .sidebar_wrapper { padding: 0px 20px; }
  .sidebar { display: block; padding: 0px 0px 30px; width: 100%; margin: 0px; }
  .navigation_wrapper_mobile { width: 60%; }
  .toggle_wrapper--contain { display: flex; justify-content: center; align-items: center; height: 55px; width: 55px; }
}

@media only screen and (min-width: 1px) and (max-width: 479px) {
  .centerer { width: 100%; }
  .header_wrapper { padding: 0px; }
  #logo { height: 85px; width: 100%; border-top: 15px solid transparent; background-size: contain !important; background-position: center center !important; }
  .title { display: block; width: 90%; margin: 0px auto 1em; }
  .subtitle { display: block; width: 90%; margin: 0px auto 1em; }
  .navigation_wrapper { display: none; }
  #keyvisual, #keyvisual .cm-slides-addon { height: 140px; }
  .navigation_wrapper_mobile { display: block; }
  .toggle_navigation { display: inline-block; }
  .toggle_wrapper--contain { display: flex; justify-content: center; align-items: center; height: 55px; width: 55px; }
  .design_content { padding: 30px 10px; }
  .sidebar_wrapper { padding: 0px 10px; }
  .sidebar { display: block; padding: 15px 0px; width: 100%; margin: 0px; }
  .sidebar_wrapper .cm-widget-teaser { margin: 0px auto 5px !important; }
  .navigation_wrapper_mobile { width: 85%; }
}

@media only screen and (max-width: 767px) {
  .title_wrapper { flex-direction: column; justify-content: center; }
  .header_placeholder { display: none; }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .cm-templates-heading__title, .cm-templates-heading__title span { font-size: 10vw !important; }
  .cm-templates-heading__subtitle, .cm-templates-heading__subtitle span { font-size: 5vw !important; }
}

@media only screen and (max-width: 767px) and (orientation: landscape) {
  .cm-templates-heading__title, .cm-templates-heading__title span { font-size: 10vw !important; }
  .cm-templates-heading__subtitle, .cm-templates-heading__subtitle span { font-size: 5vw !important; }
}

@media only screen and (min-width: 768px) and (max-width: 1280px) and (orientation: portrait) {
  .cm-templates-heading__title, .cm-templates-heading__title span { font-size: 5vw !important; }
  .cm-templates-heading__subtitle, .cm-templates-heading__subtitle span { font-size: 3vw !important; }
}

@media only screen and (min-width: 768px) and (max-width: 1280px) and (orientation: landscape) {
  .cm-templates-heading__title, .cm-templates-heading__title span { font-size: 3vw !important; }
  .cm-templates-heading__subtitle, .cm-templates-heading__subtitle span { font-size: 3vw !important; }
}