@charset "utf-8";

@media only screen and (min-width: 0px) and (max-width: 750px) {

/* ────────────────────── *
 *                                              *
 * 導入部                                       *
 *                                              *
 * ────────────────────── */

#intro {
    background: url("../../image/bg-intro-sp.jpg") no-repeat top center / cover;
}

/* お問い合わせボタン */
#intro .contact {
    width: 69.0rem;
    padding: 2.0rem 0 4.6rem;
    margin: -35.0rem auto 10.0rem;
}
#intro .contact p.txt {
    margin-bottom: 4.0rem;
}
#intro .contact p.btn {
    width: 60.0rem;
}

/* 分からないこと */
#intro dl.question {
    width: 69.0rem;
}
#intro dl.question dt {
    margin: 0 auto -4.0rem;
}
#intro p.answer {
    width: 52.0rem;
    margin: -19.0rem auto 3.0rem;
}
#intro p.clear {
    width: 69.0rem;
}

/* ────────────────────── *
 *                                              *
 * 制作実績                                     *
 *                                              *
 * ────────────────────── */

#achievement {
    background: url("../../image/bg-txt-achievement.png") no-repeat center top 19.0rem / 72.8rem auto;
    padding: 10.0rem 0 0;
    position: relative;
}
#achievement h2 {
    font-size: 4.0rem;
    margin-bottom: 10.0rem;
}
#achievement h2 span {
    font-size: 5.4rem;
}
#achievement .flex {
    width: 69.0rem;
    margin: 0 auto 6.0rem;
    display: block;
}
#achievement .flex .left {
    width: 100%;
    margin-bottom: 4.0rem;
}
#achievement .flex .left dl.graph dd {
    bottom: 12.0rem;
}
#achievement .flex .left canvas {
    max-width: 57.0rem;
    max-height: 57.0rem;
}
#achievement .flex .right {
    width: 100%;
}
#achievement .flex .right h2 {
    width: 25.2rem;
}
#achievement .flex .right dl dt {
    margin-bottom: 4.0rem;
}
#achievement .flex .right dl dt a.link-detail {
    background: url("../../image/btn-more.png") no-repeat;
    background-size: 33.8rem 10.0rem;
    font-size: 2.8rem;
    line-height: 5.8rem;
    width: 33.8rem;
    height: 10.0rem;
}
#achievement .flex .right dl dt img {
    width: 100%;
}
#achievement .flex .right dl dd {
    font-size: 2.8rem;
}

/* ────────────────────── *
 *                                              *
 * 安心な理由                                   *
 *                                              *
 * ────────────────────── */

#reason .block-01 {
    background: #fcce25 url("../../image/bg-reason-sp.jpg") no-repeat top center / contain;
    padding: 11.0rem 0 33.0rem;
    position: relative;
}
#reason .block-01:after {
    content: "";
    background: url("../../image/bg-reason-block-01.png") no-repeat center center / cover;
    width: 100%;
    height: 24.5rem;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
#reason .block-02 {
    padding-bottom: 14.0rem;
}
#reason .block-02 .slanted {
    height: 90.0rem;
}
#reason .block-02 .slanted:before {
    border-width: 0 0 4.0rem 75.0rem;
}
#reason .block-03 {
    background: url("../../image/bg-reason-block-03-sp.jpg") no-repeat center center / cover;
    padding-bottom: 10.0rem;
}
#reason h2 {
    width: 58.0rem;
    margin: 0 auto 8.0rem;
}
#reason h2:before {
    width: 64.4rem;
    height: 12.0rem;
    right: 50%;
    bottom: -4.0rem;
    transform: translateX(50%);
}
#reason .strong {
    width: 75.0rem;
    padding-top: 35.0rem;
}
#reason .strong.detail-01 dl {
    margin-left: 7.0rem;
}
#reason .strong.detail-01 dl:before {
    width: 9.2rem;
    height: 27.2rem;
    left: -4.0rem;
    top: -35.0rem;
}
#reason .strong.detail-01 dl dt {
    width: 52.2rem;
    margin-bottom: 3.0rem;
}
#reason .strong.detail-01 dl dd {
    font-size: 2.8rem;
    line-height: 1.75;
    width: 90%;
}
#reason p.taiou {
    font-size: 3.4rem;
    margin-bottom: 9.0rem;
}
#reason dl.reach {
    width: 90%;
    margin: 0 auto 6.0rem;
}
#reason dl.reach dt {
    font-size: 4.8rem;
    line-height: 1.4;
    margin-bottom: 4.0rem;
    padding: 1.0rem 3.0rem;
}
#reason dl.reach dd {
    font-size: 2.6rem;
}

