@charset "UTF-8";
html {
  font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif; }

body {
  line-height: 1.8;
  width: 100%;
  color: #000000;
  background: #F1F1F1; }

img {
  vertical-align: bottom;
  max-width: 100%; }

a {
  text-decoration: none; }

li {
  list-style: none; }

/* ****************************
    common
**************************** */
section {
  padding: 140px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.intro .wrapper,
.reason .wrapper,
.use .wrapper,
.example .wrapper,
.form .wrapper {
  max-width: 800px;
  width: 100%;
  margin: auto; }

.cmn-heading {
  text-align: center;
  font-size: 32px;
  letter-spacing: 6px;
  margin-bottom: 64px; }

.cmn-text {
  font-size: 15px; }

.cmn-text-highlight {
  display: inline-block;
  padding: 4px 6px;
  line-height: 1;
  background: #CCCCCC; }

.cmn-note {
  font-size: 13px;
  color: #8C8C8C; }

.cmn-link {
  color: #45A8F5;
  text-decoration: underline; }

.cmn-link:hover {
  text-decoration: none; }

.centering {
  margin: auto; }

.btn {
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  width: 346px;
  height: 48px;
  font-size: 16px;
  font-weight: bold;
  color: #FFFFFF;
  letter-spacing: 1px;
  line-height: 48px;
  border: solid 1px #45A8F5;
  border-radius: 2px;
  background: #45A8F5; }

.icon {
  display: block;
  width: 36px;
  height: auto;
  margin: auto; }

.disp-pc {
  display: block; }

.disp-sp {
  display: none; }

@media screen and (max-width: 768px) {
  section {
    padding: 56px 24px; }
  .cmn-heading {
    font-size: 18px;
    letter-spacing: 4px;
    margin-bottom: 40px; }
  .btn {
    width: 100%; }
  .icon {
    width: 24px; }
  .disp-pc {
    display: none; }
  .disp-sp {
    display: block; } }

/* ****************************
    header
**************************** */
header {
  max-width: 1440px;
  width: 100%;
  margin: auto; }

header .logo {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 24px 24px 20px; }

header .logo img {
  width: 104px;
  height: auto; }

@media screen and (max-width: 768px) {
  padding: 24px 80px 20px; }

/* ****************************
    mainVisual
**************************** */
.mainvisual {
  height: 500px;
  background: url(../img/background_pc_img@2x.png) top center no-repeat;
  background-size: cover; }

section.mainvisual {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 170px 24px; }

.mainvisual .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 1440px;
  width: 100%;
  margin: auto; }

.mainvisual h2 {
  display: inline-block;
  font-size: 40px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 1.6;
  margin-bottom: 20px; }

.mainvisual h2 .cmn-text-highlight {
  background: #000000;
  margin: 0; }

.mainvisual h2 .cmn-text-highlight:nth-of-type(odd) {
  padding: 8px 0 8px 12px; }

.mainvisual h2 .cmn-text-highlight:nth-of-type(even) {
  padding: 8px 12px 8px 0; }

.mainvisual p {
  font-size: 20px;
  color: #FFFFFF; }

.mainvisual p .cmn-text-highlight {
  padding: 4px 12px;
  background: #000000; }

@media screen and (max-width: 768px) {
  .mainvisual {
    height: 400px;
    background: url(../img/background_sp_img@2x.png) top center no-repeat;
    background-size: cover; }
  section.mainvisual {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 44px 24px 140px; }
  .mainvisual h2 {
    font-size: 28px;
    line-height: 1.45; }
  .mainvisual h2 .cmn-text-highlight:nth-of-type(odd) {
    padding: 4px 6px; }
  .mainvisual h2 .cmn-text-highlight:nth-of-type(even) {
    padding: 4px 6px; }
  .mainvisual p {
    font-size: 14px; }
  .mainvisual p .cmn-text-highlight {
    padding: 4px 6px;
    background: #000000; } }

/* ****************************
    cv
**************************** */
.cv {
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 36px 24px;
  background: #FFFFFF; }

/* ****************************
    intro
**************************** */
.intro .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1060px; }

.intro_img img {
  width: 278px;
  padding: 16px; }

.intro_text p {
  font-size: 20px;
  font-weight: bold;
  line-height: 2.4;
  letter-spacing: 1px; }

.intro_text p:not(:last-child) {
  margin-bottom: 24px; }

@media screen and (max-width: 768px) {
  .intro .wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .intro_img {
    text-align: center; }
  .intro_img img {
    width: 148px;
    margin-bottom: 48px; }
  .intro_text p {
    font-size: 14px;
    font-weight: bold;
    line-height: 2.4;
    letter-spacing: 0.7px; } }

/* ****************************
    reason
**************************** */
.reason_list_item:not(:last-child) {
  margin-bottom: 64px; }

.reason_list_item h4 {
  font-size: 24px;
  margin-bottom: 32px; }

.reason_list_item p {
  font-size: 16px;
  letter-spacing: 0.8px; }

.reason_list_item:first-child p {
  margin-bottom: 40px; }

@media screen and (max-width: 748px) {
  .reason_list_item:not(:last-child) {
    margin-bottom: 40px; }
  .reason_list_item h4 {
    font-size: 20px;
    margin-bottom: 20px; }
  .reason_list_item p {
    font-size: 14px; }
  .reason_list_item:first-child p {
    margin-bottom: 32px; } }

/* ****************************
    use
**************************** */
.use_list_item:not(:last-child) {
  margin-bottom: 56px; }

.use_list_item h4 {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 2px;
  padding-left: 18px;
  margin-bottom: 24px; }

.use_list_item h4:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 2px;
  height: 20px;
  background: #000000; }

.use_list_item p {
  font-size: 16px;
  letter-spacing: 0.3px; }

@media screen and (max-width: 748px) {
  .use_list_item:not(:last-child) {
    margin-bottom: 48px; }
  .use_list_item h4 {
    font-size: 14px;
    margin-bottom: 20px;
    padding-left: 14px; }
  .use_list_item h4:before {
    height: 14px; }
  .use_list_item p {
    font-size: 14px; } }

/* ****************************
  example
**************************** */
.example h4 {
  font-size: 23px;
  letter-spacing: 0.6px;
  color: #000000;
  margin-bottom: 48px; }

.example .thumbnail {
  margin-bottom: 56px; }

.example_text {
  max-width: 600px;
  margin: auto; }

.example_list_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.example_list_item dt {
  max-width: 208px;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px; }

.example_list_item dd {
  font-size: 14px; }

@media screen and (max-width: 748px) {
  .example h4 {
    font-size: 16px;
    margin-bottom: 36px; }
  .example .thumbnail {
    margin-bottom: 20px; }
  .example_list_item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
  .example_list_item:not(:last-child) {
    margin-bottom: 20px; }
  .example_list_item dt {
    font-size: 13px;
    margin-bottom: 8px; } }

/* ****************************
  form
**************************** */
.form {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 80px 24px;
  text-align: center;
  background: #FFFFFF; }

.form_text {
  text-align: left;
  font-size: 16px;
  color: #000000;
  margin-bottom: 56px; }

@media screen and (max-width: 748px) {
  .form {
    padding: 56px 24px; }
  .form_text {
    font-size: 14px;
    margin-bottom: 48px; } }

/* ****************************
  formrun
**************************** */
.formrun-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 1000px;
  width: 100%;
  margin-bottom: 24px; }

.formrun-inner > div {
  margin-bottom: 32px; }

.formrun input[type="text"] {
  width: 378px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 13px 16px;
  -webkit-appearance: none;
  background: #F1F1F1;
  border: none;
  border-radius: 2px;
  font-size: 15px; }

.formrun label {
  position: relative;
  display: block;
  text-align: left;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  line-height: 1;
  margin-bottom: 16px; }

.formrun .required_asterisk:after {
  position: absolute;
  top: 0;
  content: "必須";
  font-size: 10px;
  font-weight: normal;
  color: #262626;
  padding: 2px 4px;
  border-radius: 2px;
  background: #D7D7D7;
  margin-left: 4px; }

.formrun div[data-formrun-show-if-error] {
  color: #ff6752;
  font-size: 16px;
  margin-top: 8px;
  text-align: left; }

::-webkit-input-placeholder {
  color: #A6A6A6; }

.formrun .btn {
  font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif;
  margin-bottom: 32px; }

@media screen and (max-width: 748px) {
  .formrun-inner {
    width: 100%; }
  .formrun-inner > div {
    margin-bottom: 24px;
    width: 100%; }
  .formrun input[type="text"] {
    width: 100%; } }