@charset "UTF-8";
/* #mainImg 下層ページ
================================================ */
/*  #base
================================================ */
/* mainimg */
body:before { position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: #262626 url(../img/post/mainimg01_sp.png) no-repeat; background-size: 100% auto; content: ''; }

@media screen and (min-width: 600px) { body:before { z-index: -1; background-image: url(../img/post/mainimg01_pc.png); background-size: 1920px; background-position: top center; min-width: 1520px; } }

/* mask sp */
@media screen and (max-width: 599px) { #bg, #gFooter { position: relative; z-index: 2; }
  #contents { position: relative; z-index: 0; }
  #contents:before { position: absolute; content: ''; top: -109px; left: 0; width: 100%; height: 100%; background: url(../img/common/bg_contents01_sp.png) no-repeat top right; background-size: 100% auto; z-index: 0; }
  #contents:after { position: absolute; content: ''; top: 400px; left: 0; width: 100%; height: 100%; background: #262626; background-size: contain; z-index: 0; } }

/* mask pc */
@media screen and (min-width: 600px) { #bg { position: relative; background: #262626; }
  #bg:before { content: ""; position: absolute; top: -253px; height: 675px; width: 1920px; display: block; left: 50%; padding: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: url(../img/common/bg_contents01_pc.png) no-repeat top center; background-size: cover; z-index: 0; } }

#contents { color: #fff; }

/*  #parallax01
================================================ */
#parallax01 { position: absolute; bottom: -278px; width: 100%; height: 552px; overflow: hidden; z-index: 0; }

#parallax01 .inner { width: 100%; height: 100%; background: url(../img/post/bg_parallax01.png) center; background-size: cover; background-attachment: fixed; position: relative; }

#parallax01 .inner:before { content: ''; background: #262626; -webkit-transform: skewY(30deg); -webkit-transform-origin: left top; -ms-transform: skewY(30deg); transform: skewY(30deg); -ms-transform-origin: left top; transform-origin: left top; width: 100%; height: 216px; position: absolute; top: -216px; right: 0; }

#parallax01 .inner:after { content: ''; background: #262626; -webkit-transform: skewY(30deg); -webkit-transform-origin: right bottom; -ms-transform: skewY(30deg); transform: skewY(30deg); -ms-transform-origin: right bottom; transform-origin: right bottom; width: 100%; height: 216px; position: absolute; bottom: -216px; left: 0; }

@media screen and (min-width: 600px) { #parallax01 { top: 159px; bottom: auto; height: 1949px; }
  #parallax01 .inner { max-width: 1920px; margin: 0 auto; }
  #parallax01 .inner:before { height: 1109px; top: -1109px; }
  #parallax01 .inner:after { height: 1109px; bottom: -1109px; } }

/*  #agency
================================================ */
#agency { position: relative; }

#agency .inner { position: relative; z-index: 1; }

#agency .difficulty { padding-bottom: 25px; position: relative; }

#agency .difficulty:after { content: ""; position: absolute; width: 20px; height: 20px; left: 50%; bottom: 0; -webkit-transform: translateX(-50%) rotate(135deg); -ms-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); border-top: 3px solid #fff; border-right: 3px solid #fff; }

#agency .difficulty .tit { font-size: 1.8rem; font-weight: 700; text-align: center; letter-spacing: .06em; }

#agency .difficulty .list { margin-top: 6px; }

#agency .difficulty .list .item { padding: 9px 10px 6px 47px; background: #1b1b1b; position: relative; line-height: 1.8; }

#agency .difficulty .list .item:before { content: ""; position: absolute; width: 20px; height: 20px; top: 50%; left: 14px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url(../img/common/ico_check01.png); background-size: contain; }

#agency .difficulty .list .item:nth-child(2n) { background: #262626; }

#agency .solution { margin-top: 5px; }

#agency .solution .tit { font-size: 2.2rem; font-weight: 700; color: #9ecb3a; text-align: center; letter-spacing: .06em; }

#agency .solution .areaImgtxt { margin-top: 24px; }

#agency .solution .areaImgtxt .wrapTxt { background: #fff; }

#agency .solution .areaImgtxt .wrapTxt .areaTxt { padding: 19px 26px 19px 24px; }

#agency .solution .areaImgtxt .wrapTxt .areaTxt .tit { font-size: 1.8rem; color: #262626; text-align: left; }

#agency .solution .areaImgtxt .wrapTxt .areaTxt .txt { margin-top: 6px; color: #262626; }

@media screen and (min-width: 600px) { #agency .difficulty { padding-bottom: 40px; }
  #agency .difficulty .tit { padding-left: 23px; font-size: 2.4rem; }
  #agency .difficulty .list { margin-top: 15px; }
  #agency .difficulty .list .item { padding: 11px 20px 11px 64px; font-size: 1.6rem; }
  #agency .difficulty .list .item:before { left: 30px; }
  #agency .difficulty:after { width: 25px; height: 25px; border-top: 4px solid #fff; border-right: 4px solid #fff; }
  #agency .solution { margin-top: 7px; }
  #agency .solution .tit { font-size: 3.4rem; }
  #agency .solution .areaImgtxt { margin-top: 50px; }
  #agency .solution .areaImgtxt .img { width: 50%; float: left; }
  #agency .solution .areaImgtxt .wrapTxt { position: relative; width: 50%; float: left; box-sizing: border-box; }
  #agency .solution .areaImgtxt .wrapTxt .areaTxt { padding: 0 40px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
  #agency .solution .areaImgtxt .wrapTxt .areaTxt .tit { font-size: 2rem; }
  #agency .solution .areaImgtxt .wrapTxt .areaTxt .txt { margin-top: 27px; line-height: 1.8; } }

/*  #background
================================================ */
#background { margin-top: 31px; position: relative; }

#background .areaTxt { padding: 29px 25px 21px 23px; border: solid 1px #fff; }

#background .areaTxt .tit { padding-left: 35px; font-size: 1.6rem; font-weight: 700; position: relative; }

#background .areaTxt .tit:before { content: ""; position: absolute; width: 24px; height: 24px; top: 50%; left: 1px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url(../img/post/ico_agency01.png); background-size: contain; }

#background .areaTxt .txt { margin-top: 7px; }

@media screen and (min-width: 600px) { #background { margin-top: 73px; }
  #background .areaTxt { padding: 29px 60px 47px 45px; }
  #background .areaTxt .tit { padding-left: 50px; font-size: 2.2rem; }
  #background .areaTxt .tit:before { width: 33px; height: 33px; left: 5px; }
  #background .areaTxt .txt { margin-top: 17px; line-height: 1.8; } }

/*  #flow
================================================ */
#flow { position: relative; z-index: 1; }

#flow .inner { padding-top: 33px; }

#flow .list { margin-top: 22px; }

#flow .list .item { position: relative; }

#flow .list .item .tit { padding: 30px 30px 30px 108px; position: relative; min-height: 56px; font-size: 1.6rem; font-weight: 700; line-height: 1.8; background: #1b1b1b; }

#flow .list .item .tit:before { content: ""; position: absolute; width: 43px; height: 64px; top: 50%; left: 41px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: url(../img/post/ico_flow01_sp.png) no-repeat; background-size: contain; }

#flow .list .item .tit span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

#flow .list .item .txt { margin-top: 9px; }

#flow .list .item + .item { padding-top: 42px; }

#flow .list .item + .item:before { content: ""; position: absolute; width: 20px; height: 20px; left: 50%; top: 0px; -webkit-transform: translateX(-50%) rotate(135deg); -ms-transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); border-top: 3px solid #fff; border-right: 3px solid #fff; }

#flow .list .item:nth-child(2) .tit:before { background: url(../img/post/ico_flow02_sp.png) no-repeat; background-size: contain; }

#flow .list .item:nth-child(3) .tit:before { background: url(../img/post/ico_flow03_sp.png) no-repeat; background-size: contain; }

@media screen and (min-width: 600px) { #flow .inner { padding-top: 81px; }
  #flow .list { margin: 35px -35px 0; }
  #flow .list .item { padding: 0 35px; width: 33.333%; float: left; box-sizing: border-box; }
  #flow .list .item + .item { padding-top: 0; }
  #flow .list .item + .item:before { width: 25px; height: 25px; top: 160px; left: -18px; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); border-top: 4px solid #fff; border-right: 4px solid #fff; }
  #flow .list .item .tit { padding: 20px 30px 20px 50px; min-height: 320px; font-size: 2rem; text-align: center; box-sizing: border-box; }
  #flow .list .item .tit:before { width: 64px; height: 99px; top: 72px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: url(../img/post/ico_flow01_pc.png) no-repeat; background-size: contain; }
  #flow .list .item .tit span { width: 100%; top: 219px; left: 0; }
  #flow .list .item .txt { margin-top: 25px; line-height: 1.8; }
  #flow .list .item:nth-child(2) .tit:before { background: url(../img/post/ico_flow02_pc.png) no-repeat; background-size: contain; }
  #flow .list .item:nth-child(3) .tit:before { background: url(../img/post/ico_flow03_pc.png) no-repeat; background-size: contain; } }

/*  #introduction
================================================ */
#introduction .inner { padding-top: 30px; padding-bottom: 48px; }

#introduction .lead { margin-top: 14px; }

#introduction .list { margin-top: 20px; }

#introduction .list .item .img { margin: 0 auto; width: 51%; }

#introduction .list .item .table { margin-top: 15px; }

#introduction .list .item .table tr th { padding-right: 10px; padding-bottom: 11px; width: 36%; font-weight: 700; border-right: solid 1px #fff; box-sizing: border-box; }

#introduction .list .item .table tr td { padding-left: 24px; }

#introduction .list .item + .item { margin-top: 30px; }

@media screen and (min-width: 600px) { #introduction { position: relative; }
  #introduction .inner { padding-top: 109px; padding-bottom: 123px; }
  #introduction .lead { margin-top: 30px; text-align: center; line-height: 1.8; }
  #introduction .list { margin-top: 47px; padding: 0 100px; }
  #introduction .list .item .img { width: 340px; float: left; }
  #introduction .list .item .table { margin-top: 0; padding-left: 60px; float: left; width: 560px; box-sizing: border-box; }
  #introduction .list .item .table tr th { padding-bottom: 22px; width: 163px; font-size: 1.8rem; }
  #introduction .list .item .table tr td { padding-left: 48px; font-size: 1.6rem; }
  #introduction .list .item + .item { margin-top: 50px; } }

/*  #form
================================================ */
#form { background: #1b1b1b; }

#form .inner { padding-top: 38px; }

#form .head { margin-bottom: 22px; }

#form .white { background: #fff; margin: 0 -20px; padding: 15px 20px 35px; color: #333; }

#form table, #form th, #form td, #form tbody, #form tr { display: block; }

#form input[type="text"], #form input[type="button"], #form input[type="submit"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }

#form input[type="text"], #form textarea { padding: 10px 15px; box-sizing: border-box; font-size: 1.5rem; border: 0; background: #f0f0f0; }

#form input[type="text"].is_on { box-shadow: 0 0 0 1px #262626 inset; background: #fff; }

#form textarea.is_on { background-image: -webkit-linear-gradient(left, #FFFFFF, #FFFFFF); border: 1px #262626 solid; background: #fff; }

#form input[type="text"], #form textarea { width: 100%; max-width: 100%; box-shadow: none; background-image: -webkit-linear-gradient(left, #f0f0f0, #f0f0f0); }

#form textarea { height: 250px; border-radius: 0; box-shadow: unset; resize: vertical; }

#form textarea:placeholder-shown, #form input:placeholder-shown { color: #bebebe; }

#form textarea::-webkit-input-placeholder, #form input::-webkit-input-placeholder { color: #bebebe; }

#form textarea:-moz-placeholder, #form input:-moz-placeholder { color: #bebebe; }

#form textarea:-ms-input-placeholder, #form input:-ms-input-placeholder { color: #bebebe; }

#form label.radio, #form label.check { padding: 2px 0; display: inline-block; }

#form label.radio { margin-bottom: 8px; }

#form label.radio:last-of-type { margin-bottom: 0; }

#form input[type="checkbox"] { display: none; }

#form input[type="checkbox"] + span { display: inline-block; position: relative; padding: 9px 0 13px 70px; line-height: 1.8; }

#form input[type="checkbox"] + span:before { content: ''; background: #fff; width: 20px; height: 20px; position: absolute; top: 50%; left: 25px; box-sizing: border-box; border: 1px solid #262626; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

#form input[type="checkbox"]:checked + span:before { background: url(../img/contact/ico_check01.png) no-repeat center #fff; background-size: 14px auto; }

#form .table { letter-spacing: .06em; }

#form .table th { padding: 14px 0 5px; position: relative; font-size: 1.7rem; font-weight: bold; }

#form .table th em { position: absolute; right: 0; top: 18px; background: #9ecb3a; color: #fff; font-size: .8rem; padding: 2px 7px; box-sizing: border-box; line-height: 1.5; }

#form .table th em.any { background: #fff; border: 1px solid #bebebe; color: #9a9a9a; }

#form .table td { padding: 0 0 19px; border-bottom: 1px solid #e8e6e7; }

#form .table tr:last-of-type td { border-bottom: 0; }

#form .em { position: relative; top: -2px; background: #3fbbb9; color: #fff; font-size: .8rem; padding: 1px 8px; box-sizing: border-box; line-height: 1.6; }

#form .privacy { font-size: 1.5rem; padding: 0 0 5px; line-height: 1.8; }

#form .privacy a { color: #9ecb3a; text-decoration: underline; }

#form .agree { background: #f0f0f0; text-align: center; }

#form .agree span { font-size: 1.5rem; }

#form .submitArea { margin-top: 26px; text-align: center; }

#form .submitArea .btn a { padding-right: 0; padding-left: 0; }

#form .contactBtn { display: block; position: relative; box-sizing: border-box; width: 100%; margin: auto; padding: 16px 18px; background: #9ecb3a url(../img/common/ico_arrow01_white.png) no-repeat right 18px center/30px 10px; color: #fff; font-size: 1.7rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; transition: all 0.3s ease; }

#form.is-checked .btn:before { display: none; }

#form.is-checked .btn a { background: #9ecb3a; }

#form .js-submit .btn { display: block; position: relative; }

#form .js-submit .btn:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; }

#form .js-submit .btn a { background: #bebebe; }

#form .js-submit.is-checked .btn:before { display: none; }

#form .js-submit.is-checked .btn a { background: #9ecb3a; }

@media screen and (min-width: 600px) { #form .inner { padding-top: 104px; padding-bottom: 100px; }
  #form .head { margin-bottom: 67px; }
  #form .white { margin: 0; padding: 60px 80px 80px; }
  #form table { display: table; }
  #form tr { display: table-row; }
  #form tbody { width: 100%; display: table-row-group; }
  #form th, #form td { display: table-cell; box-sizing: border-box; }
  #form input[type="text"], #form textarea, #form select { padding: 12px 19px; font-size: 1.7rem; }
  #form input[type="text"] { width: 520px; }
  #form textarea { width: 100%; max-width: 100%; }
  #form select { background-position: right 15px bottom 16px; background-size: 10px auto; }
  #form textarea { height: 240px; }
  #form label.check { padding: 0; cursor: pointer; }
  #form input[type="checkbox"] + span { display: block; padding: 0 0 0 34px; text-align: left; }
  #form input[type="checkbox"] + span:before { width: 18px; height: 18px; top: 4px; left: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  #form input[type="checkbox"]:checked + span:before { background-size: 12px auto; }
  #form .table { letter-spacing: .1em; width: 100%; }
  #form .table th { padding: 32px 90px 32px 9px; font-size: 1.8rem; width: 245px; border-bottom: 1px solid  #e5e5e5; }
  #form .table th em { position: absolute; top: 34px; font-size: 1.3rem; padding: 3px 7px; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
  #form .table td { padding: 21px 10px 21px 40px; }
  #form .table tr:last-of-type th, #form .table tr:last-of-type td { border-bottom: 0; }
  #form .privacy { font-size: 1.6rem; padding: 13px 0 14px 0; text-align: center; }
  #form .privacy a:hover { text-decoration: none; }
  #form .agree { display: block; padding: 15px 0 15px 0; text-align: center; font-size: 1.6rem; letter-spacing: .06em; }
  #form .submitArea { margin-top: 40px; }
  #form .submitArea .btn a { cursor: pointer; }
  #form .contactBtn { width: 440px; padding-top: 27px; padding-bottom: 27px; }
  #form .contactBtn:hover { background-position: right 10px center; } }