#reason .strong.detail-01 p.free {
    font-size: 3.0rem;
    margin-left: 9.0rem;
    margin-bottom: 3.0rem;
}
#reason .strong.detail-01 p.image {
    width: 60.0rem;
    right: 0;
}
#reason .strong.detail-02 {
    padding-top: 24.0rem;
}
#reason .strong.detail-02 dl {
    margin-left: 4.0rem;
    margin-bottom: 5.0rem;
    top: 0;
}
#reason .strong.detail-02 dl:before {
    width: 9.8rem;
    height: 27.2rem;
    right: 3.0rem;
    top: -36.0rem;
}
#reason .strong.detail-02 dl dt {
    width: 52.2rem;
}
#reason .strong.detail-02 dl dd {
    font-size: 2.6rem;
    width: 90%;
}
#reason .strong.detail-02 p.image {
    width: 60.0rem;
    left: 0;
    top: -12.0rem;
}
#reason .strong.detail-03 {
    padding-top: 0;
}
#reason .block-03 p.txt {
    margin: 0 auto 4.0rem;
    width: 90%;
}
#reason .block-03 p.title {
    font-size: 4.2rem;
    margin: 0 auto 4.0rem;
    width: 90%;
}
#reason .strong.detail-03 dl {
    margin-left: 15.0rem;
    margin-bottom: 0;
    top: -7.0rem;
}
#reason .strong.detail-03 dl:before {
    width: 9.8rem;
    height: 27.2rem;
    left: -12.0rem;
}
#reason .strong.detail-03 dl dt {
    width: 54.8rem;
}
#reason .strong.detail-03 dl dd {
    font-size: 2.8rem;
    line-height: 1.75;
    width: 57.0rem;
}
#reason #award {
    background: url("../../image/bg-reason-award-sp.png") no-repeat center center / cover;
    text-align: center;
    width: 67.0rem;
    height: 52.4rem;
    padding: 31.0rem 0 0;
    margin: 0 auto 5.0rem;
    display: block;
}
#reason #award dl dd {
    font-size: 2.8rem;
    line-height: 1.6;
}
#reason #variation {
    width: 69.0rem;
    padding-top: 3.0rem;
    padding-bottom: 5.0rem;
}
#reason #variation:before {
    content: "";
    background: url("../../image/bg-reason-variation.png") no-repeat center center / cover;
    width: 130.7rem;
    height: 64.4rem;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
#reason #variation:after {
    content: "";
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    filter: drop-shadow(1.6rem 1.6rem 1.6rem rgba(53, 48, 23, 0.3));
}
#reason #variation h3 {
    background: #09b4c3;
    margin-bottom: 2.0rem;
    position: relative;
    z-index: 1;
}
#reason #variation p {
    font-size: 2.8rem;
    line-height: 1.6;
    margin-bottom: 3.0rem;
}
#reason #variation ul {
    width: 71.4rem;
    margin: 0 -1.2rem 3.0rem;
    flex-wrap: wrap;
    justify-content: center;
}
#reason #variation ul li {
    width: 23.0rem;
    margin-right: 1.2rem;
    margin-bottom: 1.2rem;
}
#reason #variation ul li:nth-child(3n),
#reason #variation ul li:last-child {
    margin-right: 0;
}
#reason dl#original dt {
    width: 69.0rem;
}
#reason dl#original dd {
    font-size: 2.8rem;
    line-height: 1.35;
}
#reason dl#original dd strong {
    font-size: 3.2rem;
    margin-bottom: 1.0rem;
}
#reason p#txt-compare {
    width: 50.6rem;
    margin: 0 auto 4.0rem;
}
#reason ul#compare {
    width: 69.0rem;
    margin: 0 auto 6.0rem;
    display: block;
}
#reason ul#compare:before {
    background: url("../../image/bg-reason-compare-01-sp.png") no-repeat center center / cover;
    width: 9.2rem;
    height: 4.4rem;
    top: 47.0rem;
}
#reason ul#compare:after {
    background: url("../../image/bg-reason-compare-02-sp.png") no-repeat center center / cover;
    width: 13.0rem;
    height: 5.8rem;
    right: -2.0rem;
    top: calc(100% - 2.0rem);
}
#reason ul#compare li {
    width: 100%;
    margin-bottom: 9.0rem;
}
#reason ul#compare li:first-child {
    margin-right: 0;
}
#reason ul#compare li:last-child {
    margin-bottom: 0;
}
#reason dl#reach dt {
    font-size: 6.6rem;
    line-height: 1.3;
}
#reason dl#reach dt span.small {
    font-size: 5.6rem;
}
#reason dl#reach dt:before {
    content: none;
}
#reason dl#reach dt span.line {
    position: relative;
}
#reason dl#reach dt span.line:before {
    content: "";
    background: #fcce25;
    width: calc(100% + 2.0rem);
    height: 1.2rem;
    position: absolute;
    left: -2.0rem;
    bottom: 0.8rem;
    z-index: -1;
}
#reason dl#reach dd {
    font-size: 2.8rem;
    line-height: 1.6;
}
#reason h4 {
    width: 55.8rem;
    margin: 0 auto -2.0rem;
}
#reason dl#cognition {
    width: 75.0rem;
    display: block;
}
#reason dl#cognition dt {
    width: 100%;
}
#reason dl#cognition dd {
    font-size: 2.8rem;
    line-height: 1.6;
    width: 64.0rem;
    margin: 0 auto;
}
#reason p.txt {
    font-size: 2.6rem;
}
#reason p.goodpplan {
    font-size: 4.2rem;
}
#reason dl#cognition dd p.notice {
    font-size: 2.0rem;
    margin-top: 2.0rem;
}
#reason p#tv-station {
    width: 69.0rem;
    margin: 0 auto 5.0rem;
}
#reason .support {
    font-size: 2.8rem;
    line-height: 1.75;
    text-align: justify;
    width: 69.0rem;
    padding: 4.0rem;
    margin: 0 auto;
    display: block;
}
#reason .support p:first-of-type {
    float: left;
    width: 31.0rem;
    margin-left: -4.0rem;
    margin-right: 2.0rem;
}

/* ────────────────────── *
 *                                              *
 * お客様の声                                   *
 *                                              *
 * ────────────────────── */

#voice {
    background: #b6b2a1 url("../../image/bg-voice-sp.png") no-repeat center bottom / contain;
    padding: 3.0rem 0 40.0rem;
}
#voice h2 {
    width: 69.0rem;
}
#voice .detail {
    width: 69.0rem;
    padding: 0 4.0rem 7.0rem;
    margin: 0 auto 9.0rem;
}

#voice .detail dl.client {
    margin-bottom: 4.0rem;
    display: block;
}
#voice .detail dl.client dt {
    width: 40.0rem;
    margin-right: 0;
    margin-bottom: 5.0rem;
}
#voice .detail dl.client dt img {
    width: 100%;
}
#voice .detail dl.client dd {
    width: 100%;
    font-size: 3.6rem;
}
#voice .detail dl.client dd span {
    border-radius: 5px;
    margin-top: 10px;
    padding: 5px;
}
#voice .detail dl.client dd span.pc {
	display: none;
}
#voice .detail dl.client dd span.sp {
	display: inline-block;
}
#voice .detail .comment {
    display: block;
}
#voice .detail .comment .movie {
    width: 100%;
    margin-bottom: 3.0rem;
}
#voice .detail .comment .movie iframe {
    width: 61.0rem;
    height: 34.2rem;
}
#voice .detail .comment p {
    font-size: 2.8rem;
    line-height: 1.75;
    width: 100%;
}
#voice .btn-result {
    width: 90%;
    margin: 0 auto;
}
#voice .btn-result {
    width: 90%;
    margin: 0 auto;
}
#voice p.txt {
    font-size: 2.6rem;
}

/* ────────────────────── *
 *                                              *
 * 流れ                                         *
 *                                              *
 * ────────────────────── */

#flow {
    padding: 11.0rem 0 10.0rem;
    position: relative;
}
#flow h2 {
    width: 64.6rem;
    margin: 0 auto 10.0rem;
}
#flow h2 img {
    width: 100%;
}
#flow h2:before {
    width: 64.4rem;
    height: 16.4rem;
}
#flow ol {
    width: 58.0rem;
    margin: 0 3.0rem 6.0rem auto;
    display: block;
}
#flow ol li {
    margin-bottom: 1.0rem;
}
#flow p#schedule {
    width: 9.0rem;
    margin: 0;
    position: absolute;
    left: 3.0rem;
    top: 27.0rem;
}
#flow p#schedule:before {
    content: none;
}
#flow dl {
    width: 69.0rem;
    margin: 0 auto;
}
#flow dl dt {
    font-size: 4.0rem;
    line-height: 1.4;
    margin-bottom: 2.0rem;
}
#flow dl dd {
    font-size: 2.8rem;
    line-height: 1.75;
}

/* ────────────────────── *
 *                                              *
 * プラン                                       *
 *                                              *
 * ────────────────────── */

#plan {
    background: url("../../image/bg-plan.png") repeat top center;
    padding: 11.0rem 0 0;
}
#plan h2 {
    width: 27.4rem;
}
#plan h2 img {
    width: 100%;
}
#plan h2:before {
    width: 58.6rem;
    height: 16.2rem;
}
#plan #need {
    width: 69.0rem;
    margin: 0 auto 8.0rem;
}
#plan #need dl dt {
    font-size: 5.0rem;
    padding: 1.5rem;
}
#plan #need dl dd {
    font-size: 2.8rem;
    line-height: 1.75;
    padding: 4.0rem 2.5rem;
}
#plan #need dl dd p:first-of-type {
    width: 56.0rem;
}
#plan #need dl dd p img {
    width: 100%;
}
#plan h3 {
    width: 36.0rem;
}
#plan h3 img {
    width: 100%;
}
#plan p.txt {
    font-size: 2.8rem;
    line-height: 1.75;
    margin: 0 auto 5.0rem;
}
#plan .flex {
    width: 69.0rem;
    margin: 0 auto 11.0rem;
    display: block;
}
#plan .flex .flexitem {
    width: 100%;
    margin-bottom: 4.0rem;
}
#plan .flex .flexitem:last-of-type {
    margin-bottom: 0;
}
#plan .flex .flexitem p.name {
    font-size: 4.8rem;
    width: 57.0rem;
    padding: 2.0rem 0;
}
#plan .flex .flexitem .body {
    min-height: 0;
    padding: 6.0rem 3.0rem 3.0rem;
}
#plan .flex .flexitem .body p.price {
    width: 34.0rem;
}
#plan .flex .flexitem .body p.desc {
    font-size: 2.8rem;
    line-height: 1.75;
}
#plan .flex .flexitem .body p.include {
    width: 56.0rem;
    margin: 0 0 3.0rem;
}
#plan .flex .flexitem .body p.include img {
    width: 100%;
}
#plan .flex .flexitem .body > ul {
    font-size: 2.0rem;
}
#plan .flex .flexitem .body p.ask {
    font-size: 2.0rem;
}
#plan .flex .flexitem .body dl {
    padding: 3.0rem 6.0rem;
}
#plan .flex .flexitem .body dl dt {
    font-size: 3.6rem;
    padding-bottom: 2.0rem;
}
#plan .flex .flexitem .body dl dd ul {
    font-size: 2.8rem;
    line-height: 1.75;
}
#plan p.title {
    font-size: 4.0rem;
    line-height: 1.5;
    margin-bottom: 6.0rem;
}
#plan dl#example {
    width: 69.0rem;
    padding-top: 18.0rem;
    margin: 0 auto 10.0rem;
}
#plan dl#example:before {
    width: 15.0rem;
    height: 15.0rem;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
#plan dl#example dt {
    font-size: 2.8rem;
    line-height: 1.75;
    padding-bottom: 3.0rem;
    margin-bottom: 3.0rem;
}
#plan dl#example dt strong {
    font-size: 3.2rem;
}
#plan dl#example dd {
    font-size: 2.8rem;
    line-height: 1.75;
}
#plan #reasonable.flex {
    margin-bottom: 0;
}
#plan #reasonable.flex .flexitem {
    width: 100%;
}
#plan #reasonable.flex .flexitem p.name {
    font-size: 4.8rem;
    width: 57.0rem;
}
#plan #reasonable.flex .flexitem .body {
    width: 100%;
    margin-bottom: 14.0rem;
    padding: 2.0rem 2.0rem 2.0rem;
    min-height: inherit;
    position: relative;
}
#plan #reasonable.flex .flexitem:first-of-type .body:after {
    font-size: 14.0rem;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    top: inherit;
    right: inherit;
    bottom: -14.0rem;
}
#plan #reasonable.flex .flexitem:last-of-type .body:after {
    font-size: 14.0rem;
    left: 45%;
    transform: translateX(-45%);
    -webkit-transform: translateX(-45%);
    -ms-transform: translateX(-45%);
    top: -14.0rem;
    transform: rotate(90deg)
}
#plan #reasonable.flex .flexitem:last-of-type .body {
    margin-bottom: 6.0rem;
}
#plan #reasonable.flex .flexitem .body .price {
    margin-bottom: 0;
}
#plan #reasonable.flex .flexitem .body .start {
    font-size: 4.4rem;
    font-weight: 700;
    text-align: center;
    display: block;
    padding-top: 1.5rem;
}
#plan #reasonable.flex .flexitem .body .bgb {
    font-size: 3.6rem;
    padding: 2.0rem;
}
#plan p#option {
    width: 75.0rem;
}
#plan-op p.title {
    font-size: 4.0rem;
}
#plan-op p#option {
    width: 90%;
}
/* ────────────────────── *
 *                                              *
 * おまかせ　　                                 *
 *                                              *
 * ────────────────────── */
#omakase p.title {
    font-size: 3.2rem;
    margin-bottom: 7.0rem;
}
#omakase p.title span {
    font-size: 4.0rem;
}
#omakase ul {
    width: 80%;
}
#omakase ul li {
    width: 45%;
    margin-bottom: 5.0rem;
}
#omakase ul li img {
    margin-bottom: 2.0rem;
}
/* ────────────────────── *
 *                                              *
 * よくある質問                                 *
 *                                              *
 * ────────────────────── */

#faq {
    background: #cdcbbf url("../../image/bg-faq.jpg") no-repeat center top / cover;
    padding: 11.0rem 0 7.0rem;
}
#faq h2 {
    width: 37.6rem;
    margin: 0 auto 9.0rem;
}
#faq h2 img {
    width: 100%;
}
#faq h2:before {
    width: 40.4rem;
    height: 15.8rem;
}
#faq dl {
    width: 69.0rem;
}
#faq dl dt {
    font-size: 3.8rem;
    line-height: 1.5;
    padding: 2.0rem 2.5rem;
    display: flex;
}
#faq dl dt span.head {
    font-size: 6.4rem;
    line-height: 1;
}
#faq dl dd {
    font-size: 2.8rem;
    line-height: 1.75;
    text-align: justify;
    padding: 2.5rem;
}
#faq dl dd .head {
    font-size: 6.4rem;
    margin-right: 2.5rem;
}
#faq p.contact {
    font-size: 3.6rem;
    line-height: 1.4;
}

/* ────────────────────── *
 *                                              *
 * お問い合わせ                                 *
 *                                              *
 * ────────────────────── */

#contact {
    padding: 14.0rem 0 10.0rem;
}
#contact h2 {
    width: 56.2rem;
    margin: 0 auto 12.0rem;
}
#contact h2.confirm {
    width: 47.2rem;
}
#contact h2.send {
    width: 50.2rem;
}
#contact h2:before {
    background: url("../../image/bg-txt-contact-sp.png") no-repeat center center / cover;
    width: 55.6rem;
    height: 20.4rem;
}
#contact .inner {
    width: 69.0rem;
    padding: 4.0rem;
}
#contact .inner p.txt {
    font-size: 2.8rem;
    line-height: 1.75;
}
#contact .inner dl.table {
    display: block;
}
#contact .inner dl.table dt {
    font-size: 3.2rem;
    width: 100%;
    padding: 0;
    margin-bottom: 3.0rem;
    display: block;
}
#contact .inner dl.table dt.required:before {
    content: none;
}
#contact .inner dl.table dt.required:after {
    content: "必須";
    font-size: 2.8rem;
    color: #fff;
    background: #f2314d;
    display: inline-block;
    padding: 0.5rem 1.0rem;
    margin-left: 2.0rem;
    border-radius: 0.5rem;
}
#contact .inner dl.table dd {
    font-size: 2.8rem;
    line-height: 1.75;
    width: 100%;
    padding: 0;
    margin-bottom: 5.0rem;
}
#contact .inner dl.table.confirm dd {
    padding: 0 0 2.0rem;
    word-break: break-all;
}
#contact .inner dl.table dd input[type=text].size-full {
    font-size: 2.8rem;
}
#contact .inner dl.table dd input[type=text].size-short {
    font-size: 2.8rem;
    width: 30.0rem;
}
#contact .inner dl.table dd textarea {
    font-size: 2.8rem;
    height: 37.0rem;
}
#contact .inner dl.table dd a.ajaxzip {
    font-size: 2.8rem;
}
#contact .inner dl.table dd input[type=radio] + label {
    padding-left: 6.5rem;
}
#contact .inner dl.table dd input[type=radio] + label:before {
    width: 4.6rem;
    height: 4.6rem;
}
#contact .inner dl.table dd input[type=radio]:checked + label:after {
    width: 2.8rem;
    height: 2.8rem;
    left: 0.9rem;
}
#contact .inner p.subtitle {
    font-size: 2.8rem;
    line-height: 1.75;
}
#contact .inner #policy {
    font-size: 12px;
    line-height: 1.75;
    width: 100%;
    height: 27.0rem;
    margin-bottom: 8.0rem;
}
#contact .inner ul#btn-form {
    width: 100%;
    margin: 0;
    display: block;
}
#contact .inner ul#btn-form li {
    min-width: 0;
    margin: 0 0 2.0rem;
}
#contact .inner ul#btn-form li input {
    width: 61.0rem;
}
#contact .inner ul#btn-form li button,
#contact .inner ul#btn-form li button img {
    width: 100%;
}

.bnr-dl {
    top: inherit;
    bottom: 2%;
    width: 34.13333333333333333vw;
}
.bnr-dl .close {
    right: -2vw;
    top: 5vw;
    width: 8vw;
}
.popup-banner {
    width: 90%;
    margin: 0 auto;
}
#campaign {
    width: 90%;
    padding-bottom: 30px;
}
#campaign dl dd.viewmore {
    font-size: 2.8rem;
}
.txt-campaign {
    font-size: 12px;
    width: 100%;
    height: 175px;
    margin: 0 auto 10px;
}
p.title-campaign {
    font-size: 3.0rem;
    margin-bottom: 10px;
}
p.check-campaign {
    font-size: 3.0rem;
}
p.check-campaign span {
    font-size: 2.4rem;
}

}